pmx-canvas 0.4.5 → 0.4.6

package/src/server/operations/ops/nodes.ts

@@ -55,6 +55,8 @@ export const NODE_TYPES = [
   'ledger',
   'trace',
   'file',
+  'diff',
+  'mermaid',
   'image',
   'mcp-app',
   'webpage',
@@ -74,6 +76,10 @@ export function defaultNodeSize(type: string): { width: number; height: number }
       // a useful snippet — the generic default rendered as a content-less bar
       // (0.4.4 portal feedback).
       return { width: 520, height: 360 };
+    case 'diff':
+      return { width: 640, height: 420 };
+    case 'mermaid':
+      return { width: 640, height: 460 };
     case 'markdown':
       return MARKDOWN_NODE_DEFAULT_SIZE;
     case 'mcp-app':
@@ -783,7 +789,7 @@ const nodeAddOperation = defineOperation<z.infer<typeof nodeAddSchema>, NodeAddR
   mcp: {
     toolName: 'canvas_add_node',
     description:
-      'Add a basic node to the canvas. Returns the created node with normalized title/content and rendered geometry. Supported here: markdown, status, context, ledger, trace, file, image, webpage, mcp-app, html, group. Dedicated routes: json-render -> canvas_render {action:"add-json-render"}, graph -> canvas_render {action:"add-graph"}, web-artifact -> canvas_app {action:"build-artifact"}, external apps -> canvas_app {action:"open-mcp-app"}, groups -> canvas_group {action:"create"}. Call canvas_render {action:"describe-schema"} for the full nodeTypeRouting table.',
+      'Add a basic node to the canvas. Returns the created node with normalized title/content and rendered geometry. Supported here: markdown, status, context, ledger, trace, file, diff, mermaid, image, webpage, mcp-app, html, group. Dedicated routes: json-render -> canvas_render {action:"add-json-render"}, graph -> canvas_render {action:"add-graph"}, web-artifact -> canvas_app {action:"build-artifact"}, external apps -> canvas_app {action:"open-mcp-app"}, groups -> canvas_group {action:"create"}. Call canvas_render {action:"describe-schema"} for the full nodeTypeRouting table.',
     extraShape: {
       type: z
         .enum([
@@ -793,6 +799,8 @@ const nodeAddOperation = defineOperation<z.infer<typeof nodeAddSchema>, NodeAddR
           'ledger',
           'trace',
           'file',
+          'diff',
+          'mermaid',
           'image',
           'webpage',
           'mcp-app',

package/src/server/operations/ops/viewport.ts

@@ -121,7 +121,14 @@ const focusOperation = defineOperation<z.infer<typeof focusSchema>, Record<strin
     if (!node) throw new OperationError(`Node "${nodeId}" not found.`, 404);
     const noPan = body.noPan === true;
     if (!noPan) {
-      canvasState.setViewport({ x: node.position.x - 100, y: node.position.y - 100 });
+      // The viewport is a SCREEN-space translate: screen = world * scale + v
+      // (CanvasViewport's matrix(scale,0,0,scale,x,y)), the same convention
+      // fitCanvasView and the client's focusNode use. So park the node's
+      // top-left at a fixed screen-space margin — 64/96 screen px, which
+      // clears the 44px floating toolbar at ANY zoom (0.4.5 report Finding Z:
+      // the old world-space margin shrank below the toolbar at low scales).
+      const scale = canvasState.viewport.scale || 1;
+      canvasState.setViewport({ x: 64 - node.position.x * scale, y: 96 - node.position.y * scale });
     } else {
       const maxZ = canvasState.getLayout().nodes.reduce((max, layoutNode) => Math.max(max, layoutNode.zIndex), 0);
       canvasState.updateNode(nodeId, { zIndex: maxZ + 1 });

package/src/server/server.ts

@@ -47,6 +47,7 @@ import {
   buildAxStateBridge,
   buildContentHeightReporter,
   buildHtmlSurfaceDocument,
+  buildMermaidSurfaceHtml,
   HTML_SURFACE_SANDBOX,
   normalizeSurfaceTheme,
 } from './html-surface.js';
@@ -1004,6 +1005,7 @@ function canvasSpaHtml(): string {
     // (see src/client/state/iframe-mode.ts).
     process.env.AMP_ORB ? '<script>window.__PMX_AMP_ORB = true;</script>' : ''
   }
+  <script>window.__PMX_BOOT_SERVER_VERSION = ${JSON.stringify(serverPackageVersion())};</script>
   <script type="module" src="/canvas/index.js?v=${CANVAS_ASSET_VERSION}"></script>
 </body>
 </html>`;
@@ -1271,6 +1273,28 @@ function handleNodeSurface(pathname: string, url: URL): Response {
 
   const theme = normalizeSurfaceTheme(url.searchParams.get('theme'));
 
+  if (node.type === 'mermaid') {
+    const source = typeof node.data.content === 'string' ? node.data.content : '';
+    if (!source.trim()) return responseText('Mermaid node has no content', 404);
+    const surfaceTitle = typeof node.data.title === 'string' && node.data.title.trim() ? node.data.title : node.id;
+    // Display-only surface: same theme/height plumbing as html nodes, but no AX
+    // bridge and no presentation mode — the document is our own wrapper around
+    // escaped diagram source, rendered by /canvas/mermaid-entry.js.
+    const doc = buildHtmlSurfaceDocument(buildMermaidSurfaceHtml(source), {
+      theme,
+      title: surfaceTitle,
+      themeToken: url.searchParams.get('themeToken') ?? undefined,
+      // Content-height reporter nonce (lets the node grow to fit the diagram).
+      ...(url.searchParams.get('frameToken')
+        ? { contentHeightToken: url.searchParams.get('frameToken') as string }
+        : {}),
+      // Inline the theme tokens so srcdoc-rendered surfaces (Amp orb portals)
+      // are styled without depending on the <link> subresource.
+      ...(surfaceThemeCssInline() ? { inlineThemeCss: surfaceThemeCssInline() as string } : {}),
+    });
+    return surfaceHtmlResponse(doc, HTML_SURFACE_SANDBOX);
+  }
+
   if (node.type === 'html') {
     const html =
       typeof node.data.html === 'string'
@@ -1449,6 +1473,23 @@ function responseJson(data: unknown, status = 200): Response {
   });
 }
 
+// Resolved from the sibling package.json so it stays accurate through bunx,
+// global npm installs, and repo-local runs — same mechanism as --version in
+// src/cli/index.ts and the MCP server. Memoized: /health is polled.
+let cachedPackageVersion: string | null = null;
+function serverPackageVersion(): string {
+  if (cachedPackageVersion !== null) return cachedPackageVersion;
+  try {
+    const pkg = JSON.parse(readFileSync(new URL('../../package.json', import.meta.url), 'utf-8')) as {
+      version?: string;
+    };
+    cachedPackageVersion = pkg.version ?? 'unknown';
+  } catch {
+    cachedPackageVersion = 'unknown';
+  }
+  return cachedPackageVersion;
+}
+
 // v0.4.0 (M4): every hand-written error response is a JSON envelope
 // ({ ok: false, error }, same status codes) matching the registry dispatcher —
 // consumers no longer need to branch on text/plain vs JSON error bodies.
@@ -1799,6 +1840,9 @@ function buildWorkbenchConnectSnapshot(
       continuity,
       path: primaryWorkbenchPath,
       theme: canvasState.theme,
+      // Lets a long-lived client detect that the server was upgraded under it
+      // (stale in-memory SPA — 0.4.5 report Finding W) and reload once.
+      version: serverPackageVersion(),
       timestamp: new Date().toISOString(),
     },
   });
@@ -3038,11 +3082,14 @@ export function startCanvasServer(options: CanvasServerOptions = {}): string | n
             // when the pid file is stale (e.g. an adapter respawned the server
             // outside `serve --daemon` — 0.3.2 report Finding P). `persistence`
             // surfaces silent save failures (M4): the canvas keeps serving from
-            // memory, but ok:false means durability is degraded.
+            // memory, but ok:false means durability is degraded. `version` lets
+            // `pmx-canvas smoke` verify the RUNNING server, not just the CLI —
+            // version skew between the two is a known failure mode.
             return responseJson({
               ok: true,
               workspace: activeWorkspaceRoot,
               pid: process.pid,
+              version: serverPackageVersion(),
               persistence: canvasState.persistenceHealth,
             });
           }

package/src/server/workboard.ts

@@ -0,0 +1,159 @@
+/**
+ * Live AX work-item board, materialized as a json-render node.
+ *
+ * `buildWorkboardSpec` is the pure spec builder (status columns of work-item
+ * cards); `renderWorkboard` is the operation core (create-or-rebuild the
+ * single `data.workboard === true` json-render node); `refreshWorkboardNodes`
+ * is the live-refresh hook this module registers on `canvasState` so every
+ * addWorkItem/updateWorkItem rebuilds the board from the fresh work-item list
+ * through the SAME spec/update path the operation uses.
+ *
+ * The refresh runs inside `withSuppressedRecording` so live board rebuilds do
+ * not spam undo/redo history (persistence and SSE emits are unaffected).
+ */
+import type { JsonRenderSpec } from '../json-render/server.js';
+import type { PmxAxWorkItem, PmxAxWorkItemStatus } from './ax-state.js';
+import { buildJsonRenderNodeUpdate, createCanvasJsonRenderNode, emitCanvasLayoutUpdate } from './canvas-operations.js';
+import { canvasState, type CanvasNodeState } from './canvas-state.js';
+
+export const WORKBOARD_NODE_TITLE = 'Work Board';
+export const WORKBOARD_NODE_SIZE = { width: 960, height: 560 };
+
+const WORKBOARD_STATUS_ORDER: PmxAxWorkItemStatus[] = ['todo', 'in-progress', 'blocked', 'done', 'cancelled'];
+
+const WORKBOARD_STATUS_LABELS: Record<PmxAxWorkItemStatus, string> = {
+  todo: 'To Do',
+  'in-progress': 'In Progress',
+  blocked: 'Blocked',
+  done: 'Done',
+  cancelled: 'Cancelled',
+};
+
+/**
+ * Build the workboard json-render spec from a work-item list: one column per
+ * status (todo → in-progress → blocked → done → cancelled; empty statuses are
+ * omitted), each item a Card with an agentId Badge and detail Text when
+ * present. An empty list renders a single muted "No work items" text block.
+ */
+export function buildWorkboardSpec(workItems: PmxAxWorkItem[]): JsonRenderSpec {
+  if (workItems.length === 0) {
+    return {
+      root: 'empty',
+      elements: {
+        empty: { type: 'Text', props: { text: 'No work items', variant: 'muted' }, children: [] },
+      },
+    };
+  }
+
+  const elements: Record<string, unknown> = {};
+  const columnIds: string[] = [];
+  for (const status of WORKBOARD_STATUS_ORDER) {
+    const items = workItems.filter((item) => item.status === status);
+    if (items.length === 0) continue;
+    const columnId = `col-${status}`;
+    const headerId = `${columnId}-header`;
+    elements[headerId] = {
+      type: 'Heading',
+      props: { level: 'h4', text: `${WORKBOARD_STATUS_LABELS[status]} (${items.length})` },
+      children: [],
+    };
+    const columnChildren = [headerId];
+    for (const item of items) {
+      const cardId = `item-${item.id}`;
+      const cardChildren: string[] = [];
+      if (item.agentId) {
+        elements[`${cardId}-agent`] = {
+          type: 'Badge',
+          props: { text: item.agentId, variant: 'secondary' },
+          children: [],
+        };
+        cardChildren.push(`${cardId}-agent`);
+      }
+      if (item.detail) {
+        elements[`${cardId}-detail`] = {
+          type: 'Text',
+          props: { text: item.detail, variant: 'muted' },
+          children: [],
+        };
+        cardChildren.push(`${cardId}-detail`);
+      }
+      elements[cardId] = { type: 'Card', props: { title: item.title }, children: cardChildren };
+      columnChildren.push(cardId);
+    }
+    elements[columnId] = {
+      type: 'Stack',
+      props: { direction: 'vertical', gap: 'sm' },
+      children: columnChildren,
+    };
+    columnIds.push(columnId);
+  }
+  elements.board = {
+    type: 'Stack',
+    props: { direction: 'horizontal', gap: 'md', align: 'start' },
+    children: columnIds,
+  };
+  return { root: 'board', elements };
+}
+
+function findWorkboardNodes(): CanvasNodeState[] {
+  return canvasState.getLayout().nodes.filter((node) => node.type === 'json-render' && node.data.workboard === true);
+}
+
+/** Rebuild one workboard node's spec in place (shared by the op and the live refresh). */
+function applyWorkboardSpec(node: CanvasNodeState, spec: JsonRenderSpec): void {
+  const title = typeof node.data.title === 'string' && node.data.title ? node.data.title : WORKBOARD_NODE_TITLE;
+  const update = buildJsonRenderNodeUpdate(node, { title, spec });
+  canvasState.updateNode(node.id, { data: update.data });
+}
+
+/**
+ * Operation core for `render.workboard`: rebuild the existing workboard node
+ * in place, or create one (tagged `data.workboard: true`) when none exists.
+ */
+export function renderWorkboard(input: { x?: number; y?: number } = {}): {
+  ok: true;
+  id: string;
+  created: boolean;
+  itemCount: number;
+} {
+  const workItems = canvasState.getWorkItems();
+  const spec = buildWorkboardSpec(workItems);
+  const existing = findWorkboardNodes()[0];
+  if (existing) {
+    applyWorkboardSpec(existing, spec);
+    return { ok: true, id: existing.id, created: false, itemCount: workItems.length };
+  }
+  const created = createCanvasJsonRenderNode({
+    title: WORKBOARD_NODE_TITLE,
+    spec,
+    width: WORKBOARD_NODE_SIZE.width,
+    height: WORKBOARD_NODE_SIZE.height,
+    ...(input.x !== undefined ? { x: input.x } : {}),
+    ...(input.y !== undefined ? { y: input.y } : {}),
+  });
+  // Tag the node as THE workboard. Suppressed: the tag is part of the single
+  // logical "create workboard" mutation, not a second undo step.
+  canvasState.withSuppressedRecording(() => {
+    canvasState.updateNode(created.id, { data: { ...created.node.data, workboard: true } });
+  });
+  return { ok: true, id: created.id, created: true, itemCount: workItems.length };
+}
+
+/**
+ * Live refresh: rebuild every workboard node's spec from the current work-item
+ * list. Registered below as the canvasState work-item change listener. Node
+ * updates never touch work items, so this cannot recurse.
+ */
+export function refreshWorkboardNodes(): void {
+  const nodes = findWorkboardNodes();
+  if (nodes.length === 0) return;
+  const spec = buildWorkboardSpec(canvasState.getWorkItems());
+  canvasState.withSuppressedRecording(() => {
+    for (const node of nodes) {
+      applyWorkboardSpec(node, spec);
+    }
+  });
+  emitCanvasLayoutUpdate();
+}
+
+canvasState.setWorkItemsChangedListener(refreshWorkboardNodes);

package/src/shared/ax-surface-protocol.ts

@@ -20,3 +20,11 @@ export const HTML_SURFACE_PUSH_SOURCE = 'pmx-canvas-html-node';
 
 /** Ext-app boot beacon: the iframe's scripts executed (WebKit watchdog liveness). */
 export const EXT_APP_BOOT_BEACON_SOURCE = 'pmx-canvas-ext-app-alive';
+
+/**
+ * Parent→ext-app paint probe (Finding N): the parent asks the app document to
+ * answer with a double-rAF `paint-tick` beacon. A frame whose rendering
+ * pipeline is live answers within a frame or two; silence past the timeout is
+ * the paint-fail signal that drives the recovery ladder.
+ */
+export const EXT_APP_PAINT_PROBE_SOURCE = 'pmx-canvas-ext-app-paint-probe';

package/src/shared/surface.ts

@@ -17,6 +17,8 @@ export function canOpenNodeAsSurface(type: string, data: Record<string, unknown>
         (typeof data.html === 'string' && data.html.length > 0) ||
         (typeof data.content === 'string' && data.content.length > 0)
       );
+    case 'mermaid':
+      return typeof data.content === 'string' && data.content.trim().length > 0;
     case 'json-render':
     case 'graph':
       return true;