command hq: two columns, with the navigation stacked

It was 16 / 34 / 50 — a category column, a commander column, and the transcript. So half the screen was
navigation for a list holding a handful of commanders (one, on this machine) while the only thing anybody
reads got the other half.

Now the two navigation panels are stacked into one 24% column — commanders on top, categories beneath — and
the transcript takes 76%.

Categories BELOW the commanders, not above: the commanders are what you came for and the categories are how
you narrow them. Above, the filter would push the list down the screen and be read first; below, the list is
at the top where a list belongs, and the categories can grow their own scrollbar without taking room from it.

The categories panel lost seventy pixels of branding — a Radar tile, "Command HQ", "Watchers &
long-running jobs" — which made sense when it owned a column and does not now that it sits at the foot of
one. The screen's own header says Command HQ two inches above it.

`All commanders` and `Uncategorised` moved INTO the scroll box with the categories. They are the same kind of
thing, a filter over the list, and splitting them into a separate nav block above made the second look like a
different mechanism. The heading and the + button stay pinned; only the list scrolls — the same rule as the
theme dropdown.

MIGRATION, and it is the part that could have gone wrong. This key is persisted per account, so the default
alone moves nobody who has opened the screen. No appType was retired either, so `hasAppType` cannot see it
the way the /chat migration could — the test is structural instead: a horizontal root with three children is
the old shape. It terminates because the replacement has two, and replacing outright is safe on a `locked`
screen where the only user contribution is column sizes. Same reasoning, and same trap, as
ChatHistory/index.tsx.

Two of my edits silently did nothing first, because I searched for `officerdb` where the module is
`officerdev` and used replace without an assertion. Both are asserted now.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

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}