Keep the stepper and View error when a state error cannot be marked

When the verifier cannot tell which states allow the call, the diagram has
no marks and the error summary was not shown, so the state errors could not
be stepped through or opened in the Verification tab.

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

Author: CatarinaGamboa

client/src/webview/script.spec.ts

@@ -309,6 +309,23 @@ describe('webview script', () => {
         expect(root.querySelectorAll('.diagnostic-state-machine-btn')).toHaveLength(1);
     });
 
+    it('steps through state errors the verifier could not mark on the diagram', () => {
+        showDiagnostics([
+            stateError('First state error', { ...errorMachine('First', 'close'), errorContext: null }, 4),
+            stateError('Second state error', { ...errorMachine('Second', 'reset'), errorContext: null }, 9),
+        ]);
+        click('[data-tab="fsm"]');
+        expect(root.querySelector('.diagram-error-text')?.textContent).toBe('The call at line 5 is rejected');
+        expect(root.querySelector('.state-error-position')?.textContent).toBe('1 of 2');
+
+        click('.state-error-step-btn[data-step="1"]');
+        expect(root.querySelector('.diagram-title')?.textContent).toBe('Second');
+        expect(root.querySelector('.diagram-error-text')?.textContent).toBe('The call at line 10 is rejected');
+
+        click('#state-error-reveal-btn');
+        expect(root.querySelector('.nav-tab.selected')?.getAttribute('data-tab')).toBe('diagnostics');
+    });
+
     it('follows the state error at the cursor without overriding a later choice', () => {
         const first = stateError('First state error', errorMachine('First', 'close'), 4);
         const second = stateError('Second state error', errorMachine('Second', 'reset'), 9);

client/src/webview/script.ts

@@ -430,7 +430,7 @@ export function getScript(vscode: VSCodeApi, document: Document, window: Window)
                     ? createMermaidDiagram({ ...displayedStateMachine, errorContext: null }, diagramOrientation, showDiagramConditions)
                     : diagram;
                 renderStateMachineView(root, displayedStateMachine, diagram, diagramOrientation, showDiagramConditions, focusOnError,
-                    { index: shownIndex, count: stateErrors.length });
+                    { index: shownIndex, count: stateErrors.length, line: getStateErrorLine(shownError) });
                 renderedStateMachineView = getStateMachineViewKey();
                 if (displayedStateMachine) renderMermaidDiagram(document, window);
                 break;
@@ -441,6 +441,12 @@ export function getScript(vscode: VSCodeApi, document: Document, window: Window)
         }
     }
 
+    // the 1-based line of the shown error, null without a position, undefined when no error is shown
+    function getStateErrorLine(error: StateRefinementError | undefined): number | null | undefined {
+        if (!error) return undefined;
+        return error.position ? error.position.lineStart + 1 : null;
+    }
+
     function getCurrentStateErrors(): StateRefinementError[] {
         return getStateErrors(diagnostics, currentFile);
     }

client/src/webview/views/fsm/fsm.spec.ts

@@ -196,6 +196,29 @@ describe('state machine view', () => {
         expect(document.querySelector('#diagram-focus-btn')).toBeNull();
     });
 
+    it.each([
+        ['without the accepted states', {
+            calledMethod: 'open', receiver: 'counter', possibleStates: ['Closed'],
+            acceptedStates: [], validStates: [], invalidStates: [],
+        }, 'counter.open() is rejected here'],
+        ['without an error context', null, 'The call at line 12 is rejected'],
+    ])('keeps the stepper and View error for a shown error %s', (_, errorContext, text) => {
+        renderStateMachineView(document.body, machine({ errorContext }), diagram, 'TB', false, true, { index: 1, count: 2, line: 12 });
+
+        expect(document.querySelector('.diagram-error-text')?.textContent).toBe(text);
+        expect(document.querySelector('.state-error-position')?.textContent).toBe('2 of 2');
+        expect(button('state-error-reveal-btn')).not.toBeNull();
+        // nothing is marked, so there is nothing to explain or dim
+        expect(document.querySelector('.diagram-error-legend')).toBeNull();
+        expect(document.querySelector('#diagram-focus-btn')).toBeNull();
+    });
+
+    it('says the call is rejected without a line when the shown error has no position', () => {
+        renderStateMachineView(document.body, machine(), diagram, 'TB', false, true, { index: -1, count: 0, line: null });
+
+        expect(document.querySelector('.diagram-error-text')?.textContent).toBe('The call is rejected');
+    });
+
     it('clips the panned diagram below the error summary and legend', () => {
         renderStateMachineView(document.body, machine({
             errorContext: {

client/src/webview/views/fsm/fsm.ts

@@ -11,6 +11,8 @@ import { renderMainHeader } from "../sections";
 export type StateErrorNavigation = {
     index: number;
     count: number;
+    // the 1-based line of the shown error, if any error is shown
+    line?: number | null;
 };
 
 const NO_STATE_ERROR_NAVIGATION: StateErrorNavigation = { index: -1, count: 0 };
@@ -48,7 +50,9 @@ function renderStateMachineViewHtml(sm: LJStateMachine | undefined, diagram: str
                                 ${renderCodiconButton("copy", { id: "copy-diagram-btn", className: "diagram-control-btn", title: "Copy Mermaid Source" })}
                             </div>
                         </div>
-                        ${errorFocus ? renderStateErrorSummary(errorFocus, stateErrors) + renderStateErrorLegend(errorFocus, focusOnError) : ''}
+                        ${errorFocus
+                            ? renderStateErrorSummary(getStateErrorSummary(errorFocus), stateErrors) + renderStateErrorLegend(errorFocus, focusOnError)
+                            : isStateErrorShown(stateErrors) ? renderStateErrorSummary(getUnmarkedStateErrorSummary(sm, stateErrors), stateErrors) : ''}
                         ${showConditions && hasConditionExpansions ? /*html*/`
                             <div class="diagram-condition-legend">
                                 <span class="diagram-condition-legend-pre">Precondition</span>
@@ -67,7 +71,11 @@ function renderStateMachineViewHtml(sm: LJStateMachine | undefined, diagram: str
     `;
 }
 
-function renderStateErrorSummary(focus: StateErrorFocus, stateErrors: StateErrorNavigation): string {
+function isStateErrorShown(stateErrors: StateErrorNavigation): boolean {
+    return stateErrors.index >= 0 || stateErrors.line !== undefined;
+}
+
+function getStateErrorSummary(focus: StateErrorFocus): string {
     const call = getRejectedCallText(focus);
     const receiver = focus.receiver ? `<code>${escapeHtml(focus.receiver)}</code>` : 'the receiver';
     const rejected = `${call ? `<code>${escapeHtml(call)}</code>` : 'The call'} is rejected`;
@@ -81,6 +89,20 @@ function renderStateErrorSummary(focus: StateErrorFocus, stateErrors: StateError
         summary = `${rejected} here`;
     }
     if (allowedStates.length > 0) summary += ` \u00B7 allowed in state ${renderStates(allowedStates)}`;
+    return summary;
+}
+
+// the shown error cannot be marked on the diagram when the verifier could not tell which states allow the call
+function getUnmarkedStateErrorSummary(sm: LJStateMachine, stateErrors: StateErrorNavigation): string {
+    const context = sm.errorContext;
+    if (context?.calledMethod) {
+        const call = `${context.receiver ? `${context.receiver}.` : ''}${context.calledMethod}()`;
+        return `<code>${escapeHtml(call)}</code> is rejected here`;
+    }
+    return stateErrors.line ? `The call at line ${stateErrors.line} is rejected` : 'The call is rejected';
+}
+
+function renderStateErrorSummary(summary: string, stateErrors: StateErrorNavigation): string {
     return /*html*/`
         <div class="diagram-error-summary">
             <p class="diagram-error-text">${summary}</p>