diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4cb39d8c7d..6b319437d1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -445,6 +445,21 @@ jobs:
           cd gui
           bun run build
 
+      - name: Record dashboard preview source
+        if: needs.changes.outputs.gui == 'true'
+        run: |
+          git rev-parse HEAD > gui/dist/build-commit.txt
+          git rev-parse HEAD:gui > gui/dist/build-gui-tree.txt
+
+      - name: Upload dashboard preview
+        if: needs.changes.outputs.gui == 'true'
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: dashboard-preview-${{ github.sha }}
+          path: gui/dist
+          retention-days: 7
+          if-no-files-found: error
+
       - name: CLI help smoke
         run: bun run src/cli/index.ts help
 
diff --git a/devlog/_plan/260906_release_244_followups/090_dashboard.md b/devlog/_plan/260906_release_244_followups/090_dashboard.md
index 6d18d6a38c..435889d5e2 100644
--- a/devlog/_plan/260906_release_244_followups/090_dashboard.md
+++ b/devlog/_plan/260906_release_244_followups/090_dashboard.md
@@ -1,6 +1,6 @@
 # Dashboard alignment carry
 
-Depends on integrated runtime for final presentation; independent PR, class C2. Carry #3697 head 4c7d6a5e07a29f7ef833019304c11343b94d102f, preserving Co-authored-by: Robin Bially <7304732+RobinBially@users.noreply.github.com>. #3689 authless-default change is outside this train.
+Depends on integrated runtime for final presentation; independent PR, class C2. Carry #3697 head 49a9c79392babd9413831437d6ad71839737b148 (base cededd5ad1b8f8c437813c315c0705ace6c950c3), preserving Co-authored-by: Robin Bially <7304732+RobinBially@users.noreply.github.com>. #3689 authless-default change is outside this train.
 
 ## Exact change map
 
@@ -21,3 +21,11 @@ Remote GUI lint/stylelint, GUI tests and Vite build from ci.yml; verify rendered
 
 No authless setting, quota semantics or model management expansion. Preserve current state labels and accessibility. P rechecks any intervening same-file changes before carrying.
 
+
+## Hosted artifact verification
+
+Main owns the eight-file attributed carry; no handler or visible-copy changes. Add one bounded preview artifact to the existing ci.yml gates job after its existing GUI build, only when changes.outputs.gui is true. Pin actions/upload-artifact v7.0.1 to043fb46d1a93c77aae656e7c1c64a875d1fc6a0a (verified official repository tag/release). Include only gui/dist, with generated build-commit.txt and build-gui-tree.txt; retention7days and missing-fileserror. No trigger, token permission, secret, checkout or release change. Workflow surface raises this unit to C4 and gets independent security review.
+
+The artifact identifies the actual checkout and gui tree: PR CI may build a merge ref. Compare build-gui-tree against final reviewed head:gui before claiming final UI proof. Download that artifact, serve the built frontend with an isolated fixture API in scratch (no real provider, account, or service mutation), and use the existing browser runtime for1440/1024/768/390/320px and keyboard/focus/overflow observation. No local build/typecheck/test suite. Public screenshots use synthetic data only; the source PR jpg is a reference, not final-head evidence.
+
+Maintain manual dependent PR publication after the owner's explicit native-stack removal. AsyncCI/admin integration of3762/3763 is delegated; no local rebase. Await artifact only for visual C, not for unrelated bookkeeping. HostedCI handles lint/typecheck/tests/build/privacy. Escalate only an actual permission or unavailable artifact boundary; no invented local fallback. No user token/cost cap; each tooling run bounded30minutes, individual waits <=60seconds; main retains complete release goal.
diff --git a/docs-site/src/content/docs/guides/web-dashboard.md b/docs-site/src/content/docs/guides/web-dashboard.md
index 3c46748a31..849e5f4608 100644
--- a/docs-site/src/content/docs/guides/web-dashboard.md
+++ b/docs-site/src/content/docs/guides/web-dashboard.md
@@ -68,6 +68,13 @@ missing credential — the proxy did not recognise the request as loopback. Open
 the address the proxy prints on startup (usually `http://127.0.0.1:<port>`), and prefer that exact
 host and port over a LAN IP or an alias.
 
+## Dashboard layout
+
+Overview uses matching status cards and full-width settings rows. On wide screens, labels share
+one column and model/effort controls share another. On narrower screens, controls move below their
+labels in the same reading order. Long version labels are shortened visually; hover the version
+badge or the Version card to read the full value.
+
 ## What you can do
 
 | Area | What it does |
diff --git a/docs/pr-assets/dashboard-settings-aligned.jpg b/docs/pr-assets/dashboard-settings-aligned.jpg
new file mode 100644
index 0000000000..8cf7c1f26f
Binary files /dev/null and b/docs/pr-assets/dashboard-settings-aligned.jpg differ
diff --git a/gui/src/App.tsx b/gui/src/App.tsx
index c7fb89b6e2..91890ce664 100644
--- a/gui/src/App.tsx
+++ b/gui/src/App.tsx
@@ -265,7 +265,7 @@ export default function App() {
     >
       <span className="brand-logo" role="img" aria-label={t("app.logoAria")} />
       <span className="name">opencodex</span>
-      <span className="ver">v{displayedVersion}</span>
+      <span className="ver" title={displayedVersion}>v{displayedVersion}</span>
     </button>
   );
 
diff --git a/gui/src/pages/dashboard-overview-head.tsx b/gui/src/pages/dashboard-overview-head.tsx
index 9cccc0e26c..44b3f8ac3c 100644
--- a/gui/src/pages/dashboard-overview-head.tsx
+++ b/gui/src/pages/dashboard-overview-head.tsx
@@ -48,16 +48,16 @@ export function DashboardOverviewHead({
                 <IconInfo width={14} height={14} aria-hidden="true" />
               </button>
             </div>
-            <div className="value" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
-              <div role="radiogroup" aria-label={t("dash.multiAgent")} style={{ display: "inline-flex", borderRadius: "var(--radius-pill)", background: "var(--surface-soft, var(--raised))", padding: 3, gap: 2 }}>
+            <div className="value" style={{ display: "flex", alignItems: "center" }}>
+              <div className="dash-ma-switch" role="radiogroup" aria-label={t("dash.multiAgent")} style={{ display: "inline-flex", borderRadius: "var(--radius-pill)", background: "var(--surface-soft, var(--raised))", padding: 3, gap: 2 }}>
                 {(["v1", "default", "v2"] as const).map(mode => (
                   <button
                     key={mode}
                     type="button"
                     role="radio"
                     aria-checked={maMode === mode}
-                    className={`btn btn-sm text-caption${maMode === mode ? " btn-primary" : " btn-ghost"}`}
-                    style={{ borderRadius: "var(--radius-pill)", minWidth: 36, padding: "5px 10px", border: "none", background: maMode === mode ? undefined : "transparent", color: maMode === mode ? undefined : "var(--muted)" }}
+                    className={`btn btn-sm text-caption dash-ma-option${maMode === mode ? " btn-primary" : " btn-ghost"}`}
+                    style={{ borderRadius: "var(--radius-pill)", border: "none", background: maMode === mode ? undefined : "transparent", color: maMode === mode ? undefined : "var(--muted)" }}
                     disabled={maBusy}
                     onClick={() => void switchMaMode(mode)}
                   >{t(`models.v2Mode_${mode}` as TKey)}</button>
@@ -76,7 +76,7 @@ export function DashboardOverviewHead({
               <span className={`dot ${online ? "dot-green" : "dot-red"}`} />{online ? t("dash.online") : t("dash.offline")}
             </div>
           </div>
-          <div className="stat" aria-busy={healthLoading || undefined}><div className="label">{t("dash.version")}</div><div className="value mono">{health?.version ?? "—"}</div></div>
+          <div className="stat" aria-busy={healthLoading || undefined}><div className="label">{t("dash.version")}</div><div className="value mono dash-stat-version" title={health?.version}>{health?.version ?? "—"}</div></div>
           <div className="stat" aria-busy={healthLoading || undefined}><div className="label">{t("dash.uptime")}</div><div className="value mono">{health ? formatUptime(health.uptime, locale) : "—"}</div></div>
           <div className="stat" aria-busy={healthLoading || undefined}><div className="label">{t("dash.providers")}</div><div className="value">{providers.length}</div></div>
           <div className="stat" aria-busy={usageLoading || undefined}>
diff --git a/gui/src/pages/dashboard-overview-sections.tsx b/gui/src/pages/dashboard-overview-sections.tsx
index 7bdf282931..8da531f97c 100644
--- a/gui/src/pages/dashboard-overview-sections.tsx
+++ b/gui/src/pages/dashboard-overview-sections.tsx
@@ -44,7 +44,7 @@ export function DashboardEffortCapPanel({ apiBase, d }: { apiBase: string; d: Da
   if (!maModeResolved || maMode === "v1") return null;
 
   return (
-    <div className="panel">
+    <div className="panel dash-effort-panel">
       <div className="injection-head">
         <span className="injection-label" style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
           {t("dash.effortCapLabel")}
@@ -62,56 +62,58 @@ export function DashboardEffortCapPanel({ apiBase, d }: { apiBase: string; d: Da
             <IconInfo width={13} height={13} aria-hidden="true" />
           </button>
         </span>
-        <Select
-          value={effortCap}
-          options={[
-            { value: "", label: t("dash.effortCapNone") },
-            ...EFFORT_CAP_LEVELS.map(e => ({ value: e, label: e })),
-          ]}
-          onChange={async (v) => {
-            if (effortCapSaving) return;
-            setEffortCapSaving(true);
-            try {
-              const res = await fetch(`${apiBase}/api/effort-caps`, {
-                method: "PUT",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ effortCap: v || null }),
-              });
-              const data = await requireJson<{ ok: boolean; effortCap?: string | null; subagentEffortCap?: string | null }>(res);
-              setEffortCap(data.effortCap ?? "");
-              setSubagentEffortCap(data.subagentEffortCap ?? "");
-            } catch { /* ignore */ }
-            finally { setEffortCapSaving(false); }
-          }}
-          disabled={effortCapSaving}
-          label={t("dash.effortCapLabel")}
-          align="right"
-        />
-        <Select
-          value={subagentEffortCap}
-          options={[
-            { value: "", label: t("dash.effortCapNone") },
-            ...EFFORT_CAP_LEVELS.map(e => ({ value: e, label: e })),
-          ]}
-          onChange={async (v) => {
-            if (effortCapSaving) return;
-            setEffortCapSaving(true);
-            try {
-              const res = await fetch(`${apiBase}/api/effort-caps`, {
-                method: "PUT",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ subagentEffortCap: v || null }),
-              });
-              const data = await requireJson<{ ok: boolean; effortCap?: string | null; subagentEffortCap?: string | null }>(res);
-              setEffortCap(data.effortCap ?? "");
-              setSubagentEffortCap(data.subagentEffortCap ?? "");
-            } catch { /* ignore */ }
-            finally { setEffortCapSaving(false); }
-          }}
-          disabled={effortCapSaving}
-          label={t("dash.subagentEffortCapLabel")}
-          align="right"
-        />
+        <div className="dash-effort-controls">
+          <Select
+            value={effortCap}
+            options={[
+              { value: "", label: t("dash.effortCapNone") },
+              ...EFFORT_CAP_LEVELS.map(e => ({ value: e, label: e })),
+            ]}
+            onChange={async (v) => {
+              if (effortCapSaving) return;
+              setEffortCapSaving(true);
+              try {
+                const res = await fetch(`${apiBase}/api/effort-caps`, {
+                  method: "PUT",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({ effortCap: v || null }),
+                });
+                const data = await requireJson<{ ok: boolean; effortCap?: string | null; subagentEffortCap?: string | null }>(res);
+                setEffortCap(data.effortCap ?? "");
+                setSubagentEffortCap(data.subagentEffortCap ?? "");
+              } catch { /* ignore */ }
+              finally { setEffortCapSaving(false); }
+            }}
+            disabled={effortCapSaving}
+            label={t("dash.effortCapLabel")}
+            align="right"
+          />
+          <Select
+            value={subagentEffortCap}
+            options={[
+              { value: "", label: t("dash.effortCapNone") },
+              ...EFFORT_CAP_LEVELS.map(e => ({ value: e, label: e })),
+            ]}
+            onChange={async (v) => {
+              if (effortCapSaving) return;
+              setEffortCapSaving(true);
+              try {
+                const res = await fetch(`${apiBase}/api/effort-caps`, {
+                  method: "PUT",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({ subagentEffortCap: v || null }),
+                });
+                const data = await requireJson<{ ok: boolean; effortCap?: string | null; subagentEffortCap?: string | null }>(res);
+                setEffortCap(data.effortCap ?? "");
+                setSubagentEffortCap(data.subagentEffortCap ?? "");
+              } catch { /* ignore */ }
+              finally { setEffortCapSaving(false); }
+            }}
+            disabled={effortCapSaving}
+            label={t("dash.subagentEffortCapLabel")}
+            align="right"
+          />
+        </div>
       </div>
     </div>
   );
@@ -625,7 +627,7 @@ export function DashboardSidecarPanels({ d }: { d: Dash }) {
 
       <div className="panel" aria-busy={!shadowCall || undefined}>
         <div className="spread" style={{ alignItems: "center" }}>
-          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <div className="dash-shadow-label" style={{ display: "flex", alignItems: "center", gap: 8 }}>
             <span className="font-semibold">{t("dash.shadowCallIntercept")}</span>
             <button
               ref={shadowCallHelpTriggerRef}
@@ -642,7 +644,7 @@ export function DashboardSidecarPanels({ d }: { d: Dash }) {
             </button>
             <code className="muted text-caption">{`⚠ ${shadowSourceModelBadge(shadowCall?.sourceModels)}`}</code>
           </div>
-          <div className="setting-controls" style={{ display: "flex", gap: 8, alignItems: "center" }}>
+          <div className="setting-controls dash-shadow-controls">
             <button
               type="button"
               className={`switch ${shadowCall?.enabled ? "on" : ""}`}
diff --git a/gui/src/styles-dashboard-workspace.css b/gui/src/styles-dashboard-workspace.css
index 2b854f57c1..22f60ef915 100644
--- a/gui/src/styles-dashboard-workspace.css
+++ b/gui/src/styles-dashboard-workspace.css
@@ -54,10 +54,10 @@
   gap: var(--space-4);
 }
 
-/* Sub-agent delegation + Sync models share one row (same auto-fit rhythm as sidecars). */
+/* Settings keep one reading order and one control column across the overview. */
 .dash-overview-tools {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--space-4);
   align-items: stretch;
 }
@@ -527,3 +527,177 @@
   color: var(--text);
   white-space: nowrap;
 }
+
+
+/* Overview settings share a fixed control column, then stack together when the
+   content area is too narrow. Scope this to Overview; provider/model tables keep
+   their own layout. Dropdowns and popovers already portal outside the container. */
+.dash-overview-stack {
+  --dash-controls-width: 26rem;
+
+  container: dashboard-overview / inline-size;
+}
+
+.dash-overview-head .stat-row {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.dash-overview-head .stat-row > .stat {
+  min-width: 0;
+  min-height: 126px;
+  display: grid;
+  grid-template-rows: 24px 36px 18px;
+  align-content: center;
+  justify-content: stretch;
+  gap: 4px;
+}
+
+.dash-overview-head .stat .label {
+  margin: 0;
+  min-width: 0;
+}
+
+.dash-overview-head .stat .value {
+  min-width: 0;
+  align-self: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.dash-overview-head .dash-stat-version {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash-overview-head .dash-stat-coverage { margin: 0; }
+
+.dash-overview-stack .panel {
+  min-width: 0;
+  padding: 20px;
+}
+
+.dash-overview-stack .dash-delegation-summary,
+.dash-overview-stack .dash-sync-summary,
+.dash-overview-stack .dash-effort-panel .injection-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--dash-controls-width);
+  align-items: center;
+  gap: 24px;
+}
+
+.dash-overview-stack .dash-delegation-controls,
+.dash-effort-controls,
+.dash-shadow-controls {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.dash-overview-tools .dash-delegation-controls {
+  justify-content: flex-start;
+}
+
+.dash-overview-tools .dash-delegation-controls > .custom-select:first-child {
+  flex: 1 1 14rem;
+  min-width: 0;
+}
+
+.dash-overview-tools .dash-delegation-controls > .btn {
+  margin-left: auto;
+}
+
+.dash-effort-panel .injection-label { order: 0; }
+.dash-effort-controls { order: 1; }
+.dash-effort-controls > .custom-select { flex: 1; min-width: 0; }
+
+.dash-overview-stack .dash-delegation-controls .select-trigger,
+.dash-effort-controls .select-trigger,
+.dash-shadow-controls .select-trigger {
+  justify-content: space-between;
+  width: 100%;
+  min-width: 0;
+}
+
+.dash-overview-stack .dash-delegation-controls .select-trigger > span,
+.dash-effort-controls .select-trigger > span,
+.dash-shadow-controls .select-trigger > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash-overview-stack .dash-sidecar-row-card .dash-sidecar-copy {
+  min-width: 0;
+}
+
+.dash-overview-stack .dash-sidecar-row-card .setting-hint { min-height: 0; }
+
+.dash-overview-stack .dash-sidecar-row-card .dash-delegation-controls {
+  width: 100%;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.dash-overview-stack .dash-sidecar-select-row .custom-select:first-child {
+  flex: 1;
+  min-width: 0;
+  max-width: none;
+}
+
+.dash-shadow-controls {
+  width: var(--dash-controls-width);
+  flex-shrink: 0;
+}
+
+.dash-shadow-controls > .custom-select { flex: 1; min-width: 0; }
+.dash-shadow-controls > .switch { order: 1; }
+
+.dash-overview-stack .setting-hint,
+.dash-overview-stack .dash-sync-hint { max-width: 60ch; }
+
+@container dashboard-overview (max-width: 64rem) {
+  .dash-overview-head .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+@container dashboard-overview (max-width: 46rem) {
+  .dash-overview-stack .dash-delegation-summary,
+  .dash-overview-stack .dash-sync-summary,
+  .dash-overview-stack .dash-effort-panel .injection-head {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+  }
+
+  .dash-overview-stack .dash-delegation-controls,
+  .dash-overview-stack .dash-effort-controls,
+  .dash-overview-stack .dash-shadow-controls { width: 100%; }
+
+  .dash-overview-stack .dash-shadow-controls { flex-basis: 100%; }
+  .dash-overview-stack .spread:has(.dash-shadow-controls) { flex-wrap: wrap; }
+  .dash-shadow-label { min-width: 0; max-width: 100%; flex-wrap: wrap; }
+  .dash-shadow-label > .font-semibold { flex-shrink: 0; max-width: 100%; }
+  .dash-shadow-label > code { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; }
+  .dash-overview-stack .maintenance-actions { justify-content: flex-start; }
+}
+
+@container dashboard-overview (max-width: 30rem) {
+  .dash-overview-head .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .dash-overview-stack .panel { padding: 16px; }
+  .dash-overview-stack .select-trigger,
+  .dash-overview-stack .panel .btn:not([aria-haspopup="dialog"]),
+  .dash-overview-stack .dash-vision-advanced-trigger { min-height: 44px; }
+}
+
+
+.dash-ma-option { min-width: 36px; padding: 5px 10px; }
+
+@container dashboard-overview (max-width: 22rem) {
+  .dash-overview-head .dash-ma-switch { max-width: 100%; }
+  .dash-overview-head .dash-ma-option {
+    min-width: 0;
+    flex: 1 1 auto;
+    padding: 5px 4px;
+  }
+}
diff --git a/gui/src/styles.css b/gui/src/styles.css
index f4895b10cf..b0bbc0a6ff 100644
--- a/gui/src/styles.css
+++ b/gui/src/styles.css
@@ -271,11 +271,15 @@ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
    stays visible in BOTH light and dark (a plain <img> was invisible white-on-white in light). */
 .brand-logo { width: 26px; height: 26px; flex-shrink: 0; background: var(--text);
   -webkit-mask: url(/logo.png) center / contain no-repeat; mask: url(/logo.png) center / contain no-repeat; }
-.brand .name { font-weight: var(--weight-semibold); font-size: var(--text-subtitle); letter-spacing: 0; line-height: 26px; }
+.brand .name { flex-shrink: 0; font-weight: var(--weight-semibold); font-size: var(--text-subtitle); letter-spacing: 0; line-height: 26px; }
 .brand .ver {
   font-family: var(--font-code); font-size: var(--text-micro); color: var(--muted); line-height: var(--leading-tight);
   background: var(--raised); border: 1px solid var(--border); padding: 2px 6px; border-radius: var(--radius-pill);
   align-self: center;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* [Decision Log]
@@ -2421,7 +2425,7 @@ button.prov-account-row.active { cursor: default; }
   .mobile-topbar .brand .name {
     min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   }
-  .mobile-topbar .brand .ver { flex-shrink: 0; }
+  .mobile-topbar .brand .ver { flex-shrink: 1; }
   .mobile-topbar .stop-toggle { width: auto; min-width: 44px; min-height: 44px; justify-content: center; padding: 8px; }
   /* Both orbs keep the 44x44 touch target the single stop button had; a bare 28px
      .sidebar-orb would be a regression on the surface where it matters most. */
diff --git a/gui/tests/mobile-topbar-layout.test.ts b/gui/tests/mobile-topbar-layout.test.ts
index fc26a80f66..166d02fa63 100644
--- a/gui/tests/mobile-topbar-layout.test.ts
+++ b/gui/tests/mobile-topbar-layout.test.ts
@@ -25,7 +25,11 @@ test("the mobile brand can shrink, so the version badge cannot reach the action
   expect(name).toContain("text-overflow: ellipsis");
 
   const ver = block(".mobile-topbar .brand .ver");
-  expect(ver).toContain("flex-shrink: 0");
+  expect(ver).toContain("flex-shrink: 1");
+  const badge = block(".brand .ver {");
+  expect(badge).toContain("min-width: 0");
+  expect(badge).toContain("white-space: nowrap");
+  expect(badge).toContain("text-overflow: ellipsis");
 });
 
 test("the topbar action orbs keep their touch target", () => {