pi-weave 0.3.9 → 0.3.11

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

@@ -18,8 +18,9 @@ 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 { TRAIL_TICK_MS, agentSearch, agentSpotlight, trailLive, trailMarks, trailTurns } from "../trail/trail.model";
 import type { TrailReplay } from "../trail/trail.model";
 import { ResizeHandle } from "./ResizeHandle";
 import { deeplinkSelection, formatHash } from "./deeplink.model";
@@ -31,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 }
@@ -135,6 +136,15 @@ 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);
+  // The agent search the spotlight is showing (its trail `seq`), or `null`
+  // when the spotlight is the person's — see `agentSpotlight`.
+  const [agentLit, setAgentLit] = useState<number | 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);
@@ -162,6 +172,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) => {} });
@@ -203,11 +218,29 @@ 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 });
+    setAgentLit(null);
+    showGraph();
+  };
+  const typeSpotlight = (query: string): void => { setGraphQuery(query); setAgentLit(null); };
   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: SaveNote = async (slug, body, options) => {
     const result = await saveNote(fetchJson, slug, body, options?.raw === true);
-    if (!result.ok) { window.alert(result.message); return false; }
+    // 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> => {
@@ -295,6 +328,23 @@ export function Shell(props: ShellProps) {
   }, [trailGlowing]);
   const glows = useMemo(() => trailMarks(trail, trailNow, replay), [trail, trailNow, replay]);
   const turns = useMemo(() => trailTurns(trail, data.graph), [trail, data.graph]);
+  // The agent's searches light up in the graph view's spotlight, like the
+  // palette's "light up in graph", without switching to the graph.
+  const search = useMemo(() => agentSearch(trail), [trail]);
+  useEffect(() => {
+    const composing = graphQuery.trim() !== "" && document.activeElement?.classList.contains("weave-spotlight-input") === true;
+    const next = agentSpotlight(agentLit, search, composing);
+    if (next === null) return;
+    setGraphQuery(next.query);
+    setGraphFound({ query: next.query, ids: next.ids });
+    setAgentLit(next.agent);
+  }, [search?.seq]);
+  // 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);
@@ -329,6 +379,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 }));
@@ -400,7 +454,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 })); }}
@@ -431,7 +487,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>)}
@@ -460,23 +516,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} trail={glows} 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} 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)` } : {}}>
@@ -485,7 +539,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} trail={turns} trailTurn={replay?.turn ?? null} onReplay={replayTurn} 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); }}
@@ -493,15 +550,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} trail={glows} />
+        <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 } : {}), byAgent: agentLit !== null, onQuery: typeSpotlight, 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: ["M6.50 3.65L6.89 1.70L9.11 1.70L9.50 3.65A4.6 4.6 0 0 1 11.02 4.53L12.90 3.89L14.01 5.81L12.52 7.12A4.6 4.6 0 0 1 12.52 8.88L14.01 10.19L12.90 12.11L11.02 11.47A4.6 4.6 0 0 1 9.50 12.35L9.11 14.30L6.89 14.30L6.50 12.35A4.6 4.6 0 0 1 4.98 11.47L3.10 12.11L1.99 10.19L3.48 8.88A4.6 4.6 0 0 1 3.48 7.12L1.99 5.81L3.10 3.89L4.98 4.53A4.6 4.6 0 0 1 6.50 3.65Z", "M10 8a2 2 0 1 1-4 0a2 2 0 1 1 4 0Z"], 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

@@ -99,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.
@@ -155,6 +157,7 @@ export const BARE_KEYS: Readonly<Record<string, ShellAction>> = {
   g: { type: "fitGraph" },
   "?": { type: "openHelp" },
   t: { type: "toggleTheme" },
+  "]": { type: "toggleContext" },
 };
 
 /**
@@ -337,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}. */
@@ -363,6 +368,8 @@ export function runShellAction(action: ShellAction, fx: ShellEffects): void {
       return fx.closeTab();
     case "toggleTheme":
       return fx.toggleTheme();
+    case "toggleContext":
+      return fx.toggleContext();
   }
 }
 
@@ -408,6 +415,7 @@ export function keyHelp(cmd: string): readonly KeyHelpGroup[] {
         })),
         { combo: "?", what: "This help" },
         { combo: "t", what: "Switch between selected light and dark themes" },
+        { combo: "]", what: "Fold or unfold Context" },
         { combo: "Esc", what: "Clear the selection from the tree or graph, or close an overlay" },
       ],
     },
@@ -441,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))}`,
   };