Put the error actions on the title line and collapse hints

Show in state machine sits on the line of the error title with the other
actions, and hints start closed. A hint the user opens stays open after a new
verification.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: CatarinaGamboa

client/src/webview/diagnostic-reveal.ts

@@ -29,3 +29,12 @@ export function getDiagnosticRevealTargetFromKey(value?: string | null): Diagnos
         }
     };
 }
+
+/**
+ * Gets a key that identifies a diagnostic across verifications
+ * This is its reveal key, or, without a position, its file, title, and message, which never match the reveal key pattern
+ */
+export function getDiagnosticKey(diagnostic: LJDiagnostic): string {
+    const target = getDiagnosticRevealTarget(diagnostic);
+    return target ? getDiagnosticRevealTargetKey(target) : `${diagnostic.file}#${diagnostic.title}#${diagnostic.message}`;
+}

client/src/webview/script.spec.ts

@@ -402,10 +402,29 @@ describe('webview script', () => {
         showDiagnostics([stateError('State refinement error', errorMachine('Counter', 'close'))]);
 
         expect(root.querySelector('.diagnostic-state-machine-btn')?.textContent?.trim()).toBe('Show in state machine');
-        expect(root.querySelector('.diagnostic-actions .diagnostic-state-machine-btn')).toBeNull();
-        // right below the error message, before its details
-        const firstSection = root.querySelector('.error-item .section')!;
-        expect(root.querySelector('.diagnostic-state-machine-btn')!.compareDocumentPosition(firstSection)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+        // on the line of the title, before the other actions
+        const actions = root.querySelector('.error-item .diagnostic-title-row .diagnostic-actions')!;
+        expect(actions.firstElementChild?.classList.contains('diagnostic-state-machine-btn')).toBe(true);
+        expect(actions.querySelector('.copy-diagnostic-btn')).not.toBeNull();
+    });
+
+    it('keeps hints closed until opened, and open after a new verification', () => {
+        const error = { ...stateError('State refinement error', errorMachine('Counter', 'close')), hint: 'Call open() first' };
+        showDiagnostics([error]);
+        const hint = () => root.querySelector<HTMLDetailsElement>('.error-item .hint-section')!;
+        expect(hint().open).toBe(false);
+        expect(hint().querySelector('summary')?.textContent).toBe('Hint');
+        expect(hint().querySelector('pre')?.textContent).toBe('Call open() first');
+
+        hint().open = true;
+        hint().dispatchEvent(new Event('toggle'));
+        receive({ type: 'diagnostics', diagnostics: [{ ...error }] });
+        expect(hint().open).toBe(true);
+
+        hint().open = false;
+        hint().dispatchEvent(new Event('toggle'));
+        receive({ type: 'diagnostics', diagnostics: [{ ...error }] });
+        expect(hint().open).toBe(false);
     });
 
     it('opens on the first state error of a newly opened file', () => {

client/src/webview/script.ts

@@ -7,7 +7,7 @@ import type { LJDiagnostic, RefinementMismatchError, StateRefinementError } from
 import type { Range } from "../types/context";
 import type { LJStateMachine } from "../types/fsm";
 import type { ExtensionStatus } from "../state";
-import type { NavTab } from "./views/sections";
+import { setHintOpen, type NavTab } from "./views/sections";
 import { copyDiagnosticToClipboard, getDisplayDiagnostics, renderDiagnosticsView } from "./views/diagnostics/diagnostics";
 import type { LJContext } from "../types/context";
 import { ContextSectionState, renderContextView } from "./views/context/context";
@@ -56,6 +56,13 @@ export function getScript(vscode: VSCodeApi, document: Document, window: Window)
     vscode.postMessage({ type: 'ready' });    
 
     // on click
+    // toggle does not bubble, so it is caught on its way down
+    root.addEventListener('toggle', (e: Event) => {
+        const details = e.target as HTMLDetailsElement;
+        const key = details.getAttribute?.('data-hint-key');
+        if (key !== null && key !== undefined) setHintOpen(key, details.open);
+    }, true);
+
     root.addEventListener('click', (e: MouseEvent) => {
         const target = e.target instanceof Element ? e.target : null;
         if (!target) return;

client/src/webview/state-errors.ts

@@ -1,5 +1,5 @@
 import type { LJDiagnostic, StateRefinementError } from "../types/diagnostics";
-import { getDiagnosticRevealTarget, getDiagnosticRevealTargetKey } from "./diagnostic-reveal";
+import { getDiagnosticKey, getDiagnosticRevealTargetKey } from "./diagnostic-reveal";
 
 /**
  * Gets the state errors reported in the current file, in source order
@@ -28,9 +28,7 @@ export function getAllStateErrors(diagnostics: LJDiagnostic[] | undefined): Stat
 }
 
 export function getStateErrorKey(error: StateRefinementError): string {
-    const target = getDiagnosticRevealTarget(error);
-    // errors without a position never match the position pattern of reveal keys
-    return target ? getDiagnosticRevealTargetKey(target) : `${error.file}#${error.title}#${error.message}`;
+    return getDiagnosticKey(error);
 }
 
 /**

client/src/webview/styles.ts

@@ -195,12 +195,28 @@ export function getStyles(): string {
             line-height: 1;
             pointer-events: none;
         }
+        .diagnostic-title-row {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.25rem 0.75rem;
+        }
+        .diagnostic-title-row h3 {
+            min-width: 0;
+        }
         .diagnostic-actions {
-            position: absolute;
-            top: 0.5rem;
-            right: 0.5rem;
             display: flex;
+            align-items: center;
             gap: 0.25rem;
+            margin-left: auto;
+        }
+        .hint-summary {
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .hint-section[open] .hint-summary {
+            margin-bottom: 0.25rem;
         }
         .copy-diagnostic-btn,
         .diagnostic-context-btn {
@@ -252,8 +268,7 @@ export function getStyles(): string {
             display: inline-flex;
             align-items: center;
             gap: 0.4rem;
-            margin: 0 0 1rem;
-            padding: 0.25rem 0.6rem;
+            padding: 0.15rem 0.5rem;
             color: var(--vscode-button-secondaryForeground);
             background-color: var(--vscode-button-secondaryBackground);
             font-size: 0.85rem;

client/src/webview/views/diagnostics/errors.ts

@@ -14,18 +14,19 @@ import type {
     SyntaxError,
 } from "../../../types/diagnostics";
 import { renderCopyDiagnosticButton } from "./diagnostics";
+import { getDiagnosticKey } from "../../diagnostic-reveal";
 
 export function renderErrors(errors: LJError[]): string {
     return /*html*/`
         <ul>
             ${errors.map((error, index) => {
                 return /*html*/`
                 <li class="diagnostic-item error-item" ${renderDiagnosticDataAttributes(error)}>
-                    <div class="diagnostic-actions">
+                    ${renderError(error, /*html*/`
+                        ${renderDiagnosticStateMachineAction(error, index)}
                         ${renderDiagnosticContextAction(error)}
                         ${renderCopyDiagnosticButton('error', index)}
-                    </div>
-                    ${renderError(error, renderDiagnosticStateMachineAction(error, index))}
+                    `)}
                 </li>
             `;
             }).join("")}
@@ -69,15 +70,15 @@ const errorContentRenderers: ErrorRendererMap = {
 /**
  * Renders the error content
  * @param error The error to render
- * @param headerActions Actions shown below the error message
+ * @param actions Actions shown on the line of the error title
  */
-export function renderError(error: LJError, headerActions = ''): string {
+export function renderError(error: LJError, actions = ''): string {
     const message = error.type === 'refinement-error' || error.type === 'state-refinement-error' ? error.customMessage : error.message;
-    const header = renderDiagnosticHeader(error.title, message || '');
+    const header = renderDiagnosticHeader(error.title, message || '', actions);
     const content = (errorContentRenderers[error.type] as (error: LJError) => string)?.(error) || '';
-    const hint = renderHint(error.hint);
+    const hint = renderHint(error.hint, getDiagnosticKey(error));
     const location = renderLocation(error);
-    return /*html*/`${header}${headerActions}${content}${hint}${location}`;
+    return /*html*/`${header}${content}${hint}${location}`;
 }
 
 function renderDiagnosticContextAction(error: LJError): string {

client/src/webview/views/diagnostics/warnings.ts

@@ -1,16 +1,14 @@
 import type { CustomWarning, ExternalClassNotFoundWarning, ExternalMethodNotFoundWarning, LJWarning, UnsatisfiableRefinementWarning } from "../../../types/diagnostics";
 import { renderDiagnosticDataAttributes, renderExpressionSection, renderDiagnosticHeader, renderHint, renderLocation } from "../sections";
 import { renderCopyDiagnosticButton } from "./diagnostics";
+import { getDiagnosticKey } from "../../diagnostic-reveal";
 
 export function renderWarnings(warnings: LJWarning[]): string {
     return /*html*/`
         <ul>
                 ${warnings.map((warning, index) => /*html*/`
                 <li class="diagnostic-item warning-item" ${renderDiagnosticDataAttributes(warning)}>
-                    <div class="diagnostic-actions">
-                        ${renderCopyDiagnosticButton('warning', index)}
-                    </div>
-                    ${renderWarning(warning)}
+                    ${renderWarning(warning, renderCopyDiagnosticButton('warning', index))}
                 </li>
             `).join("")}
         </ul>    
@@ -33,10 +31,10 @@ const warningContentRenderers: WarningContentRenderers = {
     "custom-warning": (_: CustomWarning) => ""
 };
 
-export function renderWarning(warning: LJWarning): string {
-    const header = renderDiagnosticHeader(warning.title, warning.message);
+export function renderWarning(warning: LJWarning, actions = ''): string {
+    const header = renderDiagnosticHeader(warning.title, warning.message, actions);
     const content = (warningContentRenderers[warning.type] as (warning: LJWarning) => string)?.(warning) || '';
-    const hint = renderHint(warning.hint);
+    const hint = renderHint(warning.hint, getDiagnosticKey(warning));
     const location = renderLocation(warning);
     return /*html*/`${header}${content}${hint}${location}`;
 }

client/src/webview/views/sections.ts

@@ -21,8 +21,29 @@ export const renderSection = (title: string, body: string): string => /*html*/
 export const renderExpressionSection = (title: string, expression: string): string => /*html*/
     renderCustomSection(title, renderHighlightedExpression(expression));
 
-export const renderHint = (hint: string | null): string =>
-    hint?.trim() ? renderCustomSection('Hint', `<pre>${escapeHtml(hint.trim())}</pre>`) : '';
+// hints the user opened, kept open when the diagnostics are rendered again
+const openHints = new Set<string>();
+
+export function setHintOpen(key: string, open: boolean) {
+    if (open) openHints.add(key);
+    else openHints.delete(key);
+}
+
+/**
+ * Renders the hint of a diagnostic, closed until the user opens it
+ * @param hint The hint text
+ * @param key Identifies the diagnostic, so an opened hint stays open after a new verification
+ */
+export function renderHint(hint: string | null, key?: string): string {
+    if (!hint?.trim()) return '';
+    const open = key !== undefined && openHints.has(key);
+    return /*html*/`
+        <details class="section hint-section"${key !== undefined ? ` data-hint-key="${escapeHtml(key)}"` : ''}${open ? ' open' : ''}>
+            <summary class="hint-summary">Hint</summary>
+            <pre>${escapeHtml(hint.trim())}</pre>
+        </details>
+    `;
+}
 
 export const renderToggleSection = (title: string, targetId: string, isExpanded: boolean = true): string => /*html*/`
     <button class="context-toggle-btn" data-context-toggle="${targetId}" aria-expanded="${isExpanded ? 'true' : 'false'}" type="button">
@@ -31,8 +52,13 @@ export const renderToggleSection = (title: string, targetId: string, isExpanded:
     </button>
     `;
 
-export const renderDiagnosticHeader = (title: string, message: string): string => /*html*/
-    `<h3>${title}</h3><div class="diagnostic-header"><p>${message}</p></div>`;
+export const renderDiagnosticHeader = (title: string, message: string, actions = ''): string => /*html*/`
+    <div class="diagnostic-title-row">
+        <h3>${title}</h3>
+        ${actions.trim() ? `<div class="diagnostic-actions">${actions}</div>` : ''}
+    </div>
+    <div class="diagnostic-header"><p>${message}</p></div>
+`;
 
 export function renderDiagnosticDataAttributes(diagnostic: LJDiagnostic): string {
     const target = getDiagnosticRevealTarget(diagnostic);