pmx-canvas 0.1.33 → 0.1.34

package/src/json-render/server.ts

@@ -5,6 +5,7 @@ import { buildAppHtml } from '@json-render/mcp/build-app-html';
 import { applySpecPatch, parseSpecStreamLine, type Spec, type SpecStreamLine } from '@json-render/core';
 import { allComponentDefinitions, catalog, validateShadcnElementProps, type JsonRenderIssue } from './catalog.js';
 import { findUnknownDirectiveKey, isDynamicPropValue } from './directives.js';
+import { contentHeightReporterTag } from '../shared/content-height-reporter.js';
 
 export interface JsonRenderSpec {
   root: string;
@@ -944,6 +945,12 @@ export async function buildJsonRenderViewerHtml(options: {
   nodeId?: string;
   axToken?: string;
   axState?: unknown;
+  /** Nonce for the content-height reporter so the node can grow to fit the chart. */
+  frameToken?: string;
+  /** When true, charts render at their natural (intrinsic) height instead of
+   *  filling the viewport down — so the reported scrollHeight is stable and the
+   *  node grows to it. Off for strictSize / user-resized nodes (they fill-down). */
+  fitContent?: boolean;
 }): Promise<string> {
   const sanitizeAxValue = (v?: string): string => (typeof v === 'string' ? v.replace(/[^A-Za-z0-9_-]/g, '').slice(0, 80) : '');
   try {
@@ -966,13 +973,18 @@ export async function buildJsonRenderViewerHtml(options: {
         // Read-side AX state: seed for initial render + bound under /ax for specs.
         `window.__PMX_CANVAS_AX_STATE__ = ${JSON.stringify(options.axState ?? null).replace(/</g, '\\u003c')};`,
       ] : []),
+      ...(options.fitContent ? ['window.__PMX_CANVAS_FIT_CONTENT__ = true;'] : []),
       jsBundle,
     ].join('\n');
+    // Content-height reporter: posts the viewer's natural scrollHeight so the
+    // parent node grows to fit (the #48 graph-clipping fix). Shared with the html
+    // surface (src/shared, no src/server import) so the two stay identical.
+    const heightReporter = options.frameToken ? contentHeightReporterTag(options.frameToken) : '';
     return buildAppHtml({
       title: options.title,
       css: cssBundle,
       js: escapeInlineScriptSource(boot),
-      head: '<meta name="color-scheme" content="light dark" />',
+      head: `<meta name="color-scheme" content="light dark" />${heightReporter}`,
     });
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);

package/src/mcp/server.ts

@@ -200,6 +200,56 @@ function wantsFullPayload(input: { full?: boolean; verbose?: boolean; includeDat
   return input.full === true || input.verbose === true || input.includeData === true;
 }
 
+interface PendingAxActivityItem {
+  kind: 'work-item' | 'approval-gate' | 'elicitation' | 'mode-request';
+  id: string;
+  title: string;
+  status: string;
+  nodeIds: string[];
+  source: string | null;
+}
+
+const OPEN_AX_WORK_STATUSES = new Set(['todo', 'in-progress', 'blocked']);
+
+/**
+ * Open, agent-actionable canvas-bound AX items (open work items + pending approval
+ * gates / elicitations / mode requests). Unlike steering (a directive routed through
+ * the claim/ack delivery queue), these are STATE the human curates in the browser —
+ * they fire `ax-state-changed` (so resource-subscribers are pushed canvas://ax-work),
+ * but an adapterless client that only POLLS the delivery surface never saw them.
+ * Surfacing this digest there closes report #43 without conflating state with steering.
+ * Optionally excludes items the consumer itself originated (loop prevention), mirroring
+ * getPendingSteering.
+ */
+function buildPendingAxActivity(
+  state: Awaited<ReturnType<CanvasAccess['getAxState']>>,
+  consumer?: string,
+): PendingAxActivityItem[] {
+  const notMine = (source: string | null) => !consumer || source !== consumer;
+  const out: PendingAxActivityItem[] = [];
+  for (const w of state.workItems ?? []) {
+    if (OPEN_AX_WORK_STATUSES.has(w.status) && notMine(w.source)) {
+      out.push({ kind: 'work-item', id: w.id, title: w.title, status: w.status, nodeIds: w.nodeIds ?? [], source: w.source });
+    }
+  }
+  for (const g of state.approvalGates ?? []) {
+    if (g.status === 'pending' && notMine(g.source)) {
+      out.push({ kind: 'approval-gate', id: g.id, title: g.title, status: g.status, nodeIds: g.nodeIds ?? [], source: g.source });
+    }
+  }
+  for (const e of state.elicitations ?? []) {
+    if (e.status === 'pending' && notMine(e.source)) {
+      out.push({ kind: 'elicitation', id: e.id, title: e.prompt, status: e.status, nodeIds: e.nodeIds ?? [], source: e.source });
+    }
+  }
+  for (const m of state.modeRequests ?? []) {
+    if (m.status === 'pending' && notMine(m.source)) {
+      out.push({ kind: 'mode-request', id: m.id, title: m.reason ? `${m.mode}: ${m.reason}` : `mode: ${m.mode}`, status: m.status, nodeIds: m.nodeIds ?? [], source: m.source });
+    }
+  }
+  return out;
+}
+
 function compactNodePayload(node: Awaited<ReturnType<CanvasAccess['getNode']>>): Record<string, unknown> | null {
   if (!node) return null;
   const serialized = serializeCanvasNode(node);
@@ -1688,10 +1738,10 @@ export async function startMcpServer(): Promise<void> {
 
   server.tool(
     'canvas_claim_ax_delivery',
-    'Claim pending PMX AX steering messages for a consumer (adapterless delivery). Returns undelivered steering, excluding messages the consumer itself originated (loop prevention). After acting on a message, call canvas_mark_ax_delivery.',
+    'Claim pending PMX AX deliveries for a consumer (adapterless delivery). Returns `pending` undelivered steering (mark each with canvas_mark_ax_delivery after acting) AND `pendingActivity`: open canvas-bound AX items awaiting the agent (open work items, pending approval gates / elicitations / mode requests) — typically created by the human in the browser. Both exclude items the consumer itself originated (loop prevention). pendingActivity is read-only here: resolve each via its own tool (canvas_resolve_approval / canvas_respond_elicitation / canvas_resolve_mode / canvas_update_work_item), not canvas_mark_ax_delivery.',
     {
       consumer: z.string().optional().describe('Consumer/source label to exclude from results (e.g. copilot, mcp).'),
-      limit: z.number().optional().describe('Max messages to return.'),
+      limit: z.number().optional().describe('Max steering messages to return.'),
     },
     async ({ consumer, limit }) => {
       const c = await ensureCanvas();
@@ -1699,7 +1749,8 @@ export async function startMcpServer(): Promise<void> {
         ...(consumer ? { consumer } : {}),
         ...(typeof limit === 'number' ? { limit } : {}),
       });
-      return { content: [{ type: 'text', text: JSON.stringify({ ok: true, pending }) }] };
+      const pendingActivity = buildPendingAxActivity(await c.getAxState(), consumer);
+      return { content: [{ type: 'text', text: JSON.stringify({ ok: true, pending, pendingActivity }) }] };
     },
   );
 
@@ -2304,15 +2355,16 @@ export async function startMcpServer(): Promise<void> {
     'canvas://ax-pending-steering',
     {
       description:
-        'Undelivered PMX AX steering messages an MCP client can claim and act on without a host-native adapter. After delivering an instruction to your agent, mark it via canvas_mark_ax_delivery so it is not handed out again.',
+        'Adapterless AX delivery surface. `pending`: undelivered steering messages to claim and act on, then mark via canvas_mark_ax_delivery. `pendingActivity`: open canvas-bound AX items awaiting the agent (open work items, pending approval gates / elicitations / mode requests) — usually created by the human in the browser; these fire ax-state-changed (resource-subscribers are also pushed canvas://ax-work). Resolve pendingActivity via its own tool, not canvas_mark_ax_delivery. Use canvas_claim_ax_delivery for the loop-safe, consumer-scoped view.',
       mimeType: 'application/json',
     },
     async () => {
       const c = await ensureCanvas();
-      const pending = await c.getPendingSteering();
+      const [pending, state] = await Promise.all([c.getPendingSteering(), c.getAxState()]);
+      const pendingActivity = buildPendingAxActivity(state);
       return {
         contents: [
-          { uri: 'canvas://ax-pending-steering', mimeType: 'application/json', text: JSON.stringify({ pending }, null, 2) },
+          { uri: 'canvas://ax-pending-steering', mimeType: 'application/json', text: JSON.stringify({ pending, pendingActivity }, null, 2) },
         ],
       };
     },

package/src/server/html-surface.ts

@@ -15,6 +15,8 @@
  * postMessage required.
  */
 
+import { contentHeightReporterTag } from '../shared/content-height-reporter.js';
+
 export type SurfaceTheme = 'dark' | 'light' | 'high-contrast';
 
 /** Path the surface document links for its theme tokens (served from dist/canvas). */
@@ -150,6 +152,16 @@ export function buildAxStateBridge(axToken: string, snapshotJson: string): strin
 </script>`;
 }
 
+/**
+ * Reports the surface's natural content height to the parent canvas so the node
+ * can GROW to fit it (the fix for iframe nodes the parent can't measure — graph,
+ * json-render, html, web-artifact). Thin wrapper over the shared reporter so this
+ * and the json-render injection site stay byte-identical (no drift).
+ */
+export function buildContentHeightReporter(frameToken: string): string {
+  return contentHeightReporterTag(frameToken);
+}
+
 /** Escape a string for safe interpolation into element text (e.g. `<title>`). */
 function escapeSurfaceHtml(value: string): string {
   return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -178,6 +190,8 @@ export interface HtmlSurfaceOptions {
    * axBridge is enabled). Kept live via parent → iframe `ax-update` messages.
    */
   axState?: unknown;
+  /** Nonce for the content-height reporter (lets the node grow to fit content). */
+  contentHeightToken?: string;
 }
 
 /**
@@ -202,7 +216,10 @@ export function buildHtmlSurfaceDocument(userHtml: string, options: HtmlSurfaceO
         options.axState !== undefined ? JSON.stringify(options.axState).replace(/</g, '\\u003c') : 'null',
       )
     : '';
-  const injectedHeadContent = `${link}${themeBridge}${presentationBridge}${axBridge}${axStateBridge}`;
+  const contentHeightBridge = options.contentHeightToken
+    ? buildContentHeightReporter(sanitizeToken(options.contentHeightToken))
+    : '';
+  const injectedHeadContent = `${link}${themeBridge}${presentationBridge}${axBridge}${axStateBridge}${contentHeightBridge}`;
   const presentationAttr = options.presentation ? ' data-pmx-presentation-mode="present"' : '';
   const trimmed = userHtml.trim();
   const isFullDoc = /<html[\s>]/i.test(trimmed);

package/src/server/server.ts

@@ -48,7 +48,7 @@ import type {
   ListToolsResult,
 } from '@modelcontextprotocol/sdk/types.js';
 import { type CanvasAnnotation, type CanvasEdge, type CanvasLayout, type CanvasNodeState, IMAGE_MIME_MAP, canvasState } from './canvas-state.js';
-import { buildAxBridge, buildAxStateBridge, buildHtmlSurfaceDocument, HTML_SURFACE_SANDBOX, normalizeSurfaceTheme } from './html-surface.js';
+import { buildAxBridge, buildAxStateBridge, buildContentHeightReporter, buildHtmlSurfaceDocument, HTML_SURFACE_SANDBOX, normalizeSurfaceTheme } from './html-surface.js';
 import { findCanvasExtAppNodeId as findCanvasExtAppNodeIdShared } from './ext-app-lookup.js';
 import { normalizeExtAppToolResult } from './ext-app-tool-result.js';
 import { getMcpAppHostSnapshot } from './mcp-app-host.js';
@@ -1456,6 +1456,8 @@ function handleNodeSurface(pathname: string, url: URL): Response {
       nodeId: node.id,
       // Seed the read-side bridge with the current AX state (only for AX surfaces).
       ...(axEnabled ? { axState: buildCanvasAxSurfaceSnapshot() } : {}),
+      // Content-height reporter nonce (lets an html node grow to fit its content).
+      ...(url.searchParams.get('frameToken') ? { contentHeightToken: url.searchParams.get('frameToken') as string } : {}),
     });
     return surfaceHtmlResponse(doc, HTML_SURFACE_SANDBOX);
   }
@@ -2422,7 +2424,14 @@ async function handleCanvasAddGraph(req: Request): Promise<Response> {
     const x = pickFiniteNumber(body, 'x') ?? (position ? pickFiniteNumber(position, 'x') : undefined);
     const y = pickFiniteNumber(body, 'y') ?? (position ? pickFiniteNumber(position, 'y') : undefined);
     const width = pickPositiveNumber(body, 'width') ?? (size ? pickPositiveNumber(size, 'width') : undefined);
-    const nodeHeight = pickPositiveNumber(body, 'nodeHeight') ?? (size ? pickPositiveNumber(size, 'height') : undefined);
+    // Node FRAME height. `body.height` is the CHART plot height (passed through as
+    // `input.height` below), so the node frame accepts `nodeHeight` / `heightPx` /
+    // `size.height` as aliases — `heightPx` matches createCanvasGraphNode's own input
+    // field, the natural thing a caller reaches for. (With content-fit the node grows
+    // to the chart anyway; this just removes the silent "height ignored" surprise.)
+    const nodeHeight = pickPositiveNumber(body, 'nodeHeight')
+      ?? pickPositiveNumber(body, 'heightPx')
+      ?? (size ? pickPositiveNumber(size, 'height') : undefined);
     const showLegend = typeof body.showLegend === 'boolean' ? body.showLegend : undefined;
     const showLabels = typeof body.showLabels === 'boolean' ? body.showLabels : undefined;
     const colorBy =
@@ -2549,6 +2558,8 @@ async function handleJsonRenderView(url: URL): Promise<Response> {
     url.searchParams.get('devtools') === '1';
   const axToken = url.searchParams.get('axToken');
   const axEnabled = resolveNodeAxCapabilities(node).enabled;
+  const frameToken = url.searchParams.get('frameToken');
+  const fitContent = url.searchParams.get('fit') === 'content';
   const html = await buildJsonRenderViewerHtml({
     title,
     spec,
@@ -2558,6 +2569,9 @@ async function handleJsonRenderView(url: URL): Promise<Response> {
     ...(axToken ? { nodeId, axToken } : {}),
     // Seed the read-side AX state (only for AX-enabled nodes) so specs can bind /ax.
     ...(axToken && axEnabled ? { axState: buildCanvasAxSurfaceSnapshot() } : {}),
+    // Content-fit: report natural height (charts render intrinsic) so the node grows.
+    ...(frameToken ? { frameToken } : {}),
+    ...(fitContent ? { fitContent: true } : {}),
   });
   return new Response(html, {
     headers: {
@@ -2636,6 +2650,14 @@ function handleArtifactView(url: URL): Response {
           : `${bridge}${content}`;
       }
     }
+    // Content-height reporter so a web-artifact node grows to fit its app (#48).
+    const frameToken = url.searchParams.get('frameToken');
+    if (frameToken) {
+      const reporter = buildContentHeightReporter(frameToken.replace(/[^A-Za-z0-9_-]/g, '').slice(0, 80));
+      content = content.includes('</head>')
+        ? content.replace('</head>', `${reporter}</head>`)
+        : `${reporter}${content}`;
+    }
     return new Response(content, {
       headers: {
         'Content-Type': 'text/html; charset=utf-8',
@@ -3870,9 +3892,10 @@ function handleGetAxSurfaceSnapshot(): Response {
 
 // Open a node's surface in the user's real system browser (for hosts whose
 // embedded browser makes window.open('_blank') feel in-place, e.g. Codex).
-// Accepts ONLY { nodeId } and opens this server's own surface URL — never an
-// arbitrary URL — so it can't be used to launch external sites (no SSRF). Honors
-// the PMX_CANVAS_DISABLE_BROWSER_OPEN kill switch via openUrlInExternalBrowser.
+// Accepts ONLY { nodeId, url? } and opens this server's own surface URL — never
+// an arbitrary URL — so it can't be used to launch external sites (no SSRF).
+// The optional URL is limited to the same node surface route so callers can keep
+// safe presentation query params like the current theme.
 async function handleOpenExternalSurface(req: Request): Promise<Response> {
   const body = await readJson(req);
   const nodeId = typeof body.nodeId === 'string' ? body.nodeId : '';
@@ -3881,7 +3904,14 @@ async function handleOpenExternalSurface(req: Request): Promise<Response> {
   if (!node) return responseJson({ ok: false, error: `Node "${nodeId}" not found.` }, 404);
   const port = getCanvasServerPort();
   if (!port) return responseJson({ ok: false, opened: false, error: 'Server port unavailable.' }, 503);
-  const surfacePath = `/api/canvas/surface/${encodeURIComponent(nodeId)}`;
+  const defaultSurfacePath = `/api/canvas/surface/${encodeURIComponent(nodeId)}`;
+  const rawUrl = typeof body.url === 'string' ? body.url : defaultSurfacePath;
+  const parsedUrl = new URL(rawUrl, `http://localhost:${port}`);
+  if (parsedUrl.origin !== `http://localhost:${port}` || parsedUrl.pathname !== defaultSurfacePath) {
+    return responseJson({ ok: false, error: 'url must target the requested node surface.' }, 400);
+  }
+  const theme = normalizeSurfaceTheme(parsedUrl.searchParams.get('theme'));
+  const surfacePath = `${defaultSurfacePath}?theme=${encodeURIComponent(theme)}`;
   const opened = openUrlInExternalBrowser(`http://localhost:${port}${surfacePath}`);
   return responseJson({ ok: true, opened, url: surfacePath });
 }

package/src/shared/content-height-reporter.ts

@@ -0,0 +1,35 @@
+/**
+ * Content-height reporter — injected into iframe-backed canvas surfaces so the
+ * parent canvas can grow the node to fit its content (the #48 graph-clipping fix).
+ *
+ * The surface posts its natural `document` scrollHeight to `window.parent` over a
+ * nonce-validated channel; the parent (use-iframe-content-height) grows the node
+ * grow-only to fit. Debounced (~100ms) + dead-banded (>4px) so a stray re-measure
+ * can't spam, and grow-only growth on the parent side cannot oscillate.
+ *
+ * Shared by both injection sites — src/server/html-surface.ts (html / web-artifact
+ * surfaces) and src/json-render/server.ts (the json-render/graph viewer) — so the
+ * two stay byte-identical. This module is framework-agnostic and imports nothing
+ * from src/server, preserving the json-render package's decoupling.
+ */
+
+/** Sanitize a nonce for safe interpolation into an inline script literal. */
+export function sanitizeFrameToken(token: string): string {
+  return token.replace(/[^A-Za-z0-9_-]/g, '').slice(0, 80);
+}
+
+/** Inline JS (no `<script>` wrapper) that reports content height to the parent. */
+export function contentHeightReporterSource(frameToken: string): string {
+  const token = JSON.stringify(sanitizeFrameToken(frameToken));
+  return `(function(){var T=${token};var last=0,timer=null;`
+    + `function m(){var d=document.documentElement;return Math.max(d?d.scrollHeight:0,document.body?document.body.scrollHeight:0);}`
+    + `function r(){var h=m();if(Math.abs(h-last)<=4)return;last=h;window.parent.postMessage({source:'pmx-canvas-frame',type:'content-height',token:T,height:h},'*');}`
+    + `function s(){if(timer)return;timer=setTimeout(function(){timer=null;r();},100);}`
+    + `if(document.readyState!=='loading')s();window.addEventListener('load',s);`
+    + `try{new ResizeObserver(s).observe(document.documentElement);}catch(e){}setTimeout(s,60);})();`;
+}
+
+/** `<script>`-wrapped reporter for injection into an HTML `<head>` / document. */
+export function contentHeightReporterTag(frameToken: string): string {
+  return `<script data-pmx-canvas-content-height>${contentHeightReporterSource(frameToken)}</script>`;
+}