pmx-canvas 0.1.11 → 0.1.13

package/dist/types/client/nodes/trace-model.d.ts

@@ -0,0 +1,9 @@
+export interface TraceDisplayModel {
+    toolName: string;
+    category: string;
+    status: string;
+    duration: string;
+    resultSummary: string;
+    error: string;
+}
+export declare function buildTraceDisplayModel(data: Record<string, unknown>): TraceDisplayModel;

package/dist/types/client/state/canvas-store.d.ts

@@ -54,6 +54,8 @@ export declare function replaceViewport(next: ViewportState): void;
 export declare function commitViewport(next: ViewportState): void;
 export declare function applyServerCanvasLayout(layout: Pick<CanvasLayout, 'nodes' | 'edges'> & {
     viewport?: ViewportState;
+}, options?: {
+    applyViewport?: boolean;
 }): void;
 /**
  * Smoothly animate the viewport to a target state.

package/dist/types/mcp/canvas-access.d.ts

@@ -0,0 +1,88 @@
+import { type CanvasLayout, type CanvasNodeState, type CanvasSnapshot, type PmxCanvas } from '../server/index.js';
+type AddNodeInput = Parameters<PmxCanvas['addNode']>[0];
+type AddWebpageNodeInput = Parameters<PmxCanvas['addWebpageNode']>[0];
+type RefreshWebpageNodeResult = Awaited<ReturnType<PmxCanvas['refreshWebpageNode']>>;
+type OpenMcpAppInput = Parameters<PmxCanvas['openMcpApp']>[0];
+type OpenMcpAppResult = Awaited<ReturnType<PmxCanvas['openMcpApp']>>;
+type AddDiagramInput = Parameters<PmxCanvas['addDiagram']>[0];
+type AddJsonRenderNodeInput = Parameters<PmxCanvas['addJsonRenderNode']>[0];
+type AddJsonRenderNodeResult = ReturnType<PmxCanvas['addJsonRenderNode']>;
+type AddGraphNodeInput = Parameters<PmxCanvas['addGraphNode']>[0];
+type AddGraphNodeResult = ReturnType<PmxCanvas['addGraphNode']>;
+type UpdateNodePatch = Parameters<PmxCanvas['updateNode']>[1];
+type AddEdgeInput = Parameters<PmxCanvas['addEdge']>[0];
+type CreateGroupInput = Parameters<PmxCanvas['createGroup']>[0];
+type GroupNodesOptions = Parameters<PmxCanvas['groupNodes']>[2];
+type ArrangeLayout = Parameters<PmxCanvas['arrange']>[0];
+type FocusNodeResult = ReturnType<PmxCanvas['focusNode']>;
+type FitViewOptions = Parameters<PmxCanvas['fitView']>[0];
+type FitViewResult = ReturnType<PmxCanvas['fitView']>;
+type SearchResult = ReturnType<PmxCanvas['search']>;
+type UndoRedoResult = Awaited<ReturnType<PmxCanvas['undo']>>;
+type HistoryResult = ReturnType<PmxCanvas['getHistory']>;
+type SetContextPinsResult = ReturnType<PmxCanvas['setContextPins']>;
+type RunBatchInput = Parameters<PmxCanvas['runBatch']>[0];
+type RunBatchResult = Awaited<ReturnType<PmxCanvas['runBatch']>>;
+type SnapshotList = ReturnType<PmxCanvas['listSnapshots']>;
+type DeleteSnapshotResult = ReturnType<PmxCanvas['deleteSnapshot']>;
+type DiffSnapshotResult = ReturnType<PmxCanvas['diffSnapshot']>;
+type CodeGraphResult = ReturnType<PmxCanvas['getCodeGraph']>;
+type ValidationResult = ReturnType<PmxCanvas['validate']>;
+type WebArtifactInput = Parameters<PmxCanvas['buildWebArtifact']>[0];
+type WebArtifactResult = Awaited<ReturnType<PmxCanvas['buildWebArtifact']>>;
+type AutomationWebViewOptions = Parameters<PmxCanvas['startAutomationWebView']>[0];
+type AutomationWebViewStatus = Awaited<ReturnType<PmxCanvas['startAutomationWebView']>>;
+type AutomationEvaluateResult = Awaited<ReturnType<PmxCanvas['evaluateAutomationWebView']>>;
+type AutomationScreenshotOptions = Parameters<PmxCanvas['screenshotAutomationWebView']>[0];
+export interface CanvasAccess {
+    readonly port: number;
+    readonly remoteBaseUrl: string | null;
+    getLayout(): Promise<CanvasLayout>;
+    getNode(id: string): Promise<CanvasNodeState | undefined>;
+    addNode(input: AddNodeInput): Promise<string>;
+    addWebpageNode(input: AddWebpageNodeInput): Promise<Awaited<ReturnType<PmxCanvas['addWebpageNode']>>>;
+    refreshWebpageNode(id: string, url?: string): Promise<RefreshWebpageNodeResult>;
+    openMcpApp(input: OpenMcpAppInput): Promise<OpenMcpAppResult>;
+    addDiagram(input: AddDiagramInput): Promise<OpenMcpAppResult>;
+    addJsonRenderNode(input: AddJsonRenderNodeInput): Promise<AddJsonRenderNodeResult>;
+    addGraphNode(input: AddGraphNodeInput): Promise<AddGraphNodeResult>;
+    buildWebArtifact(input: WebArtifactInput): Promise<WebArtifactResult>;
+    updateNode(id: string, patch: UpdateNodePatch): Promise<void>;
+    removeNode(id: string): Promise<void>;
+    addEdge(input: AddEdgeInput): Promise<string>;
+    removeEdge(id: string): Promise<void>;
+    createGroup(input: CreateGroupInput): Promise<string>;
+    groupNodes(groupId: string, childIds: string[], options?: GroupNodesOptions): Promise<boolean>;
+    ungroupNodes(groupId: string): Promise<boolean>;
+    arrange(layout?: ArrangeLayout): Promise<void>;
+    focusNode(id: string, options?: {
+        noPan?: boolean;
+    }): Promise<FocusNodeResult>;
+    fitView(options?: FitViewOptions): Promise<FitViewResult>;
+    clear(): Promise<void>;
+    search(query: string): Promise<SearchResult>;
+    undo(): Promise<UndoRedoResult>;
+    redo(): Promise<UndoRedoResult>;
+    getHistory(): Promise<HistoryResult>;
+    setContextPins(nodeIds: string[], mode?: 'set' | 'add' | 'remove'): Promise<SetContextPinsResult>;
+    getPinnedNodeIds(): Promise<string[]>;
+    runBatch(operations: RunBatchInput): Promise<RunBatchResult>;
+    listSnapshots(): Promise<SnapshotList>;
+    saveSnapshot(name: string): Promise<CanvasSnapshot | null>;
+    restoreSnapshot(id: string): Promise<{
+        ok: boolean;
+    }>;
+    deleteSnapshot(id: string): Promise<DeleteSnapshotResult>;
+    diffSnapshot(idOrName: string): Promise<DiffSnapshotResult>;
+    getCodeGraph(): Promise<CodeGraphResult>;
+    validate(): Promise<ValidationResult>;
+    getAutomationWebViewStatus(): Promise<AutomationWebViewStatus>;
+    startAutomationWebView(options?: AutomationWebViewOptions): Promise<AutomationWebViewStatus>;
+    stopAutomationWebView(): Promise<boolean>;
+    evaluateAutomationWebView(expression: string): Promise<AutomationEvaluateResult>;
+    resizeAutomationWebView(width: number, height: number): Promise<AutomationWebViewStatus>;
+    screenshotAutomationWebView(options?: AutomationScreenshotOptions): Promise<Uint8Array>;
+}
+export declare function refreshCanvasAccess(access: CanvasAccess): Promise<CanvasAccess>;
+export declare function createCanvasAccess(): Promise<CanvasAccess>;
+export {};

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

@@ -96,6 +96,7 @@ export interface CanvasServerOptions {
     port?: number;
     workspaceRoot?: string;
     autoOpenBrowser?: boolean;
+    allowPortFallback?: boolean;
 }
 export declare function startCanvasServer(options?: CanvasServerOptions): string | null;
 export declare function stopCanvasServer(): void;

package/dist/types/server/web-artifacts.d.ts

@@ -38,6 +38,7 @@ export interface WebArtifactCanvasBuildResult extends WebArtifactBuildOutput {
     openedInCanvas: boolean;
     nodeId?: string;
     url?: string;
+    completedAt: string;
 }
 export declare function resolveWorkspacePath(pathLike: string, cwd?: string): string;
 export declare function resolveWebArtifactScriptPath(kind: 'init' | 'bundle'): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmx-canvas",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "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/web-artifacts-builder/scripts/init-artifact.sh

@@ -115,12 +115,13 @@ else
   echo "✅ Using Vite $VITE_VERSION (Node 18 compatible)"
 fi
 
-# Detect OS and set sed syntax
-if [[ "$OSTYPE" == "darwin"* ]]; then
-  SED_INPLACE="sed -i ''"
-else
-  SED_INPLACE="sed -i"
-fi
+function sed_in_place() {
+  if [[ "$OSTYPE" == "darwin"* ]]; then
+    sed -i '' "$@"
+  else
+    sed -i "$@"
+  fi
+}
 
 declare -a PNPM_CMD
 configure_pnpm
@@ -158,8 +159,8 @@ fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n');
 "
 
 echo "🧹 Cleaning up Vite template..."
-$SED_INPLACE '/<link rel="icon".*/d' index.html
-$SED_INPLACE 's/<title>.*<\/title>/<title>'"$PROJECT_NAME"'<\/title>/' index.html
+sed_in_place '/<link rel="icon".*/d' index.html
+sed_in_place 's/<title>.*<\/title>/<title>'"$PROJECT_NAME"'<\/title>/' index.html
 
 echo "📦 Installing base dependencies..."
 run_pnpm_quiet install

package/src/client/nodes/TraceNode.tsx

@@ -1,4 +1,5 @@
 import type { CanvasNodeState } from '../types';
+import { buildTraceDisplayModel } from './trace-model';
 
 const CATEGORY_COLORS: Record<string, string> = {
   mcp: 'var(--c-accent)',
@@ -20,12 +21,7 @@ const STATUS_COLORS: Record<string, string> = {
 };
 
 export function TraceNode({ node }: { node: CanvasNodeState }) {
-  const toolName = (node.data.toolName as string) || 'unknown';
-  const category = (node.data.category as string) || 'other';
-  const status = (node.data.status as string) || 'running';
-  const duration = (node.data.duration as string) || '';
-  const resultSummary = (node.data.resultSummary as string) || '';
-  const error = (node.data.error as string) || '';
+  const { toolName, category, status, duration, resultSummary, error } = buildTraceDisplayModel(node.data);
 
   const catColor = CATEGORY_COLORS[category] ?? CATEGORY_COLORS.other;
   const statusIcon = STATUS_ICONS[status] ?? '◌';

package/src/client/nodes/trace-model.ts

@@ -0,0 +1,19 @@
+export interface TraceDisplayModel {
+  toolName: string;
+  category: string;
+  status: string;
+  duration: string;
+  resultSummary: string;
+  error: string;
+}
+
+export function buildTraceDisplayModel(data: Record<string, unknown>): TraceDisplayModel {
+  return {
+    toolName: (data.toolName as string) || (data.title as string) || 'unknown',
+    category: (data.category as string) || 'other',
+    status: (data.status as string) || 'running',
+    duration: (data.duration as string) || '',
+    resultSummary: (data.resultSummary as string) || (data.content as string) || '',
+    error: (data.error as string) || '',
+  };
+}

package/src/client/state/canvas-store.ts

@@ -313,7 +313,10 @@ export function commitViewport(next: ViewportState): void {
   void updateViewportFromClient(next);
 }
 
-export function applyServerCanvasLayout(layout: Pick<CanvasLayout, 'nodes' | 'edges'> & { viewport?: ViewportState }): void {
+export function applyServerCanvasLayout(
+  layout: Pick<CanvasLayout, 'nodes' | 'edges'> & { viewport?: ViewportState },
+  options: { applyViewport?: boolean } = {},
+): void {
   const nextNodes = new Map<string, CanvasNodeState>();
   let nextMaxZ = 1;
   for (const node of layout.nodes) {
@@ -337,7 +340,7 @@ export function applyServerCanvasLayout(layout: Pick<CanvasLayout, 'nodes' | 'ed
   const nextContextPinnedNodeIds = filterNodeIdSet(contextPinnedNodeIds.value, nextNodes);
 
   batch(() => {
-    if (layout.viewport) {
+    if (options.applyViewport === true && layout.viewport) {
       viewport.value = layout.viewport;
     }
     maxZ = nextMaxZ;

package/src/client/state/sse-bridge.ts

@@ -803,6 +803,7 @@ function handleCanvasLayoutUpdate(data: Record<string, unknown>): void {
       }
     | undefined;
   if (!layout?.nodes) return;
+  const shouldApplyViewport = !hasInitialServerLayout.value;
   hasInitialServerLayout.value = true;
 
   const serverNodes = layout.nodes
@@ -824,7 +825,7 @@ function handleCanvasLayoutUpdate(data: Record<string, unknown>): void {
     ...(nextViewport ? { viewport: nextViewport } : {}),
     nodes: serverNodes,
     edges: serverEdges,
-  });
+  }, { applyViewport: shouldApplyViewport });
 
   syncAttentionFromSse({ event: 'canvas-layout-update', data });
 }