pi-weave 0.3.8 → 0.3.9

package/src/web/client/shell/Shell.tsx

@@ -1,16 +1,16 @@
 /** Shared browser/desktop workspace: one data source, two optional tab groups. */
 import { useEffect, useLayoutEffect, useRef, useState, useMemo } from "preact/hooks";
-import type { GraphPayload, NotePayload } from "../../shared/wire";
+import type { GraphPayload, NotePayload, TrailPayload } from "../../shared/wire";
 import { activePane, activeTab, activateTab, closePane, closeTab, focusDocument, initialLayout, reorderTab, moveTab, navigateTab, openDocument, openWithPreferences, restoreWorkspace, openGraph, parseWorkspaceLayout, splitPane, tabDropSource, tabSelection } from "../../shared/workspace";
 import type { Pane, WorkspaceLayout, WorkspaceTab } from "../../shared/workspace";
 import { fetchJson } from "../api.dom";
-import { createNote, fetchGraph, openNote, saveNote } from "../api";
+import { createNote, fetchGraph, fetchHistory, openNote, saveNote } from "../api";
 import { Graph } from "../graph/Graph";
 import { schemeOf, watchScheme } from "../graph/scheme";
 import { createSigmaRenderer } from "../graph/renderer.dom";
 import { Note } from "../note/Note";
 import { createDraftStore, mayMutateDrafts, mayRemoveDrafts } from "../note/drafts";
-import type { DraftStore } from "../note/drafts";
+import type { DraftStore, SaveNote } from "../note/drafts";
 import { DISCARD_PROMPT } from "../note/note.model";
 import { SearchPalette } from "../search/SearchPalette";
 import { Icon, Tree } from "../tree/Tree";
@@ -18,6 +18,9 @@ import { initialWorkspaceState } from "../state";
 import { startWorkspace, watchNote } from "../workspace";
 import type { WorkspaceHandle } from "../workspace";
 import { ContextRail } from "./ContextRail";
+import { startTrailPoll } from "../trail/trail";
+import { TRAIL_TICK_MS, trailLive, trailMarks, trailTurns } from "../trail/trail.model";
+import type { TrailReplay } from "../trail/trail.model";
 import { ResizeHandle } from "./ResizeHandle";
 import { deeplinkSelection, formatHash } from "./deeplink.model";
 import { Settings } from "./Settings";
@@ -51,7 +54,7 @@ function RecentList(props: { visits: readonly string[]; graph: GraphPayload | nu
 /** A tab view can unmount; the shared draft store outlives it. */
 function DocumentView(props: {
   preferences: Preferences; tab: WorkspaceTab; graph: GraphPayload | null; drafts: DraftStore; revision: number;
-  onSelect: (id: string, newTab?: boolean) => void; onSave: (slug: string, body: string) => Promise<boolean>;
+  onSelect: (id: string, newTab?: boolean) => void; onSave: SaveNote;
   now: number; onScroll: (value: number) => void; onSearch: () => void; onGraph: () => void; onCreate: (title: string) => Promise<boolean>;
 }) {
   const id = tabSelection(props.tab);
@@ -110,7 +113,7 @@ function DocumentView(props: {
   }}><Note spellcheck={props.preferences.spellcheck} defaultEdit={props.preferences.defaultEdit} note={payload?.note ?? null} loadFailed={payload?.failed ?? false} loadVersion={payload?.version ?? 0} graph={props.graph} selectedId={id}
     onSelect={props.onSelect} onOpen={(noteSlug) => void openNote(fetchJson, noteSlug).then((result) => {
       if (!result.ok) window.alert(result.message); else if (!result.data.opened) window.alert("Could not open the note in an editor.");
-    })} onSave={props.onSave} drafts={props.drafts} idPrefix={props.tab.id} now={props.now} /></div>;
+    })} onSave={props.onSave} onHistory={(noteSlug) => fetchHistory(fetchJson, noteSlug)} drafts={props.drafts} idPrefix={props.tab.id} now={props.now} /></div>;
 }
 
 export function Shell(props: ShellProps) {
@@ -119,6 +122,9 @@ export function Shell(props: ShellProps) {
   const [overlay, setOverlay] = useState<OverlayId>(null);
   const [contextGraph, setContextGraph] = useState(false);
   const [now, setNow] = useState(Date.now);
+  const [trail, setTrail] = useState<TrailPayload | null>(null);
+  const [trailNow, setTrailNow] = useState(Date.now);
+  const [replay, setReplay] = useState<TrailReplay | null>(null);
   const [width, setWidth] = useState(props.initialWidth);
   const [scheme, setScheme] = useState(() => schemeOf(window));
   const [ready, setReady] = useState(false);
@@ -199,8 +205,8 @@ export function Shell(props: ShellProps) {
   };
   live.current = { layout, overlay, selectedId, graphPreviewId, select };
   const mayMutate = (slugs: readonly string[]): boolean => mayMutateDrafts(drafts, slugs, () => window.confirm("Discard unsaved changes to the affected notes before changing files?"));
-  const save = async (slug: string, body: string): Promise<boolean> => {
-    const result = await saveNote(fetchJson, slug, body);
+  const save: SaveNote = async (slug, body, options) => {
+    const result = await saveNote(fetchJson, slug, body, options?.raw === true);
     if (!result.ok) { window.alert(result.message); return false; }
     setRevision((value) => value + 1); workspace.current?.refresh(); return true;
   };
@@ -272,6 +278,24 @@ export function Shell(props: ShellProps) {
     }, 350);
     return () => window.clearTimeout(timer);
   }, [layout, ready]);
+  // The recall trail: its own poll, and a fade clock that runs only while
+  // something is glowing (or a replay still has steps to light).
+  useEffect(() => startTrailPoll({
+    fetch: fetchJson,
+    onTrail: (next) => { setTrail(next); setReplay(null); setTrailNow(Date.now()); },
+  }), []);
+  const trailGlowing = trailLive(trail, trailNow, replay);
+  useEffect(() => {
+    if (!trailGlowing) {
+      if (replay !== null) setReplay(null);
+      return;
+    }
+    const tick = window.setInterval(() => setTrailNow(Date.now()), TRAIL_TICK_MS);
+    return () => window.clearInterval(tick);
+  }, [trailGlowing]);
+  const glows = useMemo(() => trailMarks(trail, trailNow, replay), [trail, trailNow, replay]);
+  const turns = useMemo(() => trailTurns(trail, data.graph), [trail, data.graph]);
+  const replayTurn = (turn: number): void => { const at = Date.now(); setTrailNow(at); setReplay({ turn, startedAt: at }); };
   useEffect(() => {
     const tick = window.setInterval(() => setNow(Date.now()), TICK_MS);
     const resize = (): void => setWidth(window.innerWidth);
@@ -452,7 +476,7 @@ export function Shell(props: ShellProps) {
       </nav>
       <div class="weave-sidebar-dock weave-notes-dock" data-open={layout.treeVisible} inert={!layout.treeVisible} aria-hidden={!layout.treeVisible} style={{ "--weave-sidebar-width": `${Math.min(layout.treeWidth, width - 90)}px` }}><aside class="weave-sidebar weave-sidebar-notes" aria-label="Notes sidebar">
         <div class="weave-sidebar-heading"><button type="button" aria-pressed={!recentMode} onClick={() => setRecentMode(false)}>Files</button><button type="button" aria-pressed={recentMode} onClick={() => setRecentMode(true)}>Recent</button><button type="button" aria-label="Hide notes sidebar" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle notes sidebar"]')?.focus(); setLayout({ ...layout, treeVisible: false }); }}>«</button></div>
-        {recentMode ? <RecentList visits={visits} graph={data.graph} selectedId={selectedId} onSelect={select} /> : <Tree graph={data.graph} selectedId={selectedId} recentIds={data.recentIds} onSelect={(id, newTab, keepSidebar) => select(id, newTab, layout.activePane, keepSidebar)} onMutate={mayMutate} onRefresh={() => workspace.current?.refresh()} now={now} />}
+        {recentMode ? <RecentList visits={visits} graph={data.graph} selectedId={selectedId} onSelect={select} /> : <Tree graph={data.graph} selectedId={selectedId} recentIds={data.recentIds} trail={glows} onSelect={(id, newTab, keepSidebar) => select(id, newTab, layout.activePane, keepSidebar)} onMutate={mayMutate} onRefresh={() => workspace.current?.refresh()} now={now} />}
         <div class="weave-vault-label"><span>Workspace</span><strong title={props.cwd}>{props.cwd.split(/[\\/]/).filter(Boolean).pop() ?? "Weave"}</strong></div>
       </aside><ResizeHandle label="Resize notes sidebar" min={180} max={420} value={layout.treeWidth} onChange={(delta) => setLayout((value) => ({ ...value, treeWidth: Math.max(180, Math.min(420, value.treeWidth + delta)) }))} /></div>
       <main class={`weave-panes weave-split-${layout.split}`} style={layout.panes.length === 2 && width >= 850 ? { [layout.split === "right" ? "gridTemplateColumns" : "gridTemplateRows"]: `minmax(0, ${layout.ratio}fr) 4px minmax(0, ${1 - layout.ratio}fr)` } : {}}>
@@ -461,7 +485,7 @@ export function Shell(props: ShellProps) {
           setLayout((value) => ({ ...value, ratio: Math.max(.2, Math.min(.8, value.ratio + delta / (extent ?? 800))) }));
         }} /> : null}{renderPane(group)}</>)}
       </main>
-      <div class="weave-sidebar-dock weave-context-dock" data-open={contextVisible} inert={!contextVisible} aria-hidden={!contextVisible} style={{ "--weave-sidebar-width": `${layout.contextWidth}px` }}><ResizeHandle label="Resize context sidebar" min={180} max={400} value={layout.contextWidth} onChange={(delta) => setLayout((value) => ({ ...value, contextWidth: Math.max(180, Math.min(400, value.contextWidth - delta)) }))} /><aside class="weave-sidebar weave-sidebar-context" aria-label="Context sidebar"><div class="weave-sidebar-heading"><strong>Context</strong><button type="button" aria-label="Hide context sidebar" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle context sidebar"]')?.focus(); setCompactContext(false); setLayout({ ...layout, contextVisible: false }); }}>»</button></div>{contextGraphActive ? <section class="weave-context-graph-section" aria-label="Note connections"><div class="weave-context-graph-heading"><strong>Note graph</strong><button type="button" aria-label="Hide note graph" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle note graph"]')?.focus(); setContextGraph(false); }}>×</button></div><div class="weave-context-graph-slot" ref={contextGraphSlot} style={{ height: layout.contextGraphHeight }}>{documentId === null ? <p>Select a note to see its connections.</p> : null}</div><ResizeHandle label="Resize note graph" horizontal min={120} max={800} value={graphBox.height} onChange={(delta) => setLayout((value) => ({ ...value, contextGraphHeight: Math.max(120, Math.min(800, (contextGraphSlot.current?.clientHeight ?? value.contextGraphHeight) + delta)) }))} /></section> : null}<ContextRail graph={data.graph} selectedId={selectedId} onSelect={select} tagHeight={layout.contextTagsHeight} onTagResize={(contextTagsHeight) => setLayout((value) => ({ ...value, contextTagsHeight }))} /></aside></div>
+      <div class="weave-sidebar-dock weave-context-dock" data-open={contextVisible} inert={!contextVisible} aria-hidden={!contextVisible} style={{ "--weave-sidebar-width": `${layout.contextWidth}px` }}><ResizeHandle label="Resize context sidebar" min={180} max={400} value={layout.contextWidth} onChange={(delta) => setLayout((value) => ({ ...value, contextWidth: Math.max(180, Math.min(400, value.contextWidth - delta)) }))} /><aside class="weave-sidebar weave-sidebar-context" aria-label="Context sidebar"><div class="weave-sidebar-heading"><strong>Context</strong><button type="button" aria-label="Hide context sidebar" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle context sidebar"]')?.focus(); setCompactContext(false); setLayout({ ...layout, contextVisible: false }); }}>»</button></div>{contextGraphActive ? <section class="weave-context-graph-section" aria-label="Note connections"><div class="weave-context-graph-heading"><strong>Note graph</strong><button type="button" aria-label="Hide note graph" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle note graph"]')?.focus(); setContextGraph(false); }}>×</button></div><div class="weave-context-graph-slot" ref={contextGraphSlot} style={{ height: layout.contextGraphHeight }}>{documentId === null ? <p>Select a note to see its connections.</p> : null}</div><ResizeHandle label="Resize note graph" horizontal min={120} max={800} value={graphBox.height} onChange={(delta) => setLayout((value) => ({ ...value, contextGraphHeight: Math.max(120, Math.min(800, (contextGraphSlot.current?.clientHeight ?? value.contextGraphHeight) + delta)) }))} /></section> : null}<ContextRail graph={data.graph} selectedId={selectedId} onSelect={select} trail={turns} trailTurn={replay?.turn ?? null} onReplay={replayTurn} tagHeight={layout.contextTagsHeight} onTagResize={(contextTagsHeight) => setLayout((value) => ({ ...value, contextTagsHeight }))} /></aside></div>
       {hasGraph || contextGraph ? <div class={`weave-graph-host${contextGraphActive ? " weave-context-graph-host" : ""}`}
         onDragOver={(event) => { if (!contextGraphActive && graphPane) tabDragOver(graphPane.id, event); }} onDrop={(event) => { if (!contextGraphActive && graphPane) tabDrop(graphPane.id, event); }}
         onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDropPane(null); }}
@@ -469,7 +493,7 @@ export function Shell(props: ShellProps) {
         onFocusCapture={() => { if (!contextGraphActive && graphPane) setLayout((current) => ({ ...current, activePane: graphPane.id })); }}
         aria-hidden={!graphVisible} inert={!graphVisible} role={contextGraphActive ? "region" : undefined} aria-label={contextGraphActive ? "Note graph" : undefined}
         style={{ ...graphBox, visibility: graphVisible ? "visible" : "hidden", pointerEvents: graphVisible ? "auto" : "none" }}>
-        <Graph graph={data.graph} selectedId={selectedId} previewId={graphPreviewId} onSelect={selectGraph} onOpen={openGraphNode} renderer={createSigmaRenderer} storage={localStorage} host={window} scheme={graphTheme} forces={layout.preferences.forces} groupColors={layout.preferences.groupColors} bootFailed={data.graphFailed} fit={fit} />
+        <Graph graph={data.graph} selectedId={selectedId} previewId={graphPreviewId} onSelect={selectGraph} onOpen={openGraphNode} renderer={createSigmaRenderer} storage={localStorage} host={window} scheme={graphTheme} forces={layout.preferences.forces} groupColors={layout.preferences.groupColors} bootFailed={data.graphFailed} fit={fit} trail={glows} />
       </div> : null}
     </div>
     <div class="weave-footer"><StatusBar model={statusBarModel(props.cwd, selectedId)} />

package/src/web/client/shell/keys.model.ts

@@ -41,7 +41,7 @@
  * `⌘K`, which would otherwise re-open the palette on top of itself.
  */
 
-import { COLUMNS, type ColumnId, type OverlayId } from "./shell.model";
+import type { ColumnId, OverlayId } from "./shell.model";
 
 // --- the event, without the DOM ---------------------------------------------------
 
@@ -62,6 +62,12 @@ export interface KeyDescriptor {
   readonly alt: boolean;
   /** Focus is in an `<input>`, `<textarea>`, `<select>` or contenteditable. */
   readonly typing: boolean;
+  /**
+   * Focus is in the tree or the graph — the columns that *make* a selection,
+   * and so the only places `Esc` may clear one. Read from a note, the same
+   * key used to close the note you were reading.
+   */
+  readonly navigating: boolean;
 }
 
 /** What the shell knows that changes what a key means. */
@@ -172,11 +178,12 @@ export function shellKey(event: KeyDescriptor, ctx: KeyContext): ShellAction | n
     return column === undefined ? null : { type: "focusColumn", column };
   }
 
-  // Only claimed when there is a selection to clear. With nothing selected,
-  // `Esc` belongs to whatever else the browser or a future dialog wants it
-  // for, and swallowing it silently would be the kind of key theft this
-  // module exists to avoid.
-  if (event.key === "Escape") return ctx.hasSelection ? { type: "clearSelection" } : null;
+  // Only claimed when there is a selection to clear, and only from the tree
+  // or the graph. With nothing selected, `Esc` belongs to whatever else the
+  // browser or a future dialog wants it for, and swallowing it silently would
+  // be the kind of key theft this module exists to avoid. From the note
+  // column it would close the note being read, which nobody means by it.
+  if (event.key === "Escape") return ctx.hasSelection && event.navigating ? { type: "clearSelection" } : null;
 
   if (!isBare(event) || event.typing) return null;
   return BARE_KEYS[event.key] ?? null;
@@ -216,8 +223,13 @@ export function isTextEntry(tagName: string | null, contentEditable: boolean): b
 export interface KeyTarget {
   readonly tagName?: string | undefined;
   readonly isContentEditable?: boolean | undefined;
+  /** `Element.closest`; absent on `window` and `document`. */
+  closest?(selector: string): unknown;
 }
 
+/** The tree and graph columns, where {@link KeyDescriptor.navigating} holds. */
+export const NAVIGATING_SELECTOR = ".weave-sidebar-notes, .weave-graph-host";
+
 /**
  * The slice of `KeyboardEvent` the subscription reads.
  *
@@ -246,6 +258,7 @@ export function describeKey(event: KeyboardEventLike): KeyDescriptor {
     shift: event.shiftKey,
     alt: event.altKey,
     typing: isTextEntry(event.target?.tagName ?? null, event.target?.isContentEditable === true),
+    navigating: (event.target?.closest?.(NAVIGATING_SELECTOR) ?? null) !== null,
   };
 }
 
@@ -395,7 +408,7 @@ export function keyHelp(cmd: string): readonly KeyHelpGroup[] {
         })),
         { combo: "?", what: "This help" },
         { combo: "t", what: "Switch between selected light and dark themes" },
-        { combo: "Esc", what: "Clear the selection, or close an overlay" },
+        { combo: "Esc", what: "Clear the selection from the tree or graph, or close an overlay" },
       ],
     },
     {

package/src/web/client/shell/theme.ts

@@ -178,6 +178,16 @@ body{font-size:var(--weave-px-base)}
   40%{font-weight:700}
   100%{background:transparent;font-weight:400}
 }
+/* Recall trail (issue #78): a note the agent searched, read or wrote. The
+   tint follows the graph's palette for the same kinds (warn → ok → accent)
+   and steps down through three strength buckets as the glow fades. */
+.weave-row-trail{--weave-trail:var(--weave-warn);box-shadow:inset 2px 0 0 color-mix(in srgb,var(--weave-trail) var(--weave-trail-mix),transparent);background:color-mix(in srgb,var(--weave-trail) calc(var(--weave-trail-mix) / 6),transparent)}
+.weave-row-trail-read{--weave-trail:var(--weave-ok)}
+.weave-row-trail-wrote{--weave-trail:var(--weave-accent)}
+.weave-row-trail-3{--weave-trail-mix:90%}
+.weave-row-trail-2{--weave-trail-mix:55%}
+.weave-row-trail-1{--weave-trail-mix:25%}
+.weave-row-trail-wrote.weave-row-trail-3 .weave-label{font-weight:600}
 .weave-twisty{width:16px;height:16px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--weave-faint);cursor:pointer}
 .weave-kind{flex:none;color:var(--weave-faint);font-size:var(--weave-px-ui)}
 .weave-prov{flex:none;font-size:var(--weave-px-prov)}
@@ -263,14 +273,103 @@ body{font-size:var(--weave-px-base)}
 /* Save is the row's only affirmative action, so the only one with the accent. */
 .weave-note-save{color:var(--weave-accent);border-color:var(--weave-accent)}
 .weave-note-save:disabled{color:var(--weave-faint);border-color:var(--weave-line-strong);cursor:default}
+/* History: a slim bar under the header. The step's added text is marked in
+   the accent tint, the same strength the selected rows use. */
+.weave-note-history[aria-pressed="true"]{color:var(--weave-accent);border-color:var(--weave-accent)}
+/* The replay band sits under the header like the header itself: full width,
+   the note's gutter, one line of words, one line of controls. Dots on the
+   track are the versions, coloured by who made them. */
+.weave-replay{
+  display:flex;flex-direction:column;gap:8px;padding:10px var(--weave-note-gutter) 12px;
+  background:var(--weave-panel);border-bottom:1px solid var(--weave-line);
+  font-size:var(--weave-px-ui);color:var(--weave-dim);
+}
+.weave-replay-note{color:var(--weave-faint)}
+.weave-replay-caption{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:18px}
+.weave-replay-clock{display:inline-flex;color:var(--weave-dim)}
+.weave-replay-position{font-weight:650;color:var(--weave-fg);font-variant-numeric:tabular-nums}
+.weave-replay-who{display:inline-flex;align-items:center;gap:6px;color:var(--weave-dim)}
+.weave-replay-who::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--weave-who)}
+.weave-replay-time{color:var(--weave-faint)}
+.weave-replay-change{color:var(--weave-ok);font-size:var(--weave-px-caption);font-variant-numeric:tabular-nums}
+.weave-replay-human{--weave-who:var(--weave-ok)}
+.weave-replay-agent{--weave-who:var(--weave-accent)}
+.weave-replay-outside,.weave-replay-system{--weave-who:var(--weave-faint)}
+.weave-replay-controls{display:flex;align-items:center;gap:6px}
+.weave-replay-controls button{
+  flex:none;display:inline-grid;place-items:center;width:28px;height:28px;padding:0;cursor:pointer;
+  color:var(--weave-fg);background:var(--weave-page);
+  border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius-pop);
+}
+.weave-replay-controls button:hover:not(:disabled){border-color:var(--weave-accent)}
+.weave-replay-controls button:focus-visible{outline:2px solid var(--weave-accent);outline-offset:1px}
+.weave-replay-controls button:disabled{color:var(--weave-faint);cursor:default;opacity:.6}
+.weave-replay-controls .weave-replay-play{color:var(--weave-page);background:var(--weave-accent);border-color:var(--weave-accent)}
+.weave-replay-controls .weave-replay-play:hover:not(:disabled){filter:brightness(1.08)}
+.weave-replay-track{--weave-replay-at:100%;position:relative;flex:1;min-width:80px;height:28px;margin-left:8px}
+.weave-replay-track::before{
+  content:"";position:absolute;left:7px;right:7px;top:13px;height:2px;border-radius:999px;
+  background:linear-gradient(to right,color-mix(in srgb,var(--weave-accent) 55%,transparent) var(--weave-replay-at),var(--weave-line-strong) var(--weave-replay-at));
+}
+.weave-replay-ticks{position:absolute;left:7px;right:7px;top:0;bottom:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
+.weave-replay-tick{position:relative;width:0;height:0}
+.weave-replay-tick::before{
+  content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;box-sizing:border-box;border-radius:999px;
+  background:var(--weave-who);border:2px solid var(--weave-panel);
+}
+.weave-replay-ahead::before{opacity:.4}
+.weave-replay-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
+.weave-replay-slider:disabled{cursor:default}
+.weave-replay-slider:focus{outline:none}
+.weave-replay-slider::-webkit-slider-runnable-track{height:28px;background:transparent}
+.weave-replay-slider::-moz-range-track{height:28px;background:transparent}
+.weave-replay-slider::-webkit-slider-thumb{
+  -webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:7px;border-radius:999px;
+  background:var(--weave-page);border:2px solid var(--weave-accent);box-sizing:border-box;
+}
+.weave-replay-slider::-moz-range-thumb{
+  width:14px;height:14px;border-radius:999px;box-sizing:border-box;
+  background:var(--weave-page);border:2px solid var(--weave-accent);
+}
+/* Focus fills the thumb: a ring would need an elevation shadow. */
+.weave-replay-slider:focus-visible::-webkit-slider-thumb{background:var(--weave-accent);border-color:var(--weave-page)}
+.weave-replay-slider:focus-visible::-moz-range-thumb{background:var(--weave-accent);border-color:var(--weave-page)}
+.weave-replay-hint{margin:0;color:var(--weave-faint)}
+.weave-replay-mark{background:var(--weave-new);color:inherit}
 /* Mono and a tighter line than the prose: this is Markdown source, where
    alignment carries meaning proportional text throws away. */
 .weave-note-editor{
-  display:block;width:100%;flex:1;min-height:0;resize:none;
+  display:block;width:100%;flex:1 0 auto;min-height:12em;resize:none;
   padding:12px var(--weave-note-gutter) 28px;box-sizing:border-box;
   font-family:var(--weave-mono);font-size:var(--weave-px-row);line-height:1.6;
   color:var(--weave-fg);background:var(--weave-bg);border:0;outline:0;
 }
+/* The \`## Raw\` box under the editor: folded by default so a long
+   dictation never outgrows the note, a dashed edge to say "captured, not
+   written", and a capped height once open. */
+.weave-raw{
+  flex:none;margin:0 var(--weave-note-gutter) 24px;
+  border:1px dashed var(--weave-line-strong);border-radius:var(--weave-radius-pop);background:var(--weave-panel);
+}
+.weave-raw-head{display:flex;align-items:center;gap:10px;padding:5px 8px;min-height:24px}
+.weave-raw[data-open] .weave-raw-head{border-bottom:1px dashed var(--weave-line-strong)}
+.weave-raw-toggle{
+  display:inline-flex;align-items:center;gap:6px;padding:3px 6px;cursor:pointer;
+  font:inherit;font-size:var(--weave-px-ui);font-weight:600;color:var(--weave-fg);
+  background:none;border:0;border-radius:var(--weave-radius);
+}
+.weave-raw-toggle:hover{background:var(--weave-line)}
+.weave-raw-toggle:focus-visible{outline:2px solid var(--weave-accent);outline-offset:1px}
+.weave-raw-chevron{flex:none;color:var(--weave-dim);transition:transform .12s ease}
+.weave-raw-toggle[aria-expanded="true"] .weave-raw-chevron{transform:rotate(90deg)}
+.weave-raw-hint{font-size:var(--weave-px-caption);color:var(--weave-faint)}
+.weave-raw-editor{
+  display:block;width:100%;box-sizing:border-box;min-height:7em;max-height:18em;
+  field-sizing:content;resize:vertical;padding:10px 14px 12px;
+  font-family:var(--weave-mono);font-size:var(--weave-px-row);line-height:1.6;
+  color:var(--weave-dim);background:transparent;border:0;outline:0;
+}
+.weave-raw-editor:focus{color:var(--weave-fg)}
 .weave-note-tags{margin:6px 0 0;display:flex;gap:5px;flex-wrap:wrap}
 .weave-tag{
   font-size:var(--weave-px-caption);color:var(--weave-accent);background:var(--weave-panel);
@@ -433,6 +532,24 @@ body{font-size:var(--weave-px-base)}
    border, cursor — plus a full-width flex row so the count badge lands on the
    right edge of the *column*, not of the text. */
 .weave-ctx-group{padding:2px var(--weave-gutter) 2px}
+.weave-trail{padding-top:6px;padding-bottom:6px;border-bottom:1px solid var(--weave-line)}
+.weave-trail-head{display:flex;align-items:center;gap:6px;font-size:var(--weave-px-caption);font-weight:600;letter-spacing:.09em;color:var(--weave-faint);text-transform:uppercase}
+.weave-trail-head .weave-ctx-count{margin-left:0}
+.weave-trail-replay,.weave-trail-turn{font:inherit;font-size:var(--weave-px-caption);letter-spacing:0;text-transform:none;color:var(--weave-dim);background:none;border:1px solid var(--weave-line);border-radius:var(--weave-radius);padding:0 6px;cursor:pointer}
+.weave-trail-replay{margin-left:auto}
+.weave-trail-replay:hover,.weave-trail-turn:hover{color:var(--weave-fg)}
+.weave-trail-turn-on{color:var(--weave-accent);border-color:var(--weave-accent)}
+.weave-trail-steps{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
+.weave-trail-step{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;padding-left:10px;position:relative;line-height:1.45}
+.weave-trail-step::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:999px;background:var(--weave-warn)}
+.weave-trail-read::before{background:var(--weave-ok)}
+.weave-trail-wrote::before{background:var(--weave-accent)}
+.weave-trail-verb{color:var(--weave-dim)}
+.weave-trail-detail{color:var(--weave-faint);font-family:var(--weave-mono);font-size:var(--weave-px-caption)}
+.weave-trail-note{font:inherit;color:var(--weave-fg);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--weave-line-strong);text-underline-offset:2px}
+.weave-trail-note:hover{color:var(--weave-accent)}
+.weave-trail-empty{margin:4px 0 0;color:var(--weave-faint)}
+.weave-trail-turns{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
 .weave-ctx-head{margin:0}
 .weave-ctx-heading{
   display:flex;align-items:center;gap:5px;width:100%;margin:0;padding:2px 0;

package/src/web/client/shell/workspace.css.ts

@@ -74,6 +74,8 @@ export const WORKSPACE_CSS = `
 .weave-document .weave-note-body h2{font-size:var(--weave-px-title);margin-top:28px}
 .weave-document .weave-note-editor{padding:14px max(24px,calc((100% - var(--weave-reading-width,760px))/2));min-height:220px;flex:1;font-size:var(--weave-note-size,var(--weave-px-subhead))}
 .weave-document .weave-note-tags{margin-top:12px}
+.weave-document .weave-replay{padding:12px max(24px,calc((100% - var(--weave-reading-width,760px))/2)) 14px}
+.weave-document .weave-raw{margin:0 max(24px,calc((100% - var(--weave-reading-width,760px))/2)) 28px}
 .weave-document .weave-note-edit,.weave-document .weave-note-save{padding:5px 10px;border-radius:var(--weave-radius);font-size:var(--weave-px-caption)}
 .weave-document .weave-note-edit{color:var(--weave-dim);background:transparent;border-color:transparent}
 .weave-document .weave-note-edit:hover{color:var(--weave-accent);background:var(--weave-new);border-color:transparent}
@@ -128,6 +130,8 @@ export const WORKSPACE_CSS = `
   .weave-panes{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
   .weave-document .weave-note-head{padding:20px}
   .weave-document .weave-note-body{padding:10px 20px 40px}
+  .weave-document .weave-replay{padding:12px 20px}
+  .weave-document .weave-raw{margin:0 20px 24px}
 }
 @media(prefers-reduced-motion:reduce){
   .weave-sidebar-dock,.weave-sidebar-dock[data-open=false],.weave-sidebar-dock>.weave-sidebar{transition:none}

package/src/web/client/trail/TrailStrip.tsx

@@ -0,0 +1,55 @@
+/**
+ * The "This turn" strip at the top of the context rail (issue #78).
+ *
+ * Every string and every grouping comes from `trail.model.ts`; this renders
+ * the newest turn's steps as `searched "auth" → read Auth migration → …`,
+ * with each note a link, and the earlier turns as small time chips that
+ * replay their glow when clicked.
+ */
+
+import type { TrailTurnView } from "./trail.model";
+import { TRAIL_EMPTY_TURN, turnHeading } from "./trail.model";
+
+export interface TrailStripProps {
+  turns: readonly TrailTurnView[];
+  /** The turn whose steps are listed — the replayed one, or `null` for the newest. */
+  shownTurn: number | null;
+  onSelect: (id: string, newTab?: boolean) => void;
+  onReplay: (turn: number) => void;
+}
+
+export function TrailStrip(props: TrailStripProps) {
+  const latest = props.turns[0];
+  if (latest === undefined) return null;
+  const shown = props.turns.find((view) => view.turn === props.shownTurn) ?? latest;
+  return (
+    <section class="weave-ctx-group weave-trail" aria-label="What your agent recalled">
+      <h4 class="weave-ctx-head weave-trail-head">
+        <span class="weave-trail-title">{turnHeading(shown, shown === latest)}</span>
+        <span class="weave-ctx-count" title="Notes read or written">{shown.used}</span>
+        {shown.steps.length === 0 ? null : <button type="button" class="weave-trail-replay" title="Replay this turn's glow" onClick={() => props.onReplay(shown.turn)}>Replay</button>}
+      </h4>
+      {shown.steps.length === 0 ? <p class="weave-trail-empty">{TRAIL_EMPTY_TURN}</p> : null}
+      <ol class="weave-trail-steps">
+        {shown.steps.map((step) => (
+          <li key={step.key} class={`weave-trail-step weave-trail-${step.kind}`}>
+            <span class="weave-trail-verb">{step.verb}</span>
+            {step.notes.map((note) => (
+              <button key={note.id} type="button" class="weave-trail-note" onClick={(event) => props.onSelect(note.id, event.metaKey || event.ctrlKey)}>{note.label}</button>
+            ))}
+            {step.detail === null ? null : <span class="weave-trail-detail">{step.detail}</span>}
+          </li>
+        ))}
+      </ol>
+      {props.turns.length < 2 ? null : (
+        <div class="weave-trail-turns" role="group" aria-label="Earlier turns">
+          {props.turns.map((view, index) => (
+            <button key={view.turn} type="button" class={`weave-trail-turn${view.turn === shown.turn ? " weave-trail-turn-on" : ""}`} aria-pressed={view.turn === shown.turn} onClick={() => props.onReplay(view.turn)}>
+              {turnHeading(view, index === 0)}
+            </button>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/web/client/trail/trail.model.ts

@@ -0,0 +1,195 @@
+/**
+ * The recall trail, decided (issue #78).
+ *
+ * `GET /api/trail` lists the notes the agent searched, read and wrote. This
+ * module turns that list into the two things the workspace draws:
+ *
+ *  - {@link trailMarks}: which nodes glow right now, how, and how strongly.
+ *    The glow fades over {@link TRAIL_FADE_MS}; a replayed turn relights its
+ *    steps one after another from the moment it was clicked.
+ *  - {@link trailTurns}: the "This turn" strip — each turn's steps in order,
+ *    worded as `searched "auth" → read Auth migration → appended Auth migration`.
+ *
+ * Pure, DOM-free and clock-free (every function takes `now`), like the other
+ * `*.model.ts` files, so the whole feature is covered by unit tests.
+ */
+
+import type { GraphPayload, TrailPayload, WireTrailEvent, WireTrailKind } from "../../shared/wire";
+
+/** How long a glow takes to fade out completely. */
+export const TRAIL_FADE_MS = 60_000;
+
+/** How often the fade repaints while something is glowing. */
+export const TRAIL_TICK_MS = 1_000;
+
+/** In a replay, the gap between one step lighting and the next. */
+export const REPLAY_STEP_MS = 700;
+
+/** How many turns the strip lists. */
+export const TRAIL_TURNS_SHOWN = 5;
+
+/** One glowing node. `strength` runs 1 (just happened) → 0 (faded). */
+export interface TrailMark {
+  kind: WireTrailKind;
+  strength: number;
+}
+
+/** A replay in progress: which turn, and when it was clicked. */
+export interface TrailReplay {
+  turn: number;
+  startedAt: number;
+}
+
+/** A write outranks a read, which outranks a search hit. */
+const RANK: Readonly<Record<WireTrailKind, number>> = { searched: 0, read: 1, wrote: 2 };
+
+const NO_MARKS: ReadonlyMap<string, TrailMark> = new Map();
+
+/** When each event lights, or `null` if it is not part of what is shown. */
+function lightTimes(trail: TrailPayload, replay: TrailReplay | null): Array<{ event: WireTrailEvent; at: number }> {
+  if (replay === null) return trail.events.map((event) => ({ event, at: Date.parse(event.at) }));
+  return trail.events
+    .filter((event) => event.turn === replay.turn)
+    .map((event, index) => ({ event, at: replay.startedAt + index * REPLAY_STEP_MS }));
+}
+
+/**
+ * Node id → glow. A node touched several ways in one turn shows the strongest
+ * kind (wrote > read > searched) at the freshest strength; a later turn's
+ * touch replaces an earlier turn's, so a note read now is not still shown as
+ * written a turn ago.
+ *
+ * Live, an event stamped slightly in the future (clock skew) glows at full
+ * strength; in a replay a step whose moment has not come yet stays dark.
+ */
+export function trailMarks(trail: TrailPayload | null, now: number, replay: TrailReplay | null = null): ReadonlyMap<string, TrailMark> {
+  if (trail === null) return NO_MARKS;
+  const marks = new Map<string, TrailMark>();
+  const turnOf = new Map<string, number>();
+  for (const { event, at } of lightTimes(trail, replay)) {
+    const age = now - at;
+    if (replay !== null && age < 0) continue;
+    const strength = Math.min(1, 1 - age / TRAIL_FADE_MS);
+    if (!(strength > 0)) continue;
+    for (const slug of event.slugs) {
+      const id = `note:${slug}`;
+      // A newer turn's touch replaces an older turn's; within a turn the strongest kind wins.
+      const existing = turnOf.get(id) === event.turn ? marks.get(id) : undefined;
+      const kind = existing === undefined || RANK[event.kind] > RANK[existing.kind] ? event.kind : existing.kind;
+      marks.set(id, { kind, strength: Math.max(strength, existing?.strength ?? 0) });
+      turnOf.set(id, event.turn);
+    }
+  }
+  return marks.size === 0 ? NO_MARKS : marks;
+}
+
+/** Whether anything is still glowing or still to light — i.e. whether the fade clock should run. */
+export function trailLive(trail: TrailPayload | null, now: number, replay: TrailReplay | null = null): boolean {
+  if (trail === null) return false;
+  return lightTimes(trail, replay).some(({ at }) => now - at < TRAIL_FADE_MS);
+}
+
+/** One note named in a step, ready to be a link. */
+export interface TrailNoteView {
+  id: string;
+  label: string;
+}
+
+/** One step of a turn. */
+export interface TrailStepView {
+  key: string;
+  kind: WireTrailKind;
+  /** `searched "auth"`, `read`, `appended`, … */
+  verb: string;
+  /** The notes to link. Empty for a search, which names its hit count in `detail` instead. */
+  notes: TrailNoteView[];
+  detail: string | null;
+}
+
+/** One turn in the strip, newest first. */
+export interface TrailTurnView {
+  turn: number;
+  /** Local `HH:MM` of the turn's first step. */
+  time: string;
+  steps: TrailStepView[];
+  /** Distinct notes read or written. */
+  used: number;
+}
+
+const WROTE_VERB: Readonly<Record<string, string>> = {
+  add: "created",
+  append: "appended",
+  finalize: "finalized",
+  links: "fixed links in",
+};
+
+function stepView(event: WireTrailEvent, labels: ReadonlyMap<string, string>): TrailStepView {
+  const notes = event.slugs.map((slug) => ({ id: `note:${slug}`, label: labels.get(`note:${slug}`) ?? slug }));
+  if (event.kind === "searched") {
+    const hits = event.slugs.length;
+    return {
+      key: `${event.seq}:s`,
+      kind: "searched",
+      verb: event.query === undefined ? "searched" : `searched "${event.query}"`,
+      notes: [],
+      detail: hits === 0 ? "no hits" : `${hits} hit${hits === 1 ? "" : "s"}`,
+    };
+  }
+  return {
+    key: `${event.seq}:${event.kind}`,
+    kind: event.kind,
+    verb: event.kind === "read" ? "read" : WROTE_VERB[event.action] ?? "wrote",
+    notes,
+    detail: null,
+  };
+}
+
+function clock(iso: string, seconds = false): string {
+  const at = new Date(iso);
+  if (Number.isNaN(at.getTime())) return "";
+  const parts = [at.getHours(), at.getMinutes(), ...(seconds ? [at.getSeconds()] : [])];
+  return parts.map((part) => String(part).padStart(2, "0")).join(":");
+}
+
+/**
+ * The strip: the newest {@link TRAIL_TURNS_SHOWN} turns, each with its steps in order.
+ *
+ * When the harness has started a turn that has not touched a note yet (Pi's
+ * `agent_start` moves `trail.turn` ahead of the newest event), that empty
+ * turn leads the list, so the previous turn is never presented as current.
+ */
+export function trailTurns(trail: TrailPayload | null, graph: GraphPayload | null): TrailTurnView[] {
+  if (trail === null || trail.events.length === 0) return [];
+  const labels = new Map<string, string>((graph?.model.nodes ?? []).map((node) => [node.id, node.label]));
+  const byTurn = new Map<number, WireTrailEvent[]>();
+  for (const event of trail.events) {
+    const events = byTurn.get(event.turn);
+    if (events === undefined) byTurn.set(event.turn, [event]);
+    else events.push(event);
+  }
+  const turns = [...byTurn.entries()].sort(([a], [b]) => b - a);
+  // Turns in the same minute would get identical chips, so those show seconds.
+  const minutes = turns.map(([, events]) => clock(events[0]!.at));
+  const views = turns.map(([turn, events], index) => {
+    const used = new Set(events.filter((event) => event.kind !== "searched").flatMap((event) => event.slugs));
+    const shared = minutes.filter((minute) => minute === minutes[index]).length > 1;
+    return { turn, time: clock(events[0]!.at, shared), steps: events.map((event) => stepView(event, labels)), used: used.size };
+  });
+  if (trail.turn > views[0]!.turn) views.unshift({ turn: trail.turn, time: "", steps: [], used: 0 });
+  return views.slice(0, TRAIL_TURNS_SHOWN);
+}
+
+/** The strip's heading for a turn: the latest is "This turn", older ones are their time. */
+/** What the strip says for a turn with no steps yet. */
+export const TRAIL_EMPTY_TURN = "Nothing recalled yet.";
+
+export function turnHeading(view: TrailTurnView, latest: boolean): string {
+  return latest ? "This turn" : view.time === "" ? `Turn ${view.turn}` : view.time;
+}
+
+/** The tree row's class for a glow, or `""`. Strength is bucketed so the class list stays small. */
+export function trailRowClass(mark: TrailMark | undefined): string {
+  if (mark === undefined) return "";
+  const level = mark.strength > 0.66 ? 3 : mark.strength > 0.33 ? 2 : 1;
+  return ` weave-row-trail weave-row-trail-${mark.kind} weave-row-trail-${level}`;
+}