pi-weave 0.3.8 → 0.3.10

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

@@ -67,8 +67,9 @@ export const THEME_CSS = `
   --weave-note-gutter:18px;
   /* The desk-and-page split. The workspace is a desk of instruments — tree,
      graph, rail, bars — on the --weave-bg ground; the note column is the one
-     *page* lying on it: crust in both Catppuccin schemes, the ground that
-     sits furthest from the desk (deep under dark, bright over light). Two
+     *page* lying on it: crust under dark, plain white under Latte (the
+     refresh's "quiet page": paper reads as paper), the ground that sits
+     furthest from the desk. Two
      voices in total: sans for instruments and prose alike, mono for data — a
      third face was tried (serif prose) and withdrawn at the user's call; two
      voices read calmer than three. The CSP allows nothing fetched, and both
@@ -79,7 +80,7 @@ export const THEME_CSS = `
      two overlays that float above the grid. Tag pills are 999px — a capsule
      shape, not a scale step. The gate test below refuses any literal px
      radius so the scale cannot drift back. */
-  --weave-radius:4px;--weave-radius-pop:7px;
+  --weave-radius:6px;--weave-radius-pop:10px;
   /* The type ramp, role-named because sizes drift and roles stick. Nine
      steps; every font-size in this sheet is one of these vars — that is a
      gate, not a convention:
@@ -91,7 +92,7 @@ export const THEME_CSS = `
        body     13.5  the note column's prose
        subhead  14    palette input, note-body h2, ribbon icon buttons
        title    15    note-body h1
-       display  20    the note's page title
+       display  26    the note's page title (20 before the refresh)
      Two earlier sizes were merged into neighbours: 9px glyphs to prov, and
      the 10px column overlines to caption (caps plus .09em tracking already
      read larger than their point size suggests). \`display\` and \`body\` are
@@ -106,7 +107,7 @@ export const THEME_CSS = `
      rubber stamp. */
   --weave-px-prov:9.5px;--weave-px-caption:10.5px;--weave-px-ui:11.5px;
   --weave-px-row:12px;--weave-px-base:13px;--weave-px-body:13.5px;
-  --weave-px-subhead:14px;--weave-px-title:15px;--weave-px-display:20px;
+  --weave-px-subhead:14px;--weave-px-title:15px;--weave-px-display:26px;
 }
 @media (prefers-color-scheme: light){
   :root:not([data-weave-theme]){${paletteTokens("light")}}
@@ -166,7 +167,7 @@ body{font-size:var(--weave-px-base)}
    so the selected row is always readable. */
 .weave-row-on .weave-twisty,.weave-row-on .weave-kind,.weave-row-on .weave-prov,
 .weave-row-on .weave-meta,.weave-row-on .weave-label{color:var(--weave-fg)}
-.weave-hit-on .weave-hit-badge,.weave-hit-on .weave-hit-detail{color:var(--weave-fg)}
+.weave-hit-on .weave-hit-icon,.weave-hit-on .weave-hit-detail,.weave-hit-on .weave-hit-meta{color:var(--weave-fg)}
 /* A newly-arrived node (a file or note added since the last update, ):
    one short highlight that fades while the label settles from bold back to
    normal. The class is computed from the frame diff in workspace.ts and
@@ -178,6 +179,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)}
@@ -235,7 +246,7 @@ body{font-size:var(--weave-px-base)}
 .weave-note-head{position:sticky;top:0;z-index:2;padding:14px var(--weave-note-gutter) 9px;background:var(--weave-page);border-bottom:1px solid var(--weave-line)}
 /* The page's largest voice, and the point of the review's headline finding:
    a 15px title sat 1.5px above the body it named. --weave-px-display puts the
-   title where a page's title belongs, weight 650 for presence at 20px (600
+   title where a page's title belongs, weight 650 for presence at 26px (600
    reads thin at that size, 700 reads as a poster), tracking pulled in by a
    hair because large sans needs it. */
 .weave-note-title{margin:0 0 4px;font-size:var(--weave-px-display);font-weight:650;line-height:1.25;letter-spacing:-.005em;color:var(--weave-fg)}
@@ -252,25 +263,164 @@ body{font-size:var(--weave-px-base)}
 }
 .weave-note-open:hover{color:var(--weave-fg);background:var(--weave-line)}
 .weave-note-open-mark{display:inline-flex;line-height:0}
-/* Save / Done, chip-shaped: the same quiet row, and a control in a reading
-   column should not outweigh the title. */
-.weave-note-edit,.weave-note-save{
+/* The note's own actions, at the end of the meta line. History is a quiet
+   word with an icon; Edit is the one bordered control, and neither outweighs
+   the title. */
+.weave-note-actions{margin-left:auto;display:inline-flex;align-items:center;gap:4px}
+.weave-note-meta .weave-note-action{
+  display:inline-flex;align-items:center;gap:5px;
   font:inherit;font-size:var(--weave-px-caption);line-height:1;white-space:nowrap;cursor:pointer;
-  color:var(--weave-dim);background:var(--weave-panel);padding:4px 7px;
-  border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);
+  color:var(--weave-dim);background:none;padding:5px 8px;
+  border:1px solid transparent;border-radius:var(--weave-radius);
+}
+.weave-note-meta .weave-note-action .weave-icon{width:13px;height:13px}
+.weave-note-meta .weave-note-action:hover{color:var(--weave-fg);background:var(--weave-new)}
+.weave-note-meta .weave-note-action:disabled{color:var(--weave-faint);background:none;cursor:default}
+.weave-note-meta .weave-note-edit{color:var(--weave-fg);background:var(--weave-page);border-color:var(--weave-line-strong)}
+.weave-note-meta .weave-note-edit:hover{border-color:var(--weave-accent);background:var(--weave-page)}
+.weave-note-meta .weave-note-history[aria-pressed="true"]{color:var(--weave-accent);background:var(--weave-new)}
+/* Where the note lives, above its title: a crumb, not a heading. */
+.weave-note-crumb{margin:0 0 6px;display:flex;align-items:center;gap:5px;font-size:var(--weave-px-caption);color:var(--weave-faint)}
+.weave-note-crumb .weave-icon{width:12px;height:12px}
+/* Who wrote it, in words, with the spine's colour as a dot. */
+.weave-note-meta .weave-prov{display:inline-flex;align-items:center;gap:6px;font-size:var(--weave-px-ui);color:var(--weave-dim)}
+.weave-prov-dot{width:7px;height:7px;border-radius:999px;background:var(--weave-spine,var(--weave-accent))}
+/* The edit bar (E1): one row while editing, pinned over the text it edits.
+   Formatting on the left, where the words are; the save state and the two
+   ways out on the right. Saving is automatic, so Done is the only
+   affirmative control and the only one in the accent. */
+.weave-editbar{
+  position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
+  min-height:40px;padding:5px 12px;font-size:var(--weave-px-ui);
+  background:var(--weave-page);border-bottom:1px solid var(--weave-line);
+}
+.weave-editbar .weave-icon{width:14px;height:14px}
+.weave-editbar-badge{
+  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
+  font-size:var(--weave-px-caption);font-weight:600;color:var(--weave-accent);background:var(--weave-new);
+}
+.weave-editbar-badge .weave-icon{width:12px;height:12px}
+.weave-editbar-tools{display:inline-flex;align-items:center;gap:1px;margin-left:4px;padding-left:8px;border-left:1px solid var(--weave-line)}
+.weave-editbar .weave-editbar-tool{
+  display:inline-grid;place-items:center;width:28px;height:28px;padding:0;cursor:pointer;
+  color:var(--weave-dim);background:none;border:0;border-radius:var(--weave-radius);
+}
+.weave-editbar .weave-editbar-tool:hover{color:var(--weave-fg);background:var(--weave-new)}
+.weave-editbar-status{margin-left:auto;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:var(--weave-px-caption);color:var(--weave-faint)}
+.weave-editbar-pending,.weave-editbar-saving{color:var(--weave-dim)}
+.weave-editbar-saved{color:var(--weave-ok)}
+.weave-editbar-failed{color:var(--weave-bad);font-weight:600}
+.weave-editbar .weave-editbar-retry{font:inherit;color:var(--weave-accent);background:none;border:0;padding:2px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
+.weave-editbar .weave-editbar-discard,.weave-editbar .weave-editbar-done{font:inherit;font-size:var(--weave-px-caption);line-height:1;white-space:nowrap;cursor:pointer;border-radius:var(--weave-radius)}
+.weave-editbar .weave-editbar-discard{padding:7px 9px;color:var(--weave-dim);background:none;border:1px solid transparent}
+.weave-editbar .weave-editbar-discard:hover{color:var(--weave-fg);background:var(--weave-new)}
+.weave-editbar .weave-editbar-done{padding:7px 14px;font-weight:600;color:var(--weave-page);background:var(--weave-accent);border:1px solid var(--weave-accent)}
+.weave-editbar .weave-editbar-done:hover{filter:brightness(1.08)}
+.weave-editbar .weave-editbar-discard:disabled,.weave-editbar .weave-editbar-done:disabled{opacity:.5;cursor:default;filter:none}
+/* A finalized note's opening TLDR, set apart as the first thing to read.
+   The label is the card's own; task boxes keep their row and lose the bullet. */
+.weave-tldr{margin:0 0 18px;padding:12px 16px;background:var(--weave-new);border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius)}
+.weave-tldr>p,.weave-tldr>ul,.weave-tldr>ol{margin:0 0 6px}
+.weave-tldr>*:last-child{margin-bottom:0}
+.weave-tldr ul:has(>li>input[type="checkbox"]){list-style:none;padding-left:2px}
+.weave-tldr-label{display:block;margin-bottom:3px;font-size:var(--weave-px-prov);font-weight:700;letter-spacing:.08em;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-note-edit:hover,.weave-note-save:hover{color:var(--weave-fg);border-color:var(--weave-accent)}
-/* 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}
+.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)}
+/* The change bars (the refresh's H2): one bar per version, as tall as the
+   change was big, coloured by who made it; the version on screen is ringed.
+   The day labels sit under the band. Heights and label positions arrive as
+   custom properties through Preact's CSSOM style path, never an attribute. */
+.weave-replay-track{--weave-replay-at:100%;position:relative;flex:1;min-width:80px;height:46px;margin-left:8px}
+.weave-replay-track::before{
+  content:"";position:absolute;left:7px;right:7px;top:31px;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-bars{position:absolute;left:7px;right:7px;top:2px;height:26px;pointer-events:none}
+.weave-replay-bar{position:absolute;bottom:0;left:var(--weave-bar-at,0);width:max(1px,min(8px,calc(100% / var(--weave-bars,1) - 2px)));transform:translateX(-50%);height:var(--weave-bar,14%);border-radius:var(--weave-radius);background:var(--weave-who);opacity:.85}
+.weave-replay-ahead{opacity:.35}
+.weave-replay-current{opacity:1;outline:2px solid var(--weave-accent);outline-offset:1px}
+.weave-replay-days{position:absolute;left:7px;right:7px;top:34px;height:12px;pointer-events:none}
+.weave-replay-day{position:absolute;left:var(--weave-day-at,0);transform:translateX(-2px);font-size:var(--weave-px-prov);line-height:12px;color:var(--weave-faint);white-space:nowrap}
+.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:46px;background:transparent}
+.weave-replay-slider::-moz-range-track{height:46px;background:transparent}
+.weave-replay-slider::-webkit-slider-thumb{
+  -webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:25px;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;
+  color:var(--weave-fg);background:var(--weave-page);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);
@@ -417,6 +567,113 @@ body{font-size:var(--weave-px-base)}
   border-top:1px solid var(--weave-line);
 }
 
+/* graph spotlight (G1) ---------------------------------------------------
+   The field floating top-left over the canvas, and the side sheet top-right.
+   Both are overlays on the stage, so they sit on the panel ground with a
+   hairline and the pop radius — no elevation shadow, per the sheet's rule.
+   The spotlight's voice is --weave-warn: the highlighter colour the WebGL
+   side paints lit edges in (graph.model.ts SPOTLIGHT_EDGE_SLOT), so the chip,
+   the legend, the marked words and the lit dots all say "lit" in one hue.
+   The sheet stops short of the control strip and count line under the
+   canvas (about 54px together) and scrolls inside itself. Button rules are
+   qualified by their overlay (.weave-sheet .weave-sheet-open) because the
+   workspace sheet's \`.weave-workbench button{font:inherit;color:inherit}\`
+   reset is installed later and would outrank a single class. */
+.weave-spotlight{
+  position:absolute;z-index:3;top:10px;left:10px;width:min(330px,calc(100% - 20px));box-sizing:border-box;
+  display:flex;align-items:center;gap:6px;padding:3px 5px 3px 9px;
+  color:var(--weave-faint);background:var(--weave-panel);
+  border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius-pop);
+}
+/* The pill is the focus ring: the input inside it drops the global outline
+   and the frame takes a 2px accent edge (border plus an inset hairline). */
+.weave-spotlight:focus-within{border-color:var(--weave-accent);box-shadow:inset 0 0 0 1px var(--weave-accent)}
+.weave-spotlight-input:focus-visible{outline:none}
+.weave-spotlight-on{color:var(--weave-warn)}
+.weave-spotlight-icon{flex:none;display:block}
+.weave-spotlight-input{
+  flex:1;min-width:0;height:24px;padding:0;font:inherit;font-size:var(--weave-px-row);
+  color:var(--weave-fg);background:transparent;border:0;outline:0;
+}
+.weave-spotlight-input::placeholder{color:var(--weave-faint)}
+.weave-spotlight-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
+.weave-spotlight-count{
+  flex:none;padding:1px 7px;font-size:var(--weave-px-caption);font-weight:650;white-space:nowrap;
+  color:var(--weave-warn);background:color-mix(in srgb,var(--weave-warn) 16%,transparent);border-radius:999px;
+}
+.weave-spotlight-none{color:var(--weave-dim);background:var(--weave-line)}
+.weave-spotlight .weave-spotlight-clear{
+  flex:none;padding:1px 5px;cursor:pointer;font-family:var(--weave-mono);font-size:var(--weave-px-prov);
+  color:var(--weave-faint);background:transparent;border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);
+}
+.weave-spotlight .weave-spotlight-clear:hover{color:var(--weave-fg);border-color:var(--weave-accent)}
+.weave-legend-lit{color:var(--weave-warn)}
+.weave-sheet{
+  position:absolute;z-index:3;top:10px;right:10px;width:min(300px,calc(100% - 20px));max-height:calc(100% - 74px);
+  box-sizing:border-box;overflow:auto;padding:12px 14px 14px;
+  font-size:var(--weave-px-base);color:var(--weave-fg);background:var(--weave-panel);
+  border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius-pop);
+}
+.weave-sheet .weave-sheet-close{
+  position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;cursor:pointer;
+  font-size:var(--weave-px-display);line-height:1;color:var(--weave-dim);
+  background:transparent;border:0;border-radius:var(--weave-radius);
+}
+.weave-sheet .weave-sheet-close:hover{color:var(--weave-fg);background:var(--weave-line)}
+.weave-sheet-crumb{
+  margin:0 28px 2px 0;display:flex;align-items:center;gap:5px;min-width:0;
+  font-size:var(--weave-px-caption);color:var(--weave-faint);
+}
+.weave-sheet-crumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.weave-sheet-title{
+  margin:0 20px 4px 0;font-size:var(--weave-px-title);font-weight:650;line-height:1.3;overflow-wrap:anywhere;
+}
+.weave-sheet-meta{margin:0;display:flex;align-items:center;gap:5px;font-size:var(--weave-px-ui);color:var(--weave-dim);text-transform:capitalize}
+.weave-sheet-when{color:var(--weave-faint);text-transform:none}
+.weave-sheet-text{
+  margin:10px 0 0;padding:8px 10px;line-height:1.55;overflow-wrap:anywhere;
+  background:var(--weave-new);border:1px solid color-mix(in srgb,var(--weave-accent) 30%,transparent);
+  border-radius:var(--weave-radius-pop);
+}
+.weave-sheet-text-head{
+  display:block;margin:0 0 2px;font-size:var(--weave-px-prov);font-weight:700;letter-spacing:.09em;
+  text-transform:uppercase;color:var(--weave-accent);
+}
+.weave-sheet-mark{border-radius:var(--weave-radius)}
+.weave-sheet-why{margin:8px 0 0;display:flex;gap:5px;font-size:var(--weave-px-caption);color:var(--weave-dim)}
+.weave-sheet-why span{color:var(--weave-warn)}
+.weave-sheet-section{margin:12px 0 0}
+.weave-sheet-heading{
+  margin:0 0 3px;display:flex;align-items:center;font-size:var(--weave-px-caption);font-weight:600;
+  letter-spacing:.09em;text-transform:uppercase;color:var(--weave-faint);
+}
+.weave-sheet-count{margin-left:auto;font-family:var(--weave-mono);letter-spacing:0}
+.weave-sheet-rows{margin:0;padding:0;list-style:none}
+.weave-sheet .weave-sheet-row{
+  display:flex;align-items:center;gap:7px;width:100%;padding:3px 0;cursor:pointer;text-align:left;
+  font:inherit;font-size:var(--weave-px-row);color:var(--weave-fg);background:none;border:0;
+}
+.weave-sheet .weave-sheet-row:hover{color:var(--weave-accent)}
+.weave-sheet-row-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.weave-sheet-dot{flex:none;width:6px;height:6px;border-radius:999px;background:var(--weave-faint)}
+.weave-sheet-dot-lit{background:var(--weave-warn)}
+.weave-sheet-more{margin:2px 0 0;font-size:var(--weave-px-caption);color:var(--weave-faint)}
+.weave-sheet-actions{margin:14px 0 0;display:flex;gap:6px;flex-wrap:wrap}
+.weave-sheet .weave-sheet-open,.weave-sheet .weave-sheet-split{
+  padding:5px 11px;cursor:pointer;font:inherit;font-size:var(--weave-px-ui);font-weight:600;
+  border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);
+}
+.weave-sheet .weave-sheet-open{color:var(--weave-page);background:var(--weave-accent);border-color:var(--weave-accent)}
+.weave-sheet .weave-sheet-open:hover{filter:brightness(1.08)}
+.weave-sheet .weave-sheet-split{color:var(--weave-fg);background:var(--weave-page)}
+.weave-sheet .weave-sheet-split:hover{border-color:var(--weave-accent)}
+/* Side by side the field (330) and the sheet (300) need about 660px of
+   stage; a narrower graph — a split pane, a small window — drops the sheet
+   under the field instead of letting the two overlap. */
+.weave-graph{container-type:inline-size}
+@container (max-width:680px){.weave-sheet{top:50px;max-height:calc(100% - 114px)}}
+/* end graph spotlight ---------------------------------------------------- */
+
 /* context rail ---------------------------------------------------------- */
 /* The \`.weave-empty\` block that used to sit above went with \`EmptyState.tsx\`
    in P3: every column now has its own empty state (\`treeEmptyMessage\`,
@@ -433,6 +690,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;
@@ -479,6 +754,7 @@ body{font-size:var(--weave-px-base)}
 .weave-status-cwd,.weave-status-sel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .weave-status-cwd{max-width:38%;color:var(--weave-faint)}
 .weave-status-sel{color:var(--weave-fg)}
+.weave-status-hint{margin-left:auto;padding-left:8px;white-space:nowrap;color:var(--weave-faint)}
 
 /* overlays: the ⌘K palette and the ? help sheet (P4) --------------------- */
 /* The scrim is a click target that closes, and the reason both overlays sit
@@ -494,31 +770,77 @@ body{font-size:var(--weave-px-base)}
   overflow:hidden;background:var(--weave-panel);color:var(--weave-fg);
   border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius-pop);
 }
+/* The ⌘K palette, grouped and compact: an input row (glyph, query, Esc), a
+   scope row of pills that Tab cycles, one line per result under small
+   capitals group heads, and a footer of key hints. Wider than the help sheet
+   because a row carries a title, a snippet and a meta column side by side. */
+.weave-palette{max-width:640px}
+.weave-palette-bar{
+  flex:none;display:flex;align-items:center;gap:8px;padding:0 11px;
+  border-bottom:1px solid var(--weave-line);
+}
+.weave-palette-glyph{color:var(--weave-faint)}
 .weave-palette-input{
-  flex:none;height:34px;padding:0 11px;font:inherit;font-size:var(--weave-px-subhead);
-  color:var(--weave-fg);background:transparent;border:0;
-  border-bottom:1px solid var(--weave-line);border-radius:0;
+  flex:1;min-width:0;height:36px;padding:0;font:inherit;font-size:var(--weave-px-subhead);
+  color:var(--weave-fg);background:transparent;border:0;border-radius:0;
+}
+.weave-palette-input:focus-visible{outline:0}
+.weave-palette-input::-webkit-search-cancel-button{display:none}
+.weave-palette-bar:focus-within{box-shadow:inset 0 -1px 0 var(--weave-accent)}
+.weave-palette-kbd{
+  flex:none;padding:0 4px;font-family:inherit;font-size:var(--weave-px-prov);line-height:14px;
+  color:var(--weave-faint);border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);
+}
+.weave-palette-scopes{
+  flex:none;display:flex;flex-wrap:wrap;gap:3px;padding:5px 8px;
+  border-bottom:1px solid var(--weave-line);
 }
-.weave-palette-input:focus-visible{outline-offset:-2px}
-.weave-hits{flex:1;min-height:0;overflow:auto;margin:0;padding:3px 0;list-style:none}
+.weave-palette-scope{
+  font:inherit;font-size:var(--weave-px-caption);line-height:1;padding:3px 9px;cursor:pointer;
+  color:var(--weave-dim);background:none;border:0;border-radius:999px;
+}
+.weave-palette-scope:hover{color:var(--weave-fg);background:var(--weave-line)}
+.weave-palette-scope[aria-pressed="true"]{color:var(--weave-panel);background:var(--weave-fg);font-weight:600}
+.weave-palette-scope-count{font-variant-numeric:tabular-nums}
+.weave-hits{flex:1;min-height:0;overflow:auto;margin:0;padding:0 0 4px;list-style:none}
+.weave-hit-section{list-style:none}
+.weave-hit-group{
+  padding:7px 11px 2px;font-size:var(--weave-px-prov);font-weight:700;letter-spacing:.08em;
+  text-transform:uppercase;color:var(--weave-faint);
+}
+.weave-hit-rows{margin:0;padding:0;list-style:none}
 .weave-hit{
-  display:flex;align-items:baseline;gap:7px;padding:3px 11px;cursor:pointer;
-  min-width:0;white-space:nowrap;
+  display:flex;align-items:center;gap:8px;padding:3px 11px;cursor:pointer;
+  min-width:0;white-space:nowrap;font-size:var(--weave-px-row);
 }
 .weave-hit-on{background:var(--weave-new);box-shadow:inset 2px 0 0 var(--weave-accent)}
-.weave-hit-badge{
-  flex:none;font-size:var(--weave-px-prov);letter-spacing:.06em;text-transform:uppercase;color:var(--weave-faint);
-  min-width:56px;
-}
-.weave-hit-note .weave-hit-badge{color:var(--weave-accent)}
-.weave-hit-label{flex:none;max-width:46%;overflow:hidden;text-overflow:ellipsis}
+.weave-hit-icon{color:var(--weave-faint)}
+.weave-hit-notes .weave-hit-icon{color:var(--weave-accent)}
+.weave-hit-label{flex:none;max-width:46%;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--weave-fg)}
+.weave-hit-mono{font-family:var(--weave-mono);font-size:var(--weave-px-ui);font-weight:500}
 .weave-hit-detail{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--weave-px-ui);color:var(--weave-dim)}
+/* The match marks (search rows, the graph sheet) are a find-in-page amber.
+   Dark themes tint their own light --weave-warn, and the marked words go
+   white: the theme's text on that tint measured 3.3–3.6:1 in the Catppuccin
+   darks, white is 5.5:1 or better in every dark theme. A light theme's
+   --weave-warn is a deep brown that tints to mud, so light schemes take a
+   fixed amber under their own text instead. */
+.weave-hit-mark,.weave-sheet-mark{color:#fff;background:color-mix(in srgb,var(--weave-warn) 28%,transparent)}
+.weave-hit-mark{border-radius:var(--weave-radius);padding:0 1px}
+:root[data-weave-scheme="light"] .weave-hit-mark,:root[data-weave-scheme="light"] .weave-sheet-mark{color:var(--weave-fg);background:color-mix(in srgb,#f2a93b 34%,transparent)}
+.weave-hit-meta{flex:none;margin-left:auto;font-size:var(--weave-px-caption);color:var(--weave-faint);font-variant-numeric:tabular-nums}
 .weave-palette-status{margin:0;padding:14px 11px;color:var(--weave-dim);line-height:1.5}
 .weave-palette-foot,.weave-help-foot{
   display:flex;gap:12px;margin:0;padding:4px 11px;font-size:var(--weave-px-caption);color:var(--weave-faint);
   border-top:1px solid var(--weave-line);
 }
-.weave-palette-hint,.weave-help-hint{margin-left:auto}
+.weave-palette-foot{align-items:center;flex-wrap:wrap;row-gap:2px;min-height:26px;box-sizing:border-box;background:var(--weave-bg)}
+.weave-palette-light{
+  margin-left:auto;display:flex;align-items:center;gap:6px;padding:0;cursor:pointer;white-space:nowrap;
+  font:inherit;font-weight:600;color:var(--weave-accent);background:none;border:0;
+}
+.weave-palette-light .weave-palette-kbd{color:inherit;border-color:currentColor}
+.weave-help-hint{margin-left:auto}
 .weave-help-title{margin:0;padding:9px 11px;font-size:var(--weave-px-base);font-weight:600;border-bottom:1px solid var(--weave-line)}
 .weave-keys{flex:1;min-height:0;overflow:auto;margin:0;padding:5px 11px}
 .weave-key-group{margin:0 0 3px;font-size:var(--weave-px-prov);letter-spacing:.09em;text-transform:uppercase;color:var(--weave-faint)}

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

@@ -5,7 +5,7 @@ export const WORKSPACE_CSS = `
 .weave-workbench button:focus-visible,.weave-workbench summary:focus-visible{outline:2px solid var(--weave-accent);outline-offset:-2px}
 .weave-workbench button:disabled{opacity:.35;cursor:default}
 .weave-ribbon{width:44px;flex:none;display:flex;align-items:center;flex-direction:column;gap:8px;padding:12px 0;background:var(--weave-panel);border-right:1px solid var(--weave-line)}
-.weave-ribbon button{width:32px;height:32px;border:0;border-radius:var(--weave-radius);background:transparent;font-size:var(--weave-px-display);color:var(--weave-dim)}
+.weave-ribbon button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:var(--weave-radius);background:transparent;font-size:var(--weave-px-display);color:var(--weave-dim)}
 .weave-ribbon button:hover,.weave-ribbon button[aria-pressed=true]{color:var(--weave-accent);background:var(--weave-new)}
 .weave-ribbon-space{flex:1}
 .weave-sidebar{flex:none;min-width:0;display:flex;flex-direction:column;background:var(--weave-panel);overflow:hidden}
@@ -65,18 +65,24 @@ export const WORKSPACE_CSS = `
 .weave-pane-menu button{text-align:left;border:0;background:none;padding:9px 10px;font-size:var(--weave-px-row)}
 .weave-pane-menu button:hover{background:var(--weave-new)}
 .weave-pane-content{min-width:0;min-height:0;display:flex;overflow:hidden;position:relative}
-.weave-document{display:flex;min-width:0;min-height:0;flex:1}
+/* The reading column's gutters. Centred at the reading width; where the
+   floating Context card covers the right margin, the right gutter grows to
+   clear it and the column slides left before it narrows. */
+.weave-document{display:flex;min-width:0;min-height:0;flex:1;
+  --weave-gutter-c:max(24px,calc((100% - var(--weave-reading-width,760px))/2));
+  --weave-gutter-r:max(var(--weave-gutter-c),var(--weave-card-space,0px));
+  --weave-gutter-l:max(24px,min(var(--weave-gutter-c),calc(100% - var(--weave-reading-width,760px) - var(--weave-gutter-r))))}
 .weave-document .weave-note{width:100%;border-left:0}
-.weave-document .weave-note-head{position:static;padding:28px max(24px,calc((100% - var(--weave-reading-width,760px))/2)) 18px;border:0}
-.weave-document .weave-note-title{font-size:var(--weave-px-display);letter-spacing:-.03em;margin-bottom:12px}
-.weave-document .weave-note-body{padding:10px max(24px,calc((100% - var(--weave-reading-width,760px))/2)) 64px;font-size:var(--weave-note-size,var(--weave-px-subhead));line-height:1.8}
+.weave-document .weave-note-head{position:static;padding:28px var(--weave-gutter-r) 18px var(--weave-gutter-l);border:0}
+.weave-document .weave-note-title{font-size:var(--weave-px-display);letter-spacing:-.03em;margin-bottom:10px}
+.weave-document .weave-note-body{padding:10px var(--weave-gutter-r) 64px var(--weave-gutter-l);font-size:var(--weave-note-size,var(--weave-px-subhead));line-height:1.8}
 .weave-document .weave-note-body h1{font-size:var(--weave-px-display);line-height:1.4;margin-bottom:18px}
 .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-editor{padding:14px var(--weave-gutter-r) 14px var(--weave-gutter-l);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-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}
+.weave-document .weave-replay{padding:12px var(--weave-gutter-r) 14px var(--weave-gutter-l)}
+.weave-document .weave-raw{margin:0 var(--weave-gutter-r) 28px var(--weave-gutter-l)}
+.weave-document .weave-editbar{padding-right:calc(12px + var(--weave-card-space,0px))}
 .weave-welcome{align-self:center;margin:auto;padding:35px;max-width:560px;color:var(--weave-dim);line-height:1.7}
 .weave-welcome-mark{font-size:var(--weave-px-display);color:var(--weave-accent)}
 .weave-welcome h1{font-size:var(--weave-px-display);line-height:1.4;letter-spacing:-.025em;color:var(--weave-fg);font-weight:550}
@@ -115,6 +121,29 @@ export const WORKSPACE_CSS = `
 .weave-footer>.weave-status{flex:1;min-width:0;border:0}
 .weave-footer>span{padding:4px 10px;white-space:nowrap}
 .weave-footer>button{font:inherit;color:var(--weave-fg);background:none;border:0;padding:7px 12px;cursor:pointer}
+/* Context as a floating card (C1): over the page's right margin, below the
+   pane toolbar, folding to a pill in the toolbar strip. Pinned, it is the
+   column it always was. The shadow is the card's only elevation, and lives
+   here rather than in THEME_CSS, whose surfaces are flat by rule. */
+.weave-context-dock.weave-context-float{position:absolute;top:90px;right:14px;bottom:auto;z-index:10;width:var(--weave-card-width);max-height:calc(100% - 104px);border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius-pop);background:var(--weave-panel);box-shadow:0 12px 32px #0000001f,0 2px 6px #00000014;transition:opacity 160ms ease,visibility 0s}
+.weave-context-dock.weave-context-float[data-open=false]{width:var(--weave-card-width);opacity:0;visibility:hidden;transition:opacity 160ms ease,visibility 0s 160ms}
+.weave-context-float>.weave-workspace-divider{display:none}
+.weave-context-float>.weave-sidebar,.weave-context-float[data-open=false]>.weave-sidebar{width:100%;max-height:100%;border:0;background:none;transform:none}
+.weave-context-float .weave-sidebar-heading{height:38px;padding:0 6px 0 12px;border-bottom:1px solid var(--weave-line)}
+.weave-context-float .weave-rail{padding:4px 12px 10px}
+.weave-context-float .weave-context-graph-slot{max-height:calc(100dvh - 260px)}
+.weave-context-float .weave-context-tags{height:auto!important;max-height:220px}
+.weave-context-float .weave-ctx-group>.weave-workspace-divider{display:none}
+.weave-context-heading strong{color:var(--weave-fg)}
+.weave-context-count{min-width:18px;padding:1px 6px;border-radius:999px;background:var(--weave-raise);color:var(--weave-dim);font-size:var(--weave-px-caption);line-height:1.4;text-align:center}
+.weave-sidebar-heading .weave-context-pin{margin-left:auto}
+.weave-context-heading button:last-child{margin-left:0}
+.weave-context-heading .weave-context-pin[aria-pressed=true]{color:var(--weave-accent)}
+.weave-context-heading button{display:grid;place-items:center;width:28px;height:28px;padding:0}
+.weave-context-pill{position:absolute;top:47px;right:54px;z-index:10;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 9px;border:1px solid var(--weave-line-strong);border-radius:999px;background:var(--weave-panel);color:var(--weave-dim)!important;font-size:var(--weave-px-caption)!important;box-shadow:0 2px 8px #00000014}
+.weave-context-pill:hover{color:var(--weave-fg)!important;border-color:var(--weave-accent)}
+.weave-context-pill .weave-icon{width:13px;height:13px}
+.weave-pane-under-card{--weave-card-space:calc(var(--weave-card-width) + 28px)}
 @media(max-width:1049px){
   .weave-context-dock{position:absolute;right:0;top:0;bottom:0;z-index:10;width:var(--weave-sidebar-width)}
   .weave-sidebar-context{border-left:1px solid var(--weave-line-strong)}
@@ -128,6 +157,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>
+  );
+}