pi-weave 0.3.0 → 0.3.1

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

@@ -14,7 +14,7 @@ export function StatusBar({ model }: { model: StatusBarModel }) {
       <span class="weave-status-cwd" title={model.cwd}>
         {model.cwd}
       </span>
-      <span class="weave-status-sel" title="the §1.3 context bus — one signal, every column">
+      <span class="weave-status-sel" title="Current item">
         {model.selection}
       </span>
       <span class="weave-status-stamp" title="data as of">

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

@@ -3,8 +3,8 @@
  *
  * P4's exit criterion is "the whole workspace is drivable without a mouse",
  * and a dialog that does not trap focus fails it in the most literal way
- * available: Tab from the last control lands on the header behind the
- * overlay, the user is now typing into a search box they cannot see, and
+ * available: Tab from the last control lands on the workspace behind the
+ * overlay, the user is now typing into a field they cannot see, and
  * `Esc` goes to whatever they landed on. So the palette and the help overlay
  * both trap, and both restore.
  *

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

@@ -90,6 +90,7 @@ export type ShellAction =
   | { readonly type: "filterTree" }
   | { readonly type: "fitGraph" }
   | { readonly type: "clearSelection" }
+  | { readonly type: "closeTab" }
   /** `t` — cycle the colour theme: system → light → dark → system. */
   | { readonly type: "cycleTheme" };
 
@@ -112,16 +113,6 @@ export const COMMAND_KEYS: Readonly<Record<string, ShellAction>> = {
  */
 export const COLUMN_DIGITS: Readonly<Record<string, ColumnId>> = { "1": "tree", "2": "note", "3": "graph" };
 
-/**
- * The columns a breakpoint can put off screen — the graph at `"medium"`, the
- * tree too at `"narrow"`, never the note. The help sheet's derived rows use it
- * to stay honest about `⌘1`/`⌘3`: at 900 px the `⌘3` command is a documented
- * no-op, and a help line that hides that is the same lie the `disabled`
- * search button once was. Derived from `columnsAt`, not listed, so the caveat
- * cannot drift from the breakpoints the sheet is attached to.
- */
-const COLLAPSIBLE_COLUMNS: ReadonlySet<ColumnId> = new Set(["tree", "graph"]);
-
 /**
  * Whether a modifier combination counts as "the platform's command key".
  *
@@ -168,6 +159,8 @@ export const BARE_KEYS: Readonly<Record<string, ShellAction>> = {
 export function shellKey(event: KeyDescriptor, ctx: KeyContext): ShellAction | null {
   if (ctx.overlay !== null) return event.key === "Escape" ? { type: "closeOverlay" } : null;
 
+  if (event.alt && !event.meta && !event.ctrl && !event.shift && event.key.toLowerCase() === "w") return { type: "closeTab" };
+
   if (isCommand(event)) {
     // Lower-cased because ⌘K with caps lock on reports `"K"`, and a shortcut
     // that stops working under caps lock is a bug report nobody can reproduce.
@@ -231,6 +224,8 @@ export interface KeyTarget {
  * use, for the same reason: there is no DOM test environment (§10).
  */
 export interface KeyboardEventLike {
+  readonly code?: string;
+  readonly defaultPrevented: boolean;
   readonly key: string;
   readonly ctrlKey: boolean;
   readonly metaKey: boolean;
@@ -243,7 +238,7 @@ export interface KeyboardEventLike {
 /** Reduce a platform event to a {@link KeyDescriptor}. */
 export function describeKey(event: KeyboardEventLike): KeyDescriptor {
   return {
-    key: event.key,
+    key: event.altKey && event.code === "KeyW" ? "w" : event.key,
     ctrl: event.ctrlKey,
     meta: event.metaKey,
     shift: event.shiftKey,
@@ -254,27 +249,15 @@ export function describeKey(event: KeyboardEventLike): KeyDescriptor {
 
 // --- where an action points ---------------------------------------------------------
 
-/**
- * `⌘1/2/3` → the element to focus in that column.
- *
- * Selectors rather than refs, and the reason is the breakpoint: below 1100 px
- * the graph column does not exist and below 800 px the tree does not either,
- * so a ref would be `null` for a column that is legitimately absent and the
- * shell would need a branch per column to cope. A `querySelector` that finds
- * nothing is already the same answer, expressed once.
- *
- * Each target is the column's *content*, not its `<section>`: focusing the
- * section would put the ring around the whole pane and leave the arrow keys
- * pointing at nothing.
- */
+/** Content focus targets; the shell opens hidden sidebars/tabs before focusing. */
 export const COLUMN_FOCUS_SELECTORS: Readonly<Record<ColumnId, string>> = {
-  tree: ".weave-col-tree .weave-rows",
-  note: ".weave-col-note .weave-note-body",
-  graph: ".weave-col-graph .weave-graph-canvas",
+  tree: ".weave-sidebar-notes .weave-rows",
+  note: ".weave-pane-active .weave-note-body",
+  graph: ".weave-graph-host .weave-graph-canvas",
 };
 
 /** `/` → the tree's filter box. */
-export const TREE_FILTER_SELECTOR = ".weave-col-tree .weave-filter";
+export const TREE_FILTER_SELECTOR = ".weave-sidebar-notes .weave-filter";
 
 /** The slice of an element {@link focusable} produces. */
 export interface Focusable {
@@ -336,6 +319,7 @@ export interface ShellEffects {
   fitGraph(): void;
   /** Write `null` to §1.3's `selectedId`. */
   clearSelection(): void;
+  closeTab(): void;
   /** `t` — advance the user's theme choice by one step in its cycle. */
   cycleTheme(): void;
 }
@@ -350,8 +334,7 @@ export function runShellAction(action: ShellAction, fx: ShellEffects): void {
     case "closeOverlay":
       return fx.setOverlay(null);
     case "focusColumn":
-      // The boolean is deliberately dropped: a column that is not on screen
-      // at this breakpoint is a miss with nothing to report to.
+      // The shell reveals the target before focusing it.
       return void fx.focusSelector(COLUMN_FOCUS_SELECTORS[action.column]);
     case "filterTree":
       return void fx.focusSelector(TREE_FILTER_SELECTOR);
@@ -359,6 +342,8 @@ export function runShellAction(action: ShellAction, fx: ShellEffects): void {
       return fx.fitGraph();
     case "clearSelection":
       return fx.clearSelection();
+    case "closeTab":
+      return fx.closeTab();
     case "cycleTheme":
       return fx.cycleTheme();
   }
@@ -397,10 +382,11 @@ export function keyHelp(cmd: string): readonly KeyHelpGroup[] {
     {
       title: "Global",
       entries: [
+        { combo: "⌥W / Alt W", what: "Close the active tab" },
         { combo: `${cmd}K`, what: "Search notes and the repository" },
         ...Object.entries(COLUMN_DIGITS).map(([digit, column]) => ({
           combo: `${cmd}${digit}`,
-          what: `Focus the ${column} column${COLLAPSIBLE_COLUMNS.has(column) ? " (when on screen)" : ""}`,
+          what: column === "tree" ? "Open and focus the notes sidebar" : column === "graph" ? "Open and focus Graph view" : "Focus the note",
         })),
         { combo: "?", what: "This help" },
         { combo: "t", what: "Cycle the colour theme (system / light / dark)" },
@@ -418,6 +404,14 @@ export function keyHelp(cmd: string): readonly KeyHelpGroup[] {
         { combo: "Home / End", what: "First / last row" },
       ],
     },
+    {
+      title: "Tabs and panes",
+      entries: [
+        { combo: "← / → / Home / End", what: "Select a tab when the tab strip is focused" },
+        { combo: `${cmd}click`, what: "Open a note or search result in a new tab" },
+        { combo: "Pane options (···)", what: "Split right or down, move a tab, or close a pane" },
+      ],
+    },
     {
       title: "Graph",
       entries: [{ combo: "g", what: "Fit the whole graph" }],
@@ -427,6 +421,7 @@ export function keyHelp(cmd: string): readonly KeyHelpGroup[] {
       entries: [
         { combo: "↑ / ↓", what: "Move through results" },
         { combo: "↵", what: "Open the highlighted result" },
+        { combo: `${cmd}↵`, what: "Open the highlighted result in a new tab" },
         { combo: "Esc", what: "Close the palette" },
       ],
     },

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

@@ -49,6 +49,7 @@ export interface KeyOptions {
  */
 export function watchKeys(host: KeyHost, opts: KeyOptions): () => void {
   const listener = (event: KeyboardEventLike): void => {
+    if (event.defaultPrevented) return;
     const action = shellKey(describeKey(event), opts.context());
     if (action === null) return;
     event.preventDefault();

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

@@ -1,8 +1,8 @@
 /**
  * Everything the shell *decides*, as pure functions (weave-workspace §1.2).
  *
- * The header's status summary, the per-column empty-state copy and the status
- * bar's text all live here rather than inside the components that render them.
+ * The Recent list, per-column empty-state copy and footer status text live
+ * here rather than inside the components that render them.
  * That is not a stylistic
  * preference: §10 forbids adding a DOM test environment, so a conditional
  * inside a `.tsx` is a conditional that can never be covered, and §14 lists
@@ -14,67 +14,43 @@
  * types, no `node:*`, no `src/core`.
  */
 
-import type { GraphPayload, WireNodeKind, WireStalenessState } from "../../shared/wire";
-import { COLUMNS, type ColumnId } from "./layout.model";
-export { COLUMNS };
-export type { ColumnId };
+import type { GraphPayload, WireNodeKind } from "../../shared/wire";
+import { kindIcon } from "../tree/tree.model";
+import type { IconName } from "./icons.model";
+export const NOTE_DRAG_TYPE = "application/x-weave-note";
 
-// --- the header summary --------------------------------------------------------
-
-/**
- * The `vault:34 · repo:fresh · 127 nodes` readout from the §1.2 sketch.
- *
- * Kept as three fields rather than one pre-joined string so the component can
- * put a separator between them without this module owning a `·`, and so a
- * test asserts the numbers rather than a formatting decision.
- */
-export interface HeaderSummary {
-  /** Note nodes in the vault. */
-  readonly notes: number;
-  /** Repository index freshness, or `null` when the repo is unindexed. */
-  readonly repo: WireStalenessState | null;
-  /** Every node, of every kind. */
-  readonly nodes: number;
+/** Pane drops open only note IDs that still exist in this workspace. */
+export function noteDropId(graph: GraphPayload | null, id: string): string | null {
+  return id.startsWith("note:") && graph?.model.nodes.some((node) => node.id === id && node.kind === "note") ? id : null;
 }
 
-/** The summary before the first graph arrives. */
-export const EMPTY_SUMMARY: HeaderSummary = { notes: 0, repo: null, nodes: 0 };
+export type ColumnId = "tree" | "note" | "graph";
+export const COLUMNS: readonly ColumnId[] = ["tree", "note", "graph"];
 
-/**
- * Which node kinds count as "vault" for the header.
- *
- * Only `note`. The `vault` node itself is the container, and counting it
- * would make an empty vault read `vault:1` — a number that is technically
- * defensible and would still be read as "there is one note in there".
- */
-const VAULT_KINDS: readonly WireNodeKind[] = ["note"];
+/** Most recent selections in this window, independent of whether their tabs stay open. */
+export function recordVisit(previous: readonly string[], id: string | null): readonly string[] {
+  return id === null ? previous : [id, ...previous.filter((item) => item !== id)].slice(0, 100);
+}
 
-/** Derive the header counts from a payload. */
-export function summarize(payload: GraphPayload | null): HeaderSummary {
-  if (payload === null) return EMPTY_SUMMARY;
-  const nodes = payload.model.nodes;
-  return {
-    notes: nodes.filter((node) => VAULT_KINDS.includes(node.kind)).length,
-    repo: payload.model.staleness?.state ?? null,
-    nodes: nodes.length,
-  };
+/** A selected graph node opens only after its preview has already been shown. */
+export function graphClickOpensTab(previewId: string | null, id: string | null): id is string {
+  return id !== null && id === previewId;
 }
 
-/**
- * The repo segment's text.
- *
- * `"unindexed"` rather than `"missing"` for a null or `missing` staleness:
- * "missing" reads as an error, and a repository that has simply never been
- * scanned is the ordinary first-run state, not a fault. The word the user
- * needs is the one that implies an action they can take.
- */
-export function repoLabel(repo: WireStalenessState | null): string {
-  return repo === null || repo === "missing" ? "unindexed" : repo;
+export interface RecentEntry {
+  readonly id: string;
+  readonly label: string;
+  readonly icon: IconName;
+  readonly selected: boolean;
 }
 
-/** `vault:34 · repo:fresh · 127 nodes`, as the pieces to join. */
-export function summaryParts(summary: HeaderSummary): readonly string[] {
-  return [`vault:${summary.notes}`, `repo:${repoLabel(summary.repo)}`, `${summary.nodes} nodes`];
+/** Present a frozen visit order without changing it when selection moves. */
+export function recentEntries(ids: readonly string[], graph: GraphPayload | null, selectedId: string | null): RecentEntry[] {
+  return ids.map((id) => {
+    const node = graph?.model.nodes.find((entry) => entry.id === id);
+    const kind: WireNodeKind = node?.kind ?? (id.startsWith("vfolder:") ? "module" : id.startsWith("artifact:") ? "file" : "note");
+    return { id, label: node?.label ?? id.replace(/^[^:]+:/, ""), icon: kindIcon(kind), selected: id === selectedId };
+  });
 }
 
 // --- empty states ------------------------------------------------------------------
@@ -84,23 +60,6 @@ export interface EmptyStateCopy {
   readonly title: string;
 }
 
-const EMPTY_STATES: Readonly<Record<ColumnId, EmptyStateCopy>> = {
-  tree: {
-    title: "Tree",
-  },
-  note: {
-    title: "Note",
-  },
-  graph: {
-    title: "Graph",
-  },
-};
-
-/** The empty-state copy for a column. */
-export function emptyStateFor(column: ColumnId): EmptyStateCopy {
-  return EMPTY_STATES[column];
-}
-
 /** The context rail's heading and `aria-label`. */
 export const CONTEXT_EMPTY: EmptyStateCopy = {
   title: "Context",
@@ -156,24 +115,6 @@ export function shortStamp(stamp: string | null): string {
   return match?.[1] ?? stamp;
 }
 
-// --- the refresh button ------------------------------------------------------------
-
-/**
- * The refresh control's glyph, as SVG path data.
- *
- * A drawn icon replaces the `⟳` text character for the same reason §P6.4
- * retires the tree's glyph soup: a text arrow is whatever the platform's
- * fallback font draws it as, while these two strokes are the brand's own
- * weight everywhere. Stored as pure data here — §10 — so `Header.tsx` stays
- * props-in/JSX-out and the shape is testable without a DOM. 24×24 viewBox,
- * stroked, `currentColor`: the header recolours it on hover like any other
- * glyph.
- */
-export const REFRESH_ICON_PATHS: readonly string[] = [
-  "M21 12a9 9 0 1 1-2.64-6.36",
-  "M21 3v6h-6",
-];
-
 /**
  * How often the shell re-renders on its own, in ms.
  *
@@ -189,29 +130,12 @@ export const TICK_MS = 60_000;
 
 // --- the search affordance ---------------------------------------------------------
 
-/**
- * The `⌘K` control.
- *
- * Rendered **disabled** through P1–P3, with a title saying search arrived in
- * P4 — a deliberate choice over omitting it: the keyboard hint taught the
- * shortcut that would exist, and a `disabled` control explaining itself is
- * honest in a way that a working-looking box that does nothing is not.
- *
- * P4 made it live, and it is now a *button* rather than an `<input>`. The
- * palette owns the only text field, so a second one in the header would be
- * two places to type a query into and one of them would be a lie — clicking
- * it opens the overlay and whatever was typed into the header box would be
- * discarded. A button that looks like a search field and opens the real one
- * is the affordance the §1.2 sketch actually describes.
- */
-export const SEARCH_PLACEHOLDER = "Search…";
-
 /** The shortcut hint. `⌘K` on Apple platforms, `Ctrl K` elsewhere. */
 export function searchShortcut(isApple: boolean): string {
   return isApple ? "⌘K" : "Ctrl K";
 }
 
-/** The `title=` on the live search button. Names the key that also opens it. */
+/** The search action's tooltip, including the key that also opens it. */
 export function searchHint(shortcut: string): string {
   return `Search notes and repository (${shortcut})`;
 }

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

@@ -13,7 +13,7 @@
  * "Dark" and "light" alone are not enough: stripping a user of "follow my OS"
  * is a regression the moment anyone prefers the *default* behaviour rather
  * than either specific scheme. The cycle is `system → light → dark → system`
- * so the control is one button, never a menu — a popover in a 34 px header is
+ * so the control is one button, never a menu — a popover in the ribbon is
  * a second focusable thing to reach, and the setting is not worth one.
  *
  * ## The attribute, not a class, not inline styles
@@ -32,7 +32,7 @@
  * ## Tier rules (§2)
  *
  * `src/web/client/**`. Storage arrives as the two-method port
- * `selection.storage.ts` uses, so a fake is an object literal and quota
+ * the graph position cache uses, so a fake is an object literal and quota
  * failures stay the caller's problem — a theme the user could not persist is
  * the same cosmetic cost as a selection.
  */
@@ -76,7 +76,7 @@ export function loadTheme(storage: ThemeStorage): ThemeChoice | null {
   }
 }
 
-/** Persist the choice. Reports failure as `false`, like `saveSelection`. */
+/** Persist the choice. Reports failure as `false`. */
 export function saveTheme(storage: ThemeStorage, choice: ThemeChoice): boolean {
   try {
     storage.setItem(THEME_STORAGE_KEY, choice);
@@ -120,7 +120,7 @@ export function themeAttr(choice: ThemeChoice): "light" | "dark" | null {
 // --- the control's view ------------------------------------------------------------
 
 /**
- * The header button's face.
+ * The ribbon button's face.
  *
  * The glyphs are the provenance language the tree already teaches
  * (`tree.model.ts`): filled, half and hollow of one shape. Filled `●` is

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

@@ -1,3 +1,5 @@
+import { WORKSPACE_CSS } from "./workspace.css";
+
 /**
  * The workspace stylesheet, and how it gets past the CSP
  * (weave-workspace §1.2, §5.2).
@@ -162,7 +164,7 @@ export const THEME_CSS = `
        row      12    list rows, text inputs, inline code
        base     13    body copy, h3-h6, preview-card text
        body     13.5  the note column's prose
-       subhead  14    palette input, note-body h2, header icon buttons
+       subhead  14    palette input, note-body h2, ribbon icon buttons
        title    15    note-body h1
        display  20    the note's page title
      Two earlier sizes were merged into neighbours: 9px glyphs to prov, and
@@ -196,86 +198,7 @@ export const THEME_CSS = `
   ${LIGHT_TOKENS}
 }
 body{font-size:var(--weave-px-base)}
-#app{height:100%;display:grid;grid-template-rows:auto 1fr auto;background:var(--weave-bg)}
-
-/* header --------------------------------------------------------------- */
-.weave-header{
-  display:flex;align-items:center;gap:14px;padding:0 var(--weave-gutter);
-  height:34px;border-bottom:1px solid var(--weave-line);background:var(--weave-panel);
-}
-.weave-brand{display:inline-flex;align-items:center;gap:6px;font-size:var(--weave-px-subhead);font-weight:600;letter-spacing:.01em;white-space:nowrap}
-.weave-brand-mark{height:20px;width:20px;border-radius:var(--weave-radius)}
-/* A button styled as a search field: the palette owns the only text input,
-   so this opens it rather than pretending to accept a query. */
-.weave-search{
-  display:flex;align-items:center;gap:6px;flex:0 1 260px;min-width:0;
-  height:22px;padding:0 7px;font:inherit;font-size:var(--weave-px-row);text-align:left;cursor:pointer;
-  color:var(--weave-dim);background:var(--weave-bg);
-  border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);
-}
-.weave-search:hover{color:var(--weave-fg);border-color:var(--weave-accent)}
-.weave-search-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.weave-search kbd{
-  font-family:var(--weave-mono);font-size:var(--weave-px-caption);color:var(--weave-faint);
-  padding:1px 5px;border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);white-space:nowrap;
-}
-.weave-summary{
-  margin-left:auto;display:flex;gap:9px;font-family:var(--weave-mono);
-  font-size:var(--weave-px-ui);color:var(--weave-dim);white-space:nowrap;
-}
-.weave-summary-part+.weave-summary-part::before{content:"·";margin-right:9px;color:var(--weave-faint)}
-.weave-refresh{
-  font:inherit;font-size:var(--weave-px-subhead);line-height:1;color:var(--weave-dim);background:none;
-  border:0;padding:3px 5px;border-radius:var(--weave-radius);cursor:pointer;
-  display:inline-flex;align-items:center;
-}
-.weave-refresh:hover{color:var(--weave-fg);background:var(--weave-line)}
-/* One full 600 ms turn per click ("the request left"), not a loop: the
-   refetch is fire-and-forget and a 304 may never fire a completion signal
-   for a spinner to wait on. Reduced-motion restores the static stroke. */
-.weave-refresh-spinning{animation:weave-refresh-turn 600ms ease-out}
-@keyframes weave-refresh-turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
-/* The theme cycle (shell/theme.model.ts). Same shape as the refresh button:
-   an icon-size control in a 34 px bar, glyph-only because the filled/half/
-   hollow family already means something in this workspace. */
-.weave-theme{
-  font:inherit;font-size:var(--weave-px-base);line-height:1;color:var(--weave-dim);background:none;
-  border:0;padding:3px 6px;border-radius:var(--weave-radius);cursor:pointer;
-}
-.weave-theme:hover{color:var(--weave-fg);background:var(--weave-line)}
-
-/* the grid -------------------------------------------------------------- */
-/* Widths arrive as custom properties from layout.model.ts. Shell/layout.model
-   selects the breakpoint; CSS consumes the resulting data-columns shape. */
-.weave-grid{display:grid;min-height:0;overflow:hidden;background:var(--weave-line)}
-.weave-grid[data-columns="3"]{grid-template-columns:var(--weave-col-tree,22%) 1px var(--weave-col-note,46%) 1px var(--weave-col-graph,32%)}
-.weave-grid[data-columns="2"]{grid-template-columns:var(--weave-col-tree,32%) 1px var(--weave-col-note,68%)}
-.weave-grid[data-columns="1"]{grid-template-columns:1fr}
-
-/* dividers -------------------------------------------------------------- */
-.weave-divider{
-  width:1px;cursor:col-resize;touch-action:none;background:var(--weave-line);position:relative;z-index:2;
-}
-.weave-divider::after{content:"";position:absolute;inset:0 -4px}
-.weave-divider:hover{background:var(--weave-faint)}
-.weave-divider:focus-visible{outline:2px solid var(--weave-accent);outline-offset:-1px}
-
-.weave-col{
-  display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
-  background:var(--weave-bg);
-}
-.weave-col-title{
-  margin:0;padding:5px var(--weave-gutter) 4px;font-size:var(--weave-px-caption);font-weight:600;
-  letter-spacing:.09em;text-transform:uppercase;color:var(--weave-faint);
-  border-bottom:1px solid var(--weave-line);
-}
-/* Title, then the graph (which takes the slack), then the context rail. The
-   1fr is what gives .weave-graph-canvas a definite height to measure, and the
-   rail's row is a fixed fraction of the column — not content-sized — so
-   moving the selection between a sparsely-connected note and a richly
-   connected one never repartitions the right-hand column: the rail scrolls
-   inside the same region instead of squeezing the graph. */
-.weave-col-graph{display:grid;grid-template-rows:auto minmax(0,1fr) minmax(96px,40%);background:var(--weave-bg)}
+#app{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--weave-bg)}
 
 /* tree column ----------------------------------------------------------- */
 /* --weave-depth is written per row by \`depthVar\`, through CSSOM
@@ -487,8 +410,8 @@ body{font-size:var(--weave-px-base)}
   text-decoration-thickness:1px;text-underline-offset:2px;
 }
 .weave-note-body a:hover{text-decoration-color:var(--weave-accent)}
-/* A ghost is a name with no note behind it: Obsidian's dashed, dimmed
-   affordance to create one. */
+/* A ghost is a name with no note behind it: a dashed, dimmed affordance to
+   create one. */
 .weave-wiki{cursor:pointer;color:var(--weave-accent);text-decoration:none}
 .weave-wiki:hover{text-decoration:underline}
 .weave-wiki-ghost{
@@ -633,9 +556,8 @@ body{font-size:var(--weave-px-base)}
   text-align:left;background:none;border:0;cursor:pointer;
 }
 .weave-ctx-heading:hover{color:var(--weave-fg)}
-/* The count is a mono voice, like every other number in the chrome: the
-   header summary and the status bar count in mono, so a rail that says
-   "BACKLINKS 4" in the text face would be the one thing off-key. */
+/* The count is a mono voice like the other status numbers, so a rail that
+   says "BACKLINKS 4" in the text face would be the one thing off-key. */
 .weave-ctx-count{
   margin-left:auto;font-family:var(--weave-mono);font-size:var(--weave-px-caption);
   letter-spacing:0;color:var(--weave-faint);font-weight:400;
@@ -662,11 +584,8 @@ body{font-size:var(--weave-px-base)}
 .weave-ctx-tag{margin:0 0 3px}
 .weave-ctx-tag .weave-ctx-rows{padding-left:12px}
 
-/* status bar ------------------------------------------------------------ */
-/* One separator vocabulary, shared with the header summary: every run of
-   status items after the first opens with the same mid-dot, in the same
-   --weave-faint. cwd · selection · stamp reads as one grammar,
-   the same way the header's three-part summary does. */
+/* workspace footer ------------------------------------------------------ */
+/* The status items share one mid-dot separator in --weave-faint. */
 .weave-status{
   display:flex;align-items:center;gap:8px;height:22px;padding:0 var(--weave-gutter);
   font-family:var(--weave-mono);font-size:var(--weave-px-ui);color:var(--weave-dim);
@@ -760,7 +679,7 @@ body{font-size:var(--weave-px-base)}
    would need delay-unmount plumbing far past polish. Compositor-safe
    properties only — colour, border, opacity, transform; height and padding
    snap. */
-.weave-row,.weave-ctx-link,.weave-chip,.weave-search,.weave-refresh,.weave-theme,
+.weave-row,.weave-ctx-link,.weave-chip,.weave-ribbon button,
 .weave-hit,.weave-note-open{
   transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease;
 }
@@ -826,7 +745,7 @@ export function findNonce(host: ThemeHost): string | null {
  * report in the console is a far better diagnostic than a stylesheet that was
  * never created.
  */
-export function installTheme(host: ThemeHost, css: string = THEME_CSS): boolean {
+export function installTheme(host: ThemeHost, css: string = THEME_CSS + WORKSPACE_CSS): boolean {
   const element = host.createElement("style");
   const nonce = findNonce(host);
   if (nonce !== null) element.nonce = nonce;