pmx-canvas 0.1.8 → 0.1.10

package/dist/types/json-render/server.d.ts

@@ -48,6 +48,7 @@ export declare function inferJsonRenderNodeTitle(spec: JsonRenderSpec, fallback?
 export declare function normalizeAndValidateJsonRenderSpec(spec: unknown): JsonRenderSpec;
 export declare function normalizeGraphType(value: string): GraphChartType;
 export declare function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec;
+export declare function buildGraphConfig(input: GraphNodeInput): Record<string, unknown>;
 export declare function createJsonRenderNodeData(nodeId: string, title: string, spec: JsonRenderSpec, extra?: Record<string, unknown>): Record<string, unknown>;
 export declare function buildJsonRenderViewerHtml(options: {
     title: string;

package/dist/types/server/canvas-operations.d.ts

@@ -2,6 +2,38 @@ import { type CanvasEdge, type CanvasNodeState, type CanvasNodeUpdate, type Canv
 import { type GraphNodeInput, type JsonRenderNodeInput, type JsonRenderSpec } from '../json-render/server.js';
 export type CanvasArrangeMode = 'grid' | 'column' | 'flow';
 export type CanvasPinMode = 'set' | 'add' | 'remove';
+export interface CanvasFitViewOptions {
+    width?: number;
+    height?: number;
+    padding?: number;
+    maxScale?: number;
+    nodeIds?: string[];
+}
+export interface CanvasFitViewResult {
+    ok: true;
+    viewport: {
+        x: number;
+        y: number;
+        scale: number;
+    };
+    nodeCount: number;
+    bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+}
+export interface CanvasGraphNodeUpdateInput extends Partial<GraphNodeInput> {
+    spec?: unknown;
+    type?: string;
+}
+export interface CanvasStructuredNodeUpdateInput extends Omit<CanvasGraphNodeUpdateInput, 'data'> {
+    content?: unknown;
+    data?: unknown;
+    arrangeLocked?: unknown;
+    chartHeight?: unknown;
+}
 interface CanvasAddNodeInput {
     type: CanvasNodeState['type'];
     title?: string;
@@ -34,6 +66,22 @@ interface CanvasNodeLookupInput {
     id?: string;
     search?: string;
 }
+export declare function hasStructuredNodeUpdateFields(input: Record<string, unknown>): boolean;
+export declare function buildStructuredNodeUpdate(node: CanvasNodeState, input: CanvasStructuredNodeUpdateInput): {
+    data: Record<string, unknown>;
+};
+export declare function buildJsonRenderNodeUpdate(node: CanvasNodeState, input: {
+    title?: string;
+    spec: unknown;
+}): {
+    data: Record<string, unknown>;
+    spec: JsonRenderSpec;
+};
+export declare function buildGraphNodeUpdate(node: CanvasNodeState, input: CanvasGraphNodeUpdateInput): {
+    data: Record<string, unknown>;
+    spec: JsonRenderSpec;
+    graphConfig: Record<string, unknown>;
+};
 export declare function primeCanvasRuntimeBackends(options?: {
     forceRehydrateExtApps?: boolean;
 }): {
@@ -144,6 +192,7 @@ export declare function createCanvasGraphNode(input: GraphNodeInput): {
     spec: JsonRenderSpec;
     node: CanvasNodeState;
 };
+export declare function fitCanvasView(options?: CanvasFitViewOptions): CanvasFitViewResult;
 export declare function executeCanvasBatch(operations: CanvasBatchOperation[]): Promise<{
     ok: boolean;
     results: Array<Record<string, unknown>>;

package/dist/types/server/index.d.ts

@@ -2,6 +2,7 @@ import { EventEmitter } from 'node:events';
 import type { CanvasNodeState, CanvasEdge, CanvasLayout } from './canvas-state.js';
 import { searchNodes } from './spatial-analysis.js';
 import { diffLayouts } from './mutation-history.js';
+import { fitCanvasView } from './canvas-operations.js';
 import { type WebArtifactBuildInput, type WebArtifactCanvasBuildResult } from './web-artifacts.js';
 import { type ExternalMcpTransportConfig } from './mcp-app-runtime.js';
 import { type DiagramPresetOpenInput } from './diagram-presets.js';
@@ -48,7 +49,7 @@ export declare class PmxCanvas extends EventEmitter {
         id: string;
         error?: string;
     }>;
-    updateNode(id: string, patch: Partial<CanvasNodeState>): void;
+    updateNode(id: string, patch: Partial<CanvasNodeState> & Record<string, unknown>): void;
     removeNode(id: string): void;
     addEdge(input: {
         from?: string;
@@ -89,6 +90,13 @@ export declare class PmxCanvas extends EventEmitter {
         focused: string;
         panned: boolean;
     } | null;
+    fitView(options?: {
+        width?: number;
+        height?: number;
+        padding?: number;
+        maxScale?: number;
+        nodeIds?: string[];
+    }): ReturnType<typeof fitCanvasView>;
     getLayout(): CanvasLayout;
     getNode(id: string): CanvasNodeState | undefined;
     search(query: string): ReturnType<typeof searchNodes>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmx-canvas",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Spatial canvas workbench for coding agents — infinite 2D canvas with agent-native CLI, MCP integration, nodes, edges, file watching, and snapshots",
   "type": "module",
   "main": "./src/server/index.ts",

package/skills/pmx-canvas/SKILL.md

@@ -143,6 +143,8 @@ pmx-canvas search "auth"
 pmx-canvas open
 pmx-canvas arrange --layout flow
 pmx-canvas focus <node-id> --no-pan             # Select/raise without moving the user's viewport
+pmx-canvas fit --width 1440 --height 900        # Fit the whole board for screenshots/review
+pmx-canvas node update <node-id> --spec-file ./dashboard.json
 pmx-canvas validate spec --type json-render --spec-file ./dashboard.json --summary
 pmx-canvas web-artifact build --title "Dashboard" --app-file ./App.tsx --deps recharts --include-logs
 pmx-canvas node list --type web-artifact --summary
@@ -167,6 +169,7 @@ pmx-canvas spatial
   `"DVT O3"` can be ambiguous; prefer the full visible title such as `"DVT O3 — GitOps"`.
 - `search`, `layout`, `status`, `arrange`, `focus` — inspect and navigate the canvas. Prefer
   `focus --no-pan` when you only need to select/raise a node without hijacking the human's camera.
+- `fit [id ...]` — set the server viewport to fit the whole canvas or selected nodes before screenshots or whole-board review
 - `open` — open the current workbench in the browser
 - `pin --list|--clear|<ids...>` — manage context pins
 - `undo`, `redo`, `history` — time travel
@@ -279,7 +282,9 @@ If a node type is rejected by `canvas_add_node`, call `canvas_describe_schema` a
 
 **`canvas_update_node`** — Update an existing node
 - `id` (required): node to update
-- Any of: `title`, `content`, `color`, `x`, `y`, `width`, `height`, `collapsed`, `metadata`
+- Any of: `title`, `content`, `x`, `y`, `width`, `height`, `collapsed`, `arrangeLocked`, `data`
+- For `json-render`, pass `spec` to update the rendered spec in place while preserving node ID, edges, pins, and position
+- For `graph`, pass graph fields such as `graphType`, `data`, `xKey`, `yKey`, `color`, and `chartHeight` to rebuild the chart in place; use `height`/`nodeHeight` for frame geometry and `chartHeight` for chart content in CLI flows
 - Use to update status nodes as work progresses
 
 **`canvas_remove_node`** — Remove a node and all its connected edges
@@ -357,6 +362,10 @@ ID extraction for mixed tool responses:
 - Returns the normalized json-render spec the server would accept
 - Use this when you want a dry run before creating a `json-render` or `graph` node
 
+**`canvas_fit_view`** — Fit viewport to all nodes or selected nodes
+- Optional: `width`, `height`, `padding`, `maxScale`, `nodeIds`
+- Use before screenshot workflows or whole-board review so the server viewport matches the intended camera
+
 **Batch graph creation**
 - Use `graph.add` inside `canvas_batch` / `pmx-canvas batch` when you need a graph node as part of
   a larger one-shot build.
@@ -512,6 +521,8 @@ tools below operate on the live canvas state.
 - Required: exactly one of `expression` (single JS expression) or `script` (multi-statement body)
 - `script` is wrapped in an async IIFE, so top-level `await` works inside script bodies
 - Useful for asserting DOM state after a sequence of canvas mutations
+- Do not use `fetch()` inside `canvas_evaluate` to call PMX HTTP APIs; WebView security/CORS
+  restrictions can block those requests. Use the matching MCP tools instead.
 - Example: read the count of rendered `.canvas-node` elements:
 
   ```typescript
@@ -666,6 +677,7 @@ All POST/PATCH endpoints accept `Content-Type: application/json`. Default base U
 | POST | `/api/canvas/group/ungroup` | Ungroup |
 | POST | `/api/canvas/arrange` | Auto-arrange |
 | POST | `/api/canvas/focus` | Center viewport on node |
+| POST | `/api/canvas/fit` | Fit viewport to canvas bounds or selected nodes |
 | POST | `/api/canvas/clear` | Clear canvas |
 | POST | `/api/canvas/update` | Batch update positions |
 | GET | `/api/canvas/spatial-context` | Spatial clusters and reading order |

package/skills/published-consumer-e2e/scripts/run-published-consumer-e2e.sh

@@ -144,7 +144,7 @@ for _ in $(seq 1 120); do
 
   NODE_COUNT="$(
     curl -fsS "http://127.0.0.1:${PORT}/api/canvas/state" \
-      | "${BUN_BIN}" -e 'let raw="";for await (const chunk of Bun.stdin.stream()){raw+=chunk instanceof Uint8Array ? Buffer.from(chunk).toString() : String(chunk);} const state=JSON.parse(raw); console.log(state.nodes.length);'
+      | python3 -c 'import json, sys; print(len(json.load(sys.stdin).get("nodes", [])))'
   )"
 
   if [[ "${NODE_COUNT}" -ge 18 ]]; then

package/skills/web-artifacts-builder/scripts/bundle-artifact.sh

@@ -109,6 +109,17 @@ function ensure_bundle_dependencies() {
     fi
   done
 
+  # package.json lists the deps, but node_modules may not be in sync (e.g. fresh
+  # CI checkout where node_modules is gitignored). Run a regular install so the
+  # local binaries actually exist before we hand off to Parcel. The build
+  # allowlist is already persisted in package.json's pnpm.onlyBuiltDependencies
+  # by the original `pnpm add` step, so plain `install` is enough here.
+  if [ ! -x "./node_modules/.bin/parcel" ]; then
+    echo "📦 Syncing bundling dependencies into node_modules..."
+    run_pnpm_quiet install
+    return 0
+  fi
+
   echo "✅ Reusing existing bundling dependencies"
 }
 

package/src/cli/agent.ts

@@ -241,6 +241,14 @@ function optionalPositiveFiniteFlagWithAliases(
   return undefined;
 }
 
+function optionalBooleanFlag(flags: Record<string, string | true>, name: string, hint: string): boolean | undefined {
+  const val = flags[name];
+  if (val === undefined) return undefined;
+  if (val === true || val === 'true') return true;
+  if (val === 'false') return false;
+  die(`Invalid value for --${name}: ${String(val)}`, hint);
+}
+
 function isRecord(value: unknown): value is Record<string, unknown> {
   return !!value && typeof value === 'object' && !Array.isArray(value);
 }
@@ -503,6 +511,41 @@ async function readTextInput(
   die(options.requiredMessage, options.hint);
 }
 
+async function readOptionalTextInput(
+  flags: Record<string, string | true>,
+  options: {
+    fileFlags?: string[];
+    valueFlags?: string[];
+    allowStdin?: boolean;
+    label: string;
+    hint: string;
+  },
+): Promise<string | undefined> {
+  for (const name of options.fileFlags ?? []) {
+    const path = getStringFlag(flags, name);
+    if (!path) continue;
+    try {
+      return readFileSync(path, 'utf-8');
+    } catch (error) {
+      die(
+        `Unable to read --${name}: ${error instanceof Error ? error.message : String(error)}`,
+        options.hint,
+      );
+    }
+  }
+
+  for (const name of options.valueFlags ?? []) {
+    const value = getStringFlag(flags, name);
+    if (value !== undefined) return value;
+  }
+
+  if (options.allowStdin && flags.stdin) {
+    return await readStdin();
+  }
+
+  return undefined;
+}
+
 function applyCommonGeometryFlags(
   body: Record<string, unknown>,
   flags: Record<string, string | true>,
@@ -518,6 +561,27 @@ function applyCommonGeometryFlags(
   if (height !== undefined) body.height = height;
 }
 
+async function applyStructuredNodeUpdateFlags(
+  body: Record<string, unknown>,
+  flags: Record<string, string | true>,
+): Promise<void> {
+  const specRaw = await readOptionalTextInput(flags, {
+    fileFlags: ['spec-file'],
+    valueFlags: ['spec-json'],
+    allowStdin: false,
+    label: 'JSON spec',
+    hint: 'Use: pmx-canvas node update <node-id> --spec-file ./new-spec.json',
+  });
+  if (specRaw !== undefined) {
+    body.spec = parseJsonValue(specRaw, 'JSON spec', 'Use: pmx-canvas node update <node-id> --spec-file ./new-spec.json');
+  }
+
+  const graphPatch = await buildGraphRequestBody(flags, { requireData: false, allowStdin: false });
+  for (const [key, value] of Object.entries(graphPatch)) {
+    body[key === 'height' ? 'chartHeight' : key] = value;
+  }
+}
+
 async function buildJsonRenderRequestBody(
   flags: Record<string, string | true>,
 ): Promise<Record<string, unknown>> {
@@ -547,23 +611,30 @@ async function buildJsonRenderRequestBody(
 
 async function buildGraphRequestBody(
   flags: Record<string, string | true>,
+  options: { requireData?: boolean; allowStdin?: boolean } = {},
 ): Promise<Record<string, unknown>> {
+  const requireData = options.requireData !== false;
+  const allowStdin = options.allowStdin !== false;
   const hint =
     '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, {
+
+  const body: Record<string, unknown> = {
+    ...(requireData ? { graphType: getStringFlag(flags, 'graph-type', 'graphType') ?? 'line' } : {}),
+  };
+  const rawData = await readOptionalTextInput(flags, {
     fileFlags: ['data-file'],
     valueFlags: ['data-json', 'data'],
-    allowStdin: true,
+    allowStdin,
     label: 'graph JSON dataset',
     hint,
-    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', 'graphType') ?? 'line',
-    data,
-  };
+  if (rawData !== undefined) {
+    body.data = parseRecordArrayJson(rawData, hint);
+  } else if (requireData) {
+    die('Graph nodes require --data-file, --data-json, --data, or --stdin JSON data.', hint);
+  }
+  const graphType = getStringFlag(flags, 'graph-type', 'graphType');
+  if (graphType) body.graphType = graphType;
   if (typeof flags.title === 'string') body.title = flags.title;
   const xKey = getStringFlag(flags, 'x-key', 'xKey');
   const yKey = getStringFlag(flags, 'y-key', 'yKey');
@@ -1151,6 +1222,9 @@ cmd('node update', 'Update a node by ID', [
   'pmx-canvas node update <node-id> --content "Updated content"',
   'pmx-canvas node update <node-id> --title "Moved" --x 500 --y 300',
   'pmx-canvas node update <node-id> --width 840 --height 620',
+  'pmx-canvas node update <node-id> --spec-file ./dashboard.json',
+  'pmx-canvas node update <graph-id> --data-file ./metrics.json --chart-height 420',
+  'pmx-canvas node update <node-id> --pinned true',
   'pmx-canvas node update <node-id> --lock-arrange',
 ], async (args) => {
   const { positional, flags } = parseFlags(args);
@@ -1160,6 +1234,7 @@ cmd('node update', 'Update a node by ID', [
   if (!id) die('Missing node ID', 'pmx-canvas node update <node-id> --title "New Title"');
 
   const body: Record<string, unknown> = {};
+  await applyStructuredNodeUpdateFlags(body, flags);
   if (flags.title && flags.title !== true) body.title = flags.title;
   if (flags.content && flags.content !== true) body.content = flags.content;
   if (flags.stdin) body.content = await readStdin();
@@ -1168,6 +1243,17 @@ cmd('node update', 'Update a node by ID', [
   const y = optionalFiniteFlag(flags, 'y', 'Use a finite number, e.g. --y 300');
   const width = optionalPositiveFiniteFlag(flags, 'width', 'Use a positive number, e.g. --width 840');
   const height = optionalPositiveFiniteFlag(flags, 'height', 'Use a positive number, e.g. --height 620');
+  const nodeHeight = optionalPositiveFiniteFlagWithAliases(
+    flags,
+    'Use a positive number, e.g. --node-height 620',
+    'node-height',
+    'nodeHeight',
+  );
+  if (height !== undefined && nodeHeight !== undefined) {
+    die('Use either --height/--node-height, not both.');
+  }
+  const frameHeight = height ?? nodeHeight;
+  const pinned = optionalBooleanFlag(flags, 'pinned', 'Use --pinned true or --pinned false');
   if (flags['lock-arrange'] && flags['unlock-arrange']) {
     die('Use either --lock-arrange or --unlock-arrange, not both.');
   }
@@ -1177,7 +1263,7 @@ cmd('node update', 'Update a node by ID', [
       ? false
       : undefined;
 
-  if (x !== undefined || y !== undefined || width !== undefined || height !== undefined || arrangeLocked !== undefined) {
+  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 };
       size: { width: number; height: number };
@@ -1191,25 +1277,24 @@ cmd('node update', 'Update a node by ID', [
       };
     }
 
-    if (width !== undefined || height !== undefined) {
+    if (width !== undefined || frameHeight !== undefined) {
       body.size = {
         width: width ?? existing.size.width,
-        height: height ?? existing.size.height,
+        height: frameHeight ?? existing.size.height,
       };
     }
 
     if (arrangeLocked !== undefined) {
-      body.data = {
-        ...existing.data,
-        arrangeLocked,
-      };
+      body.arrangeLocked = arrangeLocked;
     }
   }
 
+  if (pinned !== undefined) body.pinned = pinned;
+
   if (Object.keys(body).length === 0) {
     die(
       'No updates specified',
-      'Use --title, --content, --x, --y, --width, --height, --lock-arrange, --unlock-arrange, or --stdin',
+      'Use --title, --content, --x, --y, --width, --height, --pinned, --lock-arrange, --unlock-arrange, or --stdin',
     );
   }
 
@@ -1396,6 +1481,29 @@ cmd('focus', 'Pan viewport to center on a node', [
   output(result);
 });
 
+cmd('fit', 'Fit the viewport to all nodes or a selected subset', [
+  'pmx-canvas fit',
+  'pmx-canvas fit --width 1440 --height 900 --padding 80',
+  'pmx-canvas fit node-a node-b',
+], async (args) => {
+  const { positional, flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('fit');
+
+  const body: Record<string, unknown> = {};
+  const width = optionalPositiveFiniteFlag(flags, 'width', 'Use a positive number, e.g. --width 1440');
+  const height = optionalPositiveFiniteFlag(flags, 'height', 'Use a positive number, e.g. --height 900');
+  const padding = optionalPositiveFiniteFlag(flags, 'padding', 'Use a positive number, e.g. --padding 80');
+  const maxScale = optionalPositiveFiniteFlag(flags, 'max-scale', 'Use a positive number, e.g. --max-scale 1');
+  if (width !== undefined) body.width = width;
+  if (height !== undefined) body.height = height;
+  if (padding !== undefined) body.padding = padding;
+  if (maxScale !== undefined) body.maxScale = maxScale;
+  if (positional.length > 0) body.nodeIds = positional;
+
+  const result = await api('POST', '/api/canvas/fit', body);
+  output(result);
+});
+
 // ── external-app add ─────────────────────────────────────────
 cmd('external-app add', 'Create a hosted external app node', [
   'pmx-canvas external-app add --kind excalidraw --title "Diagram"',
@@ -1816,7 +1924,7 @@ cmd('webview start', 'Start or replace the Bun.WebView automation session', [
     if (chromeArgv.length > 0) body.chromeArgv = chromeArgv;
   }
 
-  const result = await api('POST', '/api/workbench/webview/start', body);
+  const result = await api('POST', '/api/workbench/webview/start', body, { allowErrorJson: true });
   output(result);
 });
 
@@ -2112,6 +2220,13 @@ function showCommandHelp(name: string): void {
     console.log('\nViewport:');
     console.log('  --no-pan                  Select/raise the node without moving the viewport');
   }
+  if (name === 'fit') {
+    console.log('\nViewport:');
+    console.log('  --width <px>              Viewport width used for fit math (default 1440)');
+    console.log('  --height <px>             Viewport height used for fit math (default 900)');
+    console.log('  --padding <px>            World-space padding around fitted nodes (default 60)');
+    console.log('  --max-scale <scale>       Maximum zoom scale (default 1)');
+  }
   if (name === 'external-app add') {
     console.log('\nOptions:');
     console.log('  --kind excalidraw          External app kind to create');
@@ -2161,6 +2276,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 fit [id ...]             Fit viewport to canvas or selected nodes
   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
@@ -2222,6 +2338,7 @@ Examples:
   pmx-canvas edge add --from-search "DVT O3 — GitOps" --to-search "deep work trend" --type relation
   pmx-canvas search "authentication"
   pmx-canvas open
+  pmx-canvas fit --width 1440 --height 900
   pmx-canvas layout --summary
   pmx-canvas arrange --layout column
   pmx-canvas batch --file ./canvas-ops.json

package/src/cli/index.ts

@@ -30,7 +30,7 @@ if (args.includes('--version') || args.includes('-v')) {
 // If first arg is a known subcommand (not a --flag), route to the agent CLI.
 const AGENT_COMMANDS = new Set([
   'node', 'edge', 'search', 'layout', 'status', 'arrange', 'focus',
-  'pin', 'undo', 'redo', 'history', 'snapshot', 'diff', 'group', 'webview', 'open',
+  'fit', 'pin', 'undo', 'redo', 'history', 'snapshot', 'diff', 'group', 'webview', 'open',
   'clear', 'code-graph', 'spatial', 'watch', 'web-artifact', 'external-app', 'graph', 'batch', 'validate', 'serve',
 ]);
 

package/src/client/canvas/CanvasNode.tsx

@@ -28,6 +28,7 @@ import { removeNodeFromClient, updateNodeFromClient } from '../state/intent-brid
 import { getNodeIcon } from '../icons';
 import { EXPANDABLE_TYPES, TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
+import { 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';
@@ -141,12 +142,9 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
   const bodyRef = useRef<HTMLDivElement>(null);
   const hasAutoFit = useRef(false);
   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' || isExtAppNode) return;
+    if (hasAutoFit.current || !shouldAutoFitNode(node)) return;
     const body = bodyRef.current;
     if (!body) return;
 
@@ -156,9 +154,9 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
         return;
       }
       const contentHeight = body.scrollHeight;
-      if (contentHeight <= 0) return;
+      const fitHeight = computeAutoFitHeight(node, contentHeight);
+      if (fitHeight === null) return;
 
-      const fitHeight = Math.min(contentHeight + TITLEBAR_HEIGHT, AUTO_FIT_MAX);
       // Only resize if the fit height differs meaningfully from current
       if (Math.abs(fitHeight - node.size.height) > 8) {
         resizeNode(node.id, { width: node.size.width, height: fitHeight });
@@ -181,7 +179,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
         autoFitPersistTimer.current = null;
       }
     };
-  }, [node.id, node.type, isExtAppNode, node.collapsed, node.dockPosition, node.size.width, node.size.height]);
+  }, [node.id, node.type, node.data.mode, node.collapsed, node.dockPosition, node.size.width, node.size.height]);
 
   const isPinned = node.pinned;
   const isTrace = node.type === 'trace';

package/src/client/canvas/auto-fit.ts

@@ -0,0 +1,21 @@
+import type { CanvasNodeState } from '../types';
+
+export const AUTO_FIT_TITLEBAR_HEIGHT = 37;
+export const AUTO_FIT_MAX_HEIGHT = 600;
+
+function isExtAppNode(node: CanvasNodeState): boolean {
+  return node.type === 'mcp-app' && node.data.mode === 'ext-app';
+}
+
+function hasExplicitStructuredFrame(node: CanvasNodeState): boolean {
+  return node.type === 'graph' || node.type === 'json-render';
+}
+
+export function shouldAutoFitNode(node: CanvasNodeState): boolean {
+  return !node.collapsed && !node.dockPosition && node.type !== 'group' && !isExtAppNode(node) && !hasExplicitStructuredFrame(node);
+}
+
+export function computeAutoFitHeight(node: CanvasNodeState, contentHeight: number): number | null {
+  if (!shouldAutoFitNode(node) || contentHeight <= 0) return null;
+  return Math.min(contentHeight + AUTO_FIT_TITLEBAR_HEIGHT, AUTO_FIT_MAX_HEIGHT);
+}

package/src/client/nodes/ExtAppFrame.tsx

@@ -23,6 +23,8 @@ type DisplayMode = 'inline' | 'fullscreen' | 'pip';
 const DEFAULT_EXT_APP_SANDBOX = 'allow-scripts allow-popups allow-popups-to-escape-sandbox';
 
 interface ExtAppHostDimensionsTarget {
+  clientWidth?: number;
+  clientHeight?: number;
   getBoundingClientRect(): Pick<DOMRectReadOnly, 'width' | 'height'>;
 }
 
@@ -120,8 +122,8 @@ export function resolveExtAppContainerDimensions(
 ): { width: number; height: number } {
   const rect = target?.getBoundingClientRect();
   return {
-    width: positiveDimension(rect?.width ?? 0, fallback.width),
-    height: positiveDimension(rect?.height ?? 0, fallback.height),
+    width: positiveDimension(target?.clientWidth ?? 0, positiveDimension(rect?.width ?? 0, fallback.width)),
+    height: positiveDimension(target?.clientHeight ?? 0, positiveDimension(rect?.height ?? 0, fallback.height)),
   };
 }
 

package/src/json-render/catalog.ts

@@ -7,13 +7,22 @@
  */
 
 import { defineCatalog } from '@json-render/core';
+import { z } from 'zod';
 import { schema } from './schema.js';
 import { shadcnComponentDefinitions } from '@json-render/shadcn/catalog';
 import { chartComponentDefinitions } from './charts/definitions';
 import { extraChartComponentDefinitions } from './charts/extra-definitions';
 
+const badgeDefinition = shadcnComponentDefinitions.Badge;
+
 export const allComponentDefinitions = {
   ...shadcnComponentDefinitions,
+  Badge: {
+    ...badgeDefinition,
+    props: badgeDefinition.props.extend({
+      variant: z.enum(['default', 'secondary', 'destructive', 'outline', 'success', 'info', 'warning', 'error', 'danger']).nullable(),
+    }),
+  },
   ...chartComponentDefinitions,
   ...extraChartComponentDefinitions,
 };

package/src/json-render/renderer/index.css

@@ -143,6 +143,67 @@ button {
   cursor: pointer;
 }
 
+.pmx-badge {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+
+.pmx-badge--default {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.pmx-badge--secondary {
+  background: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.pmx-badge--destructive {
+  background: var(--destructive);
+  color: var(--destructive-foreground);
+}
+
+.pmx-badge--outline {
+  border-color: var(--border);
+  color: var(--foreground);
+}
+
+.pmx-badge--success {
+  border-color: color-mix(in oklch, var(--chart-2) 45%, transparent);
+  background: color-mix(in oklch, var(--chart-2) 16%, transparent);
+  color: var(--chart-2);
+}
+
+.pmx-badge--info {
+  border-color: color-mix(in oklch, var(--chart-1) 45%, transparent);
+  background: color-mix(in oklch, var(--chart-1) 14%, transparent);
+  color: var(--chart-1);
+}
+
+.pmx-badge--warning {
+  border-color: color-mix(in oklch, var(--chart-3) 50%, transparent);
+  background: color-mix(in oklch, var(--chart-3) 18%, transparent);
+  color: var(--chart-3);
+}
+
+.pmx-badge--error,
+.pmx-badge--danger {
+  border-color: color-mix(in oklch, var(--destructive) 55%, transparent);
+  background: color-mix(in oklch, var(--destructive) 18%, transparent);
+  color: var(--destructive);
+}
+
 /* -- Chart components -- */
 
 .pmx-chart {