pmx-canvas 0.1.13 → 0.1.15

package/src/cli/agent.ts

@@ -26,6 +26,7 @@ import {
 
 const DEFAULT_PORT = 4313;
 const defaultConsoleLog = console.log;
+const TRACE_NODE_FIELDS = ['toolName', 'category', 'status', 'duration', 'resultSummary', 'error'] as const;
 
 interface CanvasSchemaField {
   name: string;
@@ -153,7 +154,7 @@ function parseFlags(args: string[]): { positional: string[]; flags: Record<strin
   const flags: Record<string, string | true> = {};
   // Boolean-only flags (never take a value argument)
   const BOOL_FLAGS = new Set([
-    'help', 'h', 'ids', 'stdin', 'yes', 'list', 'clear', 'set', 'animated', 'dry-run',
+    'help', 'h', 'ids', 'stdin', 'yes', 'list', 'clear', 'set', 'animated', 'dry-run', 'all',
     'no-open-in-canvas', 'lock-arrange', 'unlock-arrange', 'json', 'compact', 'summary',
     'verbose', 'include-logs', 'no-pan', 'schema', 'example', 'examples', 'strict-size', 'scroll-overflow',
   ]);
@@ -1078,6 +1079,12 @@ cmd('node add', 'Add a node to the canvas', [
     height: 'Use a positive number, e.g. --height 280',
   });
   applyStrictSizeFlags(body, flags);
+  if (type === 'trace') {
+    for (const field of TRACE_NODE_FIELDS) {
+      const value = getStringFlag(flags, field, field.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`));
+      if (value !== undefined) body[field] = value;
+    }
+  }
 
   // Support --stdin for piping content
   if (flags.stdin) {
@@ -1308,6 +1315,11 @@ cmd('node update', 'Update a node by ID', [
 
   applyStrictSizeFlags(body, flags);
 
+  for (const field of TRACE_NODE_FIELDS) {
+    const value = getStringFlag(flags, field, field.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`));
+    if (value !== undefined) body[field] = value;
+  }
+
   if (x !== undefined || y !== undefined || width !== undefined || frameHeight !== undefined || arrangeLocked !== undefined) {
     const existing = await api('GET', `/api/canvas/node/${encodeURIComponent(id)}`) as {
       position: { x: number; y: number };
@@ -1339,7 +1351,7 @@ cmd('node update', 'Update a node by ID', [
   if (Object.keys(body).length === 0) {
     die(
       'No updates specified',
-      'Use --title, --content, --x, --y, --width, --height, --strict-size, --pinned, --lock-arrange, --unlock-arrange, or --stdin',
+      'Use --title, --content, --x, --y, --width, --height, --strict-size, --pinned, trace fields, --lock-arrange, --unlock-arrange, or --stdin',
     );
   }
 
@@ -1565,7 +1577,9 @@ cmd('external-app add', 'Create a hosted external app node', [
     title: typeof flags.title === 'string' ? flags.title : 'Excalidraw Diagram',
     elements: DEFAULT_EXCALIDRAW_ELEMENTS,
   };
-  const elementsJson = getStringFlag(flags, 'elements-json');
+  const nodeId = getStringFlag(flags, 'node-id', 'nodeId', 'id');
+  if (nodeId) body.nodeId = nodeId;
+  const elementsJson = getStringFlag(flags, 'elements-json', 'elements');
   if (elementsJson !== undefined) body.elements = parseJsonValue(elementsJson, 'Excalidraw elements', 'Use --elements-json \'[{"type":"rectangle","id":"r1","x":0,"y":0,"width":120,"height":80}]\'');
   const elementsFile = getStringFlag(flags, 'elements-file', 'initial-file');
   if (elementsFile) body.elements = parseJsonValue(readFileSync(elementsFile, 'utf-8'), 'Excalidraw elements file', 'Use --elements-file ./scene.excalidraw');
@@ -1575,6 +1589,8 @@ cmd('external-app add', 'Create a hosted external app node', [
     width: 'Use a positive number, e.g. --width 960',
     height: 'Use a positive number, e.g. --height 720',
   });
+  const timeoutMs = optionalPositiveFiniteFlag(flags, 'timeout-ms', 'Use a positive number, e.g. --timeout-ms 120000');
+  if (timeoutMs !== undefined) body.timeoutMs = timeoutMs;
 
   const result = await api('POST', '/api/canvas/diagram', body);
   output(result && typeof result === 'object' && !Array.isArray(result) && 'nodeId' in result && !('id' in result)
@@ -1673,13 +1689,41 @@ cmd('snapshot save', 'Save a named snapshot of the current canvas', [
 });
 
 // ── snapshot list ────────────────────────────────────────────
-cmd('snapshot list', 'List all saved snapshots', [
+cmd('snapshot list', 'List saved snapshots', [
   'pmx-canvas snapshot list',
+  'pmx-canvas snapshot list --limit 50 --query baseline',
+  'pmx-canvas snapshot list --all',
 ], async (args) => {
   const { flags } = parseFlags(args);
   if (flags.help || flags.h) return showCommandHelp('snapshot list');
 
-  const result = await api('GET', '/api/canvas/snapshots');
+  const params = new URLSearchParams();
+  const limit = optionalNumberFlag(flags, 'limit', 'Use a positive integer, e.g. --limit 50');
+  const query = getStringFlag(flags, 'query', 'q');
+  if (limit !== undefined) params.set('limit', String(limit));
+  if (query) params.set('q', query);
+  if (flags.all) params.set('all', 'true');
+  const result = await api('GET', `/api/canvas/snapshots${params.size > 0 ? `?${params.toString()}` : ''}`);
+  output(result);
+});
+
+// ── snapshot gc ──────────────────────────────────────────────
+cmd('snapshot gc', 'Delete old snapshots, keeping the newest N', [
+  'pmx-canvas snapshot gc --keep 20 --dry-run',
+  'pmx-canvas snapshot gc --keep 50 --yes',
+], async (args) => {
+  const { flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('snapshot gc');
+
+  const keep = optionalNumberFlag(flags, 'keep', 'Use a positive integer, e.g. --keep 20');
+  const dryRun = flags['dry-run'] === true;
+  if (!dryRun && !flags.yes) {
+    die('Destructive operation requires --yes flag', 'Preview with: pmx-canvas snapshot gc --keep 20 --dry-run');
+  }
+  const result = await api('POST', '/api/canvas/snapshots/gc', {
+    ...(keep !== undefined ? { keep } : {}),
+    dryRun,
+  });
   output(result);
 });
 
@@ -2274,12 +2318,25 @@ function showCommandHelp(name: string): void {
     console.log('\nOutput control:');
     console.log('  --summary                 Return only validation summary metadata');
   }
+  if (name === 'snapshot list') {
+    console.log('\nOptions:');
+    console.log('  --limit <number>          Maximum snapshots to return (default 20)');
+    console.log('  --query <text>            Case-insensitive ID/name filter');
+    console.log('  --all                     Return all snapshots');
+  }
+  if (name === 'snapshot gc') {
+    console.log('\nOptions:');
+    console.log('  --keep <number>           Number of newest snapshots to keep (default 20)');
+    console.log('  --dry-run                 Preview deletions without removing files');
+    console.log('  --yes                     Confirm deletion');
+  }
   if (name === 'web-artifact build') {
     console.log('\nDependencies:');
     console.log('  --deps <list>              Add npm dependencies before bundling, e.g. --deps recharts,zod');
     console.log('\nOutput control:');
     console.log('  --include-logs            Include raw build stdout/stderr in the response');
     console.log('  --verbose                 Alias for --include-logs');
+    console.log('  --timeout-ms <number>     Optional init/install/build timeout in milliseconds');
   }
   if (name === 'focus') {
     console.log('\nViewport:');
@@ -2303,9 +2360,12 @@ function showCommandHelp(name: string): void {
     console.log('\nOptions:');
     console.log('  --kind excalidraw          External app kind to create');
     console.log('  --title <title>            Node title');
+    console.log('  --node-id <id>             Existing Excalidraw app node to update in place');
+    console.log('  --elements <json>          Optional Excalidraw elements array JSON');
     console.log('  --elements-json <json>     Optional Excalidraw elements array JSON');
     console.log('  --elements-file <path>     Optional file containing Excalidraw elements JSON');
     console.log('  --initial-file <path>      Alias for --elements-file');
+    console.log('  --timeout-ms <number>      Optional downstream MCP timeout for cold starts');
   }
   console.log('');
 }
@@ -2375,6 +2435,7 @@ History:
 Snapshots:
   pmx-canvas snapshot save --name X   Save a named snapshot
   pmx-canvas snapshot list            List snapshots
+  pmx-canvas snapshot gc --keep 20    Delete old snapshots
   pmx-canvas snapshot restore <id>    Restore from snapshot
   pmx-canvas snapshot diff <id>       Compare current canvas to snapshot
   pmx-canvas snapshot delete <id>     Delete a snapshot

package/src/cli/index.ts

@@ -5,6 +5,7 @@ import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { runAgentCli } from './agent.js';
 import { createCanvas } from '../server/index.js';
+import { seedDemoCanvas } from '../server/demo.js';
 
 const args = process.argv.slice(2);
 
@@ -594,29 +595,7 @@ Examples:
     process.exit(1);
   }
 
-  if (demo && canvas.getLayout().nodes.length === 0) {
-    const n1 = canvas.addNode({
-      type: 'markdown',
-      title: 'Welcome to PMX Canvas',
-      content: '# PMX Canvas Workbench\n\nA spatial canvas for coding agents.\n\n## Features\n- Infinite 2D canvas with pan/zoom\n- Multiple node types\n- Edges between nodes\n- Real-time SSE updates\n- HTTP API for agent control',
-    });
-
-    const n2 = canvas.addNode({
-      type: 'markdown',
-      title: 'Getting Started',
-      content: `# Quick Start\n\n\`\`\`bash\n# Add a node via CLI\npmx-canvas node add --type markdown --title "Hello" --content "# World"\n\n# List nodes\npmx-canvas node list\n\n# Get canvas state\npmx-canvas layout\n\`\`\``,
-    });
-
-    const n3 = canvas.addNode({
-      type: 'status',
-      title: 'Agent Status',
-      content: 'Ready',
-    });
-
-    canvas.addEdge({ from: n1, to: n2, type: 'flow', label: 'next' });
-    canvas.addEdge({ from: n2, to: n3, type: 'flow' });
-    canvas.arrange('grid');
-  }
+  if (demo && canvas.getLayout().nodes.length === 0) seedDemoCanvas();
 
   console.log(`\n  PMX Canvas running at http://localhost:${canvas.port}`);
   console.log(`  Health: http://localhost:${canvas.port}/health\n`);

package/src/client/canvas/AttentionHistory.tsx

@@ -5,6 +5,7 @@ import {
   closeAttentionHistory,
   openAttentionHistory,
 } from '../state/attention-store';
+import { collapseDockedContextNodes, hasOpenDockedContextPanel } from '../state/canvas-store';
 
 function formatTimestamp(timestamp: number): string {
   return new Date(timestamp).toLocaleTimeString([], {
@@ -13,19 +14,31 @@ function formatTimestamp(timestamp: number): string {
   });
 }
 
+function handleOpenUpdates(): void {
+  // Mutual exclusion with the Context panel — only one side panel open at a
+  // time (they share the same right-edge anchor).
+  collapseDockedContextNodes();
+  openAttentionHistory();
+}
+
 export function AttentionHistory() {
   const entries = attentionHistory.value;
   if (entries.length === 0) return null;
 
   const isOpen = attentionHistoryOpen.value;
   const unread = attentionHistoryUnread.value;
+  // Hide the collapsed Updates pill while the Context side panel is open —
+  // the panel sits at the same right-edge and would visually cover the pill.
+  // Mutual exclusion guarantees both can't be expanded simultaneously, so the
+  // pill only needs to hide while context is expanded.
+  if (!isOpen && hasOpenDockedContextPanel.value) return null;
 
   if (!isOpen) {
     return (
       <button
         type="button"
         class="attention-history-tab"
-        onClick={openAttentionHistory}
+        onClick={handleOpenUpdates}
         aria-label={unread > 0 ? `Recent updates — ${unread} new` : 'Recent updates'}
         title={unread > 0 ? `${unread} new updates since last viewed` : 'Recent updates'}
       >

package/src/client/canvas/CanvasNode.tsx

@@ -164,7 +164,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
           window.clearTimeout(autoFitPersistTimer.current);
         }
         autoFitPersistTimer.current = window.setTimeout(() => {
-          persistLayout();
+          persistLayout({ recordHistory: false });
           autoFitPersistTimer.current = null;
         }, 0);
       }

package/src/client/canvas/CanvasViewport.tsx

@@ -8,6 +8,7 @@ import { StatusNode } from '../nodes/StatusNode';
 import { ImageNode } from '../nodes/ImageNode';
 import { GroupNode } from '../nodes/GroupNode';
 import { WebpageNode } from '../nodes/WebpageNode';
+import { HtmlNode } from '../nodes/HtmlNode';
 import { PromptNode } from '../nodes/PromptNode';
 import { ResponseNode } from '../nodes/ResponseNode';
 import { TraceNode } from '../nodes/TraceNode';
@@ -60,6 +61,8 @@ function renderNodeContent(node: CanvasNodeState) {
       return <FileNode node={node} />;
     case 'image':
       return <ImageNode node={node} />;
+    case 'html':
+      return <HtmlNode node={node} />;
     case 'group':
       return <GroupNode node={node} />;
     default:

package/src/client/canvas/DockedNode.tsx

@@ -2,6 +2,7 @@ import { ContextNode } from '../nodes/ContextNode';
 import { LedgerNode } from '../nodes/LedgerNode';
 import { StatusNode } from '../nodes/StatusNode';
 import { StatusSummary } from '../nodes/StatusSummary';
+import { attentionHistoryOpen, closeAttentionHistory } from '../state/attention-store';
 import { toggleCollapsed, undockNode } from '../state/canvas-store';
 import { TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
@@ -19,20 +20,119 @@ function renderDockedContent(node: CanvasNodeState) {
   }
 }
 
+function getContextItemCount(node: CanvasNodeState): number {
+  const cards = Array.isArray(node.data.cards) ? (node.data.cards as unknown[]) : [];
+  const auxTabs = Array.isArray(node.data.auxTabs) ? (node.data.auxTabs as unknown[]) : [];
+  return cards.length + auxTabs.length;
+}
+
+function ContextDockedNode({ node }: { node: CanvasNodeState }) {
+  const count = getContextItemCount(node);
+  const hasItems = count > 0;
+  const collapsed = node.collapsed === true;
+
+  const expand = () => {
+    // Mutual exclusion with the Updates panel — only one side panel open at a
+    // time. They share the same right-edge anchor, so opening both at once
+    // would visually collide.
+    closeAttentionHistory();
+    toggleCollapsed(node.id);
+  };
+
+  // Hide the collapsed Context pill while the Updates side panel is open.
+  // Mutual exclusion guarantees both panels can't be expanded simultaneously,
+  // but the pill itself would otherwise sit beneath/beside the Updates panel
+  // at the same right edge — better to hide until Updates is closed.
+  if (collapsed && attentionHistoryOpen.value) return null;
+
+  if (collapsed) {
+    return (
+      <button
+        type="button"
+        class="context-dock-tab"
+        data-docked-node="true"
+        onClick={expand}
+        aria-label={hasItems ? `Context — ${count} item${count === 1 ? '' : 's'}` : 'Context'}
+        title={hasItems ? `${count} item${count === 1 ? '' : 's'} in agent context` : 'Agent context'}
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+          <line x1="1.5" y1="6" x2="14.5" y2="6" />
+          <circle cx="4" cy="4.25" r="0.6" fill="currentColor" stroke="none" />
+        </svg>
+        <span class="context-dock-tab-label">Context</span>
+        {hasItems && (
+          <span class="context-dock-tab-badge" aria-hidden="true">
+            {count > 99 ? '99+' : count}
+          </span>
+        )}
+      </button>
+    );
+  }
+
+  return (
+    <aside class="context-dock-panel" data-docked-node="true" aria-label="Agent context">
+      <div class="context-dock-header">
+        <div class="context-dock-header-text">
+          <span class="context-dock-title">Context</span>
+          <span class="context-dock-subtitle">
+            {hasItems ? `${count} item${count === 1 ? '' : 's'} in agent context` : 'Active agent context'}
+          </span>
+        </div>
+        <div class="context-dock-controls">
+          <button
+            type="button"
+            class="context-dock-icon-button"
+            onClick={(e) => {
+              e.stopPropagation();
+              undockNode(node.id);
+            }}
+            aria-label="Undock to canvas"
+            title="Undock to canvas"
+          >
+            {'\u2299'}
+          </button>
+          <button
+            type="button"
+            class="context-dock-icon-button"
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleCollapsed(node.id);
+            }}
+            aria-label="Collapse context panel"
+            title="Collapse"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+      <div class="context-dock-body">
+        <ContextNode node={node} />
+      </div>
+    </aside>
+  );
+}
+
 export function DockedNode({ node }: { node: CanvasNodeState }) {
+  if (node.type === 'context') {
+    return <ContextDockedNode node={node} />;
+  }
+
   return (
-    <div class="docked-node">
+    <div class="docked-node" data-docked-node="true">
       <div class="docked-node-header">
         <span class="node-type-badge">{TYPE_LABELS[node.type] ?? node.type}</span>
         {node.type === 'status' && node.collapsed && <StatusSummary node={node} />}
-        {node.type === 'context' && node.collapsed && (
-          <span style={{ fontSize: '11px', color: 'var(--c-muted)' }}>
-            Active Agent Context
-            {typeof node.data.utilization === 'number' && (
-              <> · {Math.round(Number(node.data.utilization) * 100)}%</>
-            )}
-          </span>
-        )}
         <div class="docked-node-controls">
           <button
             type="button"
@@ -57,9 +157,7 @@ export function DockedNode({ node }: { node: CanvasNodeState }) {
         </div>
       </div>
       {!node.collapsed && (
-        <div class={`docked-node-body${node.type === 'context' ? ' context-body' : ''}`}>
-          {renderDockedContent(node)}
-        </div>
+        <div class="docked-node-body">{renderDockedContent(node)}</div>
       )}
     </div>
   );

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -7,6 +7,7 @@ import { McpAppNode } from '../nodes/McpAppNode';
 import { StatusNode } from '../nodes/StatusNode';
 import { ImageNode } from '../nodes/ImageNode';
 import { WebpageNode } from '../nodes/WebpageNode';
+import { HtmlNode } from '../nodes/HtmlNode';
 import { PromptNode } from '../nodes/PromptNode';
 import { ResponseNode } from '../nodes/ResponseNode';
 import { TraceNode } from '../nodes/TraceNode';
@@ -26,13 +27,13 @@ function renderContent(node: CanvasNodeState, expanded: boolean) {
     case 'markdown':
       return <MarkdownNode node={node} expanded={expanded} />;
     case 'mcp-app':
-      return <McpAppNode node={node} />;
+      return <McpAppNode node={node} expanded={expanded} />;
     case 'webpage':
       return <WebpageNode node={node} expanded={expanded} />;
     case 'json-render':
-      return <McpAppNode node={node} />;
+      return <McpAppNode node={node} expanded={expanded} />;
     case 'graph':
-      return <McpAppNode node={node} />;
+      return <McpAppNode node={node} expanded={expanded} />;
     case 'prompt':
       return <PromptNode node={node} />;
     case 'response':
@@ -49,6 +50,8 @@ function renderContent(node: CanvasNodeState, expanded: boolean) {
       return <FileNode node={node} expanded={expanded} />;
     case 'image':
       return <ImageNode node={node} expanded={expanded} />;
+    case 'html':
+      return <HtmlNode node={node} expanded={expanded} />;
     default:
       return <div>Unknown node type</div>;
   }
@@ -63,6 +66,8 @@ function getNodeTextContent(node: CanvasNodeState): string {
       return (node.data.fileContent as string) || '';
     case 'webpage':
       return (node.data.content as string) || '';
+    case 'html':
+      return (node.data.html as string) || (node.data.content as string) || '';
     case 'json-render':
     case 'graph':
       return JSON.stringify(node.data.spec ?? node.data.graphConfig ?? {}, null, 2);

package/src/client/canvas/Minimap.tsx

@@ -37,6 +37,7 @@ function getNodeColors(): Record<CanvasNodeState['type'], string> {
     trace: t.purple,
     file: t.accent,
     image: t.ok,
+    html: t.warn,
     group: t.dim,
   };
 }

package/src/client/icons.tsx

@@ -419,6 +419,7 @@ export function getNodeIcon(type: string): (p: IconProps) => JSX.Element {
     case 'ext-app': return IconNodeExtApp;
     case 'json-render': return IconNodeJsonRender;
     case 'graph': return IconNodeGraph;
+    case 'html': return IconNodeWebpage;
     default: return IconNodeMarkdown;
   }
 }

package/src/client/nodes/ExtAppFrame.tsx

@@ -13,11 +13,6 @@ import type { CanvasNodeState } from '../types';
 
 type McpUiTheme = 'light' | 'dark';
 
-type IframeLoadTarget = Pick<
-  HTMLIFrameElement,
-  'addEventListener' | 'removeEventListener' | 'contentDocument'
->;
-
 type ExtAppBridgeNotifications = Pick<AppBridge, 'sendToolInput' | 'sendToolResult'>;
 type DisplayMode = 'inline' | 'fullscreen' | 'pip';
 const DEFAULT_EXT_APP_SANDBOX = 'allow-scripts allow-popups allow-popups-to-escape-sandbox';
@@ -43,21 +38,6 @@ async function postJson<T>(url: string, body: Record<string, unknown>): Promise<
   return json.result as T;
 }
 
-export function waitForExtAppFrameLoad(target: IframeLoadTarget): Promise<void> {
-  const readyState = target.contentDocument?.readyState;
-  if (readyState === 'interactive' || readyState === 'complete') {
-    return Promise.resolve();
-  }
-
-  return new Promise<void>((resolve) => {
-    const onLoad = () => {
-      target.removeEventListener('load', onLoad);
-      resolve();
-    };
-    target.addEventListener('load', onLoad, { once: true });
-  });
-}
-
 export function getExtAppBridgeInitKey(node: CanvasNodeState, retryKey: number): string {
   const html = typeof node.data.html === 'string' ? node.data.html : '';
   const serverName = typeof node.data.serverName === 'string' ? node.data.serverName : '';
@@ -131,7 +111,7 @@ export function shouldApplyExtAppSizeChange(height: unknown, isExpanded: boolean
   return typeof height === 'number' && Number.isFinite(height) && height > 0 && !isExpanded;
 }
 
-export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
+export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const bridgeRef = useRef<AppBridge | null>(null);
   const transportRef = useRef<PostMessageTransport | null>(null);
@@ -164,10 +144,9 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
   const sessionError = node.data.sessionError as string | undefined;
   const maxHeight = node.size.height;
   const nodeId = node.id;
-  const frameKey = `${node.id}:${retryKey}`;
-  const bridgeInitKey = getExtAppBridgeInitKey(node, retryKey);
+  const frameKey = getExtAppBridgeInitKey(node, retryKey);
   const toMcpTheme = (theme: string): McpUiTheme => (theme === 'light' ? 'light' : 'dark');
-  const isExpanded = expandedNodeId.value === nodeId;
+  const isExpanded = expanded || expandedNodeId.value === nodeId;
 
   latestToolInputRef.current = toolInput;
   latestToolResultRef.current = toolResult;
@@ -221,9 +200,9 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
     return sendPromise;
   };
 
-  // Initialize bridge when iframe loads and HTML is available
+  // Initialize as soon as HTML is mounted; some apps send initialize before iframe load fires.
   useEffect(() => {
-    if (!html) return; // Wait for HTML to arrive
+    if (!html) return;
     const iframe = iframeRef.current;
     if (!iframe) return;
     let disposed = false;
@@ -242,12 +221,8 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
     };
 
     const init = async () => {
-      let contentWindow = iframe.contentWindow;
-      if (!contentWindow) {
-        await waitForExtAppFrameLoad(iframe);
-        if (disposed) return;
-        contentWindow = iframe.contentWindow;
-      }
+      if (!html) return;
+      const contentWindow = iframe.contentWindow;
       if (!contentWindow) {
         throw new Error('Ext-app iframe window is unavailable');
       }
@@ -397,8 +372,8 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
         bridgeReadyRef.current = true;
         setStatus('ready');
         setError(null);
-        scheduleHostContextUpdate();
-        void sendExtAppBootstrapState(bridge, latestToolInputRef.current, undefined)
+        void Promise.resolve(bridge.sendHostContextChange(buildHostContext(isExpanded ? 'fullscreen' : 'inline')))
+          .then(() => sendExtAppBootstrapState(bridge, latestToolInputRef.current, undefined))
           .then(() => flushToolResult(bridge))
           .catch((err) => {
             const msg = err instanceof Error ? err.message : String(err);
@@ -481,7 +456,7 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
         transportRef.current = null;
       }
     };
-  }, [bridgeInitKey]);
+  }, [frameKey]);
 
   // Forward tool result when it arrives after bridge is ready
   useEffect(() => {