pmx-canvas 0.9.3 → 0.11.0

package/src/client/nodes/McpAppNode.tsx

@@ -1,11 +1,9 @@
-import type { RefObject } from 'preact';
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef } from 'preact/hooks';
 import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { canvasThemeScheme } from '../../shared/themes.js';
 import type { CanvasNodeState } from '../types';
 import { axSurfaceState, canvasTheme } from '../state/canvas-store';
-import { showToast } from '../state/attention-bridge';
-import { iframeMode } from '../state/iframe-mode';
+import { RefreshingViewerFrame } from './ViewerFrame';
 import { shouldContentFitIframeNode } from '../canvas/auto-fit';
 import { ExtAppFrame } from './ExtAppFrame';
 import { useAxSurfaceBridge } from './use-ax-surface-bridge';
@@ -16,6 +14,7 @@ import { isHostedWorkbench } from '../state/workbench-transport';
 
 function withViewerParams(
   url: string,
+  theme: string,
   expanded: boolean,
   specVersion?: number,
   axToken?: string,
@@ -28,9 +27,7 @@ function withViewerParams(
   try {
     const hosted = isHostedWorkbench() && url.startsWith('/');
     const resolved = new URL(url, hosted ? 'https://pmx.invalid' : window.location.origin);
-    // The json-render viewer + artifacts understand dark/light — collapse named
-    // themes (sepia → light, midnight/arctic/ember/forest → dark) to a scheme.
-    resolved.searchParams.set('theme', canvasThemeScheme(canvasTheme.value));
+    resolved.searchParams.set('theme', theme);
     if (expanded) resolved.searchParams.set('display', 'expanded');
     // Streaming json-render nodes bump specVersion as patches accumulate; including
     // it in the src reloads the iframe so it re-reads the latest accumulated spec.
@@ -61,139 +58,6 @@ export function isSameOriginFrameDocumentUrl(url: string, origin = window.locati
   }
 }
 
-type ViewerFrameSource = { src?: string; srcdoc?: string };
-
-/**
- * Keep the last painted viewer in front while its replacement navigates. Viewer
- * specs are immutable documents, so updates normally change `?v=` and reload the
- * iframe; putting the new document behind the old one conceals Chromium's white
- * navigation paint without suppressing rendering. Wait for restore and render commit,
- * then two animation frames before the old viewer is removed.
- */
-export function RefreshingViewerFrame({
-  source,
-  iframeRef,
-  onLoad,
-  onDocumentLoad,
-  title,
-  className = 'mcp-app-frame',
-  sandbox = 'allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox',
-  allow = 'clipboard-read; clipboard-write',
-  tabIndex,
-}: {
-  source: ViewerFrameSource;
-  iframeRef: RefObject<HTMLIFrameElement>;
-  onLoad: () => void;
-  onDocumentLoad?: (frame: HTMLIFrameElement, signal: AbortSignal) => void | Promise<boolean | 'cancelled' | void>;
-  title: string;
-  className?: string;
-  sandbox?: string;
-  allow?: string;
-  tabIndex?: number;
-}) {
-  const sourceKey = source.src ?? source.srcdoc ?? '';
-  const [painted, setPainted] = useState({ key: sourceKey, source, attempt: 0 });
-  const [pending, setPending] = useState<{ key: string; source: ViewerFrameSource; attempt: number } | null>(null);
-  const promotionRef = useRef(0);
-  const readiness = useRef(new Set<AbortController>());
-
-  useLayoutEffect(() => {
-    promotionRef.current += 1;
-    for (const controller of readiness.current) controller.abort();
-    readiness.current.clear();
-    if (!sourceKey || sourceKey === painted.key) {
-      setPending(null);
-      return;
-    }
-    if (!painted.key) {
-      setPainted({ key: sourceKey, source, attempt: 0 });
-      return;
-    }
-    setPending({ key: sourceKey, source, attempt: 0 });
-  }, [sourceKey, painted.key]);
-
-  useEffect(
-    () => () => {
-      promotionRef.current += 1;
-      for (const controller of readiness.current) controller.abort();
-      readiness.current.clear();
-    },
-    [],
-  );
-
-  const frame = (entry: { key: string; source: ViewerFrameSource; attempt: number }, isPending: boolean) => (
-    <iframe
-      key={`${entry.key}:${entry.attempt}`}
-      ref={isPending ? undefined : iframeRef}
-      {...entry.source}
-      class={className}
-      sandbox={sandbox}
-      allow={allow}
-      tabIndex={tabIndex}
-      inert={isPending}
-      aria-hidden={isPending ? true : undefined}
-      loading={iframeMode.value === 'srcdoc' ? undefined : 'lazy'}
-      onLoad={async (event) => {
-        // Seed runtime state while a replacement is still behind the painted
-        // frame, and wait until that document has committed its rendered UI.
-        const token = isPending ? ++promotionRef.current : promotionRef.current;
-        const loadedFrame = event.currentTarget;
-        const controller = new AbortController();
-        readiness.current.add(controller);
-        const ready = onDocumentLoad?.(loadedFrame, controller.signal);
-        const loaded = ready ? await ready : undefined;
-        readiness.current.delete(controller);
-        if (promotionRef.current !== token || loaded === 'cancelled') return;
-        if (loaded === false) {
-          if (entry.attempt === 0) {
-            const retry = { ...entry, attempt: 1 };
-            if (isPending) setPending(retry);
-            else setPainted(retry);
-          } else {
-            if (isPending) setPending(null);
-            showToast(
-              'remove',
-              'Viewer could not load',
-              `${isPending ? 'Keeping the last view. ' : ''}Reload to retry.`,
-            );
-          }
-          return;
-        }
-        if (!isPending) {
-          onLoad();
-          return;
-        }
-        requestAnimationFrame(() =>
-          requestAnimationFrame(() => {
-            if (promotionRef.current !== token) return;
-            iframeRef.current = loadedFrame;
-            setPainted(entry);
-            setPending(null);
-            onLoad();
-          }),
-        );
-      }}
-      style={{
-        position: 'absolute',
-        inset: 0,
-        width: '100%',
-        height: '100%',
-        visibility: 'visible',
-        zIndex: isPending ? 0 : 1,
-        background: 'var(--c-panel-soft)',
-      }}
-      title={title}
-    />
-  );
-
-  return (
-    <div class="mcp-app-frame-stack">
-      {frame(painted, false)}
-      {pending && frame(pending, true)}
-    </div>
-  );
-}
-
 export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   if (node.data.mode === 'ext-app') {
     return <ExtAppFrame node={node} expanded={expanded} />;
@@ -223,7 +87,7 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
   // overlay frame (fill-down), not sit at its intrinsic in-canvas height.
   const contentFit = shouldContentFitIframeNode(node) && !expanded;
   const frameToken = useMemo(() => (contentFit ? `frame-${crypto.randomUUID()}` : ''), [contentFit]);
-  useIframeContentHeight(node, iframeRef, frameToken);
+  const measureContent = useIframeContentHeight(node, iframeRef, frameToken);
 
   // AX emits forwarded by the json-render viewer — the shared sandboxed-surface
   // trust boundary (M2).
@@ -257,15 +121,38 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
     () => (isJsonViewer ? `ui-${crypto.randomUUID()}` : ''),
     [isJsonViewer, specVersion, node.data.url],
   );
-  const url = withViewerParams(
-    (node.data.url as string) || '',
-    expanded,
-    specVersion,
-    axToken || undefined,
-    isAxViewer ? node.id : undefined,
-    frameToken || undefined,
-    contentFit,
-    stateToken || undefined,
+  const theme = canvasTheme.value;
+  const urlTheme = isJsonViewer ? null : canvasThemeScheme(theme);
+  const pushTheme = () => {
+    if (!isJsonViewer) return;
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        source: HTML_SURFACE_PUSH_SOURCE,
+        type: 'theme-update',
+        token: stateToken,
+        theme: node.data.theme ?? theme,
+        title: node.data.title,
+      },
+      '*',
+    );
+  };
+  useEffect(pushTheme, [theme, stateToken, node.data.theme, node.data.title]);
+  // Only JSON/graph understand theme messages and retain drafts across themes.
+  // Generic viewers consume a dark/light query and navigate when it changes.
+  const url = useMemo(
+    () =>
+      withViewerParams(
+        (node.data.url as string) || '',
+        urlTheme ?? theme,
+        expanded,
+        specVersion,
+        axToken || undefined,
+        isAxViewer ? node.id : undefined,
+        frameToken || undefined,
+        contentFit,
+        stateToken || undefined,
+      ),
+    [node.data.url, urlTheme, expanded, specVersion, axToken, node.id, frameToken, contentFit, stateToken],
   );
   // src vs fetch()+srcdoc, decided by the boot-wide embed probe (Amp portals).
   // External viewer URLs always stay src — the hook passes them through.
@@ -295,7 +182,9 @@ 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: 'var(--fs-meta)' }}>Source: {sourceServer}</div>
+        )}
       </div>
     );
   }
@@ -313,7 +202,7 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
         <div
           style={{
             padding: '4px 8px',
-            fontSize: '10px',
+            fontSize: 'var(--fs-meta)',
             background: 'color-mix(in srgb, var(--c-warn) 10%, transparent)',
             color: 'var(--c-warn)',
             borderBottom: '1px solid color-mix(in srgb, var(--c-warn) 15%, transparent)',
@@ -328,11 +217,16 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
       <RefreshingViewerFrame
         source={surfaceFrame}
         iframeRef={iframeRef}
+        allow="clipboard-read; clipboard-write"
         onDocumentLoad={(frame, signal) => {
           if (stateToken && frame.contentWindow)
-            return restoreViewerRuntimeState(node.id, stateToken, frame.contentWindow, signal);
+            return restoreViewerRuntimeState(node, stateToken, frame.contentWindow, signal);
+        }}
+        onLoad={() => {
+          measureContent();
+          pushAxState();
+          pushTheme();
         }}
-        onLoad={pushAxState}
         title={`MCP App: ${sourceServer}`}
       />
     </div>

package/src/client/nodes/MermaidNode.tsx

@@ -1,82 +1,93 @@
-import { useEffect, useMemo, useRef } from 'preact/hooks';
-import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
-import { canvasTheme } from '../state/canvas-store';
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { renderMermaid } from '../mermaid-render';
+import { canvasTheme, nodes, updateNode } from '../state/canvas-store';
+import { pushCanvasUpdate } from '../state/intent-bridge';
+import { computeContentGrowHeight, contentFitPosition } from '../canvas/auto-fit';
 import type { CanvasNodeState } from '../types';
-import { nodeSurfaceUrl, surfaceContentHash } from './surface-url';
-import { useIframeContentHeight } from './use-iframe-content-height';
-import { useSurfaceFrame } from './use-surface-frame';
 
-/**
- * Mermaid diagram node — a display-only iframe surface. The server renders the
- * surface document (escaped diagram source + /canvas/mermaid-entry.js) at
- * /api/canvas/surface/:id; the iframe and "Open as site" share that one render
- * path, exactly like html nodes. Minimal subset of HtmlNode: theme push and
- * content-height growth, no AX bridge, no presentation mode.
- */
 export function MermaidNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const theme = canvasTheme.value;
-  // Stable per-mount nonce that authorizes parent → iframe theme-update messages.
-  const themeToken = useMemo(() => `theme-${crypto.randomUUID()}`, []);
-  // Per-mount nonce for the content-height reporter (node grows to fit content).
-  const frameToken = useMemo(() => `frame-${crypto.randomUUID()}`, []);
+  const container = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState('');
+  const [attempt, setAttempt] = useState(0);
   const source = typeof node.data.content === 'string' ? node.data.content : '';
-  const fit = node.data.fit === 'none' ? 'none' : 'contain';
-  const v = useMemo(() => surfaceContentHash(`${fit}:${source}`), [source, fit]);
-
-  // `theme` is intentionally excluded from the deps: live theme changes are
-  // pushed via postMessage below (no reload), while `v` reloads the frame when
-  // the diagram source changes.
-  const surfaceSrc = useMemo(
-    () => (source ? nodeSurfaceUrl(node.id, { theme, themeToken, v, frameToken }) : ''),
-    [source, themeToken, v, node.id, frameToken],
-  );
-
-  // src vs fetch()+srcdoc, decided by the boot-wide embed probe (Amp portals).
-  const surfaceFrame = useSurfaceFrame(surfaceSrc);
+  const theme = canvasTheme.value;
+  const fit = node.data.fit !== 'none';
+  // Fit is layout, not content: it resizes the painted SVG in place. Re-rendering
+  // on a fit change replaced the element and left a detached SVG mid-update.
+  const fitRef = useRef(fit);
+  fitRef.current = fit;
 
-  // Grow the node to fit the surface's reported content height (grow-only, gated).
-  // Never in the expanded overlay — there the surface fills the large overlay frame.
-  useIframeContentHeight(node, iframeRef, expanded ? '' : frameToken);
+  const fitDiagram = () => {
+    const element = container.current;
+    const svg = element?.querySelector('svg');
+    const box = svg?.viewBox.baseVal;
+    if (!element || !svg || !box?.width || !box.height) return;
+    const scale = fitRef.current ? Math.min(1, element.clientWidth / box.width, element.clientHeight / box.height) : 1;
+    svg.style.maxWidth = 'none';
+    svg.style.width = `${box.width * scale}px`;
+    svg.style.height = `${box.height * scale}px`;
+    svg.style.margin = fitRef.current ? '0 auto' : '0';
+  };
 
-  const pushTheme = () => {
-    iframeRef.current?.contentWindow?.postMessage(
-      {
-        source: HTML_SURFACE_PUSH_SOURCE,
-        type: 'theme-update',
-        token: themeToken,
-        theme,
-      },
-      '*',
-    );
+  const growToDiagram = () => {
+    const element = container.current;
+    const box = element?.querySelector('svg')?.viewBox.baseVal;
+    const current = nodes.value.get(node.id);
+    if (expanded || !element || !box?.width || !current) return;
+    const naturalHeight = box.height * (fitRef.current ? Math.min(1, element.clientWidth / box.width) : 1);
+    const card = element.closest<HTMLElement>('.canvas-node')!;
+    const height = computeContentGrowHeight(current, naturalHeight, card.offsetHeight - element.clientHeight);
+    if (height === null) return;
+    const position = contentFitPosition(current, height, Array.from(nodes.value.values()));
+    const patch = { size: { width: current.size.width, height }, position };
+    updateNode(node.id, patch);
+    void pushCanvasUpdate([{ id: node.id, ...patch }], { recordHistory: false });
   };
 
-  useEffect(pushTheme, [theme, themeToken]);
+  useEffect(() => {
+    let cancelled = false;
+    const element = container.current;
+    if (!element || !source) return;
+    const observer = new ResizeObserver(fitDiagram);
+    observer.observe(element);
+    const render = async () => {
+      try {
+        const svg = await renderMermaid(source);
+        if (cancelled) return;
+        element.innerHTML = svg;
+        setError('');
+        element.querySelector('svg')?.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+        fitDiagram();
+        growToDiagram();
+      } catch (failure) {
+        if (!cancelled) setError(failure instanceof Error ? failure.message : String(failure));
+      }
+    };
+    void render();
+    return () => {
+      cancelled = true;
+      observer.disconnect();
+    };
+  }, [source, theme, expanded, attempt]);
 
-  if (!source) {
-    return <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>No diagram source set</div>;
-  }
+  // Same commit as data-fit, so the attribute and the painted size never disagree.
+  useLayoutEffect(() => {
+    fitDiagram();
+    growToDiagram();
+  }, [fit]);
 
-  // SECURITY: sandbox stays `allow-scripts` ONLY — same tier as html surfaces
-  // (see HtmlNode for the full rationale); the surface route sends a matching
-  // CSP sandbox header.
+  if (!source) return <div class="viewer-placeholder">No diagram source set</div>;
   return (
-    <iframe
-      ref={iframeRef}
-      class="html-node-frame"
-      title={typeof node.data.title === 'string' ? node.data.title : 'Mermaid diagram'}
-      sandbox="allow-scripts"
-      {...surfaceFrame}
-      onLoad={pushTheme}
-      style={{
-        width: '100%',
-        height: '100%',
-        minHeight: expanded ? '70vh' : '0',
-        border: 'none',
-        background: 'var(--c-bg)',
-        borderRadius: '6px',
-        display: 'block',
-      }}
-    />
+    <div class="mermaid-viewer" data-fit={fit ? 'contain' : 'none'}>
+      <div ref={container} class="mermaid-diagram" />
+      {error && (
+        <div class="viewer-fallback" role="status">
+          <span>{error}</span>
+          <button type="button" onClick={() => setAttempt(attempt + 1)}>
+            Retry
+          </button>
+        </div>
+      )}
+    </div>
   );
 }

package/src/client/nodes/PromptNode.tsx

@@ -57,7 +57,7 @@ function ContextBadge({ count }: { count: number }) {
         padding: '4px 8px',
         fontSize: '11px',
         color: 'var(--c-accent)',
-        background: 'rgba(70,182,255,0.08)',
+        background: 'color-mix(in srgb, var(--c-pin) 8%, transparent)',
         borderRadius: 'var(--radius-sm)',
         flexShrink: 0,
       }}
@@ -75,7 +75,7 @@ function ErrorBanner({ message, onDismiss }: { message: string | null; onDismiss
         padding: '4px 8px',
         fontSize: '11px',
         color: 'var(--c-danger)',
-        background: 'rgba(255,80,80,0.08)',
+        background: 'color-mix(in srgb, var(--c-danger) 8%, transparent)',
         borderRadius: 'var(--radius-sm)',
         display: 'flex',
         alignItems: 'center',
@@ -312,7 +312,7 @@ export function PromptNode({ node, expanded = false }: { node: CanvasNodeState;
           style={{
             flex: 1,
             resize: 'none',
-            background: 'rgba(10,14,30,0.4)',
+            background: 'var(--c-input-bg)',
             border: '1px solid var(--c-line)',
             borderRadius: 'var(--radius-sm)',
             color: 'var(--c-text)',
@@ -324,7 +324,7 @@ export function PromptNode({ node, expanded = false }: { node: CanvasNodeState;
           }}
         />
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <span style={{ fontSize: '10px', color: 'var(--c-muted)' }}>{'\u2318'}+Enter to send</span>
+          <kbd class="prompt-key-hint">{'\u2318'}+Enter to send</kbd>
           <button
             type="button"
             onClick={handleSubmit}
@@ -377,10 +377,9 @@ export function PromptNode({ node, expanded = false }: { node: CanvasNodeState;
         >
           <span
             style={{
-              fontSize: '10px',
-              textTransform: 'uppercase',
+              fontSize: 'var(--fs-meta)',
               fontWeight: 600,
-              color: isPending ? 'var(--c-warn)' : isAnswered ? 'var(--c-ok)' : 'var(--c-muted)',
+              color: isPending ? 'var(--c-agent)' : isAnswered ? 'var(--c-ok)' : 'var(--c-muted)',
             }}
           >
             {isPending ? 'Sending…' : isAnswered ? 'Answered' : legacyStatus}
@@ -481,13 +480,12 @@ export function PromptNode({ node, expanded = false }: { node: CanvasNodeState;
         >
           <span
             style={{
-              fontSize: '10px',
-              textTransform: 'uppercase',
+              fontSize: 'var(--fs-meta)',
               fontWeight: 600,
               color: isStreaming
-                ? 'var(--c-accent)'
+                ? 'var(--c-agent)'
                 : isPending
-                  ? 'var(--c-warn)'
+                  ? 'var(--c-agent)'
                   : isAnswered
                     ? 'var(--c-ok)'
                     : 'var(--c-muted)',
@@ -495,7 +493,7 @@ export function PromptNode({ node, expanded = false }: { node: CanvasNodeState;
           >
             {isStreaming ? 'Streaming…' : isPending ? 'Sending…' : isAnswered ? 'Answered' : threadStatus}
           </span>
-          <span style={{ fontSize: '10px', color: 'var(--c-muted)' }}>
+          <span style={{ fontSize: 'var(--fs-meta)', color: 'var(--c-muted)' }}>
             {turns.length} turn{turns.length !== 1 ? 's' : ''}
           </span>
         </div>
@@ -513,7 +511,7 @@ export function PromptNode({ node, expanded = false }: { node: CanvasNodeState;
               style={{
                 width: '100%',
                 resize: 'none',
-                background: 'rgba(10,14,30,0.4)',
+                background: 'var(--c-input-bg)',
                 border: '1px solid var(--c-line)',
                 borderRadius: 'var(--radius-sm)',
                 color: 'var(--c-text)',
@@ -532,7 +530,7 @@ export function PromptNode({ node, expanded = false }: { node: CanvasNodeState;
                 marginTop: '4px',
               }}
             >
-              <span style={{ fontSize: '10px', color: 'var(--c-muted)' }}>{'\u2318'}+Enter</span>
+              <kbd class="prompt-key-hint">{'\u2318'}+Enter</kbd>
               <button
                 type="button"
                 onClick={handleReplySubmit}

package/src/client/nodes/ResponseNode.tsx

@@ -49,13 +49,16 @@ export function ResponseNode({ node, expanded = false }: { node: CanvasNodeState
 
   return (
     <div class="response-node-inner" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div class="thread-turn-role" style={{ color: 'var(--c-agent)' }}>
+        ✦ Agent
+      </div>
       {/* Streaming indicator */}
       {isStreaming && (
         <div
           class="response-streaming-bar"
           style={{
             height: '2px',
-            background: 'linear-gradient(90deg, transparent, var(--c-accent), transparent)',
+            background: 'linear-gradient(90deg, transparent, var(--c-agent), transparent)',
             animation: 'response-stream-pulse 1.5s ease-in-out infinite',
             borderRadius: '1px',
             marginBottom: '4px',
@@ -100,10 +103,9 @@ export function ResponseNode({ node, expanded = false }: { node: CanvasNodeState
       >
         <span
           style={{
-            fontSize: '10px',
-            textTransform: 'uppercase',
+            fontSize: 'var(--fs-meta)',
             fontWeight: 600,
-            color: isStreaming ? 'var(--c-accent)' : isComplete ? 'var(--c-ok)' : 'var(--c-muted)',
+            color: isStreaming ? 'var(--c-agent)' : isComplete ? 'var(--c-ok)' : 'var(--c-muted)',
           }}
         >
           {isStreaming ? 'Streaming…' : isComplete ? 'Complete' : status}
@@ -115,8 +117,8 @@ export function ResponseNode({ node, expanded = false }: { node: CanvasNodeState
             style={{
               padding: '3px 10px',
               fontSize: '11px',
-              background: 'rgba(70,182,255,0.1)',
-              border: '1px solid rgba(70,182,255,0.3)',
+              background: 'var(--c-panel-soft)',
+              border: '1px solid var(--c-line)',
               borderRadius: 'var(--radius-sm)',
               color: 'var(--c-accent)',
               cursor: 'pointer',

package/src/client/nodes/StatusNode.tsx

@@ -19,6 +19,7 @@ export function StatusNode({ node }: { node: CanvasNodeState }) {
   const level = (node.data.level as string) || 'ok';
   const activeTool = node.data.activeTool as string | null;
   const subagent = node.data.subagent as { state: string; name: string } | undefined;
+  const progress = typeof node.data.progress === 'number' ? Math.max(0, Math.min(100, node.data.progress)) : null;
 
   const phaseColor = PHASE_COLORS[phase] ?? 'var(--c-muted)';
   const isActive = phase !== 'idle';
@@ -33,7 +34,6 @@ export function StatusNode({ node }: { node: CanvasNodeState }) {
             height: '8px',
             borderRadius: '50%',
             background: phaseColor,
-            boxShadow: isActive ? `0 0 8px ${phaseColor}` : 'none',
             animation: isActive ? 'pulse 1.5s infinite' : 'none',
             flexShrink: 0,
           }}
@@ -42,11 +42,13 @@ export function StatusNode({ node }: { node: CanvasNodeState }) {
           style={{
             fontWeight: 600,
             color: phaseColor,
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
+            fontSize: 'var(--fs-meta)',
+            padding: '2px 8px',
+            borderRadius: 'var(--r-pill)',
+            background: `color-mix(in srgb, ${phaseColor} 12%, transparent)`,
           }}
         >
-          {phase}
+          {phase.charAt(0).toUpperCase() + phase.slice(1)}
         </span>
         {detail && (
           <span
@@ -62,10 +64,23 @@ export function StatusNode({ node }: { node: CanvasNodeState }) {
         )}
       </div>
 
+      {progress !== null && (
+        <div
+          class="status-progress"
+          role="progressbar"
+          aria-label="Progress"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={progress}
+        >
+          <div style={{ width: `${progress}%`, background: phaseColor }} />
+        </div>
+      )}
+
       {/* Active tool */}
       {activeTool && (
         <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--c-agent)' }}>
-          <span style={{ fontSize: '10px' }}>⚙</span>
+          <span style={{ fontSize: 'var(--fs-meta)' }}>⚙</span>
           <span style={{ fontFamily: 'var(--font-code)', fontSize: '11px' }}>{activeTool}</span>
         </div>
       )}
@@ -73,9 +88,9 @@ export function StatusNode({ node }: { node: CanvasNodeState }) {
       {/* Sub-agent */}
       {subagent && subagent.state !== 'completed' && (
         <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--c-subagent)' }}>
-          <span style={{ fontSize: '10px' }}>⠉</span>
+          <span style={{ fontSize: 'var(--fs-meta)' }}>⠉</span>
           <span>{subagent.name}</span>
-          <span style={{ color: 'var(--c-muted)', fontSize: '10px' }}>({subagent.state})</span>
+          <span style={{ color: 'var(--c-muted)', fontSize: 'var(--fs-meta)' }}>({subagent.state})</span>
         </div>
       )}
 

package/src/client/nodes/StatusSummary.tsx

@@ -21,14 +21,16 @@ export function StatusSummary({ node }: { node: CanvasNodeState }) {
           flexShrink: 0,
         }}
       />
-      <span style={{ color: phaseColor, fontSize: '10px', textTransform: 'uppercase', fontWeight: 600 }}>{phase}</span>
+      <span style={{ color: phaseColor, fontSize: 'var(--fs-meta)', fontWeight: 600 }}>
+        {phase.charAt(0).toUpperCase() + phase.slice(1)}
+      </span>
       {activeTool && (
-        <span style={{ color: 'var(--c-agent)', fontSize: '10px', fontFamily: 'var(--font-code)' }}>
+        <span style={{ color: 'var(--c-agent)', fontSize: 'var(--fs-meta)', fontFamily: 'var(--font-code)' }}>
           ⚙ {activeTool}
         </span>
       )}
       {subagent && subagent.state !== 'completed' && (
-        <span style={{ color: 'var(--c-subagent)', fontSize: '10px' }}>⠉ {subagent.name}</span>
+        <span style={{ color: 'var(--c-subagent)', fontSize: 'var(--fs-meta)' }}>⠉ {subagent.name}</span>
       )}
     </span>
   );