pmx-canvas 0.7.2 → 0.8.0

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-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/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 });

package/src/client/nodes/use-workbench-asset.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'preact/hooks';
+import { isHostedWorkbench, workbenchFetch } from '../state/workbench-transport';
+
+/** Asset bytes travel through the host, not a localhost URL in the user's browser. */
+export function useWorkbenchAsset(path: string): string | undefined {
+  const hosted = isHostedWorkbench() && path.startsWith('/');
+  const [asset, setAsset] = useState<{ path: string; url: string } | null>(null);
+  useEffect(() => {
+    if (!hosted) return;
+    let cancelled = false;
+    void workbenchFetch(path)
+      .then(async (response) => {
+        if (!response.ok) throw new Error(`Asset read failed: ${response.status}`);
+        const reader = new FileReader();
+        reader.onload = () => {
+          if (!cancelled && typeof reader.result === 'string') setAsset({ path, url: reader.result });
+        };
+        reader.readAsDataURL(await response.blob());
+      })
+      .catch((error: unknown) => console.error('[workbench-asset]', error));
+    return () => {
+      cancelled = true;
+    };
+  }, [path, hosted]);
+  return hosted ? (asset?.path === path ? asset.url : undefined) : path;
+}

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/attention-bridge.ts

@@ -11,7 +11,6 @@ import {
 import {
   pushAttentionHistory,
   resetAttentionState,
-  setAttentionFocus,
   setAttentionPulse,
   setAttentionToast,
   type AttentionEntry,
@@ -242,11 +241,6 @@ function entryFromEvent(event: SemanticWatchEvent): AttentionEntry | null {
   }
 }
 
-function applyAttentionSnapshot(): void {
-  const snapshot = reducer.getAttentionSnapshot();
-  setAttentionFocus(snapshot.primaryFocusNodeIds, snapshot.secondaryFocusNodeIds, snapshot.regions);
-}
-
 function flushToastQueue(): void {
   if (toastTimer !== null) return;
   const next = toastQueue.shift() ?? null;
@@ -322,8 +316,6 @@ export function syncAttentionFromSse(message: SseMessage): void {
     .map((event) => entryFromEvent(event))
     .filter((entry): entry is AttentionEntry => entry !== null);
 
-  applyAttentionSnapshot();
-
   for (const entry of entries) {
     if (shouldSuppressEntry(entry)) continue;
     pushAttentionHistory(entry);

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

@@ -1,5 +1,4 @@
 import { signal } from '@preact/signals';
-import type { SemanticAttentionRegion } from '../../shared/semantic-attention.js';
 
 export type AttentionTone = 'context' | 'relationship' | 'group' | 'cluster' | 'neighborhood' | 'remove';
 
@@ -14,9 +13,6 @@ export interface AttentionEntry {
 
 export const attentionToast = signal<AttentionEntry | null>(null);
 export const attentionHistory = signal<AttentionEntry[]>([]);
-export const attentionPrimaryNodeIds = signal<Set<string>>(new Set());
-export const attentionSecondaryNodeIds = signal<Set<string>>(new Set());
-export const attentionRegions = signal<SemanticAttentionRegion[]>([]);
 export const attentionPulseNodeIds = signal<Set<string>>(new Set());
 export const attentionHistoryOpen = signal<boolean>(false);
 export const attentionHistoryUnread = signal<number>(0);
@@ -24,9 +20,6 @@ export const attentionHistoryUnread = signal<number>(0);
 export function resetAttentionState(): void {
   attentionToast.value = null;
   attentionHistory.value = [];
-  attentionPrimaryNodeIds.value = new Set();
-  attentionSecondaryNodeIds.value = new Set();
-  attentionRegions.value = [];
   attentionPulseNodeIds.value = new Set();
   attentionHistoryOpen.value = false;
   attentionHistoryUnread.value = 0;
@@ -41,16 +34,6 @@ export function closeAttentionHistory(): void {
   attentionHistoryOpen.value = false;
 }
 
-export function setAttentionFocus(
-  primaryNodeIds: string[],
-  secondaryNodeIds: string[],
-  regions: SemanticAttentionRegion[],
-): void {
-  attentionPrimaryNodeIds.value = new Set(primaryNodeIds);
-  attentionSecondaryNodeIds.value = new Set(secondaryNodeIds);
-  attentionRegions.value = regions;
-}
-
 export function setAttentionToast(entry: AttentionEntry | null): void {
   attentionToast.value = entry;
 }

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

@@ -11,6 +11,7 @@ import {
 import { computeAutoArrange } from '../../shared/auto-arrange';
 import { canvasArea, canvasAreaCenter, canvasFitInsets } from '../canvas/canvas-area';
 import { pushCanvasUpdate, requestBestEffort, requestOk, updateViewportFromClient } from './intent-bridge';
+import { isHostedWorkbench } from './workbench-transport';
 
 function logCanvasStoreError(action: string, error: unknown): void {
   console.error(`[canvas-store] ${action} failed`, error);
@@ -39,7 +40,7 @@ export const reconnectAttempt = signal<number>(0);
 export const reconnectDelay = signal<number>(0);
 export const sessionId = signal<string>('');
 export const traceEnabled = signal<boolean>(false);
-export const canvasTheme = signal<string>('dark');
+export const canvasTheme = signal<string>('harbor');
 export const hasInitialServerLayout = signal<boolean>(false);
 // Compact AX state snapshot (work items, focus, …) mirrored from the server and
 // pushed into AX-enabled surfaces so authored boards can render the live queue.
@@ -58,6 +59,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 +154,7 @@ export function resetCanvasInteractionState(): void {
     expandedCloseTimer = null;
   }
   batch(() => {
+    canvasInteractionEpoch.value += 1;
     activeNodeId.value = null;
     expandedNodeId.value = null;
     pendingExpandedNodeCloseId.value = null;
@@ -772,7 +776,8 @@ export function persistLayout(options: { recordHistory?: boolean } = {}): void {
       })),
       contextPinnedNodeIds: Array.from(contextPinnedNodeIds.value),
     };
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(layout));
+    // Opaque MCP App frames have no localStorage; the daemon persists layout.
+    if (!isHostedWorkbench()) localStorage.setItem(STORAGE_KEY, JSON.stringify(layout));
     void pushCanvasUpdate(nodeUpdates, options);
   } catch (error) {
     logCanvasStoreError('persistLayout', error);

package/src/client/state/context-status-store.ts

@@ -0,0 +1,66 @@
+import { signal } from '@preact/signals';
+import { activeBoardId } from './boards-store';
+import { requestJson } from './intent-bridge';
+
+/**
+ * What agents did with the board's context (docs/design/AgentContext.dc.html):
+ * per node, the latest agent read of its content and the revision it read;
+ * per pin, who pinned it, when and why. Server truth from
+ * `GET /api/canvas/ax/context-status`, refetched when a read lands
+ * (`context-status-changed`), when pins change, and on (re)connect.
+ */
+
+export interface NodeReadStatus {
+  nodeId: string;
+  lastReadAt: string;
+  lastReadBy: string;
+  readRevision: number;
+  readCount: number;
+}
+
+export interface ContextPinMeta {
+  pinnedBy: { actor: 'human' | 'agent' | 'system' | 'unknown'; source: string; agentId?: string };
+  pinnedAt: string;
+  reason?: string;
+}
+
+interface ContextStatusResponse {
+  ok?: boolean;
+  boardId?: string | null;
+  nodes?: NodeReadStatus[];
+  pins?: Record<string, ContextPinMeta>;
+}
+
+export const nodeReadStatus = signal<Map<string, NodeReadStatus>>(new Map());
+export const contextPinMeta = signal<Record<string, ContextPinMeta>>({});
+
+export function applyContextStatus(response: ContextStatusResponse): void {
+  nodeReadStatus.value = new Map((response.nodes ?? []).map((entry) => [entry.nodeId, entry]));
+  contextPinMeta.value = response.pins ?? {};
+}
+
+export async function refreshContextStatus(): Promise<void> {
+  const response = await requestJson<ContextStatusResponse>('fetchContextStatus', '/api/canvas/ax/context-status', {});
+  // A late answer for a board you have since left must not mark this one.
+  if (response.ok && response.boardId === activeBoardId.value) applyContextStatus(response);
+}
+
+/** How an agent's context relates to one pinned node — the mark its header shows. */
+export type PinnedReadState =
+  | { kind: 'not-read' }
+  | { kind: 'read'; by: string; at: string; count: number }
+  | { kind: 'changed'; by: string; at: string };
+
+export function pinnedReadState(nodeId: string, currentRevision: number): PinnedReadState {
+  const read = nodeReadStatus.value.get(nodeId);
+  const pinnedAt = contextPinMeta.value[nodeId]?.pinnedAt;
+  // Pinned after the latest read: the agent has not loaded it since you pinned it.
+  if (!read || (pinnedAt && read.lastReadAt < pinnedAt)) return { kind: 'not-read' };
+  if (currentRevision > read.readRevision) return { kind: 'changed', by: read.lastReadBy, at: read.lastReadAt };
+  return { kind: 'read', by: read.lastReadBy, at: read.lastReadAt, count: read.readCount };
+}
+
+/** Display name for an attributed writer: its agent id, else its transport label. */
+export function writerName(actor: { source: string; agentId?: string }): string {
+  return actor.agentId?.trim() || actor.source;
+}

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

@@ -6,6 +6,7 @@ import {
 } from '../../shared/human-presence.js';
 import { requestBestEffort, vetoGhostIntent } from './intent-bridge';
 import { intents, removeIntent } from './intent-store';
+import { isHostedWorkbench } from './workbench-transport';
 
 /**
  * Human collaborator presence (rail-chrome-v2 phase 8). This tab reports its
@@ -64,6 +65,7 @@ let lastSentAt = 0;
 let pending: ReturnType<typeof setTimeout> | null = null;
 
 function post(body: Record<string, unknown>): void {
+  if (isHostedWorkbench()) return;
   void requestBestEffort('humanPresence', '/api/canvas/human-presence', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },

package/src/client/state/iframe-mode.ts

@@ -23,6 +23,7 @@
  */
 import { signal } from '@preact/signals';
 import { IFRAME_PROBE_MESSAGE_SOURCE } from '../../shared/iframe-probe.js';
+import { isHostedWorkbench } from './workbench-transport';
 
 export type IframeMode = 'src' | 'srcdoc';
 
@@ -105,6 +106,10 @@ function isAmpOrbHost(): boolean {
 export function resolveIframeMode(
   opts: { embedded?: boolean; ampOrb?: boolean; probeTimeoutMs?: number } = {},
 ): Promise<IframeMode> {
+  if (isHostedWorkbench()) {
+    iframeMode.value = 'srcdoc';
+    return Promise.resolve('srcdoc');
+  }
   if (iframeMode.value) return Promise.resolve(iframeMode.value);
   if (pending) return pending;
   const forced = forcedIframeMode();