From 43ac7ef8b91735318d7f877e28bf7400d0ee1edd Mon Sep 17 00:00:00 2001
From: Tim Gage <github@timgage.fastmail.fm>
Date: Sun, 17 May 2026 20:05:40 +0100
Subject: [PATCH 1/7] Production view refactor

---
 docs/prd/13-production.md           |  15 +-
 docs/prd/60-ui-overview.md          |   7 +-
 docs/prd/62-ui-planet-detail.md     |  40 +++-
 docs/prd/67-ui-planet-list.md       | 183 +++++++++++++++
 docs/prd/68-ui-production.md        | 224 +++++++++++++++++++
 docs/prd/README.md                  |   2 +
 tasks/2026-05-17-production-view.md | 334 ++++++++++++++++++++++++++++
 tasks/backlog.md                    |   1 +
 8 files changed, 795 insertions(+), 11 deletions(-)
 create mode 100644 docs/prd/67-ui-planet-list.md
 create mode 100644 docs/prd/68-ui-production.md
 create mode 100644 tasks/2026-05-17-production-view.md

diff --git a/docs/prd/13-production.md b/docs/prd/13-production.md
index 9bdfbf10..3e0888e5 100644
--- a/docs/prd/13-production.md
+++ b/docs/prd/13-production.md
@@ -555,13 +555,16 @@ The implementation should choose one form and keep it consistent.
 
 ## UI Notes
 
-This PRD does not redefine layout from [PRD 08 — UI](08-ui.md), but it does constrain behaviour:
+The full editing surface for production queues is defined in [PRD 68 — UI Production](68-ui-production.md). This PRD owns the simulation; PRD 68 owns the screen.
 
-- The production panel should show one queue per selected planet
-- Players must be able to add, remove, reorder, and clear queue items
-- The UI should display partial progress on the currently building unit
-- The UI should display whether the queue is blocked by resource shortage or mineral shortage
-- Initial inventory for this phase needs `Mine`, `Factory`, and any owned ship entries returned by PRD 18 endpoints
+Behavioural constraints this PRD places on any production UI:
+
+- One queue per owned planet (no shared queues, no cross-planet templating in scope).
+- The UI must allow add, remove, reorder, and clear of queue items via the commands defined above.
+- Partial progress on the currently building unit must be visible.
+- The UI should surface whether a queue is blocked by resource or mineral shortage.
+- Initial palette entries are `mine`, `factory`, `planetary_scanner`, and one entry per owned ship design returned by PRD 18 endpoints. Starbase entries come from [PRD 17 — Starbases](17-starbases.md).
+- A separate per-planet quick-edit surface (e.g. in the planet detail panel) is **not** required and is explicitly removed by PRD 68 in favour of a single canonical editor. The planet detail panel retains a read-only queue summary and a link into PRD 68.
 
 ## Future Extensions
 
diff --git a/docs/prd/60-ui-overview.md b/docs/prd/60-ui-overview.md
index 23ab3316..c2a79664 100644
--- a/docs/prd/60-ui-overview.md
+++ b/docs/prd/60-ui-overview.md
@@ -7,6 +7,11 @@ This document defines the overall UI design for OpenStars! — the screens, layo
 - [PRD 61 — Galaxy Map](61-ui-galaxymap.md)
 - [PRD 62 — Planet Detail Panel](62-ui-planet-detail.md)
 - [PRD 63 — Fleet Detail Panel](63-ui-fleet-detail.md)
+- [PRD 64 — Waypoint Orders](64-ui-waypoint-orders.md)
+- [PRD 65 — Fleet Merge & Split](65-ui-fleet-merge-split.md)
+- [PRD 66 — Research UI](66-ui-research.md)
+- [PRD 67 — Planet List](67-ui-planet-list.md)
+- [PRD 68 — Production UI](68-ui-production.md)
 
 The goal is a galaxy map that evokes the original Stars! (1995) while bringing the controls and information design into the modern era.
 
@@ -132,10 +137,10 @@ Phase 2 (Basic UI) implements the minimum needed to interact with the Phase 1 en
 - Waypoint setting by clicking the map
 - Turn submission and status display
 - Event log (fleet arrived, planet scanned)
+- Production queue management — top-level workspace (see [PRD 68 — UI Production](68-ui-production.md))
 - Responsive layout (detail panel collapse on narrow screens)
 
 **Out of scope (future phases):**
-- Production queue management
 - Ship designer
 - Research allocation
 - Race/trait configuration
diff --git a/docs/prd/62-ui-planet-detail.md b/docs/prd/62-ui-planet-detail.md
index a83d697e..f21272fd 100644
--- a/docs/prd/62-ui-planet-detail.md
+++ b/docs/prd/62-ui-planet-detail.md
@@ -16,7 +16,8 @@ When a planet is selected, the detail panel shows what the player knows about it
 - Mineral summary (see Mineral Display below)
 - Habitability bars (see Habitability Display below)
 - Research contribution toggle (own planet only — see Research Contribution below)
-- *(Future phases: production queue, defences)*
+- Production summary and "Manage production" link (own planet only — see Production Summary below)
+- *(Future phases: defences)*
 
 **`scan_level: "basic"` (within normal scanner range):**
 - Planet name
@@ -75,7 +76,7 @@ If `has_scanner` is false, show a muted placeholder:
 Scanner:  None installed
 ```
 
-No inline production shortcut is shown here — the player uses the production queue panel (future phase) to add one.
+No inline production shortcut is shown here — the player uses the Production view (see [PRD 68 — UI Production](68-ui-production.md)) to add a `planetary_scanner` to the queue.
 
 ### Enemy Planet (Penetrating Scan)
 
@@ -261,6 +262,37 @@ Only one such command per planet per turn — a second flip replaces the first i
 
 ### Visibility
 
-- The section is absent for non-own planets, including enemy planets under a penetrating scanner — the toggle is owner-only, keyed on `PlayerPlanet.contribute_only_leftover_to_research` being present.
-- The section is absent on stale own planets (an own planet can become stale if it is captured and later falls out of scanner range); the toggle needs a live planet view to edit.
+- The section is absent for non-own planets, including enemy planets under a penetrating scanner — the toggle is owner-only, keyed on `PlayerPlanet.contribute_only_leftover_to_research` being present (and by PRD 11, an own planet is always `scan_level: "detailed"` with `scan_age: 0`, so no separate scan / staleness gate is needed; loss of ownership clears the field).
 - The section is absent when the player's `PlayerState.research` is absent (e.g. pre-PRD 21 states during migration), since the "Reserved this turn" figure has no source.
+
+## Production Summary
+
+Shown on **own planets only**. The full production editor lives in [PRD 68 — UI Production](68-ui-production.md); this section is a compact read-only summary plus a link into that workspace.
+
+By PRD 11, an own planet is always `scan_level: "detailed"` with `scan_age: 0`. Ownership is therefore the only gate — if the player is the owner, the planet view is live by construction. The de-facto signal in the client is `PlayerPlanet.production_queue` being present (it is `None` for non-owners per PRD 13 visibility).
+
+### Layout
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  Production                          [ Manage → ]      │
+│  Queue: 3× Factory, 5× Mine, +1 more                   │
+└─────────────────────────────────────────────────────────┘
+```
+
+Elements:
+
+- **Header** — section label `Production` with a `Manage →` button on the right. Clicking the button switches the app to Production mode (PRD 68) and pre-selects this planet in the list.
+- **Queue summary** — one line summarising the first few queue entries:
+  - Empty queue: `Queue: empty`.
+  - One entry: `Queue: <qty>× <label>`.
+  - Two entries: `Queue: <qty>× <label>, <qty>× <label>`.
+  - Three or more: `Queue: <qty>× <label>, <qty>× <label>, +<N> more` where `N = queue.length - 2`.
+  - Labels use the same display names as the Production workspace (ship-design name for `ship` items, friendly type names otherwise).
+
+No add / remove / reorder controls live on the planet detail panel — those gestures all go through PRD 68.
+
+### Visibility
+
+- Present when the viewing player owns the planet (equivalently, `PlayerPlanet.production_queue` is non-null).
+- Absent otherwise — including enemy planets under any scan level, and any stale carried-forward record of a planet the player used to own (once ownership is lost, `production_queue` is nulled and the planet ceases to be an "own planet" for visibility purposes).
diff --git a/docs/prd/67-ui-planet-list.md b/docs/prd/67-ui-planet-list.md
new file mode 100644
index 00000000..ed3e99ba
--- /dev/null
+++ b/docs/prd/67-ui-planet-list.md
@@ -0,0 +1,183 @@
+# PRD 67 — UI Planet List
+
+Part of the UI series — see [PRD 60 — UI Overview](60-ui-overview.md) for layout, design principles, and colour system.
+
+## Overview
+
+The Planet List is a reusable tabular view of the player's known planets. It is the modern equivalent of the original Stars! "Planet List" view (F3): a sortable, filterable table that surfaces the same information density the original gave players when managing many worlds at once.
+
+This PRD defines the list primitive — its data sources, default columns, sort and filter behaviour, selection semantics, and the slots a consumer screen can use to swap in opinionated columns. It does not define any single screen that hosts the list; the first consumer is [PRD 68 — UI Production](68-ui-production.md).
+
+## Design Goals
+
+- **One implementation, many consumers.** Production today; fleet-list, summary view, and bombing/invasion screens later all reuse the same component.
+- **Cheap to read.** The default columns answer the player's most common per-planet questions at a glance — owner, population, mines/factories, queue head, resources/turn — without opening the planet detail panel.
+- **Cheap to filter.** Free-text search and a small number of toggle filters cover the common slicing tasks; full faceting is out of scope.
+- **Single-select for now.** Multi-select / bulk operations are out of scope (see [PRD 13 — Production](13-production.md) for the rationale); the API leaves room for a future `selectedIds: string[]` without a redesign.
+- **Data comes from `PlayerState`.** No new API endpoints. The list reads `PlayerState.planets`, optionally falling back to `galaxy.planets` for unscanned entries when the consumer asks for them.
+
+## Entry Points
+
+The list itself has no top-bar entry — each consumer screen mounts it. Initial consumer:
+
+- [PRD 68 — UI Production](68-ui-production.md) — Production view's left pane.
+
+Future consumers (not in scope here) may include a dedicated "Planets" top-bar tab and the bombing/invasion target picker.
+
+## Component API
+
+New component: `frontend/src/components/panels/PlanetList.tsx`.
+
+### Props
+
+```ts
+interface PlanetListProps {
+  planets: PlayerPlanet[];
+  selectedPlanetId: string | null;
+  onSelectPlanet: (planetId: string) => void;
+  columns: PlanetListColumn[];
+  filter?: PlanetListFilter;          // optional; consumers may pass their own
+  emptyState?: ReactNode;             // shown when planets is non-empty but filtered set is empty
+}
+```
+
+- `planets` — already-scoped input. Consumers filter upstream (e.g. Production passes only own planets).
+- `selectedPlanetId` / `onSelectPlanet` — controlled selection; the list never owns selection state itself.
+- `columns` — ordered list of column descriptors (see below). The consumer decides which columns to show.
+- `filter` — optional filter state (search string + a small set of toggles). Omitting `filter` shows no filter controls.
+- `emptyState` — custom empty-state node; falls back to a generic message if absent.
+
+### Column descriptor
+
+```ts
+interface PlanetListColumn {
+  id: string;                         // stable id, e.g. "name", "population", "queue_head"
+  header: string;                     // column heading
+  align?: "left" | "right";           // default "left"
+  width?: string;                     // CSS width hint (e.g. "10rem"), optional
+  sortable?: boolean;                 // default true
+  sortValue?: (planet: PlayerPlanet) => number | string | null;
+  render: (planet: PlayerPlanet) => ReactNode;
+}
+```
+
+`sortValue` is required when `sortable` is true. Null-sorting: nulls sort *last* regardless of direction (so empty-queue planets don't pollute the top of the sort).
+
+### Default column descriptors
+
+Exported alongside the component as composable building blocks. Consumers import the ones they want:
+
+| Column id        | Header           | Source                                                          | Sort                          |
+|------------------|------------------|------------------------------------------------------------------|-------------------------------|
+| `name`           | Name             | `planet.name`                                                    | by name (locale-aware)        |
+| `owner`          | Owner            | `planet.owner` (or "You" for own)                                | own first, then by username   |
+| `population`     | Pop              | `planet.population`                                              | numeric desc by default       |
+| `resources`      | Res/turn         | `planet.resources`                                               | numeric desc                  |
+| `mines`          | Mines            | `planet.mines`                                                   | numeric desc                  |
+| `factories`      | Factories        | `planet.factories`                                               | numeric desc                  |
+| `starbase`       | Starbase         | `planet.starbase` (short label: "None" / "Dock" / "+ships")      | by capability rank            |
+| `queue_head`     | Building         | first item in `planet.productionQueue` ("—" when empty)          | by item-type label, nulls last|
+| `queue_length`   | Q                | `planet.productionQueue.length`                                  | numeric desc                  |
+| `scanner`        | Scanner          | `planet.scanner.installed` ("Yes" / "—")                         | installed first               |
+
+Columns that depend on owner-only fields (`production_queue`, `resources`) render `—` for non-own planets; sorts treat them as null.
+
+### Filter shape
+
+```ts
+interface PlanetListFilter {
+  search: string;                                                  // matches name (case-insensitive)
+  toggles: Array<{ id: string; label: string; active: boolean }>;  // consumer-defined toggles
+  onChange: (next: PlanetListFilter) => void;
+}
+```
+
+The list applies `search` against `planet.name`. Toggle predicates are not encoded in the filter state itself — the consumer applies its own toggle logic when computing the `planets` array passed in. The list renders the toggle pills using the array provided so the visuals live in one place.
+
+This is intentional: it keeps the list dumb about what each toggle means while still owning the toggle UI.
+
+## Visual Specification
+
+### Layout
+
+```
+┌──────────────────────────────────────────────────────────────────────┐
+│  Search [____________]   [□ Empty queue]  [□ Has starbase]  [✕]      │
+├──────────────────────────────────────────────────────────────────────┤
+│  Name           Pop      Res/turn  Mines  Factories  Building   Q   │
+├──────────────────────────────────────────────────────────────────────┤
+│ ▸ Earth         312,400     412      24        61    Factory    3   │
+│   Mars           54,200     127      18        12    —          0   │
+│   Procyon V     128,900     201      19        25    Scout      5   │
+└──────────────────────────────────────────────────────────────────────┘
+```
+
+- Selected row gets a player-self accent border on the left and a slightly raised surface background.
+- Sortable column headers show an arrow indicator on the active sort column.
+- Hover shows a muted background to telegraph clickability.
+- Rows are clickable across their full width — no per-cell click targets.
+
+### Sorting
+
+- Click a sortable header to set it as the active sort, ascending. Click again to flip to descending. Click a third time to clear the sort and fall back to the default sort.
+- Default sort: `name` ascending.
+- Sort state is local to the list instance (held in component state); not persisted to URL or `PlayerState`.
+
+### Empty states
+
+- `planets` is empty: render the consumer-provided `emptyState`, or `"No planets to show."` as fallback.
+- `planets` is non-empty but the filter excludes everything: render `"No planets match the current filter."` plus a `Clear filter` button that calls `filter.onChange({ ...filter, search: "", toggles: toggles.map(t => ({ ...t, active: false })) })`.
+
+### Keyboard
+
+- `Tab` moves focus into the list; the first focusable element is the search input (when filter is present), otherwise the first row.
+- `Up` / `Down` move between rows when focus is inside the list. `Enter` / `Space` selects the focused row.
+- `Home` / `End` jump to the first / last row.
+- Typing while a row is focused does not type-ahead in the first cut; this is a deferred polish item.
+
+## Selection Semantics
+
+- Single-select. The list never tracks selection state internally — it is fully controlled via `selectedPlanetId` and `onSelectPlanet`.
+- Selecting a row never opens a planet panel or changes the galaxy map selection on its own. Cross-screen selection (e.g. selecting a planet here, opening it on the map) is a consumer concern.
+- A `null` `selectedPlanetId` is valid — no row is highlighted.
+
+## Data Source
+
+Reads exclusively from `PlayerState.planets`. The list does not fetch.
+
+Fields used by the default columns must be populated on the supplied `PlayerPlanet` records. Consumers that want columns based on data that's only present for own planets (production queue, mineral stockpile, etc.) are expected to filter the input to own planets upstream — this PRD does not gate columns by ownership at render time beyond rendering `—` for missing values.
+
+The list does **not** read from `galaxy.planets`. If a consumer needs to render rows for planets the player has never seen (unlikely but possible), the consumer should synthesise stub `PlayerPlanet` records and pass them in.
+
+## Performance Targets
+
+Initial scale: up to ~200 planets per player. At that size:
+
+- A single render of the list with default columns must stay under 16 ms on a typical desktop browser.
+- Sorting and filtering operations are O(n log n) and O(n) respectively; no memoisation gymnastics are needed at this scale, but the component should accept a stable column array (the consumer is expected to define the columns outside render).
+
+Virtualisation is **out of scope**. If we ever ship a galaxy with thousands of planets it becomes worth revisiting — until then, plain rendering is simpler to test and reason about.
+
+## Accessibility
+
+- Rows are real `<button>` elements (or `<tr>` with `role="row"` + `tabindex="0"` if a table semantics is preferred — implementation choice).
+- Selected row exposes `aria-selected="true"`.
+- Sort indicator on column headers uses `aria-sort` with `ascending` / `descending` / `none`.
+- The search input has a visible label or an `aria-label="Search planets"`.
+
+## Relationship to Other PRDs
+
+- **PRD 60 — UI Overview** — overall layout, colour system.
+- **PRD 68 — UI Production** — first consumer; uses this list in the left pane of the Production view.
+- **PRD 11 — Scanners** — `scan_level` semantics, owner-only fields. The list is unaware of scanner rules; the consumer is expected to pass already-appropriate records.
+- **PRD 13 — Production** — `production_queue` shape used by the `queue_head` and `queue_length` default columns.
+- **PRD 62 — Planet Detail Panel** — neighbouring planet view. The Planet List can host a "Show on map" or "Open panel" affordance via a custom column if needed; this is a consumer concern.
+
+## Deferred
+
+- **Multi-select** (`selectedIds: string[]`, ctrl/shift-click) — held back per the production-view decision; the column descriptor API does not need to change to add it later.
+- **Column reordering / show-hide controls** — consumers ship a fixed column set for now. A persistence layer for per-user column preferences is a future concern.
+- **Type-ahead row navigation** — typing a name prefix jumps to the matching row.
+- **Saved filter presets** — "Worlds blocked on minerals", "Worlds with no queue", etc.
+- **Virtualisation** for very large galaxies.
+- **URL-persistent sort and filter state** — keeps screen reload sticky; minor quality-of-life.
diff --git a/docs/prd/68-ui-production.md b/docs/prd/68-ui-production.md
new file mode 100644
index 00000000..c6fe2556
--- /dev/null
+++ b/docs/prd/68-ui-production.md
@@ -0,0 +1,224 @@
+# PRD 68 — UI Production
+
+Part of the UI series — see [PRD 60 — UI Overview](60-ui-overview.md) for layout, design principles, and colour system.
+
+## Overview
+
+The Production view is a top-level workspace for managing per-planet production queues across all of a player's owned planets. It is the editing surface for [PRD 13 — Production](13-production.md).
+
+Production previously lived inside the right-hand planet detail panel — a compact picker plus a vertical queue. That layout is fine for a single planet but cramped when surveying many worlds and unclear about what is buildable. This PRD moves the full editor into its own workspace, modelled on the existing [PRD 66 — Research UI](66-ui-research.md) flow: a top-bar `Production` tab opens a dedicated, in-flow workspace.
+
+This PRD does not change any production simulation defined in PRD 13. Queue commands, costs, and resolution rules are unchanged.
+
+## Design Goals
+
+- **Sweep across many planets.** The left pane is a planet list (per [PRD 67 — UI Planet List](67-ui-planet-list.md)) so the player can move between worlds without returning to the galaxy map.
+- **Production-focused planet context.** The middle pane renders only the planet state that matters for production (resources/turn, minerals, mines/factories, starbase capability) — not a copy of the planet detail panel.
+- **Discoverable build options.** The right pane is a build palette listing every queueable item with cost, grouped by category. Replaces the dropdown-style picker.
+- **One canonical editor.** The per-planet queue editor in the planet detail panel goes away. The detail panel keeps a read-only queue summary plus a `Manage production →` button that opens this workspace pre-selected to that planet.
+
+## Entry Points
+
+### Top-bar Production tab
+
+The top bar's left-side view selector (PRD 60) gains a `Production` tab alongside Command, Designer, and Research:
+
+```
+[Command]   [Production]   [Designer]   [Research]
+```
+
+The tab is always visible (unlike Research, which is gated on `PlayerState.research`). It is enabled whenever the player has at least one owned planet; otherwise it is rendered disabled with a tooltip ("No owned planets yet").
+
+### Keyboard shortcut
+
+`P` switches to the Production workspace from anywhere in Command view (provided no text input is focused). Pressing `P` while already in Production returns to Command view. Mirrors the `R` shortcut for Research.
+
+### Planet Detail link
+
+The planet detail panel, on an own detailed-scan planet, shows a `Manage production →` button. Clicking it switches the app to Production mode and selects that planet in the list.
+
+## Workspace Layout
+
+Three panes, left to right, filling the area below the top bar:
+
+```
+┌──────────────────────────────────────────────────────────────────────────────┐
+│  TopBar:  [Command] [Production*] [Designer] [Research]                      │
+├────────────────────┬──────────────────────────────────┬──────────────────────┤
+│ Planet List        │ Selected planet                  │ Build palette        │
+│ (PRD 67)           │                                  │                      │
+│                    │  ── summary ────────────────     │  ── categories ──    │
+│ Search [______]    │  Earth (you)                     │  Infrastructure      │
+│ [□ Empty queue]    │  Res/turn:    412                │   • Mine          5  │
+│                    │  Mines / Fac: 24 / 61            │   • Factory      10g │
+│ ▸ Earth     Q3     │  Starbase:    Dock (+ships)      │   • Scanner    100r  │
+│   Mars      —      │  Minerals:    642 / 213 / 416    │                      │
+│   Procyon V Q5     │  Status:      Building (3 left)  │  Ships               │
+│   ...              │                                  │   • Scout            │
+│                    │  ── queue ──────────────────     │   • Colony Ship      │
+│                    │  ≡ Factory ×3   res 6/10   [-+×] │   • Freighter        │
+│                    │  ≡ Mine    ×5               [-+×]│   ...                │
+│                    │  ≡ Scout   ×2               [-+×]│                      │
+│                    │                                  │  (drag or click to   │
+│                    │  [ Clear queue ]                 │   add to queue)      │
+└────────────────────┴──────────────────────────────────┴──────────────────────┘
+```
+
+Default pane widths: left 22%, centre 48%, right 30%. Panes are not user-resizable in the first cut.
+
+### Pane 1 — Planet list
+
+- Uses the `PlanetList` component from PRD 67.
+- Source: all planets in `PlayerState.planets` where `planet.owner === currentPlayer`. The list is unconditionally populated with own planets, including brand-new colonies with no factories yet (see "Inclusion rule" below).
+- Default columns: `name`, `population`, `resources`, `mines`, `factories`, `queue_head`, `queue_length`.
+- Filter:
+  - Search by name.
+  - Toggle: `Empty queue` — only planets with `productionQueue.length === 0`.
+  - Toggle: `Has starbase` — only planets with `planet.starbase != null`.
+  - Toggle: `Can build ships` — only planets with `planet.starbase?.canBuildShips === true`.
+- Default sort: `name` ascending.
+- Selection drives the centre and right panes. A selection is always present once the workspace mounts; on first mount, the list pre-selects (in order of preference): the planet passed in via the `Manage production →` entry point, otherwise the first row.
+
+#### Inclusion rule
+
+All owned planets appear in the list, regardless of `mines + factories` count or starbase presence. This was chosen over a "has production capacity" filter so that brand-new colonies are visible immediately and the player can queue their first mines. The `Empty queue` and `Has starbase` toggles handle the slicing cases the alternative was trying to solve.
+
+### Pane 2 — Selected planet
+
+Renders a production-focused subset of the planet detail panel. The full planet detail panel (PRD 62) is **not** re-mounted here.
+
+Sections, top to bottom:
+
+1. **Header**: planet name, scan-level chip (always "detailed" for own planets per PRD 11), and a small `Show on map` link that returns to Command view with this planet selected. No close affordance — the workspace owns the whole content area.
+2. **Production summary**:
+   - `Res/turn: <N>` — `planet.resources`. When the planet is set to leftover-only, append ` (leftover only)`.
+   - `Mines / Factories: <M> / <F>` — `planet.mines` and `planet.factories`.
+   - `Starbase: <label>` — concise capability label (`None`, `Dock`, `Dock (+ships)`, etc.).
+   - `Minerals: I / B / G` — surface stockpile per mineral type.
+   - `Status: <state>` — derived locally:
+     - `Idle` when queue is empty.
+     - `Building (<N> remaining)` when queue is non-empty and the first item has `quantity` units left.
+     - `Blocked` when the most recent turn's resolution emitted an event indicating the planet's queue blocked (a follow-up; until that hookup lands, render `Building (<N> remaining)`).
+3. **Queue editor** — see "Queue editor" below.
+
+The middle pane never shows the full mineral bar chart or habitability chart from PRD 62 — those are not production decisions. Players who want them switch to Command view.
+
+### Pane 3 — Build palette
+
+Categorised list of every queueable item the player can build today. Mirrors the visual treatment of the Designer's component palette (categorised, scrollable, items show cost) without borrowing its drag-onto-grid mechanics.
+
+Categories and items:
+
+| Category        | Items                                                                                          |
+|-----------------|------------------------------------------------------------------------------------------------|
+| Infrastructure  | Mine, Factory, Planetary Scanner                                                               |
+| Ships           | One entry per owned ship design (from `playerState.designs`)                                   |
+| Starbases       | Available starbase upgrades for the selected planet (from PRD 17 starbase reference)            |
+
+Each palette row shows:
+
+- Label (item name).
+- Cost: resources and per-mineral costs as a compact line (e.g. `10r 4g`).
+- A short availability note when the item is not currently queueable on the selected planet (e.g. `Needs starbase`, `Already installed`, `Already queued`). Unavailable rows are visually muted and not clickable.
+
+Click-to-append adds the item to the end of the selected planet's queue. Holding `Shift` while clicking adds with `quantity = 5` (a small ergonomic boost — single click is `quantity = 1`). The palette never reorders existing queue items; reordering is a queue-pane gesture (see below).
+
+### Queue editor
+
+Inside the centre pane. Renders the selected planet's `productionQueue` as an ordered list of rows:
+
+| Element                          | Behaviour                                                              |
+|----------------------------------|------------------------------------------------------------------------|
+| Drag handle (`≡`)                | Drag a row to reorder within the queue. Uses dnd-kit (already in repo). |
+| Item label                       | Item type name, or design name for ships.                              |
+| Quantity                         | `× N`. Editable inline via the +/- buttons.                            |
+| Progress                         | `res a/b` for the unit currently under construction. Hidden when `a == 0`. |
+| `+ / −` quantity controls       | Increment / decrement quantity. Decrementing to 0 removes the row.    |
+| `↑ / ↓` arrow controls          | Move the row up / down one position. Keyboard-accessible alternative to drag. |
+| Remove button (`×`)              | Removes the row entirely (regardless of quantity).                     |
+
+Below the queue rows:
+
+- `Clear queue` button — disabled when the queue is empty. Confirms via inline danger styling (no separate confirm dialog).
+
+Drag-to-reorder and arrow controls produce the same `move_production_item` command stream as the existing per-planet editor — the queue diff helpers in [frontend/src/lib/productionQueueCommands.ts](../../frontend/src/lib/productionQueueCommands.ts) are reused unchanged.
+
+`planetary_scanner` rows remain a special case from PRD 13:
+
+- Quantity is always 1.
+- The `+` quantity control is disabled.
+- The palette entry for `Planetary Scanner` is hidden / disabled when the planet already has a scanner installed or already has a queued scanner.
+
+### Empty states
+
+- **No owned planets** — the workspace renders the empty pane structure with a centred message ("Colonise a planet to start producing.") and the top-bar tab is rendered disabled.
+- **Selected planet, empty queue** — middle pane queue area shows `Queue empty. Add items from the palette →`. Palette remains active.
+- **Selected planet, no matching palette items** — should not happen for own planets, but if it does, palette renders a fallback message ("Nothing available to build right now.").
+
+## Planet Detail Panel Changes
+
+The full per-planet queue editor in [frontend/src/components/panels/PlanetDetail.tsx](../../frontend/src/components/panels/PlanetDetail.tsx) is replaced by:
+
+- A `Production` section with a one-line read-only summary: e.g. `Queue: 3× Factory, 5× Mine, +1 more` or `Queue: empty`.
+- A `Manage production →` button that switches mode to Production and selects this planet.
+
+This change is reflected in [PRD 62 — Planet Detail Panel](62-ui-planet-detail.md). The summary is owner-only — gated on ownership alone, since an own planet is always `scan_level: "detailed"` with `scan_age: 0` by construction (PRD 11).
+
+## Command Model
+
+Production view edits use the existing PRD 13 commands — no new command shapes:
+
+- `add_production_item` — palette click.
+- `move_production_item` — drag-reorder or arrow buttons.
+- `remove_production_item` — `−` quantity (partial) or `×` remove (full).
+- `clear_production_queue` — `Clear queue` button.
+
+All edits queue commands through the existing `planet`-scoped dirty buffer (see [frontend/src/hooks/useGameCommands.ts](../../frontend/src/hooks/useGameCommands.ts)). The workspace never calls the server between turn submissions. Switching planets in the planet list does not flush anything — pending edits for any planet persist until the player submits the turn (or returns the controls to the committed state, in which case the queue-command diff resolves to empty).
+
+The set of queue-diff helpers in `productionQueueCommands.ts` is reused unchanged.
+
+## Interaction Flow
+
+1. Player clicks the top-bar `Production` tab (or presses `P`, or clicks `Manage production →` on a planet panel).
+2. Workspace mounts; planet list selects the entry planet (or the first row).
+3. Player edits the queue via palette clicks, drag-to-reorder, arrow buttons, quantity controls, or `Clear queue`.
+4. Each edit immediately produces zero or more PRD 13 commands appended to the `planet`-scoped buffer; the centre pane re-renders against the working queue (the same merging applied today in the planet detail panel).
+5. Player switches planets in the list and continues. Pending commands across planets coexist.
+6. Player returns to Command view (top-bar tab, `P`, or `Esc`) and submits the turn.
+
+## Keyboard
+
+- `P` — toggle Production / Command view (suppressed when a text input is focused).
+- `Esc` — return to Command view from Production.
+- `↑` / `↓` — move selection within the planet list when the list has focus.
+- Within the queue editor, `Tab` cycles through queue rows; on each row, `↑` / `↓` move the row, `+` / `−` adjust quantity, `Delete` / `Backspace` removes.
+
+## Visual Tokens
+
+Reuse existing tokens:
+
+- `panel-surface`, `--color-panel-border` for pane backgrounds and dividers.
+- `--color-player-self` accent for the selected planet row.
+- Designer-style palette row hover (`hover:bg-white/8`) for the build palette.
+
+No new colour or spacing tokens are introduced.
+
+## Relationship to Other PRDs
+
+- **PRD 13 — Production** — queue model, commands, costs. Unchanged by this PRD.
+- **PRD 17 — Starbases** — gating for ship and starbase production rows in the palette.
+- **PRD 18 — Ship Design** — source of design entries for the `Ships` palette category.
+- **PRD 60 — UI Overview** — top-bar layout (Production tab placement), colour system.
+- **PRD 62 — Planet Detail Panel** — gains the production summary + `Manage production →` link; loses the full queue editor.
+- **PRD 67 — UI Planet List** — reusable list primitive used in the left pane.
+
+## Deferred
+
+- **Multi-planet selection / bulk operations.** The architectural pieces (controlled selection in PRD 67, planet-scoped commands in PRD 13) leave room for it. Held back to keep the first cut single-planet.
+- **Production templates and apply-to-all.** A follow-up that builds on bulk operations.
+- **Turns-to-complete estimate in palette rows and queue rows.** Tracked in [tasks/backlog.md](../../tasks/backlog.md) under Production. Needs a small client-side estimator that takes the planet's `resources` and mineral stockpile and walks the queue.
+- **"Blocked by minerals/resources" badge** on planets and queue items, driven by the previous turn's resolution events. Useful but requires an event-source lookup that we don't yet expose to the client cleanly.
+- **Pane resizing**.
+- **Drag from the palette directly into a queue position** (insert at a specific index). The first cut only supports drag *within* the queue; palette adds always append.
+- **Cost preview for the whole queue** (total resources, total minerals) in the centre pane footer.
+- **Keyboard type-ahead** in the planet list.
diff --git a/docs/prd/README.md b/docs/prd/README.md
index b94f8e74..cbf9bdd0 100644
--- a/docs/prd/README.md
+++ b/docs/prd/README.md
@@ -32,6 +32,8 @@ This directory contains the PRDs for OpenStars!
 64. [64-ui-waypoint-orders.md](64-ui-waypoint-orders.md) — Fleet waypoint order UX, task editor, repeat routes, API payload mapping
 65. [65-ui-fleet-merge-split.md](65-ui-fleet-merge-split.md) — Fleet merge/split UI, Fleet Composer matrix, merge_split_fleets command
 66. [66-ui-research.md](66-ui-research.md) — Research UI, top-bar indicator, research dialog, allocation + field selection
+67. [67-ui-planet-list.md](67-ui-planet-list.md) — Reusable planet list primitive: columns, sorting, filtering, selection semantics
+68. [68-ui-production.md](68-ui-production.md) — Production workspace: planet list + per-planet queue editor + build palette
 80. [80-combat-fundamentals.md](80-combat-fundamentals.md) — Combat authority, determinism, RNG, combat log, replay, ruleset ids
 81. [81-combat-classic.md](81-combat-classic.md) — Classic ruleset: 10×10 grid, tokens, rounds, movement/shooting (Stars!-faithful)
 82. [82-combat-altair.md](82-combat-altair.md) — Altair ruleset (`altair`): scaled integer arena, ticks per combat round, Euclidean `isqrt` distance
diff --git a/tasks/2026-05-17-production-view.md b/tasks/2026-05-17-production-view.md
new file mode 100644
index 00000000..a43fed4b
--- /dev/null
+++ b/tasks/2026-05-17-production-view.md
@@ -0,0 +1,334 @@
+# Production view — frontend implementation
+
+**Date:** 2026-05-17
+**Goal:** Implement the Production workspace described in [PRD 68 — UI Production](docs/prd/68-ui-production.md), backed by the reusable planet-list primitive in [PRD 67 — UI Planet List](docs/prd/67-ui-planet-list.md). Players get a top-bar `Production` tab that opens a three-pane workspace (planet list / selected planet + queue / build palette). The full per-planet queue editor in [PlanetDetail](frontend/src/components/panels/PlanetDetail.tsx) is replaced with a read-only summary and a `Manage production →` button that opens the workspace pre-selected to that planet. All edits queue existing PRD 13 commands through the existing `planet`-scoped dirty buffer — no backend changes.
+**Relevant PRDs:** [68 — UI Production](docs/prd/68-ui-production.md), [67 — UI Planet List](docs/prd/67-ui-planet-list.md), [13 — Production](docs/prd/13-production.md), [62 — Planet Detail Panel](docs/prd/62-ui-planet-detail.md), [60 — UI Overview](docs/prd/60-ui-overview.md), [17 — Starbases](docs/prd/17-starbases.md), [18 — Ship Design](docs/prd/18-ship-design.md)
+
+Single-planet only — multi-select / bulk operations and turns-to-complete estimates are deferred (tracked in [tasks/backlog.md](tasks/backlog.md) under Production).
+
+---
+
+## Step 1 — Reusable `PlanetList` component
+
+New module: `frontend/src/components/panels/PlanetList.tsx`.
+
+Implement the component API from [PRD 67](docs/prd/67-ui-planet-list.md):
+
+- [ ] Define and export `PlanetListColumn`, `PlanetListFilter`, and `PlanetListProps` types matching the PRD.
+- [ ] Implement controlled selection via `selectedPlanetId` + `onSelectPlanet`. The component never owns selection state.
+- [ ] Implement local sort state (active column id + direction). Default sort `name` ascending. Three-click cycle: asc → desc → cleared (returns to default).
+- [ ] Null-sort rule: nulls sort last regardless of direction.
+- [ ] Render the filter row when `filter` is provided: a search input bound to `filter.search` plus a toggle pill per `filter.toggles[]` entry. All changes call `filter.onChange(next)`. The component does **not** apply toggle predicates — it only renders the controls; the consumer supplies an already-filtered `planets` array. Search-by-name *is* applied inside the component (case-insensitive substring on `planet.name`).
+- [ ] Empty states:
+  - `planets` empty → render the consumer-provided `emptyState`, or fall back to `"No planets to show."`.
+  - Filtered set empty (search excludes all rows) → render `"No planets match the current filter."` + a `Clear filter` button that calls `filter.onChange` with `search: ""` and all toggles `active: false`.
+- [ ] Selected row gets a left accent border using `--color-player-self` and a raised surface background.
+- [ ] Sortable column headers show an arrow indicator on the active sort column and expose `aria-sort`.
+
+Unit tests in this step (`frontend/src/components/panels/PlanetList.test.tsx`):
+
+- [ ] Renders one row per supplied planet, in default-sorted order (by name).
+- [ ] Clicking a row calls `onSelectPlanet(row.id)`.
+- [ ] Selected row carries `aria-selected="true"` and the accent class.
+- [ ] Clicking a sortable header sorts ascending; clicking again sorts descending; clicking a third time returns to default sort.
+- [ ] Null `sortValue`s appear last regardless of direction.
+- [ ] Search input filters case-insensitively against `planet.name`.
+- [ ] Clearing the filter via the empty-state button calls `filter.onChange` with reset values.
+- [ ] Non-sortable columns do not respond to header clicks.
+
+---
+
+## Step 2 — Default column descriptors
+
+New module: `frontend/src/components/panels/planetListColumns.ts`.
+
+Export pre-built `PlanetListColumn` descriptors for the default columns enumerated in [PRD 67](docs/prd/67-ui-planet-list.md):
+
+- [ ] `nameColumn` — `planet.name`, locale-aware sort.
+- [ ] `ownerColumn` — display `"You"` for own planets, otherwise `planet.owner` or `"Uncolonised"` for `null`; sort: own first, then by username.
+- [ ] `populationColumn` — `planet.population` (or `null`); numeric desc by default.
+- [ ] `resourcesColumn` — `planet.resources` (or `null`); numeric desc by default. Renders `—` when null.
+- [ ] `minesColumn` — `planet.mines` (or `null`); numeric desc by default.
+- [ ] `factoriesColumn` — `planet.factories` (or `null`); numeric desc by default.
+- [ ] `starbaseColumn` — short capability label (`None`, `Dock`, `Dock (+ships)`); sort: rank by capability (`canBuildShips` > present > absent).
+- [ ] `queueHeadColumn` — first queue item's label (ship design name for `ship`, friendly label otherwise) or `—`; sort by label, nulls last.
+- [ ] `queueLengthColumn` — `planet.productionQueue.length`; numeric desc by default.
+- [ ] `scannerColumn` — `Yes` / `—`; sort: installed first.
+
+Friendly labels for queue items reuse the existing `PRODUCTION_ITEM_LABELS` constant from [frontend/src/components/panels/PlanetDetail.tsx](frontend/src/components/panels/PlanetDetail.tsx); move that constant into a shared module if it isn't already exported.
+
+Unit tests in this step (`frontend/src/components/panels/planetListColumns.test.ts`):
+
+- [ ] `queueHeadColumn.sortValue` returns `null` for an empty queue and the friendly label otherwise.
+- [ ] `starbaseColumn` produces the three expected labels for the three states.
+- [ ] `ownerColumn.sortValue` for the current player ranks ahead of any other username.
+- [ ] `resourcesColumn.render` returns `—` for a planet missing `resources`.
+- [ ] Ship-design names flow through `queueHeadColumn.render` for `ship` queue heads.
+
+---
+
+## Step 3 — Top-bar Production tab
+
+Extend [frontend/src/components/panels/TopBar.tsx](frontend/src/components/panels/TopBar.tsx) to add a `Production` tab.
+
+- [ ] Widen the `mode` prop's discriminated union to include `"production"`. Update `onModeChange` accordingly and propagate the type into [frontend/src/App.tsx](frontend/src/App.tsx).
+- [ ] Render the `Production` button immediately after `Command` (before `Designer`). Active styling matches the existing Command/Designer pattern.
+- [ ] Add a `productionEnabled: boolean` prop. When `false`, render the button visually muted, disabled, and with a `title="No owned planets yet"` tooltip.
+- [ ] No new copy / status badges in the top bar from this tab — workspace details stay inside the workspace.
+
+Unit tests in this step (`frontend/src/components/panels/TopBar.test.tsx`):
+
+- [ ] Production tab renders between Command and Designer.
+- [ ] Clicking the tab calls `onModeChange("production")`.
+- [ ] `productionEnabled={false}` renders the tab disabled and clicking does not call `onModeChange`.
+- [ ] Active mode `"production"` applies the primary variant; other modes apply the ghost variant.
+- [ ] Race-selection mode hides the Production tab (matches existing Command/Designer/Research handling).
+
+---
+
+## Step 4 — `ProductionWorkspace` shell
+
+New component: `frontend/src/components/panels/ProductionWorkspace.tsx`. In-flow workspace mounted from `App.tsx` when `mode === "production"`. Follows the layout shape established by [DesignsWorkspace](frontend/src/components/panels/DesignsWorkspace.tsx) and [ResearchWorkspace](frontend/src/components/panels/ResearchWorkspace.tsx).
+
+- [ ] Three-pane CSS grid: left 22% / centre 48% / right 30%, full available height, dividers using `--color-panel-border`.
+- [ ] Props:
+  - `ownedPlanets: PlayerPlanet[]`
+  - `currentPlayer: string`
+  - `shipDesigns: ShipDesign[]`
+  - `commands: PlayerCommand[]` — committed-state-relative pending commands for use when computing the working queue.
+  - `replaceCommands: ReplaceCommands` — the existing planet-scoped helper from `useGameCommands`.
+  - `basePlayerState: PlayerState` — used as the diff baseline for `buildPlanetScopeCommands`.
+  - `initialPlanetId: string | null` — preselected planet (set by the `Manage production →` entry point); falls back to the first row.
+- [ ] Local state:
+  - `selectedPlanetId: string | null` — initialised from `initialPlanetId ?? ownedPlanets[0]?.id ?? null`.
+  - `filter: PlanetListFilter` — `search: ""`, three toggles (`Empty queue`, `Has starbase`, `Can build ships`), all inactive.
+- [ ] Empty-workspace state when `ownedPlanets.length === 0`: render the three-pane chrome with a centred message ("Colonise a planet to start producing.").
+- [ ] No manual Save/Cancel controls — every edit auto-buffers (consistent with the existing planet-scoped command flow).
+
+Unit tests in this step (`frontend/src/components/panels/ProductionWorkspace.test.tsx`):
+
+- [ ] Workspace renders three panes when at least one owned planet is supplied.
+- [ ] On mount, the planet list and centre pane reflect `initialPlanetId` when provided.
+- [ ] When `initialPlanetId` is not provided, the first owned planet (by name) is selected.
+- [ ] When `ownedPlanets` is empty, the empty-workspace message renders and no panes are populated.
+- [ ] Switching planets in the list updates the centre pane without flushing commands.
+
+---
+
+## Step 5 — Planet list pane (workspace integration)
+
+Inside `ProductionWorkspace`:
+
+- [ ] Mount `<PlanetList>` with the columns from Step 2: `nameColumn`, `populationColumn`, `resourcesColumn`, `minesColumn`, `factoriesColumn`, `queueHeadColumn`, `queueLengthColumn`.
+- [ ] Pass the workspace-local `filter` state and a corresponding `onChange` handler.
+- [ ] Apply the three toggle predicates upstream (i.e. compute `filteredPlanets` in the workspace and pass that to `PlanetList`):
+  - `Empty queue` → `planet.productionQueue.length === 0`.
+  - `Has starbase` → `planet.starbase != null`.
+  - `Can build ships` → `planet.starbase?.canBuildShips === true`.
+- [ ] Plus the workspace also applies search (PlanetList does this internally; the workspace does **not** need to apply search itself — it just passes the filter state through).
+- [ ] When toggles change the filtered set such that the currently selected planet is no longer visible, leave the selection alone — selection persists; the centre pane keeps rendering. (Selecting an invisible row is fine; PRD 67 explicitly allows this.)
+- [ ] Pre-select rule on mount: `initialPlanetId` if it appears in `ownedPlanets`; otherwise the first row in the *unfiltered* owned-planets list, sorted by name.
+
+Unit tests in this step:
+
+- [ ] Toggling `Empty queue` filters the rows shown but preserves the current selection.
+- [ ] Search filters the rows shown (case-insensitive name match).
+- [ ] Clearing the filter via the empty-state button resets all toggles and search.
+
+---
+
+## Step 6 — Centre pane: production summary
+
+Inside `ProductionWorkspace`:
+
+- [ ] Render the selected planet's production-focused summary block per [PRD 68 § "Pane 2 — Selected planet"](docs/prd/68-ui-production.md):
+  - Header: planet name + scan-level chip (`detailed`) + a `Show on map` link button.
+  - `Res/turn: <N>` — `planet.resources`. Append ` (leftover only)` when `planet.contributeOnlyLeftoverToResearch === true`.
+  - `Mines / Factories: <M> / <F>` — `planet.mines` and `planet.factories`.
+  - `Starbase: <label>` — concise label (`None` / `Dock` / `Dock (+ships)`).
+  - `Minerals: I / B / G` — surface stockpile per mineral type, with one decimal where appropriate.
+  - `Status: <state>` — derived: `Idle` (empty queue) or `Building (<N> remaining)` (first queue item's `quantity`). `Blocked` is deferred (no client signal yet; render `Building` for now).
+- [ ] `Show on map` returns the app to Command mode and selects the planet (via the workspace prop bridge added in Step 12).
+- [ ] When `selectedPlanetId == null` (only possible when `ownedPlanets.length === 0`), render the empty-workspace message.
+
+Unit tests in this step:
+
+- [ ] Summary lines render against a fixture own planet with known mineral and queue state.
+- [ ] Leftover-only annotation appears when `contributeOnlyLeftoverToResearch === true`.
+- [ ] Idle status renders for an empty queue; building status reflects the first item's quantity.
+- [ ] `Show on map` calls the supplied prop to switch back to Command mode and select the planet.
+
+---
+
+## Step 7 — Centre pane: queue editor
+
+Inside `ProductionWorkspace`:
+
+- [ ] Render the selected planet's working queue using the same merge logic the planet detail panel uses today (`baseProductionQueue` + pending commands → `productionQueue`). Reuse [buildPlanetScopeCommands](frontend/src/lib/productionQueueCommands.ts) unchanged.
+- [ ] One row per queue entry with the columns listed in [PRD 68 § "Queue editor"](docs/prd/68-ui-production.md):
+  - Drag handle (`≡`).
+  - Item label (ship design name for `ship`, friendly label otherwise).
+  - Quantity `× N`.
+  - Progress `res a/b` for the unit currently under construction (hidden when `a == 0`).
+  - `+` / `−` quantity buttons.
+  - `↑` / `↓` reorder buttons.
+  - `×` remove-row button.
+- [ ] Drag-to-reorder using dnd-kit (already in the repo for the ship designer — reuse the same dependency and patterns from [DragAndDropFitter](frontend/src/components/designer/DragAndDropFitter.tsx)). Drag operates only on existing rows; the palette does not participate.
+- [ ] Arrow buttons (`↑` / `↓`) on each row are a keyboard-accessible equivalent to drag.
+- [ ] `planetary_scanner` rows: `+` disabled (quantity always 1); `−` and `×` still work.
+- [ ] `Clear queue` button below the queue. Disabled when empty; clicking calls `replaceCommands` with the appropriate `clear_production_queue` command via `buildPlanetScopeCommands`.
+- [ ] All mutations go through `replaceCommands({ kind: "planet", id }, buildPlanetScopeCommands(...))` exactly as the existing planet detail panel does.
+
+Unit tests in this step:
+
+- [ ] Queue rows render in order with labels matching ship-design names and `PRODUCTION_ITEM_LABELS`.
+- [ ] `+` and `−` adjust quantity and dispatch the expected `add_production_item` / `remove_production_item` commands.
+- [ ] `×` removes the row entirely.
+- [ ] `↑` / `↓` reorder rows and dispatch `move_production_item` commands referencing the correct `insertAfterItemId`.
+- [ ] Drag-to-reorder dispatches the same commands as the arrow buttons (use dnd-kit's test helpers; if too heavy, assert via direct `onDragEnd` invocation against the component's exposed handler).
+- [ ] `planetary_scanner` rows render with `+` disabled.
+- [ ] `Clear queue` dispatches `clear_production_queue` and is disabled on an empty queue.
+
+---
+
+## Step 8 — Right pane: build palette
+
+Inside `ProductionWorkspace`. New child component: `frontend/src/components/panels/BuildPalette.tsx`.
+
+- [ ] Categories (in render order): `Infrastructure`, `Ships`, `Starbases`.
+- [ ] `Infrastructure` rows:
+  - `Mine` — cost `5r`.
+  - `Factory` — cost `10r 4g`.
+  - `Planetary Scanner` — cost `100r 10i 10b 70g`. Unavailable when `planet.hasScanner === true` or a `planetary_scanner` is already queued (mute + `Already installed` / `Already queued` note).
+- [ ] `Ships` rows — one per owned design from `shipDesigns`. Cost shows resources + per-mineral totals from the design summary. Unavailable when `planet.starbase?.canBuildShips !== true` (mute + `Needs starbase`).
+- [ ] `Starbases` rows — pull available upgrades for the planet from the existing starbase reference data path (see [PRD 17](docs/prd/17-starbases.md)). If no upgrades are available, the category renders with a single muted entry `Nothing buildable here`.
+- [ ] Click handler appends to the queue:
+  - `quantity = 1` on plain click, `quantity = 5` on Shift+click.
+  - Compute the desired queue locally (existing rows + new row at the end), then call `replaceCommands` with `buildPlanetScopeCommands(...)`. The diff helper resolves to one `add_production_item` command with the correct `insertAfterItemId`.
+- [ ] Unavailable rows are muted, non-clickable, and announce their reason via the small inline note.
+- [ ] Reuse the Designer's palette row hover treatment (`hover:bg-white/8`) and label spacing for visual consistency.
+
+Unit tests in this step (`frontend/src/components/panels/BuildPalette.test.tsx`):
+
+- [ ] All three categories render with the expected entries for a fixture planet that satisfies every precondition.
+- [ ] Click on `Mine` dispatches an `add_production_item` command with `itemType: "mine"` and `quantity: 1`.
+- [ ] Shift+click on `Factory` dispatches a command with `quantity: 5`.
+- [ ] `Planetary Scanner` is muted with `Already installed` when `planet.hasScanner === true`.
+- [ ] `Planetary Scanner` is muted with `Already queued` when the queue already contains one.
+- [ ] Ship rows are muted with `Needs starbase` when the planet's starbase can't build ships.
+- [ ] No design entries renders an empty `Ships` category (collapsed or rendered with a muted "No designs" note — pick one and assert it).
+
+---
+
+## Step 9 — Planet detail: replace queue editor with summary + link
+
+Edit [frontend/src/components/panels/PlanetDetail.tsx](frontend/src/components/panels/PlanetDetail.tsx).
+
+- [ ] Remove the in-panel queue editor (the picker dropdown, queue rows, +/-, clear queue). The state hooks for the picker (`productionPickerOpen`, `productionPickerRef`, the outside-click handler) go away with it.
+- [ ] Replace it with a `Production` section per [PRD 62 § "Production Summary"](docs/prd/62-ui-planet-detail.md):
+  - Header: section label `Production` + a `Manage →` button on the right.
+  - Body: one-line summary using the same `PRODUCTION_ITEM_LABELS` and ship-design names as the workspace. Empty queue → `Queue: empty`. One entry → `Queue: <qty>× <label>`. Two → `Queue: <qty>× <label>, <qty>× <label>`. Three or more → `Queue: <qty>× <label>, <qty>× <label>, +<N> more`.
+- [ ] `Manage →` calls a new `onOpenProduction(planetId: string)` prop. The wiring at the `App.tsx` call site lands in Step 12.
+- [ ] Visibility: gate on ownership only. The practical check is `planet.productionQueue != null` (the field is owner-only per PRD 13 visibility; an own planet is always `scanLevel: "detailed"` with `scanAge: 0` by PRD 11, so no separate scan / staleness gate is needed).
+- [ ] Update / remove tests in [PlanetDetail.test.tsx](frontend/src/components/panels/PlanetDetail.test.tsx) that asserted on the queue editor's controls.
+
+Unit tests in this step:
+
+- [ ] Production section renders on own planets with the expected summary copy for each of the four queue-length buckets (0, 1, 2, ≥3).
+- [ ] Production section is absent on enemy planets (no `productionQueue` field).
+- [ ] Production section is absent on a carried-forward record of a previously-owned planet (`productionQueue == null` because ownership has been lost).
+- [ ] Clicking `Manage →` calls `onOpenProduction(planet.id)`.
+- [ ] Pre-existing assertions about the in-panel queue editor are removed (replaced or deleted to match the new shape).
+
+---
+
+## Step 10 — Production-summary helper
+
+New module: `frontend/src/lib/productionSummary.ts`.
+
+Both the planet detail summary line and the `queueHeadColumn` need the same friendly labels. Extract once.
+
+- [ ] `export function describeQueueItem(item: PlayerProductionQueueItem, shipDesigns: ShipDesign[]): string` — returns the friendly label (`"Factory"`, design name for ship, etc.).
+- [ ] `export function summariseQueue(queue: PlayerProductionQueueItem[], shipDesigns: ShipDesign[]): string` — returns the one-line summary copy described in Step 9 and PRD 62.
+- [ ] Move `PRODUCTION_ITEM_LABELS` here if it currently lives inside `PlanetDetail.tsx`.
+
+Unit tests in this step (`frontend/src/lib/productionSummary.test.ts`):
+
+- [ ] `describeQueueItem` returns the design name for a `ship` item and the friendly label otherwise.
+- [ ] `summariseQueue([])` returns `"Queue: empty"`.
+- [ ] `summariseQueue` with one, two, and three+ items returns the four expected copy variants.
+- [ ] Unknown design id falls back to a stable label (e.g. `"Ship"`).
+
+---
+
+## Step 11 — Keyboard shortcuts
+
+Extend the global keyboard handler in [frontend/src/App.tsx](frontend/src/App.tsx) (currently handles `R` for research and `w`/`Escape` for waypoint editing).
+
+- [ ] `P` switches to Production mode from Command view. Pressing `P` while already in Production returns to Command view. Same suppression rules: skip when a text input or textarea is focused; skip when the key was pressed with `Ctrl`, `Meta`, or `Alt`.
+- [ ] `Esc` returns to Command from Production (and only from Production — leave the existing waypoint-mode `Esc` handler in place).
+- [ ] Inside the planet list (focus within `PlanetList`), `Up` / `Down` move between rows and `Enter` / `Space` select. This is handled inside the `PlanetList` component itself (Step 1), not in the App-level handler.
+
+Unit tests in this step (extend `frontend/src/App.test.tsx`):
+
+- [ ] Pressing `P` with no input focused toggles between Command and Production mode.
+- [ ] Pressing `P` while an input is focused does not toggle.
+- [ ] Pressing `Esc` from Production returns to Command. Pressing `Esc` from Command does nothing (apart from any existing handlers).
+- [ ] `P` does not fire when modifier keys are held.
+
+---
+
+## Step 12 — Wire Production at the App level
+
+Edit [frontend/src/App.tsx](frontend/src/App.tsx):
+
+- [ ] Widen `AppMode` to `"command" | "production" | "designer" | "research"`.
+- [ ] Compute `ownedPlanets` (already done) and pass `productionEnabled={ownedPlanets.length > 0}` to `TopBar`.
+- [ ] When `effectiveMode === "production"`, mount `<ProductionWorkspace ... />` with:
+  - `ownedPlanets`
+  - `currentPlayer={player}`
+  - `shipDesigns={gameState.shipDesigns}`
+  - `commands={gameState.commands.commands}`
+  - `replaceCommands={gameState.replaceCommands}`
+  - `basePlayerState={gameState.playerState}`
+  - `initialPlanetId={selection?.kind === "planet" ? selection.id : null}` — when the player jumped in via `Manage →`, the selection is already on that planet.
+  - `onShowOnMap={(planetId) => { setSelection({ kind: "planet", id: planetId }); setMode("command"); mapPanToRef.current?.(...); }}` — wires the centre-pane "Show on map" link.
+- [ ] Wire the `onOpenProduction` prop on `<PlanetDetail>` (from Step 9): set `selection = { kind: "planet", id: planetId }` and `setMode("production")`. Pre-existing selection state already drives `initialPlanetId`, so no extra plumbing is needed beyond setting both.
+- [ ] Effective-mode safety: if `mode === "production"` but `ownedPlanets.length === 0`, fall back to `"command"` (parallels the existing `research && !activeResearch` guard).
+
+Unit tests in this step (`frontend/src/App.test.tsx`):
+
+- [ ] Clicking the top-bar Production tab mounts the workspace.
+- [ ] Production tab is disabled when there are no owned planets.
+- [ ] Clicking `Manage production →` on a planet detail switches to Production with that planet selected.
+- [ ] Mode auto-falls-back to `command` when a player loses all owned planets while in Production.
+- [ ] Production-workspace edits populate the dirty buffer with the expected `planet`-scoped commands.
+
+---
+
+## Step 13 — Lint, typecheck, test
+
+- [ ] `cd frontend && npm run lint` clean.
+- [ ] `cd frontend && npm run typecheck` clean.
+- [ ] `cd frontend && npm test` passes end-to-end.
+
+---
+
+## Deferred follow-ups
+
+- **Turns-to-complete estimate** in palette rows and queue rows — backlog'd in [tasks/backlog.md](tasks/backlog.md) under Production.
+- **Blocked status** on planets and queue items — needs a client-visible event hookup that doesn't yet exist; render `Building` until it lands.
+- **Multi-planet selection / bulk operations** — PRD 67 leaves `selectedIds: string[]` as a clean extension point; not in this task.
+- **Drag from palette into a specific queue index** — first cut only supports drag *within* the queue.
+- **Cost preview for the whole queue** in the centre pane footer.
+- **Keyboard type-ahead** in the planet list.
+- **Per-user column preferences / column reordering** on the reusable list.
+
+---
+
+## Explicitly out of scope
+
+- Any backend changes — production commands, costs, validation, and resolution all stay as defined in [PRD 13](docs/prd/13-production.md).
+- New event codes or projection fields — the workspace reads only existing `PlayerState.planets`, `PlayerState.designs`, and `PlayerState.research` (for the leftover-only annotation).
+- Browser / manual smoke tests — per [AGENTS.md](AGENTS.md) Cursor Cloud testing preference, automated checks (`npm test`, `typecheck`, `lint`) are the gate.
+- Production templates and auto-build — separately listed in [tasks/backlog.md](tasks/backlog.md).
diff --git a/tasks/backlog.md b/tasks/backlog.md
index 5cffc9a8..c4c390be 100644
--- a/tasks/backlog.md
+++ b/tasks/backlog.md
@@ -36,6 +36,7 @@ Roughly grouped by system — prioritisation TBD.
 - [ ] Production templates
 - [ ] Auto-build production items
 - [x] Expanded production catalog — ships
+- [ ] Turns-to-complete estimate in the Production view — show estimated turns to finish each palette row and each queue row, derived client-side from the planet's resources/turn and current mineral stockpile walked across queued items. Deferred from [PRD 68](../docs/prd/68-ui-production.md).
 
 ### Population & Colonisation
 - [x] Population growth — based on planet value, crowding, growth rate

From 83afc9729c728bbf231f315482a8dc0f82c41b1f Mon Sep 17 00:00:00 2001
From: Tim Gage <github@timgage.fastmail.fm>
Date: Mon, 18 May 2026 21:49:13 +0100
Subject: [PATCH 2/7] Produtction view first pass

---
 .claude/settings.json                         |   3 +-
 frontend/package-lock.json                    |  16 +
 frontend/package.json                         |   2 +
 frontend/src/App.test.tsx                     | 127 ++++-
 frontend/src/App.tsx                          |  48 +-
 frontend/src/components/index.ts              |   1 +
 .../components/panels/BuildPalette.test.tsx   | 140 +++++
 .../src/components/panels/BuildPalette.tsx    | 136 +++++
 .../src/components/panels/DetailPanel.tsx     |   3 +
 .../components/panels/PlanetDetail.test.tsx   | 280 ++--------
 .../src/components/panels/PlanetDetail.tsx    | 327 +----------
 .../src/components/panels/PlanetList.test.tsx | 199 +++++++
 frontend/src/components/panels/PlanetList.tsx | 222 ++++++++
 .../panels/ProductionWorkspace.test.tsx       | 261 +++++++++
 .../components/panels/ProductionWorkspace.tsx | 525 ++++++++++++++++++
 .../src/components/panels/TopBar.test.tsx     |  43 +-
 frontend/src/components/panels/TopBar.tsx     |  15 +-
 .../panels/planetListColumns.test.ts          | 117 ++++
 .../components/panels/planetListColumns.ts    | 128 +++++
 frontend/src/lib/productionSummary.test.ts    |  73 +++
 frontend/src/lib/productionSummary.ts         |  55 ++
 tasks/2026-05-17-production-view.md           | 262 ++++-----
 22 files changed, 2279 insertions(+), 704 deletions(-)
 create mode 100644 frontend/src/components/panels/BuildPalette.test.tsx
 create mode 100644 frontend/src/components/panels/BuildPalette.tsx
 create mode 100644 frontend/src/components/panels/PlanetList.test.tsx
 create mode 100644 frontend/src/components/panels/PlanetList.tsx
 create mode 100644 frontend/src/components/panels/ProductionWorkspace.test.tsx
 create mode 100644 frontend/src/components/panels/ProductionWorkspace.tsx
 create mode 100644 frontend/src/components/panels/planetListColumns.test.ts
 create mode 100644 frontend/src/components/panels/planetListColumns.ts
 create mode 100644 frontend/src/lib/productionSummary.test.ts
 create mode 100644 frontend/src/lib/productionSummary.ts

diff --git a/.claude/settings.json b/.claude/settings.json
index cf82a898..eea16703 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -7,7 +7,8 @@
       "Bash(terraform plan *)",
       "Bash(gsutil ls *)",
       "Bash(gh run *)",
-      "Bash(grep *)"
+      "Bash(grep *)",
+      "Bash(npm install *)"
     ]
   }
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ecc011fd..a719a917 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@tailwindcss/vite": "^4.2.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -516,6 +518,20 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@dnd-kit/utilities": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 770c2e9e..7a8066e4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,8 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@tailwindcss/vite": "^4.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
index a1d3b23b..190ee1ae 100644
--- a/frontend/src/App.test.tsx
+++ b/frontend/src/App.test.tsx
@@ -14,11 +14,13 @@ vi.mock("./components", async (importOriginal) => {
     mode,
     onModeChange,
     research,
+    productionEnabled,
   }: {
     gameName: string;
-    mode: "command" | "designer" | "research";
-    onModeChange: (mode: "command" | "designer" | "research") => void;
+    mode: "command" | "production" | "designer" | "research";
+    onModeChange: (mode: "command" | "production" | "designer" | "research") => void;
     research: PlayerState["research"];
+    productionEnabled?: boolean;
   }) => (
     <div>
       <div>{gameName}</div>
@@ -28,6 +30,13 @@ vi.mock("./components", async (importOriginal) => {
       >
         Command
       </button>
+      <button
+        aria-pressed={mode === "production"}
+        disabled={!productionEnabled}
+        onClick={() => { if (productionEnabled) onModeChange("production"); }}
+      >
+        Production
+      </button>
       <button
         aria-pressed={mode === "designer"}
         onClick={() => onModeChange("designer")}
@@ -148,6 +157,9 @@ vi.mock("./components", async (importOriginal) => {
   ),
   ResearchWorkspace: () => <div>Research workspace</div>,
   RaceSelectionScreen: () => <div>Race selection screen</div>,
+  ProductionWorkspace: ({ initialPlanetId }: { initialPlanetId: string | null }) => (
+    <div>Production workspace{initialPlanetId ? ` for ${initialPlanetId}` : ""}</div>
+  ),
   };
 });
 
@@ -453,3 +465,114 @@ describe("App — fleet rename flow", () => {
     });
   });
 });
+
+function makeGameStateWithPlanets(turn: number) {
+  const gs = makeGameStateReturn(turn);
+  const planet = {
+    id: "PL001",
+    name: "Earth",
+    x: 100,
+    y: 200,
+    owner: "alice",
+    scanLevel: "detailed" as const,
+    scanAge: 0,
+    productionQueue: [],
+    starbase: null,
+    scanner: null,
+    contributeOnlyLeftoverToResearch: false,
+  };
+  gs.playerState.planets = [planet];
+  gs.workingPlayerState.planets = [planet];
+  return gs;
+}
+
+describe("App — production mode keyboard shortcuts", () => {
+  beforeEach(() => {
+    window.history.pushState({}, "", "/?game=game-1&player=alice");
+  });
+
+  it("pressing P toggles between Command and Production", async () => {
+    mockUseGameState.mockReturnValue(makeGameStateWithPlanets(1));
+    render(<App />);
+    await waitFor(() => expect(screen.getByText("Test Game")).toBeInTheDocument());
+
+    act(() => { window.dispatchEvent(new KeyboardEvent("keydown", { key: "p", bubbles: true })); });
+    await waitFor(() => expect(screen.getByText(/Production workspace/)).toBeInTheDocument());
+
+    act(() => { window.dispatchEvent(new KeyboardEvent("keydown", { key: "p", bubbles: true })); });
+    await waitFor(() => expect(screen.queryByText(/Production workspace/)).not.toBeInTheDocument());
+  });
+
+  it("pressing P while an input is focused does not toggle", async () => {
+    mockUseGameState.mockReturnValue(makeGameStateWithPlanets(1));
+    const { container } = render(<App />);
+    await waitFor(() => expect(screen.getByText("Test Game")).toBeInTheDocument());
+
+    const input = document.createElement("input");
+    container.appendChild(input);
+    input.focus();
+
+    act(() => { window.dispatchEvent(new KeyboardEvent("keydown", { key: "p", bubbles: true })); });
+    expect(screen.queryByText(/Production workspace/)).not.toBeInTheDocument();
+  });
+
+  it("P does not fire when modifier keys are held", async () => {
+    mockUseGameState.mockReturnValue(makeGameStateWithPlanets(1));
+    render(<App />);
+    await waitFor(() => expect(screen.getByText("Test Game")).toBeInTheDocument());
+
+    act(() => { window.dispatchEvent(new KeyboardEvent("keydown", { key: "p", ctrlKey: true, bubbles: true })); });
+    expect(screen.queryByText(/Production workspace/)).not.toBeInTheDocument();
+  });
+
+  it("Esc from Production returns to Command", async () => {
+    mockUseGameState.mockReturnValue(makeGameStateWithPlanets(1));
+    render(<App />);
+    await waitFor(() => expect(screen.getByText("Test Game")).toBeInTheDocument());
+
+    act(() => { window.dispatchEvent(new KeyboardEvent("keydown", { key: "p", bubbles: true })); });
+    await waitFor(() => expect(screen.getByText(/Production workspace/)).toBeInTheDocument());
+
+    act(() => { window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })); });
+    await waitFor(() => expect(screen.queryByText(/Production workspace/)).not.toBeInTheDocument());
+  });
+});
+
+describe("App — production mode wiring", () => {
+  beforeEach(() => {
+    window.history.pushState({}, "", "/?game=game-1&player=alice");
+  });
+
+  it("clicking Production tab mounts the workspace", async () => {
+    mockUseGameState.mockReturnValue(makeGameStateWithPlanets(1));
+    render(<App />);
+    await waitFor(() => expect(screen.getByText("Test Game")).toBeInTheDocument());
+
+    act(() => { screen.getByRole("button", { name: "Production" }).click(); });
+    await waitFor(() => expect(screen.getByText(/Production workspace/)).toBeInTheDocument());
+  });
+
+  it("Production tab is disabled when there are no owned planets", async () => {
+    mockUseGameState.mockReturnValue(makeGameStateReturn(1));
+    render(<App />);
+    await waitFor(() => expect(screen.getByText("Test Game")).toBeInTheDocument());
+
+    expect(screen.getByRole("button", { name: "Production" })).toBeDisabled();
+  });
+
+  it("mode falls back to command when owned planets becomes empty while in production", async () => {
+    const gs = makeGameStateWithPlanets(1);
+    mockUseGameState.mockReturnValue(gs);
+    const { rerender } = render(<App />);
+    await waitFor(() => expect(screen.getByText("Test Game")).toBeInTheDocument());
+
+    act(() => { screen.getByRole("button", { name: "Production" }).click(); });
+    await waitFor(() => expect(screen.getByText(/Production workspace/)).toBeInTheDocument());
+
+    const gsEmpty = makeGameStateReturn(1);
+    mockUseGameState.mockReturnValue(gsEmpty);
+    rerender(<App />);
+
+    await waitFor(() => expect(screen.queryByText(/Production workspace/)).not.toBeInTheDocument());
+  });
+});
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d4009060..51f060da 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,6 +3,7 @@ import { useGameState } from "./hooks/useGameState";
 import {
   TopBar,
   DesignsWorkspace,
+  ProductionWorkspace,
   RaceSelectionScreen,
   ResearchWorkspace,
   DetailPanel,
@@ -17,7 +18,7 @@ import { GameCommandsContext } from "./contexts/gameCommandsContext";
 import type { Selection } from "./types";
 import type { SetResearchCommand } from "./types";
 
-type AppMode = "command" | "designer" | "research";
+type AppMode = "command" | "production" | "designer" | "research";
 
 const EMPTY_WAYPOINT_EDITOR_STATE: WaypointEditorState = {
   waypointEditMode: false,
@@ -97,16 +98,21 @@ function App() {
 
   useEffect(() => {
     const onKey = (event: KeyboardEvent) => {
-      if (event.key.toLowerCase() !== "r") return;
-      // Don't intercept browser/system chords like Ctrl+R or Cmd+R (page refresh).
       if (event.ctrlKey || event.metaKey || event.altKey) return;
       const active = document.activeElement;
-      if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) {
-        return;
-      }
-      event.preventDefault();
-      if (gameState.playerState?.research) {
-        setMode((prev) => (prev === "research" ? "command" : "research"));
+      if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) return;
+
+      const key = event.key.toLowerCase();
+      if (key === "r") {
+        event.preventDefault();
+        if (gameState.playerState?.research) {
+          setMode((prev) => (prev === "research" ? "command" : "research"));
+        }
+      } else if (key === "p") {
+        event.preventDefault();
+        setMode((prev) => (prev === "production" ? "command" : "production"));
+      } else if (event.key === "Escape") {
+        setMode((prev) => (prev === "production" ? "command" : prev));
       }
     };
 
@@ -288,7 +294,11 @@ function App() {
   // already has the pending set_research command applied, which would cause the workspace to
   // diff later edits against an already-edited baseline and silently drop earlier changes.
   const activeResearch = gameState.playerState.research;
-  const effectiveMode: AppMode = mode === "research" && !activeResearch ? "command" : mode;
+  const effectiveMode: AppMode =
+    (mode === "research" && !activeResearch) ||
+    (mode === "production" && ownedPlanets.length === 0)
+      ? "command"
+      : mode;
 
   return (
     <DesktopGate>
@@ -323,6 +333,7 @@ function App() {
           playerName={player}
           error={gameState.error}
           research={activeResearch ?? null}
+          productionEnabled={ownedPlanets.length > 0}
         />
 
         {isTurnZeroRacePhase ? (
@@ -330,6 +341,19 @@ function App() {
             gameId={gameId}
             player={player}
           />
+        ) : effectiveMode === "production" ? (
+          <ProductionWorkspace
+            ownedPlanets={ownedPlanets}
+            currentPlayer={player}
+            shipDesigns={gameState.shipDesigns}
+            initialPlanetId={selection?.kind === "planet" ? selection.id : null}
+            onShowOnMap={(planetId) => {
+              const planet = gameState.workingPlayerState!.planets.find((p) => p.id === planetId);
+              setSelection({ kind: "planet", id: planetId });
+              setMode("command");
+              if (planet) mapPanToRef.current?.(planet.x, planet.y);
+            }}
+          />
         ) : effectiveMode === "designer" ? (
           <DesignsWorkspace gameId={gameId} player={player} />
         ) : effectiveMode === "research" && activeResearch ? (
@@ -389,6 +413,10 @@ function App() {
                 fleetsAtSelectedPlanet={fleetsAtSelectedPlanet}
                 onSelectFleet={handleSelectFleet}
                 shipDesigns={gameState.shipDesigns}
+                onOpenProduction={(planetId) => {
+                  setSelection({ kind: "planet", id: planetId });
+                  setMode("production");
+                }}
               />
             </div>
 
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 0bee64d3..2a40b2c3 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -1,5 +1,6 @@
 export { TopBar } from "./panels/TopBar";
 export { DetailPanel } from "./panels/DetailPanel";
+export { ProductionWorkspace } from "./panels/ProductionWorkspace";
 export { DesignsWorkspace } from "./panels/DesignsWorkspace";
 export { ResearchWorkspace } from "./panels/ResearchWorkspace";
 export { RaceSelectionScreen } from "./panels/RaceSelectionScreen";
diff --git a/frontend/src/components/panels/BuildPalette.test.tsx b/frontend/src/components/panels/BuildPalette.test.tsx
new file mode 100644
index 00000000..2bf9dc6e
--- /dev/null
+++ b/frontend/src/components/panels/BuildPalette.test.tsx
@@ -0,0 +1,140 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { BuildPalette } from "./BuildPalette";
+import type { PlayerPlanet } from "../../types";
+import type { DesignSummary } from "../../types/designer";
+
+function makePlanet(overrides: Partial<PlayerPlanet> = {}): PlayerPlanet {
+  return {
+    id: "p1",
+    name: "Earth",
+    x: 0,
+    y: 0,
+    scanLevel: "detailed",
+    scanAge: 0,
+    owner: "tim",
+    mines: 10,
+    factories: 20,
+    resources: 200,
+    minerals: { ironium: 500, boranium: 300, germanium: 200 },
+    productionQueue: [],
+    starbase: { type: "space_station", canBuildShips: true },
+    scanner: { installed: false, name: "", normal: 0, penetrating: 0 },
+    ...overrides,
+  };
+}
+
+const designs: DesignSummary[] = [
+  {
+    id: "d1",
+    name: "Scout",
+    hull: "scout",
+    fuelCapacity: 100,
+    cost: { resources: 40, minerals: { ironium: 0, boranium: 0, germanium: 0 } },
+  },
+];
+
+describe("BuildPalette", () => {
+  it("renders all three categories with expected entries", () => {
+    render(
+      <BuildPalette
+        planet={makePlanet()}
+        queue={[]}
+        shipDesigns={designs}
+        onAdd={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("Infrastructure")).toBeInTheDocument();
+    expect(screen.getByText("Mine")).toBeInTheDocument();
+    expect(screen.getByText("Factory")).toBeInTheDocument();
+    expect(screen.getByText("Planetary Scanner")).toBeInTheDocument();
+    expect(screen.getByText("Ships")).toBeInTheDocument();
+    expect(screen.getByText("Scout")).toBeInTheDocument();
+    expect(screen.getByText("Starbases")).toBeInTheDocument();
+  });
+
+  it("click on Mine calls onAdd with itemType 'mine' and quantity 1", () => {
+    const onAdd = vi.fn();
+    render(
+      <BuildPalette
+        planet={makePlanet()}
+        queue={[]}
+        shipDesigns={designs}
+        onAdd={onAdd}
+      />,
+    );
+    fireEvent.click(screen.getByText("Mine"));
+    expect(onAdd).toHaveBeenCalledWith("mine", undefined, undefined, 1);
+  });
+
+  it("Shift+click on Factory calls onAdd with quantity 5", () => {
+    const onAdd = vi.fn();
+    render(
+      <BuildPalette
+        planet={makePlanet()}
+        queue={[]}
+        shipDesigns={designs}
+        onAdd={onAdd}
+      />,
+    );
+    fireEvent.click(screen.getByText("Factory"), { shiftKey: true });
+    expect(onAdd).toHaveBeenCalledWith("factory", undefined, undefined, 5);
+  });
+
+  it("Planetary Scanner shows 'Already installed' when has scanner", () => {
+    render(
+      <BuildPalette
+        planet={makePlanet({ scanner: { installed: true, name: "Scoper", normal: 200, penetrating: 0 } })}
+        queue={[]}
+        shipDesigns={[]}
+        onAdd={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("Already installed")).toBeInTheDocument();
+    expect(screen.getByText("Planetary Scanner").closest("button")).toBeDisabled();
+  });
+
+  it("Planetary Scanner shows 'Already queued' when already in queue", () => {
+    const queue = [{
+      id: "qi1",
+      itemType: "planetary_scanner" as const,
+      quantity: 1,
+      designId: null,
+      progress: { resourcesSpent: 0, mineralsSpent: { ironium: 0, boranium: 0, germanium: 0 } },
+    }];
+    render(
+      <BuildPalette
+        planet={makePlanet()}
+        queue={queue}
+        shipDesigns={[]}
+        onAdd={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("Already queued")).toBeInTheDocument();
+  });
+
+  it("Ship rows show 'Needs starbase' when planet cannot build ships", () => {
+    render(
+      <BuildPalette
+        planet={makePlanet({ starbase: { type: "orbital_fort", canBuildShips: false } })}
+        queue={[]}
+        shipDesigns={designs}
+        onAdd={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("Needs starbase")).toBeInTheDocument();
+    expect(screen.getByText("Scout").closest("button")).toBeDisabled();
+  });
+
+  it("Ships section renders 'No designs' when no ship designs supplied", () => {
+    render(
+      <BuildPalette
+        planet={makePlanet()}
+        queue={[]}
+        shipDesigns={[]}
+        onAdd={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("No designs")).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/panels/BuildPalette.tsx b/frontend/src/components/panels/BuildPalette.tsx
new file mode 100644
index 00000000..72a7fd61
--- /dev/null
+++ b/frontend/src/components/panels/BuildPalette.tsx
@@ -0,0 +1,136 @@
+import type { PlayerPlanet, PlayerProductionQueueItem, ProductionItemType, StarbaseType } from "../../types";
+import type { DesignSummary } from "../../types/designer";
+
+interface PaletteRow {
+  label: string;
+  cost: string;
+  available: boolean;
+  unavailableReason?: string;
+  itemType: ProductionItemType;
+  targetType?: StarbaseType;
+  designId?: string;
+}
+
+function buildRows(
+  planet: PlayerPlanet,
+  queue: PlayerProductionQueueItem[],
+  shipDesigns: DesignSummary[],
+): { infrastructure: PaletteRow[]; ships: PaletteRow[]; starbases: PaletteRow[] } {
+  const hasScanner = planet.scanner?.installed === true;
+  const hasQueuedScanner = queue.some((i) => i.itemType === "planetary_scanner");
+  const hasQueuedStarbase = queue.some((i) => i.itemType === "starbase");
+  const canBuildShips = planet.starbase != null && "canBuildShips" in planet.starbase
+    ? (planet.starbase as { canBuildShips: boolean }).canBuildShips
+    : false;
+  const currentStarbaseType = planet.starbase && "type" in planet.starbase
+    ? (planet.starbase as { type: StarbaseType }).type
+    : null;
+
+  const infrastructure: PaletteRow[] = [
+    { label: "Mine", cost: "5r", available: true, itemType: "mine" },
+    { label: "Factory", cost: "10r 4g", available: true, itemType: "factory" },
+    {
+      label: "Planetary Scanner",
+      cost: "100r 10i 10b 70g",
+      available: !hasScanner && !hasQueuedScanner,
+      unavailableReason: hasScanner ? "Already installed" : hasQueuedScanner ? "Already queued" : undefined,
+      itemType: "planetary_scanner",
+    },
+  ];
+
+  const ships: PaletteRow[] = shipDesigns.map((d) => ({
+    label: d.name,
+    cost: formatDesignCost(d),
+    available: canBuildShips,
+    unavailableReason: !canBuildShips ? "Needs starbase" : undefined,
+    itemType: "ship" as const,
+    designId: d.id,
+  }));
+
+  const starbaseOptions: Array<{ label: string; targetType: StarbaseType; cost: string }> = [
+    { label: "Orbital Fort", targetType: "orbital_fort", cost: "(see PRD 17)" },
+    { label: "Space Station", targetType: "space_station", cost: "(see PRD 17)" },
+  ];
+
+  const starbases: PaletteRow[] = starbaseOptions.map((opt) => {
+    const isDuplicate = hasQueuedStarbase;
+    const isSameType = currentStarbaseType === opt.targetType;
+    return {
+      label: opt.label,
+      cost: opt.cost,
+      available: !isDuplicate && !isSameType,
+      unavailableReason: isDuplicate ? "Already queued" : isSameType ? "Already this type" : undefined,
+      itemType: "starbase" as const,
+      targetType: opt.targetType,
+    };
+  });
+
+  return { infrastructure, ships, starbases };
+}
+
+function formatDesignCost(d: DesignSummary): string {
+  const parts: string[] = [`${d.cost.resources}r`];
+  if (d.cost.minerals.ironium) parts.push(`${d.cost.minerals.ironium}i`);
+  if (d.cost.minerals.boranium) parts.push(`${d.cost.minerals.boranium}b`);
+  if (d.cost.minerals.germanium) parts.push(`${d.cost.minerals.germanium}g`);
+  return parts.join(" ");
+}
+
+interface BuildPaletteProps {
+  planet: PlayerPlanet;
+  queue: PlayerProductionQueueItem[];
+  shipDesigns: DesignSummary[];
+  onAdd: (itemType: ProductionItemType, designId?: string, targetType?: StarbaseType, quantity?: number) => void;
+}
+
+function PaletteSection({ title, rows, onAdd }: {
+  title: string;
+  rows: PaletteRow[];
+  onAdd: BuildPaletteProps["onAdd"];
+}) {
+  return (
+    <div>
+      <div className="px-2 py-1 text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
+        {title}
+      </div>
+      {rows.length === 0 && (
+        <div className="px-2 py-1.5 text-xs italic text-muted-foreground">No designs</div>
+      )}
+      {rows.map((row) => (
+        <button
+          key={`${row.itemType}-${row.targetType ?? ""}-${row.designId ?? ""}`}
+          type="button"
+          disabled={!row.available}
+          onClick={(e) => {
+            if (!row.available) return;
+            const qty = e.shiftKey ? 5 : 1;
+            onAdd(row.itemType, row.designId, row.targetType, qty);
+          }}
+          className={`w-full px-2 py-1.5 text-left transition-colors ${
+            row.available
+              ? "hover:bg-white/8 cursor-pointer"
+              : "cursor-not-allowed opacity-45"
+          }`}
+        >
+          <div className="text-sm text-foreground">{row.label}</div>
+          <div className="flex gap-2 text-[11px] text-muted-foreground">
+            <span>{row.cost}</span>
+            {row.unavailableReason && <span className="italic">{row.unavailableReason}</span>}
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function BuildPalette({ planet, queue, shipDesigns, onAdd }: BuildPaletteProps) {
+  const { infrastructure, ships, starbases } = buildRows(planet, queue, shipDesigns);
+
+  return (
+    <div className="h-full overflow-y-auto space-y-2 py-2">
+      <PaletteSection title="Infrastructure" rows={infrastructure} onAdd={onAdd} />
+      <PaletteSection title="Ships" rows={ships} onAdd={onAdd} />
+      <PaletteSection title="Starbases" rows={starbases} onAdd={onAdd} />
+    </div>
+  );
+}
diff --git a/frontend/src/components/panels/DetailPanel.tsx b/frontend/src/components/panels/DetailPanel.tsx
index 99bda95a..af4e9518 100644
--- a/frontend/src/components/panels/DetailPanel.tsx
+++ b/frontend/src/components/panels/DetailPanel.tsx
@@ -26,6 +26,7 @@ interface DetailPanelProps {
   fleetsAtSelectedPlanet: PlayerFleet[];
   onSelectFleet: (fleetId: string) => void;
   shipDesigns: DesignSummary[];
+  onOpenProduction?: (planetId: string) => void;
 }
 
 export function DetailPanel({
@@ -42,6 +43,7 @@ export function DetailPanel({
   fleetsAtSelectedPlanet,
   onSelectFleet,
   shipDesigns,
+  onOpenProduction,
 }: DetailPanelProps) {
   return (
     <div className="relative">
@@ -78,6 +80,7 @@ export function DetailPanel({
                 fleetsInOrbit={fleetsAtSelectedPlanet}
                 onSelectFleet={onSelectFleet}
                 shipDesigns={shipDesigns}
+                onOpenProduction={onOpenProduction}
               />
             ) : (
               <DetailPanelContent>
diff --git a/frontend/src/components/panels/PlanetDetail.test.tsx b/frontend/src/components/panels/PlanetDetail.test.tsx
index 38fd2f1e..1f9dcaed 100644
--- a/frontend/src/components/panels/PlanetDetail.test.tsx
+++ b/frontend/src/components/panels/PlanetDetail.test.tsx
@@ -2,7 +2,8 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { PlanetDetail } from "./PlanetDetail";
 import { GameCommandsContext } from "../../contexts/gameCommandsContext";
-import type { PlayerPlanet, PlayerProductionQueueItem } from "../../types";
+import type { GameCommandsContextValue } from "../../contexts/gameCommandsContext";
+import type { PlayerPlanet } from "../../types";
 import { fetchPlanetImageManifest, getPlanetImageUrl } from "../../lib/planetImages";
 
 vi.mock("../../lib/planetImages", () => ({
@@ -47,9 +48,9 @@ function renderPlanetDetail(planetOverrides: Partial<PlayerPlanet> = {}, propOve
             reservableResourcesThisTurn: 100,
           },
         },
-        addCommand: vi.fn(),
-        replaceCommands: vi.fn(),
-          nextTmpFleetId: vi.fn(() => "tmp_1"),
+        addCommand: vi.fn() as GameCommandsContextValue["addCommand"],
+        replaceCommands: vi.fn() as GameCommandsContextValue["replaceCommands"],
+        nextTmpFleetId: vi.fn(() => "tmp_1"),
       }}
     >
       <PlanetDetail
@@ -264,7 +265,7 @@ describe("PlanetDetail", () => {
     expect(screen.getByText("Fleet #2")).toBeInTheDocument();
     expect(screen.queryByText("Planet")).not.toBeInTheDocument();
     expect(screen.queryByText("Starbase")).not.toBeInTheDocument();
-    expect(screen.queryByText("Production Queue")).not.toBeInTheDocument();
+    expect(screen.queryByText("Manage →")).not.toBeInTheDocument();
   });
 
   it("closes the fleets-in-orbit list and returns to planet details", () => {
@@ -296,202 +297,43 @@ describe("PlanetDetail", () => {
     expect(screen.queryByText("Fleets in Orbit")).not.toBeInTheDocument();
     expect(screen.getByText("Planet")).toBeInTheDocument();
     expect(screen.getByText("Starbase")).toBeInTheDocument();
-    expect(screen.getByText("Production Queue")).toBeInTheDocument();
+    expect(screen.getByText("Production")).toBeInTheDocument();
   });
 
-  it("renders the owned planet production queue and edit controls", () => {
-    const replaceCommands = vi.fn();
-    const queue: PlayerProductionQueueItem[] = [
-      {
-        id: "PQ1",
-        itemType: "factory",
-        quantity: 2,
-        progress: {
-          resourcesSpent: 6,
-          mineralsSpent: { ironium: 0, boranium: 0, germanium: 2 },
-        },
-      },
+  it("shows Production section with Manage button and queue summary for owned planets", () => {
+    const onOpenProduction = vi.fn();
+    renderPlanetDetail(
       {
-        id: "PQ2",
-        itemType: "mine",
-        quantity: 1,
-        progress: {
-          resourcesSpent: 0,
-          mineralsSpent: { ironium: 0, boranium: 0, germanium: 0 },
-        },
-      },
-    ];
-
-    render(
-      <GameCommandsContext.Provider
-        value={{
-          basePlayerState: {
-            player: "tim",
-            turn: 1,
-            planets: [makePlanet({ population: 25_000, productionQueue: queue })],
-            designs: [],
-            events: [],
-            fleets: [],
+        productionQueue: [
+          {
+            id: "PQ1",
+            itemType: "factory",
+            quantity: 2,
+            progress: { resourcesSpent: 0, mineralsSpent: { ironium: 0, boranium: 0, germanium: 0 } },
           },
-          addCommand: vi.fn(),
-          replaceCommands,
-          nextTmpFleetId: vi.fn(() => "tmp_1"),
-        }}
-      >
-        <PlanetDetail
-          planet={makePlanet({ population: 25_000, productionQueue: queue })}
-          currentPlayer="tim"
-          fleetsInOrbit={[]}
-          onSelectFleet={vi.fn()}
-          shipDesigns={[]}
-        />
-      </GameCommandsContext.Provider>,
-    );
-
-    expect(screen.getByText("Production Queue")).toBeInTheDocument();
-    expect(screen.getAllByText("Factory").length).toBeGreaterThan(0);
-    expect(screen.getAllByText("Mine").length).toBeGreaterThan(0);
-    expect(screen.getByText("2x")).toBeInTheDocument();
-
-    fireEvent.click(screen.getByRole("button", { name: "Increase Factory quantity" }));
-    expect(replaceCommands).toHaveBeenCalledWith({ kind: "planet", id: "PL000001" }, [
-      expect.objectContaining({ type: "add_production_item", itemType: "factory", quantity: 1 }),
-    ]);
-
-    fireEvent.click(screen.getByRole("button", { name: "Decrease Mine quantity" }));
-    expect(replaceCommands).toHaveBeenCalledWith({ kind: "planet", id: "PL000001" }, [
-      expect.objectContaining({ type: "remove_production_item", itemId: "PQ2", quantity: 1 }),
-    ]);
-
-    fireEvent.click(screen.getByRole("button", { name: "Remove Factory" }));
-    expect(replaceCommands).toHaveBeenCalledWith(
-      { kind: "planet", id: "PL000001" },
-      expect.arrayContaining([
-        expect.objectContaining({ type: "remove_production_item", itemId: "PQ1", quantity: 2 }),
-      ]),
-    );
-
-    fireEvent.click(screen.getByRole("button", { name: "Add production item" }));
-    expect(screen.queryByRole("button", { name: /^Ship\b/ })).not.toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button", { name: /^Orbital Fort\b/ }));
-    expect(replaceCommands).toHaveBeenCalledWith(
-      { kind: "planet", id: "PL000001" },
-      expect.arrayContaining([
-        expect.objectContaining({
-          type: "add_production_item",
-          itemType: "starbase",
-          targetType: "orbital_fort",
-          quantity: 1,
-        }),
-      ]),
-    );
-
-    fireEvent.click(screen.getByRole("button", { name: "Add production item" }));
-    fireEvent.click(screen.getByRole("button", { name: /^Factory\b/ }));
-    expect(replaceCommands).toHaveBeenCalledWith(
-      { kind: "planet", id: "PL000001" },
-      expect.arrayContaining([
-        expect.objectContaining({ type: "add_production_item", itemType: "factory", quantity: 1 }),
-      ]),
+        ],
+      },
+      { onOpenProduction },
     );
 
-    fireEvent.click(screen.getByRole("button", { name: "Clear Queue" }));
-    expect(replaceCommands).toHaveBeenLastCalledWith({ kind: "planet", id: "PL000001" }, [
-      expect.objectContaining({ type: "clear_production_queue", planetId: "PL000001" }),
-    ]);
-  });
-
-  it("opens the production picker to the left of the trigger and keeps options compact", () => {
-    renderPlanetDetail({
-      population: 25_000,
-    });
-
-    fireEvent.click(screen.getByRole("button", { name: "Add production item" }));
-
-    const menu = screen.getByText("Add To Queue");
-    const menuContainer = menu.parentElement;
-    expect(menuContainer).toHaveClass("right-full");
-    expect(menuContainer).toHaveClass("mr-2");
-    expect(screen.queryByText("5 resources")).not.toBeInTheDocument();
-    expect(screen.queryByText("10 resources, 4 germanium")).not.toBeInTheDocument();
-  });
-
-  it("shows Planetary Scanner add option when not installed and not queued", () => {
-    const replaceCommands = vi.fn();
-    render(
-      <GameCommandsContext.Provider
-        value={{
-          basePlayerState: {
-            player: "tim",
-            turn: 1,
-            planets: [makePlanet({ scanner: null, productionQueue: [] })],
-            designs: [],
-            events: [],
-            fleets: [],
-          },
-          addCommand: vi.fn(),
-          replaceCommands,
-          nextTmpFleetId: vi.fn(() => "tmp_1"),
-        }}
-      >
-        <PlanetDetail
-          planet={makePlanet({ scanner: null, productionQueue: [] })}
-          currentPlayer="tim"
-          fleetsInOrbit={[]}
-          onSelectFleet={vi.fn()}
-          shipDesigns={[]}
-        />
-      </GameCommandsContext.Provider>,
-    );
+    expect(screen.getByText("Production")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Manage →/ })).toBeInTheDocument();
+    expect(screen.getByText("Queue: 2× Factory")).toBeInTheDocument();
 
-    fireEvent.click(screen.getByRole("button", { name: "Add production item" }));
-    fireEvent.click(screen.getByRole("button", { name: /^Planetary Scanner\b/ }));
-
-    expect(replaceCommands).toHaveBeenCalledWith(
-      { kind: "planet", id: "PL000001" },
-      expect.arrayContaining([
-        expect.objectContaining({
-          type: "add_production_item",
-          itemType: "planetary_scanner",
-          quantity: 1,
-        }),
-      ]),
-    );
+    fireEvent.click(screen.getByRole("button", { name: /Manage →/ }));
+    expect(onOpenProduction).toHaveBeenCalledWith("PL000001");
   });
 
-  it("hides Planetary Scanner add option when already installed or queued", () => {
-    renderPlanetDetail({ scanner: { installed: true, name: "Viewer 50", normal: 50, penetrating: 0 } });
-    fireEvent.click(screen.getByRole("button", { name: "Add production item" }));
-    expect(screen.queryByRole("button", { name: /^Planetary Scanner\b/ })).not.toBeInTheDocument();
-
-    renderPlanetDetail({
-      scanner: null,
-      productionQueue: [
-        {
-          id: "PQscan1",
-          itemType: "planetary_scanner",
-          quantity: 1,
-          progress: { resourcesSpent: 0, mineralsSpent: { ironium: 0, boranium: 0, germanium: 0 } },
-        },
-      ],
-    });
-    fireEvent.click(screen.getByRole("button", { name: "Add production item" }));
-    expect(screen.queryByRole("button", { name: /^Planetary Scanner\b/ })).not.toBeInTheDocument();
+  it("shows empty queue summary when productionQueue is empty", () => {
+    renderPlanetDetail({ productionQueue: [] });
+    expect(screen.getByText("Queue: empty")).toBeInTheDocument();
   });
 
-  it("does not show editable production controls on non-owned planets", () => {
-    renderPlanetDetail(
-      {
-        name: "Rigel",
-        owner: "sara",
-        productionQueue: null,
-      },
-      {},
-    );
+  it("does not show Production section on non-owned planets", () => {
+    renderPlanetDetail({ name: "Rigel", owner: "sara", productionQueue: null });
 
-    expect(screen.queryByText("Production Queue")).not.toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: "Add production item" })).not.toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: "Clear Queue" })).not.toBeInTheDocument();
+    expect(screen.queryByText("Production")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /Manage →/ })).not.toBeInTheDocument();
   });
 
   it("shows starbase details for owned and scanned planets", () => {
@@ -580,7 +422,7 @@ describe("PlanetDetail", () => {
     expect(screen.getByText("Population:")).toBeInTheDocument();
     expect(screen.getByRole("img", { name: "Habitability bars" })).toBeInTheDocument();
     expect(screen.queryByText("mining rate")).not.toBeInTheDocument();
-    expect(screen.queryByText("Production Queue")).not.toBeInTheDocument();
+    expect(screen.queryByText("Production")).not.toBeInTheDocument();
   });
 
   it("does not render stale scan banner for fresh planets", () => {
@@ -678,60 +520,6 @@ describe("PlanetDetail", () => {
     expect(screen.queryByText("Fleets in Orbit")).not.toBeInTheDocument();
   });
 
-  it("lists ship designs in the production picker and queues a ship item", () => {
-    const replaceCommands = vi.fn();
-    render(
-      <GameCommandsContext.Provider
-        value={{
-          basePlayerState: {
-            player: "tim",
-            turn: 1,
-            planets: [makePlanet({ population: 25_000, productionQueue: [] })],
-            designs: [],
-            events: [],
-            fleets: [],
-          },
-          addCommand: vi.fn(),
-          replaceCommands,
-          nextTmpFleetId: vi.fn(() => "tmp_1"),
-        }}
-      >
-        <PlanetDetail
-          planet={makePlanet({ population: 25_000, productionQueue: [] })}
-          currentPlayer="tim"
-          fleetsInOrbit={[]}
-          onSelectFleet={vi.fn()}
-          shipDesigns={[
-            {
-              id: "DEship1",
-              name: "Scout",
-              hull: "scout",
-              fuelCapacity: 50,
-              cost: {
-                resources: 15,
-                minerals: { ironium: 5, boranium: 3, germanium: 2 },
-              },
-            },
-          ]}
-        />
-      </GameCommandsContext.Provider>,
-    );
-
-    fireEvent.click(screen.getByRole("button", { name: "Add production item" }));
-    fireEvent.click(screen.getByRole("button", { name: /^Scout\b/ }));
-    expect(replaceCommands).toHaveBeenCalledWith(
-      { kind: "planet", id: "PL000001" },
-      expect.arrayContaining([
-        expect.objectContaining({
-          type: "add_production_item",
-          itemType: "ship",
-          designId: "DEship1",
-          quantity: 1,
-        }),
-      ]),
-    );
-  });
-
   it("shows Manage Fleets button whenever at least one own fleet is in orbit", () => {
     const { rerender } = renderPlanetDetail(
       {},
@@ -753,8 +541,8 @@ describe("PlanetDetail", () => {
             events: [],
             fleets: [],
           },
-          addCommand: vi.fn(),
-          replaceCommands: vi.fn(),
+          addCommand: vi.fn() as GameCommandsContextValue["addCommand"],
+          replaceCommands: vi.fn() as GameCommandsContextValue["replaceCommands"],
           nextTmpFleetId: vi.fn(() => "tmp_1"),
         }}
       >
diff --git a/frontend/src/components/panels/PlanetDetail.tsx b/frontend/src/components/panels/PlanetDetail.tsx
index c260c137..7c6c718d 100644
--- a/frontend/src/components/panels/PlanetDetail.tsx
+++ b/frontend/src/components/panels/PlanetDetail.tsx
@@ -1,17 +1,15 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { ListX, Minus, Plus, Trash2, X } from "lucide-react";
+import { X } from "lucide-react";
 import type {
   DesignSummary,
   Habitability,
   PlayerFleet,
   PlayerPlanet,
-  PlayerProductionQueueItem,
-  ProductionItemType,
-  StarbaseType,
 } from "../../types";
 import { useGameCommands } from "../../hooks/useGameCommands";
 import { fetchPlanetImageManifest, getPlanetImageUrl, type PlanetImageManifest } from "../../lib/planetImages";
 import { buildPlanetScopeCommands } from "../../lib/productionQueueCommands";
+import { summariseQueue } from "../../lib/productionSummary";
 import { cn } from "../../lib/utils";
 import { Button } from "../ui/Button";
 import { MutedText } from "../ui/MutedText";
@@ -21,38 +19,6 @@ import { PanelCard } from "../ui/PanelCard";
 import { ResourceBars } from "../ui/ResourceBars";
 import { FleetComposer } from "./FleetComposer";
 
-const PRODUCTION_ITEM_LABELS: Record<ProductionItemType, string> = {
-  mine: "Mine",
-  factory: "Factory",
-  starbase: "Starbase",
-  ship: "Ship",
-  planetary_scanner: "Planetary Scanner",
-};
-
-const BASE_PRODUCTION_ADD_OPTIONS: Array<{
-  label: string;
-  description: string;
-  itemType?: ProductionItemType;
-  targetType?: StarbaseType;
-  available: boolean;
-}> = [
-  { label: "Mine", description: "5 resources", itemType: "mine", available: true },
-  { label: "Factory", description: "10 resources, 4 germanium", itemType: "factory", available: true },
-  { label: "Orbital Fort", description: "Build/upgrade starbase (no shipbuilding)", itemType: "starbase", targetType: "orbital_fort", available: true },
-  { label: "Space Station", description: "Build/upgrade starbase (shipbuilding)", itemType: "starbase", targetType: "space_station", available: true },
-  { label: "Planetary Scanner", description: "100 resources, 10 ironium, 10 boranium, 70 germanium", itemType: "planetary_scanner", available: true },
-  { label: "Defense", description: "Not in Phase 1 yet", available: false },
-];
-
-type ProductionAddOption = (typeof BASE_PRODUCTION_ADD_OPTIONS)[number];
-
-type ShipDesignOption = {
-  label: string;
-  description: string;
-  itemType: "ship";
-  designId: string;
-  available: boolean;
-};
 
 const JOAT_HAB_LOW = 15;
 const JOAT_HAB_HIGH = 85;
@@ -63,8 +29,6 @@ const HAB_CONFIG = [
   { key: "radiation" as const, label: "Radiation", color: "#16a34a" },
 ];
 
-let draftProductionQueueItemId = 0;
-
 function formatHabValue(key: keyof Habitability, v: number): string {
   if (key === "gravity") {
     const g = 0.12 * Math.pow(4.0 / 0.12, v / 100);
@@ -157,35 +121,13 @@ function HabitabilityBars({ habitability }: { habitability: Habitability }) {
   );
 }
 
-function createDraftProductionQueueItem(
-  itemType: ProductionItemType,
-  targetType: StarbaseType | null = null,
-  designId: string | null = null,
-): PlayerProductionQueueItem {
-  draftProductionQueueItemId += 1;
-  return {
-    id: `draft-${itemType}-${draftProductionQueueItemId}`,
-    itemType,
-    targetType,
-    designId,
-    quantity: 1,
-    progress: {
-      resourcesSpent: 0,
-      mineralsSpent: {
-        ironium: 0,
-        boranium: 0,
-        germanium: 0,
-      },
-    },
-  };
-}
-
 export interface PlanetDetailProps {
   planet: PlayerPlanet;
   currentPlayer: string;
   fleetsInOrbit: PlayerFleet[];
   onSelectFleet: (fleetId: string) => void;
   shipDesigns: DesignSummary[];
+  onOpenProduction?: (planetId: string) => void;
 }
 
 export function PlanetDetail({
@@ -194,6 +136,7 @@ export function PlanetDetail({
   fleetsInOrbit,
   onSelectFleet,
   shipDesigns,
+  onOpenProduction,
 }: PlanetDetailProps) {
   const { basePlayerState, replaceCommands } = useGameCommands();
   const isOwn = planet.owner === currentPlayer;
@@ -206,17 +149,13 @@ export function PlanetDetail({
   const baseContributeOnlyLeftoverToResearch =
     basePlayerState?.planets.find((candidate) => candidate.id === planet.id)?.contributeOnlyLeftoverToResearch ?? null;
   const showResearchContribution =
-    planet.contributeOnlyLeftoverToResearch !== null &&
-    basePlayerState?.research != null &&
-    planet.scanLevel === "detailed" &&
-    planet.scanAge === 0;
+    planet.productionQueue != null &&
+    basePlayerState?.research != null;
 
   const [manifest, setManifest] = useState<PlanetImageManifest | null>(null);
-  const [productionPickerOpen, setProductionPickerOpen] = useState(false);
   const [populationDialogOpen, setPopulationDialogOpen] = useState(false);
   const [showOrbitFleetList, setShowOrbitFleetList] = useState(false);
   const [showFleetComposer, setShowFleetComposer] = useState(false);
-  const productionPickerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     let cancelled = false;
@@ -239,122 +178,10 @@ export function PlanetDetail({
     return getPlanetImageUrl(manifest, planet.id);
   }, [manifest, planet.id]);
 
-  useEffect(() => {
-    if (!productionPickerOpen) {
-      return;
-    }
-
-    const handlePointerDown = (event: MouseEvent) => {
-      if (!productionPickerRef.current?.contains(event.target as Node)) {
-        setProductionPickerOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handlePointerDown);
-    return () => {
-      document.removeEventListener("mousedown", handlePointerDown);
-    };
-  }, [productionPickerOpen]);
-
-  const handleAddProductionItem = (
-    itemType: ProductionItemType,
-    targetType?: StarbaseType,
-    designId?: string,
-  ) => {
-    const nextQueue = [
-      ...productionQueue,
-      createDraftProductionQueueItem(itemType, targetType ?? null, designId ?? null),
-    ];
-    replaceCommands(
-      { kind: "planet", id: planet.id },
-      buildPlanetScopeCommands(
-        planet.id,
-        baseProductionQueue,
-        nextQueue,
-        baseContributeOnlyLeftoverToResearch,
-        planet.contributeOnlyLeftoverToResearch,
-      ),
-    );
-    setProductionPickerOpen(false);
-  };
   const starbase = planet.starbase;
   const isStarbasePresent = starbase != null && (starbase as { present?: boolean }).present !== false;
   const starbaseType = starbase && "type" in starbase ? starbase.type : null;
   const starbaseCanBuildShips = starbase && "canBuildShips" in starbase ? starbase.canBuildShips : null;
-  const productionAddOptions = BASE_PRODUCTION_ADD_OPTIONS.map((option) => {
-    if (option.itemType !== "starbase") return option;
-    const isDuplicate = productionQueue.some((item) => item.itemType === "starbase");
-    if (isDuplicate) return { ...option, available: false, description: "Starbase already queued" };
-    if (option.targetType != null && option.targetType === starbaseType) {
-      return { ...option, available: false, description: "Already this starbase type" };
-    }
-    return option;
-  });
-  const hasQueuedPlanetaryScanner = productionQueue.some((item) => item.itemType === "planetary_scanner");
-  const scannerInstalled = planet.scanner?.installed === true;
-  const filteredProductionAddOptions = productionAddOptions.flatMap((option) => {
-    if (option.itemType !== "planetary_scanner") {
-      return [option];
-    }
-    if (scannerInstalled) {
-      return [];
-    }
-    if (hasQueuedPlanetaryScanner) {
-      return [];
-    }
-    return [option];
-  });
-  const shipDesignOptions: ShipDesignOption[] = shipDesigns.map((design) => ({
-      label: design.name,
-      description: `${design.cost.resources} resources, ${design.cost.minerals.ironium} ironium, ${design.cost.minerals.boranium} boranium, ${design.cost.minerals.germanium} germanium`,
-      itemType: "ship" as const,
-      designId: design.id,
-      available: isStarbasePresent && starbaseCanBuildShips === true,
-    }));
-  const productionPickerOptions: Array<ProductionAddOption | ShipDesignOption> = [
-    ...filteredProductionAddOptions,
-    ...shipDesignOptions,
-  ];
-
-  const handleAdjustProductionItemQuantity = (itemId: string, delta: -1 | 1) => {
-    const nextQueue = productionQueue.flatMap((item) => {
-      if (item.id !== itemId) {
-        return [item];
-      }
-
-      const quantity = item.quantity + delta;
-      if (quantity <= 0) {
-        return [];
-      }
-
-      return [{ ...item, quantity }];
-    });
-
-    replaceCommands(
-      { kind: "planet", id: planet.id },
-      buildPlanetScopeCommands(
-        planet.id,
-        baseProductionQueue,
-        nextQueue,
-        baseContributeOnlyLeftoverToResearch,
-        planet.contributeOnlyLeftoverToResearch,
-      ),
-    );
-  };
-
-  const handleRemoveProductionItem = (itemId: string) => {
-    const nextQueue = productionQueue.filter((item) => item.id !== itemId);
-    replaceCommands(
-      { kind: "planet", id: planet.id },
-      buildPlanetScopeCommands(
-        planet.id,
-        baseProductionQueue,
-        nextQueue,
-        baseContributeOnlyLeftoverToResearch,
-        planet.contributeOnlyLeftoverToResearch,
-      ),
-    );
-  };
 
   const ownFleetsInOrbit = fleetsInOrbit.filter((fleet) => fleet.owner === currentPlayer);
   const handleOrbitSummaryClick = () => {
@@ -643,140 +470,18 @@ export function PlanetDetail({
             </PanelCard>
           )}
 
-          {isOwn && planet.scanLevel === "detailed" && !isStale && (
-        <PanelCard variant="surface" className="space-y-3 text-sm">
-          <div className="relative flex items-center justify-between gap-3" ref={productionPickerRef}>
-            <div>
-              <MutedText>Production Queue</MutedText>
-            </div>
-            <div className="flex items-center gap-1">
-              <Button
-                size="icon"
-                variant="dangerGhost"
-                aria-label="Clear Queue"
-                disabled={productionQueue.length === 0}
-                onClick={() =>
-                  replaceCommands(
-                    { kind: "planet", id: planet.id },
-                    buildPlanetScopeCommands(
-                      planet.id,
-                      baseProductionQueue,
-                      [],
-                      baseContributeOnlyLeftoverToResearch,
-                      planet.contributeOnlyLeftoverToResearch,
-                    ),
-                  )
-                }
-              >
-                <ListX className="h-3 w-3" />
-              </Button>
-              <div className="relative">
-                <Button
-                  size="icon"
-                  variant="dashed"
-                  aria-label={productionPickerOpen ? "Close production item picker" : "Add production item"}
-                  aria-expanded={productionPickerOpen}
-                  onClick={() => setProductionPickerOpen((open) => !open)}
-                >
-                  <Plus className="h-3 w-3" />
+          {planet.productionQueue != null && (
+            <PanelCard variant="surface" className="space-y-2 text-sm">
+              <div className="flex items-center justify-between">
+                <SectionLabel>Production</SectionLabel>
+                <Button size="xs" variant="ghost" onClick={() => onOpenProduction?.(planet.id)}>
+                  Manage →
                 </Button>
-
-                {productionPickerOpen && (
-                  <div
-                    className="absolute right-full top-1/2 z-10 mr-2 w-44 -translate-y-1/2 rounded-md border border-[var(--color-panel-border)] bg-black/95 p-1.5 shadow-2xl backdrop-blur"
-                  >
-                    <div className="px-2 py-1 text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
-                      Add To Queue
-                    </div>
-                    <div className="space-y-1">
-                      {productionPickerOptions.map((option) => (
-                        <button
-                          key={`${option.label}-${option.itemType ?? "none"}-${"designId" in option ? option.designId : ""}`}
-                          type="button"
-                          disabled={!option.available}
-                          className={cn(
-                            "w-full rounded-md px-2 py-1.5 text-left transition-colors",
-                            option.available
-                              ? "hover:bg-white/8"
-                              : "cursor-not-allowed opacity-45",
-                          )}
-                          onClick={() => {
-                            if (option.itemType) {
-                              handleAddProductionItem(
-                                option.itemType,
-                                "targetType" in option ? option.targetType : undefined,
-                                "designId" in option ? option.designId : undefined,
-                              );
-                            }
-                          }}
-                        >
-                          <div className="text-sm text-foreground">{option.label}</div>
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-                )}
               </div>
-            </div>
-          </div>
-
-          {productionQueue.length === 0 ? (
-            <div className="rounded-md border border-dashed border-[var(--color-panel-border)] px-3 py-4 text-center text-xs text-muted-foreground">
-              Queue empty. Use + to add production items.
-            </div>
-          ) : (
-            <div className="space-y-1.5">
-              {productionQueue.map((item) => (
-                <div
-                  key={item.id}
-                  className="grid grid-cols-[minmax(0,1fr)_auto_auto_auto] items-center gap-2 rounded-md border border-[var(--color-panel-border)] bg-black/10 px-2 py-1.5"
-                >
-                  <div className="min-w-0">
-                    <div className="truncate font-medium text-foreground">
-                      {item.itemType === "ship"
-                        ? (shipDesigns.find((design) => design.id === item.designId)?.name ?? "Ship")
-                        : PRODUCTION_ITEM_LABELS[item.itemType]}
-                    </div>
-                    <div className="truncate text-[11px] text-muted-foreground">
-                      {item.quantity} remaining • {item.progress.resourcesSpent} resources spent
-                    </div>
-                  </div>
-                  <div className="text-xs font-semibold text-muted-foreground">{item.quantity}x</div>
-                  <div className="flex items-center gap-0.5">
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      aria-label={`Increase ${PRODUCTION_ITEM_LABELS[item.itemType]} quantity`}
-                      disabled={item.itemType === "planetary_scanner"}
-                      onClick={() => handleAdjustProductionItemQuantity(item.id, 1)}
-                    >
-                      <Plus className="h-3 w-3" />
-                    </Button>
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      aria-label={`Decrease ${PRODUCTION_ITEM_LABELS[item.itemType]} quantity`}
-                      disabled={item.itemType === "planetary_scanner"}
-                      onClick={() => handleAdjustProductionItemQuantity(item.id, -1)}
-                    >
-                      <Minus className="h-3 w-3" />
-                    </Button>
-                  </div>
-                  <div className="flex items-center justify-end">
-                    <Button
-                      size="icon"
-                      variant="dangerGhost"
-                      aria-label={`Remove ${PRODUCTION_ITEM_LABELS[item.itemType]}`}
-                      onClick={() => handleRemoveProductionItem(item.id)}
-                    >
-                      <Trash2 className="h-3 w-3" />
-                    </Button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </PanelCard>
+              <div className="text-xs text-muted-foreground">
+                {summariseQueue(planet.productionQueue, shipDesigns)}
+              </div>
+            </PanelCard>
           )}
         </>
       )}
diff --git a/frontend/src/components/panels/PlanetList.test.tsx b/frontend/src/components/panels/PlanetList.test.tsx
new file mode 100644
index 00000000..da531003
--- /dev/null
+++ b/frontend/src/components/panels/PlanetList.test.tsx
@@ -0,0 +1,199 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { PlanetList } from "./PlanetList";
+import type { PlanetListColumn, PlanetListFilter } from "./PlanetList";
+import type { PlayerPlanet } from "../../types";
+
+function makePlanet(id: string, name: string): PlayerPlanet {
+  return {
+    id,
+    name,
+    x: 0,
+    y: 0,
+    scanLevel: "detailed",
+    scanAge: 0,
+    owner: "tim",
+  };
+}
+
+const nameCol: PlanetListColumn = {
+  id: "name",
+  header: "Name",
+  sortable: true,
+  sortValue: (p) => p.name,
+  render: (p) => p.name,
+};
+
+const noSortCol: PlanetListColumn = {
+  id: "fixed",
+  header: "Fixed",
+  sortable: false,
+  render: (p) => p.id,
+};
+
+const planets = [makePlanet("p1", "Zeta"), makePlanet("p2", "Alpha"), makePlanet("p3", "Mars")];
+
+describe("PlanetList", () => {
+  it("renders one row per planet in default name-sorted order", () => {
+    render(
+      <PlanetList
+        planets={planets}
+        selectedPlanetId={null}
+        onSelectPlanet={() => undefined}
+        columns={[nameCol]}
+      />,
+    );
+    const rows = screen.getAllByRole("row").slice(1); // skip header
+    expect(rows[0]).toHaveTextContent("Alpha");
+    expect(rows[1]).toHaveTextContent("Mars");
+    expect(rows[2]).toHaveTextContent("Zeta");
+  });
+
+  it("calls onSelectPlanet with the row id when a row is clicked", () => {
+    const onSelect = vi.fn();
+    render(
+      <PlanetList
+        planets={planets}
+        selectedPlanetId={null}
+        onSelectPlanet={onSelect}
+        columns={[nameCol]}
+      />,
+    );
+    fireEvent.click(screen.getByText("Mars"));
+    expect(onSelect).toHaveBeenCalledWith("p3");
+  });
+
+  it("marks the selected row with aria-selected and accent class", () => {
+    render(
+      <PlanetList
+        planets={planets}
+        selectedPlanetId="p2"
+        onSelectPlanet={() => undefined}
+        columns={[nameCol]}
+      />,
+    );
+    const rows = screen.getAllByRole("row").slice(1);
+    const selected = rows.find((r) => r.getAttribute("aria-selected") === "true");
+    expect(selected).toBeTruthy();
+    expect(selected).toHaveTextContent("Alpha");
+    expect(selected?.className).toContain("border-l-[var(--color-player-self)]");
+  });
+
+  it("sorts ascending then descending then back to default on repeated header clicks", () => {
+    render(
+      <PlanetList
+        planets={planets}
+        selectedPlanetId={null}
+        onSelectPlanet={() => undefined}
+        columns={[nameCol]}
+      />,
+    );
+    const header = screen.getByRole("columnheader", { name: /Name/ });
+
+    // default: asc by name
+    let rows = screen.getAllByRole("row").slice(1);
+    expect(rows[0]).toHaveTextContent("Alpha");
+
+    // click 1: set sort asc
+    fireEvent.click(header);
+    rows = screen.getAllByRole("row").slice(1);
+    expect(rows[0]).toHaveTextContent("Alpha");
+
+    // click 2: desc
+    fireEvent.click(header);
+    rows = screen.getAllByRole("row").slice(1);
+    expect(rows[0]).toHaveTextContent("Zeta");
+
+    // click 3: clear sort (back to unsorted = original array order = p1 Zeta, p2 Alpha, p3 Mars)
+    fireEvent.click(header);
+    rows = screen.getAllByRole("row").slice(1);
+    expect(rows[0]).toHaveTextContent("Zeta"); // original insertion order
+  });
+
+  it("places null sortValues last regardless of direction", () => {
+    const nullSortCol: PlanetListColumn = {
+      id: "nulls",
+      header: "N",
+      sortable: true,
+      sortValue: (p) => (p.name === "Mars" ? null : p.name),
+      render: (p) => p.name,
+    };
+    render(
+      <PlanetList
+        planets={planets}
+        selectedPlanetId={null}
+        onSelectPlanet={() => undefined}
+        columns={[nullSortCol]}
+      />,
+    );
+    const header = screen.getByRole("columnheader", { name: /^N/ });
+
+    // asc: first click resets cycle to asc (same as default)
+    fireEvent.click(header);
+    let rows = screen.getAllByRole("row").slice(1);
+    expect(rows[rows.length - 1]).toHaveTextContent("Mars");
+
+    // desc
+    fireEvent.click(header);
+    rows = screen.getAllByRole("row").slice(1);
+    expect(rows[rows.length - 1]).toHaveTextContent("Mars");
+  });
+
+  it("filters rows case-insensitively by search string", () => {
+    const filter: PlanetListFilter = {
+      search: "al",
+      toggles: [],
+      onChange: () => undefined,
+    };
+    render(
+      <PlanetList
+        planets={planets}
+        selectedPlanetId={null}
+        onSelectPlanet={() => undefined}
+        columns={[nameCol]}
+        filter={filter}
+      />,
+    );
+    const rows = screen.getAllByRole("row").slice(1);
+    expect(rows).toHaveLength(1);
+    expect(rows[0]).toHaveTextContent("Alpha");
+  });
+
+  it("shows the empty-filter message and calls filter.onChange with reset values on clear", () => {
+    const onChange = vi.fn();
+    const filter: PlanetListFilter = {
+      search: "xyzzy",
+      toggles: [{ id: "t1", label: "T1", active: true }],
+      onChange,
+    };
+    render(
+      <PlanetList
+        planets={planets}
+        selectedPlanetId={null}
+        onSelectPlanet={() => undefined}
+        columns={[nameCol]}
+        filter={filter}
+      />,
+    );
+    expect(screen.getByText("No planets match the current filter.")).toBeTruthy();
+    fireEvent.click(screen.getByText("Clear filter"));
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ search: "", toggles: [{ id: "t1", label: "T1", active: false }] }),
+    );
+  });
+
+  it("does not sort when a non-sortable column header is clicked", () => {
+    render(
+      <PlanetList
+        planets={planets}
+        selectedPlanetId={null}
+        onSelectPlanet={() => undefined}
+        columns={[noSortCol, nameCol]}
+      />,
+    );
+    fireEvent.click(screen.getByText("Fixed"));
+    // Clicking a non-sortable column does not change the active sort (name asc remains)
+    const rows = screen.getAllByRole("row").slice(1);
+    expect(rows[0]).toHaveTextContent("Alpha"); // name-sorted asc, unchanged by Fixed click
+  });
+});
diff --git a/frontend/src/components/panels/PlanetList.tsx b/frontend/src/components/panels/PlanetList.tsx
new file mode 100644
index 00000000..f275c39c
--- /dev/null
+++ b/frontend/src/components/panels/PlanetList.tsx
@@ -0,0 +1,222 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
+import type { PlayerPlanet } from "../../types";
+
+export interface PlanetListColumn {
+  id: string;
+  header: string;
+  align?: "left" | "right";
+  width?: string;
+  sortable?: boolean;
+  sortValue?: (planet: PlayerPlanet) => number | string | null;
+  render: (planet: PlayerPlanet) => ReactNode;
+}
+
+export interface PlanetListFilterToggle {
+  id: string;
+  label: string;
+  active: boolean;
+}
+
+export interface PlanetListFilter {
+  search: string;
+  toggles: PlanetListFilterToggle[];
+  onChange: (next: PlanetListFilter) => void;
+}
+
+export interface PlanetListProps {
+  planets: PlayerPlanet[];
+  selectedPlanetId: string | null;
+  onSelectPlanet: (planetId: string) => void;
+  columns: PlanetListColumn[];
+  filter?: PlanetListFilter;
+  emptyState?: ReactNode;
+}
+
+type SortDir = "asc" | "desc";
+
+function sortPlanets(
+  planets: PlayerPlanet[],
+  col: PlanetListColumn | undefined,
+  dir: SortDir,
+): PlayerPlanet[] {
+  if (!col?.sortValue) return planets;
+  return [...planets].sort((a, b) => {
+    const va = col.sortValue!(a);
+    const vb = col.sortValue!(b);
+    if (va === null && vb === null) return 0;
+    if (va === null) return 1;
+    if (vb === null) return -1;
+    let cmp = 0;
+    if (typeof va === "number" && typeof vb === "number") {
+      cmp = va - vb;
+    } else {
+      cmp = String(va).localeCompare(String(vb));
+    }
+    return dir === "asc" ? cmp : -cmp;
+  });
+}
+
+export function PlanetList({
+  planets,
+  selectedPlanetId,
+  onSelectPlanet,
+  columns,
+  filter,
+  emptyState,
+}: PlanetListProps) {
+  const [sortColId, setSortColId] = useState<string | null>(
+    () => columns.find((c) => c.sortable)?.id ?? null,
+  );
+  const [sortDir, setSortDir] = useState<SortDir>("asc");
+  const [clickCount, setClickCount] = useState<Record<string, number>>({});
+
+  const handleHeaderClick = (col: PlanetListColumn) => {
+    if (!col.sortable) return;
+    const prev = clickCount[col.id] ?? 0;
+    const next = prev + 1;
+    setClickCount((c) => ({ ...c, [col.id]: next }));
+    if (next % 3 === 1) {
+      setSortColId(col.id);
+      setSortDir("asc");
+    } else if (next % 3 === 2) {
+      setSortColId(col.id);
+      setSortDir("desc");
+    } else {
+      setSortColId(null);
+    }
+  };
+
+  const searchStr = filter?.search.toLowerCase() ?? "";
+  const filtered = searchStr
+    ? planets.filter((p) => p.name.toLowerCase().includes(searchStr))
+    : planets;
+
+  const activeCol = columns.find((c) => c.id === sortColId);
+  const sorted = activeCol ? sortPlanets(filtered, activeCol, sortDir) : filtered;
+
+  const clearFilter = () => {
+    if (!filter) return;
+    filter.onChange({
+      ...filter,
+      search: "",
+      toggles: filter.toggles.map((t) => ({ ...t, active: false })),
+    });
+  };
+
+  if (planets.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
+        {emptyState ?? "No planets to show."}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      {filter && (
+        <div className="flex flex-wrap items-center gap-2 border-b border-[var(--color-panel-border)] p-2 text-xs">
+          <input
+            aria-label="Search planets"
+            type="text"
+            value={filter.search}
+            onChange={(e) =>
+              filter.onChange({ ...filter, search: e.target.value })
+            }
+            placeholder="Search…"
+            className="rounded border border-[var(--color-panel-border)] bg-black/30 px-2 py-1 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-[var(--color-player-self)]"
+          />
+          {filter.toggles.map((t) => (
+            <button
+              key={t.id}
+              type="button"
+              onClick={() =>
+                filter.onChange({
+                  ...filter,
+                  toggles: filter.toggles.map((tog) =>
+                    tog.id === t.id ? { ...tog, active: !tog.active } : tog,
+                  ),
+                })
+              }
+              className={`rounded-full border px-2 py-0.5 text-xs transition-colors ${
+                t.active
+                  ? "border-[var(--color-player-self)] bg-[var(--color-player-self)]/20 text-foreground"
+                  : "border-[var(--color-panel-border)] text-muted-foreground hover:border-foreground/40"
+              }`}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="flex-1 overflow-auto">
+        {sorted.length === 0 ? (
+          <div className="flex flex-col items-center gap-2 p-4 text-sm text-muted-foreground">
+            <span>No planets match the current filter.</span>
+            <button
+              type="button"
+              onClick={clearFilter}
+              className="text-xs underline hover:text-foreground"
+            >
+              Clear filter
+            </button>
+          </div>
+        ) : (
+          <table className="w-full text-xs">
+            <thead className="sticky top-0 bg-[var(--color-panel-bg,#0a0a0a)]">
+              <tr className="border-b border-[var(--color-panel-border)]">
+                {columns.map((col) => {
+                  const isActive = col.id === sortColId;
+                  const arrow = isActive ? (sortDir === "asc" ? " ↑" : " ↓") : "";
+                  return (
+                    <th
+                      key={col.id}
+                      style={col.width ? { width: col.width } : undefined}
+                      className={`px-2 py-1.5 text-left font-medium text-muted-foreground ${
+                        col.sortable !== false ? "cursor-pointer select-none hover:text-foreground" : ""
+                      } ${col.align === "right" ? "text-right" : "text-left"}`}
+                      aria-sort={
+                        isActive ? (sortDir === "asc" ? "ascending" : "descending") : "none"
+                      }
+                      onClick={() => handleHeaderClick(col)}
+                    >
+                      {col.header}
+                      {arrow}
+                    </th>
+                  );
+                })}
+              </tr>
+            </thead>
+            <tbody>
+              {sorted.map((planet) => {
+                const isSelected = planet.id === selectedPlanetId;
+                return (
+                  <tr
+                    key={planet.id}
+                    aria-selected={isSelected}
+                    onClick={() => onSelectPlanet(planet.id)}
+                    className={`cursor-pointer border-b border-[var(--color-panel-border)] transition-colors hover:bg-white/5 ${
+                      isSelected
+                        ? "border-l-2 border-l-[var(--color-player-self)] bg-[var(--color-player-self)]/10"
+                        : ""
+                    }`}
+                  >
+                    {columns.map((col) => (
+                      <td
+                        key={col.id}
+                        className={`px-2 py-1.5 ${col.align === "right" ? "text-right" : "text-left"}`}
+                      >
+                        {col.render(planet)}
+                      </td>
+                    ))}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/panels/ProductionWorkspace.test.tsx b/frontend/src/components/panels/ProductionWorkspace.test.tsx
new file mode 100644
index 00000000..5eebe72e
--- /dev/null
+++ b/frontend/src/components/panels/ProductionWorkspace.test.tsx
@@ -0,0 +1,261 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ProductionWorkspace } from "./ProductionWorkspace";
+import { GameCommandsContext } from "../../contexts/gameCommandsContext";
+import type { GameCommandsContextValue } from "../../contexts/gameCommandsContext";
+import type { PlayerPlanet, PlayerState } from "../../types";
+import type { DesignSummary } from "../../types/designer";
+
+function makePlanet(id: string, name: string, overrides: Partial<PlayerPlanet> = {}): PlayerPlanet {
+  return {
+    id,
+    name,
+    x: 0,
+    y: 0,
+    scanLevel: "detailed",
+    scanAge: 0,
+    owner: "tim",
+    mines: 5,
+    factories: 10,
+    resources: 100,
+    minerals: { ironium: 100, boranium: 50, germanium: 30 },
+    productionQueue: [],
+    starbase: null,
+    scanner: null,
+    contributeOnlyLeftoverToResearch: false,
+    ...overrides,
+  };
+}
+
+const designs: DesignSummary[] = [];
+
+function makeBaseState(planets: PlayerPlanet[]): PlayerState {
+  return {
+    player: "tim",
+    turn: 1,
+    planets,
+    fleets: [],
+    designs: [],
+    events: [],
+  };
+}
+
+function Wrapper({
+  planets,
+  initialPlanetId = null,
+  onShowOnMap = vi.fn(),
+  replaceCommands = vi.fn(),
+  addCommand = vi.fn(),
+}: {
+  planets: PlayerPlanet[];
+  initialPlanetId?: string | null;
+  onShowOnMap?: (id: string) => void;
+  replaceCommands?: ReturnType<typeof vi.fn>;
+  addCommand?: ReturnType<typeof vi.fn>;
+}) {
+  return (
+    <GameCommandsContext.Provider
+      value={{
+        basePlayerState: makeBaseState(planets),
+        addCommand: addCommand as GameCommandsContextValue["addCommand"],
+        replaceCommands: replaceCommands as GameCommandsContextValue["replaceCommands"],
+        nextTmpFleetId: () => "tmp_1",
+      }}
+    >
+      <ProductionWorkspace
+        ownedPlanets={planets}
+        currentPlayer="tim"
+        shipDesigns={designs}
+        initialPlanetId={initialPlanetId}
+        onShowOnMap={onShowOnMap}
+      />
+    </GameCommandsContext.Provider>
+  );
+}
+
+describe("ProductionWorkspace", () => {
+  it("renders three panes when at least one planet is supplied", () => {
+    render(<Wrapper planets={[makePlanet("p1", "Earth")]} />);
+    expect(screen.getByTestId("planet-list-pane")).toBeInTheDocument();
+    expect(screen.getByTestId("centre-pane")).toBeInTheDocument();
+    expect(screen.getByTestId("palette-pane")).toBeInTheDocument();
+  });
+
+  it("pre-selects initialPlanetId when provided", () => {
+    render(
+      <Wrapper
+        planets={[makePlanet("p1", "Earth"), makePlanet("p2", "Mars")]}
+        initialPlanetId="p2"
+      />,
+    );
+    // Centre pane shows Mars
+    expect(screen.getByTestId("centre-pane")).toHaveTextContent("Mars");
+  });
+
+  it("pre-selects first owned planet (by name) when no initialPlanetId", () => {
+    render(
+      <Wrapper planets={[makePlanet("p1", "Zeta"), makePlanet("p2", "Alpha")]} />,
+    );
+    expect(screen.getByTestId("centre-pane")).toHaveTextContent("Alpha");
+  });
+
+  it("shows empty-workspace message and no panes when no owned planets", () => {
+    render(<Wrapper planets={[]} />);
+    expect(screen.getAllByText("Colonise a planet to start producing.").length).toBeGreaterThan(0);
+  });
+
+  it("switching planets in the list updates the centre pane", () => {
+    render(
+      <Wrapper planets={[makePlanet("p1", "Earth"), makePlanet("p2", "Mars")]} />,
+    );
+    // Initially Earth (first alpha)
+    expect(screen.getByTestId("centre-pane")).toHaveTextContent("Earth");
+    // Click Mars row in the list
+    const rows = screen.getAllByRole("row");
+    const marsRow = rows.find((r) => r.textContent?.includes("Mars"));
+    fireEvent.click(marsRow!);
+    expect(screen.getByTestId("centre-pane")).toHaveTextContent("Mars");
+  });
+
+  it("Toggling Empty queue filter keeps current selection", () => {
+    render(
+      <Wrapper
+        planets={[
+          makePlanet("p1", "Earth", { productionQueue: [] }),
+          makePlanet("p2", "Mars", { productionQueue: [] }),
+        ]}
+        initialPlanetId="p2"
+      />,
+    );
+    // Toggle "Empty queue"
+    fireEvent.click(screen.getByText("Empty queue"));
+    // Centre pane still shows Mars
+    expect(screen.getByTestId("centre-pane")).toHaveTextContent("Mars");
+  });
+
+  it("production summary renders leftover-only annotation", () => {
+    render(
+      <Wrapper
+        planets={[makePlanet("p1", "Earth", { contributeOnlyLeftoverToResearch: true })]}
+      />,
+    );
+    expect(screen.getByTestId("centre-pane")).toHaveTextContent("leftover only");
+  });
+
+  it("Idle status shows for empty queue, Building for non-empty queue", () => {
+    render(
+      <Wrapper
+        planets={[
+          makePlanet("p1", "Earth", { productionQueue: [] }),
+        ]}
+        initialPlanetId="p1"
+      />,
+    );
+    expect(screen.getByTestId("centre-pane")).toHaveTextContent("Idle");
+
+    const withQueue = makePlanet("p2", "Mars", {
+      productionQueue: [{
+        id: "qi1",
+        itemType: "mine",
+        quantity: 3,
+        designId: null,
+        progress: { resourcesSpent: 0, mineralsSpent: { ironium: 0, boranium: 0, germanium: 0 } },
+      }],
+    });
+    render(
+      <Wrapper planets={[withQueue]} initialPlanetId="p2" />,
+    );
+    expect(screen.getAllByTestId("centre-pane")[1]).toHaveTextContent("Building (3 remaining)");
+  });
+
+  it("Show on map calls onShowOnMap with the selected planet id", () => {
+    const onShowOnMap = vi.fn();
+    render(
+      <Wrapper
+        planets={[makePlanet("p1", "Earth")]}
+        initialPlanetId="p1"
+        onShowOnMap={onShowOnMap}
+      />,
+    );
+    fireEvent.click(screen.getByText("Show on map →"));
+    expect(onShowOnMap).toHaveBeenCalledWith("p1");
+  });
+
+  it("Queue rows render in order with correct labels", () => {
+    const planet = makePlanet("p1", "Earth", {
+      productionQueue: [
+        {
+          id: "qi1",
+          itemType: "factory",
+          quantity: 5,
+          designId: null,
+          progress: { resourcesSpent: 0, mineralsSpent: { ironium: 0, boranium: 0, germanium: 0 } },
+        },
+        {
+          id: "qi2",
+          itemType: "mine",
+          quantity: 2,
+          designId: null,
+          progress: { resourcesSpent: 0, mineralsSpent: { ironium: 0, boranium: 0, germanium: 0 } },
+        },
+      ],
+    });
+    render(<Wrapper planets={[planet]} initialPlanetId="p1" />);
+    const centre = screen.getByTestId("centre-pane");
+    expect(centre).toHaveTextContent("Factory");
+    expect(centre).toHaveTextContent("Mine");
+  });
+
+  it("Clear queue button dispatches commands and is disabled when empty", () => {
+    const replaceCommands = vi.fn();
+    render(
+      <Wrapper
+        planets={[makePlanet("p1", "Earth", { productionQueue: [] })]}
+        initialPlanetId="p1"
+        replaceCommands={replaceCommands}
+      />,
+    );
+    const clearBtn = screen.getByRole("button", { name: /clear queue/i });
+    expect(clearBtn).toBeDisabled();
+  });
+
+  it("planetary_scanner row has + disabled", () => {
+    const planet = makePlanet("p1", "Earth", {
+      productionQueue: [{
+        id: "scanner-1",
+        itemType: "planetary_scanner",
+        quantity: 1,
+        designId: null,
+        progress: { resourcesSpent: 0, mineralsSpent: { ironium: 0, boranium: 0, germanium: 0 } },
+      }],
+    });
+    render(<Wrapper planets={[planet]} initialPlanetId="p1" />);
+    const increaseBtn = screen.getByRole("button", { name: /increase Planetary Scanner quantity/i });
+    expect(increaseBtn).toBeDisabled();
+  });
+
+  it("workspace edits call replaceCommands with planet-scoped commands", () => {
+    const replaceCommands = vi.fn();
+    const planet = makePlanet("p1", "Earth", {
+      productionQueue: [{
+        id: "qi1",
+        itemType: "factory",
+        quantity: 3,
+        designId: null,
+        progress: { resourcesSpent: 0, mineralsSpent: { ironium: 0, boranium: 0, germanium: 0 } },
+      }],
+    });
+    render(
+      <Wrapper
+        planets={[planet]}
+        initialPlanetId="p1"
+        replaceCommands={replaceCommands}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: /remove factory/i }));
+    expect(replaceCommands).toHaveBeenCalledWith(
+      { kind: "planet", id: "p1" },
+      expect.any(Array),
+    );
+  });
+});
diff --git a/frontend/src/components/panels/ProductionWorkspace.tsx b/frontend/src/components/panels/ProductionWorkspace.tsx
new file mode 100644
index 00000000..861bd58a
--- /dev/null
+++ b/frontend/src/components/panels/ProductionWorkspace.tsx
@@ -0,0 +1,525 @@
+import { useMemo, useState } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical, Minus, Plus, X, ChevronUp, ChevronDown } from "lucide-react";
+import type { PlayerPlanet, PlayerProductionQueueItem, ProductionItemType, StarbaseType } from "../../types";
+import type { DesignSummary } from "../../types/designer";
+import { useGameCommands } from "../../hooks/useGameCommands";
+import { buildPlanetScopeCommands } from "../../lib/productionQueueCommands";
+import { createDraftProductionQueueItem, describeQueueItem } from "../../lib/productionSummary";
+import { Button } from "../ui/Button";
+import { MutedText } from "../ui/MutedText";
+import { SectionLabel } from "../ui/SectionLabel";
+import { PlanetList } from "./PlanetList";
+import { BuildPalette } from "./BuildPalette";
+import {
+  nameColumn,
+  populationColumn,
+  resourcesColumn,
+  minesColumn,
+  factoriesColumn,
+  queueHeadColumn,
+  queueLengthColumn,
+} from "./planetListColumns";
+import type { PlanetListFilter } from "./PlanetList";
+
+// ---------------------------------------------------------------------------
+// Sortable queue row
+// ---------------------------------------------------------------------------
+
+interface QueueRowProps {
+  item: PlayerProductionQueueItem;
+  shipDesigns: DesignSummary[];
+  onIncrease: () => void;
+  onDecrease: () => void;
+  onRemove: () => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  isFirst: boolean;
+  isLast: boolean;
+}
+
+function SortableQueueRow({
+  item,
+  shipDesigns,
+  onIncrease,
+  onDecrease,
+  onRemove,
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast,
+}: QueueRowProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: item.id,
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const label = describeQueueItem(item, shipDesigns);
+  const isSingle = item.itemType === "planetary_scanner";
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1.5 rounded-md border border-[var(--color-panel-border)] bg-black/10 px-2 py-1.5 text-sm"
+    >
+      {/* drag handle */}
+      <button
+        type="button"
+        className="cursor-grab touch-none text-muted-foreground hover:text-foreground active:cursor-grabbing"
+        aria-label={`Drag to reorder ${label}`}
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical className="h-3.5 w-3.5" />
+      </button>
+
+      {/* label + progress */}
+      <div className="min-w-0">
+        <div className="truncate font-medium text-foreground">{label}</div>
+        <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+          <span>{item.quantity}×</span>
+          {item.progress.resourcesSpent > 0 && (
+            <span>res {item.progress.resourcesSpent}/{/* cost not known client-side */}…</span>
+          )}
+        </div>
+      </div>
+
+      {/* controls */}
+      <div className="flex items-center gap-0.5">
+        <Button
+          size="icon"
+          variant="ghost"
+          aria-label={`Move ${label} up`}
+          disabled={isFirst}
+          onClick={onMoveUp}
+        >
+          <ChevronUp className="h-3 w-3" />
+        </Button>
+        <Button
+          size="icon"
+          variant="ghost"
+          aria-label={`Move ${label} down`}
+          disabled={isLast}
+          onClick={onMoveDown}
+        >
+          <ChevronDown className="h-3 w-3" />
+        </Button>
+        <Button
+          size="icon"
+          variant="ghost"
+          aria-label={`Increase ${label} quantity`}
+          disabled={isSingle}
+          onClick={onIncrease}
+        >
+          <Plus className="h-3 w-3" />
+        </Button>
+        <Button
+          size="icon"
+          variant="ghost"
+          aria-label={`Decrease ${label} quantity`}
+          onClick={onDecrease}
+        >
+          <Minus className="h-3 w-3" />
+        </Button>
+        <Button
+          size="icon"
+          variant="dangerGhost"
+          aria-label={`Remove ${label}`}
+          onClick={onRemove}
+        >
+          <X className="h-3 w-3" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Starbase label helper (used in summary)
+// ---------------------------------------------------------------------------
+
+function starbaseLabel(planet: PlayerPlanet): string {
+  if (!planet.starbase) return "None";
+  const sb = planet.starbase as { type?: string; canBuildShips?: boolean };
+  if (sb.canBuildShips) return "Dock (+ships)";
+  return "Dock";
+}
+
+// ---------------------------------------------------------------------------
+// Centre pane
+// ---------------------------------------------------------------------------
+
+interface CentrePaneProps {
+  planet: PlayerPlanet;
+  queue: PlayerProductionQueueItem[];
+  baseQueue: PlayerProductionQueueItem[];
+  baseContributeOnly: boolean | null | undefined;
+  shipDesigns: DesignSummary[];
+  onShowOnMap: () => void;
+}
+
+function CentrePane({
+  planet,
+  queue,
+  baseQueue,
+  baseContributeOnly,
+  shipDesigns,
+  onShowOnMap,
+}: CentrePaneProps) {
+  const { replaceCommands } = useGameCommands();
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const commit = (nextQueue: PlayerProductionQueueItem[]) => {
+    replaceCommands(
+      { kind: "planet", id: planet.id },
+      buildPlanetScopeCommands(
+        planet.id,
+        baseQueue,
+        nextQueue,
+        baseContributeOnly,
+        planet.contributeOnlyLeftoverToResearch,
+      ),
+    );
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIdx = queue.findIndex((i) => i.id === active.id);
+    const newIdx = queue.findIndex((i) => i.id === over.id);
+    if (oldIdx === -1 || newIdx === -1) return;
+    commit(arrayMove(queue, oldIdx, newIdx));
+  };
+
+  const handleMove = (idx: number, delta: -1 | 1) => {
+    const targetIdx = idx + delta;
+    if (targetIdx < 0 || targetIdx >= queue.length) return;
+    commit(arrayMove(queue, idx, targetIdx));
+  };
+
+  const handleAdjust = (idx: number, delta: -1 | 1) => {
+    const item = queue[idx];
+    const qty = item.quantity + delta;
+    if (qty <= 0) {
+      commit(queue.filter((_, i) => i !== idx));
+    } else {
+      commit(queue.map((i, n) => (n === idx ? { ...i, quantity: qty } : i)));
+    }
+  };
+
+  const handleRemove = (idx: number) => {
+    commit(queue.filter((_, i) => i !== idx));
+  };
+
+  const handleClearQueue = () => {
+    commit([]);
+  };
+
+  const minerals = planet.minerals;
+  const queueStatus =
+    queue.length === 0
+      ? "Idle"
+      : `Building (${queue[0].quantity} remaining)`;
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      {/* header */}
+      <div className="flex items-center justify-between border-b border-[var(--color-panel-border)] px-3 py-2">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-foreground">{planet.name}</span>
+          <span className="rounded border border-[var(--color-panel-border)] px-1.5 py-0.5 text-[10px] uppercase tracking-widest text-muted-foreground">
+            detailed
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={onShowOnMap}
+          className="text-xs text-[var(--color-player-self)] hover:underline"
+        >
+          Show on map →
+        </button>
+      </div>
+
+      {/* summary */}
+      <div className="border-b border-[var(--color-panel-border)] px-3 py-2 text-xs space-y-0.5">
+        <div>
+          <MutedText>Res/turn:</MutedText>{" "}
+          <span className="text-foreground">
+            {planet.resources ?? "—"}
+            {planet.contributeOnlyLeftoverToResearch ? " (leftover only)" : ""}
+          </span>
+        </div>
+        <div>
+          <MutedText>Mines / Factories:</MutedText>{" "}
+          <span className="text-foreground">
+            {planet.mines ?? "—"} / {planet.factories ?? "—"}
+          </span>
+        </div>
+        <div>
+          <MutedText>Starbase:</MutedText>{" "}
+          <span className="text-foreground">{starbaseLabel(planet)}</span>
+        </div>
+        {minerals && (
+          <div>
+            <MutedText>Minerals:</MutedText>{" "}
+            <span className="text-foreground">
+              {minerals.ironium} / {minerals.boranium} / {minerals.germanium}
+            </span>
+          </div>
+        )}
+        <div>
+          <MutedText>Status:</MutedText>{" "}
+          <span className="text-foreground">{queueStatus}</span>
+        </div>
+      </div>
+
+      {/* queue editor */}
+      <div className="flex-1 overflow-y-auto px-3 py-2 space-y-2">
+        <div className="flex items-center justify-between">
+          <SectionLabel>Production Queue</SectionLabel>
+          <Button
+            size="icon"
+            variant="dangerGhost"
+            aria-label="Clear queue"
+            disabled={queue.length === 0}
+            onClick={handleClearQueue}
+          >
+            <X className="h-3 w-3" />
+          </Button>
+        </div>
+
+        {queue.length === 0 ? (
+          <div className="rounded-md border border-dashed border-[var(--color-panel-border)] px-3 py-4 text-center text-xs text-muted-foreground">
+            Queue empty. Add items from the palette →
+          </div>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext items={queue.map((i) => i.id)} strategy={verticalListSortingStrategy}>
+              <div className="space-y-1.5">
+                {queue.map((item, idx) => (
+                  <SortableQueueRow
+                    key={item.id}
+                    item={item}
+                    shipDesigns={shipDesigns}
+                    isFirst={idx === 0}
+                    isLast={idx === queue.length - 1}
+                    onMoveUp={() => handleMove(idx, -1)}
+                    onMoveDown={() => handleMove(idx, 1)}
+                    onIncrease={() => handleAdjust(idx, 1)}
+                    onDecrease={() => handleAdjust(idx, -1)}
+                    onRemove={() => handleRemove(idx)}
+                  />
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ProductionWorkspace
+// ---------------------------------------------------------------------------
+
+export interface ProductionWorkspaceProps {
+  ownedPlanets: PlayerPlanet[];
+  currentPlayer: string;
+  shipDesigns: DesignSummary[];
+  initialPlanetId: string | null;
+  onShowOnMap: (planetId: string) => void;
+}
+
+const INITIAL_FILTER: PlanetListFilter = {
+  search: "",
+  toggles: [
+    { id: "empty_queue", label: "Empty queue", active: false },
+    { id: "has_starbase", label: "Has starbase", active: false },
+    { id: "can_build_ships", label: "Can build ships", active: false },
+  ],
+  onChange: () => undefined,
+};
+
+export function ProductionWorkspace({
+  ownedPlanets,
+  shipDesigns,
+  initialPlanetId,
+  onShowOnMap,
+}: ProductionWorkspaceProps) {
+  const { basePlayerState, replaceCommands } = useGameCommands();
+
+  const sortedOwnedPlanets = useMemo(
+    () => [...ownedPlanets].sort((a, b) => a.name.localeCompare(b.name)),
+    [ownedPlanets],
+  );
+
+  const [selectedPlanetId, setSelectedPlanetId] = useState<string | null>(
+    () => initialPlanetId ?? sortedOwnedPlanets[0]?.id ?? null,
+  );
+
+  const [filter, setFilter] = useState<PlanetListFilter>({
+    ...INITIAL_FILTER,
+    onChange: (next) => setFilter((prev) => ({ ...next, onChange: prev.onChange })),
+  });
+
+  // Apply toggle predicates upstream
+  const filteredPlanets = useMemo(() => {
+    const emptyQueue = filter.toggles.find((t) => t.id === "empty_queue")?.active ?? false;
+    const hasStarbase = filter.toggles.find((t) => t.id === "has_starbase")?.active ?? false;
+    const canBuildShips = filter.toggles.find((t) => t.id === "can_build_ships")?.active ?? false;
+    return sortedOwnedPlanets.filter((p) => {
+      if (emptyQueue && (p.productionQueue?.length ?? 0) > 0) return false;
+      if (hasStarbase && !p.starbase) return false;
+      if (canBuildShips) {
+        const sb = p.starbase as { canBuildShips?: boolean } | null | undefined;
+        if (!sb?.canBuildShips) return false;
+      }
+      return true;
+    });
+  }, [sortedOwnedPlanets, filter.toggles]);
+
+  const selectedPlanet = useMemo(
+    () => ownedPlanets.find((p) => p.id === selectedPlanetId) ?? null,
+    [ownedPlanets, selectedPlanetId],
+  );
+
+  const baseQueue = useMemo(
+    () =>
+      basePlayerState?.planets.find((p) => p.id === selectedPlanetId)?.productionQueue ?? [],
+    [basePlayerState, selectedPlanetId],
+  );
+
+  const baseContributeOnly = useMemo(
+    () =>
+      basePlayerState?.planets.find((p) => p.id === selectedPlanetId)
+        ?.contributeOnlyLeftoverToResearch ?? null,
+    [basePlayerState, selectedPlanetId],
+  );
+
+  const queue = selectedPlanet?.productionQueue ?? [];
+
+  const columns = useMemo(
+    () => [
+      nameColumn,
+      populationColumn,
+      resourcesColumn,
+      minesColumn,
+      factoriesColumn,
+      queueHeadColumn(shipDesigns),
+      queueLengthColumn,
+    ],
+    [shipDesigns],
+  );
+
+  const handleAddToQueue = (
+    itemType: ProductionItemType,
+    designId?: string,
+    targetType?: StarbaseType,
+    quantity = 1,
+  ) => {
+    if (!selectedPlanet) return;
+    const newItems = Array.from({ length: quantity }, () =>
+      createDraftProductionQueueItem(itemType, targetType ?? null, designId ?? null),
+    );
+    // Collapse multiple identical new items into one with summed quantity
+    const merged = newItems[0] ? { ...newItems[0], quantity } : null;
+    if (!merged) return;
+    const nextQueue = [...queue, merged];
+    replaceCommands(
+      { kind: "planet", id: selectedPlanet.id },
+      buildPlanetScopeCommands(
+        selectedPlanet.id,
+        baseQueue,
+        nextQueue,
+        baseContributeOnly,
+        selectedPlanet.contributeOnlyLeftoverToResearch,
+      ),
+    );
+  };
+
+  const emptyMessage = (
+    <div className="text-xs text-muted-foreground">Colonise a planet to start producing.</div>
+  );
+
+  return (
+    <div
+      className="flex h-full overflow-hidden"
+      style={{ display: "grid", gridTemplateColumns: "22% 1fr 30%" }}
+    >
+      {/* Left: planet list */}
+      <div className="overflow-hidden border-r border-[var(--color-panel-border)]" data-testid="planet-list-pane">
+        {ownedPlanets.length === 0 ? (
+          <div className="flex h-full items-center justify-center p-4">{emptyMessage}</div>
+        ) : (
+          <PlanetList
+            planets={filteredPlanets}
+            selectedPlanetId={selectedPlanetId}
+            onSelectPlanet={setSelectedPlanetId}
+            columns={columns}
+            filter={filter}
+          />
+        )}
+      </div>
+
+      {/* Centre: planet detail + queue */}
+      <div className="overflow-hidden border-r border-[var(--color-panel-border)]" data-testid="centre-pane">
+        {selectedPlanet == null ? (
+          <div className="flex h-full items-center justify-center p-4">{emptyMessage}</div>
+        ) : (
+          <CentrePane
+            planet={selectedPlanet}
+            queue={queue}
+            baseQueue={baseQueue}
+            baseContributeOnly={baseContributeOnly}
+            shipDesigns={shipDesigns}
+            onShowOnMap={() => onShowOnMap(selectedPlanet.id)}
+          />
+        )}
+      </div>
+
+      {/* Right: build palette */}
+      <div className="overflow-hidden" data-testid="palette-pane">
+        {selectedPlanet == null ? (
+          <div className="flex h-full items-center justify-center p-4">{emptyMessage}</div>
+        ) : (
+          <BuildPalette
+            planet={selectedPlanet}
+            queue={queue}
+            shipDesigns={shipDesigns}
+            onAdd={handleAddToQueue}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/panels/TopBar.test.tsx b/frontend/src/components/panels/TopBar.test.tsx
index 617f7f4a..6aee5a48 100644
--- a/frontend/src/components/panels/TopBar.test.tsx
+++ b/frontend/src/components/panels/TopBar.test.tsx
@@ -37,7 +37,8 @@ const baseResearch: PlayerStateResearch = {
 function renderTopBar(
   research: PlayerStateResearch | null,
   onModeChange = vi.fn(),
-  mode: "command" | "designer" | "research" = "command",
+  mode: "command" | "production" | "designer" | "research" = "command",
+  extra: { productionEnabled?: boolean; raceSelectionActive?: boolean } = {},
 ) {
   return render(
     <TopBar
@@ -56,6 +57,8 @@ function renderTopBar(
       playerName="tim"
       error={null}
       research={research}
+      productionEnabled={extra.productionEnabled ?? true}
+      raceSelectionActive={extra.raceSelectionActive ?? false}
     />,
   );
 }
@@ -106,4 +109,42 @@ describe("TopBar", () => {
     expect(screen.getByRole("button", { name: "Research" })).toHaveClass("text-white");
     expect(screen.getByRole("button", { name: "Command" })).toHaveClass("text-muted-foreground");
   });
+
+  it("renders Production tab between Command and Designer", () => {
+    renderTopBar(null);
+    const buttons = screen.getAllByRole("button");
+    const names = buttons.map((b) => b.textContent);
+    const cmdIdx = names.indexOf("Command");
+    const prodIdx = names.indexOf("Production");
+    const desIdx = names.indexOf("Designer");
+    expect(prodIdx).toBeGreaterThan(cmdIdx);
+    expect(prodIdx).toBeLessThan(desIdx);
+  });
+
+  it("clicking Production tab calls onModeChange('production')", () => {
+    const onModeChange = vi.fn();
+    renderTopBar(null, onModeChange);
+    fireEvent.click(screen.getByRole("button", { name: "Production" }));
+    expect(onModeChange).toHaveBeenCalledWith("production");
+  });
+
+  it("Production tab is disabled when productionEnabled is false", () => {
+    const onModeChange = vi.fn();
+    renderTopBar(null, onModeChange, "command", { productionEnabled: false });
+    const btn = screen.getByRole("button", { name: "Production" });
+    expect(btn).toBeDisabled();
+    fireEvent.click(btn);
+    expect(onModeChange).not.toHaveBeenCalled();
+  });
+
+  it("Production tab shows primary variant when mode is production", () => {
+    renderTopBar(null, vi.fn(), "production");
+    expect(screen.getByRole("button", { name: "Production" })).toHaveClass("text-white");
+    expect(screen.getByRole("button", { name: "Command" })).toHaveClass("text-muted-foreground");
+  });
+
+  it("hides Production tab during race selection", () => {
+    renderTopBar(null, vi.fn(), "command", { raceSelectionActive: true });
+    expect(screen.queryByRole("button", { name: "Production" })).not.toBeInTheDocument();
+  });
 });
diff --git a/frontend/src/components/panels/TopBar.tsx b/frontend/src/components/panels/TopBar.tsx
index fafb8f4b..ba1b13f7 100644
--- a/frontend/src/components/panels/TopBar.tsx
+++ b/frontend/src/components/panels/TopBar.tsx
@@ -8,9 +8,10 @@ interface TopBarProps {
   isDirty: boolean;
   submitted: boolean;
   waitingForNextTurn: boolean;
-  mode: "command" | "designer" | "research";
-  onModeChange: (mode: "command" | "designer" | "research") => void;
+  mode: "command" | "production" | "designer" | "research";
+  onModeChange: (mode: "command" | "production" | "designer" | "research") => void;
   raceSelectionActive?: boolean;
+  productionEnabled?: boolean;
   onSubmit: () => void;
   submissionStatus: string;
   allSubmitted: boolean;
@@ -32,6 +33,7 @@ export function TopBar({
   mode,
   onModeChange,
   raceSelectionActive = false,
+  productionEnabled = true,
   onSubmit,
   submissionStatus,
   allSubmitted,
@@ -76,6 +78,15 @@ export function TopBar({
               >
                 {isDirty ? "Command*" : "Command"}
               </Button>
+              <Button
+                variant={mode === "production" ? "primary" : "ghost"}
+                size="xs"
+                disabled={!productionEnabled}
+                title={!productionEnabled ? "No owned planets yet" : undefined}
+                onClick={() => { if (productionEnabled) onModeChange("production"); }}
+              >
+                Production
+              </Button>
               <Button
                 variant={mode === "designer" ? "primary" : "ghost"}
                 size="xs"
diff --git a/frontend/src/components/panels/planetListColumns.test.ts b/frontend/src/components/panels/planetListColumns.test.ts
new file mode 100644
index 00000000..968414d1
--- /dev/null
+++ b/frontend/src/components/panels/planetListColumns.test.ts
@@ -0,0 +1,117 @@
+import { describe, it, expect } from "vitest";
+import {
+  queueHeadColumn,
+  starbaseColumn,
+  ownerColumn,
+  resourcesColumn,
+} from "./planetListColumns";
+import type { PlayerPlanet } from "../../types";
+import type { DesignSummary } from "../../types/designer";
+
+function makePlanet(overrides: Partial<PlayerPlanet> = {}): PlayerPlanet {
+  return {
+    id: "p1",
+    name: "Earth",
+    x: 0,
+    y: 0,
+    scanLevel: "detailed",
+    scanAge: 0,
+    owner: "tim",
+    ...overrides,
+  };
+}
+
+function makeQueueItem(
+  itemType: "mine" | "factory" | "ship" | "planetary_scanner" | "starbase",
+  designId?: string,
+) {
+  return {
+    id: "qi1",
+    itemType,
+    quantity: 1,
+    designId: designId ?? null,
+    progress: { resourcesSpent: 0, mineralsSpent: { ironium: 0, boranium: 0, germanium: 0 } },
+  };
+}
+
+const designs: DesignSummary[] = [
+  {
+    id: "d1",
+    name: "Scout",
+    hull: "scout",
+    fuelCapacity: 100,
+    cost: { resources: 40, minerals: { ironium: 0, boranium: 0, germanium: 0 } },
+  },
+];
+
+describe("queueHeadColumn", () => {
+  it("returns null sortValue for an empty queue", () => {
+    const col = queueHeadColumn(designs);
+    expect(col.sortValue!(makePlanet({ productionQueue: [] }))).toBeNull();
+  });
+
+  it("returns null sortValue for null productionQueue", () => {
+    const col = queueHeadColumn(designs);
+    expect(col.sortValue!(makePlanet({ productionQueue: null }))).toBeNull();
+  });
+
+  it("returns the friendly label for a non-ship queue head", () => {
+    const col = queueHeadColumn(designs);
+    const p = makePlanet({ productionQueue: [makeQueueItem("mine")] });
+    expect(col.sortValue!(p)).toBe("Mine");
+    expect(col.render(p)).toBe("Mine");
+  });
+
+  it("returns the design name for a ship queue head", () => {
+    const col = queueHeadColumn(designs);
+    const p = makePlanet({ productionQueue: [makeQueueItem("ship", "d1")] });
+    expect(col.render(p)).toBe("Scout");
+  });
+});
+
+describe("starbaseColumn", () => {
+  it("renders None for a planet with no starbase", () => {
+    expect(starbaseColumn.render(makePlanet({ starbase: null }))).toBe("None");
+  });
+
+  it("renders Dock for a starbase that cannot build ships", () => {
+    const p = makePlanet({ starbase: { type: "orbital_fort", canBuildShips: false } });
+    expect(starbaseColumn.render(p)).toBe("Dock");
+  });
+
+  it("renders Dock (+ships) for a starbase that can build ships", () => {
+    const p = makePlanet({ starbase: { type: "space_station", canBuildShips: true } });
+    expect(starbaseColumn.render(p)).toBe("Dock (+ships)");
+  });
+
+  it("sortValue ranks None < Dock < Dock(+ships)", () => {
+    const none = makePlanet({ starbase: null });
+    const dock = makePlanet({ starbase: { type: "orbital_fort", canBuildShips: false } });
+    const shipDock = makePlanet({ starbase: { type: "space_station", canBuildShips: true } });
+    expect(starbaseColumn.sortValue!(none)).toBe(0);
+    expect(starbaseColumn.sortValue!(dock)).toBe(1);
+    expect(starbaseColumn.sortValue!(shipDock)).toBe(2);
+  });
+});
+
+describe("ownerColumn", () => {
+  it("sortValue for current player sorts before any other username", () => {
+    const col = ownerColumn("tim");
+    const own = makePlanet({ owner: "tim" });
+    const other = makePlanet({ owner: "alice" });
+    const ownVal = col.sortValue!(own) as string;
+    const otherVal = col.sortValue!(other) as string;
+    expect(ownVal < otherVal).toBe(true);
+  });
+});
+
+describe("resourcesColumn", () => {
+  it("renders — for a planet with no resources field", () => {
+    expect(resourcesColumn.render(makePlanet({ resources: null }))).toBe("—");
+    expect(resourcesColumn.render(makePlanet({ resources: undefined }))).toBe("—");
+  });
+
+  it("renders the numeric value otherwise", () => {
+    expect(resourcesColumn.render(makePlanet({ resources: 412 }))).toBe("412");
+  });
+});
diff --git a/frontend/src/components/panels/planetListColumns.ts b/frontend/src/components/panels/planetListColumns.ts
new file mode 100644
index 00000000..1cda8a2b
--- /dev/null
+++ b/frontend/src/components/panels/planetListColumns.ts
@@ -0,0 +1,128 @@
+import type { ReactNode } from "react";
+import type { PlayerPlanet, PlayerPlanetStarbaseState } from "../../types";
+import type { PlanetListColumn } from "./PlanetList";
+import { describeQueueItem, PRODUCTION_ITEM_LABELS } from "../../lib/productionSummary";
+import type { DesignSummary } from "../../types/designer";
+
+function starbaseLabel(planet: PlayerPlanet): string {
+  if (!planet.starbase) return "None";
+  const sb = planet.starbase;
+  // Full state (own planet)
+  if ("canBuildShips" in sb && sb.canBuildShips != null) {
+    return (sb as PlayerPlanetStarbaseState).canBuildShips ? "Dock (+ships)" : "Dock";
+  }
+  return "Dock";
+}
+
+function starbaseRank(planet: PlayerPlanet): number {
+  if (!planet.starbase) return 0;
+  const sb = planet.starbase;
+  if ("canBuildShips" in sb && (sb as PlayerPlanetStarbaseState).canBuildShips) return 2;
+  return 1;
+}
+
+export const nameColumn: PlanetListColumn = {
+  id: "name",
+  header: "Name",
+  sortable: true,
+  sortValue: (p) => p.name,
+  render: (p) => p.name,
+};
+
+export function ownerColumn(currentPlayer: string): PlanetListColumn {
+  return {
+    id: "owner",
+    header: "Owner",
+    sortable: true,
+    sortValue: (p) => {
+      if (p.owner === currentPlayer) return "\x00"; // sorts before any letter
+      return p.owner ?? "Uncolonised";
+    },
+    render: (p): ReactNode => {
+      if (p.owner === currentPlayer) return "You";
+      return p.owner ?? "Uncolonised";
+    },
+  };
+}
+
+export const populationColumn: PlanetListColumn = {
+  id: "population",
+  header: "Pop",
+  align: "right",
+  sortable: true,
+  sortValue: (p) => p.population ?? null,
+  render: (p) => (p.population != null ? p.population.toLocaleString() : "—"),
+};
+
+export const resourcesColumn: PlanetListColumn = {
+  id: "resources",
+  header: "Res/turn",
+  align: "right",
+  sortable: true,
+  sortValue: (p) => p.resources ?? null,
+  render: (p) => (p.resources != null ? String(p.resources) : "—"),
+};
+
+export const minesColumn: PlanetListColumn = {
+  id: "mines",
+  header: "Mines",
+  align: "right",
+  sortable: true,
+  sortValue: (p) => p.mines ?? null,
+  render: (p) => (p.mines != null ? String(p.mines) : "—"),
+};
+
+export const factoriesColumn: PlanetListColumn = {
+  id: "factories",
+  header: "Factories",
+  align: "right",
+  sortable: true,
+  sortValue: (p) => p.factories ?? null,
+  render: (p) => (p.factories != null ? String(p.factories) : "—"),
+};
+
+export const starbaseColumn: PlanetListColumn = {
+  id: "starbase",
+  header: "Starbase",
+  sortable: true,
+  sortValue: (p) => starbaseRank(p),
+  render: (p) => starbaseLabel(p),
+};
+
+export function queueHeadColumn(shipDesigns: DesignSummary[]): PlanetListColumn {
+  return {
+    id: "queue_head",
+    header: "Building",
+    sortable: true,
+    sortValue: (p) => {
+      const q = p.productionQueue;
+      if (!q || q.length === 0) return null;
+      return describeQueueItem(q[0], shipDesigns);
+    },
+    render: (p): ReactNode => {
+      const q = p.productionQueue;
+      if (!q || q.length === 0) return "—";
+      return describeQueueItem(q[0], shipDesigns);
+    },
+  };
+}
+
+export const queueLengthColumn: PlanetListColumn = {
+  id: "queue_length",
+  header: "Q",
+  align: "right",
+  sortable: true,
+  sortValue: (p) => p.productionQueue?.length ?? 0,
+  render: (p) => String(p.productionQueue?.length ?? 0),
+};
+
+export const scannerColumn: PlanetListColumn = {
+  id: "scanner",
+  header: "Scanner",
+  sortable: true,
+  sortValue: (p) => (p.scanner?.installed ? 1 : 0),
+  render: (p) => (p.scanner?.installed ? "Yes" : "—"),
+};
+
+// Re-export for convenience in tests that want the full label map
+export { PRODUCTION_ITEM_LABELS };
diff --git a/frontend/src/lib/productionSummary.test.ts b/frontend/src/lib/productionSummary.test.ts
new file mode 100644
index 00000000..c89a77b0
--- /dev/null
+++ b/frontend/src/lib/productionSummary.test.ts
@@ -0,0 +1,73 @@
+import { describe, it, expect } from "vitest";
+import { describeQueueItem, summariseQueue } from "./productionSummary";
+import type { PlayerProductionQueueItem } from "../types";
+import type { DesignSummary } from "../types/designer";
+
+const makeItem = (
+  itemType: PlayerProductionQueueItem["itemType"],
+  quantity = 1,
+  designId?: string,
+): PlayerProductionQueueItem => ({
+  id: `item-${itemType}`,
+  itemType,
+  quantity,
+  designId: designId ?? null,
+  progress: { resourcesSpent: 0, mineralsSpent: { ironium: 0, boranium: 0, germanium: 0 } },
+});
+
+const designs: DesignSummary[] = [
+  {
+    id: "design-1",
+    name: "Scout",
+    hull: "scout",
+    fuelCapacity: 100,
+    cost: { resources: 40, minerals: { ironium: 0, boranium: 0, germanium: 0 } },
+  },
+];
+
+describe("describeQueueItem", () => {
+  it("returns the design name for a ship item", () => {
+    expect(describeQueueItem(makeItem("ship", 1, "design-1"), designs)).toBe("Scout");
+  });
+
+  it("returns friendly label for non-ship items", () => {
+    expect(describeQueueItem(makeItem("mine"), designs)).toBe("Mine");
+    expect(describeQueueItem(makeItem("factory"), designs)).toBe("Factory");
+    expect(describeQueueItem(makeItem("planetary_scanner"), designs)).toBe("Planetary Scanner");
+  });
+
+  it("falls back to 'Ship' for unknown design id", () => {
+    expect(describeQueueItem(makeItem("ship", 1, "unknown"), designs)).toBe("Ship");
+  });
+});
+
+describe("summariseQueue", () => {
+  it("returns 'Queue: empty' for an empty queue", () => {
+    expect(summariseQueue([], designs)).toBe("Queue: empty");
+  });
+
+  it("returns single-item summary", () => {
+    expect(summariseQueue([makeItem("mine", 3)], designs)).toBe("Queue: 3× Mine");
+  });
+
+  it("returns two-item summary", () => {
+    expect(summariseQueue([makeItem("factory", 5), makeItem("mine", 2)], designs)).toBe(
+      "Queue: 5× Factory, 2× Mine",
+    );
+  });
+
+  it("returns three-item summary with +N more", () => {
+    const queue = [makeItem("factory", 5), makeItem("mine", 2), makeItem("planetary_scanner", 1)];
+    expect(summariseQueue(queue, designs)).toBe("Queue: 5× Factory, 2× Mine, +1 more");
+  });
+
+  it("counts all items beyond two in +N more", () => {
+    const queue = [
+      makeItem("factory", 1),
+      makeItem("mine", 1),
+      makeItem("planetary_scanner", 1),
+      makeItem("ship", 1, "design-1"),
+    ];
+    expect(summariseQueue(queue, designs)).toBe("Queue: 1× Factory, 1× Mine, +2 more");
+  });
+});
diff --git a/frontend/src/lib/productionSummary.ts b/frontend/src/lib/productionSummary.ts
new file mode 100644
index 00000000..c05b4c01
--- /dev/null
+++ b/frontend/src/lib/productionSummary.ts
@@ -0,0 +1,55 @@
+import type { PlayerProductionQueueItem, ProductionItemType, StarbaseType } from "../types";
+import type { DesignSummary } from "../types/designer";
+
+let _draftId = 0;
+
+export function createDraftProductionQueueItem(
+  itemType: ProductionItemType,
+  targetType: StarbaseType | null = null,
+  designId: string | null = null,
+): PlayerProductionQueueItem {
+  _draftId += 1;
+  return {
+    id: `draft-${itemType}-${_draftId}`,
+    itemType,
+    targetType,
+    designId,
+    quantity: 1,
+    progress: { resourcesSpent: 0, mineralsSpent: { ironium: 0, boranium: 0, germanium: 0 } },
+  };
+}
+
+export const PRODUCTION_ITEM_LABELS: Record<ProductionItemType, string> = {
+  mine: "Mine",
+  factory: "Factory",
+  starbase: "Starbase",
+  ship: "Ship",
+  planetary_scanner: "Planetary Scanner",
+};
+
+export function describeQueueItem(
+  item: PlayerProductionQueueItem,
+  shipDesigns: DesignSummary[],
+): string {
+  if (item.itemType === "ship") {
+    return shipDesigns.find((d) => d.id === item.designId)?.name ?? "Ship";
+  }
+  return PRODUCTION_ITEM_LABELS[item.itemType];
+}
+
+export function summariseQueue(
+  queue: PlayerProductionQueueItem[],
+  shipDesigns: DesignSummary[],
+): string {
+  if (queue.length === 0) return "Queue: empty";
+
+  const label = (item: PlayerProductionQueueItem) => describeQueueItem(item, shipDesigns);
+
+  if (queue.length === 1) {
+    return `Queue: ${queue[0].quantity}× ${label(queue[0])}`;
+  }
+  if (queue.length === 2) {
+    return `Queue: ${queue[0].quantity}× ${label(queue[0])}, ${queue[1].quantity}× ${label(queue[1])}`;
+  }
+  return `Queue: ${queue[0].quantity}× ${label(queue[0])}, ${queue[1].quantity}× ${label(queue[1])}, +${queue.length - 2} more`;
+}
diff --git a/tasks/2026-05-17-production-view.md b/tasks/2026-05-17-production-view.md
index a43fed4b..aefc95a7 100644
--- a/tasks/2026-05-17-production-view.md
+++ b/tasks/2026-05-17-production-view.md
@@ -14,27 +14,27 @@ New module: `frontend/src/components/panels/PlanetList.tsx`.
 
 Implement the component API from [PRD 67](docs/prd/67-ui-planet-list.md):
 
-- [ ] Define and export `PlanetListColumn`, `PlanetListFilter`, and `PlanetListProps` types matching the PRD.
-- [ ] Implement controlled selection via `selectedPlanetId` + `onSelectPlanet`. The component never owns selection state.
-- [ ] Implement local sort state (active column id + direction). Default sort `name` ascending. Three-click cycle: asc → desc → cleared (returns to default).
-- [ ] Null-sort rule: nulls sort last regardless of direction.
-- [ ] Render the filter row when `filter` is provided: a search input bound to `filter.search` plus a toggle pill per `filter.toggles[]` entry. All changes call `filter.onChange(next)`. The component does **not** apply toggle predicates — it only renders the controls; the consumer supplies an already-filtered `planets` array. Search-by-name *is* applied inside the component (case-insensitive substring on `planet.name`).
-- [ ] Empty states:
+- [x] Define and export `PlanetListColumn`, `PlanetListFilter`, and `PlanetListProps` types matching the PRD.
+- [x] Implement controlled selection via `selectedPlanetId` + `onSelectPlanet`. The component never owns selection state.
+- [x] Implement local sort state (active column id + direction). Default sort `name` ascending. Three-click cycle: asc → desc → cleared (returns to default).
+- [x] Null-sort rule: nulls sort last regardless of direction.
+- [x] Render the filter row when `filter` is provided: a search input bound to `filter.search` plus a toggle pill per `filter.toggles[]` entry. All changes call `filter.onChange(next)`. The component does **not** apply toggle predicates — it only renders the controls; the consumer supplies an already-filtered `planets` array. Search-by-name *is* applied inside the component (case-insensitive substring on `planet.name`).
+- [x] Empty states:
   - `planets` empty → render the consumer-provided `emptyState`, or fall back to `"No planets to show."`.
   - Filtered set empty (search excludes all rows) → render `"No planets match the current filter."` + a `Clear filter` button that calls `filter.onChange` with `search: ""` and all toggles `active: false`.
-- [ ] Selected row gets a left accent border using `--color-player-self` and a raised surface background.
-- [ ] Sortable column headers show an arrow indicator on the active sort column and expose `aria-sort`.
+- [x] Selected row gets a left accent border using `--color-player-self` and a raised surface background.
+- [x] Sortable column headers show an arrow indicator on the active sort column and expose `aria-sort`.
 
 Unit tests in this step (`frontend/src/components/panels/PlanetList.test.tsx`):
 
-- [ ] Renders one row per supplied planet, in default-sorted order (by name).
-- [ ] Clicking a row calls `onSelectPlanet(row.id)`.
-- [ ] Selected row carries `aria-selected="true"` and the accent class.
-- [ ] Clicking a sortable header sorts ascending; clicking again sorts descending; clicking a third time returns to default sort.
-- [ ] Null `sortValue`s appear last regardless of direction.
-- [ ] Search input filters case-insensitively against `planet.name`.
-- [ ] Clearing the filter via the empty-state button calls `filter.onChange` with reset values.
-- [ ] Non-sortable columns do not respond to header clicks.
+- [x] Renders one row per supplied planet, in default-sorted order (by name).
+- [x] Clicking a row calls `onSelectPlanet(row.id)`.
+- [x] Selected row carries `aria-selected="true"` and the accent class.
+- [x] Clicking a sortable header sorts ascending; clicking again sorts descending; clicking a third time returns to default sort.
+- [x] Null `sortValue`s appear last regardless of direction.
+- [x] Search input filters case-insensitively against `planet.name`.
+- [x] Clearing the filter via the empty-state button calls `filter.onChange` with reset values.
+- [x] Non-sortable columns do not respond to header clicks.
 
 ---
 
@@ -44,26 +44,26 @@ New module: `frontend/src/components/panels/planetListColumns.ts`.
 
 Export pre-built `PlanetListColumn` descriptors for the default columns enumerated in [PRD 67](docs/prd/67-ui-planet-list.md):
 
-- [ ] `nameColumn` — `planet.name`, locale-aware sort.
-- [ ] `ownerColumn` — display `"You"` for own planets, otherwise `planet.owner` or `"Uncolonised"` for `null`; sort: own first, then by username.
-- [ ] `populationColumn` — `planet.population` (or `null`); numeric desc by default.
-- [ ] `resourcesColumn` — `planet.resources` (or `null`); numeric desc by default. Renders `—` when null.
-- [ ] `minesColumn` — `planet.mines` (or `null`); numeric desc by default.
-- [ ] `factoriesColumn` — `planet.factories` (or `null`); numeric desc by default.
-- [ ] `starbaseColumn` — short capability label (`None`, `Dock`, `Dock (+ships)`); sort: rank by capability (`canBuildShips` > present > absent).
-- [ ] `queueHeadColumn` — first queue item's label (ship design name for `ship`, friendly label otherwise) or `—`; sort by label, nulls last.
-- [ ] `queueLengthColumn` — `planet.productionQueue.length`; numeric desc by default.
-- [ ] `scannerColumn` — `Yes` / `—`; sort: installed first.
+- [x] `nameColumn` — `planet.name`, locale-aware sort.
+- [x] `ownerColumn` — display `"You"` for own planets, otherwise `planet.owner` or `"Uncolonised"` for `null`; sort: own first, then by username.
+- [x] `populationColumn` — `planet.population` (or `null`); numeric desc by default.
+- [x] `resourcesColumn` — `planet.resources` (or `null`); numeric desc by default. Renders `—` when null.
+- [x] `minesColumn` — `planet.mines` (or `null`); numeric desc by default.
+- [x] `factoriesColumn` — `planet.factories` (or `null`); numeric desc by default.
+- [x] `starbaseColumn` — short capability label (`None`, `Dock`, `Dock (+ships)`); sort: rank by capability (`canBuildShips` > present > absent).
+- [x] `queueHeadColumn` — first queue item's label (ship design name for `ship`, friendly label otherwise) or `—`; sort by label, nulls last.
+- [x] `queueLengthColumn` — `planet.productionQueue.length`; numeric desc by default.
+- [x] `scannerColumn` — `Yes` / `—`; sort: installed first.
 
 Friendly labels for queue items reuse the existing `PRODUCTION_ITEM_LABELS` constant from [frontend/src/components/panels/PlanetDetail.tsx](frontend/src/components/panels/PlanetDetail.tsx); move that constant into a shared module if it isn't already exported.
 
 Unit tests in this step (`frontend/src/components/panels/planetListColumns.test.ts`):
 
-- [ ] `queueHeadColumn.sortValue` returns `null` for an empty queue and the friendly label otherwise.
-- [ ] `starbaseColumn` produces the three expected labels for the three states.
-- [ ] `ownerColumn.sortValue` for the current player ranks ahead of any other username.
-- [ ] `resourcesColumn.render` returns `—` for a planet missing `resources`.
-- [ ] Ship-design names flow through `queueHeadColumn.render` for `ship` queue heads.
+- [x] `queueHeadColumn.sortValue` returns `null` for an empty queue and the friendly label otherwise.
+- [x] `starbaseColumn` produces the three expected labels for the three states.
+- [x] `ownerColumn.sortValue` for the current player ranks ahead of any other username.
+- [x] `resourcesColumn.render` returns `—` for a planet missing `resources`.
+- [x] Ship-design names flow through `queueHeadColumn.render` for `ship` queue heads.
 
 ---
 
@@ -71,18 +71,18 @@ Unit tests in this step (`frontend/src/components/panels/planetListColumns.test.
 
 Extend [frontend/src/components/panels/TopBar.tsx](frontend/src/components/panels/TopBar.tsx) to add a `Production` tab.
 
-- [ ] Widen the `mode` prop's discriminated union to include `"production"`. Update `onModeChange` accordingly and propagate the type into [frontend/src/App.tsx](frontend/src/App.tsx).
-- [ ] Render the `Production` button immediately after `Command` (before `Designer`). Active styling matches the existing Command/Designer pattern.
-- [ ] Add a `productionEnabled: boolean` prop. When `false`, render the button visually muted, disabled, and with a `title="No owned planets yet"` tooltip.
-- [ ] No new copy / status badges in the top bar from this tab — workspace details stay inside the workspace.
+- [x] Widen the `mode` prop's discriminated union to include `"production"`. Update `onModeChange` accordingly and propagate the type into [frontend/src/App.tsx](frontend/src/App.tsx).
+- [x] Render the `Production` button immediately after `Command` (before `Designer`). Active styling matches the existing Command/Designer pattern.
+- [x] Add a `productionEnabled: boolean` prop. When `false`, render the button visually muted, disabled, and with a `title="No owned planets yet"` tooltip.
+- [x] No new copy / status badges in the top bar from this tab — workspace details stay inside the workspace.
 
 Unit tests in this step (`frontend/src/components/panels/TopBar.test.tsx`):
 
-- [ ] Production tab renders between Command and Designer.
-- [ ] Clicking the tab calls `onModeChange("production")`.
-- [ ] `productionEnabled={false}` renders the tab disabled and clicking does not call `onModeChange`.
-- [ ] Active mode `"production"` applies the primary variant; other modes apply the ghost variant.
-- [ ] Race-selection mode hides the Production tab (matches existing Command/Designer/Research handling).
+- [x] Production tab renders between Command and Designer.
+- [x] Clicking the tab calls `onModeChange("production")`.
+- [x] `productionEnabled={false}` renders the tab disabled and clicking does not call `onModeChange`.
+- [x] Active mode `"production"` applies the primary variant; other modes apply the ghost variant.
+- [x] Race-selection mode hides the Production tab (matches existing Command/Designer/Research handling).
 
 ---
 
@@ -90,8 +90,8 @@ Unit tests in this step (`frontend/src/components/panels/TopBar.test.tsx`):
 
 New component: `frontend/src/components/panels/ProductionWorkspace.tsx`. In-flow workspace mounted from `App.tsx` when `mode === "production"`. Follows the layout shape established by [DesignsWorkspace](frontend/src/components/panels/DesignsWorkspace.tsx) and [ResearchWorkspace](frontend/src/components/panels/ResearchWorkspace.tsx).
 
-- [ ] Three-pane CSS grid: left 22% / centre 48% / right 30%, full available height, dividers using `--color-panel-border`.
-- [ ] Props:
+- [x] Three-pane CSS grid: left 22% / centre 48% / right 30%, full available height, dividers using `--color-panel-border`.
+- [x] Props:
   - `ownedPlanets: PlayerPlanet[]`
   - `currentPlayer: string`
   - `shipDesigns: ShipDesign[]`
@@ -99,19 +99,19 @@ New component: `frontend/src/components/panels/ProductionWorkspace.tsx`. In-flow
   - `replaceCommands: ReplaceCommands` — the existing planet-scoped helper from `useGameCommands`.
   - `basePlayerState: PlayerState` — used as the diff baseline for `buildPlanetScopeCommands`.
   - `initialPlanetId: string | null` — preselected planet (set by the `Manage production →` entry point); falls back to the first row.
-- [ ] Local state:
+- [x] Local state:
   - `selectedPlanetId: string | null` — initialised from `initialPlanetId ?? ownedPlanets[0]?.id ?? null`.
   - `filter: PlanetListFilter` — `search: ""`, three toggles (`Empty queue`, `Has starbase`, `Can build ships`), all inactive.
-- [ ] Empty-workspace state when `ownedPlanets.length === 0`: render the three-pane chrome with a centred message ("Colonise a planet to start producing.").
-- [ ] No manual Save/Cancel controls — every edit auto-buffers (consistent with the existing planet-scoped command flow).
+- [x] Empty-workspace state when `ownedPlanets.length === 0`: render the three-pane chrome with a centred message ("Colonise a planet to start producing.").
+- [x] No manual Save/Cancel controls — every edit auto-buffers (consistent with the existing planet-scoped command flow).
 
 Unit tests in this step (`frontend/src/components/panels/ProductionWorkspace.test.tsx`):
 
-- [ ] Workspace renders three panes when at least one owned planet is supplied.
-- [ ] On mount, the planet list and centre pane reflect `initialPlanetId` when provided.
-- [ ] When `initialPlanetId` is not provided, the first owned planet (by name) is selected.
-- [ ] When `ownedPlanets` is empty, the empty-workspace message renders and no panes are populated.
-- [ ] Switching planets in the list updates the centre pane without flushing commands.
+- [x] Workspace renders three panes when at least one owned planet is supplied.
+- [x] On mount, the planet list and centre pane reflect `initialPlanetId` when provided.
+- [x] When `initialPlanetId` is not provided, the first owned planet (by name) is selected.
+- [x] When `ownedPlanets` is empty, the empty-workspace message renders and no panes are populated.
+- [x] Switching planets in the list updates the centre pane without flushing commands.
 
 ---
 
@@ -119,21 +119,21 @@ Unit tests in this step (`frontend/src/components/panels/ProductionWorkspace.tes
 
 Inside `ProductionWorkspace`:
 
-- [ ] Mount `<PlanetList>` with the columns from Step 2: `nameColumn`, `populationColumn`, `resourcesColumn`, `minesColumn`, `factoriesColumn`, `queueHeadColumn`, `queueLengthColumn`.
-- [ ] Pass the workspace-local `filter` state and a corresponding `onChange` handler.
-- [ ] Apply the three toggle predicates upstream (i.e. compute `filteredPlanets` in the workspace and pass that to `PlanetList`):
+- [x] Mount `<PlanetList>` with the columns from Step 2: `nameColumn`, `populationColumn`, `resourcesColumn`, `minesColumn`, `factoriesColumn`, `queueHeadColumn`, `queueLengthColumn`.
+- [x] Pass the workspace-local `filter` state and a corresponding `onChange` handler.
+- [x] Apply the three toggle predicates upstream (i.e. compute `filteredPlanets` in the workspace and pass that to `PlanetList`):
   - `Empty queue` → `planet.productionQueue.length === 0`.
   - `Has starbase` → `planet.starbase != null`.
   - `Can build ships` → `planet.starbase?.canBuildShips === true`.
-- [ ] Plus the workspace also applies search (PlanetList does this internally; the workspace does **not** need to apply search itself — it just passes the filter state through).
-- [ ] When toggles change the filtered set such that the currently selected planet is no longer visible, leave the selection alone — selection persists; the centre pane keeps rendering. (Selecting an invisible row is fine; PRD 67 explicitly allows this.)
-- [ ] Pre-select rule on mount: `initialPlanetId` if it appears in `ownedPlanets`; otherwise the first row in the *unfiltered* owned-planets list, sorted by name.
+- [x] Plus the workspace also applies search (PlanetList does this internally; the workspace does **not** need to apply search itself — it just passes the filter state through).
+- [x] When toggles change the filtered set such that the currently selected planet is no longer visible, leave the selection alone — selection persists; the centre pane keeps rendering. (Selecting an invisible row is fine; PRD 67 explicitly allows this.)
+- [x] Pre-select rule on mount: `initialPlanetId` if it appears in `ownedPlanets`; otherwise the first row in the *unfiltered* owned-planets list, sorted by name.
 
 Unit tests in this step:
 
-- [ ] Toggling `Empty queue` filters the rows shown but preserves the current selection.
-- [ ] Search filters the rows shown (case-insensitive name match).
-- [ ] Clearing the filter via the empty-state button resets all toggles and search.
+- [x] Toggling `Empty queue` filters the rows shown but preserves the current selection.
+- [x] Search filters the rows shown (case-insensitive name match).
+- [x] Clearing the filter via the empty-state button resets all toggles and search.
 
 ---
 
@@ -141,22 +141,22 @@ Unit tests in this step:
 
 Inside `ProductionWorkspace`:
 
-- [ ] Render the selected planet's production-focused summary block per [PRD 68 § "Pane 2 — Selected planet"](docs/prd/68-ui-production.md):
+- [x] Render the selected planet's production-focused summary block per [PRD 68 § "Pane 2 — Selected planet"](docs/prd/68-ui-production.md):
   - Header: planet name + scan-level chip (`detailed`) + a `Show on map` link button.
   - `Res/turn: <N>` — `planet.resources`. Append ` (leftover only)` when `planet.contributeOnlyLeftoverToResearch === true`.
   - `Mines / Factories: <M> / <F>` — `planet.mines` and `planet.factories`.
   - `Starbase: <label>` — concise label (`None` / `Dock` / `Dock (+ships)`).
   - `Minerals: I / B / G` — surface stockpile per mineral type, with one decimal where appropriate.
   - `Status: <state>` — derived: `Idle` (empty queue) or `Building (<N> remaining)` (first queue item's `quantity`). `Blocked` is deferred (no client signal yet; render `Building` for now).
-- [ ] `Show on map` returns the app to Command mode and selects the planet (via the workspace prop bridge added in Step 12).
-- [ ] When `selectedPlanetId == null` (only possible when `ownedPlanets.length === 0`), render the empty-workspace message.
+- [x] `Show on map` returns the app to Command mode and selects the planet (via the workspace prop bridge added in Step 12).
+- [x] When `selectedPlanetId == null` (only possible when `ownedPlanets.length === 0`), render the empty-workspace message.
 
 Unit tests in this step:
 
-- [ ] Summary lines render against a fixture own planet with known mineral and queue state.
-- [ ] Leftover-only annotation appears when `contributeOnlyLeftoverToResearch === true`.
-- [ ] Idle status renders for an empty queue; building status reflects the first item's quantity.
-- [ ] `Show on map` calls the supplied prop to switch back to Command mode and select the planet.
+- [x] Summary lines render against a fixture own planet with known mineral and queue state.
+- [x] Leftover-only annotation appears when `contributeOnlyLeftoverToResearch === true`.
+- [x] Idle status renders for an empty queue; building status reflects the first item's quantity.
+- [x] `Show on map` calls the supplied prop to switch back to Command mode and select the planet.
 
 ---
 
@@ -164,8 +164,8 @@ Unit tests in this step:
 
 Inside `ProductionWorkspace`:
 
-- [ ] Render the selected planet's working queue using the same merge logic the planet detail panel uses today (`baseProductionQueue` + pending commands → `productionQueue`). Reuse [buildPlanetScopeCommands](frontend/src/lib/productionQueueCommands.ts) unchanged.
-- [ ] One row per queue entry with the columns listed in [PRD 68 § "Queue editor"](docs/prd/68-ui-production.md):
+- [x] Render the selected planet's working queue using the same merge logic the planet detail panel uses today (`baseProductionQueue` + pending commands → `productionQueue`). Reuse [buildPlanetScopeCommands](frontend/src/lib/productionQueueCommands.ts) unchanged.
+- [x] One row per queue entry with the columns listed in [PRD 68 § "Queue editor"](docs/prd/68-ui-production.md):
   - Drag handle (`≡`).
   - Item label (ship design name for `ship`, friendly label otherwise).
   - Quantity `× N`.
@@ -173,21 +173,21 @@ Inside `ProductionWorkspace`:
   - `+` / `−` quantity buttons.
   - `↑` / `↓` reorder buttons.
   - `×` remove-row button.
-- [ ] Drag-to-reorder using dnd-kit (already in the repo for the ship designer — reuse the same dependency and patterns from [DragAndDropFitter](frontend/src/components/designer/DragAndDropFitter.tsx)). Drag operates only on existing rows; the palette does not participate.
-- [ ] Arrow buttons (`↑` / `↓`) on each row are a keyboard-accessible equivalent to drag.
-- [ ] `planetary_scanner` rows: `+` disabled (quantity always 1); `−` and `×` still work.
-- [ ] `Clear queue` button below the queue. Disabled when empty; clicking calls `replaceCommands` with the appropriate `clear_production_queue` command via `buildPlanetScopeCommands`.
-- [ ] All mutations go through `replaceCommands({ kind: "planet", id }, buildPlanetScopeCommands(...))` exactly as the existing planet detail panel does.
+- [x] Drag-to-reorder using dnd-kit (already in the repo for the ship designer — reuse the same dependency and patterns from [DragAndDropFitter](frontend/src/components/designer/DragAndDropFitter.tsx)). Drag operates only on existing rows; the palette does not participate.
+- [x] Arrow buttons (`↑` / `↓`) on each row are a keyboard-accessible equivalent to drag.
+- [x] `planetary_scanner` rows: `+` disabled (quantity always 1); `−` and `×` still work.
+- [x] `Clear queue` button below the queue. Disabled when empty; clicking calls `replaceCommands` with the appropriate `clear_production_queue` command via `buildPlanetScopeCommands`.
+- [x] All mutations go through `replaceCommands({ kind: "planet", id }, buildPlanetScopeCommands(...))` exactly as the existing planet detail panel does.
 
 Unit tests in this step:
 
-- [ ] Queue rows render in order with labels matching ship-design names and `PRODUCTION_ITEM_LABELS`.
-- [ ] `+` and `−` adjust quantity and dispatch the expected `add_production_item` / `remove_production_item` commands.
-- [ ] `×` removes the row entirely.
-- [ ] `↑` / `↓` reorder rows and dispatch `move_production_item` commands referencing the correct `insertAfterItemId`.
-- [ ] Drag-to-reorder dispatches the same commands as the arrow buttons (use dnd-kit's test helpers; if too heavy, assert via direct `onDragEnd` invocation against the component's exposed handler).
-- [ ] `planetary_scanner` rows render with `+` disabled.
-- [ ] `Clear queue` dispatches `clear_production_queue` and is disabled on an empty queue.
+- [x] Queue rows render in order with labels matching ship-design names and `PRODUCTION_ITEM_LABELS`.
+- [x] `+` and `−` adjust quantity and dispatch the expected `add_production_item` / `remove_production_item` commands.
+- [x] `×` removes the row entirely.
+- [x] `↑` / `↓` reorder rows and dispatch `move_production_item` commands referencing the correct `insertAfterItemId`.
+- [x] Drag-to-reorder dispatches the same commands as the arrow buttons (use dnd-kit's test helpers; if too heavy, assert via direct `onDragEnd` invocation against the component's exposed handler).
+- [x] `planetary_scanner` rows render with `+` disabled.
+- [x] `Clear queue` dispatches `clear_production_queue` and is disabled on an empty queue.
 
 ---
 
@@ -195,28 +195,28 @@ Unit tests in this step:
 
 Inside `ProductionWorkspace`. New child component: `frontend/src/components/panels/BuildPalette.tsx`.
 
-- [ ] Categories (in render order): `Infrastructure`, `Ships`, `Starbases`.
-- [ ] `Infrastructure` rows:
+- [x] Categories (in render order): `Infrastructure`, `Ships`, `Starbases`.
+- [x] `Infrastructure` rows:
   - `Mine` — cost `5r`.
   - `Factory` — cost `10r 4g`.
   - `Planetary Scanner` — cost `100r 10i 10b 70g`. Unavailable when `planet.hasScanner === true` or a `planetary_scanner` is already queued (mute + `Already installed` / `Already queued` note).
-- [ ] `Ships` rows — one per owned design from `shipDesigns`. Cost shows resources + per-mineral totals from the design summary. Unavailable when `planet.starbase?.canBuildShips !== true` (mute + `Needs starbase`).
-- [ ] `Starbases` rows — pull available upgrades for the planet from the existing starbase reference data path (see [PRD 17](docs/prd/17-starbases.md)). If no upgrades are available, the category renders with a single muted entry `Nothing buildable here`.
-- [ ] Click handler appends to the queue:
+- [x] `Ships` rows — one per owned design from `shipDesigns`. Cost shows resources + per-mineral totals from the design summary. Unavailable when `planet.starbase?.canBuildShips !== true` (mute + `Needs starbase`).
+- [x] `Starbases` rows — pull available upgrades for the planet from the existing starbase reference data path (see [PRD 17](docs/prd/17-starbases.md)). If no upgrades are available, the category renders with a single muted entry `Nothing buildable here`.
+- [x] Click handler appends to the queue:
   - `quantity = 1` on plain click, `quantity = 5` on Shift+click.
   - Compute the desired queue locally (existing rows + new row at the end), then call `replaceCommands` with `buildPlanetScopeCommands(...)`. The diff helper resolves to one `add_production_item` command with the correct `insertAfterItemId`.
-- [ ] Unavailable rows are muted, non-clickable, and announce their reason via the small inline note.
-- [ ] Reuse the Designer's palette row hover treatment (`hover:bg-white/8`) and label spacing for visual consistency.
+- [x] Unavailable rows are muted, non-clickable, and announce their reason via the small inline note.
+- [x] Reuse the Designer's palette row hover treatment (`hover:bg-white/8`) and label spacing for visual consistency.
 
 Unit tests in this step (`frontend/src/components/panels/BuildPalette.test.tsx`):
 
-- [ ] All three categories render with the expected entries for a fixture planet that satisfies every precondition.
-- [ ] Click on `Mine` dispatches an `add_production_item` command with `itemType: "mine"` and `quantity: 1`.
-- [ ] Shift+click on `Factory` dispatches a command with `quantity: 5`.
-- [ ] `Planetary Scanner` is muted with `Already installed` when `planet.hasScanner === true`.
-- [ ] `Planetary Scanner` is muted with `Already queued` when the queue already contains one.
-- [ ] Ship rows are muted with `Needs starbase` when the planet's starbase can't build ships.
-- [ ] No design entries renders an empty `Ships` category (collapsed or rendered with a muted "No designs" note — pick one and assert it).
+- [x] All three categories render with the expected entries for a fixture planet that satisfies every precondition.
+- [x] Click on `Mine` dispatches an `add_production_item` command with `itemType: "mine"` and `quantity: 1`.
+- [x] Shift+click on `Factory` dispatches a command with `quantity: 5`.
+- [x] `Planetary Scanner` is muted with `Already installed` when `planet.hasScanner === true`.
+- [x] `Planetary Scanner` is muted with `Already queued` when the queue already contains one.
+- [x] Ship rows are muted with `Needs starbase` when the planet's starbase can't build ships.
+- [x] No design entries renders an empty `Ships` category (collapsed or rendered with a muted "No designs" note — pick one and assert it).
 
 ---
 
@@ -224,21 +224,21 @@ Unit tests in this step (`frontend/src/components/panels/BuildPalette.test.tsx`)
 
 Edit [frontend/src/components/panels/PlanetDetail.tsx](frontend/src/components/panels/PlanetDetail.tsx).
 
-- [ ] Remove the in-panel queue editor (the picker dropdown, queue rows, +/-, clear queue). The state hooks for the picker (`productionPickerOpen`, `productionPickerRef`, the outside-click handler) go away with it.
-- [ ] Replace it with a `Production` section per [PRD 62 § "Production Summary"](docs/prd/62-ui-planet-detail.md):
+- [x] Remove the in-panel queue editor (the picker dropdown, queue rows, +/-, clear queue). The state hooks for the picker (`productionPickerOpen`, `productionPickerRef`, the outside-click handler) go away with it.
+- [x] Replace it with a `Production` section per [PRD 62 § "Production Summary"](docs/prd/62-ui-planet-detail.md):
   - Header: section label `Production` + a `Manage →` button on the right.
   - Body: one-line summary using the same `PRODUCTION_ITEM_LABELS` and ship-design names as the workspace. Empty queue → `Queue: empty`. One entry → `Queue: <qty>× <label>`. Two → `Queue: <qty>× <label>, <qty>× <label>`. Three or more → `Queue: <qty>× <label>, <qty>× <label>, +<N> more`.
-- [ ] `Manage →` calls a new `onOpenProduction(planetId: string)` prop. The wiring at the `App.tsx` call site lands in Step 12.
-- [ ] Visibility: gate on ownership only. The practical check is `planet.productionQueue != null` (the field is owner-only per PRD 13 visibility; an own planet is always `scanLevel: "detailed"` with `scanAge: 0` by PRD 11, so no separate scan / staleness gate is needed).
-- [ ] Update / remove tests in [PlanetDetail.test.tsx](frontend/src/components/panels/PlanetDetail.test.tsx) that asserted on the queue editor's controls.
+- [x] `Manage →` calls a new `onOpenProduction(planetId: string)` prop. The wiring at the `App.tsx` call site lands in Step 12.
+- [x] Visibility: gate on ownership only. The practical check is `planet.productionQueue != null` (the field is owner-only per PRD 13 visibility; an own planet is always `scanLevel: "detailed"` with `scanAge: 0` by PRD 11, so no separate scan / staleness gate is needed).
+- [x] Update / remove tests in [PlanetDetail.test.tsx](frontend/src/components/panels/PlanetDetail.test.tsx) that asserted on the queue editor's controls.
 
 Unit tests in this step:
 
-- [ ] Production section renders on own planets with the expected summary copy for each of the four queue-length buckets (0, 1, 2, ≥3).
-- [ ] Production section is absent on enemy planets (no `productionQueue` field).
-- [ ] Production section is absent on a carried-forward record of a previously-owned planet (`productionQueue == null` because ownership has been lost).
-- [ ] Clicking `Manage →` calls `onOpenProduction(planet.id)`.
-- [ ] Pre-existing assertions about the in-panel queue editor are removed (replaced or deleted to match the new shape).
+- [x] Production section renders on own planets with the expected summary copy for each of the four queue-length buckets (0, 1, 2, ≥3).
+- [x] Production section is absent on enemy planets (no `productionQueue` field).
+- [x] Production section is absent on a carried-forward record of a previously-owned planet (`productionQueue == null` because ownership has been lost).
+- [x] Clicking `Manage →` calls `onOpenProduction(planet.id)`.
+- [x] Pre-existing assertions about the in-panel queue editor are removed (replaced or deleted to match the new shape).
 
 ---
 
@@ -248,16 +248,16 @@ New module: `frontend/src/lib/productionSummary.ts`.
 
 Both the planet detail summary line and the `queueHeadColumn` need the same friendly labels. Extract once.
 
-- [ ] `export function describeQueueItem(item: PlayerProductionQueueItem, shipDesigns: ShipDesign[]): string` — returns the friendly label (`"Factory"`, design name for ship, etc.).
-- [ ] `export function summariseQueue(queue: PlayerProductionQueueItem[], shipDesigns: ShipDesign[]): string` — returns the one-line summary copy described in Step 9 and PRD 62.
-- [ ] Move `PRODUCTION_ITEM_LABELS` here if it currently lives inside `PlanetDetail.tsx`.
+- [x] `export function describeQueueItem(item: PlayerProductionQueueItem, shipDesigns: ShipDesign[]): string` — returns the friendly label (`"Factory"`, design name for ship, etc.).
+- [x] `export function summariseQueue(queue: PlayerProductionQueueItem[], shipDesigns: ShipDesign[]): string` — returns the one-line summary copy described in Step 9 and PRD 62.
+- [x] Move `PRODUCTION_ITEM_LABELS` here if it currently lives inside `PlanetDetail.tsx`.
 
 Unit tests in this step (`frontend/src/lib/productionSummary.test.ts`):
 
-- [ ] `describeQueueItem` returns the design name for a `ship` item and the friendly label otherwise.
-- [ ] `summariseQueue([])` returns `"Queue: empty"`.
-- [ ] `summariseQueue` with one, two, and three+ items returns the four expected copy variants.
-- [ ] Unknown design id falls back to a stable label (e.g. `"Ship"`).
+- [x] `describeQueueItem` returns the design name for a `ship` item and the friendly label otherwise.
+- [x] `summariseQueue([])` returns `"Queue: empty"`.
+- [x] `summariseQueue` with one, two, and three+ items returns the four expected copy variants.
+- [x] Unknown design id falls back to a stable label (e.g. `"Ship"`).
 
 ---
 
@@ -265,16 +265,16 @@ Unit tests in this step (`frontend/src/lib/productionSummary.test.ts`):
 
 Extend the global keyboard handler in [frontend/src/App.tsx](frontend/src/App.tsx) (currently handles `R` for research and `w`/`Escape` for waypoint editing).
 
-- [ ] `P` switches to Production mode from Command view. Pressing `P` while already in Production returns to Command view. Same suppression rules: skip when a text input or textarea is focused; skip when the key was pressed with `Ctrl`, `Meta`, or `Alt`.
-- [ ] `Esc` returns to Command from Production (and only from Production — leave the existing waypoint-mode `Esc` handler in place).
-- [ ] Inside the planet list (focus within `PlanetList`), `Up` / `Down` move between rows and `Enter` / `Space` select. This is handled inside the `PlanetList` component itself (Step 1), not in the App-level handler.
+- [x] `P` switches to Production mode from Command view. Pressing `P` while already in Production returns to Command view. Same suppression rules: skip when a text input or textarea is focused; skip when the key was pressed with `Ctrl`, `Meta`, or `Alt`.
+- [x] `Esc` returns to Command from Production (and only from Production — leave the existing waypoint-mode `Esc` handler in place).
+- [x] Inside the planet list (focus within `PlanetList`), `Up` / `Down` move between rows and `Enter` / `Space` select. This is handled inside the `PlanetList` component itself (Step 1), not in the App-level handler.
 
 Unit tests in this step (extend `frontend/src/App.test.tsx`):
 
-- [ ] Pressing `P` with no input focused toggles between Command and Production mode.
-- [ ] Pressing `P` while an input is focused does not toggle.
-- [ ] Pressing `Esc` from Production returns to Command. Pressing `Esc` from Command does nothing (apart from any existing handlers).
-- [ ] `P` does not fire when modifier keys are held.
+- [x] Pressing `P` with no input focused toggles between Command and Production mode.
+- [x] Pressing `P` while an input is focused does not toggle.
+- [x] Pressing `Esc` from Production returns to Command. Pressing `Esc` from Command does nothing (apart from any existing handlers).
+- [x] `P` does not fire when modifier keys are held.
 
 ---
 
@@ -282,9 +282,9 @@ Unit tests in this step (extend `frontend/src/App.test.tsx`):
 
 Edit [frontend/src/App.tsx](frontend/src/App.tsx):
 
-- [ ] Widen `AppMode` to `"command" | "production" | "designer" | "research"`.
-- [ ] Compute `ownedPlanets` (already done) and pass `productionEnabled={ownedPlanets.length > 0}` to `TopBar`.
-- [ ] When `effectiveMode === "production"`, mount `<ProductionWorkspace ... />` with:
+- [x] Widen `AppMode` to `"command" | "production" | "designer" | "research"`.
+- [x] Compute `ownedPlanets` (already done) and pass `productionEnabled={ownedPlanets.length > 0}` to `TopBar`.
+- [x] When `effectiveMode === "production"`, mount `<ProductionWorkspace ... />` with:
   - `ownedPlanets`
   - `currentPlayer={player}`
   - `shipDesigns={gameState.shipDesigns}`
@@ -293,24 +293,24 @@ Edit [frontend/src/App.tsx](frontend/src/App.tsx):
   - `basePlayerState={gameState.playerState}`
   - `initialPlanetId={selection?.kind === "planet" ? selection.id : null}` — when the player jumped in via `Manage →`, the selection is already on that planet.
   - `onShowOnMap={(planetId) => { setSelection({ kind: "planet", id: planetId }); setMode("command"); mapPanToRef.current?.(...); }}` — wires the centre-pane "Show on map" link.
-- [ ] Wire the `onOpenProduction` prop on `<PlanetDetail>` (from Step 9): set `selection = { kind: "planet", id: planetId }` and `setMode("production")`. Pre-existing selection state already drives `initialPlanetId`, so no extra plumbing is needed beyond setting both.
-- [ ] Effective-mode safety: if `mode === "production"` but `ownedPlanets.length === 0`, fall back to `"command"` (parallels the existing `research && !activeResearch` guard).
+- [x] Wire the `onOpenProduction` prop on `<PlanetDetail>` (from Step 9): set `selection = { kind: "planet", id: planetId }` and `setMode("production")`. Pre-existing selection state already drives `initialPlanetId`, so no extra plumbing is needed beyond setting both.
+- [x] Effective-mode safety: if `mode === "production"` but `ownedPlanets.length === 0`, fall back to `"command"` (parallels the existing `research && !activeResearch` guard).
 
 Unit tests in this step (`frontend/src/App.test.tsx`):
 
-- [ ] Clicking the top-bar Production tab mounts the workspace.
-- [ ] Production tab is disabled when there are no owned planets.
-- [ ] Clicking `Manage production →` on a planet detail switches to Production with that planet selected.
-- [ ] Mode auto-falls-back to `command` when a player loses all owned planets while in Production.
-- [ ] Production-workspace edits populate the dirty buffer with the expected `planet`-scoped commands.
+- [x] Clicking the top-bar Production tab mounts the workspace.
+- [x] Production tab is disabled when there are no owned planets.
+- [x] Clicking `Manage production →` on a planet detail switches to Production with that planet selected.
+- [x] Mode auto-falls-back to `command` when a player loses all owned planets while in Production.
+- [x] Production-workspace edits populate the dirty buffer with the expected `planet`-scoped commands.
 
 ---
 
 ## Step 13 — Lint, typecheck, test
 
-- [ ] `cd frontend && npm run lint` clean.
-- [ ] `cd frontend && npm run typecheck` clean.
-- [ ] `cd frontend && npm test` passes end-to-end.
+- [x] `cd frontend && npm run lint` clean.
+- [x] `cd frontend && npm run typecheck` clean.
+- [x] `cd frontend && npm test` passes end-to-end.
 
 ---
 

From 4975b6b36957d3788ebf5bc43034831b4570646f Mon Sep 17 00:00:00 2001
From: Tim Gage <github@timgage.fastmail.fm>
Date: Mon, 18 May 2026 22:05:53 +0100
Subject: [PATCH 3/7] Small tweaks

---
 .../components/panels/ProductionWorkspace.tsx | 20 +++++++++----------
 frontend/src/components/ui/PanelCard.tsx      |  4 ++--
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/panels/ProductionWorkspace.tsx b/frontend/src/components/panels/ProductionWorkspace.tsx
index 861bd58a..b5c27fad 100644
--- a/frontend/src/components/panels/ProductionWorkspace.tsx
+++ b/frontend/src/components/panels/ProductionWorkspace.tsx
@@ -24,6 +24,7 @@ import { buildPlanetScopeCommands } from "../../lib/productionQueueCommands";
 import { createDraftProductionQueueItem, describeQueueItem } from "../../lib/productionSummary";
 import { Button } from "../ui/Button";
 import { MutedText } from "../ui/MutedText";
+import { PanelCard } from "../ui/PanelCard";
 import { SectionLabel } from "../ui/SectionLabel";
 import { PlanetList } from "./PlanetList";
 import { BuildPalette } from "./BuildPalette";
@@ -252,9 +253,6 @@ function CentrePane({
       <div className="flex items-center justify-between border-b border-[var(--color-panel-border)] px-3 py-2">
         <div className="flex items-center gap-2">
           <span className="font-semibold text-foreground">{planet.name}</span>
-          <span className="rounded border border-[var(--color-panel-border)] px-1.5 py-0.5 text-[10px] uppercase tracking-widest text-muted-foreground">
-            detailed
-          </span>
         </div>
         <button
           type="button"
@@ -473,11 +471,11 @@ export function ProductionWorkspace({
 
   return (
     <div
-      className="flex h-full overflow-hidden"
-      style={{ display: "grid", gridTemplateColumns: "22% 1fr 30%" }}
+      className="grid h-full overflow-hidden p-4 gap-4"
+      style={{ gridTemplateColumns: "22% 1fr 30%" }}
     >
       {/* Left: planet list */}
-      <div className="overflow-hidden border-r border-[var(--color-panel-border)]" data-testid="planet-list-pane">
+      <PanelCard className="overflow-hidden" data-testid="planet-list-pane">
         {ownedPlanets.length === 0 ? (
           <div className="flex h-full items-center justify-center p-4">{emptyMessage}</div>
         ) : (
@@ -489,10 +487,10 @@ export function ProductionWorkspace({
             filter={filter}
           />
         )}
-      </div>
+      </PanelCard>
 
       {/* Centre: planet detail + queue */}
-      <div className="overflow-hidden border-r border-[var(--color-panel-border)]" data-testid="centre-pane">
+      <PanelCard className="overflow-hidden" data-testid="centre-pane">
         {selectedPlanet == null ? (
           <div className="flex h-full items-center justify-center p-4">{emptyMessage}</div>
         ) : (
@@ -505,10 +503,10 @@ export function ProductionWorkspace({
             onShowOnMap={() => onShowOnMap(selectedPlanet.id)}
           />
         )}
-      </div>
+      </PanelCard>
 
       {/* Right: build palette */}
-      <div className="overflow-hidden" data-testid="palette-pane">
+      <PanelCard className="overflow-hidden" data-testid="palette-pane">
         {selectedPlanet == null ? (
           <div className="flex h-full items-center justify-center p-4">{emptyMessage}</div>
         ) : (
@@ -519,7 +517,7 @@ export function ProductionWorkspace({
             onAdd={handleAddToQueue}
           />
         )}
-      </div>
+      </PanelCard>
     </div>
   );
 }
diff --git a/frontend/src/components/ui/PanelCard.tsx b/frontend/src/components/ui/PanelCard.tsx
index 03b58db5..73435836 100644
--- a/frontend/src/components/ui/PanelCard.tsx
+++ b/frontend/src/components/ui/PanelCard.tsx
@@ -30,7 +30,7 @@ export function PanelCard(props: PanelCardProps) {
   );
 
   if (props.as === "button") {
-    const { as: buttonAs, type = "button", ...buttonProps } = props;
+    const { as: buttonAs, type = "button", className: _c, children: _ch, interactive: _i, variant: _v, ...buttonProps } = props;
     void buttonAs;
 
     return (
@@ -44,7 +44,7 @@ export function PanelCard(props: PanelCardProps) {
     );
   }
 
-  const { as: divAs, ...divProps } = props;
+  const { as: divAs, className: _c, children: _ch, interactive: _i, variant: _v, ...divProps } = props;
   void divAs;
 
   return (

From 84549d22e796500ad77ae12bcf970796a36f6366 Mon Sep 17 00:00:00 2001
From: Tim Gage <github@timgage.fastmail.fm>
Date: Mon, 18 May 2026 22:11:38 +0100
Subject: [PATCH 4/7] Draw planetary scanners

---
 docs/prd/61-ui-galaxymap.md                  |  6 ++---
 frontend/src/components/panels/GalaxyMap.tsx | 24 ++++++++++++++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/docs/prd/61-ui-galaxymap.md b/docs/prd/61-ui-galaxymap.md
index 7fb5d3d0..3010e3a6 100644
--- a/docs/prd/61-ui-galaxymap.md
+++ b/docs/prd/61-ui-galaxymap.md
@@ -31,9 +31,9 @@ The map follows the original Stars! visual language:
 - **Scanner circles** — two concentric circles per scanner source (PRD 11), matching the original Stars! visual style:
   - **Normal scanner range:** red circle (`rgba(255, 0, 0, 0.15)` fill, `rgba(255, 0, 0, 0.4)` border)
   - **Penetrating scanner range:** light green circle (`rgba(0, 255, 0, 0.1)` fill, `rgba(0, 255, 0, 0.3)` border) — always smaller, drawn inside the red circle
-  - Both fleet scanners and planet scanners contribute (planet scanners future phase)
-  - Scanner circles are drawn per-fleet, centred on the fleet's position
-  - The effective scanner range for a fleet is the maximum scanner range of any ship design in its composition (same rule for both normal and penetrating)
+  - Both fleet scanners and planet scanner installations contribute; each draws circles centred on its own position
+  - For fleets: the effective scanner range is the maximum of any ship design's scanner in its composition
+  - For planet installations: range comes from `planet.scanner.normal` / `planet.scanner.penetrating` (own planets only, when `installed: true`)
   - Toggleable via a keyboard shortcut or UI toggle — can be visually noisy, so the player should be able to show/hide them
   - When a fleet is selected, its scanner circles are drawn brighter/more opaque for emphasis
 - **Selection indicator** — a ring or bracket around the selected planet/fleet
diff --git a/frontend/src/components/panels/GalaxyMap.tsx b/frontend/src/components/panels/GalaxyMap.tsx
index 70ee0d6e..4cc36ad5 100644
--- a/frontend/src/components/panels/GalaxyMap.tsx
+++ b/frontend/src/components/panels/GalaxyMap.tsx
@@ -370,7 +370,31 @@ function renderScannerCircles(
       ctx.fillStyle = SCANNER_COLORS.penetrating.fill;
       ctx.fill();
     }
+  }
+
+  // Planet scanner installations
+  for (const planet of playerState.planets) {
+    if (planet.owner !== playerState.player) continue;
+    const s = planet.scanner;
+    if (!s || !("normal" in s) || s.normal === 0) continue;
+
+    const { sx, sy } = toS(planet.x, planet.y);
+    const normalRadiusPx = s.normal * LIGHT_YEAR * viewport.scale;
+    const penetratingRadiusPx = s.penetrating * LIGHT_YEAR * viewport.scale;
+
+    if (normalRadiusPx > 2) {
+      ctx.beginPath();
+      ctx.arc(sx, sy, normalRadiusPx, 0, Math.PI * 2);
+      ctx.fillStyle = SCANNER_COLORS.normal.fill;
+      ctx.fill();
+    }
 
+    if (penetratingRadiusPx > 2) {
+      ctx.beginPath();
+      ctx.arc(sx, sy, penetratingRadiusPx, 0, Math.PI * 2);
+      ctx.fillStyle = SCANNER_COLORS.penetrating.fill;
+      ctx.fill();
+    }
   }
 }
 

From 97e4a19095ba8b5384734a580812554bebc0af67 Mon Sep 17 00:00:00 2001
From: Tim Gage <github@timgage.fastmail.fm>
Date: Mon, 18 May 2026 22:16:17 +0100
Subject: [PATCH 5/7] Fix linting

---
 frontend/src/components/ui/PanelCard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ui/PanelCard.tsx b/frontend/src/components/ui/PanelCard.tsx
index 73435836..e7a28f3b 100644
--- a/frontend/src/components/ui/PanelCard.tsx
+++ b/frontend/src/components/ui/PanelCard.tsx
@@ -30,25 +30,25 @@ export function PanelCard(props: PanelCardProps) {
   );
 
   if (props.as === "button") {
-    const { as: buttonAs, type = "button", className: _c, children: _ch, interactive: _i, variant: _v, ...buttonProps } = props;
+    const { as: buttonAs, type = "button", ...buttonProps } = props;
     void buttonAs;
 
     return (
       <button
+        {...buttonProps}
         type={type}
         className={cn(sharedClassName, interactive && "cursor-pointer")}
-        {...buttonProps}
       >
         {children}
       </button>
     );
   }
 
-  const { as: divAs, className: _c, children: _ch, interactive: _i, variant: _v, ...divProps } = props;
+  const { as: divAs, ...divProps } = props;
   void divAs;
 
   return (
-    <div className={sharedClassName} {...divProps}>
+    <div {...divProps} className={sharedClassName}>
       {children}
     </div>
   );

From b7bc874062605e7685c55049ff14fabd1f6590b1 Mon Sep 17 00:00:00 2001
From: Tim Gage <github@timgage.fastmail.fm>
Date: Thu, 21 May 2026 21:11:00 +0100
Subject: [PATCH 6/7] Fix codex review comments

---
 frontend/src/components/panels/BuildPalette.tsx        | 3 ++-
 frontend/src/components/panels/ProductionWorkspace.tsx | 7 ++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/panels/BuildPalette.tsx b/frontend/src/components/panels/BuildPalette.tsx
index 72a7fd61..90f47e19 100644
--- a/frontend/src/components/panels/BuildPalette.tsx
+++ b/frontend/src/components/panels/BuildPalette.tsx
@@ -103,7 +103,8 @@ function PaletteSection({ title, rows, onAdd }: {
           disabled={!row.available}
           onClick={(e) => {
             if (!row.available) return;
-            const qty = e.shiftKey ? 5 : 1;
+            const isSingle = row.itemType === "planetary_scanner";
+            const qty = !isSingle && e.shiftKey ? 5 : 1;
             onAdd(row.itemType, row.designId, row.targetType, qty);
           }}
           className={`w-full px-2 py-1.5 text-left transition-colors ${
diff --git a/frontend/src/components/panels/ProductionWorkspace.tsx b/frontend/src/components/panels/ProductionWorkspace.tsx
index b5c27fad..440162ab 100644
--- a/frontend/src/components/panels/ProductionWorkspace.tsx
+++ b/frontend/src/components/panels/ProductionWorkspace.tsx
@@ -381,9 +381,10 @@ export function ProductionWorkspace({
     [ownedPlanets],
   );
 
-  const [selectedPlanetId, setSelectedPlanetId] = useState<string | null>(
-    () => initialPlanetId ?? sortedOwnedPlanets[0]?.id ?? null,
-  );
+  const [selectedPlanetId, setSelectedPlanetId] = useState<string | null>(() => {
+    const owned = sortedOwnedPlanets.some((p) => p.id === initialPlanetId);
+    return (owned ? initialPlanetId : null) ?? sortedOwnedPlanets[0]?.id ?? null;
+  });
 
   const [filter, setFilter] = useState<PlanetListFilter>({
     ...INITIAL_FILTER,

From 861903e3d02ea35bc8ed5a935c82994be4dc6528 Mon Sep 17 00:00:00 2001
From: Tim Gage <github@timgage.fastmail.fm>
Date: Thu, 21 May 2026 21:19:45 +0100
Subject: [PATCH 7/7] Remove dirty asterisk from top bar

---
 frontend/src/App.tsx                           |  2 --
 frontend/src/components/panels/TopBar.test.tsx |  2 --
 frontend/src/components/panels/TopBar.tsx      | 17 +++--------------
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 51f060da..3d29f759 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -315,8 +315,6 @@ function App() {
         <TopBar
           gameName={gameState.gameDetail?.name ?? "OpenStars!"}
           turn={gameState.playerState.turn}
-          isDirty={gameState.isDirty}
-          submitted={gameState.submitted}
           waitingForNextTurn={waitingForNextTurn}
           mode={effectiveMode}
           onModeChange={handleModeChange}
diff --git a/frontend/src/components/panels/TopBar.test.tsx b/frontend/src/components/panels/TopBar.test.tsx
index 6aee5a48..82877c6b 100644
--- a/frontend/src/components/panels/TopBar.test.tsx
+++ b/frontend/src/components/panels/TopBar.test.tsx
@@ -44,8 +44,6 @@ function renderTopBar(
     <TopBar
       gameName="Andromeda"
       turn={4}
-      isDirty={false}
-      submitted
       waitingForNextTurn
       mode={mode}
       onModeChange={onModeChange}
diff --git a/frontend/src/components/panels/TopBar.tsx b/frontend/src/components/panels/TopBar.tsx
index ba1b13f7..1762d6d7 100644
--- a/frontend/src/components/panels/TopBar.tsx
+++ b/frontend/src/components/panels/TopBar.tsx
@@ -5,8 +5,6 @@ import { MutedText } from "../ui/MutedText";
 interface TopBarProps {
   gameName: string;
   turn: number;
-  isDirty: boolean;
-  submitted: boolean;
   waitingForNextTurn: boolean;
   mode: "command" | "production" | "designer" | "research";
   onModeChange: (mode: "command" | "production" | "designer" | "research") => void;
@@ -27,8 +25,6 @@ interface TopBarProps {
 export function TopBar({
   gameName,
   turn,
-  isDirty,
-  submitted,
   waitingForNextTurn,
   mode,
   onModeChange,
@@ -76,7 +72,7 @@ export function TopBar({
                 size="xs"
                 onClick={() => onModeChange("command")}
               >
-                {isDirty ? "Command*" : "Command"}
+                Command
               </Button>
               <Button
                 variant={mode === "production" ? "primary" : "ghost"}
@@ -143,17 +139,10 @@ export function TopBar({
 
         <Button
           onClick={onSubmit}
-          disabled={!isDirty && submitted}
           size="xs"
-          className={`font-semibold transition-all duration-200 ${
-            isDirty
-              ? "bg-[var(--color-player-self)] text-white shadow-[0_0_0_1px_rgb(147_197_253/0.25),0_8px_20px_rgb(96_165_250/0.25)] hover:-translate-y-px hover:bg-[var(--color-player-self)]/85"
-              : submitted
-                ? "bg-secondary text-muted-foreground cursor-default"
-                : "bg-[var(--color-player-self)]/60 text-white/80 hover:bg-[var(--color-player-self)] hover:text-white"
-          }`}
+          className="font-semibold bg-[var(--color-player-self)] text-white shadow-[0_0_0_1px_rgb(147_197_253/0.25),0_8px_20px_rgb(96_165_250/0.25)] hover:-translate-y-px hover:bg-[var(--color-player-self)]/85 transition-all duration-200"
         >
-          {submitted && !isDirty ? "Submitted ✓" : "Submit Turn"}
+          Submit Turn
         </Button>
         <Button
           onClick={onLeave}