pmx-canvas 0.7.3 → 0.8.2

package/src/client/canvas/CanvasNode.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { mutatingNodeIds, sessionActive } from '../state/presence-store';
-import { attentionPrimaryNodeIds, attentionPulseNodeIds, attentionSecondaryNodeIds } from '../state/attention-store';
+import { attentionPulseNodeIds } from '../state/attention-store';
+import { isAgentPin, NearPinMark, NodeContextMark } from './NodeContextMark';
+import { activityLensNodeIds } from '../state/session-store';
 import {
   activeNodeId,
   activeNeighborNodeIds,
@@ -34,20 +36,9 @@ import {
   ungroupFromClient,
   updateNodeFromClient,
 } from '../state/intent-bridge';
-import { KIND_COLOR } from './kind-colors';
 import { reportHumanGrab, takeOverNode, yieldedNodes } from '../state/human-store';
 import { AxStepControls } from '../nodes/AxStepControls';
-import { canOpenAsSite, openNodeAsSite } from '../nodes/surface-url';
-import {
-  getNodeIcon,
-  IconChevronRight,
-  IconChevronDown,
-  IconClose,
-  IconMore,
-  IconExternalLink,
-  IconExpand,
-  IconSparkle,
-} from '../icons';
+import { getNodeIcon, IconChevronRight, IconClose, IconMore, IconExpand, IconPin } from '../icons';
 import { EXPANDABLE_TYPES, TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
 import { AUTO_FIT_TITLEBAR_HEIGHT, computeAutoFitHeight, shouldAutoFitNode } from './auto-fit';
@@ -137,8 +128,6 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
   const isActive = activeNodeId.value === node.id;
   const isSelected = selectedNodeIds.value.has(node.id);
   const isContextPinned = contextPinnedNodeIds.value.has(node.id);
-  const isAttentionPrimary = attentionPrimaryNodeIds.value.has(node.id);
-  const isAttentionSecondary = !isAttentionPrimary && attentionSecondaryNodeIds.value.has(node.id);
   const isAttentionPulse = attentionPulseNodeIds.value.has(node.id);
   const isNeighbor = !isActive && activeNeighborNodeIds.value.has(node.id);
   const searchSet = searchHighlightIds.value;
@@ -428,8 +417,6 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     isSearchDimmed ? 'search-dimmed' : '',
     isSelected ? 'selected' : '',
     isContextPinned ? 'context-pinned' : '',
-    isAttentionPrimary ? 'attention-focus-primary' : '',
-    isAttentionSecondary ? 'attention-focus-secondary' : '',
     isAttentionPulse ? 'attention-pulse' : '',
     isPinned ? 'pinned' : '',
     isTrace ? 'trace-node' : '',
@@ -437,6 +424,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     isGroup ? 'group-node' : '',
     isStrictSize ? 'strict-size' : '',
     isAgentMutating ? 'agent-mutating' : '',
+    activityLensNodeIds.value && !activityLensNodeIds.value.has(node.id) ? 'lens-dimmed' : '',
   ]
     .filter(Boolean)
     .join(' ');
@@ -488,7 +476,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
             <div class="group-chip-name">{title}</div>
             <div class="group-chip-meta">
               {groupKindDots.map((kind) => (
-                <span key={kind} class="group-kind-dot" style={{ background: KIND_COLOR[kind] }} aria-hidden="true" />
+                <span key={kind} class="group-kind-dot" aria-hidden="true" />
               ))}
               <span class="group-chip-count">
                 {groupChildren.length} node{groupChildren.length === 1 ? '' : 's'}
@@ -679,40 +667,16 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                 {title}
               </span>
             )}
+            <NearPinMark node={node} pinned={isContextPinned} />
+            <NodeContextMark node={node} pinned={isContextPinned} />
             <div class="node-controls">
               {isPinned && (
                 <span class="pin-indicator" title="Pinned">
                   ⊙
                 </span>
               )}
-              <button
-                type="button"
-                class={`ctx-pin-btn${isContextPinned ? ' ctx-pin-active' : ''}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  toggleContextPin(node.id);
-                }}
-                title={isContextPinned ? 'Remove from context' : 'Add to context'}
-              >
-                <IconSparkle size={14} />
-              </button>
-              {/* 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 own webview. */}
-              {canOpenAsSite(node) && (
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    void openNodeAsSite(node);
-                  }}
-                  title="Open as site"
-                >
-                  <IconExternalLink size={14} />
-                </button>
-              )}
-              {/* Expand — opens node as full-viewport overlay for focused work */}
+              {/* Expand and the context pin always show; the rest sit behind ⋯ and ×
+              on hover (docs/design/Chrome.dc.html). */}
               {EXPANDABLE_TYPES.has(node.type) && (
                 <button
                   type="button"
@@ -727,18 +691,37 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
               )}
               <button
                 type="button"
+                class={`ctx-pin-btn${isContextPinned ? ' ctx-pin-active' : ''}`}
                 onClick={(e) => {
                   e.stopPropagation();
-                  toggleCollapsed(node.id);
+                  toggleContextPin(node.id);
+                }}
+                title={isContextPinned ? 'Remove from context' : 'Add to context'}
+                aria-label={isContextPinned ? 'Remove from context' : 'Add to context'}
+                aria-pressed={isContextPinned}
+              >
+                <span class="ctx-pin-mark">
+                  <IconPin />
+                  {isContextPinned && isAgentPin(node.id) && <span class="ctx-pin-agent-dot" aria-hidden="true" />}
+                </span>
+              </button>
+              <button
+                type="button"
+                class="node-hover-control"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onContextMenu?.(e, node.id);
                 }}
-                title={node.collapsed ? 'Expand' : 'Collapse'}
+                title="More actions"
+                aria-label="More actions"
               >
-                {node.collapsed ? <IconChevronRight size={14} /> : <IconChevronDown size={14} />}
+                <IconMore size={14} />
               </button>
               {/* Report #64: status nodes get the same remove control as every other
               node type (backend removal + undo/history handle status uniformly). */}
               <button
                 type="button"
+                class="node-hover-control"
                 onClick={(e) => {
                   e.stopPropagation();
                   void removeNodeFromClient(node.id);

package/src/client/canvas/CanvasViewport.tsx

@@ -38,7 +38,6 @@ import {
 } from '../state/canvas-store';
 import { createEdgeFromClient, createNodeFromClient } from '../state/intent-bridge';
 import type { AnnotationTool, CanvasAnnotation, CanvasNodeState } from '../types';
-import { FocusFieldLayer } from './FocusFieldLayer';
 import { importFiles } from './import-files';
 import { IntentLayer } from './IntentLayer';
 import { AgentPresenceLayer } from './AgentPresenceLayer';
@@ -855,7 +854,6 @@ export function CanvasViewport({
           left: 0,
         }}
       >
-        <FocusFieldLayer />
         <ScopeFenceLayer />
         <IntentLayer />
         <AgentPresenceLayer />

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