pmx-canvas 0.4.8 → 0.5.0

package/src/client/canvas/SnapshotPanel.tsx

@@ -1,11 +1,31 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import {
+  type CanvasSnapshotInfo,
+  deleteSnapshot,
   listSnapshots,
-  saveSnapshot,
+  requestJson,
   restoreSnapshot,
-  deleteSnapshot,
-  type CanvasSnapshotInfo,
+  saveSnapshot,
 } from '../state/intent-bridge';
+import { type DiffSummary, summarizeDiff } from './SessionReceipt';
+
+/**
+ * History drawer (rail-chrome-v2 phase 7, design item 8): snapshots and
+ * session receipts in one reverse-chronological list. A session's entry IS
+ * the snapshot the server took when it attached ("Before session · <label> ·
+ * HH:MM"), so the two histories are one timeline: session entries carry View
+ * diff (the session's own changes) and Restore pre-state; manual snapshots
+ * keep Restore / Delete. Opened from the rail's Snapshots button or the
+ * receipt's Full log. The root keeps the `.snapshot-panel` hook.
+ */
+
+const SESSION_PREFIX = 'Before session · ';
+
+function timeLabel(iso: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return '';
+  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();
@@ -18,6 +38,14 @@ function timeAgo(iso: string): string {
   return `${days}d ago`;
 }
 
+/** "Before session · Copilot · 14:00" → "Copilot". */
+function sessionLabel(name: string): string | null {
+  if (!name.startsWith(SESSION_PREFIX)) return null;
+  const rest = name.slice(SESSION_PREFIX.length);
+  const cut = rest.lastIndexOf(' · ');
+  return cut > 0 ? rest.slice(0, cut) : rest;
+}
+
 export function SnapshotPanel({
   open,
   onClose,
@@ -33,10 +61,10 @@ export function SnapshotPanel({
   const [restoringId, setRestoringId] = useState<string | null>(null);
   const [nameInput, setNameInput] = useState('');
   const [confirming, setConfirming] = useState<{ id: string; action: 'restore' | 'delete' } | null>(null);
+  const [diffs, setDiffs] = useState<Record<string, DiffSummary | 'loading'>>({});
   const panelRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // Load snapshots when panel opens
   useEffect(() => {
     if (!open) return;
     setLoading(true);
@@ -46,7 +74,6 @@ export function SnapshotPanel({
     });
   }, [open]);
 
-  // Focus input on open
   useEffect(() => {
     if (open) setTimeout(() => inputRef.current?.focus(), 50);
   }, [open]);
@@ -65,7 +92,6 @@ export function SnapshotPanel({
     return () => document.removeEventListener('mousedown', handler);
   }, [open, onClose]);
 
-  // Escape to close
   useEffect(() => {
     if (!open) return;
     const handler = (e: KeyboardEvent) => {
@@ -100,30 +126,79 @@ export function SnapshotPanel({
 
   const handleDelete = useCallback(async (id: string) => {
     const result = await deleteSnapshot(id);
-    if (result.ok) {
-      setSnapshots((prev) => prev.filter((s) => s.id !== id));
-    }
+    if (result.ok) setSnapshots((prev) => prev.filter((s) => s.id !== id));
     setConfirming(null);
   }, []);
 
+  const viewDiff = useCallback(async (id: string) => {
+    setDiffs((prev) => ({ ...prev, [id]: 'loading' }));
+    const body = await requestJson<{ diff?: unknown }>(
+      'snapshotDiff',
+      `/api/canvas/snapshots/${encodeURIComponent(id)}/diff`,
+      {},
+    );
+    setDiffs((prev) => ({ ...prev, [id]: summarizeDiff(body.diff) ?? { added: 0, removed: 0, modified: 0 } }));
+  }, []);
+
   if (!open) return null;
 
-  // Position below toolbar button
-  const anchorRect = anchorRef.current?.getBoundingClientRect();
-  const left = anchorRect ? Math.max(8, anchorRect.left - 120) : 100;
-  const top = anchorRect ? anchorRect.bottom + 8 : 48;
+  const actions = (snap: CanvasSnapshotInfo, restoreLabel: string) =>
+    confirming?.id === snap.id ? (
+      <>
+        <button
+          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'}
+        </button>
+        <button
+          type="button"
+          class="snapshot-action-btn"
+          onClick={() => setConfirming(null)}
+          title="Cancel"
+          disabled={restoringId !== null}
+        >
+          Cancel
+        </button>
+      </>
+    ) : (
+      <>
+        <button
+          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)"
+          disabled={restoringId !== null}
+        >
+          {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}
+        >
+          ✕
+        </button>
+      </>
+    );
 
   return (
-    <div ref={panelRef} class="snapshot-panel" style={{ left: `${left}px`, top: `${top}px` }}>
-      {/* Header */}
+    <div ref={panelRef} class="snapshot-panel" data-testid="history-drawer" role="dialog" aria-label="History">
       <div class="snapshot-panel-header">
-        <span class="snapshot-panel-title">Snapshots</span>
-        <button type="button" class="snapshot-panel-close" onClick={onClose} title="Close">
-          {'\u00d7'}
+        <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>
       </div>
 
-      {/* Save form */}
       <div class="snapshot-save-form">
         <input
           ref={inputRef}
@@ -134,85 +209,96 @@ export function SnapshotPanel({
           onKeyDown={(e) => {
             if (e.key === 'Enter') handleSave();
           }}
-          placeholder="Snapshot name..."
+          placeholder="Save a snapshot as…"
+          aria-label="Snapshot name"
           maxLength={80}
           disabled={saving}
         />
         <button type="button" class="snapshot-save-btn" onClick={handleSave} disabled={!nameInput.trim() || saving}>
-          {saving ? '...' : 'Save'}
+          {saving ? '…' : 'Save'}
         </button>
       </div>
-
       <div class="snapshot-restore-note">Restoring replaces the current canvas. You can undo it if needed.</div>
 
-      {/* Snapshot list */}
       <div class="snapshot-list">
-        {loading && <div class="snapshot-empty">Loading...</div>}
-
+        {loading && <div class="snapshot-empty">Loading…</div>}
         {!loading && snapshots.length === 0 && (
-          <div class="snapshot-empty">No snapshots yet. Save one to capture the current canvas state.</div>
+          <div class="snapshot-empty">
+            No history yet. Save a snapshot, or start an agent session — it snapshots for you.
+          </div>
         )}
-
+        {/* Boards the human saved on purpose come first; the automatic
+            pre-session snapshots live under their own header — mixing them
+            buried the deliberate saves under session churn. */}
         {!loading &&
-          snapshots.map((snap) => (
-            <div key={snap.id} class="snapshot-item">
-              <div class="snapshot-item-info">
-                <span class="snapshot-item-name">{snap.name}</span>
-                <span class="snapshot-item-meta">
-                  {snap.nodeCount} node{snap.nodeCount !== 1 ? 's' : ''}
-                  {snap.edgeCount > 0 ? ` \u00b7 ${snap.edgeCount} edge${snap.edgeCount !== 1 ? 's' : ''}` : ''}
-                  {' \u00b7 '}
-                  {timeAgo(snap.createdAt)}
-                </span>
-              </div>
-              <div class="snapshot-item-actions">
-                {confirming?.id === snap.id ? (
-                  <>
+          [
+            ...snapshots.filter((snap) => sessionLabel(snap.name) === null),
+            ...(snapshots.some((snap) => sessionLabel(snap.name) !== null)
+              ? [{ id: '__sessions-header__' } as (typeof snapshots)[number]]
+              : []),
+            ...snapshots.filter((snap) => sessionLabel(snap.name) !== null),
+          ].map((snap) => {
+            if (snap.id === '__sessions-header__') {
+              return (
+                <div key={snap.id} class="snapshot-section-header" data-testid="history-sessions-header">
+                  Sessions
+                </div>
+              );
+            }
+            const label = sessionLabel(snap.name);
+            const diff = diffs[snap.id];
+            if (label !== null) {
+              return (
+                <div key={snap.id} class="snapshot-item is-session" data-testid="history-session">
+                  <div class="snapshot-item-head">
+                    <span class="snapshot-session-dot" aria-hidden="true" />
+                    <span class="snapshot-item-name">Agent session — {label}</span>
+                    <span class="snapshot-item-time">{timeLabel(snap.createdAt)}</span>
+                  </div>
+                  <div class="snapshot-item-meta">
+                    snapshot at session start · {snap.nodeCount} node{snap.nodeCount !== 1 ? 's' : ''}
+                    {diff && diff !== 'loading' && (
+                      <span class="snapshot-item-diff">
+                        {' '}
+                        · since: {diff.added} added · {diff.removed} removed · {diff.modified} modified
+                      </span>
+                    )}
+                  </div>
+                  <div class="snapshot-item-actions is-session">
                     <button
                       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}
+                      class="snapshot-action-btn snapshot-action-diff"
+                      disabled={diff === 'loading'}
+                      onClick={() => void viewDiff(snap.id)}
                     >
-                      {confirming.action === 'delete' ? 'Delete' : restoringId === snap.id ? 'Restoring...' : 'Confirm'}
+                      {diff === 'loading' ? 'Comparing…' : 'View diff'}
                     </button>
-                    <button
-                      type="button"
-                      class="snapshot-action-btn"
-                      onClick={() => setConfirming(null)}
-                      title="Cancel"
-                      disabled={restoringId !== null}
-                    >
-                      Cancel
-                    </button>
-                  </>
-                ) : (
-                  <>
-                    <button
-                      type="button"
-                      class="snapshot-action-btn snapshot-action-restore"
-                      onClick={() => setConfirming({ id: snap.id, action: 'restore' })}
-                      title="Restore this snapshot"
-                      disabled={restoringId !== null}
-                    >
-                      {restoringId === snap.id ? 'Restoring...' : 'Restore'}
-                    </button>
-                    <button
-                      type="button"
-                      class="snapshot-action-btn snapshot-action-delete"
-                      onClick={() => setConfirming({ id: snap.id, action: 'delete' })}
-                      title="Delete this snapshot"
-                      disabled={restoringId !== null}
-                    >
-                      {'\u2715'}
-                    </button>
-                  </>
-                )}
+                    {actions(snap, 'Restore pre-state')}
+                  </div>
+                </div>
+              );
+            }
+            return (
+              <div key={snap.id} class="snapshot-item" data-testid="history-snapshot">
+                <div class="snapshot-item-head">
+                  <span class="snapshot-item-glyph" aria-hidden="true">
+                    ◫
+                  </span>
+                  <span class="snapshot-item-name">{snap.name}</span>
+                  <span class="snapshot-item-time">{timeLabel(snap.createdAt)}</span>
+                </div>
+                <div class="snapshot-item-meta">
+                  {snap.nodeCount} node{snap.nodeCount !== 1 ? 's' : ''}
+                  {snap.edgeCount > 0 ? ` · ${snap.edgeCount} edge${snap.edgeCount !== 1 ? 's' : ''}` : ''}
+                  {' · '}
+                  {timeAgo(snap.createdAt)}
+                </div>
+                <div class="snapshot-item-actions">{actions(snap, 'Restore')}</div>
               </div>
-            </div>
-          ))}
+            );
+          })}
       </div>
+      <div class="snapshot-panel-foot">Every agent session start writes a snapshot automatically.</div>
     </div>
   );
 }

package/src/client/canvas/TextPrompt.tsx

@@ -0,0 +1,128 @@
+import { signal } from '@preact/signals';
+import { useEffect, useRef } from 'preact/hooks';
+
+/**
+ * In-canvas replacement for `window.prompt`, which embedded browser panes
+ * silently no-op (a Shift+F that "does nothing") and no test can drive. One
+ * request at a time; a new ask cancels the previous one.
+ */
+interface TextPromptRequest {
+  title: string;
+  placeholder: string;
+  /** Prefilled (and pre-selected) value — edit flows start from the current text. */
+  initial: string;
+  /** Submitting an empty field resolves '' instead of null — "clear the value" flows. */
+  allowEmpty: boolean;
+  confirm: string;
+  /** Bumped per ask so consecutive requests get a FRESH input element. */
+  seq: number;
+  resolve: (value: string | null) => void;
+}
+
+export const textPromptRequest = signal<TextPromptRequest | null>(null);
+let promptSeq = 0;
+
+export function askText(
+  title: string,
+  placeholder: string,
+  opts: { initial?: string; allowEmpty?: boolean; confirm?: string } = {},
+): Promise<string | null> {
+  return new Promise((resolve) => {
+    textPromptRequest.value?.resolve(null);
+    promptSeq += 1;
+    textPromptRequest.value = {
+      seq: promptSeq,
+      title,
+      placeholder,
+      initial: opts.initial ?? '',
+      allowEmpty: opts.allowEmpty ?? false,
+      confirm: opts.confirm ?? 'Add',
+      resolve,
+    };
+  });
+}
+
+function settle(value: string | null): void {
+  const request = textPromptRequest.value;
+  textPromptRequest.value = null;
+  request?.resolve(value);
+}
+
+export function TextPrompt() {
+  const request = textPromptRequest.value;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!request) return;
+    // Esc closes the dialog wherever focus sits (a click can move focus off the
+    // input, and the global shortcut layer must never see this Esc). Focus and
+    // the prefill are NOT here: an effect runs a frame after the dialog paints,
+    // and a key (or a test's fill) inside that gap lands on the wrong target.
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      e.preventDefault();
+      e.stopPropagation();
+      settle(null);
+    };
+    window.addEventListener('keydown', onKey, { capture: true });
+    return () => window.removeEventListener('keydown', onKey, { capture: true });
+  }, [request]);
+
+  if (!request) return null;
+
+  const submit = () => {
+    const value = inputRef.current?.value.trim() ?? '';
+    settle(value ? value : request.allowEmpty ? '' : null);
+  };
+
+  return (
+    <div class="text-prompt-backdrop" onPointerDown={() => settle(null)}>
+      <div
+        class="text-prompt"
+        role="dialog"
+        aria-label={request.title}
+        data-testid="text-prompt"
+        onPointerDown={(e) => e.stopPropagation()}
+      >
+        <div class="text-prompt-title">{request.title}</div>
+        <input
+          // A fresh element per ask (so defaultValue applies) focused in the
+          // ref callback, which Preact runs synchronously during commit — the
+          // dialog is never on screen unfocused.
+          key={request.seq}
+          ref={(el) => {
+            inputRef.current = el;
+            if (!el) return;
+            el.focus();
+            // Edit flows prefill — selecting it lets a retype replace in one stroke.
+            if (request.initial) el.select();
+          }}
+          class="text-prompt-input"
+          type="text"
+          defaultValue={request.initial}
+          placeholder={request.placeholder}
+          onKeyDown={(e) => {
+            // Contained: the global shortcut layer must not see these.
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              e.stopPropagation();
+              submit();
+            } else if (e.key === 'Escape') {
+              e.preventDefault();
+              e.stopPropagation();
+              settle(null);
+            }
+          }}
+        />
+        <div class="text-prompt-actions">
+          <button type="button" class="text-prompt-cancel" onClick={() => settle(null)}>
+            Cancel
+          </button>
+          <button type="button" class="text-prompt-confirm" onClick={submit}>
+            {request.confirm}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}