pmx-canvas 0.7.3 → 0.8.2

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/HtmlNode.tsx

@@ -12,6 +12,14 @@ export function shouldShowPresentationControls(node: CanvasNodeState): boolean {
   return node.type === 'html' && node.data.presentation === true;
 }
 
+export function htmlAxCapabilitySignature(value: unknown): string {
+  const capabilities = value as { enabled?: unknown; allowed?: unknown } | undefined;
+  if (capabilities?.enabled !== true) return 'disabled';
+  if (!Array.isArray(capabilities.allowed)) return 'enabled:default';
+  const allowed = [...new Set(capabilities.allowed.filter((item): item is string => typeof item === 'string'))].sort();
+  return allowed.length > 0 ? `enabled:${allowed.join(',')}` : 'disabled';
+}
+
 export function HtmlNode({
   node,
   expanded = false,
@@ -27,10 +35,12 @@ export function HtmlNode({
 }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const theme = canvasTheme.value;
+  const axCapabilitySignature = htmlAxCapabilitySignature(node.data.axCapabilities);
   // Stable per-mount nonce that authorizes parent → iframe theme-update messages.
   const themeToken = useMemo(() => `theme-${crypto.randomUUID()}`, []);
-  // Per-mount nonce authorizing iframe → parent AX emits (Phase 3 HTML bridge).
-  const axToken = useMemo(() => `ax-${crypto.randomUUID()}`, []);
+  // Rotate the nonce when capabilities change: both the URL and injected srcdoc
+  // change, rebootstrapping the bridge and rejecting emits from the old document.
+  const axToken = useMemo(() => `ax-${crypto.randomUUID()}`, [axCapabilitySignature]);
   // Per-mount nonce for the content-height reporter (node grows to fit content).
   const frameToken = useMemo(() => `frame-${crypto.randomUUID()}`, []);
   const html =

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

@@ -11,6 +11,7 @@ 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,
@@ -24,7 +25,8 @@ function withViewerParams(
 ): 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));
@@ -41,7 +43,7 @@ function withViewerParams(
     if (frameToken) resolved.searchParams.set('frameToken', frameToken);
     if (fitContent) resolved.searchParams.set('fit', 'content');
     if (stateToken) resolved.searchParams.set('stateToken', stateToken);
-    return resolved.toString();
+    return hosted ? `${resolved.pathname}${resolved.search}` : resolved.toString();
   } catch {
     return url;
   }
@@ -283,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

package/src/client/nodes/PromptNode.tsx

@@ -3,6 +3,7 @@ import { IconClose } from '../icons';
 import { updateNodeData } from '../state/canvas-store';
 import { fetchSlashCommands, renderMarkdown, submitCanvasPrompt, submitThreadReply } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
+import { sanitizeMarkdownHtml } from './markdown-sanitize';
 
 // Cached slash commands — fetched once on first use.
 let cachedCommands: Array<{ name: string; description: string }> | null = null;
@@ -27,19 +28,6 @@ interface ThreadTurn {
   status?: string;
 }
 
-/** Strip dangerous HTML from rendered markdown to prevent XSS. */
-function sanitizeHtml(html: string): string {
-  return html
-    .replace(/<script[\s>][\s\S]*?<\/script>/gi, '')
-    .replace(/<iframe[\s>][\s\S]*?<\/iframe>/gi, '')
-    .replace(/<object[\s>][\s\S]*?<\/object>/gi, '')
-    .replace(/<embed[\s>][\s\S]*?(?:\/>|<\/embed>)/gi, '')
-    .replace(/<link[\s>][\s\S]*?(?:\/>|<\/link>)/gi, '')
-    .replace(/\bon\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
-    .replace(/href\s*=\s*"javascript:[^"]*"/gi, 'href="#"')
-    .replace(/href\s*=\s*'javascript:[^']*'/gi, "href='#'");
-}
-
 function RenderedMarkdown({ html }: { html: string }) {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -50,7 +38,7 @@ function RenderedMarkdown({ html }: { html: string }) {
     if (!html) return;
 
     const template = document.createElement('template');
-    template.innerHTML = html;
+    template.innerHTML = sanitizeMarkdownHtml(html);
     container.append(template.content.cloneNode(true));
   }, [html]);
 
@@ -181,7 +169,7 @@ export function PromptNode({ node, expanded = false }: { node: CanvasNodeState;
       Promise.all(
         assistantTurns.map(async ({ turn, index }) => {
           const html = await renderMarkdown(turn.text);
-          return { index, html: sanitizeHtml(html) };
+          return { index, html: sanitizeMarkdownHtml(html) };
         }),
       ).then((results) => {
         if (cancelled) return;
@@ -328,7 +316,7 @@ export function PromptNode({ node, expanded = false }: { node: CanvasNodeState;
             border: '1px solid var(--c-line)',
             borderRadius: 'var(--radius-sm)',
             color: 'var(--c-text)',
-            fontFamily: 'var(--font)',
+            fontFamily: 'var(--font-ui)',
             fontSize: '13px',
             lineHeight: '1.5',
             padding: '8px 10px',
@@ -529,7 +517,7 @@ export function PromptNode({ node, expanded = false }: { node: CanvasNodeState;
                 border: '1px solid var(--c-line)',
                 borderRadius: 'var(--radius-sm)',
                 color: 'var(--c-text)',
-                fontFamily: 'var(--font)',
+                fontFamily: 'var(--font-ui)',
                 fontSize: '12px',
                 lineHeight: '1.5',
                 padding: '6px 8px',

package/src/client/nodes/ResponseNode.tsx

@@ -1,19 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { renderMarkdown, submitCanvasPrompt } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
-
-/** Strip dangerous HTML from rendered markdown to prevent XSS. */
-function sanitizeHtml(html: string): string {
-  return html
-    .replace(/<script[\s>][\s\S]*?<\/script>/gi, '')
-    .replace(/<iframe[\s>][\s\S]*?<\/iframe>/gi, '')
-    .replace(/<object[\s>][\s\S]*?<\/object>/gi, '')
-    .replace(/<embed[\s>][\s\S]*?(?:\/>|<\/embed>)/gi, '')
-    .replace(/<link[\s>][\s\S]*?(?:\/>|<\/link>)/gi, '')
-    .replace(/\bon\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
-    .replace(/href\s*=\s*"javascript:[^"]*"/gi, 'href="#"')
-    .replace(/href\s*=\s*'javascript:[^']*'/gi, "href='#'");
-}
+import { sanitizeMarkdownHtml } from './markdown-sanitize';
 
 function RenderedMarkdown({ html }: { html: string }) {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -25,7 +13,7 @@ function RenderedMarkdown({ html }: { html: string }) {
     if (!html) return;
 
     const template = document.createElement('template');
-    template.innerHTML = html;
+    template.innerHTML = sanitizeMarkdownHtml(html);
     container.append(template.content.cloneNode(true));
   }, [html]);
 
@@ -48,7 +36,7 @@ export function ResponseNode({ node, expanded = false }: { node: CanvasNodeState
     }
     let cancelled = false;
     renderMarkdown(content).then((html) => {
-      if (!cancelled) setRendered(sanitizeHtml(html));
+      if (!cancelled) setRendered(sanitizeMarkdownHtml(html));
     });
     return () => {
       cancelled = true;

package/src/client/nodes/StatusNode.tsx

@@ -64,9 +64,9 @@ export function StatusNode({ node }: { node: CanvasNodeState }) {
 
       {/* Active tool */}
       {activeTool && (
-        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--c-warn)' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--c-agent)' }}>
           <span style={{ fontSize: '10px' }}>⚙</span>
-          <span style={{ fontFamily: 'var(--mono)', fontSize: '11px' }}>{activeTool}</span>
+          <span style={{ fontFamily: 'var(--font-code)', fontSize: '11px' }}>{activeTool}</span>
         </div>
       )}
 

package/src/client/nodes/StatusSummary.tsx

@@ -23,7 +23,9 @@ export function StatusSummary({ node }: { node: CanvasNodeState }) {
       />
       <span style={{ color: phaseColor, fontSize: '10px', textTransform: 'uppercase', fontWeight: 600 }}>{phase}</span>
       {activeTool && (
-        <span style={{ color: 'var(--c-warn)', fontSize: '10px', fontFamily: 'var(--mono)' }}>⚙ {activeTool}</span>
+        <span style={{ color: 'var(--c-agent)', fontSize: '10px', fontFamily: 'var(--font-code)' }}>
+          ⚙ {activeTool}
+        </span>
       )}
       {subagent && subagent.state !== 'completed' && (
         <span style={{ color: 'var(--c-subagent)', fontSize: '10px' }}>⠉ {subagent.name}</span>

package/src/client/nodes/TraceNode.tsx

@@ -1,10 +1,12 @@
 import type { CanvasNodeState } from '../types';
 import { buildTraceDisplayModel } from './trace-model';
 
+// Categories carry no colour (docs/design.md, "Kinds carry no colour"); only a
+// subagent's work takes its meaning colour.
 const CATEGORY_COLORS: Record<string, string> = {
-  mcp: 'var(--c-accent)',
-  file: 'var(--c-warn)',
-  subagent: 'var(--c-purple)',
+  mcp: 'var(--c-muted)',
+  file: 'var(--c-muted)',
+  subagent: 'var(--c-subagent)',
   other: 'var(--c-muted)',
 };
 
@@ -68,7 +70,7 @@ export function TraceNode({ node }: { node: CanvasNodeState }) {
       >
         <div
           style={{
-            fontFamily: 'var(--mono)',
+            fontFamily: 'var(--font-code)',
             fontSize: '11px',
             fontWeight: 600,
             color: catColor,

package/src/client/nodes/WebpageNode.tsx

@@ -56,7 +56,7 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
     return <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>No webpage URL set</div>;
   }
 
-  const statusTone = status === 'ready' ? 'var(--c-ok)' : status === 'error' ? 'var(--c-danger)' : 'var(--c-warn)';
+  const statusTone = status === 'ready' ? 'var(--c-ok)' : status === 'error' ? 'var(--c-danger)' : 'var(--c-muted)';
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', height: '100%' }}>

package/src/client/nodes/ax-node-actions.ts

@@ -27,8 +27,8 @@ export async function runNodeAxInteraction(
 export const axNodeActionButtonStyle = {
   padding: '3px 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/iframe-document-url.ts

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { workbenchConnectionEpoch } from '../state/canvas-store';
 import { iframeMode } from '../state/iframe-mode';
 import { surfaceContentHash } from './surface-url';
+import { workbenchFetch } from '../state/workbench-transport';
 
 interface FrameDocumentCreateResponse {
   ok: boolean;
@@ -21,7 +22,7 @@ function isFrameDocumentCreateResponse(value: unknown): value is FrameDocumentCr
 }
 
 export async function createIframeDocumentUrl(html: string, sandbox: string): Promise<string> {
-  const response = await fetch('/api/canvas/frame-documents', {
+  const response = await workbenchFetch('/api/canvas/frame-documents', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ html, sandbox }),
@@ -83,7 +84,7 @@ export function useIframeDocument(
       return;
     }
     let cancelled = false;
-    void fetch(src, { method: 'HEAD' })
+    void workbenchFetch(src, { method: 'HEAD' })
       .then((res) => {
         if (cancelled) return;
         if (res.ok) {

package/src/client/nodes/markdown-sanitize.ts

@@ -0,0 +1,10 @@
+import DOMPurify from 'dompurify';
+
+/** Sanitize rendered Markdown before it enters the privileged workbench DOM. */
+export function sanitizeMarkdownHtml(html: string): string {
+  return DOMPurify.sanitize(html, {
+    // Markdown does not need these active document surfaces. Keep regular
+    // inputs so marked's GFM task checkboxes remain interactive.
+    FORBID_TAGS: ['form', 'svg', 'math'],
+  });
+}

package/src/client/nodes/surface-url.ts

@@ -2,6 +2,8 @@ import { canvasTheme } from '../state/canvas-store';
 import { openNodeInSystemBrowserRequest } from '../state/intent-bridge';
 import { canOpenNodeAsSurface } from '../../shared/surface.js';
 import type { CanvasNodeState } from '../types';
+import { isHostedWorkbench } from '../state/workbench-transport';
+import { showToast } from '../state/attention-bridge';
 
 /**
  * Stable content hash (djb2) used to cache-bust the surface iframe `src` when a
@@ -52,6 +54,14 @@ export function canOpenAsSite(node: CanvasNodeState): boolean {
  * and headless/disabled-browser environments.
  */
 export async function openNodeAsSite(node: CanvasNodeState): Promise<void> {
+  if (isHostedWorkbench()) {
+    showToast(
+      'context',
+      'Open in focus mode',
+      'This surface has no public URL. Use Expand to view it here, or export the board to download it.',
+    );
+    return;
+  }
   const url = nodeSurfaceUrl(node.id);
   const res = await openNodeInSystemBrowserRequest(node.id, url);
   if (!res.opened) window.open(url, '_blank', 'noopener');

package/src/client/nodes/use-surface-frame.ts

@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'preact/hooks';
 import { iframeMode } from '../state/iframe-mode';
+import { isHostedWorkbench, workbenchFetch } from '../state/workbench-transport';
 
 function isSameOriginUrl(url: string): boolean {
+  if (isHostedWorkbench()) return url.startsWith('/') && !url.startsWith('//');
   try {
     return new URL(url, window.location.origin).origin === window.location.origin;
   } catch {
@@ -29,7 +31,7 @@ export function useSurfaceFrame(url: string): { src?: string; srcdoc?: string }
     let cancelled = false;
     // Ask the server to inline bundle assets (the mermaid renderer): hosts
     // that force srcdoc mode block sub-frame subresource requests too.
-    void fetch(`${url}${url.includes('?') ? '&' : '?'}inline-assets=1`, { credentials: 'same-origin' })
+    void workbenchFetch(`${url}${url.includes('?') ? '&' : '?'}inline-assets=1`, { credentials: 'same-origin' })
       .then((res) => (res.ok ? res.text() : Promise.reject(new Error(`HTTP ${res.status}`))))
       .then((html) => {
         if (!cancelled) setDoc({ url, html });