pmx-canvas 0.1.22 → 0.1.24

package/src/server/canvas-validation.ts

@@ -40,6 +40,10 @@ function overlaps(a: CanvasNodeState, b: CanvasNodeState): boolean {
   );
 }
 
+function participatesInCanvasCollisionValidation(node: CanvasNodeState): boolean {
+  return node.dockPosition === null;
+}
+
 function fullyContains(group: CanvasNodeState, child: CanvasNodeState): boolean {
   return (
     child.position.x >= group.position.x &&
@@ -81,8 +85,10 @@ export function validateCanvasLayout(layout: CanvasLayout): CanvasValidationResu
 
   for (let i = 0; i < layout.nodes.length; i++) {
     const a = layout.nodes[i]!;
+    if (!participatesInCanvasCollisionValidation(a)) continue;
     for (let j = i + 1; j < layout.nodes.length; j++) {
       const b = layout.nodes[j]!;
+      if (!participatesInCanvasCollisionValidation(b)) continue;
       if (!overlaps(a, b)) continue;
 
       if (isGroupChildPair(a, b)) {

package/src/server/index.ts

@@ -1,6 +1,8 @@
 import { EventEmitter } from 'node:events';
 import { canvasState, IMAGE_MIME_MAP } from './canvas-state.js';
 import type { CanvasAnnotation, CanvasNodeState, CanvasEdge, CanvasLayout, ViewportState } from './canvas-state.js';
+import { buildCanvasAxContext } from './ax-context.js';
+import type { PmxAxContext, PmxAxFocusState, PmxAxSource, PmxAxState } from './ax-state.js';
 import { findCanvasExtAppNodeId } from './ext-app-lookup.js';
 import { onFileNodeChanged } from './file-watcher.js';
 import { findOpenCanvasPosition, computeGroupBounds } from './placement.js';
@@ -402,7 +404,9 @@ export class PmxCanvas extends EventEmitter {
         y: node.position.y - 100,
       });
     }
+    const focus = canvasState.setAxFocus([id], { source: 'sdk', recordHistory: false });
     emitPrimaryWorkbenchEvent('canvas-focus-node', { nodeId: id, noPan });
+    emitPrimaryWorkbenchEvent('ax-state-changed', { focus });
     if (!noPan) {
       emitPrimaryWorkbenchEvent('canvas-viewport-update', { viewport: canvasState.viewport });
     }
@@ -410,6 +414,20 @@ export class PmxCanvas extends EventEmitter {
     return { focused: id, panned: !noPan };
   }
 
+  getAxState(): PmxAxState {
+    return canvasState.getAxState();
+  }
+
+  getAxContext(): PmxAxContext {
+    return buildCanvasAxContext();
+  }
+
+  setAxFocus(nodeIds: string[], options?: { source?: PmxAxSource }): PmxAxFocusState {
+    const focus = canvasState.setAxFocus(nodeIds, { source: options?.source ?? 'sdk' });
+    emitPrimaryWorkbenchEvent('ax-state-changed', { focus });
+    return focus;
+  }
+
   fitView(options?: {
     width?: number;
     height?: number;

package/src/server/mutation-history.ts

@@ -28,6 +28,7 @@ export type MutationOp =
   | 'arrange'
   | 'restoreSnapshot'
   | 'setPins'
+  | 'setAxFocus'
   | 'batch'
   | 'viewport'
   | 'groupNodes'

package/src/server/server.ts

@@ -35,6 +35,7 @@
  */
 
 import { spawnSync } from 'node:child_process';
+import { randomUUID } from 'node:crypto';
 import { existsSync, readFileSync, statSync, writeFileSync, appendFileSync } from 'node:fs';
 import { readFile } from 'node:fs/promises';
 import { basename, extname, join, relative, resolve } from 'node:path';
@@ -75,6 +76,9 @@ import {
 } from './canvas-serialization.js';
 import { buildCodeGraphSummary, formatCodeGraph } from './code-graph.js';
 import { buildAgentContextPreamble, serializeNodeForAgentContext } from './agent-context.js';
+import { buildCanvasAxContext } from './ax-context.js';
+import type { PmxAxSource } from './ax-state.js';
+import { normalizeCanvasTheme, type CanvasTheme } from './canvas-db.js';
 import { validateLocalImageFile } from './image-source.js';
 import {
   addCanvasNode,
@@ -145,9 +149,7 @@ let nextWorkbenchSubscriberId = 1;
 const workbenchSubscribers = new Map<number, ReadableStreamDefaultController<Uint8Array>>();
 const textEncoder = new TextEncoder();
 let primaryWorkbenchAutoOpenEnabled = true;
-const canvasThemeSetting = (['dark', 'light', 'high-contrast'].includes(process.env.PMX_CANVAS_THEME ?? '')
-  ? process.env.PMX_CANVAS_THEME!
-  : 'dark');
+const initialCanvasThemeSetting = normalizeCanvasTheme(process.env.PMX_CANVAS_THEME);
 let lastWorkbenchContextCardsEnvelope: Record<string, unknown> | null = null;
 
 function normalizeGraphViewerSpec(
@@ -1038,6 +1040,24 @@ function normalizeMarkdownExternalUrls(markdown: string): string {
 
 // ── Canvas SPA HTML ────────────────────────────────────────────
 
+const CANVAS_ASSET_VERSION = Date.now().toString(36);
+const MAX_FRAME_DOCUMENTS = 128;
+const MAX_FRAME_DOCUMENT_BYTES = 5 * 1024 * 1024;
+const DEFAULT_FRAME_DOCUMENT_SANDBOX = 'allow-scripts';
+const SAFE_FRAME_DOCUMENT_SANDBOX_TOKENS = new Set([
+  'allow-downloads',
+  'allow-forms',
+  'allow-modals',
+  'allow-orientation-lock',
+  'allow-pointer-lock',
+  'allow-popups',
+  'allow-popups-to-escape-sandbox',
+  'allow-presentation',
+  'allow-scripts',
+  'allow-storage-access-by-user-activation',
+]);
+const frameDocuments = new Map<string, { html: string; sandbox: string }>();
+
 function canvasSpaHtml(): string {
   return `<!doctype html>
 <html lang="en">
@@ -1106,7 +1126,7 @@ function canvasSpaHtml(): string {
       color: #eef4ff;
     }
   </style>
-  <link rel="stylesheet" href="/canvas/global.css" />
+  <link rel="stylesheet" href="/canvas/global.css?v=${CANVAS_ASSET_VERSION}" />
 </head>
 <body>
   <div id="canvasBootstrap">
@@ -1143,7 +1163,7 @@ function canvasSpaHtml(): string {
       }, 4000);
     })();
   </script>
-  <script type="module" src="/canvas/index.js"></script>
+  <script type="module" src="/canvas/index.js?v=${CANVAS_ASSET_VERSION}"></script>
 </body>
 </html>`;
 }
@@ -1229,6 +1249,61 @@ function serveCanvasFavicon(): Response {
 
 // ── Canvas REST handlers ──────────────────────────────────────
 
+function normalizeFrameDocumentSandbox(value: unknown): string | null {
+  if (value === undefined || value === null) return DEFAULT_FRAME_DOCUMENT_SANDBOX;
+  if (typeof value !== 'string') return null;
+  const tokens = value.trim().split(/\s+/).filter(Boolean);
+  if (tokens.length === 0) return DEFAULT_FRAME_DOCUMENT_SANDBOX;
+  const uniqueTokens: string[] = [];
+  for (const token of tokens) {
+    if (!SAFE_FRAME_DOCUMENT_SANDBOX_TOKENS.has(token)) return null;
+    if (!uniqueTokens.includes(token)) uniqueTokens.push(token);
+  }
+  return uniqueTokens.join(' ');
+}
+
+function addFrameDocument(html: string, sandbox: string): string {
+  const id = randomUUID();
+  frameDocuments.set(id, { html, sandbox });
+  while (frameDocuments.size > MAX_FRAME_DOCUMENTS) {
+    const firstKey = frameDocuments.keys().next().value;
+    if (typeof firstKey !== 'string') break;
+    frameDocuments.delete(firstKey);
+  }
+  return `/api/canvas/frame-documents/${id}`;
+}
+
+async function handleCreateFrameDocument(req: Request): Promise<Response> {
+  const body = await readJson(req);
+  const html = body.html;
+  if (typeof html !== 'string' || !html) {
+    return responseJson({ ok: false, error: 'Frame document requires non-empty html.' }, 400);
+  }
+  if (new TextEncoder().encode(html).byteLength > MAX_FRAME_DOCUMENT_BYTES) {
+    return responseJson({ ok: false, error: 'Frame document is too large.' }, 413);
+  }
+  const sandbox = normalizeFrameDocumentSandbox(body.sandbox);
+  if (!sandbox) {
+    return responseJson({ ok: false, error: 'Frame document sandbox contains unsupported tokens.' }, 400);
+  }
+  return responseJson({ ok: true, url: addFrameDocument(html, sandbox) });
+}
+
+function handleFrameDocument(pathname: string): Response {
+  const id = decodeURIComponent(pathname.slice('/api/canvas/frame-documents/'.length));
+  const document = frameDocuments.get(id);
+  if (!document) return responseText('Frame document not found.', 404);
+  return new Response(document.html, {
+    headers: {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'no-store',
+      'Content-Security-Policy': `sandbox ${document.sandbox}`,
+      'Referrer-Policy': 'no-referrer',
+      'X-Content-Type-Options': 'nosniff',
+    },
+  });
+}
+
 async function handleCanvasUpdate(req: Request): Promise<Response> {
   const body = await readJson(req);
   const updates = Array.isArray(body.updates) ? body.updates : [];
@@ -1436,7 +1511,8 @@ async function createCanvasWebpageNode(body: Record<string, unknown>): Promise<R
 
 async function handleCanvasAddNode(req: Request): Promise<Response> {
   const body = await readJson(req);
-  const type = (body.type as string) || 'markdown';
+  const queryType = new URL(req.url).searchParams.get('type');
+  const type = typeof body.type === 'string' ? body.type : queryType || 'markdown';
 
   if (!VALID_NODE_TYPES.has(type)) {
     if (type === 'json-render') {
@@ -1816,10 +1892,16 @@ async function handleCanvasFocus(req: Request): Promise<Response> {
     const maxZ = canvasState.getLayout().nodes.reduce((max, layoutNode) => Math.max(max, layoutNode.zIndex), 0);
     canvasState.updateNode(nodeId, { zIndex: maxZ + 1 });
   }
+  const focus = canvasState.setAxFocus([nodeId], { source: 'api', recordHistory: false });
+  broadcastWorkbenchEvent('ax-state-changed', {
+    focus,
+    sessionId: primaryWorkbenchSessionId,
+    timestamp: new Date().toISOString(),
+  });
   emitPrimaryWorkbenchEvent('canvas-focus-node', { nodeId, noPan });
   if (!noPan) emitPrimaryWorkbenchEvent('canvas-viewport-update', { viewport: canvasState.viewport });
   emitPrimaryWorkbenchEvent('canvas-layout-update', { layout: canvasState.getLayout() });
-  return responseJson({ ok: true, focused: nodeId, panned: !noPan });
+  return responseJson({ ok: true, focused: nodeId, panned: !noPan, axFocus: focus });
 }
 
 async function handleCanvasFit(req: Request): Promise<Response> {
@@ -2104,6 +2186,18 @@ function handleCanvasValidate(): Response {
   return responseJson(validateCanvasLayout(canvasState.getLayout()));
 }
 
+async function handleCanvasThemeUpdate(req: Request): Promise<Response> {
+  const body = await readJson(req);
+  const theme = normalizeCanvasTheme(body.theme, canvasState.theme);
+  const next = canvasState.setTheme(theme);
+  broadcastWorkbenchEvent('theme-changed', {
+    theme: next,
+    sessionId: primaryWorkbenchSessionId,
+    timestamp: new Date().toISOString(),
+  });
+  return responseJson({ ok: true, theme: next });
+}
+
 async function handleJsonRenderView(url: URL): Promise<Response> {
   const nodeId = url.searchParams.get('nodeId') ?? '';
   if (!nodeId) return responseText('Missing nodeId', 400);
@@ -2972,7 +3066,7 @@ function handleWorkbenchEvents(req: Request): Response {
           requestedSessionId: requestedSessionId || null,
           continuity,
           path: primaryWorkbenchPath,
-          theme: canvasThemeSetting,
+          theme: canvasState.theme,
           timestamp: new Date().toISOString(),
         }),
       );
@@ -3390,6 +3484,63 @@ function handleGetPinnedContext(): Response {
   return responseJson({ preamble, nodeIds: pinnedIds, count: pinnedIds.length, nodes });
 }
 
+function normalizeAxNodeIds(value: unknown): string[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter((id): id is string => typeof id === 'string');
+}
+
+function normalizeAxSource(value: unknown, fallback: PmxAxSource): PmxAxSource {
+  return value === 'agent' ||
+    value === 'api' ||
+    value === 'browser' ||
+    value === 'cli' ||
+    value === 'codex' ||
+    value === 'copilot' ||
+    value === 'mcp' ||
+    value === 'sdk' ||
+    value === 'system'
+    ? value
+    : fallback;
+}
+
+function handleGetAxState(): Response {
+  return responseJson({ ok: true, state: canvasState.getAxState() });
+}
+
+function handleGetAxContext(): Response {
+  return responseJson(buildCanvasAxContext());
+}
+
+async function handleAxFocusUpdate(req: Request): Promise<Response> {
+  const body = await readJson(req);
+  const nodeIds = normalizeAxNodeIds(body.nodeIds);
+  const source = normalizeAxSource(body.source, 'api');
+  const focus = canvasState.setAxFocus(nodeIds, { source });
+  broadcastWorkbenchEvent('ax-state-changed', {
+    focus,
+    sessionId: primaryWorkbenchSessionId,
+    timestamp: new Date().toISOString(),
+  });
+  return responseJson({ ok: true, focus });
+}
+
+async function handleAxStatePatch(req: Request): Promise<Response> {
+  const body = await readJson(req);
+  if (!body.focus || typeof body.focus !== 'object' || Array.isArray(body.focus)) {
+    return responseJson({ ok: false, error: 'PATCH /api/canvas/ax currently requires a focus object.' }, 400);
+  }
+  const focusInput = body.focus as Record<string, unknown>;
+  const focus = canvasState.setAxFocus(normalizeAxNodeIds(focusInput.nodeIds), {
+    source: normalizeAxSource(focusInput.source, 'api'),
+  });
+  broadcastWorkbenchEvent('ax-state-changed', {
+    focus,
+    sessionId: primaryWorkbenchSessionId,
+    timestamp: new Date().toISOString(),
+  });
+  return responseJson({ ok: true, state: canvasState.getAxState() });
+}
+
 // ── Port resolution ───────────────────────────────────────────
 
 function buildPortCandidates(preferredPort: number): number[] {
@@ -4074,12 +4225,13 @@ export function startCanvasServer(options: CanvasServerOptions = {}): string | n
 
   // ── Canvas persistence: set workspace root and load saved state ──
   canvasState.setWorkspaceRoot(activeWorkspaceRoot);
+  canvasState.setTheme(initialCanvasThemeSetting as CanvasTheme);
   const loaded = canvasState.loadFromDisk({ clearExisting: true });
   setCanvasLayoutUpdateEmitter(() => {
     emitPrimaryWorkbenchEvent('canvas-layout-update', { layout: canvasState.getLayout() });
   });
   if (loaded) {
-    console.log('  Canvas state restored from .pmx-canvas/state.json');
+    console.log('  Canvas state restored from .pmx-canvas/canvas.db');
     primeCanvasRuntimeBackends({ forceRehydrateExtApps: true });
     void syncCanvasRuntimeBackends({ forceRehydrateExtApps: true, alreadyPrimed: true }).finally(() => {
       emitPrimaryWorkbenchEvent('canvas-layout-update', { layout: canvasState.getLayout() });
@@ -4089,7 +4241,9 @@ export function startCanvasServer(options: CanvasServerOptions = {}): string | n
   rotatePrimaryWorkbenchSessionIfNeeded();
 
   const preferredPort = options.port ?? Number(process.env.PMX_WEB_CANVAS_PORT ?? DEFAULT_PORT);
-  const portCandidates = options.allowPortFallback === false
+  const portCandidates = options.port === 0
+    ? [0]
+    : options.allowPortFallback === false
     ? [preferredPort > 0 ? Math.floor(preferredPort) : DEFAULT_PORT]
     : buildPortCandidates(preferredPort);
 
@@ -4118,6 +4272,14 @@ export function startCanvasServer(options: CanvasServerOptions = {}): string | n
             return handleJsonRenderView(url);
           }
 
+          if (url.pathname === '/api/canvas/frame-documents' && req.method === 'POST') {
+            return handleCreateFrameDocument(req);
+          }
+
+          if (url.pathname.startsWith('/api/canvas/frame-documents/') && req.method === 'GET') {
+            return handleFrameDocument(url.pathname);
+          }
+
           if (url.pathname === '/' || url.pathname === '/workbench' || url.pathname === '/artifact') {
             return new Response(canvasSpaHtml(), {
               headers: {
@@ -4191,6 +4353,14 @@ export function startCanvasServer(options: CanvasServerOptions = {}): string | n
             return responseJson(buildCanvasSummary());
           }
 
+          if (url.pathname === '/api/canvas/theme' && req.method === 'GET') {
+            return responseJson({ ok: true, theme: canvasState.theme });
+          }
+
+          if (url.pathname === '/api/canvas/theme' && req.method === 'POST') {
+            return handleCanvasThemeUpdate(req);
+          }
+
           if (url.pathname === '/api/canvas/update' && req.method === 'POST') {
             return handleCanvasUpdate(req);
           }
@@ -4333,6 +4503,22 @@ export function startCanvasServer(options: CanvasServerOptions = {}): string | n
             return handleGetPinnedContext();
           }
 
+          if (url.pathname === '/api/canvas/ax' && req.method === 'GET') {
+            return handleGetAxState();
+          }
+
+          if (url.pathname === '/api/canvas/ax' && req.method === 'PATCH') {
+            return handleAxStatePatch(req);
+          }
+
+          if (url.pathname === '/api/canvas/ax/context' && req.method === 'GET') {
+            return handleGetAxContext();
+          }
+
+          if (url.pathname === '/api/canvas/ax/focus' && req.method === 'POST') {
+            return handleAxFocusUpdate(req);
+          }
+
           // Spatial context API
           if (url.pathname === '/api/canvas/spatial-context' && req.method === 'GET') {
             const layout = canvasState.getLayout();
@@ -4482,7 +4668,7 @@ export function startCanvasServer(options: CanvasServerOptions = {}): string | n
 }
 
 export function stopCanvasServer(): void {
-  canvasState.flushToDisk();
+  canvasState.close();
   closeAllMcpAppSessions();
   setCanvasLayoutUpdateEmitter(null);
   void closeCanvasAutomationWebViewInternal().catch((error) => {