pmx-canvas 0.7.1 → 0.7.3

package/src/client/icons.tsx

@@ -11,16 +11,133 @@ const defaults = {
   'stroke-width': '1.5',
   'stroke-linecap': 'round',
   'stroke-linejoin': 'round',
+  'aria-hidden': 'true',
 } as const;
 
 function Icon({ size = 16, children, ...rest }: IconProps & { children: JSX.Element | JSX.Element[] }): JSX.Element {
   return (
-    <svg width={size} height={size} viewBox="0 0 16 16" {...defaults} {...rest}>
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      style={{ verticalAlign: 'middle', flexShrink: 0 }}
+      {...defaults}
+      {...rest}
+    >
       {children}
     </svg>
   );
 }
 
+export function IconClose(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="m4 4 8 8M12 4l-8 8" />
+    </Icon>
+  );
+}
+
+export function IconPlus(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M8 2v12M2 8h12" />
+    </Icon>
+  );
+}
+
+export function IconPlusCircle(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <circle cx="8" cy="8" r="6" />
+      <path d="M8 5v6M5 8h6" />
+    </Icon>
+  );
+}
+
+export function IconChevronRight(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <polyline points="6 3 11 8 6 13" />
+    </Icon>
+  );
+}
+
+export function IconMore(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <circle cx="3" cy="8" r="0.75" />
+      <circle cx="8" cy="8" r="0.75" />
+      <circle cx="13" cy="8" r="0.75" />
+    </Icon>
+  );
+}
+
+export function IconExternalLink(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M9 2h5v5M14 2 7 9M6 3H2v11h11v-4" />
+    </Icon>
+  );
+}
+
+export function IconExpand(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M9 2h5v5M14 2l-5 5M7 14H2V9M2 14l5-5" />
+    </Icon>
+  );
+}
+
+export function IconArrowLeft(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M14 8H2m5-5-5 5 5 5" />
+    </Icon>
+  );
+}
+
+export function IconRefresh(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M13.5 6A5.5 5.5 0 1 0 13 11M14 2v4h-4" />
+    </Icon>
+  );
+}
+
+export function IconUndo(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M6 2 2 6l4 4M2 6h7a4 4 0 0 1 0 8" />
+    </Icon>
+  );
+}
+
+export function IconSparkle(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="m8 1 2 5 5 2-5 2-2 5-2-5-5-2 5-2Z" />
+    </Icon>
+  );
+}
+
+/** Upload into a tray — attach a document. */
+export function IconUpload(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M8 10V2M4.5 5.5 8 2l3.5 3.5M2 10v3.5h12V10" />
+    </Icon>
+  );
+}
+
+/** Dropdown disclosure, sized like the other toolbar icons. */
+export function IconChevronDown(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <polyline points="3 6 8 11 13 6" />
+    </Icon>
+  );
+}
+
 /** Expand-arrows — fit all nodes */
 export function IconFitAll(p: IconProps): JSX.Element {
   return (

package/src/client/nodes/BoardNode.tsx

@@ -1,5 +1,6 @@
 import type { CanvasNodeState } from '../types';
 import { boardList, openBoard } from '../state/boards-store';
+import { IconExternalLink } from '../icons';
 
 /** Native text-only cross-board link. Target identity is the durable board id. */
 export function BoardNode({ node }: { node: CanvasNodeState }) {
@@ -28,7 +29,7 @@ export function BoardNode({ node }: { node: CanvasNodeState }) {
         onClick={() => target && void openBoard(target.id)}
       >
         {target ? 'Open board' : 'Target unavailable'}
-        {target && <span aria-hidden="true">↗</span>}
+        {target && <IconExternalLink size={14} />}
       </button>
     </div>
   );

package/src/client/nodes/ExtAppFrame.tsx

@@ -2,6 +2,7 @@ import type { CallToolResult, ListToolsResult, RequestId, Tool } from '@modelcon
 import { ListToolsRequestSchema } from '@modelcontextprotocol/sdk/types.js';
 import { AppBridge, PostMessageTransport, buildAllowAttribute } from '@modelcontextprotocol/ext-apps/app-bridge';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { IconClose } from '../icons';
 import {
   AX_SURFACE_ACK_SOURCE,
   AX_SURFACE_EMIT_SOURCE,
@@ -1429,6 +1430,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
           <button
             type="button"
             onClick={() => setError(null)}
+            aria-label="Dismiss error"
             style={{
               background: 'none',
               border: 'none',
@@ -1438,7 +1440,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
               padding: '0 2px',
             }}
           >
-            ×
+            <IconClose size={14} />
           </button>
         </div>
       )}

package/src/client/nodes/FileNode.tsx

@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import { IconPlusCircle, IconRefresh } from '../icons';
+import { delimiterForPath, parseDelimitedText } from '../../shared/delimited-text';
 import { updateNodeData } from '../state/canvas-store';
 import { iframeMode } from '../state/iframe-mode';
 import { fetchFile, updateNodeFromClient } from '../state/intent-bridge';
@@ -44,82 +46,6 @@ function langFromPath(path: string): string {
 /** Rendered-row ceiling for delimited files — a 200k-row CSV must not lock the browser. */
 const MAX_TABLE_ROWS = 500;
 
-export interface DelimitedTable {
-  header: string[];
-  /** Rectangular: every row padded (short) or truncated (long) to the header width. */
-  rows: string[][];
-}
-
-/** Column delimiter for a delimited-data path, or null when the file is not one. */
-function delimiterForPath(path: string): string | null {
-  const lower = path.toLowerCase();
-  if (lower.endsWith('.csv')) return ',';
-  if (lower.endsWith('.tsv')) return '\t';
-  return null;
-}
-
-/**
- * RFC4180-ish delimited-text parser. Quoted fields may contain the delimiter,
- * newlines, and `""` escapes; CRLF, LF and lone CR all end a record; a trailing
- * newline produces no phantom empty row. Ragged records are squared off against
- * the header width instead of throwing.
- */
-export function parseDelimitedText(text: string, delimiter: string): DelimitedTable {
-  const records: string[][] = [];
-  let row: string[] = [];
-  let field = '';
-  let quoted = false;
-  // Tracks whether the current record consumed anything — distinguishes a real
-  // empty-quoted record from the dangling state after a terminating newline.
-  let started = false;
-
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i];
-    started = true;
-    if (quoted) {
-      if (char === '"') {
-        if (text[i + 1] === '"') {
-          field += '"';
-          i++;
-        } else {
-          quoted = false;
-        }
-      } else if (char === '\r' && text[i + 1] === '\n') {
-        field += '\n';
-        i++;
-      } else {
-        field += char;
-      }
-      continue;
-    }
-    if (char === '"' && field === '') {
-      quoted = true;
-    } else if (char === delimiter) {
-      row.push(field);
-      field = '';
-    } else if (char === '\n' || char === '\r') {
-      if (char === '\r' && text[i + 1] === '\n') i++;
-      row.push(field);
-      field = '';
-      records.push(row);
-      row = [];
-      started = false;
-    } else {
-      field += char;
-    }
-  }
-  if (started) {
-    row.push(field);
-    records.push(row);
-  }
-
-  const header = records.shift() ?? [];
-  return {
-    header,
-    rows: records.map((record) => Array.from({ length: header.length }, (_, i) => record[i] ?? '')),
-  };
-}
-
 /** Human-readable byte size, e.g. `4.2 MB`. */
 export function formatBytes(bytes: number): string {
   if (!Number.isFinite(bytes) || bytes < 0) return '';
@@ -349,7 +275,7 @@ function TextFileNode({ node, expanded = false }: { node: CanvasNodeState; expan
             flexShrink: 0,
           }}
         >
-          ⊕
+          <IconPlusCircle size={14} />
         </button>
         <button
           type="button"
@@ -365,7 +291,7 @@ function TextFileNode({ node, expanded = false }: { node: CanvasNodeState; expan
             flexShrink: 0,
           }}
         >
-          ↻
+          <IconRefresh size={14} />
         </button>
       </div>
 

package/src/client/nodes/ImageNode.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { IconRefresh } from '../icons';
 import type { CanvasNodeState } from '../types';
 import { getImageNodeWarnings } from './image-warnings';
 
@@ -140,7 +141,7 @@ export function ImageNode({ node, expanded = false }: { node: CanvasNodeState; e
             {sizeLabel && <span>{sizeLabel}</span>}
             {zoom !== 1 && (
               <button type="button" class="image-node-zoom-reset" onClick={resetView} title="Reset zoom">
-                {zoomPct}% ↺
+                {zoomPct}% <IconRefresh size={14} />
               </button>
             )}
           </span>

package/src/client/nodes/MarkdownNode.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { IconArrowLeft } from '../icons';
 import { expandNode, updateNodeData } from '../state/canvas-store';
 import { fetchFile, renderMarkdown, saveFile, updateNodeFromClient } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
@@ -254,7 +255,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
       <div class="md-editor-expanded" onKeyDown={handleKeyDown}>
         <div class="md-editor-toolbar">
           <button type="button" class="md-toolbar-btn" onClick={() => setSourceMode(false)}>
-            ← Back to document
+            <IconArrowLeft size={14} /> Back to document
           </button>
           <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
             {path && <span class="md-toolbar-path">{path.split('/').pop()}</span>}

package/src/client/nodes/McpAppNode.tsx

@@ -10,6 +10,7 @@ import { ExtAppFrame } from './ExtAppFrame';
 import { useAxSurfaceBridge } from './use-ax-surface-bridge';
 import { useIframeContentHeight } from './use-iframe-content-height';
 import { useSurfaceFrame } from './use-surface-frame';
+import { restoreViewerRuntimeState } from './viewer-runtime-state';
 
 function withViewerParams(
   url: string,
@@ -19,6 +20,7 @@ function withViewerParams(
   axNodeId?: string,
   frameToken?: string,
   fitContent?: boolean,
+  stateToken?: string,
 ): string {
   if (!url) return url;
   try {
@@ -38,6 +40,7 @@ function withViewerParams(
     // Content-fit: report natural height (charts render intrinsic) so the node grows.
     if (frameToken) resolved.searchParams.set('frameToken', frameToken);
     if (fitContent) resolved.searchParams.set('fit', 'content');
+    if (stateToken) resolved.searchParams.set('stateToken', stateToken);
     return resolved.toString();
   } catch {
     return url;
@@ -68,6 +71,7 @@ export function RefreshingViewerFrame({
   source,
   iframeRef,
   onLoad,
+  onDocumentLoad,
   title,
   className = 'mcp-app-frame',
   sandbox = 'allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox',
@@ -77,6 +81,7 @@ export function RefreshingViewerFrame({
   source: ViewerFrameSource;
   iframeRef: RefObject<HTMLIFrameElement>;
   onLoad: () => void;
+  onDocumentLoad?: (frame: HTMLIFrameElement) => void;
   title: string;
   className?: string;
   sandbox?: string;
@@ -119,6 +124,9 @@ export function RefreshingViewerFrame({
       tabIndex={tabIndex}
       loading={iframeMode.value === 'srcdoc' ? undefined : 'lazy'}
       onLoad={(event) => {
+        // Seed runtime state while a replacement is still behind the painted
+        // frame, rather than mounting an empty viewer after promotion.
+        onDocumentLoad?.(event.currentTarget);
         if (!isPending) {
           onLoad();
           return;
@@ -214,6 +222,10 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
   useEffect(pushAxState, [isAxViewer, axToken, axStateValue]);
 
   const specVersion = typeof node.data.specVersion === 'number' ? node.data.specVersion : undefined;
+  const stateToken = useMemo(
+    () => (isJsonViewer ? `ui-${crypto.randomUUID()}` : ''),
+    [isJsonViewer, specVersion, node.data.url],
+  );
   const url = withViewerParams(
     (node.data.url as string) || '',
     expanded,
@@ -222,6 +234,7 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
     isAxViewer ? node.id : undefined,
     frameToken || undefined,
     contentFit,
+    stateToken || undefined,
   );
   // src vs fetch()+srcdoc, decided by the boot-wide embed probe (Amp portals).
   // External viewer URLs always stay src — the hook passes them through.
@@ -284,6 +297,9 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
       <RefreshingViewerFrame
         source={surfaceFrame}
         iframeRef={iframeRef}
+        onDocumentLoad={(frame) => {
+          if (stateToken && frame.contentWindow) restoreViewerRuntimeState(node.id, stateToken, frame.contentWindow);
+        }}
         onLoad={pushAxState}
         title={`MCP App: ${sourceServer}`}
       />

package/src/client/nodes/PromptNode.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { IconClose } from '../icons';
 import { updateNodeData } from '../state/canvas-store';
 import { fetchSlashCommands, renderMarkdown, submitCanvasPrompt, submitThreadReply } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
@@ -98,6 +99,7 @@ function ErrorBanner({ message, onDismiss }: { message: string | null; onDismiss
       <button
         type="button"
         onClick={onDismiss}
+        aria-label="Dismiss error"
         style={{
           background: 'none',
           border: 'none',
@@ -107,7 +109,7 @@ function ErrorBanner({ message, onDismiss }: { message: string | null; onDismiss
           padding: '0 2px',
         }}
       >
-        {'\u00d7'}
+        <IconClose size={14} />
       </button>
     </div>
   );

package/src/client/nodes/use-ax-surface-bridge.ts

@@ -1,5 +1,5 @@
 import type { RefObject } from 'preact';
-import { useEffect } from 'preact/hooks';
+import { useLayoutEffect } from 'preact/hooks';
 import { AX_SURFACE_ACK_SOURCE, AX_SURFACE_EMIT_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { showToast } from '../state/attention-bridge';
 import { submitAxInteractionFromClient } from '../state/intent-bridge';
@@ -25,7 +25,9 @@ export function useAxSurfaceBridge(options: {
   iframeRef: RefObject<HTMLIFrameElement>;
 }): void {
   const { enabled, token, nodeId, sourceSurface, iframeRef } = options;
-  useEffect(() => {
+  // Register before paint: a fast iframe can accept input before passive effects
+  // run, and its first emit must not be lost in that gap.
+  useLayoutEffect(() => {
     if (!enabled || !token) return;
     function onAxMessage(event: MessageEvent) {
       // Bind to THIS node's own iframe; the nonce + nodeId are a second gate,

package/src/client/nodes/viewer-runtime-state.ts

@@ -0,0 +1,78 @@
+import { effect } from '@preact/signals';
+import { JSON_VIEWER_STATE_SOURCE } from '../../shared/ax-surface-protocol.js';
+import { canvasInteractionEpoch, nodes } from '../state/canvas-store';
+
+type Snapshot = {
+  epoch: number;
+  version: unknown;
+  documentUrl: unknown;
+  state: Record<string, unknown> | null;
+  owners: Array<{ token: string; source: Window }>;
+};
+
+// Tab-local UI state only: never persist form drafts in canvas data or AX. Keep
+// the receiver alive across the inline/expanded unmount so queued input messages
+// cannot fall into a gap between component effects. Two owners cover a handover;
+// removal, board navigation and authored spec changes discard the entire entry.
+const snapshots = new Map<string, Snapshot>();
+let listening = false;
+
+export function restoreViewerRuntimeState(nodeId: string, token: string, source: Window): void {
+  if (!listening) {
+    listening = true;
+    effect(() => {
+      const current = nodes.value;
+      const epoch = canvasInteractionEpoch.value;
+      for (const [id, snapshot] of snapshots) {
+        const node = current.get(id);
+        if (
+          !node ||
+          snapshot.epoch !== epoch ||
+          snapshot.version !== node.data.specVersion ||
+          snapshot.documentUrl !== node.data.url
+        )
+          snapshots.delete(id);
+      }
+    });
+    window.addEventListener('message', (event: MessageEvent) => {
+      const message = event.data as {
+        source?: string;
+        type?: string;
+        token?: string;
+        nodeId?: string;
+        state?: unknown;
+      } | null;
+      if (
+        !message ||
+        message.source !== JSON_VIEWER_STATE_SOURCE ||
+        message.type !== 'snapshot' ||
+        typeof message.nodeId !== 'string'
+      )
+        return;
+      const snapshot = snapshots.get(message.nodeId);
+      const ownerIndex =
+        snapshot?.owners.findIndex((owner) => owner.token === message.token && owner.source === event.source) ?? -1;
+      if (!snapshot || ownerIndex < 0) return;
+      if (!message.state || typeof message.state !== 'object' || Array.isArray(message.state)) return;
+      const { ax: _ax, ...state } = message.state as Record<string, unknown>;
+      snapshot.state = state;
+      // Once the replacement emits, the retired document cannot overwrite it.
+      snapshot.owners = snapshot.owners.slice(ownerIndex);
+    });
+  }
+  const node = nodes.value.get(nodeId);
+  if (!node) return;
+  let snapshot = snapshots.get(nodeId);
+  if (!snapshot) {
+    snapshot = {
+      epoch: canvasInteractionEpoch.value,
+      version: node.data.specVersion,
+      documentUrl: node.data.url,
+      state: null,
+      owners: [],
+    };
+    snapshots.set(nodeId, snapshot);
+  }
+  snapshot.owners = [...snapshot.owners.filter((owner) => owner.source !== source).slice(-1), { token, source }];
+  source.postMessage({ source: JSON_VIEWER_STATE_SOURCE, type: 'restore', token, state: snapshot.state }, '*');
+}

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

@@ -58,6 +58,8 @@ const EXCALIDRAW_CLOSE_MAX_WAIT_MS = 2500;
 
 // ── Pending edge connection (for context menu "Connect from") ─
 export const pendingConnection = signal<{ from: string } | null>(null);
+/** Invalidates in-flight interaction replies when board navigation resets the canvas. */
+export const canvasInteractionEpoch = signal(0);
 
 // ── Drag-to-connect (live edge preview) ─────────────────────
 export const draggingEdge = signal<{
@@ -151,6 +153,7 @@ export function resetCanvasInteractionState(): void {
     expandedCloseTimer = null;
   }
   batch(() => {
+    canvasInteractionEpoch.value += 1;
     activeNodeId.value = null;
     expandedNodeId.value = null;
     pendingExpandedNodeCloseId.value = null;

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

@@ -1,6 +1,8 @@
 import { canvasArea } from '../canvas/canvas-area';
 import { showToast } from './attention-bridge';
 import type { AgentPresenceSnapshot } from '../../shared/agent-presence.js';
+import type { CanvasEdge } from '../types';
+import { addEdge, canvasInteractionEpoch, nodes } from './canvas-store';
 function logRequestError(action: string, error: unknown): void {
   console.error(`[intent-bridge] ${action} failed`, error);
 }
@@ -261,14 +263,15 @@ export async function pushCanvasUpdate(
   });
 }
 
-/** Create a canvas edge via the server. */
+/** Render the server-confirmed edge immediately, without waiting for SSE/polling. */
 export async function createEdgeFromClient(
   from: string,
   to: string,
   type: string,
   label?: string,
 ): Promise<{ ok: boolean; id?: string }> {
-  return requestJson(
+  const epoch = canvasInteractionEpoch.value;
+  const result = await requestJson<({ ok: true } & CanvasEdge) | { ok: false; error?: string }>(
     'createEdgeFromClient',
     '/api/canvas/edge',
     { ok: false },
@@ -278,6 +281,15 @@ export async function createEdgeFromClient(
       body: JSON.stringify({ from, to, type, label }),
     },
   );
+  if (epoch === canvasInteractionEpoch.value && nodes.value.has(from) && nodes.value.has(to)) {
+    if (result.ok) {
+      const { ok, ...edge } = result;
+      addEdge(edge);
+    } else if (!result.error) {
+      showToast('remove', 'Connection not added', 'Could not reach the server. Try again.');
+    }
+  }
+  return result;
 }
 
 /** Create a canvas node via the server. Returns the new node ID. */