pmx-canvas 0.4.5 → 0.4.7

package/src/cli/commands/smoke.ts

@@ -0,0 +1,212 @@
+// One-command environment check: does a running canvas actually work here?
+//
+// Runs the checks every host test report hand-rolls — health + workspace,
+// MCP stdio initialize, a temp-node create/search/remove round-trip, and
+// structural board validation — and reports them as a single JSON result
+// with a pass/fail exit code. Designed for fresh orbs/hosts: `pmx-canvas
+// smoke` answers "does the canvas work in this environment?" in one call.
+//
+// The command tests a RUNNING server (like every other agent command); it
+// never starts one. Board validation gates only on structural issues
+// (missing edge endpoints) — node overlaps are a layout choice on real
+// boards, so collisions are reported but never fail the smoke.
+
+import { spawn } from 'node:child_process';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { HttpOperationInvoker } from '../../server/operations/index.js';
+import { cmd, getBaseUrl, isRecord, output, parseFlags, showCommandHelp } from '../shared.js';
+
+interface SmokeCheck {
+  name: string;
+  ok: boolean;
+  detail: string;
+}
+
+const MCP_INITIALIZE_TIMEOUT_MS = 10_000;
+
+function cliPackageVersion(): string {
+  try {
+    const pkg = JSON.parse(readFileSync(new URL('../../../package.json', import.meta.url), 'utf-8')) as {
+      version?: string;
+    };
+    return pkg.version ?? 'unknown';
+  } catch {
+    return 'unknown';
+  }
+}
+
+async function checkHealth(baseUrl: string, cliVersion: string): Promise<SmokeCheck & { serverVersion?: string }> {
+  const name = 'health';
+  let body: unknown;
+  try {
+    const response = await fetch(`${baseUrl}/health`);
+    if (!response.ok) return { name, ok: false, detail: `GET /health returned HTTP ${response.status}` };
+    body = await response.json();
+  } catch (error) {
+    return {
+      name,
+      ok: false,
+      detail: `Cannot connect to pmx-canvas at ${baseUrl}: ${error instanceof Error ? error.message : String(error)}. Start the server first: pmx-canvas --no-open`,
+    };
+  }
+  if (!isRecord(body) || body.ok !== true) {
+    return { name, ok: false, detail: `GET /health returned an unhealthy body: ${JSON.stringify(body)}` };
+  }
+  const serverVersion = typeof body.version === 'string' ? body.version : 'unknown';
+  const persistence = isRecord(body.persistence) && body.persistence.ok === false ? 'DEGRADED' : 'ok';
+  const skew =
+    serverVersion !== 'unknown' && serverVersion !== cliVersion
+      ? ` — differs from CLI v${cliVersion} (version skew)`
+      : '';
+  return {
+    name,
+    ok: true,
+    serverVersion,
+    detail: `workspace ${String(body.workspace)}, server v${serverVersion}${skew}, pid ${String(body.pid)}, persistence ${persistence}`,
+  };
+}
+
+/**
+ * Spawn the bundled MCP server over stdio (same entry `pmx-canvas --mcp`
+ * runs) and verify a JSON-RPC initialize handshake completes. The transport
+ * is newline-delimited JSON; the child is killed as soon as the response
+ * with our request id arrives.
+ */
+function checkMcpInitialize(cliVersion: string): Promise<SmokeCheck> {
+  const name = 'mcp-initialize';
+  const entry = fileURLToPath(new URL('../../mcp/server.ts', import.meta.url));
+  return new Promise((resolveCheck) => {
+    const child = spawn(process.execPath, ['run', entry], {
+      stdio: ['pipe', 'pipe', 'ignore'],
+      env: process.env,
+    });
+    let settled = false;
+    let stdoutBuffer = '';
+    const finish = (ok: boolean, detail: string) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timer);
+      child.kill();
+      resolveCheck({ name, ok, detail });
+    };
+    const timer = setTimeout(
+      () => finish(false, `no initialize response within ${MCP_INITIALIZE_TIMEOUT_MS}ms`),
+      MCP_INITIALIZE_TIMEOUT_MS,
+    );
+    child.on('error', (error) => finish(false, `failed to spawn MCP server: ${error.message}`));
+    child.on('exit', (code) => finish(false, `MCP server exited before responding (code ${code ?? 'unknown'})`));
+    child.stdout.on('data', (chunk: Buffer) => {
+      stdoutBuffer += chunk.toString('utf-8');
+      const lines = stdoutBuffer.split('\n');
+      stdoutBuffer = lines.pop() ?? '';
+      for (const line of lines) {
+        if (!line.trim()) continue;
+        let message: unknown;
+        try {
+          message = JSON.parse(line);
+        } catch {
+          continue;
+        }
+        if (!isRecord(message) || message.id !== 1) continue;
+        const result = isRecord(message.result) ? message.result : null;
+        const serverInfo = result && isRecord(result.serverInfo) ? result.serverInfo : null;
+        if (serverInfo) {
+          finish(true, `initialize ok: ${String(serverInfo.name)} v${String(serverInfo.version)}`);
+        } else {
+          finish(false, `initialize returned an error: ${JSON.stringify(message.error ?? message)}`);
+        }
+        return;
+      }
+    });
+    child.stdin.write(
+      `${JSON.stringify({
+        jsonrpc: '2.0',
+        id: 1,
+        method: 'initialize',
+        params: {
+          protocolVersion: '2025-06-18',
+          capabilities: {},
+          clientInfo: { name: 'pmx-canvas-smoke', version: cliVersion },
+        },
+      })}\n`,
+    );
+  });
+}
+
+async function checkNodeLifecycle(invoker: HttpOperationInvoker): Promise<SmokeCheck> {
+  const name = 'node-lifecycle';
+  const marker = `pmx-smoke-${Math.random().toString(36).slice(2, 10)}`;
+  const searchHits = async (): Promise<Set<string>> => {
+    const result = await invoker.invoke('search', { q: marker });
+    const results = isRecord(result) && Array.isArray(result.results) ? result.results : [];
+    return new Set(results.filter(isRecord).map((entry) => String(entry.id)));
+  };
+  let nodeId: string | null = null;
+  try {
+    const added = await invoker.invoke('node.add', {
+      type: 'markdown',
+      title: marker,
+      content: `Temporary smoke-check node (${marker}). Safe to remove.`,
+      x: 100_000,
+      y: 100_000,
+    });
+    const node = isRecord(added) && isRecord(added.node) ? added.node : null;
+    nodeId = node && typeof node.id === 'string' ? node.id : null;
+    if (!nodeId) return { name, ok: false, detail: `node.add returned no node id: ${JSON.stringify(added)}` };
+    const found = (await searchHits()).has(nodeId);
+    // Remove BEFORE reporting either way: an early return here (search miss —
+    // exactly the version-skew case this command exists to detect) would skip
+    // the catch-block cleanup and park the temp node on the user's real board.
+    await invoker.invoke('node.remove', { id: nodeId });
+    nodeId = null;
+    if (!found) return { name, ok: false, detail: 'search did not find the created node' };
+    return { name, ok: true, detail: 'create → search → remove round-trip ok' };
+  } catch (error) {
+    // Best-effort cleanup so a failed smoke never leaves its temp node behind.
+    if (nodeId) await invoker.invoke('node.remove', { id: nodeId }).catch(() => {});
+    return { name, ok: false, detail: error instanceof Error ? error.message : String(error) };
+  }
+}
+
+async function checkValidation(invoker: HttpOperationInvoker): Promise<SmokeCheck> {
+  const name = 'validate';
+  try {
+    const result = await invoker.invoke('validate.get', {});
+    const summary = isRecord(result) && isRecord(result.summary) ? result.summary : {};
+    const missingEdgeEndpoints = Number(summary.missingEdgeEndpoints ?? 0);
+    const detail = `${String(summary.nodes ?? '?')} nodes, ${String(summary.edges ?? '?')} edges, ${String(
+      summary.collisions ?? '?',
+    )} collisions (informational), ${missingEdgeEndpoints} broken edges`;
+    return { name, ok: missingEdgeEndpoints === 0, detail };
+  } catch (error) {
+    return { name, ok: false, detail: error instanceof Error ? error.message : String(error) };
+  }
+}
+
+cmd(
+  'smoke',
+  'One-command check that a running canvas works in this environment',
+  ['pmx-canvas smoke', 'pmx-canvas smoke --skip-mcp', 'pmx-canvas smoke --port 4750'],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('smoke');
+
+    const baseUrl = getBaseUrl();
+    const cliVersion = cliPackageVersion();
+    const invoker = new HttpOperationInvoker(baseUrl);
+    const checks: SmokeCheck[] = [];
+
+    const health = await checkHealth(baseUrl, cliVersion);
+    checks.push({ name: health.name, ok: health.ok, detail: health.detail });
+    if (health.ok) {
+      if (!flags['skip-mcp']) checks.push(await checkMcpInitialize(cliVersion));
+      checks.push(await checkNodeLifecycle(invoker));
+      checks.push(await checkValidation(invoker));
+    }
+
+    const ok = checks.every((check) => check.ok);
+    output({ ok, target: baseUrl, cliVersion, serverVersion: health.serverVersion ?? null, checks });
+    if (!ok) process.exit(1);
+  },
+);

package/src/cli/commands/view.ts

@@ -44,7 +44,7 @@ cmd(
   'Get the full canvas layout (nodes, edges, viewport)',
   ['pmx-canvas layout', 'pmx-canvas layout --summary'],
   async (args) => {
-    const { flags } = parseFlags(args);
+    const { flags } = parseFlags(args, { boolFlags: ['summary'] });
     if (flags.help || flags.h) return showCommandHelp('layout');
 
     if (flags.summary || flags.compact) {

package/src/cli/index.ts

@@ -67,6 +67,7 @@ const AGENT_COMMANDS = new Set([
   'serve',
   'copilot',
   'skills',
+  'smoke',
 ]);
 
 const firstArg = args[0] ?? '';
@@ -297,19 +298,25 @@ Agent CLI (works against running server):
   validate spec                       Validate json-render/graph payloads without creating nodes
   watch [--json] [--events ...]       Watch low-token semantic canvas changes
   focus <node-id>                     Pan to node
+  fit [node-id ...]                   Fit the viewport to all nodes or a subset
   ax status|context|focus             Inspect AX state and focus
   external-app add                    Add hosted external apps like Excalidraw
   diagram add                         Add an Excalidraw diagram node
+  html primitive add|schema           Add or inspect HTML communication primitives
   pin <ids...> | --list | --clear     Manage context pins
   undo / redo / history               Time travel
   snapshot save|list|restore|diff|delete
                                       Manage snapshots
+  diff <snapshot-id>                  Compare the canvas against a snapshot
   group create|add|remove             Manage groups
   web-artifact build                  Build bundled web artifacts
   clear --yes                         Clear canvas
   code-graph                          File dependencies
   spatial                             Spatial analysis
   watch                               Semantic watch stream
+  smoke                               Check that a running canvas works here
+  skills sync                         Sync installed copies of the bundled skills
+  copilot install-extension           Install the GitHub Copilot app extension
 
 Run any command with --help for details and examples:
   pmx-canvas node add --help

package/src/cli/shared.ts

@@ -47,6 +47,13 @@ export function extractGlobalTargetFlags(args: string[]): string[] {
     const arg = args[i];
     let name: 'port' | 'server-url' | null = null;
     let value: string | undefined;
+    if (arg === '--') {
+      // End of flags: everything after a bare `--` is an operand, so a literal
+      // `--port`-looking value is never mistaken for the global target flag.
+      // The separator itself is kept so parseFlags stops there too.
+      rest.push(...args.slice(i));
+      break;
+    }
     if (arg === '--port' || arg === '--server-url') {
       name = arg.slice(2) as 'port' | 'server-url';
       value = args[i + 1];
@@ -125,11 +132,25 @@ async function invokeOperation(name: string, input: Record<string, unknown>): Pr
 
 // ── Flag parsing ─────────────────────────────────────────────
 
-function parseFlags(args: string[]): { positional: string[]; flags: Record<string, string | true> } {
+/**
+ * `options.boolFlags` marks flags that are boolean FOR THIS COMMAND. Value
+ * flags consume the next token verbatim (so a unified diff beginning with
+ * `--- a/file` survives), which makes a flag that is boolean here and
+ * value-taking elsewhere ambiguous — `--summary` is boolean in `history` /
+ * `layout` / `node get` / `validate spec` but carries text in `node add`.
+ * Without this per-command override, `history --summary --limit 5` would
+ * swallow `--limit` as the summary's value. The global set below holds flags
+ * that are boolean everywhere.
+ */
+function parseFlags(
+  args: string[],
+  options: { boolFlags?: readonly string[] } = {},
+): { positional: string[]; flags: Record<string, string | true> } {
   const positional: string[] = [];
   const flags: Record<string, string | true> = {};
   // Boolean-only flags (never take a value argument)
-  const BOOL_FLAGS = new Set([
+  const BOOL_FLAGS = new Set<string>([
+    ...(options.boolFlags ?? []),
     'help',
     'h',
     'ids',
@@ -164,17 +185,26 @@ function parseFlags(args: string[]): { positional: string[]; flags: Record<strin
     'files',
     'ui-prompts',
     'check',
+    'skip-mcp',
   ]);
   for (let i = 0; i < args.length; i++) {
     const arg = args[i];
+    // Conventional end-of-flags separator: the rest is positional, never flags.
+    if (arg === '--') {
+      positional.push(...args.slice(i + 1));
+      break;
+    }
     if (arg.startsWith('--')) {
       const eq = arg.indexOf('=');
       if (eq !== -1) {
         flags[arg.slice(2, eq)] = arg.slice(eq + 1);
       } else {
         const key = arg.slice(2);
-        // If not a boolean flag and next arg exists and isn't a flag, consume it as value
-        if (!BOOL_FLAGS.has(key) && i + 1 < args.length && !args[i + 1].startsWith('-')) {
+        // A value flag consumes the very next token VERBATIM — including one
+        // that starts with `-`/`--`. Unified diffs legitimately begin with
+        // `--- a/file`, and the old "next token must not look like a flag"
+        // heuristic silently dropped that content.
+        if (!BOOL_FLAGS.has(key) && i + 1 < args.length) {
           flags[key] = args[++i];
         } else {
           flags[key] = true;
@@ -182,7 +212,7 @@ function parseFlags(args: string[]): { positional: string[]; flags: Record<strin
       }
     } else if (arg.startsWith('-') && arg.length === 2) {
       const key = arg.slice(1);
-      if (!BOOL_FLAGS.has(key) && i + 1 < args.length && !args[i + 1].startsWith('-')) {
+      if (!BOOL_FLAGS.has(key) && i + 1 < args.length) {
         flags[key] = args[++i];
       } else {
         flags[key] = true;

package/src/client/App.tsx

@@ -36,10 +36,11 @@ import {
   traceEnabled,
   viewport,
   walkGraph,
+  zoomByFactor,
 } from './state/canvas-store';
 import { connectSSE } from './state/sse-bridge';
 import { intents } from './state/intent-store';
-import { saveCanvasTheme } from './state/intent-bridge';
+import { reportClientViewportSize, saveCanvasTheme } from './state/intent-bridge';
 import {
   IconArrange,
   IconClearTrace,
@@ -258,20 +259,12 @@ function Toolbar({
           </button>
         </ToolbarHint>
         <ToolbarHint label="Zoom in" shortcut={`${MOD_KEY}++`}>
-          <button
-            type="button"
-            onClick={() => animateViewport({ ...v, scale: Math.min(4, v.scale * 1.25) }, 150)}
-            aria-label="Zoom in"
-          >
+          <button type="button" onClick={() => zoomByFactor(1.25)} aria-label="Zoom in">
             <IconZoomIn />
           </button>
         </ToolbarHint>
         <ToolbarHint label="Zoom out" shortcut={`${MOD_KEY}+-`}>
-          <button
-            type="button"
-            onClick={() => animateViewport({ ...v, scale: Math.max(0.1, v.scale / 1.25) }, 150)}
-            aria-label="Zoom out"
-          >
+          <button type="button" onClick={() => zoomByFactor(1 / 1.25)} aria-label="Zoom out">
             <IconZoomOut />
           </button>
         </ToolbarHint>
@@ -585,6 +578,25 @@ export function App() {
     return connectSSE();
   }, []);
 
+  // Keep the server's idea of this window's size current (0.4.6 orb feedback
+  // #2) so an agent `fit` computes a scale that actually fits the human's
+  // window. Connect-time reporting lives in the SSE bridge; this covers resizes.
+  useEffect(() => {
+    let timer: number | null = null;
+    const schedule = () => {
+      if (timer !== null) window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        timer = null;
+        void reportClientViewportSize();
+      }, 400);
+    };
+    window.addEventListener('resize', schedule);
+    return () => {
+      if (timer !== null) window.clearTimeout(timer);
+      window.removeEventListener('resize', schedule);
+    };
+  }, []);
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       const mod = e.metaKey || e.ctrlKey;
@@ -640,12 +652,13 @@ export function App() {
         animateViewport({ x: 0, y: 0, scale: 1 }, 250);
       } else if (mod && (e.key === '=' || e.key === '+')) {
         e.preventDefault();
-        const cur = viewport.value;
-        animateViewport({ ...cur, scale: Math.min(4, cur.scale * 1.25) }, 150);
+        // Same centre-anchored zoom as the toolbar +/- buttons these shortcuts
+        // are advertised on (the tooltip names this key) — a raw scale change
+        // is origin-anchored and drifts the board away under the cursor.
+        zoomByFactor(1.25);
       } else if (mod && e.key === '-') {
         e.preventDefault();
-        const cur = viewport.value;
-        animateViewport({ ...cur, scale: Math.max(0.1, cur.scale / 1.25) }, 150);
+        zoomByFactor(1 / 1.25);
       } else if (e.key === 'Escape') {
         if (selectedNodeIds.value.size > 0) {
           clearSelection();

package/src/client/canvas/CanvasNode.tsx

@@ -21,15 +21,54 @@ import {
   viewport,
 } from '../state/canvas-store';
 import { removeNodeFromClient, updateNodeFromClient } from '../state/intent-bridge';
+import { AxStepControls } from '../nodes/AxStepControls';
 import { canOpenAsSite, openNodeAsSite } from '../nodes/surface-url';
 import { getNodeIcon } from '../icons';
 import { EXPANDABLE_TYPES, TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
-import { computeAutoFitHeight, shouldAutoFitNode } from './auto-fit';
+import { AUTO_FIT_TITLEBAR_HEIGHT, computeAutoFitHeight, shouldAutoFitNode } from './auto-fit';
 import { activeGuides, buildSnapCache, clearSnapCache, snapToGuides } from './snap-guides';
 import { useNodeDrag } from './use-node-drag';
 import { useNodeResize } from './use-node-resize';
 
+/** Fraction of a node's height the title bar may occupy before it starts
+ *  crowding out the content it is labelling. */
+const MAX_TITLEBAR_HEIGHT_RATIO = 0.4;
+/** Fraction of a node's width the fixed title-bar chrome may occupy before it
+ *  starts eating the node's NAME. */
+const MAX_TITLEBAR_CHROME_WIDTH_RATIO = 0.55;
+/** Unscaled width of everything in the bar that is not the title: type icon,
+ *  status/type pill, the control cluster, and the gaps between them. */
+const TITLEBAR_CHROME_BASE_WIDTH = 175;
+
+/**
+ * How much to enlarge node chrome (title bar, badges, icons) when zoomed out so
+ * it stays legible. Full inverse compensation is capped at 2.2x — but the cap
+ * alone ignored the node it is drawn on, so on SHORT nodes the growing bar ate
+ * the body: a 116px-tall section label at 46% zoom gave the title bar 72% of the
+ * node and left 14px for text that needed 41, so the markdown was simply cut off.
+ * The scale is therefore also bounded by the node's own height, keeping the bar
+ * under MAX_TITLEBAR_HEIGHT_RATIO of it. Tall nodes are unaffected (their height
+ * never binds); pass height 0 for collapsed/auto-height nodes to skip the bound.
+ */
+export function nodeChromeScale(viewportScale: number, nodeHeight: number, nodeWidth = 0): number {
+  if (!Number.isFinite(viewportScale) || viewportScale >= 1) return 1;
+  const zoomScale = Math.min(2.2, 1 / Math.max(viewportScale, 0.01));
+  let bounded = zoomScale;
+  if (Number.isFinite(nodeHeight) && nodeHeight > 0) {
+    bounded = Math.min(bounded, (nodeHeight * MAX_TITLEBAR_HEIGHT_RATIO) / AUTO_FIT_TITLEBAR_HEIGHT);
+  }
+  // Width matters as much as height: the icon, pill and control cluster are all
+  // flex-shrink: 0, so the NAME is the only thing that gives way. Unbounded, a
+  // 360px step node at 52% zoom spent 100 of 187 bar pixels on controls alone and
+  // the title collapsed to nothing. Bound the scale so the fixed chrome can never
+  // take more than MAX_TITLEBAR_CHROME_WIDTH_RATIO of the node.
+  if (Number.isFinite(nodeWidth) && nodeWidth > 0) {
+    bounded = Math.min(bounded, (nodeWidth * MAX_TITLEBAR_CHROME_WIDTH_RATIO) / TITLEBAR_CHROME_BASE_WIDTH);
+  }
+  return Math.max(1, bounded);
+}
+
 interface CanvasNodeProps {
   node: CanvasNodeState;
   children: preact.ComponentChildren;
@@ -220,7 +259,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
   const isGroup = node.type === 'group';
   const isStrictSize = node.data.strictSize === true;
   const viewportScale = Math.max(viewport.value.scale, 0.01);
-  const chromeScale = viewportScale < 1 ? Math.min(2.2, 1 / viewportScale) : 1;
+  const chromeScale = nodeChromeScale(viewportScale, node.collapsed ? 0 : node.size.height, node.size.width);
 
   const groupColor = isGroup && node.data.color ? (node.data.color as string) : undefined;
   const nodeStyle: Record<string, string | number> = {
@@ -261,9 +300,13 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
             return <NodeIcon size={Math.round(14 * chromeScale)} />;
           })()}
         </span>
-        <span class="node-type-badge">{TYPE_LABELS[node.type]}</span>
-        {typeof node.data.axWorkStatus === 'string' && (
+        {/* The icon already says what type this is, so the type badge yields to
+            the status chip rather than stacking two pills in front of the name —
+            on a narrow node that combination pushed the title to an ellipsis. */}
+        {typeof node.data.axWorkStatus === 'string' ? (
           <span class={`node-ax-status node-ax-status-${node.data.axWorkStatus}`}>{node.data.axWorkStatus}</span>
+        ) : (
+          <span class="node-type-badge">{TYPE_LABELS[node.type]}</span>
         )}
         {renaming ? (
           <input
@@ -278,7 +321,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
             onClick={(e) => e.stopPropagation()}
           />
         ) : (
-          <span class="node-title" onDblClick={handleTitleDblClick} title="Double-click to rename">
+          <span class="node-title" onDblClick={handleTitleDblClick} title={`${title} — double-click to rename`}>
             {title}
           </span>
         )}
@@ -356,6 +399,12 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
       {!node.collapsed && (
         <div ref={bodyRef} class="node-body">
           {children}
+          {/* AX flow step controls — rendered here rather than in a node renderer
+              because a materialized step can be ANY node type, and because the
+              body is what auto-fit measures (a footer outside it would be clipped
+              on a content-fitted node). Renders nothing unless the node carries a
+              `data.axStep` stamp. */}
+          <AxStepControls node={node} />
         </div>
       )}
       {!node.collapsed && (

package/src/client/canvas/CanvasViewport.tsx

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { ContextNode } from '../nodes/ContextNode';
+import { DiffNode } from '../nodes/DiffNode';
 import { FileNode } from '../nodes/FileNode';
 import { LedgerNode } from '../nodes/LedgerNode';
 import { MarkdownNode } from '../nodes/MarkdownNode';
+import { MermaidNode } from '../nodes/MermaidNode';
 import { McpAppNode } from '../nodes/McpAppNode';
 import { StatusNode } from '../nodes/StatusNode';
 import { ImageNode } from '../nodes/ImageNode';
@@ -64,6 +66,10 @@ function renderNodeContent(node: CanvasNodeState) {
       return <TraceNode node={node} />;
     case 'file':
       return <FileNode node={node} />;
+    case 'diff':
+      return <DiffNode node={node} />;
+    case 'mermaid':
+      return <MermaidNode node={node} />;
     case 'image':
       return <ImageNode node={node} />;
     case 'html':