pmx-canvas 0.1.12 → 0.1.14

package/dist/types/client/nodes/ExtAppFrame.d.ts

@@ -1,7 +1,6 @@
 import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
 import { AppBridge } from '@modelcontextprotocol/ext-apps/app-bridge';
 import type { CanvasNodeState } from '../types';
-type IframeLoadTarget = Pick<HTMLIFrameElement, 'addEventListener' | 'removeEventListener' | 'contentDocument'>;
 type ExtAppBridgeNotifications = Pick<AppBridge, 'sendToolInput' | 'sendToolResult'>;
 type DisplayMode = 'inline' | 'fullscreen' | 'pip';
 interface ExtAppHostDimensionsTarget {
@@ -9,7 +8,6 @@ interface ExtAppHostDimensionsTarget {
     clientHeight?: number;
     getBoundingClientRect(): Pick<DOMRectReadOnly, 'width' | 'height'>;
 }
-export declare function waitForExtAppFrameLoad(target: IframeLoadTarget): Promise<void>;
 export declare function getExtAppBridgeInitKey(node: CanvasNodeState, retryKey: number): string;
 export declare function resolveExtAppDisplayModeRequest(requestedMode: DisplayMode, isExpanded: boolean): {
     nextMode: DisplayMode;
@@ -26,7 +24,8 @@ export declare function resolveExtAppContainerDimensions(target: ExtAppHostDimen
     height: number;
 };
 export declare function shouldApplyExtAppSizeChange(height: unknown, isExpanded: boolean): height is number;
-export declare function ExtAppFrame({ node }: {
+export declare function ExtAppFrame({ node, expanded }: {
     node: CanvasNodeState;
+    expanded?: boolean;
 }): import("preact/jsx-runtime").JSX.Element;
 export {};

package/dist/types/client/nodes/McpAppNode.d.ts

@@ -1,4 +1,5 @@
 import type { CanvasNodeState } from '../types';
-export declare function McpAppNode({ node }: {
+export declare function McpAppNode({ node, expanded }: {
     node: CanvasNodeState;
+    expanded?: boolean;
 }): import("preact/src").JSX.Element;

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/canvas-operations.d.ts

@@ -40,6 +40,12 @@ interface CanvasAddNodeInput {
     title?: string;
     content?: string;
     data?: Record<string, unknown>;
+    toolName?: string;
+    category?: string;
+    status?: string;
+    duration?: string;
+    resultSummary?: string;
+    error?: string;
     x?: number;
     y?: number;
     width?: number;
@@ -106,6 +112,8 @@ export declare function validateCanvasNodePatch(patch: {
         height: number;
     };
 }): string | null;
+export declare function mergeTraceNodeDataFields(base: Record<string, unknown>, input: Record<string, unknown>): Record<string, unknown>;
+export declare function hasTraceNodeDataFields(input: Record<string, unknown>): boolean;
 export declare function scheduleCodeGraphRecompute(onComplete?: () => void): void;
 export declare function addCanvasNode(input: CanvasAddNodeInput): {
     id: string;

package/dist/types/server/diagram-presets.d.ts

@@ -9,11 +9,13 @@ export declare const DEFAULT_EXCALIDRAW_ELEMENTS: ReadonlyArray<Record<string, u
 export declare const EXCALIDRAW_MCP_TRANSPORT: ExternalMcpTransportConfig;
 export interface DiagramPresetOpenInput {
     elements: unknown;
+    nodeId?: string;
     title?: string;
     x?: number;
     y?: number;
     width?: number;
     height?: number;
+    timeoutMs?: number;
 }
 export interface ExcalidrawOpenMcpAppInput {
     transport: ExternalMcpTransportConfig;
@@ -22,11 +24,13 @@ export interface ExcalidrawOpenMcpAppInput {
     toolArguments: {
         elements: string;
     };
+    nodeId?: string;
     title?: string;
     x?: number;
     y?: number;
     width?: number;
     height?: number;
+    timeoutMs?: number;
 }
 export declare function inferExcalidrawCameraUpdate(elements: Array<Record<string, unknown>>): Record<string, unknown> | null;
 export declare function normalizeExcalidrawElements(elements: unknown): string;

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

@@ -23,6 +23,12 @@ export declare 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;
@@ -198,12 +204,14 @@ export declare 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;

package/dist/types/server/mcp-app-runtime.d.ts

@@ -18,6 +18,7 @@ export interface OpenMcpAppInput {
     toolName: string;
     toolArguments?: Record<string, unknown>;
     serverName?: string;
+    timeoutMs?: number;
 }
 export interface OpenMcpAppResult {
     sessionId: string;

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.14",
   "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/cli/agent.ts

@@ -26,6 +26,7 @@ import {
 
 const DEFAULT_PORT = 4313;
 const defaultConsoleLog = console.log;
+const TRACE_NODE_FIELDS = ['toolName', 'category', 'status', 'duration', 'resultSummary', 'error'] as const;
 
 interface CanvasSchemaField {
   name: string;
@@ -1078,6 +1079,12 @@ cmd('node add', 'Add a node to the canvas', [
     height: 'Use a positive number, e.g. --height 280',
   });
   applyStrictSizeFlags(body, flags);
+  if (type === 'trace') {
+    for (const field of TRACE_NODE_FIELDS) {
+      const value = getStringFlag(flags, field);
+      if (value !== undefined) body[field] = value;
+    }
+  }
 
   // Support --stdin for piping content
   if (flags.stdin) {
@@ -1565,7 +1572,9 @@ cmd('external-app add', 'Create a hosted external app node', [
     title: typeof flags.title === 'string' ? flags.title : 'Excalidraw Diagram',
     elements: DEFAULT_EXCALIDRAW_ELEMENTS,
   };
-  const elementsJson = getStringFlag(flags, 'elements-json');
+  const nodeId = getStringFlag(flags, 'node-id', 'nodeId', 'id');
+  if (nodeId) body.nodeId = nodeId;
+  const elementsJson = getStringFlag(flags, 'elements-json', 'elements');
   if (elementsJson !== undefined) body.elements = parseJsonValue(elementsJson, 'Excalidraw elements', 'Use --elements-json \'[{"type":"rectangle","id":"r1","x":0,"y":0,"width":120,"height":80}]\'');
   const elementsFile = getStringFlag(flags, 'elements-file', 'initial-file');
   if (elementsFile) body.elements = parseJsonValue(readFileSync(elementsFile, 'utf-8'), 'Excalidraw elements file', 'Use --elements-file ./scene.excalidraw');
@@ -1575,6 +1584,8 @@ cmd('external-app add', 'Create a hosted external app node', [
     width: 'Use a positive number, e.g. --width 960',
     height: 'Use a positive number, e.g. --height 720',
   });
+  const timeoutMs = optionalPositiveFiniteFlag(flags, 'timeout-ms', 'Use a positive number, e.g. --timeout-ms 120000');
+  if (timeoutMs !== undefined) body.timeoutMs = timeoutMs;
 
   const result = await api('POST', '/api/canvas/diagram', body);
   output(result && typeof result === 'object' && !Array.isArray(result) && 'nodeId' in result && !('id' in result)
@@ -2303,9 +2314,12 @@ function showCommandHelp(name: string): void {
     console.log('\nOptions:');
     console.log('  --kind excalidraw          External app kind to create');
     console.log('  --title <title>            Node title');
+    console.log('  --node-id <id>             Existing Excalidraw app node to update in place');
+    console.log('  --elements <json>          Optional Excalidraw elements array JSON');
     console.log('  --elements-json <json>     Optional Excalidraw elements array JSON');
     console.log('  --elements-file <path>     Optional file containing Excalidraw elements JSON');
     console.log('  --initial-file <path>      Alias for --elements-file');
+    console.log('  --timeout-ms <number>      Optional downstream MCP timeout for cold starts');
   }
   console.log('');
 }

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -26,13 +26,13 @@ function renderContent(node: CanvasNodeState, expanded: boolean) {
     case 'markdown':
       return <MarkdownNode node={node} expanded={expanded} />;
     case 'mcp-app':
-      return <McpAppNode node={node} />;
+      return <McpAppNode node={node} expanded={expanded} />;
     case 'webpage':
       return <WebpageNode node={node} expanded={expanded} />;
     case 'json-render':
-      return <McpAppNode node={node} />;
+      return <McpAppNode node={node} expanded={expanded} />;
     case 'graph':
-      return <McpAppNode node={node} />;
+      return <McpAppNode node={node} expanded={expanded} />;
     case 'prompt':
       return <PromptNode node={node} />;
     case 'response':

package/src/client/nodes/ExtAppFrame.tsx

@@ -13,11 +13,6 @@ import type { CanvasNodeState } from '../types';
 
 type McpUiTheme = 'light' | 'dark';
 
-type IframeLoadTarget = Pick<
-  HTMLIFrameElement,
-  'addEventListener' | 'removeEventListener' | 'contentDocument'
->;
-
 type ExtAppBridgeNotifications = Pick<AppBridge, 'sendToolInput' | 'sendToolResult'>;
 type DisplayMode = 'inline' | 'fullscreen' | 'pip';
 const DEFAULT_EXT_APP_SANDBOX = 'allow-scripts allow-popups allow-popups-to-escape-sandbox';
@@ -43,21 +38,6 @@ async function postJson<T>(url: string, body: Record<string, unknown>): Promise<
   return json.result as T;
 }
 
-export function waitForExtAppFrameLoad(target: IframeLoadTarget): Promise<void> {
-  const readyState = target.contentDocument?.readyState;
-  if (readyState === 'interactive' || readyState === 'complete') {
-    return Promise.resolve();
-  }
-
-  return new Promise<void>((resolve) => {
-    const onLoad = () => {
-      target.removeEventListener('load', onLoad);
-      resolve();
-    };
-    target.addEventListener('load', onLoad, { once: true });
-  });
-}
-
 export function getExtAppBridgeInitKey(node: CanvasNodeState, retryKey: number): string {
   const html = typeof node.data.html === 'string' ? node.data.html : '';
   const serverName = typeof node.data.serverName === 'string' ? node.data.serverName : '';
@@ -131,7 +111,7 @@ export function shouldApplyExtAppSizeChange(height: unknown, isExpanded: boolean
   return typeof height === 'number' && Number.isFinite(height) && height > 0 && !isExpanded;
 }
 
-export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
+export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const bridgeRef = useRef<AppBridge | null>(null);
   const transportRef = useRef<PostMessageTransport | null>(null);
@@ -164,10 +144,9 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
   const sessionError = node.data.sessionError as string | undefined;
   const maxHeight = node.size.height;
   const nodeId = node.id;
-  const frameKey = `${node.id}:${retryKey}`;
-  const bridgeInitKey = getExtAppBridgeInitKey(node, retryKey);
+  const frameKey = getExtAppBridgeInitKey(node, retryKey);
   const toMcpTheme = (theme: string): McpUiTheme => (theme === 'light' ? 'light' : 'dark');
-  const isExpanded = expandedNodeId.value === nodeId;
+  const isExpanded = expanded || expandedNodeId.value === nodeId;
 
   latestToolInputRef.current = toolInput;
   latestToolResultRef.current = toolResult;
@@ -221,9 +200,9 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
     return sendPromise;
   };
 
-  // Initialize bridge when iframe loads and HTML is available
+  // Initialize as soon as HTML is mounted; some apps send initialize before iframe load fires.
   useEffect(() => {
-    if (!html) return; // Wait for HTML to arrive
+    if (!html) return;
     const iframe = iframeRef.current;
     if (!iframe) return;
     let disposed = false;
@@ -242,12 +221,8 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
     };
 
     const init = async () => {
-      let contentWindow = iframe.contentWindow;
-      if (!contentWindow) {
-        await waitForExtAppFrameLoad(iframe);
-        if (disposed) return;
-        contentWindow = iframe.contentWindow;
-      }
+      if (!html) return;
+      const contentWindow = iframe.contentWindow;
       if (!contentWindow) {
         throw new Error('Ext-app iframe window is unavailable');
       }
@@ -397,8 +372,8 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
         bridgeReadyRef.current = true;
         setStatus('ready');
         setError(null);
-        scheduleHostContextUpdate();
-        void sendExtAppBootstrapState(bridge, latestToolInputRef.current, undefined)
+        void Promise.resolve(bridge.sendHostContextChange(buildHostContext(isExpanded ? 'fullscreen' : 'inline')))
+          .then(() => sendExtAppBootstrapState(bridge, latestToolInputRef.current, undefined))
           .then(() => flushToolResult(bridge))
           .catch((err) => {
             const msg = err instanceof Error ? err.message : String(err);
@@ -481,7 +456,7 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
         transportRef.current = null;
       }
     };
-  }, [bridgeInitKey]);
+  }, [frameKey]);
 
   // Forward tool result when it arrives after bridge is ready
   useEffect(() => {

package/src/client/nodes/McpAppNode.tsx

@@ -13,9 +13,9 @@ function withTheme(url: string): string {
   }
 }
 
-export function McpAppNode({ node }: { node: CanvasNodeState }) {
+export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   if (node.data.mode === 'ext-app') {
-    return <ExtAppFrame node={node} />;
+    return <ExtAppFrame node={node} expanded={expanded} />;
   }
 
   const url = withTheme((node.data.url as string) || '');

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

@@ -529,6 +529,7 @@ function handleExtAppOpen(data: Record<string, unknown>): void {
   if (typeof data.toolCallId !== 'string' || !data.toolCallId) return;
   ensureExtAppNode({
     toolCallId: data.toolCallId,
+    ...(typeof data.nodeId === 'string' && data.nodeId.length > 0 ? { nodeId: data.nodeId } : {}),
     title: data.title,
     html: data.html,
     toolInput: data.toolInput,
@@ -803,6 +804,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 +826,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);
 }