pmx-canvas 0.7.2 → 0.8.0

package/src/client/mcp-app/index.tsx

@@ -0,0 +1,137 @@
+import '../uuid-polyfill';
+import { App as McpApp } from '@modelcontextprotocol/ext-apps';
+import { render } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { z } from 'zod';
+import { App as Workbench } from '../App';
+import { activeBoardId, boardList, boardsLoaded } from '../state/boards-store';
+import { axSurfaceState, contextPinnedNodeIds, nodes, selectedNodeIds } from '../state/canvas-store';
+import { installWorkbenchDownload, installWorkbenchTransport } from '../state/workbench-transport';
+import { resolveIframeMode } from '../state/iframe-mode';
+import { summarizeNodeForAgentContext } from '../../shared/agent-context';
+import { canvasAppContext } from '../../shared/canvas-app';
+
+const bridge = new McpApp(
+  { name: 'PMX Canvas', version: '1.0.0' },
+  { availableDisplayModes: ['inline', 'fullscreen'] },
+);
+const responseSchema = z.object({
+  status: z.number(),
+  body: z.string(),
+  contentType: z.string(),
+  encoding: z.enum(['text', 'base64']),
+});
+
+// Preserve the workbench's fetch/Response contracts, without passing its human
+// headers or exposing the daemon URL to the embedded browser.
+installWorkbenchTransport(async (input, init) => {
+  const path = typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url;
+  const method = (init?.method ?? (input instanceof Request ? input.method : 'GET')).toUpperCase();
+  if (init?.body !== undefined && typeof init.body !== 'string')
+    return Response.json({ ok: false, error: 'Document uploads require the local PMX workbench.' }, { status: 403 });
+  init?.signal?.throwIfAborted();
+  const result = await bridge.callServerTool({
+    name: 'pmx_workbench_request',
+    arguments: {
+      path,
+      method,
+      ...(init?.body === undefined ? {} : { body: init.body }),
+      expectedBoardId: activeBoardId.value,
+    },
+  });
+  init?.signal?.throwIfAborted();
+  const response = responseSchema.parse(result._meta?.response);
+  const body =
+    response.encoding === 'base64' ? Uint8Array.from(atob(response.body), (char) => char.charCodeAt(0)) : response.body;
+  return new Response(method === 'HEAD' || response.status === 204 ? null : body, {
+    status: response.status,
+    headers: { 'Content-Type': response.contentType },
+  });
+});
+
+const focusSchema = z.object({ focus: z.array(z.string()) });
+
+function selectionContext() {
+  const focus = focusSchema.safeParse(axSurfaceState.value);
+  return canvasAppContext(
+    {
+      boardId: activeBoardId.value,
+      boardName: boardList.value.find((board) => board.id === activeBoardId.value)?.name ?? 'Home',
+      pinnedNodeIds: [...contextPinnedNodeIds.value],
+      nodes: [...nodes.value.values()].map((node) => ({
+        id: node.id,
+        type: node.type,
+        title: typeof node.data.title === 'string' ? node.data.title : node.type,
+        contentRevision: node.contentRevision ?? 0,
+        text: summarizeNodeForAgentContext(node),
+      })),
+    },
+    [...selectedNodeIds.value],
+    focus.success ? focus.data.focus : [],
+  );
+}
+
+function HostedWorkbench() {
+  const [acknowledged, setAcknowledged] = useState('');
+  const [retry, setRetry] = useState(0);
+  const queue = useRef(Promise.resolve());
+  const context = selectionContext();
+  const key = JSON.stringify(context);
+  const desired = useRef(key);
+  desired.current = key;
+  const caps = bridge.getHostCapabilities();
+  const ready = boardsLoaded.value;
+  useEffect(() => {
+    if (!ready || !caps?.updateModelContext || acknowledged === key) return;
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    queue.current = queue.current
+      .then(async () => {
+        if (cancelled || desired.current !== key) return;
+        setAcknowledged('');
+        await bridge.updateModelContext({ structuredContent: context });
+        if (cancelled || desired.current !== key) return;
+        setAcknowledged(key);
+      })
+      .catch(() => {
+        // Context is background synchronization, not extra workbench chrome.
+        // Retry unchanged context too, and only consider a host ACK successful.
+        if (!cancelled && desired.current === key) timer = setTimeout(() => setRetry((value) => value + 1), 2000);
+      });
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [key, ready, retry]);
+  return (
+    <div class="pmx-host-app">
+      <Workbench />
+    </div>
+  );
+}
+
+// Polling is the sole state owner. Launcher tool results never rehydrate the
+// workbench, so delayed initial notifications cannot roll back its live state.
+bridge.ontoolresult = () => {};
+void bridge
+  .connect()
+  .then(async () => {
+    if (!bridge.getHostCapabilities()?.serverTools) throw new Error('This host does not support app tool calls.');
+    if (bridge.getHostCapabilities()?.downloadFile) {
+      installWorkbenchDownload((file) =>
+        bridge.downloadFile({
+          contents: [
+            {
+              type: 'resource',
+              resource: { uri: `file:///${encodeURIComponent(file.name)}`, mimeType: file.mimeType, text: file.text },
+            },
+          ],
+        }),
+      );
+    }
+    await resolveIframeMode();
+    render(<HostedWorkbench />, document.getElementById('app')!);
+  })
+  .catch((error: unknown) => {
+    document.getElementById('app')!.textContent = `Could not connect PMX: ${String(error)}`;
+  });

package/src/client/mcp-app/style.css

@@ -0,0 +1,10 @@
+.pmx-host-app { height: 100%; display: flex; flex-direction: column; }
+.pmx-host-app > .app-shell { flex: 1; min-height: 0; height: auto; }
+/* Keep context controls clear of the host's floating chat composer. */
+.pmx-host-app .context-pin-bar {
+  bottom: 16px;
+  left: 16px;
+  transform: none;
+}
+/* Guard refusals must remain readable while the full source editor is open. */
+.pmx-host-app .attention-toast.attention-tone-remove { z-index: 100100; }

package/src/client/nodes/AttachmentNode.tsx

@@ -4,10 +4,12 @@ import type { CanvasNodeState } from '../types';
 import { activeBoardId } from '../state/boards-store';
 import { requestJson } from '../state/intent-bridge';
 import { expandNode, collapseExpandedNode } from '../state/canvas-store';
+import { useWorkbenchAsset } from './use-workbench-asset';
 
 /** Originals stay useful even when the connected host cannot extract them. */
 export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const attachmentId = String(node.data.attachmentId);
+  const downloadUrl = useWorkbenchAsset(`/api/canvas/attachments/${encodeURIComponent(attachmentId)}/bytes`);
   const boardId = activeBoardId.value;
   const [job, setJob] = useState<DocumentImport | null>(null);
   const [review, setReview] = useState(expanded);
@@ -68,7 +70,12 @@ export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeSta
               ? 'Markdown added'
               : 'Original attached'}
       </div>
-      <a href={`/api/canvas/attachments/${attachmentId}/bytes`} target="_blank" rel="noopener noreferrer">
+      <a
+        href={downloadUrl}
+        download={String(node.data.title ?? 'attachment')}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
         Download original · {Math.ceil(Number(node.data.size ?? 0) / 1024)} KB
       </a>
       {job?.reason && <p>{job.reason}</p>}

package/src/client/nodes/AxStepControls.tsx

@@ -65,7 +65,7 @@ const labelStyle = {
 
 const activeButtonStyle = {
   ...axNodeActionButtonStyle,
-  background: 'var(--c-accent-25)',
+  background: 'color-mix(in srgb, var(--c-accent) 25%, transparent)',
   color: 'var(--c-text)',
 } as const;
 

package/src/client/nodes/ContextNode.tsx

@@ -298,8 +298,8 @@ export function ContextNode({
                       style={{
                         padding: '4px 8px',
                         fontSize: '10px',
-                        background: 'var(--c-accent-12)',
-                        border: '1px solid var(--c-accent-25)',
+                        background: 'color-mix(in srgb, var(--c-accent) 12%, transparent)',
+                        border: '1px solid color-mix(in srgb, var(--c-accent) 25%, transparent)',
                         borderRadius: '4px',
                         color: 'var(--c-text-soft)',
                         cursor: 'pointer',
@@ -363,7 +363,7 @@ export function ContextNode({
                     style={{
                       fontSize: '9px',
                       padding: '1px 4px',
-                      background: 'var(--c-accent-10)',
+                      background: 'color-mix(in srgb, var(--c-accent) 10%, transparent)',
                       color: 'var(--c-accent)',
                       borderRadius: '3px',
                       display: 'inline-block',
@@ -402,8 +402,8 @@ export function ContextNode({
                       style={{
                         fontSize: '9px',
                         padding: '1px 4px',
-                        background: 'var(--c-warn-12)',
-                        color: 'var(--c-warn-alt)',
+                        background: 'color-mix(in srgb, var(--c-accent) 12%, transparent)',
+                        color: 'var(--c-accent)',
                         borderRadius: '3px',
                         display: 'inline-block',
                       }}
@@ -420,8 +420,8 @@ export function ContextNode({
                       style={{
                         padding: '4px 8px',
                         fontSize: '10px',
-                        background: 'var(--c-accent-12)',
-                        border: '1px solid var(--c-accent-25)',
+                        background: 'color-mix(in srgb, var(--c-accent) 12%, transparent)',
+                        border: '1px solid color-mix(in srgb, var(--c-accent) 25%, transparent)',
                         borderRadius: '4px',
                         color: 'var(--c-text-soft)',
                         cursor: 'pointer',
@@ -518,8 +518,8 @@ export function ContextNode({
                 style={{
                   padding: '4px 8px',
                   fontSize: '10px',
-                  background: 'var(--c-accent-12)',
-                  border: '1px solid var(--c-accent-25)',
+                  background: 'color-mix(in srgb, var(--c-accent) 12%, transparent)',
+                  border: '1px solid color-mix(in srgb, var(--c-accent) 25%, transparent)',
                   borderRadius: '4px',
                   color: 'var(--c-text-soft)',
                   cursor: 'pointer',

package/src/client/nodes/ExtAppFrame.tsx

@@ -3,6 +3,7 @@ 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 { workbenchFetch } from '../state/workbench-transport';
 import {
   AX_SURFACE_ACK_SOURCE,
   AX_SURFACE_EMIT_SOURCE,
@@ -41,7 +42,7 @@ interface ExtAppHostDimensionsTarget {
 }
 
 async function postJson<T>(url: string, body: Record<string, unknown>): Promise<T> {
-  const response = await fetch(url, {
+  const response = await workbenchFetch(url, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(body),
@@ -150,7 +151,7 @@ function queueExtAppRecoveryReport(entry: { t: number; nodeId: string; event: st
     extAppReportTimer = null;
     const entries = extAppReportQueue.splice(0);
     if (entries.length === 0) return;
-    void fetch('/api/canvas/debug/ext-app-recovery', {
+    void workbenchFetch('/api/canvas/debug/ext-app-recovery', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ entries }),
@@ -1383,10 +1384,14 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
             padding: '6px 10px',
             fontSize: '11px',
             background:
-              sessionStatus === 'error' && !sessionErrorWithContent ? 'var(--c-danger-12)' : 'var(--c-warn-10)',
+              sessionStatus === 'error' && !sessionErrorWithContent
+                ? 'color-mix(in srgb, var(--c-danger) 12%, transparent)'
+                : 'color-mix(in srgb, var(--c-warn) 10%, transparent)',
             color: sessionStatus === 'error' && !sessionErrorWithContent ? 'var(--c-danger)' : 'var(--c-warn)',
             borderBottom: `1px solid ${
-              sessionStatus === 'error' && !sessionErrorWithContent ? 'var(--c-danger-12)' : 'var(--c-warn-15)'
+              sessionStatus === 'error' && !sessionErrorWithContent
+                ? 'color-mix(in srgb, var(--c-danger) 12%, transparent)'
+                : 'color-mix(in srgb, var(--c-warn) 15%, transparent)'
             }`,
           }}
         >
@@ -1398,9 +1403,9 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
           style={{
             padding: '6px 10px',
             fontSize: '11px',
-            background: 'var(--c-danger-12)',
+            background: 'color-mix(in srgb, var(--c-danger) 12%, transparent)',
             color: 'var(--c-danger)',
-            borderBottom: '1px solid var(--c-danger-12)',
+            borderBottom: '1px solid color-mix(in srgb, var(--c-danger) 12%, transparent)',
             display: 'flex',
             alignItems: 'center',
             gap: '6px',
@@ -1417,7 +1422,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
             }}
             style={{
               background: 'var(--c-surface-hover)',
-              border: '1px solid var(--c-danger-12)',
+              border: '1px solid color-mix(in srgb, var(--c-danger) 12%, transparent)',
               borderRadius: '3px',
               color: 'var(--c-danger)',
               cursor: 'pointer',
@@ -1512,7 +1517,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
               }}
               style={{
                 background: 'var(--c-surface-hover)',
-                border: '1px solid var(--c-warn-15)',
+                border: '1px solid color-mix(in srgb, var(--c-warn) 15%, transparent)',
                 borderRadius: '4px',
                 color: 'var(--c-warn)',
                 cursor: 'pointer',

package/src/client/nodes/FileNode.tsx

@@ -7,6 +7,7 @@ import { fetchFile, updateNodeFromClient } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
 import { runNodeAxInteraction } from './ax-node-actions';
 import { AttachmentNode } from './AttachmentNode';
+import { useWorkbenchAsset } from './use-workbench-asset';
 
 /** Guess a language label from a file extension for display. */
 function langFromPath(path: string): string {
@@ -180,9 +181,11 @@ function TextFileNode({ node, expanded = false }: { node: CanvasNodeState; expan
     const parsed = parseDelimitedText(content, delimiter);
     return parsed.header.length >= 2 ? parsed : null;
   }, [content, delimiter, servesBytes]);
-  const bytesUrl = `/api/canvas/file-bytes?nodeId=${encodeURIComponent(node.id)}${
-    bytesVersion ? `&v=${bytesVersion}` : ''
-  }`;
+  const bytesUrl = useWorkbenchAsset(
+    servesBytes
+      ? `/api/canvas/file-bytes?nodeId=${encodeURIComponent(node.id)}${bytesVersion ? `&v=${bytesVersion}` : ''}`
+      : '',
+  );
   // Amp orb portals block src-URL child iframes and force srcdoc, which cannot
   // inline a PDF — offer the raw URL instead of a dead frame.
   const pdfFrameBlocked = iframeMode.value === 'srcdoc';
@@ -204,7 +207,7 @@ function TextFileNode({ node, expanded = false }: { node: CanvasNodeState; expan
         display: 'flex',
         flexDirection: 'column',
         height: '100%',
-        fontFamily: 'var(--mono)',
+        fontFamily: 'var(--font-code)',
         fontSize: expanded ? '13px' : '11px',
       }}
     >
@@ -223,7 +226,7 @@ function TextFileNode({ node, expanded = false }: { node: CanvasNodeState; expan
           style={{
             fontSize: '9px',
             padding: '1px 5px',
-            background: 'var(--c-accent-12)',
+            background: 'color-mix(in srgb, var(--c-accent) 12%, transparent)',
             color: 'var(--c-accent)',
             borderRadius: '3px',
             fontWeight: 600,

package/src/client/nodes/ImageNode.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { IconRefresh } from '../icons';
 import type { CanvasNodeState } from '../types';
 import { getImageNodeWarnings } from './image-warnings';
+import { useWorkbenchAsset } from './use-workbench-asset';
 
 /**
  * Image node renderer.
@@ -15,10 +16,11 @@ export function ImageNode({ node, expanded = false }: { node: CanvasNodeState; e
   const warnings = getImageNodeWarnings(node);
 
   // Determine the image source URL
-  const imageSrc =
+  const imageSrc = useWorkbenchAsset(
     src.startsWith('data:') || src.startsWith('http://') || src.startsWith('https://')
       ? src
-      : `/api/canvas/image/${node.id}`;
+      : `/api/canvas/image/${node.id}`,
+  );
 
   const [loaded, setLoaded] = useState(false);
   const [error, setError] = useState(false);

package/src/client/nodes/InlineMarkdownEditor.tsx

@@ -3,6 +3,7 @@ import TurndownService from 'turndown';
 import { useCallback, useEffect, useRef } from 'preact/hooks';
 import { InlineFormatBar } from './InlineFormatBar';
 import { promptAndInsertLink } from './inline-editor-commands';
+import { sanitizeMarkdownHtml } from './markdown-sanitize';
 
 let _turndown: TurndownService | null = null;
 function getTurndown(): TurndownService {
@@ -45,7 +46,7 @@ export function InlineMarkdownEditor({
   useEffect(() => {
     const el = rootRef.current;
     if (!el) return;
-    el.innerHTML = initialHtmlRef.current;
+    el.innerHTML = sanitizeMarkdownHtml(initialHtmlRef.current);
     // GFM task checkboxes are live in the editor too: marked emits them
     // `disabled`, which also swallows clicks in the expanded view.
     for (const box of el.querySelectorAll('input[type="checkbox"][disabled]')) {

package/src/client/nodes/LedgerNode.tsx

@@ -34,7 +34,7 @@ export function LedgerNode({ node }: { node: CanvasNodeState }) {
                 padding: '3px 0',
                 borderBottom: i < lines.length - 1 ? '1px solid rgba(45,55,90,0.3)' : 'none',
                 color: 'var(--c-text)',
-                fontFamily: 'var(--mono)',
+                fontFamily: 'var(--font-code)',
                 fontSize: '11px',
                 whiteSpace: 'pre-wrap',
                 wordBreak: 'break-word',
@@ -62,7 +62,7 @@ export function LedgerNode({ node }: { node: CanvasNodeState }) {
           <span
             style={{
               color: 'var(--c-text)',
-              fontFamily: 'var(--mono)',
+              fontFamily: 'var(--font-code)',
               fontSize: '11px',
               textAlign: 'right',
               wordBreak: 'break-word',

package/src/client/nodes/MarkdownNode.tsx

@@ -1,13 +1,16 @@
 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 { expandNode, nodes, updateNodeData } from '../state/canvas-store';
 import { fetchFile, renderMarkdown, saveFile, updateNodeFromClient } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
 import { activeBoard, setBoardReadme } from '../state/boards-store';
 import { MdFormatBar } from './MdFormatBar';
 import { handleFormatShortcut, handleTab } from './md-format';
 import { InlineMarkdownEditor } from './InlineMarkdownEditor';
+import { isHostedWorkbench } from '../state/workbench-transport';
+import { activeBoardId } from '../state/boards-store';
+import { sanitizeMarkdownHtml } from './markdown-sanitize';
 
 function RenderedMarkdown({
   html,
@@ -37,7 +40,7 @@ function RenderedMarkdown({
     container.replaceChildren();
     if (!html) return;
     const template = document.createElement('template');
-    template.innerHTML = html;
+    template.innerHTML = sanitizeMarkdownHtml(html);
     container.append(template.content.cloneNode(true));
     if (onTaskToggleRef.current) {
       for (const box of container.querySelectorAll('input[type="checkbox"][disabled]')) {
@@ -98,9 +101,14 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
   // debounced save without capturing stale closures.
   const latestMdRef = useRef<string>('');
   const persistFnRef = useRef<((md: string) => Promise<void>) | null>(null);
+  const dirtyRef = useRef(false);
+  const editBase = useRef({ boardId: activeBoardId.value, revision: node.contentRevision ?? 0 });
+  const saveQueue = useRef(Promise.resolve());
   const reviewActive = node.data.reviewActive as boolean | undefined;
 
   useEffect(() => {
+    if (isHostedWorkbench() && dirtyRef.current) return;
+    editBase.current = { boardId: activeBoardId.value, revision: node.contentRevision ?? 0 };
     let cancelled = false;
     (async () => {
       let raw: string;
@@ -116,7 +124,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
       }
       setContent(raw);
       const html = await renderMarkdown(raw);
-      if (cancelled) return;
+      if (cancelled || (isHostedWorkbench() && dirtyRef.current)) return;
       setRendered(html);
       setLoaded(true);
       updateNodeData(node.id, { content: raw, rendered: html });
@@ -128,6 +136,8 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
 
   const handleInput = useCallback(async (e: Event) => {
     const value = (e.target as HTMLTextAreaElement).value;
+    dirtyRef.current = true;
+    latestMdRef.current = value;
     setContent(value);
     setDirty(true);
     const html = await renderMarkdown(value);
@@ -136,6 +146,32 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
 
   const persistContent = useCallback(
     async (newContent: string) => {
+      if (isHostedWorkbench()) {
+        // Serialize autosaves against the captured source revision, not whatever
+        // newer revision a background poll has delivered while typing.
+        saveQueue.current = saveQueue.current.then(async () => {
+          setSaving(true);
+          const result = await updateNodeFromClient(node.id, {
+            content: newContent,
+            expectedBoardId: editBase.current.boardId,
+            expectedContentRevision: editBase.current.revision,
+          });
+          setSaving(false);
+          if (!result.ok) return; // Refusal toast is shown by the request helper; keep the draft.
+          editBase.current.revision = result.contentRevision ?? editBase.current.revision;
+          const current = nodes.value.get(node.id);
+          if (current)
+            nodes.value = new Map(nodes.value).set(node.id, { ...current, contentRevision: editBase.current.revision });
+          if (latestMdRef.current !== newContent) return;
+          dirtyRef.current = false;
+          setDirty(false);
+          const html = await renderMarkdown(newContent);
+          setRendered(html);
+          updateNodeData(node.id, { content: newContent, rendered: html });
+        });
+        await saveQueue.current;
+        return;
+      }
       if (!path) {
         const html = await renderMarkdown(newContent);
         setRendered(html);
@@ -191,6 +227,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
   // don't hit the backend on every letter.
   const handleInlineChange = useCallback(
     (md: string) => {
+      dirtyRef.current = true;
       setContent(md);
       setDirty(true);
       latestMdRef.current = md;
@@ -208,6 +245,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
   // write twice with slightly different content.
   const handleInlineSave = useCallback(
     (md: string) => {
+      dirtyRef.current = true;
       setContent(md);
       latestMdRef.current = md;
       if (persistTimerRef.current !== null) {
@@ -236,9 +274,9 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
       style={{
         padding: '4px 8px',
         fontSize: '10px',
-        background: 'var(--c-ok-10)',
+        background: 'color-mix(in srgb, var(--c-ok) 10%, transparent)',
         color: 'var(--c-ok)',
-        borderBottom: '1px solid var(--c-ok-20)',
+        borderBottom: '1px solid color-mix(in srgb, var(--c-ok) 20%, transparent)',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
         fontWeight: 600,
@@ -274,9 +312,6 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
             <textarea ref={textareaRef} value={content} onInput={handleInput} spellcheck={false} />
             <MdFormatBar textareaRef={textareaRef} />
           </div>
-          {/* D5/H4: Trust boundary — rendered HTML comes from server-side marked()
-              on the user's own markdown files, served only on 127.0.0.1. No DOMPurify
-              needed for this localhost-only rendering of user-owned content. */}
           <RenderedMarkdown html={rendered} className="md-preview" />
         </div>
       </div>
@@ -322,7 +357,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
             style={{
               padding: '4px 10px',
               fontSize: '11px',
-              background: dirty ? 'var(--c-accent-25)' : 'var(--c-input-bg)',
+              background: dirty ? 'color-mix(in srgb, var(--c-accent) 25%, transparent)' : 'var(--c-input-bg)',
               border: `1px solid ${dirty ? 'var(--c-accent)' : 'var(--c-line)'}`,
               borderRadius: '6px',
               color: dirty ? 'var(--c-text)' : 'var(--c-dim)',

package/src/client/nodes/McpAppNode.tsx

@@ -10,6 +10,8 @@ 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';
+import { isHostedWorkbench } from '../state/workbench-transport';
 
 function withViewerParams(
   url: string,
@@ -19,10 +21,12 @@ function withViewerParams(
   axNodeId?: string,
   frameToken?: string,
   fitContent?: boolean,
+  stateToken?: string,
 ): string {
   if (!url) return url;
   try {
-    const resolved = new URL(url, window.location.origin);
+    const hosted = isHostedWorkbench() && url.startsWith('/');
+    const resolved = new URL(url, hosted ? 'https://pmx.invalid' : window.location.origin);
     // The json-render viewer + artifacts understand dark/light — collapse named
     // themes (sepia → light, midnight/arctic/ember/forest → dark) to a scheme.
     resolved.searchParams.set('theme', canvasThemeScheme(canvasTheme.value));
@@ -38,7 +42,8 @@ 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');
-    return resolved.toString();
+    if (stateToken) resolved.searchParams.set('stateToken', stateToken);
+    return hosted ? `${resolved.pathname}${resolved.search}` : resolved.toString();
   } catch {
     return url;
   }
@@ -68,6 +73,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 +83,7 @@ export function RefreshingViewerFrame({
   source: ViewerFrameSource;
   iframeRef: RefObject<HTMLIFrameElement>;
   onLoad: () => void;
+  onDocumentLoad?: (frame: HTMLIFrameElement) => void;
   title: string;
   className?: string;
   sandbox?: string;
@@ -119,6 +126,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 +224,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 +236,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.
@@ -270,9 +285,9 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
           style={{
             padding: '4px 8px',
             fontSize: '10px',
-            background: 'var(--c-warn-10)',
+            background: 'color-mix(in srgb, var(--c-warn) 10%, transparent)',
             color: 'var(--c-warn)',
-            borderBottom: '1px solid var(--c-warn-15)',
+            borderBottom: '1px solid color-mix(in srgb, var(--c-warn) 15%, transparent)',
           }}
         >
           Unverified domain
@@ -284,6 +299,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}`}
       />