pmx-canvas 0.7.3 → 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-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/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.
@@ -775,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();

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

@@ -1,8 +1,10 @@
 import { canvasArea } from '../canvas/canvas-area';
 import { showToast } from './attention-bridge';
+import { isHostedWorkbench, workbenchFetch } from './workbench-transport';
 import type { AgentPresenceSnapshot } from '../../shared/agent-presence.js';
 import type { CanvasEdge } from '../types';
 import { addEdge, canvasInteractionEpoch, nodes } from './canvas-store';
+import { boardsLoaded } from './boards-store';
 function logRequestError(action: string, error: unknown): void {
   console.error(`[intent-bridge] ${action} failed`, error);
 }
@@ -29,6 +31,7 @@ export const tabAgentKey: string | null = (() => {
  * opened with `?agent=<key>` identifies as that agent instead.
  */
 function withWorkbenchMarker(init?: RequestInit): RequestInit {
+  if (isHostedWorkbench()) return init ?? {};
   const headers = { ...(init?.headers as Record<string, string> | undefined) };
   if (tabAgentKey) {
     headers['x-pmx-source'] = tabAgentKey;
@@ -61,7 +64,7 @@ async function readJsonBody(res: Response): Promise<unknown> {
 
 export async function requestJson<T>(action: string, url: string, fallback: T, init?: RequestInit): Promise<T> {
   try {
-    const res = await fetch(url, withWorkbenchMarker(init));
+    const res = await workbenchFetch(url, withWorkbenchMarker(init));
     const body = await readJsonBody(res);
     reportRefusedWrite(res, init, body);
     if (body === null) throw new Error(`${res.status} response had no JSON body`);
@@ -74,7 +77,7 @@ export async function requestJson<T>(action: string, url: string, fallback: T, i
 
 export async function requestOk(action: string, url: string, init?: RequestInit): Promise<{ ok: boolean }> {
   try {
-    const res = await fetch(url, withWorkbenchMarker(init));
+    const res = await workbenchFetch(url, withWorkbenchMarker(init));
     if (!res.ok) reportRefusedWrite(res, init, await readJsonBody(res));
     return { ok: res.ok };
   } catch (error) {
@@ -85,7 +88,7 @@ export async function requestOk(action: string, url: string, init?: RequestInit)
 
 export async function requestBestEffort(action: string, url: string, init?: RequestInit): Promise<void> {
   try {
-    const res = await fetch(url, withWorkbenchMarker(init));
+    const res = await workbenchFetch(url, withWorkbenchMarker(init));
     if (!res.ok) reportRefusedWrite(res, init, await readJsonBody(res));
   } catch (error) {
     logRequestError(action, error);
@@ -328,8 +331,10 @@ export async function updateNodeFromClient(
     data?: Record<string, unknown>;
     /** Groups: replace the membership list (positions preserved). */
     children?: string[];
+    expectedContentRevision?: number;
+    expectedBoardId?: string | null;
   },
-): Promise<{ ok: boolean; id?: string }> {
+): Promise<{ ok: boolean; id?: string; contentRevision?: number }> {
   return requestJson(
     'updateNodeFromClient',
     `/api/canvas/node/${encodeURIComponent(id)}`,
@@ -477,6 +482,7 @@ function clientWindowSize(): { clientWidth: number; clientHeight: number } | Rec
  * window size before the human ever pans or zooms.
  */
 export async function reportClientViewportSize(): Promise<void> {
+  if (isHostedWorkbench() && !boardsLoaded.value) return;
   const size = clientWindowSize();
   if (!('clientWidth' in size)) return;
   await requestBestEffort('reportClientViewportSize', '/api/canvas/viewport', {

package/src/client/state/near-pin-store.ts

@@ -0,0 +1,53 @@
+import { computed } from '@preact/signals';
+import { findNeighborhoods } from '../../server/spatial-analysis.js';
+import { contextPinnedNodeIds, nodes } from './canvas-store';
+
+/**
+ * Near a pin (docs/design/NearPin.dc.html): each pinned node pulls up to five
+ * unpinned nodes within 600 px into the agent's brief as title + short
+ * summary. Same rule as the server's brief (`findNeighborhoods`), so the mark
+ * claims exactly what the agent receives.
+ */
+export interface NearPin {
+  pinNodeId: string;
+  pinTitle: string;
+}
+
+let lastKey = '';
+let lastNear = new Map<string, NearPin[]>();
+
+/**
+ * Unpinned node id → the pins it is near, nearest first. Every drag frame
+ * moves a node, so the result keeps its identity while no node's set of pins
+ * changes: the chips subscribed to it re-render only when a neighbourhood does.
+ */
+export const nearPins = computed<Map<string, NearPin[]>>(() => {
+  const pins = contextPinnedNodeIds.value;
+  const near = new Map<string, NearPin[]>();
+  if (pins.size > 0) {
+    const nearest = new Map<string, Array<NearPin & { distance: number }>>();
+    for (const neighborhood of findNeighborhoods([...nodes.value.values()], pins)) {
+      const pinTitle = neighborhood.pinnedNodeTitle ?? neighborhood.pinnedNodeId;
+      for (const neighbor of neighborhood.neighbors) {
+        const list = nearest.get(neighbor.id) ?? [];
+        list.push({ pinNodeId: neighborhood.pinnedNodeId, pinTitle, distance: neighbor.distance });
+        nearest.set(neighbor.id, list);
+      }
+    }
+    for (const [id, list] of nearest) {
+      list.sort((a, b) => a.distance - b.distance);
+      near.set(
+        id,
+        list.map(({ pinNodeId, pinTitle }) => ({ pinNodeId, pinTitle })),
+      );
+    }
+  }
+  const key = [...near]
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([id, list]) => `${id}:${list.map((pin) => `${pin.pinNodeId}=${pin.pinTitle}`).join(',')}`)
+    .join('|');
+  if (key === lastKey) return lastNear;
+  lastKey = key;
+  lastNear = near;
+  return near;
+});

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

@@ -32,18 +32,13 @@ export const writersSheetOpen = signal(false);
 export const activityFilter = signal<string | null>(null);
 
 /**
- * Per-writer identity colors from the accent set, agent-violet first,
- * assigned in order of first appearance and stable for the page's life — a
- * writer that fades and returns keeps its color.
+ * A writer's colour says what it is, not who: agents take the agent violet,
+ * subagents (fleet workers) the subagent fuchsia. Writers are told apart by
+ * name and initial (docs/design.md, "Kinds carry no colour").
  */
-const WRITER_PALETTE = ['var(--c-purple)', 'var(--c-accent)', 'var(--c-ok)', 'var(--c-warn)', 'var(--c-danger)'];
-const writerColors = new Map<string, string>();
 export function writerColor(sessionId: string): string {
-  const known = writerColors.get(sessionId);
-  if (known) return known;
-  const color = WRITER_PALETTE[writerColors.size % WRITER_PALETTE.length]!;
-  writerColors.set(sessionId, color);
-  return color;
+  const presence = agentPresences.value.find((entry) => entry.sessionId === sessionId);
+  return presence?.parentAgentId ? 'var(--c-subagent)' : 'var(--c-agent)';
 }
 
 /** Avatar initial: first letter of the label, upper-cased. */