pmx-canvas 0.1.12 → 0.1.14

package/src/server/server.ts

@@ -96,6 +96,8 @@ import {
   ungroupCanvasNodes,
   validateCanvasNodePatch,
   hasStructuredNodeUpdateFields,
+  hasTraceNodeDataFields,
+  mergeTraceNodeDataFields,
 } from './canvas-operations.js';
 import { validateCanvasLayout } from './canvas-validation.js';
 import { describeCanvasSchema, validateStructuredCanvasPayload } from './canvas-schema.js';
@@ -1331,6 +1333,12 @@ async function handleCanvasAddNode(req: Request): Promise<Response> {
       ...(typeof body.title === 'string' ? { title: body.title } : {}),
       ...(typeof content === 'string' ? { content } : {}),
       ...(extraData ? { data: extraData } : {}),
+      ...(type === 'trace' && typeof body.toolName === 'string' ? { toolName: body.toolName } : {}),
+      ...(type === 'trace' && typeof body.category === 'string' ? { category: body.category } : {}),
+      ...(type === 'trace' && typeof body.status === 'string' ? { status: body.status } : {}),
+      ...(type === 'trace' && typeof body.duration === 'string' ? { duration: body.duration } : {}),
+      ...(type === 'trace' && typeof body.resultSummary === 'string' ? { resultSummary: body.resultSummary } : {}),
+      ...(type === 'trace' && typeof body.error === 'string' ? { error: body.error } : {}),
       ...(body.strictSize === true ? { strictSize: true } : {}),
       ...geometry,
       defaultWidth: 360,
@@ -1495,7 +1503,14 @@ async function handleCanvasUpdateNode(nodeId: string, req: Request): Promise<Res
     } catch (error) {
       return responseJson({ ok: false, error: error instanceof Error ? error.message : String(error) }, 400);
     }
-  } else if (body.title !== undefined || body.content !== undefined || body.data || typeof body.arrangeLocked === 'boolean' || typeof body.strictSize === 'boolean') {
+  } else if (
+    body.title !== undefined ||
+    body.content !== undefined ||
+    body.data ||
+    typeof body.arrangeLocked === 'boolean' ||
+    typeof body.strictSize === 'boolean' ||
+    (existing.type === 'trace' && hasTraceNodeDataFields(body))
+  ) {
     const data = { ...existing.data };
     if (body.title !== undefined) {
       data.title = String(body.title);
@@ -1524,7 +1539,9 @@ async function handleCanvasUpdateNode(nodeId: string, req: Request): Promise<Res
         }
       }
     }
-    patch.data = data;
+    patch.data = existing.type === 'trace'
+      ? mergeTraceNodeDataFields(data, body)
+      : data;
   }
   const error = validateCanvasNodePatch({
     ...(patch.position ? { position: patch.position as { x: number; y: number } } : {}),
@@ -1639,6 +1656,7 @@ async function handleCanvasBuildWebArtifact(req: Request): Promise<Response> {
       bytes: result.fileSize,
       projectPath: result.projectPath,
       openedInCanvas: result.openedInCanvas,
+      completedAt: result.completedAt,
       // `id` is the canvas node id alias used by every other add-style
       // response. It is only present when a canvas node was actually
       // created (i.e. openInCanvas was not explicitly disabled). When
@@ -2110,29 +2128,44 @@ interface RunAndEmitOpenMcpAppParams {
   transport: ExternalMcpTransportConfig;
   toolName: string;
   toolArguments?: Record<string, unknown>;
+  nodeId?: string;
   serverName?: string;
   title?: string;
   x?: number;
   y?: number;
   width?: number;
   height?: number;
+  timeoutMs?: number;
 }
 
 async function runAndEmitOpenMcpApp(params: RunAndEmitOpenMcpAppParams): Promise<Response> {
   try {
+    const targetNode = params.nodeId ? canvasState.getNode(params.nodeId) : undefined;
+    if (params.nodeId && !targetNode) {
+      return responseJson({ ok: false, error: `Node "${params.nodeId}" not found.` }, 404);
+    }
+    if (targetNode && (targetNode.type !== 'mcp-app' || targetNode.data.mode !== 'ext-app')) {
+      return responseJson({ ok: false, error: `Node "${params.nodeId}" is not an external app node.` }, 400);
+    }
+
     const opened = await openMcpApp({
       transport: params.transport,
       toolName: params.toolName,
       ...(params.toolArguments ? { toolArguments: params.toolArguments } : {}),
       ...(params.serverName ? { serverName: params.serverName } : {}),
+      ...(typeof params.timeoutMs === 'number' ? { timeoutMs: params.timeoutMs } : {}),
     });
 
     const toolCallId = randomExtAppToolCallId();
-    const nodeIdSeed = toolCallId.startsWith('ext-app-') ? toolCallId : `ext-app-${toolCallId}`;
+    if (params.nodeId) closeNodeAppSession(targetNode);
+    const nodeIdSeed = params.nodeId ?? (toolCallId.startsWith('ext-app-') ? toolCallId : `ext-app-${toolCallId}`);
     const toolResult = isExcalidrawCreateView(opened.serverName, opened.toolName)
       ? ensureExcalidrawCheckpointId(opened.toolResult, nodeIdSeed)
       : opened.toolResult;
-    const nodeTitle = params.title ?? opened.tool.title ?? opened.tool.name;
+    const nodeTitle = params.title
+      ?? (typeof targetNode?.data.title === 'string' ? targetNode.data.title : undefined)
+      ?? opened.tool.title
+      ?? opened.tool.name;
 
     emitPrimaryWorkbenchEvent('ext-app-open', {
       toolCallId,
@@ -2162,7 +2195,7 @@ async function runAndEmitOpenMcpApp(params: RunAndEmitOpenMcpAppParams): Promise
       success: toolResult.isError !== true,
       result: toolResult,
     });
-    const nodeId = findCanvasExtAppNodeId(toolCallId);
+    const nodeId = params.nodeId ?? findCanvasExtAppNodeId(toolCallId);
 
     return responseJson({
       ok: true,
@@ -2201,17 +2234,22 @@ async function handleCanvasOpenMcpApp(req: Request): Promise<Response> {
   const requestedServerName = typeof body.serverName === 'string' && body.serverName.trim().length > 0
     ? body.serverName.trim()
     : undefined;
+  const requestedNodeId = typeof body.nodeId === 'string' && body.nodeId.trim().length > 0
+    ? body.nodeId.trim()
+    : undefined;
 
   return runAndEmitOpenMcpApp({
     transport,
     toolName,
     ...(toolArguments ? { toolArguments } : {}),
+    ...(requestedNodeId ? { nodeId: requestedNodeId } : {}),
     ...(requestedServerName ? { serverName: requestedServerName } : {}),
     ...(requestedTitle ? { title: requestedTitle } : {}),
     ...(typeof body.x === 'number' ? { x: body.x } : {}),
     ...(typeof body.y === 'number' ? { y: body.y } : {}),
     ...(typeof body.width === 'number' ? { width: body.width } : {}),
     ...(typeof body.height === 'number' ? { height: body.height } : {}),
+    ...(typeof body.timeoutMs === 'number' ? { timeoutMs: body.timeoutMs } : {}),
   });
 }
 
@@ -2221,11 +2259,13 @@ async function handleCanvasAddDiagram(req: Request): Promise<Response> {
   try {
     built = buildExcalidrawOpenMcpAppInput({
       elements: body.elements,
+      ...(typeof body.nodeId === 'string' ? { nodeId: body.nodeId } : {}),
       ...(typeof body.title === 'string' ? { title: body.title } : {}),
       ...(typeof body.x === 'number' ? { x: body.x } : {}),
       ...(typeof body.y === 'number' ? { y: body.y } : {}),
       ...(typeof body.width === 'number' ? { width: body.width } : {}),
       ...(typeof body.height === 'number' ? { height: body.height } : {}),
+      ...(typeof body.timeoutMs === 'number' ? { timeoutMs: body.timeoutMs } : {}),
     });
   } catch (error) {
     return responseJson({
@@ -2238,11 +2278,13 @@ async function handleCanvasAddDiagram(req: Request): Promise<Response> {
     toolName: built.toolName,
     toolArguments: built.toolArguments,
     serverName: built.serverName,
+    ...(built.nodeId ? { nodeId: built.nodeId } : {}),
     ...(built.title ? { title: built.title } : {}),
     ...(typeof built.x === 'number' ? { x: built.x } : {}),
     ...(typeof built.y === 'number' ? { y: built.y } : {}),
     ...(typeof built.width === 'number' ? { width: built.width } : {}),
     ...(typeof built.height === 'number' ? { height: built.height } : {}),
+    ...(typeof built.timeoutMs === 'number' ? { timeoutMs: built.timeoutMs } : {}),
   });
 }
 
@@ -3407,52 +3449,56 @@ function syncEventToCanvasState(event: string, payload: PrimaryWorkbenchEventPay
       });
     }
   } else if (event === 'ext-app-update') {
-    const toolCallId = payload.toolCallId as string;
-    if (!toolCallId) return;
-    const payloadNodeId = typeof payload.nodeId === 'string' ? payload.nodeId : '';
-    const id =
-      (payloadNodeId && canvasState.getNode(payloadNodeId) ? payloadNodeId : null) ||
-      findCanvasExtAppNodeId(toolCallId) ||
-      (typeof payload.serverName === 'string' && typeof payload.toolName === 'string'
-        ? findOnlyPendingCanvasExtAppNodeId(payload.serverName, payload.toolName)
-        : null);
-    if (!id) return;
-    const existing = canvasState.getNode(id);
-    if (existing) {
-      canvasState.updateNode(id, { data: { ...existing.data, html: payload.html } });
-    }
+    canvasState.withSuppressedRecording(() => {
+      const toolCallId = payload.toolCallId as string;
+      if (!toolCallId) return;
+      const payloadNodeId = typeof payload.nodeId === 'string' ? payload.nodeId : '';
+      const id =
+        (payloadNodeId && canvasState.getNode(payloadNodeId) ? payloadNodeId : null) ||
+        findCanvasExtAppNodeId(toolCallId) ||
+        (typeof payload.serverName === 'string' && typeof payload.toolName === 'string'
+          ? findOnlyPendingCanvasExtAppNodeId(payload.serverName, payload.toolName)
+          : null);
+      if (!id) return;
+      const existing = canvasState.getNode(id);
+      if (existing) {
+        canvasState.updateNode(id, { data: { ...existing.data, html: payload.html } });
+      }
+    });
   } else if (event === 'ext-app-result') {
-    const toolCallId = payload.toolCallId as string;
-    if (!toolCallId) return;
-    const payloadNodeId = typeof payload.nodeId === 'string' ? payload.nodeId : '';
-    const id =
-      (payloadNodeId && canvasState.getNode(payloadNodeId) ? payloadNodeId : null) ||
-      findCanvasExtAppNodeId(toolCallId) ||
-      (typeof payload.serverName === 'string' && typeof payload.toolName === 'string'
-        ? findOnlyPendingCanvasExtAppNodeId(payload.serverName, payload.toolName)
-        : null);
-    if (!id) return;
-    if (payload.success === false) {
-      closeNodeAppSession(canvasState.getNode(id));
-      canvasState.removeNode(id);
-      return;
-    }
-    const existing = canvasState.getNode(id);
-    if (existing) {
-      canvasState.updateNode(id, {
-        data: {
-          ...existing.data,
-          toolResult: normalizeExtAppToolResult({
-            result: payload.result,
-            success: typeof payload.success === 'boolean' ? payload.success : undefined,
-            error: typeof payload.error === 'string' ? payload.error : undefined,
-            content: typeof payload.content === 'string' ? payload.content : undefined,
-            detailedContent:
-              typeof payload.detailedContent === 'string' ? payload.detailedContent : undefined,
-          }),
-        },
-      });
-    }
+    canvasState.withSuppressedRecording(() => {
+      const toolCallId = payload.toolCallId as string;
+      if (!toolCallId) return;
+      const payloadNodeId = typeof payload.nodeId === 'string' ? payload.nodeId : '';
+      const id =
+        (payloadNodeId && canvasState.getNode(payloadNodeId) ? payloadNodeId : null) ||
+        findCanvasExtAppNodeId(toolCallId) ||
+        (typeof payload.serverName === 'string' && typeof payload.toolName === 'string'
+          ? findOnlyPendingCanvasExtAppNodeId(payload.serverName, payload.toolName)
+          : null);
+      if (!id) return;
+      if (payload.success === false) {
+        closeNodeAppSession(canvasState.getNode(id));
+        canvasState.removeNode(id);
+        return;
+      }
+      const existing = canvasState.getNode(id);
+      if (existing) {
+        canvasState.updateNode(id, {
+          data: {
+            ...existing.data,
+            toolResult: normalizeExtAppToolResult({
+              result: payload.result,
+              success: typeof payload.success === 'boolean' ? payload.success : undefined,
+              error: typeof payload.error === 'string' ? payload.error : undefined,
+              content: typeof payload.content === 'string' ? payload.content : undefined,
+              detailedContent:
+                typeof payload.detailedContent === 'string' ? payload.detailedContent : undefined,
+            }),
+          },
+        });
+      }
+    });
   } else if (event === 'context-cards') {
     syncContextNodeToCanvasState(
       { cards: Array.isArray(payload.cards) ? payload.cards : [] },

package/src/server/web-artifacts/scripts/init-artifact.sh

@@ -116,12 +116,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
@@ -159,8 +160,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/server/web-artifacts.ts

@@ -2,9 +2,11 @@ import { spawn } from 'node:child_process';
 import {
   copyFileSync,
   existsSync,
+  readdirSync,
   mkdirSync,
   readFileSync,
   statSync,
+  unlinkSync,
   writeFileSync,
 } from 'node:fs';
 import { basename, delimiter, dirname, isAbsolute, join, relative, resolve } from 'node:path';
@@ -71,6 +73,7 @@ export interface WebArtifactCanvasBuildResult extends WebArtifactBuildOutput {
   openedInCanvas: boolean;
   nodeId?: string;
   url?: string;
+  completedAt: string;
 }
 
 function currentWorkspaceRoot(): string {
@@ -300,6 +303,14 @@ function writeProjectFiles(
   }
 }
 
+function removeLiteralSedBackupFiles(projectPath: string): void {
+  for (const entry of readdirSync(projectPath, { withFileTypes: true })) {
+    if (entry.isFile() && entry.name.endsWith("''")) {
+      unlinkSync(join(projectPath, entry.name));
+    }
+  }
+}
+
 function ensurePackageManagerBoundary(dirPath: string): void {
   const packageJsonPath = join(dirPath, 'package.json');
   mkdirSync(dirPath, { recursive: true });
@@ -401,6 +412,7 @@ export async function executeWebArtifactBuild(
     });
     stdout = [stdout, initResult.stdout].filter(Boolean).join('\n');
     stderr = [stderr, initResult.stderr].filter(Boolean).join('\n');
+    removeLiteralSedBackupFiles(projectPath);
   }
 
   writeProjectFiles(projectPath, input);
@@ -508,7 +520,7 @@ export async function buildWebArtifactOnCanvas(input: WebArtifactBuildInput & {
 }): Promise<WebArtifactCanvasBuildResult> {
   const build = await executeWebArtifactBuild(input);
   if (input.openInCanvas === false) {
-    return { ...build, openedInCanvas: false };
+    return { ...build, openedInCanvas: false, completedAt: new Date().toISOString() };
   }
   const opened = openWebArtifactInCanvas({
     title: input.title,
@@ -519,5 +531,6 @@ export async function buildWebArtifactOnCanvas(input: WebArtifactBuildInput & {
     openedInCanvas: true,
     nodeId: opened.nodeId,
     url: opened.url,
+    completedAt: new Date().toISOString(),
   };
 }