diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91943d6a..79c5d5f1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,40 @@ auto-generated per-PR notes; this file is the curated, human-readable history.
 ## [Unreleased]
 
 ### Added
+- **The foldable left navigation is reachable in the UI** (#487, phase 3 of 4 —
+  the phase's own most complex wiring step). `app-shell.ts` composes phase 1's
+  pure mode/resize-session core and phase 2's section registry with a new
+  controller seam this phase adds (`application/left-nav.ts`'s
+  `openFocusedSection`/`toggleFocusedSection`) and two new standalone UI
+  modules that had no consumer yet — `ui/left-rail.ts` (the compact icon
+  rail) and `ui/left-nav-separator.ts` (the resize/mode-changing separator) —
+  into one working feature: the sidebar's previously-always-wide presentation
+  now renders wide, a bare rail, or a rail-plus-focused-drawer, driven by the
+  `leftNavMode` preference and the `leftNavSection` session-only state phase 1
+  added (the state field is session-only by design — #487 specifies the
+  focused drawer need not reopen automatically after reload — unlike
+  `leftNavMode`, which IS a persisted browser preference). `.sidebar` is
+  RE-PRESENTED through a new
+  `data-nav-mode` attribute (`wide` | `rail` | `drawer`) rather than moved or
+  rebuilt — the four navigation-section hosts phase 2 built stay exactly where
+  they are, and only which one is exposed, plus the sidebar's own
+  width/visibility, changes, which is what makes "wide and focused
+  presentations share and preserve all navigation state" true by construction.
+  The old `.col-resize` handle keeps its class (the existing mobile CSS and
+  e2e assertions key off it) but no longer drives `splitters.ts`'s bare
+  `'col'` width clamp — that axis is deleted outright (see Changed below), and
+  the handle's mousedown/keydown belong entirely to `mountLeftNavSeparator`
+  now, which reports a mode/drawer-open-or-closed transition it itself
+  commits (a pointer drag, or a keyboard Home/End/Arrow operation) through a
+  new visually-hidden `role="status"` live region — a rail-icon click or
+  Escape write `state` directly through `application/left-nav.ts`'s own seam
+  and are not announced through it. The presentation also re-derives on a
+  live browser-window resize via a new optional injected `observeElementWidth`
+  seam on `mountAppShell`, which the production `app.ts` call site wires to a
+  real `ResizeObserver` when the platform has one (omitted in production when
+  it does not, in which case the shell simply runs without live-resize
+  reclamping; several unit tests inject a fake implementation directly to
+  cover the callback regardless).
 - **A navigation section registry behind the left sidebar** (#487, phase 2 of 4).
   Each of the four navigation sections — Databases, Dashboards, Library, History —
   is now addressable through one registry (`src/ui/nav-sections.ts`) that owns its
@@ -62,10 +96,64 @@ auto-generated per-PR notes; this file is the curated, human-readable history.
   focused drawer and the resize separator arrive in phase 3.
 
 ### Changed
-- The sidebar's `'col'` drag axis now clamps through the same
-  `LEFT_PANEL_MIN_PX`/`LEFT_PANEL_MAX_PX` constants as the load path, instead of
-  repeating `180`/`420` as literals (#487). Behaviour is unchanged; it removes
-  the second owner of a range whose whole point is having one.
+- **The wide sidebar's resize range gained a viewport-aware upper bound**
+  (#487, phase 3 of 4). The documented `[180, 420]` px drag range is
+  unchanged at the constant level, but on a viewport narrower than roughly
+  907px (down to the 768px mobile breakpoint, below which the desktop rail/
+  drawer does not render at all), the separator and the keyboard path now
+  additionally clamp the reachable maximum so the centre SQL/results surface
+  never drops below its own documented 480px minimum
+  (`LEFT_CENTRE_MIN_PX`, `core/left-nav-layout.ts`) — the "new central
+  layout constraint" issue #487 explicitly allows for. A drag or an Arrow/End
+  keypress that would otherwise cross that floor stops at it instead of
+  shrinking the centre surface arbitrarily thin; the full stored preference
+  is never downgraded by the clamp and is restored in full the moment the
+  viewport allows it again, the same rule phase 3's resize-session design
+  already guarantees for the focused drawer's own band. This "never" is
+  scoped to phase 3's own budget (viewport width minus the separator minus
+  the centre minimum) — phase 4's optional right inspector is not yet a term
+  in that budget, so the guarantee will need re-verifying once it is.
+- The `.col-resize` handle no longer drives `splitters.ts`'s `'col'` drag
+  axis at all (#487, phase 3 of 4) — that axis is deleted outright: the
+  sidebar's own resize gesture now belongs entirely to
+  `ui/left-nav-separator.ts`'s mode reducer (see Added above), which folds
+  to a rail, opens/closes a focused drawer, and restores the wide sidebar,
+  none of which a bare width clamp on one axis could express.
+- **Switching between Library and History no longer clears the search box**
+  (#487, phase 3 of 4). Each lower-navigation section now keeps its own filter
+  text (`state.lowerNavigationFilters`, replacing the single shared
+  `state.libraryFilter`), preserved across every switch between them — a
+  deliberate, user-visible behavior change from phase 2's "a section switch
+  still clears the search exactly as before," required by phase 3's own
+  acceptance bullet that wide and focused presentations share and preserve all
+  navigation state. Both sections' own search box and list now also render
+  unconditionally, independently of which section is currently exposed
+  (mirroring the upper pane's `renderSchema`/`renderDashboardTree`), which
+  fixes two latent bugs: the section that wasn't active at mount never painted
+  until the first switch to it, and the section that wasn't active when its own
+  data changed (e.g. a query recorded to History while Library was shown) went
+  stale.
+- **The focused drawer's minimum resizable width is now 180px, not 140px**
+  (#487, phase 3 of 4) — a deliberate, user-visible behavior change from the
+  placeholder value phase 1 shipped, settled by a real-browser check rather
+  than left as-is. Phase 1 flagged the drawer's `[140, 260]` resize band as an
+  explicit open question, noting a 140px drawer has to hold a title, a search
+  box, tree indentation and action controls, and might be too narrow to do it
+  legibly. It was: at 140px the Dashboards section's three titles rendered as
+  "Sa...", "O...", "A..." — unreadable and indistinguishable from one another —
+  while at 180px they read as "Sales re...", "Ops late...", "A very lo..." —
+  still ellipsized, but genuinely readable and distinguishable. The drawer's
+  floor now reuses `LEFT_PANEL_MIN_PX`, the wide sidebar's own floor constant,
+  rather than a second "180" value, which also gives the drawer the wide
+  sidebar's own dead-zone behavior for free: a resize proposal between 140 and
+  180 now holds the drawer open at the 180 floor instead of folding it or
+  clipping it to the raw proposed width, exactly mirroring how the wide
+  sidebar already holds at its own 180 floor between the fold threshold and
+  180. The keyboard path gained the equivalent of the wide sidebar's own
+  at-the-floor boundary check for the same reason: once the drawer's floor
+  no longer coincided with the fold threshold, a plain `ArrowLeft` from the
+  floor could otherwise land in that same dead zone and get stranded there
+  rather than folding.
 - **`VariableBarApp`'s shared activation port is now caller-neutral** (#478).
   `state.filterActive`/`params.saveFilterActive` — named after Workbench
   persistence even though Dashboard's own caller uses them for an unpersisted
@@ -104,6 +192,102 @@ auto-generated per-PR notes; this file is the curated, human-readable history.
   reaching it takes a hand-edited or foreign-origin `localStorage` entry. The
   same NaN hole in `editorPct`/`sideSplitPct`/`cellDrawerPx`/`docPanePx` is
   tracked separately in #570.
+- **Closing a rail-launched drawer by clicking its own icon now returns focus
+  to that icon on WebKit/Safari too** (#487, phase 3 of 4). Chromium and
+  Firefox focus a clicked `<button>` natively, so `ui/left-rail.ts`'s click
+  handler happened to leave focus on the rail icon after a toggle-close — the
+  same outcome the Escape-to-close path already produces explicitly via
+  `leftRail.focusSection(section)` in `app-shell.ts`. WebKit does not natively
+  focus a clicked button (a real, long-standing engine difference), so on
+  Safari a click-close dropped focus to `<body>` instead, an inconsistency
+  with the keyboard path found in a real-browser e2e pass. The click handler
+  now calls `button.focus()` explicitly, matching the Escape path's behavior
+  in every engine rather than relying on each browser's own native click-focus
+  behavior.
+- **A focused drawer's identity could go stale across a visit to mobile width,
+  and an in-progress resize could keep painting stale desktop chrome through
+  that same crossing** (#487, phase 3 of 4, final PR review). `leftNavSection`
+  is session-only by design and the mobile projection deliberately never
+  touches it, but mobile's own wide-mode switchers write `sidePanel`/
+  `upperRole` directly — so opening a drawer on desktop, shrinking to mobile,
+  switching sections there, then widening back to desktop could show a drawer
+  whose title still named the section focused before the trip while its
+  content already reflected whichever section the mobile switcher last
+  picked. `leftNavMode`/`leftNavSection` and any active separator session
+  (which likewise has no way to notice the viewport left desktop out from
+  under it) are now reconciled together on every `isMobile` crossing: an
+  active drag is cancelled without committing, and `leftNavSection` clears —
+  a return from mobile always shows a bare rail rather than a possibly-stale
+  drawer, the same "need not reopen automatically" rule already applied to a
+  reload.
+- **A resize session ending via a tab-switch (`blur`) or the window going to
+  the background (`visibilitychange`) could commit against a budget measured
+  before the viewport shrank mid-drag** (#487, phase 3 of 4, final PR review).
+  `onMouseUp` re-clamps against the live budget immediately before committing,
+  but `blur`/`visibilitychange` had no coordinate to re-clamp from and
+  committed the session's already-computed `effective` layout as-is — stale
+  for exactly as long as the shell width changed after the session's last
+  `mousemove` and before it ended this way (the width observer skips a live
+  session, so nothing else re-clamps during that window). `endDrag` now
+  re-clamps the session's raw proposal against the current budget immediately
+  before every commit, regardless of which caller ended the drag.
+- **A non-monotone drag (past the wide threshold and back to a fold) could
+  move focus on an intermediate frame instead of only the transition it
+  actually commits to** (#487, phase 3 of 4, final PR review). The
+  wide-conversion focus restoration and its own `previousFocusedSection`
+  bookkeeping ran on every call to `applyEffectiveLeftNavigationLayout`,
+  including each intermediate frame of an in-progress drag — a drawer → past
+  wide → back to bare rail sequence cleared the bookkeeping on the first
+  frame, so a later legitimate restoration (e.g. drawer → momentarily bare
+  rail → back to wide) could no longer find where to send focus. Both now run
+  only while no separator session is active, so the bookkeeping stays frozen
+  at wherever the gesture started until it actually commits.
+- **A click-and-release on the resize separator with no genuine movement
+  could silently overwrite the stored wide/drawer width preference** (#487,
+  phase 3 of 4, second PR review). `mousedown` recorded no starting pointer
+  coordinate and no grip offset, so `mouseup` always treated the release
+  `clientX` as a brand-new raw proposal — even a pure click, and even one
+  landing wherever a viewport clamp happened to be rendering the handle at
+  the time, which could be far from the actual stored preference (a 420px
+  preference clamped to a rendered 313px would commit 313 on a bare click).
+  The session now records the grip point at `mousedown` and skips advancing
+  entirely when `mouseup` sees no genuine movement, and every advance
+  subtracts the recorded grip offset from `clientX` so a drag started
+  anywhere within the 7px handle tracks the pointer from its own grab point
+  rather than the handle's left edge.
+- **A semantic left-navigation command (Escape, a rail click, a programmatic
+  reveal) running while a pointer resize was still in progress could be
+  silently undone by that drag's own eventual commit** (#487, phase 3 of 4,
+  second PR review). The drag keeps its own uncommitted layout snapshot
+  independent of `state`, so a command that wrote `state` directly mid-drag
+  left the drag's `mouseup`/`blur` free to fire from its stale snapshot
+  afterward and overwrite (or resurrect) exactly what the command just did —
+  concretely, Escape closing a drawer mid-drag, then releasing the mouse,
+  reopened it. `application/left-nav.ts`'s `openFocusedSection`/
+  `toggleFocusedSection` now call an injected `preemptActiveResize` seam
+  FIRST, which `app-shell.ts` wires to cancel the active session and repaint
+  from the committed layout — the one choke point every caller goes through,
+  rather than each call site having to remember it individually.
+- **Crossing into the mobile breakpoint from an open focused drawer could
+  move focus onto a hidden desktop tab button** (#487, phase 3 of 4, second
+  PR review). The wide-conversion focus restoration keyed only on `navMode
+  === 'wide'`, but the mobile projection also forces `navMode` to `'wide'` —
+  so a mobile crossing read identically to a genuine desktop drawer → wide
+  conversion and called `.focus()` on a tab the mobile layout never renders.
+  Now gated behind `!state.isMobile.value`.
+- **Folding an open drawer to the bare rail via a pointer drag left focus
+  stranded in the drawer's now-hidden content, with no restoration to the
+  rail launcher** (#487, phase 3 of 4, second PR review). Focus was already
+  restored for an Escape-close, a rail-icon close, and a drawer → wide
+  conversion, but not this fourth transition — a pointer drag's own
+  `mousedown` calls `preventDefault()`, so focus never moves onto the
+  separator and can be left on a drawer element that just became `display:
+  none`. A committed drawer → rail transition now moves focus to the
+  section's rail launcher whenever focus was left inside the drawer
+  (`sidebar.contains(document.activeElement)`) — scoped that way, rather than
+  on every rail arrival, so a keyboard fold (which needs the separator itself
+  focused to receive the keydown at all) keeps focus right there instead of
+  losing it to the rail button.
 - **The Dashboard tree no longer reveals two rows' pencil/trash actions at
   once, and its `· N` count now sits inline after the label** (#568). The
   hover/focus reveal rule (`.dash-tree-row:focus-within .dash-tree-act`)
@@ -208,6 +392,65 @@ auto-generated per-PR notes; this file is the curated, human-readable history.
   sequence for code point zero, matching the escape `src/core/time-range.ts`
   uses in production. Verified no raw NUL bytes remain anywhere under `src/`
   or `tests/`; no code change was needed.
+- **The lower Library/History switcher's tabs are now real buttons with
+  correct `aria-pressed`** (#572). `ui/saved-history.ts`'s tabs had neither
+  attribute, unlike the upper Databases/Dashboards switcher
+  (`sidebar-upper.ts`), which already rendered both — landed as part of
+  #487 phase 3 step 4's rework of the lower switcher.
+- **Two pre-existing "reveal a Dashboard" actions bypassed the new left-
+  navigation controller seam, leaving the reveal invisible whenever the nav
+  was folded** (#487 phase 3 review). `ui/file-menu.ts`'s `revealDashboard`
+  (New dashboard / Import dashboard / Import example dashboard) and
+  `ui/dashboard-tree.ts`'s `revealAssignedPanel` (Library "Add to
+  dashboard…", the Panels-row create-and-assign action, and the drag-drop
+  settlement) both predate phase 3 and wrote `state.upperRole` directly,
+  which only ever moves the WIDE sidebar's pane. With the nav folded to the
+  rail — or its drawer open on a different section — `leftNavSection` stayed
+  untouched, so the Dashboards tree (and each action's own expand/scroll/
+  select work) happened inside a hidden pane. Both now route through
+  `application/left-nav.ts`'s `openFocusedSection`, which does the same
+  `upperRole` write in wide mode (`resolveRailOpen` is a no-op there — wide-
+  mode behavior is unchanged) and additionally opens/switches the focused
+  drawer when the nav is folded.
+- **A focused control could be dropped to `<body>` on three transitions the
+  phase-3-review restoration logic didn't cover** (#487, phase 3 review,
+  second pass). `app-shell.ts`'s `applyEffectiveLeftNavigationLayout` only
+  ever restored focus using a TRACKED section (`priorFocusedSection`), which
+  `core/left-nav-layout.ts`'s own mode/section coherence invariant keeps
+  `null` throughout 'wide' — so a wide sidebar folding straight to bare rail
+  (no drawer step in between) had nothing to restore to, even with focus
+  genuinely inside it. Fixed by asking the DOM directly which
+  `[data-section]` host the actually-focused element sits under
+  (`nav-sections.ts`'s per-section wrapper), falling back to it only when no
+  tracked section is available — the existing drawer-to-rail/drawer-to-wide
+  paths are unchanged. Two further gaps existed for the same reason CSS alone
+  can hide `.sidebar` independently of `data-nav-mode`: entering mobile
+  Editor/Results (`.main-row[data-mobile-view="editor"/"results"] .sidebar {
+  display: none }`) and switching to the Dashboard surface on mobile
+  (`.main-row[data-surface="dashboard"] .sidebar { display: none }`) both now
+  land focus on a stable, always-visible bottom-nav button instead of
+  silently losing it. Verified against a real browser: a Chromium probe
+  confirmed a focused descendant is still momentarily reported as
+  `document.activeElement` immediately after an ancestor goes hidden, but
+  falls back to `<body>` by the next microtask unless something explicitly
+  moves it first — happy-dom, this project's unit-test DOM, applies no CSS at
+  all and cannot demonstrate the failure this fixes.
+
+  Two related gaps surfaced while proving this out in real browsers and are
+  **not** fixed here (tracked as a follow-up): the resize separator's live
+  multi-frame drag repaint hides the sidebar/rail on an intermediate
+  `mousemove` frame, well before the final `mouseup` commit, so a real
+  browser can blur the focused element before ANY commit-time restoration
+  (this fix's new wide→rail path, or the pre-existing drawer→rail
+  restoration from an earlier #487 review round) gets a chance to see it —
+  this is a pre-existing gap in the whole mechanism, only ever unit-tested
+  under happy-dom, which does not model the blur at all. Separately, the new
+  mobile-crossing rescue's own explicit `.focus()` call was found to race the
+  browser's own async layout recompute for the newly-matching mobile media
+  query under real parallel load (Chromium specifically, not Firefox/WebKit)
+  — a `requestAnimationFrame`-deferred focus call reduced but did not
+  eliminate the failure rate, so no e2e assertion claims that path is solid
+  end-to-end; it is unit-tested only.
 
 ### Changed
 - **Sidebar tab headers go text-only once the sidebar is dragged to 220px or
diff --git a/docs/ADR-0001-reactivity.md b/docs/ADR-0001-reactivity.md
index 7bb8c766..7eaa78f1 100644
--- a/docs/ADR-0001-reactivity.md
+++ b/docs/ADR-0001-reactivity.md
@@ -175,8 +175,10 @@ forgettable as the old manual `renderSchema` calls, revisit via a fresh ADR.
 `state.shortcutsOpen`, `state.editingSavedId`, and `state.bannerDismissedFor`
 (previously bare fields — the latter two lived on `app` directly, not
 `app.state`) were converted to `signal(...)` and consolidated into `state.js`
-alongside the other session-only, non-persisted fields (`libraryFilter`,
-`resultSort`). None had a reactive reader before or after — each site that sets
+alongside the other session-only, non-persisted fields (`lowerNavigationFilters`
+— renamed from `libraryFilter` by #487 phase 3, which split the one field into
+per-section search text — and `resultSort`). None had a reactive reader before
+or after — each site that sets
 one already calls its own repaint (`renderSavedHistory`, `updateBanner`,
 `openShortcuts`'s own mount/unmount) — so this is a pure `.value` mechanical
 edit, not a new `effect()`. Housing them in `state.js` rather than on `app`
diff --git a/src/application/left-nav.ts b/src/application/left-nav.ts
new file mode 100644
index 00000000..f7e16ef0
--- /dev/null
+++ b/src/application/left-nav.ts
@@ -0,0 +1,175 @@
+// #487 phase 3 — the desktop left navigation's controller seam. The pure mode
+// machine lives in `core/left-nav-layout.ts`; this module is the thin async/
+// stateful glue that reads `AppState`'s scattered fields into one
+// `LeftNavigationLayout`, drives the reducers, and writes the result back —
+// plus the one persistence gap phase 3 exists to close (see
+// `selectSectionInExistingPane` below).
+//
+// Typed against a narrow structural interface, not `App`/`AppState` from
+// `src/ui/`: `src/application/**` must never import `src/ui/**` or
+// `src/editor/**` (build/check-boundaries.mjs), and a real `App` satisfies the
+// shape below directly — the same convention `library-assignment-service.ts`
+// and `app-preferences.ts` use.
+
+import { batch } from '@preact/signals-core';
+import type { Signal } from '@preact/signals-core';
+import {
+  resolveRailActivation, resolveRailOpen, sidePanelKeyFor,
+} from '../core/left-nav-layout.js';
+import type {
+  LeftNavigationLayout, LeftNavigationMode, LeftNavigationSection, SidePanelKey,
+} from '../core/left-nav-layout.js';
+
+/** The `AppState` fields the left navigation reads and writes, named exactly as
+ *  `state.ts` names them. Some are signals (repainted/observed reactively),
+ *  some are plain numbers (written like any other splitter width, persisted
+ *  only on a later resize-session commit) — that split matches `state.ts`
+ *  exactly and matters for every write below. */
+export interface LeftNavStateSlice {
+  sidebarPx: number;
+  leftNavDrawerPx: number;
+  readonly leftNavMode: Signal<LeftNavigationMode>;
+  readonly leftNavSection: Signal<LeftNavigationSection | null>;
+  readonly upperRole: Signal<'databases' | 'dashboards'>;
+  readonly sidePanel: Signal<SidePanelKey>;
+}
+
+/** The one persistence call this module makes — `app.prefs.save`'s real
+ *  signature (`AppPreferences.save`) takes any `PreferenceKey`; this module
+ *  only ever names `'sidePanel'`, so the seam is narrowed to that one key
+ *  rather than importing the full `PreferenceKey` union from
+ *  `application/app-preferences.ts`. */
+export interface LeftNavApp {
+  readonly state: LeftNavStateSlice;
+  readonly prefs: { save(name: 'sidePanel', value: SidePanelKey): void };
+  /**
+   * #487 phase-3 review, major issue 2 — called BEFORE either function below
+   * runs its own batched write. An active pointer resize session
+   * (`ui/left-nav-separator.ts`) keeps its own uncommitted layout snapshot
+   * independent of `state`; without this, a semantic command that runs while
+   * a drag is still live (Escape closing a drawer, a rail click, a
+   * programmatic reveal) writes `state` correctly, but the drag's eventual
+   * `mouseup`/`blur` commit still fires from its OWN stale snapshot and can
+   * silently overwrite (or resurrect) exactly what this command just did.
+   * `app-shell.ts` wires this to cancel the active session (no commit) and
+   * repaint from the now-current committed layout, so there is nothing left
+   * to fight this write once it runs. This is the ONE choke point every
+   * caller of `openFocusedSection`/`toggleFocusedSection` gets it through —
+   * optional, so a caller with no separator session to preempt (a test, or a
+   * call before the shell has mounted one) simply omits it and gets a no-op.
+   */
+  preemptActiveResize?(): void;
+}
+
+/**
+ * Project the scattered `AppState` fields this module reads into one
+ * `LeftNavigationLayout` — the shape every reducer in `core/left-nav-layout.ts`
+ * takes and returns. Exported: later phase-3 steps (the resize separator, the
+ * app-shell repaint effect) need the same projection.
+ */
+export function readLeftNavigationLayout(state: LeftNavStateSlice): LeftNavigationLayout {
+  return {
+    mode: state.leftNavMode.value,
+    wideWidthPx: state.sidebarPx,
+    drawerWidthPx: state.leftNavDrawerPx,
+    focusedSection: state.leftNavSection.value,
+  };
+}
+
+/**
+ * Drive the pane that ALREADY shows this section when there is no drawer to
+ * open for it — the wide sidebar's upper role switch, or its lower
+ * library/history tab. Not exported: it is only ever the one-signal half of
+ * `openFocusedSection`/`toggleFocusedSection`'s single batched write, never a
+ * standalone operation (see those functions' own comments for why they must
+ * not each get their own `batch()`).
+ *
+ * The lower-section branch is the fix phase 3 exists to make: today only the
+ * wide sidebar's own tab click (`ui/saved-history.ts`'s `switchTo`) persists
+ * `sidePanel`, so a rail/drawer selection of the same section left the
+ * signal's NEW value unpersisted — a reload would silently revert to
+ * whichever pane was last chosen through the wide tabs. Persisting BEFORE
+ * writing the signal mirrors `switchTo` exactly. Per-section filters
+ * (`state.lowerNavigationFilters`, phase 3 step 3) are already implemented
+ * elsewhere and this module still correctly never touches them.
+ *
+ * Both branches are guarded to a no-op when the target value is already
+ * current: `openFocusedSection`'s documented caller is #428's bounded
+ * drag-hover, which can re-assert the SAME section repeatedly on every hover
+ * notification, and `sidePanel`'s write has a real synchronous side effect
+ * (`app.prefs.save`) that must not fire on every one of those.
+ */
+function selectSectionInExistingPane(app: LeftNavApp, section: LeftNavigationSection): void {
+  if (section === 'databases' || section === 'dashboards') {
+    // Session-only, like `switchTo`'s counterpart for the upper pane: `upperRole`
+    // is never persisted (state.ts), so there is nothing to save here.
+    if (app.state.upperRole.value !== section) app.state.upperRole.value = section;
+    return;
+  }
+  const panel = sidePanelKeyFor(section);
+  if (app.state.sidePanel.value !== panel) {
+    app.prefs.save('sidePanel', panel);
+    app.state.sidePanel.value = panel;
+  }
+}
+
+/**
+ * Write a resolved `LeftNavigationLayout` back onto the scattered signals/
+ * fields it was read from. Not exported, for the same reason as
+ * `selectSectionInExistingPane`: it is only ever the other half of one batched
+ * write.
+ *
+ * Every caller only ever hands this the result of `resolveRailOpen` /
+ * `resolveRailActivation`, and neither reducer changes `mode` or either width
+ * in practice (rail-only reducers) — so writing all four fields
+ * unconditionally is harmless, and simpler than special-casing which changed.
+ * It does NOT call `prefs.save` for `leftNavMode`/`leftNavDrawerPx`: that
+ * persistence belongs to a later step's resize-session commit, not to opening
+ * a section.
+ */
+function writeLeftNavigationLayout(state: LeftNavStateSlice, layout: LeftNavigationLayout): void {
+  state.leftNavMode.value = layout.mode;
+  state.sidebarPx = layout.wideWidthPx;
+  state.leftNavDrawerPx = layout.drawerWidthPx;
+  state.leftNavSection.value = layout.focusedSection;
+}
+
+/**
+ * Open a section IDEMPOTENTLY (`core/left-nav-layout.ts`'s `resolveRailOpen`) —
+ * the deterministic seam #487 asks the left navigation to expose for #428's
+ * bounded drag-hover, and the one a plain rail-icon click also uses.
+ *
+ * In rail mode this opens (or keeps open) the focused drawer; in wide mode
+ * `resolveRailOpen` returns the layout unchanged (both panes already show, so
+ * `selectSectionInExistingPane` is the only effect), and for a lower section it
+ * ALSO drives the existing wide-mode pane switch, so calling this while wide
+ * still selects the right lower tab. Both halves are wrapped in exactly ONE
+ * `batch()` call: composing two independently-`batch()`-wrapped functions is
+ * NOT one atomic transition, since Preact signals' `batch()` flushes on each
+ * top-level call's own exit — two separate calls would let an effect observe
+ * an intermediate, mismatched combination (e.g. `sidePanel` updated but
+ * `leftNavSection` still stale) on the frame between them.
+ */
+export function openFocusedSection(app: LeftNavApp, section: LeftNavigationSection): void {
+  app.preemptActiveResize?.();
+  batch(() => {
+    selectSectionInExistingPane(app, section);
+    writeLeftNavigationLayout(app.state, resolveRailOpen(readLeftNavigationLayout(app.state), section));
+  });
+}
+
+/**
+ * Toggle a section (`core/left-nav-layout.ts`'s `resolveRailActivation`) —
+ * the same shape as `openFocusedSection`, but a second activation of the SAME
+ * already-open section closes the drawer instead of re-asserting it open.
+ * Same single-`batch()` requirement and rationale as `openFocusedSection`.
+ */
+export function toggleFocusedSection(app: LeftNavApp, section: LeftNavigationSection): void {
+  app.preemptActiveResize?.();
+  batch(() => {
+    selectSectionInExistingPane(app, section);
+    writeLeftNavigationLayout(
+      app.state, resolveRailActivation(readLeftNavigationLayout(app.state), section),
+    );
+  });
+}
diff --git a/src/application/saved-query-service.ts b/src/application/saved-query-service.ts
index c3832618..04392d01 100644
--- a/src/application/saved-query-service.ts
+++ b/src/application/saved-query-service.ts
@@ -146,8 +146,10 @@ export interface SavedQueryService {
   commit(tab: QueryTab, evaluated: { parsed: unknown; diagnostics: SpecValidationDiagnostic[] }): Promise<CommitLinkedResult>;
   /** Record a successful run in history (state.ts's own `recordHistory`) —
    *  never touches rendering; app.ts's own `app.recordHistory` delegate
-   *  conditionally repaints the History side panel itself after calling
-   *  this. */
+   *  unconditionally repaints History's own content after calling this
+   *  (#487 phase 3 removed the `sidePanel === 'history'` guard, since
+   *  History's content must stay current regardless of which lower-navigation
+   *  section is currently exposed). */
   recordHistory(tab: QueryTab, sqlText?: string): void;
   /** Build the shareable URL for an already-evaluated Spec, or a typed
    *  rejection reason — never writes `location`/clipboard itself. */
diff --git a/src/core/dashboard-tree-ui-state.ts b/src/core/dashboard-tree-ui-state.ts
index 9c5066f2..73d6b2fb 100644
--- a/src/core/dashboard-tree-ui-state.ts
+++ b/src/core/dashboard-tree-ui-state.ts
@@ -14,7 +14,7 @@
 // Keyed by `StoredWorkspaceV5.id` — the immutable opaque application identity
 // (#406) — never by the mutable `name` or the rewritable URL `key`.
 //
-// Deliberately NOT a signal, matching `state.libraryFilter`'s precedent
+// Deliberately NOT a signal, matching `state.lowerNavigationFilters`'s precedent
 // (`src/state.ts`): if a repaint effect observed this state, every keystroke in
 // the search box and every scroll frame would repaint the tree — losing the caret
 // on the first and doing pointless work on the second. The tree's ONE reactive
diff --git a/src/core/left-nav-layout.ts b/src/core/left-nav-layout.ts
index 436fd993..3df30399 100644
--- a/src/core/left-nav-layout.ts
+++ b/src/core/left-nav-layout.ts
@@ -42,8 +42,17 @@ export const LEFT_WIDE_THRESHOLD_PX = 260;
 
 /** The WIDE two-pane sidebar's resize bounds — the range `asb:sidebarPx` has
  *  always used, preserved verbatim per #487 ("preserve the existing
- *  sidebar-width preference range"). These do NOT bound the focused drawer; see
- *  `clampDrawerWidthPx`. */
+ *  sidebar-width preference range"). `LEFT_PANEL_MAX_PX` bounds ONLY the wide
+ *  sidebar — a 420px drawer is impossible, since a drag that far right
+ *  converts to the wide sidebar first (see `clampDrawerWidthPx`).
+ *
+ *  `LEFT_PANEL_MIN_PX`, though, is now ALSO the focused drawer's own resizable
+ *  floor, reused rather than duplicated as a second "180" constant: phase 1
+ *  shipped the drawer's floor at the fold threshold (140) as an explicit open
+ *  question, and a real-browser check settled it — at 140px the Dashboards
+ *  section's three titles rendered as "Sa...", "O...", "A..." (unreadable and
+ *  indistinguishable), while at 180px they read as "Sales re...", "Ops
+ *  late...", "A very lo..." (ellipsized, but readable and distinguishable). */
 export const LEFT_PANEL_MIN_PX = 180;
 export const LEFT_PANEL_MAX_PX = 420;
 
@@ -236,20 +245,39 @@ export function clampWideWidthPx(px: number): number {
 }
 
 /**
- * Clamp a focused-drawer width into `[LEFT_FOLD_THRESHOLD_PX,
- * LEFT_WIDE_THRESHOLD_PX]` — the drawer's own band, NOT the wide sidebar's
- * `[MIN, MAX]`.
- *
- * That is a reading of #487's drawer-resize rules rather than of its constant
- * list: a drawer drag must fold closed below the fold threshold and convert to
- * the wide sidebar above the wide threshold, so everything in between is the
- * only width a drawer can hold. Giving the drawer the wide sidebar's 180 floor
- * and 420 ceiling would make most of that range unreachable — the drag would
- * have converted to wide long before 420. `MIN`/`MAX` govern the wide sidebar.
+ * Clamp a focused-drawer width into `[LEFT_PANEL_MIN_PX, LEFT_WIDE_THRESHOLD_PX]`
+ * — i.e. `[180, 260]` — the drawer's own band, NOT the wide sidebar's
+ * `[LEFT_PANEL_MIN_PX, LEFT_PANEL_MAX_PX]` (`[180, 420]`). The two bands now
+ * share a floor but not a ceiling: a drawer drag converts to the wide sidebar
+ * long before it would ever reach 420, so nothing above 260 is a legal drawer
+ * width. `clampWideWidthPx` governs the wide sidebar.
+ *
+ * **The floor is deliberately `LEFT_PANEL_MIN_PX`, not `LEFT_FOLD_THRESHOLD_PX`
+ * — a real, settled design decision, not phase 1's original shape.** Phase 1
+ * shipped this clamp's floor AT the fold threshold (`[140, 260]`), flagged as
+ * an explicit open question: a 140px drawer has to hold a title, a search box,
+ * tree indentation and action controls, and might be too narrow to do it
+ * legibly. A real-browser check confirmed it was: at 140px the Dashboards
+ * section's three titles rendered as "Sa...", "O...", "A..." — unreadable and
+ * indistinguishable from one another — while at 180px they read as "Sales
+ * re...", "Ops late...", "A very lo..." — still ellipsized, but genuinely
+ * readable and distinguishable. So the floor was raised to `LEFT_PANEL_MIN_PX`,
+ * reusing the wide sidebar's own floor constant rather than inventing a second
+ * "180" value, since the two are now the identical width for the identical
+ * reason.
+ *
+ * That reuse is also what gives the drawer the wide sidebar's own dead-zone
+ * mechanism FOR FREE, with no new branch anywhere: `resolveLeftNavigationDrag`'s
+ * drawer branch still folds only below `LEFT_FOLD_THRESHOLD_PX` (140,
+ * unchanged — that comparison runs on the RAW proposal, before this clamp), so
+ * a raw proposal between 140 and 180 no longer folds, and no longer clips at
+ * the raw proposed width either; it simply clamps UP to this floor and holds
+ * there — exactly mirroring `clampWideWidthPx`'s own dead zone, which falls out
+ * of its plain range clamp the same way.
  */
 export function clampDrawerWidthPx(px: number): number {
   if (Number.isNaN(px)) return LEFT_DRAWER_DEFAULT_PX;
-  return clamp(px, LEFT_FOLD_THRESHOLD_PX, LEFT_WIDE_THRESHOLD_PX);
+  return clamp(px, LEFT_PANEL_MIN_PX, LEFT_WIDE_THRESHOLD_PX);
 }
 
 /**
@@ -391,23 +419,30 @@ function restoreWide(layout: LeftNavigationLayout): LeftNavigationLayout {
  *
  * **Arrows resize within a band and perform the semantic transition at its edge.**
  * That edge case is not decoration: an arrow key carries a *relative* step, and
- * both bands are bounded by a dead zone wider than one step, so a purely relative
- * arrow gets stranded at a boundary forever.
+ * every band here is bounded by a dead zone wider than one step, so a purely
+ * relative arrow gets stranded at a boundary forever.
  *
- * Both ends had that failure, and they are exact mirrors:
+ * All three ends had that failure, and they are exact mirrors of each other:
  *
  * - a bare rail is 48px wide and the nearest legal wide width is 180, so a +16
  *   step proposes 64, lands in the sticky band and does nothing;
  * - a wide sidebar at its 180 floor folds only below 140, so a −16 step proposes
- *   164, clamps straight back to 180 and does nothing.
+ *   164, clamps straight back to 180 and does nothing;
+ * - an open drawer at its OWN 180 floor folds only below the identical 140, for
+ *   the identical reason, so a −16 step lands in that same 140–179 dead zone,
+ *   clamps straight back to 180 and does nothing. This third case is NEW: the
+ *   drawer's floor used to sit exactly AT the fold threshold (140), so any step
+ *   below it was already below the threshold too and folded on its own — only
+ *   raising the floor to 180 (see `clampDrawerWidthPx`) separated the two and
+ *   made a dead zone, and therefore a stranding, possible here as well.
  *
- * A *pointer* escapes both because `clientX` is absolute — it keeps travelling
- * until it crosses the threshold — so leaving them relative made the keyboard and
- * pointer disagree over a *sequence* even while agreeing on every single step.
- * Eleven ArrowLeft presses from a 300px sidebar used to sit at 180 forever while
- * the equivalent pointer path folded, with `aria-valuemin: 48` advertised
- * throughout. `Home`/`Shift+Arrow` escaping is not a defence: the W3C splitter
- * pattern makes plain Left/Right the separator's move keys.
+ * A *pointer* escapes all three because `clientX` is absolute — it keeps
+ * travelling until it crosses the threshold — so leaving them relative made the
+ * keyboard and pointer disagree over a *sequence* even while agreeing on every
+ * single step. Eleven ArrowLeft presses from a 300px sidebar used to sit at 180
+ * forever while the equivalent pointer path folded, with `aria-valuemin: 48`
+ * advertised throughout. `Home`/`Shift+Arrow` escaping is not a defence: the
+ * W3C splitter pattern makes plain Left/Right the separator's move keys.
  *
  * So the boundary step performs the transition the band edge implies, and every
  * step inside a band still routes through `resolveLeftNavigationDrag` — the
@@ -431,12 +466,23 @@ export function resolveLeftNavigationKey(
   if (layout.mode === 'rail' && layout.focusedSection === null) {
     return towardWide ? restoreWide(layout) : layout;
   }
-  // A wide sidebar already at its floor: leftward is the fold transition. An open
-  // drawer needs no equivalent — its own floor IS the fold threshold, so an
-  // ordinary step below it already closes it.
+  // A wide sidebar already at its floor: leftward is the fold transition.
   if (layout.mode === 'wide' && !towardWide && layout.wideWidthPx <= LEFT_PANEL_MIN_PX) {
     return foldToRail(layout);
   }
+  // An open drawer now needs the IDENTICAL check, and that need is new: before
+  // the drawer's floor was raised to LEFT_PANEL_MIN_PX to match the wide
+  // sidebar's (see `clampDrawerWidthPx`), the drawer's floor WAS the fold
+  // threshold, so an ordinary relative step below it was already below the
+  // threshold too and folded on its own — no special case required. Now that
+  // the two values differ, a step below the drawer's floor lands IN the
+  // 140–179 dead zone instead of past it, and would strand there forever
+  // exactly like the wide sidebar's floor once did, absent this check. A
+  // 'rail' layout reaching here is never bare (the bare-rail branch above
+  // already returned), so `focusedSection` is guaranteed non-null.
+  if (layout.mode === 'rail' && !towardWide && layout.drawerWidthPx <= LEFT_PANEL_MIN_PX) {
+    return { ...layout, focusedSection: null };
+  }
   const step = event.shiftKey ? LEFT_NAV_LARGE_STEP_PX : LEFT_NAV_STEP_PX;
   return resolveLeftNavigationDrag(layout, leftNavigationWidthPx(layout) + (towardWide ? step : -step));
 }
@@ -524,12 +570,284 @@ export interface LeftNavigationSeparatorAria {
   readonly valueNow: number;
 }
 
-export function leftNavigationSeparatorAria(layout: LeftNavigationLayout): LeftNavigationSeparatorAria {
+/**
+ * `maxNavigationTotalPx` is optional and, when given, tightens `valueMax` to
+ * whatever the viewport currently allows — see `clampLeftNavigationToMaximumTotal`
+ * below, which computes the layout this ceiling must agree with. Omitted (or a
+ * non-finite/non-positive value, which cannot be a real viewport budget), the
+ * ceiling is `LEFT_PANEL_MAX_PX` exactly as before phase 3 — this parameter is
+ * additive and every existing caller (there is still none in production, but the
+ * unit tests below stand in for one) keeps its prior behaviour unconditionally.
+ *
+ * `valueMax` is floored at `valueMin` (`LEFT_RAIL_PX`) and `valueNow` is
+ * clamped into `[valueMin, valueMax]`, so the ARIA invariant `valueMin <=
+ * valueNow <= valueMax` holds for ANY budget, including one pathologically
+ * below the rail's own width or below the current mode's own floor. #487's
+ * planned production UI never reaches that range in practice — see
+ * `clampLeftNavigationToMaximumTotal`'s own comment for the arithmetic showing
+ * the realistic budget floor sits around 280px, well above every mode's own
+ * minimum — so this is defensive robustness on a PUBLIC pure helper rather
+ * than a behaviour change for any realistic budget: neither clamp does
+ * anything when `maxNavigationTotalPx` is omitted or at least `LEFT_RAIL_PX`.
+ */
+export function leftNavigationSeparatorAria(
+  layout: LeftNavigationLayout, maxNavigationTotalPx?: number,
+): LeftNavigationSeparatorAria {
+  const valueMin = LEFT_RAIL_PX;
+  const uncappedMax = Number.isFinite(maxNavigationTotalPx) && (maxNavigationTotalPx as number) > 0
+    ? Math.min(LEFT_PANEL_MAX_PX, maxNavigationTotalPx as number)
+    : LEFT_PANEL_MAX_PX;
+  const valueMax = Math.max(valueMin, uncappedMax);
+  // Normalized, so a caller holding a layout with a non-finite width cannot
+  // publish `aria-valuenow="NaN"` to assistive technology; clamped into the
+  // final [valueMin, valueMax] range so an occupied width that exceeds a
+  // pathologically small budget cannot publish an out-of-range valueNow either.
+  const rawValueNow = leftNavigationWidthPx(normalizeLeftNavigationLayout(layout));
+  const valueNow = clamp(rawValueNow, valueMin, valueMax);
+  return { valueMin, valueMax, valueNow };
+}
+
+/**
+ * The centre SQL/results surface's documented minimum width. Phase 4's
+ * viewport-resize handling subtracts this (plus the resize separator's own
+ * width and any docked panel) from the viewport to get the budget it hands to
+ * `clampLeftNavigationToMaximumTotal` below — this module does not read the
+ * viewport itself, so the constant lives here purely so the UI layer has one
+ * source for it rather than a second copy of the number.
+ */
+export const LEFT_CENTRE_MIN_PX = 480;
+
+/**
+ * Shrink `layout`'s CURRENT mode's own panel width so the navigation's total
+ * occupied width (`leftNavigationWidthPx`) fits inside `maxNavigationTotalPx`,
+ * without ever changing `mode`.
+ *
+ * This is a narrower job than the mode reducer above. #487 phase 4 is where a
+ * viewport too small for the centre surface's own minimum gets to fold a wide
+ * sidebar to rail or close an open drawer — a MODE decision, driven by the
+ * viewport crossing a breakpoint, not by a pointer or a key. Doing any of that
+ * here would duplicate `resolveLeftNavigationDrag`'s job with a second,
+ * viewport-shaped entry point, and the two would disagree about hysteresis the
+ * first time someone edited only one of them. So this function answers a
+ * strictly smaller question — "shrink the width THIS mode already has, inside
+ * the band this mode can already legally occupy" — and leaves whether to fold
+ * or close entirely to phase 4.
+ *
+ * That narrower scope is also why a budget below the mode's own floor is
+ * "best effort" rather than an error: `wide`'s floor is `LEFT_PANEL_MIN_PX`
+ * (180) and a bare `rail`'s occupied width is the fixed `LEFT_RAIL_PX` (48,
+ * nothing to shrink), so the only floor this function can be asked to violate
+ * is `LEFT_PANEL_MIN_PX` itself — the wide sidebar's floor AND, since #487
+ * phase 3's real-browser pass raised the drawer's floor to match (see
+ * `clampDrawerWidthPx`), an open drawer's floor too. Returning the floor
+ * anyway — rather than throwing, or returning something outside every mode's
+ * legal range — keeps the result always renderable; a caller that actually
+ * needs the navigation narrower than what a mode CAN render must change the
+ * mode, which is phase 4's job, not this function's.
+ *
+ * In practice that floor path is unreachable above the existing mobile
+ * breakpoint, so it is defensive rather than a state phase 4 has to design
+ * for today. `MOBILE_BREAKPOINT_PX` (`state.ts`) is 768, the resize separator
+ * that will subtract from the viewport is 7px wide (`.col-resize` in
+ * `styles.css`), and `LEFT_CENTRE_MIN_PX` above is 480 — so at the smallest
+ * viewport this function is ever consulted at (768px wide, the boundary where
+ * mobile's own two-pane layout stops standing in), the budget phase 4 would
+ * pass is `768 − 480 − 7 = 281`. That clears the wide sidebar's 180 floor with
+ * 101px to spare, and clears an open drawer's `281 − LEFT_RAIL_PX(48) = 233`
+ * against its own (now identical) 180 floor with 53px to spare — down from the
+ * 93px this margin had against the drawer's original 140 floor, but still
+ * comfortably positive. Below 768 the mobile layout replaces the rail and
+ * drawer entirely (`effectiveLeftNavigationLayout` above), so this function is
+ * never consulted there either.
+ *
+ * `maxNavigationTotalPx` itself is a plain number budget, not a viewport: a
+ * non-finite or NEGATIVE value (a corrupt measurement, or a caller that has
+ * not measured yet) is treated as "no additional constraint" rather than
+ * propagated into a NaN or Infinity output. Zero is not in that list — it is
+ * an extreme but legitimate budget, and clamping into either band's own range
+ * floors it exactly like any other too-small value.
+ */
+export function clampLeftNavigationToMaximumTotal(
+  layout: LeftNavigationLayout, maxNavigationTotalPx: number,
+): LeftNavigationLayout {
+  const normalized = normalizeLeftNavigationLayout(layout);
+  // Zero is a legitimate (if extreme) budget — clamping into either band's own
+  // range floors it correctly. Only a NEGATIVE or non-finite value cannot mean
+  // a real width, so those fall back to "no additional constraint" rather than
+  // being clamped into a nonsensical floor.
+  const budget = Number.isFinite(maxNavigationTotalPx) && maxNavigationTotalPx >= 0
+    ? maxNavigationTotalPx
+    : Infinity;
+  if (normalized.mode === 'wide') {
+    // The wide sidebar IS the total, so the budget applies to it directly.
+    const maxWideWidthPx = clamp(budget, LEFT_PANEL_MIN_PX, LEFT_PANEL_MAX_PX);
+    return normalized.wideWidthPx <= maxWideWidthPx
+      ? normalized
+      : { ...normalized, wideWidthPx: maxWideWidthPx };
+  }
+  if (normalized.focusedSection === null) return normalized; // bare rail: fixed width, nothing to shrink.
+  // An open drawer sits BESIDE the rail, so its own budget is the total minus
+  // the rail — mirroring `resolveLeftNavigationDrag`'s `panelPx` derivation.
+  // The floor is LEFT_PANEL_MIN_PX, matching `clampDrawerWidthPx` — NOT
+  // LEFT_FOLD_THRESHOLD_PX, which is a fold POINT for the raw drag proposal,
+  // not a legal width this clamp should ever produce.
+  const maxDrawerWidthPx = clamp(budget - LEFT_RAIL_PX, LEFT_PANEL_MIN_PX, LEFT_WIDE_THRESHOLD_PX);
+  return normalized.drawerWidthPx <= maxDrawerWidthPx
+    ? normalized
+    : { ...normalized, drawerWidthPx: maxDrawerWidthPx };
+}
+
+/**
+ * A resize SESSION — the drag/keyboard-resize memory phase 3 needs and a plain
+ * continuously-advancing width field cannot provide.
+ *
+ * **Why not just keep overwriting a remembered width on every frame?** That was
+ * tried and is exactly the bug this module's own
+ * "restore memory is sampling-dependent" test (above) already pins for the OLD
+ * design: which width ends up remembered depends on which intermediate pointer
+ * samples the browser happened to deliver, because one field was doing duty as
+ * both "the width currently on screen" and "the width to restore later". A
+ * session separates those two questions by keeping THREE layouts, not one:
+ *
+ * - `preferredAtStart` — the persisted preference as of when the gesture began.
+ *   This is the memory source `commitLeftNavigationResize` reconstructs from,
+ *   and it is captured ONCE, so no intermediate frame can overwrite it.
+ * - `proposed` — the latest RAW reducer proposal, BEFORE the viewport's
+ *   maximum-total clamp runs. This is the OTHER memory source
+ *   `commitLeftNavigationResize` reads: comparing the raw proposal against
+ *   `preferredAtStart` is what lets a restore command commit the user's actual
+ *   remembered width even while a narrow viewport cannot render it in full —
+ *   see the bug history below.
+ * - `effective` — `proposed` after `clampLeftNavigationToMaximumTotal` has run
+ *   against the current viewport budget. This is what gets rendered and
+ *   reported as the gesture continues; it is not memory, and
+ *   `commitLeftNavigationResize` never reads it for its width decision.
+ *
+ * **A real bug this shape fixes, not a hypothetical one.** An earlier version
+ * of this session compared `effective` against an `effectiveAtStart` snapshot —
+ * i.e. two POST-CLAMP layouts — to decide whether a band's width had "changed".
+ * That is wrong whenever a restore command (`Home`, `End`, or a bare-rail
+ * `ArrowRight`) runs while the clamp is active: starting at a bare rail,
+ * `effectiveAtStart.wideWidthPx` passes the dormant preferred width straight
+ * through unclamped (there is nothing to clamp — 'wide' is not the rendered
+ * mode yet), so it read as the full preference, e.g. 420. `End` then proposed
+ * exactly 420 back — correct — but if the viewport only allows 313, `effective`
+ * rendered 313, `effective.wideWidthPx (313) !== effectiveAtStart.wideWidthPx
+ * (420)` read as true, and the old logic committed 313: a transient,
+ * viewport-driven value the user never asked to keep, silently overwriting
+ * their real preference. Comparing the RAW `proposed` (420) against
+ * `preferredAtStart` (420) instead finds no change, because
+ * `clampLeftNavigationToMaximumTotal` never touches `mode` — so `mode`/
+ * `focusedSection` read identically off `proposed` or `effective`, and only the
+ * WIDTH needs the pre/post-clamp distinction the session now keeps.
+ *
+ * **`commitLeftNavigationResize`'s table, restated as one rule:** only commit a
+ * band's width if that band is the one the session's FINAL `proposed` layout is
+ * in, AND its raw proposed width actually differs from `preferredAtStart`'s.
+ * Every other case — a dormant band, a fold-through to bare rail, a
+ * click-and-release with no movement — preserves `preferredAtStart` for that
+ * band UNCONDITIONALLY. Two consequences fall out of that one rule rather than
+ * needing their own case:
+ *
+ * 1. **The dormant-band fix.** A gesture that resizes the drawer and THEN
+ *    crosses into wide mode must not commit the drawer's mid-gesture width,
+ *    because the drawer is no longer the band the FINAL `proposed` is in —
+ *    `drawerChanged` requires `proposed.mode === 'rail'`, which is false once
+ *    the session ends at wide, so the drawer memory falls through to
+ *    `preferredAtStart.drawerWidthPx` untouched regardless of what the
+ *    drawer's transient width was mid-drag.
+ * 2. **Preferred wins over a viewport clamp on ANY commit, not only a
+ *    fold-through.** Because the comparison is always RAW-proposed vs
+ *    preferred, never rendered-effective vs anything, a maximized 420px
+ *    preference that a narrow viewport can only render at a clamped 313px
+ *    still commits the user's honest 420 whenever the session ends without an
+ *    actual new proposal for that band — restoring it in full the next time
+ *    there is room, exactly as #487's "a viewport clamp must never downgrade a
+ *    stored preference" requires.
+ *
+ * `Home`/`End`/a bare-rail `ArrowRight` restore need no special case either:
+ * they are restore commands, so the RAW `proposed` layout they produce
+ * typically already equals `preferredAtStart`'s remembered width for the band
+ * they restore, which is exactly the "nothing changed" shape the general rule
+ * preserves correctly.
+ *
+ * `advanceLeftNavigationResize` performs the viewport clamp ITSELF now (taking
+ * the raw proposal and the current budget as arguments), rather than asking the
+ * caller to clamp first and hand in an already-clamped layout — a future
+ * caller (the pointer/keyboard handler a later phase-3 step builds, which does
+ * not exist yet) cannot forget the clamp, because it is part of this
+ * function's contract rather than caller discipline. The MODE arithmetic
+ * itself stays out of this module either way — `advanceLeftNavigationResize`
+ * still does not call `resolveLeftNavigationDrag`/`resolveLeftNavigationKey`;
+ * the caller runs the proposal through those first, then hands the raw result
+ * here alongside the viewport budget. Session bookkeeping and layout
+ * arithmetic stay two separate concerns, so the arithmetic keeps its one
+ * implementation.
+ */
+export interface LeftNavigationResizeSession {
+  /** The persisted preference as of session start — the memory source every
+   *  commit is reconstructed from, band by band. */
+  readonly preferredAtStart: LeftNavigationLayout;
+  /** The latest RAW reducer proposal, BEFORE the viewport clamp — the other
+   *  memory source `commitLeftNavigationResize` reads from. */
+  readonly proposed: LeftNavigationLayout;
+  /** The latest proposal AFTER the viewport clamp — what is rendered and
+   *  reported right now. Never read by the commit decision. */
+  readonly effective: LeftNavigationLayout;
+}
+
+/** Begin a resize session: `proposed` starts out equal to `preferred` (nothing
+ *  has moved yet), and `effective` is `preferred` clamped to the viewport
+ *  budget at hand — mirroring what a caller would render before any gesture
+ *  begins. */
+export function beginLeftNavigationResize(
+  preferred: LeftNavigationLayout, maxNavigationTotalPx: number,
+): LeftNavigationResizeSession {
   return {
-    valueMin: LEFT_RAIL_PX,
-    valueMax: LEFT_PANEL_MAX_PX,
-    // Normalized, so a caller holding a layout with a non-finite width cannot
-    // publish `aria-valuenow="NaN"` to assistive technology.
-    valueNow: leftNavigationWidthPx(normalizeLeftNavigationLayout(layout)),
+    preferredAtStart: preferred,
+    proposed: preferred,
+    effective: clampLeftNavigationToMaximumTotal(preferred, maxNavigationTotalPx),
   };
 }
+
+/**
+ * Advance a session to a new RAW proposal. The caller has already run the
+ * layout through `resolveLeftNavigationDrag`/`resolveLeftNavigationKey` to
+ * produce `proposedLayout`; this function applies the viewport clamp itself
+ * (see this section's block comment for why the clamp lives here rather than
+ * in the caller) and records both the raw proposal and its clamped `effective`
+ * counterpart. Returns the SAME session when neither changes by reference, so
+ * a caller can use identity to skip a repaint exactly as the mode reducers do.
+ */
+export function advanceLeftNavigationResize(
+  session: LeftNavigationResizeSession, proposedLayout: LeftNavigationLayout, maxNavigationTotalPx: number,
+): LeftNavigationResizeSession {
+  const effective = clampLeftNavigationToMaximumTotal(proposedLayout, maxNavigationTotalPx);
+  return proposedLayout === session.proposed && effective === session.effective
+    ? session
+    : { ...session, proposed: proposedLayout, effective };
+}
+
+/**
+ * Reconstruct the `LeftNavigationLayout` to persist from a resize session — see
+ * this section's block comment above for the rule and why it is shaped this
+ * way. `mode` and `focusedSection` always follow wherever the session ended
+ * (a legitimate mode transition, not a width memory question) — read off
+ * `effective`, since `clampLeftNavigationToMaximumTotal` never changes `mode`,
+ * so `effective.mode`/`effective.focusedSection` agree with `proposed`'s
+ * exactly. Only the two WIDTHS get the preserve-vs-commit treatment, band by
+ * band, and that decision is made against the RAW `proposed` width, never
+ * `effective`'s — the fix this function exists for.
+ */
+export function commitLeftNavigationResize(session: LeftNavigationResizeSession): LeftNavigationLayout {
+  const { preferredAtStart, proposed, effective } = session;
+  const wideChanged = proposed.mode === 'wide' && proposed.wideWidthPx !== preferredAtStart.wideWidthPx;
+  const drawerChanged = proposed.mode === 'rail' && proposed.focusedSection !== null
+    && proposed.drawerWidthPx !== preferredAtStart.drawerWidthPx;
+  return normalizeLeftNavigationLayout({
+    mode: effective.mode,
+    focusedSection: effective.focusedSection,
+    wideWidthPx: wideChanged ? proposed.wideWidthPx : preferredAtStart.wideWidthPx,
+    drawerWidthPx: drawerChanged ? proposed.drawerWidthPx : preferredAtStart.drawerWidthPx,
+  });
+}
diff --git a/src/env.types.ts b/src/env.types.ts
index 31ea8532..9d6fc8b5 100644
--- a/src/env.types.ts
+++ b/src/env.types.ts
@@ -50,6 +50,13 @@ export interface CreateAppEnv {
   isSecureContext?: boolean;
   build?: string;
   matchMedia?: ((query: string) => MediaQueryList) | null;
+  /** #487 phase 3 — shell-width observer seam, injected exactly like
+   *  `matchMedia` above so tests can drive it deterministically. Defaults to a
+   *  real `ResizeObserver`-backed implementation when the platform has one
+   *  (see `src/ui/app-shell.ts`'s `AppShellDeps.observeElementWidth` for the
+   *  contract this feeds and its "omitted = feature doesn't run" precedent),
+   *  else `undefined`. */
+  observeElementWidth?: (element: Element, callback: (widthPx: number) => void) => () => void;
   /** #343 §5: cross-tab invalidation channel factory — mirrors the matchMedia/
    *  showSaveFilePicker "capability or null" precedent. Defaults to a real
    *  `new BroadcastChannel(name)` when the platform has it, else `null` (the
diff --git a/src/state.ts b/src/state.ts
index 9702cf91..a1072eab 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -41,7 +41,7 @@ import {
   sectionForSidePanelKey, sidePanelKeyFor,
 } from './core/left-nav-layout.js';
 import type {
-  LeftNavigationMode, LeftNavigationSection, SidePanelKey,
+  LeftNavigationMode, LeftNavigationSection, LowerNavigationSection, SidePanelKey,
 } from './core/left-nav-layout.js';
 
 // ── Persisted-data types (schema-generated) ─────────────────────────────────
@@ -445,7 +445,13 @@ export interface AppState {
   workspaceId: string;
   /** Immutable canonical URL key for the active workspace. */
   workspaceKey: string;
-  libraryFilter: string;
+  /** #487 phase 3: each lower-navigation section (Library, History) keeps its
+   *  OWN search text, independently preserved across every switch between them
+   *  — switching no longer clears anything. Deliberately NOT a signal (see
+   *  `core/dashboard-tree-ui-state.ts`'s comment): a signal here would rebuild
+   *  the search input on every keystroke, and `renderList`-only re-renders is
+   *  how focus/caret survive typing today. */
+  lowerNavigationFilters: Record<LowerNavigationSection, string>;
   shortcutsOpen: Signal<boolean>;
   /**
    * #487 — the desktop left navigation's explicit semantic mode: the established
@@ -815,9 +821,10 @@ export function createState(read: StateReader = { loadJSON, loadStr }): AppState
     dashboard: null,
     workspaceId: mintWorkspaceId(),
     workspaceKey: deriveWorkspaceKey(initialWorkspaceName),
-    // Transient search text for the Library/History side panel (session-only,
-    // cleared on a tab switch); never persisted.
-    libraryFilter: '',
+    // Transient search text for the Library/History side panel (session-only;
+    // never persisted). #487 phase 3: each section keeps its own slot, preserved
+    // across every switch between them.
+    lowerNavigationFilters: { library: '', history: '' },
     // Whether the keyboard-shortcuts modal is open (shortcuts.js). Session-only;
     // a signal for consistency with the rest of the state (no reactive reader
     // today — shortcuts.js drives its own mount/unmount).
diff --git a/src/styles.css b/src/styles.css
index e65df5ff..22a8b5a0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -154,6 +154,14 @@ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
   --lh-data: 1.45;          /* mono data and diagnostics */
   --lh-body: 1.5;           /* prose */
   --lh-editor: 22px;        /* CodeMirror's fixed line box */
+
+  /* #487 phase 3 — the compact left-navigation rail's fixed width. Matches
+     `LEFT_RAIL_PX` in `core/left-nav-layout.ts` exactly (that module's own
+     doc comment explains why it is a mode, not a resizable dimension) — one
+     source for the number would be nicer still, but the pure layout module
+     cannot reach into a stylesheet, so the two are kept in agreement here by
+     being reviewed together rather than computed from one another. */
+  --left-rail-px: 48px;
 }
 
 /* ------------ KPI panel ------------ */
@@ -874,11 +882,63 @@ h1, h2, h3, h4, h5, h6 {
      the first consumer. */
   container-type: inline-size; container-name: sidebar;
 }
+/* #487 phase 3 — the compact icon rail, `.main-row`'s first child. Fixed
+   width (`--left-rail-px`) — it never resizes, since the rail IS the mode,
+   not a dimension (`core/left-nav-layout.ts`'s own `LEFT_RAIL_PX` doc
+   comment). `[hidden]` needs the explicit override for the same reason
+   `.query-host[hidden]`/`.nav-section-host[hidden]` already carry one: a
+   class rule's `display: flex` beats the UA stylesheet's bare `[hidden]`. */
+.left-rail {
+  flex: 0 0 var(--left-rail-px);
+  display: flex; flex-direction: column;
+  background: var(--bg-side);
+}
+.left-rail[hidden] { display: none; }
+.left-rail-btn {
+  width: 100%; height: var(--left-rail-px);
+  display: flex; align-items: center; justify-content: center;
+  border: none; background: transparent; color: var(--fg-mute); cursor: pointer;
+  padding: 0;
+}
+.left-rail-btn:hover { color: var(--fg); background: var(--bg-hover); }
+.left-rail-btn:focus-visible { outline: none; box-shadow: var(--ring-nav); }
+/* The active-drawer indicator — `left-rail.ts` uses `aria-expanded` as the
+   ONLY active-state hook, so this is the one place that state is styled. */
+.left-rail-btn[aria-expanded="true"] {
+  color: var(--accent-text); background: var(--bg-highlight);
+}
+/* #487 phase 3 — the focused drawer's own heading, `.sidebar`'s first child.
+   Shown only while `.sidebar` presents as the drawer (`data-nav-mode` rules
+   below toggle it alongside everything else that mode implies); `[hidden]`
+   needs the explicit override for the same reason as every other host in
+   this file that a class rule could otherwise re-show. */
+.left-nav-title {
+  padding: 10px 12px 4px;
+  font-size: var(--text-micro); font-weight: var(--fw-semibold);
+  letter-spacing: .05em; text-transform: uppercase; color: var(--fg-faint);
+}
+.left-nav-title[hidden] { display: none; }
+/* #487 phase 3 — `.sidebar` is RE-PRESENTED via `data-nav-mode` rather than
+   moved or duplicated (`app-shell.ts`'s `applyEffectiveLeftNavigationLayout`
+   is the sole writer of the attribute); each rule below gives an EXPLICIT
+   `display` for both the rail and the sidebar in that mode, so nothing here
+   depends on the bare `[hidden]`/class-rule precedence footgun the comments
+   above already call out for other hosts. */
+.main-row[data-nav-mode="wide"] .left-rail { display: none; }
+.main-row[data-nav-mode="wide"] .sidebar { display: flex; }
+.main-row[data-nav-mode="rail"] .left-rail { display: flex; }
+.main-row[data-nav-mode="rail"] .sidebar { display: none; }
+.main-row[data-nav-mode="drawer"] .left-rail { display: flex; }
+.main-row[data-nav-mode="drawer"] .sidebar { display: flex; }
 .col-resize, .row-resize {
   position: relative; flex-shrink: 0; z-index: 1;
   background: transparent;
 }
 .col-resize { width: 7px; cursor: col-resize; }
+/* #487 phase 3: the handle is now genuinely keyboard-operable (`tabindex="0"`,
+   Left/Right/Home/End — `ui/left-nav-separator.ts`) where before it was a
+   mouse-only drag surface, so it needs a real focus indicator. */
+.col-resize:focus-visible { outline: none; box-shadow: var(--ring-nav); }
 .row-resize {
   height: 7px; cursor: row-resize;
 }
@@ -918,9 +978,23 @@ h1, h2, h3, h4, h5, h6 {
 
 /* ------------ side panes ------------ */
 .side-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+/* #487 phase 3 — `app-shell.ts`'s `applyEffectiveLeftNavigationLayout` sets
+   `.hidden` on `schemaPane`/`savedPane` (both `.side-pane`) so a rail-mode
+   focused drawer shows exactly one of them, never both. `[hidden]` needs the
+   explicit override here for the same reason `.query-host[hidden]`,
+   `.dashboard-host[hidden]`, `.nav-section-host[hidden]`, `.left-rail[hidden]`
+   and `.left-nav-title[hidden]` already carry one: a class rule's
+   `display: flex` beats the UA stylesheet's bare `[hidden]`, so without this a
+   pane set `hidden` would keep rendering — both panes visible at once inside a
+   drawer meant to show only one. */
+.side-pane[hidden] { display: none; }
 
 /* ------------ saved + history ------------ */
 .side-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
+/* Same footgun, same fix — `app.dom.upperRoleTabs`/`app.dom.savedTabsRow`
+   (both `.side-tabs`) are hidden by the same function whenever a wide-only
+   switcher has no drawer to switch inside. */
+.side-tabs[hidden] { display: none; }
 .side-tab {
   flex: 1; height: 30px;
   border: none; background: transparent;
@@ -1008,7 +1082,10 @@ h1, h2, h3, h4, h5, h6 {
 .side-count { color: var(--fg-faint); font-weight: var(--fw-regular); }
 /* #552: at a narrow sidebar (bottom quarter of the 180–420px drag range —
    `LEFT_PANEL_MIN_PX`/`LEFT_PANEL_MAX_PX` in `src/core/left-nav-layout.ts`,
-   applied to the 'col' drag axis by `splitters.ts`'s `clampWideWidthPx`), both tab rows
+   governing the wide sidebar's own width — #487 phase 3 moved that gesture off
+   `splitters.ts`'s old bare 'col' clamp and onto `ui/left-nav-separator.ts`'s
+   mode reducer/resize session, which the app shell applies through
+   `app-shell.ts`'s `applyEffectiveLeftNavigationLayout`), both tab rows
    (`.upper-role-tabs`'s Databases/Dashboard and this row's Library/History)
    drop to text-only labels: the icon, and `.side-count`'s "· N" (the count AND
    its separator dot share one text node, so hiding the element hides both).
@@ -1719,17 +1796,22 @@ body.detached-tab .graph-overlay-panel {
 }
 /* A hidden host contributes no layout, so the exposed one owns the whole pane —
    but it keeps its DOM. What that preserves differs by pane, and the distinction
-   matters to #487 phase 3:
+   matters to #487:
 
    - UPPER (Databases | Dashboards): everything, across a role switch. Each role
      owns its own search and expansion state, so switching only flips `hidden` and
      the schema search text, lazily loaded columns and scroll all survive (#426).
-   - LOWER (Library | History): NOT across a section switch. The switcher clears
-     the shared `libraryFilter`, and activating the destination repaints its search
-     box and list. Per-section lower search state is phase 3's, not solved here.
-   - BOTH, across a MOVE between containers (phase 3's wide sidebar ↔ focused
-     drawer): everything, because moving an element repaints nothing. That is the
-     guarantee the persistent hosts exist for. */
+   - LOWER (Library | History): everything too, across a section switch. Phase 3
+     step 3 replaced the one shared `libraryFilter` with per-section
+     `lowerNavigationFilters` (`state.ts`), and both sections now render
+     UNCONDITIONALLY (`app-shell.ts`'s reactive effects) rather than only the
+     active one — so a switch flips `hidden` alone, exactly like the upper pane.
+   - BOTH, across a phase-3 mode change (wide sidebar ↔ rail's focused drawer):
+     everything, because `.sidebar` is RE-PRESENTED via `data-nav-mode`
+     (`app-shell.ts`'s `applyEffectiveLeftNavigationLayout`), never moved between
+     containers or rebuilt — the four hosts below stay exactly where they are,
+     and only which one is exposed (plus the sidebar's own presentation) changes.
+     That is the guarantee the persistent hosts exist for. */
 .nav-section-host[hidden] { display: none; }
 
 /* ------------ Dashboard hierarchy tree (#426) ------------ */
@@ -3225,6 +3307,21 @@ table.res-table tbody tr:hover td.idx { background: var(--bg-hover); }
   }
   .mnav-badge:empty { display: none; }
 
+  /* #487 phase 3 — belt-and-braces: the desktop rail/focused-drawer
+     presentation must not reach a phone even if `data-nav-mode` ends up
+     stamped with a stale desktop value (`effectiveLeftNavigationLayout(_,
+     true)` already projects to wide/no-drawer in JS — this is CSS not
+     depending on that having run correctly). `.left-rail` has no mobile
+     "sometimes shown" case at all, so it is unconditionally hidden;
+     `.sidebar` is restated at the SAME specificity as the `[data-nav-mode]`
+     rules above (declared textually after them) rather than `!important`,
+     so every mobile view/tab rule below — which intentionally hides the
+     sidebar for Editor/Results/a Dashboard surface, or the non-selected
+     segmented pane — still wins exactly as it already does today. */
+  .left-rail { display: none !important; }
+  .main-row[data-nav-mode="rail"] .sidebar,
+  .main-row[data-nav-mode="drawer"] .sidebar { display: flex; }
+
   /* ---- Full-screen view switching (main-row[data-mobile-view]) ---- */
   /* Tables → sidebar fills; workbench hidden. Sidebar is a normal flow child
      here (not the desktop resizable column), full width. */
diff --git a/src/ui/app-shell.ts b/src/ui/app-shell.ts
index 2fa9d326..7af8f25c 100644
--- a/src/ui/app-shell.ts
+++ b/src/ui/app-shell.ts
@@ -24,7 +24,7 @@
 //
 // `deps.app` is kept for the same reasons `mountWorkbenchShell` keeps it
 // (see that module's own header comment): the render-module pass-through
-// (renderSchema/renderSavedHistory/renderLibraryTitle all
+// (renderSchema/renderLowerTabs/renderLibrarySection/renderLibraryTitle all
 // still take the full `App`), and the `app.dom` reset + population other
 // modules read `app.dom.*` off of directly.
 
@@ -32,27 +32,46 @@ import { h } from './dom.js';
 import { Icon } from './icons.js';
 import { MOBILE_BREAKPOINT_PX } from '../state.js';
 import type { AppState as State } from '../state.js';
-import { effect } from '@preact/signals-core';
+import { effect, untracked } from '@preact/signals-core';
 import { renderSchema } from './schema.js';
 import { buildSidebarUpper, renderUpperRoleTabs } from './sidebar-upper.js';
-import { buildNavSectionRegistry, sectionForSidePanelKey } from './nav-sections.js';
+import { buildNavSectionRegistry, sectionForSidePanelKey, NAV_SECTION_META } from './nav-sections.js';
 import type { NavSectionPane } from './nav-sections.js';
 import { renderDashboardTree, cancelDashboardTreeClicks } from './dashboard-tree.js';
-import { renderSavedHistory } from './saved-history.js';
+import { renderLowerTabs, renderLibrarySection, renderHistorySection } from './saved-history.js';
 import { renderLibraryTitle } from './file-menu.js';
 import { applyConnectionStatus } from './app-header.js';
-import type { DragCtx, DragRect, DragStartEvent, SplitterAxis } from './splitters.js';
+import type { DragCtx, DragRect, DragStartEvent } from './splitters.js';
 import { startDrag } from './splitters.js';
+import { buildLeftRail } from './left-rail.js';
+import { mountLeftNavSeparator } from './left-nav-separator.js';
+import {
+  clampLeftNavigationToMaximumTotal, effectiveLeftNavigationLayout, isLeftNavigationSection,
+  LEFT_CENTRE_MIN_PX,
+} from '../core/left-nav-layout.js';
+import type { LeftNavigationLayout, LeftNavigationSection } from '../core/left-nav-layout.js';
+import { readLeftNavigationLayout, toggleFocusedSection } from '../application/left-nav.js';
 import type { App } from './app.types.js';
 import type { SchemaCatalogService } from '../application/schema-catalog-service.js';
 import type { AppPreferences, PreferenceKey } from '../application/app-preferences.js';
 
+/** #487 phase 3 — the stable DOM ids the rail's four launchers address via
+ *  `aria-controls`, and the focused drawer's own title via `aria-labelledby`.
+ *  Defined once here since this module is the sole place that builds both the
+ *  sidebar/drawer element and the rail that points at it. */
+const LEFT_NAV_DRAWER_ID = 'left-nav-drawer';
+const LEFT_NAV_TITLE_ID = 'left-nav-title';
+/** `.col-resize { width: 7px; }` in styles.css — the resize separator's own
+ *  width, which the navigation's total pixel budget must also exclude
+ *  (`getMaxNavigationTotalPx` below). */
+const LEFT_NAV_SEPARATOR_WIDTH_PX = 7;
+
 /** `mountAppShell`'s dependency bag. See this file's header comment for the
  *  `app` field's rationale — every other field is read directly by this
  *  shell's own logic, never through `app.*`. */
 export interface AppShellDeps {
   /** Kept ONLY for: the render-module pass-through (renderSchema/
-   *  renderSavedHistory/renderLibraryTitle), and the
+   *  renderLowerTabs/renderLibrarySection/renderLibraryTitle), and the
    *  `app.dom` reset + population (other modules read `app.dom.*`
    *  directly — see the header comment). */
   app: App;
@@ -62,6 +81,22 @@ export interface AppShellDeps {
   catalog: Pick<SchemaCatalogService, 'loadSchema' | 'loadReference'>;
   prefs: Pick<AppPreferences, 'save'>;
   matchMedia: ((query: string) => MediaQueryList) | null;
+  /**
+   * #487 phase 3 — an injected shell-width observer seam, mirroring the
+   * `matchMedia` seam above: a raw `ResizeObserver` construction here would add
+   * an untestable branch under this file's 100/95/90/100 coverage floor. When
+   * provided, called ONCE with `.main-row` and a callback that re-derives and
+   * re-applies the effective left-navigation layout whenever the row's own
+   * content width changes — keeping the centre-content minimum honored across
+   * a plain browser-window resize, not only a separator drag. Returns a
+   * disposer this shell's own `dispose()` calls.
+   *
+   * Omitted (the default in every test and any caller that doesn't pass one):
+   * no live-resize reclamping runs, nothing throws, and the rest of the shell
+   * works normally — the same "feature simply doesn't run" contract
+   * `matchMedia: null` already has here.
+   */
+  observeElementWidth?: (element: Element, callback: (widthPx: number) => void) => () => void;
   updateBanner(): void;
   startDrag: typeof startDrag;
 }
@@ -106,7 +141,7 @@ export interface AppShellHandle {
 export function mountAppShell(deps: AppShellDeps): AppShellHandle {
   const {
     app, root, document: doc, state, catalog, prefs, matchMedia, updateBanner,
-    startDrag: doStartDrag,
+    startDrag: doStartDrag, observeElementWidth,
   } = deps;
   doc.documentElement.setAttribute('data-theme', state.theme);
   doc.documentElement.setAttribute('data-density', state.density);
@@ -155,20 +190,33 @@ export function mountAppShell(deps: AppShellDeps): AppShellHandle {
   const savedPane = h('div', { class: 'side-pane saved-pane', style: { flex: '1', minHeight: '0' } },
     app.dom.savedTabsRow, ...hostsIn('lower'));
 
-  const sidebar = h('div', { class: 'sidebar', style: { width: state.sidebarPx + 'px' } });
-  // Only 'col' (sidebar width) and 'sideRow' (schema/saved split) run through
-  // this ctx — the editor/results 'row' splitter is workbench-shell's own,
-  // over elements this shell has no business touching (a Dashboard-only
-  // surface may one day mount here with neither `editorRegion` nor
-  // `resultsRegion` present at all).
-  const rectFor = (axis: SplitterAxis): DragRect => (axis === 'sideRow' ? sidebar.getBoundingClientRect() : {});
+  // #487 phase 3: `.sidebar` is RE-PRESENTED, never moved or duplicated — the
+  // same element renders as the wide two-pane sidebar OR the rail's focused
+  // drawer depending on `data-nav-mode` (`applyEffectiveLeftNavigationLayout`
+  // below is the sole writer of that attribute and everything it implies). The
+  // stable `id` is what the rail's four launchers address via
+  // `aria-controls` — `buildLeftRail`'s `drawerElementId` below must name this
+  // exact string.
+  const sidebar = h('div', { class: 'sidebar', id: LEFT_NAV_DRAWER_ID, style: { width: state.sidebarPx + 'px' } });
+  // The focused drawer's own heading — shown ONLY in drawer mode (one section,
+  // one name), so `.sidebar`'s `aria-labelledby` only ever points at it while
+  // drawer mode is active (see `applyEffectiveLeftNavigationLayout`).
+  const leftNavTitle = app.dom.leftNavTitle = h('div', { class: 'left-nav-title', id: LEFT_NAV_TITLE_ID, hidden: true });
+  // Only 'sideRow' (schema/saved split) ever runs through this ctx — the
+  // editor/results 'row' splitter is workbench-shell's own, over elements this
+  // shell has no business touching (a Dashboard-only surface may one day mount
+  // here with neither `editorRegion` nor `resultsRegion` present at all). The
+  // wide sidebar's OWN width used to be this ctx's 'col' axis (with its own
+  // `rectFor` branch, unused for 'col'); #487 phase 3 moved that gesture
+  // entirely to `left-nav-separator.ts`, which this shell mounts onto
+  // `sideHandle` below instead of wiring it through `startDrag` — so `rectFor`
+  // no longer needs to branch on `axis` at all, it only ever measures the
+  // sidebar for the one axis this ctx still serves.
+  const rectFor = (): DragRect => sidebar.getBoundingClientRect();
   const dragCtx: DragCtx = {
     state,
     rectFor,
-    apply: (axis, value) => {
-      if (axis === 'col') sidebar.style.width = value + 'px';
-      else schemaPane.style.height = value + '%';
-    },
+    apply: (_axis, value) => { schemaPane.style.height = value + '%'; },
     save: (name, value) => prefs.save(name as PreferenceKey, value),
   };
   app.dom.sideSplit = h('div', { class: 'row-resize side-split', onmousedown: (e: DragStartEvent) => doStartDrag(e, 'sideRow', dragCtx) });
@@ -185,8 +233,53 @@ export function mountAppShell(deps: AppShellDeps): AppShellHandle {
   app.dom.mobileSegmented = h('div', { class: 'mobile-segmented' },
     h('button', { class: 'mseg-btn', 'data-seg': 'schema', onclick: () => { state.mobileTab.value = 'schema'; } }, Icon.database(), h('span', null, 'Explore')),
     h('button', { class: 'mseg-btn', 'data-seg': 'library', onclick: () => { state.mobileTab.value = 'library'; } }, Icon.layers(), h('span', null, 'Library')));
-  sidebar.append(app.dom.mobileSegmented, schemaPane, app.dom.sideSplit, savedPane);
-  const sideHandle = h('div', { class: 'col-resize', onmousedown: (e: DragStartEvent) => doStartDrag(e, 'col', dragCtx) });
+  sidebar.append(leftNavTitle, app.dom.mobileSegmented, schemaPane, app.dom.sideSplit, savedPane);
+  // #487 phase 3: the element keeps its `.col-resize` class (`tests/e2e/
+  // dashboard-mobile.spec.js`'s display-state assertion and the mobile CSS's
+  // `display: none !important` rule both key off it) but no longer wires
+  // `startDrag`'s bare 'col' clamp — `mountLeftNavSeparator` below attaches its
+  // own mousedown/keydown listeners directly onto this element instead.
+  const sideHandle = h('div', { class: 'col-resize' });
+  app.dom.leftNavSeparator = sideHandle;
+
+  // #487 phase 3 — the compact icon rail, built from the SAME section registry
+  // the wide sidebar's two panes read (`registry.entry`), so a rail tooltip can
+  // never disagree with a wide switcher's label for the same section.
+  const leftRail = buildLeftRail({
+    app,
+    registry,
+    state: { leftNavSection: state.leftNavSection },
+    drawerElementId: LEFT_NAV_DRAWER_ID,
+  });
+  app.dom.leftRail = leftRail.el;
+
+  // #487 phase 3 step 4 — Escape closes a focused drawer and returns focus to
+  // the rail launcher that opened it. Attached ONCE, directly on `sidebar`
+  // (the drawer container), and relies entirely on bubbling from whatever
+  // descendant currently has focus — this is not keyboard ownership, it only
+  // ever reacts to a keydown that already landed inside `.sidebar`.
+  sidebar.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return;
+    // Something nested already claimed this Escape — the search box (when its
+    // own filter is non-empty, `saved-history.ts`) or a saved-row edit form's
+    // own Escape-to-cancel handler. Respect that claim: do not also close the
+    // drawer on the same keystroke.
+    if (e.defaultPrevented) return;
+    // Escape is only this handler's concern while a focused drawer is
+    // actually showing — in 'wide'/'rail' mode there is nothing to close.
+    if (sidebar.dataset.navMode !== 'drawer') return;
+    const section = state.leftNavSection.value;
+    // The mode/section coherence invariant (`core/left-nav-layout.ts`)
+    // guarantees `section` is non-null whenever `navMode === 'drawer'` — this
+    // guard is defensive only, never expected to trip.
+    if (section === null) return;
+    // A second activation of the already-open section CLOSES it
+    // (`resolveRailActivation`'s toggle semantics) — exactly what this
+    // handler wants.
+    toggleFocusedSection(app, section);
+    e.preventDefault();
+    leftRail.focusSection(section);
+  });
 
   app.dom.banner = h('div', { class: 'auth-banner', style: { display: 'none' } });
   // The workbench column's mount point (#425 follow-up prep). Its sizing lives
@@ -198,7 +291,288 @@ export function mountAppShell(deps: AppShellDeps): AppShellHandle {
   // toggles which of the two is exposed without rebuilding the sidebar (or the
   // query surface's own state) around them.
   const dashboardHost = h('div', { class: 'dashboard-host', hidden: true });
-  const mainRow = h('div', { class: 'main-row' }, sidebar, sideHandle, queryHost, dashboardHost);
+  // The rail is the FIRST child — #487 phase 3's compact presentation reads
+  // left-to-right as rail, then whatever `.sidebar` is currently presenting.
+  const mainRow = h('div', { class: 'main-row' }, leftRail.el, sidebar, sideHandle, queryHost, dashboardHost);
+
+  // #487 phase 3 — the navigation's live pixel budget: `.main-row`'s own
+  // current width, minus the resize separator's own footprint, minus the
+  // centre work surface's documented minimum (`LEFT_CENTRE_MIN_PX`). Read
+  // fresh on every call (never cached), so the mount-time call, the
+  // preferred-state effect, the separator's own session, and the width
+  // observer below all derive from the SAME live measurement.
+  const getMaxNavigationTotalPx = (): number =>
+    mainRow.getBoundingClientRect().width - LEFT_NAV_SEPARATOR_WIDTH_PX - LEFT_CENTRE_MIN_PX;
+
+  // #487 phase 3 step 4 — the ONE piece of state this presentation function
+  // needs beyond `layout` itself: which section was focused on the PREVIOUS
+  // call, read before this call's own `layout.focusedSection` overwrites it.
+  // That is what lets a rail/drawer → wide transition (the resize separator
+  // converting past the wide threshold, or the `End`/bare-rail-`ArrowRight`
+  // keyboard restore) know which section's wide-mode tab to hand focus back
+  // to — Escape's drawer→rail close (this file's `sidebar` keydown listener,
+  // below) is a SEPARATE trigger and never reaches 'wide' here. Starting at
+  // `null` spuriously "restores" nothing on the very first call: if that
+  // first layout is already 'wide', `focusedSection` is `null` by the
+  // mode/section coherence invariant (`core/left-nav-layout.ts`) regardless of
+  // what this variable holds, so the restore branch below cannot fire either
+  // way.
+  //
+  // #487 phase-3 review, bug 4 — this bookkeeping (both the restoration
+  // side-effect and the assignment at the end of the function) is read/written
+  // ONLY while `leftNavSeparator.isSessionActive()` is false. A non-monotone
+  // drag calls this function once per intermediate frame — e.g. Library drawer
+  // → past the wide threshold → back past the fold threshold to bare rail —
+  // and updating `previousFocusedSection` on every one of those frames
+  // corrupts it: the first frame (crossing to wide) would clear it to `null`,
+  // so the second frame (crossing back to rail) could no longer restore focus
+  // even where it should, and the reverse sequence (drawer → momentarily bare
+  // rail → back to wide) could just as easily clobber it to `null` right
+  // before the wide transition that actually needed it. So while a gesture is
+  // in progress this variable stays FROZEN at whatever it was before the
+  // gesture began, and the eventual committed transition — the only call that
+  // happens once `isSessionActive()` is false again, whether that is the
+  // pointer session's own `endDrag()`/`commitSession` call or a keyboard
+  // commit (see below) — is judged against where the gesture started, not
+  // against any intermediate frame's value.
+  //
+  // The keyboard path never sets this guard's condition to true in the first
+  // place: `left-nav-separator.ts`'s `onKeyDown` keeps its own session in a
+  // LOCAL `keySession` variable and commits synchronously within one keydown,
+  // never assigning to the module-level `session` `isSessionActive()` reads —
+  // so a keyboard commit's call into this function always sees
+  // `isSessionActive() === false`, and this bookkeeping fires for it exactly
+  // as it did before this fix.
+  let previousFocusedSection: LeftNavigationSection | null = null;
+
+  // #487 phase 3 — the SOLE writer of every left-navigation presentation
+  // attribute. `data-nav-mode` ('wide' | 'rail' | 'drawer') is derived from
+  // `layout.mode`/`layout.focusedSection` and written onto BOTH `.main-row`
+  // and `.sidebar` — `.sidebar` itself is re-presented, never moved or
+  // rebuilt, so every one of the four section hosts phase 2 built keeps its
+  // exact DOM identity across a mode change. Every `hidden`/text toggle below
+  // is set UNCONDITIONALLY (never left to CSS alone), because happy-dom
+  // computes no CSS and this is the one seam `app-shell.test.ts` can assert
+  // the whole table against as real DOM property writes.
+  function applyEffectiveLeftNavigationLayout(layout: LeftNavigationLayout): void {
+    const priorFocusedSection = previousFocusedSection;
+    const navMode: 'wide' | 'rail' | 'drawer' = layout.mode === 'wide'
+      ? 'wide'
+      : layout.focusedSection === null ? 'rail' : 'drawer';
+    // #487 phase-3 review, second pass — captured BEFORE any hidden-state
+    // mutation below touches `.sidebar`, `leftRail.el` or `data-mobile-view`'s
+    // CSS: once an ancestor goes `display: none`/`[hidden]`, the focused
+    // descendant is still momentarily reported as `document.activeElement`
+    // (verified against a real Chromium instance), but the browser drops it to
+    // `<body>` on its own by the next microtask unless something explicitly
+    // moves it first. `focusedInSidebar` is the one fact every restoration
+    // branch below needs and none of them could previously get right for a
+    // WIDE sidebar: `focusedSection` is null throughout 'wide' by construction
+    // (`core/left-nav-layout.ts`'s own mode/section coherence invariant), so
+    // `priorFocusedSection` can never name which of the two simultaneously
+    // visible sections actually held focus — only the DOM itself knows that.
+    const activeBeforeEl = doc.activeElement;
+    const focusedInSidebar = activeBeforeEl instanceof Element && sidebar.contains(activeBeforeEl);
+    // `untracked`: this function is itself called from the "preferred-state
+    // effect" below (subscribed only to `leftNavMode`/`leftNavSection`/
+    // `isMobile`) — a PLAIN read of `state.mobileView.value` here would
+    // silently widen that effect's own reactive dependencies to include
+    // `mobileView` too (signals track every `.value` read during an effect's
+    // run, at any call depth), making every bottom-nav tap ALSO re-run the
+    // whole preferred-state derivation redundantly and race the dedicated
+    // `mobileView` effect below for which one actually performs the rescue.
+    // Reading it untracked keeps this function's own reactive footprint
+    // exactly what it was before this fix: still the CURRENT value, just not
+    // a new subscription.
+    const currentMobileView = untracked(() => state.mobileView.value);
+    mainRow.dataset.navMode = navMode;
+    sidebar.dataset.navMode = navMode;
+    // The rail's own width never resizes, so only 'wide' (the whole nav) and
+    // 'drawer' (the panel beside the rail) have a meaningful pixel width here;
+    // 'rail' mode hides `.sidebar` entirely, so `wideWidthPx` is a harmless,
+    // non-stale filler rather than an untouched leftover from whatever mode
+    // came before it.
+    sidebar.style.width = (navMode === 'drawer' ? layout.drawerWidthPx : layout.wideWidthPx) + 'px';
+
+    leftRail.el.hidden = navMode === 'wide';
+    sidebar.hidden = navMode === 'rail';
+
+    const focused = layout.focusedSection;
+    leftNavTitle.hidden = navMode !== 'drawer';
+    leftNavTitle.textContent = navMode === 'drawer' && focused ? NAV_SECTION_META[focused].label : '';
+    // Only the focused drawer has one single-purpose heading to label itself
+    // with — the wide sidebar shows two panes (each already labelled by its
+    // own switcher) and a bare rail shows nothing at all, so pointing
+    // `aria-labelledby` at a hidden title in either of those would be a stale
+    // reference, not a helpful one. Omitting the attribute there is the
+    // deliberate choice.
+    if (navMode === 'drawer') sidebar.setAttribute('aria-labelledby', LEFT_NAV_TITLE_ID);
+    else sidebar.removeAttribute('aria-labelledby');
+
+    const upperFocused = navMode === 'drawer' && (focused === 'databases' || focused === 'dashboards');
+    const lowerFocused = navMode === 'drawer' && (focused === 'library' || focused === 'history');
+    schemaPane.hidden = !(navMode === 'wide' || upperFocused);
+    savedPane.hidden = !(navMode === 'wide' || lowerFocused);
+    // A drawer showing ONLY the upper pane must fill the sidebar's whole
+    // height — its inline height is otherwise the wide two-pane split
+    // percentage, which would leave the bottom of the drawer empty once
+    // `savedPane` collapses to `hidden` (the same one-pane-fills-the-column
+    // fix the mobile segmented control already applies via CSS, at
+    // `.sidebar[data-mobile-tab="schema"] .schema-pane` in styles.css — this
+    // is the same override, applied inline for the desktop drawer case).
+    if (upperFocused) {
+      schemaPane.style.flex = '1';
+      schemaPane.style.height = 'auto';
+    } else {
+      schemaPane.style.flex = '';
+      schemaPane.style.height = state.sideSplitPct + '%';
+    }
+
+    // No redundant switcher inside a drawer already showing exactly one
+    // section, and no resize handle between two panes when only one is
+    // visible — hidden in both 'rail' (where `.sidebar` itself is hidden, so
+    // this is moot) and 'drawer'.
+    const hideWideOnlyChrome = navMode !== 'wide';
+    app.dom.upperRoleTabs!.hidden = hideWideOnlyChrome;
+    app.dom.savedTabsRow!.hidden = hideWideOnlyChrome;
+    app.dom.sideSplit!.hidden = hideWideOnlyChrome;
+
+    // The separator's OWN aria-valuenow/valuemax/valuetext describe exactly
+    // this layout, but its own internal ARIA effect only re-runs on a
+    // `leftNavMode`/`leftNavSection` signal change — never on a width-only
+    // change, since `sidebarPx`/`leftNavDrawerPx` are plain fields with no
+    // signal to key an effect off. Every trigger of THIS function (the
+    // mount-time paint, the preferred-state effect, the width observer, and
+    // the separator's own gesture callback) can change the rendered width
+    // without changing either signal, so this call is what keeps the
+    // separator's ARIA from going stale between gestures. Harmless to call
+    // during the separator's own active session too — it just redundantly
+    // re-applies the same values `advanceTo`/`commitSession` already set.
+    leftNavSeparator.refreshAria(layout);
+
+    // #487 phase 3 step 4 — converting a focused drawer to the wide sidebar
+    // (a resize-separator drag past the wide threshold, or the `End`/
+    // bare-rail-`ArrowRight` keyboard restore) hands focus to the section's
+    // OWN wide-mode tab, so keyboard/AT users land somewhere meaningful
+    // rather than on whatever the drawer's last-focused element happened to
+    // be (now hidden). Resolved by a LIVE `querySelector` at the moment of
+    // the transition, never a cached reference: `renderUpperRoleTabs`/
+    // `renderLowerTabs` both `.replaceChildren(...)` on every repaint, so an
+    // element captured earlier can go stale.
+    //
+    // #487 phase-3 review, major issue 3 — `!state.isMobile.value` guards
+    // this branch: `navMode` is 'wide' on EVERY mobile call too
+    // (`effectiveLeftNavigationLayout` forces it), so without this guard a
+    // mobile crossing straight out of an open drawer read as "converted to
+    // wide" and called `.focus()` on a desktop tab button the mobile layout
+    // hides entirely — stealing focus for a control the user cannot even see.
+    //
+    // #487 phase-3 review, major issue 4 — the `else if` restores focus to
+    // the rail launcher on a committed drawer-to-BARE-RAIL transition, which
+    // had no restoration at all before this fix. Scoped to
+    // `focusedInSidebar`, not every rail arrival: a POINTER drag's
+    // `mousedown` calls `preventDefault()` (this module's own
+    // `onMouseDown`... i.e. `left-nav-separator.ts`'s), so focus is never
+    // moved onto the separator and can be left stranded inside the
+    // now-hidden drawer content — exactly the case that needs rescuing. A
+    // KEYBOARD fold (Home, or ArrowLeft crossing the fold boundary) requires
+    // the separator itself to already hold focus to receive that keydown at
+    // all, so `focusedInSidebar` is false there and this leaves the
+    // separator's own, already-correct focus alone — redirecting it would
+    // break the very next ArrowRight/End from reaching the control that
+    // handles it.
+    //
+    // #487 phase-3 review, second pass, major issue — a WIDE sidebar folding
+    // straight to bare rail (a drag that never opened a focused drawer, or a
+    // non-monotone gesture that only passed through 'drawer' mid-session)
+    // used to hit this branch's old `priorFocusedSection !== null` guard,
+    // which is permanently false coming out of 'wide' (see `focusedInSidebar`
+    // above) — so the focused control was silently dropped with nothing
+    // rescuing it. `priorFocusedSection` still wins when it IS known (a
+    // genuinely focused drawer folding to rail), matching every existing
+    // drawer -> rail case exactly; the DOM lookup is only the fallback for
+    // the wide case that has no such tracked section to fall back on.
+    if (!leftNavSeparator.isSessionActive()) {
+      if (!state.isMobile.value && navMode === 'wide' && priorFocusedSection !== null) {
+        const pane = NAV_SECTION_META[priorFocusedSection].pane;
+        const tabsRow = pane === 'upper' ? app.dom.upperRoleTabs : app.dom.savedTabsRow;
+        const tabButton = tabsRow?.querySelector<HTMLElement>('[data-section="' + priorFocusedSection + '"]');
+        tabButton?.focus();
+      } else if (navMode === 'rail' && focusedInSidebar) {
+        if (priorFocusedSection !== null) {
+          leftRail.focusSection(priorFocusedSection);
+        } else {
+          const activeSection = (activeBeforeEl as Element).closest<HTMLElement>('[data-section]')?.dataset.section;
+          if (isLeftNavigationSection(activeSection)) leftRail.focusSection(activeSection);
+        }
+      } else if (
+        state.isMobile.value
+        && (currentMobileView === 'editor' || currentMobileView === 'results')
+        && focusedInSidebar
+      ) {
+        // #487 phase-3 review, second pass, major issue — entering mobile
+        // Editor/Results hides `.sidebar` via CSS alone
+        // (`.main-row[data-mobile-view="editor"/"results"] .sidebar {
+        // display: none }` in styles.css), independently of `navMode` (mobile
+        // forces 'wide' regardless of which mobile view is showing, which is
+        // exactly why the branch above is guarded off by `!state.isMobile.value`
+        // — it must not steal focus onto a desktop tab the mobile layout hides
+        // entirely). Nothing was rescuing the focused sidebar control here
+        // before this fix; the mobile view's own bottom-nav button is the one
+        // stable, always-visible landing spot. Tables is deliberately excluded:
+        // its sidebar stays visible (`.main-row[data-mobile-view="tables"]
+        // .sidebar { display: flex }`), so there is nothing to rescue there.
+        app.dom.mobileNav?.querySelector<HTMLElement>('[data-view="' + currentMobileView + '"]')?.focus();
+      }
+      previousFocusedSection = layout.focusedSection;
+    }
+  }
+
+  // #487 phase 3 — the ONE derivation path every trigger below funnels
+  // through: read the persisted/session preference, project it for the
+  // current viewport class (mobile forces 'wide'/no-drawer), then clamp it to
+  // whatever the live shell width currently allows.
+  const deriveLeftNavigationLayout = (): LeftNavigationLayout => clampLeftNavigationToMaximumTotal(
+    effectiveLeftNavigationLayout(readLeftNavigationLayout(state), state.isMobile.value),
+    getMaxNavigationTotalPx(),
+  );
+
+  // #487 phase 3 — a visually-hidden `role="status"` live region for the
+  // separator's mode/drawer-open-or-closed announcements (mouse drags and
+  // keyboard operations alike go through this one seam).
+  const leftNavStatus = app.dom.leftNavStatus = h('div', {
+    class: 'sr-only', role: 'status', 'aria-live': 'polite',
+  });
+
+  // #487 phase 3 — the resize/mode-changing separator. It owns pointer/
+  // keyboard mechanics and session bookkeeping; every pixel decision still
+  // routes through `core/left-nav-layout.ts`'s reducers, and every paint routes
+  // back through `applyEffectiveLeftNavigationLayout` above (already correctly
+  // clamped by the separator's own session — never re-clamped here).
+  const leftNavSeparator = mountLeftNavSeparator({
+    el: sideHandle,
+    state,
+    prefs: { save: (name, value) => prefs.save(name as PreferenceKey, value) },
+    getMaxNavigationTotalPx,
+    applyEffectiveLayout: applyEffectiveLeftNavigationLayout,
+    announce: (message) => { leftNavStatus.textContent = message; },
+  });
+
+  // #487 phase-3 review, major issue 2 — `application/left-nav.ts`'s
+  // `openFocusedSection`/`toggleFocusedSection` call this FIRST, before their
+  // own write: an active pointer resize session keeps its own uncommitted
+  // layout snapshot, so a semantic command (Escape, a rail click, a reveal
+  // action) that writes `state` directly while a drag is still live left the
+  // drag's eventual mouseup/blur commit free to fire from that stale
+  // snapshot and silently overwrite (or resurrect) exactly what the command
+  // just did. A no-op when no session is active, which is the common case —
+  // this is not gated behind every call site remembering to preempt; it is a
+  // property of the one seam every caller already goes through.
+  app.preemptActiveResize = () => {
+    if (!leftNavSeparator.isSessionActive()) return;
+    leftNavSeparator.cancelActiveSession();
+    applyEffectiveLeftNavigationLayout(deriveLeftNavigationLayout());
+  };
 
   // Mobile bottom-tab nav (#126): one full-screen panel at a time. CSS hides it
   // above the breakpoint; below it, `mainRow[data-mobile-view]` (set by the
@@ -229,9 +603,94 @@ export function mountAppShell(deps: AppShellDeps): AppShellHandle {
     navBtn('editor', Icon.code(), 'Editor'),
     navBtn('results', Icon.table2(), 'Results', app.dom.mobileBadge));
 
-  root!.replaceChildren(headerSlot, authHost, app.dom.banner, mainRow, app.dom.mobileNav);
+  root!.replaceChildren(headerSlot, authHost, app.dom.banner, mainRow, leftNavStatus, app.dom.mobileNav);
 
   const disposers: (() => void)[] = [];
+  // #487 phase 3 — the "preferred-state effect": the sole reactive trigger for
+  // `applyEffectiveLeftNavigationLayout` outside the separator's own drag/
+  // keyboard sessions and the width observer below. Subscribes to the two
+  // SIGNALS a mode/section transition writes (`sidebarPx`/`leftNavDrawerPx`
+  // are plain fields with no signal to key an effect off — a width-only change
+  // relies on whichever caller already painted it directly) plus `isMobile`,
+  // so crossing the mobile breakpoint in either direction re-derives the
+  // effective layout too. Registered here (post-mount, mirroring every other
+  // effect in this file), it also runs once immediately for the initial paint
+  // — no separate explicit mount-time call needed.
+  //
+  // Deliberately NOT gated behind `leftNavSeparator.isSessionActive()`, unlike
+  // the width observer below: `isMobile` flipping to true mid-drag is a real
+  // transition this effect must still force back to wide — a session cannot
+  // stay in a desktop drawer/rail presentation once the viewport is mobile.
+  //
+  // #487 phase-3 review, bugs 1 and 2 — an `isMobile` crossing (in EITHER
+  // direction) also needs two side effects BEFORE this call derives/paints,
+  // handled by tracking the previous `isMobile` value in `previousIsMobile`,
+  // a closure variable declared just above this effect:
+  //
+  // 1. (bug 2) `leftNavSeparator.cancelActiveSession()` — an active drag has
+  //    no way to notice `isMobile` changed under it, so without this its very
+  //    next `mousemove` would repaint the now-stale desktop layout right back
+  //    over the mobile-wide presentation this effect just forced — and if the
+  //    eventual commit happens to reproduce the same `mode`/`focusedSection`
+  //    as before the drag, no signal changes, so nothing would ever
+  //    re-correct it. Cancelling (never committing) is safe here because
+  //    nothing has been written to `state` by an in-progress session — see
+  //    `cancelActiveSession`'s own doc comment.
+  // 2. (bug 1) `state.leftNavSection.value = null` — `leftNavSection` is
+  //    session-only (never persisted) and mobile never touches it, so a
+  //    section focused on desktop can go stale across a mobile round-trip:
+  //    the mobile-visible wide switcher writes `sidePanel`/`upperRole`
+  //    directly (never `leftNavSection`), so returning to desktop could
+  //    otherwise show a drawer whose TITLE still names whatever was focused
+  //    before the trip while its CONTENT already reflects whatever the
+  //    mobile switcher picked. Clearing it on every crossing means a return
+  //    from mobile always shows a bare rail instead — matching the existing
+  //    precedent that `leftNavSection` "need not reopen automatically" (it
+  //    already does not survive a reload).
+  //
+  // Writing `state.leftNavSection.value` from inside an effect that also
+  // reads it schedules this effect to run again immediately — that second run
+  // is a harmless no-op (`mobile === previousIsMobile` by then), the same
+  // "harmless double-paint" tolerance this file's own `refreshAria` comment
+  // already documents elsewhere.
+  let previousIsMobile = state.isMobile.value;
+  disposers.push(effect(() => {
+    state.leftNavMode.value;
+    state.leftNavSection.value;
+    const mobile = state.isMobile.value;
+    if (mobile !== previousIsMobile) {
+      previousIsMobile = mobile;
+      leftNavSeparator.cancelActiveSession();
+      state.leftNavSection.value = null;
+    }
+    applyEffectiveLeftNavigationLayout(deriveLeftNavigationLayout());
+  }));
+  // #487 phase 3 — the shell-width observer (an injected seam; see
+  // `AppShellDeps.observeElementWidth`'s own doc comment). A live
+  // browser-window resize with NO active separator session still has to keep
+  // the centre-content minimum honored, and this is the only trigger that
+  // notices one: the separator's own session re-clamps on every step it takes,
+  // but takes none while the pointer/keyboard is idle. Both derive from the
+  // exact same `getMaxNavigationTotalPx()` reading the live `.main-row` width,
+  // so an observer firing mid-drag is naturally consistent with the
+  // separator's own concurrent calls rather than fighting them — there is only
+  // ONE derivation path, called from four triggers, never four different ones.
+  //
+  // Skipped entirely while the separator itself has an active session: this
+  // callback derives from `readLeftNavigationLayout(state)` — the last
+  // COMMITTED preference — which is stale for exactly as long as a gesture is
+  // in progress (a drag paints intermediate positions via its own
+  // `applyEffectiveLayout` callback without writing to `state` until it
+  // commits). Repainting from that stale state here would visibly snap the
+  // sidebar away from the pointer on a mid-drag window resize, then snap back
+  // on the next mousemove. The separator's own gesture is authoritative during
+  // that window; when it ends, `commitSession` already repaints the final,
+  // correctly-clamped state through the same `applyEffectiveLayout` callback.
+  const disposeWidthObserver = observeElementWidth?.(mainRow, (widthPx) => {
+    if (!(widthPx > 0) || !Number.isFinite(widthPx)) return; // defensive: a detached/not-yet-laid-out element can report 0.
+    if (leftNavSeparator.isSessionActive()) return;
+    applyEffectiveLeftNavigationLayout(deriveLeftNavigationLayout());
+  }) || null;
   // Reactive repaint of the schema tree — replaces the scattered renderSchema()
   // calls: re-runs on schema load, load error, filter text, or expand/collapse.
   // Registered here (post-mount) so app.dom.schemaList already exists; the effect
@@ -285,20 +744,47 @@ export function mountAppShell(deps: AppShellDeps): AppShellHandle {
     state.schemaError.value;
     updateBanner();
   }));
-  // Reactive repaint of the side panel: re-runs when the active panel changes
-  // (Library ↔ History). Data-driven repaints (savedQueries/history mutations)
-  // still call renderSavedHistory directly until those slices are signals too.
+  // Reactive repaint of the lower tab row: re-runs when the active panel changes
+  // (Library ↔ History) or the Library count might have (projection revision).
+  // #487 phase 3 split this from the content repaint below, mirroring the upper
+  // pane's own split (`renderUpperRoleTabs` vs `renderSchema`) — switching which
+  // section is exposed repaints only the tab row's active class/count, never
+  // either section's content.
+  disposers.push(effect(() => {
+    state.sidePanel.value;
+    state.dashboardTreeRevision.value;
+    renderLowerTabs(app);
+  }));
+  // Reactive repaint of Library's own content: re-runs on the projection
+  // revision alone, regardless of which lower section is exposed (#487 phase 3)
+  // — mirroring `renderSchema`, which does not subscribe to `upperRole` either.
+  // Data-driven repaints of ROW-level state (favorite/rename/delete) still call
+  // the full `renderSavedHistory` facade directly.
   //
   // #427 added the projection revision. Library membership is now a function of
   // `dashboards[]` — a query is in the Library exactly while no Dashboard member
   // references it — so a committed Dashboard change can move a query in or out of
   // this list without `savedQueries` changing at all. It is the same one signal
   // the Dashboard tree subscribes to, bumped from the single projection funnel.
+  //
+  // Deliberately no matching reactive effect for History's own content:
+  // `state.history` is a plain array, not a signal, so History has never been
+  // signal-driven — it stays current via direct calls at its mutation sites
+  // (`app.recordHistory`, the script-run history path, and the facade above).
   disposers.push(effect(() => {
-    state.sidePanel.value;
     state.dashboardTreeRevision.value;
-    renderSavedHistory(app);
+    renderLibrarySection(app);
   }));
+  // History's OWN initial paint: unlike Library, History has no signal to key a
+  // reactive effect off (see the comment above), so it cannot pick up its first
+  // paint by registering one. Without this direct, one-time call the History
+  // host would stay the empty div `nav-sections.ts` built it as until the first
+  // history-recording event — reintroducing, for History specifically, the exact
+  // "section that wasn't active at mount never got painted" bug this phase
+  // fixes for Library via the effect above. Not an effect itself (no signal
+  // read, so it never re-runs) — every subsequent History repaint still comes
+  // from its own mutation sites or the full `renderSavedHistory` facade.
+  renderHistorySection(app);
   // Reactive repaint of the header library title (name + unsaved-changes dot):
   // re-runs when the name or dirty flag changes. The edit-mode toggle is driven
   // separately (editingLibrary is not a signal — file-menu.js renders it directly).
@@ -329,7 +815,25 @@ export function mountAppShell(deps: AppShellDeps): AppShellHandle {
   // Bottom-nav view switching: reflect the active mobile panel + Tables segmented
   // choice onto data-attributes the mobile CSS keys off (a no-op above the
   // breakpoint). Each runs once now for the initial paint.
-  disposers.push(effect(() => { mainRow.dataset.mobileView = state.mobileView.value; }));
+  //
+  // #487 phase-3 review, second pass, major issue — this is a SEPARATE trigger
+  // from `applyEffectiveLeftNavigationLayout`'s own isMobile-crossing rescue
+  // above: tapping the bottom nav from Tables straight to Editor/Results (no
+  // `isMobile`/`leftNavMode`/`leftNavSection` change at all) hides `.sidebar`
+  // via the exact same CSS rule but never runs that function, so a control
+  // focused in Tables would be dropped the same way. Focus is captured BEFORE
+  // the attribute write flips the CSS (same ordering reason as that rescue).
+  disposers.push(effect(() => {
+    const view = state.mobileView.value;
+    const activeBeforeEl = doc.activeElement;
+    const hidingSidebar = state.isMobile.value && (view === 'editor' || view === 'results')
+      && activeBeforeEl instanceof Element && sidebar.contains(activeBeforeEl);
+    mainRow.dataset.mobileView = view;
+    if (hidingSidebar) {
+      const navButton = app.dom.mobileNav?.querySelector<HTMLElement>('[data-view="' + view + '"]');
+      navButton?.focus();
+    }
+  }));
   disposers.push(effect(() => { sidebar.dataset.mobileTab = state.mobileTab.value; }));
   catalog.loadSchema();
   catalog.loadReference();
@@ -343,9 +847,20 @@ export function mountAppShell(deps: AppShellDeps): AppShellHandle {
     queryHost,
     dashboardHost,
     showHost: (kind) => {
+      // #487 phase-3 review, second pass, major issue — a mobile Dashboard
+      // hides `.sidebar` via `.main-row[data-surface="dashboard"] .sidebar {
+      // display: none }` (styles.css), a THIRD trigger entirely outside
+      // `applyEffectiveLeftNavigationLayout`/the mobileView effect above. Same
+      // rescue shape: capture before the attribute write, land on the one
+      // bottom-nav button #471 keeps visible on this surface (Editor — the
+      // Dashboard's only route back to the Workbench).
+      const activeBeforeEl = doc.activeElement;
+      const hidingSidebarForDashboard = state.isMobile.value && kind === 'dashboard'
+        && activeBeforeEl instanceof Element && sidebar.contains(activeBeforeEl);
       queryHost.hidden = kind !== 'query';
       dashboardHost.hidden = kind !== 'dashboard';
       mainRow.dataset.surface = kind;
+      if (hidingSidebarForDashboard) app.dom.mobileNav?.querySelector<HTMLElement>('[data-view="editor"]')?.focus();
     },
     dispose: () => {
       // #426: a deferred single-click must not fire against a tree that is being
@@ -354,6 +869,12 @@ export function mountAppShell(deps: AppShellDeps): AppShellHandle {
       cancelDashboardTreeClicks(app);
       for (const dispose of disposers) dispose();
       mq?.removeEventListener('change', onMobileChange);
+      // #487 phase 3 — the rail's per-button effects, the separator's own
+      // listeners + ARIA effect, and (when provided) the injected width
+      // observer all outlive `disposers` above unless stopped here too.
+      leftRail.dispose();
+      leftNavSeparator.dispose();
+      disposeWidthObserver?.();
     },
   };
 }
diff --git a/src/ui/app.ts b/src/ui/app.ts
index b0df5c9f..c38b8d0e 100644
--- a/src/ui/app.ts
+++ b/src/ui/app.ts
@@ -43,6 +43,7 @@ import { renderTabs, selectTab, newTab, closeTab, loadIntoNewTab, openVariableTa
 import type { QueryOrName } from './tabs.js';
 import { commitVariableConfig } from '../application/dashboard-variable-config.js';
 import { dashboardVariables } from '../application/dashboard-tree-model.js';
+import { openFocusedSection } from '../application/left-nav.js';
 import { normalizeVariableSql } from '../core/dashboard-variables.js';
 import { batch } from '@preact/signals-core';
 import { renderResults } from './results.js';
@@ -55,7 +56,7 @@ import type { SchemaLineageNode, DetachedGraphApp } from './explain-graph.js';
 import { openDetailPane } from './schema-detail.js';
 import type { NodeDetail, DetailNode } from './schema-detail.js';
 import { openDocEntry, openDocDisambiguation, closeDocPane, isDocPaneOpen } from './doc-pane.js';
-import { renderSavedHistory } from './saved-history.js';
+import { renderSavedHistory, renderHistorySection } from './saved-history.js';
 import { applyFieldState, applyFieldWidth } from './var-field.js';
 import { buildRelativeTimeField } from './relative-time-field.js';
 import type { RelativeTimeField } from './relative-time-field.js';
@@ -149,6 +150,9 @@ interface WindowExtras {
   Blob?: typeof Blob;
   // #343 §5: the real cross-tab channel constructor, when the platform has it.
   BroadcastChannel?: new (name: string) => BroadcastChannelPort;
+  // #487 phase 3: the real shell-width observer constructor, when the
+  // platform has it (mirrors the BroadcastChannel entry above).
+  ResizeObserver?: typeof ResizeObserver;
 }
 
 /** `app.specValidators`'s full internal shape: the canonical schema +
@@ -180,6 +184,9 @@ export function createApp(env: CreateAppEnv = {}): App {
     || ((name: string): BroadcastChannelPort | null =>
       (typeof win.BroadcastChannel === 'function' ? new win.BroadcastChannel(name) : null));
   const documentVisible = env.documentVisible || (() => doc.visibilityState !== 'hidden');
+  // #487 phase 3: the real ResizeObserver constructor, when the platform has
+  // one — captured once here (see `observeElementWidth` below for why).
+  const resizeObserverCtor = typeof win.ResizeObserver === 'function' ? win.ResizeObserver : undefined;
   // Epoch clock shared by persistence metadata and parameter execution.
   const wallNow = (): number => (env.wallNow || (() => Date.now()))();
 
@@ -232,6 +239,23 @@ export function createApp(env: CreateAppEnv = {}): App {
     // MOBILE_BREAKPOINT_PX. null when the platform has no matchMedia (treated as
     // always-desktop — the mobile CSS still applies, just no JS branching).
     matchMedia: env.matchMedia || (typeof win.matchMedia === 'function' ? win.matchMedia.bind(win) : null),
+    // Shell-width observer seam (#487 phase 3): injected like matchMedia so
+    // tests can drive it; a real `ResizeObserver`-backed implementation when
+    // the platform has one, else `undefined` — `mountAppShell`'s own
+    // `AppShellDeps.observeElementWidth` already treats "omitted" as "this
+    // feature simply doesn't run" (see its doc comment). Captured to a local
+    // const first (rather than re-reading `win.ResizeObserver` inside the
+    // closure below) so TypeScript's narrowing of the `typeof … === 'function'`
+    // check survives into the nested arrow function.
+    observeElementWidth: env.observeElementWidth || (resizeObserverCtor
+      ? (element: Element, callback: (widthPx: number) => void): (() => void) => {
+        const ro = new resizeObserverCtor((entries) => {
+          for (const entry of entries) callback(entry.contentRect.width);
+        });
+        ro.observe(element);
+        return () => ro.disconnect();
+      }
+      : undefined),
   };
   const app = appBase as App;
   // Chromium (+ a secure context) only — Firefox/Safari and plain-HTTP have no
@@ -985,7 +1009,7 @@ export function createApp(env: CreateAppEnv = {}): App {
     activeTab: () => app.activeTab(),
     hooks: {
       renderResults: () => renderResults(app),
-      renderSavedHistory: () => renderSavedHistory(app),
+      renderHistorySection: () => renderHistorySection(app),
       cancelSchemaGraph,
       loadSchema: () => { void catalog.loadSchema(); },
       recordHistory: (tab, sql) => app.recordHistory(tab, sql),
@@ -1557,12 +1581,19 @@ export function createApp(env: CreateAppEnv = {}): App {
 
   // --- saved / history bridges ------------------------------------------
   // The history-recording POLICY itself now lives in `saved.recordHistory`
-  // (#276 Phase 4C) — this wrapper's own conditional History-panel repaint is
-  // a rendering concern the service must never own (see its header comment),
-  // so it stays here, unchanged.
+  // (#276 Phase 4C) — this wrapper's own History-panel repaint is a rendering
+  // concern the service must never own (see its header comment), so it stays
+  // here.
+  //
+  // #487 phase 3: unconditional — History's own content must stay current even
+  // while Library is the exposed section, since History repaints only at its
+  // own mutation sites (`state.history` is a plain array, not a signal, so it
+  // is not part of any reactive repaint effect). Only History's own data
+  // changed here, so this calls `renderHistorySection` rather than the full
+  // `renderSavedHistory` facade.
   app.recordHistory = (tab, sqlText) => {
     saved.recordHistory(tab, sqlText);
-    if (app.state.sidePanel.value === 'history') renderSavedHistory(app);
+    renderHistorySection(app);
   };
 
   // --- share + star ------------------------------------------------------
@@ -2101,6 +2132,7 @@ export function createApp(env: CreateAppEnv = {}): App {
       catalog,
       prefs,
       matchMedia: app.matchMedia,
+      observeElementWidth: app.observeElementWidth,
       updateBanner: app.updateBanner,
       startDrag,
     });
@@ -2936,6 +2968,10 @@ export function createApp(env: CreateAppEnv = {}): App {
     if (query) openQueryDocument(query);
   };
 
+  // #487 phase 3 — the left navigation's controller seam. `app` (state +
+  // prefs) satisfies `left-nav.ts`'s narrow structural `LeftNavApp` directly.
+  app.openFocusedSection = (section) => { openFocusedSection(app, section); };
+
   // #535 — the tile's expand action. Order matters: the tree is revealed FIRST,
   // exactly as the Library-drop settlement does it (ui/dashboard-tree.ts), so the
   // row is expanded and armed as the tree's position and then `loadIntoNewTab`
diff --git a/src/ui/app.types.ts b/src/ui/app.types.ts
index 096d8fb4..175ff9d3 100644
--- a/src/ui/app.types.ts
+++ b/src/ui/app.types.ts
@@ -17,6 +17,7 @@ import type {
   WorkspaceExternallyChangedInfo, WorkspaceMutationInput, WorkspaceMutationOutcome,
 } from '../state.js';
 import type { DocTarget } from '../core/doc-types.js';
+import type { LeftNavigationSection } from '../core/left-nav-layout.js';
 import type { QueryExecutionService } from '../application/query-execution-service.js';
 import type { ConnectionSession, SessionChCtx } from '../application/connection-session.js';
 import type { AuthenticatedExecutionScope } from '../application/authenticated-execution-scope.js';
@@ -129,6 +130,22 @@ export interface AppDom {
   historySearch?: HTMLElement;
   savedTabsRow?: HTMLElement;
   schemaList?: HTMLElement;
+  /** #487 phase 3 — the compact icon rail (`ui/left-rail.ts`), `.main-row`'s
+   *  first child. Exposed on `app.dom` for consistency with this interface's
+   *  existing pattern of exposing every shell-built element, even though
+   *  `app-shell.ts` itself already holds a local reference. */
+  leftRail?: HTMLElement;
+  /** #487 phase 3 — `.sidebar`'s own heading, shown only while it presents as
+   *  the rail's focused drawer (`data-nav-mode="drawer"`); its text names the
+   *  one section currently focused. */
+  leftNavTitle?: HTMLElement;
+  /** #487 phase 3 — the same element as the local `sideHandle`/`.col-resize`
+   *  in `app-shell.ts`; `ui/left-nav-separator.ts`'s `mountLeftNavSeparator`
+   *  attaches its mouse/keyboard listeners directly onto it. */
+  leftNavSeparator?: HTMLElement;
+  /** #487 phase 3 — a visually-hidden `role="status"` live region the resize
+   *  separator announces mode/drawer-open-or-closed changes through. */
+  leftNavStatus?: HTMLElement;
   specEditorView?: EditorView;
   sqlEditorView?: EditorView;
   themeBtn?: HTMLElement;
@@ -345,6 +362,12 @@ export interface App {
   /** Mobile-breakpoint seam (#126), app.ts-internal (renderApp seeds/tracks
    * `state.isMobile` against it) — not read by any other module. */
   matchMedia: ((query: string) => MediaQueryList) | null;
+  /** #487 phase 3 — shell-width observer seam (app.ts-internal; passed straight
+   *  through to `mountAppShell`'s `AppShellDeps.observeElementWidth`, not read
+   *  by any other module). Resolved from `env.observeElementWidth` or a real
+   *  `ResizeObserver`-backed default; `undefined` when neither is available,
+   *  mirroring `matchMedia`'s "capability or absent" contract. */
+  observeElementWidth: ((element: Element, callback: (widthPx: number) => void) => () => void) | undefined;
   /** Build stamp shown in the user menu (app.ts's own openUserMenu) — not read
    * by any other module. */
   build: string;
@@ -542,6 +565,21 @@ export interface App {
    *  #443 — the id is resolved BEFORE anything moves: one that names no saved
    *  query reports a diagnostic and changes no surface, no route and no tab. */
   openSavedQuery(queryId: string): void;
+  /** #487 phase 3 — open (or re-assert open) the left navigation's focused
+   *  drawer on `section`, idempotently: repeated calls with the drawer already
+   *  showing this section are a no-op (`core/left-nav-layout.ts`'s
+   *  `resolveRailOpen`). In wide mode there is no drawer, so this only drives
+   *  the existing upper/lower pane switch for `section`. */
+  openFocusedSection(section: LeftNavigationSection): void;
+  /** #487 phase-3 review, major issue 2 — `application/left-nav.ts`'s
+   *  `LeftNavApp.preemptActiveResize` seam: `app-shell.ts`'s `mountAppShell`
+   *  wires this to cancel an in-progress separator resize session and
+   *  repaint from the committed layout, so `openFocusedSection`/
+   *  `toggleFocusedSection` can preempt a stale drag before writing —
+   *  otherwise the drag's own eventual commit can silently overwrite what a
+   *  semantic command (Escape, a rail click, a reveal action) just did.
+   *  Optional: unset before the shell mounts one. */
+  preemptActiveResize?(): void;
   /**
    * #535 — a Dashboard TILE's own expand action: everything `openSavedQuery`
    * does, plus the two things that make it an act of "go work on this panel"
diff --git a/src/ui/dashboard-tree.ts b/src/ui/dashboard-tree.ts
index 451498e2..46844eb4 100644
--- a/src/ui/dashboard-tree.ts
+++ b/src/ui/dashboard-tree.ts
@@ -70,6 +70,7 @@ import {
 import type { AppState } from '../state.js';
 import type { App, AppDom } from './app.types.js';
 import type { MainSurfaceState, OpenDashboardRequest } from '../application/main-surface.js';
+import { openFocusedSection } from '../application/left-nav.js';
 
 /** The narrow slice of the real `app` controller this module reads — not the full
  *  `App` contract. A real `App` satisfies it directly, and so does the unit
@@ -107,6 +108,11 @@ export interface DashboardTreeApp {
    *  entry AND every linked draft through, inside the commit transform — the
    *  same injected seam the Library row's pencil passes to `renameSaved`. */
   specValidators: App['specValidators'];
+  /** #487 phase 3: `application/left-nav.ts`'s `openFocusedSection` needs this
+   *  to satisfy its narrow structural `LeftNavApp` — `revealAssignedPanel`
+   *  routes through that seam so a reveal also opens the focused drawer when
+   *  the nav is folded, instead of writing `state.upperRole` alone. */
+  prefs: App['prefs'];
   document?: Document;
   /** The window whose timers back the click arbiter; defaults to the row's own. */
   window?: Pick<Window, 'setTimeout' | 'clearTimeout'>;
@@ -447,11 +453,19 @@ function revealAssigned(app: DashboardTreeApp, dashboardId: string, rowKey: stri
  * Reveal the Dashboard tree at one newly-created panel. Assignment callers use
  * this shared settlement so drag/drop and the Library chooser both switch the
  * upper sidebar role, expand the same ancestors, and arm the same keyboard row.
+ *
+ * Routes through `application/left-nav.ts`'s `openFocusedSection` (#487 phase
+ * 3) rather than writing `state.upperRole` directly: in wide mode that seam
+ * reduces to exactly this same write (`resolveRailOpen` is a no-op there), but
+ * it ALSO opens the focused drawer when the nav is folded to the rail — a bare
+ * `upperRole` write left this reveal's own expand/scroll/select work happening
+ * inside a hidden pane whenever the rail was folded or focused on a different
+ * section.
  */
 export function revealAssignedPanel(
   app: DashboardTreeApp, dashboardId: string, tileId: string,
 ): void {
-  app.state.upperRole.value = 'dashboards';
+  openFocusedSection(app, 'dashboards');
   revealAssigned(app, dashboardId,
     tileRowKey(app.currentWorkspace?.id ?? '', dashboardId, tileId), 'panels');
 }
diff --git a/src/ui/file-menu.ts b/src/ui/file-menu.ts
index 683e3c9b..b7ad3407 100644
--- a/src/ui/file-menu.ts
+++ b/src/ui/file-menu.ts
@@ -66,6 +66,7 @@ import {
 } from '../workspace/workspace-operations.js';
 import { DEFAULT_DASHBOARD_TITLE } from '../dashboard/application/empty-dashboard.js';
 import { createDashboard, dashboardCreateMessage } from '../application/dashboard-create.js';
+import { openFocusedSection } from '../application/left-nav.js';
 import { deriveWorkspaceKey } from '../core/workspace-key.js';
 import type { App } from './app.types.js';
 import {
@@ -762,10 +763,17 @@ async function doNewDashboard(app: App, name: string): Promise<void> {
  * screen while the tree that lists it — and marks it selected — stayed hidden
  * behind the other tab. The command's promise is "here is the Dashboard you just
  * made"; half a surface switch does not keep it.
+ *
+ * Routes through `application/left-nav.ts`'s `openFocusedSection` (#487 phase 3)
+ * rather than writing `state.upperRole` directly: in wide mode that seam reduces
+ * to exactly this same write (`resolveRailOpen` is a no-op there), but it ALSO
+ * opens the focused drawer when the nav is folded to the rail — a bare
+ * `upperRole` write left the reveal happening inside a hidden pane whenever the
+ * rail was folded or focused on a different section.
  */
 function revealDashboard(app: App, dashboardId: string): void {
   app.openDashboard({ dashboardId, mode: 'edit' });
-  app.state.upperRole.value = 'dashboards';
+  openFocusedSection(app, 'dashboards');
 }
 
 // ── actions: rename ──────────────────────────────────────────────────────────
diff --git a/src/ui/left-nav-separator.ts b/src/ui/left-nav-separator.ts
new file mode 100644
index 00000000..601ffdeb
--- /dev/null
+++ b/src/ui/left-nav-separator.ts
@@ -0,0 +1,443 @@
+// #487 phase 3 — the left navigation's resize/mode-changing separator. Wired
+// into `ui/app-shell.ts` (`mountLeftNavSeparator` is mounted onto the shell's
+// `.col-resize` handle, and `applyEffectiveLeftNavigationLayout` is the
+// `applyEffectiveLayout` callback every session paints through) — it replaced
+// `splitters.ts`'s `'col'` axis outright, which no longer exists.
+//
+// Deliberately mirrors `splitters.ts`'s existing MOUSE-event drag model
+// (mousedown/mousemove/mouseup on an injected `window`-shaped seam) rather than
+// switching to Pointer Events — one drag primitive for the whole app, not two.
+//
+// Every pixel decision routes through `core/left-nav-layout.ts`'s pure
+// reducers via a `LeftNavigationResizeSession` (`beginLeftNavigationResize`/
+// `advanceLeftNavigationResize`/`commitLeftNavigationResize`): this module's own
+// job is strictly pointer/keyboard mechanics, session bookkeeping, and ARIA —
+// never the resize arithmetic itself, and never painting the sidebar (that is
+// `deps.applyEffectiveLayout`, a callback a later app-shell step implements).
+
+import { batch, effect } from '@preact/signals-core';
+import {
+  advanceLeftNavigationResize, beginLeftNavigationResize, commitLeftNavigationResize,
+  leftNavigationSeparatorAria, leftNavigationWidthPx, normalizeLeftNavigationLayout,
+  resolveLeftNavigationDrag, resolveLeftNavigationKey,
+} from '../core/left-nav-layout.js';
+import type {
+  LeftNavigationLayout, LeftNavigationResizeSession, LeftNavigationSeparatorAria,
+} from '../core/left-nav-layout.js';
+import { readLeftNavigationLayout } from '../application/left-nav.js';
+import type { LeftNavStateSlice } from '../application/left-nav.js';
+import { NAV_SECTION_META } from './nav-sections.js';
+
+/** The one field `mousedown`/`mousemove`/`mouseup` read — a plain `{clientX}`
+ *  fixture satisfies it, exactly like `splitters.ts`'s own `DragPoint`. */
+export interface LeftNavSeparatorPointerEvent {
+  clientX: number;
+}
+
+/** The `window`-shaped mouse/blur seam — a real `Window` satisfies this
+ *  directly (mirroring `splitters.ts`'s `DragWindow`, widened to also carry
+ *  `blur`, which takes no event payload worth reading). */
+export interface LeftNavSeparatorWindow {
+  addEventListener(type: string, listener: (ev: LeftNavSeparatorPointerEvent) => void): void;
+  removeEventListener(type: string, listener: (ev: LeftNavSeparatorPointerEvent) => void): void;
+}
+
+/** The `document`-shaped `visibilitychange` seam — deliberately NOT read for
+ *  `document.visibilityState` (happy-dom cannot fake it): the event firing at
+ *  all, regardless of direction, is treated as "stop and commit now". */
+export interface LeftNavSeparatorTarget {
+  addEventListener(type: string, listener: () => void): void;
+  removeEventListener(type: string, listener: () => void): void;
+}
+
+/** The narrowed persistence seam — this module only ever names these three
+ *  keys, the same narrowing precedent `application/left-nav.ts`'s own
+ *  `LeftNavApp.prefs` sets for `'sidePanel'`. */
+export interface LeftNavSeparatorPrefs {
+  save(name: 'leftNavMode' | 'sidebarPx' | 'leftNavDrawerPx', value: unknown): void;
+}
+
+export interface LeftNavSeparatorDeps {
+  /** The separator DOM element — `role`/`aria-*`/`tabindex` are applied to
+   *  THIS element, and mousedown/keydown listen on it directly. */
+  el: HTMLElement;
+  /** Mouse-move/up/blur seam. Defaults to the real `window`. */
+  win?: LeftNavSeparatorWindow;
+  /** `visibilitychange` seam. Defaults to the real `document` — deliberately
+   *  a SEPARATE seam from `win`, since visibility fires on the document. */
+  target?: LeftNavSeparatorTarget;
+  /** The same `LeftNavStateSlice` `application/left-nav.ts` reads/writes —
+   *  reused rather than re-declared, so this module calls the real
+   *  `readLeftNavigationLayout(state)` rather than re-implementing the same
+   *  projection. */
+  state: LeftNavStateSlice;
+  prefs: LeftNavSeparatorPrefs;
+  /** The live navigation width budget (shell width minus the centre surface's
+   *  minimum minus the separator's own width) — a caller's job, not this
+   *  module's; it only ever asks for a number when it needs one. */
+  getMaxNavigationTotalPx(): number;
+  /** The ONE DOM-painting seam: apply a proposed layout's pixels to the
+   *  sidebar. This module never touches sidebar DOM itself. */
+  applyEffectiveLayout(layout: LeftNavigationLayout): void;
+  /** Optional status-announcement seam — a no-op when omitted. Called only on
+   *  a semantic mode (or drawer open/closed) change, never on a plain width
+   *  change within the same mode. */
+  announce?(message: string): void;
+}
+
+export interface LeftNavSeparatorHandle {
+  /** Remove every listener this module registered (mousedown/keydown on `el`;
+   *  blur on `win`; visibilitychange on `target`; and, if a drag happens to be
+   *  in progress, the drag-only mousemove/mouseup on `win` too) and stop the
+   *  ARIA-refresh effect. Safe to call once; idempotent-safe to call again
+   *  (every underlying `removeEventListener` is a no-op for an
+   *  already-removed listener). */
+  dispose(): void;
+  /**
+   * Re-apply this separator's own ARIA attributes (`aria-valuemin/max/now`,
+   * `aria-valuetext`) from `layout`, without waiting for a
+   * `leftNavMode`/`leftNavSection` signal change. The module's own
+   * `disposeAriaEffect` above only re-runs on THOSE two signals — a WIDTH-only
+   * change (a mount-time paint clamped by the live shell width, or a plain
+   * window resize re-deriving the same mode at a different pixel budget) never
+   * touches either signal, so nothing would otherwise tell this separator its
+   * own advertised width just went stale. `app-shell.ts`'s
+   * `applyEffectiveLeftNavigationLayout` calls this on every one of its own
+   * invocations (mount, the preferred-state effect, the width observer) so the
+   * separator's ARIA is never more stale than the sidebar it describes. Safe
+   * to call during this separator's OWN active gesture too — it just
+   * redundantly re-applies the same values `advanceTo`/`commitSession` already
+   * did, mirroring the "harmless double-paint" tolerance already established
+   * elsewhere in this phase.
+   */
+  refreshAria(layout: LeftNavigationLayout): void;
+  /**
+   * True while a pointer drag or a keyboard-resize is in progress (the
+   * module-level `session` below is non-null). `app-shell.ts` reads this to
+   * decide whether a trigger OTHER than this separator's own gesture (the
+   * `ResizeObserver` callback) is safe to repaint from — repainting from the
+   * committed preference mid-gesture would visibly fight the gesture's own
+   * in-progress, not-yet-committed paint.
+   */
+  isSessionActive(): boolean;
+  /**
+   * Abandon an in-progress pointer-drag session without committing it — no
+   * `state`/pref write, no repaint. Used by `app-shell.ts` when `isMobile`
+   * changes mid-gesture (#487 phase-3 review, bug 2): a drag active across
+   * that exact crossing has no way to notice the viewport just left desktop
+   * under it, so its very next `mousemove` would otherwise repaint the
+   * now-stale desktop layout right back over the mobile-wide presentation the
+   * isMobile transition just forced. Nothing has been written to `state` by an
+   * in-progress session (only `commitSession` writes), so simply detaching the
+   * drag listeners and dropping the session is a clean no-op from `state`'s own
+   * perspective — unlike `endDrag`, this never calls `commitSession`.
+   *
+   * A no-op when no pointer session is active. The keyboard-resize path
+   * (`onKeyDown`) never needs this: it keeps its own session in a LOCAL
+   * `keySession` variable and commits synchronously within one keydown, so the
+   * module-level `session` this method reads is never set by a keyboard
+   * operation in the first place.
+   */
+  cancelActiveSession(): void;
+}
+
+/** Describe the OCCUPIED-width quantity `aria-valuenow` reports, in words —
+ *  mode-aware, but always naming the SAME total `aria-valuenow` carries (never
+ *  a per-mode panel width; see this module's own header comment for the
+ *  earlier design round that got this wrong). */
+function describeOccupiedWidth(layout: LeftNavigationLayout): string {
+  if (layout.mode === 'wide') return 'Wide sidebar';
+  if (layout.focusedSection === null) return 'Rail only';
+  return `Rail with ${NAV_SECTION_META[layout.focusedSection].label} drawer`;
+}
+
+function ariaValueText(layout: LeftNavigationLayout, aria: LeftNavigationSeparatorAria): string {
+  if (layout.mode === 'rail' && layout.focusedSection !== null) {
+    return `${describeOccupiedWidth(layout)}, ${aria.valueNow} pixels total`;
+  }
+  return `${describeOccupiedWidth(layout)}, ${aria.valueNow} pixels`;
+}
+
+/**
+ * Mount the separator: apply its static ARIA/DOM attributes once, wire mouse,
+ * keyboard, blur and visibilitychange handling, and return a `dispose()`.
+ */
+export function mountLeftNavSeparator(deps: LeftNavSeparatorDeps): LeftNavSeparatorHandle {
+  const { el, state } = deps;
+  const win: LeftNavSeparatorWindow = deps.win || window;
+  const target: LeftNavSeparatorTarget = deps.target || document;
+
+  el.setAttribute('role', 'separator');
+  el.setAttribute('aria-orientation', 'vertical');
+  el.setAttribute('tabindex', '0');
+
+  // The in-progress drag/keyboard-resize session, or null between gestures.
+  let session: LeftNavigationResizeSession | null = null;
+  // #487 phase-3 review, blocker 1 — a pointer drag's own grab point, recorded
+  // at `mousedown` and read only by `advanceTo` below. `dragGripOffsetPx` is
+  // the distance from the navigation's CURRENT occupied edge (where the
+  // handle is actually rendered right now — `leftNavigationWidthPx` of the
+  // session's own `effective` layout at begin time, never a DOM measurement)
+  // to wherever inside the handle the pointer actually grabbed: `clientX`
+  // alone is not the navigation's total width unless the grab happened to
+  // land exactly on the handle's left edge, and nothing forces that. Without
+  // subtracting it, a drag started mid-handle (or the handle's rendered
+  // position sitting somewhere the raw preference doesn't, e.g. viewport-
+  // clamped) reads every subsequent `clientX` as if it WERE the edge, and can
+  // report a proposal that differs from the true preference even when the
+  // pointer never moved from where it landed. `dragMoved` (set only by a real
+  // `mousemove`) plus `dragStartClientX` are what let `onMouseUp` recognize a
+  // pure click-and-release and skip advancing the session at all, rather than
+  // treating the release coordinate as a brand-new raw proposal — see
+  // `onMouseUp`'s own comment.
+  let dragGripOffsetPx = 0;
+  let dragStartClientX = 0;
+  let dragMoved = false;
+
+  function applyAria(layout: LeftNavigationLayout): void {
+    const normalized = normalizeLeftNavigationLayout(layout);
+    const aria = leftNavigationSeparatorAria(normalized, deps.getMaxNavigationTotalPx());
+    el.setAttribute('aria-valuemin', String(aria.valueMin));
+    el.setAttribute('aria-valuemax', String(aria.valueMax));
+    el.setAttribute('aria-valuenow', String(aria.valueNow));
+    el.setAttribute('aria-valuetext', ariaValueText(normalized, aria));
+  }
+
+  // `writeLeftNavigationLayout` (`application/left-nav.ts`) is module-private
+  // there (only ever the other half of THAT module's own single batched
+  // write), so this mirrors its four-field write rather than importing it.
+  // All four fields, including `leftNavSection`: a committed session's `mode`
+  // and `focusedSection` always travel together (the layout's own coherence
+  // invariant — see `core/left-nav-layout.ts`), so writing three of the four
+  // could leave `state` holding an incoherent pair (e.g. `mode: 'wide'` with a
+  // stale non-null `leftNavSection` from before the gesture converted rail to
+  // wide). Only the PERSISTENCE call below is narrowed to three keys —
+  // `leftNavSection` has no preference key at all (`focusedSection` is
+  // session-only, per #487), so nothing here ever calls `prefs.save` for it.
+  // Batched so the reactive ARIA effect below observes one coherent write, not
+  // an intermediate mode/width mismatch mid-assignment.
+  function writeLayout(layout: LeftNavigationLayout): void {
+    batch(() => {
+      state.leftNavMode.value = layout.mode;
+      state.sidebarPx = layout.wideWidthPx;
+      state.leftNavDrawerPx = layout.drawerWidthPx;
+      state.leftNavSection.value = layout.focusedSection;
+    });
+  }
+
+  function announceIfChanged(before: LeftNavigationLayout, after: LeftNavigationLayout): void {
+    const modeChanged = before.mode !== after.mode;
+    const openChanged = (before.focusedSection !== null) !== (after.focusedSection !== null);
+    if (!modeChanged && !openChanged) return; // a plain width change — no chatter.
+    deps.announce?.(`Left navigation: ${describeOccupiedWidth(after)}`);
+  }
+
+  function commitSession(finished: LeftNavigationResizeSession): void {
+    const committed = commitLeftNavigationResize(finished);
+    // Paint with the session's own final, viewport-clamped `effective` layout —
+    // never `committed`, which can legitimately hold a larger, un-clamped
+    // "honest preference" (the restore-while-clamped case below) that would
+    // overflow the viewport if painted directly. For a pointer drag this is a
+    // harmless repaint of the identical layout `advanceTo` already applied
+    // (`onMouseUp` calls `advanceTo` immediately before `endDrag`/
+    // `commitSession`); for the keyboard path (`onKeyDown`) this is the ONLY
+    // place a keyboard-driven resize ever reaches the DOM at all.
+    deps.applyEffectiveLayout(finished.effective);
+    writeLayout(committed);
+    deps.prefs.save('leftNavMode', committed.mode);
+    deps.prefs.save('sidebarPx', committed.wideWidthPx);
+    deps.prefs.save('leftNavDrawerPx', committed.drawerWidthPx);
+    applyAria(committed);
+    announceIfChanged(finished.preferredAtStart, committed);
+  }
+
+  // One reactive effect keeps ARIA current whenever `mode`/`focusedSection`
+  // change for ANY reason — including a rail click elsewhere in the shell
+  // (`left-rail.ts`'s `toggleFocusedSection`) that this module never
+  // initiated. Runs once immediately (the mount-time paint), then on every
+  // dependency change. `sidebarPx`/`leftNavDrawerPx` are plain fields, not
+  // signals, so a WIDTH-only change from THIS module's own gestures relies on
+  // `commitSession`'s own `applyAria(committed)` call above, not this effect.
+  const disposeAriaEffect = effect(() => {
+    state.leftNavMode.value;
+    state.leftNavSection.value;
+    applyAria(readLeftNavigationLayout(state));
+  });
+
+  /**
+   * Advance the in-progress session to `clientX`. The shell-left offset is 0
+   * today (phase 1's note in `core/left-nav-layout.ts`) — a future left
+   * gutter would subtract it from `clientX` here, once, in this one place.
+   */
+  function advanceTo(clientX: number): void {
+    // `!`: `onMouseMove`/`onMouseUp` are only ever listening on `win` while a
+    // session is active — attached in `onMouseDown`, detached in `endDrag` —
+    // so `advanceTo` is never reached with `session` null.
+    //
+    // `dragGripOffsetPx` (#487 phase-3 review, blocker 1): the pointer's own
+    // `clientX` is the grab point, not the navigation edge — subtracting the
+    // grip offset recovers the edge regardless of where in the handle the
+    // drag started, so the panel's edge tracks under the SAME point the
+    // pointer grabbed rather than snapping to wherever the raw coordinate
+    // happens to sit.
+    const totalPx = clientX - dragGripOffsetPx;
+    const proposedLayout = resolveLeftNavigationDrag(session!.proposed, totalPx);
+    session = advanceLeftNavigationResize(session!, proposedLayout, deps.getMaxNavigationTotalPx());
+    deps.applyEffectiveLayout(session.effective);
+    applyAria(session.effective);
+  }
+
+  function onMouseMove(ev: LeftNavSeparatorPointerEvent): void {
+    dragMoved = true;
+    advanceTo(ev.clientX);
+  }
+
+  /** The shared "stop listening for the mouse half of a drag" steps —
+   *  factored out so both `endDrag()` and `cancelActiveSession()` (#487
+   *  phase-3 review, bug 2) can detach without duplicating the three lines. */
+  function detachDragListeners(): void {
+    el.classList.remove('dragging');
+    win.removeEventListener('mousemove', onMouseMove);
+    win.removeEventListener('mouseup', onMouseUp);
+  }
+
+  /** Stop listening for the mouse half of a drag and commit whatever the
+   *  session currently holds — used by mouseup (after one final `advanceTo`)
+   *  AND by blur/visibilitychange (with no final coordinate — commit the
+   *  session's CURRENT state as-is, never a rollback to session start).
+   *
+   *  Re-clamps against the CURRENT budget immediately before committing
+   *  (#487 phase-3 review, bug 3): `onMouseUp` already re-clamps via its own
+   *  `advanceTo(ev.clientX)` call just above this one, so for that path this
+   *  is a harmless redundant re-clamp against the identical, already-current
+   *  budget. For `onBlur`/`onVisibilityChange` — which call `endDrag()`
+   *  directly, with no fresh clamp first — this is the first real clamp
+   *  against whatever the budget is NOW, rather than committing a session
+   *  whose `effective`/`proposed` can still reflect a budget measured before
+   *  the window shrank while the drag was in progress (and the width
+   *  observer's own repaint was skipped because `isSessionActive()` was
+   *  true). Passing `session.proposed` back in as the raw proposal leaves the
+   *  raw proposal itself untouched — only `effective` is refreshed. */
+  function endDrag(): void {
+    if (!session) return;
+    detachDragListeners();
+    const reclamped = advanceLeftNavigationResize(session, session.proposed, deps.getMaxNavigationTotalPx());
+    session = null;
+    commitSession(reclamped);
+  }
+
+  /** See `LeftNavSeparatorHandle.cancelActiveSession`'s own doc comment. */
+  function cancelActiveSession(): void {
+    if (!session) return;
+    detachDragListeners();
+    session = null;
+  }
+
+  function onMouseUp(ev: LeftNavSeparatorPointerEvent): void {
+    // #487 phase-3 review, blocker 1 — a pure click-and-release, with no
+    // genuine movement anywhere between `mousedown` and this event, must
+    // preserve `preferredAtStart` untouched: `session.proposed` is still
+    // exactly the preference `beginLeftNavigationResize` captured, and
+    // `endDrag`'s own reclamp-and-commit below already leaves an unchanged
+    // `proposed` alone (`commitLeftNavigationResize` only ever writes a
+    // band's width when the raw proposal actually differs from the start).
+    // Calling `advanceTo` here regardless — as before this fix — would treat
+    // the release coordinate as a brand-new raw proposal even though the user
+    // asked for no change, silently overwriting the stored preference with
+    // whatever pixel the handle happened to be rendered at (a viewport clamp
+    // makes this arbitrarily far from the real preference). `dragMoved` is
+    // set by any real `mousemove`; the `clientX` comparison also catches a
+    // release at a different point with no intervening `mousemove` at all
+    // (unusual, but not impossible for a synthetic or coalesced event).
+    if (dragMoved || ev.clientX !== dragStartClientX) {
+      // The LAST coordinate before committing — never whatever the last
+      // mousemove happened to leave (that can differ from the release point).
+      advanceTo(ev.clientX);
+    }
+    endDrag();
+  }
+
+  // `el` is always a real DOM element (never an injected fake, unlike
+  // `win`/`target`), so its own listeners are typed against the real DOM
+  // event types directly — no cast needed, and a plain fixture is never
+  // dispatched through it in tests either.
+  function onMouseDown(ev: MouseEvent): void {
+    ev.preventDefault();
+    el.classList.add('dragging');
+    session = beginLeftNavigationResize(readLeftNavigationLayout(state), deps.getMaxNavigationTotalPx());
+    // The grip offset is measured against the session's own `effective`
+    // layout — the CURRENT rendered occupied width — never a DOM measurement:
+    // `leftNavigationWidthPx` is the same pure derivation `app-shell.ts`'s
+    // paint already used to get the sidebar to this pixel in the first place,
+    // so this needs no `getBoundingClientRect()` seam of its own and stays
+    // exact regardless of a viewport clamp.
+    dragGripOffsetPx = ev.clientX - leftNavigationWidthPx(session.effective);
+    dragStartClientX = ev.clientX;
+    dragMoved = false;
+    win.addEventListener('mousemove', onMouseMove);
+    win.addEventListener('mouseup', onMouseUp);
+  }
+
+  // No coordinate to read on either event — happy-dom cannot fake
+  // `document.visibilityState` regardless, so both simply stop-and-commit
+  // whatever the session already holds. A no-op when no drag is active.
+  function onBlur(): void { endDrag(); }
+  function onVisibilityChange(): void { endDrag(); }
+
+  function onKeyDown(ev: KeyboardEvent): void {
+    // A pointer session is authoritative while it is in progress (reachable:
+    // Tab-focus the separator, then mousedown it too — focus survives a
+    // mousedown on an already-focused element — and press an arrow while the
+    // button is still held). Building and committing a SECOND, keyboard-only
+    // session here would leave the original pointer session still installed,
+    // ready to overwrite this keydown's outcome on its own eventual
+    // mouseup/blur. The simpler, less surprising policy is to ignore keyboard
+    // input entirely until the pointer gesture ends, rather than merging or
+    // cancelling one session in favour of the other. No `preventDefault()`
+    // either — this is "not handled right now", not "handled and consumed",
+    // mirroring `resolveLeftNavigationKey`'s own null-return convention for a
+    // key this module does not act on.
+    if (session) return;
+    const layout = readLeftNavigationLayout(state);
+    const resolved = resolveLeftNavigationKey(layout, ev);
+    if (resolved === null) return; // not one of ours — no preventDefault, no session.
+    ev.preventDefault();
+    // A single keydown is its own complete session: begin → one advance →
+    // commit, immediately, through the exact same machinery a drag uses.
+    const keySession = advanceLeftNavigationResize(
+      beginLeftNavigationResize(layout, deps.getMaxNavigationTotalPx()),
+      resolved,
+      deps.getMaxNavigationTotalPx(),
+    );
+    commitSession(keySession);
+  }
+
+  el.addEventListener('mousedown', onMouseDown);
+  el.addEventListener('keydown', onKeyDown);
+  win.addEventListener('blur', onBlur);
+  target.addEventListener('visibilitychange', onVisibilityChange);
+
+  function dispose(): void {
+    disposeAriaEffect();
+    el.removeEventListener('mousedown', onMouseDown);
+    el.removeEventListener('keydown', onKeyDown);
+    win.removeEventListener('blur', onBlur);
+    target.removeEventListener('visibilitychange', onVisibilityChange);
+    // Defensive: harmless no-op if a drag isn't in progress, but guarantees no
+    // lingering mousemove/mouseup handler if dispose() runs mid-drag.
+    win.removeEventListener('mousemove', onMouseMove);
+    win.removeEventListener('mouseup', onMouseUp);
+    // Leave no half-finished gesture behind regardless of what called
+    // dispose() mid-drag: the shell's own teardown path typically replaces
+    // this DOM shortly afterward anyway, but this module's own contract
+    // should not depend on that — a caller that inspects `el` or a would-be
+    // `isSessionActive()` after dispose() should see a clean state, not a
+    // dangling `.dragging` class or a session nothing will ever commit.
+    el.classList.remove('dragging');
+    session = null;
+  }
+
+  return {
+    dispose, refreshAria: applyAria, isSessionActive: () => session !== null, cancelActiveSession,
+  };
+}
diff --git a/src/ui/left-rail.ts b/src/ui/left-rail.ts
new file mode 100644
index 00000000..283ce7ce
--- /dev/null
+++ b/src/ui/left-rail.ts
@@ -0,0 +1,129 @@
+// #487 phase 3 — the compact icon rail. Four launcher buttons, one per
+// `LEFT_NAV_SECTIONS` entry (rail order), built from the section registry
+// (`nav-sections.ts`) so a rail tooltip/aria-label can never disagree with the
+// wide switchers' own label for the same section.
+//
+// This module owns DOM + behaviour only: the rail's WIDTH (`LEFT_RAIL_PX`) is
+// informational here and is CSS's job in a later step, and the drawer this
+// rail's buttons control does not exist as a separate element yet — `showSection`
+// keeps living on the section registry, this module just points every button's
+// `aria-controls` at whatever single id a later step gives the drawer container.
+//
+// Reactivity: each button's `aria-expanded` is driven by its own `effect()`
+// reading `state.leftNavSection` — a section's drawer is "open" exactly when
+// `state.leftNavSection.value === section` (`application/left-nav.ts`'s own
+// notion of the focused section). One effect per button, not one for the whole
+// rail — all four still subscribe to the same signal and so all four re-run on
+// every change (signals have no per-effect diffing that would let only the two
+// buttons whose expanded state actually flipped react), but each is a single
+// attribute write, so four small effects stay a reasonable design without
+// claiming a selectivity the primitive doesn't provide.
+//
+// A rail click is a TOGGLE (`toggleFocusedSection`), not an idempotent open
+// (`openFocusedSection`): clicking the already-open section's icon closes the
+// drawer, which is #487's own rail-click semantics and is NOT what the
+// drag-hover seam (#428) wants — that seam calls `openFocusedSection` directly,
+// bypassing this module entirely.
+
+import { effect } from '@preact/signals-core';
+import type { Signal } from '@preact/signals-core';
+import { h } from './dom.js';
+import { LEFT_NAV_SECTIONS } from '../core/left-nav-layout.js';
+import type { LeftNavigationSection } from '../core/left-nav-layout.js';
+import { toggleFocusedSection } from '../application/left-nav.js';
+import type { LeftNavApp } from '../application/left-nav.js';
+import type { NavSectionRegistry } from './nav-sections.js';
+
+/** The state slice the rail reads — just enough to know which section (if any)
+ *  the focused drawer currently shows. */
+export interface LeftRailStateSlice {
+  readonly leftNavSection: Signal<LeftNavigationSection | null>;
+}
+
+export interface LeftRailDeps {
+  /** Reused verbatim from `application/left-nav.ts` — a click routes through
+   *  its own `toggleFocusedSection`, never a locally re-implemented write. */
+  app: LeftNavApp;
+  /** Only metadata lookup is needed — the rail neither renders a section's own
+   *  content nor decides which pane exposes it. */
+  registry: Pick<NavSectionRegistry, 'entry'>;
+  state: LeftRailStateSlice;
+  /** The stable DOM id of the (single, content-swapping) focused-drawer
+   *  container a later step gives the sidebar element — every launcher's
+   *  `aria-controls` points at this same id, since all four buttons control
+   *  the one drawer, just with different content. */
+  drawerElementId: string;
+}
+
+export interface LeftRailHandle {
+  readonly el: HTMLElement;
+  /** Stop every per-button reactive effect. Idempotent-safe to call once. */
+  dispose(): void;
+  /**
+   * Move focus to `section`'s own launcher button. #487 phase 3 step 4's
+   * Escape handler (`app-shell.ts`) calls this to return focus to the rail
+   * icon that opened a focused drawer once Escape has closed it — a no-op if
+   * `section` somehow has no button (unreachable in practice: every member of
+   * `LEFT_NAV_SECTIONS` gets one below).
+   */
+  focusSection(section: LeftNavigationSection): void;
+}
+
+/**
+ * Build the rail `<nav>` and its four launcher buttons. Icon-only: no text
+ * label, `title` carries the short section name (#487's own "Rail state"
+ * table names it `title`), `aria-label` carries the longer "Open … navigation"
+ * sentence `NAV_SECTION_META` already defines for exactly this purpose — the
+ * two are deliberately different strings, not one value doing double duty.
+ *
+ * Active-state styling hook: `aria-expanded="true"` on the active section's
+ * button IS the active-state selector (`[aria-expanded="true"]`) — no separate
+ * `.active` class, since the ARIA attribute already carries that information
+ * and a second copy of it would be one more place for the two to drift apart.
+ */
+export function buildLeftRail(deps: LeftRailDeps): LeftRailHandle {
+  const { app, registry, state, drawerElementId } = deps;
+  const disposers: (() => void)[] = [];
+  // Keyed by section rather than array index, so `focusSection` reads as "the
+  // button for THIS section" rather than relying on `LEFT_NAV_SECTIONS` order
+  // staying in sync with wherever a caller indexes from.
+  const buttonsBySection = new Map<LeftNavigationSection, HTMLButtonElement>();
+
+  const buttons = LEFT_NAV_SECTIONS.map((section) => {
+    const entry = registry.entry(section);
+    const button = h('button', {
+      type: 'button',
+      class: 'left-rail-btn',
+      title: entry.label,
+      'aria-label': entry.accessibleLabel,
+      'aria-controls': drawerElementId,
+      'aria-expanded': 'false',
+      // Explicit `button.focus()`, not left to the browser's native
+      // click-focus behaviour: Chromium/Firefox focus a clicked `<button>`
+      // automatically, so closing an open drawer by clicking its own icon
+      // happens to leave focus on that icon there — matching the Escape path's
+      // EXPLICIT `leftRail.focusSection(section)` call in `app-shell.ts`.
+      // WebKit/Safari does NOT natively focus a clicked button (a real,
+      // long-standing engine difference), so without this call Safari drops
+      // focus to `<body>` on close instead of returning it to the rail icon,
+      // an inconsistency with the Escape path's cross-browser-reliable
+      // behaviour. Ordering relative to `toggleFocusedSection` does not
+      // matter — focusing the button does not depend on the section's
+      // resulting open/closed state.
+      onclick: () => { toggleFocusedSection(app, section); button.focus(); },
+    }, entry.icon());
+    buttonsBySection.set(section, button);
+    disposers.push(effect(() => {
+      button.setAttribute('aria-expanded', state.leftNavSection.value === section ? 'true' : 'false');
+    }));
+    return button;
+  });
+
+  const el = h('nav', { class: 'left-rail', 'aria-label': 'Navigation rail' }, ...buttons);
+
+  return {
+    el,
+    dispose: () => { for (const dispose of disposers) dispose(); },
+    focusSection: (section) => { buttonsBySection.get(section)?.focus(); },
+  };
+}
diff --git a/src/ui/nav-sections.ts b/src/ui/nav-sections.ts
index c549547c..48e994d8 100644
--- a/src/ui/nav-sections.ts
+++ b/src/ui/nav-sections.ts
@@ -14,10 +14,14 @@
 // The hosts are built ONCE and never rebuilt, extending #426's `buildSidebarUpper`
 // contract from the upper pane to the lower one. That is what makes #487's "Wide
 // and focused presentations share and preserve all navigation state" true by
-// construction rather than by restoration logic: a phase-3 mode change MOVES a
-// host element between containers, and a moved element keeps its input values, its
-// expansion, its lazily-loaded rows and its scroll offset. Nothing here restores
-// anything, because nothing here destroys anything.
+// construction rather than by restoration logic: a phase-3 mode change
+// RE-PRESENTS `.sidebar` itself (`app-shell.ts`'s `data-nav-mode` attribute,
+// written by its own `applyEffectiveLeftNavigationLayout`) rather than moving a
+// host element between containers — the four hosts below stay exactly where
+// they are, and only which one is exposed, plus the sidebar's own presentation,
+// changes. A host's input values, expansion, lazily-loaded rows and scroll
+// offset all survive for the same reason either design would have preserved
+// them: nothing here restores anything, because nothing here destroys anything.
 //
 // What this module deliberately does NOT own: any section's rendering, search or
 // domain behaviour. `buildSidebarUpper` still builds the Databases/Dashboards
@@ -103,8 +107,9 @@ export const NAV_SECTION_META: Readonly<Record<LeftNavigationSection, NavSection
 
 export interface NavSectionEntry extends NavSectionMeta {
   readonly section: LeftNavigationSection;
-  /** The single persistent host. Built once, moved between containers, never
-   *  rebuilt. */
+  /** The single persistent host. Built once and never rebuilt — phase 3
+   *  re-presents `.sidebar` itself rather than moving this host between
+   *  containers. */
   readonly host: HTMLElement;
 }
 
@@ -118,8 +123,11 @@ export interface NavSectionRegistry {
    *
    * Scoped to the pane because the wide sidebar shows one upper section AND one
    * lower section simultaneously; a global "exactly one of four" would blank half
-   * the sidebar. Phase 3's drawer shows one of four, and gets there by moving the
-   * host rather than by widening this rule.
+   * the sidebar. Phase 3's drawer shows one of four, and gets there by
+   * re-presenting `.sidebar` itself (`app-shell.ts`'s `data-nav-mode`) — this
+   * `showSection` rule stays exactly as-is, per-pane, unchanged; the drawer's
+   * "show only one" additionally hides whichever pane the focused section is
+   * NOT in, one level up, not by widening what this method does.
    */
   showSection(section: LeftNavigationSection): void;
 }
diff --git a/src/ui/saved-history.ts b/src/ui/saved-history.ts
index 496ce974..5a14f6ff 100644
--- a/src/ui/saved-history.ts
+++ b/src/ui/saved-history.ts
@@ -1,16 +1,24 @@
 // The bottom sidebar pane: a Library / History switcher and, per section, its own
 // search box and list. Saved items support favorite (star), inline rename (pencil)
-// and delete (trash). The search filters the active list (name/description/sql for
-// Library, sql for History); it re-renders only the list so typing keeps focus.
+// and delete (trash). The search filters a section's own list (name/description/sql
+// for Library, sql for History); it re-renders only the list so typing keeps focus.
 //
 // #487 phase 2 split the two sections' DOM: each renders into its own persistent
 // search/list pair (`ui/nav-sections.ts` builds them and hosts them), where before
-// both shared one pair that a section switch repainted. Everything below still
-// renders ONLY the active section, exactly as it always did — the switcher's
-// clear-the-search semantics are unchanged, and the inactive host simply keeps the
-// DOM it last painted until it is shown again. What the split buys is that a
-// container can move one section's live elements (phase 3's focused drawer)
-// without taking the other section's content along.
+// both shared one pair that a section switch repainted.
+//
+// #487 phase 3 finishes the split: BOTH sections now render their own content
+// unconditionally, independently of which one is exposed — mirroring the upper
+// pane's `renderSchema`/`renderDashboardTree`, which have always painted on their
+// own data triggers regardless of `state.upperRole`. Exposure (which host is
+// visible) is a wholly separate concern, owned by `app-shell.ts`'s registry
+// effect. This fixes two real bugs the old "paint only the active section" design
+// had: the section that wasn't active at mount never got its first paint (blank
+// until the first switch), and the section that wasn't active when its own data
+// changed (e.g. a query runs and gets recorded to History while Library is shown)
+// went stale until the next unrelated repaint. Each section also now keeps its
+// OWN filter text (`state.lowerNavigationFilters`) rather than sharing one string,
+// so switching between them no longer clears anything.
 
 import { h } from './dom.js';
 import { Icon } from './icons.js';
@@ -113,43 +121,55 @@ function libraryEntries(app: App): SavedQueryV2[] {
 }
 
 /**
- * The active section, in the registry's vocabulary. EVERY branch in this module
- * goes through this one function rather than comparing `sidePanel` to `'saved'`
- * directly (#487 phase 2). With two hosts, a reader that resolves an unrecognized
- * value differently from the shell's exposure effect would expose one section's
- * host and paint into the other's — a blank pane. `state.ts` also decodes the
- * stored value at load, so the two guards are belt and braces on purpose.
+ * The active section, in the registry's vocabulary — used ONLY to decide the tab
+ * row's "active" class/`aria-pressed` state. It no longer decides which section's
+ * content renders (#487 phase 3: both sections always render their own, regardless
+ * of which is exposed). `state.ts` also decodes the stored value at load.
  */
 const activeSection = (app: App): LowerNavigationSection =>
   sectionForSidePanelKey(app.state.sidePanel.value);
 
-/** The ACTIVE section's own search box and list (#487 phase 2) — the two lower
- *  sections no longer share one pair. */
-const activeEls = (app: App): { search: HTMLElement | undefined; list: HTMLElement | undefined } =>
-  activeSection(app) === 'library'
+/** A given section's OWN search box and list hosts. Deliberately keyed by an
+ *  explicit `section` parameter rather than "whichever is active" (#487 phase 3)
+ *  — each section's render functions always target their own hosts. */
+const elsFor = (app: App, section: LowerNavigationSection): { search: HTMLElement | undefined; list: HTMLElement | undefined } =>
+  section === 'library'
     ? { search: app.dom.savedSearch, list: app.dom.savedList }
     : { search: app.dom.historySearch, list: app.dom.historyList };
 
-export function renderSavedHistory(app: App): void {
+/** Read a section's own search filter text (#487 phase 3 — each lower-navigation
+ *  section keeps its own, so switching between them preserves both instead of
+ *  clearing one shared string). Exported for later phase-3 steps. */
+export function filterFor(state: AppState, section: LowerNavigationSection): string {
+  return state.lowerNavigationFilters[section];
+}
+
+/** Write a section's own search filter text. See `filterFor`. */
+export function setFilterFor(state: AppState, section: LowerNavigationSection, value: string): void {
+  state.lowerNavigationFilters[section] = value;
+}
+
+/**
+ * The tab row only: the Library/History switcher plus the Library count badge.
+ * #487 phase 2: the tab row speaks the registry's SECTION vocabulary and derives
+ * the persisted value once, through the one mapping — rather than repeating the
+ * `'library' means 'saved'` knowledge here.
+ *
+ * #487 phase 3: switching sections no longer clears anything — each section keeps
+ * its own filter text (`state.lowerNavigationFilters`), preserved across every
+ * switch. `switchTo` now only persists the choice and sets which section is
+ * exposed.
+ */
+export function renderLowerTabs(app: App): void {
   const tabsRow = app.dom.savedTabsRow;
-  const list = activeEls(app).list;
-  if (!tabsRow || !list) return;
+  if (!tabsRow) return;
   const state = app.state;
   // #427: the count is the LIBRARY count, not every stored query — the owned
   // copies are reachable through the Dashboard tree, not through this list.
   const count = libraryEntries(app).length;
 
-  // Switching panes clears the search so each tab starts unfiltered. Clear the
-  // (plain) filter first, then set the sidePanel signal — its render effect runs
-  // synchronously on assignment and must see the cleared filter. No manual
-  // re-render call: the effect in createApp() repaints.
-  //
-  // #487 phase 2: the tab row speaks the registry's SECTION vocabulary and derives
-  // the persisted value once, through the one mapping — rather than repeating the
-  // `'library' means 'saved'` knowledge here.
   const switchTo = (section: LowerNavigationSection): void => {
     const panel = sidePanelKeyFor(section);
-    state.libraryFilter = '';
     app.prefs.save('sidePanel', panel);
     state.sidePanel.value = panel;
   };
@@ -158,6 +178,9 @@ export function renderSavedHistory(app: App): void {
     const meta = NAV_SECTION_META[section];
     return h('button', {
       class: 'side-tab' + (active === section ? ' active' : ''),
+      type: 'button',
+      'data-section': section,
+      'aria-pressed': active === section ? 'true' : 'false',
       onclick: () => switchTo(section),
     }, meta.icon(), h('span', null, meta.label), extra);
   };
@@ -166,34 +189,34 @@ export function renderSavedHistory(app: App): void {
     tab('library', count ? h('span', { class: 'side-count' }, '· ' + count) : null),
     tab('history', null),
   );
-
-  renderSearch(app);
-  renderList(app);
 }
 
-/** Re-render just the active list (called on every keystroke without rebuilding
- * the search input, so the caret/focus survive filtering). */
-function renderList(app: App): void {
-  // `!`: every caller (renderSavedHistory, renderSearch below) only reaches
-  // this after confirming the active section's list is mounted.
-  const list = activeEls(app).list!;
+/** Render a given section's own list into a given host — favorites/rename/delete
+ *  for Library, delete for History (`renderSaved`/`renderHistory` below), reading
+ *  that section's OWN filter. Independent of which section is exposed. */
+function renderSectionList(app: App, section: LowerNavigationSection, list: HTMLElement): void {
   list.replaceChildren();
-  if (activeSection(app) === 'library') renderSaved(app, list);
+  if (section === 'library') renderSaved(app, list);
   else renderHistory(app, list);
 }
 
 /**
- * Render the search box into the ACTIVE section's own search host (built once per
- * full render; a section with no items shows nothing). Its `input` handler mutates
- * `state.libraryFilter` and re-renders only the list, so it stays focused.
+ * Render the search box into a given section's OWN search host (built once per
+ * full render; a section with no items shows nothing). Its `input` handler
+ * mutates that section's own filter slot and re-renders only that section's own
+ * list, so it stays focused.
+ *
+ * #487 phase 3 removed the old "does this input still own the active list"
+ * guard: with one shared `libraryFilter` string, a stale/hidden input's events
+ * could corrupt the OTHER section's filter and repaint the wrong list. With
+ * per-section storage that is structurally impossible — a hidden Library input
+ * can only ever write Library's own filter and repaint Library's own list,
+ * which is correct regardless of whether Library is currently exposed.
  */
-function renderSearch(app: App): void {
-  const box = activeEls(app).search;
-  if (!box) return;
+function renderSectionSearch(app: App, section: LowerNavigationSection, box: HTMLElement): void {
   const state = app.state;
   // Gated on the LIBRARY count (#427): a workspace whose every query is owned
   // has an empty list, so a search box over it would filter nothing.
-  const section = activeSection(app);
   const isLibrary = section === 'library';
   const hasItems = isLibrary
     ? libraryEntries(app).length > 0
@@ -204,39 +227,67 @@ function renderSearch(app: App): void {
   const input = h('input', {
     class: 'sv-search-input', type: 'text',
     placeholder: isLibrary ? 'Search library queries…' : 'Search history…',
-    value: state.libraryFilter,
+    value: filterFor(state, section),
   });
   const clear = h('button', { class: 'sv-search-clear', title: 'Clear' }, Icon.close());
   const syncClear = (): void => { clear.style.display = input.value ? '' : 'none'; };
-  // These controls belong to the section that was active when they were built, and
-  // that host now OUTLIVES the switch away from it (#487 phase 2) — the inactive
-  // host keeps its DOM, listeners included. `state.libraryFilter` is still one
-  // shared string and `renderList` still paints the ACTIVE section, so an event
-  // from a stale input would rewrite the filter and repaint the OTHER section's
-  // list with this section's search text. Unreachable through the UI today (a
-  // `display: none` subtree receives no pointer or keyboard events) — but phase 3
-  // moves hosts between containers, where a host can be visible while a different
-  // section is active, so ownership is enforced here rather than left to CSS.
-  //
-  // A guard, not a redesign: per-section filter state is what actually fixes the
-  // shared-string design, and #487 phase 3 owns that (see the ship log).
-  const ownsTheList = (): boolean => activeSection(app) === section;
+  const list = elsFor(app, section).list;
   const setFilter = (v: string): void => {
-    if (!ownsTheList()) return;
-    input.value = v; state.libraryFilter = v; syncClear(); renderList(app);
+    input.value = v;
+    setFilterFor(state, section, v);
+    syncClear();
+    if (list) renderSectionList(app, section, list);
   };
 
   input.addEventListener('input', () => {
-    if (!ownsTheList()) return;
-    state.libraryFilter = input.value; syncClear(); renderList(app);
+    setFilterFor(state, section, input.value);
+    syncClear();
+    if (list) renderSectionList(app, section, list);
   });
-  input.addEventListener('keydown', (e) => { if (e.key === 'Escape') { e.preventDefault(); setFilter(''); } });
+  // #487 phase 3 step 4: an EMPTY search box does not claim Escape — leaving it
+  // unclaimed (no `preventDefault()`) lets the key bubble up to the focused
+  // drawer's own Escape handler (`app-shell.ts`) so Escape can close the drawer
+  // even while this input is focused. A non-empty box still clears itself
+  // first, exactly as before — a genuinely active filter is this input's own
+  // business to consume.
+  input.addEventListener('keydown', (e) => { if (e.key === 'Escape' && input.value !== '') { e.preventDefault(); setFilter(''); } });
   clear.addEventListener('click', () => { setFilter(''); input.focus(); });
   syncClear();
 
   box.append(h('span', { class: 'sv-search-icon' }, Icon.search()), input, clear);
 }
 
+/** Library's own search + list, into Library's own hosts — unconditionally,
+ *  regardless of whether Library is currently exposed (#487 phase 3). */
+export function renderLibrarySection(app: App): void {
+  const { search, list } = elsFor(app, 'library');
+  if (search) renderSectionSearch(app, 'library', search);
+  if (list) renderSectionList(app, 'library', list);
+}
+
+/** History's own search + list, into History's own hosts — unconditionally,
+ *  regardless of whether History is currently exposed (#487 phase 3). */
+export function renderHistorySection(app: App): void {
+  const { search, list } = elsFor(app, 'history');
+  if (search) renderSectionSearch(app, 'history', search);
+  if (list) renderSectionList(app, 'history', list);
+}
+
+/**
+ * The facade: repaint the tab row and BOTH sections' own content, always (#487
+ * phase 3 — mirrors the upper pane, where `renderSchema`/`renderDashboardTree`
+ * each paint on their own triggers regardless of `state.upperRole`). Existing
+ * internal call sites (favorite toggle, inline edit commit, row delete,
+ * history-row delete) keep calling this facade unchanged — repainting all three
+ * on those broader events is simple, safe, and cheap enough for these small
+ * lists.
+ */
+export function renderSavedHistory(app: App): void {
+  renderLowerTabs(app);
+  renderLibrarySection(app);
+  renderHistorySection(app);
+}
+
 function renderSaved(app: App, list: HTMLElement): void {
   const state = app.state;
   const surfaceGeneration = app.captureSurfaceGeneration();
@@ -250,9 +301,10 @@ function renderSaved(app: App, list: HTMLElement): void {
   }
   // Favourites first, then `workspace.queries[]` order — the projection filters,
   // it never reorders (#427).
-  const items = filterSaved(sortedSaved({ ...state, savedQueries: library }), state.libraryFilter);
+  const libraryFilter = filterFor(state, 'library');
+  const items = filterSaved(sortedSaved({ ...state, savedQueries: library }), libraryFilter);
   if (items.length === 0) {
-    list.appendChild(h('div', { class: 'saved-empty' }, 'No library queries match “' + state.libraryFilter.trim() + '”.'));
+    list.appendChild(h('div', { class: 'saved-empty' }, 'No library queries match “' + libraryFilter.trim() + '”.'));
     return;
   }
   for (const q of items) {
@@ -429,9 +481,10 @@ function renderHistory(app: App, list: HTMLElement): void {
     list.appendChild(h('div', { class: 'saved-empty' }, 'No history yet.'));
     return;
   }
-  const items = filterHistory(state.history, state.libraryFilter);
+  const historyFilter = filterFor(state, 'history');
+  const items = filterHistory(state.history, historyFilter);
   if (items.length === 0) {
-    list.appendChild(h('div', { class: 'saved-empty' }, 'No history matches “' + state.libraryFilter.trim() + '”.'));
+    list.appendChild(h('div', { class: 'saved-empty' }, 'No history matches “' + historyFilter.trim() + '”.'));
     return;
   }
   for (const ent of items as HistoryEntry[]) {
diff --git a/src/ui/sidebar-upper.ts b/src/ui/sidebar-upper.ts
index bacc08d5..8ce9b2e5 100644
--- a/src/ui/sidebar-upper.ts
+++ b/src/ui/sidebar-upper.ts
@@ -119,6 +119,7 @@ export function renderUpperRoleTabs(app: SidebarUpperApp): void {
     h('button', {
       class: 'side-tab' + (active === role ? ' active' : ''),
       type: 'button',
+      'data-section': role,
       'aria-pressed': active === role ? 'true' : 'false',
       onclick: () => {
         // Changing role hides one tree and shows the other, so a deferred
diff --git a/src/ui/splitters.ts b/src/ui/splitters.ts
index 01a8b81d..55679ce3 100644
--- a/src/ui/splitters.ts
+++ b/src/ui/splitters.ts
@@ -3,14 +3,21 @@
 // (window + persistence) for testing.
 
 import { clamp } from '../core/format.js';
-import { clampWideWidthPx } from '../core/left-nav-layout.js';
 
 // 'docPane' (#313): the persistent documentation pane's own bounded-resize
 // axis — identical geometry to 'drawer' (right-edge anchored, same
 // clampDrawerWidth bounds) but writes `docPanePx` instead of `cellDrawerPx`,
 // so a docs-pane drag never clobbers (or reads) the cell-detail/rows-viewer
 // drawer's own persisted width.
-export type SplitterAxis = 'col' | 'sideRow' | 'row' | 'drawer' | 'docPane';
+//
+// #487 phase 3 removed 'col' (the wide sidebar's own width): the left
+// navigation's separator (`ui/left-nav-separator.ts`) now owns that gesture
+// entirely, routing every proposal through the mode reducer
+// (`core/left-nav-layout.ts`) instead of this module's bare clamp — a sidebar
+// drag can fold to a rail or restore, which a splitter axis has no vocabulary
+// for. `app-shell.ts` no longer wires `startDrag` to the `.col-resize` handle
+// at all.
+export type SplitterAxis = 'sideRow' | 'row' | 'drawer' | 'docPane';
 
 /** The subset of a real (or fake, in tests) pointer/mouse event `dragValue`/
  *  `startDrag` read — never the full DOM `MouseEvent`, so a plain test
@@ -22,7 +29,7 @@ export interface DragPoint {
 
 /** The subset of a bounding-rect-like `dragValue` reads, by axis: 'sideRow'/
  *  'row' need `top`/`bottom`; 'drawer'/'docPane' need `width` (the viewport
- *  width); 'col' reads neither. */
+ *  width). */
 export interface DragRect {
   top?: number;
   bottom?: number;
@@ -40,27 +47,17 @@ export function clampDrawerWidth(px: number, viewportWidth: number): number {
 }
 
 /**
- * Compute the new size for a drag. `axis` is 'col' (sidebar px), 'sideRow'
- * (sidebar vertical %), 'row' (editor/results %), or 'drawer' (cell-detail /
- * rows-viewer right-hand drawer px, #101). `rect` is the bounding rect of the
- * container being split (unused for 'col'; `{ width }` — the viewport width —
- * for 'drawer'). 'drawer' is anchored to the *right* edge, so its width grows
- * as the cursor moves left: `viewportWidth - clientX`.
- *
- * 'col' defers to `clampWideWidthPx` (#487) rather than repeating the sidebar's
- * [180, 420] bounds. This axis WRITES `sidebarPx`, the same preference
- * `createState` reads back through that function, so a local copy of the bounds
- * here would be a second owner of one width — exactly what
- * `core/left-nav-layout.ts` exists to prevent. Behaviour is unchanged for a real
- * drag (`clientX` is always finite); phase 3 replaces this axis outright with the
- * left-navigation separator, which routes the same proposal through the mode
- * reducer instead of a bare clamp.
+ * Compute the new size for a drag. `axis` is 'sideRow' (sidebar vertical %),
+ * 'row' (editor/results %), or 'drawer'/'docPane' (right-hand drawer px,
+ * #101/#313). `rect` is the bounding rect of the container being split
+ * (`{ width }` — the viewport width — for 'drawer'/'docPane'). 'drawer' is
+ * anchored to the *right* edge, so its width grows as the cursor moves left:
+ * `viewportWidth - clientX`.
  */
 export function dragValue(axis: SplitterAxis, ev: DragPoint, rect?: DragRect): number {
-  if (axis === 'col') return clampWideWidthPx(ev.clientX);
   // `!`: every real caller (startDrag's onMove, via ctx.rectFor(axis)) supplies
   // `width` for 'drawer'/'docPane' and `top`/`bottom` for 'sideRow'/'row' —
-  // the axis dispatch above is exactly the contract that guarantees the field
+  // the axis dispatch below is exactly the contract that guarantees the field
   // this branch reads is present.
   if (axis === 'drawer' || axis === 'docPane') return clampDrawerWidth(rect!.width! - ev.clientX, rect!.width!);
   const pct = clamp(((ev.clientY - rect!.top!) / (rect!.bottom! - rect!.top!)) * 100,
@@ -86,9 +83,8 @@ export interface DragWindow {
 }
 
 /** The splitter-owning caller's persisted geometry (state.ts's AppState
- *  slice) — only the four fields a drag ever writes. */
+ *  slice) — only the fields a drag ever writes. */
 export interface DragState {
-  sidebarPx?: number;
   sideSplitPct?: number;
   editorPct?: number;
   cellDrawerPx?: number;
@@ -112,10 +108,10 @@ export interface DragCtx {
  * Begin a splitter drag. Returns a `cancel()` that stops listening without
  * persisting — for a caller whose drag surface can be torn down mid-drag
  * (e.g. the cell-detail drawer closing via Escape while the mouse button is
- * still down, #101); the plain splitters (col/sideRow/row) don't need it and
+ * still down, #101); the plain splitters (sideRow/row) don't need it and
  * ignore the return value.
  * @param ev      the mousedown event (currentTarget = the handle)
- * @param axis    'col' | 'sideRow' | 'row' | 'drawer'
+ * @param axis    'sideRow' | 'row' | 'drawer' | 'docPane'
  * @param ctx     { win, state, save, rectFor(axis), apply(axis, value) }
  */
 export function startDrag(ev: DragStartEvent, axis: SplitterAxis, ctx: DragCtx): () => void {
@@ -125,8 +121,7 @@ export function startDrag(ev: DragStartEvent, axis: SplitterAxis, ctx: DragCtx):
   handle.classList.add('dragging');
   const onMove = (move: DragPoint): void => {
     const value = dragValue(axis, move, ctx.rectFor(axis));
-    if (axis === 'col') ctx.state.sidebarPx = value;
-    else if (axis === 'sideRow') ctx.state.sideSplitPct = value;
+    if (axis === 'sideRow') ctx.state.sideSplitPct = value;
     else if (axis === 'row') ctx.state.editorPct = value;
     else if (axis === 'docPane') ctx.state.docPanePx = value;
     else ctx.state.cellDrawerPx = value;
@@ -141,8 +136,7 @@ export function startDrag(ev: DragStartEvent, axis: SplitterAxis, ctx: DragCtx):
     stop();
     // `!`: onMove (above) just assigned this same axis's field before any
     // mouseup can fire — a drag always moves before it ends.
-    if (axis === 'col') ctx.save('sidebarPx', ctx.state.sidebarPx!);
-    else if (axis === 'sideRow') ctx.save('sideSplitPct', ctx.state.sideSplitPct!);
+    if (axis === 'sideRow') ctx.save('sideSplitPct', ctx.state.sideSplitPct!);
     else if (axis === 'row') ctx.save('editorPct', ctx.state.editorPct!);
     else if (axis === 'docPane') ctx.save('docPanePx', ctx.state.docPanePx!);
     else ctx.save('cellDrawerPx', ctx.state.cellDrawerPx!);
diff --git a/src/ui/workbench/workbench-session.ts b/src/ui/workbench/workbench-session.ts
index b08a178b..b30aa20d 100644
--- a/src/ui/workbench/workbench-session.ts
+++ b/src/ui/workbench/workbench-session.ts
@@ -66,16 +66,6 @@ export interface WorkbenchStateSlice {
   forceExplain: boolean;
   resultRowLimit: number;
   serverVersion: string | null;
-  /**
-   * Read by runScript's clean-run history branch ('history' ⇒ repaint).
-   *
-   * Derived from `AppState` rather than restated as `Signal<string>` (#487
-   * phase 2): the real signal holds a decoded `'saved' | 'history'`, and a
-   * structural `Signal<string>` here would leave this session type-authorized to
-   * write an arbitrary string into it — re-opening exactly the divergence the
-   * load-boundary decode closes. This slice only ever reads it.
-   */
-  sidePanel: AppState['sidePanel'];
   isMobile: Signal<boolean>;
   mobileView: Signal<'tables' | 'editor' | 'results'>;
   /** Read by the Run-button effect (Run ↔ "Run selection" label). */
@@ -97,15 +87,18 @@ export interface WorkbenchStateSlice {
 export interface WorkbenchHooks {
   /** Per-chunk (run) + per-statement (runScript) results-pane repaint. */
   renderResults(): void;
-  /** runScript's clean-run history repaint when `sidePanel === 'history'`. */
-  renderSavedHistory(): void;
+  /** runScript's clean-run History repaint — unconditional (#487 phase 3):
+   *  History's own content must stay current even while Library is the
+   *  exposed section, since History is not part of any reactive repaint
+   *  effect (`state.history` is a plain array, not a signal). */
+  renderHistorySection(): void;
   cancelSchemaGraph(): void;
   /** Fire-and-forget schema reload after schema-mutating SQL succeeds. */
   loadSchema(): void;
   /** Records a successful single-statement run in history (and, per the real
-   *  app.ts wrapper this replaces, repaints History when it's the open side
-   *  panel — that repaint is this hook's own responsibility, unlike
-   *  `renderSavedHistory` above which the session calls itself for the
+   *  app.ts wrapper this replaces, unconditionally repaints History's own
+   *  content — that repaint is this hook's own responsibility, unlike
+   *  `renderHistorySection` above which the session calls itself for the
    *  script-history path). */
   recordHistory(tab: QueryTab, sql?: string): void;
   recordBoundParams(bp: readonly BoundParamSnapshot[]): void;
@@ -755,7 +748,10 @@ export function createWorkbenchSession(deps: WorkbenchSessionDeps): WorkbenchSes
       // run(): no history for an aborted or failed script).
       if (!aborted && !entries.some((e) => e.status === 'error')) {
         recordScriptHistory(state, originalInput, scriptResult.elapsedMs!, hooks.saveJSON);
-        if (state.sidePanel.value === 'history') hooks.renderSavedHistory();
+        // #487 phase 3: unconditional — History's own content must stay current
+        // even while Library is the exposed section (History is not part of any
+        // reactive repaint effect; see `renderHistorySection`'s own doc comment).
+        hooks.renderHistorySection();
       }
       retireWave(operation);
     }
diff --git a/tests/e2e/dashboard-tree.html b/tests/e2e/dashboard-tree.html
index 625d4615..bb70df3c 100644
--- a/tests/e2e/dashboard-tree.html
+++ b/tests/e2e/dashboard-tree.html
@@ -80,6 +80,13 @@
 
     const root = document.querySelector('#root');
     const app = createApp({ root, broadcastChannel: () => null });
+    // #487 phase 3 — exposed for `left-nav-fold.spec.js`, mirroring the
+    // `window.__app` convention already used by `editor.html`/
+    // `tile-open-workbench.html`/`variable-tab.html`: lets a test read
+    // `app.state.leftNavMode`/`leftNavSection` directly for internal
+    // consistency, alongside the real computed-style assertions that are
+    // this fixture's whole point.
+    window.__app = app;
     // #524: expanding a schema row enters authenticated work. The fixture
     // mounts the shell directly (without normal sign-in bootstrap), so keep an
     // explicit open test epoch for those otherwise stubbed requests.
diff --git a/tests/e2e/left-nav-fold.spec.js b/tests/e2e/left-nav-fold.spec.js
new file mode 100644
index 00000000..6f35f214
--- /dev/null
+++ b/tests/e2e/left-nav-fold.spec.js
@@ -0,0 +1,426 @@
+import { test, expect } from '@playwright/test';
+
+// #487 phase 3 — the compact icon rail and its docked focused drawer, proved
+// against REAL COMPUTED STYLE (`getComputedStyle(el).display`), never just the
+// `.hidden` DOM property or `getBoundingClientRect()` alone. That distinction is
+// the entire point of this file: `applyEffectiveLeftNavigationLayout`
+// (`src/ui/app-shell.ts`) sets `.hidden` on the drawer's non-focused pane and
+// tab rows, but `.side-pane`/`.side-tabs` carried a `display: flex` CSS rule
+// with no `[hidden]` override — so the hide/show logic did NOTHING in a real
+// browser despite every happy-dom unit test passing. That CSS bug is now fixed
+// (`.side-pane[hidden]`/`.side-tabs[hidden] { display: none; }` in
+// `src/styles.css`), but only a real browser can catch a regression of this
+// shape, which is this file's whole job.
+//
+// Reuses `dashboard-tree.html` (#426/#487's fixture): it already mounts the
+// real `mountAppShell` with the rail, sidebar, both tab rows and the section
+// registry live, seeded with a Dashboard + Library query + History. It now also
+// exposes `window.__app` for reading `state.leftNavMode`/`leftNavSection`
+// directly when a test wants internal-consistency confirmation alongside the
+// computed-style checks.
+
+const open = async (page, width = 1280, height = 800) => {
+  await page.setViewportSize({ width, height });
+  await page.goto('/tests/e2e/dashboard-tree.html');
+  await page.waitForFunction(() => window.__ready === true);
+};
+
+/** Drag `.col-resize` to `targetX` the way a real user does — mirrors
+ *  `sidebar-tabs-narrow.spec.js`'s own helper. Grabs the handle at its own
+ *  LEFT EDGE (a zero grip offset, `#487 phase-3 review, blocker 1`): the
+ *  separator's own `advanceTo` corrects for wherever inside the handle the
+ *  pointer actually grabbed, so a grab anywhere else would report a total
+ *  offset by up to the handle's own width — grabbing at the edge is what
+ *  keeps this helper's contract exact. `left-nav-separator.ts`'s `advanceTo`
+ *  reads `ev.clientX` minus that grip offset (the shell-left offset is 0
+ *  today per `core/left-nav-layout.ts`'s own note), so the resulting
+ *  navigation TOTAL width IS `targetX`. */
+const dragSeparatorTo = async (page, targetX) => {
+  const handle = page.locator('.col-resize');
+  const box = await handle.boundingBox();
+  await page.mouse.move(box.x, box.y + box.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(targetX, box.y + box.height / 2, { steps: 5 });
+  await page.mouse.up();
+};
+
+// The rail launchers' `aria-label`s (`nav-sections.ts`'s `NAV_SECTION_META`,
+// #487's own "Rail state" table) — deliberately different strings from each
+// button's `title` tooltip (asserted directly in the first test below).
+const RAIL_LABEL = {
+  databases: 'Open Databases navigation',
+  dashboards: 'Open Dashboards navigation',
+  library: 'Open Library navigation',
+  history: 'Open query History',
+};
+
+const railButton = (page, section) => page.locator(`.left-rail-btn[aria-label="${RAIL_LABEL[section]}"]`);
+
+/** The presentation table `applyEffectiveLeftNavigationLayout` writes, read back
+ *  as REAL computed style wherever a display toggle is involved — never the
+ *  `.hidden` DOM property alone. */
+const navGeometry = () => ({
+  navMode: document.querySelector('.main-row').dataset.navMode,
+  railDisplay: getComputedStyle(document.querySelector('.left-rail')).display,
+  sidebarDisplay: getComputedStyle(document.querySelector('.sidebar')).display,
+  schemaPaneDisplay: getComputedStyle(document.querySelector('.schema-pane')).display,
+  savedPaneDisplay: getComputedStyle(document.querySelector('.saved-pane')).display,
+  upperTabsDisplay: getComputedStyle(document.querySelector('.upper-role-tabs')).display,
+  savedTabsDisplay: getComputedStyle(document.querySelector('.saved-pane > .side-tabs')).display,
+});
+
+test.describe('left navigation rail + focused drawer (#487 phase 3)', () => {
+  test('dragging below the fold threshold folds the sidebar into a 4-icon rail', async ({ page }) => {
+    await open(page);
+    await dragSeparatorTo(page, 50); // comfortably under LEFT_FOLD_THRESHOLD_PX (140)
+
+    const geometry = await page.evaluate(navGeometry);
+    expect(geometry.navMode).toBe('rail');
+    expect(geometry.sidebarDisplay).toBe('none');
+    expect(geometry.railDisplay).not.toBe('none');
+
+    const buttons = await page.evaluate(() => [...document.querySelectorAll('.left-rail-btn')].map((b) => ({
+      title: b.getAttribute('title'),
+      ariaLabel: b.getAttribute('aria-label'),
+      display: getComputedStyle(b).display,
+    })));
+    expect(buttons).toHaveLength(4);
+    for (const button of buttons) {
+      expect(button.display).not.toBe('none');
+      expect(button.title).toBeTruthy();
+      expect(button.ariaLabel).toBeTruthy();
+      // Deliberately distinct strings (#487's own design), not one value doing
+      // double duty — see `left-rail.ts`'s header comment.
+      expect(button.ariaLabel).not.toBe(button.title);
+    }
+  });
+
+  test('clicking a rail launcher opens a docked focused drawer that pushes the work surface', async ({ page }) => {
+    await open(page);
+    await dragSeparatorTo(page, 50);
+    const bareRailQueryLeft = await page.locator('.query-host').evaluate((el) => el.getBoundingClientRect().left);
+
+    await railButton(page, 'databases').click();
+    await expect.poll(() => page.evaluate(() => document.querySelector('.main-row').dataset.navMode)).toBe('drawer');
+
+    const after = await page.evaluate(() => ({
+      navMode: document.querySelector('.main-row').dataset.navMode,
+      railDisplay: getComputedStyle(document.querySelector('.left-rail')).display,
+      sidebarDisplay: getComputedStyle(document.querySelector('.sidebar')).display,
+      schemaPaneDisplay: getComputedStyle(document.querySelector('.schema-pane')).display,
+      savedPaneDisplay: getComputedStyle(document.querySelector('.saved-pane')).display,
+      upperTabsDisplay: getComputedStyle(document.querySelector('.upper-role-tabs')).display,
+      savedTabsDisplay: getComputedStyle(document.querySelector('.saved-pane > .side-tabs')).display,
+      databasesHostDisplay: getComputedStyle(document.querySelector('.nav-section-host[data-section="databases"]')).display,
+      dashboardsHostDisplay: getComputedStyle(document.querySelector('.nav-section-host[data-section="dashboards"]')).display,
+      queryHostLeft: document.querySelector('.query-host').getBoundingClientRect().left,
+      ariaLabelledby: document.querySelector('.sidebar').getAttribute('aria-labelledby'),
+      titleText: document.querySelector('.left-nav-title').textContent,
+    }));
+
+    expect(after.navMode).toBe('drawer');
+    // The rail stays visible ALONGSIDE the drawer (#487 requires every rail
+    // icon to stay reachable while a drawer is open).
+    expect(after.railDisplay).not.toBe('none');
+    expect(after.sidebarDisplay).not.toBe('none');
+    // The direct regression test for the confirmed CSS-cascade bug: exactly the
+    // drawer's OWN section's pane/host render, the OTHER pane and BOTH
+    // wide-mode tab-switcher rows genuinely do not (`display: none`) — not
+    // merely `hidden` as a DOM property.
+    expect(after.schemaPaneDisplay).not.toBe('none');
+    expect(after.savedPaneDisplay).toBe('none');
+    expect(after.databasesHostDisplay).not.toBe('none');
+    expect(after.dashboardsHostDisplay).toBe('none');
+    expect(after.upperTabsDisplay).toBe('none');
+    expect(after.savedTabsDisplay).toBe('none');
+    expect(after.ariaLabelledby).toBe('left-nav-title');
+    expect(after.titleText).toBe('Databases');
+    // A docked drawer PUSHES the centre surface (participates in normal flow)
+    // rather than floating over it: the query host's own left edge shifts right
+    // by roughly the drawer's width once it opens.
+    expect(after.queryHostLeft).toBeGreaterThan(bareRailQueryLeft + 100);
+  });
+
+  test('clicking a different rail launcher switches the drawer content in place, never both panes at once', async ({ page }) => {
+    await open(page);
+    await dragSeparatorTo(page, 50);
+    await railButton(page, 'databases').click();
+    await expect.poll(() => page.evaluate(() => document.querySelector('.main-row').dataset.navMode)).toBe('drawer');
+
+    // Switch to a LOWER-pane section: this is what actually proves a pane-level
+    // transition (Databases → Dashboards stays inside the same 'upper' pane and
+    // would not exercise this), with no frame where both panes are visible.
+    await railButton(page, 'library').click();
+
+    const state = await page.evaluate(() => ({
+      navMode: document.querySelector('.main-row').dataset.navMode,
+      schemaPaneDisplay: getComputedStyle(document.querySelector('.schema-pane')).display,
+      savedPaneDisplay: getComputedStyle(document.querySelector('.saved-pane')).display,
+      libraryHostDisplay: getComputedStyle(document.querySelector('.nav-section-host[data-section="library"]')).display,
+      historyHostDisplay: getComputedStyle(document.querySelector('.nav-section-host[data-section="history"]')).display,
+      titleText: document.querySelector('.left-nav-title').textContent,
+    }));
+    expect(state.navMode).toBe('drawer');
+    // The previously-shown PANE (schema-pane, holding Databases) is hidden and
+    // the new one (saved-pane, holding Library) is visible — checked together
+    // so there is no frame where both (or neither) render. (The Databases HOST
+    // itself keeps its own prior visibility once its ancestor pane is hidden —
+    // that is not a bug, it mirrors `dashboard-tree.spec.js`'s "a hidden role
+    // host contributes NO layout" case: an invisible ancestor is what matters,
+    // not also flipping every now-unreachable descendant's own display.)
+    expect(state.schemaPaneDisplay).toBe('none');
+    expect(state.savedPaneDisplay).not.toBe('none');
+    // Within the now-visible lower pane, its own sibling exclusivity still
+    // holds: Library shows, History does not.
+    expect(state.libraryHostDisplay).not.toBe('none');
+    expect(state.historyHostDisplay).toBe('none');
+    expect(state.titleText).toBe('Library');
+  });
+
+  test('clicking the already-open section\'s rail icon closes the drawer, returning to the bare rail', async ({ page }) => {
+    await open(page);
+    await dragSeparatorTo(page, 50);
+    const databasesBtn = railButton(page, 'databases');
+    await databasesBtn.click();
+    await expect.poll(() => page.evaluate(() => document.querySelector('.main-row').dataset.navMode)).toBe('drawer');
+
+    await databasesBtn.click();
+
+    const after = await page.evaluate(() => ({
+      navMode: document.querySelector('.main-row').dataset.navMode,
+      sidebarDisplay: getComputedStyle(document.querySelector('.sidebar')).display,
+      railDisplay: getComputedStyle(document.querySelector('.left-rail')).display,
+    }));
+    expect(after.navMode).toBe('rail');
+    expect(after.sidebarDisplay).toBe('none');
+    expect(after.railDisplay).not.toBe('none');
+    // `left-rail.ts`'s click handler now calls `button.focus()` explicitly
+    // (fixed after this real-browser pass first surfaced the gap — WebKit does
+    // not focus a clicked `<button>` natively, unlike Chromium/Firefox, so this
+    // assertion used to only hold by browser-default accident on two of three
+    // engines). No longer scoped away from WebKit.
+    await expect(databasesBtn).toBeFocused();
+  });
+
+  // The search box is EMPTY when Escape is pressed — `saved-history.ts` only
+  // claims Escape (via `preventDefault`) when its own filter is non-empty, so
+  // this also proves the empty-search fix still lets Escape bubble to the
+  // drawer's own handler (`app-shell.ts`'s `sidebar` keydown listener).
+  test('Escape closes the focused drawer and returns focus to the rail icon', async ({ page }) => {
+    await open(page);
+    await dragSeparatorTo(page, 50);
+    const libraryBtn = railButton(page, 'library');
+    await libraryBtn.click();
+    await expect.poll(() => page.evaluate(() => document.querySelector('.main-row').dataset.navMode)).toBe('drawer');
+
+    const search = page.locator('.nav-section-host[data-section="library"] .sv-search-input');
+    await search.click();
+    await expect(search).toHaveValue('');
+    await page.keyboard.press('Escape');
+
+    const after = await page.evaluate(() => ({
+      navMode: document.querySelector('.main-row').dataset.navMode,
+      sidebarDisplay: getComputedStyle(document.querySelector('.sidebar')).display,
+      railDisplay: getComputedStyle(document.querySelector('.left-rail')).display,
+    }));
+    expect(after.navMode).toBe('rail');
+    expect(after.sidebarDisplay).toBe('none');
+    expect(after.railDisplay).not.toBe('none');
+    await expect(libraryBtn).toBeFocused();
+  });
+
+  test('dragging back past the wide threshold restores the two-pane sidebar and focuses the matching wide-mode tab', async ({ page }) => {
+    await open(page);
+    await dragSeparatorTo(page, 50);
+    await railButton(page, 'library').click();
+    await expect.poll(() => page.evaluate(() => document.querySelector('.main-row').dataset.navMode)).toBe('drawer');
+
+    // An open drawer sits BESIDE the rail, so its own panel width is the total
+    // minus LEFT_RAIL_PX (48); restoring wide needs that minus-rail figure past
+    // LEFT_WIDE_THRESHOLD_PX (260) — 400 clears both with room to spare.
+    await dragSeparatorTo(page, 400);
+
+    const after = await page.evaluate(navGeometry);
+    expect(after.navMode).toBe('wide');
+    expect(after.railDisplay).toBe('none');
+    expect(after.sidebarDisplay).not.toBe('none');
+    expect(after.schemaPaneDisplay).not.toBe('none');
+    expect(after.savedPaneDisplay).not.toBe('none');
+    expect(after.upperTabsDisplay).not.toBe('none');
+    expect(after.savedTabsDisplay).not.toBe('none');
+
+    // Focus lands on the WIDE-mode tab for whichever section's drawer was open
+    // (library), never left on a now-hidden drawer descendant.
+    const active = await page.evaluate(() => ({
+      section: document.activeElement.dataset.section,
+      inSavedTabs: document.activeElement.closest('.saved-pane > .side-tabs') !== null,
+    }));
+    expect(active).toEqual({ section: 'library', inSavedTabs: true });
+  });
+
+  // #487 phase-3 review, second pass, major issue — a WIDE sidebar (never a
+  // focused drawer) folding straight to bare rail had no restoration at all:
+  // `focusedSection` is null throughout 'wide' by construction, so the
+  // rail-restore branch's old `priorFocusedSection !== null` guard could
+  // never fire coming out of wide. `app-shell.test.ts` unit-tests the
+  // DOM-lookup fix directly (happy-dom has no CSS, so it cannot demonstrate
+  // the failure this fixes, but it CAN prove the restoration logic itself is
+  // correct once focus data is available at commit time).
+  //
+  // Deliberately NOT e2e-tested via a real mouse drag here: the resize
+  // separator's live-drag repaint (`left-nav-separator.ts`) hides the
+  // sidebar/rail on an INTERMEDIATE `mousemove` frame, well before the final
+  // `mouseup` commit — and confirmed against a real browser, a focused
+  // descendant is dropped to `<body>` on THAT earlier frame, before any
+  // commit-time JS (this fix, or the PRE-EXISTING drawer -> rail restoration
+  // from major issue 4) ever runs. This is a genuine gap in the whole
+  // mechanism, not a regression from this fix — tracked separately (see the
+  // linked follow-up issue) rather than papered over with a passing-by-luck
+  // e2e assertion.
+
+  test('the separator keys (Home/End) fold and restore, with internally consistent ARIA', async ({ page }) => {
+    await open(page);
+    const separator = page.locator('.col-resize');
+    await separator.focus();
+
+    const readAria = () => page.evaluate(() => {
+      const el = document.querySelector('.col-resize');
+      return {
+        min: Number(el.getAttribute('aria-valuemin')),
+        max: Number(el.getAttribute('aria-valuemax')),
+        now: Number(el.getAttribute('aria-valuenow')),
+        text: el.getAttribute('aria-valuetext'),
+      };
+    });
+    const assertRangeCoherent = (aria) => {
+      expect(aria.min).toBeLessThanOrEqual(aria.now);
+      expect(aria.now).toBeLessThanOrEqual(aria.max);
+    };
+
+    const before = await readAria();
+    assertRangeCoherent(before);
+
+    await page.keyboard.press('Home');
+    const folded = await page.evaluate(navGeometry);
+    expect(folded.navMode).toBe('rail');
+    expect(folded.sidebarDisplay).toBe('none');
+    expect(folded.railDisplay).not.toBe('none');
+    const foldedAria = await readAria();
+    assertRangeCoherent(foldedAria);
+    expect(foldedAria.text).not.toBe(before.text);
+
+    await page.keyboard.press('End');
+    const restored = await page.evaluate(navGeometry);
+    expect(restored.navMode).toBe('wide');
+    expect(restored.sidebarDisplay).not.toBe('none');
+    expect(restored.railDisplay).toBe('none');
+    const restoredAria = await readAria();
+    assertRangeCoherent(restoredAria);
+    expect(restoredAria.text).not.toBe(foldedAria.text);
+  });
+
+  // Belt-and-braces note: this only proves the JS-projected path
+  // (`effectiveLeftNavigationLayout` forcing 'wide' whenever `state.isMobile` is
+  // true) actually works at a real mobile viewport, REGARDLESS of whichever
+  // `leftNavMode` preference the page loaded with (seeded here via localStorage
+  // before navigation, mirroring how `state.ts` reads `asb:leftNavMode`). The
+  // separate pure-CSS fallback in `styles.css` (`.left-rail { display: none
+  // !important; }` inside the mobile `@media` block, for when `matchMedia` is
+  // unavailable) cannot be exercised here: a real Playwright browser always has
+  // `matchMedia`, so that fallback path is unverifiable at this level and was
+  // reasoned about statically instead.
+  test('the rail never renders at a mobile viewport, regardless of the loaded leftNavMode preference', async ({ page }) => {
+    await page.addInitScript(() => localStorage.setItem('asb:leftNavMode', 'rail'));
+    await open(page, 500, 800); // below MOBILE_BREAKPOINT_PX (768)
+
+    const geometry = await page.evaluate(() => ({
+      railDisplay: getComputedStyle(document.querySelector('.left-rail')).display,
+      navMode: document.querySelector('.main-row').dataset.navMode,
+      isMobile: window.__app.state.isMobile.value,
+    }));
+    expect(geometry.isMobile).toBe(true);
+    expect(geometry.railDisplay).toBe('none');
+    // The projection forces 'wide' at this viewport even though the stored
+    // preference was 'rail' — proving the mobile override, not merely that the
+    // preference happened to already be 'wide'.
+    expect(geometry.navMode).toBe('wide');
+  });
+});
+
+// #487 phase-3 review, second pass, major issue — entering mobile Editor/
+// Results hides `.sidebar` via CSS alone (`.main-row[data-mobile-view=
+// "editor"/"results"] .sidebar { display: none }` in styles.css),
+// independently of `data-nav-mode` (mobile forces 'wide' regardless of which
+// mobile view is showing). `app-shell.test.ts` unit-tests the rescue logic
+// directly (isMobile crossing, a bottom-nav tap while already mobile, and
+// `showHost('dashboard')`).
+//
+// Deliberately NOT e2e-tested here: a real-browser probe (Chromium, under
+// this suite's normal 3-worker parallelism) found the rescue's own explicit
+// `.focus()` call itself gets raced and reverted roughly half the time by
+// the browser's OWN async layout recompute for the newly-matching mobile
+// media query (`.left-rail` disappearing, `.sidebar` jumping to `width:
+// 100%` on "tables", or to `display: none` on "editor"/"results", is a large
+// discontinuous reflow) — Firefox and WebKit did not reproduce this under
+// the same load. A `requestAnimationFrame`-deferred focus call cut the
+// failure rate but did not eliminate it. This is a genuine, deeper
+// engine-timing gap, not a regression from this fix and not something a
+// flaky-but-usually-green e2e assertion should paper over — tracked in the
+// same follow-up as the drag-timing issue above.
+
+// #487 phase-3 review, blocker 1 — a click-and-release with no genuine
+// movement must preserve the stored preference untouched, even when the
+// separator happens to be RENDERED somewhere other than that preference (a
+// narrow viewport clamping a maximal stored width). Proved end-to-end in a
+// real browser: `page.mouse.down()`/`up()` with no intervening `move()` at
+// all, at the exact pixel the (clamped) handle currently renders at.
+test.describe('left navigation separator — click-without-drag (#487 phase-3 review, blocker 1)', () => {
+  test('a viewport-clamped 420px preference survives a click-and-release on the clamped handle, unchanged', async ({ page }) => {
+    // Narrow from the START (budget = 800 - 7 - 480 = 313) — this fixture
+    // wires no live-resize `observeElementWidth` seam, so the clamp has to
+    // come from the drag's OWN session, not a later viewport-resize repaint.
+    await open(page, 800, 800);
+    await dragSeparatorTo(page, 420); // a raw proposal well past what 313 can render
+
+    // The drag's own commit already proves the core "restore-while-clamped"
+    // contract: the RENDERED width is the viewport-clamped 313, but the
+    // PERSISTED preference is the full, honest 420.
+    expect(await page.locator('.sidebar').evaluate((el) => el.style.width)).toBe('313px');
+    expect(await page.evaluate(() => window.__app.state.sidebarPx)).toBe(420);
+    expect(await page.evaluate(() => localStorage.getItem('asb:sidebarPx'))).toBe('420');
+
+    // Click-and-release the separator with NO intervening mousemove at all,
+    // at the exact pixel the clamped handle renders at right now.
+    const handle = page.locator('.col-resize');
+    const box = await handle.boundingBox();
+    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+    await page.mouse.down();
+    await page.mouse.up();
+
+    // The honest 420px preference must survive — not silently downgraded to
+    // the 313px pixel the clamped handle happened to be rendered at.
+    expect(await page.evaluate(() => window.__app.state.sidebarPx)).toBe(420);
+    expect(await page.evaluate(() => localStorage.getItem('asb:sidebarPx'))).toBe('420');
+
+    // Confirmed decoupled from any live-repaint mechanics: a fresh load at
+    // full width reads the SAME persisted preference back.
+    await open(page, 1280, 800);
+    expect(await page.locator('.sidebar').evaluate((el) => el.style.width)).toBe('420px');
+  });
+
+  test('clicking the left, centre, and right portions of the 7px handle all preserve an unclamped preference identically', async ({ page }) => {
+    await open(page);
+    await dragSeparatorTo(page, 300);
+
+    const handle = page.locator('.col-resize');
+    for (const fraction of [0, 0.5, 1]) { // left edge, centre, right edge
+      const box = await handle.boundingBox();
+      const x = box.x + box.width * fraction;
+      await page.mouse.move(x, box.y + box.height / 2);
+      await page.mouse.down();
+      await page.mouse.up();
+      // eslint-disable-next-line no-await-in-loop
+      expect(await page.evaluate(() => window.__app.state.sidebarPx)).toBe(300);
+    }
+  });
+});
diff --git a/tests/e2e/sidebar-tabs-narrow.spec.js b/tests/e2e/sidebar-tabs-narrow.spec.js
index 0cc5c44d..5a095f03 100644
--- a/tests/e2e/sidebar-tabs-narrow.spec.js
+++ b/tests/e2e/sidebar-tabs-narrow.spec.js
@@ -4,9 +4,22 @@ import { test, expect } from '@playwright/test';
 // see CSS layout (the `@container sidebar (max-width: 220px)` gate lives in
 // `src/styles.css`), so this is the only place the breakpoint is provable:
 // dragging the real `.col-resize` handle the way the app does (mousedown on
-// the handle, then a real `mousemove`/`mouseup` — `src/ui/splitters.ts`'s
-// `dragValue('col', ev)` reads `ev.clientX` directly, unclamped by any rect),
-// and reading the resulting `getComputedStyle` on both tab rows.
+// the handle, then a real `mousemove`/`mouseup` — `left-nav-separator.ts`'s
+// `advanceTo` reads `ev.clientX` directly, unclamped by any rect), and
+// reading the resulting `getComputedStyle` on both tab rows.
+//
+// #487 phase 3 added a SECOND, lower threshold below the 180px floor this
+// file originally tested: `LEFT_FOLD_THRESHOLD_PX` (140, `core/
+// left-nav-layout.ts`). Dragging past 180 down to 140 is a dead zone — the
+// wide sidebar holds at its 180px floor, exactly as before phase 3 — but
+// dragging BELOW 140 now folds the sidebar into the compact icon rail instead
+// of clamping. That means a drag to `clientX=100` (this file's original
+// "180px minimum" target) no longer holds at 180 — it folds. This file's own
+// tests below cover both: the dead-zone floor-hold at a retargeted coordinate
+// inside `[140, 180)`, and the new fold transition itself. The rail + focused
+// drawer's OWN geometry (icons, drawer content, drawer-pushes-the-work-surface)
+// is covered separately in `left-nav-fold.spec.js`, not here — this file stays
+// scoped to the wide sidebar's own tab-header compaction (#552/#553).
 //
 // Reuses `dashboard-tree.html` (#426's fixture): it already mounts the real
 // `mountAppShell` with both tab rows live — the upper role tabs (Databases ·2
@@ -20,12 +33,15 @@ const open = async (page) => {
 };
 
 /** Drag `.col-resize` to `targetX` the way a real user does: press on the
- *  handle, move the pointer, release. `dragValue`'s 'col' branch reads only
- *  `ev.clientX`, so the resulting sidebar width IS `targetX`. */
+ *  handle, move the pointer, release. Grabs the handle at its own LEFT EDGE
+ *  (a zero grip offset, #487 phase-3 review blocker 1) — `left-nav-
+ *  separator.ts`'s `advanceTo` corrects `ev.clientX` for wherever inside the
+ *  handle the pointer actually grabbed, so a zero offset is what keeps the
+ *  resulting sidebar width exactly `targetX`. */
 const dragSidebarTo = async (page, targetX) => {
   const handle = page.locator('.col-resize');
   const box = await handle.boundingBox();
-  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  await page.mouse.move(box.x, box.y + box.height / 2);
   await page.mouse.down();
   await page.mouse.move(targetX, box.y + box.height / 2, { steps: 5 });
   await page.mouse.up();
@@ -101,10 +117,22 @@ test.describe('sidebar tab headers at narrow widths (#552)', () => {
     await expect(page.locator('.saved-pane > .side-tabs .side-tab', { hasText: 'History' })).toHaveClass(/active/);
   });
 
-  test('the 180px minimum sidebar still shows compact, unclipped, non-overlapping labels', async ({ page }) => {
+  // #487 phase 3: `clientX=160` sits inside the dead zone `[LEFT_FOLD_THRESHOLD_PX
+  // (140), LEFT_PANEL_MIN_PX (180))` — the wide sidebar still holds at its 180px
+  // floor rather than folding (phase 1's documented dead-zone behavior). This is
+  // the retargeted version of this file's original "drag to 100" test: 100 is now
+  // BELOW the fold threshold and folds instead (see the new test below), so this
+  // one confirms the real drag pixel-for-pixel still produces the pre-#487 floor
+  // outcome at a coordinate that remains inside the wide band.
+  test('the 180px minimum sidebar still shows compact, unclipped, non-overlapping labels (dead zone, no fold)', async ({ page }) => {
     await open(page);
-    await dragSidebarTo(page, 100); // below the 180px floor — dragValue clamps it there
+    await dragSidebarTo(page, 160); // inside [140, 180) — holds at the floor, does not fold
     await expect.poll(() => page.locator('.sidebar').evaluate((el) => el.getBoundingClientRect().width)).toBeCloseTo(180, 0);
+    // Confirms the drag stayed in 'wide' mode rather than folding: the sidebar is
+    // still the one presenting (not `hidden`), and the rail never appears.
+    await expect(page.locator('.sidebar')).not.toBeHidden();
+    await expect(page.locator('.left-rail')).toBeHidden();
+    expect(await page.evaluate(() => document.querySelector('.main-row').dataset.navMode)).toBe('wide');
 
     const [upper, lower] = await page.evaluate(tabsGeometry);
     for (const row of [upper, lower]) {
@@ -120,6 +148,31 @@ test.describe('sidebar tab headers at narrow widths (#552)', () => {
     }
   });
 
+  // #487 phase 3: dragging BELOW the fold threshold (140) is a real mode
+  // transition, not a clamp — the sidebar folds into the compact rail entirely.
+  // The #552/#553 tab-compaction machinery this file otherwise tests is moot once
+  // folded: both tab rows are not merely compacted, they are not rendered at all
+  // (`display: none`, not just the `.hidden` DOM property — the exact CSS-cascade
+  // gap a confirmed #487 phase 3 bug lived in, so this checks computed style).
+  test('dragging below the fold threshold folds the sidebar into the compact rail', async ({ page }) => {
+    await open(page);
+    await dragSidebarTo(page, 50); // comfortably under LEFT_FOLD_THRESHOLD_PX (140)
+
+    const geometry = await page.evaluate(() => ({
+      navMode: document.querySelector('.main-row').dataset.navMode,
+      sidebarNavMode: document.querySelector('.sidebar').dataset.navMode,
+      sidebarDisplay: getComputedStyle(document.querySelector('.sidebar')).display,
+      railDisplay: getComputedStyle(document.querySelector('.left-rail')).display,
+      tabRowDisplays: [...document.querySelectorAll('.side-tabs')].map((row) => getComputedStyle(row).display),
+    }));
+    expect(geometry.navMode).toBe('rail');
+    expect(geometry.sidebarNavMode).toBe('rail');
+    expect(geometry.sidebarDisplay).toBe('none');
+    expect(geometry.railDisplay).not.toBe('none');
+    expect(geometry.tabRowDisplays).toHaveLength(2);
+    for (const display of geometry.tabRowDisplays) expect(display).toBe('none');
+  });
+
   test('widening the sidebar back past 220px restores the full tab presentation', async ({ page }) => {
     await open(page);
     await dragSidebarTo(page, 200);
diff --git a/tests/helpers/fake-app.ts b/tests/helpers/fake-app.ts
index 20edb92c..ebb9b4ce 100644
--- a/tests/helpers/fake-app.ts
+++ b/tests/helpers/fake-app.ts
@@ -403,6 +403,7 @@ const appDefaults: App = {
   state: {} as AppState,
   dom: {},
   matchMedia: null,
+  observeElementWidth: undefined,
   build: 'v0.0.0-test',
   root: null,
   document,
@@ -597,6 +598,7 @@ const appDefaults: App = {
   showQuerySurface: () => {},
   showDashboardSurface: () => {},
   openSavedQuery: () => {},
+  openFocusedSection: () => {},
   openPanelQuery: () => {},
   openVariableTab: () => {},
   actions: {} as ActionsRegistry,
diff --git a/tests/unit/app-shell.test.ts b/tests/unit/app-shell.test.ts
index 7789404c..d43d8ec6 100644
--- a/tests/unit/app-shell.test.ts
+++ b/tests/unit/app-shell.test.ts
@@ -1,10 +1,13 @@
 import { describe, expect, it, vi } from 'vitest';
 import { mountAppShell } from '../../src/ui/app-shell.js';
+import type { AppShellDeps } from '../../src/ui/app-shell.js';
 import { startDrag } from '../../src/ui/splitters.js';
 import { makeApp } from '../helpers/fake-app.js';
 import { savedQuery } from '../helpers/saved-query.js';
+import { LEFT_NAV_SECTIONS } from '../../src/core/left-nav-layout.js';
+import type { LeftNavigationSection } from '../../src/core/left-nav-layout.js';
 
-function mount() {
+function mount(overrides: Partial<AppShellDeps> = {}) {
   const loadSchema = vi.fn(async () => {});
   const loadReference = vi.fn(async () => {});
   const save = vi.fn();
@@ -22,8 +25,37 @@ function mount() {
     matchMedia: null,
     updateBanner: vi.fn(),
     startDrag,
+    ...overrides,
   });
-  return { app, handle, loadSchema, loadReference };
+  return { app, handle, loadSchema, loadReference, save };
+}
+
+/** Like `mount()`, but sets the left-navigation signals BEFORE mounting, so
+ *  the shell's own mount-time paint (the preferred-state effect's first run)
+ *  reflects them — the only way to exercise 'rail'/'drawer' presentation or
+ *  an `isMobile`-from-the-start mount. */
+function mountWithLeftNav(over: {
+  mode?: 'wide' | 'rail'; section?: LeftNavigationSection | null; isMobile?: boolean;
+} = {}, overrides: Partial<AppShellDeps> = {}) {
+  const loadSchema = vi.fn(async () => {});
+  const loadReference = vi.fn(async () => {});
+  const app = makeApp({ catalog: { loadSchema, loadReference }, prefs: { save: vi.fn() } });
+  if (over.mode !== undefined) app.state.leftNavMode.value = over.mode;
+  if (over.section !== undefined) app.state.leftNavSection.value = over.section;
+  if (over.isMobile !== undefined) app.state.isMobile.value = over.isMobile;
+  const handle = mountAppShell({
+    app,
+    root: app.root,
+    document,
+    state: app.state,
+    catalog: app.catalog,
+    prefs: app.prefs,
+    matchMedia: null,
+    updateBanner: vi.fn(),
+    startDrag,
+    ...overrides,
+  });
+  return { app, handle };
 }
 
 /** Every mounted section host, keyed by its `data-section`. */
@@ -37,21 +69,24 @@ const hosts = (root: ParentNode): Record<string, HTMLElement> => Object.fromEntr
 // unchanged": the same two panes, the same switchers, the same splitters, and the
 // rail that phase 3 introduces is not here yet.
 describe('mountAppShell wide navigation (#487 phase 2)', () => {
-  it('renders no rail — the sidebar is the only container hosting a section', () => {
+  it('the sidebar is the only container HOSTING a section — the rail is a re-presentation, not a second container', () => {
     const { app, handle } = mount();
     const sidebar = app.root.querySelector('.sidebar')!;
 
     expect(app.root.querySelectorAll('.sidebar')).toHaveLength(1);
     // Stated positively, so it is falsifiable TODAY rather than an assertion about
     // class names no code emits yet: every section host lives inside the one
-    // sidebar, and the `.main-row` holds only the sidebar, its width handle and the
-    // two work-surface hosts. Phase 3 moving a host into a rail-side drawer — or
-    // adding a second navigation column — has to fail this.
+    // sidebar, and the `.main-row` holds the rail, the sidebar, its width handle
+    // and the two work-surface hosts. #487 phase 3 adds the rail as `.main-row`'s
+    // FIRST child (never a second section-hosting container — see
+    // `## Tests` → "left navigation presentation" below for the rail/drawer
+    // presentation itself) — a host moving OUT of the sidebar, or a second
+    // navigation column, has to fail this.
     const hosts = [...app.root.querySelectorAll('.nav-section-host')];
     expect(hosts).toHaveLength(4);
     expect(hosts.every((host) => sidebar.contains(host))).toBe(true);
     expect([...app.root.querySelector('.main-row')!.children].map((el) => el.className))
-      .toEqual(['sidebar', 'col-resize', 'query-host', 'dashboard-host']);
+      .toEqual(['left-rail', 'sidebar', 'col-resize', 'query-host', 'dashboard-host']);
     handle.dispose();
   });
 
@@ -106,20 +141,24 @@ describe('mountAppShell wide navigation (#487 phase 2)', () => {
   });
 
   it('switches the exposed lower host on sidePanel without rebuilding either', () => {
+    // #487 phase 3: content repaint is decoupled from `sidePanel` entirely (the
+    // Library-content effect keys only on `dashboardTreeRevision`, and History has
+    // no reactive trigger of its own) — a plain sidePanel flip now repaints ONLY
+    // the tab row (active class/count), never either section's own content, in
+    // EITHER direction.
     const { app, handle } = mount();
     const host = hosts(app.root);
     const libraryList = app.dom.savedList!;
     const historyList = app.dom.historyList!;
-    const marker = libraryList.appendChild(document.createElement('span'));
+    const libraryMarker = libraryList.appendChild(document.createElement('span'));
+    const historyMarker = historyList.appendChild(document.createElement('span'));
 
     app.state.sidePanel.value = 'history';
     expect(host.library.hidden).toBe(true);
     expect(host.history.hidden).toBe(false);
-    // A hidden host keeps its DOM: History's repaint went into History's OWN list
-    // and left the Library's content standing. Before the split both sections
-    // rendered through one pair, so this content could not have survived.
-    expect(libraryList.contains(marker)).toBe(true);
-    expect(historyList.textContent).toContain('No history yet.');
+    // A hidden host keeps its DOM, and switching TO it does not rebuild it either.
+    expect(libraryList.contains(libraryMarker)).toBe(true);
+    expect(historyList.contains(historyMarker)).toBe(true);
 
     app.state.sidePanel.value = 'saved';
     expect(host.library.hidden).toBe(false);
@@ -132,10 +171,49 @@ describe('mountAppShell wide navigation (#487 phase 2)', () => {
     expect(app.dom.historyList).toBe(historyList);
     expect(app.root.contains(libraryList)).toBe(true);
     expect(app.root.contains(historyList)).toBe(true);
-    // Becoming active DOES repaint the section, exactly as it always has: the
-    // switcher clears the shared search filter, so the list is rebuilt from
-    // scratch. #487 phase 3 owns whether a drawer should preserve it instead.
-    expect(libraryList.contains(marker)).toBe(false);
+    // Becoming active again STILL does not repaint either section — the
+    // deliberate #487 phase 3 behavior change from "activating a pane clears and
+    // rebuilds its search/list."
+    expect(libraryList.contains(libraryMarker)).toBe(true);
+    expect(historyList.contains(historyMarker)).toBe(true);
+    handle.dispose();
+  });
+
+  // #487 phase 3: the search input node inside a section's host survives a plain
+  // sidePanel flip — proof that switching never triggers a destructive rebuild of
+  // either section's content (only the tab row/exposure react to it).
+  it('preserves node identity of a section\'s search input across a sidePanel flip', () => {
+    const { app, handle } = mount();
+    app.state.savedQueries = [savedQuery({ id: 's1', name: 'Q1', sql: 'SELECT 1' })];
+    app.state.dashboardTreeRevision.value++; // force one real Library content paint
+    const libraryInput = app.dom.savedSearch!.querySelector('.sv-search-input');
+    expect(libraryInput).not.toBeNull();
+
+    app.state.sidePanel.value = 'history';
+    app.state.sidePanel.value = 'saved';
+
+    expect(app.dom.savedSearch!.querySelector('.sv-search-input')).toBe(libraryInput);
+    handle.dispose();
+  });
+
+  it('a bare dashboardTreeRevision bump (no sidePanel change) still repaints Library', () => {
+    const { app, handle } = mount();
+    app.state.savedQueries = [savedQuery({ id: 's1', name: 'Q1', sql: 'SELECT 1' })];
+
+    app.state.dashboardTreeRevision.value++;
+
+    expect(app.dom.savedList!.querySelectorAll('.saved-row')).toHaveLength(1);
+    handle.dispose();
+  });
+
+  it('a sidePanel change alone still repaints the tab row\'s active class', () => {
+    const { app, handle } = mount();
+
+    app.state.sidePanel.value = 'history';
+
+    const tabs = [...app.dom.savedTabsRow!.querySelectorAll('.side-tab')];
+    expect(tabs[0].classList.contains('active')).toBe(false);
+    expect(tabs[1].classList.contains('active')).toBe(true);
     handle.dispose();
   });
 
@@ -150,13 +228,34 @@ describe('mountAppShell wide navigation (#487 phase 2)', () => {
     const { app, handle } = mount();
     const host = hosts(app.root);
     app.state.savedQueries = [savedQuery({ id: 's1', name: 'Q1', sql: 'SELECT 1' })];
+    app.state.dashboardTreeRevision.value++; // force Library's own content effect to (re)paint
 
     (app.state.sidePanel as { value: string }).value = 'queries';
 
     expect(host.library.hidden).toBe(false);
     expect(host.history.hidden).toBe(true);
     expect(app.dom.savedList!.querySelectorAll('.saved-row')).toHaveLength(1);
-    expect(app.dom.historyList!.children.length).toBe(0);
+    // #487 phase 3: History now ALSO always renders its own content — its host is
+    // never truly blank, even when Library is exposed.
+    expect(app.dom.historyList!.textContent).toContain('No history yet.');
+    handle.dispose();
+  });
+
+  // #487 phase 3 regression test: the section that was NOT active at mount used
+  // to never get its first paint at all (blank until the first switch to it).
+  it('paints BOTH lower sections at mount, before either is ever switched to', () => {
+    const loadSchema = vi.fn(async () => {});
+    const loadReference = vi.fn(async () => {});
+    const app = makeApp({ catalog: { loadSchema, loadReference }, prefs: { save: vi.fn() } });
+    app.state.savedQueries = [savedQuery({ id: 's1', name: 'Q1', sql: 'SELECT 1' })];
+    app.state.history = [{ id: 'h1', sql: 'SELECT 1', ts: Date.now(), rows: 1, ms: 1 }];
+    // sidePanel defaults to Library ('saved') — History is never exposed here.
+    const handle = mountAppShell({
+      app, root: app.root, document, state: app.state, catalog: app.catalog,
+      prefs: app.prefs, matchMedia: null, updateBanner: vi.fn(), startDrag,
+    });
+
+    expect(app.dom.historyList!.querySelectorAll('.history-row')).toHaveLength(1);
     handle.dispose();
   });
 
@@ -223,3 +322,1106 @@ describe('mountAppShell authentication host', () => {
     expect(host.firstElementChild).toBe(controls);
   });
 });
+
+// #487 phase 3 — the composition step that makes the rail + focused drawer
+// reachable: `.sidebar` is RE-PRESENTED (never moved/rebuilt) via
+// `data-nav-mode`, and `applyEffectiveLeftNavigationLayout` is the sole writer
+// of every attribute/hidden toggle the table in the phase's own spec names.
+describe('mountAppShell left navigation presentation (#487 phase 3)', () => {
+  it('wide mode: rail hidden, sidebar visible, every wide-only control visible', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'wide' });
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+    const rail = app.root.querySelector('.left-rail') as HTMLElement;
+
+    expect(mainRow.dataset.navMode).toBe('wide');
+    expect(sidebar.dataset.navMode).toBe('wide');
+    expect(rail.hidden).toBe(true);
+    expect(sidebar.hidden).toBe(false);
+    expect(app.dom.upperRoleTabs!.hidden).toBe(false);
+    expect(app.dom.savedTabsRow!.hidden).toBe(false);
+    expect(app.dom.sideSplit!.hidden).toBe(false);
+    expect((app.root.querySelector('.schema-pane') as HTMLElement).hidden).toBe(false);
+    expect((app.root.querySelector('.saved-pane') as HTMLElement).hidden).toBe(false);
+    expect(app.dom.leftNavTitle!.hidden).toBe(true);
+    expect(sidebar.hasAttribute('aria-labelledby')).toBe(false);
+    handle.dispose();
+  });
+
+  it('rail mode (no focused section): rail visible, sidebar and every wide-only control hidden', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: null });
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+    const rail = app.root.querySelector('.left-rail') as HTMLElement;
+
+    expect(mainRow.dataset.navMode).toBe('rail');
+    expect(sidebar.dataset.navMode).toBe('rail');
+    expect(rail.hidden).toBe(false);
+    expect(sidebar.hidden).toBe(true);
+    expect(app.dom.upperRoleTabs!.hidden).toBe(true);
+    expect(app.dom.savedTabsRow!.hidden).toBe(true);
+    expect(app.dom.sideSplit!.hidden).toBe(true);
+    handle.dispose();
+  });
+
+  it('drawer mode, upper section focused: rail + sidebar visible, upper pane shown, lower pane + wide-only chrome hidden, title names the section', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'dashboards' });
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+    const rail = app.root.querySelector('.left-rail') as HTMLElement;
+    const schemaPane = app.root.querySelector('.schema-pane') as HTMLElement;
+    const savedPane = app.root.querySelector('.saved-pane') as HTMLElement;
+
+    expect(mainRow.dataset.navMode).toBe('drawer');
+    expect(sidebar.dataset.navMode).toBe('drawer');
+    expect(rail.hidden).toBe(false);
+    expect(sidebar.hidden).toBe(false);
+    expect(schemaPane.hidden).toBe(false);
+    expect(savedPane.hidden).toBe(true);
+    expect(app.dom.upperRoleTabs!.hidden).toBe(true);
+    expect(app.dom.savedTabsRow!.hidden).toBe(true);
+    expect(app.dom.sideSplit!.hidden).toBe(true);
+    expect(app.dom.leftNavTitle!.hidden).toBe(false);
+    expect(app.dom.leftNavTitle!.textContent).toBe('Dashboards');
+    expect(sidebar.getAttribute('aria-labelledby')).toBe(app.dom.leftNavTitle!.id);
+    handle.dispose();
+  });
+
+  it('drawer mode, lower section focused: lower pane shown, upper pane hidden, title names the section', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'history' });
+    const schemaPane = app.root.querySelector('.schema-pane') as HTMLElement;
+    const savedPane = app.root.querySelector('.saved-pane') as HTMLElement;
+
+    expect(schemaPane.hidden).toBe(true);
+    expect(savedPane.hidden).toBe(false);
+    expect(app.dom.leftNavTitle!.textContent).toBe('History');
+    handle.dispose();
+  });
+
+  it('the rail\'s four launchers exist and every aria-controls matches the real sidebar id', () => {
+    const { app, handle } = mountWithLeftNav();
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+    const buttons = [...app.root.querySelectorAll('.left-rail-btn')];
+
+    expect(buttons).toHaveLength(4);
+    expect(sidebar.id).toBeTruthy();
+    for (const btn of buttons) expect(btn.getAttribute('aria-controls')).toBe(sidebar.id);
+    handle.dispose();
+  });
+
+  it('mounting with state.isMobile.value = true from the start renders wide regardless of the stored leftNavMode', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library', isMobile: true });
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+
+    expect(mainRow.dataset.navMode).toBe('wide');
+    expect(sidebar.dataset.navMode).toBe('wide');
+    expect(sidebar.hidden).toBe(false);
+    handle.dispose();
+  });
+
+  it('crossing the mobile breakpoint after mount forces the presentation back to wide', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library', isMobile: false });
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+
+    expect(mainRow.dataset.navMode).toBe('drawer');
+    app.state.isMobile.value = true;
+    expect(mainRow.dataset.navMode).toBe('wide');
+    handle.dispose();
+  });
+
+  it('a mode/section change re-runs the presentation function exactly once — not zero, not twice', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'wide' });
+    const title = app.dom.leftNavTitle!;
+    // `leftNavTitle.hidden` is written by nothing in this module except the
+    // presentation function's own unconditional assignment (a local closure
+    // with no other exposed hook) — shadowing its accessor on the instance
+    // turns "how many times did it run" into a directly countable,
+    // falsifiable signal, the same "install something that counts runs"
+    // technique `left-nav.test.ts`'s atomicity test uses for a batched write.
+    let runs = 0;
+    let hiddenValue = title.hidden;
+    Object.defineProperty(title, 'hidden', {
+      configurable: true,
+      get: () => hiddenValue,
+      set: (v: boolean) => { hiddenValue = v; runs++; },
+    });
+
+    app.state.leftNavMode.value = 'rail';
+
+    expect(runs).toBe(1);
+    handle.dispose();
+  });
+
+  it('dispose() stops the reactive effect, the rail and the separator — a later signal write no longer changes the DOM', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'wide' });
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    const rail = app.root.querySelector('.left-rail') as HTMLElement;
+
+    handle.dispose();
+    app.state.leftNavMode.value = 'rail';
+
+    expect(mainRow.dataset.navMode).toBe('wide');
+    expect(rail.hidden).toBe(true);
+  });
+
+  it('the separator repaints through the SAME presentation function during a drag (mode changes, DOM reflects it)', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'wide' });
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+
+    // Grabbed at the wide sidebar's own current width (248, the documented
+    // default) — a zero grip offset, so `clientX` maps 1:1 onto the total.
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 248 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 50 })); // below the fold threshold
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 50 }));
+
+    expect(app.state.leftNavMode.value).toBe('rail');
+    expect(mainRow.dataset.navMode).toBe('rail');
+    handle.dispose();
+  });
+
+  it('an injected observeElementWidth seam is called once with .main-row and its disposer is invoked on dispose()', () => {
+    const observeElementWidth = vi.fn((_el: Element, _cb: (widthPx: number) => void) => vi.fn());
+    const { handle } = mountWithLeftNav({ mode: 'wide' }, { observeElementWidth });
+
+    expect(observeElementWidth).toHaveBeenCalledTimes(1);
+    const [observedEl] = observeElementWidth.mock.calls[0];
+    expect((observedEl as HTMLElement).className).toBe('main-row');
+    const disposer = observeElementWidth.mock.results[0].value;
+    expect(disposer).not.toHaveBeenCalled();
+
+    handle.dispose();
+    expect(disposer).toHaveBeenCalledTimes(1);
+  });
+
+  it('the observeElementWidth callback re-derives and re-applies the layout, and ignores a non-positive/non-finite width', () => {
+    let capturedCallback: ((widthPx: number) => void) | null = null;
+    const observeElementWidth = vi.fn((_el: Element, cb: (widthPx: number) => void) => {
+      capturedCallback = cb;
+      return vi.fn();
+    });
+    const { app, handle } = mountWithLeftNav({ mode: 'wide' }, { observeElementWidth });
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+
+    // A pre-mount mode write with no repaint trigger yet — the width observer
+    // callback is what has to notice it, not a signal effect.
+    app.state.leftNavMode.value = 'rail';
+    expect(mainRow.dataset.navMode).toBe('rail'); // the preferred-state effect already caught this one…
+    app.state.leftNavMode.value = 'wide';
+    expect(mainRow.dataset.navMode).toBe('wide');
+
+    // Defensive guards: neither call throws, and neither repaints from a
+    // bogus measurement.
+    expect(() => capturedCallback!(0)).not.toThrow();
+    expect(() => capturedCallback!(-5)).not.toThrow();
+    expect(() => capturedCallback!(NaN)).not.toThrow();
+    expect(mainRow.dataset.navMode).toBe('wide');
+
+    // A real, live width re-derives through the SAME pipeline — it does not
+    // itself change the outcome here (no active drag, same preferred state),
+    // but it must not throw and must actually invoke the presentation
+    // function again.
+    let runs = 0;
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+    let widthValue = sidebar.style.width;
+    Object.defineProperty(sidebar.style, 'width', {
+      configurable: true,
+      get: () => widthValue,
+      set: (v: string) => { widthValue = v; runs++; },
+    });
+    capturedCallback!(900);
+    expect(runs).toBe(1);
+    handle.dispose();
+  });
+});
+
+// #487 phase-3 review, bugs 1 and 2 — an `isMobile` crossing (in EITHER
+// direction) must clear the session-only `leftNavSection` (bug 1: it can
+// otherwise go stale across a mobile round-trip, since the mobile-visible
+// wide switcher writes `sidePanel`/`upperRole` directly and never touches
+// `leftNavSection`) and must cancel any active separator session (bug 2: an
+// abandoned drag has no way to notice `isMobile` changed under it, and can
+// otherwise keep repainting stale desktop chrome right back over the forced
+// mobile-wide presentation).
+describe('mountAppShell — isMobile crossing side effects (#487 phase-3 review, bugs 1 and 2)', () => {
+  it('bug 1: leftNavSection is cleared on a mobile round-trip, so a stale drawer title can never disagree with its content', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library', isMobile: false });
+    expect(app.state.leftNavSection.value).toBe('library');
+
+    app.state.isMobile.value = true;
+    expect(app.state.leftNavSection.value).toBeNull();
+
+    // The mobile-visible wide switcher writes `sidePanel` DIRECTLY (mirroring
+    // `saved-history.ts`/`sidebar-upper.ts`, neither of which ever touches
+    // `leftNavSection`) — `leftNavSection` stays null throughout.
+    app.state.sidePanel.value = 'history';
+    expect(app.state.leftNavSection.value).toBeNull();
+
+    app.state.isMobile.value = false;
+
+    // A return from mobile always shows a bare rail — never a drawer whose
+    // stale title ("Library") would disagree with its now-different content
+    // (History, per the sidePanel write above).
+    expect(app.state.leftNavSection.value).toBeNull();
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    expect(mainRow.dataset.navMode).toBe('rail');
+
+    handle.dispose();
+  });
+
+  it('bug 2: an active separator drag is cancelled (not left fighting) when isMobile flips mid-drag', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library', isMobile: false });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 0 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 400 })); // crosses past the wide threshold
+    expect(mainRow.dataset.navMode).toBe('wide');
+
+    app.state.isMobile.value = true; // crosses mid-drag
+    expect(mainRow.dataset.navMode).toBe('wide'); // forced wide either way, fix or no fix
+
+    // Without the fix, the abandoned session is still live and its very next
+    // mousemove can repaint a non-wide mode right back over the forced mobile
+    // presentation — mobile must NEVER show rail/drawer.
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 20 })); // well below the fold threshold
+    expect(mainRow.dataset.navMode).toBe('wide');
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 20 }));
+    expect(mainRow.dataset.navMode).toBe('wide');
+    // No stray commit landed either — the session was cancelled, not committed.
+    expect(app.state.leftNavMode.value).toBe('rail');
+
+    app.root.remove();
+    handle.dispose();
+  });
+});
+
+// #487 phase-3 review, major issue 3 — `navMode` is 'wide' on EVERY mobile
+// call (`effectiveLeftNavigationLayout` forces it), not only on a genuine
+// rail/drawer -> wide DESKTOP conversion. Without an explicit
+// `!state.isMobile.value` guard, a mobile crossing straight out of an open
+// drawer read as that same conversion and called `.focus()` on a desktop
+// wide-mode tab button the mobile layout hides entirely.
+describe('mountAppShell — mobile crossing must not run desktop-tab focus restoration (#487 phase-3 review, major issue 3)', () => {
+  it('does not call .focus() on the desktop tab when entering mobile from an open drawer', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library', isMobile: false });
+    document.body.appendChild(app.root);
+    const libraryTab = app.dom.savedTabsRow!.querySelector('[data-section="library"]') as HTMLElement;
+    const focusSpy = vi.spyOn(libraryTab, 'focus');
+
+    app.state.isMobile.value = true;
+
+    expect(focusSpy).not.toHaveBeenCalled();
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    expect(mainRow.dataset.navMode).toBe('wide'); // still the mobile-forced projection
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+
+  it('an UPPER section behaves the same on mobile entry', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'dashboards', isMobile: false });
+    document.body.appendChild(app.root);
+    const dashboardsTab = app.dom.upperRoleTabs!.querySelector('[data-section="dashboards"]') as HTMLElement;
+    const focusSpy = vi.spyOn(dashboardsTab, 'focus');
+
+    app.state.isMobile.value = true;
+
+    expect(focusSpy).not.toHaveBeenCalled();
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+
+  it('a GENUINE desktop drawer -> wide conversion still restores focus normally (the guard only excludes mobile)', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library', isMobile: false });
+    document.body.appendChild(app.root);
+    const libraryTab = app.dom.savedTabsRow!.querySelector('[data-section="library"]') as HTMLElement;
+    const focusSpy = vi.spyOn(libraryTab, 'focus');
+
+    app.state.leftNavMode.value = 'wide'; // a genuine desktop conversion, e.g. via End
+
+    expect(focusSpy).toHaveBeenCalled();
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+});
+
+// ChatGPT second-review bug fix #2: the separator's own aria-valuenow/
+// aria-valuemax/aria-valuetext must reflect the CURRENT layout even when
+// something OTHER than the separator's own gesture repaints the sidebar —
+// the separator's own internal ARIA effect only re-runs on a
+// `leftNavMode`/`leftNavSection` signal change, never on a width-only
+// change, so nothing else would tell it its own advertised width just
+// went stale.
+describe('mountAppShell left navigation presentation — separator ARIA staleness (#487 phase-3 review, bug 2)', () => {
+  it('reflects the viewport-clamped width after the mount-time paint, not the pre-attach measurement, and stays correct after an observer-driven re-derivation', () => {
+    // `mainRowWidthPx` only applies once `.main-row` is actually attached to
+    // the document — mirroring the real bug: `mountLeftNavSeparator`'s own
+    // internal ARIA effect runs at construction time, BEFORE `.main-row` is
+    // attached (`root!.replaceChildren(...)` runs after), so its first
+    // measurement sees a zero/unattached width and lands on a DIFFERENT
+    // (unconstrained) value than the real, attached budget the
+    // preferred-state effect derives moments later.
+    let mainRowWidthPx = 800; // once "attached": budget = 800 - 7 (separator) - 480 (centre min) = 313
+    // The fake-app helper's `root` is a detached `<div>` (never appended to
+    // `document.body`), so happy-dom's own `isConnected` cannot stand in for
+    // "measured before vs. after `.main-row` is attached" here. A call
+    // counter models the same real sequence directly: the FIRST measurement
+    // of `.main-row` is `mountLeftNavSeparator`'s own construction-time
+    // effect, which genuinely runs before `root!.replaceChildren(...)`
+    // attaches `.main-row` under `root` in the real module — so it reports 0,
+    // exactly like a real unattached element would. Every later measurement
+    // is the preferred-state effect (and, later, the observer), both of
+    // which run after attachment, so they report the real width.
+    let mainRowCallCount = 0;
+    const rectSpy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+      .mockImplementation(function (this: HTMLElement) {
+        if (!this.classList.contains('main-row')) {
+          return { width: 0, top: 0, bottom: 0, left: 0, right: 0, height: 0, x: 0, y: 0, toJSON: () => ({}) } as DOMRect;
+        }
+        mainRowCallCount++;
+        const width = mainRowCallCount === 1 ? 0 : mainRowWidthPx;
+        return { width, top: 0, bottom: 0, left: 0, right: width, height: 0, x: 0, y: 0, toJSON: () => ({}) } as DOMRect;
+      });
+    let capturedCallback: ((widthPx: number) => void) | null = null;
+    const observeElementWidth = vi.fn((_el: Element, cb: (widthPx: number) => void) => {
+      capturedCallback = cb;
+      return vi.fn();
+    });
+
+    const loadSchema = vi.fn(async () => {});
+    const loadReference = vi.fn(async () => {});
+    const app = makeApp({ catalog: { loadSchema, loadReference }, prefs: { save: vi.fn() } });
+    app.state.leftNavMode.value = 'wide';
+    // Larger than the 313px the (attached) viewport currently allows —
+    // exactly the "preferred wide width larger than getMaxNavigationTotalPx
+    // would allow" case.
+    app.state.sidebarPx = 420;
+    const handle = mountAppShell({
+      app, root: app.root, document, state: app.state, catalog: app.catalog,
+      prefs: app.prefs, matchMedia: null, updateBanner: vi.fn(), startDrag, observeElementWidth,
+    });
+
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+    // The rendered width is correctly clamped by the mount-time paint...
+    expect(sidebar.style.width).toBe('313px');
+    // ...and, with the fix, the separator's OWN ARIA agrees with it — not
+    // the pre-attach (unconstrained, 420) measurement its own internal
+    // effect happened to run with first.
+    expect(separator.getAttribute('aria-valuenow')).toBe('313');
+    expect(separator.getAttribute('aria-valuemax')).toBe('313');
+
+    // The viewport grows enough to render the full 420px preference — the
+    // width observer notices and re-derives.
+    mainRowWidthPx = 1000; // budget = 1000 - 7 - 480 = 513, capped to LEFT_PANEL_MAX_PX (420)
+    capturedCallback!(1000);
+
+    expect(sidebar.style.width).toBe('420px');
+    expect(separator.getAttribute('aria-valuenow')).toBe('420');
+    expect(separator.getAttribute('aria-valuemax')).toBe('420');
+
+    handle.dispose();
+    rectSpy.mockRestore();
+  });
+});
+
+// ChatGPT second-review bug fix #3: an active drag/keyboard session on the
+// separator is authoritative — the `ResizeObserver`-driven callback must not
+// repaint from the last COMMITTED preference while a gesture is still in
+// progress (that preference is stale for as long as the gesture has not yet
+// committed).
+describe('mountAppShell left navigation presentation — observer vs. an active session (#487 phase-3 review, bug 3)', () => {
+  it('does not repaint from the observer while a drag is active, but repaints normally once the drag ends', () => {
+    let capturedCallback: ((widthPx: number) => void) | null = null;
+    const observeElementWidth = vi.fn((_el: Element, cb: (widthPx: number) => void) => {
+      capturedCallback = cb;
+      return vi.fn();
+    });
+    const { app, handle } = mountWithLeftNav({ mode: 'wide' }, { observeElementWidth });
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 248 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 300 }));
+    expect(mainRow.dataset.navMode).toBe('wide');
+    const sidebarWidthDuringDrag = (app.root.querySelector('.sidebar') as HTMLElement).style.width;
+    expect(sidebarWidthDuringDrag).toBe('300px'); // the drag's own last painted value
+
+    // The observer fires mid-drag (e.g. a window resize while the mouse
+    // button is still down) — it must NOT repaint from the stale committed
+    // state (which would visibly snap the sidebar away from the pointer).
+    capturedCallback!(900);
+    expect((app.root.querySelector('.sidebar') as HTMLElement).style.width).toBe('300px');
+
+    // Release the drag — the session ends and commits normally.
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 300 }));
+    expect(app.state.leftNavMode.value).toBe('wide');
+    expect(app.state.sidebarPx).toBe(300);
+
+    // A SUBSEQUENT observer callback repaints normally again (no active
+    // session left to protect).
+    let runs = 0;
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+    let widthValue = sidebar.style.width;
+    Object.defineProperty(sidebar.style, 'width', {
+      configurable: true,
+      get: () => widthValue,
+      set: (v: string) => { widthValue = v; runs++; },
+    });
+    capturedCallback!(900);
+    expect(runs).toBe(1);
+
+    handle.dispose();
+  });
+});
+
+// #487 phase 3 step 4 — Escape closes a focused drawer and returns focus to
+// the rail launcher that opened it. `saved-history.ts`'s search-box Escape
+// handler (Part 1's fix) and the saved-row edit form's own Escape-to-cancel
+// handlers are the ones expected to claim the key first (`defaultPrevented`);
+// this handler must never act on top of one of those.
+describe('mountAppShell — Escape closes the focused drawer (#487 phase 3 step 4)', () => {
+  it('Escape on a descendant of .sidebar closes the drawer, consumes the key, and returns focus to the rail launcher', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library' });
+    document.body.appendChild(app.root); // .focus() is a no-op on a detached element
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+    const rail = app.root.querySelector('.left-rail') as HTMLElement;
+    const libraryBtn = [...rail.querySelectorAll<HTMLButtonElement>('.left-rail-btn')][LEFT_NAV_SECTIONS.indexOf('library')];
+    // Dispatched on a DESCENDANT, never `sidebar` itself — proves the handler
+    // relies on bubbling rather than requiring the event to land exactly on it.
+    const target = app.dom.savedList!;
+    expect(sidebar.contains(target)).toBe(true);
+
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
+    target.dispatchEvent(event);
+
+    expect(app.state.leftNavSection.value).toBeNull();
+    expect(sidebar.dataset.navMode).toBe('rail');
+    expect(event.defaultPrevented).toBe(true);
+    expect(document.activeElement).toBe(libraryBtn);
+
+    app.root.remove();
+    handle.dispose();
+  });
+
+  it('ignores a non-Escape key entirely', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library' });
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+
+    const event = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true });
+    sidebar.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+    expect(app.state.leftNavSection.value).toBe('library');
+    handle.dispose();
+  });
+
+  it('does nothing when not in drawer mode — wide', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'wide' });
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
+    sidebar.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+    expect(app.state.leftNavMode.value).toBe('wide');
+    handle.dispose();
+  });
+
+  it('does nothing when not in drawer mode — bare rail (no focused section)', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: null });
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
+    sidebar.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+    expect(app.state.leftNavSection.value).toBeNull();
+    expect(sidebar.dataset.navMode).toBe('rail');
+    handle.dispose();
+  });
+
+  // The regression Part 1's fix makes reachable at all: a NON-empty search
+  // filter still legitimately claims Escape for itself, and this handler must
+  // respect that claim rather than also closing the drawer on the same key.
+  it('respects a nested handler that already claimed Escape (a non-empty search filter) — the drawer stays open', () => {
+    const loadSchema = vi.fn(async () => {});
+    const loadReference = vi.fn(async () => {});
+    const app = makeApp({ catalog: { loadSchema, loadReference }, prefs: { save: vi.fn() } });
+    app.state.savedQueries = [savedQuery({ id: 's1', name: 'Q1', sql: 'SELECT 1' })];
+    app.state.leftNavMode.value = 'rail';
+    app.state.leftNavSection.value = 'library';
+    const handle = mountAppShell({
+      app, root: app.root, document, state: app.state, catalog: app.catalog,
+      prefs: app.prefs, matchMedia: null, updateBanner: vi.fn(), startDrag,
+    });
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+    const input = app.dom.savedSearch!.querySelector<HTMLInputElement>('.sv-search-input')!;
+    expect(input).not.toBeNull();
+    input.value = 'zzzz';
+    input.dispatchEvent(new Event('input', { bubbles: true })); // commit a genuinely non-empty filter
+
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
+    input.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true); // the search box's own handler claimed it
+    expect(app.state.leftNavSection.value).toBe('library'); // the drawer's own handler did NOT also act
+    expect(sidebar.dataset.navMode).toBe('drawer');
+    handle.dispose();
+  });
+
+  // The `section === null` guard is defensive against the mode/section
+  // coherence invariant (`core/left-nav-layout.ts`) ever being violated — which
+  // no normal interaction can reach, since every write to `leftNavMode`/
+  // `leftNavSection` goes through the reducers that maintain it. Forcing the
+  // violation by hand (clear the section, then hand-restore the now-stale
+  // 'drawer' dataset the reactive effect just corrected) is the only way to
+  // exercise this line at all, and it proves the guard: with no section to
+  // toggle, the handler does nothing rather than throwing or acting on `null`.
+  it('the defensive section===null guard: a hand-forced coherence violation still does nothing (never throws)', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library' });
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+    app.state.leftNavSection.value = null; // the effect immediately flips navMode back to 'rail'...
+    sidebar.dataset.navMode = 'drawer'; // ...so re-force it, simulating the invariant being violated.
+
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
+    expect(() => sidebar.dispatchEvent(event)).not.toThrow();
+
+    expect(event.defaultPrevented).toBe(false);
+    handle.dispose();
+  });
+});
+
+// #487 phase-3 review, major issue 2 — a semantic left-navigation command
+// (Escape, a rail click) that runs while a pointer resize session is still
+// live must preempt that session FIRST: an active drag keeps its own
+// uncommitted layout snapshot, and its eventual mouseup was silently
+// overwriting (or undoing) whatever the command just did, because the drag
+// had no way to notice the command ran at all. The fix routes both
+// `application/left-nav.ts` seams through `app.preemptActiveResize` (wired by
+// `mountAppShell` to `leftNavSeparator.cancelActiveSession()` + a repaint) —
+// these tests exercise it at the shell's own real-DOM/real-listener level.
+describe('mountAppShell — a semantic command preempts an active resize session (#487 phase-3 review, major issue 2)', () => {
+  it('Escape closing a drawer mid-drag is not undone by the drag\'s own eventual mouseup', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library' });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+    // A descendant of `.sidebar` (never the separator, a sibling) — mirrors
+    // the existing Escape-handler tests above, and stands in for wherever
+    // focus was left inside the drawer.
+    const target = app.dom.savedList!;
+
+    // Start dragging the drawer's own separator (grabbed at its current
+    // occupied width, rail + the 240px drawer default — a zero grip offset).
+    // `left-nav-separator.ts`'s own `mousedown` calls `preventDefault()`, so
+    // focus is never moved onto the separator by this drag.
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 288 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 260 })); // still within the drawer band
+    expect(sidebar.dataset.navMode).toBe('drawer'); // the drag hasn't left drawer mode
+
+    // While the mouse is STILL DOWN, Escape closes the drawer.
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
+    target.dispatchEvent(event);
+    expect(app.state.leftNavSection.value).toBeNull();
+    expect(sidebar.dataset.navMode).toBe('rail');
+
+    // The user finally releases the mouse — before this fix, this silently
+    // reopened the drawer Escape had just closed.
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 260 }));
+
+    expect(app.state.leftNavSection.value).toBeNull();
+    expect(sidebar.dataset.navMode).toBe('rail');
+    expect(app.state.leftNavMode.value).toBe('rail');
+
+    app.root.remove();
+    handle.dispose();
+  });
+
+  it('a rail-icon click mid-drag closes the drawer permanently too, not just until the drag\'s own mouseup', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library' });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+    const libraryBtn = [...app.root.querySelectorAll<HTMLButtonElement>('.left-rail-btn')][LEFT_NAV_SECTIONS.indexOf('library')];
+
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 288 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 260 }));
+    expect(sidebar.dataset.navMode).toBe('drawer');
+
+    // A second activation of the already-open section, mid-drag, closes it.
+    libraryBtn.click();
+    expect(app.state.leftNavSection.value).toBeNull();
+
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 260 }));
+    expect(app.state.leftNavSection.value).toBeNull();
+
+    app.root.remove();
+    handle.dispose();
+  });
+
+  it('preemption is a no-op when no session is active — an ordinary Escape/rail click outside a drag behaves exactly as before', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library' });
+    document.body.appendChild(app.root);
+    const sidebar = app.root.querySelector('.sidebar') as HTMLElement;
+
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
+    sidebar.dispatchEvent(event);
+
+    expect(app.state.leftNavSection.value).toBeNull();
+    expect(sidebar.dataset.navMode).toBe('rail');
+
+    app.root.remove();
+    handle.dispose();
+  });
+});
+
+// #487 phase 3 step 4 — converting a focused drawer to the wide sidebar (a
+// resize-separator drag past the wide threshold; `End`/bare-rail-`ArrowRight`
+// go through the identical `applyEffectiveLayout` callback) restores focus to
+// the section's own wide-mode tab. This is a SEPARATE trigger from Escape
+// (Escape only ever converts drawer -> bare rail, never all the way to wide).
+describe('mountAppShell — converting to wide restores focus to the section\'s wide-mode tab (#487 phase 3 step 4)', () => {
+  it('a LOWER section (History): dragging the separator past the wide threshold focuses the History tab', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'history' });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 400 })); // past the wide threshold
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 400 }));
+
+    expect(app.state.leftNavMode.value).toBe('wide');
+    const historyTab = app.dom.savedTabsRow!.querySelector('[data-section="history"]');
+    expect(historyTab).not.toBeNull();
+    expect(document.activeElement).toBe(historyTab);
+
+    app.root.remove();
+    handle.dispose();
+  });
+
+  it('an UPPER section (Dashboards): dragging the separator past the wide threshold focuses the Dashboards tab', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'dashboards' });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 400 }));
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 400 }));
+
+    expect(app.state.leftNavMode.value).toBe('wide');
+    const dashboardsTab = app.dom.upperRoleTabs!.querySelector('[data-section="dashboards"]');
+    expect(dashboardsTab).not.toBeNull();
+    expect(document.activeElement).toBe(dashboardsTab);
+
+    app.root.remove();
+    handle.dispose();
+  });
+
+  it('the very first presentation call (initial mount) never moves focus — nothing was previously focused', () => {
+    const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus');
+    const { handle } = mountWithLeftNav({ mode: 'wide' });
+
+    expect(focusSpy).not.toHaveBeenCalled();
+
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+
+  // #487 phase-3 review, bug 4: a non-monotone drag calls
+  // `applyEffectiveLeftNavigationLayout` once per intermediate frame, not just
+  // on the final commit. Before the fix, the intermediate wide-crossing frame
+  // below wrongly fires the restoration (`previousFocusedSection` was still
+  // 'history' from the mount-time paint, and had not yet been corrupted to
+  // null by this very frame) — a premature focus move mid-gesture, on a
+  // transition the user has not actually committed to yet.
+  it('a non-monotone drag (drawer -> past wide -> back to bare rail) does not restore focus on the intermediate wide-crossing frame', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'history' });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    const historyTab = app.dom.savedTabsRow!.querySelector('[data-section="history"]') as HTMLElement;
+    const focusSpy = vi.spyOn(historyTab, 'focus');
+
+    // Grabbed at the drawer's own current total (rail + the 240px drawer
+    // default) — a zero grip offset.
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 288 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 400 })); // crosses past the wide threshold
+    expect(mainRow.dataset.navMode).toBe('wide');
+    expect(focusSpy).not.toHaveBeenCalled(); // the gesture has not committed yet
+
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 20 })); // back past the fold threshold, to bare rail
+    expect(mainRow.dataset.navMode).toBe('rail');
+    expect(focusSpy).not.toHaveBeenCalled();
+
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 20 }));
+    // The final commit lands on bare rail (not wide), so there is nothing to
+    // restore focus TO either — but the point of this test is that the
+    // earlier wide-crossing frame never fired it in the first place.
+    expect(mainRow.dataset.navMode).toBe('rail');
+    expect(focusSpy).not.toHaveBeenCalled();
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+});
+
+// #487 phase-3 review, major issue 4 — a committed drawer -> BARE-RAIL
+// transition had no focus restoration at all before this fix. Scoped to
+// `sidebar.contains(document.activeElement)`, not every rail arrival: a
+// pointer drag's `mousedown` calls `preventDefault()`, so focus can be left
+// stranded inside the drawer's now-hidden content — that is the case this
+// fix rescues. A keyboard fold (Home, or ArrowLeft crossing the fold
+// boundary) requires the separator itself to already hold focus to receive
+// that keydown, so this must NOT redirect focus away from it — doing so
+// would break the very next ArrowRight/End from reaching the control that
+// handles it.
+describe('mountAppShell — drag-folding an open drawer to bare rail restores focus to the rail launcher (#487 phase-3 review, major issue 4)', () => {
+  it('a pointer drag-fold with focus stuck inside the drawer moves focus to the rail launcher', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library' });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+    const libraryBtn = [...app.root.querySelectorAll<HTMLButtonElement>('.left-rail-btn')][LEFT_NAV_SECTIONS.indexOf('library')];
+    const focusSpy = vi.spyOn(libraryBtn, 'focus');
+
+    // Focus something inside the drawer BEFORE the drag — mousedown's own
+    // `preventDefault()` means the drag never moves focus onto the
+    // separator, so this is exactly where a real drag-fold would leave it.
+    const insideDrawer = app.dom.savedList as HTMLElement;
+    insideDrawer.tabIndex = -1; // focusable, for this test only
+    insideDrawer.focus();
+    expect(document.activeElement).toBe(insideDrawer);
+
+    // Grabbed at the drawer's own current total (rail + the 240px default) —
+    // a zero grip offset.
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 288 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 50 })); // past the fold threshold
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 50 }));
+
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    expect(mainRow.dataset.navMode).toBe('rail'); // confirms the fold actually committed
+    expect(focusSpy).toHaveBeenCalled();
+    expect(document.activeElement).toBe(libraryBtn);
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+
+  it('a keyboard fold (Home, focus already on the separator) leaves focus on the separator, not the rail launcher', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library' });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+    const libraryBtn = [...app.root.querySelectorAll<HTMLButtonElement>('.left-rail-btn')][LEFT_NAV_SECTIONS.indexOf('library')];
+    const focusSpy = vi.spyOn(libraryBtn, 'focus');
+    separator.focus();
+
+    const event = new KeyboardEvent('keydown', { key: 'Home', bubbles: true, cancelable: true });
+    separator.dispatchEvent(event);
+
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    expect(mainRow.dataset.navMode).toBe('rail');
+    expect(focusSpy).not.toHaveBeenCalled();
+    expect(document.activeElement).toBe(separator); // stays put — keyboard usability
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+
+  it('no restoration fires when nothing was focused inside the drawer to begin with', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library' });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+    const libraryBtn = [...app.root.querySelectorAll<HTMLButtonElement>('.left-rail-btn')][LEFT_NAV_SECTIONS.indexOf('library')];
+    const focusSpy = vi.spyOn(libraryBtn, 'focus');
+    (document.body as HTMLElement).focus(); // focus is elsewhere entirely
+
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 288 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 50 }));
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 50 }));
+
+    expect(focusSpy).not.toHaveBeenCalled();
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+});
+
+// #487 phase-3 review, second pass, major issue — a WIDE sidebar (never a
+// focused drawer) folding straight to bare rail had no restoration at all:
+// `focusedSection` is null throughout 'wide' by construction, so the OLD
+// `priorFocusedSection !== null` guard could never fire coming out of wide.
+// Recovered by asking the DOM which of the four section hosts the actually-
+// focused control sits under, since a wide sidebar shows two sections at
+// once and only the DOM knows which one really held focus.
+describe('mountAppShell — a wide sidebar folding straight to bare rail restores focus (#487 phase-3 review, second pass, major issue)', () => {
+  it('a pointer drag-fold from WIDE with the schema search focused (upper pane) moves focus to the Databases rail launcher', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'wide' });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+    const databasesBtn = [...app.root.querySelectorAll<HTMLButtonElement>('.left-rail-btn')][LEFT_NAV_SECTIONS.indexOf('databases')];
+    const focusSpy = vi.spyOn(databasesBtn, 'focus');
+
+    app.dom.schemaSearchInput!.focus();
+    expect(document.activeElement).toBe(app.dom.schemaSearchInput);
+
+    // Grabbed at the wide sidebar's own default total (248px) — a zero grip
+    // offset, mirroring this file's other drag helpers.
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 248 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 50 })); // well under the fold threshold
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 50 }));
+
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    expect(mainRow.dataset.navMode).toBe('rail'); // wide -> rail in one step (no intermediate drawer)
+    expect(focusSpy).toHaveBeenCalled();
+    expect(document.activeElement).toBe(databasesBtn);
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+
+  it('a pointer drag-fold from WIDE with a Library list row focused (lower pane) moves focus to the Library rail launcher', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'wide' });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+    const libraryBtn = [...app.root.querySelectorAll<HTMLButtonElement>('.left-rail-btn')][LEFT_NAV_SECTIONS.indexOf('library')];
+    const focusSpy = vi.spyOn(libraryBtn, 'focus');
+
+    const insideLibrary = app.dom.savedList as HTMLElement;
+    insideLibrary.tabIndex = -1; // focusable, for this test only
+    insideLibrary.focus();
+    expect(document.activeElement).toBe(insideLibrary);
+
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 248 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 50 }));
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 50 }));
+
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    expect(mainRow.dataset.navMode).toBe('rail');
+    expect(focusSpy).toHaveBeenCalled();
+    expect(document.activeElement).toBe(libraryBtn);
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+
+  it('a genuinely focused drawer folding to rail still prefers the tracked section over the DOM lookup (no behavior change)', () => {
+    // Regression guard: the DOM-derived fallback must only kick in when
+    // `priorFocusedSection` is null (the wide case) — a committed drawer ->
+    // rail transition (major issue 4, above) must keep using the tracked
+    // section exactly as before.
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'history' });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+    const historyBtn = [...app.root.querySelectorAll<HTMLButtonElement>('.left-rail-btn')][LEFT_NAV_SECTIONS.indexOf('history')];
+    const focusSpy = vi.spyOn(historyBtn, 'focus');
+    const insideDrawer = app.dom.historyList as HTMLElement;
+    insideDrawer.tabIndex = -1;
+    insideDrawer.focus();
+
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 288 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 50 }));
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 50 }));
+
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    expect(mainRow.dataset.navMode).toBe('rail');
+    expect(focusSpy).toHaveBeenCalled();
+    expect(document.activeElement).toBe(historyBtn);
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+
+  it('folding from WIDE with focus on the schema/saved splitter (no [data-section] ancestor) does not focus any rail launcher', () => {
+    // The splitter (`app.dom.sideSplit`) sits directly inside `.sidebar` but
+    // outside all four `[data-section]` hosts — the DOM-derived fallback must
+    // recognize it has no section to hand off to, rather than calling
+    // `leftRail.focusSection` with an invalid value.
+    const { app, handle } = mountWithLeftNav({ mode: 'wide' });
+    document.body.appendChild(app.root);
+    const separator = app.root.querySelector('.col-resize') as HTMLElement;
+    const railButtons = [...app.root.querySelectorAll<HTMLButtonElement>('.left-rail-btn')];
+    const focusSpies = railButtons.map((btn) => vi.spyOn(btn, 'focus'));
+
+    const splitter = app.dom.sideSplit as HTMLElement;
+    splitter.tabIndex = -1;
+    splitter.focus();
+    expect(document.activeElement).toBe(splitter);
+
+    separator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 248 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 50 }));
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 50 }));
+
+    const mainRow = app.root.querySelector('.main-row') as HTMLElement;
+    expect(mainRow.dataset.navMode).toBe('rail');
+    expect(focusSpies.some((spy) => spy.mock.calls.length > 0)).toBe(false);
+
+    app.root.remove();
+    handle.dispose();
+    focusSpies.forEach((spy) => spy.mockRestore());
+  });
+});
+
+// #487 phase-3 review, second pass, major issue — entering mobile Editor/
+// Results hides `.sidebar` via CSS alone (`.main-row[data-mobile-view=
+// "editor"/"results"] .sidebar { display: none }`), independently of
+// `navMode` (mobile forces 'wide' regardless of which mobile view is
+// showing — major issue 3's guard correctly stops the wide-tab branch from
+// stealing focus onto a hidden DESKTOP tab here, but nothing was rescuing
+// the focus at all). Tables is excluded: its sidebar stays visible.
+describe('mountAppShell — crossing into mobile with an open drawer moves focus off the (CSS-)hidden sidebar (#487 phase-3 review, second pass, major issue)', () => {
+  it('mobileView "editor" (the default): moves a focused drawer control to the Editor bottom-nav button', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library', isMobile: false });
+    document.body.appendChild(app.root);
+    const editorBtn = app.dom.mobileNav!.querySelector('[data-view="editor"]') as HTMLElement;
+    const focusSpy = vi.spyOn(editorBtn, 'focus');
+    const insideDrawer = app.dom.savedList as HTMLElement;
+    insideDrawer.tabIndex = -1;
+    insideDrawer.focus();
+    expect(document.activeElement).toBe(insideDrawer);
+
+    app.state.isMobile.value = true;
+
+    expect(focusSpy).toHaveBeenCalled();
+    expect(document.activeElement).toBe(editorBtn);
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+
+  it('mobileView "results": moves a focused drawer control to the Results bottom-nav button', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library', isMobile: false });
+    document.body.appendChild(app.root);
+    app.state.mobileView.value = 'results';
+    const resultsBtn = app.dom.mobileNav!.querySelector('[data-view="results"]') as HTMLElement;
+    const focusSpy = vi.spyOn(resultsBtn, 'focus');
+    const insideDrawer = app.dom.savedList as HTMLElement;
+    insideDrawer.tabIndex = -1;
+    insideDrawer.focus();
+
+    app.state.isMobile.value = true;
+
+    expect(focusSpy).toHaveBeenCalled();
+    expect(document.activeElement).toBe(resultsBtn);
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+
+  it('mobileView "tables": does NOT move focus — that view keeps the sidebar visible', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library', isMobile: false });
+    document.body.appendChild(app.root);
+    app.state.mobileView.value = 'tables';
+    const insideDrawer = app.dom.savedList as HTMLElement;
+    insideDrawer.tabIndex = -1;
+    insideDrawer.focus();
+
+    app.state.isMobile.value = true;
+
+    expect(document.activeElement).toBe(insideDrawer);
+
+    app.root.remove();
+    handle.dispose();
+  });
+});
+
+// #487 phase-3 review, second pass, major issue — tapping the bottom nav
+// straight from Tables to Editor/Results while ALREADY mobile hides
+// `.sidebar` via the same CSS rule, but through a SEPARATE effect
+// (`state.mobileView` alone, no `isMobile`/`leftNavMode`/`leftNavSection`
+// change) that the crossing-focused fix above never runs.
+describe('mountAppShell — tapping the bottom nav to Editor/Results while already mobile rescues focus (#487 phase-3 review, second pass, major issue)', () => {
+  it('moves a focused Tables control to the Editor bottom-nav button when mobileView changes to "editor"', () => {
+    const { app, handle } = mountWithLeftNav({ isMobile: true });
+    document.body.appendChild(app.root);
+    app.state.mobileView.value = 'tables';
+    const editorBtn = app.dom.mobileNav!.querySelector('[data-view="editor"]') as HTMLElement;
+    const focusSpy = vi.spyOn(editorBtn, 'focus');
+    app.dom.schemaSearchInput!.focus();
+    expect(document.activeElement).toBe(app.dom.schemaSearchInput);
+
+    app.state.mobileView.value = 'editor';
+
+    expect(focusSpy).toHaveBeenCalled();
+    expect(document.activeElement).toBe(editorBtn);
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+
+  it('does not force-refocus when nothing was focused inside the sidebar', () => {
+    const { app, handle } = mountWithLeftNav({ isMobile: true });
+    document.body.appendChild(app.root);
+    app.state.mobileView.value = 'tables';
+    const tablesBtn = app.dom.mobileNav!.querySelector('[data-view="tables"]') as HTMLElement;
+    tablesBtn.focus();
+    expect(document.activeElement).toBe(tablesBtn);
+
+    app.state.mobileView.value = 'editor';
+
+    expect(document.activeElement).toBe(tablesBtn); // unchanged — nothing to rescue
+
+    app.root.remove();
+    handle.dispose();
+  });
+});
+
+// #487 phase-3 review, second pass, major issue — a mobile Dashboard hides
+// `.sidebar` via `.main-row[data-surface="dashboard"] .sidebar { display:
+// none }`, a THIRD trigger entirely outside `applyEffectiveLeftNavigationLayout`
+// / the mobileView effect above (`showHost` is called from outside this
+// shell's own reactive effects). #471's Editor bottom-nav button is the one
+// control the Dashboard surface deliberately keeps visible on mobile.
+describe('mountAppShell — showHost("dashboard") on mobile rescues focus off the hidden sidebar (#487 phase-3 review, second pass, major issue)', () => {
+  it('moves a focused sidebar control to the Editor bottom-nav button', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library', isMobile: true });
+    document.body.appendChild(app.root);
+    const editorBtn = app.dom.mobileNav!.querySelector('[data-view="editor"]') as HTMLElement;
+    const focusSpy = vi.spyOn(editorBtn, 'focus');
+    const insideDrawer = app.dom.savedList as HTMLElement;
+    insideDrawer.tabIndex = -1;
+    insideDrawer.focus();
+    expect(document.activeElement).toBe(insideDrawer);
+
+    handle.showHost('dashboard');
+
+    expect(focusSpy).toHaveBeenCalled();
+    expect(document.activeElement).toBe(editorBtn);
+
+    app.root.remove();
+    handle.dispose();
+    focusSpy.mockRestore();
+  });
+
+  it('does nothing at desktop widths — the sidebar genuinely stays beside the Dashboard there', () => {
+    const { app, handle } = mountWithLeftNav({ mode: 'rail', section: 'library', isMobile: false });
+    document.body.appendChild(app.root);
+    const insideDrawer = app.dom.savedList as HTMLElement;
+    insideDrawer.tabIndex = -1;
+    insideDrawer.focus();
+
+    handle.showHost('dashboard');
+
+    expect(document.activeElement).toBe(insideDrawer);
+
+    app.root.remove();
+    handle.dispose();
+  });
+});
diff --git a/tests/unit/app.test.ts b/tests/unit/app.test.ts
index b7857320..31cad8a7 100644
--- a/tests/unit/app.test.ts
+++ b/tests/unit/app.test.ts
@@ -2123,6 +2123,24 @@ describe('query run', () => {
     // a plain SELECT needs no session, so none is opened (avoids the session race)
     expect(asMock(app.conn.chCtx.fetch).mock.calls.map((c) => c[0]).some((u) => /session_id=/.test(u))).toBe(false);
   });
+  // #487 phase 3 regression test: a run's history recording used to skip its
+  // repaint of History entirely whenever Library ('saved', the default side
+  // panel) was exposed — `app.recordHistory` guarded the call on
+  // `sidePanel.value === 'history'`. That left History's own DOM stale until
+  // some unrelated event happened to repaint it, which never happens for
+  // History on its own (`state.history` is a plain array, not a signal). The
+  // fix makes `app.recordHistory`'s repaint unconditional.
+  it('a recorded run repaints History even while Library is the exposed side panel', async () => {
+    const { app } = appForRun([
+      [(u, sql) => /SELECT 1/.test(sql), resp({ body: streamBody(['{"meta":[{"name":"a","type":"UInt8"}]}\n', '{"row":{"a":"1"}}\n']) })],
+    ]);
+    expect(app.state.sidePanel.value).toBe('saved'); // Library is the exposed section
+    app.activeTab().sqlDraft = 'SELECT 1';
+    await app.actions.run();
+    expect(app.state.history.length).toBe(1);
+    expect(app.dom.historyList!.querySelectorAll('.history-row')).toHaveLength(1);
+    expect(app.dom.historyList!.textContent).toContain('SELECT 1');
+  });
   it('captures result.source for a normal row-returning result (#185)', async () => {
     const { app } = appForRun([
       [(u, sql) => /SELECT 1/.test(sql), resp({ body: streamBody(['{"meta":[{"name":"a","type":"UInt8"}]}\n', '{"row":{"a":"1"}}\n']) })],
@@ -5412,7 +5430,7 @@ describe('exhaustive controller coverage', () => {
     expect(app.state.savedQueries.length).toBe(1);
   });
 
-  it('drives each splitter handle through a drag', () => {
+  it('drives the sideRow/row splitter handles through a drag', () => {
     const e = env();
     const app = createApp(e);
     app.renderApp();
@@ -5422,7 +5440,6 @@ describe('exhaustive controller coverage', () => {
       window.dispatchEvent(new MouseEvent('mouseup'));
       return axis;
     };
-    drag(qs(app.root, '.col-resize'), 'col');
     drag(app.dom.sideSplit!, 'sideRow');
     drag(app.dom.editorResultsSplit!, 'row');
     expect(app.dom.editorResultsSplit!.classList.contains('editor-results-split')).toBe(true);
@@ -5435,6 +5452,40 @@ describe('exhaustive controller coverage', () => {
     expect(qs(app.root, '.mobile-segmented').style.height).toBe('');
   });
 
+  // #487 phase 3: `.col-resize` used to drive a bare `startDrag`/'col' clamp —
+  // that axis is gone (splitters.ts), and the handle's real behaviour (the
+  // mode machine, session bookkeeping, ARIA) is already covered exhaustively
+  // by `left-nav-separator.test.ts`, with the shell-level wiring (hidden
+  // toggles, `data-nav-mode`, the rail) covered by `app-shell.test.ts`. What
+  // NEITHER of those exercises is app.ts's own `ensureShell` wiring: that the
+  // REAL mounted `app.prefs`/`localStorage` and the real DOM `mountAppShell`
+  // built actually end up connected to `.col-resize`, not just each half in
+  // isolation. This is that one end-to-end check, at app.ts's own level.
+  it('#487 phase 3: dragging the mounted .col-resize handle drives the left-navigation separator end to end', () => {
+    vi.stubGlobal('localStorage', memStore());
+    const e = env();
+    const app = createApp(e);
+    app.renderApp();
+    const handle = qs(app.root, '.col-resize');
+
+    // Grabbed at the wide sidebar's own current width (248, the documented
+    // default for a fresh, unconfigured app) — a zero grip offset.
+    handle.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 248 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 300 }));
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 300 }));
+
+    expect(app.state.sidebarPx).toBe(300);
+    expect(app.state.leftNavMode.value).toBe('wide');
+    expect(globalThis.localStorage.getItem('asb:sidebarPx')).toBe('300');
+    // The real DOM `mountAppShell` built reflects the same commit — proof the
+    // separator's `applyEffectiveLayout` callback really is app-shell.ts's own
+    // `applyEffectiveLeftNavigationLayout`, not a stand-in that only updates
+    // `state`.
+    const sidebar = qs(app.root, '.sidebar');
+    expect(sidebar.dataset.navMode).toBe('wide');
+    expect(sidebar.style.width).toBe('300px');
+  });
+
   it('run(): network error → "Network error"', async () => {
     const e = env({ fetch: vi.fn(async () => { throw new TypeError('net down'); }) });
     const app = createApp(e);
@@ -6507,6 +6558,60 @@ describe('mobile best-effort mode (#126)', () => {
   });
 });
 
+describe('shell-width observer seam (#487 phase 3)', () => {
+  // Same convention as the `matchMedia` seam's `FakeMQL` above: a minimal
+  // stand-in for the real `ResizeObserver` constructor, injected via the
+  // `window: asWindow({ ...window, ResizeObserver: … })` precedent already
+  // used elsewhere in this file (see the `open` override around line 1067).
+  class FakeResizeObserver {
+    static instances: FakeResizeObserver[] = [];
+    observed: Element[] = [];
+    disconnected = false;
+    cb: ResizeObserverCallback;
+    constructor(cb: ResizeObserverCallback) {
+      this.cb = cb;
+      FakeResizeObserver.instances.push(this);
+    }
+    observe(el: Element): void { this.observed.push(el); }
+    unobserve(): void {}
+    disconnect(): void { this.disconnected = true; }
+    fire(width: number): void {
+      this.cb([{ contentRect: { width } } as ResizeObserverEntry], this as unknown as ResizeObserver);
+    }
+  }
+
+  it('uses the injected observeElementWidth seam when provided, identically to matchMedia', () => {
+    const observeElementWidth = vi.fn(() => vi.fn());
+    const app = createApp(env({ observeElementWidth }));
+    expect(app.observeElementWidth).toBe(observeElementWidth);
+  });
+
+  it('falls back to a real ResizeObserver-backed implementation when none is injected', () => {
+    FakeResizeObserver.instances.length = 0;
+    const app = createApp(env({
+      window: asWindow({ ...window, ResizeObserver: FakeResizeObserver as unknown as typeof ResizeObserver }),
+    }));
+    expect(typeof app.observeElementWidth).toBe('function');
+    const el = document.createElement('div');
+    const widths: number[] = [];
+    const dispose = app.observeElementWidth!(el, (w) => widths.push(w));
+    expect(FakeResizeObserver.instances).toHaveLength(1);
+    const [instance] = FakeResizeObserver.instances;
+    expect(instance.observed).toEqual([el]);
+    instance.fire(321);
+    expect(widths).toEqual([321]);
+    dispose();
+    expect(instance.disconnected).toBe(true);
+  });
+
+  it('resolves to undefined when neither observeElementWidth nor ResizeObserver is available — the same "feature simply doesn\'t run" contract as a matchMedia-less platform', () => {
+    const app = createApp(env({
+      window: asWindow({ history: { replaceState: vi.fn() }, navigator: {} }),
+    }));
+    expect(app.observeElementWidth).toBeUndefined();
+  });
+});
+
 // ── #407: unified route coordinator ──────────────────────────────────────────
 describe('unified /sql routing', () => {
   const dashboardWorkspace = (queries: SavedQueryV2[] = []): StoredWorkspaceV5 => ({
@@ -7093,6 +7198,21 @@ describe('unified /sql routing', () => {
       expect(toastEl.textContent).toBe('That query is no longer part of this workspace.');
     });
 
+    // #487 phase 3 — `app.openFocusedSection` is a thin controller-seam
+    // delegate to `application/left-nav.ts`'s own `openFocusedSection`
+    // (exhaustively covered in `left-nav.test.ts`); this just proves the
+    // wiring actually calls through into real `AppState`.
+    it('openFocusedSection delegates through to application/left-nav.ts', () => {
+      const { app } = readyApp(['a']);
+      app.state.leftNavMode.value = 'rail';
+      app.state.sidePanel.value = 'history';
+
+      app.openFocusedSection('library');
+
+      expect(app.state.sidePanel.value).toBe('saved');
+      expect(app.state.leftNavSection.value).toBe('library');
+    });
+
     // #535 — the tile's expand action. `openSavedQuery` opens a document;
     // `openPanelQuery` opens a PANEL: same tab, plus a run and a tree reveal, so
     // leaving the Dashboard neither loses the user's place in it nor drops them on
diff --git a/tests/unit/dashboard-tree.test.ts b/tests/unit/dashboard-tree.test.ts
index 5a919544..cacdfb99 100644
--- a/tests/unit/dashboard-tree.test.ts
+++ b/tests/unit/dashboard-tree.test.ts
@@ -1374,6 +1374,26 @@ describe('renderDashboardTree — Add panel (#515)', () => {
     expect(prematureRefresh).not.toHaveBeenCalled();
   });
 
+  // #487 phase 3 regression: before this fix, `revealAssignedPanel` wrote
+  // `state.upperRole` directly, which only ever moved the WIDE sidebar's
+  // pane. With the nav folded to the rail and focused on a different
+  // section, that left the Dashboards tree — and this reveal's own
+  // expand/scroll/select work — happening inside a hidden pane. Routing
+  // through `openFocusedSection` opens (or switches) the focused drawer too.
+  it('opens the folded drawer to Dashboards, without forcing wide mode, when the rail is folded on another section', async () => {
+    const { app, list } = open();
+    app.state.leftNavMode.value = 'rail';
+    app.state.leftNavSection.value = 'library';
+    click(plus(list));
+    nameInput().value = 'New panel';
+    nameInput().dispatchEvent(new Event('input', { bubbles: true }));
+    add().click();
+    await settle();
+    expect(app.state.upperRole.value).toBe('dashboards');
+    expect(app.state.leftNavSection.value).toBe('dashboards');
+    expect(app.state.leftNavMode.value).toBe('rail');
+  });
+
   it('keeps every dismiss path locked while Add is committing', async () => {
     let release = (_outcome: Awaited<ReturnType<App['mutateWorkspace']>>): void => {};
     const mutateWorkspace = vi.fn(() => new Promise<Awaited<ReturnType<App['mutateWorkspace']>>>(
diff --git a/tests/unit/file-menu.test.ts b/tests/unit/file-menu.test.ts
index ef4a4540..ea4cbf80 100644
--- a/tests/unit/file-menu.test.ts
+++ b/tests/unit/file-menu.test.ts
@@ -1793,6 +1793,24 @@ describe('New dashboard (#463)', () => {
     expect(toast()).toBe('Created dashboard');
   });
 
+  // #487 phase 3 regression: before this fix, `revealDashboard` wrote
+  // `state.upperRole` directly, which only ever moved the WIDE sidebar's
+  // pane. With the nav folded to the rail and focused on a different
+  // section, that left the Dashboards tree — and this reveal's own
+  // select/scroll work — happening inside a hidden pane. Routing through
+  // `openFocusedSection` opens (or switches) the focused drawer too.
+  it('opens the folded drawer to Dashboards, without forcing wide mode, when the rail is folded on another section', async () => {
+    const existing = dashboardDoc({ id: 'keep', title: 'Keep' });
+    const app = mountWith(wsWith(existing));
+    app.state.leftNavMode.value = 'rail';
+    app.state.leftNavSection.value = 'library';
+    create(app, 'Ingest health');
+    await flush();
+    expect(app.state.upperRole.value).toBe('dashboards');
+    expect(app.state.leftNavSection.value).toBe('dashboards');
+    expect(app.state.leftNavMode.value).toBe('rail');
+  });
+
   it('leaves the sidebar alone when the commit is refused', async () => {
     const committed = wsWith();
     const repo = statefulWorkspaceRepo(committed);
diff --git a/tests/unit/left-nav-layout.test.ts b/tests/unit/left-nav-layout.test.ts
index d393fb24..d0d3072b 100644
--- a/tests/unit/left-nav-layout.test.ts
+++ b/tests/unit/left-nav-layout.test.ts
@@ -18,10 +18,12 @@
 
 import { describe, it, expect } from 'vitest';
 import {
-  LEFT_DRAWER_DEFAULT_PX, LEFT_FOLD_THRESHOLD_PX, LEFT_NAV_LARGE_STEP_PX, LEFT_NAV_SECTIONS,
-  LEFT_NAV_STEP_PX, LEFT_PANEL_MAX_PX, LEFT_PANEL_MIN_PX, LEFT_RAIL_PX, LEFT_WIDE_DEFAULT_PX,
-  LEFT_WIDE_THRESHOLD_PX,
-  clampDrawerWidthPx, clampWideWidthPx, decodeLeftNavigationMode, decodeStoredPx,
+  LEFT_CENTRE_MIN_PX, LEFT_DRAWER_DEFAULT_PX, LEFT_FOLD_THRESHOLD_PX, LEFT_NAV_LARGE_STEP_PX,
+  LEFT_NAV_SECTIONS, LEFT_NAV_STEP_PX, LEFT_PANEL_MAX_PX, LEFT_PANEL_MIN_PX, LEFT_RAIL_PX,
+  LEFT_WIDE_DEFAULT_PX, LEFT_WIDE_THRESHOLD_PX,
+  advanceLeftNavigationResize, beginLeftNavigationResize, clampDrawerWidthPx,
+  clampLeftNavigationToMaximumTotal, clampWideWidthPx, commitLeftNavigationResize,
+  decodeLeftNavigationMode, decodeStoredPx,
   effectiveLeftNavigationLayout, isLeftNavigationSection, leftNavigationLayoutIsCoherent,
   leftNavigationSeparatorAria, leftNavigationWidthPx, normalizeLeftNavigationLayout,
   resolveLeftNavigationDrag, resolveLeftNavigationKey, resolveRailActivation, resolveRailOpen,
@@ -82,7 +84,10 @@ describe('constants (#487)', () => {
   it('keeps both documented defaults inside their own band', () => {
     expect(LEFT_WIDE_DEFAULT_PX).toBeGreaterThanOrEqual(LEFT_PANEL_MIN_PX);
     expect(LEFT_WIDE_DEFAULT_PX).toBeLessThanOrEqual(LEFT_PANEL_MAX_PX);
-    expect(LEFT_DRAWER_DEFAULT_PX).toBeGreaterThanOrEqual(LEFT_FOLD_THRESHOLD_PX);
+    // The drawer's own band is [LEFT_PANEL_MIN_PX, LEFT_WIDE_THRESHOLD_PX] —
+    // 180 (shared with the wide sidebar's floor), not LEFT_FOLD_THRESHOLD_PX
+    // (140, a fold POINT, not a legal drawer width — see `clampDrawerWidthPx`).
+    expect(LEFT_DRAWER_DEFAULT_PX).toBeGreaterThanOrEqual(LEFT_PANEL_MIN_PX);
     expect(LEFT_DRAWER_DEFAULT_PX).toBeLessThanOrEqual(LEFT_WIDE_THRESHOLD_PX);
     expect(LEFT_NAV_STEP_PX).toBeLessThan(LEFT_NAV_LARGE_STEP_PX);
   });
@@ -151,20 +156,26 @@ describe('clampWideWidthPx', () => {
 });
 
 describe('clampDrawerWidthPx', () => {
-  it('clamps to the drawer band, not the wide sidebar range', () => {
+  it('clamps to the drawer band — [LEFT_PANEL_MIN_PX, LEFT_WIDE_THRESHOLD_PX] — not the wide sidebar range', () => {
     expect(clampDrawerWidthPx(200)).toBe(200);
-    expect(clampDrawerWidthPx(LEFT_FOLD_THRESHOLD_PX)).toBe(LEFT_FOLD_THRESHOLD_PX);
+    expect(clampDrawerWidthPx(LEFT_PANEL_MIN_PX)).toBe(LEFT_PANEL_MIN_PX);
     expect(clampDrawerWidthPx(LEFT_WIDE_THRESHOLD_PX)).toBe(LEFT_WIDE_THRESHOLD_PX);
-    expect(clampDrawerWidthPx(0)).toBe(LEFT_FOLD_THRESHOLD_PX);
-    // Explicitly NOT the wide sidebar's bounds: a 400px drawer is impossible,
+    expect(clampDrawerWidthPx(0)).toBe(LEFT_PANEL_MIN_PX);
+    // Explicitly NOT the wide sidebar's ceiling: a 400px drawer is impossible,
     // because a drag that far right converts to the wide sidebar instead.
     expect(clampDrawerWidthPx(400)).toBe(LEFT_WIDE_THRESHOLD_PX);
-    expect(clampDrawerWidthPx(LEFT_PANEL_MIN_PX)).toBe(LEFT_PANEL_MIN_PX);
+    // A proposal at or below the OLD floor (the fold threshold, 140 — phase
+    // 1's placeholder) now clamps UP to the real-browser-settled 180 floor,
+    // not down to 140: at 140px the Dashboards section's titles rendered
+    // unreadable ("Sa...", "O...", "A..."), so 140 is no longer a legal
+    // drawer width at all.
+    expect(clampDrawerWidthPx(150)).toBe(LEFT_PANEL_MIN_PX);
+    expect(clampDrawerWidthPx(LEFT_FOLD_THRESHOLD_PX)).toBe(LEFT_PANEL_MIN_PX);
   });
   it('sends only NaN to the default', () => {
     expect(clampDrawerWidthPx(NaN)).toBe(LEFT_DRAWER_DEFAULT_PX);
     expect(clampDrawerWidthPx(Infinity)).toBe(LEFT_WIDE_THRESHOLD_PX);
-    expect(clampDrawerWidthPx(-Infinity)).toBe(LEFT_FOLD_THRESHOLD_PX);
+    expect(clampDrawerWidthPx(-Infinity)).toBe(LEFT_PANEL_MIN_PX);
   });
 });
 
@@ -220,9 +231,12 @@ describe('resolveLeftNavigationDrag — a monotone drag never reverses (#487 reg
     expect(new Set(widths)).toEqual(new Set([LEFT_PANEL_MIN_PX, LEFT_RAIL_PX]));
   });
 
-  it('keeps the drawer under the pointer through its whole band', () => {
+  it('keeps the drawer under the pointer through its whole RESIZABLE band', () => {
+    // Starts at LEFT_PANEL_MIN_PX (180), not LEFT_FOLD_THRESHOLD_PX (140): the
+    // 140–179 range is now a dead zone (see the dead-zone test below), so the
+    // drawer only tracks the pointer 1:1 from its own floor upward.
     let layout: LeftNavigationLayout = rail({ focusedSection: 'history' });
-    for (const x of range(LEFT_RAIL_PX + LEFT_FOLD_THRESHOLD_PX, LEFT_RAIL_PX + LEFT_WIDE_THRESHOLD_PX)) {
+    for (const x of range(LEFT_RAIL_PX + LEFT_PANEL_MIN_PX, LEFT_RAIL_PX + LEFT_WIDE_THRESHOLD_PX)) {
       layout = resolveLeftNavigationDrag(layout, x);
       expect(leftNavigationWidthPx(layout)).toBe(x);
     }
@@ -292,18 +306,32 @@ describe('resolveLeftNavigationDrag — rail', () => {
     expect(next.focusedSection).toBe('dashboards');
     expect(next.drawerWidthPx).toBe(200);
   });
-  it('holds an open drawer at exactly the fold threshold, and folds one pixel below it', () => {
-    // The closed lower edge of the drawer band: `clampDrawerWidthPx` claims 140 is
-    // reachable, so the reducer's comparison must agree. A `<=` here would make
-    // 140 unreachable while the clamp still advertised it.
+  it('holds an open drawer AT ITS FLOOR at exactly the fold threshold, and folds one pixel below it', () => {
+    // The floor was raised to LEFT_PANEL_MIN_PX (180), so the fold threshold
+    // (140) is no longer itself a reachable drawer width — it is the dead
+    // zone's own lower edge. The reducer's fold check is a strict `<`, so a
+    // proposal exactly AT the threshold does not fold and clamps UP to the 180
+    // floor instead; only one pixel below actually folds.
     const open = resolveLeftNavigationDrag(
       rail({ focusedSection: 'history' }), LEFT_RAIL_PX + LEFT_FOLD_THRESHOLD_PX);
     expect(open.focusedSection).toBe('history');
-    expect(open.drawerWidthPx).toBe(LEFT_FOLD_THRESHOLD_PX);
+    expect(open.drawerWidthPx).toBe(LEFT_PANEL_MIN_PX);
     const closed = resolveLeftNavigationDrag(
       rail({ focusedSection: 'history' }), LEFT_RAIL_PX + LEFT_FOLD_THRESHOLD_PX - 1);
     expect(closed.focusedSection).toBeNull();
   });
+  it("sits at the 180 floor through the drawer's dead zone rather than clipping or folding — mirrors the wide sidebar", () => {
+    // #487 phase 3's real-browser settling of the drawer's minimum width:
+    // between the fold threshold and the floor the drawer now holds at 180 and
+    // stays open, exactly like `clampWideWidthPx`'s own dead zone for the wide
+    // sidebar (see "sits at the 180 floor through the whole dead zone" above).
+    for (const panelProposal of [LEFT_FOLD_THRESHOLD_PX, 150, 160, LEFT_PANEL_MIN_PX - 1]) {
+      const next = resolveLeftNavigationDrag(
+        rail({ focusedSection: 'history' }), LEFT_RAIL_PX + panelProposal);
+      expect(next.focusedSection).toBe('history');
+      expect(next.drawerWidthPx).toBe(LEFT_PANEL_MIN_PX);
+    }
+  });
   it('holds an open drawer at exactly the wide threshold, and converts one pixel above it', () => {
     const open = resolveLeftNavigationDrag(
       rail({ focusedSection: 'history' }), LEFT_RAIL_PX + LEFT_WIDE_THRESHOLD_PX);
@@ -388,11 +416,26 @@ describe('resolveLeftNavigationKey', () => {
     expect(next.drawerWidthPx).toBe(200 + LEFT_NAV_STEP_PX);
     expect(next.wideWidthPx).toBe(LEFT_WIDE_DEFAULT_PX);
   });
-  it('can fold an open drawer closed with an arrow at its floor', () => {
+  it('folds an open drawer closed on a leftward step AT ITS FLOOR — the new mirror of the wide-floor fix', () => {
+    // Before the drawer's floor was raised to LEFT_PANEL_MIN_PX (180), this
+    // needed no special case: the drawer's floor WAS the fold threshold (140),
+    // so an ordinary relative step below it was already below the threshold
+    // too. Now that the floor sits above the threshold, a plain ArrowLeft from
+    // 180 would otherwise land in the 140–179 dead zone and get stranded there
+    // forever — exactly the failure this function's own header comment names
+    // for the wide sidebar's floor. The explicit floor check added alongside
+    // it (`resolveLeftNavigationKey`'s drawer-floor branch) fixes the drawer
+    // identically.
     const next = resolveLeftNavigationKey(
-      rail({ focusedSection: 'history', drawerWidthPx: LEFT_FOLD_THRESHOLD_PX }), { key: 'ArrowLeft' })!;
+      rail({ focusedSection: 'history', drawerWidthPx: LEFT_PANEL_MIN_PX }), { key: 'ArrowLeft' })!;
     expect(next.focusedSection).toBeNull();
   });
+  it('resizes rightward from the drawer floor instead of folding — the mirror check must not fire on ArrowRight', () => {
+    const next = resolveLeftNavigationKey(
+      rail({ focusedSection: 'history', drawerWidthPx: LEFT_PANEL_MIN_PX }), { key: 'ArrowRight' })!;
+    expect(next.focusedSection).toBe('history');
+    expect(next.drawerWidthPx).toBe(LEFT_PANEL_MIN_PX + LEFT_NAV_STEP_PX);
+  });
   it('leaves a bare rail on ONE rightward step, at the REMEMBERED width', () => {
     // A relative +16 from the rail's own 48px would propose 64, land in the sticky
     // band and do nothing forever, so the boundary step performs the restore
@@ -421,13 +464,16 @@ describe('resolveLeftNavigationKey', () => {
     //
     // Band EDGES are deliberately excluded and asserted separately: there the
     // keyboard performs a semantic transition the pointer reaches by simply
-    // travelling further, which no single shared proposal can express. A bare rail
-    // and a 180px sidebar are the two such states.
+    // travelling further, which no single shared proposal can express. A bare
+    // rail, a 180px wide sidebar, and — since the drawer's floor was raised to
+    // match — a 180px open drawer are the three such states.
     const cases: LeftNavigationLayout[] = [
       wide({ wideWidthPx: 300 }),
       wide({ wideWidthPx: LEFT_PANEL_MIN_PX + LEFT_NAV_LARGE_STEP_PX }),
       wide({ wideWidthPx: LEFT_PANEL_MAX_PX }),
-      rail({ focusedSection: 'databases', drawerWidthPx: LEFT_FOLD_THRESHOLD_PX }),
+      // NOT the drawer's floor (LEFT_PANEL_MIN_PX) — that is a band EDGE now,
+      // exactly like the wide sidebar's, and is asserted separately above.
+      rail({ focusedSection: 'databases', drawerWidthPx: LEFT_PANEL_MIN_PX + LEFT_NAV_LARGE_STEP_PX }),
       rail({ focusedSection: 'databases', drawerWidthPx: 200 }),
       rail({ focusedSection: 'databases', drawerWidthPx: LEFT_WIDE_THRESHOLD_PX }),
     ];
@@ -770,4 +816,343 @@ describe('leftNavigationSeparatorAria', () => {
       expect(valueNow).toBeLessThanOrEqual(valueMax);
     }
   });
+
+  // #487 phase 3: an optional ceiling, added without disturbing any existing
+  // caller — this is the regression the "omitted" case guards.
+  describe('the optional maxNavigationTotalPx ceiling (#487 phase 3)', () => {
+    it('is unchanged from before phase 3 when the parameter is omitted', () => {
+      // Would fail if a phase-3 edit accidentally tightened the default ceiling.
+      expect(leftNavigationSeparatorAria(wide({ wideWidthPx: 300 })))
+        .toEqual({ valueMin: LEFT_RAIL_PX, valueMax: LEFT_PANEL_MAX_PX, valueNow: 300 });
+    });
+    it('ignores a non-finite or non-positive ceiling, exactly like omitting it', () => {
+      for (const bogus of [NaN, Infinity, -Infinity, 0, -100]) {
+        expect(leftNavigationSeparatorAria(wide({ wideWidthPx: 300 }), bogus).valueMax)
+          .toBe(LEFT_PANEL_MAX_PX);
+      }
+    });
+    it('shrinks valueMax to a smaller ceiling', () => {
+      expect(leftNavigationSeparatorAria(wide({ wideWidthPx: 200 }), 300).valueMax).toBe(300);
+    });
+    it('has no effect when the ceiling exceeds LEFT_PANEL_MAX_PX', () => {
+      expect(leftNavigationSeparatorAria(wide({ wideWidthPx: 200 }), 9999).valueMax)
+        .toBe(LEFT_PANEL_MAX_PX);
+    });
+  });
+
+  // A pathologically small budget (below LEFT_RAIL_PX, or below an open
+  // drawer's own floor) is unreachable in the planned production UI —
+  // `clampLeftNavigationToMaximumTotal`'s own comment works out the realistic
+  // budget floor at ~281px — but this is a PUBLIC pure helper, so the
+  // valueMin <= valueNow <= valueMax invariant must hold defensively for any
+  // budget rather than relying on a caller never passing one this small.
+  describe('the valueMin <= valueNow <= valueMax invariant for pathologically small budgets', () => {
+    it.each([1, 47, 100])('holds for a bare rail at budget %ipx', (budget) => {
+      const { valueMin, valueMax, valueNow } = leftNavigationSeparatorAria(rail(), budget);
+      expect(valueMin).toBeLessThanOrEqual(valueNow);
+      expect(valueNow).toBeLessThanOrEqual(valueMax);
+    });
+    it('holds for an open drawer at a budget below the drawer\'s own floor', () => {
+      // The drawer's floor is LEFT_RAIL_PX + LEFT_PANEL_MIN_PX (228) — raised
+      // from the fold threshold (140) to match the wide sidebar's own floor,
+      // per #487 phase 3's real-browser settling of the drawer's minimum
+      // width. Pick a budget well below that so valueNow (the drawer's
+      // occupied width) would exceed an unclamped valueMax.
+      const layout = rail({ focusedSection: 'library', drawerWidthPx: LEFT_WIDE_THRESHOLD_PX });
+      const { valueMin, valueMax, valueNow } = leftNavigationSeparatorAria(layout, 50);
+      expect(valueMin).toBeLessThanOrEqual(valueNow);
+      expect(valueNow).toBeLessThanOrEqual(valueMax);
+      // valueMax never drops below valueMin, even under a budget below the rail.
+      expect(valueMax).toBeGreaterThanOrEqual(valueMin);
+    });
+    it('does not change behaviour for any realistic budget (existing tests above stay exact)', () => {
+      // Re-assert one exact case from the "shrinks valueMax" test above: the
+      // floor-at-valueMin change must be a no-op once the budget clears LEFT_RAIL_PX.
+      expect(leftNavigationSeparatorAria(wide({ wideWidthPx: 200 }), 300).valueMax).toBe(300);
+    });
+  });
+});
+
+describe('clampLeftNavigationToMaximumTotal (#487 phase 3)', () => {
+  it('shrinks a wide layout that exceeds the budget', () => {
+    const next = clampLeftNavigationToMaximumTotal(wide({ wideWidthPx: 350 }), 300);
+    expect(next.mode).toBe('wide');
+    expect(next.wideWidthPx).toBe(300);
+  });
+  it('shrinks a drawer layout that exceeds the budget, measured beside the rail', () => {
+    const next = clampLeftNavigationToMaximumTotal(
+      rail({ focusedSection: 'library', drawerWidthPx: 220 }), LEFT_RAIL_PX + 180);
+    expect(next.mode).toBe('rail');
+    expect(next.focusedSection).toBe('library');
+    expect(next.drawerWidthPx).toBe(180);
+  });
+  it('never changes mode, including for a bare rail (nothing to shrink)', () => {
+    expect(clampLeftNavigationToMaximumTotal(rail(), 0).mode).toBe('rail');
+    expect(clampLeftNavigationToMaximumTotal(rail(), 0)).toEqual(rail());
+    expect(clampLeftNavigationToMaximumTotal(wide({ wideWidthPx: 350 }), 0).mode).toBe('wide');
+    expect(clampLeftNavigationToMaximumTotal(
+      rail({ focusedSection: 'library', drawerWidthPx: 220 }), 0).mode).toBe('rail');
+  });
+  it("returns wide's own floor, not NaN or a thrown error, for a budget below it", () => {
+    expect(clampLeftNavigationToMaximumTotal(wide({ wideWidthPx: 350 }), 0).wideWidthPx)
+      .toBe(LEFT_PANEL_MIN_PX);
+    expect(clampLeftNavigationToMaximumTotal(wide({ wideWidthPx: 350 }), LEFT_PANEL_MIN_PX - 1).wideWidthPx)
+      .toBe(LEFT_PANEL_MIN_PX);
+  });
+  it("returns the drawer's own floor for a budget below it", () => {
+    // The floor is LEFT_PANEL_MIN_PX (180) now, not LEFT_FOLD_THRESHOLD_PX
+    // (140) — raised to match the wide sidebar's own floor.
+    const next = clampLeftNavigationToMaximumTotal(
+      rail({ focusedSection: 'library', drawerWidthPx: 220 }), LEFT_RAIL_PX + LEFT_PANEL_MIN_PX - 1);
+    expect(next.drawerWidthPx).toBe(LEFT_PANEL_MIN_PX);
+  });
+  it('is exact at the floor boundary — the floor itself still fits', () => {
+    expect(clampLeftNavigationToMaximumTotal(wide({ wideWidthPx: 350 }), LEFT_PANEL_MIN_PX).wideWidthPx)
+      .toBe(LEFT_PANEL_MIN_PX);
+    const next = clampLeftNavigationToMaximumTotal(
+      rail({ focusedSection: 'library', drawerWidthPx: 220 }), LEFT_RAIL_PX + LEFT_PANEL_MIN_PX);
+    expect(next.drawerWidthPx).toBe(LEFT_PANEL_MIN_PX);
+  });
+  it('does not propagate NaN or Infinity for a non-finite or negative budget', () => {
+    for (const bogus of [NaN, Infinity, -Infinity, -1, -9999]) {
+      const wideResult = clampLeftNavigationToMaximumTotal(wide({ wideWidthPx: 300 }), bogus);
+      expect(Number.isFinite(wideResult.wideWidthPx)).toBe(true);
+      const drawerResult = clampLeftNavigationToMaximumTotal(
+        rail({ focusedSection: 'library', drawerWidthPx: 200 }), bogus);
+      expect(Number.isFinite(drawerResult.drawerWidthPx)).toBe(true);
+    }
+  });
+  it('treats a non-finite or negative budget as no additional constraint', () => {
+    // Falls back to the mode's own existing band, not an artificially shrunk one.
+    for (const bogus of [NaN, Infinity, -Infinity, -1]) {
+      expect(clampLeftNavigationToMaximumTotal(wide({ wideWidthPx: 300 }), bogus).wideWidthPx).toBe(300);
+    }
+  });
+  it('is a no-op — by identity — when the layout already fits the budget', () => {
+    const w = wide({ wideWidthPx: 300 });
+    expect(clampLeftNavigationToMaximumTotal(w, 9999)).toBe(w);
+    const d = rail({ focusedSection: 'library', drawerWidthPx: 200 });
+    expect(clampLeftNavigationToMaximumTotal(d, 9999)).toBe(d);
+    const b = rail();
+    expect(clampLeftNavigationToMaximumTotal(b, 0)).toBe(b);
+  });
+  it("LEFT_CENTRE_MIN_PX is exported for the UI layer's budget arithmetic", () => {
+    expect(LEFT_CENTRE_MIN_PX).toBe(480);
+  });
+});
+
+// The resize-session design's own comment block (above `LeftNavigationResizeSession`
+// in left-nav-layout.ts) explains WHY it is shaped the way it is; these tests are
+// the counter-examples that shape was reviewed against. `Infinity` is used
+// throughout as "no viewport constraint" — `clampLeftNavigationToMaximumTotal`
+// treats any non-finite budget as unconstrained, so it is a clean way to
+// exercise the session's bookkeeping without an unrelated clamp in the way.
+describe('resize session (#487 phase 3)', () => {
+  it('begin captures preferred as the initial proposal, and clamps effective to the budget', () => {
+    const preferred = wide({ wideWidthPx: 420 });
+    const session = beginLeftNavigationResize(preferred, 313); // a narrow viewport
+    expect(session.preferredAtStart).toBe(preferred);
+    expect(session.proposed).toBe(preferred);
+    expect(session.effective).toEqual(wide({ wideWidthPx: 313 }));
+  });
+
+  it('begin leaves effective equal to preferred when the budget does not constrain it', () => {
+    const preferred = wide({ wideWidthPx: 300 });
+    const session = beginLeftNavigationResize(preferred, Infinity);
+    expect(session.effective).toBe(preferred);
+  });
+
+  it('advance replaces proposed/effective and returns the same session by reference when unchanged', () => {
+    const start = wide({ wideWidthPx: 300 });
+    const session = beginLeftNavigationResize(start, Infinity);
+    const same = advanceLeftNavigationResize(session, start, Infinity);
+    expect(same).toBe(session);
+    const moved = wide({ wideWidthPx: 320 });
+    const advanced = advanceLeftNavigationResize(session, moved, Infinity);
+    expect(advanced).not.toBe(session);
+    expect(advanced.proposed).toBe(moved);
+    expect(advanced.effective).toEqual(moved);
+    expect(advanced.preferredAtStart).toBe(session.preferredAtStart);
+  });
+
+  it('advance clamps a new proposal against the given budget', () => {
+    const start = wide({ wideWidthPx: 300 });
+    const session = beginLeftNavigationResize(start, Infinity);
+    const proposedLayout = wide({ wideWidthPx: 350 });
+    const advanced = advanceLeftNavigationResize(session, proposedLayout, 313);
+    expect(advanced.proposed).toBe(proposedLayout); // raw, unclamped
+    expect(advanced.effective.wideWidthPx).toBe(313); // clamped for rendering
+  });
+
+  // Each row of commitLeftNavigationResize's table, driven through a single
+  // begin -> advance -> commit step.
+  describe('commit table', () => {
+    it('a wide resize that changed width commits it, leaving the drawer memory untouched', () => {
+      const start = wide({ wideWidthPx: 250, drawerWidthPx: 210 });
+      let session = beginLeftNavigationResize(start, Infinity);
+      session = advanceLeftNavigationResize(session, wide({ wideWidthPx: 320, drawerWidthPx: 210 }), Infinity);
+      expect(commitLeftNavigationResize(session)).toEqual(wide({ wideWidthPx: 320, drawerWidthPx: 210 }));
+    });
+
+    it('a drawer resize that changed width commits it, leaving the wide memory untouched', () => {
+      const start = rail({ focusedSection: 'library', wideWidthPx: 260, drawerWidthPx: 200 });
+      let session = beginLeftNavigationResize(start, Infinity);
+      session = advanceLeftNavigationResize(
+        session, rail({ focusedSection: 'library', wideWidthPx: 260, drawerWidthPx: 230 }), Infinity);
+      expect(commitLeftNavigationResize(session)).toEqual(
+        rail({ focusedSection: 'library', wideWidthPx: 260, drawerWidthPx: 230 }));
+    });
+
+    it('a fold-through to bare rail preserves both remembered widths', () => {
+      const start = wide({ wideWidthPx: 300, drawerWidthPx: 210 });
+      let session = beginLeftNavigationResize(start, Infinity);
+      session = advanceLeftNavigationResize(session, resolveLeftNavigationDrag(start, 10), Infinity);
+      const committed = commitLeftNavigationResize(session);
+      expect(committed.mode).toBe('rail');
+      expect(committed.focusedSection).toBeNull();
+      expect(committed.wideWidthPx).toBe(300);
+      expect(committed.drawerWidthPx).toBe(210);
+    });
+
+    it('a no-op (advance to the same proposed layout) commits both preserved', () => {
+      const start = wide({ wideWidthPx: 300, drawerWidthPx: 210 });
+      let session = beginLeftNavigationResize(start, Infinity);
+      session = advanceLeftNavigationResize(session, wide({ wideWidthPx: 300, drawerWidthPx: 210 }), Infinity);
+      expect(commitLeftNavigationResize(session)).toEqual(start);
+    });
+  });
+
+  it('the dormant-band case: a drawer resize followed by a crossing into wide does not commit the transient drawer width', () => {
+    const start = rail({ focusedSection: 'library', wideWidthPx: 260, drawerWidthPx: 200 });
+    let session = beginLeftNavigationResize(start, Infinity);
+    // Resize the drawer open further …
+    session = advanceLeftNavigationResize(
+      session, rail({ focusedSection: 'library', wideWidthPx: 260, drawerWidthPx: 259 }), Infinity);
+    // … then keep dragging past the wide threshold, converting to the wide sidebar.
+    // Dragging continues from the RAW proposal, not the rendered `effective` —
+    // in this test they agree (no clamp is active), but `proposed` is the
+    // physically correct thing for a caller to keep dragging from.
+    const wideLayout = resolveLeftNavigationDrag(session.proposed, LEFT_RAIL_PX + LEFT_WIDE_THRESHOLD_PX + 40);
+    session = advanceLeftNavigationResize(session, wideLayout, Infinity);
+    const committed = commitLeftNavigationResize(session);
+    expect(committed.mode).toBe('wide');
+    // The wide memory reflects where the session actually ended.
+    expect(committed.wideWidthPx).toBe(wideLayout.wideWidthPx);
+    // The drawer memory is the ORIGINAL preferred value, not the 259px it
+    // transiently passed through mid-session.
+    expect(committed.drawerWidthPx).toBe(200);
+  });
+
+  it('a fold-through from a viewport-clamped wide layout still commits the PREFERRED wide width, not the clamped one', () => {
+    const preferred = wide({ wideWidthPx: 420, drawerWidthPx: 210 });
+    const budget = 313; // narrow viewport: renders 313 even though the mode is wide
+    let session = beginLeftNavigationResize(preferred, budget);
+    expect(session.effective.wideWidthPx).toBe(313);
+    // The gesture continues from the rendered position and folds all the way
+    // to bare rail.
+    session = advanceLeftNavigationResize(session, resolveLeftNavigationDrag(session.effective, 10), budget);
+    const committed = commitLeftNavigationResize(session);
+    expect(committed.mode).toBe('rail');
+    // 420, the PREFERRED value — never 313, the value the session actually
+    // rendered at the start.
+    expect(committed.wideWidthPx).toBe(420);
+    expect(committed.drawerWidthPx).toBe(210);
+  });
+
+  // THE regression test for the confirmed bug: comparing two POST-CLAMP
+  // layouts (the old `effective` vs `effectiveAtStart` design) let a viewport
+  // clamp silently downgrade a stored preference on a plain restore. Comparing
+  // the RAW proposal against `preferredAtStart` instead — this function's fix —
+  // must commit the user's honest, full preference regardless of what the
+  // viewport could render.
+  it('BUG regression: restoring a bare rail to a viewport-clamped wide width commits the honest 420, not the rendered 313', () => {
+    const start = rail({ wideWidthPx: 420, drawerWidthPx: 210 }); // dormant wide preference: 420
+    const budget = 313;
+    let session = beginLeftNavigationResize(start, budget);
+    // Sanity: a bare rail's occupied width is the fixed LEFT_RAIL_PX, so there
+    // is nothing for the clamp to shrink yet — the dormant 420 preference
+    // passes through `effective` untouched even though the budget could not
+    // render it as a wide sidebar.
+    expect(session.effective.wideWidthPx).toBe(420);
+
+    // `End` (a restore command) proposes restoring the REMEMBERED width — the
+    // RAW, pre-clamp proposal — exactly.
+    const proposedLayout = resolveLeftNavigationKey(start, { key: 'End' });
+    expect(proposedLayout?.mode).toBe('wide');
+    expect(proposedLayout?.wideWidthPx).toBe(420);
+
+    session = advanceLeftNavigationResize(session, proposedLayout as LeftNavigationLayout, budget);
+    // The viewport clamp still shrinks what gets RENDERED …
+    expect(session.effective.wideWidthPx).toBe(313);
+    // … but the commit must reconstruct from the raw proposal (420), which
+    // equals preferredAtStart.wideWidthPx (420) — no real change — so the
+    // honest preference survives, rather than the transient 313 the viewport
+    // happened to allow.
+    const committed = commitLeftNavigationResize(session);
+    expect(committed.mode).toBe('wide');
+    expect(committed.wideWidthPx).toBe(420);
+  });
+
+  it('a genuinely new user-driven proposal commits even when effective was clamped for an unrelated reason earlier in the session', () => {
+    const start = wide({ wideWidthPx: 300, drawerWidthPx: 210 });
+    let session = beginLeftNavigationResize(start, 250); // clamped at session start
+    expect(session.effective.wideWidthPx).toBe(250);
+    // The user then drags to a genuinely new width, well inside any constraint.
+    const proposedLayout = wide({ wideWidthPx: 200, drawerWidthPx: 210 });
+    session = advanceLeftNavigationResize(session, proposedLayout, 250);
+    expect(commitLeftNavigationResize(session).wideWidthPx).toBe(200);
+  });
+
+  it('a drag proposal the viewport clamps commits the HONEST proposal, not the rendered value (deliberate design choice)', () => {
+    // The user's real intent should be restorable later when there is room —
+    // committing the rendered/clamped value instead would silently downgrade a
+    // preference the user never asked to change, purely because of a
+    // transient viewport constraint mid-gesture. This mirrors the fold-through
+    // case above, but for an ordinary in-band resize rather than a restore.
+    const start = wide({ wideWidthPx: 300, drawerWidthPx: 210 });
+    let session = beginLeftNavigationResize(start, Infinity);
+    const proposedLayout = wide({ wideWidthPx: 350, drawerWidthPx: 210 });
+    session = advanceLeftNavigationResize(session, proposedLayout, 313);
+    expect(session.effective.wideWidthPx).toBe(313); // rendered, clamped
+    const committed = commitLeftNavigationResize(session);
+    expect(committed.wideWidthPx).toBe(350); // committed: the honest proposal
+  });
+
+  it('a dense sweep and a coarse sweep over the same drag commit the same result — even though the underlying reducer state they pass through provably disagrees', () => {
+    // This is the exact counter-example the "restore memory is sampling-dependent
+    // (phase 3 obligation)" test above pins at the raw-reducer level: dragging
+    // from a 300px wide sidebar to a fold, sampling a dead-zone point (179) along
+    // the way freezes the underlying layout's OWN wideWidthPx at the 180 floor,
+    // while jumping straight from 300 to the fold in one step leaves it at 300 —
+    // two different answers for what is, physically, the same gesture ending at
+    // the same pointer position. A session must not inherit that disagreement.
+    const start = wide({ wideWidthPx: 300, drawerWidthPx: 210 });
+
+    // Dense: samples the dead zone (179) before the fold.
+    let denseSession = beginLeftNavigationResize(start, Infinity);
+    let denseLayout: LeftNavigationLayout = start;
+    for (const x of [200, 179, 139]) {
+      denseLayout = resolveLeftNavigationDrag(denseLayout, x);
+      denseSession = advanceLeftNavigationResize(denseSession, denseLayout, Infinity);
+    }
+    // Sanity check on the known artifact this dense path produces.
+    expect(denseLayout.mode).toBe('rail');
+    expect(denseLayout.wideWidthPx).toBe(LEFT_PANEL_MIN_PX);
+
+    // Coarse: one jump straight past the fold threshold, skipping the dead zone.
+    let coarseSession = beginLeftNavigationResize(start, Infinity);
+    const coarseLayout = resolveLeftNavigationDrag(start, 139);
+    coarseSession = advanceLeftNavigationResize(coarseSession, coarseLayout, Infinity);
+    // Sanity check on the known — and DIFFERENT — artifact the coarse path
+    // produces for the very same underlying field.
+    expect(coarseLayout.mode).toBe('rail');
+    expect(coarseLayout.wideWidthPx).toBe(300);
+
+    // Despite that disagreement in the raw layouts, both sessions reconstruct
+    // from `preferredAtStart` on a fold-through, so both commit identically.
+    const denseCommitted = commitLeftNavigationResize(denseSession);
+    const coarseCommitted = commitLeftNavigationResize(coarseSession);
+    expect(denseCommitted).toEqual(coarseCommitted);
+    expect(denseCommitted).toEqual(rail({ wideWidthPx: 300, drawerWidthPx: 210 }));
+  });
 });
diff --git a/tests/unit/left-nav-separator.test.ts b/tests/unit/left-nav-separator.test.ts
new file mode 100644
index 00000000..dd15d129
--- /dev/null
+++ b/tests/unit/left-nav-separator.test.ts
@@ -0,0 +1,866 @@
+// #487 phase 3 — the left navigation's resize/mode-changing separator
+// (`src/ui/left-nav-separator.ts`). Follows `splitters.test.ts`'s fake-window
+// drag-simulation pattern. Exercises: ARIA state (including the
+// aria-valuetext-must-report-the-SAME-quantity-as-aria-valuenow regression),
+// the pointer drag session (intermediate `applyEffectiveLayout` calls, the
+// final committed state matching the REAL core reducers — not a mock of
+// them), the restore-while-clamped preferred-width regression, mouseup's own
+// final coordinate winning over the last mousemove, blur/visibilitychange
+// terminating a drag without a rollback, keyboard parity, announce-on-
+// semantic-change-only, and dispose() removing every listener.
+
+import { describe, it, expect, vi } from 'vitest';
+import { signal } from '@preact/signals-core';
+import { mountLeftNavSeparator } from '../../src/ui/left-nav-separator.js';
+import type {
+  LeftNavSeparatorDeps, LeftNavSeparatorTarget, LeftNavSeparatorWindow,
+} from '../../src/ui/left-nav-separator.js';
+import {
+  LEFT_DRAWER_DEFAULT_PX, LEFT_RAIL_PX, LEFT_WIDE_DEFAULT_PX,
+} from '../../src/core/left-nav-layout.js';
+import type { LeftNavigationSection } from '../../src/core/left-nav-layout.js';
+import type { LeftNavStateSlice } from '../../src/application/left-nav.js';
+import type { SidePanelKey } from '../../src/core/left-nav-layout.js';
+
+const LARGE_BUDGET = 10_000; // effectively "no viewport constraint" (static [180,420] still applies).
+
+/** Mirrors `left-nav.test.ts`'s own `makeState` — the real `LeftNavStateSlice`
+ *  shape, so `readLeftNavigationLayout` (imported for real inside the module
+ *  under test) needs no bridging. */
+function makeState(over: Partial<{
+  mode: 'wide' | 'rail';
+  sidebarPx: number;
+  leftNavDrawerPx: number;
+  section: LeftNavigationSection | null;
+  upperRole: 'databases' | 'dashboards';
+  sidePanel: SidePanelKey;
+}> = {}): LeftNavStateSlice {
+  return {
+    sidebarPx: over.sidebarPx ?? LEFT_WIDE_DEFAULT_PX,
+    leftNavDrawerPx: over.leftNavDrawerPx ?? LEFT_DRAWER_DEFAULT_PX,
+    leftNavMode: signal(over.mode ?? 'wide'),
+    leftNavSection: signal(over.section ?? null),
+    upperRole: signal(over.upperRole ?? 'databases'),
+    sidePanel: signal(over.sidePanel ?? 'saved'),
+  };
+}
+
+/** Fake `window`-shaped seam — single handler per event type (this module
+ *  never registers two at once for the same type), mirroring
+ *  `splitters.test.ts`'s own `fakeWin`. */
+function fakeWin(): LeftNavSeparatorWindow & { _fire(t: string, ev?: { clientX: number }): void; _has(t: string): boolean } {
+  const handlers: Record<string, (ev: { clientX: number }) => void> = {};
+  return {
+    addEventListener: (t: string, fn: (ev: { clientX: number }) => void) => { handlers[t] = fn; },
+    removeEventListener: vi.fn((t: string) => { delete handlers[t]; }),
+    _fire: (t: string, ev: { clientX: number } = { clientX: 0 }) => { handlers[t]?.(ev); },
+    _has: (t: string) => !!handlers[t],
+  };
+}
+
+/** Fake `document`-shaped seam for `visibilitychange`. */
+function fakeTarget(): LeftNavSeparatorTarget & { _fire(t: string): void; _has(t: string): boolean } {
+  const handlers: Record<string, () => void> = {};
+  return {
+    addEventListener: (t: string, fn: () => void) => { handlers[t] = fn; },
+    removeEventListener: vi.fn((t: string) => { delete handlers[t]; }),
+    _fire: (t: string) => { handlers[t]?.(); },
+    _has: (t: string) => !!handlers[t],
+  };
+}
+
+function makeDeps(state: LeftNavStateSlice, budget: number = LARGE_BUDGET) {
+  const el = document.createElement('div');
+  const win = fakeWin();
+  const target = fakeTarget();
+  const save = vi.fn();
+  const applyEffectiveLayout = vi.fn();
+  const announce = vi.fn();
+  const getMaxNavigationTotalPx = vi.fn(() => budget);
+  const deps: LeftNavSeparatorDeps = {
+    el, win, target, state, prefs: { save }, getMaxNavigationTotalPx, applyEffectiveLayout, announce,
+  };
+  return { deps, el, win, target, save, applyEffectiveLayout, announce, getMaxNavigationTotalPx };
+}
+
+function mousedown(el: HTMLElement, clientX: number): void {
+  el.dispatchEvent(new MouseEvent('mousedown', { clientX, cancelable: true }));
+}
+function keydown(el: HTMLElement, init: KeyboardEventInit): KeyboardEvent {
+  const ev = new KeyboardEvent('keydown', { cancelable: true, ...init });
+  el.dispatchEvent(ev);
+  return ev;
+}
+
+describe('mountLeftNavSeparator — mount-time ARIA', () => {
+  it('sets role/orientation/tabindex once at mount', () => {
+    const { deps, el } = makeDeps(makeState());
+    mountLeftNavSeparator(deps);
+    expect(el.getAttribute('role')).toBe('separator');
+    expect(el.getAttribute('aria-orientation')).toBe('vertical');
+    expect(el.getAttribute('tabindex')).toBe('0');
+  });
+
+  it('wide mode: aria-valuenow/valuetext report the wide width', () => {
+    const { deps, el } = makeDeps(makeState({ mode: 'wide', sidebarPx: 248 }));
+    mountLeftNavSeparator(deps);
+    expect(el.getAttribute('aria-valuemin')).toBe(String(LEFT_RAIL_PX));
+    expect(el.getAttribute('aria-valuemax')).toBe('420');
+    expect(el.getAttribute('aria-valuenow')).toBe('248');
+    expect(el.getAttribute('aria-valuetext')).toBe('Wide sidebar, 248 pixels');
+  });
+
+  it('bare rail: aria-valuenow/valuetext report the rail width alone', () => {
+    const { deps, el } = makeDeps(makeState({ mode: 'rail', section: null }));
+    mountLeftNavSeparator(deps);
+    expect(el.getAttribute('aria-valuenow')).toBe('48');
+    expect(el.getAttribute('aria-valuetext')).toBe('Rail only, 48 pixels');
+  });
+
+  it('rail + open drawer: aria-valuenow/valuetext report rail+drawer TOTAL, not the panel alone', () => {
+    const { deps, el } = makeDeps(makeState({ mode: 'rail', section: 'library', leftNavDrawerPx: 240 }));
+    mountLeftNavSeparator(deps);
+    // The documented regression: an earlier design reported the drawer's OWN
+    // 240px panel width here, not the 288px total the rail ALSO occupies.
+    expect(el.getAttribute('aria-valuenow')).toBe('288');
+    expect(el.getAttribute('aria-valuetext')).toBe('Rail with Library drawer, 288 pixels total');
+  });
+
+  it('aria-valuetext always names the SAME number aria-valuenow carries, in every mode', () => {
+    const cases: Array<Partial<{ mode: 'wide' | 'rail'; sidebarPx: number; section: LeftNavigationSection | null }>> = [
+      { mode: 'wide', sidebarPx: 300 },
+      { mode: 'rail', section: null },
+      { mode: 'rail', section: 'history' },
+    ];
+    for (const over of cases) {
+      const { deps, el } = makeDeps(makeState(over));
+      mountLeftNavSeparator(deps);
+      const now = el.getAttribute('aria-valuenow');
+      const text = el.getAttribute('aria-valuetext')!;
+      expect(text).toContain(`${now} pixel`);
+    }
+  });
+
+  it('ARIA updates reactively when leftNavSection changes after mount (e.g. a rail click elsewhere)', () => {
+    const state = makeState({ mode: 'rail', section: null });
+    const { deps, el } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+    expect(el.getAttribute('aria-valuenow')).toBe('48');
+    state.leftNavSection.value = 'history';
+    expect(el.getAttribute('aria-valuenow')).toBe('288');
+    expect(el.getAttribute('aria-valuetext')).toBe('Rail with History drawer, 288 pixels total');
+  });
+});
+
+describe('mountLeftNavSeparator — pointer drag', () => {
+  it('mousedown→mousemove(s)→mouseup: applyEffectiveLayout runs each step; final state matches the real reducers', () => {
+    const state = makeState({ mode: 'rail', section: null, sidebarPx: 248, leftNavDrawerPx: 240 });
+    const { deps, el, win, save, applyEffectiveLayout, announce } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    // Grabbed exactly at the handle's own left edge (a bare rail's occupied
+    // width, LEFT_RAIL_PX) — a zero grip offset, so every subsequent
+    // coordinate below still maps 1:1 onto the navigation total.
+    mousedown(el, LEFT_RAIL_PX);
+    expect(el.classList.contains('dragging')).toBe(true);
+
+    win._fire('mousemove', { clientX: 300 }); // crosses the wide threshold from a bare rail
+    win._fire('mousemove', { clientX: 350 });
+    win._fire('mouseup', { clientX: 400 });
+
+    expect(applyEffectiveLayout).toHaveBeenNthCalledWith(1,
+      { mode: 'wide', wideWidthPx: 300, drawerWidthPx: 240, focusedSection: null });
+    expect(applyEffectiveLayout).toHaveBeenNthCalledWith(2,
+      { mode: 'wide', wideWidthPx: 350, drawerWidthPx: 240, focusedSection: null });
+    expect(applyEffectiveLayout).toHaveBeenNthCalledWith(3,
+      { mode: 'wide', wideWidthPx: 400, drawerWidthPx: 240, focusedSection: null });
+
+    expect(el.classList.contains('dragging')).toBe(false);
+    expect(state.leftNavMode.value).toBe('wide');
+    expect(state.sidebarPx).toBe(400);
+    expect(state.leftNavDrawerPx).toBe(240); // dormant band untouched
+    expect(state.leftNavSection.value).toBeNull();
+    expect(save).toHaveBeenCalledWith('leftNavMode', 'wide');
+    expect(save).toHaveBeenCalledWith('sidebarPx', 400);
+    expect(save).toHaveBeenCalledWith('leftNavDrawerPx', 240);
+    expect(announce).toHaveBeenCalledWith('Left navigation: Wide sidebar'); // rail -> wide is a semantic change
+    expect(win._has('mousemove')).toBe(false);
+    expect(win._has('mouseup')).toBe(false);
+  });
+
+  it('mouseup uses ITS OWN final clientX, not the last mousemove\'s', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    win._fire('mousemove', { clientX: 260 });
+    win._fire('mouseup', { clientX: 350 }); // deliberately different from the last mousemove
+
+    expect(state.sidebarPx).toBe(350);
+  });
+
+  it('a restore-while-clamped End keypress persists the FULL preferred width, not the viewport-clamped one', () => {
+    // sidebarPx (420) is larger than the viewport can currently render (300) —
+    // the exact scenario the core `LeftNavigationResizeSession` design fixed.
+    const state = makeState({ mode: 'rail', section: null, sidebarPx: 420, leftNavDrawerPx: 240 });
+    const { deps, el, save, applyEffectiveLayout } = makeDeps(state, 300);
+    mountLeftNavSeparator(deps);
+
+    keydown(el, { key: 'End' });
+
+    expect(state.leftNavMode.value).toBe('wide');
+    expect(state.sidebarPx).toBe(420); // full preferred value, not the clamped 300
+    expect(save).toHaveBeenCalledWith('sidebarPx', 420);
+    // The rendered ARIA reflects the viewport's actual current clamp.
+    expect(el.getAttribute('aria-valuenow')).toBe('300');
+    // And the ACTUAL PAINT must use the session's own viewport-clamped
+    // `effective` layout (300), never the committed/persisted 420 — painting
+    // 420 directly here would render a sidebar wider than the viewport can
+    // hold, reintroducing a variant of the exact bug this session design
+    // exists to prevent. This is the regression this fix is for: previously
+    // `commitSession` never called `applyEffectiveLayout` at all on the
+    // keyboard path, so nothing painted here whatsoever.
+    expect(applyEffectiveLayout).toHaveBeenCalledWith(
+      { mode: 'wide', wideWidthPx: 300, drawerWidthPx: 240, focusedSection: null });
+  });
+
+  it('a plain within-mode ArrowRight keypress paints the new width, not just state/ARIA', () => {
+    // Before this fix, `commitSession` never called `applyEffectiveLayout` on
+    // the keyboard path at all: a within-mode resize updated `state` and the
+    // separator's own ARIA attributes but never repainted the sidebar.
+    const state = makeState({ mode: 'wide', sidebarPx: 248, leftNavDrawerPx: 240 });
+    const { deps, el, applyEffectiveLayout } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    keydown(el, { key: 'ArrowRight' });
+
+    expect(state.sidebarPx).toBe(264);
+    expect(applyEffectiveLayout).toHaveBeenCalledWith(
+      { mode: 'wide', wideWidthPx: 264, drawerWidthPx: 240, focusedSection: null });
+  });
+
+  it('blur terminates an active drag: listeners removed, session committed AS-IS (no rollback)', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    win._fire('mousemove', { clientX: 300 });
+    win._fire('blur');
+
+    expect(win._has('mousemove')).toBe(false);
+    expect(win._has('mouseup')).toBe(false);
+    expect(state.sidebarPx).toBe(300); // the mid-drag value, not the pre-drag 248
+    expect(el.classList.contains('dragging')).toBe(false);
+  });
+
+  it('visibilitychange terminates an active drag the same way', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win, target } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    win._fire('mousemove', { clientX: 320 });
+    target._fire('visibilitychange');
+
+    expect(win._has('mousemove')).toBe(false);
+    expect(win._has('mouseup')).toBe(false);
+    expect(state.sidebarPx).toBe(320);
+  });
+
+  it('blur/visibilitychange are no-ops when no drag is in progress', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, win, target, save } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    win._fire('blur');
+    target._fire('visibilitychange');
+
+    expect(save).not.toHaveBeenCalled();
+    expect(state.sidebarPx).toBe(248);
+  });
+});
+
+describe('mountLeftNavSeparator — keyboard', () => {
+  it('ArrowRight/ArrowLeft step by LEFT_NAV_STEP_PX within wide mode (no announce — same mode)', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, announce } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    const ev = keydown(el, { key: 'ArrowRight' });
+    expect(state.sidebarPx).toBe(264);
+    expect(ev.defaultPrevented).toBe(true);
+
+    keydown(el, { key: 'ArrowLeft' });
+    expect(state.sidebarPx).toBe(248);
+    expect(announce).not.toHaveBeenCalled();
+  });
+
+  it('Shift+ArrowRight/Shift+ArrowLeft step by LEFT_NAV_LARGE_STEP_PX', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    keydown(el, { key: 'ArrowRight', shiftKey: true });
+    expect(state.sidebarPx).toBe(312);
+
+    keydown(el, { key: 'ArrowLeft', shiftKey: true });
+    expect(state.sidebarPx).toBe(248);
+  });
+
+  it('Home folds to a bare rail; End restores wide — both announce a semantic change', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248, leftNavDrawerPx: 240 });
+    const { deps, el, announce, applyEffectiveLayout } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    keydown(el, { key: 'Home' });
+    expect(state.leftNavMode.value).toBe('rail');
+    expect(state.leftNavSection.value).toBeNull();
+    expect(announce).toHaveBeenCalledWith('Left navigation: Rail only');
+    // Every commit path — keyboard included — must actually paint, not just
+    // update state/ARIA.
+    expect(applyEffectiveLayout).toHaveBeenCalledWith(
+      { mode: 'rail', wideWidthPx: 248, drawerWidthPx: 240, focusedSection: null });
+
+    keydown(el, { key: 'End' });
+    expect(state.leftNavMode.value).toBe('wide');
+    expect(announce).toHaveBeenCalledWith('Left navigation: Wide sidebar');
+    expect(applyEffectiveLayout).toHaveBeenCalledWith(
+      { mode: 'wide', wideWidthPx: 248, drawerWidthPx: 240, focusedSection: null });
+  });
+
+  it('an unhandled key does nothing and does not call preventDefault', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, save } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    const ev = keydown(el, { key: 'a' });
+    expect(ev.defaultPrevented).toBe(false);
+    expect(state.sidebarPx).toBe(248);
+    expect(save).not.toHaveBeenCalled();
+  });
+
+  it('Ctrl/Meta/Alt chords are rejected, even for an otherwise-handled key', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, save } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    for (const chord of [{ ctrlKey: true }, { metaKey: true }, { altKey: true }]) {
+      const ev = keydown(el, { key: 'ArrowLeft', ...chord });
+      expect(ev.defaultPrevented).toBe(false);
+    }
+    expect(state.sidebarPx).toBe(248);
+    expect(save).not.toHaveBeenCalled();
+  });
+});
+
+describe('mountLeftNavSeparator — announce discipline', () => {
+  it('does not announce on a plain width change within the same mode', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, announce } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+    keydown(el, { key: 'ArrowRight' });
+    expect(announce).not.toHaveBeenCalled();
+  });
+
+  it('announces when the drawer open/closed state changes without a mode change', () => {
+    const state = makeState({ mode: 'rail', section: 'library', leftNavDrawerPx: 200 });
+    const { deps, el, announce } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+    // Drag the drawer closed without leaving rail mode — grabbed at the
+    // drawer's own current occupied width (rail + drawer), a zero grip
+    // offset.
+    mousedown(el, LEFT_RAIL_PX + 200);
+    (deps.win as ReturnType<typeof fakeWin>)._fire('mousemove', { clientX: LEFT_RAIL_PX - 20 });
+    (deps.win as ReturnType<typeof fakeWin>)._fire('mouseup', { clientX: LEFT_RAIL_PX - 20 });
+    expect(state.leftNavMode.value).toBe('rail');
+    expect(state.leftNavSection.value).toBeNull();
+    expect(announce).toHaveBeenCalledWith('Left navigation: Rail only');
+  });
+
+  it('is a safe no-op when announce is omitted', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const el = document.createElement('div');
+    const win = fakeWin();
+    const target = fakeTarget();
+    const deps: LeftNavSeparatorDeps = {
+      el, win, target, state, prefs: { save: vi.fn() },
+      getMaxNavigationTotalPx: () => LARGE_BUDGET, applyEffectiveLayout: vi.fn(),
+    };
+    mountLeftNavSeparator(deps);
+    expect(() => keydown(el, { key: 'Home' })).not.toThrow();
+  });
+});
+
+describe('mountLeftNavSeparator — default win/target', () => {
+  it('defaults win to the real window and target to the real document when omitted', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const el = document.createElement('div');
+    const applyEffectiveLayout = vi.fn();
+    const deps: LeftNavSeparatorDeps = {
+      el, state, prefs: { save: vi.fn() }, getMaxNavigationTotalPx: () => LARGE_BUDGET, applyEffectiveLayout,
+    };
+    const handle = mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    expect(el.classList.contains('dragging')).toBe(true);
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 300 }));
+    expect(applyEffectiveLayout).toHaveBeenCalledWith(
+      { mode: 'wide', wideWidthPx: 300, drawerWidthPx: LEFT_DRAWER_DEFAULT_PX, focusedSection: null });
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 320 }));
+    expect(el.classList.contains('dragging')).toBe(false);
+    expect(state.sidebarPx).toBe(320);
+
+    // The real `document` default also terminates a fresh drag on visibilitychange.
+    mousedown(el, 320);
+    expect(el.classList.contains('dragging')).toBe(true);
+    document.dispatchEvent(new Event('visibilitychange'));
+    expect(el.classList.contains('dragging')).toBe(false);
+
+    handle.dispose();
+  });
+});
+
+describe('mountLeftNavSeparator — dispose', () => {
+  it('removes blur/visibilitychange listeners when no drag is active', () => {
+    const { deps, win, target } = makeDeps(makeState());
+    const handle = mountLeftNavSeparator(deps);
+    expect(win._has('blur')).toBe(true);
+    expect(target._has('visibilitychange')).toBe(true);
+    handle.dispose();
+    expect(win._has('blur')).toBe(false);
+    expect(target._has('visibilitychange')).toBe(false);
+  });
+
+  it('removes an in-progress drag\'s mousemove/mouseup listeners too, without committing', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win, save } = makeDeps(state);
+    const handle = mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    win._fire('mousemove', { clientX: 300 });
+    handle.dispose();
+
+    expect(win._has('mousemove')).toBe(false);
+    expect(win._has('mouseup')).toBe(false);
+    expect(save).not.toHaveBeenCalled(); // disposed mid-drag — never committed
+  });
+
+  it('removes el\'s own mousedown/keydown listeners — a later gesture has no effect', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win, applyEffectiveLayout } = makeDeps(state);
+    const handle = mountLeftNavSeparator(deps);
+    handle.dispose();
+
+    mousedown(el, 300);
+    win._fire('mousemove', { clientX: 350 });
+    expect(applyEffectiveLayout).not.toHaveBeenCalled();
+    expect(el.classList.contains('dragging')).toBe(false);
+
+    const ev = keydown(el, { key: 'Home' });
+    expect(state.leftNavMode.value).toBe('wide'); // unchanged
+    expect(ev.defaultPrevented).toBe(false); // handler no longer attached
+  });
+
+  it('stops the ARIA-refresh effect — a later signal write does not update the DOM', () => {
+    const state = makeState({ mode: 'rail', section: null });
+    const { deps, el } = makeDeps(state);
+    const handle = mountLeftNavSeparator(deps);
+    handle.dispose();
+    state.leftNavSection.value = 'history';
+    expect(el.getAttribute('aria-valuenow')).toBe('48'); // still the bare-rail value
+  });
+
+  it('a dispose() mid-drag leaves the element clean: no lingering .dragging class, no lingering session', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win } = makeDeps(state);
+    const handle = mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    win._fire('mousemove', { clientX: 300 });
+    expect(el.classList.contains('dragging')).toBe(true);
+    expect(handle.isSessionActive()).toBe(true);
+
+    handle.dispose();
+
+    expect(el.classList.contains('dragging')).toBe(false);
+    expect(handle.isSessionActive()).toBe(false);
+  });
+});
+
+// Bug fix #2 (#487 phase-3 ChatGPT review): the separator's own ARIA
+// attributes must be refreshable from OUTSIDE its own gesture/signal-driven
+// effect — a caller (app-shell.ts) that just repainted the sidebar at a new
+// width for a reason this module never observes (a mount-time viewport clamp,
+// a plain window resize) needs a way to tell this separator its own
+// advertised range/value just changed too.
+describe('mountLeftNavSeparator — refreshAria', () => {
+  it('updates aria-valuenow/valuemax/valuetext to match the given layout, independent of any signal change', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el } = makeDeps(state, 10_000);
+    const handle = mountLeftNavSeparator(deps);
+    expect(el.getAttribute('aria-valuenow')).toBe('248');
+
+    // Neither `state.leftNavMode` nor `state.leftNavSection` changes here —
+    // only the ARIA-carried WIDTH does, which is exactly the case the
+    // module's own signal-keyed effect cannot see.
+    handle.refreshAria({ mode: 'wide', wideWidthPx: 300, drawerWidthPx: 240, focusedSection: null });
+
+    expect(el.getAttribute('aria-valuenow')).toBe('300');
+    expect(el.getAttribute('aria-valuetext')).toBe('Wide sidebar, 300 pixels');
+    // The signals themselves are untouched — this is a pure ARIA refresh, not
+    // a state write.
+    expect(state.leftNavMode.value).toBe('wide');
+    expect(state.sidebarPx).toBe(248);
+  });
+
+  it('respects the live viewport budget exactly like the module\'s own internal applyAria', () => {
+    const state = makeState({ mode: 'rail', section: 'library', leftNavDrawerPx: 240 });
+    const { deps, el } = makeDeps(state, 200); // budget below the drawer's un-clamped occupied width
+    const handle = mountLeftNavSeparator(deps);
+
+    handle.refreshAria({ mode: 'rail', wideWidthPx: 248, drawerWidthPx: 240, focusedSection: 'library' });
+
+    expect(el.getAttribute('aria-valuemax')).toBe('200');
+    expect(Number(el.getAttribute('aria-valuenow'))).toBeLessThanOrEqual(200);
+  });
+});
+
+// Bug fix #3 (#487 phase-3 ChatGPT review): expose whether a gesture is
+// currently authoritative, so a caller like the shell's `ResizeObserver`
+// callback can avoid repainting from stale committed state mid-gesture.
+describe('mountLeftNavSeparator — isSessionActive', () => {
+  it('is false before any gesture, true during a pointer drag, and false again after mouseup', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win } = makeDeps(state);
+    const handle = mountLeftNavSeparator(deps);
+
+    expect(handle.isSessionActive()).toBe(false);
+    mousedown(el, 248);
+    expect(handle.isSessionActive()).toBe(true);
+    win._fire('mousemove', { clientX: 300 });
+    expect(handle.isSessionActive()).toBe(true);
+    win._fire('mouseup', { clientX: 300 });
+    expect(handle.isSessionActive()).toBe(false);
+  });
+
+  it('is false after blur/visibilitychange ends an active drag', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win, target } = makeDeps(state);
+    const handle = mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    expect(handle.isSessionActive()).toBe(true);
+    win._fire('blur');
+    expect(handle.isSessionActive()).toBe(false);
+
+    mousedown(el, 248);
+    expect(handle.isSessionActive()).toBe(true);
+    target._fire('visibilitychange');
+    expect(handle.isSessionActive()).toBe(false);
+  });
+
+  it('a one-shot keyboard resize never leaves a session active afterwards', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el } = makeDeps(state);
+    const handle = mountLeftNavSeparator(deps);
+
+    keydown(el, { key: 'ArrowRight' });
+
+    expect(handle.isSessionActive()).toBe(false);
+  });
+});
+
+// Bug fix #4 (#487 phase-3 ChatGPT review): a keydown reachable while a
+// pointer session is still installed (Tab-focus the separator, then
+// mousedown it too — focus survives a mousedown on an already-focused
+// element — then press an arrow/Home/End while the button is still held)
+// must not start a second, conflicting session.
+describe('mountLeftNavSeparator — keyboard input during an active pointer session', () => {
+  it('ignores a keydown while a pointer drag is active: not prevented, no state change from it', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win, save } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    win._fire('mousemove', { clientX: 300 });
+
+    const ev = keydown(el, { key: 'Home' });
+
+    expect(ev.defaultPrevented).toBe(false); // "not handled right now", not "handled and consumed"
+    expect(state.leftNavMode.value).toBe('wide'); // Home was ignored — no fold happened
+    expect(save).not.toHaveBeenCalled(); // no keyboard session was committed
+  });
+
+  it('the original pointer session still commits correctly on mouseup, unaffected by the ignored keydown', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win, save } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    win._fire('mousemove', { clientX: 300 });
+    keydown(el, { key: 'Home' }); // ignored — see the test above
+    win._fire('mouseup', { clientX: 320 });
+
+    expect(state.leftNavMode.value).toBe('wide');
+    expect(state.sidebarPx).toBe(320); // the drag's own outcome, not Home's fold
+    expect(save).toHaveBeenCalledWith('sidebarPx', 320);
+  });
+
+  it('a keydown after the pointer session ends is handled normally again', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    win._fire('mouseup', { clientX: 248 });
+
+    const ev = keydown(el, { key: 'Home' });
+    expect(ev.defaultPrevented).toBe(true);
+    expect(state.leftNavMode.value).toBe('rail');
+  });
+});
+
+// #487 phase-3 review, bug 2 — `cancelActiveSession()`: a caller outside this
+// module's own gesture (`app-shell.ts`'s `isMobile` transition handling) needs
+// to abandon an in-progress pointer session WITHOUT committing it, so a stale
+// desktop drag cannot keep fighting a forced mobile-wide presentation.
+describe('mountLeftNavSeparator — cancelActiveSession', () => {
+  it('is a safe no-op when no drag is active', () => {
+    const { deps, save } = makeDeps(makeState());
+    const handle = mountLeftNavSeparator(deps);
+
+    expect(() => handle.cancelActiveSession()).not.toThrow();
+
+    expect(save).not.toHaveBeenCalled();
+    expect(handle.isSessionActive()).toBe(false);
+  });
+
+  it('abandons an in-progress drag: listeners detached, .dragging cleared, session inactive, NOTHING committed to state/prefs', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win, save, applyEffectiveLayout } = makeDeps(state);
+    const handle = mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    win._fire('mousemove', { clientX: 300 });
+    expect(handle.isSessionActive()).toBe(true);
+    expect(el.classList.contains('dragging')).toBe(true);
+    applyEffectiveLayout.mockClear();
+
+    handle.cancelActiveSession();
+
+    expect(handle.isSessionActive()).toBe(false);
+    expect(el.classList.contains('dragging')).toBe(false);
+    expect(win._has('mousemove')).toBe(false);
+    expect(win._has('mouseup')).toBe(false);
+    // No commit ran: `commitSession` was never called, so neither `state` nor
+    // `prefs.save` ever saw the mid-drag 300px proposal.
+    expect(save).not.toHaveBeenCalled();
+    expect(state.sidebarPx).toBe(248);
+    expect(applyEffectiveLayout).not.toHaveBeenCalled();
+
+    // A subsequent mousemove-shaped call does nothing further — proof the
+    // listener is actually gone, not merely that the session looks inactive.
+    win._fire('mousemove', { clientX: 400 });
+    expect(applyEffectiveLayout).not.toHaveBeenCalled();
+    expect(state.sidebarPx).toBe(248);
+  });
+
+  it('a later mousedown starts a genuinely fresh session after a cancel', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win } = makeDeps(state);
+    const handle = mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    win._fire('mousemove', { clientX: 300 });
+    handle.cancelActiveSession();
+
+    mousedown(el, 248);
+    win._fire('mouseup', { clientX: 260 });
+
+    expect(state.sidebarPx).toBe(260); // the fresh session's own outcome, unaffected by the cancelled one
+  });
+});
+
+// #487 phase-3 review, bug 3 — `endDrag()` re-clamps against the CURRENT
+// budget immediately before committing, so a `blur`/`visibilitychange` commit
+// (which, unlike `onMouseUp`, has no fresh `advanceTo` clamp immediately
+// before it) cannot paint a layout that violates a budget that shrank WHILE
+// the drag was in progress (the width observer's own repaint is skipped for
+// exactly that window, since `isSessionActive()` is true).
+describe('mountLeftNavSeparator — endDrag re-clamps against the current budget (#487 phase-3 review, bug 3)', () => {
+  it('a blur ending a drag after the viewport shrank mid-drag paints against the NEW smaller budget, not the stale drag-start one', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    let budget = LARGE_BUDGET;
+    const el = document.createElement('div');
+    const win = fakeWin();
+    const target = fakeTarget();
+    const save = vi.fn();
+    const applyEffectiveLayout = vi.fn();
+    const getMaxNavigationTotalPx = vi.fn(() => budget);
+    const deps: LeftNavSeparatorDeps = {
+      el, win, target, state, prefs: { save }, getMaxNavigationTotalPx, applyEffectiveLayout,
+    };
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    win._fire('mousemove', { clientX: 400 }); // proposes 400 while the budget is still huge
+    expect(applyEffectiveLayout).toHaveBeenLastCalledWith(
+      { mode: 'wide', wideWidthPx: 400, drawerWidthPx: LEFT_DRAWER_DEFAULT_PX, focusedSection: null });
+
+    // The viewport shrinks WHILE the drag is still active — nothing else
+    // re-clamps during this window (the width observer skips a live session).
+    budget = 300;
+
+    win._fire('blur'); // no fresh advanceTo before this, unlike onMouseUp
+
+    // The PAINTED layout must respect the new, smaller budget — painting 400
+    // here would render a sidebar wider than the shrunk viewport can hold.
+    expect(applyEffectiveLayout).toHaveBeenLastCalledWith(
+      { mode: 'wide', wideWidthPx: 300, drawerWidthPx: LEFT_DRAWER_DEFAULT_PX, focusedSection: null });
+    // The raw proposal itself is untouched by the reclamp (only `effective`
+    // is refreshed) — the committed PREFERENCE still honors the user's actual
+    // 400px request, exactly like the existing restore-while-clamped case
+    // above; the ARIA range also reflects the live, shrunk budget.
+    expect(save).toHaveBeenCalledWith('sidebarPx', 400);
+    expect(el.getAttribute('aria-valuemax')).toBe('300');
+  });
+
+  it('onMouseUp\'s own fresh advanceTo already re-clamps, so the reclamp in endDrag is a harmless no-op there', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 248 });
+    const { deps, el, win, applyEffectiveLayout } = makeDeps(state, 300);
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 248);
+    win._fire('mousemove', { clientX: 400 });
+    win._fire('mouseup', { clientX: 400 });
+
+    expect(applyEffectiveLayout).toHaveBeenLastCalledWith(
+      { mode: 'wide', wideWidthPx: 300, drawerWidthPx: LEFT_DRAWER_DEFAULT_PX, focusedSection: null });
+  });
+});
+
+// #487 phase-3 review, blocker 1 — a click-and-release with no genuine
+// movement must preserve the stored preference untouched, band by band,
+// regardless of where inside the 7px handle the pointer landed or whether a
+// viewport clamp is rendering the handle somewhere other than the raw
+// preference itself.
+describe('mountLeftNavSeparator — click-without-drag must not overwrite the stored preference (#487 phase-3 review, blocker 1)', () => {
+  it('an unclamped wide sidebar: click-and-release at the exact rendered edge changes nothing', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 300 });
+    const { deps, el, save, applyEffectiveLayout } = makeDeps(state); // LARGE_BUDGET: no viewport clamp
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 300); // the handle's own left edge — zero grip offset
+    win_fire_mouseupOnly(deps, 300);
+
+    // `save` still runs on every commit — the WIDTH it saves must be the
+    // preserved 300, not (say) a click that happened to land elsewhere.
+    expect(save).toHaveBeenCalledWith('sidebarPx', 300);
+    expect(state.sidebarPx).toBe(300);
+    // Still repaints/commits (mode/section/ARIA stay current) — only the
+    // WIDTH must be preserved, not the whole commit skipped outright.
+    expect(applyEffectiveLayout).toHaveBeenCalledWith(
+      { mode: 'wide', wideWidthPx: 300, drawerWidthPx: LEFT_DRAWER_DEFAULT_PX, focusedSection: null });
+  });
+
+  it('a viewport-clamped wide sidebar with a larger stored preference: click-and-release at the CLAMPED rendered position preserves the full preference', () => {
+    // The exact reviewer scenario: a 420px preference, a viewport that can
+    // only render 313, and a release at the rendered (not preferred) pixel.
+    const state = makeState({ mode: 'wide', sidebarPx: 420 });
+    const { deps, el, save } = makeDeps(state, 313);
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 313); // where the clamped handle actually renders
+    win_fire_mouseupOnly(deps, 313);
+
+    expect(state.sidebarPx).toBe(420); // the honest preference, not the rendered 313
+    expect(save).toHaveBeenCalledWith('sidebarPx', 420);
+    expect(save).not.toHaveBeenCalledWith('sidebarPx', 313);
+  });
+
+  it('a viewport-clamped drawer with a larger stored drawer preference: click-and-release preserves the full drawer preference', () => {
+    // A 258px drawer preference, but a viewport whose budget (300) can only
+    // render 300 - LEFT_RAIL_PX = 252 of it — the drawer's own counterpart to
+    // the wide-sidebar scenario above.
+    const state = makeState({ mode: 'rail', section: 'library', leftNavDrawerPx: 258 });
+    const { deps, el, save } = makeDeps(state, 300);
+    mountLeftNavSeparator(deps);
+    const renderedTotal = LEFT_RAIL_PX + 252; // the clamped rendered edge
+
+    mousedown(el, renderedTotal);
+    win_fire_mouseupOnly(deps, renderedTotal);
+
+    expect(state.leftNavDrawerPx).toBe(258); // the honest preference, not the clamped 252
+    expect(save).toHaveBeenCalledWith('leftNavDrawerPx', 258);
+    expect(save).not.toHaveBeenCalledWith('leftNavDrawerPx', 252);
+  });
+
+  it('an unclamped wide sidebar: click-and-release with a nonzero grip offset (mid-handle) still changes nothing', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 300 });
+    const { deps, el, save } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 304); // 4px INTO the 7px handle, not its left edge
+    win_fire_mouseupOnly(deps, 304); // released at the identical point — no movement
+
+    expect(state.sidebarPx).toBe(300);
+    expect(save).toHaveBeenCalledWith('sidebarPx', 300);
+    expect(save).not.toHaveBeenCalledWith('sidebarPx', 304);
+  });
+
+  it('clicking the left, centre, and right portions of the handle all preserve the preference identically when nothing moves', () => {
+    for (const grip of [0, 3, 6]) { // left edge, centre, right edge of the 7px handle
+      const state = makeState({ mode: 'wide', sidebarPx: 300 });
+      const { deps, el, save } = makeDeps(state);
+      mountLeftNavSeparator(deps);
+
+      mousedown(el, 300 + grip);
+      win_fire_mouseupOnly(deps, 300 + grip);
+
+      expect(state.sidebarPx).toBe(300);
+      expect(save).toHaveBeenCalledWith('sidebarPx', 300);
+    }
+  });
+
+  it('a genuine drag, grabbed mid-handle, still tracks the pointer from the SAME grab point (no per-drag skew)', () => {
+    const state = makeState({ mode: 'wide', sidebarPx: 300 });
+    const { deps, el, win, applyEffectiveLayout } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 304); // 4px into the handle
+    win._fire('mousemove', { clientX: 354 }); // pointer moves +50 from the grab point
+    win._fire('mouseup', { clientX: 354 });
+
+    // The navigation edge moves by the SAME +50 the pointer actually
+    // travelled — grip-offset-corrected, not skewed by the 4px grab offset.
+    expect(state.sidebarPx).toBe(350);
+    expect(applyEffectiveLayout).toHaveBeenCalledWith(
+      { mode: 'wide', wideWidthPx: 350, drawerWidthPx: LEFT_DRAWER_DEFAULT_PX, focusedSection: null });
+  });
+
+  it('a click-and-release still folds/opens correctly if the pointer DID move, even back to its own start (net-zero movement still commits via the normal path)', () => {
+    // Guards against over-correcting: `dragMoved` must not suppress a
+    // legitimate mousemove-bearing gesture that happens to end where it began.
+    const state = makeState({ mode: 'wide', sidebarPx: 300 });
+    const { deps, el, win, save } = makeDeps(state);
+    mountLeftNavSeparator(deps);
+
+    mousedown(el, 300);
+    win._fire('mousemove', { clientX: 350 }); // genuine movement away...
+    win._fire('mousemove', { clientX: 300 }); // ...and back to the exact start
+    win._fire('mouseup', { clientX: 300 });
+
+    // No net change either way — but this exercises the `dragMoved` branch,
+    // not the "mouseup never called advanceTo" branch.
+    expect(state.sidebarPx).toBe(300);
+    expect(save).toHaveBeenCalledWith('sidebarPx', 300);
+  });
+});
+
+/** Fires ONLY `mouseup` (no `mousemove` at all) — the "click and release
+ *  without ever moving" shape blocker 1 is about. */
+function win_fire_mouseupOnly(deps: LeftNavSeparatorDeps, clientX: number): void {
+  (deps.win as ReturnType<typeof fakeWin>)._fire('mouseup', { clientX });
+}
diff --git a/tests/unit/left-nav.test.ts b/tests/unit/left-nav.test.ts
new file mode 100644
index 00000000..aa72558a
--- /dev/null
+++ b/tests/unit/left-nav.test.ts
@@ -0,0 +1,308 @@
+// #487 phase 3 — the left navigation's controller seam (`application/left-nav.ts`).
+// The pure mode machine itself (`resolveRailOpen`/`resolveRailActivation`/…) is
+// covered exhaustively in `left-nav-layout.test.ts`; what is tested here is the
+// glue: the state-slice projection, the persistence gap the module exists to
+// close (a rail/drawer selection of a lower section now persists `sidePanel`,
+// matching the wide sidebar's own tab switch), and — the specific regression
+// this phase's design review caught — that `openFocusedSection`/
+// `toggleFocusedSection` commit as ONE atomic signals transition, never two.
+
+import { describe, it, expect, vi } from 'vitest';
+import { effect, signal } from '@preact/signals-core';
+import {
+  openFocusedSection, readLeftNavigationLayout, toggleFocusedSection,
+} from '../../src/application/left-nav.js';
+import type { LeftNavApp, LeftNavStateSlice } from '../../src/application/left-nav.js';
+import {
+  LEFT_DRAWER_DEFAULT_PX, LEFT_WIDE_DEFAULT_PX,
+} from '../../src/core/left-nav-layout.js';
+import type { LeftNavigationSection, SidePanelKey } from '../../src/core/left-nav-layout.js';
+
+/** A fake `LeftNavStateSlice`, rail mode by default (the mode every reducer
+ *  here actually acts on) with no section focused and Library as the lower
+ *  pane — override via `over`. */
+function makeState(over: Partial<{
+  mode: 'wide' | 'rail';
+  sidebarPx: number;
+  leftNavDrawerPx: number;
+  section: LeftNavigationSection | null;
+  upperRole: 'databases' | 'dashboards';
+  sidePanel: SidePanelKey;
+}> = {}): LeftNavStateSlice {
+  return {
+    sidebarPx: over.sidebarPx ?? LEFT_WIDE_DEFAULT_PX,
+    leftNavDrawerPx: over.leftNavDrawerPx ?? LEFT_DRAWER_DEFAULT_PX,
+    leftNavMode: signal(over.mode ?? 'rail'),
+    leftNavSection: signal(over.section ?? null),
+    upperRole: signal(over.upperRole ?? 'databases'),
+    sidePanel: signal(over.sidePanel ?? 'saved'),
+  };
+}
+
+function makeApp(state: LeftNavStateSlice): LeftNavApp & { save: ReturnType<typeof vi.fn> } {
+  const save = vi.fn();
+  return { state, prefs: { save }, save };
+}
+
+describe('readLeftNavigationLayout', () => {
+  it('maps every field from the state slice', () => {
+    const state = makeState({
+      mode: 'rail', sidebarPx: 300, leftNavDrawerPx: 200, section: 'library',
+    });
+    expect(readLeftNavigationLayout(state)).toEqual({
+      mode: 'rail', wideWidthPx: 300, drawerWidthPx: 200, focusedSection: 'library',
+    });
+  });
+
+  it('maps a wide/no-focus state too', () => {
+    const state = makeState({ mode: 'wide', section: null });
+    expect(readLeftNavigationLayout(state)).toEqual({
+      mode: 'wide',
+      wideWidthPx: LEFT_WIDE_DEFAULT_PX,
+      drawerWidthPx: LEFT_DRAWER_DEFAULT_PX,
+      focusedSection: null,
+    });
+  });
+});
+
+describe('openFocusedSection — lower sections persist sidePanel', () => {
+  it('opening Library from a mismatched History state fixes both signals together', () => {
+    const state = makeState({ mode: 'rail', sidePanel: 'history', section: 'history' });
+    const app = makeApp(state);
+
+    openFocusedSection(app, 'library');
+
+    expect(state.sidePanel.value).toBe('saved');
+    expect(state.leftNavSection.value).toBe('library');
+    expect(app.save).toHaveBeenCalledWith('sidePanel', 'saved');
+  });
+
+  it('opening History from a mismatched Library state fixes both signals together', () => {
+    const state = makeState({ mode: 'rail', sidePanel: 'saved', section: 'library' });
+    const app = makeApp(state);
+
+    openFocusedSection(app, 'history');
+
+    expect(state.sidePanel.value).toBe('history');
+    expect(state.leftNavSection.value).toBe('history');
+    expect(app.save).toHaveBeenCalledWith('sidePanel', 'history');
+  });
+
+  it('does not touch lowerNavigationFilters or any field beyond the four it owns', () => {
+    const state = makeState({ mode: 'rail' }) as LeftNavStateSlice & {
+      lowerNavigationFilters: Record<'library' | 'history', string>;
+    };
+    state.lowerNavigationFilters = { library: 'unchanged-marker', history: 'also-unchanged' };
+    const app = makeApp(state);
+
+    openFocusedSection(app, 'library');
+
+    expect(state.lowerNavigationFilters).toEqual({ library: 'unchanged-marker', history: 'also-unchanged' });
+  });
+});
+
+describe('idempotent side effects — no repeated writes for an already-selected section', () => {
+  it('opening the same lower section twice only persists sidePanel once (#428 bounded drag-hover re-asserts repeatedly)', () => {
+    const state = makeState({ mode: 'rail', sidePanel: 'history', section: 'history' });
+    const app = makeApp(state);
+
+    openFocusedSection(app, 'library');
+    expect(app.save).toHaveBeenCalledTimes(1);
+    expect(state.sidePanel.value).toBe('saved');
+
+    openFocusedSection(app, 'library');
+    expect(app.save).toHaveBeenCalledTimes(1);
+    expect(state.sidePanel.value).toBe('saved');
+  });
+
+  it('opening the same upper section twice does not rewrite upperRole redundantly', () => {
+    const state = makeState({ mode: 'rail', upperRole: 'databases', section: 'databases' });
+    const app = makeApp(state);
+
+    openFocusedSection(app, 'databases');
+    openFocusedSection(app, 'databases');
+
+    expect(state.upperRole.value).toBe('databases');
+    expect(app.save).not.toHaveBeenCalled();
+  });
+
+  it('toggleFocusedSection also skips the redundant sidePanel persistence when re-activating the open section', () => {
+    const state = makeState({ mode: 'rail', sidePanel: 'saved', section: 'library' });
+    const app = makeApp(state);
+
+    // toggleFocusedSection closes the drawer on the SAME section, but the pane
+    // switch itself (selectSectionInExistingPane) still runs first with the
+    // section still 'library' — sidePanel is already 'saved', so no save.
+    toggleFocusedSection(app, 'library');
+
+    expect(app.save).not.toHaveBeenCalled();
+    expect(state.leftNavSection.value).toBeNull();
+  });
+});
+
+describe('openFocusedSection — upper sections never persist', () => {
+  it('opening Dashboards from a mismatched Databases state fixes both signals, no persistence', () => {
+    const state = makeState({ mode: 'rail', upperRole: 'databases', section: 'databases' });
+    const app = makeApp(state);
+
+    openFocusedSection(app, 'dashboards');
+
+    expect(state.upperRole.value).toBe('dashboards');
+    expect(state.leftNavSection.value).toBe('dashboards');
+    expect(app.save).not.toHaveBeenCalled();
+  });
+
+  it('opening Databases from a mismatched Dashboards state fixes both signals, no persistence', () => {
+    const state = makeState({ mode: 'rail', upperRole: 'dashboards', section: 'dashboards' });
+    const app = makeApp(state);
+
+    openFocusedSection(app, 'databases');
+
+    expect(state.upperRole.value).toBe('databases');
+    expect(state.leftNavSection.value).toBe('databases');
+    expect(app.save).not.toHaveBeenCalled();
+  });
+});
+
+describe('atomicity — one batched transition, not two', () => {
+  it('an effect reading both the pane signal and leftNavSection runs exactly once, and only ever sees the final combination', () => {
+    const state = makeState({ mode: 'rail', sidePanel: 'history', section: 'history' });
+    const app = makeApp(state);
+
+    const seen: Array<{ panel: SidePanelKey; section: LeftNavigationSection | null }> = [];
+    const dispose = effect(() => {
+      seen.push({ panel: state.sidePanel.value, section: state.leftNavSection.value });
+    });
+    // The effect above runs once on install; clear that baseline observation so
+    // the assertions below are only about the call under test.
+    seen.length = 0;
+
+    openFocusedSection(app, 'library');
+
+    expect(seen).toHaveLength(1);
+    expect(seen[0]).toEqual({ panel: 'saved', section: 'library' });
+
+    dispose();
+  });
+
+  it('same atomicity guarantee for toggleFocusedSection', () => {
+    const state = makeState({ mode: 'rail', upperRole: 'databases', section: 'databases' });
+    const app = makeApp(state);
+
+    const seen: Array<{ role: 'databases' | 'dashboards'; section: LeftNavigationSection | null }> = [];
+    const dispose = effect(() => {
+      seen.push({ role: state.upperRole.value, section: state.leftNavSection.value });
+    });
+    seen.length = 0;
+
+    toggleFocusedSection(app, 'dashboards');
+
+    expect(seen).toHaveLength(1);
+    expect(seen[0]).toEqual({ role: 'dashboards', section: 'dashboards' });
+
+    dispose();
+  });
+});
+
+describe('toggleFocusedSection — closes an already-open section', () => {
+  it('toggling the section that is already focused closes the drawer (resolveRailActivation semantics)', () => {
+    const state = makeState({ mode: 'rail', section: 'library', sidePanel: 'saved' });
+    const app = makeApp(state);
+
+    toggleFocusedSection(app, 'library');
+
+    expect(state.leftNavSection.value).toBeNull();
+  });
+
+  it('toggling a DIFFERENT section than the one open focuses the new one instead (no close)', () => {
+    const state = makeState({ mode: 'rail', section: 'library', sidePanel: 'saved' });
+    const app = makeApp(state);
+
+    toggleFocusedSection(app, 'history');
+
+    expect(state.leftNavSection.value).toBe('history');
+  });
+
+  it('openFocusedSection is idempotent instead of toggling — repeated calls keep the section open', () => {
+    const state = makeState({ mode: 'rail', section: 'library', sidePanel: 'saved' });
+    const app = makeApp(state);
+
+    openFocusedSection(app, 'library');
+
+    expect(state.leftNavSection.value).toBe('library');
+  });
+});
+
+describe('wide mode — no drawer, only the pane switch applies', () => {
+  it('openFocusedSection in wide mode leaves mode/section alone but still switches the pane', () => {
+    const state = makeState({ mode: 'wide', section: null, sidePanel: 'history' });
+    const app = makeApp(state);
+
+    openFocusedSection(app, 'library');
+
+    expect(state.leftNavMode.value).toBe('wide');
+    expect(state.leftNavSection.value).toBeNull();
+    expect(state.sidePanel.value).toBe('saved');
+    expect(app.save).toHaveBeenCalledWith('sidePanel', 'saved');
+  });
+});
+
+// #487 phase-3 review, major issue 2 — `preemptActiveResize` is the ONE
+// choke point every caller of `openFocusedSection`/`toggleFocusedSection`
+// gets for free: a caller (`app-shell.ts`) wires it to cancel an in-progress
+// separator resize session and repaint from the committed layout, BEFORE
+// this module's own write — otherwise the session's eventual mouseup/blur
+// commit, unaware the command ran, can silently overwrite or undo it. These
+// tests cover the seam itself, independent of `app-shell.ts`'s own wiring
+// (covered end-to-end in `app-shell.test.ts`).
+describe('preemptActiveResize — called before the write, optional for backward compatibility', () => {
+  it('openFocusedSection calls it BEFORE its own batched write', () => {
+    const state = makeState({ mode: 'rail', section: null });
+    const order: string[] = [];
+    const preemptActiveResize = vi.fn(() => { order.push('preempt'); });
+    const app: LeftNavApp = {
+      state, prefs: { save: vi.fn() }, preemptActiveResize,
+    };
+    const dispose = effect(() => {
+      state.leftNavSection.value;
+      order.push('write-observed');
+    });
+    order.length = 0; // drop the install-time baseline run
+
+    openFocusedSection(app, 'library');
+
+    expect(preemptActiveResize).toHaveBeenCalledTimes(1);
+    expect(order).toEqual(['preempt', 'write-observed']);
+    dispose();
+  });
+
+  it('toggleFocusedSection calls it BEFORE its own batched write', () => {
+    const state = makeState({ mode: 'rail', section: null });
+    const order: string[] = [];
+    const preemptActiveResize = vi.fn(() => { order.push('preempt'); });
+    const app: LeftNavApp = {
+      state, prefs: { save: vi.fn() }, preemptActiveResize,
+    };
+    const dispose = effect(() => {
+      state.leftNavSection.value;
+      order.push('write-observed');
+    });
+    order.length = 0;
+
+    toggleFocusedSection(app, 'library');
+
+    expect(preemptActiveResize).toHaveBeenCalledTimes(1);
+    expect(order).toEqual(['preempt', 'write-observed']);
+    dispose();
+  });
+
+  it('is optional — omitting it is a safe no-op for every existing caller', () => {
+    const state = makeState({ mode: 'rail', section: null });
+    const app: LeftNavApp = { state, prefs: { save: vi.fn() } }; // no preemptActiveResize at all
+
+    expect(() => openFocusedSection(app, 'library')).not.toThrow();
+    expect(state.leftNavSection.value).toBe('library');
+    expect(() => toggleFocusedSection(app, 'library')).not.toThrow();
+    expect(state.leftNavSection.value).toBeNull();
+  });
+});
diff --git a/tests/unit/left-rail.test.ts b/tests/unit/left-rail.test.ts
new file mode 100644
index 00000000..75b8353d
--- /dev/null
+++ b/tests/unit/left-rail.test.ts
@@ -0,0 +1,233 @@
+// #487 phase 3 — the compact icon rail (`src/ui/left-rail.ts`). Exercises: the
+// four launchers render with the registry's real label/accessibleLabel pair
+// (asserting they differ, not merely that both are truthy), a click drives the
+// REAL `toggleFocusedSection` (asserting the resulting state, not a mock of
+// the function), `aria-expanded` tracks `state.leftNavSection` reactively
+// without a manual re-render, and `dispose()` actually stops the effect.
+
+import { describe, it, expect, vi } from 'vitest';
+import { signal } from '@preact/signals-core';
+import { buildLeftRail } from '../../src/ui/left-rail.js';
+import type { LeftRailDeps } from '../../src/ui/left-rail.js';
+import {
+  LEFT_NAV_SECTIONS, LEFT_WIDE_DEFAULT_PX, LEFT_DRAWER_DEFAULT_PX,
+} from '../../src/core/left-nav-layout.js';
+import type { LeftNavigationSection } from '../../src/core/left-nav-layout.js';
+import { NAV_SECTION_META } from '../../src/ui/nav-sections.js';
+import type { LeftNavApp, LeftNavStateSlice } from '../../src/application/left-nav.js';
+import type { SidePanelKey } from '../../src/core/left-nav-layout.js';
+
+const DRAWER_ID = 'left-nav-drawer';
+
+/** A fake registry: only `entry` is read, so a plain map over `NAV_SECTION_META`
+ *  (the real, single source of label/icon/accessibleLabel truth) satisfies it. */
+function fakeRegistry() {
+  return {
+    entry: (section: LeftNavigationSection) => ({
+      section, host: document.createElement('div'), ...NAV_SECTION_META[section],
+    }),
+  };
+}
+
+/** A fake `LeftNavStateSlice` — rail mode, no section focused, Library the
+ *  lower pane by default (mirrors `left-nav.test.ts`'s own `makeState`, since
+ *  a rail click's resulting state is asserted through the exact same
+ *  `application/left-nav.ts` this fixture is typed against). */
+function makeState(over: Partial<{
+  mode: 'wide' | 'rail';
+  section: LeftNavigationSection | null;
+  upperRole: 'databases' | 'dashboards';
+  sidePanel: SidePanelKey;
+}> = {}): LeftNavStateSlice {
+  return {
+    sidebarPx: LEFT_WIDE_DEFAULT_PX,
+    leftNavDrawerPx: LEFT_DRAWER_DEFAULT_PX,
+    leftNavMode: signal(over.mode ?? 'rail'),
+    leftNavSection: signal(over.section ?? null),
+    upperRole: signal(over.upperRole ?? 'databases'),
+    sidePanel: signal(over.sidePanel ?? 'saved'),
+  };
+}
+
+function makeDeps(state: LeftNavStateSlice): LeftRailDeps & { save: ReturnType<typeof vi.fn> } {
+  const save = vi.fn();
+  const app: LeftNavApp = { state, prefs: { save } };
+  return {
+    app, registry: fakeRegistry(), state, drawerElementId: DRAWER_ID, save,
+  };
+}
+
+describe('buildLeftRail', () => {
+  it('renders one button per LEFT_NAV_SECTIONS entry, in order', () => {
+    const handle = buildLeftRail(makeDeps(makeState()));
+    const buttons = Array.from(handle.el.querySelectorAll('button'));
+    expect(buttons).toHaveLength(LEFT_NAV_SECTIONS.length);
+    handle.dispose();
+  });
+
+  it('each button carries the registry label as title and the accessibleLabel as aria-label — distinct strings', () => {
+    const handle = buildLeftRail(makeDeps(makeState()));
+    const buttons = Array.from(handle.el.querySelectorAll('button'));
+    LEFT_NAV_SECTIONS.forEach((section, i) => {
+      const meta = NAV_SECTION_META[section];
+      const btn = buttons[i];
+      expect(btn.getAttribute('title')).toBe(meta.label);
+      expect(btn.getAttribute('aria-label')).toBe(meta.accessibleLabel);
+      expect(btn.getAttribute('title')).not.toBe(btn.getAttribute('aria-label'));
+      expect(btn.getAttribute('type')).toBe('button');
+      expect(btn.classList.contains('left-rail-btn')).toBe(true);
+      // Icon-only: no visible text content.
+      expect(btn.textContent).toBe('');
+      expect(btn.querySelector('svg')).not.toBeNull();
+    });
+    handle.dispose();
+  });
+
+  it('every button aria-controls points at the same passed-in drawer id', () => {
+    const handle = buildLeftRail(makeDeps(makeState()));
+    const buttons = Array.from(handle.el.querySelectorAll('button'));
+    for (const btn of buttons) expect(btn.getAttribute('aria-controls')).toBe(DRAWER_ID);
+    handle.dispose();
+  });
+
+  it('each button gets its OWN icon instance, not a shared node', () => {
+    const handle = buildLeftRail(makeDeps(makeState()));
+    const svgs = Array.from(handle.el.querySelectorAll('svg'));
+    expect(svgs).toHaveLength(LEFT_NAV_SECTIONS.length);
+    for (let i = 0; i < svgs.length; i++) {
+      for (let j = i + 1; j < svgs.length; j++) expect(svgs[i]).not.toBe(svgs[j]);
+    }
+    handle.dispose();
+  });
+
+  it('aria-expanded starts false for all four when no section is focused', () => {
+    const handle = buildLeftRail(makeDeps(makeState({ section: null })));
+    const buttons = Array.from(handle.el.querySelectorAll('button'));
+    for (const btn of buttons) expect(btn.getAttribute('aria-expanded')).toBe('false');
+    handle.dispose();
+  });
+
+  it('aria-expanded is true for exactly the focused section', () => {
+    const state = makeState({ section: 'library' });
+    const handle = buildLeftRail(makeDeps(state));
+    const buttons = Array.from(handle.el.querySelectorAll('button'));
+    LEFT_NAV_SECTIONS.forEach((section, i) => {
+      expect(buttons[i].getAttribute('aria-expanded')).toBe(section === 'library' ? 'true' : 'false');
+    });
+    handle.dispose();
+  });
+
+  it('aria-expanded updates reactively as the signal changes, without a manual re-render', () => {
+    const state = makeState({ section: null });
+    const handle = buildLeftRail(makeDeps(state));
+    const buttons = Array.from(handle.el.querySelectorAll('button'));
+    const historyIdx = LEFT_NAV_SECTIONS.indexOf('history');
+    const databasesIdx = LEFT_NAV_SECTIONS.indexOf('databases');
+
+    state.leftNavSection.value = 'history';
+    expect(buttons[historyIdx].getAttribute('aria-expanded')).toBe('true');
+    expect(buttons[databasesIdx].getAttribute('aria-expanded')).toBe('false');
+
+    state.leftNavSection.value = 'databases';
+    expect(buttons[historyIdx].getAttribute('aria-expanded')).toBe('false');
+    expect(buttons[databasesIdx].getAttribute('aria-expanded')).toBe('true');
+
+    // Same DOM nodes throughout — this is an attribute update, not a rebuild.
+    const stillSame = Array.from(handle.el.querySelectorAll('button'));
+    expect(stillSame).toEqual(buttons);
+    handle.dispose();
+  });
+
+  it('clicking a rail launcher toggles the REAL resulting state (upper section)', () => {
+    const state = makeState({ mode: 'rail', section: null, upperRole: 'databases' });
+    const deps = makeDeps(state);
+    const handle = buildLeftRail(deps);
+    const buttons = Array.from(handle.el.querySelectorAll('button'));
+    const dashboardsBtn = buttons[LEFT_NAV_SECTIONS.indexOf('dashboards')];
+
+    dashboardsBtn.click();
+    expect(state.leftNavSection.value).toBe('dashboards');
+    expect(state.upperRole.value).toBe('dashboards');
+
+    // Clicking the already-open section's icon again CLOSES it (toggle, not open).
+    dashboardsBtn.click();
+    expect(state.leftNavSection.value).toBeNull();
+    handle.dispose();
+  });
+
+  it('clicking a rail launcher for a lower section persists sidePanel via prefs.save', () => {
+    const state = makeState({ mode: 'rail', section: null, sidePanel: 'saved' });
+    const deps = makeDeps(state);
+    const handle = buildLeftRail(deps);
+    const buttons = Array.from(handle.el.querySelectorAll('button'));
+    const historyBtn = buttons[LEFT_NAV_SECTIONS.indexOf('history')];
+
+    historyBtn.click();
+    expect(state.leftNavSection.value).toBe('history');
+    expect(state.sidePanel.value).toBe('history');
+    expect(deps.save).toHaveBeenCalledWith('sidePanel', 'history');
+    handle.dispose();
+  });
+
+  // A real, confirmed WebKit-specific gap found in the e2e pass: Chromium/
+  // Firefox focus a clicked `<button>` natively, but WebKit does not — so
+  // without an explicit `button.focus()` call, closing a drawer by clicking
+  // its own rail icon left focus on `<body>` on Safari instead of returning it
+  // to the icon, unlike the Escape path's explicit `focusSection` call. These
+  // assertions don't depend on native click-focus behaviour at all, so they
+  // hold identically in every engine, including happy-dom.
+  it('clicking a launcher moves focus to that SAME button — both opening and closing (toggle-off) the drawer', () => {
+    const state = makeState({ mode: 'rail', section: null });
+    const handle = buildLeftRail(makeDeps(state));
+    const buttons = Array.from(handle.el.querySelectorAll('button'));
+    const dashboardsBtn = buttons[LEFT_NAV_SECTIONS.indexOf('dashboards')];
+    document.body.appendChild(handle.el); // focus() is a no-op on a detached element
+
+    dashboardsBtn.click(); // opens
+    expect(state.leftNavSection.value).toBe('dashboards');
+    expect(document.activeElement).toBe(dashboardsBtn);
+
+    dashboardsBtn.click(); // closes (toggle-off)
+    expect(state.leftNavSection.value).toBeNull();
+    expect(document.activeElement).toBe(dashboardsBtn);
+
+    handle.el.remove();
+    handle.dispose();
+  });
+
+  it('switching between two different sections opens the new one without closing first (no toggle-off)', () => {
+    const state = makeState({ mode: 'rail', section: 'library' });
+    const deps = makeDeps(state);
+    const handle = buildLeftRail(deps);
+    const buttons = Array.from(handle.el.querySelectorAll('button'));
+    buttons[LEFT_NAV_SECTIONS.indexOf('history')].click();
+    expect(state.leftNavSection.value).toBe('history');
+    handle.dispose();
+  });
+
+  // #487 phase 3 step 4: `app-shell.ts`'s Escape handler returns focus to the
+  // rail launcher that opened a now-closed drawer via this method.
+  it('focusSection moves focus to that section\'s OWN button, not any other', () => {
+    const handle = buildLeftRail(makeDeps(makeState()));
+    const buttons = Array.from(handle.el.querySelectorAll('button'));
+    document.body.appendChild(handle.el); // focus() is a no-op on a detached element
+
+    handle.focusSection('history');
+
+    expect(document.activeElement).toBe(buttons[LEFT_NAV_SECTIONS.indexOf('history')]);
+    expect(document.activeElement).not.toBe(buttons[LEFT_NAV_SECTIONS.indexOf('databases')]);
+    handle.el.remove();
+    handle.dispose();
+  });
+
+  it('dispose() stops the reactive effect — a later signal write does not update the DOM', () => {
+    const state = makeState({ section: null });
+    const handle = buildLeftRail(makeDeps(state));
+    const buttons = Array.from(handle.el.querySelectorAll('button'));
+    const databasesIdx = LEFT_NAV_SECTIONS.indexOf('databases');
+
+    handle.dispose();
+    state.leftNavSection.value = 'databases';
+    expect(buttons[databasesIdx].getAttribute('aria-expanded')).toBe('false');
+  });
+});
diff --git a/tests/unit/saved-history.test.ts b/tests/unit/saved-history.test.ts
index 9be988dd..b58ff5a4 100644
--- a/tests/unit/saved-history.test.ts
+++ b/tests/unit/saved-history.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest';
-import { renderSavedHistory } from '../../src/ui/saved-history.js';
+import { renderSavedHistory, renderLibrarySection, renderHistorySection } from '../../src/ui/saved-history.js';
 import { LIBRARY_QUERY_MIME, SUBQUERY_MIME } from '../../src/ui/dnd-mime.js';
 import { queryDescription, queryFavorite, queryName } from '../../src/core/saved-query.js';
 import { makeApp } from '../helpers/fake-app.js';
@@ -614,17 +614,23 @@ describe('renderSavedHistory', () => {
     // `state.ts` decodes `asb:sidePanel` at load, so this value cannot come from
     // storage — but the signal is settable by any module, and the two readers must
     // not be able to disagree. `app-shell.ts`'s exposure effect resolves anything
-    // that is not 'history' to the Library host; this renderer has to paint into
-    // the LIBRARY pair for the same input, or the pane shows an exposed empty host
-    // while the content sits inside the hidden one.
+    // that is not 'history' to the Library host.
+    //
+    // #487 phase 3: content rendering no longer depends on this decoding at all
+    // — both sections always render their own content regardless of which is
+    // exposed. What this decoding still controls is only the tab row's "active"
+    // class / `aria-pressed`, asserted here.
     const app = makeApp();
     (app.state.sidePanel as { value: string }).value = 'queries';
     setSaved(app, [{ id: 's1', name: 'Q1', sql: 'SELECT 1' }]);
     renderSavedHistory(app);
 
     expect(qsa(savedList(app), '.saved-row')).toHaveLength(1);
-    expect(historyList(app).children.length).toBe(0);
-    expect(qsa(savedTabsRow(app), '.side-tab')[0].classList.contains('active')).toBe(true);
+    const tabs = qsa<HTMLButtonElement>(savedTabsRow(app), '.side-tab');
+    expect(tabs[0].classList.contains('active')).toBe(true);
+    expect(tabs[0].getAttribute('aria-pressed')).toBe('true');
+    expect(tabs[1].classList.contains('active')).toBe(false);
+    expect(tabs[1].getAttribute('aria-pressed')).toBe('false');
   });
 
   it('takes the lower tabs\' labels and icons FROM the registry', () => {
@@ -651,13 +657,12 @@ describe('renderSavedHistory', () => {
     }
   });
 
-  it('ignores input from a retained search box whose section is no longer active', () => {
+  it('a retained search box whose section is no longer exposed still writes only its OWN section (#487 phase 3)', () => {
     // #487 phase 2: the inactive section's host keeps its DOM, so its search input
-    // and listeners OUTLIVE the switch away from it. `state.libraryFilter` is still
-    // one shared string and `renderList` paints the ACTIVE section, so a stale
-    // event would rewrite the filter and repaint the OTHER section's list with this
-    // section's text. CSS makes it unreachable today; phase 3 moves hosts into
-    // containers where a host can be visible while another section is active.
+    // and listeners OUTLIVE the switch away from it. #487 phase 3 gives each
+    // section its own filter slot (`state.lowerNavigationFilters`), so a "stale"
+    // Library input firing while History is exposed can only ever write Library's
+    // own filter and repaint Library's own (hidden) list — never History's.
     const app = makeApp();
     app.state.sidePanel.value = 'saved';
     setSaved(app, [{ id: 's1', name: 'Carrier delays', sql: 'SELECT 1' }]);
@@ -672,14 +677,20 @@ describe('renderSavedHistory', () => {
     staleInput.value = 'zzzz';
     staleInput.dispatchEvent(new Event('input', { bubbles: true }));
 
-    // The shared filter is untouched and History still shows its row — no
-    // cross-section rewrite, no "No history matches “zzzz”".
-    expect(app.state.libraryFilter).toBe('');
+    // Library's OWN filter took the input; History's own filter and rendered
+    // content are untouched — no cross-section rewrite, no "No history matches
+    // “zzzz”".
+    expect(app.state.lowerNavigationFilters.library).toBe('zzzz');
+    expect(app.state.lowerNavigationFilters.history).toBe('');
     expect(qsa(historyList(app), '.history-row')).toHaveLength(1);
     expect(historyList(app).textContent).not.toContain('zzzz');
+    expect(savedList(app).textContent).toContain('No library queries match');
+    expect(savedList(app).textContent).toContain('zzzz');
 
-    // Escape on the stale input is inert for the same reason.
+    // Escape on the stale input clears LIBRARY's own filter, still without
+    // touching History.
     staleInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    expect(app.state.lowerNavigationFilters.library).toBe('');
     expect(qsa(historyList(app), '.history-row')).toHaveLength(1);
   });
 
@@ -695,6 +706,82 @@ describe('renderSavedHistory', () => {
     expect(app.state.sidePanel.value).toBe('saved');
     expect(app.prefs.save).toHaveBeenCalledWith('sidePanel', 'saved');
   });
+
+  // #572: the lower switcher's tabs had neither attribute, unlike the upper
+  // switcher's (`sidebar-upper.ts`), which already has both.
+  it('renders the lower tabs as real buttons with correct aria-pressed (#572)', () => {
+    const app = makeApp();
+    app.state.sidePanel.value = 'saved';
+    renderSavedHistory(app);
+    const [libraryTab, historyTab] = qsa<HTMLButtonElement>(savedTabsRow(app), '.side-tab');
+    expect(libraryTab.type).toBe('button');
+    expect(libraryTab.getAttribute('aria-pressed')).toBe('true');
+    expect(historyTab.type).toBe('button');
+    expect(historyTab.getAttribute('aria-pressed')).toBe('false');
+    // #487 phase 3 step 4: the wide-mode restore-focus path
+    // (`app-shell.ts`'s `applyEffectiveLeftNavigationLayout`) finds a tab by
+    // `data-section` at the moment of the transition.
+    expect(libraryTab.dataset.section).toBe('library');
+    expect(historyTab.dataset.section).toBe('history');
+
+    click(historyTab);
+    renderSavedHistory(app);
+    const [libraryTab2, historyTab2] = qsa<HTMLButtonElement>(savedTabsRow(app), '.side-tab');
+    expect(libraryTab2.getAttribute('aria-pressed')).toBe('false');
+    expect(historyTab2.getAttribute('aria-pressed')).toBe('true');
+  });
+});
+
+describe('renderLibrarySection / renderHistorySection (#487 phase 3: independent of exposure)', () => {
+  // Direct regression test for the "first switch to a section shows empty" bug:
+  // before this phase, a section's content only ever painted while it was the
+  // ACTIVE section, so the section that was not active when the pane first
+  // mounted had never been painted.
+  it('renderHistorySection paints History\'s own host even while Library is the exposed section', () => {
+    const app = makeApp();
+    app.state.sidePanel.value = 'saved'; // Library is exposed, not History
+    app.state.history = [{ id: 'h1', sql: 'SELECT 1', ts: Date.now(), rows: 1, ms: 1 }];
+    renderHistorySection(app);
+    expect(qsa(historyList(app), '.history-row')).toHaveLength(1);
+  });
+
+  it('renderLibrarySection paints Library\'s own host even while History is the exposed section', () => {
+    const app = makeApp();
+    app.state.sidePanel.value = 'history'; // History is exposed, not Library
+    setSaved(app, [{ id: 's1', name: 'Q1', sql: 'SELECT 1' }]);
+    renderLibrarySection(app);
+    expect(qsa(savedList(app), '.saved-row')).toHaveLength(1);
+  });
+
+  // Direct regression test for the "the section that wasn't active when its own
+  // data changed goes stale" bug, and its mirror.
+  it('a History-only mutation does not touch Library\'s DOM', () => {
+    const app = makeApp();
+    app.state.sidePanel.value = 'saved';
+    setSaved(app, [{ id: 's1', name: 'Q1', sql: 'SELECT 1' }]);
+    renderSavedHistory(app);
+    const before = savedList(app).innerHTML;
+
+    app.state.history = [{ id: 'h1', sql: 'SELECT 1', ts: Date.now(), rows: 1, ms: 1 }];
+    renderHistorySection(app);
+
+    expect(savedList(app).innerHTML).toBe(before);
+    expect(qsa(historyList(app), '.history-row')).toHaveLength(1);
+  });
+
+  it('a Library-only mutation does not touch History\'s DOM', () => {
+    const app = makeApp();
+    app.state.sidePanel.value = 'history';
+    app.state.history = [{ id: 'h1', sql: 'SELECT 1', ts: Date.now(), rows: 1, ms: 1 }];
+    renderSavedHistory(app);
+    const before = historyList(app).innerHTML;
+
+    setSaved(app, [{ id: 's1', name: 'Q1', sql: 'SELECT 1' }]);
+    renderLibrarySection(app);
+
+    expect(historyList(app).innerHTML).toBe(before);
+    expect(qsa(savedList(app), '.saved-row')).toHaveLength(1);
+  });
 });
 
 describe('renderSavedHistory — search/filter', () => {
@@ -763,12 +850,30 @@ describe('renderSavedHistory — search/filter', () => {
     expect(savedList(app).textContent).toContain('No library queries match');
     expect(savedList(app).textContent).toContain('zzzz');
     click(qs(savedSearch(app), '.sv-search-clear'));
-    expect(app.state.libraryFilter).toBe('');
+    expect(app.state.lowerNavigationFilters.library).toBe('');
     expect(names(app)).toHaveLength(3);
     type(app, 'busiest');
     expect(names(app)).toEqual(['Busiest airports']);
     input(app).dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-    expect(app.state.libraryFilter).toBe('');
+    expect(app.state.lowerNavigationFilters.library).toBe('');
+    expect(names(app)).toHaveLength(3);
+  });
+
+  // #487 phase 3 step 4: an EMPTY search box must not swallow Escape, or the
+  // focused drawer's own Escape-to-close handler (`app-shell.ts`) can never be
+  // reached while focus sits in an untouched search input. This is what makes
+  // the fix reachable: against the OLD code (Escape always clears + always
+  // `preventDefault()`s), this assertion on `defaultPrevented` fails.
+  it('does NOT swallow Escape on an already-EMPTY search box (so it can bubble to the drawer)', () => {
+    const app = savedApp();
+    const box = input(app);
+    expect(box.value).toBe(''); // genuinely empty — not merely "looks empty"
+
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
+    box.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+    expect(app.state.lowerNavigationFilters.library).toBe('');
     expect(names(app)).toHaveLength(3);
   });
 
@@ -788,12 +893,47 @@ describe('renderSavedHistory — search/filter', () => {
     expect(historyList(app).textContent).toContain('No history matches');
   });
 
-  it('clears the filter when switching tabs', () => {
+  // #487 phase 3: the OPPOSITE of the old behavior — switching used to clear
+  // the (single, shared) filter; now each section keeps its own, preserved
+  // across every switch. Sabotage-checked: reintroducing a clear on `switchTo`
+  // (or gating either section's render behind `activeSection`) makes this fail.
+  it('preserves each section\'s own filter text across every switch', () => {
     const app = savedApp();
     type(app, 'delay');
-    expect(app.state.libraryFilter).toBe('delay');
+    expect(app.state.lowerNavigationFilters.library).toBe('delay');
+
     click(qsa(savedTabsRow(app), '.side-tab')[1]); // → History
-    expect(app.state.libraryFilter).toBe('');
+    expect(app.state.sidePanel.value).toBe('history');
+    expect(app.state.lowerNavigationFilters.library).toBe('delay'); // NOT cleared
+    expect(app.state.lowerNavigationFilters.history).toBe('');
+
+    // Give History its OWN, independent filter text.
+    app.state.history = [
+      { id: 'h1', sql: 'SELECT 1', ts: Date.now(), rows: 1, ms: 1 },
+      { id: 'h2', sql: 'INSERT INTO t', ts: Date.now(), rows: null, ms: 1 },
+    ];
+    renderSavedHistory(app);
+    const historyInput = qs<HTMLInputElement>(historySearch(app), '.sv-search-input');
+    historyInput.value = 'insert';
+    historyInput.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(app.state.lowerNavigationFilters.history).toBe('insert');
+
+    click(qsa(savedTabsRow(app), '.side-tab')[0]); // → Library
+    expect(app.state.sidePanel.value).toBe('saved');
+    expect(app.state.lowerNavigationFilters.library).toBe('delay'); // still preserved
+    expect(app.state.lowerNavigationFilters.history).toBe('insert'); // still preserved
+
+    // Re-render (as the real app-shell repaint effects would) and confirm the
+    // preserved text is actually what's shown, not just stored.
+    renderSavedHistory(app);
+    expect(input(app).value).toBe('delay');
+    expect(names(app)).toEqual(['Carrier delays']);
+
+    click(qsa(savedTabsRow(app), '.side-tab')[1]); // → History again
+    renderSavedHistory(app);
+    expect(qs<HTMLInputElement>(historySearch(app), '.sv-search-input').value).toBe('insert');
+    expect(qsa(historyList(app), '.history-row')).toHaveLength(1);
+    expect(historyList(app).textContent).toContain('INSERT INTO t');
   });
 });
 
diff --git a/tests/unit/sidebar-upper.test.ts b/tests/unit/sidebar-upper.test.ts
index 717583fa..7ce32eaa 100644
--- a/tests/unit/sidebar-upper.test.ts
+++ b/tests/unit/sidebar-upper.test.ts
@@ -103,6 +103,16 @@ describe('buildSidebarUpper — role tabs', () => {
     expect(tabs(app)[1].getAttribute('aria-pressed')).toBe('false');
   });
 
+  // #487 phase 3 step 4: the wide-mode restore-focus path
+  // (`app-shell.ts`'s `applyEffectiveLeftNavigationLayout`) finds a tab by
+  // `data-section` at the moment of the transition — each button must carry
+  // its own section name.
+  it('carries its own section as data-section (#487 phase 3 step 4)', () => {
+    const { app } = mount();
+    expect(tabs(app)[0].dataset.section).toBe('databases');
+    expect(tabs(app)[1].dataset.section).toBe('dashboards');
+  });
+
   it('clicking a tab selects that role', () => {
     const { app } = mount();
     tabs(app)[1].click();
diff --git a/tests/unit/splitters.test.ts b/tests/unit/splitters.test.ts
index 6e973a14..619b8844 100644
--- a/tests/unit/splitters.test.ts
+++ b/tests/unit/splitters.test.ts
@@ -12,14 +12,6 @@ describe('clampDrawerWidth', () => {
 
 describe('dragValue', () => {
   const rect = { top: 100, bottom: 300 }; // height 200
-  it('col clamps clientX to [180,420]', () => {
-    expect(dragValue('col', { clientX: 50, clientY: 0 })).toBe(180);
-    expect(dragValue('col', { clientX: 250, clientY: 0 })).toBe(250);
-    expect(dragValue('col', { clientX: 999, clientY: 0 })).toBe(420);
-  });
-  it('col follows clientX directly (native coords, no scale argument)', () => {
-    expect(dragValue('col', { clientX: 300, clientY: 0 })).toBe(300);
-  });
   it('sideRow maps Y to % clamped [25,85]', () => {
     expect(dragValue('sideRow', { clientX: 0, clientY: 200 }, rect)).toBe(50);
     expect(dragValue('sideRow', { clientX: 0, clientY: 100 }, rect)).toBe(25); // 0% → clamp 25
@@ -54,10 +46,10 @@ function fakeWin() {
 }
 
 describe('startDrag', () => {
-  function harness(axis: 'col' | 'sideRow' | 'row') {
+  function harness(axis: 'sideRow' | 'row') {
     const win = fakeWin();
     const handle = document.createElement('div');
-    const state = { sidebarPx: 0, sideSplitPct: 0, editorPct: 0 };
+    const state = { sideSplitPct: 0, editorPct: 0 };
     const apply = vi.fn();
     const save = vi.fn();
     const ctx = { win, state, apply, save, rectFor: () => ({ top: 0, bottom: 100 }) };
@@ -66,28 +58,6 @@ describe('startDrag', () => {
     return { win, handle, state, apply, save, ev };
   }
 
-  it('col: drag updates sidebarPx + persists on mouseup', () => {
-    const { win, handle, state, apply, save } = harness('col');
-    expect(handle.classList.contains('dragging')).toBe(true);
-    win._fire('mousemove', { clientX: 300, clientY: 0 });
-    expect(state.sidebarPx).toBe(300);
-    expect(apply).toHaveBeenCalledWith('col', 300);
-    win._fire('mouseup');
-    expect(handle.classList.contains('dragging')).toBe(false);
-    expect(save).toHaveBeenCalledWith('sidebarPx', 300);
-    expect(win._has('mousemove')).toBe(false);
-  });
-  it('col: startDrag no longer reads ctx.scale — a stray scale is ignored, width follows clientX natively', () => {
-    const win = fakeWin();
-    const handle = document.createElement('div');
-    const state = { sidebarPx: 0 };
-    const apply = vi.fn();
-    const ctx = { win, state, apply, save: vi.fn(), rectFor: () => ({}), scale: () => 1.2 };
-    startDrag({ preventDefault: vi.fn(), currentTarget: handle }, 'col', ctx);
-    win._fire('mousemove', { clientX: 360, clientY: 0 });
-    expect(state.sidebarPx).toBe(360); // native clientX, ctx.scale ignored
-    expect(apply).toHaveBeenCalledWith('col', 360);
-  });
   it('sideRow: updates sideSplitPct + persists', () => {
     const { win, state, save } = harness('sideRow');
     win._fire('mousemove', { clientX: 0, clientY: 50 });
@@ -136,7 +106,7 @@ describe('startDrag', () => {
     const handle = document.createElement('div');
     const ev = { preventDefault: vi.fn(), currentTarget: handle };
     const ctx = { state: {}, apply: vi.fn(), save: vi.fn(), rectFor: () => ({ top: 0, bottom: 1 }) };
-    startDrag(ev, 'col', ctx);
+    startDrag(ev, 'sideRow', ctx);
     expect(handle.classList.contains('dragging')).toBe(true);
     window.dispatchEvent(new Event('mouseup')); // exercises the real window onUp
   });
diff --git a/tests/unit/state.test.ts b/tests/unit/state.test.ts
index 861443c4..1f3c899b 100644
--- a/tests/unit/state.test.ts
+++ b/tests/unit/state.test.ts
@@ -209,6 +209,10 @@ describe('createState', () => {
     expect(s.expanded.value.size).toBe(0);
     expect(s.libraryName.value).toBe(DEFAULT_LIBRARY_NAME);
     expect(s.libraryDirty.value).toBe(false);
+    // #487 phase 3: each lower-navigation section keeps its own filter slot —
+    // both start empty, and (unlike the old single `libraryFilter` string)
+    // neither is ever cleared by the other switching.
+    expect(s.lowerNavigationFilters).toEqual({ library: '', history: '' });
     // #287 W4: no aggregate loaded yet — `dashboard` starts null;
     // `loadWorkspaceOnBoot` (app.ts's async boot step) projects the real
     // aggregate onto both after this synchronous constructor. `workspaceId`
@@ -318,8 +322,11 @@ describe('createState — left navigation preferences (#487)', () => {
   it('clamps an out-of-range drawer width into the drawer own band', () => {
     // Not the wide sidebar's [180, 420]: a drawer wider than the wide threshold
     // is unreachable, because a drag that far right converts to the sidebar.
+    // The floor is 180, not the fold threshold (140) — #487 phase 3's
+    // real-browser check raised it to match the wide sidebar's own floor (see
+    // `core/left-nav-layout.ts`'s `clampDrawerWidthPx`).
     expect(createState(reader({ [KEYS.leftNavDrawerPx]: '9999' })).leftNavDrawerPx).toBe(260);
-    expect(createState(reader({ [KEYS.leftNavDrawerPx]: '0' })).leftNavDrawerPx).toBe(140);
+    expect(createState(reader({ [KEYS.leftNavDrawerPx]: '0' })).leftNavDrawerPx).toBe(180);
   });
 
   it('keeps the wide width on the ONE preference key, with no second owner', () => {
diff --git a/tests/unit/workbench-session.test.ts b/tests/unit/workbench-session.test.ts
index e21c9664..2223b2bf 100644
--- a/tests/unit/workbench-session.test.ts
+++ b/tests/unit/workbench-session.test.ts
@@ -89,7 +89,6 @@ function makeState(over: Partial<WorkbenchStateSlice> = {}): WorkbenchStateSlice
     forceExplain: false,
     resultRowLimit: 500,
     serverVersion: null,
-    sidePanel: signal('saved'),
     isMobile: signal(false),
     mobileView: signal('editor'),
     hasSelection: signal(false),
@@ -103,7 +102,7 @@ function makeState(over: Partial<WorkbenchStateSlice> = {}): WorkbenchStateSlice
 function makeHooks(over: Partial<WorkbenchHooks> = {}): WorkbenchHooks {
   return {
     renderResults: vi.fn(),
-    renderSavedHistory: vi.fn(),
+    renderHistorySection: vi.fn(),
     cancelSchemaGraph: vi.fn(),
     loadSchema: vi.fn(),
     recordHistory: vi.fn(),
@@ -843,11 +842,11 @@ describe('createWorkbenchSession: runScript()', () => {
     await session.runScript(['SELECT 1'], 'SELECT 1');
     expect(h.hooks.recordBoundParams).not.toHaveBeenCalled();
     expect(h.state.history).toEqual([]);
-    expect(h.hooks.renderSavedHistory).not.toHaveBeenCalled();
+    expect(h.hooks.renderHistorySection).not.toHaveBeenCalled();
   });
 
-  it('a clean run records one script history entry, and repaints History when open', async () => {
-    const h = makeHarness({ state: { sidePanel: signal('history') } });
+  it('a clean run records one script history entry, and repaints History unconditionally', async () => {
+    const h = makeHarness();
     h.execFakes.executeScript.mockImplementation(async (req: ScriptExecutionRequest) => {
       const entry = { sql: 'SELECT 1', status: 'rows' as const, columns: [], rows: [], truncated: false, preview: '', ms: 5 };
       req.onStatementResult(0, entry);
@@ -857,12 +856,21 @@ describe('createWorkbenchSession: runScript()', () => {
     await session.runScript(['SELECT 1'], 'SELECT 1; SELECT 1;');
     expect(h.state.history).toHaveLength(1);
     expect(h.state.history[0].sql).toBe('SELECT 1; SELECT 1;');
-    expect(h.hooks.renderSavedHistory).toHaveBeenCalled();
+    expect(h.hooks.renderHistorySection).toHaveBeenCalled();
     expect(h.hooks.saveJSON).toHaveBeenCalled();
   });
 
-  it('a clean run does not repaint History when a different side panel is open', async () => {
-    const h = makeHarness({ state: { sidePanel: signal('saved') } });
+  // #487 phase 3 regression test: History used to skip its repaint entirely
+  // whenever Library ('saved') was the exposed side panel, leaving History's
+  // content stale until some unrelated repaint happened to fire (which, for
+  // History, never does — `state.history` is a plain array, not part of any
+  // reactive effect). The fix makes this call unconditional — and #487 phase 3
+  // step 4 later confirmed `WorkbenchStateSlice.sidePanel` unread by this
+  // session's own logic and removed the field entirely, so there is no longer
+  // any side-panel state to vary here; this test just re-confirms the repaint
+  // fires on every clean run regardless.
+  it('a clean run repaints History unconditionally, independent of any side-panel state', async () => {
+    const h = makeHarness();
     h.execFakes.executeScript.mockImplementation(async (req: ScriptExecutionRequest) => {
       const entry = { sql: 'SELECT 1', status: 'ok' as const, ms: 5 };
       req.onStatementResult(0, entry);
@@ -871,7 +879,7 @@ describe('createWorkbenchSession: runScript()', () => {
     const session = createWorkbenchSession(h.deps);
     await session.runScript(['SELECT 1'], 'SELECT 1;');
     expect(h.state.history).toHaveLength(1);
-    expect(h.hooks.renderSavedHistory).not.toHaveBeenCalled();
+    expect(h.hooks.renderHistorySection).toHaveBeenCalled();
   });
 
   it('sets `cancelled` on the script result when aborted', async () => {