pmx-canvas 0.1.13 → 0.1.14

package/src/server/index.ts

@@ -33,6 +33,8 @@ import {
   ungroupCanvasNodes,
   validateCanvasNodePatch,
   hasStructuredNodeUpdateFields,
+  hasTraceNodeDataFields,
+  mergeTraceNodeDataFields,
 } from './canvas-operations.js';
 import { validateCanvasLayout } from './canvas-validation.js';
 import { describeCanvasSchema, validateStructuredCanvasPayload } from './canvas-schema.js';
@@ -158,6 +160,12 @@ export class PmxCanvas extends EventEmitter {
     type: CanvasNodeState['type'];
     title?: string;
     content?: string;
+    toolName?: string;
+    category?: string;
+    status?: string;
+    duration?: string;
+    resultSummary?: string;
+    error?: string;
     x?: number;
     y?: number;
     width?: number;
@@ -243,9 +251,10 @@ export class PmxCanvas extends EventEmitter {
       patch.title !== undefined ||
       patch.content !== undefined ||
       typeof patch.arrangeLocked === 'boolean' ||
-      typeof patch.strictSize === 'boolean'
+      typeof patch.strictSize === 'boolean' ||
+      (existing.type === 'trace' && hasTraceNodeDataFields(patch))
     ) {
-      resolvedPatch.data = {
+      const nextData = {
         ...existing.data,
         ...(patch.data && typeof patch.data === 'object' && !Array.isArray(patch.data) ? patch.data : {}),
         ...(typeof patch.title === 'string' ? { title: patch.title } : {}),
@@ -253,6 +262,9 @@ export class PmxCanvas extends EventEmitter {
         ...(typeof patch.arrangeLocked === 'boolean' ? { arrangeLocked: patch.arrangeLocked } : {}),
         ...(typeof patch.strictSize === 'boolean' ? { strictSize: patch.strictSize } : {}),
       };
+      resolvedPatch.data = existing.type === 'trace'
+        ? mergeTraceNodeDataFields(nextData, patch)
+        : nextData;
     }
 
     const error = validateCanvasNodePatch({
@@ -520,21 +532,36 @@ export class PmxCanvas extends EventEmitter {
     transport: ExternalMcpTransportConfig;
     toolName: string;
     toolArguments?: Record<string, unknown>;
+    nodeId?: string;
     serverName?: string;
     title?: string;
     x?: number;
     y?: number;
     width?: number;
     height?: number;
+    timeoutMs?: number;
   }): Promise<{ ok: true; id?: string; nodeId: string | null; toolCallId: string; sessionId: string; resourceUri: string }> {
+    const targetNode = input.nodeId ? canvasState.getNode(input.nodeId) : undefined;
+    if (input.nodeId && !targetNode) {
+      throw new Error(`Node "${input.nodeId}" not found.`);
+    }
+    if (targetNode && (targetNode.type !== 'mcp-app' || targetNode.data.mode !== 'ext-app')) {
+      throw new Error(`Node "${input.nodeId}" is not an external app node.`);
+    }
+
     const opened = await openExternalMcpApp({
       transport: input.transport,
       toolName: input.toolName,
       ...(input.toolArguments ? { toolArguments: input.toolArguments } : {}),
       ...(input.serverName ? { serverName: input.serverName } : {}),
+      ...(typeof input.timeoutMs === 'number' ? { timeoutMs: input.timeoutMs } : {}),
     });
     const toolCallId = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
-    const nodeIdSeed = `ext-app-${toolCallId}`;
+    const previousSessionId = targetNode?.data.appSessionId;
+    if (typeof previousSessionId === 'string' && previousSessionId.trim().length > 0) {
+      closeMcpAppSession(previousSessionId);
+    }
+    const nodeIdSeed = input.nodeId ?? `ext-app-${toolCallId}`;
     const toolResult = isExcalidrawCreateView(opened.serverName, opened.toolName)
       ? ensureExcalidrawCheckpointId(opened.toolResult, nodeIdSeed)
       : opened.toolResult;
@@ -566,7 +593,7 @@ export class PmxCanvas extends EventEmitter {
       success: toolResult.isError !== true,
       result: toolResult,
     });
-    const nodeId = this.findCanvasExtAppNodeId(toolCallId);
+    const nodeId = input.nodeId ?? this.findCanvasExtAppNodeId(toolCallId);
     return {
       ok: true,
       ...(nodeId ? { id: nodeId } : {}),

package/src/server/mcp-app-runtime.ts

@@ -12,6 +12,7 @@ import type {
   TextResourceContents,
   Tool,
 } from '@modelcontextprotocol/sdk/types.js';
+import type { RequestOptions } from '@modelcontextprotocol/sdk/shared/protocol.js';
 import {
   EXTENSION_ID,
   RESOURCE_MIME_TYPE,
@@ -47,6 +48,7 @@ export interface OpenMcpAppInput {
   toolName: string;
   toolArguments?: Record<string, unknown>;
   serverName?: string;
+  timeoutMs?: number;
 }
 
 export interface OpenMcpAppResult {
@@ -184,6 +186,12 @@ function normalizeServerName(raw: string | undefined, transport: ExternalMcpTran
   return trimmed.length > 0 ? trimmed : defaultServerName(transport);
 }
 
+function requestOptions(timeoutMs: number | undefined): RequestOptions | undefined {
+  return typeof timeoutMs === 'number' && Number.isFinite(timeoutMs) && timeoutMs > 0
+    ? { timeout: timeoutMs }
+    : undefined;
+}
+
 function buildTransport(config: ExternalMcpTransportConfig): RuntimeTransport {
   if (config.type === 'http') {
     return new StreamableHTTPClientTransport(new URL(config.url), {
@@ -209,15 +217,16 @@ function buildTransport(config: ExternalMcpTransportConfig): RuntimeTransport {
 async function createSession(
   transportConfig: ExternalMcpTransportConfig,
   serverName?: string,
+  timeoutMs?: number,
 ): Promise<McpAppSession> {
   const transport = buildTransport(transportConfig);
   const client = new Client(
     { name: 'pmx-canvas-app-host', version: '0.1.0' },
     { capabilities: clientCapabilities },
   );
-  await client.connect(transport);
+  await client.connect(transport, requestOptions(timeoutMs));
 
-  const toolList = await client.listTools();
+  const toolList = await client.listTools(undefined, requestOptions(timeoutMs));
   const session: McpAppSession = {
     id: randomId('mcp-app-session'),
     serverName: normalizeServerName(serverName, transportConfig),
@@ -350,7 +359,8 @@ function prepareResourceHtml(html: string, meta: McpUiResourceMeta | undefined):
 }
 
 export async function openMcpApp(input: OpenMcpAppInput): Promise<OpenMcpAppResult> {
-  const session = await createSession(input.transport, input.serverName);
+  const options = requestOptions(input.timeoutMs);
+  const session = await createSession(input.transport, input.serverName, input.timeoutMs);
   try {
     const tool = await findTool(session, input.toolName);
     const resourceUri = getToolUiResourceUri(tool);
@@ -362,9 +372,9 @@ export async function openMcpApp(input: OpenMcpAppInput): Promise<OpenMcpAppResu
     const rawToolResult = await session.client.callTool({
       name: tool.name,
       arguments: toolInput,
-    });
+    }, undefined, options);
     const toolResult = normalizeExtAppToolResult({ result: rawToolResult });
-    const readResult = await session.client.readResource({ uri: resourceUri });
+    const readResult = await session.client.readResource({ uri: resourceUri }, options);
     const resourceMeta = resourceMetaFromReadResult(readResult);
     const html = prepareResourceHtml(htmlContentFromReadResult(readResult, resourceUri), resourceMeta);
 

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 } } : {}),
@@ -2111,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,
@@ -2163,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,
@@ -2202,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 } : {}),
   });
 }
 
@@ -2222,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({
@@ -2239,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 } : {}),
   });
 }
 
@@ -3408,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 : [] },