diff --git a/CHANGELOG.md b/CHANGELOG.md
index df881644..e1681fbe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,25 @@ auto-generated per-PR notes; this file is the curated, human-readable history.
   the file (in file order) instead of asking which single one to keep.
 
 ### Added
+- **A Dashboard is now a full-size main work surface, selected by stable id**
+  (#425). Opening one replaces the complete SQL editor and result/data-drawer
+  area — the left sidebar stays visible — and a new toolbar carries
+  **Back to query**, the Dashboard title, and the View/Edit switch. Returning
+  finds the Query surface exactly as it was: the same editor contents,
+  selection, scroll, active tab, result view, and editor/results split, because
+  the surface is hidden rather than rebuilt. A surface change no longer cancels
+  the query running in the editor, and Back/Forward between surfaces of one
+  workspace no longer tears the editor down. Any Dashboard in the workspace can
+  be opened by its stable id in View or Edit mode, with an optional navigation
+  target that focuses, scrolls to, and briefly highlights one panel tile (by
+  tile id, never query id) or one curated filter (by filter id). Selection is
+  session state — never persisted, cleared on sign-out, and re-validated against
+  every committed workspace, so a deleted or ambiguous selection falls back to
+  Query mode instead of silently switching to another Dashboard; URLs are
+  unchanged. Export Dashboard and Import Dashboard now address the selected
+  Dashboard rather than the workspace's first one; the favourite star, which
+  still drives panel membership through the first Dashboard, declines with an
+  explanation while a different one is open (it is rewired in #427).
 - Surface-aware keyboard shortcuts for SQL Browser and Dashboard (#417). The
   shared, platform-aware shortcut catalog now drives both help and dispatch;
   Dashboard gains refresh, View/Edit, and `G` navigation commands while stale
diff --git a/docs/ADR-0003-dashboard-viewing.md b/docs/ADR-0003-dashboard-viewing.md
index 3b5870b9..c60c172c 100644
--- a/docs/ADR-0003-dashboard-viewing.md
+++ b/docs/ADR-0003-dashboard-viewing.md
@@ -1,9 +1,9 @@
 # ADR-0003: Dashboard viewing and unified `/sql` routes
 
 - **Status:** Accepted; detached-snapshot decision superseded by #407 on
-  2026-07-23
-- **Date:** 2026-07-18; revised 2026-07-23
-- **Context tracking:** roadmap #68; #288, #302, #406, #407
+  2026-07-23; surface lifecycle amended by #425 on 2026-07-25 (see the addendum)
+- **Date:** 2026-07-18; revised 2026-07-23, 2026-07-25
+- **Context tracking:** roadmap #68; #288, #302, #406, #407, #425
 
 ## Context
 
@@ -89,6 +89,56 @@ records.
 - OAuth uses one `/sql` redirect URI. Callback cleanup retains route parameters
   while removing only OAuth callback parameters.
 
+## Addendum (#425, 2026-07-25): surfaces are hosts in one persistent shell
+
+The consequence above — "Dashboard route resources are disposed when switching
+surfaces or rebuilding the current surface; the Workbench shell likewise disposes
+signal and media listeners before remounting" — described a model where each
+surface owned the whole page and every switch was a dispose-and-remount. #425
+amends it, because a Dashboard must own the complete editor-plus-results area
+*while the left sidebar stays visible*, and returning to the Query surface must
+not reconstruct it.
+
+What changes:
+
+- One persistent shell (`ui/app-shell.ts`) owns `#root`: a header slot, the
+  sidebar, the mobile nav, and two sibling hosts — the query column
+  (`ui/workbench/workbench-shell.ts`) and the Dashboard. Exactly one host is
+  exposed; the hidden one keeps its DOM and its state and contributes no layout.
+- The query column is mounted once per signed-in workspace. A surface switch no
+  longer disposes it and no longer calls `workbench.destroy()` — that aborts the
+  in-flight request and issues `KILL QUERY`, and a presentation change must never
+  cancel the query in the editor. Real end-of-life events (a workspace switch,
+  workspace-not-found/loading, sign-out) still tear everything down, and every
+  path that replaces `#root` wholesale must forget the shell handle so the next
+  render re-mounts.
+- The Dashboard surface is still disposed when left: its viewer session, window
+  listeners, and pending focus work go, and its host is emptied — the host
+  outlives the surface, so a disposed Dashboard must not leave DOM behind.
+- Each surface still builds its own header, now into the shell's slot, so only
+  one header is ever mounted.
+
+Selected-Dashboard state (`application/main-surface.ts`) is session state: which
+Dashboard, in which mode, with an optional focus target, identified only by
+`DashboardDocumentV1.id` and never by collection position. It is not persisted —
+`StoredWorkspaceV3` gains no `activeDashboardId`/`defaultDashboardId` — is cleared
+on sign-out, and is re-validated against every committed workspace, falling back
+to Query mode rather than silently retargeting another Dashboard. It is also the
+single writer of the route's `surface`/`mode`, so the URL is always derived from
+it. **Routes are unchanged:** the URL still carries only `ws`, `surface`, and
+`mode`, which is why Back/Forward inside the Dashboard surface deliberately
+preserves the explicit selection instead of re-deriving one from the
+compatibility selector.
+
+Two consequences worth recording:
+
+- Edit mode renders the same single filter bar as View, so #425's "focus the
+  filter editor/control in Edit mode" collapses to one control per filter — not a
+  dropped requirement.
+- The schema tree is no longer refetched on a Dashboard→Workbench round trip
+  (`catalog.loadSchema()` moved to the shell's one-time mount). The #343
+  external-change refresh path still covers staleness.
+
 ## Alternatives considered
 
 - **Durable detached snapshots:** rejected because they silently diverge from
diff --git a/src/application/main-surface.ts b/src/application/main-surface.ts
new file mode 100644
index 00000000..aae05e19
--- /dev/null
+++ b/src/application/main-surface.ts
@@ -0,0 +1,137 @@
+// The main work surface's SESSION state (#425): which of the two mutually
+// exclusive surfaces — Query (SQL editor + result/data drawer) or Dashboard —
+// owns the right-hand work area, and, for a Dashboard, WHICH stored Dashboard
+// is selected, in which presentation mode, with an optional navigation focus
+// target.
+//
+// Deliberately session state, never persisted workspace content:
+// `StoredWorkspaceV3` carries no `activeDashboardId`/`defaultDashboardId`, and
+// a Dashboard is identified ONLY by its stable `DashboardDocumentV1.id` —
+// never by its position in `dashboards[]`. Sign-out and a workspace switch
+// therefore clear or re-validate the selection rather than migrating it.
+//
+// Pure: no DOM, no persistence, no globals. Lives in `src/application/` (not
+// `src/core/`) because it resolves against the workspace aggregate, and the
+// dependency direction is `workspace <- application <- UI`; `src/core/` must
+// never import `src/workspace/` (build/check-boundaries.mjs).
+
+import { findDashboardStrict, type WorkspaceDashboards } from '../workspace/workspace-dashboards.js';
+import type { SqlRoute } from '../core/sql-route.js';
+
+/** Where a caller wants navigation to land INSIDE the opened Dashboard. A tile
+ *  is addressed by its Dashboard-local TILE id (never the saved-query id it
+ *  renders); a curated filter by its filter-definition id. */
+export type DashboardFocusTarget =
+  | { kind: 'tile'; id: string }
+  | { kind: 'filter'; id: string };
+
+/** View is a presentation choice over the same live document, not an
+ *  authorization boundary (ADR-0003). */
+export type DashboardSurfaceMode = 'view' | 'edit';
+
+export type MainSurfaceState =
+  | { kind: 'query' }
+  | {
+    kind: 'dashboard';
+    dashboardId: string;
+    mode: DashboardSurfaceMode;
+    focus: DashboardFocusTarget | null;
+  };
+
+/** The one application-level Dashboard navigation request (#425). */
+export interface OpenDashboardRequest {
+  dashboardId: string;
+  mode: DashboardSurfaceMode;
+  focus?: DashboardFocusTarget;
+}
+
+/** The Query surface carries no parameters, so one frozen value serves every
+ *  transition to it — and identity comparison is a legitimate test for "we
+ *  fell back to Query mode". */
+export const QUERY_SURFACE: MainSurfaceState = Object.freeze({ kind: 'query' as const });
+
+/** `resolveOpenDashboard`'s outcome. `missing`/`duplicate` are reported through
+ *  the caller's diagnostic path and change NO state: opening a Dashboard must
+ *  never mutate anything, and an ambiguous id must never be resolved by a
+ *  guess. */
+export type OpenDashboardResolution =
+  | { status: 'ok'; surface: MainSurfaceState }
+  | { status: 'missing' }
+  | { status: 'duplicate' };
+
+/**
+ * Resolve an open request against the ACTIVE workspace's Dashboard collection,
+ * by exact id. A `null` workspace (none loaded, or a corrupt/not-found route)
+ * resolves as `missing` — there is nothing to address an id against.
+ */
+export function resolveOpenDashboard(
+  workspace: WorkspaceDashboards | null, request: OpenDashboardRequest,
+): OpenDashboardResolution {
+  if (!workspace) return { status: 'missing' };
+  const lookup = findDashboardStrict(workspace, request.dashboardId);
+  if (lookup.status !== 'ok') return { status: lookup.status };
+  return {
+    status: 'ok',
+    surface: {
+      kind: 'dashboard',
+      dashboardId: request.dashboardId,
+      mode: request.mode,
+      focus: request.focus ?? null,
+    },
+  };
+}
+
+/**
+ * Re-validate a selection against committed truth. A selected Dashboard that
+ * was removed — or whose id became ambiguous — falls back to **Query** mode
+ * rather than silently retargeting to another Dashboard. Called after every
+ * committed workspace projection and after a workspace switch, which is exactly
+ * what makes "switching workspaces clears the selection unless the new
+ * workspace contains the same explicitly selected id" fall out for free.
+ */
+export function reconcileMainSurface(
+  surface: MainSurfaceState, workspace: WorkspaceDashboards | null,
+): MainSurfaceState {
+  if (surface.kind === 'query') return surface;
+  if (workspace && findDashboardStrict(workspace, surface.dashboardId).status === 'ok') return surface;
+  return QUERY_SURFACE;
+}
+
+/** The canonical `/sql` route for a surface. #425 leaves URLs unchanged: the
+ *  selected Dashboard id is session state and never appears in the URL, so the
+ *  route still carries only workspace + surface + mode. */
+export function mainSurfaceRoute(
+  surface: MainSurfaceState, workspaceKey: string | null,
+): SqlRoute {
+  return surface.kind === 'dashboard'
+    ? { surface: 'dashboard', workspaceKey, mode: surface.mode }
+    : { surface: 'workspace', workspaceKey };
+}
+
+/** The selected Dashboard id, or `null` in Query mode — the render target's
+ *  `dashboardId`, where `null` also covers "this workspace has no Dashboard
+ *  yet" and lands on the Create-dashboard placeholder. */
+export function selectedDashboardId(surface: MainSurfaceState): string | null {
+  return surface.kind === 'dashboard' ? surface.dashboardId : null;
+}
+
+/** True when an open request targets the ALREADY-selected Dashboard in the
+ *  already-active mode — the caller then keeps the live viewer session and only
+ *  applies the new focus target, so a repeated open never builds a duplicate
+ *  Dashboard session. */
+export function isSameDashboardSelection(
+  surface: MainSurfaceState, request: OpenDashboardRequest,
+): boolean {
+  return surface.kind === 'dashboard'
+    && surface.dashboardId === request.dashboardId
+    && surface.mode === request.mode;
+}
+
+/** Drop a consumed focus target, keeping the selection. Applied once the focus
+ *  has been delivered (or reported missing) so a later repaint — an external
+ *  workspace change, a style switch — cannot re-focus and re-highlight a tile
+ *  the user has since navigated away from. */
+export function withoutFocus(surface: MainSurfaceState): MainSurfaceState {
+  if (surface.kind !== 'dashboard' || surface.focus === null) return surface;
+  return { ...surface, focus: null };
+}
diff --git a/src/styles.css b/src/styles.css
index ad6bf967..f87fd805 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -500,6 +500,22 @@ body {
    instead of a brittle hard-coded viewport `top`. No effect on the desktop
    flex layout. */
 .main-row { flex: 1; display: flex; min-height: 0; overflow: hidden; position: relative; }
+/* #425: the persistent shell mounts the surface-specific header into a stable
+   slot so it can be replaced without rebuilding the sidebar around it.
+   `display: contents` keeps `.app-header` ITSELF the direct child of `#root`'s
+   flex column — an ordinary block wrapper would become the flex item instead and
+   lose the header's own `flex-shrink: 0`, letting it squash. */
+.app-header-slot { display: contents; }
+/* #425: the two mutually exclusive main work-surface hosts — the Query surface
+   (SQL editor + result/data drawer) and the Dashboard — as siblings of the
+   sidebar, so a Dashboard owns the whole right-hand work area while the sidebar
+   stays visible. Exactly one is exposed at a time; `[hidden]` needs the explicit
+   override because a class rule's `display: flex` beats the UA stylesheet's bare
+   `[hidden]` (the same reason `.document-editor[hidden]` carries one). */
+.query-host, .dashboard-host {
+  flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
+}
+.query-host[hidden], .dashboard-host[hidden] { display: none !important; }
 .sidebar {
   display: flex; flex-direction: column;
   background: var(--bg-side);
@@ -2474,11 +2490,23 @@ table.res-table tbody tr:hover td.idx { background: var(--bg-hover); }
   /* ---- 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. */
-  .main-row[data-mobile-view="tables"] .workbench { display: none; }
+  /* #425: hide the HOST, not just `.workbench` inside it — the host is the
+     flex:1 sibling of the sidebar now, so leaving it laid out would fight the
+     full-width sidebar below. */
+  .main-row[data-mobile-view="tables"] .query-host { display: none; }
   .main-row[data-mobile-view="tables"] .sidebar { display: flex; width: 100% !important; }
   /* Editor / Results → sidebar hidden, workbench fills. */
   .main-row[data-mobile-view="editor"] .sidebar,
   .main-row[data-mobile-view="results"] .sidebar { display: none; }
+  /* #425: a Dashboard is full-bleed on mobile (#248) — the sidebar and the
+     bottom Tables/Editor/Results nav belong to the Query surface, and its three
+     `data-mobile-view` values say nothing about a Dashboard. Hiding both keeps
+     the pre-#425 mobile Dashboard presentation exactly as it was, and takes
+     precedence over the `[data-mobile-view="tables"]` sidebar rule above by
+     being later with equal specificity. */
+  .main-row[data-surface="dashboard"] .sidebar,
+  .main-row[data-surface="dashboard"] .col-resize { display: none; }
+  .main-row[data-surface="dashboard"] ~ .mobile-nav { display: none; }
   /* Editor view: query tabs + toolbar + editor; hide the results half. */
   .main-row[data-mobile-view="editor"] .results-region,
   .main-row[data-mobile-view="editor"] .editor-results-split { display: none; }
@@ -2536,11 +2564,36 @@ table.res-table tbody tr:hover td.idx { background: var(--bg-hover); }
   .docs-panel { width: 100vw !important; min-width: 0; }
 }
 
-/* ── Dashboard (#149 D1 / #407) ─────────────────────────────────────────────
-   The `/sql?surface=dashboard` surface: sticky header + responsive tiles. */
-/* The dashboard's own scroll container: #root is a fixed overflow:hidden flex
-   column (the workbench shell), so the dashboard fills it and scrolls itself. */
+/* ── Dashboard (#149 D1 / #407 / #425) ──────────────────────────────────────
+   The Dashboard main work surface: sticky toolbars + responsive tiles. */
+/* The dashboard's own scroll container. #425: it now fills `.dashboard-host` —
+   the flex:1 sibling of the sidebar inside `.main-row` — rather than all of
+   `#root`, so a Dashboard owns the whole editor-plus-results area while the
+   sidebar stays visible. The host is itself a `min-height:0` flex column, so
+   `height:100%` here still resolves and the page still scrolls itself. */
 .dash-page { height: 100%; overflow-y: auto; overflow-x: hidden; background: var(--bg); }
+/* #425 — the Dashboard surface's own toolbar row: Back to query, the Dashboard
+   title, then the View/Edit switch pushed right by the shared spacer. */
+.dash-surface-toolbar { gap: 8px; }
+.dash-surface-title {
+  margin: 0; font-size: 13px; font-weight: 600; color: var(--fg);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+/* The title is the ONLY control in this row allowed to shrink, so a long
+   Dashboard name ellipsizes instead of pushing View/Edit off a narrow screen.
+   Two-class specificity is required to beat `.dash-toolbar > * { flex-shrink: 0 }`
+   below, which correctly pins every other toolbar child. */
+.dash-surface-toolbar .dash-surface-title { flex: 0 1 auto; min-width: 0; }
+.dash-back-to-query { flex-shrink: 0; }
+/* #425 — the temporary navigation highlight marking the tile or filter a caller
+   navigated to, cleared after a bounded interval or on the next user interaction.
+   A `box-shadow` ring, NOT an outline: an element has exactly one outline, so an
+   outline here would replace the focus ring rather than sit alongside it, and
+   #425 asks for a highlight in ADDITION to the normal focus indicator. */
+.is-nav-target {
+  box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent);
+  border-radius: 6px;
+}
 /* The one-row application header and optional filter toolbar share one sticky
    top bar so Dashboard controls stay visible while the grid scrolls. */
 .dash-topbar { position: sticky; top: 0; z-index: 40; background: var(--bg-header); }
diff --git a/src/ui/app-header.ts b/src/ui/app-header.ts
index 88613f8a..43f081b3 100644
--- a/src/ui/app-header.ts
+++ b/src/ui/app-header.ts
@@ -26,20 +26,17 @@ export function routeButton(
 
 function surfaceSwitch(app: App): HTMLElement {
   const dashboard = app.sqlRoute.surface === 'dashboard';
-  // The header stays mounted when File → New workspace swaps the active
-  // aggregate. Resolve at click time so its route never retains the workspace
-  // key from the header's original render.
-  const workspaceKey = (): string => app.currentWorkspace?.key ?? app.state.workspaceKey;
+  // #425: both controls go through the main-surface navigation API rather than
+  // writing a route themselves, so the session surface stays the ONE writer of
+  // the URL. The Dashboard side has no chooser yet (#426 adds the tree), so it
+  // opens the compatibility Dashboard by id. Resolved at click time — the header
+  // stays mounted when File → New workspace swaps the active aggregate.
   return h('div', {
     class: 'editor-mode-switch app-surface-switch',
     role: 'group', 'aria-label': 'Application surface',
   },
-  routeButton('SQL Browser', !dashboard, () => {
-    void app.navigateSqlRoute({ surface: 'workspace', workspaceKey: workspaceKey() }, 'push');
-  }),
-  routeButton('Dashboard', dashboard, () => {
-    void app.navigateSqlRoute({ surface: 'dashboard', workspaceKey: workspaceKey(), mode: 'edit' }, 'push');
-  }));
+  routeButton('SQL Browser', !dashboard, () => { app.showQuerySurface(); }),
+  routeButton('Dashboard', dashboard, () => { app.showDashboardSurface('edit'); }));
 }
 
 /** The one application header used by both Workbench and Dashboard. */
diff --git a/src/ui/app-shell.ts b/src/ui/app-shell.ts
new file mode 100644
index 00000000..69cfbbad
--- /dev/null
+++ b/src/ui/app-shell.ts
@@ -0,0 +1,252 @@
+// The persistent application frame (#425 follow-up prep) — the header slot,
+// the sidebar (schema + saved/library panes and their splitters), and the
+// mobile bottom-nav, plus the reactive effects that repaint them and the
+// catalog bootstrap-load tail. Split out of `ui/workbench/workbench-shell.ts`'s
+// former `mountWorkbenchShell` body so a later commit can keep this frame
+// mounted while swapping only the workbench column for a Dashboard host —
+// `queryHost`/`dashboardHost` below are the two swappable slots. Every line
+// is moved byte-identically (ported originally from `app.ts`'s own
+// `renderApp` — #276 Phase 5); see the individual comments for their
+// original rationale, carried over unchanged.
+//
+// This module does NOT build the header itself: `ui/app.ts`'s `renderApp`
+// calls `buildAppHeader(app)` and hands the result to `setHeader()` AFTER
+// both this shell and the workbench shell are mounted. That means the
+// `app.dom = {}` reset below still happens exactly once, before any header
+// exists (satisfying every other module that reaches into `app.dom.*`
+// directly) — but it also means the `libraryName`/`libraryDirty` effect
+// below can observe a null `app.dom.libraryTitle`/`dashboardNav` on its
+// first, registration-time run, well before `setHeader` ever populates them.
+// `renderLibraryTitle`/`renderDashboardNav` (file-menu.ts) are already
+// null-safe for exactly this reason; the effect re-runs (and paints for
+// real) on the next `libraryName`/`libraryDirty` change, by which point
+// `setHeader` has long since run.
+//
+// `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/renderDashboardNav all
+// still take the full `App`), and the `app.dom` reset + population other
+// modules read `app.dom.*` off of directly.
+
+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 { renderSchema } from './schema.js';
+import { renderSavedHistory } from './saved-history.js';
+import { renderLibraryTitle, renderDashboardNav } from './file-menu.js';
+import type { DragCtx, DragRect, DragStartEvent, SplitterAxis } from './splitters.js';
+import { startDrag } from './splitters.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';
+
+/** `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/renderDashboardNav), and the
+   *  `app.dom` reset + population (other modules read `app.dom.*`
+   *  directly — see the header comment). */
+  app: App;
+  root: Element | null;
+  document: Document;
+  state: State;
+  catalog: Pick<SchemaCatalogService, 'loadSchema' | 'loadReference'>;
+  prefs: Pick<AppPreferences, 'save'>;
+  matchMedia: ((query: string) => MediaQueryList) | null;
+  updateBanner(): void;
+  startDrag: typeof startDrag;
+}
+
+/** Which main work surface owns the right-hand work area. */
+export type SurfaceHostKind = 'query' | 'dashboard';
+
+/** `mountAppShell`'s return value — the two swappable hosts, the header slot's
+ *  setter, and the visibility switch between them. */
+export interface AppShellHandle {
+  /** Replace the header slot's content (each surface builds its own header). */
+  setHeader(header: Element): void;
+  /** Host the workbench column (SQL editor + result/data drawer) mounts into. */
+  queryHost: HTMLElement;
+  /** Host a Dashboard mounts into. */
+  dashboardHost: HTMLElement;
+  /**
+   * Expose exactly one host (#425). The hidden one keeps its DOM and its state —
+   * that is what preserves editor contents, selection, scroll, the active tab,
+   * the result view, and the result-drawer size across a Dashboard round trip —
+   * but contributes no layout, so a Dashboard genuinely owns the whole
+   * right-hand work area and no invisible result drawer consumes space.
+   *
+   * Also mirrored onto `.main-row[data-surface]` for the mobile rules, which
+   * need to drop the sidebar and the bottom nav for a full-bleed Dashboard.
+   */
+  showHost(kind: SurfaceHostKind): void;
+  dispose(): void;
+}
+
+/** Build the persistent frame (header slot, sidebar, mobile nav) and mount
+ *  it. Ported byte-identically from `mountWorkbenchShell`'s former body
+ *  (#276 Phase 5 → this split) — every ordering comment below is original. */
+export function mountAppShell(deps: AppShellDeps): AppShellHandle {
+  const {
+    app, root, document: doc, state, catalog, prefs, matchMedia, updateBanner,
+    startDrag: doStartDrag,
+  } = deps;
+  doc.documentElement.setAttribute('data-theme', state.theme);
+  doc.documentElement.setAttribute('data-density', state.density);
+
+  app.dom = {};
+  // The header itself is built by the caller (`ui/app.ts`'s `renderApp`) and
+  // spliced in via `setHeader()` below — this slot is the stable mount point
+  // so the header can be replaced without rebuilding the sidebar around it.
+  const headerSlot = h('div', { class: 'app-header-slot' });
+
+  app.dom.schemaSearchInput = h('input', {
+    type: 'text', placeholder: 'Search tables, columns…',
+    oninput: (e: Event) => { state.schemaFilter.value = (e.target as HTMLInputElement).value; },
+  });
+  app.dom.schemaList = h('div', { class: 'schema-list' });
+  const schemaPane = h('div', { class: 'side-pane schema-pane', style: { height: state.sideSplitPct + '%', flexShrink: '0', minHeight: '0' } },
+    h('div', { class: 'schema-search' }, h('div', { class: 'search-wrap' }, Icon.search(), app.dom.schemaSearchInput)),
+    app.dom.schemaList);
+
+  app.dom.savedTabsRow = h('div', { class: 'side-tabs' });
+  app.dom.savedSearch = h('div', { class: 'saved-search' });
+  app.dom.savedList = h('div', { class: 'saved-list' });
+  const savedPane = h('div', { class: 'side-pane saved-pane', style: { flex: '1', minHeight: '0' } }, app.dom.savedTabsRow, app.dom.savedSearch, app.dom.savedList);
+
+  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() : {});
+  const dragCtx: DragCtx = {
+    state,
+    rectFor,
+    apply: (axis, value) => {
+      if (axis === 'col') sidebar.style.width = value + 'px';
+      else 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) });
+  // Mobile Tables view (#126): a Schema | Library segmented control at the top of
+  // the sidebar. CSS hides it above the breakpoint; below it, it swaps which pane
+  // shows (the sidebar's data-mobile-tab drives both the active-button style and
+  // the pane visibility — no JS effect needed for the active state).
+  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, 'Schema')),
+    h('button', { class: 'mseg-btn', 'data-seg': 'library', onclick: () => { state.mobileTab.value = 'library'; } }, Icon.layers(), h('span', null, 'Queries')));
+  sidebar.append(app.dom.mobileSegmented, schemaPane, app.dom.sideSplit, savedPane);
+  const sideHandle = h('div', { class: 'col-resize', onmousedown: (e: DragStartEvent) => doStartDrag(e, 'col', dragCtx) });
+
+  app.dom.banner = h('div', { class: 'auth-banner', style: { display: 'none' } });
+  // The workbench column's mount point (#425 follow-up prep). Its sizing lives
+  // in styles.css alongside `.dashboard-host` (static layout, not state-driven
+  // like `sidebar.style.width`), including the `[hidden]` override a
+  // `display: flex` class rule needs to actually hide.
+  const queryHost = h('div', { class: 'query-host' });
+  // The Dashboard host (#425) — a SIBLING of `queryHost`, so switching surfaces
+  // 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);
+
+  // 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
+  // effect below) picks which of sidebar / editor / results fills the screen.
+  // The Results tab carries a live badge (row count, or ● while a query streams).
+  // `mobileBadge` crosses shells deliberately: this element is app-shell-owned,
+  // but its text is written by a workbench-owned effect (`attachShell`'s
+  // `setMobileBadge`, over in workbench-shell.ts) — the mobile nav and the
+  // query results it summarizes are both singletons of the same render pass,
+  // so the badge stays here rather than duplicating the mobile-nav markup.
+  app.dom.mobileBadge = h('span', { class: 'mnav-badge' });
+  const navBtn = (view: string, icon: SVGElement, label: string, extra?: HTMLElement): HTMLButtonElement => h('button', {
+    class: 'mobile-nav-btn', 'data-view': view, onclick: () => { state.mobileView.value = view as 'tables' | 'editor' | 'results'; },
+  }, h('span', { class: 'mnav-ic' }, icon, extra || null), h('span', { class: 'mnav-label' }, label));
+  app.dom.mobileNav = h('div', { class: 'mobile-nav' },
+    navBtn('tables', Icon.database(), 'Tables'),
+    navBtn('editor', Icon.code(), 'Editor'),
+    navBtn('results', Icon.table2(), 'Results', app.dom.mobileBadge));
+
+  root!.replaceChildren(headerSlot, app.dom.banner, mainRow, app.dom.mobileNav);
+
+  const disposers: (() => void)[] = [];
+  // 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
+  // also runs once now for the initial paint.
+  disposers.push(effect(() => {
+    state.schema.value;
+    state.schemaError.value;
+    state.schemaFilter.value;
+    state.expanded.value;
+    // Crossing the mobile breakpoint (#126) adds/removes each row's drag source
+    // and hover title, so repaint the tree when isMobile flips.
+    state.isMobile.value;
+    renderSchema(app);
+  }));
+  // The schema/auth-failure banner reflects schemaError (a separate surface).
+  disposers.push(effect(() => {
+    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.
+  disposers.push(effect(() => {
+    state.sidePanel.value;
+    renderSavedHistory(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).
+  disposers.push(effect(() => {
+    state.libraryName.value;
+    state.libraryDirty.value;
+    renderLibraryTitle(app);
+    // #302: the "Dashboard →" control's visibility tracks Dashboard presence,
+    // which changes alongside these signals (star toggle / import / replace all
+    // flip libraryDirty on their way through a commit).
+    renderDashboardNav(app);
+  }));
+  // Mobile mode (#126): mirror the viewport width into `isMobile` (drives the
+  // schema tree's drag/hover affordances, the results drop target, and the
+  // auto-navigation in the action wrappers) via the injected matchMedia seam.
+  // When the platform has no matchMedia the app stays in desktop JS mode — the
+  // mobile CSS still applies, just without JS branching.
+  const mq = matchMedia && matchMedia('(max-width: ' + MOBILE_BREAKPOINT_PX + 'px)');
+  const onMobileChange = (e: MediaQueryListEvent): void => { state.isMobile.value = e.matches; };
+  if (mq) {
+    state.isMobile.value = mq.matches;
+    mq.addEventListener('change', onMobileChange);
+  }
+  // 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; }));
+  disposers.push(effect(() => { sidebar.dataset.mobileTab = state.mobileTab.value; }));
+  catalog.loadSchema();
+  catalog.loadReference();
+
+  return {
+    setHeader: (header: Element) => { headerSlot.replaceChildren(header); },
+    queryHost,
+    dashboardHost,
+    showHost: (kind) => {
+      queryHost.hidden = kind !== 'query';
+      dashboardHost.hidden = kind !== 'dashboard';
+      mainRow.dataset.surface = kind;
+    },
+    dispose: () => {
+      for (const dispose of disposers) dispose();
+      mq?.removeEventListener('change', onMobileChange);
+    },
+  };
+}
diff --git a/src/ui/app.ts b/src/ui/app.ts
index 1dff6df8..ba332c80 100644
--- a/src/ui/app.ts
+++ b/src/ui/app.ts
@@ -14,7 +14,7 @@ import {
 } from '../state.js';
 import type { QueryTab, AppState, SpecValidationService } from '../state.js';
 import {
-  resolveCompatibilityDashboard, withCompatibilityDashboard,
+  findDashboard, replaceDashboard, resolveCompatibilityDashboard, withCompatibilityDashboard,
 } from '../workspace/workspace-dashboards.js';
 import type { SavedQueryV2, StoredWorkspaceV3 } from '../generated/json-schema.types.js';
 import { splitStatements } from '../core/sql-split.js';
@@ -43,6 +43,7 @@ import { batch } from '@preact/signals-core';
 import { renderResults } from './results.js';
 import type { Result, QueryResult, ScriptResult, ScriptEntry } from './results.js';
 import { disposeDashboardSurface, renderDashboard } from './dashboard.js';
+import type { DashboardRenderTarget } from './dashboard.js';
 import { toggleThemeDom } from './theme-toggle.js';
 import { openSchemaView } from './explain-graph.js';
 import type { SchemaLineageNode, DetachedGraphApp } from './explain-graph.js';
@@ -77,6 +78,11 @@ import { createExportService } from '../application/export-service.js';
 import type { ExportSink, FileHandleLike, DirectoryHandleLike } from '../application/export-service.js';
 import { createSchemaGraphSession, SchemaGraphAuthRequiredError } from '../application/schema-graph-session.js';
 import { createAppPreferences } from '../application/app-preferences.js';
+import {
+  QUERY_SURFACE, isSameDashboardSelection, mainSurfaceRoute, reconcileMainSurface,
+  resolveOpenDashboard, selectedDashboardId, withoutFocus,
+} from '../application/main-surface.js';
+import type { DashboardSurfaceMode, MainSurfaceState } from '../application/main-surface.js';
 import { createWorkspaceRepository } from '../workspace/workspace-repository.js';
 import type { WorkspaceLoadResult } from '../workspace/workspace-repository.js';
 import { createIndexedDbWorkspaceStore } from '../workspace/indexeddb-workspace-store.js';
@@ -95,6 +101,9 @@ import { createWorkbenchSession } from './workbench/workbench-session.js';
 import { createQueryDocumentSession } from '../application/query-document-session.js';
 import { createSavedQueryService } from '../application/saved-query-service.js';
 import { mountWorkbenchShell } from './workbench/workbench-shell.js';
+import { mountAppShell } from './app-shell.js';
+import type { AppShellHandle } from './app-shell.js';
+import { buildAppHeader } from './app-header.js';
 
 /** Optional globals a plain browser page (or the CM6/Chart/dagre UMD bundles a
  *  `<script>` tag might attach) can carry that aren't in the standard `Window`
@@ -264,13 +273,32 @@ export function createApp(env: CreateAppEnv = {}): App {
     dialog?.close();
   };
   app.surfaceCommands = null;
+  // #425: the main work surface's SESSION state — Query, or one Dashboard
+  // selected by stable id. Never persisted (see application/main-surface.ts).
+  app.mainSurface = QUERY_SURFACE;
+  // Every surface transition — mount, teardown, or sign-out — advances the
+  // renderer generation so an obsolete async callback (a late Dashboard wave,
+  // a pending focus target) can finish its durable work without settling
+  // against a replacement renderer. Bumped on the TRANSITION, not as a side
+  // effect of a mount, because a mount can be skipped when the host is already
+  // live (#425's preserved Query surface).
+  const advanceSurfaceGeneration = (): void => {
+    surfaceGeneration += 1;
+    app.surfaceCommands = null;
+  };
   app.captureSurfaceGeneration = () => surfaceGeneration;
   app.isSurfaceGenerationCurrent = (generation) => generation === surfaceGeneration;
   app.refreshCurrentSurfaceAfterStale = (generation, committed = false) => {
     if (generation === surfaceGeneration) return true;
     const routeKey = app.sqlRoute.workspaceKey;
-    if (committed && app.workspaceRouteStatus === 'ready' && app.currentWorkspace
-      && (routeKey === null || routeKey === app.currentWorkspace.key)) {
+    // #425: `conn.isSignedIn()` is load-bearing, not defensive. Sign-out now
+    // advances the surface generation (so a late Dashboard callback can't settle
+    // against a replacement renderer) but deliberately leaves the projected
+    // workspace in place for the next sign-in — which would otherwise let a write
+    // that resolves just after sign-out re-mount the whole signed-in shell OVER
+    // the login screen, with no credentials.
+    if (committed && app.conn.isSignedIn() && app.workspaceRouteStatus === 'ready'
+      && app.currentWorkspace && (routeKey === null || routeKey === app.currentWorkspace.key)) {
       app.renderCurrentSurface();
     }
     return false;
@@ -410,6 +438,22 @@ export function createApp(env: CreateAppEnv = {}): App {
   const renderLoginApp = (msg?: string): void => {
     app.closeShortcutDialog();
     resetShortcutChord(app);
+    // #425: login replaces `#root` wholesale, so the persistent shell must be
+    // disposed AND forgotten here — otherwise its effects keep repainting a
+    // detached sidebar, and the next sign-in would skip re-mounting a shell that
+    // is no longer in the document, leaving a blank page.
+    //
+    // The Dashboard surface goes here too, not just in `signOut`: this is the ONE
+    // place that knows the login screen is now showing, and `onAuthLost` (a 401 or
+    // an expired token) arrives here without passing through `signOut`. Left
+    // alive, a mounted Dashboard keeps its window listeners, its viewer session,
+    // and a generation-matching `surfaceCommands` — so its refresh and style
+    // shortcuts stay dispatchable FROM the login screen, executing tile queries
+    // against a dead session. Advancing the generation is what closes that port.
+    disposeDashboardSurface();
+    advanceSurfaceGeneration();
+    app.mainSurface = QUERY_SURFACE;
+    disposeShell();
     renderLogin(app as App & { root: Element }, msg);
   };
   // The auth + config + ClickHouse connection lifecycle (#276 Phase 2) — OAuth
@@ -458,6 +502,9 @@ export function createApp(env: CreateAppEnv = {}): App {
     // alongside the catalog reset, before the login screen renders.
     closeDocPane(app);
     conn.signOut();
+    // #425: the Dashboard teardown, the surface-generation bump and the
+    // main-surface reset live in `renderLoginApp` — the one place that knows the
+    // login screen is showing — so `onAuthLost` gets them as well.
     renderLoginApp();
   };
   app.showLogin = (msg) => renderLoginApp(msg);
@@ -1570,33 +1617,98 @@ export function createApp(env: CreateAppEnv = {}): App {
   // `runSlotTile`), the same path run() and the detached Data view use; the
   // former bespoke `runTile`/`queryDashboardTile`/`parseJsonResult` machinery
   // was retired so cap/settings fixes can't apply to only one path.
+  // #425: the persistent shell and the query column are each mounted ONCE per
+  // signed-in workspace and survive every surface switch — that is what preserves
+  // the editor's contents, selection and scroll, the active tab, the result view,
+  // and the result-drawer size across a Dashboard round trip. Only a real
+  // end-of-life event (a workspace switch, workspace-not-found/loading, or
+  // sign-out) tears them down; `shell === null` is then the signal to rebuild,
+  // and it MUST be nulled by everything that replaces `#root` wholesale, or the
+  // next render would skip a mount that is no longer in the document.
+  let shell: AppShellHandle | null = null;
   let disposeWorkbenchMount: (() => void) | null = null;
   const ignoreExternalWorkspaceChange = (): void => {};
-  app.renderDashboard = () => {
+  const ensureShell = (): AppShellHandle => {
+    shell ??= mountAppShell({
+      app,
+      root: app.root,
+      document: doc,
+      state: app.state,
+      catalog,
+      prefs,
+      matchMedia: app.matchMedia,
+      updateBanner: app.updateBanner,
+      startDrag,
+    });
+    if (!disposeWorkbenchMount) disposeWorkbenchMount = renderApp(app, { startDrag }, shell.queryHost);
+    return shell;
+  };
+  const disposeShell = (): void => {
+    disposeWorkbenchMount?.();
+    disposeWorkbenchMount = null;
+    shell?.dispose();
+    shell = null;
+  };
+  // What the Dashboard surface renders THIS pass. `dashboardId` is `null` only
+  // for the legacy empty-collection entry point, which lands on the Dashboard's
+  // own "Create dashboard" state; its mode then comes from the route, since there
+  // is no selection to carry one.
+  const dashboardRenderTarget = (mounted: AppShellHandle): DashboardRenderTarget => {
+    const surface = app.mainSurface;
+    const routeMode = app.sqlRoute.surface === 'dashboard' ? app.sqlRoute.mode : 'edit';
+    const target: DashboardRenderTarget = {
+      host: mounted.dashboardHost,
+      dashboardId: surface.kind === 'dashboard' ? surface.dashboardId : null,
+      mode: surface.kind === 'dashboard' ? surface.mode : routeMode,
+      focus: surface.kind === 'dashboard' ? surface.focus : null,
+      setHeader: (header) => mounted.setHeader(header),
+    };
+    // #425: a focus target is delivered ONCE. Every later repaint of the same
+    // selection — an external commit, a style switch, a stale-write refresh —
+    // re-reads this target, so leaving the request on the selection would yank
+    // focus back to that tile (and re-flash its highlight) long after the user
+    // navigated elsewhere.
+    app.mainSurface = withoutFocus(surface);
+    return target;
+  };
+  // Everything a transition BETWEEN the two surfaces must clear, and nothing
+  // more. Notably absent: `workbench.destroy()`. It aborts the in-flight request
+  // and issues KILL QUERY, and a surface change must never execute or cancel the
+  // currently open editor query (#425) — it belongs to the teardown paths below.
+  const beginSurfaceTransition = (): void => {
     app.closeShortcutDialog();
     resetShortcutChord(app);
-    surfaceGeneration += 1;
-    app.surfaceCommands = null;
+    advanceSurfaceGeneration();
     closeAnchoredPopovers();
     disposeFileMenuOverlays(app);
-    disposeWorkbenchMount?.();
-    disposeWorkbenchMount = null;
-    workbench.destroy();
-    return renderDashboard(app);
+    // The doc pane mounts on `document.body`, so it would otherwise float over
+    // the surface that replaced the one it was opened from. (The cell-detail
+    // drawer is modal and traps the keyboard, so no surface control is reachable
+    // while it is open — and it owns a keyboard-owner release that only its own
+    // close path runs, which is why this does not reach in and remove it.)
+    closeDocPane(app);
+  };
+  app.renderDashboard = () => {
+    beginSurfaceTransition();
+    const mounted = ensureShell();
+    // Exposed BEFORE rendering: the grafana-grid engine measures its host's real
+    // width immediately after mount, and a hidden host measures 0 — which
+    // silently pins every Dashboard to the widest 12-column breakpoint. happy-dom
+    // always reports 0, so only a real browser can catch a regression here.
+    mounted.showHost('dashboard');
+    return renderDashboard(app, dashboardRenderTarget(mounted));
   };
   const disposeCurrentSurface = (): void => {
     app.closeShortcutDialog();
     resetShortcutChord(app);
-    surfaceGeneration += 1;
-    app.surfaceCommands = null;
+    advanceSurfaceGeneration();
     for (const control of app.root?.querySelectorAll<HTMLButtonElement | HTMLInputElement | HTMLSelectElement>(
       'button, input, select, textarea',
     ) ?? []) control.disabled = true;
     closeAnchoredPopovers();
     disposeFileMenuOverlays(app);
     disposeDashboardSurface();
-    disposeWorkbenchMount?.();
-    disposeWorkbenchMount = null;
+    disposeShell();
     workbench.destroy();
     app.onWorkspaceExternallyChanged = ignoreExternalWorkspaceChange;
   };
@@ -1612,7 +1724,29 @@ export function createApp(env: CreateAppEnv = {}): App {
   const applyCommittedWorkspace = (workspace: StoredWorkspaceV3): void => {
     app.currentWorkspace = workspace;
     app.workspaceRouteStatus = 'ready';
+    // #425: re-validate the selected Dashboard against committed truth. A
+    // selection that was deleted — or whose id became ambiguous — falls back to
+    // QUERY mode rather than silently retargeting another Dashboard, and the
+    // route follows so the URL never claims a Dashboard surface this session no
+    // longer has a document for.
+    //
+    // A Dashboard id is unique WITHIN a workspace, not globally — two workspaces
+    // can each hold a Dashboard called `main`. So a workspace change always CLEARS
+    // the selection: keeping it because the incoming workspace happens to carry the
+    // same id would silently open an unrelated Dashboard, and the next edit would
+    // commit to the wrong resource. Only a same-workspace projection re-validates
+    // an existing selection.
     const workspaceChanged = app.state.workspaceId !== workspace.id;
+    const previousSurface = app.mainSurface;
+    app.mainSurface = workspaceChanged
+      ? QUERY_SURFACE
+      : reconcileMainSurface(previousSurface, workspace);
+    // Only a selection lost WITHIN one workspace completes the fallback here. A
+    // workspace switch leaves the surface to its own URL-driven path
+    // (`loadWorkspaceOnBoot` → `adoptRouteMainSurface` → `renderCurrentSurface`),
+    // which resolves the NEW workspace's own Dashboard when the route asks for one.
+    const lostSelection = !workspaceChanged
+      && previousSurface.kind === 'dashboard' && app.mainSurface.kind === 'query';
     if (workspaceChanged) detachWorkspaceBoundTabs(app.state);
     app.state.savedQueries = workspace.queries;
     reconcileTabsWithSavedQueries(app.state);
@@ -1627,7 +1761,14 @@ export function createApp(env: CreateAppEnv = {}): App {
         if (q) tab.lastCommittedQueryToken = queryToken(q);
       }
     }
-    app.state.dashboard = resolveCompatibilityDashboard(workspace).dashboard;
+    // #425: project the SELECTED Dashboard. `state.dashboard` is what
+    // `reloadDashboardRoute` folds back into the collection, so projecting the
+    // compatibility entry while a different one is selected would write the wrong
+    // document into the selected slot (and mint a duplicate id).
+    const projectedId = selectedDashboardId(app.mainSurface);
+    app.state.dashboard = projectedId === null
+      ? resolveCompatibilityDashboard(workspace).dashboard
+      : findDashboard(workspace, projectedId);
     app.state.workspaceId = workspace.id;
     app.state.workspaceKey = workspace.key;
     app.state.libraryName.value = workspace.name;
@@ -1637,6 +1778,20 @@ export function createApp(env: CreateAppEnv = {}): App {
     // Every projection funnels through here (boot, mutateWorkspace, reset), so
     // the token stays consistent with what's on screen.
     lastCommittedToken = workspaceToken(workspace);
+    // #425: COMPLETE the fallback, don't just record it. Rewriting the route and
+    // leaving the Dashboard host exposed wedges the app: every path back —
+    // `showQuerySurface`, the header switch, `g w`, a Library click — early-returns
+    // because state and route now agree that Query mode is active, while the
+    // deleted Dashboard's DOM is still what the user sees. Both the callers that
+    // would otherwise repaint (`afterLibraryChange`, `runWorkspaceRefresh`) branch
+    // on `sqlRoute.surface`, which this fallback just changed under them, so the
+    // render has to happen here.
+    if (lostSelection) {
+      if (app.sqlRoute.surface === 'dashboard') {
+        writeRoute(mainSurfaceRoute(QUERY_SURFACE, workspace.key), 'replace');
+      }
+      app.renderCurrentSurface();
+    }
   };
   app.applyCommittedWorkspace = applyCommittedWorkspace;
   // #287 W5: the shared WorkspaceIdGen seam file-menu.js's New workspace /
@@ -1944,6 +2099,10 @@ export function createApp(env: CreateAppEnv = {}): App {
       routeSearch = canonicalSearch;
       win.history.replaceState(null, '', conn.basePath + routeSearch + (loc.hash || ''));
     }
+    // #425: this is a URL-driven open (boot, a deep link, or a workspace
+    // switch), so the ROUTE decides the surface — including which Dashboard,
+    // resolved through the compatibility selector because the URL carries no id.
+    adoptRouteMainSurface();
     return workspace;
   };
 
@@ -1987,7 +2146,7 @@ export function createApp(env: CreateAppEnv = {}): App {
       const expectedGeneration = routeLoadGeneration + 1;
       await app.loadWorkspaceOnBoot();
       if (routeLoadGeneration !== expectedGeneration) return;
-    }
+    } else adoptRouteMainSurface();
     app.renderCurrentSurface();
   };
 
@@ -1998,7 +2157,12 @@ export function createApp(env: CreateAppEnv = {}): App {
     routeSearch = loc.search;
     app.sqlRoute = parseSqlRoute(routeSearch);
     if (app.sqlRoute.workspaceKey === previousKey) {
-      disposeCurrentSurface();
+      // #425: Back/Forward between surfaces of the SAME workspace is a surface
+      // transition, not a teardown — the shell and the query column stay mounted
+      // so the editor state survives it. (It used to run `disposeCurrentSurface`,
+      // whose blanket control-disable would now inert the still-mounted editor
+      // toolbar, tabs, and sidebar inputs permanently.)
+      adoptRouteMainSurface();
       app.renderCurrentSurface();
       return;
     }
@@ -2018,27 +2182,123 @@ export function createApp(env: CreateAppEnv = {}): App {
     writeRoute(routeForWorkspace(app.sqlRoute, workspaceKey), 'replace');
   };
 
-  // Workbench -> Dashboard stays in this tab and creates one useful history
-  // entry. Dashboard edit is canonical, so `mode=edit` is omitted.
-  function openDashboard(): void {
-    void app.navigateSqlRoute({
-      surface: 'dashboard', workspaceKey: app.state.workspaceKey, mode: 'edit',
-    }, 'push');
-  }
-  app.openDashboard = openDashboard;
+  // #425 — the main-surface navigation API. Every surface transition goes
+  // through these three functions, so `app.mainSurface` is the ONE writer of the
+  // route: the URL is always derived from the session surface, never the other
+  // way round, and the two can never disagree.
+  const surfaceRouteKey = (): string | null =>
+    app.currentWorkspace?.key ?? app.state.workspaceKey;
+  // Surface changes stay in this tab and create one useful history entry;
+  // a View/Edit mode change replaces so presentation toggles do not pollute
+  // Back (ADR-0003).
+  const applyMainSurface = (surface: MainSurfaceState, method: 'push' | 'replace'): void => {
+    app.mainSurface = surface;
+    writeRoute(mainSurfaceRoute(surface, surfaceRouteKey()), method);
+    app.renderCurrentSurface();
+  };
+
+  app.openDashboard = (request) => {
+    const resolution = resolveOpenDashboard(app.currentWorkspace, request);
+    if (resolution.status !== 'ok') {
+      // Reported, never repaired: an ambiguous id must not be resolved by a
+      // guess, and a deleted one must not silently retarget another Dashboard.
+      flashToast(resolution.status === 'duplicate'
+        ? 'This workspace has more than one dashboard with that id — resolve the duplicate before opening it.'
+        : 'That dashboard is no longer part of this workspace.', { document: doc });
+      return;
+    }
+    // A repeated open of the SAME id in the SAME mode with NO focus target is a
+    // no-op: nothing to change, so the live viewer session is left alone rather
+    // than rebuilt. A focus target does re-render (the surface has to deliver it),
+    // which rebuilds the session — acceptable while the only caller is a direct
+    // API call; #426's tree, which navigates within an already-open Dashboard,
+    // will want an in-place focus path instead.
+    const sameSelection = isSameDashboardSelection(app.mainSurface, request)
+      && app.sqlRoute.surface === 'dashboard';
+    if (sameSelection && resolution.surface.kind === 'dashboard'
+      && resolution.surface.focus === null) {
+      app.mainSurface = resolution.surface;
+      return;
+    }
+    applyMainSurface(resolution.surface, app.sqlRoute.surface === 'dashboard' ? 'replace' : 'push');
+  };
+
+  app.showQuerySurface = () => {
+    if (app.mainSurface.kind === 'query' && app.sqlRoute.surface === 'workspace') return;
+    applyMainSurface(QUERY_SURFACE, app.sqlRoute.surface === 'dashboard' ? 'push' : 'replace');
+  };
+
+  // The Dashboard entry points that name no Dashboard themselves: the header
+  // surface switch, the Workbench "Dashboard →" nav, the `g d`/`g v`/`g e`
+  // shortcuts, and the View/Edit switch. An ALREADY-selected Dashboard wins — so
+  // a mode change retains the same document rather than retargeting the
+  // collection's first entry — and only an unselected surface falls back to the
+  // ONE compatibility Dashboard (there is no chooser until #426's tree). Either
+  // way the open is addressed BY ID. An empty collection still reaches the
+  // Dashboard surface so its "Create dashboard" state remains available.
+  app.showDashboardSurface = (mode) => {
+    const selectedId = app.mainSurface.kind === 'dashboard'
+      ? app.mainSurface.dashboardId
+      : app.currentWorkspace ? resolveCompatibilityDashboard(app.currentWorkspace).selectedId : null;
+    if (selectedId !== null) {
+      app.openDashboard({ dashboardId: selectedId, mode });
+      return;
+    }
+    const method = app.sqlRoute.surface === 'dashboard' ? 'replace' : 'push';
+    app.mainSurface = QUERY_SURFACE;
+    writeRoute({ surface: 'dashboard', workspaceKey: surfaceRouteKey(), mode }, method);
+    app.renderCurrentSurface();
+  };
+
+  // Opening a saved query is a Query-mode act: it returns to the preserved
+  // Query surface first, so the tab it opens is the one the user then sees.
+  app.openSavedQuery = (queryId) => {
+    const query = app.state.savedQueries.find((saved) => saved.id === queryId);
+    app.showQuerySurface();
+    // Spread, like saved-history.ts's own two call sites: `loadIntoNewTab`
+    // accepts the looser `string | Json` shape a `SavedQueryV2` satisfies
+    // structurally but not nominally (no index signature).
+    if (query) { loadIntoNewTab(app, { ...query }); toEditorOnMobile(); }
+  };
+
+  // Adopt the surface the ROUTE describes. Used at boot, on Back/Forward, and
+  // after a workspace switch — the three moments the URL, not a click, decides
+  // the surface. Back/Forward INSIDE the Dashboard surface keeps whatever is
+  // explicitly selected: the URL carries no Dashboard id (#425 leaves URLs
+  // unchanged), so re-deriving one here would silently retarget the surface to
+  // the collection's first entry.
+  const adoptRouteMainSurface = (): void => {
+    const workspace = app.currentWorkspace;
+    if (app.sqlRoute.surface !== 'dashboard') { app.mainSurface = QUERY_SURFACE; return; }
+    const mode: DashboardSurfaceMode = app.sqlRoute.mode;
+    if (app.mainSurface.kind === 'dashboard') {
+      app.mainSurface = reconcileMainSurface({ ...app.mainSurface, mode, focus: null }, workspace);
+      return;
+    }
+    const selectedId = workspace ? resolveCompatibilityDashboard(workspace).selectedId : null;
+    app.mainSurface = selectedId === null
+      ? QUERY_SURFACE
+      : { kind: 'dashboard', dashboardId: selectedId, mode, focus: null };
+  };
 
   app.reloadDashboardRoute = () => {
-    // #424: fold the projected compatibility Dashboard back into the COLLECTION,
-    // preserving every other entry. A null projection means "this workspace has
-    // no Dashboard", which can only happen when the collection is already empty
-    // — never a reason to drop a stored Dashboard, so the array is left alone.
+    // #424: fold the projected Dashboard back into the COLLECTION, preserving
+    // every other entry. A null projection means "this workspace has no
+    // Dashboard", which can only happen when the collection is already empty —
+    // never a reason to drop a stored Dashboard, so the array is left alone.
+    // #425: fold it back into the SELECTED entry, addressed by id. Writing the
+    // compatibility slot here would overwrite the collection's FIRST Dashboard
+    // while a different one is on screen. `replaceDashboard` returns null for a
+    // missing or ambiguous id, which leaves the collection untouched rather than
+    // guessing — the surface reconciles to Query mode on its next projection.
+    const selectedId = selectedDashboardId(app.mainSurface);
+    const foldProjection = (workspace: StoredWorkspaceV3): StoredWorkspaceV3 => {
+      if (!app.state.dashboard) return workspace;
+      if (selectedId === null) return withCompatibilityDashboard(workspace, app.state.dashboard);
+      return replaceDashboard(workspace, selectedId, app.state.dashboard) ?? workspace;
+    };
     app.currentWorkspace = app.currentWorkspace
-      ? {
-        ...(app.state.dashboard
-          ? withCompatibilityDashboard(app.currentWorkspace, app.state.dashboard)
-          : app.currentWorkspace),
-        queries: app.state.savedQueries,
-      }
+      ? { ...foldProjection(app.currentWorkspace), queries: app.state.savedQueries }
       : null;
     app.renderDashboard();
   };
@@ -2050,7 +2310,15 @@ export function createApp(env: CreateAppEnv = {}): App {
     newTab: () => newTab(app),
     selectTab: (id) => selectTab(app, id),
     closeTab: (id) => closeTab(app, id),
-    loadIntoNewTab: (queryOrName, sql) => { loadIntoNewTab(app, queryOrName, sql); toEditorOnMobile(); },
+    // #425: opening a query is a Query-mode act, so every EXISTING opening path
+    // (the Library list, History, the schema tree's double-click) switches the
+    // main surface back before loading — otherwise the new tab would land behind
+    // a visible Dashboard. A no-op when the Query surface is already active.
+    loadIntoNewTab: (queryOrName, sql) => {
+      app.showQuerySurface();
+      loadIntoNewTab(app, queryOrName, sql);
+      toEditorOnMobile();
+    },
     login: (idpId, targetOrigin) => conn.beginOAuth(idpId, targetOrigin),
     // Basic-auth login renders in-page (no page reload), so — unlike the OAuth
     // path, where `main.ts`'s `bootstrap` awaits it — this is the only place
@@ -2095,7 +2363,10 @@ export function createApp(env: CreateAppEnv = {}): App {
       const dialog = openShortcuts(app, () => { app.shortcutDialog = null; });
       if (dialog) app.shortcutDialog = dialog;
     },
-    openDashboard,
+    // #425: the no-argument legacy entry point (a header/nav control with no
+    // Dashboard chooser yet) — it resolves the compatibility Dashboard and opens
+    // it by id. `app.openDashboard(request)` is the ID-addressed API.
+    showDashboard: () => app.showDashboardSurface('edit'),
     // #302: Dashboard import/export invoked from the Dashboard page's own File
     // menu (and still from the Workbench during the transition). Export is a
     // read-only bundle download; import runs the transactional planner and, on
@@ -2113,16 +2384,19 @@ export function createApp(env: CreateAppEnv = {}): App {
   };
 
   app.renderApp = () => {
-    app.closeShortcutDialog();
-    resetShortcutChord(app);
-    surfaceGeneration += 1;
-    app.surfaceCommands = null;
-    closeAnchoredPopovers();
-    disposeFileMenuOverlays(app);
+    beginSurfaceTransition();
+    // The Dashboard's own route-scoped resources go; the query column does NOT
+    // (it is mounted once and preserved — see `ensureShell`).
     disposeDashboardSurface();
     app.onWorkspaceExternallyChanged = ignoreExternalWorkspaceChange;
-    disposeWorkbenchMount?.();
-    disposeWorkbenchMount = renderApp(app, { toggleTheme, startDrag });
+    const mounted = ensureShell();
+    mounted.setHeader(buildAppHeader(app));
+    mounted.showHost('query');
+    // Repaint the results pane on every return to this surface. A query that
+    // finished while the Dashboard was visible built its Chart.js canvas in a
+    // zero-size host, and chart-render only auto-resizes a laid-out one — so
+    // without this the chart comes back blank. Cheap and idempotent otherwise.
+    renderResults(app);
   };
   if (typeof win.addEventListener === 'function') {
     win.addEventListener('popstate', () => { void app.handleSqlPopState(); });
@@ -2130,44 +2404,47 @@ export function createApp(env: CreateAppEnv = {}): App {
   return app;
 }
 
-/** `renderApp`'s second argument — the two closures it can't rebuild itself
- *  (both defined inside `createApp`, over that same `app`). */
+/** `renderApp`'s second argument — the one closure it can't rebuild itself
+ *  (defined inside `createApp`, over that same `app`). The former `toggleTheme`
+ *  member went with the header: `buildAppHeader` wires the theme button to
+ *  `app.toggleTheme` off the live object, so threading it through here was
+ *  already dead by the time the shell split moved the header build out. */
 export interface RenderAppHelpers {
-  toggleTheme: () => void;
   startDrag: typeof startDrag;
 }
 
 
-/** Build the signed-in shell and mount all regions — a thin composition call
- *  onto `ui/workbench/workbench-shell.ts`'s `mountWorkbenchShell` (#276 Phase
- *  5): the entire former body (header/sidebar/splitters/workbench DOM/every
- *  effect/`attachShell`/the catalog bootstrap tail) now lives there,
- *  byte-identically, driven by a narrow `WorkbenchShellDeps` bag instead of
- *  the full `App` — see that module's header comment for what stays coupled
- *  to `app` and why. */
-export function renderApp(app: App, helpers: RenderAppHelpers): () => void {
+/** Mount the QUERY surface's column into the persistent shell's `queryHost` —
+ *  a thin composition call onto `ui/workbench/workbench-shell.ts`'s
+ *  `mountWorkbenchShell` (#276 Phase 5, narrowed by #425's shell split): every
+ *  line it runs is still the same byte-identical code, driven by a narrow
+ *  `WorkbenchShellDeps` bag instead of the full `App` — see that module's header
+ *  comment for what stays coupled to `app` and why.
+ *
+ *  The persistent frame itself (header slot, sidebar, mobile nav) is mounted by
+ *  `createApp`'s own `ensureShell`, once per signed-in workspace, and this column
+ *  is mounted into it exactly once too: #425 preserves the Query surface across a
+ *  Dashboard round trip rather than reconstructing it. */
+export function renderApp(
+  app: App, helpers: RenderAppHelpers, queryHost: HTMLElement,
+): () => void {
   return mountWorkbenchShell({
     app,
-    root: app.root,
     document: app.document,
     state: app.state,
     actions: app.actions,
-    conn: app.conn,
-    catalog: app.catalog,
     sqlEditor: app.sqlEditor,
     specEditor: app.specEditor,
     workbench: app.workbench,
     queryDoc: app.queryDoc,
     prefs: app.prefs,
-    matchMedia: app.matchMedia,
+    queryHost,
     activeTab: app.activeTab,
     updateSaveBtn: app.updateSaveBtn,
     specBlocked: app.specBlocked,
     renderVarStrip: app.renderVarStrip,
-    updateBanner: app.updateBanner,
     setRunBtn: app.setRunBtn,
     setExportBtn: app.setExportBtn,
-    toggleTheme: helpers.toggleTheme,
     startDrag: helpers.startDrag,
   });
 }
diff --git a/src/ui/app.types.ts b/src/ui/app.types.ts
index 738a613f..340ef336 100644
--- a/src/ui/app.types.ts
+++ b/src/ui/app.types.ts
@@ -19,6 +19,9 @@ import type { ConnectionSession, SessionChCtx } from '../application/connection-
 import type { SchemaCatalogService } from '../application/schema-catalog-service.js';
 import type { SchemaGraphSession } from '../application/schema-graph-session.js';
 import type { AppPreferences } from '../application/app-preferences.js';
+import type {
+  DashboardSurfaceMode, MainSurfaceState, OpenDashboardRequest,
+} from '../application/main-surface.js';
 import type { WorkspaceRepository } from '../workspace/workspace-repository.js';
 import type { WorkspaceDiagnostic } from '../dashboard/model/workspace-diagnostics.js';
 import type { StoredWorkspaceV3 } from '../generated/json-schema.types.js';
@@ -215,7 +218,11 @@ export interface ActionsRegistry {
   insertCreate(target: string): Promise<void>;
   openCreateInNewTab(target: string, name?: string): Promise<void>;
   openShortcuts(): void;
-  openDashboard(): void;
+  /** #425 — a legacy Dashboard entry point with no chooser yet (the header
+   *  surface switch, the Workbench "Dashboard →" nav): resolves the ONE
+   *  compatibility Dashboard and opens it by id. Callers that already know which
+   *  Dashboard they want use `App.openDashboard(request)` instead. */
+  showDashboard(): void;
   /** #302 — export the current dashboard's dependency closure as a bundle. */
   exportDashboard(): void;
   /** #302 — import a Dashboard bundle through the transactional planner. */
@@ -444,7 +451,29 @@ export interface App {
   renderApp(): void;
   renderDashboard(): void;
   renderCurrentSurface(): void;
-  openDashboard(): void;
+  /** #425 — which main work surface owns the right-hand work area, and, for a
+   *  Dashboard, WHICH stored Dashboard is selected in which presentation mode
+   *  with an optional navigation focus target. SESSION state: never persisted,
+   *  cleared on sign-out, re-validated against every committed workspace, and
+   *  identified only by `DashboardDocumentV1.id` — never by collection position.
+   *  It is also the ONE writer of the `/sql` route's surface/mode, so the URL is
+   *  always derived from this and the two can never disagree. */
+  mainSurface: MainSurfaceState;
+  /** #425 — the one application-level Dashboard navigation entry point. Resolves
+   *  the Dashboard by exact id in the active workspace; a missing or duplicate id
+   *  is reported through the shared diagnostic path and changes no state. Never
+   *  mutates the Dashboard merely by opening it. A repeated open of the same
+   *  id+mode with no focus target is a no-op that leaves the live viewer session
+   *  alone; one WITH a focus target re-renders in order to deliver it. */
+  openDashboard(request: OpenDashboardRequest): void;
+  /** #425 — return to the preserved Query surface (editor + result drawer). */
+  showQuerySurface(): void;
+  /** #425 — the legacy no-chooser Dashboard entry point: resolves the
+   *  compatibility Dashboard and opens it by id, falling back to the Dashboard
+   *  surface's own "Create dashboard" state for an empty collection. */
+  showDashboardSurface(mode: DashboardSurfaceMode): void;
+  /** #425 — open a saved query into a tab, switching back to Query mode first. */
+  openSavedQuery(queryId: string): void;
   /** Current canonical `/sql` route and the live workspace resolved for it. */
   sqlRoute: SqlRoute;
   currentWorkspace: StoredWorkspaceV3 | null;
diff --git a/src/ui/dashboard.ts b/src/ui/dashboard.ts
index 89451195..f2f57546 100644
--- a/src/ui/dashboard.ts
+++ b/src/ui/dashboard.ts
@@ -80,6 +80,9 @@ import { createEmptyDashboard } from '../dashboard/application/empty-dashboard.j
 import {
   findDashboard, replaceDashboard, resolveCompatibilityDashboard, withCompatibilityDashboard,
 } from '../workspace/workspace-dashboards.js';
+import type {
+  DashboardFocusTarget, DashboardSurfaceMode,
+} from '../application/main-surface.js';
 import { createQueryResolver } from '../dashboard/application/dashboard-query-resolver.js';
 import {
   readDashboardFilterBag, writeDashboardFilterBag, filterBagSignature,
@@ -110,6 +113,7 @@ const Icon: {
   moon(): SVGElement;
   trash(): SVGElement;
   chevDown(): SVGElement;
+  chevLeft(): SVGElement;
   download(): SVGElement;
   upload(): SVGElement;
   search(): SVGElement;
@@ -118,6 +122,25 @@ const Icon: {
 const formatRows: (n: number | null | undefined) => string = formatRowsUntyped;
 const formatBytes: (n: number | null | undefined) => string = formatBytesUntyped;
 
+/**
+ * Everything the application shell hands this surface for ONE render (#425).
+ * Nothing here is re-derived from the route or from collection position: the
+ * shell owns the hosts and the selection, this module owns the rendering.
+ */
+export interface DashboardRenderTarget {
+  /** The main-surface host to render into — NOT `app.root`. The Query surface
+   *  stays mounted in its own sibling host. */
+  host: Element;
+  /** The selected Dashboard's stable id, or `null` for the legacy entry point
+   *  against a workspace with no Dashboard yet (→ "Create dashboard"). */
+  dashboardId: string | null;
+  mode: DashboardSurfaceMode;
+  /** Where to land navigation focus once this Dashboard's DOM exists. */
+  focus: DashboardFocusTarget | null;
+  /** Install this surface's header into the shell's shared header slot. */
+  setHeader(header: Element): void;
+}
+
 /** The narrow `app` surface this render module reads (not the full App —
  *  matches the convention results.ts/filter-bar.ts established). */
 export interface DashboardApp {
@@ -135,6 +158,13 @@ export interface DashboardApp {
   workspace: Pick<WorkspaceRepository, 'commit'>;
   currentWorkspace: StoredWorkspaceV3 | null;
   sqlRoute: SqlRoute;
+  /** #425 — the selected-Dashboard session state this render projects, and the
+   *  navigation API its own chrome (View/Edit, Back to query) transitions
+   *  through. */
+  mainSurface: App['mainSurface'];
+  openDashboard: App['openDashboard'];
+  showDashboardSurface: App['showDashboardSurface'];
+  showQuerySurface: App['showQuerySurface'];
   navigateSqlRoute(route: SqlRoute, method: 'push' | 'replace'): Promise<void>;
   surfaceCommands: App['surfaceCommands'];
   keyboardOwner: App['keyboardOwner'];
@@ -199,6 +229,19 @@ let installedModifierListeners:
 let installedGestureCancel: (() => void) | null = null;
 let installedDashboardChartInteraction: DashboardChartInteractionController | null = null;
 let installedDashboardCleanup: (() => void) | null = null;
+// #425: the shell-owned host this surface last rendered into. The host itself
+// OUTLIVES the surface (it is a permanent sibling of the query host), so
+// teardown has to empty it explicitly — otherwise a disposed Dashboard's DOM
+// would linger behind the Query surface, still answering `.dash-page` queries
+// with a page whose viewer session is already destroyed.
+let installedDashboardHost: Element | null = null;
+// #425: the pending clear for a navigation highlight. Module-level for the same
+// reason the listeners above are: a later render (or surface teardown) must be
+// able to retire the PRIOR render's highlight — including its document listeners
+// — rather than leave it to fire against a detached node.
+let installedNavHighlightClear: (() => void) | null = null;
+/** How long a navigation highlight lasts absent any user interaction. */
+const NAV_HIGHLIGHT_MS = 2000;
 
 /** Tear down every resource owned by the currently mounted Dashboard surface. */
 function keyboardOwnerChannel(app: Pick<DashboardApp, 'acquireKeyboardOwner'>): (owner: App['keyboardOwner']) => void {
@@ -224,6 +267,10 @@ export function disposeDashboardSurface(): void {
   if (installedGestureCancel) installedGestureCancel();
   installedDashboardCleanup?.();
   installedDashboardCleanup = null;
+  installedNavHighlightClear?.();
+  installedNavHighlightClear = null;
+  installedDashboardHost?.replaceChildren();
+  installedDashboardHost = null;
 }
 
 /** Build the Dashboard style picker with the same trigger and dropdown
@@ -346,16 +393,23 @@ function synthesizeImplicitFilters(
 }
 
 /** #407 — an explicit workspace route that no longer resolves. */
-function renderDashboardNotFound(app: DashboardApp): void {
-  // `!`: the dashboard renders only into a mounted page.
-  app.root!.replaceChildren(h('div', { class: 'dash-page dash-notfound' },
+function renderDashboardNotFound(app: DashboardApp, target: DashboardRenderTarget): void {
+  // #425: install this surface's own header too. Without it the PREVIOUS surface's
+  // header stays above a "Workspace not found" work area, reading as a
+  // Dashboard-scoped error rather than the page-level one it is.
+  target.setHeader(buildAppHeader(app as App, {
+    fileButton: buildDashboardFileMenu(app, true),
+    workspaceTitleEditable: false,
+  }));
+  installedDashboardHost = target.host;
+  target.host.replaceChildren(h('div', { class: 'dash-page dash-notfound' },
     h('div', { class: 'dash-empty' },
       h('h2', { class: 'dash-notfound-title' }, 'Workspace not found'),
       h('p', null, 'This workspace no longer exists on this browser.'))));
 }
 
 function renderMissingDashboard(
-  app: DashboardApp, readOnly: boolean, surfaceGeneration: number,
+  app: DashboardApp, target: DashboardRenderTarget, readOnly: boolean, surfaceGeneration: number,
 ): void {
   const body = readOnly
     ? h('div', { class: 'dash-empty' },
@@ -365,35 +419,67 @@ function renderMissingDashboard(
       h('button', {
         class: 'dash-btn dash-create',
         onclick: async () => {
-          const outcome = await app.mutateWorkspace((latest) => {
+          const outcome = await app.mutateWorkspace<string>((latest) => {
             // #424: "no Dashboard yet" is asked through the one compatibility
             // seam, and the new document becomes the collection's first entry.
             if (!latest || resolveCompatibilityDashboard(latest).dashboard) return null;
-            return { candidate: withCompatibilityDashboard(latest, createEmptyDashboard(app.genId())) };
+            const created = createEmptyDashboard(app.genId());
+            // The new id rides back through the mutation's own `data` channel, so
+            // the open below cannot disagree with what was committed.
+            return { candidate: withCompatibilityDashboard(latest, created), data: created.id };
           });
           if (!app.refreshCurrentSurfaceAfterStale(surfaceGeneration, outcome.ok)) return;
-          if (outcome.ok) app.renderDashboard();
+          // #425: SELECT what we just created rather than re-rendering an
+          // unselected surface. Without this the session would keep reporting
+          // Query mode while a Dashboard is on screen — harmless today (every
+          // consumer falls back to the compatibility entry) but a lie that #426's
+          // tree would render as "nothing selected".
+          if (outcome.ok) app.openDashboard({ dashboardId: outcome.data!, mode: target.mode });
         },
       }, 'Create dashboard'));
-  app.root!.replaceChildren(h('div', { class: 'dash-page' },
+  target.setHeader(buildAppHeader(app as App, {
+    fileButton: buildDashboardFileMenu(app, readOnly),
+    workspaceTitleEditable: !readOnly,
+  }));
+  installedDashboardHost = target.host;
+  target.host.replaceChildren(h('div', { class: 'dash-page' },
     h('div', { class: 'dash-topbar' },
-      buildAppHeader(app as App, {
-        fileButton: buildDashboardFileMenu(app, readOnly),
-        workspaceTitleEditable: !readOnly,
-      }),
+      dashboardSurfaceToolbar(app, null, target.mode),
       h('div', { class: 'dash-toolbar dash-toolbar-primary' },
-        h('span', { class: 'dash-toolbar-spacer' }),
-        buildDashboardModeSwitch(app))),
+        h('span', { class: 'dash-toolbar-spacer' }))),
     body));
 }
 
-function buildDashboardModeSwitch(app: DashboardApp): HTMLElement {
-  const route = app.sqlRoute as Extract<SqlRoute, { surface: 'dashboard' }>;
-  const routeKey = app.currentWorkspace?.key ?? route.workspaceKey;
-  const button = (label: 'View' | 'Edit', mode: 'view' | 'edit'): HTMLButtonElement =>
-    routeButton(label, route.mode === mode, () => {
-      void app.navigateSqlRoute({ surface: 'dashboard', workspaceKey: routeKey, mode }, 'replace');
-    });
+/**
+ * The Dashboard surface's own compact toolbar (#425):
+ *   [Back to query]  <dashboard title>                       [View | Edit]
+ * `Back to query` returns to the PRESERVED Query surface; View/Edit retains the
+ * same Dashboard id (the main-surface API keeps it — writing a route here would
+ * re-resolve the collection's first entry). `title` is null only for the
+ * no-Dashboard placeholder, which has no document to name.
+ */
+function dashboardSurfaceToolbar(
+  app: DashboardApp, title: string | null, mode: DashboardSurfaceMode,
+): HTMLElement {
+  return h('div', { class: 'dash-toolbar dash-surface-toolbar' },
+    h('button', {
+      class: 'tb-btn dash-back-to-query', type: 'button',
+      title: 'Back to the SQL editor', 'aria-label': 'Back to query',
+      onclick: () => { app.showQuerySurface(); },
+    }, Icon.chevLeft(), h('span', null, 'Back to query')),
+    title === null ? null : h('h2', { class: 'dash-surface-title', title }, title),
+    h('span', { class: 'dash-toolbar-spacer' }),
+    buildDashboardModeSwitch(app, mode));
+}
+
+function buildDashboardModeSwitch(app: DashboardApp, mode: DashboardSurfaceMode): HTMLElement {
+  // #425: switching View/Edit retains the SELECTED Dashboard — the main-surface
+  // API keeps the id and re-opens the same document in the other mode, instead of
+  // writing a route that would re-resolve the collection's first entry. The active
+  // mode comes from the render target, not the route, so the control reflects what
+  // is actually on screen.
+  const button = (label: 'View' | 'Edit', value: DashboardSurfaceMode): HTMLButtonElement =>
+    routeButton(label, mode === value, () => { app.showDashboardSurface(value); });
   return h('div', {
     class: 'editor-mode-switch dashboard-mode-switch',
     role: 'group', 'aria-label': 'Dashboard mode',
@@ -454,13 +540,21 @@ function buildDashboardFileMenu(app: DashboardApp, readOnly = false): HTMLButton
   return btn;
 }
 
-/** Render the dashboard into `app.root`. */
-export async function renderDashboard(app: DashboardApp): Promise<void> {
+/** Render the selected Dashboard into the main-surface host the application
+ *  shell owns (#425). Everything this surface needs to know about WHICH
+ *  Dashboard, in which mode, with which navigation focus, arrives here — it is
+ *  never re-derived from the route or from collection position. */
+export async function renderDashboard(
+  app: DashboardApp, target: DashboardRenderTarget,
+): Promise<void> {
   const { document: doc, state } = app;
   const surfaceGeneration = app.captureSurfaceGeneration();
   doc.documentElement.setAttribute('data-theme', state.theme);
   doc.documentElement.setAttribute('data-density', state.density);
-  app.dom = {};
+  // #425: NO `app.dom = {}` reset here. The Query surface stays mounted behind
+  // this one and its DOM refs live in that same shared bag — resetting it would
+  // strand every workbench reference (and the sidebar's) while the elements are
+  // still in the document. The shell owns the one reset, at its own mount.
 
   // #291 review F4: remove any grid resize listener a PRIOR renderDashboard
   // call installed on this window before this call installs its own (see
@@ -469,21 +563,26 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
   app.surfaceCommands = null;
 
   const workspace = app.currentWorkspace;
-  const readOnly = app.sqlRoute.surface === 'dashboard' && app.sqlRoute.mode === 'view';
-  if (!workspace) { renderDashboardNotFound(app); return; }
+  const readOnly = target.mode === 'view';
+  if (!workspace) { renderDashboardNotFound(app, target); return; }
   app.onWorkspaceExternallyChanged = () => {
     if (app.sqlRoute.surface === 'dashboard') app.renderDashboard();
   };
-  // #424: the ONE place this route decides which Dashboard it edits. The id is
-  // pinned for the whole render so every commit below is addressed BY ID rather
-  // than by array position — a concurrent write that reorders or replaces the
-  // collection can then be detected instead of silently retargeting.
-  const selection = resolveCompatibilityDashboard(workspace);
-  if (!selection.dashboard) {
-    renderMissingDashboard(app, readOnly, surfaceGeneration);
+  // #424/#425: the ONE place this surface resolves the document it renders. The
+  // selected id arrives on `target`; only a legacy entry point that has not been
+  // converted yet (an empty collection, so nothing to select) falls back to the
+  // compatibility Dashboard. The id is pinned for the whole render so every
+  // commit below is addressed BY ID rather than by array position — a concurrent
+  // write that reorders or replaces the collection is then detected instead of
+  // silently retargeting.
+  const selected = target.dashboardId === null
+    ? resolveCompatibilityDashboard(workspace).dashboard
+    : findDashboard(workspace, target.dashboardId);
+  if (!selected) {
+    renderMissingDashboard(app, target, readOnly, surfaceGeneration);
     return;
   }
-  const selectedDashboardId = selection.selectedId as string;
+  const selectedDashboardId = selected.id;
 
   const queries: SavedQueryV2[] = workspace.queries;
   const queryById = new Map<string, SavedQueryV2>();
@@ -491,7 +590,7 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
 
   // The live document — layout/order edits replace it; membership is read from
   // `dashboard.tiles[]` (NOT `savedQueries.filter(queryFavorite)`).
-  let currentDoc: DashboardDocumentV1 = selection.dashboard;
+  let currentDoc: DashboardDocumentV1 = selected;
   let committedRevision = currentDoc.revision;
   // #341/#344 review fix: `committedWorkspace` is now ONLY a render/rollback
   // CACHE of the last commit this route observed — never the baseline a
@@ -657,13 +756,15 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
   const layoutWrap = h('div', { class: 'dash-layout-wrap' }, layoutMenu.el);
 
   // Dashboard keeps the shared header's File word and placement. View exposes
-  // the safe Export row only; edit additionally exposes Import.
-  const header = buildAppHeader(app as App, {
+  // the safe Export row only; edit additionally exposes Import. #425: the header
+  // goes into the SHELL's slot (the shell owns the frame now), not into this
+  // surface's own DOM.
+  target.setHeader(buildAppHeader(app as App, {
     fileButton: buildDashboardFileMenu(app, readOnly),
     workspaceTitleEditable: !readOnly,
-  });
+  }));
 
-  const dashboardModeSwitch = buildDashboardModeSwitch(app);
+  const surfaceToolbar = dashboardSurfaceToolbar(app, currentDoc.title, target.mode);
 
   let tileSearchTimer: ReturnType<typeof setTimeout> | null = null;
   const commitTileSearch = (input: HTMLInputElement): void => {
@@ -2225,6 +2326,8 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
     }
   });
 
+  // The style/refresh/search controls stay exactly where they were; #425's
+  // Back-to-query + title + View/Edit toolbar sits above them.
   const primaryToolbar = h('div', { class: 'dash-toolbar dash-toolbar-primary' },
     layoutWrap,
     tileCount,
@@ -2232,17 +2335,17 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
     timeFilterHost,
     h('span', { class: 'dash-toolbar-spacer' }),
     updated,
-    refreshControl,
-    dashboardModeSwitch);
+    refreshControl);
   const hasOrdinaryFilters = ordinaryFilterIds.length > 0;
   const filterToolbar = h('div', {
     class: 'dash-toolbar dash-toolbar-filters',
     style: hasOrdinaryFilters ? undefined : { display: 'none' },
   }, ordinaryFilterHost, clearFiltersBtn);
 
-  // `!`: the dashboard renders only into a mounted page.
-  app.root!.replaceChildren(h('div', { class: 'dash-page' },
-    h('div', { class: 'dash-topbar' }, header, primaryToolbar, filterToolbar, filterRefreshLiveEl),
+  installedDashboardHost = target.host;
+  target.host.replaceChildren(h('div', { class: 'dash-page' },
+    h('div', { class: 'dash-topbar' },
+      surfaceToolbar, primaryToolbar, filterToolbar, filterRefreshLiveEl),
     filterDiagnosticsHost, empty, searchEmpty, grid));
 
   // Own every route-scoped resource in one teardown. An in-place Dashboard
@@ -2320,5 +2423,111 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
     installedModifierListeners = { win: gridWin, onKeyDown, onKeyUp, onBlur };
   }
 
+  // #425 — deliver the navigation focus target at the deterministic point where
+  // the node it names actually exists and is stable. Both are straight-line
+  // sequencing off real completion signals, never a timeout.
+  //
+  // Arm the "user got there first" signal for the deferred (filter) delivery
+  // below, before the wave starts. Capture phase, so a click that a control's own
+  // handler stops still counts.
+  let userInteracted = false;
+  if (target.focus) {
+    const noteInteraction = (): void => { userInteracted = true; };
+    doc.addEventListener('pointerdown', noteInteraction, true);
+    doc.addEventListener('keydown', noteInteraction, true);
+    const previousCleanup = installedDashboardCleanup;
+    installedDashboardCleanup = () => {
+      doc.removeEventListener('pointerdown', noteInteraction, true);
+      doc.removeEventListener('keydown', noteInteraction, true);
+      previousCleanup?.();
+    };
+  }
+
+  // A TILE card exists already: the viewer session seeds its state with every
+  // tile at construction, so the render effect built each card synchronously
+  // above, and the host is now in the document (without which `focus()` is a
+  // silent no-op). The first publish only repaints tile BODIES, so focus on the
+  // card — never on an inner heading, which is replaced on every publish —
+  // survives it.
+  if (target.focus?.kind === 'tile') applyNavigationFocus(target.focus);
+
   await session.start();
+
+  // A FILTER field is not stable across that first publish: it changes the bar's
+  // signature (committed values, active flags, arriving options), and a rebuild
+  // replaces the whole control — so focus set before `start()` would be dropped
+  // onto the detached node. The resolved wave is this control's own
+  // render-complete signal.
+  if (target.focus?.kind === 'filter') applyNavigationFocus(target.focus);
+
+  // Called only from the two narrowed call sites above, so `focus` is never null
+  // here — no redundant guard.
+  function applyNavigationFocus(focus: DashboardFocusTarget): void {
+    // Opening another Dashboard, returning to the Query surface, a workspace
+    // switch, or sign-out all advance the renderer generation — a focus request
+    // that belonged to a superseded render must not steal focus from the one now
+    // on screen.
+    if (!app.isSurfaceGenerationCurrent(surfaceGeneration)) return;
+    // The user got there first. Filter focus is delivered after the opening wave
+    // resolves, which can take seconds — long enough to Tab into another filter
+    // and start typing, and the filter bar's own rebuild already restores focus to
+    // whatever field that was. Yanking it away mid-keystroke is worse than not
+    // navigating at all.
+    if (userInteracted) return;
+    const node = focus.kind === 'tile' ? tileFocusTarget(focus.id) : filterFocusTarget(focus.id);
+    if (!node) {
+      // Non-destructive: the Dashboard is already open and stays open.
+      flashToast(focus.kind === 'tile'
+        ? 'That panel is no longer on this dashboard.'
+        : 'That filter is no longer on this dashboard.', { document: doc });
+      return;
+    }
+    // A tile card and a filter field are both non-interactive containers, so
+    // they need a programmatic-focus target; `-1` keeps them out of the Tab
+    // order, leaving normal keyboard navigation untouched.
+    if (!node.hasAttribute('tabindex')) node.setAttribute('tabindex', '-1');
+    node.scrollIntoView({ block: 'nearest' });
+    node.focus();
+    highlightNavigationTarget(node);
+  }
+
+  /** Resolve a tile by its Dashboard-local TILE id — never the saved-query id it
+   *  renders. A flow KPI band member has its own host element; every other tile
+   *  is its cached card. */
+  function tileFocusTarget(tileId: string): HTMLElement | null {
+    return flowKpiHosts.get(tileId) ?? tileEls.get(tileId)?.card ?? null;
+  }
+
+  /** Resolve a curated filter by its FILTER id, within the selected Dashboard
+   *  only: filter id → its declared parameter → the built control. */
+  function filterFocusTarget(filterId: string): HTMLElement | null {
+    const definition = (viewerDoc.filters || []).find((filter) => filter.id === filterId);
+    if (!definition) return null;
+    return currentFilterBar?.fieldElement(definition.parameter) ?? null;
+  }
+
+  /** A temporary navigation highlight, IN ADDITION to the normal focus ring.
+   *  Cleared after a bounded interval or on the next user interaction, whichever
+   *  comes first, so it never lingers as permanent chrome. */
+  function highlightNavigationTarget(node: HTMLElement): void {
+    node.classList.add('is-nav-target');
+    // `clear` runs at most once: it removes the timer AND both listeners that
+    // could call it, and drops the module reference `disposeDashboardSurface`
+    // would call it through — so no re-entrance guard is reachable.
+    const clear = (): void => {
+      node.classList.remove('is-nav-target');
+      clearTimeout(timer);
+      doc.removeEventListener('pointerdown', clear, true);
+      doc.removeEventListener('keydown', clear, true);
+      // Drop the module's reference too, so a cleared highlight stops retaining
+      // this tile's whole subtree until the next render.
+      if (installedNavHighlightClear === clear) installedNavHighlightClear = null;
+    };
+    const timer = setTimeout(clear, NAV_HIGHLIGHT_MS);
+    doc.addEventListener('pointerdown', clear, true);
+    doc.addEventListener('keydown', clear, true);
+    // At most one highlight is live at a time: `disposeDashboardSurface` (which
+    // every render calls first) already retired any prior render's.
+    installedNavHighlightClear = clear;
+  }
 }
diff --git a/src/ui/file-menu.ts b/src/ui/file-menu.ts
index 5c3bc238..7f290f4f 100644
--- a/src/ui/file-menu.ts
+++ b/src/ui/file-menu.ts
@@ -42,8 +42,9 @@ import { createNewWorkspace, renameWorkspace } from '../workspace/workspace-oper
 import { deriveWorkspaceKey } from '../core/workspace-key.js';
 import type { App } from './app.types.js';
 import {
-  resolveCompatibilityDashboard, withCompatibilityDashboard,
+  findDashboard, replaceDashboard, resolveCompatibilityDashboard, withCompatibilityDashboard,
 } from '../workspace/workspace-dashboards.js';
+import { selectedDashboardId } from '../application/main-surface.js';
 import type { PortableBundleV1, SavedQueryV2, StoredWorkspaceV3 } from '../generated/json-schema.types.js';
 import type { WorkspaceDiagnostic } from '../dashboard/model/workspace-diagnostics.js';
 
@@ -72,7 +73,7 @@ export function libraryControls(app: App): HTMLElement[] {
   // shortcut directly; the visible surface switch now owns this navigation.
   app.dom.dashboardNav = h('button', {
     class: 'hd-dash-nav', title: 'Open Dashboard', 'aria-label': 'Open Dashboard',
-    onclick: () => app.actions.openDashboard(),
+    onclick: () => app.actions.showDashboard(),
   }, Icon.layers(), h('span', { class: 'hd-dash-nav-label' }, 'Dashboard →'));
   renderDashboardNav(app);
   return [app.dom.fileBtn, buildWorkspaceTitle(app, true)];
@@ -618,9 +619,14 @@ function doImportDashboard(app: App, bundle: PortableBundleV1, dashboardId: stri
     // UI shows (#280 "Import Dashboard replaces the current Dashboard", scoped
     // to the compatibility slot by #424). The confirm above gates the
     // destructive case.
+    // #425: replace the SELECTED Dashboard, not the compatibility slot — an
+    // import invoked from Dashboard #2's own File menu must not overwrite #1.
+    const targetId = selectedDashboardId(app.mainSurface);
     void commitWorkspace(
       app, planBuild(app, closureQueries, decisions,
-        (base, revalidated) => planImportDashboard(base, bundle, dashboardId, revalidated, 'copy', app.genId)),
+        (base, revalidated) => planImportDashboard(
+          base, bundle, dashboardId, revalidated, 'copy', app.genId, {}, targetId,
+        )),
       'Imported dashboard',
     );
   });
@@ -707,7 +713,15 @@ export async function exportDashboardAction(app: App): Promise<void> {
   // #302: invoked from the Dashboard page's File menu (via
   // `app.actions.exportDashboard`). Guard a null Dashboard here — unlike the
   // old Workbench menu item, the caller no longer pre-checks `hasDashboard`.
-  const dashboard = ws ? resolveCompatibilityDashboard(ws).dashboard : app.state.dashboard;
+  // #425: export the SELECTED Dashboard. Reading the compatibility slot here
+  // would export the collection's FIRST entry from a different Dashboard's own
+  // File menu — wrong the moment a non-first Dashboard can be open.
+  const selectedId = selectedDashboardId(app.mainSurface);
+  const dashboard = ws
+    ? (selectedId === null
+      ? resolveCompatibilityDashboard(ws).dashboard
+      : findDashboard(ws, selectedId))
+    : app.state.dashboard;
   if (!dashboard) { flashToast('No dashboard to export', { document: app.document }); return; }
   const queryList = ws ? ws.queries : app.state.savedQueries;
   const bundle = buildDashboardExportBundle(dashboard, queryList, new Date(app.wallNow()).toISOString());
diff --git a/src/ui/filter-bar.ts b/src/ui/filter-bar.ts
index 58cfe1b0..13576f77 100644
--- a/src/ui/filter-bar.ts
+++ b/src/ui/filter-bar.ts
@@ -338,6 +338,13 @@ export interface FilterBarHandle {
    *  `openPopoverKey()` (or, absent that, `focusedFieldKey()`) reported on the
    *  OUTGOING bar just before disposing it. */
   focusFieldTrigger(key: string): void;
+  /** #425 — the field ROOT this bar built for `key`, for navigation that has to
+   *  scroll to and highlight a control rather than just focus it. `key` is a
+   *  parameter name or a `group:${key}` time-range key; a parameter OWNED by a
+   *  time-range group resolves to that group's compound control, since no
+   *  standalone field exists for it. `null` when this bar built nothing for the
+   *  key. */
+  fieldElement(key: string): HTMLElement | null;
   /** #335: re-resolve every time-range control's closed-trigger label + aria
    *  against a new wall-clock snapshot (per execution wave, no timers) — a
    *  relative range (`-1d` → `now`) re-displays its absolute bounds without a
@@ -383,7 +390,8 @@ export function buildFilterBar(
       timeEl, ordinaryEl,
       dispose: () => {}, updateStatus: () => {},
       openPopoverKey: () => null, focusedFieldKey: () => null,
-      focusFieldTrigger: () => {}, refreshTimeRangeLabels: () => {},
+      focusFieldTrigger: () => {}, fieldElement: () => null,
+      refreshTimeRangeLabels: () => {},
     };
   }
   const timerClears: Array<() => void> = [];
@@ -395,6 +403,16 @@ export function buildFilterBar(
   // `focusedFieldKey`/`focusFieldTrigger`/`refreshTimeRangeLabels` all fold
   // over this one map.
   const handles = new Map<string, FieldHandle>();
+  // #425: the DOM counterpart of the `handles` key, stamped on every field's own
+  // root so navigation can FIND a field it was asked to focus. `handles` alone
+  // isn't enough: a curated scalar registers no `el` (its adapter carries only
+  // `updateStatus`), and a plain field has no handle entry at all — yet either
+  // can be a curated Dashboard filter a caller navigates to. Applied at the one
+  // composition point below rather than in each of the four build branches.
+  const stampFieldKey = (el: HTMLElement, key: string): HTMLElement => {
+    el.dataset.fieldKey = key;
+    return el;
+  };
   // #335: the time-range group entries, and the set of parameter names those
   // groups OWN — those params are represented by the compound control and so
   // are suppressed from the per-param loop below.
@@ -598,13 +616,14 @@ export function buildFilterBar(
         onKeyboardOwnerChange: options.onKeyboardOwnerChange,
       });
       handles.set(`group:${tr.group.key}`, trField);
-      timeSection.push(trField.el);
+      timeSection.push(stampFieldKey(trField.el, `group:${tr.group.key}`));
     }
     timeSection.push(h('span', { class: 'trf-sep', 'aria-hidden': 'true' }));
   }
 
   // The per-param fields (every param NOT owned by a time-range group).
-  const perParamFields = params.filter((p) => !suppressed.has(p.name)).map(buildParamField);
+  const perParamFields = params.filter((p) => !suppressed.has(p.name))
+    .map((p) => stampFieldKey(buildParamField(p), p.name));
 
   // Compose: Time section, then a "Filters" section label (only when BOTH a
   // Time section rendered AND at least one non-group field remains), then the
@@ -661,6 +680,27 @@ export function buildFilterBar(
       return null;
     },
     focusFieldTrigger: (key) => { handles.get(key)?.focusTrigger?.(); },
+    // #425: resolve by the stamped DOM key. A parameter a time-range group OWNS
+    // has no standalone field (it is suppressed from the per-param loop), so it
+    // resolves to that group's compound control — otherwise navigating to a
+    // from/to filter would wrongly report "no such filter".
+    fieldElement: (key) => {
+      const owning = timeRange.find((tr) =>
+        tr.group.fromParameter === key || tr.group.toParameter === key);
+      const stamped = owning ? `group:${owning.group.key}` : key;
+      // Searched from `timeEl`/`ordinaryEl`, NOT from `el`: the caller mounts
+      // those two regions separately (dashboard.ts splits the compound time
+      // controls into the primary toolbar and the ordinary fields into the filter
+      // row), which re-parents them out of `el` and leaves it empty.
+      // Matched by dataset read rather than an attribute selector: a parameter
+      // name is user data and would need escaping to be selector-safe.
+      for (const region of [timeEl, ordinaryEl]) {
+        for (const node of region.querySelectorAll<HTMLElement>('[data-field-key]')) {
+          if (node.dataset.fieldKey === stamped) return node;
+        }
+      }
+      return null;
+    },
     // #335: fold `refreshLabel` over the map — only time-range handles carry
     // it; every other handle skips (optional chaining), so this is a no-op for
     // a bar with no time-range controls.
diff --git a/src/ui/saved-history.ts b/src/ui/saved-history.ts
index 1f2aa0dd..48aefc30 100644
--- a/src/ui/saved-history.ts
+++ b/src/ui/saved-history.ts
@@ -17,6 +17,8 @@ import { isAutoRunnable } from '../core/sql-split.js';
 import { isQuerylessPanel } from '../core/panel-cfg.js';
 import { queryDescription, queryName, queryPanel, queryView } from '../core/saved-query.js';
 import { queryMembershipFavorite } from '../dashboard/application/tile-membership.js';
+import { selectedDashboardId } from '../application/main-surface.js';
+import { resolveCompatibilityDashboard } from '../workspace/workspace-dashboards.js';
 import { effectiveDashboardRole, rolePreviewView } from '../core/result-choice.js';
 import { filterRoleBadge } from './tabs.js';
 import type { App } from './app.types.js';
@@ -35,6 +37,22 @@ const dragProps = (sql: string): { draggable: string; ondragstart: (e: DragEvent
   ondragstart: (e: DragEvent) => e.dataTransfer!.setData(SUBQUERY_MIME, sql),
 });
 
+/**
+ * #425 — whether the star's membership write would land on the Dashboard the
+ * user is actually looking at. `toggleFavorite` writes the COMPATIBILITY
+ * Dashboard (#424's temporary favourite↔membership coupling), so it is only
+ * honest while that is also the selected one. True in Query mode — no Dashboard
+ * is on screen, and the one this phase's UI exposes IS the first entry — and true
+ * when the selected Dashboard is that first entry. Retired with the coupling
+ * itself in #427.
+ */
+function starTargetsSelectedDashboard(app: App): boolean {
+  const selectedId = selectedDashboardId(app.mainSurface);
+  if (selectedId === null) return true;
+  if (!app.currentWorkspace) return false;
+  return resolveCompatibilityDashboard(app.currentWorkspace).selectedId === selectedId;
+}
+
 export function renderSavedHistory(app: App): void {
   const tabsRow = app.dom.savedTabsRow;
   const list = app.dom.savedList;
@@ -138,6 +156,21 @@ function renderSaved(app: App, list: HTMLElement): void {
       class: 'sv-star' + (favorite ? ' on' : ''), title: favorite ? 'Unfavorite' : 'Favorite',
       onclick: async (e: Event) => {
         e.stopPropagation();
+        // #425 GATE: the star still drives tile membership through #424's
+        // temporary favourite coupling, which writes the COMPATIBILITY Dashboard
+        // (the collection's first entry) — not whichever Dashboard is selected.
+        // With the Library pane now visible beside a Dashboard, an ungated star
+        // would silently add a tile to a different Dashboard than the one on
+        // screen. Refuse rather than write the wrong one; #427 separates
+        // Dashboard-owned query copies from Library queries and retires this
+        // coupling, at which point the gate goes with it.
+        if (!starTargetsSelectedDashboard(app)) {
+          flashToast(
+            'Favourites still add panels to this workspace’s first dashboard — open that one to change its panels.',
+            { document: app.document },
+          );
+          return;
+        }
         // #343: star = explicit desired membership over the LATEST workspace.
         // `toggleFavorite` runs its transform through `app.mutateWorkspace`
         // (serializes + reads latest at dequeue) — no `serializeWrite` wrapper.
diff --git a/src/ui/shortcuts.ts b/src/ui/shortcuts.ts
index 3b364485..99445dd7 100644
--- a/src/ui/shortcuts.ts
+++ b/src/ui/shortcuts.ts
@@ -29,8 +29,8 @@ export interface ShortcutDefinition {
 /** The single shortcut catalogue. Help never documents a command unavailable to
  * the dispatcher because both paths resolve this list against the same app. */
 export const SHORTCUT_CATALOG: readonly ShortcutDefinition[] = [
-  { id: 'open-dashboard', label: 'Open Dashboard', section: 'application', surface: 'workspace', key: 'g-d', dispatch: 'application', sequence: ['g', 'd'], run: (e, a) => { e.preventDefault(); void a.navigateSqlRoute?.({ surface: 'dashboard', workspaceKey: a.state.workspaceKey, mode: 'edit' }, 'push'); return 'openDashboard'; } },
-  { id: 'open-workbench', label: 'Open SQL Browser', section: 'application', surface: 'dashboard', key: 'g-w', dispatch: 'application', sequence: ['g', 'w'], run: (e, a) => { e.preventDefault(); void a.navigateSqlRoute?.({ surface: 'workspace', workspaceKey: a.state.workspaceKey }, 'push'); return 'openWorkbench'; } },
+  { id: 'open-dashboard', label: 'Open Dashboard', section: 'application', surface: 'workspace', key: 'g-d', dispatch: 'application', sequence: ['g', 'd'], run: (e, a) => { e.preventDefault(); a.showDashboardSurface?.('edit'); return 'openDashboard'; } },
+  { id: 'open-workbench', label: 'Open SQL Browser', section: 'application', surface: 'dashboard', key: 'g-w', dispatch: 'application', sequence: ['g', 'w'], run: (e, a) => { e.preventDefault(); a.showQuerySurface?.(); return 'openWorkbench'; } },
   { id: 'run-query', label: 'Run query', section: 'workspace', surface: 'workspace', key: 'mod-enter', dispatch: 'application', available: (a) => a.activeTab().editorMode !== 'spec', matches: (e) => modKey(e) && e.key === 'Enter' && !e.shiftKey, run: (e, a) => { e.preventDefault(); a.actions.run(); return 'run'; } },
   { id: 'format-document', label: 'Format active document', section: 'workspace', surface: 'workspace', key: 'mod-shift-enter', dispatch: 'application', matches: (e) => modKey(e) && e.key === 'Enter' && !!e.shiftKey, run: (e, a) => { e.preventDefault(); if (a.activeTab().editorMode === 'spec') { a.actions.formatSpec(); return 'formatSpec'; } a.actions.formatQuery(); return 'formatQuery'; } },
   { id: 'save-query', label: 'Save query', section: 'workspace', surface: 'workspace', key: 'mod-s', dispatch: 'application', matches: (e) => modKey(e) && !e.shiftKey && e.key.toLowerCase() === 's', run: (e, a) => { e.preventDefault(); a.actions.save(); return 'save'; } },
@@ -41,8 +41,8 @@ export const SHORTCUT_CATALOG: readonly ShortcutDefinition[] = [
   { id: 'redo', label: 'Redo', section: 'workspace', surface: 'workspace', key: 'mod-shift-z', dispatch: 'editor' },
   { id: 'open-reference', label: 'Open reference for symbol', section: 'workspace', surface: 'workspace', key: 'f1', dispatch: 'editor' },
   { id: 'dashboard-refresh', label: 'Refresh all tiles', section: 'dashboard', surface: 'dashboard', key: 'mod-enter', dispatch: 'application', available: (a) => validDashboardPort(a), matches: (e) => modKey(e) && e.key === 'Enter' && !e.shiftKey, run: (e, a) => { e.preventDefault(); a.surfaceCommands!.refresh(); return 'dashboardRefresh'; } },
-  { id: 'dashboard-view', label: 'View mode', section: 'dashboard', surface: 'dashboard', key: 'g-v', dispatch: 'application', sequence: ['g', 'v'], run: (e, a) => { e.preventDefault(); if (a.sqlRoute.mode === 'view') return null; void a.navigateSqlRoute?.({ surface: 'dashboard', workspaceKey: a.state.workspaceKey, mode: 'view' }, 'replace'); return 'dashboardView'; } },
-  { id: 'dashboard-edit', label: 'Edit mode', section: 'dashboard', surface: 'dashboard', key: 'g-e', dispatch: 'application', sequence: ['g', 'e'], run: (e, a) => { e.preventDefault(); if (a.sqlRoute.mode === 'edit') return null; void a.navigateSqlRoute?.({ surface: 'dashboard', workspaceKey: a.state.workspaceKey, mode: 'edit' }, 'replace'); return 'dashboardEdit'; } },
+  { id: 'dashboard-view', label: 'View mode', section: 'dashboard', surface: 'dashboard', key: 'g-v', dispatch: 'application', sequence: ['g', 'v'], run: (e, a) => { e.preventDefault(); if (a.sqlRoute.mode === 'view') return null; a.showDashboardSurface?.('view'); return 'dashboardView'; } },
+  { id: 'dashboard-edit', label: 'Edit mode', section: 'dashboard', surface: 'dashboard', key: 'g-e', dispatch: 'application', sequence: ['g', 'e'], run: (e, a) => { e.preventDefault(); if (a.sqlRoute.mode === 'edit') return null; a.showDashboardSurface?.('edit'); return 'dashboardEdit'; } },
   { id: 'dashboard-grid-tiles', label: 'Grid Tiles', section: 'dashboard', surface: 'dashboard', key: 'g-g', dispatch: 'application', available: (a) => validDashboardPort(a), help: false, sequence: ['g', 'g'], run: (e, a) => { e.preventDefault(); a.surfaceCommands!.setDashboardStyle('grafana-grid'); return 'dashboardGridTiles'; } },
   { id: 'dashboard-full-view', label: 'Full view', section: 'dashboard', surface: 'dashboard', key: 'g-f', dispatch: 'application', available: (a) => validDashboardPort(a), help: false, sequence: ['g', 'f'], run: (e, a) => { e.preventDefault(); a.surfaceCommands!.setDashboardStyle('full'); return 'dashboardFullView'; } },
   { id: 'dashboard-report', label: 'Report', section: 'dashboard', surface: 'dashboard', key: 'g-r', dispatch: 'application', available: (a) => validDashboardPort(a), help: false, sequence: ['g', 'r'], run: (e, a) => { e.preventDefault(); a.surfaceCommands!.setDashboardStyle('report'); return 'dashboardReport'; } },
@@ -74,6 +74,10 @@ export interface ShortcutsApp {
   keyboardOwner?: KeyboardOwner | null;
   acquireKeyboardOwner(kind: KeyboardOwner['kind']): () => void;
   captureSurfaceGeneration?: () => number;
+  /** #425 — surface navigation goes through the main-surface API so the session
+   *  surface stays the one writer of the route. */
+  showQuerySurface?: () => void;
+  showDashboardSurface?: (mode: 'view' | 'edit') => void;
   navigateSqlRoute?: (route: SqlRoute, method: 'push' | 'replace') => Promise<void>;
   closeDocPane?: () => boolean;
   activeTab(): Pick<Tab, 'editorMode'>;
diff --git a/src/ui/workbench/workbench-shell.ts b/src/ui/workbench/workbench-shell.ts
index 64b2fd65..1b13159c 100644
--- a/src/ui/workbench/workbench-shell.ts
+++ b/src/ui/workbench/workbench-shell.ts
@@ -1,31 +1,32 @@
-// The signed-in workbench shell (#276 Phase 5) — `renderApp`'s ENTIRE former
-// body (header + sidebar + splitters + the workbench DOM + every reactive
-// effect + `workbench.attachShell` + the catalog bootstrap-load tail) moved
-// here byte-identically as `mountWorkbenchShell(deps)`. `src/ui/app.ts`'s own
-// exported `renderApp(app, helpers)` is now a thin composition call that
-// assembles `WorkbenchShellDeps` from the real `app` object and calls this.
+// The Workbench's query column (#276 Phase 5, narrowed by the #425 follow-up
+// prep split) — the tabs strip, editor toolbar, SQL/Spec editors, results
+// region, and every reactive effect/`attachShell`/mount call that's specific
+// to the query surface, mounted into a host `ui/app-shell.ts` owns (this
+// module no longer builds the header, sidebar, or mobile nav — see
+// `app-shell.ts`'s own header comment for those). `src/ui/app.ts`'s own
+// exported `renderApp(app, helpers)` composes both shells.
 //
 // `deps` is a narrow bag, NOT `App` — every value this shell's OWN logic
-// reads (root/document/state/actions/conn/catalog/sqlEditor/specEditor/
-// workbench session/queryDoc/prefs/matchMedia + the handful of app.ts-owned
-// DOM helper functions: updateSaveBtn/specBlocked/renderVarStrip/updateBanner/
-// setRunBtn/setExportBtn/activeTab) is its own field, read directly — never
-// through `app.*` — so this module is one step closer to not needing `app`
-// at all.
+// reads (document/state/actions/sqlEditor/specEditor/workbench session/
+// queryDoc/prefs/queryHost + the handful of app.ts-owned DOM helper
+// functions: updateSaveBtn/specBlocked/renderVarStrip/setRunBtn/setExportBtn/
+// activeTab) is its own field, read directly — never through `app.*` — so
+// this module is one step closer to not needing `app` at all.
 //
 // `deps.app` is the one deliberate exception (documented at its own field),
 // kept for three reasons that don't yet have a narrower home:
-//   1. The render-module pass-through: renderTabs/renderSchema/renderResults/
-//      renderSavedHistory/renderLibraryTitle all still take the full `App` —
-//      this shell receives `app` SOLELY to forward it to those calls (a
-//      documented crutch, not a license to read `app.*` for the shell's own
-//      logic — see CLAUDE.md rule 5 on speculative primitives: rewriting
-//      every render module to a narrow dep bag is out of scope here).
-//   2. `app.dom` itself: reset (`app.dom = {}`) and populated here, but every
-//      one of those render modules — and other files entirely (e.g.
+//   1. The render-module pass-through: renderTabs/renderResults still take
+//      the full `App` — this shell receives `app` SOLELY to forward it to
+//      those calls (a documented crutch, not a license to read `app.*` for
+//      the shell's own logic — see CLAUDE.md rule 5 on speculative
+//      primitives: rewriting every render module to a narrow dep bag is out
+//      of scope here).
+//   2. `app.dom` itself: populated here (not reset — `app-shell.ts` resets it
+//      exactly once, before either shell mounts), but every one of those
+//      render modules — and other files entirely (e.g.
 //      codemirror-adapter.ts's `app.dom.sqlEditorView = view`) — reach into
-//      `app.dom.*` directly, so the reset MUST land on the real object, not
-//      a decoupled copy this shell would own instead.
+//      `app.dom.*` directly, so the fields this shell owns must land on the
+//      real object, not a decoupled copy this shell would own instead.
 //   3. `app.updateEditorModeUi`/`app.syncSelection`: this shell DEFINES both
 //      closures and assigns them back onto `app` (not just calls them) —
 //      other app.ts closures (`setEditorMode`, `commitLinkedQuery`, …) and
@@ -44,29 +45,24 @@
 //
 // Every ordering comment, effect subscription set, and the `attachShell`
 // placement are preserved byte-identically — see the individual comments
-// below (ported verbatim from app.ts's history).
+// below (ported verbatim from app.ts's history, then from this module's own
+// pre-split history).
 
 import { h } from '../dom.js';
 import { Icon } from '../icons.js';
-import { MOBILE_BREAKPOINT_PX, savedForTab } from '../../state.js';
+import { savedForTab } from '../../state.js';
 import type { QueryTab as Tab, AppState as State } from '../../state.js';
 import { formatRows } from '../../core/format.js';
 import { effect } from '@preact/signals-core';
 import { renderTabs } from '../tabs.js';
-import { renderSchema } from '../schema.js';
 import { renderResults } from '../results.js';
 import type { QueryResult } from '../results.js';
-import { renderSavedHistory } from '../saved-history.js';
-import { renderLibraryTitle, renderDashboardNav } from '../file-menu.js';
-import { buildAppHeader } from '../app-header.js';
 import { SCHEMA_GRAPH_MIME } from '../dnd-mime.js';
 import { startDrag } from '../splitters.js';
-import type { DragCtx, DragRect, DragStartEvent, SplitterAxis } from '../splitters.js';
+import type { DragCtx, DragRect, DragStartEvent } from '../splitters.js';
 import type { App, ActionsRegistry } from '../app.types.js';
 import type { EditorPort } from '../../editor/editor-port.types.js';
 import type { SpecEditorPort, SpecDiagnostic } from '../../editor/spec-editor.types.js';
-import type { ConnectionSession } from '../../application/connection-session.js';
-import type { SchemaCatalogService } from '../../application/schema-catalog-service.js';
 import type { QueryDocumentSession } from '../../application/query-document-session.js';
 import type { AppPreferences, PreferenceKey } from '../../application/app-preferences.js';
 import type { WorkbenchSession } from './workbench-session.js';
@@ -76,20 +72,16 @@ import type { WorkbenchSession } from './workbench-session.js';
  *  shell's own logic, never through `app.*`. */
 export interface WorkbenchShellDeps {
   /** The full controller, kept ONLY for: the render-module pass-through
-   *  (renderTabs/renderSchema/renderResults/renderSavedHistory/
-   *  renderLibraryTitle), the `app.dom` reset + population (other modules
-   *  read `app.dom.*` directly), and assigning `app.updateEditorModeUi`/
+   *  (renderTabs/renderResults), `app.dom` population (other modules read
+   *  `app.dom.*` directly), and assigning `app.updateEditorModeUi`/
    *  `app.syncSelection` back onto the real object (other app.ts closures and
    *  other modules read them off it). The shell's own logic below never reads
    *  `app.*` beyond these three uses — see the fields below for everything
    *  else. */
   app: App;
-  root: Element | null;
   document: Document;
   state: State;
   actions: ActionsRegistry;
-  conn: Pick<ConnectionSession, 'email' | 'host'>;
-  catalog: Pick<SchemaCatalogService, 'loadSchema' | 'loadReference'>;
   sqlEditor: EditorPort;
   specEditor: SpecEditorPort;
   /** The route-scoped run/runScript/runEntry/cancel session (#276 Phase 3a) —
@@ -98,75 +90,40 @@ export interface WorkbenchShellDeps {
   workbench: Pick<WorkbenchSession, 'attachShell'>;
   queryDoc: Pick<QueryDocumentSession, 'revalidateSpecDrafts'>;
   prefs: Pick<AppPreferences, 'save'>;
-  matchMedia: ((query: string) => MediaQueryList) | null;
+  /** The host `ui/app-shell.ts`'s `mountAppShell` owns — this shell appends
+   *  its own `workbenchEl` into it instead of building the surrounding
+   *  header/sidebar/mobile-nav frame. */
+  queryHost: HTMLElement;
   activeTab(): Tab;
   updateSaveBtn(): void;
   specBlocked(tab: Tab): boolean;
   renderVarStrip(): void;
-  updateBanner(): void;
   setRunBtn(running: boolean, gate?: { missing: string[]; invalid: string[]; errors: string[] }): void;
   setExportBtn(exporting: boolean): void;
-  /** The DOM half of the theme toggle's caller (app.ts's own `toggleTheme`,
-   *  composing `prefs.toggleTheme()` with the `data-theme`/icon swap) —
-   *  this shell only ever wires it as the theme button's `onclick`. */
-  toggleTheme(): void;
   startDrag: typeof startDrag;
 }
 
-/** Build the signed-in shell and mount all regions. Ported byte-identically
- *  from app.ts's former `renderApp` body (#276 Phase 5) — every ordering
- *  comment below is original. */
+/** Build the query column and mount it into `deps.queryHost`. Ported
+ *  byte-identically from this module's former body, which was itself ported
+ *  byte-identically from app.ts's former `renderApp` body (#276 Phase 5) —
+ *  every ordering comment below is original. */
 export function mountWorkbenchShell(deps: WorkbenchShellDeps): () => void {
   const {
-    app, root, document: doc, state, actions, conn, catalog, sqlEditor, specEditor,
-    queryDoc, prefs, matchMedia, activeTab, updateSaveBtn, specBlocked, renderVarStrip,
-    updateBanner, setRunBtn, setExportBtn, toggleTheme, startDrag: doStartDrag,
+    app, document: doc, state, actions, sqlEditor, specEditor,
+    queryDoc, prefs, queryHost, activeTab, updateSaveBtn, specBlocked, renderVarStrip,
+    setRunBtn, setExportBtn, startDrag: doStartDrag,
   } = deps;
-  doc.documentElement.setAttribute('data-theme', state.theme);
-  doc.documentElement.setAttribute('data-density', state.density);
 
-  app.dom = {};
-  const header = buildAppHeader(app);
-
-  app.dom.schemaSearchInput = h('input', {
-    type: 'text', placeholder: 'Search tables, columns…',
-    oninput: (e: Event) => { state.schemaFilter.value = (e.target as HTMLInputElement).value; },
-  });
-  app.dom.schemaList = h('div', { class: 'schema-list' });
-  const schemaPane = h('div', { class: 'side-pane schema-pane', style: { height: state.sideSplitPct + '%', flexShrink: '0', minHeight: '0' } },
-    h('div', { class: 'schema-search' }, h('div', { class: 'search-wrap' }, Icon.search(), app.dom.schemaSearchInput)),
-    app.dom.schemaList);
-
-  app.dom.savedTabsRow = h('div', { class: 'side-tabs' });
-  app.dom.savedSearch = h('div', { class: 'saved-search' });
-  app.dom.savedList = h('div', { class: 'saved-list' });
-  const savedPane = h('div', { class: 'side-pane saved-pane', style: { flex: '1', minHeight: '0' } }, app.dom.savedTabsRow, app.dom.savedSearch, app.dom.savedList);
-
-  const sidebar = h('div', { class: 'sidebar', style: { width: state.sidebarPx + 'px' } });
-  const rectFor = (axis: SplitterAxis): DragRect => {
-    if (axis === 'sideRow') return sidebar.getBoundingClientRect();
-    return { top: app.dom.editorRegion!.getBoundingClientRect().top, bottom: app.dom.resultsRegion!.getBoundingClientRect().bottom };
-  };
+  // Only 'row' (editor/results split) runs through this ctx — the sidebar's
+  // 'col'/'sideRow' splitters are app-shell's own, over elements this shell
+  // has no business touching.
+  const rectFor = (): DragRect => ({ top: app.dom.editorRegion!.getBoundingClientRect().top, bottom: app.dom.resultsRegion!.getBoundingClientRect().bottom });
   const dragCtx: DragCtx = {
     state,
     rectFor,
-    apply: (axis, value) => {
-      if (axis === 'col') sidebar.style.width = value + 'px';
-      else if (axis === 'sideRow') schemaPane.style.height = value + '%';
-      else app.dom.editorRegion!.style.height = value + '%';
-    },
+    apply: (axis, value) => { app.dom.editorRegion!.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) });
-  // Mobile Tables view (#126): a Schema | Library segmented control at the top of
-  // the sidebar. CSS hides it above the breakpoint; below it, it swaps which pane
-  // shows (the sidebar's data-mobile-tab drives both the active-button style and
-  // the pane visibility — no JS effect needed for the active state).
-  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, 'Schema')),
-    h('button', { class: 'mseg-btn', 'data-seg': 'library', onclick: () => { state.mobileTab.value = 'library'; } }, Icon.layers(), h('span', null, 'Queries')));
-  sidebar.append(app.dom.mobileSegmented, schemaPane, app.dom.sideSplit, savedPane);
-  const sideHandle = h('div', { class: 'col-resize', onmousedown: (e: DragStartEvent) => doStartDrag(e, 'col', dragCtx) });
 
   app.dom.qtabsInner = h('div', { class: 'qtabs-inner' });
   const qtabsRow = h('div', { class: 'qtabs' }, app.dom.qtabsInner,
@@ -227,23 +184,7 @@ export function mountWorkbenchShell(deps: WorkbenchShellDeps): () => void {
   app.dom.editorResultsSplit = h('div', { class: 'row-resize', onmousedown: (e: DragStartEvent) => doStartDrag(e, 'row', dragCtx) });
 
   const workbenchEl = h('div', { class: 'workbench' }, qtabsRow, editorToolbar, app.dom.varStrip, app.dom.editorRegion, app.dom.editorResultsSplit, app.dom.resultsRegion);
-  app.dom.banner = h('div', { class: 'auth-banner', style: { display: 'none' } });
-  const mainRow = h('div', { class: 'main-row' }, sidebar, sideHandle, workbenchEl);
-
-  // 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
-  // effect below) picks which of sidebar / editor / results fills the screen.
-  // The Results tab carries a live badge (row count, or ● while a query streams).
-  app.dom.mobileBadge = h('span', { class: 'mnav-badge' });
-  const navBtn = (view: string, icon: SVGElement, label: string, extra?: HTMLElement): HTMLButtonElement => h('button', {
-    class: 'mobile-nav-btn', 'data-view': view, onclick: () => { state.mobileView.value = view as 'tables' | 'editor' | 'results'; },
-  }, h('span', { class: 'mnav-ic' }, icon, extra || null), h('span', { class: 'mnav-label' }, label));
-  app.dom.mobileNav = h('div', { class: 'mobile-nav' },
-    navBtn('tables', Icon.database(), 'Tables'),
-    navBtn('editor', Icon.code(), 'Editor'),
-    navBtn('results', Icon.table2(), 'Results', app.dom.mobileBadge));
-
-  root!.replaceChildren(header, app.dom.banner, mainRow, app.dom.mobileNav);
+  queryHost.appendChild(workbenchEl);
 
   sqlEditor.mount(app.dom.sqlEditorHost!);
   specEditor.mount(app.dom.specEditorHost!);
@@ -311,6 +252,10 @@ export function mountWorkbenchShell(deps: WorkbenchShellDeps): () => void {
   // directly from the session's own onChunk), the Run button (label + disabled,
   // reflecting the run state and the selection — Run ↔ Run selection), and the
   // mobile Results-nav badge (● while a query streams, else the row count).
+  // `setMobileBadge` writes into `app.dom.mobileBadge` — an app-shell-owned
+  // element (see app-shell.ts's own comment at its creation) — that crossing
+  // is deliberate: the badge summarizes THIS shell's run state, not the
+  // mobile nav's own concern.
   // Idempotent: re-registers (disposing the previous set) on every renderApp()
   // re-run.
   deps.workbench.attachShell({
@@ -341,65 +286,8 @@ export function mountWorkbenchShell(deps: WorkbenchShellDeps): () => void {
     state.hasSelection.value = sel.trim() !== '';
   };
   doc.addEventListener('selectionchange', app.syncSelection);
-  // 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
-  // also runs once now for the initial paint.
-  disposers.push(effect(() => {
-    state.schema.value;
-    state.schemaError.value;
-    state.schemaFilter.value;
-    state.expanded.value;
-    // Crossing the mobile breakpoint (#126) adds/removes each row's drag source
-    // and hover title, so repaint the tree when isMobile flips.
-    state.isMobile.value;
-    renderSchema(app);
-  }));
-  // The schema/auth-failure banner reflects schemaError (a separate surface).
-  disposers.push(effect(() => {
-    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.
-  disposers.push(effect(() => {
-    state.sidePanel.value;
-    renderSavedHistory(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).
-  disposers.push(effect(() => {
-    state.libraryName.value;
-    state.libraryDirty.value;
-    renderLibraryTitle(app);
-    // #302: the "Dashboard →" control's visibility tracks Dashboard presence,
-    // which changes alongside these signals (star toggle / import / replace all
-    // flip libraryDirty on their way through a commit).
-    renderDashboardNav(app);
-  }));
-  // Mobile mode (#126): mirror the viewport width into `isMobile` (drives the
-  // schema tree's drag/hover affordances, the results drop target, and the
-  // auto-navigation in the action wrappers) via the injected matchMedia seam.
-  // When the platform has no matchMedia the app stays in desktop JS mode — the
-  // mobile CSS still applies, just without JS branching.
-  const mq = matchMedia && matchMedia('(max-width: ' + MOBILE_BREAKPOINT_PX + 'px)');
-  const onMobileChange = (e: MediaQueryListEvent): void => { state.isMobile.value = e.matches; };
-  if (mq) {
-    state.isMobile.value = mq.matches;
-    mq.addEventListener('change', onMobileChange);
-  }
-  // 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; }));
-  disposers.push(effect(() => { sidebar.dataset.mobileTab = state.mobileTab.value; }));
-  catalog.loadSchema();
-  catalog.loadReference();
   return () => {
     for (const dispose of disposers) dispose();
     doc.removeEventListener('selectionchange', app.syncSelection!);
-    mq?.removeEventListener('change', onMobileChange);
   };
 }
diff --git a/src/workspace/import-planner.ts b/src/workspace/import-planner.ts
index 940c1279..bb271922 100644
--- a/src/workspace/import-planner.ts
+++ b/src/workspace/import-planner.ts
@@ -28,7 +28,9 @@ import { queryDashboardRole } from '../dashboard/model/workspace-semantics.js';
 import {
   importQueries, replaceWorkspaceContents,
 } from './workspace-operations.js';
-import { resolveCompatibilityDashboard, withCompatibilityDashboard } from './workspace-dashboards.js';
+import {
+  replaceDashboard, resolveCompatibilityDashboard, withCompatibilityDashboard,
+} from './workspace-dashboards.js';
 import type { WorkspaceIdGen } from './workspace-operations.js';
 import { validateStoredWorkspaceDocument } from './stored-workspace.js';
 import type { WorkspaceCodecOptions } from './stored-workspace.js';
@@ -391,6 +393,22 @@ function invalidatedDashboardPlan(
   );
 }
 
+/** #425: an EXPLICIT import target that no longer resolves to exactly one stored
+ *  Dashboard — deleted concurrently, or ambiguous under a duplicate id. The import
+ *  commits nothing rather than retargeting the compatibility slot: the caller
+ *  named a Dashboard, and writing a different one would destroy an entry the
+ *  import never mentioned. */
+function staleImportTargetPlan(
+  sourceDashboardId: string, targetDashboardId: string, queryMappings: IdMapping,
+): PortableBundleImportPlan {
+  return invalidPlan(
+    [diagnostic(['dashboards'], 'dashboard-import-target-stale',
+      'The dashboard this import targets was removed, or its id became ambiguous, before the import completed',
+      targetDashboardId)],
+    queryMappings, sourceDashboardId,
+  );
+}
+
 /** Queries-only import: merge the bundle's queries into the workspace's query
  * catalog per `decisions`. Imported favorited panels restore their Dashboard
  * tile membership — in the COMPATIBILITY Dashboard only (#424); every other
@@ -415,15 +433,21 @@ export function planImportQueries(
  *  or unmapped required dependency invalidates the plan (`candidateWorkspace:
  *  null`) rather than silently dropping the reference.
  *
- *  #424: the imported Dashboard takes the COMPATIBILITY slot — the one the
- *  current single-surface UI shows — and every other stored Dashboard is
- *  preserved in place. A `mode: 'replace'` id that collides with one of those
- *  is diagnosed by the candidate's `workspace-duplicate-dashboard-id` rule
- *  rather than silently overwriting an unrelated Dashboard. */
+ *  #424/#425: the imported Dashboard REPLACES the Dashboard the import was
+ *  invoked from — `targetDashboardId` when the caller has an explicit selection,
+ *  otherwise the COMPATIBILITY slot — and every other stored Dashboard is
+ *  preserved in place. Addressing the target by id matters once a non-first
+ *  Dashboard can be open: writing the compatibility slot would import "into" a
+ *  Dashboard the user is not looking at. An unknown `targetDashboardId` (deleted
+ *  concurrently) falls back to the compatibility slot rather than dropping the
+ *  import. A `mode: 'replace'` id that collides with another stored Dashboard is
+ *  diagnosed by the candidate's `workspace-duplicate-dashboard-id` rule rather
+ *  than silently overwriting an unrelated Dashboard. */
 export function planImportDashboard(
   workspace: StoredWorkspaceV3, bundle: PortableBundleV1, sourceDashboardId: string,
   decisions: readonly QueryDecision[], mode: 'copy' | 'replace', genId: WorkspaceIdGen,
   options: WorkspaceCodecOptions = {},
+  targetDashboardId: string | null = null,
 ): PortableBundleImportPlan {
   const source = bundle.dashboards.find((dashboard) => dashboard.id === sourceDashboardId);
   if (!source) return dashboardNotFoundPlan(sourceDashboardId, {});
@@ -441,10 +465,22 @@ export function planImportDashboard(
     ? { ...rewritten.dashboard, id: genId(), revision: 1 }
     : rewritten.dashboard;
 
-  const candidate = withCompatibilityDashboard(
-    replaceWorkspaceContents(workspace, { queries: nextQueries, dashboards: workspace.dashboards }),
-    finalDashboard,
+  const base = replaceWorkspaceContents(
+    workspace, { queries: nextQueries, dashboards: workspace.dashboards },
   );
+  // No explicit target: the legacy entry point writes the compatibility slot.
+  if (targetDashboardId === null) {
+    return validatedPlan(
+      withCompatibilityDashboard(base, finalDashboard), mapping, options, sourceDashboardId,
+    );
+  }
+  // An EXPLICIT target fails closed. `replaceDashboard` returns null when the id
+  // names no entry (deleted concurrently) or names more than one (ambiguous), and
+  // falling back to the compatibility slot there would overwrite the collection's
+  // FIRST Dashboard — silently retargeting exactly the way #425 forbids, and
+  // destroying a Dashboard the import never named.
+  const candidate = replaceDashboard(base, targetDashboardId, finalDashboard);
+  if (!candidate) return staleImportTargetPlan(sourceDashboardId, targetDashboardId, mapping);
   return validatedPlan(candidate, mapping, options, sourceDashboardId);
 }
 
diff --git a/src/workspace/workspace-dashboards.ts b/src/workspace/workspace-dashboards.ts
index 2317d9b7..b51577d7 100644
--- a/src/workspace/workspace-dashboards.ts
+++ b/src/workspace/workspace-dashboards.ts
@@ -45,6 +45,30 @@ export function findDashboard(
   return workspace.dashboards.find((dashboard) => dashboard.id === dashboardId) ?? null;
 }
 
+/** Why an id-addressed resolution failed, kept distinct because the two
+ *  outcomes mean different things to a caller: `missing` is an entry that was
+ *  deleted (fall back), `duplicate` is a workspace whose ids are ambiguous and
+ *  which therefore must never be written through a guess. */
+export type DashboardLookup =
+  | { status: 'ok'; dashboard: DashboardDocumentV1 }
+  | { status: 'missing' }
+  | { status: 'duplicate' };
+
+/**
+ * The Dashboard with this id under the exactly-one-match rule — the single
+ * definition of that data-integrity invariant, shared by every id-addressed
+ * reader and writer (`replaceDashboard` below, and the selected-surface
+ * resolution in `application/main-surface.ts`) so it can never drift into two
+ * copies that disagree.
+ */
+export function findDashboardStrict(
+  workspace: WorkspaceDashboards, dashboardId: string,
+): DashboardLookup {
+  const matches = workspace.dashboards.filter((dashboard) => dashboard.id === dashboardId);
+  if (matches.length === 1) return { status: 'ok', dashboard: matches[0] };
+  return { status: matches.length === 0 ? 'missing' : 'duplicate' };
+}
+
 /**
  * Replace EXACTLY ONE Dashboard, addressed by its stable id, preserving every
  * other entry and the collection's order. Returns `null` — committing nothing —
@@ -55,8 +79,7 @@ export function findDashboard(
 export function replaceDashboard(
   workspace: StoredWorkspaceV3, dashboardId: string, next: DashboardDocumentV1,
 ): StoredWorkspaceV3 | null {
-  const matches = workspace.dashboards.filter((dashboard) => dashboard.id === dashboardId);
-  if (matches.length !== 1) return null;
+  if (findDashboardStrict(workspace, dashboardId).status !== 'ok') return null;
   return {
     ...workspace,
     dashboards: workspace.dashboards.map((dashboard) => (dashboard.id === dashboardId ? next : dashboard)),
diff --git a/tests/e2e/dashboard-kpi-move.html b/tests/e2e/dashboard-kpi-move.html
index 7fbfba08..f1e70293 100644
--- a/tests/e2e/dashboard-kpi-move.html
+++ b/tests/e2e/dashboard-kpi-move.html
@@ -73,7 +73,19 @@
       const loaded = await app.workspace.loadById(seed.id);
       return loaded.status === 'ok' ? loaded.workspace : null;
     };
-    await renderDashboard(app);
+    // #425: the application shell owns the surface hosts and the header slot and
+    // hands the Dashboard a render target. This harness plays that role with two
+    // plain divs, so the fixture keeps exercising the real `renderDashboard`.
+    const headerSlot = document.createElement('div');
+    const dashboardHost = document.createElement('div');
+    root.replaceChildren(headerSlot, dashboardHost);
+    await renderDashboard(app, {
+      host: dashboardHost,
+      dashboardId: seeded.workspace.dashboards[0].id,
+      mode: 'edit',
+      focus: null,
+      setHeader: (header) => headerSlot.replaceChildren(header),
+    });
     window.__ready = true;
   </script>
 </body>
diff --git a/tests/e2e/dashboard-membership.html b/tests/e2e/dashboard-membership.html
index a7cffb4b..00e99cd4 100644
--- a/tests/e2e/dashboard-membership.html
+++ b/tests/e2e/dashboard-membership.html
@@ -55,14 +55,27 @@
       return result;
     };
 
+    // #425: the application shell owns the surface hosts and the header slot and
+    // hands the Dashboard a render target. This harness plays that role with two
+    // plain divs, so the fixture keeps exercising the real `renderDashboard`.
+    const headerSlot = document.createElement('div');
+    const dashboardHost = document.createElement('div');
+    const dashboardTarget = () => ({
+      host: dashboardHost,
+      dashboardId: (app.currentWorkspace?.dashboards[0] ?? null)?.id ?? null,
+      mode: 'edit',
+      focus: null,
+      setHeader: (header) => headerSlot.replaceChildren(header),
+    });
+
     function renderWorkbench() {
       const tabs = document.createElement('div');
       const search = document.createElement('div');
       const list = document.createElement('div');
       const open = document.createElement('button');
       open.textContent = 'Open Dashboard';
-      open.onclick = () => { void renderDashboard(app); };
-      root.replaceChildren(tabs, search, list, open);
+      open.onclick = () => { void renderDashboard(app, dashboardTarget()); };
+      root.replaceChildren(tabs, search, list, open, headerSlot, dashboardHost);
       app.dom.savedTabsRow = tabs;
       app.dom.savedSearch = search;
       app.dom.savedList = list;
diff --git a/tests/e2e/dashboard-mobile.html b/tests/e2e/dashboard-mobile.html
index 1b4987fe..33ce829e 100644
--- a/tests/e2e/dashboard-mobile.html
+++ b/tests/e2e/dashboard-mobile.html
@@ -14,6 +14,18 @@
 </head>
 <body data-theme="dark">
   <div id="root">
+    <!-- #425: production nests `.dash-page` inside the shell's `.dashboard-host`
+         (the flex:1 sibling of the sidebar in `.main-row`), not directly in
+         `#root`. Mirrored here so this fixture's sticky-topbar, scroll-host and
+         tile-width assertions keep measuring the real box model. -->
+    <div class="main-row" data-surface="dashboard">
+    <!-- #425: the sidebar and the col-resize handle are real siblings of the
+         Dashboard host in production. Present here so the mobile rules that hide
+         them for a full-bleed Dashboard are actually exercised — nothing else in
+         the suite can, since happy-dom applies no CSS. -->
+    <div class="sidebar" style="width: 248px"><div class="schema-list"></div></div>
+    <div class="col-resize"></div>
+    <div class="dashboard-host">
     <div class="dash-page">
       <div class="dash-topbar">
         <div id="shared-header"></div>
@@ -31,6 +43,11 @@
         <section class="dash-tile"><div class="dash-tile-head">Panel four</div></section>
       </main>
     </div>
+    </div>
+    </div>
+    <!-- The bottom nav is a sibling of `.main-row`, which is exactly the
+         relationship the `~ .mobile-nav` rule depends on. -->
+    <div class="mobile-nav"><button class="mobile-nav-btn" data-view="tables">Tables</button></div>
   </div>
   <script type="module">
     import { buildRecentField } from '/src/ui/recent-field.js';
@@ -124,9 +141,14 @@
       actions: {
         openUserMenu: () => {},
         openShortcuts: () => {},
-        openDashboard: () => {},
+        showDashboard: () => {},
       },
       toggleTheme: () => {},
+      // #425: the header's surface switch goes through these two seams now, not
+      // `navigateSqlRoute` — without them a click on "SQL Browser" would throw.
+      showQuerySurface: () => {},
+      showDashboardSurface: () => {},
+      mainSurface: { kind: 'query' },
       navigateSqlRoute: async () => {},
       editingLibrary: false,
     };
diff --git a/tests/e2e/dashboard-mobile.spec.js b/tests/e2e/dashboard-mobile.spec.js
index 193e24bc..b9d90a14 100644
--- a/tests/e2e/dashboard-mobile.spec.js
+++ b/tests/e2e/dashboard-mobile.spec.js
@@ -7,6 +7,41 @@ async function openAt(page, width, height = 844) {
 }
 
 test.describe('Dashboard mobile layout', () => {
+  // #425: a Dashboard is full-bleed on mobile — the sidebar, its resize handle and
+  // the bottom Tables/Editor/Results nav all belong to the Query surface. Only a
+  // real browser can check this; happy-dom applies no CSS.
+  test('hides the sidebar and the bottom nav for a full-bleed Dashboard', async ({ page }) => {
+    await openAt(page, 390);
+    const hidden = await page.evaluate(() => ({
+      sidebar: getComputedStyle(document.querySelector('.sidebar')).display,
+      handle: getComputedStyle(document.querySelector('.col-resize')).display,
+      nav: getComputedStyle(document.querySelector('.mobile-nav')).display,
+      dashWidth: Math.round(document.querySelector('.dash-page').getBoundingClientRect().width),
+      viewport: document.documentElement.clientWidth,
+      pageOverflow: document.documentElement.scrollWidth - innerWidth,
+    }));
+    expect(hidden.sidebar).toBe('none');
+    expect(hidden.handle).toBe('none');
+    expect(hidden.nav).toBe('none');
+    // The Dashboard therefore gets the whole viewport width, with no page overflow.
+    expect(hidden.dashWidth).toBe(hidden.viewport);
+    expect(hidden.pageOverflow).toBeLessThanOrEqual(0);
+  });
+
+  // At desktop widths the sidebar STAYS beside the Dashboard — that is the point
+  // of #425's shell split, and the mobile rules must not leak upward.
+  test('keeps the sidebar beside the Dashboard at desktop widths', async ({ page }) => {
+    await openAt(page, 1280, 900);
+    const geometry = await page.evaluate(() => ({
+      sidebar: getComputedStyle(document.querySelector('.sidebar')).display,
+      sidebarWidth: Math.round(document.querySelector('.sidebar').getBoundingClientRect().width),
+      dashLeft: Math.round(document.querySelector('.dashboard-host').getBoundingClientRect().left),
+    }));
+    expect(geometry.sidebar).not.toBe('none');
+    expect(geometry.sidebarWidth).toBeGreaterThan(200);
+    expect(geometry.dashLeft).toBeGreaterThanOrEqual(geometry.sidebarWidth);
+  });
+
   test('keeps the shared application header on one line at phone widths', async ({ page }) => {
     await openAt(page, 390);
     const header = page.locator('.app-header');
diff --git a/tests/helpers/fake-app.ts b/tests/helpers/fake-app.ts
index 87e1abab..5abb7975 100644
--- a/tests/helpers/fake-app.ts
+++ b/tests/helpers/fake-app.ts
@@ -47,6 +47,7 @@ import type { ExportService } from '../../src/application/export-service.js';
 import type { QueryDocumentSession } from '../../src/application/query-document-session.js';
 import type { WorkspaceRepository } from '../../src/workspace/workspace-repository.js';
 import { resolveCompatibilityDashboard } from '../../src/workspace/workspace-dashboards.js';
+import { QUERY_SURFACE } from '../../src/application/main-surface.js';
 import type { StoredWorkspaceV3 } from '../../src/generated/json-schema.types.js';
 import type {
   SavedQueryService, CreateSavedResult, CommitLinkedResult, ShareResult,
@@ -431,6 +432,9 @@ const appDefaults: App = {
     markOpened: async () => ({ ok: true }),
   },
   sqlRoute: { surface: 'workspace', workspaceKey: null },
+  // #425: the Query surface is the inert default; a Dashboard fixture overrides
+  // `mainSurface` with its own selection.
+  mainSurface: QUERY_SURFACE,
   currentWorkspace: null,
   workspaceRouteStatus: 'ready',
   keyboardOwner: null,
@@ -572,6 +576,9 @@ const appDefaults: App = {
   renderApp: () => {},
   renderDashboard: () => {},
   openDashboard: () => {},
+  showQuerySurface: () => {},
+  showDashboardSurface: () => {},
+  openSavedQuery: () => {},
   actions: {} as ActionsRegistry,
 };
 
@@ -849,7 +856,7 @@ export function makeApp<O extends AppOverrides = Record<string, never>>(override
       insertCreate: vi.fn(),
       openCreateInNewTab: vi.fn(),
       openShortcuts: vi.fn(),
-      openDashboard: vi.fn(),
+      showDashboard: vi.fn(),
       exportDashboard: vi.fn(),
       importDashboard: vi.fn(),
       openUserMenu: vi.fn(),
diff --git a/tests/unit/app.test.ts b/tests/unit/app.test.ts
index 2446f491..ca1a6212 100644
--- a/tests/unit/app.test.ts
+++ b/tests/unit/app.test.ts
@@ -24,7 +24,9 @@ import type { App, WorkspaceChangedMessage } from '../../src/ui/app.types.js';
 import type { AppState, QueryTab } from '../../src/state.js';
 import { renameSaved, savedForTab } from '../../src/state.js';
 import type { SchemaDb } from '../../src/core/from-scope.js';
-import type { SavedQueryV2, StoredWorkspaceV3 } from '../../src/generated/json-schema.types.js';
+import type {
+  DashboardDocumentV1, SavedQueryV2, StoredWorkspaceV3,
+} from '../../src/generated/json-schema.types.js';
 import type { CompletionItem, AssembledReference } from '../../src/core/completions.js';
 import type {
   QueryResult, ScriptResult, ScriptExportResult, ScriptEntry, ScriptExportEntry, ResultSchemaGraph,
@@ -270,6 +272,21 @@ const completionsOf = (app: App): CompletionItem[] => asCompletions(app.catalog.
 const qs = <T extends Element = HTMLElement>(root: ParentNode | null, selector: string): T => root!.querySelector(selector) as T;
 const qsa = <T extends Element = HTMLElement>(root: ParentNode | null, selector: string): T[] =>
   [...root!.querySelectorAll(selector)] as T[];
+/**
+ * #425: which main work surface is EXPOSED. Both hosts stay mounted — that is
+ * what preserves the Query surface across a Dashboard round trip — so presence
+ * alone no longer distinguishes them; the contract is which host is `hidden`.
+ * The Dashboard's own DOM is still torn down when it is left (its viewer session
+ * goes with it), so `.dash-page` is genuinely absent in Query mode, while
+ * `.workbench` survives either way.
+ */
+const expectSurface = (app: App, kind: 'query' | 'dashboard'): void => {
+  expect(qs(app.root, '.workbench')).not.toBeNull();
+  expect(qs<HTMLElement>(app.root, '.query-host').hidden).toBe(kind !== 'query');
+  expect(qs<HTMLElement>(app.root, '.dashboard-host').hidden).toBe(kind !== 'dashboard');
+  expect(qs(app.root, '.dash-page') === null).toBe(kind !== 'dashboard');
+  expect(qs(app.root, '.main-row').dataset.surface).toBe(kind);
+};
 // `AppDom` (app.types.ts) documents "known-consumed keys, not a closed
 // interface" — a couple of assertions below confirm a legacy/never-built key
 // (validateSpecBtn/revertSpecBtn) stays absent, which needs a read outside the
@@ -970,7 +987,6 @@ describe('renderApp shell', () => {
     expect(qsa(app.root, '.app-surface-switch .editor-mode-btn').map((button) => button.getAttribute('aria-label')))
       .toEqual(['SQL Browser', 'Dashboard']);
     expect(qs(app.root, '.dashboard-mode-switch')).toBeNull();
-    app.navigateSqlRoute = vi.fn(async () => {});
     // File → New workspace replaces the active aggregate without rebuilding
     // this header. Its surface controls must route to the replacement, not
     // the key captured when the header first mounted.
@@ -979,11 +995,16 @@ describe('renderApp shell', () => {
       name: 'SQL Library', queries: [], dashboards: [],
     };
     app.state.workspaceKey = 'sql_library_7';
+    app.renderCurrentSurface = vi.fn();
     qsa<HTMLButtonElement>(app.root, '.app-surface-switch .editor-mode-btn')
       .find((button) => button.textContent === 'Dashboard')!.click();
-    expect(app.navigateSqlRoute).toHaveBeenCalledWith({
+    // #425: the control goes through the main-surface API, which writes the
+    // route from the session surface — asserted on the resulting route itself,
+    // so a control that captured the stale key still fails here.
+    expect(app.sqlRoute).toEqual({
       surface: 'dashboard', workspaceKey: 'sql_library_7', mode: 'edit',
-    }, 'push');
+    });
+    expect(app.renderCurrentSurface).toHaveBeenCalled();
     expect(qs(app.root, '.sidebar')).not.toBeNull();
     expect(qs(app.root, '.cm-editor')).not.toBeNull();
     // user control shows the short name (local-part) + full email on hover
@@ -5244,7 +5265,9 @@ describe('unified /sql routing', () => {
     };
     app.workspaceRouteStatus = 'ready';
     app.renderCurrentSurface = vi.fn();
-    app.openDashboard();
+    // The empty-collection legacy path: no Dashboard to address by id, so the
+    // surface itself is opened and shows "Create dashboard".
+    app.showDashboardSurface('edit');
     await Promise.resolve();
     expect(pushState).toHaveBeenCalledWith(
       null, '', '/sql?ws=workspace_nine&surface=dashboard',
@@ -5273,6 +5296,365 @@ describe('unified /sql routing', () => {
     replaceState.mockRestore();
   });
 
+  // #425 — the main-surface navigation API. Selection is session state keyed by
+  // the stable Dashboard id; the route is always DERIVED from it.
+  describe('main surface selection (#425)', () => {
+    const dash = (id: string): DashboardDocumentV1 => ({
+      documentVersion: 1, id, title: id.toUpperCase(), revision: 1,
+      layout: { type: 'flow', version: 1, preset: 'report', items: {} },
+      filters: [], tiles: [],
+    });
+    /** `live: true` renders for real — for the surface-HOST contract (what stays
+     *  mounted, what is exposed). Otherwise rendering is stubbed, so a test can
+     *  assert the state transition without building any DOM. */
+    const readyApp = (ids: string[], search = '?ws=ops', live = false) => {
+      const location = {
+        origin: 'https://ch.example', pathname: '/sql', search, hash: '', host: 'ch.example',
+      } as Location;
+      const app = createApp(env({ location }));
+      // PROJECT the workspace, don't just assign it: `applyCommittedWorkspace` is
+      // what sets `state.workspaceId`, and without it every later projection of
+      // the same workspace would read as a workspace SWITCH (which now clears the
+      // Dashboard selection).
+      app.applyCommittedWorkspace({
+        storageVersion: 3, id: 'w', key: 'ops', name: 'Ops', queries: [], dashboards: ids.map(dash),
+      });
+      if (!live) app.renderCurrentSurface = vi.fn();
+      return { app, location };
+    };
+    const liveApp = (ids: string[], search = '?ws=ops') => readyApp(ids, search, true);
+
+    it('opens any Dashboard by stable id, in either mode, independent of position', () => {
+      const { app } = readyApp(['first', 'second']);
+      app.openDashboard({ dashboardId: 'second', mode: 'view' });
+      expect(app.mainSurface).toEqual({
+        kind: 'dashboard', dashboardId: 'second', mode: 'view', focus: null,
+      });
+      expect(app.sqlRoute).toEqual({ surface: 'dashboard', workspaceKey: 'ops', mode: 'view' });
+      expect(app.renderCurrentSurface).toHaveBeenCalledTimes(1);
+    });
+
+    it('carries an optional focus target into the selection', () => {
+      const { app } = readyApp(['a']);
+      app.openDashboard({ dashboardId: 'a', mode: 'edit', focus: { kind: 'tile', id: 't7' } });
+      expect(app.mainSurface).toEqual({
+        kind: 'dashboard', dashboardId: 'a', mode: 'edit', focus: { kind: 'tile', id: 't7' },
+      });
+    });
+
+    it('pushes one history entry entering the Dashboard and REPLACES on a mode change', () => {
+      const pushState = vi.spyOn(window.history, 'pushState').mockImplementation(() => {});
+      const replaceState = vi.spyOn(window.history, 'replaceState').mockImplementation(() => {});
+      const { app } = readyApp(['a']);
+      app.openDashboard({ dashboardId: 'a', mode: 'edit' });
+      expect(pushState).toHaveBeenCalledWith(null, '', '/sql?ws=ops&surface=dashboard');
+      expect(replaceState).not.toHaveBeenCalled();
+      app.openDashboard({ dashboardId: 'a', mode: 'view' });
+      expect(replaceState).toHaveBeenCalledWith(null, '', '/sql?ws=ops&surface=dashboard&mode=view');
+      expect(pushState).toHaveBeenCalledTimes(1);
+      // Leaving for the Query surface is a real navigation again.
+      app.showQuerySurface();
+      expect(pushState).toHaveBeenLastCalledWith(null, '', '/sql?ws=ops');
+      expect(app.mainSurface).toEqual({ kind: 'query' });
+      pushState.mockRestore();
+      replaceState.mockRestore();
+    });
+
+    it('reports a missing id without mutating the workspace or the surface', () => {
+      const { app } = readyApp(['a']);
+      const before = app.currentWorkspace;
+      app.openDashboard({ dashboardId: 'gone', mode: 'edit' });
+      expect(app.mainSurface).toEqual({ kind: 'query' });
+      expect(app.sqlRoute).toEqual({ surface: 'workspace', workspaceKey: 'ops' });
+      expect(app.currentWorkspace).toBe(before);
+      expect(app.renderCurrentSurface).not.toHaveBeenCalled();
+      expect(document.querySelector('.share-toast')!.textContent)
+        .toContain('no longer part of this workspace');
+    });
+
+    it('fails a DUPLICATE id through diagnostics rather than guessing an entry', () => {
+      const { app } = readyApp(['dup', 'dup']);
+      app.openDashboard({ dashboardId: 'dup', mode: 'edit' });
+      expect(app.mainSurface).toEqual({ kind: 'query' });
+      expect(app.renderCurrentSurface).not.toHaveBeenCalled();
+      expect(document.querySelector('.share-toast')!.textContent).toContain('more than one dashboard');
+    });
+
+    it('re-opening the same id and mode keeps the live session and only re-applies focus', () => {
+      const { app } = readyApp(['a'], '?ws=ops&surface=dashboard');
+      app.openDashboard({ dashboardId: 'a', mode: 'edit' });
+      expect(app.renderCurrentSurface).toHaveBeenCalledTimes(1);
+      // Same id + mode, no focus: nothing to re-render.
+      app.openDashboard({ dashboardId: 'a', mode: 'edit' });
+      expect(app.renderCurrentSurface).toHaveBeenCalledTimes(1);
+      // A focus target does need the surface to deliver it.
+      app.openDashboard({ dashboardId: 'a', mode: 'edit', focus: { kind: 'filter', id: 'f1' } });
+      expect(app.renderCurrentSurface).toHaveBeenCalledTimes(2);
+      expect(app.mainSurface).toEqual({
+        kind: 'dashboard', dashboardId: 'a', mode: 'edit', focus: { kind: 'filter', id: 'f1' },
+      });
+    });
+
+    it('a legacy no-chooser entry point opens the compatibility Dashboard BY ID', () => {
+      const { app } = readyApp(['first', 'second']);
+      app.showDashboardSurface('edit');
+      expect(app.mainSurface).toEqual({
+        kind: 'dashboard', dashboardId: 'first', mode: 'edit', focus: null,
+      });
+    });
+
+    it('the "Dashboard →" nav action opens the compatibility Dashboard by id', () => {
+      const { app } = readyApp(['first', 'second']);
+      app.actions.showDashboard();
+      expect(app.mainSurface).toEqual({
+        kind: 'dashboard', dashboardId: 'first', mode: 'edit', focus: null,
+      });
+    });
+
+    it('every existing query-opening path switches back to the Query surface', () => {
+      const { app } = readyApp(['a'], '?ws=ops&surface=dashboard');
+      app.openDashboard({ dashboardId: 'a', mode: 'edit' });
+      app.actions.loadIntoNewTab('From history', 'SELECT 1');
+      expect(app.mainSurface).toEqual({ kind: 'query' });
+      expect(app.sqlRoute).toEqual({ surface: 'workspace', workspaceKey: 'ops' });
+    });
+
+    it('a legacy mode switch RETAINS the selected Dashboard instead of re-resolving the first', () => {
+      const { app } = readyApp(['first', 'second']);
+      app.openDashboard({ dashboardId: 'second', mode: 'edit' });
+      app.showDashboardSurface('view');
+      expect(app.mainSurface).toEqual({
+        kind: 'dashboard', dashboardId: 'second', mode: 'view', focus: null,
+      });
+    });
+
+    it('an empty collection still reaches the Dashboard surface for "Create dashboard"', () => {
+      const { app } = readyApp([]);
+      app.showDashboardSurface('edit');
+      expect(app.sqlRoute).toEqual({ surface: 'dashboard', workspaceKey: 'ops', mode: 'edit' });
+      // No document exists, so nothing is selected.
+      expect(app.mainSurface).toEqual({ kind: 'query' });
+      expect(app.renderCurrentSurface).toHaveBeenCalledTimes(1);
+    });
+
+    it('returns to Query mode — never another Dashboard — when the selection is deleted', () => {
+      const { app } = readyApp(['first', 'second']);
+      app.openDashboard({ dashboardId: 'second', mode: 'view' });
+      app.applyCommittedWorkspace({
+        storageVersion: 3, id: 'w', key: 'ops', name: 'Ops', queries: [], dashboards: [dash('first')],
+      });
+      expect(app.mainSurface).toEqual({ kind: 'query' });
+      // The URL must not keep claiming a Dashboard surface this session has no
+      // document for.
+      expect(app.sqlRoute).toEqual({ surface: 'workspace', workspaceKey: 'ops' });
+    });
+
+    // A Dashboard id is unique WITHIN a workspace, not globally, so a workspace
+    // switch ALWAYS clears the selection — including when the incoming workspace
+    // happens to carry the same id. Preserving it there would silently open an
+    // unrelated Dashboard, and the next edit would commit to the wrong resource.
+    it('clears the selection on a workspace switch, even for a colliding Dashboard id', () => {
+      const { app } = readyApp(['only-here']);
+      app.openDashboard({ dashboardId: 'only-here', mode: 'edit' });
+      app.applyCommittedWorkspace({
+        storageVersion: 3, id: 'w2', key: 'other', name: 'Other', queries: [], dashboards: [dash('shared')],
+      });
+      expect(app.mainSurface).toEqual({ kind: 'query' });
+
+      // The dangerous case: BOTH workspaces have a Dashboard called `main`.
+      const { app: collided } = readyApp(['main']);
+      collided.openDashboard({ dashboardId: 'main', mode: 'view' });
+      collided.applyCommittedWorkspace({
+        storageVersion: 3, id: 'w2', key: 'other', name: 'Other', queries: [], dashboards: [dash('main')],
+      });
+      expect(collided.mainSurface).toEqual({ kind: 'query' });
+
+      // …while a SAME-workspace projection still re-validates and keeps it.
+      const { app: kept } = readyApp(['x', 'shared']);
+      kept.openDashboard({ dashboardId: 'shared', mode: 'view' });
+      // Same workspace id → a re-projection, not a switch.
+      kept.applyCommittedWorkspace({
+        storageVersion: 3, id: 'w', key: 'ops', name: 'Ops', queries: [],
+        dashboards: [dash('shared'), dash('x')],
+      });
+      expect(kept.mainSurface).toEqual({
+        kind: 'dashboard', dashboardId: 'shared', mode: 'view', focus: null,
+      });
+    });
+
+    it('opening a saved query returns to the Query surface', () => {
+      const { app } = readyApp(['a'], '?ws=ops&surface=dashboard');
+      app.openDashboard({ dashboardId: 'a', mode: 'edit' });
+      app.state.savedQueries = [savedQuery({ id: 'q1', name: 'Sales', sql: 'SELECT 1' })];
+      app.openSavedQuery('q1');
+      expect(app.mainSurface).toEqual({ kind: 'query' });
+      expect(app.sqlRoute).toEqual({ surface: 'workspace', workspaceKey: 'ops' });
+      expect(app.state.tabs.value.some((tab) => tab.savedId === 'q1')).toBe(true);
+    });
+
+    it('clears the surface and invalidates pending Dashboard callbacks on sign-out', () => {
+      const { app } = readyApp(['a'], '?ws=ops&surface=dashboard');
+      app.openDashboard({ dashboardId: 'a', mode: 'edit' });
+      const staleGeneration = app.captureSurfaceGeneration();
+      app.signOut();
+      expect(app.mainSurface).toEqual({ kind: 'query' });
+      expect(app.isSurfaceGenerationCurrent(staleGeneration)).toBe(false);
+    });
+
+    // The surface-HOST contract: what a switch keeps mounted, and what it exposes.
+    it('a Dashboard owns the whole work area while the sidebar stays visible', () => {
+      const { app } = liveApp(['a']);
+      app.renderCurrentSurface();
+      expectSurface(app, 'query');
+      app.openDashboard({ dashboardId: 'a', mode: 'edit' });
+      expectSurface(app, 'dashboard');
+      // The complete editor-plus-results surface is hidden, not merely covered —
+      // so no invisible result drawer consumes layout space.
+      expect(qs<HTMLElement>(app.root, '.query-host').hidden).toBe(true);
+      expect(qs(app.root, '.editor-region')).not.toBeNull();
+      expect(qs(app.root, '.results-region')).not.toBeNull();
+      // ...and the left sidebar is untouched by the switch.
+      expect(qs<HTMLElement>(app.root, '.sidebar').hidden).toBe(false);
+      expect(qs(app.root, '.schema-list')).not.toBeNull();
+      expect(app.dom.schemaList!.isConnected).toBe(true);
+    });
+
+    it('preserves the Query surface across a Dashboard round trip', () => {
+      const { app } = liveApp(['a']);
+      app.renderCurrentSurface();
+      app.actions.newTab();
+      const activeTabId = app.state.activeTabId.value;
+      app.sqlEditor.replaceDocument('SELECT 42');
+      // Identity, not just presence: the pre-#425 swap rebuilt these nodes, so a
+      // reconstructed surface would fail here even though it looked the same.
+      const editorHost = app.dom.sqlEditorHost;
+      const resultsRegion = app.dom.resultsRegion;
+      app.dom.editorRegion!.style.height = '40%';
+
+      app.openDashboard({ dashboardId: 'a', mode: 'edit' });
+      app.showQuerySurface();
+
+      expectSurface(app, 'query');
+      expect(app.dom.sqlEditorHost).toBe(editorHost);
+      expect(app.dom.resultsRegion).toBe(resultsRegion);
+      expect(app.dom.editorRegion!.style.height).toBe('40%');
+      expect(app.state.activeTabId.value).toBe(activeTabId);
+      expect(app.sqlEditor.getValue()).toBe('SELECT 42');
+      // One editor model in that host, not a second one built by the return trip.
+      // (The root holds two CM6 views in total — the SQL editor and the Spec
+      // editor — so the count is scoped to the SQL host.)
+      expect(qsa(app.dom.sqlEditorHost!, '.cm-editor')).toHaveLength(1);
+    });
+
+    it('does not cancel the open editor query merely because the surface changed', () => {
+      const { app } = liveApp(['a']);
+      app.renderCurrentSurface();
+      const destroy = vi.spyOn(app.workbench, 'destroy');
+      app.openDashboard({ dashboardId: 'a', mode: 'edit' });
+      app.showQuerySurface();
+      // `workbench.destroy()` aborts the in-flight request and issues KILL QUERY.
+      expect(destroy).not.toHaveBeenCalled();
+      // A real end-of-session event still tears it down.
+      app.signOut();
+      expect(destroy).toHaveBeenCalled();
+    });
+
+    it('leaks no second surface, editor, or sidebar across repeated switching', () => {
+      const { app } = liveApp(['a']);
+      app.renderCurrentSurface();
+      const editorHost = app.dom.sqlEditorHost;
+      for (let i = 0; i < 3; i += 1) {
+        app.openDashboard({ dashboardId: 'a', mode: 'edit' });
+        app.showQuerySurface();
+      }
+      expect(qsa(app.root, '.workbench')).toHaveLength(1);
+      expect(qsa(app.root, '.sidebar')).toHaveLength(1);
+      expect(qsa(app.root, '.app-header')).toHaveLength(1);
+      expect(qsa(app.root, '.dash-page')).toHaveLength(0);
+      expect(qsa(app.dom.sqlEditorHost!, '.cm-editor')).toHaveLength(1);
+      expect(app.dom.sqlEditorHost).toBe(editorHost);
+    });
+
+    it('re-enables nothing and disables nothing on a same-workspace Back navigation', async () => {
+      const { app, location } = liveApp(['a'], '?ws=ops&surface=dashboard');
+      app.renderCurrentSurface();
+      expectSurface(app, 'dashboard');
+      location.search = '?ws=ops';
+      await app.handleSqlPopState();
+      // The still-mounted Query controls must stay live: the pre-#425 teardown on
+      // this path disabled every control under the root, permanently.
+      expectSurface(app, 'query');
+      expect(qs<HTMLButtonElement>(app.root, '.run-btn').disabled).toBe(false);
+      expect(qs<HTMLInputElement>(app.root, '.schema-search input').disabled).toBe(false);
+    });
+
+    it('RENDERS the Query surface when the selected Dashboard is deleted', () => {
+      const { app } = liveApp(['first', 'second'], '?ws=ops&surface=dashboard');
+      app.openDashboard({ dashboardId: 'second', mode: 'edit' });
+      expectSurface(app, 'dashboard');
+      // A commit that drops the selection must not just record the fallback in
+      // state: leaving the Dashboard host exposed wedges the app, because every
+      // route back then early-returns on "state and route already agree".
+      app.applyCommittedWorkspace({
+        storageVersion: 3, id: 'w', key: 'ops', name: 'Ops', queries: [], dashboards: [dash('first')],
+      });
+      expect(app.mainSurface).toEqual({ kind: 'query' });
+      expect(app.sqlRoute).toEqual({ surface: 'workspace', workspaceKey: 'ops' });
+      expectSurface(app, 'query');
+    });
+
+    it('does not re-mount the signed-in shell over the login screen after sign-out', () => {
+      const { app } = liveApp(['a'], '?ws=ops&surface=dashboard');
+      app.renderCurrentSurface();
+      const staleGeneration = app.captureSurfaceGeneration();
+      app.signOut();
+      expect(qs(app.root, '.login-screen')).not.toBeNull();
+      // A write that resolves just AFTER sign-out reports its surface stale. It
+      // must not take the "refresh the ready surface" branch — the projected
+      // workspace is deliberately still there for the next sign-in.
+      expect(app.refreshCurrentSurfaceAfterStale(staleGeneration, true)).toBe(false);
+      expect(qs(app.root, '.login-screen')).not.toBeNull();
+      expect(qs(app.root, '.workbench')).toBeNull();
+    });
+
+    it('closes the Dashboard command port when auth is lost mid-session', () => {
+      const { app } = liveApp(['a'], '?ws=ops&surface=dashboard');
+      app.renderCurrentSurface();
+      expect(app.surfaceCommands).not.toBeNull();
+      // A 401 / expired token reaches `showLogin`, not `signOut` — the Dashboard's
+      // refresh and style shortcuts must not stay dispatchable from Login.
+      app.showLogin('Session expired');
+      expect(app.surfaceCommands).toBeNull();
+      expect(app.mainSurface).toEqual({ kind: 'query' });
+      expect(qs(app.root, '.login-screen')).not.toBeNull();
+    });
+
+    it('delivers a focus target once, not on every later repaint', () => {
+      const { app } = liveApp(['a'], '?ws=ops&surface=dashboard');
+      app.openDashboard({ dashboardId: 'a', mode: 'edit', focus: { kind: 'tile', id: 't1' } });
+      // Consumed by the render that received it, so an external commit or a style
+      // switch cannot yank focus back to that tile minutes later.
+      expect(app.mainSurface).toEqual({
+        kind: 'dashboard', dashboardId: 'a', mode: 'edit', focus: null,
+      });
+    });
+
+    it('Back/Forward inside the Dashboard surface keeps the explicit selection', async () => {
+      const { app, location } = readyApp(['first', 'second'], '?ws=ops&surface=dashboard');
+      app.openDashboard({ dashboardId: 'second', mode: 'edit' });
+      location.search = '?ws=ops&surface=dashboard&mode=view';
+      await app.handleSqlPopState();
+      // The URL carries no Dashboard id, so re-deriving one here would silently
+      // retarget the surface to the collection's first entry.
+      expect(app.mainSurface).toEqual({
+        kind: 'dashboard', dashboardId: 'second', mode: 'view', focus: null,
+      });
+      location.search = '?ws=ops';
+      await app.handleSqlPopState();
+      expect(app.mainSurface).toEqual({ kind: 'query' });
+    });
+  });
+
   it('rewrites a newly created workspace key without changing the active surface', () => {
     const replaceState = vi.spyOn(window.history, 'replaceState').mockImplementation(() => {});
     const app = createApp(env({ location: {
@@ -5335,6 +5717,85 @@ describe('unified /sql routing', () => {
     expect(app.renderDashboard).toHaveBeenCalledOnce();
   });
 
+  // #425: an in-tab import folds the projected document back into the SELECTED
+  // entry by id. Writing the compatibility slot here would overwrite the
+  // collection's FIRST Dashboard while a different one is on screen.
+  it('reloadDashboardRoute folds the projection into the selected Dashboard by id', () => {
+    const app = createApp(env());
+    const dash = (id: string, revision: number): DashboardDocumentV1 => ({
+      documentVersion: 1, id, title: id, revision,
+      layout: { type: 'flow', version: 1, preset: 'report', items: {} },
+      filters: [], tiles: [],
+    });
+    const workspace: StoredWorkspaceV3 = {
+      storageVersion: 3, id: 'w', key: 'w', name: 'W', queries: [],
+      dashboards: [dash('first', 1), dash('second', 1)],
+    };
+    // Establish the workspace first (this is what sets `state.workspaceId`), then
+    // select, then re-project — a SAME-workspace projection, which is the only
+    // kind that keeps a selection.
+    app.applyCommittedWorkspace(workspace);
+    app.mainSurface = { kind: 'dashboard', dashboardId: 'second', mode: 'edit', focus: null };
+    // Project through the real path: `state.dashboard` is whatever
+    // `applyCommittedWorkspace` put there — the SELECTED document — never a
+    // hand-made one production could not produce.
+    app.applyCommittedWorkspace(workspace);
+    expect(app.state.dashboard!.id).toBe('second');
+    // The Dashboard surface edits that projection in place before folding it back.
+    app.state.dashboard = { ...app.state.dashboard!, revision: 7 };
+    app.renderDashboard = vi.fn();
+    app.reloadDashboardRoute();
+    expect(app.currentWorkspace!.dashboards.map((d) => [d.id, d.revision]))
+      .toEqual([['first', 1], ['second', 7]]);
+  });
+
+  it('reloadDashboardRoute writes the compatibility slot when nothing is selected', () => {
+    const app = createApp(env());
+    const dash = (id: string, revision: number): DashboardDocumentV1 => ({
+      documentVersion: 1, id, title: id, revision,
+      layout: { type: 'flow', version: 1, preset: 'report', items: {} },
+      filters: [], tiles: [],
+    });
+    const workspace: StoredWorkspaceV3 = {
+      storageVersion: 3, id: 'w', key: 'w', name: 'W', queries: [],
+      dashboards: [dash('first', 1), dash('second', 1)],
+    };
+    app.currentWorkspace = workspace;
+    app.renderDashboard = vi.fn();
+    // The legacy entry point: no selection, so the projection lands on slot 0 and
+    // every later entry is preserved.
+    app.state.dashboard = dash('imported', 4);
+    app.reloadDashboardRoute();
+    expect(app.currentWorkspace!.dashboards.map((d) => d.id)).toEqual(['imported', 'second']);
+
+    // No projection at all → the collection is untouched (never a reason to drop
+    // a stored Dashboard).
+    app.currentWorkspace = workspace;
+    app.state.dashboard = null;
+    app.reloadDashboardRoute();
+    expect(app.currentWorkspace!.dashboards.map((d) => d.id)).toEqual(['first', 'second']);
+  });
+
+  it('reloadDashboardRoute leaves the collection alone when the selection is gone', () => {
+    const app = createApp(env());
+    const only: DashboardDocumentV1 = {
+      documentVersion: 1, id: 'first', title: 'first', revision: 1,
+      layout: { type: 'flow', version: 1, preset: 'report', items: {} },
+      filters: [], tiles: [],
+    };
+    app.currentWorkspace = {
+      storageVersion: 3, id: 'w', key: 'w', name: 'W', queries: [], dashboards: [only],
+    };
+    // A selection pinned before the entry was deleted elsewhere: the fold must
+    // not guess into another slot. (`state.dashboard` still holds the document
+    // that surface was editing.)
+    app.mainSurface = { kind: 'dashboard', dashboardId: 'deleted', mode: 'edit', focus: null };
+    app.state.dashboard = { ...only, id: 'deleted', revision: 9 };
+    app.renderDashboard = vi.fn();
+    app.reloadDashboardRoute();
+    expect(app.currentWorkspace!.dashboards).toEqual([only]);
+  });
+
   it('renderCurrentSurface dispatches a ready dashboard route to its renderer', () => {
     const app = createApp(env());
     app.sqlRoute = { surface: 'dashboard', workspaceKey: 'w', mode: 'view' };
@@ -5498,8 +5959,7 @@ describe('unified /sql routing', () => {
     await app.flushWorkspaceWrites();
     await vi.waitFor(() => expect(app.currentWorkspace!.dashboards[0] ?? null).not.toBeNull());
 
-    expect(qs(app.root, '.workbench')).not.toBeNull();
-    expect(qs(app.root, '.dash-page')).toBeNull();
+    expectSurface(app, 'query');
   });
 
   it('discards a slower workspace navigation after a newer destination wins', async () => {
@@ -5765,8 +6225,7 @@ describe('unified /sql routing', () => {
     expect(app.sqlRoute).toEqual({
       surface: 'dashboard', workspaceKey: 'w', mode: 'view',
     });
-    expect(qs(app.root, '.dash-page')).not.toBeNull();
-    expect(qs(app.root, '.workbench')).toBeNull();
+    expectSurface(app, 'dashboard');
     expect(qs(app.root, '.dash-gg-del')).toBeNull();
   });
 
@@ -5789,8 +6248,7 @@ describe('unified /sql routing', () => {
     });
 
     expect(app.sqlRoute).toEqual({ surface: 'workspace', workspaceKey: 'w' });
-    expect(qs(app.root, '.workbench')).not.toBeNull();
-    expect(qs(app.root, '.dash-page')).toBeNull();
+    expectSurface(app, 'query');
   });
 
   it('a stale Dashboard rollback callback never replaces the current Workbench DOM', async () => {
@@ -5812,8 +6270,7 @@ describe('unified /sql routing', () => {
     await app.flushWorkspaceWrites();
     await Promise.resolve();
 
-    expect(qs(app.root, '.workbench')).not.toBeNull();
-    expect(qs(app.root, '.dash-page')).toBeNull();
+    expectSurface(app, 'query');
     expect(document.querySelector('.share-toast')).toBeNull();
   });
 
@@ -5843,8 +6300,7 @@ describe('unified /sql routing', () => {
     expect(app.sqlRoute).toEqual({
       surface: 'dashboard', workspaceKey: 'w', mode: 'edit',
     });
-    expect(qs(app.root, '.dash-page')).not.toBeNull();
-    expect(qs(app.root, '.workbench')).toBeNull();
+    expectSurface(app, 'dashboard');
   });
 
   it('a Workbench Save-as completion cannot settle its removed popover after switching to Dashboard', async () => {
@@ -5868,8 +6324,7 @@ describe('unified /sql routing', () => {
     await vi.waitFor(() => expect(app.currentWorkspace!.queries).toHaveLength(1));
 
     expect(app.currentWorkspace!.queries[0].sql).toBe('SELECT 42');
-    expect(qs(app.root, '.dash-page')).not.toBeNull();
-    expect(qs(app.root, '.workbench')).toBeNull();
+    expectSurface(app, 'dashboard');
     expect(document.querySelector('.save-popover')).toBeNull();
   });
 
diff --git a/tests/unit/dashboard.test.ts b/tests/unit/dashboard.test.ts
index 941cb8a1..d035d0fa 100644
--- a/tests/unit/dashboard.test.ts
+++ b/tests/unit/dashboard.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, afterEach, type Mock } from 'vitest';
+import { describe, it, expect, vi, afterEach, beforeEach, type Mock } from 'vitest';
 import {
   normalizeDashLayout, normalizeDashCols, DASH_TILE_ROW_CAP, DASH_TILE_BYTE_CAP, DASH_TABLE_DISPLAY_CAP,
   activeDashboardView, dashboardViewSelection, partitionKpiBands,
@@ -7,6 +7,7 @@ import { KEYS } from '../../src/state.js';
 import * as storage from '../../src/core/storage.js';
 import { CHART_ROW_CAPS } from '../../src/core/chart-data.js';
 import { renderDashboard } from '../../src/ui/dashboard.js';
+import type { DashboardRenderTarget } from '../../src/ui/dashboard.js';
 import { applyCommand } from '../../src/dashboard/application/dashboard-commands.js';
 import { createQueryResolver } from '../../src/dashboard/application/dashboard-query-resolver.js';
 import { resolveLayoutPluginSync } from '../../src/dashboard/layouts/layout-registry.js';
@@ -263,12 +264,31 @@ function dashApp(opts: {
     workspaceRouteStatus: current ? 'ready' : 'not-found',
     sqlRoute: { surface: 'dashboard', workspaceKey: current?.key ?? 'workspace', mode: 'edit' },
   }) as TestApp;
+  // #425: the application shell owns the surface hosts and the header slot, and
+  // hands this surface a render target. Both live under `app.root` here, so every
+  // `qs(app.root, …)` assertion (including `.app-header`) still resolves — but the
+  // Dashboard now renders into its own host rather than replacing the whole root.
+  const headerSlot = document.createElement('div');
+  headerSlot.className = 'app-header-slot';
+  const host = document.createElement('div');
+  host.className = 'dashboard-host';
+  rootEl(app).replaceChildren(headerSlot, host);
+  targets.set(app, {
+    host,
+    // Mirrors production's default: the selected id is the one the workspace
+    // exposes. A test opening a DIFFERENT Dashboard passes `dashboardId` to
+    // `render`.
+    dashboardId: current?.dashboards[0]?.id ?? null,
+    mode: 'edit',
+    focus: null,
+    setHeader: (header) => { headerSlot.replaceChildren(header); },
+  });
   let surfaceGeneration = 0;
   app.captureSurfaceGeneration = () => surfaceGeneration;
   app.isSurfaceGenerationCurrent = (generation) => generation === surfaceGeneration;
   app.renderDashboard = () => {
     surfaceGeneration += 1;
-    void renderDashboard(app as unknown as Parameters<typeof renderDashboard>[0]);
+    void render(app);
   };
   if (current) app.applyCommittedWorkspace(current);
   if (opts.savedQueries) app.state.savedQueries = opts.savedQueries as AppState['savedQueries'];
@@ -280,7 +300,18 @@ function dashApp(opts: {
   return { app, calls, commit, loadActive };
 }
 
-const render = (app: TestApp): Promise<void> => renderDashboard(app as unknown as Parameters<typeof renderDashboard>[0]);
+/** Each fixture app's render target (#425), so `render(app)` stays a one-argument
+ *  call at the ~100 existing call sites. */
+const targets = new WeakMap<object, DashboardRenderTarget>();
+/** Render the fixture's Dashboard. `mode` follows `app.sqlRoute` (that is how
+ *  `modeApp` and the View/Edit tests express it); pass `over` to open a different
+ *  Dashboard by id, or with a focus target. */
+const render = (app: TestApp, over: Partial<DashboardRenderTarget> = {}): Promise<void> =>
+  renderDashboard(app as unknown as Parameters<typeof renderDashboard>[0], {
+    ...targets.get(app)!,
+    mode: app.sqlRoute.surface === 'dashboard' ? app.sqlRoute.mode : 'edit',
+    ...over,
+  });
 // #341: `runCommand` now commits through `app.serializeWrite` (a real
 // microtask-chained queue, same as saved-history.test.ts's own convention) —
 // a synchronous assertion right after triggering a command can no longer
@@ -1980,7 +2011,11 @@ describe('renderDashboard — grafana-grid engine (#291)', () => {
     // ...but the FIRST render's grid is untouched — its listener was removed
     // at the start of the second `renderDashboard` call, so it never saw
     // this resize event (it would otherwise have reflowed to 2 columns).
-    expect((qs(app1.root, '.dash-gg-grid').style as CSSStyleDeclaration).gridTemplateColumns).toContain('repeat(12');
+    // #425: the same teardown now also EMPTIES that render's host (the host
+    // outlives the surface, so a disposed Dashboard must not leave its DOM
+    // behind), hence the assertion is on the element captured above.
+    expect((grid1.style as CSSStyleDeclaration).gridTemplateColumns).toContain('repeat(12');
+    expect(qs(app1.root, '.dash-page')).toBeNull();
   });
 });
 
@@ -4016,6 +4051,8 @@ describe('renderDashboard — unified live modes (#407)', () => {
       .toEqual(['View', 'Edit']);
     expect(viewed.calls).toHaveLength(0);
     const edited = modeApp({ workspace: empty, mode: 'edit' });
+    const openDashboard = vi.fn();
+    edited.app.openDashboard = openDashboard;
     await render(edited.app);
     expect(qsa(edited.app.root, '.dashboard-mode-switch .editor-mode-btn').map((button) => button.textContent))
       .toEqual(['View', 'Edit']);
@@ -4024,7 +4061,12 @@ describe('renderDashboard — unified live modes (#407)', () => {
     create.click();
     await flush();
     expect(edited.commit).toHaveBeenCalledOnce();
-    expect(edited.commit.mock.calls[0][0].dashboards[0]).not.toBeUndefined();
+    const created = edited.commit.mock.calls[0][0].dashboards[0];
+    expect(created).not.toBeUndefined();
+    // #425: the new document is SELECTED, by the id that was actually committed —
+    // otherwise the session would keep reporting Query mode with a Dashboard on
+    // screen, which #426's tree would render as "nothing selected".
+    expect(openDashboard).toHaveBeenCalledWith({ dashboardId: created.id, mode: 'edit' });
   });
 
   it.each(['view', 'edit'] as const)(
@@ -4055,33 +4097,78 @@ describe('renderDashboard — unified live modes (#407)', () => {
     expect(commit).not.toHaveBeenCalled();
   });
 
-  it('route controls use push for surface and replace for mode', async () => {
+  // #425: this surface's own chrome no longer writes routes. It delegates to the
+  // main-surface navigation API, which is what keeps the SELECTED Dashboard's id
+  // across a View/Edit switch — a control that wrote `{surface:'dashboard',mode}`
+  // itself would re-resolve the collection's first entry instead. The
+  // push-for-surface / replace-for-mode history semantics live with that API and
+  // are asserted against the real controller in app.test.ts.
+  // #425 — the Dashboard surface's own toolbar: [Back to query] title [View|Edit]
+  it('renders a surface toolbar with Back to query, the Dashboard title, and View/Edit', async () => {
+    const { app } = modeApp({ workspace: wsWith({ title: 'Ops overview' }), mode: 'edit' });
+    const showQuerySurface = vi.fn();
+    app.showQuerySurface = showQuerySurface;
+    await render(app);
+    const toolbar = qs(app.root, '.dash-surface-toolbar');
+    expect(qs(toolbar, '.dash-surface-title').textContent).toBe('Ops overview');
+    const back = qs<HTMLButtonElement>(toolbar, '.dash-back-to-query');
+    // Accessible name + keyboard-reachable button, not a bare clickable div.
+    expect(back.tagName).toBe('BUTTON');
+    expect(back.getAttribute('aria-label')).toBe('Back to query');
+    back.click();
+    expect(showQuerySurface).toHaveBeenCalledTimes(1);
+    // The View/Edit switch reflects the RENDERED mode, and lives in this toolbar.
+    expect(qsa<HTMLButtonElement>(toolbar, '.dashboard-mode-switch .editor-mode-btn')
+      .map((button) => [button.textContent, button.disabled]))
+      .toEqual([['View', false], ['Edit', true]]);
+  });
+
+  it('names no Dashboard in the toolbar when the workspace has none yet', async () => {
+    const { app } = modeApp({ workspace: wsWith(), mode: 'edit' });
+    await render(app, { dashboardId: 'not-in-this-workspace' });
+    expect(qs(app.root, '.dash-create')).not.toBeNull();
+    expect(qs(app.root, '.dash-surface-title')).toBeNull();
+    expect(qs(app.root, '.dash-back-to-query')).not.toBeNull();
+  });
+
+  it('renders the SELECTED Dashboard only, by stable id, whatever its position', async () => {
+    const workspace = wsWith();
+    workspace.dashboards = [
+      workspace.dashboards[0],
+      { ...workspace.dashboards[0], id: 'second', title: 'Second' },
+    ];
+    const { app } = modeApp({ workspace, mode: 'edit' });
+    await render(app, { dashboardId: 'second' });
+    expect(qs(app.root, '.dash-surface-title').textContent).toBe('Second');
+    // Exactly one Dashboard is on screen — a hidden sibling is never rendered.
+    expect(qsa(app.root, '.dash-page')).toHaveLength(1);
+  });
+
+  it('surface and mode controls delegate to the main-surface navigation API', async () => {
     const { app } = modeApp({ workspace: wsWith(), mode: 'edit' });
-    app.navigateSqlRoute = vi.fn(async () => {});
+    const showQuerySurface = vi.fn();
+    const showDashboardSurface = vi.fn();
+    app.showQuerySurface = showQuerySurface;
+    app.showDashboardSurface = showDashboardSurface;
     await render(app);
     qsa<HTMLButtonElement>(app.root, '.app-surface-switch .editor-mode-btn')
       .find((b) => b.textContent === 'SQL Browser')!.click();
+    expect(showQuerySurface).toHaveBeenCalledTimes(1);
+    // Already on the Dashboard surface: its own button is inert.
     const dashboardButton = qsa<HTMLButtonElement>(app.root, '.app-surface-switch .editor-mode-btn')
       .find((b) => b.textContent === 'Dashboard')!;
     expect(dashboardButton.disabled).toBe(true);
     dashboardButton.click();
+    expect(showDashboardSurface).not.toHaveBeenCalled();
     qsa<HTMLButtonElement>(app.root, '.dashboard-mode-switch .editor-mode-btn')
       .find((b) => b.textContent === 'View')!.click();
-    qsa<HTMLButtonElement>(app.root, '.dashboard-mode-switch .editor-mode-btn')
-      .find((b) => b.textContent === 'Edit')!.click();
+    expect(showDashboardSurface).toHaveBeenLastCalledWith('view');
     app.sqlRoute = { surface: 'dashboard', workspaceKey: 'workspace', mode: 'view' };
     await render(app);
     qsa<HTMLButtonElement>(app.root, '.dashboard-mode-switch .editor-mode-btn')
       .find((b) => b.textContent === 'Edit')!.click();
-    expect(app.navigateSqlRoute).toHaveBeenNthCalledWith(
-      1, { surface: 'workspace', workspaceKey: 'workspace' }, 'push',
-    );
-    expect(app.navigateSqlRoute).toHaveBeenNthCalledWith(
-      2, { surface: 'dashboard', workspaceKey: 'workspace', mode: 'view' }, 'replace',
-    );
-    expect(app.navigateSqlRoute).toHaveBeenNthCalledWith(
-      3, { surface: 'dashboard', workspaceKey: 'workspace', mode: 'edit' }, 'replace',
-    );
+    expect(showDashboardSurface).toHaveBeenLastCalledWith('edit');
+    expect(showQuerySurface).toHaveBeenCalledTimes(1);
   });
 
   it('puts all Dashboard chrome in the shared compact application header', async () => {
@@ -4564,6 +4651,37 @@ describe('renderDashboard — the serialized write pipeline (#341)', () => {
     expect((await loadActive()).dashboards[0]?.tiles).toEqual([]);
   });
 
+  // #425: the same guarantee from a NON-FIRST selection — the case where an
+  // accidental `dashboards[0]` write would silently pass every index-0 test
+  // above. This is the acceptance criterion "commit replaces only the selected
+  // Dashboard entry; other Dashboards remain unchanged".
+  it('commits an edit to the SELECTED entry, not the collection\'s first', async () => {
+    const first = {
+      documentVersion: 1 as const, id: 'first', title: 'First', revision: 12,
+      layout: { type: 'flow' as const, version: 1 as const, preset: 'report', items: {} },
+      filters: [], tiles: [],
+    };
+    const base = twoTilesGrid();
+    const selected = base.dashboards[0];
+    const workspace = { ...base, dashboards: [first, selected] };
+    const { app, loadActive } = dashApp({ workspace });
+    await render(app, { dashboardId: selected.id });
+    expect(qs(app.root, '.dash-surface-title').textContent).toBe(selected.title);
+    Object.defineProperty(qs(app.root, '.dash-gg-grid'), 'clientWidth', { value: 1200, configurable: true });
+
+    qs<HTMLButtonElement>(app.root, '.dash-gg-del').click();
+    await flush();
+
+    const committed = await loadActive();
+    expect(committed.dashboards.map((d) => d.id)).toEqual(['first', selected.id]);
+    // The SELECTED entry advanced by exactly one revision…
+    expect(committed.dashboards[1].revision).toBe(selected.revision + 1);
+    expect(committed.dashboards[1].tiles.map((t) => t.id)).toEqual(['t2']);
+    // …and the first entry — which an unscoped write would have clobbered — is
+    // byte-identical.
+    expect(committed.dashboards[0]).toEqual(first);
+  });
+
   // #424: an ORDINARY edit on the visible Dashboard must leave every other
   // stored Dashboard byte-identical, revision included. Without this the
   // ID-addressed commit could be swapped for a plain one-element write and
@@ -4879,3 +4997,140 @@ describe('renderDashboard — external-workspace rebuild (#343 step 6)', () => {
     expect(commit).toHaveBeenCalled();
   });
 });
+
+// #425 — the explicit navigation focus contract: a caller can ask to land on one
+// tile or one curated filter of the Dashboard it opens.
+describe('renderDashboard — navigation focus (#425)', () => {
+  const focusWs = () => wsWith({
+    queries: [q('q1', 'SELECT k, v FROM a'), q('q2', 'SELECT k, v FROM b')],
+    tiles: [{ id: 't1', queryId: 'q1' }, { id: 't2', queryId: 'q2' }],
+    layout: { type: 'grafana-grid', version: 1, items: {} },
+  });
+  // happy-dom's `scrollIntoView` is an empty method and `focus()` is a no-op on a
+  // DISCONNECTED element, so the fixture root must be in the document and the
+  // scroll call has to be observed on the prototype.
+  let scrollCalls: Element[];
+  beforeEach(() => {
+    scrollCalls = [];
+    vi.spyOn(Element.prototype, 'scrollIntoView').mockImplementation(function (this: Element) {
+      scrollCalls.push(this);
+    });
+  });
+
+  const focusApp = (workspace = focusWs()) => {
+    const built = dashApp({ workspace });
+    document.body.appendChild(rootEl(built.app));
+    return built;
+  };
+
+  it('focuses, scrolls to, and temporarily highlights the tile named by TILE id', async () => {
+    const { app } = focusApp();
+    await render(app, { focus: { kind: 'tile', id: 't2' } });
+    const cards = qsa(app.root, '.dash-tile');
+    const second = cards[1];
+    expect(document.activeElement).toBe(second);
+    expect(scrollCalls).toContain(second);
+    expect(second.classList.contains('is-nav-target')).toBe(true);
+    // Programmatic focus only — the tile never joins the Tab order.
+    expect(second.getAttribute('tabindex')).toBe('-1');
+    // The other tile is untouched.
+    expect(cards[0].classList.contains('is-nav-target')).toBe(false);
+  });
+
+  it('never resolves a tile by its QUERY id', async () => {
+    const { app } = focusApp();
+    // 'q2' is the saved-query id of the second tile; its TILE id is 't2'.
+    await render(app, { focus: { kind: 'tile', id: 'q2' } });
+    expect(qsa(app.root, '.is-nav-target')).toHaveLength(0);
+    expect(document.querySelector('.share-toast')!.textContent)
+      .toContain('no longer on this dashboard');
+  });
+
+  it('clears only the temporary highlight on the next user interaction, keeping focus', async () => {
+    const { app } = focusApp();
+    await render(app, { focus: { kind: 'tile', id: 't1' } });
+    const card = qsa(app.root, '.dash-tile')[0];
+    expect(card.classList.contains('is-nav-target')).toBe(true);
+    document.dispatchEvent(new Event('pointerdown', { bubbles: true }));
+    expect(card.classList.contains('is-nav-target')).toBe(false);
+    // Normal keyboard focus styling is retained — only the extra highlight went.
+    expect(document.activeElement).toBe(card);
+    expect(card.getAttribute('tabindex')).toBe('-1');
+  });
+
+  it('clears the highlight after a bounded interval with no interaction', async () => {
+    vi.useFakeTimers();
+    try {
+      const { app } = focusApp();
+      await render(app, { focus: { kind: 'tile', id: 't1' } });
+      const card = qsa(app.root, '.dash-tile')[0];
+      expect(card.classList.contains('is-nav-target')).toBe(true);
+      vi.advanceTimersByTime(2000);
+      expect(card.classList.contains('is-nav-target')).toBe(false);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('focuses a curated filter by FILTER id, without scrolling the tile grid', async () => {
+    const { app } = focusApp(wsWith({
+      queries: [q('q1', 'SELECT k FROM a WHERE region = {region:String}')],
+      tiles: [{ id: 't1', queryId: 'q1' }],
+      filters: [{ id: 'f-region', parameter: 'region' }],
+    }));
+    await render(app, { focus: { kind: 'filter', id: 'f-region' } });
+    const field = qs(app.root, '[data-field-key="region"]');
+    expect(field).not.toBeNull();
+    expect(document.activeElement).toBe(field);
+    expect(field.classList.contains('is-nav-target')).toBe(true);
+    // Filters live at the top and have no layout placement, so no tile is
+    // scrolled for them.
+    expect(scrollCalls.some((node) => (node as HTMLElement).classList.contains('dash-tile'))).toBe(false);
+  });
+
+  it('opens the Dashboard anyway when the focus target is missing', async () => {
+    const { app } = focusApp();
+    await render(app, { focus: { kind: 'filter', id: 'no-such-filter' } });
+    expect(qsa(app.root, '.dash-tile')).toHaveLength(2);
+    expect(qsa(app.root, '.is-nav-target')).toHaveLength(0);
+    expect(document.querySelector('.share-toast')!.textContent)
+      .toContain('no longer on this dashboard');
+  });
+
+  it('suppresses a focus request from a SUPERSEDED render', async () => {
+    const { app } = focusApp();
+    // The fixture's `captureSurfaceGeneration` advances on each `renderDashboard`;
+    // a stale generation is exactly what a late request from a prior Dashboard
+    // (or from before a return to the Query surface) carries.
+    app.isSurfaceGenerationCurrent = () => false;
+    await render(app, { focus: { kind: 'tile', id: 't1' } });
+    expect(qsa(app.root, '.is-nav-target')).toHaveLength(0);
+    // Non-destructive: no diagnostic either — the target existed, the render did not.
+    expect(qsa(app.root, '.dash-tile')).toHaveLength(2);
+  });
+
+  it('skips a late filter focus once the user has already interacted', async () => {
+    const { app } = focusApp(wsWith({
+      queries: [q('q1', 'SELECT k FROM a WHERE region = {region:String}')],
+      tiles: [{ id: 't1', queryId: 'q1' }],
+      filters: [{ id: 'f-region', parameter: 'region' }],
+    }));
+    // Filter focus is delivered only AFTER the opening wave resolves, which can
+    // take seconds — long enough for the user to Tab into another field and type.
+    // The filter bar's own rebuild already restored focus there; stealing it back
+    // mid-keystroke is worse than not navigating.
+    const render1 = render(app, { focus: { kind: 'filter', id: 'f-region' } });
+    document.dispatchEvent(new Event('keydown', { bubbles: true }));
+    await render1;
+    expect(qsa(app.root, '.is-nav-target')).toHaveLength(0);
+  });
+
+  it('retires a prior render\'s highlight so it cannot fire against a detached node', async () => {
+    const { app } = focusApp();
+    await render(app, { focus: { kind: 'tile', id: 't1' } });
+    const first = qsa(app.root, '.dash-tile')[0];
+    await render(app, { focus: { kind: 'tile', id: 't2' } });
+    expect(first.classList.contains('is-nav-target')).toBe(false);
+    expect(qsa(app.root, '.is-nav-target')).toHaveLength(1);
+  });
+});
diff --git a/tests/unit/file-menu.test.ts b/tests/unit/file-menu.test.ts
index 9217972f..4555651c 100644
--- a/tests/unit/file-menu.test.ts
+++ b/tests/unit/file-menu.test.ts
@@ -121,9 +121,9 @@ describe('header Dashboard nav (#302)', () => {
     expect(nav.getAttribute('aria-label')).toBe('Open Dashboard');
     expect(nav.querySelector('.hd-dash-nav-label')!.textContent).toBe('Dashboard →');
     expect(nav.hidden).toBe(false); // #407: the dashboard creation route is always reachable
-    app.actions.openDashboard = vi.fn();
+    app.actions.showDashboard = vi.fn();
     click(nav);
-    expect(app.actions.openDashboard).toHaveBeenCalled();
+    expect(app.actions.showDashboard).toHaveBeenCalled();
   });
 
   it('renderDashboardNav keeps the dashboard creation route visible without a document', () => {
diff --git a/tests/unit/filter-bar.test.ts b/tests/unit/filter-bar.test.ts
index 3c06afb1..23d7b837 100644
--- a/tests/unit/filter-bar.test.ts
+++ b/tests/unit/filter-bar.test.ts
@@ -43,6 +43,7 @@ describe('buildFilterBar (shared filter row)', () => {
     expect(bar.openPopoverKey()).toBeNull(); // no multiselect fields at all — always null
     expect(bar.focusedFieldKey()).toBeNull();
     expect(() => bar.focusFieldTrigger('x')).not.toThrow(); // unknown param — a no-op
+    expect(bar.fieldElement('x')).toBeNull(); // #425: nothing built, nothing to navigate to
     expect(() => bar.refreshTimeRangeLabels(Date.now())).not.toThrow();
   });
 
@@ -623,6 +624,15 @@ describe('buildFilterBar (shared filter row)', () => {
       // The pair's own two individual fields are gone; only the non-group field remains.
       const names = [...bar.ordinaryEl.querySelectorAll('.var-field:not(.is-time-range) .var-name')].map((n) => n.textContent);
       expect(names).toEqual(['region']);
+      // #425: navigation resolves a field by its stamped key, searched from the
+      // two separately-mountable regions (a caller re-parents them, emptying
+      // `el`). A parameter the time-range group OWNS has no standalone field, so
+      // it resolves to that compound control — not to nothing.
+      expect(bar.fieldElement('region')!.querySelector('.var-name')!.textContent).toBe('region');
+      const compound = bar.fieldElement('from');
+      expect(compound!.classList.contains('is-time-range')).toBe(true);
+      expect(bar.fieldElement('to')).toBe(compound);
+      expect(bar.fieldElement('nope')).toBeNull();
       expect([...bar.el.children]).toEqual([bar.timeEl, bar.ordinaryEl]);
     });
 
diff --git a/tests/unit/import-planner.test.ts b/tests/unit/import-planner.test.ts
index 8f7ff8e5..c1eda418 100644
--- a/tests/unit/import-planner.test.ts
+++ b/tests/unit/import-planner.test.ts
@@ -497,6 +497,66 @@ describe('imports preserve the non-compatibility Dashboards', () => {
     expect(dashboards[1]).toEqual(hidden());
   });
 
+  // #425: an import invoked from a Dashboard's own File menu must replace THAT
+  // Dashboard. Addressing the compatibility slot would import "into" a Dashboard
+  // the user is not looking at, once a non-first one can be open.
+  it('planImportDashboard replaces the TARGET Dashboard by id, preserving the first', () => {
+    const ws = twoDashboards(dashboardDoc({ id: 'visible', revision: 4 }));
+    const incoming = bundle({
+      queries: [panelQuery('a')],
+      dashboards: [dashboardDoc({
+        id: 'incoming', revision: 3, tiles: [{ id: 't1', queryId: 'a' }],
+        layout: { type: 'flow', version: 1, preset: 'report', items: { t1: {} } },
+      })],
+    });
+    const plan = planImportDashboard(
+      ws, incoming, 'incoming', [{ sourceId: 'a', action: 'use-existing' }], 'copy', counter('new'),
+      {}, 'hidden',
+    );
+    const dashboards = plan.candidateWorkspace!.dashboards;
+    expect(dashboards.map((d) => d.id)).toEqual(['visible', 'new-1']);
+    // The first entry is byte-identical; only the addressed one was replaced.
+    expect(dashboards[0]).toEqual(dashboardDoc({ id: 'visible', revision: 4 }));
+  });
+
+  // #425: an explicit target FAILS CLOSED. Retargeting the compatibility slot
+  // would overwrite the collection's first Dashboard — silently retargeting the
+  // way #425 forbids, and destroying an entry the import never named.
+  it('planImportDashboard commits nothing when an explicit target was deleted', () => {
+    const ws = twoDashboards(dashboardDoc({ id: 'visible', revision: 4 }));
+    const incoming = bundle({
+      queries: [panelQuery('a')],
+      dashboards: [dashboardDoc({ id: 'incoming' })],
+    });
+    const plan = planImportDashboard(
+      ws, incoming, 'incoming', [{ sourceId: 'a', action: 'use-existing' }], 'copy', counter('new'),
+      {}, 'gone',
+    );
+    expect(plan.candidateWorkspace).toBeNull();
+    expect(plan.diagnostics.map((d) => d.code)).toEqual(['dashboard-import-target-stale']);
+    // Neither stored Dashboard was touched.
+    expect(ws.dashboards.map((d) => d.id)).toEqual(['visible', 'hidden']);
+  });
+
+  it('planImportDashboard commits nothing when an explicit target id is ambiguous', () => {
+    const duplicated = dashboardDoc({ id: 'twin', revision: 2 });
+    const ws = {
+      ...twoDashboards(dashboardDoc({ id: 'visible' })),
+      dashboards: [duplicated, { ...duplicated, revision: 3 }],
+    };
+    const incoming = bundle({
+      queries: [panelQuery('a')],
+      dashboards: [dashboardDoc({ id: 'incoming' })],
+    });
+    const plan = planImportDashboard(
+      ws, incoming, 'incoming', [{ sourceId: 'a', action: 'use-existing' }], 'copy', counter('new'),
+      {}, 'twin',
+    );
+    expect(plan.candidateWorkspace).toBeNull();
+    expect(plan.diagnostics.map((d) => d.code)).toEqual(['dashboard-import-target-stale']);
+    expect(ws.dashboards.map((d) => d.revision)).toEqual([2, 3]);
+  });
+
   it('planImportDashboard diagnoses a replace-mode id that collides with a hidden Dashboard', () => {
     const ws = twoDashboards(dashboardDoc({ id: 'visible' }));
     const incoming = bundle({
diff --git a/tests/unit/main-surface.test.ts b/tests/unit/main-surface.test.ts
new file mode 100644
index 00000000..6da796aa
--- /dev/null
+++ b/tests/unit/main-surface.test.ts
@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest';
+import {
+  QUERY_SURFACE, isSameDashboardSelection, mainSurfaceRoute, reconcileMainSurface,
+  resolveOpenDashboard, selectedDashboardId, withoutFocus,
+  type DashboardFocusTarget, type MainSurfaceState,
+} from '../../src/application/main-surface.js';
+import type { DashboardDocumentV1, StoredWorkspaceV3 } from '../../src/generated/json-schema.types.js';
+
+const dash = (id: string): DashboardDocumentV1 => ({
+  documentVersion: 1, id, title: id.toUpperCase(), revision: 1,
+  layout: { type: 'flow', version: 1, preset: 'report', items: {} },
+  filters: [], tiles: [],
+});
+const ws = (ids: string[]): StoredWorkspaceV3 => ({
+  storageVersion: 3, id: 'w1', key: 'workspace', name: 'W', queries: [], dashboards: ids.map(dash),
+});
+const onDashboard = (
+  dashboardId: string, mode: 'view' | 'edit' = 'edit', focus: DashboardFocusTarget | null = null,
+): MainSurfaceState => ({ kind: 'dashboard', dashboardId, mode, focus });
+
+describe('resolveOpenDashboard', () => {
+  it('resolves an exact id into Dashboard surface state, independent of position', () => {
+    const resolved = resolveOpenDashboard(ws(['a', 'b', 'c']), { dashboardId: 'c', mode: 'view' });
+    expect(resolved).toEqual({
+      status: 'ok',
+      surface: { kind: 'dashboard', dashboardId: 'c', mode: 'view', focus: null },
+    });
+  });
+
+  it('carries an optional focus target through, defaulting to none', () => {
+    const focus = { kind: 'tile', id: 't1' } as const;
+    expect(resolveOpenDashboard(ws(['a']), { dashboardId: 'a', mode: 'edit', focus }))
+      .toEqual({ status: 'ok', surface: { kind: 'dashboard', dashboardId: 'a', mode: 'edit', focus } });
+    expect(resolveOpenDashboard(ws(['a']), { dashboardId: 'a', mode: 'edit' }))
+      .toEqual({ status: 'ok', surface: { kind: 'dashboard', dashboardId: 'a', mode: 'edit', focus: null } });
+  });
+
+  it('reports a missing id — including against a workspace that has none loaded', () => {
+    expect(resolveOpenDashboard(ws(['a']), { dashboardId: 'gone', mode: 'edit' }))
+      .toEqual({ status: 'missing' });
+    expect(resolveOpenDashboard(ws([]), { dashboardId: 'a', mode: 'edit' }))
+      .toEqual({ status: 'missing' });
+    expect(resolveOpenDashboard(null, { dashboardId: 'a', mode: 'edit' }))
+      .toEqual({ status: 'missing' });
+  });
+
+  it('reports a DUPLICATE id separately, so no caller resolves it by a guess', () => {
+    expect(resolveOpenDashboard(ws(['a', 'a']), { dashboardId: 'a', mode: 'edit' }))
+      .toEqual({ status: 'duplicate' });
+  });
+});
+
+describe('reconcileMainSurface', () => {
+  it('keeps the Query surface untouched', () => {
+    expect(reconcileMainSurface(QUERY_SURFACE, ws(['a']))).toBe(QUERY_SURFACE);
+  });
+
+  it('keeps a selection the new workspace still resolves uniquely', () => {
+    const surface = onDashboard('b', 'view');
+    // Same id in a DIFFERENT position — position is never identity.
+    expect(reconcileMainSurface(surface, ws(['x', 'b']))).toBe(surface);
+  });
+
+  it('falls back to Query mode — never to another Dashboard — when the selection is gone', () => {
+    expect(reconcileMainSurface(onDashboard('b'), ws(['a', 'c']))).toBe(QUERY_SURFACE);
+    expect(reconcileMainSurface(onDashboard('b'), ws([]))).toBe(QUERY_SURFACE);
+    expect(reconcileMainSurface(onDashboard('b'), null)).toBe(QUERY_SURFACE);
+  });
+
+  it('falls back to Query mode when the id became ambiguous', () => {
+    expect(reconcileMainSurface(onDashboard('b'), ws(['b', 'b']))).toBe(QUERY_SURFACE);
+  });
+});
+
+describe('mainSurfaceRoute', () => {
+  it('maps each surface onto the UNCHANGED /sql route contract', () => {
+    expect(mainSurfaceRoute(QUERY_SURFACE, 'ops'))
+      .toEqual({ surface: 'workspace', workspaceKey: 'ops' });
+    // The selected Dashboard id is session state and never reaches the URL.
+    expect(mainSurfaceRoute(onDashboard('sales', 'view'), 'ops'))
+      .toEqual({ surface: 'dashboard', workspaceKey: 'ops', mode: 'view' });
+    expect(mainSurfaceRoute(onDashboard('sales', 'edit'), null))
+      .toEqual({ surface: 'dashboard', workspaceKey: null, mode: 'edit' });
+  });
+});
+
+describe('selectedDashboardId', () => {
+  it('is the id on a Dashboard surface and null in Query mode', () => {
+    expect(selectedDashboardId(onDashboard('a'))).toBe('a');
+    expect(selectedDashboardId(QUERY_SURFACE)).toBeNull();
+  });
+});
+
+describe('isSameDashboardSelection', () => {
+  it('is true only for the same id in the same mode', () => {
+    const surface = onDashboard('a', 'edit');
+    expect(isSameDashboardSelection(surface, { dashboardId: 'a', mode: 'edit' })).toBe(true);
+    expect(isSameDashboardSelection(surface, { dashboardId: 'a', mode: 'view' })).toBe(false);
+    expect(isSameDashboardSelection(surface, { dashboardId: 'b', mode: 'edit' })).toBe(false);
+    expect(isSameDashboardSelection(QUERY_SURFACE, { dashboardId: 'a', mode: 'edit' })).toBe(false);
+  });
+});
+
+describe('withoutFocus', () => {
+  it('drops a consumed focus target and keeps the selection', () => {
+    const surface = onDashboard('a', 'edit', { kind: 'filter', id: 'f1' });
+    expect(withoutFocus(surface)).toEqual({ kind: 'dashboard', dashboardId: 'a', mode: 'edit', focus: null });
+  });
+
+  it('returns the same value when there is nothing to clear', () => {
+    const already = onDashboard('a');
+    expect(withoutFocus(already)).toBe(already);
+    expect(withoutFocus(QUERY_SURFACE)).toBe(QUERY_SURFACE);
+  });
+});
diff --git a/tests/unit/saved-history.test.ts b/tests/unit/saved-history.test.ts
index 8986bb90..75069d02 100644
--- a/tests/unit/saved-history.test.ts
+++ b/tests/unit/saved-history.test.ts
@@ -254,6 +254,51 @@ describe('renderSavedHistory', () => {
     expect(queryFavorite(app.state.savedQueries.find((query) => query.id === 'a'))).toBe(true);
   });
 
+  // #425 GATE: the star still writes the COMPATIBILITY Dashboard (#424's
+  // temporary favourite↔membership coupling). With the Library pane now visible
+  // beside a Dashboard, starring while a NON-first Dashboard is selected would
+  // silently add a tile to a different Dashboard than the one on screen.
+  it('saved: refuses to star while a non-first Dashboard is selected', async () => {
+    const app = makeApp();
+    app.state.sidePanel.value = 'saved';
+    setSaved(app, [{ id: 'a', name: 'A', sql: '1', favorite: false }]);
+    const dashboard = (id: string) => ({
+      documentVersion: 1 as const, id, title: id, revision: 1,
+      layout: { type: 'flow' as const, version: 1 as const, preset: 'report' as const, items: {} },
+      filters: [], tiles: [],
+    });
+    app.currentWorkspace = {
+      storageVersion: 3, id: 'w', key: 'w', name: 'W',
+      queries: app.state.savedQueries, dashboards: [dashboard('first'), dashboard('second')],
+    };
+    app.mainSurface = { kind: 'dashboard', dashboardId: 'second', mode: 'edit', focus: null };
+    renderSavedHistory(app);
+    click(qs(savedList(app), '.sv-star'));
+    await flush();
+    expect(queryFavorite(app.state.savedQueries[0])).toBe(false);
+    expect(document.querySelector('.share-toast')!.textContent)
+      .toContain('first dashboard');
+
+    // No loaded workspace at all: nothing to compare the selection against, so
+    // the star stays refused rather than writing blind.
+    app.currentWorkspace = null;
+    renderSavedHistory(app);
+    click(qs(savedList(app), '.sv-star'));
+    await flush();
+    expect(queryFavorite(app.state.savedQueries[0])).toBe(false);
+
+    // Selecting that first Dashboard makes the star honest again.
+    app.currentWorkspace = {
+      storageVersion: 3, id: 'w', key: 'w', name: 'W',
+      queries: app.state.savedQueries, dashboards: [dashboard('first'), dashboard('second')],
+    };
+    app.mainSurface = { kind: 'dashboard', dashboardId: 'first', mode: 'edit', focus: null };
+    renderSavedHistory(app);
+    click(qs(savedList(app), '.sv-star'));
+    await flush();
+    expect(queryFavorite(app.state.savedQueries[0])).toBe(true);
+  });
+
   it('saved: favorite merges into a linked dirty valid Spec draft', async () => {
     const app = makeApp();
     app.state.sidePanel.value = 'saved';
diff --git a/tests/unit/shortcuts.test.ts b/tests/unit/shortcuts.test.ts
index ef64f2f1..f450c75e 100644
--- a/tests/unit/shortcuts.test.ts
+++ b/tests/unit/shortcuts.test.ts
@@ -128,10 +128,11 @@ describe('handleKeydown', () => {
 
   it('dispatches Dashboard refresh and mode navigation only for the current viewer generation', () => {
     const refresh = vi.fn(); const setDashboardStyle = vi.fn();
+    const showDashboardSurface = vi.fn();
     const app = makeApp({ sqlRoute: { surface: 'dashboard', workspaceKey: 'sql_library', mode: 'edit' },
       captureSurfaceGeneration: () => 7,
       surfaceCommands: { surface: 'dashboard', generation: 7, refresh, setDashboardStyle },
-      navigateSqlRoute: vi.fn(async () => {}) });
+      showDashboardSurface });
     expect(handleKeydown(ev({ metaKey: true, key: 'Enter' }), app)).toBe('dashboardRefresh');
     expect(refresh).toHaveBeenCalledOnce();
     expect(handleKeydown(ev({ key: 'g' }), app)).toBe('chord');
@@ -142,11 +143,14 @@ describe('handleKeydown', () => {
     expect(setDashboardStyle).toHaveBeenLastCalledWith('columns-2');
     expect(handleKeydown(ev({ key: 'g' }), app)).toBe('chord');
     expect(handleKeydown(ev({ key: 'v' }), app)).toBe('dashboardView');
-    expect(app.navigateSqlRoute).toHaveBeenCalledWith({ surface: 'dashboard', workspaceKey: 'sql_library', mode: 'view' }, 'replace');
+    // #425: mode navigation goes through the main-surface API, which retains the
+    // SELECTED Dashboard's id rather than writing a route that would re-resolve
+    // the collection's first entry.
+    expect(showDashboardSurface).toHaveBeenCalledWith('view');
     (app.sqlRoute as { mode?: 'view' | 'edit' }).mode = 'view';
     expect(handleKeydown(ev({ key: 'g' }), app)).toBe('chord');
     expect(handleKeydown(ev({ key: 'e' }), app)).toBe('dashboardEdit');
-    expect(app.navigateSqlRoute).toHaveBeenLastCalledWith({ surface: 'dashboard', workspaceKey: 'sql_library', mode: 'edit' }, 'replace');
+    expect(showDashboardSurface).toHaveBeenLastCalledWith('edit');
     const viewing = makeApp({ sqlRoute: { surface: 'dashboard', workspaceKey: 'sql_library', mode: 'view' } });
     expect(handleKeydown(ev({ key: 'g' }), viewing)).toBe('chord');
     expect(handleKeydown(ev({ key: 'v' }), viewing)).toBeNull();
@@ -175,9 +179,10 @@ describe('handleKeydown', () => {
 
   it('routes the G chord by current surface, and resets it on mismatch, timeout, blur and stale generation', () => {
     vi.useFakeTimers();
-    const navigateSqlRoute = vi.fn(async () => {});
+    const showQuerySurface = vi.fn();
+    const showDashboardSurface = vi.fn();
     let generation = 1;
-    const app = makeApp({ navigateSqlRoute, captureSurfaceGeneration: () => generation });
+    const app = makeApp({ showQuerySurface, showDashboardSurface, captureSurfaceGeneration: () => generation });
     expect(handleKeydown(ev({ key: 'g' }), app)).toBe('chord');
     // A repeated G deliberately restarts the chord's expiration window.
     expect(handleKeydown(ev({ key: 'g' }), app)).toBe('chord');
@@ -187,11 +192,11 @@ describe('handleKeydown', () => {
     expect(handleKeydown(ev({ key: 'd' }), app)).toBeNull();
     expect(handleKeydown(ev({ key: 'g' }), app)).toBe('chord');
     expect(handleKeydown(ev({ key: 'd' }), app)).toBe('openDashboard');
-    expect(navigateSqlRoute).toHaveBeenLastCalledWith({ surface: 'dashboard', workspaceKey: 'sql_library', mode: 'edit' }, 'push');
+    expect(showDashboardSurface).toHaveBeenLastCalledWith('edit');
     app.sqlRoute = { surface: 'dashboard', workspaceKey: 'sql_library', mode: 'view' };
     expect(handleKeydown(ev({ key: 'g' }), app)).toBe('chord');
     expect(handleKeydown(ev({ key: 'w' }), app)).toBe('openWorkbench');
-    expect(navigateSqlRoute).toHaveBeenLastCalledWith({ surface: 'workspace', workspaceKey: 'sql_library' }, 'push');
+    expect(showQuerySurface).toHaveBeenCalledTimes(1);
     expect(handleKeydown(ev({ key: 'g' }), app)).toBe('chord');
     window.dispatchEvent(new Event('blur'));
     expect(handleKeydown(ev({ key: 'w' }), app)).toBeNull();
diff --git a/tests/unit/workspace-dashboards.test.ts b/tests/unit/workspace-dashboards.test.ts
index 75c250f2..776ed438 100644
--- a/tests/unit/workspace-dashboards.test.ts
+++ b/tests/unit/workspace-dashboards.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import {
-  findDashboard, replaceDashboard, resolveCompatibilityDashboard, withCompatibilityDashboard,
+  findDashboard, findDashboardStrict, replaceDashboard, resolveCompatibilityDashboard,
+  withCompatibilityDashboard,
 } from '../../src/workspace/workspace-dashboards.js';
 import type { DashboardDocumentV1, StoredWorkspaceV3 } from '../../src/generated/json-schema.types.js';
 
@@ -43,6 +44,24 @@ describe('findDashboard', () => {
   });
 });
 
+describe('findDashboardStrict', () => {
+  it('resolves a unique id, independent of position', () => {
+    const workspace = ws([dash('a'), dash('b')]);
+    expect(findDashboardStrict(workspace, 'b'))
+      .toEqual({ status: 'ok', dashboard: workspace.dashboards[1] });
+  });
+
+  it('separates a deleted entry from an ambiguous one', () => {
+    expect(findDashboardStrict(ws([dash('a')]), 'gone')).toEqual({ status: 'missing' });
+    expect(findDashboardStrict(ws([]), 'a')).toEqual({ status: 'missing' });
+    expect(findDashboardStrict(ws([dash('a'), dash('a')]), 'a')).toEqual({ status: 'duplicate' });
+  });
+
+  it('accepts any workspace-shaped value carrying a Dashboard collection', () => {
+    expect(findDashboardStrict({ dashboards: [dash('d1')] }, 'd1').status).toBe('ok');
+  });
+});
+
 describe('replaceDashboard', () => {
   it('replaces exactly one entry and preserves every other, in order', () => {
     const workspace = ws([dash('a'), dash('b'), dash('c')]);