pi-weave 0.3.9 → 0.3.11

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")}}
@@ -163,10 +164,14 @@ body{font-size:var(--weave-px-base)}
    provenance glyph shape carries the distinction the colour swap drops;
    elsewhere the hues are unaffected. The palette's hit rows need the same
    remap: same selected ground, same failure. The label is restated last
-   so the selected row is always readable. */
+   so the selected row is always readable. The ground itself is the Context
+   rail's selection: the --weave-new tint plus a 2px inset accent bar, kept
+   under the pointer too. It is the only tinted row: the tree is where you
+   are, not what the agent touched (the graph shows that). */
+.weave-row-on,.weave-row-on:hover{background:var(--weave-new);box-shadow:inset 2px 0 0 var(--weave-accent)}
 .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,16 +183,6 @@ 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)}
@@ -245,7 +240,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)}
@@ -262,20 +257,67 @@ 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);
-}
-.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}
-/* 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)}
+  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. */
@@ -306,25 +348,28 @@ body{font-size:var(--weave-px-base)}
 .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}
+/* 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:13px;height:2px;border-radius:999px;
+  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-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-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:28px;background:transparent}
-.weave-replay-slider::-moz-range-track{height:28px;background:transparent}
+.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:7px;border-radius:999px;
+  -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{
@@ -342,7 +387,7 @@ body{font-size:var(--weave-px-base)}
   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
@@ -516,6 +561,114 @@ 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-by{flex:none;font-size:var(--weave-px-caption);color:var(--weave-dim);white-space:nowrap}
+.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\`,
@@ -535,9 +688,8 @@ body{font-size:var(--weave-px-base)}
 .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{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-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}
@@ -596,6 +748,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
@@ -611,31 +764,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,20 +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-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}
+.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}
@@ -117,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)}

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

@@ -27,7 +27,6 @@ export function TrailStrip(props: TrailStripProps) {
       <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">

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

@@ -9,6 +9,8 @@
  *    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`.
+ *  - {@link agentSearch}: the agent's newest search this turn, which the
+ *    graph view lights up in its spotlight ({@link agentSpotlight}).
  *
  * 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.
@@ -179,17 +181,70 @@ export function trailTurns(trail: TrailPayload | null, graph: GraphPayload | nul
   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.";
 
+/** The strip's heading for a turn: the latest is "This turn", older ones are their time. */
 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}`;
+// --- the agent's search in the graph view's spotlight ----------------------------------
+
+/** The agent's newest search this turn: what the graph view's spotlight lights. */
+export interface AgentSearch {
+  /** The event's `seq`, so a new search is a new number even for the same words. */
+  seq: number;
+  query: string;
+  /** The notes the search returned, as node ids. */
+  ids: readonly string[];
+}
+
+/**
+ * The agent's newest search in the current turn, or `null`.
+ *
+ * Only the current turn counts, so the spotlight a search lit goes out when
+ * the agent moves on to the next request. A search with no words (the wire
+ * allows one) has nothing to spell in the field and is skipped.
+ */
+export function agentSearch(trail: TrailPayload | null): AgentSearch | null {
+  if (trail === null) return null;
+  for (let index = trail.events.length - 1; index >= 0; index--) {
+    const event = trail.events[index]!;
+    if (event.turn !== trail.turn) return null;
+    if (event.kind !== "searched" || event.query === undefined || event.query.trim() === "") continue;
+    return { seq: event.seq, query: event.query, ids: event.slugs.map((slug) => `note:${slug}`) };
+  }
+  return null;
+}
+
+/** What the spotlight becomes: its query, the ids lit alongside, and the agent search that set it (`null`: the person's). */
+export interface AgentSpotlight {
+  query: string;
+  ids: readonly string[];
+  agent: number | null;
+}
+
+/**
+ * How the graph view's spotlight follows the agent's searches, when
+ * {@link agentSearch} changes. `null` leaves the spotlight alone.
+ *
+ * A new search takes the spotlight over, the way the palette's "light up in
+ * graph" does, unless the person is in the middle of a query of their own:
+ * the field focused with words they typed. A focused field that is empty, or
+ * still shows an earlier agent search, is not theirs and follows along, so a
+ * field left focused never swallows a search. When the turn that searched is
+ * over, the spotlight it lit goes out, unless the person has made it theirs
+ * since by typing or lighting something up.
+ */
+export function agentSpotlight(
+  /** The `seq` of the agent search the spotlight shows now, or `null` when it is the person's (or empty). */
+  shown: number | null,
+  search: AgentSearch | null,
+  /** Whether the field has focus and holds words; `shown` says whose words they are. */
+  composing: boolean,
+): AgentSpotlight | null {
+  if (search === null) return shown === null ? null : { query: "", ids: [], agent: null };
+  if (search.seq === shown || (composing && shown === null)) return null;
+  return { query: search.query, ids: search.ids, agent: search.seq };
 }