pmx-canvas 0.7.2 → 0.8.0

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,
@@ -8,10 +9,7 @@ import {
   IconLogo,
   IconMinimap,
   IconMoon,
-  IconNodeFile,
   IconNodeGroup,
-  IconNodeHtml,
-  IconNodeImage,
   IconNodeMarkdown,
   IconNodeWebpage,
   IconPen,
@@ -177,37 +175,33 @@ export function ToolRail({
   const traceNodeCount = Array.from(nodes.value.values()).filter((n) => n.type === 'trace').length;
   const edgeCount = edges.value.size;
   const [feedbackOpen, setFeedbackOpen] = useState(false);
-  const [openMenu, setOpenMenu] = useState<null | 'theme' | 'annotate'>(null);
-  const [menuAnchor, setMenuAnchor] = useState<{ top: number; bottom: number; right: number } | null>(null);
+  const [openMenu, setOpenMenu] = useState<null | 'theme'>(null);
+  const [menuAnchor, setMenuAnchor] = useState<{ bottom: number; right: number } | null>(null);
   const railRef = useRef<HTMLDivElement>(null);
-  const documentInput = useRef<HTMLInputElement>(null);
+  const fileInput = useRef<HTMLInputElement>(null);
 
-  const toggleMenu = (menu: 'theme' | 'annotate') => (e: MouseEvent) => {
+  const toggleMenu = (menu: 'theme') => (e: MouseEvent) => {
     if (openMenu === menu) {
       setOpenMenu(null);
       return;
     }
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    setMenuAnchor({ top: rect.top, bottom: rect.bottom, right: rect.right });
+    setMenuAnchor({ bottom: rect.bottom, right: rect.right });
     setOpenMenu(menu);
   };
 
   // The rail scrolls (overflow-y:auto), so an absolutely-positioned popover
   // would be clipped by it. Fixed positioning from the trigger's rect escapes
-  // the scroll container; the annotate menu top-aligns with its trigger, the
-  // theme menu (bottom cluster) bottom-aligns so it grows upward.
-  const sideMenuStyle = (alignBottom: boolean) =>
-    menuAnchor
-      ? alignBottom
-        ? {
-            position: 'fixed' as const,
-            left: `${menuAnchor.right + 8}px`,
-            bottom: `${window.innerHeight - menuAnchor.bottom}px`,
-            top: 'auto',
-            right: 'auto',
-          }
-        : { position: 'fixed' as const, left: `${menuAnchor.right + 8}px`, top: `${menuAnchor.top}px`, right: 'auto' }
-      : undefined;
+  // the scroll container; the theme menu bottom-aligns so it grows upward.
+  const sideMenuStyle = menuAnchor
+    ? {
+        position: 'fixed' as const,
+        left: `${menuAnchor.right + 8}px`,
+        bottom: `${window.innerHeight - menuAnchor.bottom}px`,
+        top: 'auto',
+        right: 'auto',
+      }
+    : undefined;
 
   useEffect(() => {
     if (!openMenu) return;
@@ -236,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 }),
@@ -331,22 +325,20 @@ export function ToolRail({
         >
           <IconNodeMarkdown size={15} />
         </RailButton>
-        <RailButton label="Image" shortcut="I" onClick={() => promptedCreate('image')}>
-          <IconNodeImage size={15} />
-        </RailButton>
-        <RailButton label="File" shortcut="Shift+F" onClick={() => promptedCreate('file')}>
-          <IconNodeFile size={15} />
-        </RailButton>
-        <RailButton label="Attach document" onClick={() => documentInput.current?.click()}>
+        <RailButton
+          label="Attach files"
+          ariaLabel="Attach files"
+          detail="Images (PNG, JPEG, SVG…), Markdown and text/code files. PDF, Word, Excel, PowerPoint and OpenDocument use agent import with review."
+          onClick={() => fileInput.current?.click()}
+        >
           <IconUpload size={15} />
         </RailButton>
         <input
-          ref={documentInput}
+          ref={fileInput}
           type="file"
           hidden
           multiple
-          accept=".pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx,.odt,.ods,.odp"
-          aria-label="Attach documents"
+          aria-label="Attach files"
           onChange={(event) => {
             const area = canvasArea();
             const view = viewport.value;
@@ -361,17 +353,6 @@ export function ToolRail({
         <RailButton label="Webpage" shortcut="W" onClick={() => promptedCreate('webpage')}>
           <IconNodeWebpage size={15} />
         </RailButton>
-        <RailButton
-          label="HTML surface"
-          shortcut="H"
-          onClick={() =>
-            void createNodeInView({ type: 'html', title: 'HTML surface' }).catch((error) =>
-              logRailError('create html', error),
-            )
-          }
-        >
-          <IconNodeHtml />
-        </RailButton>
         <RailButton
           label="Group"
           shortcut="G"
@@ -383,61 +364,28 @@ export function ToolRail({
         >
           <IconNodeGroup size={15} />
         </RailButton>
-        <span class="toolbar-menu-anchor">
-          <RailButton
-            label="Annotate"
-            shortcut="A"
-            detail="Draw · Text note · Eraser"
-            active={annotationTool !== null}
-            menuOpen={openMenu === 'annotate'}
-            onClick={toggleMenu('annotate')}
-          >
-            {annotationTool === 'eraser' ? (
-              <IconEraser />
-            ) : annotationTool === 'text' ? (
-              <IconTextAnnotation />
-            ) : (
-              <IconPen />
-            )}
-          </RailButton>
-          {openMenu === 'annotate' && (
-            <div class="toolbar-menu" style={sideMenuStyle(false)} role="menu" aria-label="Annotate">
-              <button
-                type="button"
-                class={`toolbar-menu-item${annotationTool === 'pen' ? ' active' : ''}`}
-                onClick={() => {
-                  onSetAnnotationTool(annotationTool === 'pen' ? null : 'pen');
-                  setOpenMenu(null);
-                }}
-              >
-                <IconPen />
-                <span>{annotationTool === 'pen' ? 'Stop annotating' : 'Draw (A)'}</span>
-              </button>
-              <button
-                type="button"
-                class={`toolbar-menu-item${annotationTool === 'text' ? ' active' : ''}`}
-                onClick={() => {
-                  onSetAnnotationTool(annotationTool === 'text' ? null : 'text');
-                  setOpenMenu(null);
-                }}
-              >
-                <IconTextAnnotation />
-                <span>{annotationTool === 'text' ? 'Stop text notes' : 'Text note'}</span>
-              </button>
-              <button
-                type="button"
-                class={`toolbar-menu-item${annotationTool === 'eraser' ? ' active' : ''}`}
-                onClick={() => {
-                  onSetAnnotationTool(annotationTool === 'eraser' ? null : 'eraser');
-                  setOpenMenu(null);
-                }}
-              >
-                <IconEraser />
-                <span>{annotationTool === 'eraser' ? 'Stop erasing' : 'Eraser'}</span>
-              </button>
-            </div>
-          )}
-        </span>
+        <RailButton
+          label="Draw"
+          shortcut="A"
+          active={annotationTool === 'pen'}
+          onClick={() => onSetAnnotationTool(annotationTool === 'pen' ? null : 'pen')}
+        >
+          <IconPen />
+        </RailButton>
+        <RailButton
+          label="Text note"
+          active={annotationTool === 'text'}
+          onClick={() => onSetAnnotationTool(annotationTool === 'text' ? null : 'text')}
+        >
+          <IconTextAnnotation />
+        </RailButton>
+        <RailButton
+          label="Eraser"
+          active={annotationTool === 'eraser'}
+          onClick={() => onSetAnnotationTool(annotationTool === 'eraser' ? null : 'eraser')}
+        >
+          <IconEraser />
+        </RailButton>
 
         <div class="rail-spacer" />
 
@@ -451,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>
@@ -485,7 +435,7 @@ export function ToolRail({
             {canvasThemeScheme(activeTheme) === 'dark' ? <IconSun /> : <IconMoon />}
           </RailButton>
           {openMenu === 'theme' && (
-            <div class="toolbar-menu" style={sideMenuStyle(true)} role="menu" aria-label="Theme">
+            <div class="toolbar-menu" style={sideMenuStyle} role="menu" aria-label="Theme">
               {CANVAS_THEMES.map((name) => (
                 <button
                   key={name}

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" />
 

package/src/client/icons.tsx

@@ -112,14 +112,6 @@ export function IconUndo(p: IconProps): JSX.Element {
   );
 }
 
-export function IconSparkle(p: IconProps): JSX.Element {
-  return (
-    <Icon {...p}>
-      <path d="m8 1 2 5 5 2-5 2-2 5-2-5-5-2 5-2Z" />
-    </Icon>
-  );
-}
-
 /** Upload into a tray — attach a document. */
 export function IconUpload(p: IconProps): JSX.Element {
   return (
@@ -326,13 +318,11 @@ export function IconSteer(p: IconProps): JSX.Element {
   );
 }
 
-/** Framed pin — context pinning. */
+/** Push pin — context pinning (docs/design/Chrome.dc.html). */
 export function IconPin(p: IconProps): JSX.Element {
   return (
     <Icon {...p}>
-      <rect x="2" y="5" width="12" height="9" rx="1.5" />
-      <line x1="11" y1="1.5" x2="11" y2="5" />
-      <circle cx="11" cy="4.5" r="1.6" fill="currentColor" stroke="none" />
+      <path d="M6 2.67h4l-.53 3.66 1.86 2H4.67l1.86-2zM8 8.33v5" />
     </Icon>
   );
 }