diff --git a/src/apps/officer-web/Screens/Dashboard/CommandHQ/CommandHqScreen.tsx b/src/apps/officer-web/Screens/Dashboard/CommandHQ/CommandHqScreen.tsx
index 4a9874eb..29e81bfd 100644
--- a/src/apps/officer-web/Screens/Dashboard/CommandHQ/CommandHqScreen.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/CommandHQ/CommandHqScreen.tsx
@@ -1,15 +1,29 @@
+import { useEffect } from 'react';
 import type { LayoutNode } from 'officerdev';
 import { WorkspaceView } from 'officerdev';
 import { useDashboardState } from 'state/useDashboardState';
-import { defaultLayout } from './defaultLayout';
+import { defaultLayout, isLegacyThreeColumn } from './defaultLayout';
 
-// /command-hq: nav + grid + detail, all three always mounted (like /chat), selection carried by the URL
+// /command-hq: navigation and detail, all panels always mounted (like /chat), selection carried by the URL
 // — `?category=` for the nav filter, `:sessionId` for the open commander. See `docs/command-hq.md` →
-// "Route, surface, placement" and "Layout, v1".
+// "Route, surface, placement".
 
 export const CommandHqScreen = () => {
   const workspace = useDashboardState<LayoutNode>('screens/command-hq', defaultLayout);
 
+  /*
+    Move a saved three-column layout onto the two-column one.
+
+    The default alone cannot do it: this key is persisted per account, so anybody who has opened the screen
+    keeps the arrangement they had. See `isLegacyThreeColumn` for why the test is structural rather than an
+    appType check, and why replacing outright is the safe direction on a `locked` screen.
+  */
+  useEffect(() => {
+    if (!workspace.isLoaded) return;
+    if (!isLegacyThreeColumn(workspace.value)) return;
+    workspace.setValue(defaultLayout);
+  }, [workspace.isLoaded, workspace.value, workspace.setValue]);
+
   return (
     <div className="h-full w-full pt-2">
       <WorkspaceView
diff --git a/src/apps/officer-web/Screens/Dashboard/CommandHQ/defaultLayout.ts b/src/apps/officer-web/Screens/Dashboard/CommandHQ/defaultLayout.ts
index 74fba76d..d24de3ad 100644
--- a/src/apps/officer-web/Screens/Dashboard/CommandHQ/defaultLayout.ts
+++ b/src/apps/officer-web/Screens/Dashboard/CommandHQ/defaultLayout.ts
@@ -1,14 +1,60 @@
 import type { LayoutNode } from 'officerdev';
 
-// Three columns, per `docs/command-hq.md` → "Layout, v1": category nav, commander grid, detail pane. The
-// detail pane gets the most room because it is a live chat transcript once something is selected.
+/*
+  Two columns, with the navigation stacked into the left one.
+
+  ── Why it changed from three ──
+
+  It was `16 / 34 / 50`: a category column, a commander column, and the transcript. So half the screen was
+  navigation for a list that holds a handful of commanders — one, on the machine this was written on — while
+  the only thing anybody reads got the other half. A category pane of its own is a filter for a list short
+  enough to see whole.
+
+  Now: commanders on top, categories beneath them, transcript taking three quarters.
+
+  ── Why the categories are BELOW the commanders ──
+
+  Because the commanders are the thing you came for and the categories are how you narrow them when there
+  are too many to scan. Above, the filter would push the list down the screen and be the first thing read;
+  below, the list is at the top where a list belongs and the filter is where you reach for it. It also means
+  the categories can grow their own scrollbar without ever taking room from the commanders.
+*/
 export const defaultLayout: LayoutNode = {
   type: 'group',
   id: 'command-hq-root',
   direction: 'horizontal',
   children: [
-    { node: { type: 'panel', id: 'command-hq-categories', appType: 'command-hq-categories' }, size: 16 },
-    { node: { type: 'panel', id: 'command-hq-grid', appType: 'command-hq-grid' }, size: 34 },
-    { node: { type: 'panel', id: 'command-hq-detail', appType: 'command-hq-detail' }, size: 50 },
+    {
+      node: {
+        type: 'group',
+        id: 'command-hq-nav',
+        direction: 'vertical',
+        children: [
+          { node: { type: 'panel', id: 'command-hq-grid', appType: 'command-hq-grid' }, size: 62 },
+          { node: { type: 'panel', id: 'command-hq-categories', appType: 'command-hq-categories' }, size: 38 },
+        ],
+      },
+      size: 24,
+    },
+    { node: { type: 'panel', id: 'command-hq-detail', appType: 'command-hq-detail' }, size: 76 },
   ],
 };
+
+/**
+ * Is this a saved copy of the three-column layout this replaced?
+ *
+ * No appType was retired — all three panels survive and only their arrangement changed — so `hasAppType`
+ * cannot see this the way the /chat migration could. The test is structural instead: the old shape is a
+ * horizontal root with THREE children, and the new one has two.
+ *
+ * It terminates for that reason: the replacement does not satisfy the test.
+ *
+ * Replacing outright is safe because the screen is `locked` — its structure is dictated by code, and the
+ * only thing a person can have contributed is the column sizes, which is a cheap thing to lose once. The
+ * same reasoning, and the same warning, as `ChatHistory/index.tsx`: get the test backwards and a stranded
+ * panel collapses onto `appTypes.fallback` and is written back, which is how /offscale once rendered three
+ * copies of one picker.
+ */
+export function isLegacyThreeColumn(node: LayoutNode): boolean {
+  return node.type === 'group' && node.direction === 'horizontal' && node.children.length === 3;
+}
diff --git a/src/workspaces/officerdev/src/apps/CommandHQ/CommandHqCategories.tsx b/src/workspaces/officerdev/src/apps/CommandHQ/CommandHqCategories.tsx
index 7e98d3e5..42584cea 100644
--- a/src/workspaces/officerdev/src/apps/CommandHQ/CommandHqCategories.tsx
+++ b/src/workspaces/officerdev/src/apps/CommandHQ/CommandHqCategories.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Link, useSearchParams } from 'react-router';
-import { Plus, Radar } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { toast } from '@/components/ui/sonner';
 import { errorText } from 'helpers/error-text';
 import { categoryFromParam, commandHqListPath } from './command-hq-routes';
@@ -55,23 +55,21 @@ export const CommandHqCategories = () => {
   };
 
   return (
-    <div className="flex h-full flex-col overflow-y-auto bg-muted/30">
-      <div className="flex items-center gap-3 px-4 py-4">
-        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10">
-          <Radar className="h-5 w-5 text-primary" />
-        </div>
-        <div className="min-w-0">
-          <div className="truncate text-sm font-semibold leading-tight">Command HQ</div>
-          <div className="truncate text-xs text-muted-foreground">Watchers &amp; long-running jobs</div>
-        </div>
-      </div>
+    /*
+      One scrollable list, and a heading that does not scroll with it.
 
-      <nav className="flex flex-col gap-0.5 px-2 pb-3">
-        <Row label="All commanders" active={active === undefined} to={commandHqListPath(undefined)} />
-        <Row label="Uncategorised" active={active === 'none'} to={commandHqListPath('none')} />
-      </nav>
+      This was a nav COLUMN with the screen's branding at the top — a 9px Radar tile, "Command HQ", and
+      "Watchers & long-running jobs" — costing about seventy pixels. All three are gone: the panel now sits
+      at the FOOT of the left column rather than owning it, so the vertical room is the whole budget, and the
+      screen's own header already says Command HQ two inches above. Repeating it in a filter panel was
+      branding where a list should be.
 
-      <div className="mt-2 flex items-center justify-between px-4 pb-1">
+      `All commanders` and `Uncategorised` are inside the scroll box with the categories rather than in a
+      separate nav above it. They are the same kind of thing — a filter over the list — and splitting them
+      into two nav blocks made the second look like a different mechanism.
+    */
+    <div className="flex h-full min-h-0 flex-col bg-muted/30">
+      <div className="flex shrink-0 items-center justify-between border-b border-border px-3 py-2">
         <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Categories</span>
         <button
           type="button"
@@ -83,7 +81,9 @@ export const CommandHqCategories = () => {
         </button>
       </div>
 
-      <nav className="flex flex-col gap-0.5 px-2 pb-3">
+      <nav className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto p-2">
+        <Row label="All commanders" active={active === undefined} to={commandHqListPath(undefined)} />
+        <Row label="Uncategorised" active={active === 'none'} to={commandHqListPath('none')} />
         {categories.map((category) => (
           <Row
             key={category.id}