pmx-canvas 0.3.0 → 0.3.2

package/src/client/nodes/ExtAppFrame.tsx

@@ -37,7 +37,7 @@ async function postJson<T>(url: string, body: Record<string, unknown>): Promise<
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(body),
   });
-  const json = await response.json() as {
+  const json = (await response.json()) as {
     ok: boolean;
     result?: T;
     error?: string;
@@ -59,22 +59,50 @@ export function isWebKitOnlyHost(userAgent: string): boolean {
   return /AppleWebKit/.test(userAgent) && !/Chrome|Chromium|CriOS|Edg|Android/.test(userAgent);
 }
 
-// Finding F (0.2.5): SERIALIZED WebKit repaint slots. The black tile is a cold-
-// hydration BURST problem — a single ext-app repaints fine into an idle panel (like
-// a live-created node, or expand+close), but several compositing at once overwhelm
-// WebKit and all stay black. We give each mounting ext-app an increasing slot so its
-// one-time repaint remount fires into a progressively-quieter panel (one app at a
-// time), turning the burst back into a sequence of single repaints. The shared
-// counter resets after the burst so a later board load starts from slot 0.
-let webkitRepaintSlot = 0;
-let webkitRepaintSlotResetTimer: ReturnType<typeof setTimeout> | null = null;
-export function nextWebkitRepaintSlot(): number {
-  const slot = webkitRepaintSlot++;
-  if (typeof window !== 'undefined') {
-    if (webkitRepaintSlotResetTimer) clearTimeout(webkitRepaintSlotResetTimer);
-    webkitRepaintSlotResetTimer = setTimeout(() => { webkitRepaintSlot = 0; }, 3000);
-  }
-  return slot;
+// Finding F (0.2.5, reworked 0.3.1): BOOT-AWARE serialized WebKit remount queue.
+// The black tile is a cold-hydration BURST problem — a single ext-app repaints fine
+// into an idle panel (like a live-created node, or expand+close), but several
+// compositing at once overwhelm WebKit and all stay black. The 0.2.5 fixed-stagger
+// slots (450ms apart) were NOT boot-aware: each recovery remount reboots the app
+// (~1-2s for Excalidraw), so N staggered remounts overlapped into a fresh burst and
+// the per-node one-shot flag was spent — exactly the multi-app reload blackout the
+// 0.3.1 report shows. This queue runs remounts strictly one at a time: each entry
+// performs its remount, then waits for that app's GENUINE initialized handshake
+// (or a bounded timeout for an app that never boots) plus a settle delay before the
+// next entry fires — so every remount lands in an idle panel, which is the
+// empirically always-successful recovery (what expand+close does manually).
+// Settle covers the scene DRAW: the app's initialized handshake fires before the
+// replayed tool result arrives and the scene is painted, so the queue waits for the
+// settled signal (bootstrap chain incl. tool-result send complete) plus this pause.
+export const WEBKIT_REMOUNT_SETTLE_MS = 1000;
+const WEBKIT_BOOT_TIMEOUT_MS = 7000;
+
+export interface WebkitRemountTask {
+  /** Perform the remount. Return false if the node no longer needs it (skips the boot wait). */
+  remount: () => boolean;
+  /** Resolves when the remounted app genuinely boots AND finishes its bootstrap replay, or after a bounded timeout. */
+  awaitBoot: () => Promise<void>;
+}
+
+// Bounded recovery trail readable via `webview evaluate` / devtools
+// (window.__PMX_EXTAPP_LOG). The WebKit compositor dropout is otherwise
+// unobservable from page JS — this is the only diagnostic surface.
+export function extAppRecoveryLog(nodeId: string, event: string): void {
+  if (typeof window === 'undefined') return;
+  const host = window as unknown as { __PMX_EXTAPP_LOG?: Array<{ t: number; nodeId: string; event: string }> };
+  host.__PMX_EXTAPP_LOG ??= [];
+  if (host.__PMX_EXTAPP_LOG.length < 500) host.__PMX_EXTAPP_LOG.push({ t: Date.now(), nodeId, event });
+}
+
+let webkitRemountChain: Promise<void> = Promise.resolve();
+export function enqueueWebkitRemount(task: WebkitRemountTask): void {
+  webkitRemountChain = webkitRemountChain
+    .then(async () => {
+      if (!task.remount()) return;
+      await task.awaitBoot();
+      await new Promise((resolve) => setTimeout(resolve, WEBKIT_REMOUNT_SETTLE_MS));
+    })
+    .catch(() => {});
 }
 
 export function shouldScheduleWebKitRepaint(status: ExtAppFrameStatus, hasReplayToolResult: boolean): boolean {
@@ -128,9 +156,7 @@ export async function sendExtAppBootstrapState(
 }
 
 export function resolveExtAppSandbox(value: unknown): string {
-  return typeof value === 'string' && value.trim().length > 0
-    ? value.trim()
-    : DEFAULT_EXT_APP_SANDBOX;
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : DEFAULT_EXT_APP_SANDBOX;
 }
 
 export function buildExtAppAxBridgeScript(axToken: string, nodeId: string): string {
@@ -231,7 +257,14 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   const bridgeReadyRef = useRef(false);
   const themeUnsubRef = useRef<(() => void) | null>(null);
   const webkitRepaintDoneRef = useRef(false);
-  const webkitRepaintTimerRef = useRef<number | null>(null);
+  const webkitRemountAttemptsRef = useRef(0);
+  // Genuine boot signal: set ONLY when the app completes the ui/initialize
+  // handshake (bridge.oninitialized) — NOT by the 1200ms bootstrap fallback,
+  // which flips status via notifications that resolve even into a dead iframe.
+  const appInitializedRef = useRef(false);
+  const bootWaitersRef = useRef<Array<() => void>>([]);
+  const remountQueuedRef = useRef(false);
+  const unmountedRef = useRef(false);
   const [status, setStatus] = useState<ExtAppFrameStatus>('loading');
   const [error, setError] = useState<string | null>(null);
   const [retryKey, setRetryKey] = useState(0);
@@ -246,10 +279,12 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   const rawToolCallId = node.data.toolCallId;
   const toolCallId: RequestId | undefined =
     typeof rawToolCallId === 'string' || typeof rawToolCallId === 'number' ? rawToolCallId : undefined;
-  const resourceMeta = node.data.resourceMeta as {
-    csp?: Record<string, unknown>;
-    permissions?: Record<string, unknown>;
-  } | undefined;
+  const resourceMeta = node.data.resourceMeta as
+    | {
+        csp?: Record<string, unknown>;
+        permissions?: Record<string, unknown>;
+      }
+    | undefined;
   const sessionStatus = node.data.sessionStatus as string | undefined;
   const sessionError = node.data.sessionError as string | undefined;
   const maxHeight = node.size.height;
@@ -262,9 +297,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   const axCaps = node.data.axCapabilities as { enabled?: boolean } | undefined;
   const axEnabled = axCaps?.enabled === true && typeof html === 'string' && html.length > 0;
   const axToken = useMemo(() => `ax-${crypto.randomUUID()}`, []);
-  const axBridgeScript = axEnabled
-    ? buildExtAppAxBridgeScript(axToken, nodeId)
-    : '';
+  const axBridgeScript = axEnabled ? buildExtAppAxBridgeScript(axToken, nodeId) : '';
   const iframeDocument = useIframeDocument(injectExtAppAxBridgeScript(html ?? '', axBridgeScript), iframeSandbox);
 
   useEffect(() => {
@@ -272,7 +305,10 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     function onAxMessage(event: MessageEvent) {
       if (event.source !== iframeRef.current?.contentWindow) return;
       const data = event.data as {
-        source?: string; token?: string; nodeId?: string; correlationId?: string;
+        source?: string;
+        token?: string;
+        nodeId?: string;
+        correlationId?: string;
         interaction?: { type?: unknown; payload?: unknown };
       } | null;
       if (!data || data.source !== 'pmx-canvas-ax' || data.token !== axToken || data.nodeId !== nodeId) return;
@@ -289,36 +325,71 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
       }).then((res) => {
         if (res.ok) showToast('context', 'AX interaction', interactionType, [nodeId]);
         else showToast('remove', 'AX interaction rejected', res.error ?? res.code ?? '', [nodeId]);
-        iframeRef.current?.contentWindow?.postMessage({
-          source: 'pmx-canvas-ax-ack',
-          token: axToken,
-          ...(data.correlationId ? { correlationId: data.correlationId } : {}),
-          interaction: { type: interactionType },
-          result: res,
-        }, '*');
+        iframeRef.current?.contentWindow?.postMessage(
+          {
+            source: 'pmx-canvas-ax-ack',
+            token: axToken,
+            ...(data.correlationId ? { correlationId: data.correlationId } : {}),
+            interaction: { type: interactionType },
+            result: res,
+          },
+          '*',
+        );
       });
     }
     window.addEventListener('message', onAxMessage);
     return () => window.removeEventListener('message', onAxMessage);
   }, [axEnabled, axToken, nodeId]);
 
-  // Finding F (0.2.4/0.2.5): in a WebKit host panel (e.g. the GitHub Copilot app's
-  // WKWebView, and Bun's headless WebKit WebView) the doubly-nested ext-app iframe
-  // (workbench iframe → mcp-app.html iframe) can come up as a black tile for nodes
-  // present at panel-load. The mcp-app shell loads blank, then the app boots over the
-  // bridge and draws its content AFTER load; under a cold-hydration burst WebKit does
-  // not composite that late draw, so the layer stays black (clean in Blink, and clean
-  // for a node created live into an already-idle panel). A parent-side transform/src
-  // nudge does NOT repair a black layer — only a full remount (new iframe element +
-  // bridge re-init, what expand+close does) does, and only when it lands in an idle
-  // moment. So: once the app has booted — `ready` for empty apps, `done` for restored
-  // apps that must replay saved tool output — under WebKit only, force ONE remount,
-  // SERIALIZED per node (an increasing slot delay) so concurrent ext-apps
-  // don't re-form a single compositing burst (the 0.2.4 fixed-250ms-on-mount remount
-  // fired mid-burst before the app had even booted, and all siblings re-raced —
-  // insufficient). This reliably repaints a SINGLE present-at-load ext-app; a board
-  // with several ext-apps present at WebKit panel-load can still black out (a host
-  // compositor limit — expand+close or Chrome remains the fallback; see SKILL.md).
+  // Enqueue one serialized remount attempt for this node (Finding F recovery).
+  // Attempts are capped so a persistently-failing app degrades to the manual
+  // fallback (expand+close / Retry) instead of remount-looping forever.
+  const WEBKIT_MAX_REMOUNT_ATTEMPTS = 3;
+  const scheduleWebkitRemount = (reason: string): void => {
+    if (webkitRemountAttemptsRef.current >= WEBKIT_MAX_REMOUNT_ATTEMPTS) {
+      extAppRecoveryLog(nodeId, `remount-cap-hit (${reason})`);
+      return;
+    }
+    if (remountQueuedRef.current) return; // an attempt is already queued and has not run yet
+    webkitRemountAttemptsRef.current += 1;
+    remountQueuedRef.current = true;
+    extAppRecoveryLog(nodeId, `remount-queued #${webkitRemountAttemptsRef.current} (${reason})`);
+    enqueueWebkitRemount({
+      remount: () => {
+        remountQueuedRef.current = false;
+        if (unmountedRef.current || expandedNodeId.value === nodeId) {
+          extAppRecoveryLog(nodeId, 'remount-skipped');
+          return false;
+        }
+        extAppRecoveryLog(nodeId, `remount-run #${webkitRemountAttemptsRef.current}`);
+        setRetryKey((k) => k + 1);
+        return true;
+      },
+      awaitBoot: () =>
+        new Promise<void>((resolve) => {
+          const timer = window.setTimeout(finish, WEBKIT_BOOT_TIMEOUT_MS);
+          function finish() {
+            window.clearTimeout(timer);
+            resolve();
+          }
+          bootWaitersRef.current.push(finish);
+        }),
+    });
+  };
+
+  // Finding F (0.2.4/0.2.5, reworked 0.3.1): in a WebKit host panel (e.g. the GitHub
+  // Copilot app's WKWebView, and Bun's headless WebKit WebView) the doubly-nested
+  // ext-app iframe (workbench iframe → mcp-app.html iframe) can come up as a black
+  // tile for nodes present at panel-load. The mcp-app shell loads blank, then the app
+  // boots over the bridge and draws its content AFTER load; under a cold-hydration
+  // burst WebKit does not composite that late draw, so the layer stays black (clean
+  // in Blink, and clean for a node created live into an already-idle panel). A
+  // parent-side transform/src nudge does NOT repair a black layer — only a full
+  // remount (new iframe element + bridge re-init, what expand+close does) does, and
+  // only when it lands in an idle moment. So: once the app has booted — `ready` for
+  // empty apps, `done` for restored apps that must replay saved tool output — under
+  // WebKit only, enqueue ONE recovery remount through the boot-aware queue above, so
+  // concurrent ext-apps remount strictly one at a time instead of re-bursting.
   // Strict no-op in Blink/Gecko; the e2e engine is unaffected. Inline instance only.
   useEffect(() => {
     if (expanded || webkitRepaintDoneRef.current) return;
@@ -326,19 +397,36 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     if (typeof navigator === 'undefined' || typeof window === 'undefined') return;
     if (!isWebKitOnlyHost(navigator.userAgent)) return;
     webkitRepaintDoneRef.current = true;
-    // Serialize: each ext-app repaints into a progressively-quieter panel so the
-    // cold-hydration burst becomes a sequence of single (always-successful) repaints.
-    // The timer is held in a ref and cleared only on UNMOUNT (separate effect), NOT in
-    // this effect's cleanup — otherwise a later status change (ready→done) would cancel
-    // the one-shot remount before it fires. The gate above runs once per node.
-    const delayMs = 250 + nextWebkitRepaintSlot() * 450;
-    webkitRepaintTimerRef.current = window.setTimeout(() => setRetryKey((k) => k + 1), delayMs);
+    scheduleWebkitRemount('post-boot-repaint');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [status, hasReplayToolResult]);
 
-  useEffect(() => () => {
-    if (webkitRepaintTimerRef.current !== null) window.clearTimeout(webkitRepaintTimerRef.current);
-  }, []);
+  // Never-booted watchdog (0.3.1): an iframe whose scripts never ran in the burst
+  // shows no error — the bootstrap fallback flips status via notifications that
+  // resolve into a dead window, so the tile just stays black. If the CURRENT frame
+  // has not completed the genuine initialize handshake within the watchdog window,
+  // retry it through the same serialized queue (bounded by the shared attempt cap).
+  const WEBKIT_BOOT_WATCHDOG_MS = 6000;
+  useEffect(() => {
+    if (expanded) return;
+    if (typeof navigator === 'undefined' || typeof window === 'undefined') return;
+    if (!isWebKitOnlyHost(navigator.userAgent)) return;
+    if (!iframeDocument.ready) return;
+    const timer = window.setTimeout(() => {
+      if (appInitializedRef.current || unmountedRef.current) return;
+      scheduleWebkitRemount('boot-watchdog');
+    }, WEBKIT_BOOT_WATCHDOG_MS);
+    return () => window.clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [frameKey, iframeDocument.ready, expanded]);
+
+  useEffect(
+    () => () => {
+      unmountedRef.current = true;
+      for (const waiter of bootWaitersRef.current.splice(0)) waiter();
+    },
+    [],
+  );
 
   const toMcpTheme = (theme: string): McpUiTheme => (theme === 'light' ? 'light' : 'dark');
   const isExpanded = expanded || expandedNodeId.value === nodeId;
@@ -368,10 +456,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     if (lastSentToolResultRef.current === pendingToolResult) {
       return null;
     }
-    if (
-      lastSentToolResultRef.current &&
-      extAppToolResultsMatch(lastSentToolResultRef.current, pendingToolResult)
-    ) {
+    if (lastSentToolResultRef.current && extAppToolResultsMatch(lastSentToolResultRef.current, pendingToolResult)) {
       lastSentToolResultRef.current = pendingToolResult;
       return null;
     }
@@ -409,6 +494,9 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     lastSentToolResultRef.current = undefined;
     toolResultSendingRef.current = null;
     bridgeReadyRef.current = false;
+    // New frame = new boot attempt: the genuine-initialized signal belongs to the
+    // CURRENT iframe. The queue's awaitBoot waits on this frame's handshake.
+    appInitializedRef.current = false;
 
     const clearFallbackTimer = (): void => {
       if (!fallbackTimer) return;
@@ -423,7 +511,9 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
         throw new Error('Ext-app iframe window is unavailable');
       }
 
-      const buildHostContext = (displayMode: DisplayMode = expandedNodeId.value === nodeId ? 'fullscreen' : 'inline') => ({
+      const buildHostContext = (
+        displayMode: DisplayMode = expandedNodeId.value === nodeId ? 'fullscreen' : 'inline',
+      ) => ({
         theme: toMcpTheme(canvasTheme.value),
         platform: 'web' as const,
         containerDimensions: resolveExtAppContainerDimensions(iframe, {
@@ -433,12 +523,14 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
         displayMode,
         locale: navigator.language,
         timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-        ...(toolDefinition ? {
-          toolInfo: {
-            id: toolCallId,
-            tool: toolDefinition,
-          },
-        } : {}),
+        ...(toolDefinition
+          ? {
+              toolInfo: {
+                id: toolCallId,
+                tool: toolDefinition,
+              },
+            }
+          : {}),
       });
 
       const scheduleHostContextUpdate = () => {
@@ -601,12 +693,23 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
         if (disposed) return;
         clearFallbackTimer();
         bridgeReadyRef.current = true;
+        appInitializedRef.current = true;
+        extAppRecoveryLog(nodeId, 'initialized');
         setStatus('ready');
         setError(null);
         void Promise.resolve(bridge.sendHostContextChange(buildHostContext(isExpanded ? 'fullscreen' : 'inline')))
           .then(() => sendExtAppBootstrapState(bridge, latestToolInputRef.current, undefined))
           .then(() => flushToolResult(bridge))
-          .then(() => nudgeHostContextAfterLayout())
+          .then(() => {
+            // Settled: handshake + bootstrap replay delivered — the app draws its
+            // scene right after this. Release the remount queue (which then adds
+            // its own settle pause covering the draw) only from this genuine path;
+            // the bootstrap fallback never releases it (a dead iframe must run the
+            // queue's bounded timeout instead of green-lighting the next remount).
+            extAppRecoveryLog(nodeId, 'settled');
+            for (const waiter of bootWaitersRef.current.splice(0)) waiter();
+            nudgeHostContextAfterLayout();
+          })
           .catch((err) => {
             const msg = err instanceof Error ? err.message : String(err);
             setError(`Bridge bootstrap failed: ${msg}`);
@@ -655,7 +758,10 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
       // at fire time so the widget keeps its fullscreen/inline context accurate.
       let firstFire = true;
       themeUnsubRef.current = canvasTheme.subscribe((newTheme) => {
-        if (firstFire) { firstFire = false; return; }
+        if (firstFire) {
+          firstFire = false;
+          return;
+        }
         if (disposed) return;
         bridge.setHostContext?.({
           ...buildHostContext(),
@@ -787,7 +893,17 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   }
 
   return (
-    <div style={{ flex: 1, width: '100%', height: '100%', minWidth: 0, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+    <div
+      style={{
+        flex: 1,
+        width: '100%',
+        height: '100%',
+        minWidth: 0,
+        minHeight: 0,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
       {sessionStatus && sessionStatus !== 'ready' && (
         <div
           style={{
@@ -852,9 +968,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
         </div>
       )}
       {status === 'loading' && (
-        <div style={{ padding: '8px', fontSize: '11px', color: 'var(--c-muted)' }}>
-          Connecting to ext-app viewer...
-        </div>
+        <div style={{ padding: '8px', fontSize: '11px', color: 'var(--c-muted)' }}>Connecting to ext-app viewer...</div>
       )}
       {/* Iframe stack: the widget renders a preview; when not expanded, a
           transparent click-catcher sits on top so the first click always

package/src/client/nodes/FileNode.tsx

@@ -8,20 +8,38 @@ import { runNodeAxInteraction } from './ax-node-actions';
 function langFromPath(path: string): string {
   const ext = path.split('.').pop()?.toLowerCase() ?? '';
   const map: Record<string, string> = {
-    ts: 'TypeScript', tsx: 'TSX', js: 'JavaScript', jsx: 'JSX',
-    py: 'Python', rs: 'Rust', go: 'Go', rb: 'Ruby',
-    java: 'Java', kt: 'Kotlin', swift: 'Swift', c: 'C', cpp: 'C++', h: 'C/C++',
-    css: 'CSS', html: 'HTML', json: 'JSON', yaml: 'YAML', yml: 'YAML',
-    md: 'Markdown', toml: 'TOML', sql: 'SQL', sh: 'Shell', bash: 'Shell',
-    xml: 'XML', graphql: 'GraphQL', proto: 'Protobuf',
+    ts: 'TypeScript',
+    tsx: 'TSX',
+    js: 'JavaScript',
+    jsx: 'JSX',
+    py: 'Python',
+    rs: 'Rust',
+    go: 'Go',
+    rb: 'Ruby',
+    java: 'Java',
+    kt: 'Kotlin',
+    swift: 'Swift',
+    c: 'C',
+    cpp: 'C++',
+    h: 'C/C++',
+    css: 'CSS',
+    html: 'HTML',
+    json: 'JSON',
+    yaml: 'YAML',
+    yml: 'YAML',
+    md: 'Markdown',
+    toml: 'TOML',
+    sql: 'SQL',
+    sh: 'Shell',
+    bash: 'Shell',
+    xml: 'XML',
+    graphql: 'GraphQL',
+    proto: 'Protobuf',
   };
   return map[ext] ?? (ext.toUpperCase() || 'Text');
 }
 
-export function FileNode({
-  node,
-  expanded = false,
-}: { node: CanvasNodeState; expanded?: boolean }) {
+export function FileNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const filePath = (node.data.path as string) || (node.data.content as string) || '';
   const title = (node.data.title as string) || filePath.split('/').pop() || 'File';
   const cachedContent = node.data.fileContent as string | undefined;
@@ -44,26 +62,30 @@ export function FileNode({
     let cancelled = false;
     setLoading(true);
     setError(null);
-    fetchFile(filePath).then(({ content: fileText }) => {
-      if (cancelled) return;
-      if (!fileText && fileText !== '') {
-        setError('File not found');
+    fetchFile(filePath)
+      .then(({ content: fileText }) => {
+        if (cancelled) return;
+        if (!fileText && fileText !== '') {
+          setError('File not found');
+          setLoading(false);
+          return;
+        }
+        setContent(fileText);
         setLoading(false);
-        return;
-      }
-      setContent(fileText);
-      setLoading(false);
-      // Cache content in node data so it survives re-renders
-      const lines = fileText.split('\n').length;
-      updateNodeData(node.id, { fileContent: fileText, lineCount: lines });
-      void updateNodeFromClient(node.id, { data: { fileContent: fileText, lineCount: lines } });
-    }).catch(() => {
-      if (!cancelled) {
-        setError('Failed to load file');
-        setLoading(false);
-      }
-    });
-    return () => { cancelled = true; };
+        // Cache content in node data so it survives re-renders
+        const lines = fileText.split('\n').length;
+        updateNodeData(node.id, { fileContent: fileText, lineCount: lines });
+        void updateNodeFromClient(node.id, { data: { fileContent: fileText, lineCount: lines } });
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setError('Failed to load file');
+          setLoading(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [filePath, cachedContent]);
 
   // Sync content when server pushes updates via SSE
@@ -80,27 +102,29 @@ export function FileNode({
     // Clear cached content to force a fresh fetch
     updateNodeData(node.id, { fileContent: undefined });
     void updateNodeFromClient(node.id, { data: { fileContent: undefined } });
-    fetchFile(filePath).then(({ content: fileText }) => {
-      setContent(fileText);
-      setLoading(false);
-      const lines = fileText.split('\n').length;
-      const updatedAt = new Date().toISOString();
-      updateNodeData(node.id, {
-        fileContent: fileText,
-        lineCount: lines,
-        updatedAt,
-      });
-      void updateNodeFromClient(node.id, {
-        data: {
+    fetchFile(filePath)
+      .then(({ content: fileText }) => {
+        setContent(fileText);
+        setLoading(false);
+        const lines = fileText.split('\n').length;
+        const updatedAt = new Date().toISOString();
+        updateNodeData(node.id, {
           fileContent: fileText,
           lineCount: lines,
           updatedAt,
-        },
+        });
+        void updateNodeFromClient(node.id, {
+          data: {
+            fileContent: fileText,
+            lineCount: lines,
+            updatedAt,
+          },
+        });
+      })
+      .catch(() => {
+        setError('Failed to reload');
+        setLoading(false);
       });
-    }).catch(() => {
-      setError('Failed to reload');
-      setLoading(false);
-    });
   }, [filePath, node.id]);
 
   const lang = langFromPath(filePath);
@@ -108,11 +132,7 @@ export function FileNode({
   const gutterWidth = `${String(lines.length).length + 1}ch`;
 
   if (!filePath) {
-    return (
-      <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>
-        No file path set
-      </div>
-    );
+    return <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>No file path set</div>;
   }
 
   return (
@@ -162,9 +182,7 @@ export function FileNode({
           {filePath}
         </span>
         {lineCount !== undefined && (
-          <span style={{ color: 'var(--c-dim)', fontSize: '10px', flexShrink: 0 }}>
-            {lineCount} lines
-          </span>
+          <span style={{ color: 'var(--c-dim)', fontSize: '10px', flexShrink: 0 }}>{lineCount} lines</span>
         )}
         {updatedAt && (
           <span style={{ color: 'var(--c-dim)', fontSize: '10px', flexShrink: 0 }}>
@@ -224,14 +242,8 @@ export function FileNode({
           borderRadius: expanded ? '0 0 8px 8px' : undefined,
         }}
       >
-        {loading && (
-          <div style={{ color: 'var(--c-dim)', padding: '12px', fontStyle: 'italic' }}>
-            Loading…
-          </div>
-        )}
-        {error && (
-          <div style={{ color: 'var(--c-danger)', padding: '12px' }}>{error}</div>
-        )}
+        {loading && <div style={{ color: 'var(--c-dim)', padding: '12px', fontStyle: 'italic' }}>Loading…</div>}
+        {error && <div style={{ color: 'var(--c-danger)', padding: '12px' }}>{error}</div>}
         {!loading && !error && (
           <pre
             style={{

package/src/client/nodes/GroupNode.tsx

@@ -26,14 +26,12 @@ export function GroupNode({ node }: GroupNodeProps) {
   return (
     <div class="group-node-body">
       <div class="group-summary">
-        <span class="group-child-count">{childCount} node{childCount !== 1 ? 's' : ''}</span>
+        <span class="group-child-count">
+          {childCount} node{childCount !== 1 ? 's' : ''}
+        </span>
         {typeSummary && <span class="group-type-summary">{typeSummary}</span>}
       </div>
-      {childCount === 0 && (
-        <div class="group-empty-hint">
-          Drag nodes here or use the selection bar to group nodes
-        </div>
-      )}
+      {childCount === 0 && <div class="group-empty-hint">Drag nodes here or use the selection bar to group nodes</div>}
     </div>
   );
 }