pmx-canvas 0.8.2 → 0.9.0

package/src/client/canvas/SessionReceipt.tsx

@@ -1,16 +1,22 @@
-import { useEffect, useState } from 'preact/hooks';
-import { toggleContextPin } from '../state/canvas-store';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { BarHint } from './BarHint';
+import { nodes, removeContextPins } from '../state/canvas-store';
+import { activeBoardId, boardList, openBoard } from '../state/boards-store';
 import {
-  activityLensNodeIds,
+  activityLens,
   dismissSessionReceipt,
   type ReceiptNode,
+  receiptNodeKey,
   type SessionContextActivity,
+  sendSteering,
   sessionReceipt,
   setActivityLens,
+  undoSessionEdits,
 } from '../state/session-store';
 import { IconClose, IconPin } from '../icons';
 import { GLYPHS } from './NodeContextMark';
 import { workbenchFetch } from '../state/workbench-transport';
+import { agentSessionsEnabled } from '../state/workspace-settings';
 
 /**
  * Session receipt (rail-chrome-v2 phase 5, design item 2): a dismissible card
@@ -42,12 +48,58 @@ export function summarizeDiff(diff: unknown): DiffSummary | null {
 
 const titles = (nodes: ReceiptNode[]) => nodes.map((node) => node.title).join(', ');
 
+function clock(iso: string): string {
+  const at = new Date(iso);
+  return Number.isNaN(at.getTime())
+    ? ''
+    : `${String(at.getHours()).padStart(2, '0')}:${String(at.getMinutes()).padStart(2, '0')}`;
+}
+
 /**
  * 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 }) {
+function ReceiptContext({
+  context,
+  label,
+  snapshotId,
+}: {
+  context: SessionContextActivity;
+  label: string;
+  /** The pre-session snapshot: what Undo on an edit restores from (single sessions only). */
+  snapshotId: string | null;
+}) {
+  const [told, setTold] = useState(false);
+  const [restoredIds, setRestoredIds] = useState<string[]>([]);
+  const [keptEdits, setKeptEdits] = useState(false);
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [undoing, setUndoing] = useState(false);
+  const rowUndo =
+    context.edited.length > 0 && context.edited.every((node) => restoredIds.includes(node.id))
+      ? 'undone'
+      : keptEdits
+        ? 'kept'
+        : null;
+  useEffect(() => {
+    setRestoredIds([]);
+    setKeptEdits(false);
+    setOpenId(null);
+  }, [context]);
+  const undo = async (edits: ReceiptNode[]) => {
+    if (!snapshotId || undoing) return;
+    setUndoing(true);
+    try {
+      const result = await undoSessionEdits(
+        snapshotId,
+        edits.filter((node) => !restoredIds.includes(node.id)),
+      );
+      setRestoredIds((previous) => [...previous, ...result.restored]);
+      return result;
+    } finally {
+      setUndoing(false);
+    }
+  };
   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' },
@@ -56,7 +108,7 @@ function ReceiptContext({ context, label }: { context: SessionContextActivity; l
   ];
   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;
+  const lensOn = activityLens.value?.kind === 'receipt';
   return (
     <div class="session-receipt-context" data-testid="session-receipt-context">
       {context.changedSinceRead.length > 0 && (
@@ -68,6 +120,19 @@ function ReceiptContext({ context, label }: { context: SessionContextActivity; l
             {titles(context.changedSinceRead)} changed after {label} read{' '}
             {context.changedSinceRead.length === 1 ? 'it' : 'them'}.
           </span>
+          <button
+            type="button"
+            class="session-receipt-mini"
+            disabled={told}
+            onClick={() => {
+              const them = context.changedSinceRead.length === 1 ? 'it' : 'them';
+              void sendSteering(
+                `${context.changedSinceRead.map((node) => `“${node.title}”`).join(', ')} changed after you read ${them} — read ${them} again before relying on ${them}.`,
+              ).then((ok) => setTold(ok));
+            }}
+          >
+            {told ? 'Told' : `Tell ${label}`}
+          </button>
         </div>
       )}
       {present.map((row) => (
@@ -86,19 +151,60 @@ function ReceiptContext({ context, label }: { context: SessionContextActivity; l
               <button
                 type="button"
                 class="session-receipt-mini"
+                disabled={context.pinned.some((node) => node.boardId && node.boardId !== activeBoardId.value)}
+                onClick={() => removeContextPins(context.pinned.map((node) => node.id))}
+              >
+                Unpin
+              </button>
+            )}
+            {row.key === 'edited' && snapshotId && (
+              <button
+                type="button"
+                class="session-receipt-mini"
+                disabled={
+                  rowUndo !== null ||
+                  undoing ||
+                  context.edited.some((node) => node.boardId && node.boardId !== activeBoardId.value)
+                }
                 onClick={() => {
-                  for (const node of context.pinned) toggleContextPin(node.id);
+                  void undo(context.edited).then((result) => {
+                    if (result?.ok) setKeptEdits(true);
+                  });
                 }}
               >
-                Unpin
+                {rowUndo === 'undone' ? '✓ Undone' : rowUndo === 'kept' ? 'Kept your edits' : 'Undo'}
               </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>
+          {row.key === 'edited' && rowUndo && (
+            <div class="session-receipt-context-items">
+              {rowUndo === 'undone' ? 'every card restored' : 'cards you edited since were left alone'}
+            </div>
+          )}
+          {row.key === 'edited' ? (
+            <ul class="session-receipt-edits">
+              {context.edited.map((node) => (
+                <EditLine
+                  key={receiptNodeKey(node)}
+                  node={node}
+                  canUndo={snapshotId !== null}
+                  undoing={undoing}
+                  open={openId === receiptNodeKey(node)}
+                  onToggle={() => setOpenId(openId === receiptNodeKey(node) ? null : receiptNodeKey(node))}
+                  undone={restoredIds.includes(node.id)}
+                  onUndo={() => void undo([node])}
+                />
+              ))}
+            </ul>
+          ) : (
+            <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
@@ -117,16 +223,160 @@ function ReceiptContext({ context, label }: { context: SessionContextActivity; l
   );
 }
 
+/** Align the bounded excerpts by word, preserving punctuation and whitespace verbatim. */
+function changedWords(before: string, after: string) {
+  const tokens = (text: string) => text.match(/\s+|[\p{L}\p{N}_]+|[^\s\p{L}\p{N}_]/gu) ?? [];
+  const a = tokens(before);
+  const b = tokens(after);
+  const lengths = Array.from({ length: a.length + 1 }, () => new Uint16Array(b.length + 1));
+  for (let i = a.length - 1; i >= 0; i--) {
+    for (let j = b.length - 1; j >= 0; j--) {
+      lengths[i][j] = a[i] === b[j] ? lengths[i + 1][j + 1] + 1 : Math.max(lengths[i + 1][j], lengths[i][j + 1]);
+    }
+  }
+  const was: Array<{ text: string; changed: boolean }> = [];
+  const now: Array<{ text: string; changed: boolean }> = [];
+  let i = 0;
+  let j = 0;
+  while (i < a.length || j < b.length) {
+    if (i < a.length && j < b.length && a[i] === b[j]) {
+      was.push({ text: a[i++], changed: false });
+      now.push({ text: b[j++], changed: false });
+    } else if (i < a.length && (j === b.length || lengths[i + 1][j] >= lengths[i][j + 1])) {
+      was.push({ text: a[i++], changed: true });
+    } else {
+      now.push({ text: b[j++], changed: true });
+    }
+  }
+  return [was, now];
+}
+
+/** SeeChange.dc.html: one stacked, word-marked change, with Undo for the whole card. */
+function EditLine({
+  node,
+  canUndo,
+  undoing,
+  open,
+  onToggle,
+  undone,
+  onUndo,
+}: {
+  node: ReceiptNode;
+  canUndo: boolean;
+  undoing: boolean;
+  open: boolean;
+  onToggle: () => void;
+  undone: boolean;
+  onUndo: () => void;
+}) {
+  const onBoard = !node.boardId || node.boardId === activeBoardId.value;
+  const current = onBoard ? nodes.value.get(node.id) : undefined;
+  const board = boardList.value.find((entry) => entry.id === node.boardId);
+  const sides = useMemo(
+    () => (open ? changedWords(node.before ?? '', node.after ?? '') : []),
+    [open, node.before, node.after],
+  );
+  const pair = useRef<HTMLSpanElement>(null);
+  useLayoutEffect(() => {
+    // Long excerpts retain context above the edit; start each scroll box at
+    // the first changed word rather than a screenful of identical preamble.
+    for (const text of pair.current?.querySelectorAll<HTMLElement>('.session-receipt-diff-text') ?? []) {
+      const change = text.querySelector('del, ins');
+      if (change) text.scrollTop = change.getBoundingClientRect().top - text.getBoundingClientRect().top - 24;
+    }
+  }, [sides]);
+  // Your own later edit wins: Undo would leave it, so it is not offered.
+  const yours = current?.lastEditedBy?.actor === 'human';
+  return (
+    <li class="session-receipt-edit">
+      <span class="session-receipt-edit-line">
+        <span>
+          {node.title}
+          {node.change ? <span class="session-receipt-edit-change"> — {node.change}</span> : null}
+        </span>
+        {node.before !== undefined && (
+          <button type="button" class="session-receipt-link" aria-expanded={open} onClick={onToggle}>
+            {open ? 'Hide change' : 'See change'}
+          </button>
+        )}
+      </span>
+      {open && (
+        <span ref={pair} class="session-receipt-diff-pair">
+          {sides.map((words, side) => (
+            <span class="session-receipt-diff-side" key={side}>
+              <span class="session-receipt-diff-label">{side === 0 ? 'Before' : 'After'}</span>
+              <span class="session-receipt-diff-text">
+                {words.length
+                  ? words.map(({ text, changed }, index) =>
+                      text === '…' && (index === 0 || index === words.length - 1) ? (
+                        <span key={index} class="session-receipt-diff-cut">
+                          {text}
+                        </span>
+                      ) : changed ? (
+                        side === 0 ? (
+                          <del key={index}>{text}</del>
+                        ) : (
+                          <ins key={index}>{text}</ins>
+                        )
+                      ) : (
+                        text
+                      ),
+                    )
+                  : 'Empty'}
+              </span>
+            </span>
+          ))}
+          {canUndo && (
+            <span class="session-receipt-undo">
+              {current ? (
+                <button
+                  type="button"
+                  class="session-receipt-mini"
+                  disabled={undone || yours || undoing}
+                  onClick={onUndo}
+                >
+                  {undone ? '✓ Undone' : yours ? 'You edited it since' : 'Undo this card'}
+                </button>
+              ) : board && !onBoard ? (
+                <button type="button" class="session-receipt-mini" onClick={() => void openBoard(board.id)}>
+                  Open {board.name} to undo
+                </button>
+              ) : (
+                <span class="session-receipt-edit-change">Card no longer on this board</span>
+              )}
+              <span class="session-receipt-edit-change">
+                {current
+                  ? undone
+                    ? 'the card shows Before again'
+                    : yours
+                      ? 'undo would lose your edit'
+                      : node.before?.includes('…') || node.after?.includes('…')
+                        ? 'undoes the whole card'
+                        : 'puts back the text from before'
+                  : board && !onBoard
+                    ? `it is on ${board.name}`
+                    : ''}
+              </span>
+            </span>
+          )}
+        </span>
+      )}
+    </li>
+  );
+}
+
 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;
+  if (!agentSessionsEnabled.value || !receipt) return null;
 
+  const onSnapshotBoard = receipt.snapshot?.boardId === activeBoardId.value;
+  const snapshotBoard = boardList.value.find((board) => board.id === receipt.snapshot?.boardId);
   const viewDiff = async () => {
-    if (!receipt.snapshot) return;
+    if (!receipt.snapshot || !onSnapshotBoard) return;
     setLoadingDiff(true);
     try {
       const response = await workbenchFetch(`/api/canvas/snapshots/${encodeURIComponent(receipt.snapshot.id)}/diff`, {
@@ -141,10 +391,16 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
     }
   };
 
-  const ended = new Date(receipt.endedAt);
-  const endedLabel = Number.isNaN(ended.getTime())
-    ? ''
-    : `${String(ended.getHours()).padStart(2, '0')}:${String(ended.getMinutes()).padStart(2, '0')}`;
+  const endedLabel = clock(receipt.endedAt);
+  const startedLabel = receipt.startedAt ? clock(receipt.startedAt) : '';
+  const endedBy =
+    receipt.endedBy === 'human'
+      ? 'ended by you'
+      : receipt.endedBy === 'idle-timeout'
+        ? 'ended on idle timeout'
+        : receipt.endedBy === 'agent'
+          ? 'ended by the agent'
+          : '';
 
   return (
     <div class="session-receipt" data-testid="session-receipt" role="status">
@@ -152,15 +408,8 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
         <span class="session-receipt-dot" aria-hidden="true" />
         <span class="session-receipt-title">
           {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}` : ''}
+            ? `${receipt.sessions} sessions ended${endedLabel ? ` · ${endedLabel}` : ''}`
+            : `What ${receipt.labels[0]} did`}
         </span>
         <button
           type="button"
@@ -171,7 +420,20 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
           <IconClose />
         </button>
       </div>
-      {receipt.sessions > 1 && <div class="session-receipt-who">{receipt.labels.join(', ')}</div>}
+      {receipt.sessions > 1 ? (
+        <div class="session-receipt-who">{receipt.labels.join(', ')}</div>
+      ) : (
+        // AgentContext.dc.html: "This session · 14:02–14:20 · saved as a snapshot".
+        <div class="session-receipt-who" data-testid="session-receipt-span">
+          {[
+            `This session · ${startedLabel ? `${startedLabel}–` : ''}${endedLabel}`,
+            receipt.snapshot ? 'saved as a snapshot' : '',
+            endedBy,
+          ]
+            .filter(Boolean)
+            .join(' · ')}
+        </div>
+      )}
       <div class="session-receipt-tiles">
         <div class="session-receipt-tile">
           <span class="session-receipt-tile-label">Items</span>
@@ -202,7 +464,11 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
           </div>
         )}
       </div>
-      <ReceiptContext context={receipt.context} label={receipt.labels.join(', ')} />
+      <ReceiptContext
+        context={receipt.context}
+        label={receipt.labels.join(', ')}
+        snapshotId={receipt.sessions === 1 ? (receipt.snapshot?.id ?? null) : null}
+      />
       <div class="session-receipt-note">
         {receipt.sessions > 1
           ? 'History has each session’s diff and the snapshot from before it.'
@@ -221,18 +487,24 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
         {/* No snapshot → no diff will ever exist for this receipt; a forever-
             disabled button is noise (the note above says why). */}
         {receipt.snapshot && (
-          <button type="button" class="session-receipt-primary" disabled={loadingDiff} onClick={() => void viewDiff()}>
-            {loadingDiff ? 'Comparing…' : 'View diff'}
+          <button
+            type="button"
+            class="session-receipt-primary"
+            disabled={loadingDiff || (!onSnapshotBoard && !snapshotBoard)}
+            onClick={() => (onSnapshotBoard ? void viewDiff() : snapshotBoard && void openBoard(snapshotBoard.id))}
+          >
+            {!onSnapshotBoard && snapshotBoard
+              ? `Open ${snapshotBoard.name} to compare`
+              : loadingDiff
+                ? 'Comparing…'
+                : 'View diff'}
           </button>
         )}
-        <button
-          type="button"
-          class="session-receipt-secondary"
-          title="Open the History drawer — saved boards and past sessions"
-          onClick={onOpenSnapshots}
-        >
-          History
-        </button>
+        <BarHint label="Open the History drawer" body="Saved boards and past sessions." side="up" align="end">
+          <button type="button" class="session-receipt-secondary" onClick={onOpenSnapshots}>
+            History
+          </button>
+        </BarHint>
       </div>
     </div>
   );

package/src/client/canvas/ShortcutOverlay.tsx

@@ -45,7 +45,7 @@ const GROUPS: ShortcutGroup[] = [
       { keys: 'Drag empty space', desc: 'Lasso select multiple nodes' },
       { keys: isMac ? 'Delete / \u232b' : 'Delete / Backspace', desc: 'Delete the selection (or the focused node)' },
       { keys: isMac ? '\u2318Z / \u21e7\u2318Z' : 'Ctrl+Z / Ctrl+Y', desc: 'Undo / redo — agent edits included' },
-      { keys: 'Esc', desc: 'Clear selection / close overlay' },
+      { keys: 'Esc', desc: 'Close overlay first, then clear selection and view filters' },
     ],
   },
   {

package/src/client/canvas/SnapshotPanel.tsx

@@ -1,3 +1,5 @@
+import { timeAgo } from '../utils/time-ago';
+import { BarHint } from './BarHint';
 import { isHostedWorkbench } from '../state/workbench-transport';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { IconClose } from '../icons';
@@ -29,17 +31,6 @@ function timeLabel(iso: string): string {
   return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
 }
 
-function timeAgo(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime();
-  const mins = Math.floor(diff / 60000);
-  if (mins < 1) return 'just now';
-  if (mins < 60) return `${mins}m ago`;
-  const hrs = Math.floor(mins / 60);
-  if (hrs < 24) return `${hrs}h ago`;
-  const days = Math.floor(hrs / 24);
-  return `${days}d ago`;
-}
-
 /** "Before session · Copilot · 14:00" → "Copilot". */
 function sessionLabel(name: string): string | null {
   if (!name.startsWith(SESSION_PREFIX)) return null;
@@ -151,7 +142,6 @@ export function SnapshotPanel({
           type="button"
           class={`snapshot-action-btn ${confirming.action === 'delete' ? 'snapshot-action-confirm' : 'snapshot-action-restore'}`}
           onClick={() => (confirming.action === 'delete' ? handleDelete(snap.id) : handleRestore(snap.id))}
-          title={confirming.action === 'delete' ? 'Confirm delete' : 'Confirm restore'}
           disabled={restoringId !== null}
         >
           {confirming.action === 'delete' ? 'Delete' : restoringId === snap.id ? 'Restoring…' : 'Confirm'}
@@ -160,7 +150,6 @@ export function SnapshotPanel({
           type="button"
           class="snapshot-action-btn"
           onClick={() => setConfirming(null)}
-          title="Cancel"
           disabled={restoringId !== null}
         >
           Cancel
@@ -168,29 +157,31 @@ export function SnapshotPanel({
       </>
     ) : (
       <>
-        <button
-          type="button"
-          class="snapshot-action-btn snapshot-action-restore"
-          onClick={() => setConfirming({ id: snap.id, action: 'restore' })}
-          title={
-            isHostedWorkbench()
-              ? 'Restore this snapshot — replaces the current canvas'
-              : 'Restore this snapshot — replaces the current canvas (undoable)'
-          }
-          disabled={restoringId !== null}
+        <BarHint
+          label="Restore this snapshot"
+          body={isHostedWorkbench() ? 'Replaces the current canvas.' : 'Replaces the current canvas (undoable).'}
+          align="end"
         >
-          {restoringId === snap.id ? 'Restoring…' : restoreLabel}
-        </button>
-        <button
-          type="button"
-          class="snapshot-action-btn snapshot-action-delete"
-          onClick={() => setConfirming({ id: snap.id, action: 'delete' })}
-          title="Delete this snapshot"
-          aria-label="Delete snapshot"
-          disabled={restoringId !== null}
-        >
-          <IconClose size={14} />
-        </button>
+          <button
+            type="button"
+            class="snapshot-action-btn snapshot-action-restore"
+            onClick={() => setConfirming({ id: snap.id, action: 'restore' })}
+            disabled={restoringId !== null}
+          >
+            {restoringId === snap.id ? 'Restoring…' : restoreLabel}
+          </button>
+        </BarHint>
+        <BarHint label="Delete this snapshot" align="end">
+          <button
+            type="button"
+            class="snapshot-action-btn snapshot-action-delete"
+            onClick={() => setConfirming({ id: snap.id, action: 'delete' })}
+            aria-label="Delete snapshot"
+            disabled={restoringId !== null}
+          >
+            <IconClose size={14} />
+          </button>
+        </BarHint>
       </>
     );
 
@@ -200,7 +191,7 @@ export function SnapshotPanel({
         <span class="snapshot-panel-title">History</span>
         <span class="snapshot-panel-sub">snapshots + sessions</span>
         <span class="snapshot-panel-spacer" />
-        <button type="button" class="snapshot-panel-close" onClick={onClose} title="Close" aria-label="Close history">
+        <button type="button" class="snapshot-panel-close" onClick={onClose} aria-label="Close history">
           <IconClose />
         </button>
       </div>