pmx-canvas 0.7.2 → 0.8.0

package/src/client/canvas/ChoiceMenu.tsx

@@ -0,0 +1,122 @@
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { IconChevronDown } from '../icons';
+
+/** Themed single-choice menu shared by the feedback form and steering composer. */
+export function ChoiceMenu({
+  label,
+  value,
+  options,
+  onChange,
+  className = '',
+  above = false,
+}: {
+  label: string;
+  value: string;
+  options: Array<{ value: string; label: string; disabled?: boolean }>;
+  onChange: (value: string) => void;
+  className?: string;
+  above?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
+  const menu = useRef<HTMLDivElement>(null);
+  const close = () => {
+    setOpen(false);
+    trigger.current?.focus();
+  };
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    const selected = menu.current?.querySelector<HTMLButtonElement>('[aria-checked="true"]:not(:disabled)');
+    (selected ?? menu.current?.querySelector<HTMLButtonElement>('button:not(:disabled)'))?.focus();
+    const outside = (event: PointerEvent) => {
+      if (event.target instanceof Node && !root.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener('pointerdown', outside);
+    return () => document.removeEventListener('pointerdown', outside);
+  }, [open]);
+
+  return (
+    <div
+      ref={root}
+      class={`choice-menu ${className}`}
+      onBlur={(e) => {
+        if (e.relatedTarget instanceof Node && !root.current?.contains(e.relatedTarget)) setOpen(false);
+      }}
+      onKeyDown={(e) => {
+        // Menu typing/navigation must not trigger canvas tool shortcuts.
+        // Tab still reaches modal focus traps; closed Escape reaches the dialog.
+        if (e.key !== 'Tab' && (e.key !== 'Escape' || open)) e.stopPropagation();
+        if (e.key === 'Escape' && open) {
+          e.preventDefault();
+          e.stopPropagation();
+          close();
+        }
+        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!open) {
+            setOpen(true);
+            return;
+          }
+          const items = [...(menu.current?.querySelectorAll<HTMLButtonElement>('button:not(:disabled)') ?? [])];
+          if (!items.length) return;
+          const index = items.findIndex((item) => item === document.activeElement);
+          const next =
+            e.key === 'Home'
+              ? 0
+              : e.key === 'End'
+                ? items.length - 1
+                : (index + (e.key === 'ArrowUp' ? -1 : 1) + items.length) % items.length;
+          items[next]?.focus();
+        }
+      }}
+    >
+      <button
+        ref={trigger}
+        type="button"
+        class="choice-menu-trigger"
+        aria-label={label}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+      >
+        <span>{options.find((option) => option.value === value)?.label ?? label}</span>
+        <IconChevronDown size={14} />
+      </button>
+      {open && (
+        <div
+          ref={menu}
+          role="menu"
+          aria-label={label}
+          class={`toolbar-menu choice-menu-options${above ? ' opens-above' : ''}`}
+        >
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              role="menuitemradio"
+              class={`toolbar-menu-item${option.value === value ? ' active' : ''}`}
+              aria-checked={option.value === value}
+              disabled={option.disabled}
+              tabIndex={-1}
+              data-value={option.value}
+              onClick={() => {
+                onChange(option.value);
+                close();
+              }}
+            >
+              <span>{option.label}</span>
+              {option.value === value && (
+                <span class="toolbar-menu-check" aria-hidden="true">
+                  ✓
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/canvas/CommandBar.tsx

@@ -4,6 +4,7 @@ import { contextPinnedNodeIds, nodes, toggleContextPin } from '../state/canvas-s
 import { steerableAgents } from '../state/presence-store';
 import { sendSteering } from '../state/session-store';
 import { modChord } from '../utils/platform';
+import { ChoiceMenu } from './ChoiceMenu';
 
 /**
  * Command bar (rail-chrome-v2 phase 5): the human's steering surface while a
@@ -83,33 +84,34 @@ export function CommandBar() {
       <div class="command-bar-composer">
         <IconSteer size={15} class="command-bar-icon" />
         {showPicker && (
-          <select
-            class="command-bar-target"
-            aria-label="Steer which agent"
-            title="Connected agents — steering reaches all of them unless you address one"
+          <ChoiceMenu
+            className="command-bar-target"
+            label="Steer which agent"
             value={effectiveTarget ?? ''}
-            onChange={(e) => setTarget((e.target as HTMLSelectElement).value || null)}
-          >
-            <option value="">All agents</option>
-            {agents.map((agent) => {
-              // Pump health at the point of choice: unclaimed steers already
-              // sitting in this agent's queue (a growing number means its loop
-              // is not polling), and proof-of-polling when its consumer key
-              // claimed recently — attached alone doesn't mean anyone reads
-              // the inbox.
-              const queued = agent.pendingSteers && agent.pendingSteers > 0 ? ` · ${agent.pendingSteers} queued` : '';
-              const polling = agent.polling ? ' · polling' : '';
-              return (
-                <option key={agent.value} value={agent.value} disabled={!agent.steerable}>
-                  {agent.attached
+            above
+            onChange={(value) => setTarget(value || null)}
+            options={[
+              { value: '', label: 'All agents' },
+              ...agents.map((agent) => {
+                // Pump health at the point of choice: unclaimed steers already
+                // sitting in this agent's queue (a growing number means its loop
+                // is not polling), and proof-of-polling when its consumer key
+                // claimed recently — attached alone doesn't mean anyone reads
+                // the inbox.
+                const queued = agent.pendingSteers && agent.pendingSteers > 0 ? ` · ${agent.pendingSteers} queued` : '';
+                const polling = agent.polling ? ' · polling' : '';
+                return {
+                  value: agent.value,
+                  disabled: !agent.steerable,
+                  label: agent.attached
                     ? `${agent.label}${polling}${queued}`
                     : agent.steerable
                       ? `${agent.label} · writer${polling}${queued}`
-                      : `${agent.label} · no inbox`}
-                </option>
-              );
-            })}
-          </select>
+                      : `${agent.label} · no inbox`,
+                };
+              }),
+            ]}
+          />
         )}
         <input
           class="command-bar-input"

package/src/client/canvas/CommandPalette.tsx

@@ -16,6 +16,7 @@ import { startSession } from '../state/session-store';
 import { TYPE_LABELS, type CanvasNodeState } from '../types';
 import { invalidateTokenCache } from '../theme/tokens';
 import { clearThemeOverride } from '../state/theme-override';
+import { canvasThemeScheme } from '../../shared/themes.js';
 import { getNodeIcon, IconArrange, IconFitAll, IconMinimap, IconMoon, IconNodeMarkdown, IconSteer } from '../icons';
 import { activeBoardId, openBoard } from '../state/boards-store';
 import { requestJson } from '../state/intent-bridge';
@@ -269,11 +270,11 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
         },
       },
       {
-        label: 'Toggle theme (dark/light)',
+        label: 'Toggle theme (Harbor/Daylight)',
         icon: IconMoon,
         iconTone: 'muted',
         action: () => {
-          const next = canvasTheme.value === 'dark' ? 'light' : 'dark';
+          const next = canvasThemeScheme(canvasTheme.value) === 'dark' ? 'daylight' : 'harbor';
           // An explicit pick ends any ?theme= session override, same as the
           // toolbar picker — otherwise the session stays sticky-overridden.
           clearThemeOverride();

package/src/client/canvas/ContextMenu.tsx

@@ -26,6 +26,7 @@ import {
   updateEdgeFromClient,
   updateNodeFromClient,
 } from '../state/intent-bridge';
+import { canOpenAsSite, openNodeAsSite } from '../nodes/surface-url';
 import { askText } from './TextPrompt';
 import { EXPANDABLE_TYPES } from '../types';
 import type { CanvasNodeState } from '../types';
@@ -498,6 +499,16 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
     action: () => toggleCollapsed(node.id),
   });
 
+  // Open as site — full-page standalone view of this node's surface, served
+  // from /api/canvas/surface/:id (same document as the canvas iframe). Opens
+  // via the system browser so embedded hosts do not trap it in their webview.
+  if (canOpenAsSite(node)) {
+    items.push({
+      label: 'Open in new tab',
+      action: () => void openNodeAsSite(node),
+    });
+  }
+
   // Context pin — add/remove from the human-curated agent context (report #63).
   // This is the PRIMARY "pin" in PMX's model ("pin nodes to curate context"); it
   // matches the SelectionBar's "Pin as context" and updates the context count + the

package/src/client/canvas/EdgeLayer.tsx

@@ -12,7 +12,7 @@ import type { CanvasEdge, CanvasNodeState } from '../types';
 // ── Edge type visual styles ──────────────────────────────────
 const EDGE_COLORS: Record<CanvasEdge['type'], string> = {
   relation: 'var(--c-muted)',
-  'depends-on': 'var(--c-warn)',
+  'depends-on': 'var(--c-rel-informs)',
   flow: 'var(--c-accent)',
   // --c-dim is a very low-contrast hairline in dark palettes (forest: #5D7566
   // on #0C1712); the dashed style is what distinguishes `references`.

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

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'preact/hooks';
 import { useFocusTrap } from './use-focus-trap';
 import { IconExternalLink } from '../icons';
+import { ChoiceMenu } from './ChoiceMenu';
 
 /** Draft only: GitHub owns authentication and the final public submission. */
 export function FeedbackDialog({ onClose }: { onClose: () => void }) {
@@ -40,14 +41,15 @@ export function FeedbackDialog({ onClose }: { onClose: () => void }) {
           public. Only what you enter below is included; no board contents, workspace paths, screenshots, or logs are
           attached.
         </p>
-        <label>
-          Feedback type
-          <select class="text-prompt-input" value={kind} onChange={(e) => setKind(e.currentTarget.value)}>
-            <option>Bug report</option>
-            <option>Feature request</option>
-            <option>General feedback</option>
-          </select>
-        </label>
+        <div class="feedback-field">
+          <span>Feedback type</span>
+          <ChoiceMenu
+            label="Feedback type"
+            value={kind}
+            onChange={setKind}
+            options={['Bug report', 'Feature request', 'General feedback'].map((value) => ({ value, label: value }))}
+          />
+        </div>
         <label>
           Title
           <input

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