pmx-canvas 0.7.3 → 0.8.0

package/src/client/canvas/ExportDialog.tsx

@@ -2,6 +2,7 @@ import { signal } from '@preact/signals';
 import { useEffect, useState } from 'preact/hooks';
 import { requestJson } from '../state/intent-bridge';
 import { activeBoardId } from '../state/boards-store';
+import { downloadWorkbenchExport, isHostedWorkbench } from '../state/workbench-transport';
 
 interface ExportManifest {
   boardId: string;
@@ -43,6 +44,7 @@ export function ExportDialog() {
   const [manifest, setManifest] = useState<ExportManifest | null>(null);
   const [result, setResult] = useState<ExportResult | null>(null);
   const [busy, setBusy] = useState(false);
+  const [downloadError, setDownloadError] = useState('');
   const open = exportDialogOpen.value;
   const boardId = activeBoardId.value;
 
@@ -50,6 +52,7 @@ export function ExportDialog() {
     if (!open || !boardId) return;
     let current = true;
     setResult(null);
+    setDownloadError('');
     setManifest(null);
     void requestJson<{ manifest?: ExportManifest } | null>(
       'exportPreview',
@@ -174,13 +177,37 @@ export function ExportDialog() {
               Saved ({sizeLabel(result.bytes)}): <code>{result.path}</code>
             </div>
             <div class="export-dialog-links">
-              <a href={result.url} target="_blank" rel="noopener noreferrer">
-                Open
-              </a>
-              <a class="is-primary" href={`${result.url}?download=1`}>
-                Download
-              </a>
+              {isHostedWorkbench() ? (
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={async () => {
+                    setBusy(true);
+                    setDownloadError('');
+                    try {
+                      await downloadWorkbenchExport(result.url);
+                    } catch (error) {
+                      setDownloadError(error instanceof Error ? error.message : 'Download failed. Try again.');
+                    } finally {
+                      setBusy(false);
+                    }
+                  }}
+                >
+                  {busy ? 'Downloading…' : 'Download'}
+                </button>
+              ) : (
+                <>
+                  <a href={result.url} target="_blank" rel="noopener noreferrer">
+                    Open
+                  </a>
+                  <a class="is-primary" href={`${result.url}?download=1`}>
+                    Download
+                  </a>
+                </>
+              )}
             </div>
+            {isHostedWorkbench() && <p>Download the HTML file to open it outside ChatGPT.</p>}
+            {downloadError && <p role="alert">{downloadError}</p>}
           </div>
         )}
         <div class="text-prompt-actions">

package/src/client/canvas/IntentLayer.tsx

@@ -8,8 +8,8 @@ import type { CanvasNodeState } from '../types';
 
 /**
  * Ghost Cursor of Intent overlay. Renders the agent's pre-commit moves as faint
- * placeholders in world space (it lives inside the canvas transform, like
- * FocusFieldLayer, so positions are world coords). Five kinds:
+ * placeholders in world space (it lives inside the canvas transform, so positions
+ * are world coords). Five kinds:
  *   create  → dashed ghost node with icon + type badge
  *   move    → ghost at the destination + a dashed trail from the current node
  *   connect → dashed bezier in the edge-type color

package/src/client/canvas/Minimap.tsx

@@ -1,12 +1,16 @@
-import { agentIdentityHue } from '../../shared/agent-presence.js';
 import type { Signal } from '@preact/signals';
 import { useCallback, useRef } from 'preact/hooks';
 import { fenceRectFromNodes } from '../../shared/scope-fence.js';
-import { selectedNodeIds } from '../state/canvas-store';
-import { agentPresences, presenceWorldPosition } from '../state/presence-store';
+import { contextPinnedNodeIds, selectedNodeIds } from '../state/canvas-store';
+import {
+  agentPresences,
+  mutatingNodeIds,
+  presenceWorldPosition,
+  sessionActive,
+  writerColor,
+} from '../state/presence-store';
 import { scopeFence } from '../state/session-store';
 import type { CanvasEdge, CanvasNodeState, ViewportState } from '../types';
-import { KIND_COLOR } from './kind-colors';
 
 /**
  * Minimap v2 (rail-chrome-v2 phase 7, design item 19): a true-scale node map
@@ -141,6 +145,8 @@ export function Minimap({ viewport, nodes, onNavigate, containerWidth, container
   );
 
   const selected = selectedNodeIds.value;
+  const pinned = contextPinnedNodeIds.value;
+  const agentAtWork = sessionActive.value ? mutatingNodeIds.value : new Set<string>();
   const fence = scopeFence.value;
   const fenceRect = fence
     ? fenceRectFromNodes(
@@ -177,14 +183,13 @@ export function Minimap({ viewport, nodes, onNavigate, containerWidth, container
         return (
           <span
             key={node.id}
-            class={`minimap-node${isGroup ? ' is-group' : ''}${selected.has(node.id) ? ' is-selected' : ''}`}
+            class={`minimap-node${isGroup ? ' is-group' : ''}${selected.has(node.id) ? ' is-selected' : ''}${pinned.has(node.id) ? ' is-pinned' : ''}${agentAtWork.has(node.id) ? ' is-agent' : ''}`}
             data-kind={node.type}
             style={{
               left: `${toX(node.position.x)}px`,
               top: `${toY(node.position.y)}px`,
               width: `${Math.max(isGroup ? 6 : 4, node.size.width * scale)}px`,
               height: `${Math.max(isGroup ? 5 : 3, node.size.height * scale)}px`,
-              '--kind': KIND_COLOR[node.type],
             }}
           />
         );
@@ -207,7 +212,7 @@ export function Minimap({ viewport, nodes, onNavigate, containerWidth, container
           style={{
             left: `${toX(dot.at.x) - 4}px`,
             top: `${toY(dot.at.y) - 4}px`,
-            '--identity-color': `hsl(${agentIdentityHue(dot.id)} 65% 62%)`,
+            '--identity-color': writerColor(dot.id),
           }}
         />
       ))}

package/src/client/canvas/NodeContextMark.tsx

@@ -0,0 +1,156 @@
+import { useState } from 'preact/hooks';
+import { contextPinMeta, pinnedReadState, writerName } from '../state/context-status-store';
+import { centerDistance } from '../../server/spatial-analysis.js';
+import { nodes } from '../state/canvas-store';
+import { nearPins } from '../state/near-pin-store';
+import type { CanvasNodeState } from '../types';
+import { BarHint } from './BarHint';
+
+// Glyphs from docs/design/AgentContext.dc.html (24-unit paths).
+export const GLYPHS = {
+  eye: 'M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5',
+  eyeOff:
+    'M3 3l18 18M10.6 6.1A10 10 0 0 1 12 6c6.5 0 10 6 10 6a17 17 0 0 1-3 3.6M6.6 6.6C3.8 8.3 2 12 2 12s3.5 6 10 6a9.6 9.6 0 0 0 4.4-1',
+  spark: 'M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z',
+  pen: 'M4 20l4.2-1L19 8.2 15.8 5 5 15.8z',
+  warn: 'M12 4l9 16H3zM12 10v4M12 17v.5',
+} as const;
+
+interface Mark {
+  tone: 'agent' | 'muted' | 'warn';
+  glyph: keyof typeof GLYPHS;
+  word: string;
+  label: string;
+  body: string;
+}
+
+function clock(iso: string): string {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? iso : date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+function markFor(node: CanvasNodeState, pinned: boolean): Mark | null {
+  if (pinned) {
+    const pin = contextPinMeta.value[node.id];
+    const pinnedBy =
+      pin?.pinnedBy.actor === 'agent'
+        ? ` Pinned by ${writerName(pin.pinnedBy)}${pin.reason ? `: ${pin.reason}` : ''}.`
+        : '';
+    const state = pinnedReadState(node.id, node.contentRevision ?? 0);
+    if (state.kind === 'not-read') {
+      return {
+        tone: 'muted',
+        glyph: 'eyeOff',
+        word: 'not read',
+        label: 'Not read yet',
+        body: `In context, but no agent has loaded it since it was pinned.${pinnedBy}`,
+      };
+    }
+    if (state.kind === 'changed') {
+      return {
+        tone: 'warn',
+        glyph: 'warn',
+        word: 'changed since read',
+        label: "The agent's copy is out of date",
+        body: `Changed after ${state.by} read it at ${clock(state.at)}.${pinnedBy}`,
+      };
+    }
+    return {
+      tone: 'agent',
+      glyph: 'eye',
+      word: 'read',
+      label: 'Read by the agent',
+      body: `${state.count > 1 ? `Read ${state.count} times · last` : 'Read'} ${clock(state.at)} by ${state.by}.${pinnedBy}`,
+    };
+  }
+  // A person's edit ends the agent's byline (decided 2026-10-05).
+  if (node.lastEditedBy?.actor === 'human') return null;
+  if (node.createdBy?.actor === 'agent') {
+    const name = writerName(node.createdBy);
+    return {
+      tone: 'agent',
+      glyph: 'spark',
+      word: `by ${name}`,
+      label: `Created by ${name}`,
+      body: 'The byline stays until you edit the node.',
+    };
+  }
+  if (node.lastEditedBy?.actor === 'agent') {
+    const name = writerName(node.lastEditedBy);
+    return {
+      tone: 'agent',
+      glyph: 'pen',
+      word: 'edited',
+      label: `Edited by ${name}`,
+      body: 'The mark stays until you edit the node.',
+    };
+  }
+  return null;
+}
+
+/** The header chip saying what agents did with this node (one per node; glyph + word). */
+export function NodeContextMark({ node, pinned }: { node: CanvasNodeState; pinned: boolean }) {
+  const mark = markFor(node, pinned);
+  if (!mark) return null;
+  return (
+    <BarHint label={mark.label} body={mark.body} align="end" tapToOpen>
+      <span class={`node-context-mark is-${mark.tone}`} data-mark={mark.word}>
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d={GLYPHS[mark.glyph]} />
+        </svg>
+        {mark.word}
+      </span>
+    </BarHint>
+  );
+}
+
+/** Pinned by an agent: the violet dot on the pin badge. */
+export function isAgentPin(nodeId: string): boolean {
+  return contextPinMeta.value[nodeId]?.pinnedBy.actor === 'agent';
+}
+
+/**
+ * Near a pin (docs/design/NearPin.dc.html): a dotted pin-blue chip on an
+ * unpinned node the brief carries as title + short summary. Weaker than "in
+ * context" on purpose: the agent never gets this node's full content.
+ */
+export function NearPinMark({ node, pinned }: { node: CanvasNodeState; pinned: boolean }) {
+  // The pins' titles join this node's DOM only while the chip is hovered or
+  // focused: at rest the node must not contain other nodes' titles.
+  const [open, setOpen] = useState(false);
+  const near = pinned ? undefined : nearPins.value.get(node.id);
+  if (!near || near.length === 0) return null;
+  const word = near.length > 1 ? `near ${near.length}` : 'near';
+  // Distances change every drag frame; read them only while the hint is open.
+  const where = open
+    ? near
+        .map((pin) => {
+          const pinNode = nodes.value.get(pin.pinNodeId);
+          return pinNode ? `“${pin.pinTitle}” (${Math.round(centerDistance(node, pinNode))} px)` : `“${pin.pinTitle}”`;
+        })
+        .join(', ')
+    : '';
+  return (
+    <BarHint
+      label={open ? `Near ${where}` : 'Near a pin'}
+      body="The agent gets its title and a short summary, not its full content. Pin it to send its content."
+      align="end"
+      tapToOpen
+    >
+      <span
+        class="node-near-mark"
+        data-near={near.map((pin) => pin.pinNodeId).join(' ')}
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        onFocusIn={() => setOpen(true)}
+        onFocusOut={() => setOpen(false)}
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <circle cx="12" cy="12" r="8" class="node-near-ring" />
+          <circle cx="12" cy="12" r="2.2" class="node-near-dot" />
+        </svg>
+        {word}
+      </span>
+    </BarHint>
+  );
+}

package/src/client/canvas/SessionPanel.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'preact/hooks';
 import { IconChevronRight, IconUndo } from '../icons';
 import { useNow } from './use-now';
-import { agentIdentityHue, agentPhaseLabel } from '../../shared/agent-presence.js';
+import { agentPhaseLabel } from '../../shared/agent-presence.js';
 import { formatCountdown, gateRemainingMs } from '../../shared/approval-gates.js';
 import { focusNode, selectedNodeIds } from '../state/canvas-store';
-import { activeSession, agentPresences } from '../state/presence-store';
+import { activeSession, agentPresences, writerColor } from '../state/presence-store';
 import {
   type ApprovalGateView,
   endSession,
@@ -281,12 +281,9 @@ function TimelineRow({ entry }: { entry: TimelineEntry }) {
             {entry.label}
           </span>
           {/* With several assistants on one board, "Assistant · 23:11" answers
-              nothing — every row names its writer in that writer's identity hue. */}
+              nothing — every row names its writer. */}
           {entry.who && (
-            <span
-              class="session-timeline-who"
-              style={{ '--identity-color': `hsl(${agentIdentityHue(entry.who)} 65% 62%)` }}
-            >
+            <span class="session-timeline-who" style={{ '--identity-color': writerColor(entry.who) }}>
               {writerDisplay(entry.who)}
             </span>
           )}

package/src/client/canvas/SessionReceipt.tsx

@@ -1,13 +1,25 @@
-import { useState } from 'preact/hooks';
-import { dismissSessionReceipt, sessionReceipt } from '../state/session-store';
-import { IconClose } from '../icons';
+import { useEffect, useState } from 'preact/hooks';
+import { toggleContextPin } from '../state/canvas-store';
+import {
+  activityLensNodeIds,
+  dismissSessionReceipt,
+  type ReceiptNode,
+  type SessionContextActivity,
+  sessionReceipt,
+  setActivityLens,
+} from '../state/session-store';
+import { IconClose, IconPin } from '../icons';
+import { GLYPHS } from './NodeContextMark';
+import { workbenchFetch } from '../state/workbench-transport';
 
 /**
  * Session receipt (rail-chrome-v2 phase 5, design item 2): a dismissible card
  * at the canvas region's top-right after a session ends — what the session did
  * (items / done / vetoed), the pre-session snapshot (taken at attach, so View
  * diff shows the session's changes and a restore undoes them), and History
- * (the snapshots panel). Client-side state, cleared on dismiss.
+ * (the snapshots panel). Client-side state, cleared on dismiss (see
+ * applySessionReceipt for which endings show at all and how a burst merges
+ * into one card).
  */
 
 export interface DiffSummary {
@@ -28,17 +40,96 @@ export function summarizeDiff(diff: unknown): DiffSummary | null {
   };
 }
 
+const titles = (nodes: ReceiptNode[]) => nodes.map((node) => node.title).join(', ');
+
+/**
+ * What the session did with context (docs/design/AgentContext.dc.html): an
+ * amber line for pins it read that changed since, one row per kind of touch,
+ * and the lens switch that dims every node the session did not touch.
+ */
+function ReceiptContext({ context, label }: { context: SessionContextActivity; label: string }) {
+  const rows: Array<{ key: keyof SessionContextActivity; name: string; glyph: keyof typeof GLYPHS | 'pin' }> = [
+    { key: 'read', name: 'Read', glyph: 'eye' },
+    { key: 'pinned', name: 'Pinned', glyph: 'pin' },
+    { key: 'created', name: 'Created', glyph: 'spark' },
+    { key: 'edited', name: 'Edited', glyph: 'pen' },
+  ];
+  const present = rows.filter((row) => context[row.key].length > 0);
+  if (present.length === 0 && context.changedSinceRead.length === 0) return null;
+  const lensOn = activityLensNodeIds.value !== null;
+  return (
+    <div class="session-receipt-context" data-testid="session-receipt-context">
+      {context.changedSinceRead.length > 0 && (
+        <div class="session-receipt-warn">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d={GLYPHS.warn} />
+          </svg>
+          <span>
+            {titles(context.changedSinceRead)} changed after {label} read{' '}
+            {context.changedSinceRead.length === 1 ? 'it' : 'them'}.
+          </span>
+        </div>
+      )}
+      {present.map((row) => (
+        <div key={row.key} class="session-receipt-context-row" data-row={row.key}>
+          <div class="session-receipt-context-head">
+            {row.glyph === 'pin' ? (
+              <IconPin />
+            ) : (
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d={GLYPHS[row.glyph]} />
+              </svg>
+            )}
+            <span class="session-receipt-context-name">{row.name}</span>
+            <span class="session-receipt-context-count">{context[row.key].length}</span>
+            {row.key === 'pinned' && (
+              <button
+                type="button"
+                class="session-receipt-mini"
+                onClick={() => {
+                  for (const node of context.pinned) toggleContextPin(node.id);
+                }}
+              >
+                Unpin
+              </button>
+            )}
+          </div>
+          <div class="session-receipt-context-items">
+            {row.key === 'pinned'
+              ? context.pinned.map((node) => (node.reason ? `${node.title} — “${node.reason}”` : node.title)).join('; ')
+              : titles(context[row.key])}
+          </div>
+        </div>
+      ))}
+      <button
+        type="button"
+        role="switch"
+        aria-checked={lensOn}
+        class={`session-receipt-lens${lensOn ? ' is-on' : ''}`}
+        onClick={() => setActivityLens(!lensOn)}
+      >
+        <span class="session-receipt-lens-track" aria-hidden="true">
+          <span class="session-receipt-lens-knob" />
+        </span>
+        Dim untouched nodes
+      </button>
+    </div>
+  );
+}
+
 export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => void }) {
   const receipt = sessionReceipt.value;
   const [diff, setDiff] = useState<DiffSummary | null>(null);
   const [loadingDiff, setLoadingDiff] = useState(false);
+  // A new or merged receipt: the old diff no longer describes it.
+  useEffect(() => setDiff(null), [receipt]);
   if (!receipt) return null;
 
   const viewDiff = async () => {
     if (!receipt.snapshot) return;
     setLoadingDiff(true);
     try {
-      const response = await fetch(`/api/canvas/snapshots/${encodeURIComponent(receipt.snapshot.id)}/diff`, {
+      const response = await workbenchFetch(`/api/canvas/snapshots/${encodeURIComponent(receipt.snapshot.id)}/diff`, {
         headers: { 'x-pmx-workbench': '1' },
       });
       if (response.ok) {
@@ -60,13 +151,15 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
       <div class="session-receipt-head">
         <span class="session-receipt-dot" aria-hidden="true" />
         <span class="session-receipt-title">
-          {receipt.endedBy === 'human'
-            ? 'Session ended by you'
-            : receipt.endedBy === 'idle-timeout'
-              ? 'Session ended — idle timeout'
-              : receipt.endedBy === 'agent'
-                ? 'Session ended by the agent'
-                : 'Session ended'}
+          {receipt.sessions > 1
+            ? `${receipt.sessions} sessions ended`
+            : receipt.endedBy === 'human'
+              ? 'Session ended by you'
+              : receipt.endedBy === 'idle-timeout'
+                ? 'Session ended — idle timeout'
+                : receipt.endedBy === 'agent'
+                  ? 'Session ended by the agent'
+                  : 'Session ended'}
           {endedLabel ? ` · ${endedLabel}` : ''}
         </span>
         <button
@@ -78,6 +171,7 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
           <IconClose />
         </button>
       </div>
+      {receipt.sessions > 1 && <div class="session-receipt-who">{receipt.labels.join(', ')}</div>}
       <div class="session-receipt-tiles">
         <div class="session-receipt-tile">
           <span class="session-receipt-tile-label">Items</span>
@@ -108,12 +202,15 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
           </div>
         )}
       </div>
+      <ReceiptContext context={receipt.context} label={receipt.labels.join(', ')} />
       <div class="session-receipt-note">
-        {receipt.snapshot
-          ? 'A snapshot of the board from before this session is saved — restore it to undo the session.'
-          : receipt.unchanged
-            ? 'This session changed nothing on the board — no snapshot kept.'
-            : 'The board was empty when the session started — nothing to restore.'}
+        {receipt.sessions > 1
+          ? 'History has each session’s diff and the snapshot from before it.'
+          : receipt.snapshot
+            ? 'A snapshot of the board from before this session is saved — restore it to undo the session.'
+            : receipt.context.created.length === 0 && receipt.context.edited.length === 0
+              ? 'The board itself did not change — nothing to restore.'
+              : 'The board was empty when the session started — nothing to restore.'}
       </div>
       {diff && (
         <div class="session-receipt-diff" data-testid="session-receipt-diff">

package/src/client/canvas/ShortcutOverlay.tsx

@@ -1,3 +1,4 @@
+import { isHostedWorkbench } from '../state/workbench-transport';
 import { isMac, modChord } from '../utils/platform';
 
 interface ShortcutGroup {
@@ -74,7 +75,11 @@ export function ShortcutOverlay({ onClose }: { onClose: () => void }) {
               {group.shortcuts.map((s) => (
                 <div key={s.keys} class="shortcut-row">
                   <kbd class="shortcut-keys">{s.keys}</kbd>
-                  <span class="shortcut-desc">{s.desc}</span>
+                  <span class="shortcut-desc">
+                    {isHostedWorkbench() && s.desc.startsWith('Undo / redo')
+                      ? 'Undo / redo — available in the local workbench only'
+                      : s.desc}
+                  </span>
                 </div>
               ))}
             </div>

package/src/client/canvas/SnapshotPanel.tsx

@@ -1,3 +1,4 @@
+import { isHostedWorkbench } from '../state/workbench-transport';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { IconClose } from '../icons';
 import {
@@ -171,7 +172,11 @@ export function SnapshotPanel({
           type="button"
           class="snapshot-action-btn snapshot-action-restore"
           onClick={() => setConfirming({ id: snap.id, action: 'restore' })}
-          title="Restore this snapshot — replaces the current canvas (undoable)"
+          title={
+            isHostedWorkbench()
+              ? 'Restore this snapshot — replaces the current canvas'
+              : 'Restore this snapshot — replaces the current canvas (undoable)'
+          }
           disabled={restoringId !== null}
         >
           {restoringId === snap.id ? 'Restoring…' : restoreLabel}
@@ -219,7 +224,11 @@ export function SnapshotPanel({
           {saving ? '…' : 'Save'}
         </button>
       </div>
-      <div class="snapshot-restore-note">Restoring replaces the current canvas. You can undo it if needed.</div>
+      <div class="snapshot-restore-note">
+        {isHostedWorkbench()
+          ? 'Restoring replaces the current canvas. Save a snapshot first to keep your current state.'
+          : 'Restoring replaces the current canvas. You can undo it if needed.'}
+      </div>
 
       <div class="snapshot-list">
         {loading && <div class="snapshot-empty">Loading…</div>}

package/src/client/canvas/ToolRail.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
+import { isHostedWorkbench, workbenchFetch } from '../state/workbench-transport';
 import {
   IconArrange,
   IconClearTrace,
@@ -229,7 +230,7 @@ export function ToolRail({
   const activeTheme = normalizeCanvasThemeName(canvasTheme.value);
 
   const sendIntent = (type: string, payload: Record<string, unknown> = {}) => {
-    fetch(`/api/workbench/intent?_ts=${Date.now()}`, {
+    workbenchFetch(`/api/workbench/intent?_ts=${Date.now()}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ type, payload }),
@@ -398,14 +399,16 @@ export function ToolRail({
         >
           <IconArrange />
         </RailButton>
-        <RailButton
-          label={isTraceOn ? 'Disable trace' : 'Enable trace'}
-          active={isTraceOn}
-          onClick={() => sendIntent('trace-toggle', { enabled: !isTraceOn })}
-        >
-          <IconTrace />
-        </RailButton>
-        {(isTraceOn || traceNodeCount > 0) && (
+        {!isHostedWorkbench() && (
+          <RailButton
+            label={isTraceOn ? 'Disable trace' : 'Enable trace'}
+            active={isTraceOn}
+            onClick={() => sendIntent('trace-toggle', { enabled: !isTraceOn })}
+          >
+            <IconTrace />
+          </RailButton>
+        )}
+        {!isHostedWorkbench() && (isTraceOn || traceNodeCount > 0) && (
           <RailButton label="Clear trace" onClick={() => sendIntent('trace-clear')}>
             <IconClearTrace />
           </RailButton>

package/src/client/canvas/TopBar.tsx

@@ -1,6 +1,7 @@
 import { exportDialogOpen } from './ExportDialog';
 import { activeBoardId } from '../state/boards-store';
 import { BoardSwitcher } from './BoardSwitcher';
+import { isHostedWorkbench, workbenchFetch } from '../state/workbench-transport';
 import type { ComponentChildren } from 'preact';
 import { presenting } from '../state/presentation';
 import { useEffect, useState } from 'preact/hooks';
@@ -24,8 +25,7 @@ import { degradedState } from './ConnectionBanner';
 import { ExternalWriterIndicator } from './ExternalWriters';
 import { useNow } from './use-now';
 import { agentPhaseLabel } from '../../shared/agent-presence.js';
-import { agentIdentityHue } from '../../shared/agent-presence.js';
-import { activeSession, agentPresences, attachedSessions, contextBudget } from '../state/presence-store';
+import { activeSession, agentPresences, attachedSessions, contextBudget, writerColor } from '../state/presence-store';
 import { endSession, pendingGates, startSession } from '../state/session-store';
 import { formatCountdown, gateRemainingMs } from '../../shared/approval-gates.js';
 
@@ -56,6 +56,7 @@ function AgentChip() {
       !allSessions.some(
         (candidate) =>
           candidate.sessionId !== session.sessionId &&
+          !candidate.parentAgentId &&
           (candidate.sessionId === session.parentAgentId || candidate.source === session.parentAgentId),
       ),
   );
@@ -83,12 +84,16 @@ function AgentChip() {
       <span class="agent-chips">
         {visible.map((session) => {
           // Fleet roll-up: workers declaring this session as their parent count
-          // into its chip instead of growing the bar one chip per worker.
-          const workers = agentPresences.value.filter(
-            (presence) =>
-              presence.parentAgentId != null &&
-              (presence.parentAgentId === session.sessionId || presence.parentAgentId === session.source),
-          ).length;
+          // into its chip instead of growing the bar one chip per worker. A
+          // worker's own chip carries no roll-up: same-source siblings would
+          // otherwise match it through `session.source`.
+          const workers = session.parentAgentId
+            ? 0
+            : agentPresences.value.filter(
+                (presence) =>
+                  presence.parentAgentId != null &&
+                  (presence.parentAgentId === session.sessionId || presence.parentAgentId === session.source),
+              ).length;
           return (
             <BarHint
               key={session.sessionId}
@@ -99,7 +104,7 @@ function AgentChip() {
               <span
                 class={`agent-chip phase-${session.phase}`}
                 data-phase={session.phase}
-                style={{ '--identity-color': `hsl(${agentIdentityHue(session.sessionId)} 65% 62%)` }}
+                style={{ '--identity-color': writerColor(session.sessionId) }}
               >
                 <span class="agent-chip-dot" aria-hidden="true" />
                 <span class="agent-chip-label">{agentPhaseLabel(session)}</span>
@@ -272,7 +277,7 @@ export function TopBar() {
   const [workspaceName, setWorkspaceName] = useState<string>('');
   useEffect(() => {
     let cancelled = false;
-    fetch('/health')
+    workbenchFetch('/health')
       .then((r) => (r.ok ? r.json() : null))
       .then((data: { workspace?: string } | null) => {
         if (cancelled || typeof data?.workspace !== 'string' || !data.workspace) return;
@@ -327,7 +332,7 @@ export function TopBar() {
       <GateBadge />
       <ContextBudget />
       <ExternalWriterIndicator />
-      <StartSessionButton />
+      {!isHostedWorkbench() && <StartSessionButton />}
 
       <div class="top-bar-sep" />