pi-weave 0.3.8 → 0.3.10

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

@@ -1,9 +1,11 @@
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import type { ComponentChildren } from "preact";
 import type { WorkspaceLayout } from "../../shared/workspace";
 import type { Preferences } from "../../shared/preferences";
 import { ACCENTS, THEMES } from "../../shared/themes";
 import type { AccentChoice, PaletteChoice } from "../../shared/themes";
+import { historySettings } from "../api";
+import { fetchJson } from "../api.dom";
 import { ForceTuner } from "../graph/ForceTuner";
 import { useFocusTrap } from "./FocusTrap";
 import { keyHelp } from "./keys.model";
@@ -20,6 +22,23 @@ export function Settings(props: {
   const [category, setCategory] = useState<typeof CATEGORIES[number]>("General");
   const [refreshCount, setRefreshCount] = useState(0);
   const trap = useFocusTrap();
+  // Note history lives in the vault, not in workspace preferences, so the
+  // agent's writes respect it too. `null` until the server has answered.
+  const [history, setHistory] = useState<boolean | null>(null);
+  // One change at a time: the control is disabled until the server answers,
+  // so a late response can never overwrite a newer choice.
+  const [historySaving, setHistorySaving] = useState(false);
+  useEffect(() => {
+    void historySettings(fetchJson).then((result) => { if (result.ok) setHistory(result.data.enabled); });
+  }, []);
+  const toggleHistory = (enabled: boolean): void => {
+    setHistory(enabled);
+    setHistorySaving(true);
+    void historySettings(fetchJson, enabled).then((result) => {
+      setHistory(result.ok ? result.data.enabled : !enabled);
+      setHistorySaving(false);
+    });
+  };
   const p = props.layout.preferences;
   const update = (values: Partial<Preferences>): void => props.onChange({ ...props.layout, preferences: { ...p, ...values } });
   return <div class="weave-scrim weave-settings-scrim" onClick={props.onClose}>
@@ -55,6 +74,7 @@ export function Settings(props: {
           <Row name="Spellcheck" hint="Use your browser or device’s spellchecker while editing."><input type="checkbox" checked={p.spellcheck} onChange={(event) => update({ spellcheck: event.currentTarget.checked })} /></Row>
           <Row name="Readable line length" hint="Keep note text in a comfortable reading column."><input type="checkbox" checked={p.readable} onChange={(event) => update({ readable: event.currentTarget.checked })} /></Row>
           <Row name="Open notes in editing mode" hint="Newly opened notes start in the editor. Existing drafts are preserved."><input type="checkbox" checked={p.defaultEdit} onChange={(event) => update({ defaultEdit: event.currentTarget.checked })} /></Row>
+          <Row name="Note history" hint="Save a copy of a note after every change, by you or your agent, so History can replay how it was written. Turning it off keeps what is already saved."><input type="checkbox" disabled={history === null || historySaving} checked={history ?? false} onChange={(event) => toggleHistory(event.currentTarget.checked)} /></Row>
         </> : null}
         {category === "Files" ? <>
           <Row name="On startup" hint="Choose which tabs appear when you reopen this workspace."><select aria-label="On startup" value={p.startup} onChange={(event) => update({ startup: event.currentTarget.value as Preferences["startup"] })}><option value="restore">Restore open tabs</option><option value="empty">Start with an empty tab</option></select></Row>

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

@@ -1,16 +1,16 @@
 /** Shared browser/desktop workspace: one data source, two optional tab groups. */
 import { useEffect, useLayoutEffect, useRef, useState, useMemo } from "preact/hooks";
-import type { GraphPayload, NotePayload } from "../../shared/wire";
+import type { GraphPayload, NotePayload, TrailPayload } from "../../shared/wire";
 import { activePane, activeTab, activateTab, closePane, closeTab, focusDocument, initialLayout, reorderTab, moveTab, navigateTab, openDocument, openWithPreferences, restoreWorkspace, openGraph, parseWorkspaceLayout, splitPane, tabDropSource, tabSelection } from "../../shared/workspace";
 import type { Pane, WorkspaceLayout, WorkspaceTab } from "../../shared/workspace";
 import { fetchJson } from "../api.dom";
-import { createNote, fetchGraph, openNote, saveNote } from "../api";
+import { createNote, fetchGraph, fetchHistory, openNote, saveNote } from "../api";
 import { Graph } from "../graph/Graph";
 import { schemeOf, watchScheme } from "../graph/scheme";
 import { createSigmaRenderer } from "../graph/renderer.dom";
 import { Note } from "../note/Note";
 import { createDraftStore, mayMutateDrafts, mayRemoveDrafts } from "../note/drafts";
-import type { DraftStore } from "../note/drafts";
+import type { DraftStore, SaveNote } from "../note/drafts";
 import { DISCARD_PROMPT } from "../note/note.model";
 import { SearchPalette } from "../search/SearchPalette";
 import { Icon, Tree } from "../tree/Tree";
@@ -18,6 +18,10 @@ import { initialWorkspaceState } from "../state";
 import { startWorkspace, watchNote } from "../workspace";
 import type { WorkspaceHandle } from "../workspace";
 import { ContextRail } from "./ContextRail";
+import { contextCount, contextModel } from "../context/context.model";
+import { startTrailPoll } from "../trail/trail";
+import { TRAIL_TICK_MS, trailLive, trailMarks, trailTurns } from "../trail/trail.model";
+import type { TrailReplay } from "../trail/trail.model";
 import { ResizeHandle } from "./ResizeHandle";
 import { deeplinkSelection, formatHash } from "./deeplink.model";
 import { Settings } from "./Settings";
@@ -28,7 +32,7 @@ import { watchKeys } from "./keys";
 import { COLUMN_FOCUS_SELECTORS, TREE_FILTER_SELECTOR, focusSelector, runShellAction } from "./keys.model";
 import { StatusBar } from "./StatusBar";
 import type { OverlayId } from "./shell.model";
-import { NOTE_DRAG_TYPE, noteDropId, TICK_MS, graphClickOpensTab, looksApple, recentEntries, recordVisit, searchHint, searchShortcut, statusBarModel } from "./shell.model";
+import { NOTE_DRAG_TYPE, noteDropId, TICK_MS, graphClickOpensTab, looksApple, openInSplit, recentEntries, recordVisit, searchHint, searchShortcut, statusBarModel } from "./shell.model";
 import { toggleTheme, effectiveScheme, loadTheme, saveTheme, themeButton } from "./theme.model";
 
 export interface ShellProps { cwd: string; initialWidth: number; platform: string }
@@ -51,7 +55,7 @@ function RecentList(props: { visits: readonly string[]; graph: GraphPayload | nu
 /** A tab view can unmount; the shared draft store outlives it. */
 function DocumentView(props: {
   preferences: Preferences; tab: WorkspaceTab; graph: GraphPayload | null; drafts: DraftStore; revision: number;
-  onSelect: (id: string, newTab?: boolean) => void; onSave: (slug: string, body: string) => Promise<boolean>;
+  onSelect: (id: string, newTab?: boolean) => void; onSave: SaveNote;
   now: number; onScroll: (value: number) => void; onSearch: () => void; onGraph: () => void; onCreate: (title: string) => Promise<boolean>;
 }) {
   const id = tabSelection(props.tab);
@@ -110,7 +114,7 @@ function DocumentView(props: {
   }}><Note spellcheck={props.preferences.spellcheck} defaultEdit={props.preferences.defaultEdit} note={payload?.note ?? null} loadFailed={payload?.failed ?? false} loadVersion={payload?.version ?? 0} graph={props.graph} selectedId={id}
     onSelect={props.onSelect} onOpen={(noteSlug) => void openNote(fetchJson, noteSlug).then((result) => {
       if (!result.ok) window.alert(result.message); else if (!result.data.opened) window.alert("Could not open the note in an editor.");
-    })} onSave={props.onSave} drafts={props.drafts} idPrefix={props.tab.id} now={props.now} /></div>;
+    })} onSave={props.onSave} onHistory={(noteSlug) => fetchHistory(fetchJson, noteSlug)} drafts={props.drafts} idPrefix={props.tab.id} now={props.now} /></div>;
 }
 
 export function Shell(props: ShellProps) {
@@ -119,6 +123,9 @@ export function Shell(props: ShellProps) {
   const [overlay, setOverlay] = useState<OverlayId>(null);
   const [contextGraph, setContextGraph] = useState(false);
   const [now, setNow] = useState(Date.now);
+  const [trail, setTrail] = useState<TrailPayload | null>(null);
+  const [trailNow, setTrailNow] = useState(Date.now);
+  const [replay, setReplay] = useState<TrailReplay | null>(null);
   const [width, setWidth] = useState(props.initialWidth);
   const [scheme, setScheme] = useState(() => schemeOf(window));
   const [ready, setReady] = useState(false);
@@ -129,6 +136,12 @@ export function Shell(props: ShellProps) {
   const [graphSelection, setGraphSelection] = useState<string | null>(null);
   const lastViewedDocument = useRef<string | null>(null);
   const [graphPreviewId, setGraphPreviewId] = useState<string | null>(null);
+  // The graph spotlight's query (`graph/spotlight.model.ts`). Held here, not
+  // in the column, so other UI can light the graph up — see `lightUp`.
+  const [graphQuery, setGraphQuery] = useState("");
+  // What the search palette listed when it lit the graph up, for that query.
+  // Typing a different query in the spotlight leaves these behind.
+  const [graphFound, setGraphFound] = useState<{ query: string; ids: readonly string[] } | null>(null);
   const draggedTab = useRef<string | null>(null);
   const [dropTab, setDropTab] = useState<{ paneId: string; before: string | null } | null>(null);
   const [dropPane, setDropPane] = useState<string | null>(null);
@@ -156,6 +169,11 @@ export function Shell(props: ShellProps) {
   const fullGraphVisible = graphPane !== undefined && (width >= 850 || graphPane.id === layout.activePane);
   const contextGraphActive = contextGraph && tab.kind === "document" && !fullGraphVisible;
   const contextVisible = width < 1050 ? compactContext : layout.contextVisible;
+  // Context floats as a card over the page's right margin unless pinned as a column (C1).
+  const contextFloating = !layout.contextPinned;
+  const contextTotal = useMemo(() => contextCount(contextModel(data.graph, selectedId)), [data.graph, selectedId]);
+  const cardWidth = Math.max(240, Math.min(320, layout.contextWidth));
+  const showContext = (): void => { if (width < 1050) setCompactContext(true); else setLayout({ ...layout, contextVisible: true }); };
   const graphVisible = fullGraphVisible || contextGraphActive && contextVisible && documentId !== null;
   const hasGraph = layout.panes.some((group) => group.tabs.some((entry) => entry.kind === "graph"));
   const live = useRef({ layout, overlay, selectedId, graphPreviewId, select: (_id: string | null) => {} });
@@ -197,11 +215,27 @@ export function Shell(props: ShellProps) {
     if (graphClickOpensTab(live.current.graphPreviewId, id)) openGraphNode(id);
     else previewGraphNode(id);
   };
+  /** The graph sheet's "Open in split": beside the graph, which stays on screen. */
+  const openGraphNodeInSplit = (id: string): void => {
+    previewGraphNode(null);
+    change(openInSplit(layout, id, graphPane?.id));
+  };
+  /**
+   * Open the graph view with `query` lit up in its spotlight. The entry point
+   * for other UI (the search palette's "light up in graph"); `""` clears it.
+   * `ids` are the palette's results, so a note found by its text lights too.
+   */
+  const lightUp = (query: string, ids: readonly string[] = []): void => {
+    setGraphQuery(query);
+    setGraphFound({ query, ids });
+    showGraph();
+  };
   live.current = { layout, overlay, selectedId, graphPreviewId, select };
   const mayMutate = (slugs: readonly string[]): boolean => mayMutateDrafts(drafts, slugs, () => window.confirm("Discard unsaved changes to the affected notes before changing files?"));
-  const save = async (slug: string, body: string): Promise<boolean> => {
-    const result = await saveNote(fetchJson, slug, body);
-    if (!result.ok) { window.alert(result.message); return false; }
+  const save: SaveNote = async (slug, body, options) => {
+    const result = await saveNote(fetchJson, slug, body, options?.raw === true);
+    // An autosave is quiet: the edit bar says "Not saved" instead of an alert per pause.
+    if (!result.ok) { if (options?.quiet !== true) window.alert(result.message); return false; }
     setRevision((value) => value + 1); workspace.current?.refresh(); return true;
   };
   const create = async (title: string, paneId: string): Promise<boolean> => {
@@ -272,6 +306,30 @@ export function Shell(props: ShellProps) {
     }, 350);
     return () => window.clearTimeout(timer);
   }, [layout, ready]);
+  // The recall trail: its own poll, and a fade clock that runs only while
+  // something is glowing (or a replay still has steps to light).
+  useEffect(() => startTrailPoll({
+    fetch: fetchJson,
+    onTrail: (next) => { setTrail(next); setReplay(null); setTrailNow(Date.now()); },
+  }), []);
+  const trailGlowing = trailLive(trail, trailNow, replay);
+  useEffect(() => {
+    if (!trailGlowing) {
+      if (replay !== null) setReplay(null);
+      return;
+    }
+    const tick = window.setInterval(() => setTrailNow(Date.now()), TRAIL_TICK_MS);
+    return () => window.clearInterval(tick);
+  }, [trailGlowing]);
+  const glows = useMemo(() => trailMarks(trail, trailNow, replay), [trail, trailNow, replay]);
+  const turns = useMemo(() => trailTurns(trail, data.graph), [trail, data.graph]);
+  // A floating card stays out of the way when it has nothing to say (no
+  // selection, no agent turn), and over the graph, whose own sheet is its context.
+  const coveredPane = layout.split === "down" ? layout.panes[0] : layout.panes.at(-1);
+  const graphUnderCard = coveredPane?.tabs.find((entry) => entry.id === coveredPane.activeTab)?.kind === "graph";
+  const contextIdle = contextFloating && (graphUnderCard || selectedId === null && turns.length === 0);
+  const contextOpen = contextVisible && !contextIdle;
+  const replayTurn = (turn: number): void => { const at = Date.now(); setTrailNow(at); setReplay({ turn, startedAt: at }); };
   useEffect(() => {
     const tick = window.setInterval(() => setNow(Date.now()), TICK_MS);
     const resize = (): void => setWidth(window.innerWidth);
@@ -305,6 +363,10 @@ export function Shell(props: ShellProps) {
       },
       closeTab: () => { const current = live.current.layout; change(closeTab(current, current.activePane, activeTab(current).id)); },
       toggleTheme: () => setLayout((current) => ({ ...current, theme: toggleTheme(current.theme, schemeOf(window), current.preferences) })),
+      toggleContext: () => {
+        if (window.innerWidth < 1050) setCompactContext((value) => !value);
+        else setLayout((current) => ({ ...current, contextVisible: !current.contextVisible }));
+      },
       focusSelector: (selector) => {
         if (selector === COLUMN_FOCUS_SELECTORS.graph) setLayout((current) => ({ ...openGraph(current), ...(window.innerWidth < 850 ? { treeVisible: false } : {}) }));
         else if (selector === COLUMN_FOCUS_SELECTORS.tree || selector === TREE_FILTER_SELECTOR) setLayout((current) => ({ ...current, treeVisible: true }));
@@ -376,7 +438,9 @@ export function Shell(props: ShellProps) {
   const renderPane = (group: Pane) => {
     const current = group.tabs.find((entry) => entry.id === group.activeTab)!;
     const isActive = group.id === layout.activePane;
-    return <section key={group.id} class={`weave-pane${isActive ? " weave-pane-active" : ""}${dropPane === group.id ? " weave-pane-drop" : ""}`} data-drop-label={draggedTab.current === null ? "Open note here" : "Move tab here"} aria-label={`Workspace pane ${layout.panes.indexOf(group) + 1}`}
+    // The floating card sits over the right-hand pane (both, stacked); its text makes room.
+    const underCard = contextFloating && contextOpen && (layout.split === "down" || group === layout.panes.at(-1));
+    return <section key={group.id} class={`weave-pane${isActive ? " weave-pane-active" : ""}${dropPane === group.id ? " weave-pane-drop" : ""}${underCard ? " weave-pane-under-card" : ""}`} data-drop-label={draggedTab.current === null ? "Open note here" : "Move tab here"} aria-label={`Workspace pane ${layout.panes.indexOf(group) + 1}`}
       onDragOver={(event) => tabDragOver(group.id, event)} onDrop={(event) => tabDrop(group.id, event)}
       onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDropPane(null); }}
       hidden={width < 850 && !isActive} onFocusCapture={() => { if (!isActive) setLayout((value) => ({ ...value, activePane: group.id })); }}
@@ -407,7 +471,7 @@ export function Shell(props: ShellProps) {
               const index = event.key === "Home" ? 0 : event.key === "End" ? group.tabs.length - 1 : (group.tabs.indexOf(entry) + offset + group.tabs.length) % group.tabs.length;
               const next = group.tabs[index]!; setLayout(activateTab(layout, group.id, next.id));
               requestAnimationFrame(() => document.getElementById(`tab-${next.id}`)?.focus());
-            }}><span aria-hidden="true">{entry.kind === "graph" ? "◌" : "▤"}</span><span>{titleOf(entry, data.graph)}</span>
+            }}><span aria-hidden="true"><Icon name={entry.kind === "graph" ? "graph" : "note"} class="weave-icon" /></span><span>{titleOf(entry, data.graph)}</span>
             {drafts.isDirty((tabSelection(entry) ?? "").slice(5)) ? <span class="weave-dirty" aria-label="Unsaved changes">●</span> : null}</button>
           <button type="button" class="weave-tab-close" aria-label={`Close ${titleOf(entry, data.graph)}`} onClick={() => change(closeTab(layout, group.id, entry.id))}>×</button>
         </div>)}
@@ -436,23 +500,21 @@ export function Shell(props: ShellProps) {
   };
 
   return <>
-    <div class="weave-workbench" style={{ "--weave-note-size": `${layout.preferences.fontSize}px`, "--weave-reading-width": layout.preferences.readable ? "760px" : "100%" }} ref={root} onDragEnd={() => { draggedTab.current = null; setDropPane(null); setDropTab(null); }}>
+    <div class="weave-workbench" style={{ "--weave-note-size": `${layout.preferences.fontSize}px`, "--weave-reading-width": layout.preferences.readable ? "760px" : "100%", "--weave-card-width": `${cardWidth}px` }} ref={root} onDragEnd={() => { draggedTab.current = null; setDropPane(null); setDropTab(null); }}>
       <nav class="weave-ribbon" aria-label="Workspace tools">
-        <button type="button" aria-label="Toggle notes sidebar" aria-pressed={layout.treeVisible} title="Notes" onClick={() => setLayout({ ...layout, treeVisible: !layout.treeVisible })}>▤</button>
-        <button type="button" aria-label="Open graph view" title="Graph view" onClick={showGraph}>◌</button>
-        <button type="button" aria-label="Toggle note graph" title="Note graph" aria-pressed={contextGraphActive && contextVisible} onClick={toggleContextGraph}><svg viewBox="0 0 20 20" width={18} height={18} fill="none" stroke="currentColor" stroke-width={1.5} aria-hidden="true"><rect x="2" y="2" width="16" height="16" rx="3" /><circle cx="10" cy="10" r="4" /></svg></button>
-        <button type="button" aria-label="Search notes and repository" title={searchHint(searchShortcut(looksApple(props.platform)))} onClick={() => setOverlay("search")}>
-          <svg viewBox="0 0 20 20" width={16} height={16} fill="none" stroke="currentColor" stroke-width={1.7} aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.5" /><path d="m13 13 4 4" /></svg>
-        </button>
+        <button type="button" aria-label="Toggle notes sidebar" aria-pressed={layout.treeVisible} title="Notes" onClick={() => setLayout({ ...layout, treeVisible: !layout.treeVisible })}><Icon name="sidebar" class="weave-icon" /></button>
+        <button type="button" aria-label="Open graph view" title="Graph view" onClick={showGraph}><Icon name="graph" class="weave-icon" /></button>
+        <button type="button" aria-label="Toggle note graph" title="Note graph" aria-pressed={contextGraphActive && contextVisible} onClick={toggleContextGraph}><Icon name="noteGraph" class="weave-icon" /></button>
+        <button type="button" aria-label="Search notes and repository" title={searchHint(searchShortcut(looksApple(props.platform)))} onClick={() => setOverlay("search")}><Icon name="search" class="weave-icon" /></button>
         <span class="weave-ribbon-space" />
-        <button type="button" aria-label="Toggle context sidebar" aria-pressed={contextVisible} title="Context" onClick={() => width < 1050 ? setCompactContext(!compactContext) : setLayout({ ...layout, contextVisible: !layout.contextVisible })}>☷</button>
-        <button type="button" aria-label="Refresh workspace" title="Refresh workspace" onClick={() => { workspace.current?.refresh(); setRevision((value) => value + 1); }}>↻</button>
-        <button type="button" aria-label={theme.hint} title={theme.hint} onClick={() => setLayout({ ...layout, theme: toggleTheme(layout.theme, scheme, layout.preferences) })}>{theme.glyph}</button>
-        <button type="button" aria-label="Settings" title="Settings" onClick={() => setOverlay("settings")}>⚙</button>
+        <button type="button" aria-label="Toggle context sidebar" aria-pressed={contextVisible} title="Context" onClick={() => width < 1050 ? setCompactContext(!compactContext) : setLayout({ ...layout, contextVisible: !layout.contextVisible })}><Icon name="context" class="weave-icon" /></button>
+        <button type="button" aria-label="Refresh workspace" title="Refresh workspace" onClick={() => { workspace.current?.refresh(); setRevision((value) => value + 1); }}><Icon name="refresh" class="weave-icon" /></button>
+        <button type="button" aria-label={theme.hint} title={theme.hint} onClick={() => setLayout({ ...layout, theme: toggleTheme(layout.theme, scheme, layout.preferences) })}><Icon name={theme.icon} class="weave-icon" /></button>
+        <button type="button" aria-label="Settings" title="Settings" onClick={() => setOverlay("settings")}><Icon name="settings" class="weave-icon" /></button>
       </nav>
       <div class="weave-sidebar-dock weave-notes-dock" data-open={layout.treeVisible} inert={!layout.treeVisible} aria-hidden={!layout.treeVisible} style={{ "--weave-sidebar-width": `${Math.min(layout.treeWidth, width - 90)}px` }}><aside class="weave-sidebar weave-sidebar-notes" aria-label="Notes sidebar">
         <div class="weave-sidebar-heading"><button type="button" aria-pressed={!recentMode} onClick={() => setRecentMode(false)}>Files</button><button type="button" aria-pressed={recentMode} onClick={() => setRecentMode(true)}>Recent</button><button type="button" aria-label="Hide notes sidebar" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle notes sidebar"]')?.focus(); setLayout({ ...layout, treeVisible: false }); }}>«</button></div>
-        {recentMode ? <RecentList visits={visits} graph={data.graph} selectedId={selectedId} onSelect={select} /> : <Tree graph={data.graph} selectedId={selectedId} recentIds={data.recentIds} onSelect={(id, newTab, keepSidebar) => select(id, newTab, layout.activePane, keepSidebar)} onMutate={mayMutate} onRefresh={() => workspace.current?.refresh()} now={now} />}
+        {recentMode ? <RecentList visits={visits} graph={data.graph} selectedId={selectedId} onSelect={select} /> : <Tree graph={data.graph} selectedId={selectedId} recentIds={data.recentIds} trail={glows} onSelect={(id, newTab, keepSidebar) => select(id, newTab, layout.activePane, keepSidebar)} onMutate={mayMutate} onRefresh={() => workspace.current?.refresh()} now={now} />}
         <div class="weave-vault-label"><span>Workspace</span><strong title={props.cwd}>{props.cwd.split(/[\\/]/).filter(Boolean).pop() ?? "Weave"}</strong></div>
       </aside><ResizeHandle label="Resize notes sidebar" min={180} max={420} value={layout.treeWidth} onChange={(delta) => setLayout((value) => ({ ...value, treeWidth: Math.max(180, Math.min(420, value.treeWidth + delta)) }))} /></div>
       <main class={`weave-panes weave-split-${layout.split}`} style={layout.panes.length === 2 && width >= 850 ? { [layout.split === "right" ? "gridTemplateColumns" : "gridTemplateRows"]: `minmax(0, ${layout.ratio}fr) 4px minmax(0, ${1 - layout.ratio}fr)` } : {}}>
@@ -461,7 +523,10 @@ export function Shell(props: ShellProps) {
           setLayout((value) => ({ ...value, ratio: Math.max(.2, Math.min(.8, value.ratio + delta / (extent ?? 800))) }));
         }} /> : null}{renderPane(group)}</>)}
       </main>
-      <div class="weave-sidebar-dock weave-context-dock" data-open={contextVisible} inert={!contextVisible} aria-hidden={!contextVisible} style={{ "--weave-sidebar-width": `${layout.contextWidth}px` }}><ResizeHandle label="Resize context sidebar" min={180} max={400} value={layout.contextWidth} onChange={(delta) => setLayout((value) => ({ ...value, contextWidth: Math.max(180, Math.min(400, value.contextWidth - delta)) }))} /><aside class="weave-sidebar weave-sidebar-context" aria-label="Context sidebar"><div class="weave-sidebar-heading"><strong>Context</strong><button type="button" aria-label="Hide context sidebar" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle context sidebar"]')?.focus(); setCompactContext(false); setLayout({ ...layout, contextVisible: false }); }}>»</button></div>{contextGraphActive ? <section class="weave-context-graph-section" aria-label="Note connections"><div class="weave-context-graph-heading"><strong>Note graph</strong><button type="button" aria-label="Hide note graph" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle note graph"]')?.focus(); setContextGraph(false); }}>×</button></div><div class="weave-context-graph-slot" ref={contextGraphSlot} style={{ height: layout.contextGraphHeight }}>{documentId === null ? <p>Select a note to see its connections.</p> : null}</div><ResizeHandle label="Resize note graph" horizontal min={120} max={800} value={graphBox.height} onChange={(delta) => setLayout((value) => ({ ...value, contextGraphHeight: Math.max(120, Math.min(800, (contextGraphSlot.current?.clientHeight ?? value.contextGraphHeight) + delta)) }))} /></section> : null}<ContextRail graph={data.graph} selectedId={selectedId} onSelect={select} tagHeight={layout.contextTagsHeight} onTagResize={(contextTagsHeight) => setLayout((value) => ({ ...value, contextTagsHeight }))} /></aside></div>
+      <div class={`weave-sidebar-dock weave-context-dock${contextFloating ? " weave-context-float" : ""}`} data-open={contextOpen} inert={!contextOpen} aria-hidden={!contextOpen} style={{ "--weave-sidebar-width": `${layout.contextWidth}px` }}><ResizeHandle label="Resize context sidebar" min={180} max={400} value={layout.contextWidth} onChange={(delta) => setLayout((value) => ({ ...value, contextWidth: Math.max(180, Math.min(400, value.contextWidth - delta)) }))} /><aside class="weave-sidebar weave-sidebar-context" aria-label="Context sidebar"><div class="weave-sidebar-heading weave-context-heading"><strong>Context</strong><span class="weave-context-count">{contextTotal}</span>
+        <button type="button" class="weave-context-pin" aria-pressed={layout.contextPinned} aria-label={layout.contextPinned ? "Float context over the page" : "Dock context as a column"} title={layout.contextPinned ? "Float over the page" : "Dock as a column"} onClick={() => setLayout({ ...layout, contextPinned: !layout.contextPinned })}><Icon name="pin" class="weave-icon" /></button>
+        <button type="button" aria-label="Hide context sidebar" title="Fold (])" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle context sidebar"]')?.focus(); setCompactContext(false); setLayout({ ...layout, contextVisible: false }); }}>{contextFloating ? <Icon name="chevron" class="weave-icon weave-icon-open" /> : "»"}</button></div>{contextGraphActive ? <section class="weave-context-graph-section" aria-label="Note connections"><div class="weave-context-graph-heading"><strong>Note graph</strong><button type="button" aria-label="Hide note graph" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle note graph"]')?.focus(); setContextGraph(false); }}>×</button></div><div class="weave-context-graph-slot" ref={contextGraphSlot} style={{ height: layout.contextGraphHeight }}>{documentId === null ? <p>Select a note to see its connections.</p> : null}</div><ResizeHandle label="Resize note graph" horizontal min={120} max={800} value={graphBox.height} onChange={(delta) => setLayout((value) => ({ ...value, contextGraphHeight: Math.max(120, Math.min(800, (contextGraphSlot.current?.clientHeight ?? value.contextGraphHeight) + delta)) }))} /></section> : null}<ContextRail graph={data.graph} selectedId={selectedId} onSelect={select} trail={turns} trailTurn={replay?.turn ?? null} onReplay={replayTurn} tagHeight={layout.contextTagsHeight} onTagResize={(contextTagsHeight) => setLayout((value) => ({ ...value, contextTagsHeight }))} /></aside></div>
+      {contextFloating && !contextVisible && !contextIdle ? <button type="button" class="weave-context-pill" aria-label={`Show context, ${contextTotal} items`} title="Show context (])" onClick={showContext}><Icon name="context" class="weave-icon" />Context<span class="weave-context-count">{contextTotal}</span></button> : null}
       {hasGraph || contextGraph ? <div class={`weave-graph-host${contextGraphActive ? " weave-context-graph-host" : ""}`}
         onDragOver={(event) => { if (!contextGraphActive && graphPane) tabDragOver(graphPane.id, event); }} onDrop={(event) => { if (!contextGraphActive && graphPane) tabDrop(graphPane.id, event); }}
         onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDropPane(null); }}
@@ -469,15 +534,16 @@ export function Shell(props: ShellProps) {
         onFocusCapture={() => { if (!contextGraphActive && graphPane) setLayout((current) => ({ ...current, activePane: graphPane.id })); }}
         aria-hidden={!graphVisible} inert={!graphVisible} role={contextGraphActive ? "region" : undefined} aria-label={contextGraphActive ? "Note graph" : undefined}
         style={{ ...graphBox, visibility: graphVisible ? "visible" : "hidden", pointerEvents: graphVisible ? "auto" : "none" }}>
-        <Graph graph={data.graph} selectedId={selectedId} previewId={graphPreviewId} onSelect={selectGraph} onOpen={openGraphNode} renderer={createSigmaRenderer} storage={localStorage} host={window} scheme={graphTheme} forces={layout.preferences.forces} groupColors={layout.preferences.groupColors} bootFailed={data.graphFailed} fit={fit} />
+        <Graph graph={data.graph} selectedId={selectedId} previewId={graphPreviewId} onSelect={selectGraph} onOpen={openGraphNode} renderer={createSigmaRenderer} storage={localStorage} host={window} scheme={graphTheme} forces={layout.preferences.forces} groupColors={layout.preferences.groupColors} bootFailed={data.graphFailed} fit={fit} trail={glows}
+          {...(contextGraphActive ? {} : { query: graphQuery, ...(graphFound?.query === graphQuery ? { found: graphFound.ids } : {}), onQuery: setGraphQuery, onOpenSplit: openGraphNodeInSplit })} now={now} />
       </div> : null}
     </div>
-    <div class="weave-footer"><StatusBar model={statusBarModel(props.cwd, selectedId)} />
+    <div class="weave-footer"><StatusBar model={statusBarModel(props.cwd, selectedId, searchShortcut(looksApple(props.platform)))} />
       {persistError ? <span role="status">Workspace restoration unavailable</span> : null}
       {drafts.dirtySlugs().length ? <span>{drafts.dirtySlugs().length} unsaved</span> : null}
       {width < 850 && layout.panes.length > 1 ? <button type="button" onClick={() => setLayout({ ...layout, activePane: layout.panes.find((group) => group.id !== pane.id)!.id })}>Switch pane</button> : null}
     </div>
-    {overlay === "search" ? <SearchPalette graph={data.graph} onSelect={select} onClose={() => setOverlay(null)} ports={{ fetch: fetchJson }} /> : null}
+    {overlay === "search" ? <SearchPalette graph={data.graph} onSelect={select} onLightUp={lightUp} onClose={() => setOverlay(null)} ports={{ fetch: fetchJson }} /> : null}
     {overlay === "settings" ? <Settings compact={width <= 650} layout={layout} info={info} cwd={props.cwd} shortcut={searchShortcut(looksApple(props.platform))} onChange={(next) => { change(next); setCompactContext(next.contextVisible); }} onRefresh={() => { workspace.current?.refresh(); setRevision((value) => value + 1); }} onClose={() => setOverlay(null)} /> : null}
     {overlay === "help" ? <HelpOverlay shortcut={searchShortcut(looksApple(props.platform))} onClose={() => setOverlay(null)} /> : null}
   </>;

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

@@ -16,6 +16,7 @@ export function StatusBar({ model }: { model: StatusBarModel }) {
       <span class="weave-status-sel" title="Current item">
         {model.selection}
       </span>
+      {model.hint === "" ? null : <span class="weave-status-hint">{model.hint}</span>}
     </footer>
   );
 }

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

@@ -43,7 +43,30 @@ export type IconName =
   | "entryPoint"
   | "gitState"
   | "external"
-  | "file";
+  | "file"
+  // Workspace chrome (the ribbon, tabs, the edit bar and the Context card).
+  | "sidebar"
+  | "graph"
+  | "noteGraph"
+  | "search"
+  | "context"
+  | "refresh"
+  | "settings"
+  | "sun"
+  | "moon"
+  | "system"
+  | "history"
+  | "edit"
+  | "check"
+  | "heading"
+  | "bold"
+  | "italic"
+  | "link"
+  | "wikilink"
+  | "task"
+  | "pin"
+  | "close"
+  | "folder";
 
 /** The box every path is drawn in, and the stroke the sheet's aesthetic asks for. */
 export const ICON_BOX = 16;
@@ -95,4 +118,48 @@ export const ICONS: Readonly<Record<IconName, IconDef>> = {
   external: { d: ["M4.5 11.5l7-7", "M6.75 4.5h4.75v4.75"], filled: false },
   /** A plain repo file, an unfolded page. */
   file: { d: ["M4.5 2.75h7v10.5h-7Z"], filled: false },
+  /** A window with its left panel ruled off: the notes sidebar. */
+  sidebar: { d: ["M2.75 3.25h10.5v9.5H2.75Z", "M6.25 3.25v9.5"], filled: false },
+  /** Three linked nodes: the graph view. */
+  graph: { d: ["M5.5 4a1.5 1.5 0 1 1-3 0a1.5 1.5 0 1 1 3 0Z", "M13.5 5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 1 1 3 0Z", "M8.5 12a1.5 1.5 0 1 1-3 0a1.5 1.5 0 1 1 3 0Z", "M5.5 4.3 10.5 4.8M4.6 5.4l1.9 5.2M11.3 6.3 8.3 10.8"], filled: false },
+  /** A framed node: the current note's own graph. */
+  noteGraph: { d: ["M3.25 2.75h9.5v10.5h-9.5Z", "M10.5 8a2.5 2.5 0 1 1-5 0a2.5 2.5 0 1 1 5 0Z"], filled: false },
+  /** A lens. */
+  search: { d: ["M11 7a4 4 0 1 1-8 0a4 4 0 1 1 8 0Z", "m10 10 3.5 3.5"], filled: false },
+  /** A window with its right panel ruled off: Context. */
+  context: { d: ["M2.75 3.25h10.5v9.5H2.75Z", "M9.75 3.25v9.5"], filled: false },
+  /** An open loop with its arrowhead. */
+  refresh: { d: ["M13 8a5 5 0 1 1-1.5-3.55", "M13 2.75V5.5h-2.75"], filled: false },
+  /** A hub with eight spokes. */
+  settings: { d: ["M10 8a2 2 0 1 1-4 0a2 2 0 1 1 4 0Z", "M8 1.75v1.5M8 12.75v1.5M1.75 8h1.5M12.75 8h1.5M3.6 3.6l1.05 1.05M11.35 11.35l1.05 1.05M3.6 12.4l1.05-1.05M11.35 4.65l1.05-1.05"], filled: false },
+  /** A light theme. */
+  sun: { d: ["M10.5 8a2.5 2.5 0 1 1-5 0a2.5 2.5 0 1 1 5 0Z", "M8 1.75V3M8 13v1.25M1.75 8H3M13 8h1.25M3.6 3.6l.9.9M11.5 11.5l.9.9M3.6 12.4l.9-.9M11.5 4.5l.9-.9"], filled: false },
+  /** A dark theme. */
+  moon: { d: ["M13 9.75A5.25 5.25 0 0 1 6.25 3a5.25 5.25 0 1 0 6.75 6.75Z"], filled: false },
+  /** Follow the system: a circle split down the middle. */
+  system: { d: ["M13.25 8a5.25 5.25 0 1 1-10.5 0a5.25 5.25 0 1 1 10.5 0Z", "M8 2.75v10.5"], filled: false },
+  /** A clock face: the note's history. */
+  history: { d: ["M13.25 8a5.25 5.25 0 1 1-10.5 0a5.25 5.25 0 1 1 10.5 0Z", "M8 5v3l2 1.5"], filled: false },
+  /** A pencil. */
+  edit: { d: ["M10.75 2.75 13.25 5.25 6 12.5H3.5V10Z", "M9.25 4.25l2.5 2.5"], filled: false },
+  /** A tick. */
+  check: { d: ["m3.25 8.5 3 3 6.5-6.75"], filled: false },
+  /** A heading mark. */
+  heading: { d: ["M4 3v10M12 3v10M4 8h8"], filled: false },
+  /** Bold. */
+  bold: { d: ["M4.5 3h4a2.5 2.5 0 0 1 0 5h-4Z", "M4.5 8h4.75a2.5 2.5 0 0 1 0 5H4.5Z"], filled: false },
+  /** Italic. */
+  italic: { d: ["M7 3h5M4 13h5M10 3 6 13"], filled: false },
+  /** Two chain links. */
+  link: { d: ["M6.75 9.25l2.5-2.5", "M7.25 4.75 8.5 3.5a2.5 2.5 0 0 1 3.5 3.5l-1.25 1.25", "M8.75 11.25 7.5 12.5a2.5 2.5 0 0 1-3.5-3.5l1.25-1.25"], filled: false },
+  /** Square brackets: a [[wikilink]]. */
+  wikilink: { d: ["M5.5 3H3.5v10h2", "M10.5 3h2v10h-2"], filled: false },
+  /** A ticked box: a task line. */
+  task: { d: ["M3 3h10v10H3Z", "m5.5 8 1.75 1.75L10.75 6.25"], filled: false },
+  /** A pushpin: dock the Context card. */
+  pin: { d: ["M6 2.75h4l-.5 4 2 2v1h-7v-1l2-2Z", "M8 9.75v3.5"], filled: false },
+  /** A cross. */
+  close: { d: ["m4.25 4.25 7.5 7.5M11.75 4.25l-7.5 7.5"], filled: false },
+  /** A folder tab, for the crumb above a note's title. */
+  folder: { d: ["M2.75 4.25h3.5l1.25 1.5h5.75v6.5H2.75Z"], filled: false },
 };

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

@@ -41,7 +41,7 @@
  * `⌘K`, which would otherwise re-open the palette on top of itself.
  */
 
-import { COLUMNS, type ColumnId, type OverlayId } from "./shell.model";
+import type { ColumnId, OverlayId } from "./shell.model";
 
 // --- the event, without the DOM ---------------------------------------------------
 
@@ -62,6 +62,12 @@ export interface KeyDescriptor {
   readonly alt: boolean;
   /** Focus is in an `<input>`, `<textarea>`, `<select>` or contenteditable. */
   readonly typing: boolean;
+  /**
+   * Focus is in the tree or the graph — the columns that *make* a selection,
+   * and so the only places `Esc` may clear one. Read from a note, the same
+   * key used to close the note you were reading.
+   */
+  readonly navigating: boolean;
 }
 
 /** What the shell knows that changes what a key means. */
@@ -93,7 +99,9 @@ export type ShellAction =
   | { readonly type: "clearSelection" }
   | { readonly type: "closeTab" }
   /** `t` — switch between the selected light and dark themes. */
-  | { readonly type: "toggleTheme" };
+  | { readonly type: "toggleTheme" }
+  /** `]` — fold or unfold the Context card. */
+  | { readonly type: "toggleContext" };
 
 /**
  * The command-key letters, as data.
@@ -149,6 +157,7 @@ export const BARE_KEYS: Readonly<Record<string, ShellAction>> = {
   g: { type: "fitGraph" },
   "?": { type: "openHelp" },
   t: { type: "toggleTheme" },
+  "]": { type: "toggleContext" },
 };
 
 /**
@@ -172,11 +181,12 @@ export function shellKey(event: KeyDescriptor, ctx: KeyContext): ShellAction | n
     return column === undefined ? null : { type: "focusColumn", column };
   }
 
-  // Only claimed when there is a selection to clear. With nothing selected,
-  // `Esc` belongs to whatever else the browser or a future dialog wants it
-  // for, and swallowing it silently would be the kind of key theft this
-  // module exists to avoid.
-  if (event.key === "Escape") return ctx.hasSelection ? { type: "clearSelection" } : null;
+  // Only claimed when there is a selection to clear, and only from the tree
+  // or the graph. With nothing selected, `Esc` belongs to whatever else the
+  // browser or a future dialog wants it for, and swallowing it silently would
+  // be the kind of key theft this module exists to avoid. From the note
+  // column it would close the note being read, which nobody means by it.
+  if (event.key === "Escape") return ctx.hasSelection && event.navigating ? { type: "clearSelection" } : null;
 
   if (!isBare(event) || event.typing) return null;
   return BARE_KEYS[event.key] ?? null;
@@ -216,8 +226,13 @@ export function isTextEntry(tagName: string | null, contentEditable: boolean): b
 export interface KeyTarget {
   readonly tagName?: string | undefined;
   readonly isContentEditable?: boolean | undefined;
+  /** `Element.closest`; absent on `window` and `document`. */
+  closest?(selector: string): unknown;
 }
 
+/** The tree and graph columns, where {@link KeyDescriptor.navigating} holds. */
+export const NAVIGATING_SELECTOR = ".weave-sidebar-notes, .weave-graph-host";
+
 /**
  * The slice of `KeyboardEvent` the subscription reads.
  *
@@ -246,6 +261,7 @@ export function describeKey(event: KeyboardEventLike): KeyDescriptor {
     shift: event.shiftKey,
     alt: event.altKey,
     typing: isTextEntry(event.target?.tagName ?? null, event.target?.isContentEditable === true),
+    navigating: (event.target?.closest?.(NAVIGATING_SELECTOR) ?? null) !== null,
   };
 }
 
@@ -324,6 +340,8 @@ export interface ShellEffects {
   closeTab(): void;
   /** `t` — switch between the user's selected light and dark themes. */
   toggleTheme(): void;
+  /** `]` — fold or unfold the Context card (or column). */
+  toggleContext(): void;
 }
 
 /** Perform an action. Total over {@link ShellAction}. */
@@ -350,6 +368,8 @@ export function runShellAction(action: ShellAction, fx: ShellEffects): void {
       return fx.closeTab();
     case "toggleTheme":
       return fx.toggleTheme();
+    case "toggleContext":
+      return fx.toggleContext();
   }
 }
 
@@ -395,7 +415,8 @@ export function keyHelp(cmd: string): readonly KeyHelpGroup[] {
         })),
         { combo: "?", what: "This help" },
         { combo: "t", what: "Switch between selected light and dark themes" },
-        { combo: "Esc", what: "Clear the selection, or close an overlay" },
+        { combo: "]", what: "Fold or unfold Context" },
+        { combo: "Esc", what: "Clear the selection from the tree or graph, or close an overlay" },
       ],
     },
     {
@@ -428,6 +449,8 @@ export function keyHelp(cmd: string): readonly KeyHelpGroup[] {
         { combo: "↑ / ↓", what: "Move through results" },
         { combo: "↵", what: "Open the highlighted result" },
         { combo: `${cmd}↵`, what: "Open the highlighted result in a new tab" },
+        { combo: "Tab / ⇧Tab", what: "Switch between All, Notes, Code and Tags" },
+        { combo: "⇧↵", what: "Light up the matches in the graph" },
         { combo: "Esc", what: "Close the palette" },
       ],
     },

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

@@ -15,6 +15,8 @@
  */
 
 import type { GraphPayload, WireNodeKind } from "../../shared/wire";
+import { activePane, moveTab, openDocument } from "../../shared/workspace";
+import type { WorkspaceLayout } from "../../shared/workspace";
 import { kindIcon } from "../tree/tree.model";
 import type { IconName } from "./icons.model";
 export const NOTE_DRAG_TYPE = "application/x-weave-note";
@@ -37,6 +39,39 @@ export function graphClickOpensTab(previewId: string | null, id: string | null):
   return id !== null && id === previewId;
 }
 
+/**
+ * Open `id` beside the graph — the graph sheet's "Open in split".
+ *
+ * With two panes, the note opens as a new tab in the pane that is *not* the
+ * graph's. With one, it opens in a new second pane and the graph's pane keeps
+ * the graph on screen: the tab is opened in the graph's pane and then moved,
+ * which is the same `moveTab` the tab strip's "Split right" uses, so the new
+ * pane is an ordinary one. The split direction is left as the layout has it.
+ *
+ * The note is shown in the split either way, which is what the button asks
+ * for; only which pane is active follows the user's `focusNewTabs`
+ * preference. Unchanged when the tab budget is spent.
+ */
+export function openInSplit(layout: WorkspaceLayout, id: string, graphPaneId: string | undefined): WorkspaceLayout {
+  const graph = layout.panes.find((pane) => pane.id === graphPaneId) ?? activePane(layout);
+  const other = layout.panes.find((pane) => pane.id !== graph.id);
+  const opened = openDocument(layout, id, { newTab: true, paneId: other?.id ?? graph.id });
+  if (opened === layout) return layout;
+  let next = opened;
+  if (other === undefined) {
+    // One pane, so it is the graph's, and the new tab is its last.
+    const { lastDocumentTab: _opened, ...pane } = opened.panes[0]!;
+    const tab = pane.tabs.at(-1)!;
+    // Put the graph back in front of its pane before the new tab leaves it, so
+    // `moveTab` keeps the graph active there instead of the tab beside it.
+    const restored: WorkspaceLayout = { ...opened, panes: [
+      { ...pane, activeTab: graph.activeTab, ...(graph.lastDocumentTab === undefined ? {} : { lastDocumentTab: graph.lastDocumentTab }) },
+    ] };
+    next = moveTab(restored, graph.id, tab.id);
+  }
+  return layout.preferences.focusNewTabs ? next : { ...next, activePane: graph.id };
+}
+
 export interface RecentEntry {
   readonly id: string;
   readonly label: string;
@@ -78,7 +113,10 @@ export const CONTEXT_EMPTY: EmptyStateCopy = {
  */
 export interface StatusBarModel {
   readonly cwd: string;
+  /** The selection as a reader names it: a note's file path, not its node id. */
   readonly selection: string;
+  /** The quiet hint at the far end, "⌘K search"; empty when none is given. */
+  readonly hint: string;
 }
 
 /** The `—` shown where a value is genuinely absent, not zero. */
@@ -88,13 +126,22 @@ export const NO_VALUE = "—";
 export function statusBarModel(
   cwd: string,
   selectedId: string | null,
+  shortcut = "",
 ): StatusBarModel {
   return {
     cwd: cwd === "" ? NO_VALUE : cwd,
-    selection: selectedId ?? "nothing selected",
+    selection: selectionLabel(selectedId),
+    hint: shortcut === "" ? "" : `${shortcut} search`,
   };
 }
 
+/** `note:projects/launch` reads as the file it is, `projects/launch.md`. */
+function selectionLabel(selectedId: string | null): string {
+  if (selectedId === null) return "nothing selected";
+  if (selectedId.startsWith("note:") && selectedId.length > "note:".length) return `${selectedId.slice("note:".length)}.md`;
+  return selectedId;
+}
+
 /**
  * How often the shell re-renders on its own, in ms.
  *

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

@@ -60,6 +60,8 @@ export function themeAttr(choice: ThemeChoice): PaletteChoice | null {
 
 export interface ThemeButtonView {
   readonly glyph: "●" | "◐" | "○";
+  /** The ribbon's icon for the same state. */
+  readonly icon: "system" | "sun" | "moon";
   readonly label: string;
   readonly hint: string;
 }
@@ -71,6 +73,7 @@ function themeName(choice: ThemeChoice): string {
 export function themeButton(choice: ThemeChoice, systemScheme: ColorScheme = "dark", pair: ThemePair = DEFAULT_PREFERENCES): ThemeButtonView {
   return {
     glyph: choice === "system" ? "◐" : THEMES[choice].scheme === "light" ? "○" : "●",
+    icon: choice === "system" ? "system" : THEMES[choice].scheme === "light" ? "sun" : "moon",
     label: themeName(choice),
     hint: `Colour theme: ${themeName(choice)} — click for ${themeName(toggleTheme(choice, systemScheme, pair))}`,
   };