pi-weave 0.3.6 → 0.3.8

package/src/web/client/graph/column.model.ts

@@ -344,8 +344,9 @@ export function graphColumnModel(
   // by a branch that is not on screen.
   const fills = groupColors ? groupNodeColors(reduced.nodes, edges, scheme) : undefined;
 
+  const graph = renderGraph(reduced.nodes, edges, layout.positions, scheme, fills);
   return {
-    graph: renderGraph(reduced.nodes, edges, layout.positions, scheme, fills),
+    graph,
     highlight: highlightFor(edges, selectedId),
     key: layout.key,
     cached: layout.cached,

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

@@ -12,17 +12,20 @@
  * resolve it.
  */
 
-import { useState } from "preact/hooks";
+import { useRef, useState } from "preact/hooks";
 import type { ContextModel, ContextRow, RailSectionView, RailToggles, TagGroupRow } from "../context/context.model";
 import { contextModel, emptyRailToggles, railPanelId, railSectionView, railTagsView, railToggled } from "../context/context.model";
 import type { GraphPayload } from "../../shared/wire";
 import { CONTEXT_EMPTY } from "./shell.model";
 import { Icon } from "../tree/Tree";
+import { ResizeHandle } from "./ResizeHandle";
 
 export interface ContextRailProps {
   graph: GraphPayload | null;
   selectedId: string | null;
   onSelect: (id: string, newTab?: boolean) => void;
+  tagHeight: number;
+  onTagResize: (height: number) => void;
 }
 
 function Row({ row, onSelect }: { row: ContextRow; onSelect: (newTab: boolean) => void }) {
@@ -91,6 +94,7 @@ function Tag({ tag, onSelect }: { tag: TagGroupRow; onSelect: (id: string, newTa
 }
 
 export function ContextRail(props: ContextRailProps) {
+  const tagRows = useRef<HTMLUListElement | null>(null);
   const model: ContextModel = contextModel(props.graph, props.selectedId);
   // The user's open/closed word lives in this component — it is view state,
   // not a workspace fact, so it does not cross the §1.3 bus and does not
@@ -110,11 +114,12 @@ export function ContextRail(props: ContextRailProps) {
       {model.tags.length === 0 ? null : (
         <section class="weave-ctx-group">
           <Heading view={tags} onToggle={toggleFor(tags)} />
-          <ul class="weave-ctx-tags" id={railPanelId(tags.heading)} hidden={tags.collapsed}>
+          <ul class="weave-ctx-tags weave-context-tags" ref={tagRows} style={{ height: props.tagHeight }} id={railPanelId(tags.heading)} hidden={tags.collapsed}>
             {model.tags.map((tag) => (
               <Tag key={tag.tag} tag={tag} onSelect={props.onSelect} />
             ))}
           </ul>
+          {tags.collapsed ? null : <ResizeHandle label="Resize tags section" horizontal min={60} max={600} value={props.tagHeight} onChange={(delta) => props.onTagResize(Math.max(60, Math.min(600, (tagRows.current?.clientHeight ?? props.tagHeight) + delta)))} />}
         </section>
       )}
     </div>

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

@@ -0,0 +1,19 @@
+import { useRef } from "preact/hooks";
+
+export function ResizeHandle(props: { label: string; horizontal?: boolean; value: number; min: number; max: number; onChange: (delta: number) => void }) {
+  const last = useRef<number | null>(null);
+  return <div class="weave-workspace-divider" role="separator" tabIndex={0} aria-label={props.label}
+    aria-orientation={props.horizontal ? "horizontal" : "vertical"} aria-valuenow={Math.round(props.value)} aria-valuemin={props.min} aria-valuemax={props.max}
+    onPointerDown={(event) => { last.current = props.horizontal ? event.clientY : event.clientX; event.currentTarget.setPointerCapture(event.pointerId); }}
+    onPointerMove={(event) => {
+      if (last.current === null) return;
+      const at = props.horizontal ? event.clientY : event.clientX;
+      props.onChange(at - last.current); last.current = at;
+    }}
+    onPointerUp={(event) => { last.current = null; event.currentTarget.releasePointerCapture(event.pointerId); }}
+    onPointerCancel={() => { last.current = null; }}
+    onKeyDown={(event) => {
+      if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+      event.preventDefault(); props.onChange(event.key === "ArrowLeft" || event.key === "ArrowUp" ? -20 : 20);
+    }} />;
+}

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

@@ -18,6 +18,7 @@ import { initialWorkspaceState } from "../state";
 import { startWorkspace, watchNote } from "../workspace";
 import type { WorkspaceHandle } from "../workspace";
 import { ContextRail } from "./ContextRail";
+import { ResizeHandle } from "./ResizeHandle";
 import { deeplinkSelection, formatHash } from "./deeplink.model";
 import { Settings } from "./Settings";
 import type { Preferences } from "../../shared/preferences";
@@ -112,28 +113,11 @@ function DocumentView(props: {
     })} onSave={props.onSave} drafts={props.drafts} idPrefix={props.tab.id} now={props.now} /></div>;
 }
 
-function ResizeHandle(props: { label: string; horizontal?: boolean; value: number; min: number; max: number; onChange: (delta: number) => void }) {
-  const last = useRef<number | null>(null);
-  return <div class="weave-workspace-divider" role="separator" tabIndex={0} aria-label={props.label}
-    aria-orientation={props.horizontal ? "horizontal" : "vertical"} aria-valuenow={Math.round(props.value)} aria-valuemin={props.min} aria-valuemax={props.max}
-    onPointerDown={(event) => { last.current = props.horizontal ? event.clientY : event.clientX; event.currentTarget.setPointerCapture(event.pointerId); }}
-    onPointerMove={(event) => {
-      if (last.current === null) return;
-      const at = props.horizontal ? event.clientY : event.clientX;
-      props.onChange(at - last.current); last.current = at;
-    }}
-    onPointerUp={(event) => { last.current = null; event.currentTarget.releasePointerCapture(event.pointerId); }}
-    onPointerCancel={() => { last.current = null; }}
-    onKeyDown={(event) => {
-      if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
-      event.preventDefault(); props.onChange(event.key === "ArrowLeft" || event.key === "ArrowUp" ? -20 : 20);
-    }} />;
-}
-
 export function Shell(props: ShellProps) {
   const [data, setData] = useState(initialWorkspaceState);
   const [layout, setLayout] = useState(() => ({ ...initialLayout(), theme: loadTheme(localStorage) ?? "system" }));
   const [overlay, setOverlay] = useState<OverlayId>(null);
+  const [contextGraph, setContextGraph] = useState(false);
   const [now, setNow] = useState(Date.now);
   const [width, setWidth] = useState(props.initialWidth);
   const [scheme, setScheme] = useState(() => schemeOf(window));
@@ -143,6 +127,7 @@ export function Shell(props: ShellProps) {
   const [revision, setRevision] = useState(0);
   const [, setDraftRevision] = useState(0);
   const [graphSelection, setGraphSelection] = useState<string | null>(null);
+  const lastViewedDocument = useRef<string | null>(null);
   const [graphPreviewId, setGraphPreviewId] = useState<string | null>(null);
   const draggedTab = useRef<string | null>(null);
   const [dropTab, setDropTab] = useState<{ paneId: string; before: string | null } | null>(null);
@@ -157,6 +142,7 @@ export function Shell(props: ShellProps) {
   const linked = useRef(false);
   const root = useRef<HTMLDivElement | null>(null);
   const graphSlot = useRef<HTMLDivElement | null>(null);
+  const contextGraphSlot = useRef<HTMLDivElement | null>(null);
   const fit = useRef<(() => void) | null>(null);
   const [graphBox, setGraphBox] = useState({ left: 0, top: 0, width: 600, height: 500 });
   const pane = activePane(layout);
@@ -164,17 +150,24 @@ export function Shell(props: ShellProps) {
   const theme = themeButton(layout.theme, scheme, layout.preferences);
   const palette = effectiveScheme(layout.theme, scheme, layout.preferences);
   const graphTheme = useMemo(() => ({ theme: palette, accent: layout.preferences.accent }), [palette, layout.preferences.accent]);
-  const selectedId = tab.kind === "graph" ? graphSelection : tabSelection(tab);
+  const documentId = tabSelection(tab);
+  const selectedId = tab.kind === "graph" ? graphSelection : documentId;
   const graphPane = layout.panes.find((group) => group.tabs.some((entry) => entry.id === group.activeTab && entry.kind === "graph"));
-  const graphVisible = graphPane !== undefined && (width >= 850 || graphPane.id === layout.activePane);
+  const fullGraphVisible = graphPane !== undefined && (width >= 850 || graphPane.id === layout.activePane);
+  const contextGraphActive = contextGraph && tab.kind === "document" && !fullGraphVisible;
   const contextVisible = width < 1050 ? compactContext : layout.contextVisible;
+  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) => {} });
   const previewGraphNode = (id: string | null): void => {
     live.current.graphPreviewId = id;
     setGraphPreviewId(id);
   };
-  useEffect(() => { if (!graphVisible) previewGraphNode(null); }, [graphVisible]);
+  useEffect(() => { previewGraphNode(null); }, [graphVisible, contextGraphActive, documentId]);
+  useEffect(() => {
+    if (documentId !== null) { lastViewedDocument.current = documentId; setGraphSelection(documentId); }
+    else if (tab.kind === "graph") setGraphSelection(lastViewedDocument.current);
+  }, [tab.id, tab.kind, documentId]);
 
   const change = (next: WorkspaceLayout): void => {
     if (mayRemoveDrafts(drafts, live.current.layout, next, () => window.confirm(DISCARD_PROMPT))) setLayout(next);
@@ -182,16 +175,25 @@ export function Shell(props: ShellProps) {
   const select = (id: string | null, newTab = false, paneId = layout.activePane, keepSidebar = false): void => {
     const next = (id === null ? openDocument : openWithPreferences)(layout, id, { newTab, paneId });
     change(width < 850 && !keepSidebar ? { ...next, treeVisible: false } : next);
-    setCompactContext(false);
+    if (!contextGraph) setCompactContext(false);
+  };
+  const toggleContextGraph = (): void => {
+    const showing = !(contextGraphActive && contextVisible);
+    setContextGraph(showing);
+    if (showing) {
+      setLayout((current) => ({ ...focusDocument(current), contextVisible: true }));
+      setCompactContext(true);
+    }
   };
   const showGraph = (): void => setLayout((current) => ({ ...openGraph(current), ...(width < 850 ? { treeVisible: false } : {}) }));
   const openGraphNode = (id: string): void => {
     previewGraphNode(null);
+    if (contextGraphActive) { select(id, true); return; }
     const other = layout.panes.find((group) => group.id !== graphPane?.id);
     select(id, true, other?.id ?? graphPane?.id ?? layout.activePane);
   };
   const selectGraph = (id: string | null): void => {
-    setGraphSelection(id);
+    if (!contextGraphActive) setGraphSelection(id);
     if (graphClickOpensTab(live.current.graphPreviewId, id)) openGraphNode(id);
     else previewGraphNode(id);
   };
@@ -229,7 +231,10 @@ export function Shell(props: ShellProps) {
           if (value.info) setInfo(value.info);
           const restored = parseWorkspaceLayout(value.layout);
           if (restored) {
-            setLayout(restoreWorkspace(restored));
+            const restoredLayout = restoreWorkspace(restored);
+            setLayout(restoredLayout);
+            lastViewedDocument.current = tabSelection(activeTab(focusDocument(restoredLayout)));
+            setGraphSelection(lastViewedDocument.current);
             setVisits(restored.panes.flatMap((pane) => pane.tabs.flatMap((tab) => tab.history)).reduce<readonly string[]>(recordVisit, []));
           }
         } else setPersistError(true);
@@ -319,7 +324,7 @@ export function Shell(props: ShellProps) {
   }, [layout.panes.map((group) => group.activeTab).join(","), layout.activePane, width, ready, data.graph?.stamp,
     layout.treeVisible, layout.treeWidth, layout.contextVisible, layout.contextWidth, layout.ratio, layout.split]);
   useLayoutEffect(() => {
-    const slot = graphSlot.current;
+    const slot = contextGraphActive ? contextGraphSlot.current : graphSlot.current;
     const parent = root.current;
     if (!graphVisible || !slot || !parent) return;
     const measure = (): void => {
@@ -329,7 +334,7 @@ export function Shell(props: ShellProps) {
     measure();
     const observer = new ResizeObserver(measure); observer.observe(slot); observer.observe(parent);
     return () => observer.disconnect();
-  }, [graphVisible, layout, width]);
+  }, [contextGraphActive, graphVisible, layout, width]);
 
   const rememberScroll = (tabId: string, scroll: number): void => setLayout((current) => ({ ...current,
     panes: current.panes.map((group) => ({ ...group, tabs: group.tabs.map((entry) => entry.id === tabId ? { ...entry, scroll } : entry) })),
@@ -435,6 +440,7 @@ export function Shell(props: ShellProps) {
       <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>
@@ -455,8 +461,14 @@ 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><ContextRail graph={data.graph} selectedId={selectedId} onSelect={select} /></aside></div>
-      {hasGraph ? <div class="weave-graph-host" onDragOver={(event) => { if (graphPane) tabDragOver(graphPane.id, event); }} onDrop={(event) => { if (graphPane) tabDrop(graphPane.id, event); }} onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDropPane(null); }} onPointerDown={() => { if (graphPane) setLayout((current) => ({ ...current, activePane: graphPane.id })); }} onFocusCapture={() => { if (graphPane) setLayout((current) => ({ ...current, activePane: graphPane.id })); }} aria-hidden={!graphVisible} style={{ ...graphBox, visibility: graphVisible ? "visible" : "hidden", pointerEvents: graphVisible ? "auto" : "none" }}>
+      <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>
+      {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); }}
+        onPointerDown={() => { if (!contextGraphActive && graphPane) setLayout((current) => ({ ...current, activePane: graphPane.id })); }}
+        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} />
       </div> : null}
     </div>

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

@@ -1,6 +1,6 @@
 /** Tabbed workspace furniture; the graph keeps its existing palette and renderer. */
 export const WORKSPACE_CSS = `
-.weave-workbench{position:relative;display:flex;min-height:0;overflow:hidden;background:var(--weave-page)}
+.weave-workbench{position:relative;isolation:isolate;display:flex;min-height:0;overflow:hidden;background:var(--weave-page)}
 .weave-workbench button{font:inherit;color:inherit;cursor:pointer}
 .weave-workbench button:focus-visible,.weave-workbench summary:focus-visible{outline:2px solid var(--weave-accent);outline-offset:-2px}
 .weave-workbench button:disabled{opacity:.35;cursor:default}
@@ -93,6 +93,16 @@ export const WORKSPACE_CSS = `
 .weave-sidebar-context .weave-ctx-link{padding-top:7px;padding-bottom:7px}
 .weave-graph-host{position:absolute;z-index:2;display:flex;background:var(--weave-bg)}
 .weave-graph-host>.weave-graph{width:100%;height:100%;flex:1}
+.weave-context-graph-section{flex:none;border-bottom:1px solid var(--weave-line)}
+.weave-context-graph-heading{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;font-size:var(--weave-px-caption);color:var(--weave-dim)}
+.weave-context-graph-heading button{border:0;background:none;padding:2px 6px;font-size:18px}
+.weave-context-graph-slot{max-height:calc(100dvh - 180px);min-height:120px}
+.weave-context-tags{min-height:60px;max-height:60vh;overflow:auto}
+.weave-context-graph-slot>p{padding:16px;margin:0;color:var(--weave-dim);font-size:var(--weave-px-row)}
+.weave-context-graph-host{z-index:11}
+.weave-context-graph-host .weave-graph-legend{display:none}
+.weave-context-graph-host .weave-graph-preview{bottom:56px;padding:8px 28px 8px 8px}
+.weave-context-graph-host .weave-graph-preview-title{font-size:var(--weave-px-caption)}
 .weave-graph-preview{pointer-events:none;position:absolute;z-index:2;right:8px;bottom:64px;width:min(280px,calc(100% - 16px));box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:10px 34px 10px 10px;background:var(--weave-panel);border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);box-shadow:0 6px 22px #0003}
 .weave-graph-preview-info{display:flex;align-items:center;gap:8px;min-width:0}
 .weave-graph-preview-copy{display:flex;flex-direction:column;min-width:0;gap:2px}

package/src/web/shared/workspace.ts

@@ -29,6 +29,8 @@ export interface WorkspaceLayout {
   readonly contextVisible: boolean;
   readonly treeWidth: number;
   readonly contextWidth: number;
+  readonly contextGraphHeight: number;
+  readonly contextTagsHeight: number;
   readonly theme: ThemeChoice;
   readonly preferences: Preferences;
 }
@@ -50,6 +52,8 @@ export function initialLayout(): WorkspaceLayout {
     contextVisible: true,
     treeWidth: 240,
     contextWidth: 240,
+    contextGraphHeight: 260,
+    contextTagsHeight: 180,
     theme: "system",
     preferences: DEFAULT_PREFERENCES,
   };
@@ -184,12 +188,8 @@ export function navigateTab(layout: WorkspaceLayout, paneId: string, delta: -1 |
 
 export function splitPane(layout: WorkspaceLayout, direction: "right" | "down"): WorkspaceLayout {
   if (layout.panes.length === 2) return layout.split === direction ? layout : { ...layout, split: direction };
-  if (layout.panes.reduce((count, pane) => count + pane.tabs.length, 0) >= MAX_TABS) return layout;
-  const current = activeTab(layout);
-  const id = nextId(layout, "pane");
-  let tab = emptyDocument(nextId(layout, "tab"));
-  if (current.kind === "document") tab = { ...current, id: tab.id, history: [...current.history], scroll: current.scroll };
-  return { ...layout, panes: [...layout.panes, { id, tabs: [tab], activeTab: tab.id }], activePane: id, split: direction };
+  const moved = moveTab(layout, layout.activePane, activeTab(layout).id);
+  return moved === layout ? layout : { ...moved, split: direction };
 }
 
 export function closePane(layout: WorkspaceLayout, paneId: string): WorkspaceLayout {
@@ -246,13 +246,17 @@ function boundedId(value: unknown, prefix?: "pane" | "tab"): value is string {
 }
 
 export function parseWorkspaceLayout(value: unknown): WorkspaceLayout | null {
-  if (!record(value) || !exactKeys(value, ["version", "panes", "activePane", "split", "ratio", "treeVisible", "contextVisible", "treeWidth", "contextWidth", "theme", ...(Object.hasOwn(value, "preferences") ? ["preferences"] : [])])) return null;
+  if (!record(value) || !exactKeys(value, ["version", "panes", "activePane", "split", "ratio", "treeVisible", "contextVisible", "treeWidth", "contextWidth", "theme", ...["preferences", "contextGraphHeight", "contextTagsHeight"].filter(key => Object.hasOwn(value, key))])) return null;
   if (value["version"] !== 1 || !Array.isArray(value["panes"]) || value["panes"].length < 1 || value["panes"].length > 2 || !boundedId(value["activePane"], "pane")) return null;
   if (value["split"] !== "right" && value["split"] !== "down") return null;
   if (typeof value["ratio"] !== "number" || !Number.isFinite(value["ratio"]) || value["ratio"] < 0.1 || value["ratio"] > 0.9) return null;
   if (typeof value["treeVisible"] !== "boolean" || typeof value["contextVisible"] !== "boolean") return null;
   if (typeof value["treeWidth"] !== "number" || !Number.isFinite(value["treeWidth"]) || value["treeWidth"] < 120 || value["treeWidth"] > 800) return null;
   if (typeof value["contextWidth"] !== "number" || !Number.isFinite(value["contextWidth"]) || value["contextWidth"] < 120 || value["contextWidth"] > 800) return null;
+  const contextGraphHeight = Object.hasOwn(value, "contextGraphHeight") ? value["contextGraphHeight"] : 260;
+  const contextTagsHeight = Object.hasOwn(value, "contextTagsHeight") ? value["contextTagsHeight"] : 180;
+  if (typeof contextGraphHeight !== "number" || !Number.isFinite(contextGraphHeight) || contextGraphHeight < 120 || contextGraphHeight > 800) return null;
+  if (typeof contextTagsHeight !== "number" || !Number.isFinite(contextTagsHeight) || contextTagsHeight < 60 || contextTagsHeight > 600) return null;
   if (!isThemeChoice(value["theme"])) return null;
   let preferences = Object.hasOwn(value, "preferences") ? parsePreferences(value["preferences"]) : DEFAULT_PREFERENCES;
   if (preferences === null) return null;
@@ -288,7 +292,7 @@ export function parseWorkspaceLayout(value: unknown): WorkspaceLayout | null {
     panes.push({ id: rawPane["id"], tabs, activeTab: rawPane["activeTab"], ...(typeof lastDocumentTab === "string" ? { lastDocumentTab } : {}) });
   }
   if (count > MAX_TABS || graphs > 1 || !panes.some((pane) => pane.id === value["activePane"])) return null;
-  return { version: 1, panes, activePane: value["activePane"], split: value["split"], ratio: value["ratio"], treeVisible: value["treeVisible"], contextVisible: value["contextVisible"], treeWidth: value["treeWidth"], contextWidth: value["contextWidth"], theme: value["theme"], preferences };
+  return { version: 1, panes, activePane: value["activePane"], split: value["split"], ratio: value["ratio"], treeVisible: value["treeVisible"], contextVisible: value["contextVisible"], treeWidth: value["treeWidth"], contextWidth: value["contextWidth"], contextGraphHeight, contextTagsHeight, theme: value["theme"], preferences };
 }
 
 /** Startup choice resets navigation only; appearance and sidebar preferences survive. */