pmx-canvas 0.1.2 → 0.1.4

package/src/cli/agent.ts

@@ -13,6 +13,7 @@
 
 import { readFileSync, writeFileSync } from 'node:fs';
 import { openUrlInExternalBrowser } from '../server/server.js';
+import { DEFAULT_EXCALIDRAW_ELEMENTS } from '../server/diagram-presets.js';
 import {
   ALL_SEMANTIC_WATCH_EVENT_TYPES,
   formatCompactWatchEvent,
@@ -24,6 +25,7 @@ import {
 // ── Helpers ──────────────────────────────────────────────────
 
 const DEFAULT_PORT = 4313;
+const defaultConsoleLog = console.log;
 
 interface CanvasSchemaField {
   name: string;
@@ -91,13 +93,19 @@ function die(message: string, hint?: string): never {
 }
 
 function output(data: unknown): void {
-  console.log(JSON.stringify(data, null, 2));
+  const text = JSON.stringify(data, null, 2);
+  if (console.log !== defaultConsoleLog) {
+    console.log(text);
+    return;
+  }
+  process.stdout.write(`${text}\n`);
 }
 
 async function api(
   method: string,
   path: string,
   body?: Record<string, unknown>,
+  options?: { allowErrorJson?: boolean },
 ): Promise<unknown> {
   const base = getBaseUrl();
   const url = `${base}${path}`;
@@ -128,6 +136,7 @@ async function api(
   }
 
   if (!res.ok) {
+    if (options?.allowErrorJson) return json;
     const err = json as Record<string, unknown>;
     die(
       err.error ? String(err.error) : `HTTP ${res.status}`,
@@ -146,7 +155,7 @@ function parseFlags(args: string[]): { positional: string[]; flags: Record<strin
   const BOOL_FLAGS = new Set([
     'help', 'h', 'ids', 'stdin', 'yes', 'list', 'clear', 'set', 'animated', 'dry-run',
     'no-open-in-canvas', 'lock-arrange', 'unlock-arrange', 'json', 'compact', 'summary',
-    'verbose', 'include-logs',
+    'verbose', 'include-logs', 'no-pan',
   ]);
   for (let i = 0; i < args.length; i++) {
     const arg = args[i];
@@ -228,8 +237,9 @@ function parseStringListFlag(
   flags: Record<string, string | true>,
   name: string,
   hint: string,
+  ...aliases: string[]
 ): string[] | undefined {
-  const raw = getStringFlag(flags, name);
+  const raw = getStringFlag(flags, name, ...aliases);
   if (raw === undefined) return undefined;
   const trimmed = raw.trim();
   if (!trimmed) {
@@ -286,6 +296,7 @@ function summarizeNodeResult(node: Record<string, unknown>): Record<string, unkn
     ...(node.ok !== undefined ? { ok: node.ok } : {}),
     id: node.id ?? null,
     type: node.type ?? null,
+    ...(typeof node.kind === 'string' ? { kind: node.kind } : {}),
     title: node.title ?? null,
     ...(typeof node.content === 'string' ? { contentPreview: truncateText(node.content) } : {}),
     ...(node.position !== undefined ? { position: node.position } : {}),
@@ -532,37 +543,48 @@ async function buildGraphRequestBody(
     'Use: pmx-canvas node add --type graph --graph-type bar --data-file ./metrics.json --x-key label --y-key value';
   const rawData = await readTextInput(flags, {
     fileFlags: ['data-file'],
-    valueFlags: ['data-json'],
+    valueFlags: ['data-json', 'data'],
     allowStdin: true,
     label: 'graph JSON dataset',
     hint,
-    requiredMessage: 'Graph nodes require --data-file, --data-json, or --stdin JSON data.',
+    requiredMessage: 'Graph nodes require --data-file, --data-json, --data, or --stdin JSON data.',
   });
   const data = parseRecordArrayJson(rawData, hint);
 
   const body: Record<string, unknown> = {
-    graphType: getStringFlag(flags, 'graph-type') ?? 'line',
+    graphType: getStringFlag(flags, 'graph-type', 'graphType') ?? 'line',
     data,
   };
   if (typeof flags.title === 'string') body.title = flags.title;
-  if (typeof flags['x-key'] === 'string') body.xKey = flags['x-key'];
-  if (typeof flags['y-key'] === 'string') body.yKey = flags['y-key'];
-  if (typeof flags['z-key'] === 'string') body.zKey = flags['z-key'];
-  if (typeof flags['name-key'] === 'string') body.nameKey = flags['name-key'];
-  if (typeof flags['value-key'] === 'string') body.valueKey = flags['value-key'];
-  if (typeof flags['axis-key'] === 'string') body.axisKey = flags['axis-key'];
+  const xKey = getStringFlag(flags, 'x-key', 'xKey');
+  const yKey = getStringFlag(flags, 'y-key', 'yKey');
+  const zKey = getStringFlag(flags, 'z-key', 'zKey');
+  const nameKey = getStringFlag(flags, 'name-key', 'nameKey');
+  const valueKey = getStringFlag(flags, 'value-key', 'valueKey');
+  const axisKey = getStringFlag(flags, 'axis-key', 'axisKey');
+  if (xKey) body.xKey = xKey;
+  if (yKey) body.yKey = yKey;
+  if (zKey) body.zKey = zKey;
+  if (nameKey) body.nameKey = nameKey;
+  if (valueKey) body.valueKey = valueKey;
+  if (axisKey) body.axisKey = axisKey;
   const metrics = parseStringListFlag(flags, 'metrics', 'Use a comma-separated list, e.g. --metrics north,south');
   const series = parseStringListFlag(flags, 'series', 'Use a comma-separated list, e.g. --series north,south');
   if (metrics) body.metrics = metrics;
   if (series) body.series = series;
-  if (typeof flags['bar-key'] === 'string') body.barKey = flags['bar-key'];
-  if (typeof flags['line-key'] === 'string') body.lineKey = flags['line-key'];
+  const barKey = getStringFlag(flags, 'bar-key', 'barKey');
+  const lineKey = getStringFlag(flags, 'line-key', 'lineKey');
+  if (barKey) body.barKey = barKey;
+  if (lineKey) body.lineKey = lineKey;
   if (flags.aggregate === 'sum' || flags.aggregate === 'count' || flags.aggregate === 'avg') {
     body.aggregate = flags.aggregate;
   }
-  if (typeof flags.color === 'string') body.color = flags.color;
-  if (typeof flags['bar-color'] === 'string') body.barColor = flags['bar-color'];
-  if (typeof flags['line-color'] === 'string') body.lineColor = flags['line-color'];
+  const color = getStringFlag(flags, 'color');
+  const barColor = getStringFlag(flags, 'bar-color', 'barColor');
+  const lineColor = getStringFlag(flags, 'line-color', 'lineColor');
+  if (color) body.color = color;
+  if (barColor) body.barColor = barColor;
+  if (lineColor) body.lineColor = lineColor;
 
   const chartHeight = optionalPositiveFiniteFlag(flags, 'chart-height', 'Use a positive number, e.g. --chart-height 300');
   const x = optionalFiniteFlag(flags, 'x', 'Use a finite number, e.g. --x 500');
@@ -621,6 +643,8 @@ async function buildWebArtifactRequestBody(
   if (typeof flags['output-path'] === 'string') body.outputPath = flags['output-path'];
   if (typeof flags['init-script-path'] === 'string') body.initScriptPath = flags['init-script-path'];
   if (typeof flags['bundle-script-path'] === 'string') body.bundleScriptPath = flags['bundle-script-path'];
+  const deps = parseStringListFlag(flags, 'deps', 'Use a comma-separated list, e.g. --deps recharts,zod');
+  if (deps) body.deps = deps;
   if (flags['no-open-in-canvas']) body.openInCanvas = false;
   if (flags.verbose || flags['include-logs']) body.includeLogs = true;
 
@@ -631,8 +655,11 @@ async function buildWebArtifactRequestBody(
 }
 
 async function runWebArtifactBuildCommand(flags: Record<string, string | true>): Promise<void> {
-  const result = await api('POST', '/api/canvas/web-artifact', await buildWebArtifactRequestBody(flags));
+  const result = await api('POST', '/api/canvas/web-artifact', await buildWebArtifactRequestBody(flags), { allowErrorJson: true });
   output(result);
+  if (isRecord(result) && result.ok === false) {
+    process.exit(1);
+  }
 }
 
 async function loadCanvasSchema(): Promise<CanvasSchemaResponse> {
@@ -915,6 +942,13 @@ cmd('node add', 'Add a node to the canvas', [
     return;
   }
 
+  if (type === 'mcp-app') {
+    die(
+      'mcp-app nodes require tool-backed app metadata and cannot be created with generic node add.',
+      'Use: pmx-canvas web-artifact build --title "Dashboard" --app-file ./App.tsx, or pmx-canvas external-app add --kind excalidraw --title "Diagram"',
+    );
+  }
+
   const body: Record<string, unknown> = { type };
   if (flags.title) body.title = flags.title;
   const webpageUrl = getStringFlag(flags, 'url');
@@ -1014,7 +1048,7 @@ cmd('node list', 'List all nodes on the canvas', [
   let nodes = layout.nodes;
 
   if (flags.type && flags.type !== true) {
-    nodes = nodes.filter((n) => n.type === flags.type);
+    nodes = nodes.filter((n) => n.type === flags.type || n.kind === flags.type);
   }
 
   if (flags.ids) {
@@ -1269,7 +1303,12 @@ cmd('status', 'Quick canvas summary', [
 
   const typeCounts: Record<string, number> = {};
   for (const n of layout.nodes) {
-    const t = n.type as string;
+    const data = isRecord(n.data) ? n.data : {};
+    const t = typeof n.kind === 'string'
+      ? n.kind
+      : n.type === 'mcp-app' && data.hostMode === 'hosted' && typeof data.path === 'string'
+      ? 'web-artifact'
+      : n.type as string;
     typeCounts[t] = (typeCounts[t] || 0) + 1;
   }
 
@@ -1308,10 +1347,43 @@ cmd('focus', 'Pan viewport to center on a node', [
   const id = positional[0];
   if (!id) die('Missing node ID', 'pmx-canvas focus <node-id>');
 
-  const result = await api('POST', '/api/canvas/focus', { id });
+  const result = await api('POST', '/api/canvas/focus', { id, ...(flags['no-pan'] ? { noPan: true } : {}) });
   output(result);
 });
 
+// ── external-app add ─────────────────────────────────────────
+cmd('external-app add', 'Create a hosted external app node', [
+  'pmx-canvas external-app add --kind excalidraw --title "Diagram"',
+], async (args) => {
+  const { flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('external-app add');
+
+  const kind = typeof flags.kind === 'string' ? flags.kind.trim() : '';
+  if (kind !== 'excalidraw') {
+    die('Unsupported external app kind.', 'Use: pmx-canvas external-app add --kind excalidraw --title "Diagram"');
+  }
+
+  const body: Record<string, unknown> = {
+    title: typeof flags.title === 'string' ? flags.title : 'Excalidraw Diagram',
+    elements: DEFAULT_EXCALIDRAW_ELEMENTS,
+  };
+  const elementsJson = getStringFlag(flags, 'elements-json');
+  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');
+  applyCommonGeometryFlags(body, flags, {
+    x: 'Use a finite number, e.g. --x 500',
+    y: 'Use a finite number, e.g. --y 300',
+    width: 'Use a positive number, e.g. --width 960',
+    height: 'Use a positive number, e.g. --height 720',
+  });
+
+  const result = await api('POST', '/api/canvas/diagram', body);
+  output(result && typeof result === 'object' && !Array.isArray(result) && 'nodeId' in result && !('id' in result)
+    ? { id: (result as { nodeId?: unknown }).nodeId, ...result }
+    : result);
+});
+
 // ── pin ──────────────────────────────────────────────────────
 cmd('pin', 'Manage context pins', [
   'pmx-canvas pin node1 node2 node3',
@@ -1966,8 +2038,13 @@ function showCommandHelp(name: string): void {
     console.log('\nSchema help:');
     console.log('  pmx-canvas node add --help --type webpage');
     console.log('  pmx-canvas node add --help --type json-render --component Table');
+    console.log('  pmx-canvas node add --help --type graph');
     console.log('  pmx-canvas node add --help --type webpage --json');
   }
+  if (name === 'node add' || name === 'validate spec') {
+    console.log('\nGraph flags:');
+    console.log('  Graph fields accept kebab-case CLI flags and camelCase schema names, e.g. --graph-type/--graphType and --x-key/--xKey');
+  }
   if (name === 'node schema') {
     console.log('\nFilters:');
     console.log('  --summary                 Show compact schema summaries');
@@ -1979,10 +2056,24 @@ function showCommandHelp(name: string): void {
     console.log('  --summary                 Return only validation summary metadata');
   }
   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');
   }
+  if (name === 'focus') {
+    console.log('\nViewport:');
+    console.log('  --no-pan                  Select/raise the node without moving the viewport');
+  }
+  if (name === 'external-app add') {
+    console.log('\nOptions:');
+    console.log('  --kind excalidraw          External app kind to create');
+    console.log('  --title <title>            Node title');
+    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('');
 }
 
@@ -2023,6 +2114,7 @@ Canvas commands:
   pmx-canvas validate spec            Validate json-render/graph payloads without creating nodes
   pmx-canvas watch [options]          Watch semantic canvas changes over SSE
   pmx-canvas focus <id>               Pan viewport to node
+  pmx-canvas external-app add          Add hosted external apps like Excalidraw
   pmx-canvas webview status           Show WebView automation status
   pmx-canvas webview start [options]  Start or replace automation session
   pmx-canvas webview evaluate         Evaluate JS in automation session
@@ -2090,6 +2182,7 @@ Examples:
   pmx-canvas validate spec --type json-render --spec-file ./dashboard.json --summary
   pmx-canvas history --summary
   pmx-canvas web-artifact build --title "Dashboard" --app-file ./App.tsx
+  pmx-canvas external-app add --kind excalidraw --title "Diagram"
   pmx-canvas web-artifact build --title "Dashboard" --app-file ./App.tsx --include-logs
   pmx-canvas webview evaluate --script "const title = document.title; return title"
   pmx-canvas snapshot save --name "pre-refactor"

package/src/cli/index.ts

@@ -31,7 +31,7 @@ if (args.includes('--version') || args.includes('-v')) {
 const AGENT_COMMANDS = new Set([
   'node', 'edge', 'search', 'layout', 'status', 'arrange', 'focus',
   'pin', 'undo', 'redo', 'history', 'snapshot', 'diff', 'group', 'webview', 'open',
-  'clear', 'code-graph', 'spatial', 'watch', 'web-artifact', 'batch', 'validate', 'serve',
+  'clear', 'code-graph', 'spatial', 'watch', 'web-artifact', 'external-app', 'batch', 'validate', 'serve',
 ]);
 
 const firstArg = args[0] ?? '';
@@ -501,6 +501,7 @@ 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
+  external-app add                    Add hosted external apps like Excalidraw
   pin <ids...> | --list | --clear     Manage context pins
   undo / redo / history               Time travel
   snapshot save|list|restore|diff|delete
@@ -542,6 +543,7 @@ Examples:
   pmx-canvas node list                                        List all nodes
   pmx-canvas node schema --type json-render                   Show running-server schema info
   pmx-canvas web-artifact build --title "Dashboard" --app-file ./App.tsx
+  pmx-canvas external-app add --kind excalidraw --title "Diagram"
   pmx-canvas validate spec --type graph --graph-type bar --data-file ./metrics.json --x-key label --y-key value
   pmx-canvas open                                             Open the workbench in a browser
   pmx-canvas webview status                                   Show WebView automation status

package/src/client/App.tsx

@@ -28,6 +28,7 @@ import {
   forceDirectedArrange,
   hasInitialServerLayout,
   nodes,
+  pendingExpandedNodeCloseId,
   persistLayout,
   selectedNodeIds,
   sessionId,
@@ -366,7 +367,7 @@ export function App() {
       }
 
       // Esc always collapses expanded node first (even from inside inputs)
-      if (e.key === 'Escape' && expandedNodeId.value) {
+      if (e.key === 'Escape' && expandedNodeId.value && !pendingExpandedNodeCloseId.value) {
         e.preventDefault();
         collapseExpandedNode();
         return;

package/src/client/canvas/CanvasNode.tsx

@@ -143,9 +143,10 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
   const autoFitPersistTimer = useRef<number | null>(null);
   const AUTO_FIT_MAX = 600;
   const TITLEBAR_HEIGHT = 37;
+  const isExtAppNode = node.type === 'mcp-app' && node.data.mode === 'ext-app';
 
   useEffect(() => {
-    if (hasAutoFit.current || node.collapsed || node.dockPosition || node.type === 'group') return;
+    if (hasAutoFit.current || node.collapsed || node.dockPosition || node.type === 'group' || isExtAppNode) return;
     const body = bodyRef.current;
     if (!body) return;
 
@@ -180,7 +181,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
         autoFitPersistTimer.current = null;
       }
     };
-  }, [node.id, node.type, node.collapsed, node.dockPosition, node.size.width, node.size.height]);
+  }, [node.id, node.type, isExtAppNode, node.collapsed, node.dockPosition, node.size.width, node.size.height]);
 
   const isPinned = node.pinned;
   const isTrace = node.type === 'trace';

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -15,6 +15,7 @@ import {
   contextPinnedNodeIds,
   expandedNodeId,
   nodes,
+  pendingExpandedNodeCloseId,
   toggleContextPin,
 } from '../state/canvas-store';
 import { TYPE_LABELS } from '../types';
@@ -115,6 +116,7 @@ export function ExpandedNodeOverlay() {
   const words = wordCount(textContent);
   const isCtxPinned = nodeId ? contextPinnedNodeIds.value.has(nodeId) : false;
   const hasText = textContent.length > 0;
+  const pendingClose = pendingExpandedNodeCloseId.value === nodeId;
 
   return (
     <div
@@ -130,6 +132,7 @@ export function ExpandedNodeOverlay() {
         alignItems: 'stretch',
         justifyContent: 'center',
         padding: '32px',
+        pointerEvents: pendingClose ? 'none' : 'auto',
       }}
     >
       <div
@@ -217,7 +220,9 @@ export function ExpandedNodeOverlay() {
             )}
           </div>
 
-          <span style={{ fontSize: '10px', color: 'var(--c-muted)' }}>Esc to close</span>
+          <span style={{ fontSize: '10px', color: pendingClose ? 'var(--c-warn)' : 'var(--c-muted)' }}>
+            {pendingClose ? 'Saving edits...' : 'Esc to close'}
+          </span>
           <button
             type="button"
             onClick={handleClose}

package/src/client/nodes/ExtAppFrame.tsx

@@ -20,6 +20,11 @@ type IframeLoadTarget = Pick<
 
 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';
+
+interface ExtAppHostDimensionsTarget {
+  getBoundingClientRect(): Pick<DOMRectReadOnly, 'width' | 'height'>;
+}
 
 async function postJson<T>(url: string, body: Record<string, unknown>): Promise<T> {
   const response = await fetch(url, {
@@ -97,6 +102,33 @@ export async function sendExtAppBootstrapState(
   }
 }
 
+export function resolveExtAppSandbox(value: unknown): string {
+  return typeof value === 'string' && value.trim().length > 0
+    ? value.trim()
+    : DEFAULT_EXT_APP_SANDBOX;
+}
+
+function positiveDimension(value: number, fallback: number): number {
+  if (Number.isFinite(value) && value > 0) return Math.round(value);
+  if (Number.isFinite(fallback) && fallback > 0) return Math.round(fallback);
+  return 1;
+}
+
+export function resolveExtAppContainerDimensions(
+  target: ExtAppHostDimensionsTarget | null | undefined,
+  fallback: { width: number; height: number },
+): { width: number; height: number } {
+  const rect = target?.getBoundingClientRect();
+  return {
+    width: positiveDimension(rect?.width ?? 0, fallback.width),
+    height: positiveDimension(rect?.height ?? 0, fallback.height),
+  };
+}
+
+export function shouldApplyExtAppSizeChange(height: unknown, isExpanded: boolean): height is number {
+  return typeof height === 'number' && Number.isFinite(height) && height > 0 && !isExpanded;
+}
+
 export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const bridgeRef = useRef<AppBridge | null>(null);
@@ -122,7 +154,10 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
   const rawToolCallId = node.data.toolCallId;
   const toolCallId: RequestId | undefined =
     typeof rawToolCallId === 'string' || typeof rawToolCallId === 'number' ? rawToolCallId : undefined;
-  const resourceMeta = node.data.resourceMeta as { permissions?: Record<string, unknown> } | undefined;
+  const resourceMeta = node.data.resourceMeta as {
+    csp?: Record<string, unknown>;
+    permissions?: Record<string, unknown>;
+  } | undefined;
   const sessionStatus = node.data.sessionStatus as string | undefined;
   const sessionError = node.data.sessionError as string | undefined;
   const maxHeight = node.size.height;
@@ -191,6 +226,8 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
     if (!iframe) return;
     let disposed = false;
     let fallbackTimer: ReturnType<typeof setTimeout> | null = null;
+    let hostContextResizeObserver: ResizeObserver | null = null;
+    let hostContextRaf: number | null = null;
     toolResultSentRef.current = false;
     lastSentToolResultRef.current = undefined;
     toolResultSendingRef.current = null;
@@ -213,6 +250,33 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
         throw new Error('Ext-app iframe window is unavailable');
       }
 
+      const buildHostContext = (displayMode: DisplayMode = expandedNodeId.value === nodeId ? 'fullscreen' : 'inline') => ({
+        theme: toMcpTheme(canvasTheme.value),
+        platform: 'web' as const,
+        containerDimensions: resolveExtAppContainerDimensions(iframe, {
+          width: node.size.width,
+          height: maxHeight,
+        }),
+        displayMode,
+        locale: navigator.language,
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        ...(toolDefinition ? {
+          toolInfo: {
+            id: toolCallId,
+            tool: toolDefinition,
+          },
+        } : {}),
+      });
+
+      const scheduleHostContextUpdate = () => {
+        if (hostContextRaf !== null) return;
+        hostContextRaf = requestAnimationFrame(() => {
+          hostContextRaf = null;
+          if (disposed || !bridgeReadyRef.current) return;
+          bridge.setHostContext?.(buildHostContext());
+        });
+      };
+
       const bridge = new AppBridge(
         null,
         { name: 'PMX Canvas', version: '1.0.0' },
@@ -224,26 +288,15 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
           updateModelContext: { text: {}, structuredContent: {} },
         },
         {
-          hostContext: {
-            theme: toMcpTheme(canvasTheme.value),
-            platform: 'web',
-            containerDimensions: { maxHeight },
-            displayMode: isExpanded ? 'fullscreen' : 'inline',
-            locale: navigator.language,
-            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            ...(toolDefinition ? {
-              toolInfo: {
-                id: toolCallId,
-                tool: toolDefinition,
-              },
-            } : {}),
-          },
+          hostContext: buildHostContext(isExpanded ? 'fullscreen' : 'inline'),
         },
       );
 
       // Register handlers BEFORE connect
       bridge.onsizechange = async ({ height }) => {
-        if (height && iframe) iframe.style.height = `${height}px`;
+        if (shouldApplyExtAppSizeChange(height, expandedNodeId.value === nodeId)) {
+          iframe.style.height = `${height}px`;
+        }
         return {};
       };
 
@@ -252,6 +305,15 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
         return {};
       };
 
+      bridge.onsandboxready = async () => {
+        await bridge.sendSandboxResourceReady({
+          html,
+          sandbox: DEFAULT_EXT_APP_SANDBOX,
+          ...(resourceMeta?.csp ? { csp: resourceMeta.csp } : {}),
+          ...(resourceMeta?.permissions ? { permissions: resourceMeta.permissions } : {}),
+        });
+      };
+
       // Handle native fullscreen requests from the widget (e.g. Excalidraw expand button)
       bridge.onrequestdisplaymode = async ({ mode }) => {
         const { nextMode, shouldExpand, shouldCollapse } = resolveExtAppDisplayModeRequest(mode, isExpanded);
@@ -333,6 +395,7 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
         bridgeReadyRef.current = true;
         setStatus('ready');
         setError(null);
+        scheduleHostContextUpdate();
         void sendExtAppBootstrapState(bridge, latestToolInputRef.current, undefined)
           .then(() => flushToolResult(bridge))
           .catch((err) => {
@@ -370,6 +433,9 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
       }
       bridgeRef.current = bridge;
       transportRef.current = transport;
+      hostContextResizeObserver = new ResizeObserver(scheduleHostContextUpdate);
+      hostContextResizeObserver.observe(iframe);
+      if (iframe.parentElement) hostContextResizeObserver.observe(iframe.parentElement);
 
       // Propagate theme changes to ext-app iframe. Read current expanded state
       // at fire time so the widget keeps its fullscreen/inline context accurate.
@@ -378,12 +444,8 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
         if (firstFire) { firstFire = false; return; }
         if (disposed) return;
         bridge.setHostContext?.({
+          ...buildHostContext(),
           theme: toMcpTheme(newTheme),
-          platform: 'web',
-          containerDimensions: { maxHeight },
-          displayMode: expandedNodeId.value === nodeId ? 'fullscreen' : 'inline',
-          locale: navigator.language,
-          timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
         });
       });
 
@@ -399,6 +461,12 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
     return () => {
       disposed = true;
       clearFallbackTimer();
+      hostContextResizeObserver?.disconnect();
+      hostContextResizeObserver = null;
+      if (hostContextRaf !== null) {
+        cancelAnimationFrame(hostContextRaf);
+        hostContextRaf = null;
+      }
       bridgeReadyRef.current = false;
       toolResultSendingRef.current = null;
       themeUnsubRef.current?.();
@@ -431,7 +499,10 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
     bridge.setHostContext?.({
       theme: toMcpTheme(canvasTheme.value),
       platform: 'web',
-      containerDimensions: { maxHeight },
+      containerDimensions: resolveExtAppContainerDimensions(iframeRef.current, {
+        width: node.size.width,
+        height: maxHeight,
+      }),
       displayMode: isExpanded ? 'fullscreen' : 'inline',
       locale: navigator.language,
       timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -470,7 +541,7 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
   }
 
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <div style={{ height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
       {sessionStatus && sessionStatus !== 'ready' && (
         <div
           style={{
@@ -546,14 +617,14 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
           remounts the iframe in the overlay — forcing the user to click Edit
           a second time to actually enter edit mode. Routing all inline clicks
           to "expand" makes the flow "open → edit" instead of "edit → expand → edit". */}
-      <div style={{ flex: 1, position: 'relative', display: 'flex', minHeight: 0 }}>
+      <div style={{ flex: 1, position: 'relative', display: 'flex', minHeight: 0, height: '100%' }}>
         <iframe
           key={frameKey}
           ref={iframeRef}
           srcdoc={html}
-          sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
+          sandbox={resolveExtAppSandbox(null)}
           allow={buildAllowAttribute(resourceMeta?.permissions)}
-          style={{ flex: 1, border: 'none', background: 'var(--c-panel)' }}
+          style={{ flex: 1, width: '100%', height: '100%', minHeight: 0, border: 'none', background: 'var(--c-panel)' }}
           title={`Ext App: ${toolName}`}
         />
         {!isExpanded && (