pmx-canvas 0.1.12 → 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

@@ -83,5 +83,6 @@ export interface CanvasAccess {
     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/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.12",
+  "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 });
 }

package/src/mcp/canvas-access.ts

@@ -135,7 +135,11 @@ export interface CanvasAccess {
 class LocalCanvasAccess implements CanvasAccess {
   readonly remoteBaseUrl = null;
 
-  constructor(private readonly canvas: PmxCanvas) {}
+  constructor(
+    private readonly canvas: PmxCanvas,
+    readonly workspaceRoot: string,
+    readonly targetPort: number,
+  ) {}
 
   get port(): number {
     return this.canvas.port;
@@ -335,6 +339,9 @@ class RemoteCanvasAccess implements CanvasAccess {
       const error = parsed && typeof parsed === 'object' && 'error' in parsed
         ? String((parsed as { error?: unknown }).error)
         : `HTTP ${response.status}`;
+      if (path === '/api/canvas/batch' && parsed !== null && typeof parsed === 'object' && !Array.isArray(parsed)) {
+        return parsed as T;
+      }
       throw new Error(error);
     }
     return parsed as T;
@@ -617,6 +624,10 @@ function candidateBaseUrls(port: number): string[] {
   return urls;
 }
 
+function localBaseUrls(port: number): string[] {
+  return [`http://127.0.0.1:${port}`, `http://localhost:${port}`];
+}
+
 async function readHealth(baseUrl: string): Promise<HealthResponse | null> {
   try {
     const response = await fetch(`${baseUrl}/health`, { signal: AbortSignal.timeout(400) });
@@ -627,9 +638,15 @@ async function readHealth(baseUrl: string): Promise<HealthResponse | null> {
   }
 }
 
-async function findExistingCanvasServer(workspaceRoot: string, port: number): Promise<string | null> {
+async function findExistingCanvasServer(
+  workspaceRoot: string,
+  port: number,
+  options: { excludeBaseUrls?: string[] } = {},
+): Promise<string | null> {
   const canonicalWorkspaceRoot = canonicalWorkspacePath(workspaceRoot);
+  const excluded = new Set((options.excludeBaseUrls ?? []).map((baseUrl) => baseUrl.replace(/\/$/, '')));
   for (const baseUrl of candidateBaseUrls(port)) {
+    if (excluded.has(baseUrl)) continue;
     const health = await readHealth(baseUrl);
     if (health?.ok !== true) continue;
     const healthWorkspace = typeof health.workspace === 'string' ? canonicalWorkspacePath(health.workspace) : '';
@@ -639,6 +656,14 @@ async function findExistingCanvasServer(workspaceRoot: string, port: number): Pr
   return null;
 }
 
+export async function refreshCanvasAccess(access: CanvasAccess): Promise<CanvasAccess> {
+  if (!(access instanceof LocalCanvasAccess)) return access;
+  const remoteBaseUrl = await findExistingCanvasServer(access.workspaceRoot, access.targetPort, {
+    excludeBaseUrls: localBaseUrls(access.port),
+  });
+  return remoteBaseUrl ? new RemoteCanvasAccess(remoteBaseUrl) : access;
+}
+
 export async function createCanvasAccess(): Promise<CanvasAccess> {
   const workspaceRoot = resolve(process.cwd());
   const port = targetPort();
@@ -647,5 +672,5 @@ export async function createCanvasAccess(): Promise<CanvasAccess> {
 
   const canvas = createCanvas({ port });
   await canvas.start({ open: true });
-  return new LocalCanvasAccess(canvas);
+  return new LocalCanvasAccess(canvas, workspaceRoot, port);
 }

package/src/mcp/server.ts

@@ -25,7 +25,7 @@ import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
 import { isAbsolute, relative, resolve } from 'node:path';
 import { z } from 'zod';
 import { canvasState, describeCanvasSchema, validateStructuredCanvasPayload } from '../server/index.js';
-import { createCanvasAccess, type CanvasAccess } from './canvas-access.js';
+import { createCanvasAccess, refreshCanvasAccess, type CanvasAccess } from './canvas-access.js';
 import { serializeNodeForAgentContext } from '../server/agent-context.js';
 import { wrapCanvasAutomationScript } from '../server/server.js';
 import { buildSpatialContext, findNeighborhoods } from '../server/spatial-analysis.js';
@@ -34,7 +34,8 @@ import { listBundledSkills, readBundledSkill } from '../server/bundled-skills.js
 
 let canvas: CanvasAccess | null = null;
 let resourceNotificationServer: McpServer | null = null;
-let resourceNotificationsStarted = false;
+let localResourceNotificationsStarted = false;
+let remoteResourceNotificationsBaseUrl: string | null = null;
 
 const jsonRenderSpecSchema = z.union([
   z.object({
@@ -78,6 +79,8 @@ function safeWorkspacePath(pathLike: string): string {
 async function ensureCanvas(): Promise<CanvasAccess> {
   if (!canvas) {
     canvas = await createCanvasAccess();
+  } else {
+    canvas = await refreshCanvasAccess(canvas);
   }
   startResourceNotifications(canvas);
   return canvas;
@@ -139,16 +142,20 @@ async function watchRemoteCanvasEvents(baseUrl: string): Promise<void> {
 }
 
 function startResourceNotifications(c: CanvasAccess): void {
-  if (resourceNotificationsStarted) return;
   const server = resourceNotificationServer;
   if (!server) return;
-  resourceNotificationsStarted = true;
 
   if (c.remoteBaseUrl) {
-    void watchRemoteCanvasEvents(c.remoteBaseUrl);
+    if (remoteResourceNotificationsBaseUrl !== c.remoteBaseUrl) {
+      remoteResourceNotificationsBaseUrl = c.remoteBaseUrl;
+      void watchRemoteCanvasEvents(c.remoteBaseUrl);
+    }
     return;
   }
 
+  if (localResourceNotificationsStarted) return;
+  localResourceNotificationsStarted = true;
+
   canvasState.onChange((type) => {
     sendCanvasResourceNotifications(type);
   });
@@ -184,6 +191,19 @@ function buildSummaryFromLayout(layout: Awaited<ReturnType<CanvasAccess['getLayo
   };
 }
 
+function buildSnapshotRestoreSummary(layout: Awaited<ReturnType<CanvasAccess['getLayout']>>): Record<string, unknown> {
+  const nodesByType: Record<string, number> = {};
+  for (const node of layout.nodes) {
+    nodesByType[node.type] = (nodesByType[node.type] ?? 0) + 1;
+  }
+  return {
+    nodeCount: layout.nodes.length,
+    edgeCount: layout.edges.length,
+    nodesByType,
+    viewport: layout.viewport,
+  };
+}
+
 export async function startMcpServer(): Promise<void> {
   const server = new McpServer({
     name: 'pmx-canvas',
@@ -463,7 +483,7 @@ export async function startMcpServer(): Promise<void> {
   // ── canvas_build_web_artifact ───────────────────────────────
   server.tool(
     'canvas_build_web_artifact',
-    'Build a bundled single-file HTML web artifact from React/Tailwind source files using the bundled web-artifacts-builder skill scripts. MCP callers pass source content in appTsx (the CLI app-file flag reads a file before calling this path). Builds commonly take 45-60s on cold workspaces; use a long client timeout. Optionally opens the generated artifact as an embedded node on the canvas. Read canvas://skills/web-artifacts-builder for the full workflow, stack, and anti-slop design guidelines before calling.',
+    'Build a bundled single-file HTML web artifact from React/Tailwind source files using the bundled web-artifacts-builder skill scripts. MCP callers pass source content in appTsx (the CLI app-file flag reads a file before calling this path). Builds can exceed default 60s MCP client timeouts on cold workspaces; set a long client timeout or retry with the same projectPath/outputPath if the client times out. Optionally opens the generated artifact as an embedded node on the canvas. Read canvas://skills/web-artifacts-builder for the full workflow, stack, and anti-slop design guidelines before calling.',
     {
       title: z.string().describe('Artifact title used for default project and output paths'),
       appTsx: z.string().describe('Contents for src/App.tsx'),
@@ -514,6 +534,7 @@ export async function startMcpServer(): Promise<void> {
               bytes: result.fileSize,
               projectPath: result.projectPath,
               openedInCanvas: result.openedInCanvas,
+              completedAt: result.completedAt,
               // `id` only present when a canvas node was actually created.
               // See the matching block in src/server/server.ts handleCanvasBuildWebArtifact.
               ...(typeof result.nodeId === 'string' ? { id: result.nodeId } : {}),
@@ -1453,7 +1474,7 @@ export async function startMcpServer(): Promise<void> {
 
   server.tool(
     'canvas_batch',
-    'Run a batch of canvas operations with optional assigned references. Supports node.add, node.update, graph.add, edge.add, group.create, group.add, group.remove, pin.set/add/remove, snapshot.save, and arrange.',
+    'Run a non-atomic batch of canvas operations with optional assigned references. Use assign to name a result, then reference it later as "$name" for the created node id or "$name.id" for a specific result field. On failure, earlier successful operations remain applied and the response includes ok:false, failedIndex, error, results, and refs. Supports node.add, node.update, graph.add, edge.add, group.create, group.add, group.remove, pin.set/add/remove, snapshot.save, and arrange.',
     {
       operations: z.array(z.object({
         op: z.string().describe('Operation name, e.g. "node.add" or "edge.add"'),
@@ -1568,8 +1589,9 @@ export async function startMcpServer(): Promise<void> {
       if (!result.ok) {
         return { content: [{ type: 'text', text: JSON.stringify({ ok: false, error: 'Snapshot not found' }) }] };
       }
+      const layout = await c.getLayout();
       return {
-        content: [{ type: 'text', text: JSON.stringify({ ok: true, layout: serializeCanvasLayout(await c.getLayout()) }) }],
+        content: [{ type: 'text', text: JSON.stringify({ ok: true, restored: input.id, summary: buildSnapshotRestoreSummary(layout) }, null, 2) }],
       };
     },
   );

package/src/server/canvas-operations.ts

@@ -1373,6 +1373,7 @@ function resolveBatchRefs(value: unknown, refs: Record<string, unknown>): unknow
   if (typeof value === 'string' && value.startsWith('$')) {
     const path = value.slice(1).split('.');
     let current: unknown = refs[path[0] ?? ''];
+    if (path.length === 1 && isPlainRecord(current) && typeof current.id === 'string') return current.id;
     for (const segment of path.slice(1)) {
       if (!isPlainRecord(current) && !Array.isArray(current)) return undefined;
       current = (current as Record<string, unknown>)[segment];

package/src/server/canvas-schema.ts

@@ -140,11 +140,18 @@ const CANVAS_CREATE_TYPES: CanvasCreateTypeSchema[] = [
     fields: [
       { name: 'title', type: 'string', required: false, description: 'Optional title.' },
       { name: 'content', type: 'string', required: false, description: 'Trace summary.' },
+      { name: 'toolName', type: 'string', required: false, description: 'Tool or operation label shown in the trace pill; defaults to title.' },
+      { name: 'category', type: 'string', required: false, description: 'Trace category color key: mcp, file, subagent, or other.' },
+      { name: 'status', type: 'string', required: false, description: 'Trace status: running, success, or failed.' },
+      { name: 'duration', type: 'string', required: false, description: 'Optional duration badge text.' },
+      { name: 'resultSummary', type: 'string', required: false, description: 'Short trace result summary; defaults to content.' },
+      { name: 'error', type: 'string', required: false, description: 'Short error message shown in failed traces.' },
     ],
     example: {
       type: 'trace',
       title: 'Execution Trace',
       content: 'Canvas actions and tool events.',
+      status: 'success',
     },
   },
   {
@@ -378,12 +385,16 @@ const CANVAS_CREATE_TYPES: CanvasCreateTypeSchema[] = [
       { name: 'openInCanvas', type: 'boolean', required: false, description: 'Open the built artifact on the canvas (default true).' },
       { name: 'includeLogs', type: 'boolean', required: false, description: 'Include raw build stdout/stderr in the response (default false).' },
       { name: 'deps', type: 'string[]', required: false, description: 'Optional npm dependencies to add before bundling, e.g. recharts.', aliases: ['deps'] },
+      { name: 'timeoutMs', type: 'number', required: false, description: 'Build command timeout in milliseconds. This controls subprocess timeout, not the MCP client request timeout.' },
     ],
     example: {
       title: 'Dashboard Artifact',
       appTsx: 'export default function App() { return <main>Artifact</main>; }',
       indexCss: 'body { background: #123456; color: white; }',
     },
+    notes: [
+      'Cold builds can exceed default 60s MCP client timeouts; configure a longer MCP call timeout or retry with the same projectPath/outputPath if the first call times out.',
+    ],
   },
 ];
 

package/src/server/diagram-presets.ts

@@ -135,8 +135,6 @@ function normalizeExcalidrawBoundText(elements: Array<Record<string, unknown>>):
 
   let changed = false;
   const boundElementIdsByContainer = new Map<string, Set<string>>();
-  const labelByContainer = new Map<string, Record<string, unknown>>();
-  const textIdsConvertedToLabels = new Set<string>();
 
   for (const element of elements) {
     if (element.type !== 'text' || typeof element.id !== 'string' || typeof element.containerId !== 'string') continue;
@@ -145,48 +143,28 @@ function normalizeExcalidrawBoundText(elements: Array<Record<string, unknown>>):
     const ids = boundElementIdsByContainer.get(element.containerId) ?? new Set<string>();
     ids.add(element.id);
     boundElementIdsByContainer.set(element.containerId, ids);
-    const text = typeof element.text === 'string' ? element.text.trim() : '';
-    if (!isRecord(container.label) && text.length > 0) {
-      labelByContainer.set(element.containerId, {
-        text,
-        ...(typeof element.fontSize === 'number' && Number.isFinite(element.fontSize) ? { fontSize: element.fontSize } : {}),
-      });
-      textIdsConvertedToLabels.add(element.id);
-    }
   }
 
-  const normalized = elements.flatMap<Record<string, unknown>>((element) => {
-    if (typeof element.id === 'string' && textIdsConvertedToLabels.has(element.id)) {
-      changed = true;
-      return [];
-    }
+  const normalized = elements.map((element) => {
     if (typeof element.id !== 'string') return element;
     const boundTextIds = boundElementIdsByContainer.get(element.id);
-    const label = labelByContainer.get(element.id);
-    if ((!boundTextIds || boundTextIds.size === 0) && !label) return element;
+    if (!boundTextIds || boundTextIds.size === 0) return element;
 
     const existing = Array.isArray(element.boundElements)
       ? element.boundElements.filter(isRecord)
       : [];
-    const remainingExisting = existing.filter((boundElement) => {
-      return !(boundElement.type === 'text' && typeof boundElement.id === 'string' && textIdsConvertedToLabels.has(boundElement.id));
-    });
     const existingTextIds = new Set(
-      remainingExisting
+      existing
         .filter((boundElement) => boundElement.type === 'text' && typeof boundElement.id === 'string')
         .map((boundElement) => boundElement.id as string),
     );
-    const missing = [...(boundTextIds ?? [])]
-      .filter((id) => !textIdsConvertedToLabels.has(id) && !existingTextIds.has(id));
-    if (missing.length === 0 && !label && remainingExisting.length === existing.length) return element;
+    const missing = [...boundTextIds].filter((id) => !existingTextIds.has(id));
+    if (missing.length === 0) return element;
 
     changed = true;
     return {
       ...element,
-      ...(label ? { label } : {}),
-      ...(remainingExisting.length > 0 || missing.length > 0
-        ? { boundElements: [...remainingExisting, ...missing.map((id) => ({ type: 'text', id }))] }
-        : {}),
+      boundElements: [...existing, ...missing.map((id) => ({ type: 'text', id }))],
     };
   });
 

package/src/server/server.ts

@@ -1639,6 +1639,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

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(),
   };
 }