pmx-canvas 0.3.0 → 0.3.2

package/src/client/nodes/HtmlNode.tsx

@@ -16,7 +16,13 @@ export function HtmlNode({
   presentation = false,
   presentationExitToken,
   autoFocus = false,
-}: { node: CanvasNodeState; expanded?: boolean; presentation?: boolean; presentationExitToken?: string; autoFocus?: boolean }) {
+}: {
+  node: CanvasNodeState;
+  expanded?: boolean;
+  presentation?: boolean;
+  presentationExitToken?: string;
+  autoFocus?: boolean;
+}) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const theme = canvasTheme.value;
   // Stable per-mount nonce that authorizes parent → iframe theme-update messages.
@@ -25,11 +31,12 @@ export function HtmlNode({
   const axToken = useMemo(() => `ax-${crypto.randomUUID()}`, []);
   // Per-mount nonce for the content-height reporter (node grows to fit content).
   const frameToken = useMemo(() => `frame-${crypto.randomUUID()}`, []);
-  const html = typeof node.data.html === 'string'
-    ? node.data.html
-    : typeof node.data.content === 'string'
-      ? node.data.content
-      : '';
+  const html =
+    typeof node.data.html === 'string'
+      ? node.data.html
+      : typeof node.data.content === 'string'
+        ? node.data.content
+        : '';
   const v = useMemo(() => surfaceContentHash(html), [html]);
 
   // The in-canvas iframe and the "Open as site" tab load the SAME server-rendered
@@ -38,9 +45,18 @@ export function HtmlNode({
   // via postMessage below (no reload), while `v` reloads the frame when the HTML
   // itself changes.
   const surfaceSrc = useMemo(
-    () => (html
-      ? nodeSurfaceUrl(node.id, { theme, themeToken, present: presentation, presentToken: presentationExitToken, v, axToken, frameToken })
-      : ''),
+    () =>
+      html
+        ? nodeSurfaceUrl(node.id, {
+            theme,
+            themeToken,
+            present: presentation,
+            presentToken: presentationExitToken,
+            v,
+            axToken,
+            frameToken,
+          })
+        : '',
     [html, presentation, presentationExitToken, themeToken, v, node.id, axToken, frameToken],
   );
 
@@ -57,7 +73,10 @@ export function HtmlNode({
       // nodeId are a second gate, not the only one.
       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 !== node.id) return;
@@ -75,13 +94,16 @@ export function HtmlNode({
         if (res.ok) showToast('context', 'AX interaction', interactionType, [node.id]);
         else showToast('remove', 'AX interaction rejected', res.error ?? res.code ?? '', [node.id]);
         // Report #55: ack back to the surface so it can self-confirm (e.g. "queued ✓").
-        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);
@@ -89,12 +111,15 @@ export function HtmlNode({
   }, [axToken, node.id]);
 
   useEffect(() => {
-    iframeRef.current?.contentWindow?.postMessage({
-      source: 'pmx-canvas-html-node',
-      type: 'theme-update',
-      token: themeToken,
-      theme,
-    }, '*');
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        source: 'pmx-canvas-html-node',
+        type: 'theme-update',
+        token: themeToken,
+        theme,
+      },
+      '*',
+    );
     if (autoFocus) iframeRef.current?.focus();
   }, [theme, themeToken]);
 
@@ -107,12 +132,15 @@ export function HtmlNode({
   const axStateValue = axSurfaceState.value;
   useEffect(() => {
     if (!axEnabled || axStateValue == null) return;
-    iframeRef.current?.contentWindow?.postMessage({
-      source: 'pmx-canvas-html-node',
-      type: 'ax-update',
-      token: axToken,
-      state: axStateValue,
-    }, '*');
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        source: 'pmx-canvas-html-node',
+        type: 'ax-update',
+        token: axToken,
+        state: axStateValue,
+      },
+      '*',
+    );
   }, [axEnabled, axStateValue, axToken]);
 
   useEffect(() => {
@@ -122,29 +150,31 @@ export function HtmlNode({
   }, [autoFocus, surfaceSrc]);
 
   const handleFrameLoad = () => {
-    iframeRef.current?.contentWindow?.postMessage({
-      source: 'pmx-canvas-html-node',
-      type: 'theme-update',
-      token: themeToken,
-      theme,
-    }, '*');
-    if (axEnabled && axSurfaceState.value != null) {
-      iframeRef.current?.contentWindow?.postMessage({
+    iframeRef.current?.contentWindow?.postMessage(
+      {
         source: 'pmx-canvas-html-node',
-        type: 'ax-update',
-        token: axToken,
-        state: axSurfaceState.value,
-      }, '*');
+        type: 'theme-update',
+        token: themeToken,
+        theme,
+      },
+      '*',
+    );
+    if (axEnabled && axSurfaceState.value != null) {
+      iframeRef.current?.contentWindow?.postMessage(
+        {
+          source: 'pmx-canvas-html-node',
+          type: 'ax-update',
+          token: axToken,
+          state: axSurfaceState.value,
+        },
+        '*',
+      );
     }
     if (autoFocus) iframeRef.current?.focus();
   };
 
   if (!html) {
-    return (
-      <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>
-        No HTML content set
-      </div>
-    );
+    return <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>No HTML content set</div>;
   }
 
   // SECURITY: sandbox is intentionally `allow-scripts` ONLY. Do NOT add

package/src/client/nodes/ImageNode.tsx

@@ -7,19 +7,17 @@ import { getImageNodeWarnings } from './image-warnings';
  * Supports: file paths (served via /api/canvas/image/:nodeId), data URIs, and URLs.
  * Features: fit-to-container, zoom in/out within node, pan when zoomed.
  */
-export function ImageNode({
-  node,
-  expanded = false,
-}: { node: CanvasNodeState; expanded?: boolean }) {
+export function ImageNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const src = (node.data.src as string) || '';
   const alt = (node.data.alt as string) || (node.data.title as string) || 'Image';
   const caption = (node.data.caption as string) || '';
   const warnings = getImageNodeWarnings(node);
 
   // Determine the image source URL
-  const imageSrc = src.startsWith('data:') || src.startsWith('http://') || src.startsWith('https://')
-    ? src
-    : `/api/canvas/image/${node.id}`;
+  const imageSrc =
+    src.startsWith('data:') || src.startsWith('http://') || src.startsWith('https://')
+      ? src
+      : `/api/canvas/image/${node.id}`;
 
   const [loaded, setLoaded] = useState(false);
   const [error, setError] = useState(false);
@@ -54,13 +52,16 @@ export function ImageNode({
     setZoom((z) => Math.max(0.25, Math.min(10, z * delta)));
   }, []);
 
-  const handlePointerDown = useCallback((e: PointerEvent) => {
-    if (zoom <= 1) return;
-    e.stopPropagation();
-    dragging.current = true;
-    lastPos.current = { x: e.clientX, y: e.clientY };
-    (e.target as HTMLElement).setPointerCapture(e.pointerId);
-  }, [zoom]);
+  const handlePointerDown = useCallback(
+    (e: PointerEvent) => {
+      if (zoom <= 1) return;
+      e.stopPropagation();
+      dragging.current = true;
+      lastPos.current = { x: e.clientX, y: e.clientY };
+      (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    },
+    [zoom],
+  );
 
   const handlePointerMove = useCallback((e: PointerEvent) => {
     if (!dragging.current) return;
@@ -92,10 +93,7 @@ export function ImageNode({
   const zoomPct = Math.round(zoom * 100);
 
   return (
-    <div
-      class={`image-node ${expanded ? 'image-node-expanded' : ''}`}
-      ref={containerRef}
-    >
+    <div class={`image-node ${expanded ? 'image-node-expanded' : ''}`} ref={containerRef}>
       {warnings.length > 0 && (
         <div class="image-node-warning-stack">
           {warnings.map((warning) => (
@@ -114,9 +112,7 @@ export function ImageNode({
         onPointerUp={handlePointerUp}
         style={{ cursor: zoom > 1 ? 'grab' : 'default' }}
       >
-        {!loaded && !error && (
-          <div class="image-node-loading">Loading…</div>
-        )}
+        {!loaded && !error && <div class="image-node-loading">Loading…</div>}
         {error && (
           <div class="image-node-error">
             <div class="image-node-error-icon">⚠</div>
@@ -143,12 +139,7 @@ export function ImageNode({
           <span class="image-node-meta">
             {sizeLabel && <span>{sizeLabel}</span>}
             {zoom !== 1 && (
-              <button
-                type="button"
-                class="image-node-zoom-reset"
-                onClick={resetView}
-                title="Reset zoom"
-              >
+              <button type="button" class="image-node-zoom-reset" onClick={resetView} title="Reset zoom">
                 {zoomPct}% ↺
               </button>
             )}

package/src/client/nodes/InlineFormatBar.tsx

@@ -4,13 +4,7 @@ import { promptAndInsertLink, wrapSelectionInCode } from './inline-editor-comman
 
 const GAP = 8;
 
-type ExecCommand =
-  | 'bold'
-  | 'italic'
-  | 'strikeThrough'
-  | 'formatBlock'
-  | 'insertUnorderedList'
-  | 'insertOrderedList';
+type ExecCommand = 'bold' | 'italic' | 'strikeThrough' | 'formatBlock' | 'insertUnorderedList' | 'insertOrderedList';
 
 type BlockTag = 'H1' | 'H2' | 'H3' | 'P' | 'BLOCKQUOTE';
 
@@ -54,13 +48,7 @@ function runAction(action: Action): void {
 
 /** Floating selection toolbar for a contentEditable host. Mounts once; while
  *  visible, positions itself above the current selection's viewport rect. */
-export function InlineFormatBar({
-  hostRef,
-  onChange,
-}: {
-  hostRef: RefObject<HTMLElement>;
-  onChange: () => void;
-}) {
+export function InlineFormatBar({ hostRef, onChange }: { hostRef: RefObject<HTMLElement>; onChange: () => void }) {
   const [visible, setVisible] = useState(false);
   const [pos, setPos] = useState({ top: 0, left: 0 });
   const [barWidth, setBarWidth] = useState(0);
@@ -91,10 +79,7 @@ export function InlineFormatBar({
     // Use measured width if we have it; fall back to a conservative estimate
     // on the very first show before layout completes.
     const width = barWidth || 420;
-    const left = Math.max(
-      GAP,
-      Math.min(rect.left + rect.width / 2 - width / 2, window.innerWidth - width - GAP),
-    );
+    const left = Math.max(GAP, Math.min(rect.left + rect.width / 2 - width / 2, window.innerWidth - width - GAP));
     const top = Math.max(GAP, rect.top - GAP - 36);
     setPos({ top, left });
     setVisible(true);
@@ -160,9 +145,7 @@ export function InlineFormatBar({
             {a.icon}
           </button>
         );
-        return a.dividerBefore
-          ? [<span key={`div-${i}`} class="md-inline-format-divider" />, btn]
-          : [btn];
+        return a.dividerBefore ? [<span key={`div-${i}`} class="md-inline-format-divider" />, btn] : [btn];
       })}
     </div>
   );

package/src/client/nodes/InlineMarkdownEditor.tsx

@@ -120,4 +120,3 @@ export function InlineMarkdownEditor({
     </>
   );
 }
-

package/src/client/nodes/LedgerNode.tsx

@@ -20,9 +20,7 @@ export function LedgerNode({ node }: { node: CanvasNodeState }) {
   const entries = Object.entries(data).filter(([key]) => !HIDDEN_LEDGER_KEYS.has(key));
 
   if (lines.length === 0 && entries.length === 0) {
-    return (
-      <div style={{ color: 'var(--c-dim)', fontSize: '12px', fontStyle: 'italic' }}>No ledger data</div>
-    );
+    return <div style={{ color: 'var(--c-dim)', fontSize: '12px', fontStyle: 'italic' }}>No ledger data</div>;
   }
 
   return (
@@ -61,7 +59,15 @@ export function LedgerNode({ node }: { node: CanvasNodeState }) {
           <span style={{ color: 'var(--c-muted)', fontSize: '11px', flexShrink: 0 }}>
             {key.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase())}
           </span>
-          <span style={{ color: 'var(--c-text)', fontFamily: 'var(--mono)', fontSize: '11px', textAlign: 'right', wordBreak: 'break-word' }}>
+          <span
+            style={{
+              color: 'var(--c-text)',
+              fontFamily: 'var(--mono)',
+              fontSize: '11px',
+              textAlign: 'right',
+              wordBreak: 'break-word',
+            }}
+          >
             {typeof value === 'object' ? JSON.stringify(value) : String(value ?? '—')}
           </span>
         </div>

package/src/client/nodes/MarkdownNode.tsx

@@ -31,10 +31,7 @@ function RenderedMarkdown({
   return <div ref={containerRef} class={className} style={style} />;
 }
 
-export function MarkdownNode({
-  node,
-  expanded = false,
-}: { node: CanvasNodeState; expanded?: boolean }) {
+export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const path = node.data.path as string;
   const [content, setContent] = useState('');
   const [rendered, setRendered] = useState('');
@@ -302,9 +299,7 @@ export function MarkdownNode({
               onSave={handleInlineSave}
             />
           ) : (
-            <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '24px' }}>
-              Loading…
-            </div>
+            <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '24px' }}>Loading…</div>
           )}
         </div>
         <button type="button" class="md-edit-fab" onClick={() => setSourceMode(true)}>
@@ -323,9 +318,7 @@ export function MarkdownNode({
         html={rendered}
         style={{ padding: rendered ? '0' : '12px', color: rendered ? undefined : 'var(--c-dim)' }}
       />
-      {!loaded && (
-        <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>Loading…</div>
-      )}
+      {!loaded && <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>Loading…</div>}
       {loaded && !rendered && (
         <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>Empty node</div>
       )}

package/src/client/nodes/McpAppNode.tsx

@@ -43,8 +43,7 @@ export function isSameOriginFrameDocumentUrl(url: string, origin = window.locati
   try {
     const baseOrigin = new URL(origin).origin;
     const resolved = new URL(url, baseOrigin);
-    return resolved.origin === baseOrigin &&
-      resolved.pathname.startsWith('/api/canvas/frame-documents/');
+    return resolved.origin === baseOrigin && resolved.pathname.startsWith('/api/canvas/frame-documents/');
   } catch {
     return false;
   }
@@ -89,7 +88,10 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
     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 !== node.id) return;
@@ -107,13 +109,16 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
         if (res.ok) showToast('context', 'AX interaction', interactionType, [node.id]);
         else showToast('remove', 'AX interaction rejected', res.error ?? res.code ?? '', [node.id]);
         // Report #55: ack back to the viewer so the surface can self-confirm.
-        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);
@@ -125,12 +130,15 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
   const axStateValue = axSurfaceState.value;
   const pushAxState = () => {
     if (!isAxViewer || !axToken || axStateValue == null) return;
-    iframeRef.current?.contentWindow?.postMessage({
-      source: 'pmx-canvas-html-node',
-      type: 'ax-update',
-      token: axToken,
-      state: axStateValue,
-    }, '*');
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        source: 'pmx-canvas-html-node',
+        type: 'ax-update',
+        token: axToken,
+        state: axStateValue,
+      },
+      '*',
+    );
   };
   useEffect(pushAxState, [isAxViewer, axToken, axStateValue]);
 
@@ -156,9 +164,7 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
           <span>⚠</span>
           <span>Cannot embed — opened externally</span>
         </div>
-        {fallbackReason && (
-          <div style={{ color: 'var(--c-muted)', fontSize: '11px' }}>Reason: {fallbackReason}</div>
-        )}
+        {fallbackReason && <div style={{ color: 'var(--c-muted)', fontSize: '11px' }}>Reason: {fallbackReason}</div>}
         <a
           href={url}
           target="_blank"
@@ -171,9 +177,7 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
         >
           {url}
         </a>
-        {sourceServer && (
-          <div style={{ color: 'var(--c-dim)', fontSize: '10px' }}>Source: {sourceServer}</div>
-        )}
+        {sourceServer && <div style={{ color: 'var(--c-dim)', fontSize: '10px' }}>Source: {sourceServer}</div>}
       </div>
     );
   }

package/src/client/nodes/MdFormatBar.tsx

@@ -62,13 +62,16 @@ export function MdFormatBar({ textareaRef }: { textareaRef: { current: HTMLTextA
     };
   }, [textareaRef, updatePosition]);
 
-  const runAction = useCallback((action: FormatAction) => {
-    const ta = textareaRef.current;
-    if (ta) {
-      action.action(ta);
-      ta.focus();
-    }
-  }, [textareaRef]);
+  const runAction = useCallback(
+    (action: FormatAction) => {
+      const ta = textareaRef.current;
+      if (ta) {
+        action.action(ta);
+        ta.focus();
+      }
+    },
+    [textareaRef],
+  );
 
   if (!visible) return null;
 

package/src/client/nodes/PromptNode.tsx

@@ -1,11 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { updateNodeData } from '../state/canvas-store';
-import {
-  fetchSlashCommands,
-  renderMarkdown,
-  submitCanvasPrompt,
-  submitThreadReply,
-} from '../state/intent-bridge';
+import { fetchSlashCommands, renderMarkdown, submitCanvasPrompt, submitThreadReply } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
 
 // Cached slash commands — fetched once on first use.
@@ -16,10 +11,7 @@ async function getCommands() {
 }
 
 /** Find the best matching slash command for a query prefix. */
-function matchSlashCommand(
-  query: string,
-  commands: Array<{ name: string }>,
-): string | null {
+function matchSlashCommand(query: string, commands: Array<{ name: string }>): string | null {
   if (!query) return null;
   const lower = query.toLowerCase();
   const exact = commands.find((c) => c.name.toLowerCase() === lower);
@@ -121,15 +113,10 @@ function ErrorBanner({ message, onDismiss }: { message: string | null; onDismiss
   );
 }
 
-export function PromptNode({
-  node,
-  expanded = false,
-}: { node: CanvasNodeState; expanded?: boolean }) {
+export function PromptNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   // Backward compat: old canvas states have flat { text, status } data.
   // New threads use { turns[], threadStatus }. Detect format by presence of turns array.
-  const turns: ThreadTurn[] = Array.isArray(node.data.turns)
-    ? (node.data.turns as ThreadTurn[])
-    : [];
+  const turns: ThreadTurn[] = Array.isArray(node.data.turns) ? (node.data.turns as ThreadTurn[]) : [];
   const isLegacy = turns.length === 0;
   const legacyText = (node.data.text as string) || '';
   const legacyStatus = (node.data.status as string) || 'draft';
@@ -201,7 +188,9 @@ export function PromptNode({
         setRenderedTurns(next);
       });
 
-      return () => { cancelled = true; };
+      return () => {
+        cancelled = true;
+      };
     };
 
     if (!hasStreaming) {
@@ -243,9 +232,7 @@ export function PromptNode({
       text: trimmed, // keep for backward compat display
     });
     setDraft('');
-    const ctxIds = Array.isArray(node.data.contextNodeIds)
-      ? (node.data.contextNodeIds as string[])
-      : undefined;
+    const ctxIds = Array.isArray(node.data.contextNodeIds) ? (node.data.contextNodeIds as string[]) : undefined;
     const result = await submitCanvasPrompt(trimmed, node.position, node.id, ctxIds, node.id);
     if (!result.ok) {
       updateNodeData(node.id, { turns: [], threadStatus: 'draft', text: '', status: 'draft' });
@@ -260,9 +247,7 @@ export function PromptNode({
     const savedReply = replyDraft;
     setError(null);
     // Optimistically add user turn
-    const currentTurns = Array.isArray(node.data.turns)
-      ? [...(node.data.turns as ThreadTurn[])]
-      : [];
+    const currentTurns = Array.isArray(node.data.turns) ? [...(node.data.turns as ThreadTurn[])] : [];
     currentTurns.push({ role: 'user', text: trimmed, status: 'pending' });
     updateNodeData(node.id, { turns: currentTurns, threadStatus: 'pending' });
     setReplyDraft('');
@@ -319,17 +304,12 @@ export function PromptNode({
     [handleReplySubmit, replyDraft],
   );
 
-  const ctxCount = Array.isArray(node.data.contextNodeIds)
-    ? (node.data.contextNodeIds as string[]).length
-    : 0;
+  const ctxCount = Array.isArray(node.data.contextNodeIds) ? (node.data.contextNodeIds as string[]).length : 0;
 
   // ── Draft mode (no turns yet): show initial textarea ──
   if (isDraft && turns.length === 0) {
     return (
-      <div
-        class="prompt-node-inner"
-        style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: '8px' }}
-      >
+      <div class="prompt-node-inner" style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: '8px' }}>
         <ContextBadge count={ctxCount} />
         <ErrorBanner message={error} onDismiss={() => setError(null)} />
         <textarea
@@ -380,10 +360,7 @@ export function PromptNode({
   // ── Legacy flat format (old nodes without turns) ──
   if (isLegacy) {
     return (
-      <div
-        class="prompt-node-inner"
-        style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
-      >
+      <div class="prompt-node-inner" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <div
           style={{
             flex: 1,
@@ -425,10 +402,7 @@ export function PromptNode({
 
   // ── Thread view: render all turns ──
   return (
-    <div
-      class="prompt-node-inner"
-      style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
-    >
+    <div class="prompt-node-inner" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       <ContextBadge count={ctxCount} />
       <ErrorBanner message={error} onDismiss={() => setError(null)} />
 
@@ -439,7 +413,10 @@ export function PromptNode({
             {i > 0 && <div class="thread-turn-divider" />}
             {turn.role === 'user' ? (
               <div class="thread-turn-user">
-                <div class="thread-turn-role"><span class="status-dot" />You</div>
+                <div class="thread-turn-role">
+                  <span class="status-dot" />
+                  You
+                </div>
                 <div
                   style={{
                     fontSize: expanded ? '15px' : '13px',
@@ -454,7 +431,10 @@ export function PromptNode({
               </div>
             ) : (
               <div class="thread-turn-assistant">
-                <div class="thread-turn-role"><span class={`status-dot${turn.status === 'streaming' ? ' pulsing' : ''}`} />PMX</div>
+                <div class="thread-turn-role">
+                  <span class={`status-dot${turn.status === 'streaming' ? ' pulsing' : ''}`} />
+                  PMX
+                </div>
                 {turn.status === 'streaming' && !turn.text && (
                   <div
                     style={{
@@ -481,9 +461,7 @@ export function PromptNode({
                     </>
                   ) : (
                     <div style={{ color: 'var(--c-muted)', fontStyle: 'italic' }}>
-                      {turn.status === 'streaming'
-                        ? 'Waiting for response…'
-                        : turn.text || 'Empty response'}
+                      {turn.status === 'streaming' ? 'Waiting for response…' : turn.text || 'Empty response'}
                     </div>
                   )}
                 </div>
@@ -525,13 +503,7 @@ export function PromptNode({
                     : 'var(--c-muted)',
             }}
           >
-            {isStreaming
-              ? 'Streaming…'
-              : isPending
-                ? 'Sending…'
-                : isAnswered
-                  ? 'Answered'
-                  : threadStatus}
+            {isStreaming ? 'Streaming…' : isPending ? 'Sending…' : isAnswered ? 'Answered' : threadStatus}
           </span>
           <span style={{ fontSize: '10px', color: 'var(--c-muted)' }}>
             {turns.length} turn{turns.length !== 1 ? 's' : ''}