fix(canvas): address code review findings for run panel

- Replace recursive reconnection with iterative loop + .catch() safety net
- Fix _handleStreamError type signature (void | Promise<void>)
- Add stale-state guards (terminalReceived/reconnecting) after each await
- Truncate node output display at 2000 chars to prevent DOM bloat
- Reset RunInputDialog state on reopen
- Clear ResumeForm input after submit
- Update gw-frontend skill with Phase 2 patterns and accurate RunSlice shape

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: prosdev

.claude/gw-plans/canvas/README.md

@@ -7,7 +7,7 @@ React 19 + React Flow frontend phases. Depends on execution phases 3-4 for API s
 | Phase | Plan | Status |
 |-------|------|--------|
 | 1 | [Canvas core](phase-1-canvas-core/overview.md) -- Home view, Start/LLM/End nodes, edge wiring, config panel, save/load | Complete |
-| 2 | [SSE run panel](phase-2-sse-run-panel/overview.md) -- SSE streaming, run panel, node highlighting, reconnection, resume | Planned |
+| 2 | [SSE run panel](phase-2-sse-run-panel/overview.md) -- SSE streaming, run panel, node highlighting, reconnection, resume | In progress |
 | 3 | Full node set -- Tool/Condition/HumanInput nodes, settings page | Not started |
 | 4 | Validation, run input modal, state panel | Not started |
 | 5 | Error handling, run history, debug panel, JSON schema panel | Not started |

.claude/skills/gw-frontend/SKILL.md

@@ -57,13 +57,14 @@ packages/canvas/src/
 ├── api/
 │   ├── client.ts     # base fetch wrapper + ApiError class
 │   ├── graphs.ts     # graph CRUD
-│   └── runs.ts       # run start + SSE stream (stub — Phase 2)
+│   └── runs.ts       # run start/cancel/resume + SSE stream
 ├── components/
 │   ├── canvas/       # GraphCanvas, FloatingToolbar, StampGhost, CanvasHint,
-│   │   │               CanvasHeader, SnapConnectionLine, CanvasRoute
+│   │   │               CanvasHeader, SnapConnectionLine, CanvasRoute,
+│   │   │               RunButton, RunInputDialog
 │   │   └── nodes/    # BaseNodeShell, StartNode, LLMNode, EndNode, nodeTypes
 │   ├── home/         # HomeView, GraphCard, NewGraphDialog
-│   ├── panels/       # NodeConfigPanel
+│   ├── panels/       # NodeConfigPanel, RunPanel, RunEventItem, ResumeForm
 │   │   └── config/   # StartNodeConfig, LLMNodeConfig, EndNodeConfig
 │   └── ui/           # Button, Card, Dialog, DropdownMenu, IconButton,
 │                       Input, Select, Sheet, Textarea, Toast, Tooltip
@@ -72,7 +73,7 @@ packages/canvas/src/
 ├── hooks/            # useNodePlacement, useNodeDrop, useBeforeUnload
 ├── store/
 │   ├── graphSlice.ts # graph CRUD, nodes/edges, spliceEdge, save/load
-│   ├── runSlice.ts   # SSE lifecycle (stub — Phase 2)
+│   ├── runSlice.ts   # SSE lifecycle, reconnection, start/cancel/resume
 │   └── uiSlice.ts    # darkMode, panelLayout, lastOpenedGraphId,
 │                       newGraphDialogOpen, toast (message + variant)
 ├── styles/           # tokens.ts (color/spacing design tokens)
@@ -89,13 +90,17 @@ interface RunSlice {
   runStatus: "idle" | "running" | "paused" | "reconnecting"
             | "completed" | "error" | "connection_lost"
   activeNodeId: string | null
-  stateHistory: unknown[]
   runOutput: GraphEvent[]
   reconnectAttempts: number
-  startRun: (input: unknown) => Promise<void>
-  resumeRun: (input: string) => Promise<void>
-  cancelRun: () => void
-  handleConnectionLost: () => void
+  lastEventId: number
+  finalState: unknown | null
+  durationMs: number | null
+  errorMessage: string | null
+  pausedPrompt: string | null
+  startRun: (graphId: string, input?: Record<string, unknown>) => Promise<void>
+  cancelRun: () => Promise<void>
+  resumeRun: (input: unknown) => Promise<void>
+  resetRun: () => void
 }
 
 // uiSlice.ts — UI preferences only, no credentials
@@ -150,6 +155,16 @@ POST /resume                      POST /resume
 POST /resume call returns. The server has a 2-second timeout — if no SSE
 arrives, execution continues anyway (events stored in run history).
 
+## Phase 2 patterns
+
+Patterns from Canvas Phase 2 — follow these in subsequent phases:
+
+- **`NodeMapEntry`** — `RunPanel` builds a `Map<string, { label, type, config }>` from graph nodes and passes it to `RunEventItem` for UUID→label resolution
+- **Iterative reconnection** — `_handleStreamError` uses a for-loop (not recursion) with exponential backoff, wrapped in `.catch()` to guarantee landing in a terminal state
+- **`terminalReceived` guard** — module-level flag set before disconnecting on terminal events, prevents `onerror` → reconnection race after `graph_completed`
+- **Output truncation** — `RunEventItem` caps output display at 2000 chars to prevent DOM bloat from large LLM responses
+- **Dialog state reset** — `RunInputDialog` resets form state via `useEffect` when `open` transitions to `true`
+
 ## Settings panel — read-only, no key input
 
 The settings panel shows provider status only. It never has key input fields.

packages/canvas/src/components/canvas/RunInputDialog.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@ui/Button";
 import { Dialog } from "@ui/Dialog";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 interface RunInputDialogProps {
   open: boolean;
@@ -16,6 +16,14 @@ export function RunInputDialog({
   const [value, setValue] = useState("{}");
   const [parseError, setParseError] = useState<string | null>(null);
 
+  // Reset to clean state when dialog opens
+  useEffect(() => {
+    if (open) {
+      setValue("{}");
+      setParseError(null);
+    }
+  }, [open]);
+
   const handleSubmit = () => {
     try {
       const parsed: unknown = JSON.parse(value);

packages/canvas/src/components/panels/ResumeForm.tsx

@@ -22,7 +22,10 @@ export function ResumeForm({ prompt, onSubmit }: ResumeFormProps) {
         />
         <Button
           variant="primary"
-          onClick={() => onSubmit(value)}
+          onClick={() => {
+            onSubmit(value);
+            setValue("");
+          }}
           disabled={!value.trim()}
         >
           Resume

packages/canvas/src/components/panels/RunEventItem.tsx

@@ -11,6 +11,8 @@ import {
 } from "lucide-react";
 import { formatDuration, formatTime } from "../../utils/format";
 
+const MAX_OUTPUT_LENGTH = 2000;
+
 export interface NodeMapEntry {
   label: string;
   type: string;
@@ -69,11 +71,15 @@ export function RunEventItem({
       const label = resolveLabel(event.data.node_id, nodeMap);
       const entry = nodeMap?.get(event.data.node_id);
       const output = event.data.output as Record<string, unknown> | null;
-      const outputText = output
+      const rawOutput = output
         ? Object.values(output)
             .map((v) => (typeof v === "string" ? v : JSON.stringify(v)))
             .join("\n")
         : null;
+      const outputTruncated = rawOutput && rawOutput.length > MAX_OUTPUT_LENGTH;
+      const outputText = outputTruncated
+        ? `${rawOutput.slice(0, MAX_OUTPUT_LENGTH)}…`
+        : rawOutput;
 
       const showProviderModel: boolean =
         entry?.type === "llm" &&

packages/canvas/src/store/runSlice.ts

@@ -43,7 +43,7 @@ export interface RunSlice {
   /** @internal — called by SSE event handlers */
   _handleEvent: (event: GraphEvent, eventId: number | null) => void;
   /** @internal — called on SSE connection error */
-  _handleStreamError: (error: Error) => void;
+  _handleStreamError: (error: Error) => void | Promise<void>;
   /** @internal — close the current SSE connection */
   _disconnect: () => void;
 }
@@ -228,7 +228,7 @@ export const useRunStore = create<RunSlice>((set) => ({
     });
   },
 
-  _handleStreamError: async (_error) => {
+  _handleStreamError: (_error) => {
     if (terminalReceived) return;
     if (reconnecting) return;
 
@@ -239,75 +239,95 @@ export const useRunStore = create<RunSlice>((set) => ({
     }
     if (!state.activeRunId) return;
 
-    const attempt = state.reconnectAttempts + 1;
-    if (attempt > MAX_RECONNECT_ATTEMPTS) {
+    const runId = state.activeRunId;
+    reconnecting = true;
+
+    // Iterative reconnection loop with exponential backoff
+    (async () => {
+      for (
+        let attempt = state.reconnectAttempts + 1;
+        attempt <= MAX_RECONNECT_ATTEMPTS;
+        attempt++
+      ) {
+        // Bail if the run was cancelled/reset while we were waiting
+        if (terminalReceived || !reconnecting) return;
+
+        set({ runStatus: "reconnecting", reconnectAttempts: attempt });
+
+        // Exponential backoff: 1s, 2s, 4s
+        await sleep(1000 * 2 ** (attempt - 1));
+
+        // Re-check after sleep — run may have been cancelled/reset
+        if (terminalReceived || !reconnecting) return;
+
+        try {
+          const status = await getRunStatus(runId);
+
+          // Run was cancelled/reset during the fetch
+          if (terminalReceived || !reconnecting) return;
+
+          switch (status.status) {
+            case "completed":
+              reconnecting = false;
+              set({
+                runStatus: "completed",
+                finalState: status.final_state,
+                durationMs: status.duration_ms,
+                activeNodeId: null,
+              });
+              return;
+
+            case "running": {
+              reconnecting = false;
+              const { _handleEvent, _handleStreamError, lastEventId } =
+                useRunStore.getState();
+              cleanup = connectStream(
+                runId,
+                { onEvent: _handleEvent, onError: _handleStreamError },
+                lastEventId,
+              );
+              set({ runStatus: "running", reconnectAttempts: 0 });
+              return;
+            }
+
+            case "paused":
+              reconnecting = false;
+              set({
+                runStatus: "paused",
+                activeNodeId: status.node_id,
+                pausedPrompt: status.prompt,
+              });
+              return;
+
+            case "error":
+              reconnecting = false;
+              set({
+                runStatus: "error",
+                errorMessage: status.error ?? "Run failed on server",
+                activeNodeId: null,
+              });
+              return;
+          }
+        } catch {
+          // Status check failed — continue to next attempt
+        }
+      }
+
+      // All attempts exhausted
       reconnecting = false;
       set({
         runStatus: "connection_lost",
         errorMessage: "Connection lost after 3 attempts",
       });
       showToast("Connection lost — run may still be executing on the server");
-      return;
-    }
-
-    reconnecting = true;
-    set({ runStatus: "reconnecting", reconnectAttempts: attempt });
-
-    // Exponential backoff: 1s, 2s, 4s
-    await sleep(1000 * 2 ** (attempt - 1));
-
-    try {
-      const status = await getRunStatus(state.activeRunId);
-
-      switch (status.status) {
-        case "completed":
-          reconnecting = false;
-          set({
-            runStatus: "completed",
-            finalState: status.final_state,
-            durationMs: status.duration_ms,
-            activeNodeId: null,
-          });
-          break;
-
-        case "running": {
-          reconnecting = false;
-          const { _handleEvent, _handleStreamError, lastEventId } =
-            useRunStore.getState();
-          cleanup = connectStream(
-            state.activeRunId,
-            { onEvent: _handleEvent, onError: _handleStreamError },
-            lastEventId,
-          );
-          set({ runStatus: "running", reconnectAttempts: 0 });
-          break;
-        }
-
-        case "paused":
-          reconnecting = false;
-          set({
-            runStatus: "paused",
-            activeNodeId: status.node_id,
-            pausedPrompt: status.prompt,
-          });
-          break;
-
-        case "error":
-          reconnecting = false;
-          set({
-            runStatus: "error",
-            errorMessage: status.error ?? "Run failed on server",
-            activeNodeId: null,
-          });
-          break;
-      }
-    } catch {
-      // Status check failed — retry
+    })().catch(() => {
+      // Safety net — ensure we always land in a terminal state
       reconnecting = false;
-      useRunStore
-        .getState()
-        ._handleStreamError(new Error("Status check failed"));
-    }
+      set({
+        runStatus: "connection_lost",
+        errorMessage: "Connection lost unexpectedly",
+      });
+    });
   },
 
   _disconnect: () => {