Merge pull request 'v0.9.10 — world map fills entire tab area, no scrollbar (#36 )' (#39 ) from world-map-full-area into master

fix(ui): keep the OPERATIONS tab bar intact when tall tabs overflow the pane (#36 )
Merge pull request 'v0.9.10 — world map fills entire tab area, no scrollbar (#36 )' (#37 ) from world-map-full-area into master
2026-09-29 16:09:15 +02:00 · 2026-09-29 14:03:27 +00:00 · 2026-09-29 15:03:00 +02:00 · 2026-09-29 12:59:16 +00:00 · 2026-09-29 13:27:17 +02:00 · 2026-09-29 11:24:02 +00:00
23 changed files with 948 additions and 619 deletions
@@ -1,5 +1,61 @@
 # Changelog

+## v0.9.10 — 2026-09-29 12:57
+- The WORLD MAP now fills the entire available area of its tab (#36): in wide mode (pinned viewport, #21) the OPERATIONS Tabs are a full-height flex column and the world-map panel flexes to the bottom of the pane — the chart SVG sizes to the measured container instead of the old fixed 380px height, so there is no internal scrollbar on this tab at any window size. The scene keeps its viewBox and scales with the pane on resizes (pan/zoom stay accurate; re-fitting after a resize is intentionally not done). Narrow mode keeps the fixed fallback height since the page scrolls naturally there.
+- Follow-up to that layout change (CI run 382): the OPERATIONS Tabs root uses `min-height: 100%` instead of `height: 100%`. With a capped height, a tall tab's content overflowed the flex column and shrank items down to their automatic minimum — the tablist's `overflow-x: auto` zeroes that minimum per CSS spec, so the bar collapsed to ~0px with its buttons clipped out of hit-testing (every subsequent tab click failed with "div intercepts pointer events"); a capped box also released the sticky pin on deep scrolls. With min-height the box grows to fit tall tabs — the bar keeps its natural height and stays pinned across the whole scroll range, while WORLD MAP still fills the pane exactly.
+- e2e: the #31 spec no longer relies on WORLD MAP's overflow to force scrolling — it now switches to SHIP SYSTEMS, whose six always-present stacked system cards deterministically overflow the shrunk 1280×560 pane (waiting for the HULL card first), and asserts the same pinned tab bar.
+
+## v0.9.9 — 2026-09-29 11:21
+- The WORLD MAP chart is now a force-directed graph (d3-force) with pan + zoom (d3-zoom), replacing the hand-rolled static NodeGraph render (#28): nodes settle into a dynamic layout seeded from the API coordinates and visibly rearrange after every jump, then auto zoom-to-fit so the whole network stays framed in the chart box. Wheel/drag pans and zooms the scene; only systems adjacent to the current one remain clickable (same `role=button` + name contract as before), all nodes lock while a jump is in flight, and a real pan's trailing click never triggers an accidental jump. Jump flow (`POST /api/jump`, turn counter, `onJumped` refresh from #30) is unchanged; the now-orphaned hand-rolled `NodeGraph` component (world map was its only consumer) is deleted.
+
+## v0.9.8 — 2026-09-29 10:20
+- The OPERATIONS tab bar now stays pinned while its content scrolls (#31): the TabsList is `position: sticky; top: 0` with a z-index above the panel content, so it pins to the top of the OPERATIONS scroll area in wide mode (where only the center pane scrolls, #21) and to the viewport when the body scrolls in narrow mode. Its existing opaque background (`--surface-raised`) keeps scrolled content from showing through; no layout restructure needed — #21 behavior is untouched.
+- e2e: new smoke spec — shrink the viewport so WORLD MAP's fixed-height chart overflows the pane, scroll the panel to the bottom (asserting a real offset), and check the tablist's bounding box hasn't moved.
+
+## v0.9.7 — 2026-09-29 09:59
+- LOCAL SYSTEM no longer shows the previous system after a jump (#30): WorldMapPanel owns the world state and applied the `/api/jump` response locally, so MissionControl's lifted `/api/system` state (which drives the LOCAL SYSTEM tab, CARGO HOLD and the SECTOR row) went stale until a page refresh. The panel now takes an `onJumped` callback that MissionControl wires to a `/api/system` refetch after every successful jump — same failure policy as the mount fetch (keep old state on error).
+- e2e: new smoke spec — click-to-jump on WORLD MAP, wait for the chart's turn counter to update, switch to LOCAL SYSTEM and assert its header shows the NEW current system from `/api/world` (no `page.reload()` workaround; one jump per run/retry, same pattern as the existing jump test).
+
+## v0.9.6 — 2026-09-29 09:41
+- The active operations tab now survives a page refresh (#27): the selected tab ID is persisted to `localStorage` (`sw-active-tab`) on every change and restored on mount when it matches one of the seven valid tab IDs (unknown/stale values fall back to WORLD MAP). The Radix Tabs are controlled for this; SSR and first client render still agree on the default, so there is no hydration mismatch.
+- e2e: new smoke spec — click CREW, reload, assert `aria-selected=true` again (fresh context per run/retry, no API state touched, idempotent).
+
+## v0.9.5 — 2026-09-29 09:13
+- Fixed the production freeze reported after the v0.9.3 (#21) deploy ("entire UI system is now fucked"). Root cause was NOT the #21 layout change (verified healthy across all 7 tabs and multiple viewports — no clipping, middle pane scrolls internally, side panes fixed): it was world name generation. `makeName` draws from a finite pool of 16×8=128 system names with an unbounded rejection loop, so once a save grew past ~128 systems (turns of play / e2e jump loops), any jump into an undiscovered system spun forever on Node's single thread — sql.js runs synchronously, so the whole process blocked and EVERY API route hung, leaving all panels stuck at LOADING.
+- `makeName` (lib/game/world.ts) now falls back to numbered variants (`Kepler Drift 2`) once the pool is exhausted, so it always terminates; `makeCrewName` (lib/game/crew.ts) gets the same guard — the roster has no cap and its 16×22=352 pool would eventually exhaust too.
+- Tests: unit — both name generators terminate with unique numbered names after full pool exhaustion (80 tests green, was 78); e2e unchanged — no spec depends on the old behavior and a fresh CI stack never approaches 128 systems.
+
+## v0.9.4 — 2026-09-29 08:29
+- Top bar (#23): the `◄ SHIP` label in the mission control header is replaced with the app version number (e.g. `v0.9.4`). The header reads it from `package.json` via the same `@/package.json` import that `/api/version` and the OpenAPI spec use, so there is a single source of truth — no second hardcoded copy.
+- e2e: no spec changes needed — no spec asserted on the old `◄ SHIP` label (the landing-page test only checks the SpaceWanderer heading). All 15 specs compile unchanged.
+
+## v0.9.3 — 2026-09-29 08:20
+- Layout (#21): only the middle column scrolls now — the app is pinned to the viewport (`height: 100vh` + `overflow: hidden` on the root in wide mode) so body-level scrolling no longer moves the side panes. Left/right columns keep their existing `overflow-y: auto`, so any overflowing content (e.g. a long planet list) scrolls inside its own track instead.
+- Added `min-height: 0` to the BODY wrapper and the 3-column grid — flex/grid items default to a content-based minimum size, which is what let the page grow past the viewport before.
+- The middle OPERATIONS panel became a flex column with its PanelContent as the scroll area (`flex: 1; min-height: 0; overflow-y: auto`): long tab content scrolls inside the panel while the "OPERATIONS // SHIP COMMAND" header stays pinned — without this, the Panel root's default `overflow: hidden` would have clipped it.
+- Narrow layout (<900px) is unchanged: stacked columns with natural body scroll (the viewport pin applies to wide mode only).
+- e2e: no spec changes needed — none use mouse.wheel/scrollTo, and Playwright scrolls click targets into view within any scroll container. All 15 specs compile unchanged.
+
+## v0.9.2 — 2026-09-29 08:00
+- WORLD MAP (#19): the bottom JUMP ROUTES button list is gone — jumps now happen by clicking galactic chart fields. Systems adjacent to the current one (the same set as before, undiscovered included) are clickable nodes with a pointer cursor and a `// JUMP` sublabel; the current system stays bright green with CURRENT, unreachable systems are dimmed (OFFLINE) and not clickable.
+- NodeGraph (`components/ui/node-graph.tsx`) gained two optional, backward-compatible additions: an `onNodeClick(id)` prop that turns non-disabled nodes into buttons (click + Enter/Space, role=button, aria-label, focusable), and a per-node `disabled` flag — while a jump is in flight every node locks, mirroring the old disabled-button behaviour.
+- The jump flow itself is unchanged: same POST /api/jump call, world state refreshed from the response (turn counter, current system, new routes), event log entry written server-side as before.
+- e2e: two smoke tests touched the removed buttons and were updated — "world map shows…" now asserts the adjacent systems render as clickable chart fields (role=button count matches API adjacency) and "jumping to an adjacent system" clicks the target node by its accessible name. All 15 specs compile; `jumpToFreshSystem` is API-driven and needed no change.
+
+## v0.9.1 — 2026-09-29 06:47
+- UI layout pass (visual only — no game logic or API changes): CARGO HOLD // INVENTORY moved out of the LOCAL SYSTEM tab into a persistent panel in the right column; the UPCOMING ENCOUNTERS placeholder was removed entirely; the SHIP DATA placeholder was merged into VESSEL METRICS.
+- Grid: `260px / 1fr / 240px` → `320px / 1fr / 360px` (left pane ~+23%, right pane ~50% wider).
+- Cargo state wiring follows the existing lifted-state pattern: MissionControl fetches `/api/system` on mount and owns the SystemState; LocalSystemPanel receives it as a prop, keeps its planet list + scan result + explore action, and reports each scan's response up via `onChanged` (same as ShipSystemsPanel) — so CARGO HOLD mirrors scans live with no polling.
+- VESSEL METRICS now carries the two SHIP DATA rows that had real values: SECTOR (current system name from the lifted state) and TURN (`ship.turn`). The rest was dropped — HULL INTEGRITY / REACTOR OUTPUT / CREW ACTIVE duplicate the existing progress bars, TOTAL MODULES duplicates the left column's "N ONLINE" badge, DRIFT VELOCITY has no game equivalent.
+- e2e: no assertion changes needed — the LOCAL SYSTEM tests only assert panel internals (header, EXPLORE buttons, SCAN RESULT) and API state; CARGO HOLD / UPCOMING ENCOUNTERS / SHIP DATA were never referenced by any spec. All 15 specs compile unchanged.
+
+## v0.9.0 — 2026-09-29 02:47
+- EVENT LOG tab — the last of the seven tabs to go live (issue #11): the terminal now renders the save's real game events instead of a placeholder feed. Every action already appends an event row (new game, jump, scan, research, ship upgrade/expand/build, mission accept + completion); this issue adds the read side and the rendering.
+- New endpoint: `GET /api/events` → latest N events, newest first (`{id, turn, type, message, createdAt}`), auto-initializes like all other reads. Optional `?limit=` (default 50, cap 200; non-integers or out-of-range values → 400). OpenAPI spec in code updated (14 → 15 paths) with the Event schema enumerating the eight event types.
+- Read model (`lib/game/events.ts`): `getEvents(db, limit)` — ORDER BY id DESC LIMIT N over the existing append-only events table; `parseEventLimit` for the query param. No schema change — the events table and all its writers already existed.
+- EVENT LOG tab: self-fetching EventLogPanel (MissionPanel pattern — refetches on each tab open). One terminal line per event: `T<turn> // <MESSAGE>` uppercased, with the event's local time as the timestamp; new_game lines render as system lines. Placeholder feed + now() removed from mission-control.tsx.
+- Tests: unit — parseEventLimit default/accept/reject (400) and getEvents newest-first ordering + slicing; writer coverage gaps closed so every action type is asserted with correct turn/type/message (expand had no event assertion at all; build and mission-complete lacked the turn check); e2e — after a jump + scan, both events appear in GET /api/events with the newer one first and the terminal renders both lines (idempotent across retries: asserts on this run's own entries by turn/message, never absolute counts), plus the latest five log lines come back identical (ids included) after the mid-run container restart.
+
 ## v0.8.0 — 2026-09-29 01:56
 - MISSIONS tab — contract generation, acceptance and completion (issue #10): the first objective loop on top of issue #9's research. The board is generated deterministically from the save seed; one mission is ACTIVE at a time; completion is checked after every jump and scan and grants its reward into the cargo hold.
 - New table (`lib/db/schema.ts` + DDL): `missions` (id/save_id/type/description/target_system_id/condition_kind/progress_target/progress/reward_kind/reward_qty/state). Seeded on new game AND as backfill step v6 — same pattern as tech; saves created by older code get their board on first read. `SCHEMA_VERSION` 5 → 6.
@@ -0,0 +1,21 @@
+import { getGameDb } from '@/lib/db/client'
+import { ensureSave } from '@/lib/game/save'
+import { EventError, getEvents, parseEventLimit } from '@/lib/game/events'
+
+// The latest game events, newest first; auto-initializes on first hit.
+export async function GET(req: Request) {
+  const db = await getGameDb()
+  await ensureSave(db) // getEvents assumes a save exists
+
+  let limit: number
+  try {
+    limit = parseEventLimit(new URL(req.url).searchParams.get('limit'))
+  } catch (err) {
+    if (err instanceof EventError) {
+      return Response.json({ error: err.message }, { status: err.status })
+    }
+    throw err
+  }
+
+  return Response.json(await getEvents(db, limit))
+}
@@ -160,6 +160,12 @@ body {
  -moz-osx-font-smoothing: grayscale;
 }

+/* Radix Tabs hides inactive content via the `hidden` attribute, but inline display styles (the
+   #36 pane-fill flex chain on the WORLD MAP tab) outrank the UA stylesheet — restore semantics. */
+[hidden] {
+  display: none !important;
+}
+
 #root {
  min-height: 100vh;
 }
@@ -10,6 +10,9 @@
        "@radix-ui/react-tabs": "^1.1.13",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
+        "d3-force": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
        "drizzle-orm": "^0.45.2",
        "next": "^16.3.5",
        "react": "^19.3.0",
@@ -20,6 +23,9 @@
      "devDependencies": {
        "@playwright/test": "1.63.0",
        "@tailwindcss/postcss": "^4.2.0",
+        "@types/d3-force": "^3.0.10",
+        "@types/d3-selection": "^3.0.12",
+        "@types/d3-zoom": "^3.0.9",
        "@types/node": "^22.20.3",
        "@types/react": "^19.3.0",
        "@types/react-dom": "^19.3.0",
@@ -221,6 +227,16 @@

    "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],

+    "@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
+
+    "@types/d3-force": ["@types/d3-force@3.0.10", "", {}, "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw=="],
+
+    "@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
+
+    "@types/d3-selection": ["@types/d3-selection@3.0.12", "", {}, "sha512-Qe/KWYhEiIIxGs7HrAAjMfShxKldx19SJtr5zu53f3afPsdZNz7HHtdTLXo/kqeiWNXVycI24kSnfzBYkTzpgw=="],
+
+    "@types/d3-zoom": ["@types/d3-zoom@3.0.9", "", { "dependencies": { "@types/d3-interpolate": "*", "@types/d3-selection": "*" } }, "sha512-0sE1406XBYJGiqD3AusTl9ZqC//2mIXix51tbom25gDCA8ri4xnSZg28CaSE8Srl6FClqABUKfsn0qghgdepMA=="],
+
    "@types/deep-eql": ["@types/deep-eql@4.0.2", "", {}, "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw=="],

    "@types/emscripten": ["@types/emscripten@1.41.6", "", {}, "sha512-uN+9i8bFT5CUcZfyIEYDrSueACEyKGbUs5kC/72DGlZZoinh84sJfVV0i8UOJD1asdzkvLPBRrKs41kZ8MdEXg=="],
@@ -295,6 +311,28 @@

    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],

+    "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
+
+    "d3-dispatch": ["d3-dispatch@3.0.1", "", {}, "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="],
+
+    "d3-drag": ["d3-drag@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-selection": "3" } }, "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg=="],
+
+    "d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
+
+    "d3-force": ["d3-force@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-quadtree": "1 - 3", "d3-timer": "1 - 3" } }, "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg=="],
+
+    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
+
+    "d3-quadtree": ["d3-quadtree@3.0.1", "", {}, "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="],
+
+    "d3-selection": ["d3-selection@3.0.0", "", {}, "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="],
+
+    "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
+
+    "d3-transition": ["d3-transition@3.0.1", "", { "dependencies": { "d3-color": "1 - 3", "d3-dispatch": "1 - 3", "d3-ease": "1 - 3", "d3-interpolate": "1 - 3", "d3-timer": "1 - 3" }, "peerDependencies": { "d3-selection": "2 - 3" } }, "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w=="],
+
+    "d3-zoom": ["d3-zoom@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-drag": "2 - 3", "d3-interpolate": "1 - 3", "d3-selection": "2 - 3", "d3-transition": "2 - 3" } }, "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw=="],
+
    "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],

    "drizzle-orm": ["drizzle-orm@0.45.3", "", { "peerDependencies": { "@aws-sdk/client-rds-data": ">=3", "@cloudflare/workers-types": ">=4", "@electric-sql/pglite": ">=0.2.0", "@libsql/client": ">=0.10.0", "@libsql/client-wasm": ">=0.10.0", "@neondatabase/serverless": ">=0.10.0", "@netlify/db": ">=0.4.0", "@op-engineering/op-sqlite": ">=2", "@opentelemetry/api": "^1.4.1", "@planetscale/database": ">=1.13", "@prisma/client": "*", "@tidbcloud/serverless": "*", "@types/better-sqlite3": "*", "@types/pg": "*", "@types/sql.js": "*", "@upstash/redis": ">=1.34.7", "@vercel/postgres": ">=0.8.0", "@xata.io/client": "*", "better-sqlite3": ">=7", "bun-types": "*", "expo-sqlite": ">=14.0.0", "gel": ">=2", "knex": "*", "kysely": "*", "mysql2": ">=2", "pg": ">=8", "postgres": ">=3", "prisma": "*", "sql.js": ">=1", "sqlite3": ">=5" }, "optionalPeers": ["@aws-sdk/client-rds-data", "@cloudflare/workers-types", "@electric-sql/pglite", "@libsql/client", "@libsql/client-wasm", "@neondatabase/serverless", "@netlify/db", "@op-engineering/op-sqlite", "@opentelemetry/api", "@planetscale/database", "@prisma/client", "@tidbcloud/serverless", "@types/better-sqlite3", "@types/pg", "@types/sql.js", "@upstash/redis", "@vercel/postgres", "@xata.io/client", "better-sqlite3", "bun-types", "expo-sqlite", "gel", "knex", "kysely", "mysql2", "pg", "postgres", "prisma", "sql.js", "sqlite3"] }, "sha512-CAloER21cDdcgZ1OmjrZX82EeRNsdP+y0onX/eyoYDaYzki/adrAa91lzM5jWh7zZPK4qUbw/6LGv9J+A+uizA=="],
@@ -0,0 +1,59 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Terminal, type TerminalLine } from '@/components/ui/terminal'
+import type { EventDto } from '@/lib/game/events'
+
+// EVENT LOG tab — live data. Fetches /api/events on mount (Radix Tabs unmounts inactive tabs, so it
+// refetches whenever the tab is opened). One terminal line per event: T<turn> // <MESSAGE>, newest first.
+
+export function EventLogPanel() {
+  const [lines, setLines] = useState<TerminalLine[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch('/api/events')
+      .then(async (res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        return (await res.json()) as EventDto[]
+      })
+      .then((events) => {
+        if (!cancelled) {
+          setLines(
+            events.map((e) => ({
+              type: e.type === 'new_game' ? 'system' : 'output',
+              text: `T${e.turn} // ${e.message.toUpperCase()}`,
+              timestamp: new Date(e.createdAt).toLocaleTimeString('en-GB', { hour12: false }),
+            }))
+          )
+        }
+      })
+      .catch((err: unknown) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err))
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  if (error) {
+    return (
+      <div style={{ border: '1px solid var(--border)', background: 'var(--surface)', padding: '0.75rem' }}>
+        <span style={{ fontSize: '0.62rem', color: 'var(--color-red)', letterSpacing: '0.08em' }}>{error.toUpperCase()}</span>
+      </div>
+    )
+  }
+
+  if (!lines) {
+    return (
+      <div style={{ border: '1px solid var(--border)', background: 'var(--surface)', padding: '0.75rem' }}>
+        <span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', letterSpacing: '0.12em' }}>LOADING EVENT LOG…</span>
+      </div>
+    )
+  }
+
+  return (
+    <Terminal lines={lines} title="SHIP LOG" height="22rem" style={{ width: '100%' }} />
+  )
+}
@@ -1,40 +1,29 @@
 'use client'

-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import type { ExploreResult, SystemState } from '@/lib/game/save'
 import type { FoundItem } from '@/lib/game/world'

 // LOCAL SYSTEM tab — the bodies of the current system (planets + staggered moons) with an
-// EXPLORE button per unexplored row. Fetches /api/system on mount; explore responses are
-// applied directly (no polling). Turn-based: one scan costs a turn, each body once.
+// EXPLORE button per unexplored row. The parent (MissionControl) owns the /api/system state so
+// the right column's CARGO HOLD mirrors scans immediately; this panel reports each scan's
+// response up via onChanged and keeps only its own UI bits locally (no polling). Turn-based:
+// one scan costs a turn, each body once.

-export function LocalSystemPanel() {
-  const [state, setState] = useState<SystemState | null>(null)
+interface LocalSystemPanelProps {
+  system: SystemState | null
+  onChanged: (next: SystemState) => void
+}
+
+export function LocalSystemPanel({ system, onChanged }: LocalSystemPanelProps) {
  const [lastOutcome, setLastOutcome] = useState<FoundItem[] | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [exploringId, setExploringId] = useState<number | null>(null)

-  useEffect(() => {
-    let cancelled = false
-    fetch('/api/system')
-      .then(async (res) => {
-        if (!res.ok) throw new Error(`HTTP ${res.status}`)
-        return (await res.json()) as SystemState
-      })
-      .then((s) => {
-        if (!cancelled) setState(s)
-      })
-      .catch((err: unknown) => {
-        if (!cancelled) setError(err instanceof Error ? err.message : String(err))
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [])
-
-  const explore = useCallback(async (planetId: number) => {
+  const explore = useCallback(
+    async (planetId: number) => {
      setExploringId(planetId)
      try {
        const res = await fetch('/api/explore', {
@@ -44,26 +33,18 @@ export function LocalSystemPanel() {
        })
        const body = (await res.json()) as ExploreResult & { error?: string }
        if (!res.ok) throw new Error(body.error ?? `HTTP ${res.status}`)
-      setState(body) // fresh state straight from the response — no refetch needed
+        onChanged(body) // fresh state straight from the response — parent mirrors it to CARGO HOLD
        setLastOutcome(body.outcome)
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : String(err))
      } finally {
        setExploringId(null)
      }
-  }, [])
-
-  if (error && !state) {
-    return (
-      <div style={{ border: '1px solid var(--border)', background: 'var(--surface)', padding: '0.75rem' }}>
-        <span style={{ fontSize: '0.62rem', color: 'var(--color-red)', letterSpacing: '0.08em' }}>
-          SYSTEM SCAN OFFLINE // {error.toUpperCase()}
-        </span>
-      </div>
+    },
+    [onChanged]
  )
-  }

-  if (!state) {
+  if (!system) {
    return (
      <div style={{ border: '1px solid var(--border)', background: 'var(--surface)', padding: '0.75rem' }}>
        <span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', letterSpacing: '0.12em' }}>SCANNING SYSTEM…</span>
@@ -88,9 +69,9 @@ export function LocalSystemPanel() {
            textTransform: 'uppercase',
          }}
        >
-          EXPLORABLE WORLDS // {state.systemName.toUpperCase()} — TURN {state.turn}
+          EXPLORABLE WORLDS // {system.systemName.toUpperCase()} — TURN {system.turn}
        </div>
-        {state.planets.map((row, i) => {
+        {system.planets.map((row, i) => {
          const depth = row.parent !== null ? 1 : 0
          const badge = badgeFor(row.explored, row.hazard)
          return (
@@ -102,7 +83,7 @@ export function LocalSystemPanel() {
                alignItems: 'center',
                gap: '0.5rem',
                padding: depth ? '0.6rem 0.75rem 0.6rem 1.75rem' : '0.6rem 0.75rem',
-                borderBottom: i < state.planets.length - 1 ? '1px solid var(--border)' : 'none',
+                borderBottom: i < system.planets.length - 1 ? '1px solid var(--border)' : 'none',
              }}
            >
              <div style={{ overflow: 'hidden' }}>
@@ -117,7 +98,7 @@ export function LocalSystemPanel() {
                  {row.name}
                </div>
                <div style={{ fontSize: '0.57rem', color: 'var(--text-muted)', letterSpacing: '0.06em', marginTop: '2px' }}>
-                  {depth ? `MOON OF ${state.planets.find((p) => p.id === row.parent)?.name ?? '?'} // ${row.type}` : row.type}
+                  {depth ? `MOON OF ${system.planets.find((p) => p.id === row.parent)?.name ?? '?'} // ${row.type}` : row.type}
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
@@ -147,36 +128,6 @@ export function LocalSystemPanel() {
        </div>
      )}

-      <div style={{ border: '1px solid var(--border)', background: 'var(--surface)', overflow: 'hidden' }}>
-        <div
-          style={{
-            padding: '0.4rem 0.75rem',
-            borderBottom: '1px solid var(--border)',
-            background: 'var(--surface-raised)',
-            fontSize: '0.6rem',
-            color: 'var(--text-muted)',
-            letterSpacing: '0.12em',
-            textTransform: 'uppercase',
-          }}
-        >
-          CARGO HOLD // INVENTORY
-        </div>
-        {state.inventory.length === 0 ? (
-          <div style={{ padding: '0.6rem 0.75rem' }}>
-            <span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', letterSpacing: '0.08em' }}>EMPTY — EXPLORE WORLDS TO FIND THINGS</span>
-          </div>
-        ) : (
-          state.inventory.map((item) => (
-            <div key={`${item.kind}-${item.name}`} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.5rem 0.75rem' }}>
-              <span style={{ fontSize: '0.62rem', color: 'var(--text-secondary)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>
-                {item.name} <span style={{ color: 'var(--text-muted)' }}>// {item.kind}</span>
-              </span>
-              <Badge variant="ACTIVE">×{item.qty}</Badge>
-            </div>
-          ))
-        )}
-      </div>
-
      {error && (
        <div style={{ border: '1px solid var(--border)', background: 'var(--surface)', padding: '0.5rem 0.75rem' }}>
          <span style={{ fontSize: '0.62rem', color: 'var(--color-red)', letterSpacing: '0.08em' }}>SCAN FAILED // {error.toUpperCase()}</span>
@@ -1,29 +1,30 @@
 'use client'

-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Badge } from '@/components/ui/badge'
 import { Panel, PanelContent, PanelHeader, PanelTitle } from '@/components/ui/panel'
 import { Progress } from '@/components/ui/progress'
 import { StatCard } from '@/components/ui/stat-card'
 import { StatusGrid, type SystemEntry } from '@/components/ui/status-grid'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Terminal, type TerminalLine } from '@/components/ui/terminal'
 import { CrewPanel } from '@/components/crew-panel'
+import { EventLogPanel } from '@/components/event-log'
 import { LocalSystemPanel } from '@/components/local-system'
 import { MissionPanel } from '@/components/missions'
 import { ShipSystemsPanel } from '@/components/ship-systems'
 import { SkillTreePanel } from '@/components/skill-tree'
 import { WorldMapPanel } from '@/components/world-map'
 import { CREW_CAPACITY } from '@/lib/game/ship-costs'
-import type { CrewDto } from '@/lib/game/save'
+import type { CrewDto, SystemState } from '@/lib/game/save'
 import type { ShipState } from '@/lib/game/ship'
 import type { TechDto } from '@/lib/game/tech'
+import pkg from '@/package.json'

 // Interface base: layout + visual treatment rebuilt from the scificn-ui Mission Control
-// showcase (src/app/_pages/showcase/mission-control-content.tsx in baxy5/scificn-ui). The
-// WORLD MAP, LOCAL SYSTEM, CREW, SHIP SYSTEMS, SKILL TREE and MISSIONS tabs render live data
-// (/api/world, /api/system, /api/crew, /api/ship, /api/tech, /api/missions); the EVENT LOG tab
-// keeps placeholder content until its own issue lands. Single player, no auth, by design.
+// showcase (src/app/_pages/showcase/mission-control-content.tsx in baxy5/scificn-ui). All seven
+// tabs render live data (/api/world, /api/system, /api/crew, /api/ship, /api/tech, /api/missions,
+// /api/events); the right column's CARGO HOLD renders from the lifted /api/system state. Single
+// player, no auth, by design.

 function useNarrow(threshold = 900): boolean {
  const [narrow, setNarrow] = useState(
@@ -37,46 +38,25 @@ function useNarrow(threshold = 900): boolean {
  return narrow
 }

-function now(): string {
-  return new Date().toLocaleTimeString('en-GB', { hour12: false })
-}
-
-// ── Placeholder content (no game logic — real values land with the turn engine) ──
-
-const encounters = [
-  { name: 'DERELICT FREIGHTER', when: 'T-07:14', id: '#E-102' },
-  { name: 'PIRATE SKIRMISH', when: 'T-22:40', id: '#E-103' },
-  { name: 'ANOMALY FIELD', when: 'T-48:12', id: '#E-104' },
-]
-
-const shipData = [
-  { label: 'TOTAL MODULES', value: '34' },
-  { label: 'HULL INTEGRITY', value: '87%' },
-  { label: 'REACTOR OUTPUT', value: '94.2%' },
-  { label: 'CREW ACTIVE', value: '3 / 6' },
-  { label: 'SECTOR', value: '7G // DRIFT LANE' },
-  { label: 'DRIFT VELOCITY', value: '0.4 KM/S' },
-  { label: 'TURN', value: '12' },
-]
-
-const logLines: TerminalLine[] = [
-  { type: 'system', text: 'SPACEWANDERER // INITIALIZING SHIP SYSTEMS...', timestamp: now() },
-  { type: 'output', text: 'HULL SCAN COMPLETE — INTEGRITY 87%', timestamp: now() },
-  { type: 'output', text: 'REACTOR OUTPUT STABLE AT 94.2%', timestamp: now() },
-  { type: 'output', text: 'CREW MANIFEST LOADED — 3 ACTIVE PERSONNEL', timestamp: now() },
-  { type: 'warn', text: 'WEAPONS OFFLINE — MODULE NOT INSTALLED', timestamp: now() },
-  { type: 'system', text: 'ALL SYSTEMS NOMINAL. AWAITING FIRST TURN.', timestamp: now() },
-]
+// Must match the TabsTrigger values in the render below — used to validate the tab persisted for
+// #27 (an unknown stored value falls back to the default).
+const TAB_IDS = ['world-map', 'local-system', 'crew', 'ship-systems', 'skill-tree', 'missions', 'event-log']
+const ACTIVE_TAB_KEY = 'sw-active-tab'

 export function MissionControl() {
  const narrow = useNarrow()
  const [tick, setTick] = useState(0)
-  // Ship state is owned here (not in the tab panel) so the left column mirrors ship actions
-  // immediately; the SHIP SYSTEMS tab applies each action's response via setShip. Crew count
-  // feeds the roster bar — refetched on page load, like the other panels.
+  // Ship + system state is owned here (not in the tab panels): the SHIP SYSTEMS tab mirrors ship
+  // actions via setShip, and the right column's CARGO HOLD renders from the lifted inventory —
+  // the LOCAL SYSTEM tab reports each scan's response up via setSystem. Crew count feeds the
+  // roster bar — refetched on page load, like the other panels.
  const [ship, setShip] = useState<ShipState | null>(null)
+  const [system, setSystem] = useState<SystemState | null>(null)
  const [techs, setTechs] = useState<TechDto[] | null>(null)
  const [crewCount, setCrewCount] = useState<number | null>(null)
+  // #27 — the active tab survives a page refresh. Restored from localStorage on mount; null until
+  // then so SSR and the first client render agree on the default tab (no hydration mismatch).
+  const [activeTab, setActiveTab] = useState<string | null>(null)

  useEffect(() => {
    let cancelled = false
@@ -89,6 +69,15 @@ export function MissionControl() {
        if (!cancelled) setShip(s)
      })
      .catch(() => {}) // left column + tab keep their loading state on failure
+    fetch('/api/system')
+      .then(async (res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        return (await res.json()) as SystemState
+      })
+      .then((s) => {
+        if (!cancelled) setSystem(s)
+      })
+      .catch(() => {})
    fetch('/api/tech')
      .then(async (res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`)
@@ -117,6 +106,25 @@ export function MissionControl() {
    return () => clearInterval(id)
  }, [])

+  // #27 — restore the persisted tab once on mount (validated against TAB_IDS).
+  useEffect(() => {
+    const stored = window.localStorage.getItem(ACTIVE_TAB_KEY)
+    if (stored && TAB_IDS.includes(stored)) setActiveTab(stored)
+  }, [])
+
+  // #30 — re-fetch /api/system after a jump: WorldMapPanel owns the world state, so without this
+  // the lifted system state stays on the previous system until a page refresh. Same failure
+  // policy as the mount fetch — keep the old state on error.
+  const refreshSystem = useCallback(() => {
+    fetch('/api/system')
+      .then(async (res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        return (await res.json()) as SystemState
+      })
+      .then((s) => setSystem(s))
+      .catch(() => {})
+  }, [])
+
  const timeStr = new Date().toLocaleTimeString('en-GB', { hour12: false })

  // Slugs of the researched techs — drives the effective caps + build gates in the SHIP SYSTEMS
@@ -127,6 +135,10 @@ export function MissionControl() {
    <div
      style={{
        minHeight: '100vh',
+        // Wide layout is pinned to the viewport so only the columns scroll internally (#21);
+        // narrow keeps natural flow with body scroll.
+        height: narrow ? undefined : '100vh',
+        overflow: narrow ? undefined : 'hidden',
        background: 'var(--background)',
        display: 'flex',
        flexDirection: 'column',
@@ -157,7 +169,7 @@ export function MissionControl() {
            flexShrink: 0,
          }}
        >
-          ◄ SHIP
+          v{pkg.version}
        </span>

        <span style={{ color: 'var(--border)', flexShrink: 0 }}>│</span>
@@ -216,6 +228,7 @@ export function MissionControl() {
      <div
        style={{
          flex: 1,
+          minHeight: 0, // let the grid below be constrained to the viewport instead of growing it
          display: 'flex',
          flexDirection: 'column',
          gap: '1px',
@@ -262,8 +275,9 @@ export function MissionControl() {
        <div
          style={{
            flex: 1,
+            minHeight: 0, // same — the columns' overflowY:auto then scrolls inside their tracks
            display: 'grid',
-            gridTemplateColumns: narrow ? '1fr' : '260px 1fr 240px',
+            gridTemplateColumns: narrow ? '1fr' : '320px 1fr 360px',
            gap: '1px',
            background: 'var(--border)',
          }}
@@ -311,11 +325,34 @@ export function MissionControl() {
              <PanelContent>
                {ship ? (
                  // Bars driven by real values: hull/reactor from system levels (level × 20, capped),
-                  // crew roster vs the display cap.
+                  // crew roster vs the display cap; SECTOR/TURN rows folded in from the old SHIP DATA
+                  // placeholder (the rest of it duplicated these bars or had no game equivalent).
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.875rem' }}>
                    <Progress label="HULL INTEGRITY" value={Math.min(100, (ship.systems.find((s) => s.type === 'HULL')?.level ?? 0) * 20)} />
                    <Progress label="REACTOR OUTPUT" value={Math.min(100, (ship.systems.find((s) => s.type === 'REACTOR')?.level ?? 0) * 20)} />
                    <Progress label={`CREW ROSTER / ${CREW_CAPACITY}`} value={Math.round(((crewCount ?? 0) / CREW_CAPACITY) * 100)} />
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                      {[
+                        { label: 'SECTOR', value: (system?.systemName ?? '—').toUpperCase() },
+                        { label: 'TURN', value: String(ship.turn) },
+                      ].map((item, i) => (
+                        <div
+                          key={item.label}
+                          style={{
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            padding: '0.4rem 0',
+                            borderBottom: i < 1 ? '1px solid var(--border)' : 'none',
+                          }}
+                        >
+                          <span style={{ fontSize: '0.6rem', color: 'var(--text-muted)', letterSpacing: '0.1em' }}>{item.label}</span>
+                          <span style={{ fontSize: '0.78rem', color: 'var(--color-green)', textShadow: 'var(--text-glow-green)', letterSpacing: '0.04em', fontWeight: 600 }}>
+                            {item.value}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
                  </div>
                ) : (
                  <span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', letterSpacing: '0.12em' }}>LOADING…</span>
@@ -335,7 +372,9 @@ export function MissionControl() {
              overflowY: 'auto',
            }}
          >
-            <Panel notch="md" style={{ flex: 1 }}>
+            {/* flex column + minHeight:0 so the tab content scrolls inside the panel (#21) —
+                the Panel root's default overflow:hidden would otherwise clip it */}
+            <Panel notch="md" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
              <PanelHeader>
                <PanelTitle>OPERATIONS // SHIP COMMAND</PanelTitle>
                <div style={{ marginLeft: 'auto', display: 'flex', gap: '0.5rem' }}>
@@ -343,13 +382,27 @@ export function MissionControl() {
                </div>
              </PanelHeader>

-              <PanelContent style={{ padding: 0 }}>
-                <Tabs defaultValue="world-map">
+              <PanelContent style={{ padding: 0, flex: 1, minHeight: 0, overflowY: 'auto' }}>
+                {/* Flex column at least pane-tall so a tab can fill it (#36). min-height, not height:
+                    tall tabs grow the box to their content, which keeps the sticky tab bar's containing
+                    block spanning the whole scroll range (a capped height releases the pin on deep
+                    scrolls) and means items never overflow the box, so nothing gets shrink-squashed. */}
+                <Tabs
+                  value={activeTab ?? 'world-map'}
+                  onValueChange={(v) => {
+                    setActiveTab(v)
+                    window.localStorage.setItem(ACTIVE_TAB_KEY, v) // #27 — keep the tab across refreshes
+                  }}
+                  style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}
+                >
                    <TabsList
                      style={{
                        padding: '0 1rem',
-                      background: 'var(--surface-raised)',
+                        background: 'var(--surface-raised)', // opaque — content scrolls under it (#31)
                        overflowX: 'auto',
+                        position: 'sticky', // #31 — pinned in both modes: to the top of the OPERATIONS
+                        top: 0, // scroll area (wide) and to the viewport when the body scrolls (narrow)
+                        zIndex: 1,
                      }}
                    >
                    <TabsTrigger value="world-map">WORLD MAP</TabsTrigger>
@@ -361,14 +414,19 @@ export function MissionControl() {
                    <TabsTrigger value="event-log">EVENT LOG</TabsTrigger>
                  </TabsList>

-                  {/* WORLD MAP TAB — live data from /api/world */}
-                  <TabsContent value="world-map" style={{ margin: 0, padding: '1rem' }}>
-                    <WorldMapPanel height={380} />
+                  {/* WORLD MAP TAB — live data from /api/world; fills the whole pane (#36). Wide mode:
+                      flex column so the panel can fill it with pure flex sizing (a min-height-only
+                      container breaks percentage resolution, so no height:'100%' anywhere in this chain). */}
+                  <TabsContent
+                    value="world-map"
+                    style={{ margin: 0, padding: '1rem', ...(!narrow ? { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 } : {}) }}
+                  >
+                    <WorldMapPanel height={380} narrow={narrow} onJumped={refreshSystem} />
                  </TabsContent>

-                  {/* LOCAL SYSTEM TAB — live data from /api/system */}
+                  {/* LOCAL SYSTEM TAB — live data (state owned by MissionControl; scans report up) */}
                  <TabsContent value="local-system" style={{ margin: 0, padding: '1rem' }}>
-                    <LocalSystemPanel />
+                    <LocalSystemPanel system={system} onChanged={setSystem} />
                  </TabsContent>

                  {/* CREW TAB — live data from /api/crew */}
@@ -393,19 +451,14 @@ export function MissionControl() {

                  {/* EVENT LOG TAB */}
                  <TabsContent value="event-log" style={{ margin: 0, padding: '1rem' }}>
-                    <Terminal
-                      lines={logLines}
-                      title="SHIP LOG // PLACEHOLDER FEED"
-                      height="22rem"
-                      style={{ width: '100%' }}
-                    />
+                    <EventLogPanel />
                  </TabsContent>
                </Tabs>
              </PanelContent>
            </Panel>
          </div>

-          {/* ── RIGHT: UPCOMING ENCOUNTERS + SHIP DATA ── */}
+          {/* ── RIGHT: CARGO HOLD (persistent — inventory lifted from /api/system) ── */}
          <div
            style={{
              background: 'var(--background)',
@@ -418,110 +471,34 @@ export function MissionControl() {
          >
            <Panel notch="sm">
              <PanelHeader>
-                <PanelTitle>UPCOMING ENCOUNTERS</PanelTitle>
+                <PanelTitle>CARGO HOLD // INVENTORY</PanelTitle>
+                {system && (
                  <div style={{ marginLeft: 'auto' }}>
-                  <Badge variant="SCANNING">{encounters.length} QUEUED</Badge>
-                </div>
-              </PanelHeader>
-              <PanelContent style={{ padding: 0 }}>
-                <div style={{ display: 'flex', flexDirection: 'column' }}>
-                  {encounters.map((enc, i) => {
-                    const isNext = i === 0
-                    const isLast = i === encounters.length - 1
-                    return (
-                      <div
-                        key={enc.id}
-                        style={{
-                          padding: '0.6rem 0.75rem',
-                          borderBottom: isLast ? 'none' : '1px solid var(--border)',
-                          background: isNext ? 'var(--surface-raised)' : 'transparent',
-                        }}
-                      >
-                        <div
-                          style={{
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'flex-start',
-                            gap: '0.5rem',
-                          }}
-                        >
-                          <div style={{ overflow: 'hidden', flex: 1 }}>
-                            <div
-                              style={{
-                                fontSize: '0.68rem',
-                                color: isNext ? 'var(--text-secondary)' : 'var(--text-muted)',
-                                letterSpacing: '0.04em',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                whiteSpace: 'nowrap',
-                                textTransform: 'uppercase',
-                              }}
-                            >
-                              {enc.name}
-                            </div>
-                            <div
-                              style={{
-                                fontSize: '0.57rem',
-                                color: 'var(--text-muted)',
-                                letterSpacing: '0.06em',
-                                marginTop: '2px',
-                              }}
-                            >
-                              {enc.when} // {enc.id}
-                            </div>
-                          </div>
-                          <Badge variant={isNext ? 'WARNING' : 'SCANNING'}>
-                            {isNext ? 'NEXT' : 'SCHED'}
+                    <Badge variant={system.inventory.length > 0 ? 'ACTIVE' : 'OFFLINE'}>
+                      {system.inventory.reduce((n, i) => n + i.qty, 0)} UNITS
                    </Badge>
                  </div>
-                      </div>
-                    )
-                  })}
-                </div>
-              </PanelContent>
-            </Panel>
-
-            <Panel notch="sm">
-              <PanelHeader>
-                <PanelTitle>SHIP DATA</PanelTitle>
+                )}
              </PanelHeader>
-              <PanelContent>
-                <div style={{ display: 'flex', flexDirection: 'column' }}>
-                  {shipData.map((item, i) => (
-                    <div
-                      key={item.label}
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        padding: '0.4rem 0',
-                        borderBottom:
-                          i < shipData.length - 1 ? '1px solid var(--border)' : 'none',
-                      }}
-                    >
-                      <span
-                        style={{
-                          fontSize: '0.6rem',
-                          color: 'var(--text-muted)',
-                          letterSpacing: '0.1em',
-                        }}
-                      >
-                        {item.label}
-                      </span>
-                      <span
-                        style={{
-                          fontSize: '0.78rem',
-                          color: 'var(--color-green)',
-                          textShadow: 'var(--text-glow-green)',
-                          letterSpacing: '0.04em',
-                          fontWeight: 600,
-                        }}
-                      >
-                        {item.value}
-                      </span>
+              <PanelContent style={{ padding: 0 }}>
+                {!system ? (
+                  <div style={{ padding: '0.6rem 0.75rem' }}>
+                    <span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', letterSpacing: '0.12em' }}>LOADING…</span>
                  </div>
-                  ))}
+                ) : system.inventory.length === 0 ? (
+                  <div style={{ padding: '0.6rem 0.75rem' }}>
+                    <span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', letterSpacing: '0.08em' }}>EMPTY — EXPLORE WORLDS TO FIND THINGS</span>
                  </div>
+                ) : (
+                  system.inventory.map((item) => (
+                    <div key={`${item.kind}-${item.name}`} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.5rem 0.75rem' }}>
+                      <span style={{ fontSize: '0.62rem', color: 'var(--text-secondary)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>
+                        {item.name} <span style={{ color: 'var(--text-muted)' }}>// {item.kind}</span>
+                      </span>
+                      <Badge variant="ACTIVE">×{item.qty}</Badge>
+                    </div>
+                  ))
+                )}
              </PanelContent>
            </Panel>
          </div>
@@ -1,299 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { cn } from '@/lib/utils'
-
-export type NodeGraphVariant = 'DEFAULT' | 'ACTIVE' | 'WARNING' | 'CRITICAL'
-export type NodeStatus = 'ACTIVE' | 'OFFLINE' | 'WARNING' | 'CRITICAL' | 'NEUTRAL'
-
-export interface NodeGraphNode {
-  id: string
-  label: string
-  x: number       // 0–100 coordinate space
-  y: number
-  status?: NodeStatus
-  sublabel?: string
-}
-
-export interface NodeGraphEdge {
-  from: string
-  to: string
-  label?: string
-  animated?: boolean
-}
-
-export interface NodeGraphProps extends React.HTMLAttributes<HTMLDivElement> {
-  nodes: NodeGraphNode[]
-  edges: NodeGraphEdge[]
-  variant?: NodeGraphVariant
-  title?: string
-  height?: number
-  directed?: boolean
-}
-
-const VARIANT_COLORS: Record<NodeGraphVariant, string> = {
-  DEFAULT:  'var(--text-secondary)',
-  ACTIVE:   'var(--color-green)',
-  WARNING:  'var(--color-amber)',
-  CRITICAL: 'var(--color-red)',
-}
-
-const STATUS_COLOR: Record<NodeStatus, string> = {
-  ACTIVE:   'var(--color-green)',
-  OFFLINE:  'var(--border)',
-  WARNING:  'var(--color-amber)',
-  CRITICAL: 'var(--color-red)',
-  NEUTRAL:  'var(--text-muted)',
-}
-
-const NODE_W = 100
-const NODE_H = 36
-
-const NodeGraph = React.forwardRef<HTMLDivElement, NodeGraphProps>(
-  (
-    {
-      className,
-      nodes,
-      edges,
-      variant  = 'ACTIVE',
-      title,
-      height   = 320,
-      directed = false,
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    const containerRef = React.useRef<HTMLDivElement>(null)
-    const [svgW, setSvgW] = React.useState(600)
-    const [hovered, setHovered] = React.useState<string | null>(null)
-
-    React.useEffect(() => {
-      if (!containerRef.current) return
-      const ro = new ResizeObserver(entries => {
-        setSvgW(entries[0].contentRect.width)
-      })
-      ro.observe(containerRef.current)
-      return () => ro.disconnect()
-    }, [])
-
-    const color = VARIANT_COLORS[variant]
-    const markerId = `arrow-${variant}`
-
-    function nodePx(node: NodeGraphNode) {
-      return (node.x / 100) * svgW
-    }
-
-    function nodePy(node: NodeGraphNode) {
-      return (node.y / 100) * height
-    }
-
-    function edgeEndpoints(fromNode: NodeGraphNode, toNode: NodeGraphNode) {
-      const fx = nodePx(fromNode)
-      const fy = nodePy(fromNode)
-      const tx = nodePx(toNode)
-      const ty = nodePy(toNode)
-      const dx = tx - fx
-      const dy = ty - fy
-      const dist = Math.sqrt(dx * dx + dy * dy)
-      if (dist < 1) return { x1: fx, y1: fy, x2: tx, y2: ty }
-
-      const ux = dx / dist
-      const uy = dy / dist
-      const hw = NODE_W / 2
-      const hh = NODE_H / 2
-
-      const tW = Math.abs(ux) > 0.001 ? hw / Math.abs(ux) : Infinity
-      const tH = Math.abs(uy) > 0.001 ? hh / Math.abs(uy) : Infinity
-      const t  = Math.min(tW, tH)
-
-      return {
-        x1: fx + ux * t,
-        y1: fy + uy * t,
-        x2: tx - ux * t,
-        y2: ty - uy * t,
-      }
-    }
-
-    const nodeMap = new Map(nodes.map(n => [n.id, n]))
-    const hasAnimatedEdge = edges.some(e => e.animated)
-
-    return (
-      <div
-        ref={ref}
-        className={cn(className)}
-        style={{
-          border:     '1px solid var(--border)',
-          background: 'var(--surface)',
-          fontFamily: 'var(--font-mono)',
-          overflow:   'hidden',
-          ...style,
-        }}
-        {...props}
-      >
-        {title && (
-          <div
-            style={{
-              padding:       '0.4rem 0.75rem',
-              borderBottom:  '1px solid var(--border)',
-              background:    'var(--surface-raised)',
-              fontSize:      '0.6rem',
-              color:         'var(--text-muted)',
-              letterSpacing: '0.12em',
-              textTransform: 'uppercase',
-            }}
-          >
-            {title}
-          </div>
-        )}
-
-        <div ref={containerRef} style={{ width: '100%', height: `${height}px` }}>
-          <svg width={svgW} height={height} style={{ display: 'block' }}>
-            <defs>
-              {directed && (
-                <marker
-                  id={markerId}
-                  markerWidth="6"
-                  markerHeight="6"
-                  refX="6"
-                  refY="3"
-                  orient="auto"
-                >
-                  <path d="M 0 0 L 6 3 L 0 6 Z" fill={color} />
-                </marker>
-              )}
-            </defs>
-
-            {hasAnimatedEdge && (
-              <style>{`
-                @keyframes nodeGraphDash { to { stroke-dashoffset: -8; } }
-              `}</style>
-            )}
-
-            {/* Edges */}
-            {edges.map((edge, ei) => {
-              const fromNode = nodeMap.get(edge.from)
-              const toNode   = nodeMap.get(edge.to)
-              if (!fromNode || !toNode) return null
-
-              const { x1, y1, x2, y2 } = edgeEndpoints(fromNode, toNode)
-              const mx = (x1 + x2) / 2
-              const my = (y1 + y2) / 2
-
-              return (
-                <g key={ei}>
-                  <line
-                    x1={x1.toFixed(1)}
-                    y1={y1.toFixed(1)}
-                    x2={x2.toFixed(1)}
-                    y2={y2.toFixed(1)}
-                    stroke={color}
-                    strokeWidth={1}
-                    opacity={0.5}
-                    strokeDasharray={edge.animated ? '4 4' : undefined}
-                    markerEnd={directed ? `url(#${markerId})` : undefined}
-                    style={edge.animated
-                      ? { animation: 'nodeGraphDash 0.5s linear infinite' }
-                      : undefined}
-                  />
-                  {edge.label && (
-                    <text
-                      x={mx.toFixed(1)}
-                      y={my.toFixed(1)}
-                      textAnchor="middle"
-                      dominantBaseline="middle"
-                      fontSize={8}
-                      fill="var(--text-muted)"
-                      fontFamily="var(--font-mono)"
-                    >
-                      {edge.label}
-                    </text>
-                  )}
-                </g>
-              )
-            })}
-
-            {/* Nodes */}
-            {nodes.map(node => {
-              const cx = nodePx(node)
-              const cy = nodePy(node)
-              const isHovered   = hovered === node.id
-              const statusColor = node.status ? STATUS_COLOR[node.status] : color
-
-              return (
-                <g
-                  key={node.id}
-                  onMouseEnter={() => setHovered(node.id)}
-                  onMouseLeave={() => setHovered(null)}
-                  style={{ cursor: 'default' }}
-                >
-                  {/* Background */}
-                  <rect
-                    x={(cx - NODE_W / 2).toFixed(1)}
-                    y={(cy - NODE_H / 2).toFixed(1)}
-                    width={NODE_W}
-                    height={NODE_H}
-                    fill="var(--surface-raised)"
-                  />
-                  {/* Hover tint */}
-                  {isHovered && (
-                    <rect
-                      x={(cx - NODE_W / 2).toFixed(1)}
-                      y={(cy - NODE_H / 2).toFixed(1)}
-                      width={NODE_W}
-                      height={NODE_H}
-                      fill={statusColor}
-                      fillOpacity={0.12}
-                    />
-                  )}
-                  {/* Border */}
-                  <rect
-                    x={(cx - NODE_W / 2).toFixed(1)}
-                    y={(cy - NODE_H / 2).toFixed(1)}
-                    width={NODE_W}
-                    height={NODE_H}
-                    fill="none"
-                    stroke={statusColor}
-                    strokeWidth={isHovered ? 1.5 : 1}
-                  />
-
-                  {/* Label */}
-                  <text
-                    x={cx.toFixed(1)}
-                    y={(node.sublabel ? cy - 5 : cy).toFixed(1)}
-                    textAnchor="middle"
-                    dominantBaseline="middle"
-                    fontSize={10}
-                    fill={statusColor}
-                    fontFamily="var(--font-mono)"
-                    fontWeight="600"
-                  >
-                    {node.label.toUpperCase()}
-                  </text>
-
-                  {/* Sublabel */}
-                  {node.sublabel && (
-                    <text
-                      x={cx.toFixed(1)}
-                      y={(cy + 8).toFixed(1)}
-                      textAnchor="middle"
-                      dominantBaseline="middle"
-                      fontSize={8}
-                      fill="var(--text-muted)"
-                      fontFamily="var(--font-mono)"
-                    >
-                      {node.sublabel}
-                    </text>
-                  )}
-                </g>
-              )
-            })}
-          </svg>
-        </div>
-      </div>
-    )
-  }
-)
-NodeGraph.displayName = 'NodeGraph'
-
-export { NodeGraph }
@@ -1,23 +1,58 @@
 'use client'

-import { useCallback, useEffect, useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { NodeGraph } from '@/components/ui/node-graph'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { forceCenter, forceCollide, forceLink, forceManyBody, forceSimulation } from 'd3-force'
+import type { SimulationNodeDatum } from 'd3-force'
+import { select } from 'd3-selection'
+import { zoom, zoomIdentity } from 'd3-zoom'
 import type { WorldState } from '@/lib/game/save'

-// WORLD MAP tab — the first live game panel: renders real world state from /api/world and
-// offers a jump button per system adjacent to the current one (NodeGraph nodes are not
-// clickable upstream, so the affordance lives in this list). Turn-based: fetch on mount,
-// refetch via the jump response — no polling.
+// WORLD MAP tab — real world state from /api/world on a force-directed chart (d3-force) with
+// pan + zoom (d3-zoom), per #28. Clicking a system adjacent to the current one jumps there
+// (same POST /api/jump flow as before); the current and unreachable systems are dimmed and not
+// clickable, and every node is locked while a jump is in flight. Turn-based: fetch on mount,
+// refetch via the jump response — no polling. In wide mode (#36) the chart fills the whole tab
+// pane (no internal scrollbar); narrow keeps a fixed fallback height since the page scrolls naturally there.

 interface WorldMapPanelProps {
-  height?: number
+  height?: number // fallback chart height when the pane gives no definite space (narrow mode)
+  narrow?: boolean
+  onJumped?: () => void // #30 — let the parent refresh /api/system after a successful jump
 }

-export function WorldMapPanel({ height = 380 }: WorldMapPanelProps) {
+type NodeStatus = 'current' | 'jumpable' | 'offline'
+
+// d3-force mutates these in place; the whole scene is rebuilt from scratch on every world change.
+interface ChartNode extends SimulationNodeDatum {
+  id: number
+  name: string // already uppercased — doubles as the accessible label
+  status: NodeStatus
+  sublabel: string
+}
+
+// forceLink replaces the numeric ids with node references once initialized.
+interface ChartLink {
+  source: number | ChartNode
+  target: number | ChartNode
+}
+
+const NODE_W = 100
+const NODE_H = 36
+
+// Palette carried over from the old hand-rolled chart.
+const STATUS_COLOR: Record<NodeStatus, string> = {
+  current: 'var(--color-green)',
+  jumpable: 'var(--text-muted)',
+  offline: 'var(--border)',
+}
+
+export function WorldMapPanel({ height = 380, narrow = false, onJumped }: WorldMapPanelProps) {
+  // Wide mode: the flex chain (Tabs → TabsContent → this panel) provides a definite pane size to fill (#36).
+  const filling = !narrow
  const [world, setWorld] = useState<WorldState | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [jumpingId, setJumpingId] = useState<number | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    let cancelled = false
@@ -37,7 +72,12 @@ export function WorldMapPanel({ height = 380 }: WorldMapPanelProps) {
    }
  }, [])

+  // Ref guard so a double-click can't start two jumps before the re-render locks the nodes.
+  const jumpingRef = useRef(false)
+
  const jump = useCallback(async (systemId: number) => {
+    if (jumpingRef.current) return
+    jumpingRef.current = true
    setJumpingId(systemId)
    try {
      const res = await fetch('/api/jump', {
@@ -48,12 +88,164 @@ export function WorldMapPanel({ height = 380 }: WorldMapPanelProps) {
      const body = (await res.json()) as WorldState & { error?: string }
      if (!res.ok) throw new Error(body.error ?? `HTTP ${res.status}`)
      setWorld(body) // fresh state straight from the response — no refetch needed
+      onJumped?.() // #30 — parent re-fetches /api/system (LOCAL SYSTEM + CARGO HOLD mirror it)
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : String(err))
    } finally {
+      jumpingRef.current = false
      setJumpingId(null)
    }
-  }, [])
+  }, [onJumped])
+
+  // Rebuild the chart on every world/lock change — the force layout re-settles from the API's
+  // coordinates, so nodes visibly rearrange after each jump (#28).
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container || !world) return
+
+    // Measured pane size (#36): the flex chain gives a definite box in wide mode; `height` is the
+    // fallback when the container has no resolved size yet (narrow flow, or tab hidden on load).
+    const W = container.clientWidth || 800
+    const H = container.clientHeight || height
+    const current = world.systems.find((s) => s.current)!
+    // Systems one jump away — the only clickable chart fields (the same set as before).
+    const reachableIds = new Set(
+      world.edges.filter(([a, b]) => a === current.id || b === current.id).map(([a, b]) => (a === current.id ? b : a))
+    )
+
+    const nodes: ChartNode[] = world.systems.map((s) => ({
+      id: s.id,
+      name: s.name.toUpperCase(),
+      status: s.current ? 'current' : reachableIds.has(s.id) ? 'jumpable' : 'offline',
+      sublabel: s.current
+        ? 'CURRENT'
+        : reachableIds.has(s.id)
+          ? (s.discovered ? 'DISCOVERED // JUMP' : 'UNKNOWN // JUMP')
+          : s.discovered ? 'DISCOVERED' : 'UNKNOWN',
+      x: (s.x / 100) * W, // seed from the API coordinates so the layout settles near the old chart
+      y: (s.y / 100) * H,
+    }))
+    const links: ChartLink[] = world.edges.map(([a, b]) => ({ source: a, target: b }))
+
+    // width/height 100% + fixed viewBox: the scene scales with the pane on window resizes without
+    // rebuilding (pan/zoom stay accurate — d3 maps pointers through the SVG transform matrix).
+    const svg = select(container)
+      .append('svg')
+      .attr('width', '100%')
+      .attr('height', '100%')
+      .attr('viewBox', `0 0 ${W} ${H}`)
+      .style('display', 'block')
+
+    const root = svg.append('g')
+    const edgeLayer = root.append('g')
+    const nodeLayer = root.append('g')
+
+    // Pan + zoom (#28): wheel/drag on the chart, transform applied to the scene root. d3-zoom does
+    // NOT swallow the trailing click after a drag, so track real pans and ignore node clicks that
+    // end one (mousedown on a node, tiny drag, release over the same node).
+    let panned = false
+    const zoomBehavior = zoom<SVGSVGElement, unknown>()
+      .scaleExtent([0.15, 5])
+      .on('start', () => {
+        panned = false
+      })
+      .on('zoom', (event) => {
+        root.attr('transform', event.transform.toString())
+        // Any user gesture (drag or trackpad pan); a clean click's own mousedown re-fires
+        // 'start' and resets this before its click lands. Programmatic fits have no sourceEvent.
+        if (event.sourceEvent) panned = true
+      })
+    svg.call(zoomBehavior)
+
+    // The settled force layout is bigger than the chart box for large saves, so once the
+    // simulation stops, zoom-to-fit: frame every node inside the container with padding.
+    const fitToNodes = () => {
+      let minX = Infinity
+      let minY = Infinity
+      let maxX = -Infinity
+      let maxY = -Infinity
+      for (const n of nodes) {
+        minX = Math.min(minX, (n.x ?? 0) - NODE_W / 2)
+        minY = Math.min(minY, (n.y ?? 0) - NODE_H / 2)
+        maxX = Math.max(maxX, (n.x ?? 0) + NODE_W / 2)
+        maxY = Math.max(maxY, (n.y ?? 0) + NODE_H / 2)
+      }
+      const pad = 16
+      const scale = Math.min(W / (maxX - minX + pad * 2), H / (maxY - minY + pad * 2))
+      const tx = W / 2 - scale * ((minX + maxX) / 2)
+      const ty = H / 2 - scale * ((minY + maxY) / 2)
+      svg.call(zoomBehavior.transform, zoomIdentity.translate(tx, ty).scale(scale))
+    }
+
+    const edgeSel = edgeLayer.selectAll('line').data(links).enter().append('line')
+      .attr('stroke', 'var(--color-green)')
+      .attr('stroke-width', 1)
+      .attr('opacity', 0.5)
+
+    const nodeSel = nodeLayer.selectAll<SVGGElement, ChartNode>('g').data(nodes).enter().append('g')
+
+    // Same accessible contract as the old chart: only jumpable nodes are role=button with their
+    // name as the accessible label (e2e clicks them by role/name); all locked while a jump is in flight.
+    nodeSel.filter((d) => d.status === 'jumpable' && jumpingId === null)
+      .attr('role', 'button')
+      .attr('tabindex', 0)
+      .attr('aria-label', (d) => d.name)
+      .style('cursor', 'pointer')
+      .on('click', (event: MouseEvent, d) => {
+        if (!panned) void jump(d.id) // a real pan ends with a click too — don't jump on that one
+      })
+      .on('keydown', (event: KeyboardEvent, d) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          void jump(d.id)
+        }
+      })
+
+    nodeSel.each(function (d) {
+      const g = select(this)
+      const color = STATUS_COLOR[d.status]
+      g.append('rect')
+        .attr('x', -NODE_W / 2).attr('y', -NODE_H / 2)
+        .attr('width', NODE_W).attr('height', NODE_H)
+        .attr('fill', 'var(--surface-raised)')
+      g.append('rect')
+        .attr('x', -NODE_W / 2).attr('y', -NODE_H / 2)
+        .attr('width', NODE_W).attr('height', NODE_H)
+        .attr('fill', 'none').attr('stroke', color).attr('stroke-width', 1)
+      g.append('text')
+        .attr('x', 0).attr('y', -5)
+        .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
+        .attr('font-size', 10).attr('fill', color)
+        .style('font-family', 'var(--font-mono)').style('font-weight', '600')
+        .text(d.name)
+      g.append('text')
+        .attr('x', 0).attr('y', 8)
+        .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
+        .attr('font-size', 8).attr('fill', 'var(--text-muted)')
+        .style('font-family', 'var(--font-mono)')
+        .text(d.sublabel)
+    })
+
+    const simulation = forceSimulation(nodes)
+      .force('link', forceLink<ChartNode, ChartLink>(links).id((d) => d.id).distance(130).strength(0.25))
+      .force('charge', forceManyBody().strength(-420))
+      .force('center', forceCenter(W / 2, H / 2))
+      .force('collide', forceCollide(60))
+      .on('end', fitToNodes)
+      .on('tick', () => {
+        edgeSel
+          .attr('x1', (d) => (d.source as ChartNode).x ?? 0)
+          .attr('y1', (d) => (d.source as ChartNode).y ?? 0)
+          .attr('x2', (d) => (d.target as ChartNode).x ?? 0)
+          .attr('y2', (d) => (d.target as ChartNode).y ?? 0)
+        nodeSel.attr('transform', (d) => `translate(${d.x ?? 0},${d.y ?? 0})`)
+      })
+
+    return () => {
+      simulation.stop()
+      svg.remove()
+    }
+  }, [world, jumpingId, jump, height])

  if (error && !world) {
    return (
@@ -68,36 +260,24 @@ export function WorldMapPanel({ height = 380 }: WorldMapPanelProps) {
  if (!world) {
    return (
      <div style={{ border: '1px solid var(--border)', background: 'var(--surface)', padding: '0.75rem' }}>
-        <span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', letterSpacing: '0.12em' }}>SCANNING CHART…</span>
+        <span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', letterSpacing: '0.08em' }}>SCANNING CHART…</span>
      </div>
    )
  }

-  const current = world.systems.find((s) => s.current)!
-  const reachable = world.edges
-    .filter(([a, b]) => a === current.id || b === current.id)
-    .map(([a, b]) => (a === current.id ? b : a))
-    .map((id) => world.systems.find((s) => s.id === id)!)
-
+  // flex (not height:'100%'): the pane chain is sized by min-height, where percentages don't resolve
  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-      <NodeGraph
-        nodes={world.systems.map((s) => ({
-          id: String(s.id),
-          label: s.name,
-          x: s.x,
-          y: s.y,
-          status: s.current ? 'ACTIVE' : s.discovered ? 'NEUTRAL' : 'OFFLINE',
-          sublabel: s.current ? 'CURRENT' : s.discovered ? 'DISCOVERED' : 'UNKNOWN',
-        }))}
-        edges={world.edges.map(([a, b]) => ({ from: String(a), to: String(b) }))}
-        variant="ACTIVE"
-        title={`GALACTIC CHART // JUMP ROUTES — TURN ${world.turn}`}
-        height={height}
-        style={{ width: '100%' }}
-      />
-
-      <div style={{ border: '1px solid var(--border)', background: 'var(--surface)', overflow: 'hidden' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', ...(filling ? { flex: 1, minHeight: 0 } : {}) }}>
+      {/* Wrapper + title bar; in wide mode the box flexes to fill the whole pane (#36). d3 owns everything inside it. */}
+      <div
+        style={{
+          border: '1px solid var(--border)',
+          background: 'var(--surface)',
+          fontFamily: 'var(--font-mono)',
+          overflow: 'hidden',
+          ...(filling ? { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' } : {}),
+        }}
+      >
        <div
          style={{
            padding: '0.4rem 0.75rem',
@@ -109,21 +289,9 @@ export function WorldMapPanel({ height = 380 }: WorldMapPanelProps) {
            textTransform: 'uppercase',
          }}
        >
-          JUMP ROUTES // FROM {current.name.toUpperCase()}
-        </div>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', padding: '0.6rem 0.75rem' }}>
-          {reachable.map((s) => (
-            <Button
-              key={s.id}
-              variant="OUTLINE"
-              size="SM"
-              disabled={jumpingId !== null}
-              onClick={() => void jump(s.id)}
-            >
-              {jumpingId === s.id ? 'JUMPING…' : `${s.name.toUpperCase()} // JUMP`}
-            </Button>
-          ))}
+          GALACTIC CHART // JUMP ROUTES — TURN {world.turn}
        </div>
+        <div ref={containerRef} style={{ width: '100%', ...(filling ? { flex: 1, minHeight: 0 } : { height: `${height}px` }) }} />
      </div>

      {error && (
@@ -13,6 +13,7 @@ interface CrewDto { id: number; name: string; role: string; traitGood: string; t
 interface ShipSystemDto { id: number; type: string; level: number; capacity: number; built: boolean }
 interface ShipState { systems: ShipSystemDto[]; inventory: InventoryItemDto[]; turn: number }
 interface MissionDto { id: number; type: string; description: string; targetSystemId: number | null; conditionKind: string | null; progressTarget: number; progress: number; rewardKind: string; rewardQty: number; state: string }
+interface EventDto { id: number; turn: number; type: string; message: string; createdAt: string }

 const totalQty = (items: InventoryItemDto[], kind: string) => items.filter((i) => i.kind === kind).reduce((sum, i) => sum + i.qty, 0);

@@ -64,16 +65,68 @@ test('game template tabs render (scificn-ui component layer wired in)', async ({
 test('tabs switch panels client-side (event log terminal)', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('tab', { name: 'EVENT LOG' }).click();
-  await expect(page.getByText('SHIP LOG // PLACEHOLDER FEED')).toBeVisible();
+  // The placeholder feed was replaced by the real log (v0.9.0): at least one T<turn> // <MESSAGE> line
+  // must render — every save has the turn-0 new_game event, so this holds on a fresh stack and across retries.
+  await expect(page.getByText(/T\d+ \/\/ /).first()).toBeVisible();
+});
+
+test('active tab survives a page reload (#27)', async ({ page }) => {
+  await page.goto('/');
+  // Fresh context → nothing stored yet, so CREW starts unselected (the default is WORLD MAP).
+  await expect(page.getByRole('tab', { name: 'CREW' })).toHaveAttribute('aria-selected', 'false');
+  await page.getByRole('tab', { name: 'CREW' }).click();
+  await expect(page.getByRole('tab', { name: 'CREW' })).toHaveAttribute('aria-selected', 'true');
+
+  await page.reload();
+  // The tab is restored from localStorage on mount — no API state involved, so this holds across retries.
+  await expect(page.getByRole('tab', { name: 'CREW' })).toHaveAttribute('aria-selected', 'true');
+});
+
+test('tab bar stays pinned while panel content scrolls (#31)', async ({ page }) => {
+  await page.goto('/');
+  // Shrink the viewport so the center pane's content overflows its scroll area regardless of save state.
+  await page.setViewportSize({ width: 1280, height: 560 });
+
+  // SHIP SYSTEMS always renders six stacked system cards (seeded at start, never removed) — tall
+  // enough to overflow the shrunk pane on any save state, deterministic across retries. (#36 made
+  // WORLD MAP fill its pane instead of overflowing it, so it can no longer force the scroll.)
+  await page.getByRole('tab', { name: 'SHIP SYSTEMS' }).click();
+  await expect(page.getByRole('heading', { name: 'HULL' })).toBeVisible();
+
+  const tablist = page.getByRole('tablist');
+  await expect(tablist).toBeVisible();
+  const before = await tablist.boundingBox();
+  expect(before).not.toBeNull();
+
+  // Scroll the nearest scroll container above the tab list all the way down.
+  const scrolled = await page.evaluate(() => {
+    let el = document.querySelector('[role="tablist"]')?.parentElement ?? null;
+    while (el && !['auto', 'scroll'].includes(getComputedStyle(el).overflowY)) el = el.parentElement;
+    if (!el) throw new Error('no scroll container above the tab list');
+    el.scrollTop = el.scrollHeight;
+    return el.scrollTop;
+  });
+  expect(scrolled).toBeGreaterThan(50); // content really overflowed — guards against a vacuous pass
+
+  await expect(tablist).toBeVisible();
+  const after = await tablist.boundingBox();
+  expect(after).not.toBeNull();
+  // Pinned: the tab bar's viewport position is unchanged even though the content scrolled away (#31).
+  expect(Math.abs(after!.y - before!.y)).toBeLessThan(2);
 });

 test('world map shows the generated starting system and its neighbours', async ({ page }) => {
+  const world = (await (await page.request.get('/api/world')).json()) as WorldState;
+
  await page.goto('/');
-  // Live chart title carries the turn counter; a fresh save sits at the start with six jump routes.
+  // Live chart title carries the turn counter.
  await expect(page.getByText(/GALACTIC CHART \/\/ JUMP ROUTES — TURN \d+/)).toBeVisible();
-  const jumpButtons = page.getByRole('button', { name: /\/\/ JUMP$/ });
-  await expect(jumpButtons.first()).toBeVisible();
-  await expect(jumpButtons).toHaveCount(6);
+  // The current system is marked, and every adjacent system is a clickable chart field (role=button).
+  const current = world.systems.find((s) => s.current)!;
+  await expect(page.getByText('CURRENT', { exact: true })).toBeVisible();
+  const panel = page.getByRole('tabpanel');
+  const adjacent = world.edges.filter(([a, b]) => a === current.id || b === current.id); // six on a fresh save
+  await expect(panel.getByRole('button')).toHaveCount(adjacent.length);
 });

 test('jumping to an adjacent system updates the world state and turn counter', async ({ page }) => {
@@ -84,13 +137,38 @@ test('jumping to an adjacent system updates the world state and turn counter', a
  const targetName = before.systems.find((s) => s.id === targetId)!.name;

  await page.goto('/');
-  await page.getByRole('button', { name: `${targetName.toUpperCase()} // JUMP` }).click();
+  // Click the target's chart field — clickable nodes are role=button with their name as accessible label.
+  await page.getByRole('tabpanel').getByRole('button', { name: targetName.toUpperCase(), exact: true }).click();

  const after = (await (await page.request.get('/api/world')).json()) as WorldState;
  expect(after.turn).toBe(before.turn + 1);
  expect(after.systems.find((s) => s.current)?.id).toBe(targetId);
 });

+test('local system shows the new current system after a jump, without a page reload (#30)', async ({ page }) => {
+  const before = (await (await page.request.get('/api/world')).json()) as WorldState;
+  const currentId = before.systems.find((s) => s.current)!.id;
+  const edge = before.edges.find(([a, b]) => a === currentId || b === currentId)!;
+  const targetId = edge[0] === currentId ? edge[1] : edge[0];
+  const targetName = before.systems.find((s) => s.id === targetId)!.name;
+
+  await page.goto('/');
+  // Jump through the UI: click the target's chart field on WORLD MAP (the default tab).
+  await page.getByRole('tabpanel').getByRole('button', { name: targetName.toUpperCase(), exact: true }).click();
+
+  // Wait until the jump response is applied to the chart — server state is committed by then, so
+  // the /api/world read below can't race the in-flight POST.
+  await expect(page.getByText(`GALACTIC CHART // JUMP ROUTES — TURN ${before.turn + 1}`)).toBeVisible();
+
+  const after = (await (await page.request.get('/api/world')).json()) as WorldState;
+  const newCurrent = after.systems.find((s) => s.current)!;
+  expect(newCurrent.id).toBe(targetId); // the jump landed where we aimed
+
+  // Switch to LOCAL SYSTEM — it must show the NEW current system without a page reload (#30).
+  await page.getByRole('tab', { name: 'LOCAL SYSTEM' }).click();
+  await expect(page.getByText(`EXPLORABLE WORLDS // ${newCurrent.name.toUpperCase()} — TURN ${after.turn}`)).toBeVisible();
+});
+
 test('local system shows the current system bodies with staggered moons and explore buttons', async ({ page }) => {
  const sys = (await (await page.request.get('/api/system')).json()) as SystemState;

@@ -362,6 +440,40 @@ test('MISSIONS tab accepts a contract and completing it grants the reward', asyn
  expect(totalQty(shipAfter.inventory, picked.rewardKind)).toBeGreaterThanOrEqual(baseline + picked.rewardQty);
 });

+test('EVENT LOG tab shows real game events, newest first', async ({ page }) => {
+  // Idempotent across retries sharing a DB: assert on THIS run's own entries (identified by turn and
+  // message), never on absolute counts — earlier attempts leave their events behind.
+  const afterJump = await jumpToFreshSystem(page);
+  const jumpedName = afterJump.systems.find((s) => s.current)!.name;
+  const jumpTurn = afterJump.turn;
+
+  // Scan one body — if the current system is exhausted (leftover from a previous attempt), hop again first.
+  let sys = (await (await page.request.get('/api/system')).json()) as SystemState;
+  if (!sys.planets.some((p) => !p.explored)) {
+    await jumpToFreshSystem(page); // fresh systems always have unscanned bodies
+    sys = (await (await page.request.get('/api/system')).json()) as SystemState;
+  }
+  const planet = sys.planets.find((p) => !p.explored)!;
+  const exploreRes = await page.request.post('/api/explore', { data: { planetId: planet.id } });
+  expect(exploreRes.status()).toBe(200);
+  const explored = (await exploreRes.json()) as ExploreResult;
+
+  // API: this run's jump + scan are in the log, and the newer one (the scan) comes first.
+  const events = (await (await page.request.get('/api/events')).json()) as EventDto[];
+  const exploreEvent = events.find((e) => e.turn === explored.turn && e.type === 'explore');
+  expect(exploreEvent?.message).toMatch(new RegExp(`^Explored ${planet.name} — found`));
+  const jumpEvent = events.find((e) => e.type === 'jump' && e.message === `Jumped to ${jumpedName}`);
+  expect(jumpEvent).toBeDefined(); // system names are unique, so the message pins this run's jump
+  expect(events.indexOf(exploreEvent!)).toBeLessThan(events.indexOf(jumpEvent!));
+
+  // UI: the terminal renders both lines (T<turn> // <MESSAGE>, uppercased).
+  await page.goto('/');
+  await page.getByRole('tab', { name: 'EVENT LOG' }).click();
+  const panel = page.getByRole('tabpanel');
+  await expect(panel.getByText(new RegExp(`T${explored.turn} // EXPLORED ${planet.name.toUpperCase()}`))).toBeVisible();
+  await expect(panel.getByText(new RegExp(`T${jumpTurn} // JUMPED TO ${jumpedName.toUpperCase()}`))).toBeVisible();
+});
+
 test('GET /api/version reports the app version as JSON', async ({ page }) => {
  const res = await page.request.get('/api/version');
  expect(res.status()).toBe(200);
@@ -17,6 +17,7 @@ interface ShipSystemDto { id: number; type: string; level: number; capacity: num
 interface ShipState { systems: ShipSystemDto[]; inventory: { kind: string; name: string; qty: number }[]; turn: number }
 interface TechDto { id: number; slug: string; name: string; costKind: string; costQty: number; prereqs: string[]; effect: string; state: string; missingPrereqs: string[] }
 interface MissionDto { id: number; type: string; description: string; targetSystemId: number | null; conditionKind: string | null; progressTarget: number; progress: number; rewardKind: string; rewardQty: number; state: string }
+interface EventDto { id: number; turn: number; type: string; message: string; createdAt: string }

 test('app survives a container restart (stack + volume persistence)', async ({ page }) => {
  test.setTimeout(180_000);
@@ -59,6 +60,11 @@ test('app survives a container restart (stack + volume persistence)', async ({ p
  const missionsBefore = (await (await page.request.get('/api/missions')).json()) as MissionDto[];
  expect(missionsBefore.length).toBeGreaterThan(0); // the board is always seeded on new game

+  // Event log baseline: append-only, and nothing writes between this snapshot and the restart — so the
+  // latest lines must come back byte-identical (ids included) after it.
+  const eventsBefore = (await (await page.request.get('/api/events?limit=5')).json()) as EventDto[];
+  expect(eventsBefore.length).toBeGreaterThan(0);
+
  // Restart the app container mid-run — the named DB volume must survive it.
  execSync(`docker compose ${composeArgs} restart space-wanderer`, { cwd: repoRoot, stdio: 'pipe' });

@@ -105,6 +111,10 @@ test('app survives a container restart (stack + volume persistence)', async ({ p
  const missionsAfter = (await (await page.request.get('/api/missions')).json()) as MissionDto[];
  expect(missionsAfter).toEqual(missionsBefore);

+  // Event log survived too: same latest lines, in the same order.
+  const eventsAfter = (await (await page.request.get('/api/events?limit=5')).json()) as EventDto[];
+  expect(eventsAfter).toEqual(eventsBefore);
+
  // The page itself serves again with the landing title.
  await page.goto('/');
  await expect(page.getByRole('heading', { name: 'SpaceWanderer' })).toBeVisible();
@@ -20,7 +20,7 @@ export const solarSystems = sqliteTable('solar_systems', {
  id: integer('id').primaryKey({ autoIncrement: true }),
  saveId: integer('save_id').notNull().references(() => saves.id),
  name: text('name').notNull(),
-  // 0–100 coordinate space, rendered directly by the NodeGraph component.
+  // 0–100 coordinate space; seeds the force-directed WORLD MAP layout (components/world-map.tsx).
  x: real('x').notNull(),
  y: real('y').notNull(),
  discovered: integer('discovered', { mode: 'boolean' }).notNull().default(false),
@@ -71,4 +71,17 @@ describe('makeCrewName', () => {
    for (let i = 0; i < 40; i++) makeCrewName(rng, taken)
    expect(taken.size).toBe(40)
  })
+
+  it('terminates with numbered variants once all 352 base names are taken', () => {
+    const rng = startingCrewRng('7')
+    const taken = new Set<string>()
+    for (let i = 0; i < 352; i++) makeCrewName(rng, taken) // exhaust the whole pool
+    expect(taken.size).toBe(352)
+
+    const a = makeCrewName(rng, taken) // must return instead of spinning forever
+    const b = makeCrewName(rng, taken)
+    expect(a).not.toBe(b)
+    expect(taken.has(a)).toBe(true)
+    expect(taken.has(b)).toBe(true)
+  })
 })
@@ -49,15 +49,25 @@ function pick<T>(rng: () => number, arr: T[]): T {
 }

 // A name unique against `taken` (the current roster), claimed into the set on success.
-// 16×22 = 352 combinations — a roster realistically never approaches that size.
+// The pool is finite (16×22=352) and the roster has no cap, so — like makeName — fall back to
+// numbered variants once every base is taken instead of spinning forever.
 export function makeCrewName(rng: () => number, taken: Set<string>): string {
  for (;;) {
-    const name = `${title(pick(rng, FIRST_NAMES))} ${pick(rng, LAST_NAMES)}`
+    const base = `${title(pick(rng, FIRST_NAMES))} ${pick(rng, LAST_NAMES)}`
+    if (!taken.has(base)) {
+      taken.add(base)
+      return base
+    }
+    if (taken.size >= FIRST_NAMES.length * LAST_NAMES.length) {
+      for (let n = 2; ; n++) {
+        const name = `${base} ${n}`
        if (!taken.has(name)) {
          taken.add(name)
          return name
        }
      }
+    }
+  }
 }

 // The crew a new game starts with: 2–3 members, unique names and roles (roles are drawn
@@ -0,0 +1,68 @@
+import { mkdtemp, rm } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
+import { afterAll, describe, expect, it } from 'vitest'
+import { openGameDb, type GameDb } from '@/lib/db/client'
+import * as schema from '@/lib/db/schema'
+import { getWorldState } from './save'
+import { DEFAULT_LIMIT, EventError, MAX_LIMIT, getEvents, parseEventLimit } from './events'
+
+const dirs: string[] = []
+
+async function freshFile(): Promise<{ db: GameDb; file: string }> {
+  const dir = await mkdtemp(path.join(tmpdir(), 'sw-events-test-'))
+  dirs.push(dir)
+  const file = path.join(dir, 'test.db')
+  return { db: await openGameDb(file), file }
+}
+
+afterAll(async () => {
+  for (const d of dirs) await rm(d, { recursive: true, force: true })
+})
+
+// Appends `count` synthetic events (turns 1..count) on top of the turn-0 new_game event.
+async function seedEvents(db: GameDb, count: number): Promise<void> {
+  const [save] = await db.db.select().from(schema.saves).limit(1)
+  for (let i = 1; i <= count; i++) {
+    await db.db.insert(schema.events).values({ saveId: save.id, turn: i, type: 'test', message: `event ${i}`, createdAt: new Date(Date.UTC(2026, 8, 29, 0, i)).toISOString() })
+  }
+}
+
+describe('parseEventLimit', () => {
+  it('defaults to DEFAULT_LIMIT when the param is absent', () => {
+    expect(parseEventLimit(null)).toBe(DEFAULT_LIMIT)
+  })
+
+  it('accepts integers in [1, MAX_LIMIT]', () => {
+    expect(parseEventLimit('1')).toBe(1)
+    expect(parseEventLimit(String(MAX_LIMIT))).toBe(MAX_LIMIT)
+    expect(parseEventLimit('25')).toBe(25)
+  })
+
+  it('rejects non-integers and out-of-range values with a 400', () => {
+    for (const bad of ['abc', '', '0', '-3', String(MAX_LIMIT + 1), '2.5']) {
+      try {
+        parseEventLimit(bad)
+        expect.unreachable(`limit ${JSON.stringify(bad)} should have been rejected`)
+      } catch (err) {
+        expect(err).toBeInstanceOf(EventError)
+        expect((err as EventError).status).toBe(400)
+      }
+    }
+  })
+})
+
+describe('getEvents', () => {
+  it('returns the latest events newest-first, sliced to limit', async () => {
+    const { db } = await freshFile()
+    await getWorldState(db) // auto-initializes the save (turn-0 new_game event)
+    await seedEvents(db, 5)
+
+    const all = await getEvents(db, DEFAULT_LIMIT)
+    expect(all.map((e) => e.turn)).toEqual([5, 4, 3, 2, 1, 0]) // newest first, turn-0 line included
+    expect(all[all.length - 1].type).toBe('new_game')
+
+    const two = await getEvents(db, 2)
+    expect(two.map((e) => [e.turn, e.message])).toEqual([[5, 'event 5'], [4, 'event 4']])
+  })
+})
@@ -0,0 +1,40 @@
+import { desc } from 'drizzle-orm'
+import * as schema from '@/lib/db/schema'
+import type { GameDb } from '@/lib/db/client'
+
+export interface EventDto {
+  id: number
+  turn: number
+  type: string
+  message: string
+  createdAt: string
+}
+
+export const DEFAULT_LIMIT = 50
+export const MAX_LIMIT = 200
+
+export class EventError extends Error {
+  constructor(
+    public readonly status: number,
+    message: string,
+  ) {
+    super(message)
+  }
+}
+
+// Parses the optional ?limit= query param. Absent → default; anything that is not an integer in
+// [1, MAX_LIMIT] is a 400 (the route maps EventError to its status).
+export function parseEventLimit(raw: string | null): number {
+  if (raw === null) return DEFAULT_LIMIT
+  const limit = Number(raw)
+  if (!Number.isInteger(limit) || limit < 1 || limit > MAX_LIMIT) {
+    throw new EventError(400, `limit must be an integer between 1 and ${MAX_LIMIT}`)
+  }
+  return limit
+}
+
+// The latest N events of the save, newest first. Assumes a save exists (the route calls ensureSave).
+export async function getEvents(db: GameDb, limit: number): Promise<EventDto[]> {
+  const rows = await db.db.select().from(schema.events).orderBy(desc(schema.events.id)).limit(limit)
+  return rows.map((e) => ({ id: e.id, turn: e.turn, type: e.type, message: e.message, createdAt: e.createdAt }))
+}
@@ -185,6 +185,7 @@ describe('completion', () => {
    expect(reward.qty).toBe(2)

    const event = (await db.db.select().from(schema.events)).find((e) => e.type === 'mission' && /complete/i.test(e.message))!
+    expect(event.turn).toBe(4) // accept (1) + three scans (2–4); completion is written by the third scan
    expect(event.message).toContain('Scan 3 bodies')
  })

@@ -111,6 +111,10 @@ describe('expandSystem', () => {
    expect(systemOf(state, 'HULL').capacity).toBe(BASE_CAPACITY + 1)
    expect((await db.db.select().from(schema.inventoryItems)).map((i) => [i.name, i.qty])).toEqual([['IRON ORE', 1]])

+    const event = (await db.db.select().from(schema.events)).find((e) => e.type === 'expand')!
+    expect(event.turn).toBe(1)
+    expect(event.message).toContain('HULL')
+
    await db.db.update(schema.shipSystems).set({ capacity: MAX_CAPACITY }).where(eq(schema.shipSystems.id, hullId))
    await expect(expandSystem(db, hullId)).rejects.toMatchObject({ status: 409 })
  })
@@ -144,6 +148,7 @@ describe('buildSystem', () => {
    expect(state.turn).toBe(1)

    const event = (await db.db.select().from(schema.events)).find((e) => e.type === 'build')!
+    expect(event.turn).toBe(1)
    expect(event.message).toContain('WEAPONS')

    await expect(buildSystem(db, 'WEAPONS')).rejects.toMatchObject({ status: 409 }) // already built
@@ -76,6 +76,19 @@ describe('generateRing (expansion)', () => {
    for (let i = 0; i < 40; i++) makeName(rng, taken)
    expect(taken.size).toBe(40)
  })
+
+  it('terminates with numbered variants once all 128 base names are taken', () => {
+    const rng = mulberry32(9)
+    const taken = new Set<string>()
+    for (let i = 0; i < 128; i++) makeName(rng, taken) // exhaust the whole pool
+    expect(taken.size).toBe(128)
+
+    const a = makeName(rng, taken) // must return instead of spinning forever
+    const b = makeName(rng, taken)
+    expect(a).not.toBe(b)
+    expect(taken.has(a)).toBe(true)
+    expect(taken.has(b)).toBe(true)
+  })
 })

 describe('generatePlanets', () => {
@@ -3,7 +3,7 @@

 export interface WorldSystem {
  name: string
-  x: number // 0–100 coordinate space, rendered directly by NodeGraph
+  x: number // 0–100 coordinate space; seeds the force-directed WORLD MAP layout
  y: number
 }

@@ -36,15 +36,27 @@ function title(word: string): string {
  return word.charAt(0) + word.slice(1).toLowerCase()
 }

-// Picks a name not in `taken` and adds it, so callers can't accidentally reuse one.
+// Picks a name not in `taken` and adds it, so callers can't accidentally reuse one. The base
+// pool is finite (16×8=128), so once every base is taken the loop would spin forever — which
+// froze the whole server on a save that had grown past 128 systems (synchronous sql.js runs on
+// Node's single thread). Numbered variants keep names unique and terminate.
 export function makeName(rng: () => number, taken: Set<string>): string {
  for (;;) {
-    const name = `${title(FIRST[Math.floor(rng() * FIRST.length)])} ${title(SECOND[Math.floor(rng() * SECOND.length)])}`
+    const base = `${title(FIRST[Math.floor(rng() * FIRST.length)])} ${title(SECOND[Math.floor(rng() * SECOND.length)])}`
+    if (!taken.has(base)) {
+      taken.add(base)
+      return base
+    }
+    if (taken.size >= FIRST.length * SECOND.length) {
+      for (let n = 2; ; n++) {
+        const name = `${base} ${n}`
        if (!taken.has(name)) {
          taken.add(name)
          return name
        }
      }
+    }
+  }
 }

 function clamp(v: number): number {
@@ -6,6 +6,7 @@ describe('OpenAPI spec', () => {
  it('documents every public endpoint', () => {
    expect(Object.keys(openApiSpec.paths).sort()).toEqual([
      '/api/crew',
+      '/api/events',
      '/api/explore',
      '/api/jump',
      '/api/missions',
@@ -77,6 +78,22 @@ describe('OpenAPI spec', () => {
    }
  });

+  it('describes GET /api/events → Event[] with a limit query param and a 400 error response', () => {
+    const events = openApiSpec.paths['/api/events'].get.responses[200].content['application/json'].schema;
+    expect(events.type).toBe('array');
+    expect((events.items as { $ref: string }).$ref).toBe('#/components/schemas/Event');
+
+    const props = openApiSpec.components.schemas.Event.properties;
+    expect(Object.keys(props)).toEqual(['id', 'turn', 'type', 'message', 'createdAt']);
+    expect((props.type as { enum: string[] }).enum).toEqual(['new_game', 'jump', 'explore', 'research', 'upgrade', 'expand', 'build', 'mission']);
+
+    const get = openApiSpec.paths['/api/events'].get;
+    const limit = (get.parameters ?? []).find((p) => p.name === 'limit');
+    expect(limit?.in).toBe('query');
+    expect(limit?.required).toBe(false);
+    expect(get.responses['400'].content['application/json'].schema.$ref).toBe('#/components/schemas/Error');
+  });
+
  it('describes /api/crew as an array of CrewMember and crewFound on ExploreResult', () => {
    const crew = openApiSpec.paths['/api/crew'].get.responses[200].content['application/json'].schema;
    expect(crew.type).toBe('array');
@@ -523,6 +523,40 @@ export const openApiSpec = {
        },
      },
    },
+    '/api/events': {
+      get: {
+        summary: 'Event log',
+        description: "The save's game events, newest first — every action (new game, jump, scan, research, ship work, mission) appends one. Auto-initializes a new game when no save exists yet.",
+        operationId: 'getEvents',
+        parameters: [
+          {
+            name: 'limit',
+            in: 'query',
+            required: false,
+            schema: { type: 'integer', minimum: 1, maximum: 200 },
+            description: 'How many of the latest events to return (default 50)',
+          },
+        ],
+        responses: {
+          200: {
+            description: 'Latest events, newest first',
+            content: {
+              'application/json': {
+                schema: { type: 'array', items: { $ref: '#/components/schemas/Event' } },
+              },
+            },
+          },
+          400: {
+            description: 'limit is not an integer in [1, 200]',
+            content: {
+              'application/json': {
+                schema: { $ref: '#/components/schemas/Error' },
+              },
+            },
+          },
+        },
+      },
+    },
  },
  components: {
    schemas: {
@@ -682,6 +716,17 @@ export const openApiSpec = {
        },
        required: ['id', 'type', 'description', 'targetSystemId', 'conditionKind', 'progressTarget', 'progress', 'rewardKind', 'rewardQty', 'state'],
      },
+      Event: {
+        type: 'object',
+        properties: {
+          id: { type: 'integer' },
+          turn: { type: 'integer', description: 'The save turn the action cost (new_game is 0)' },
+          type: { type: 'string', enum: ['new_game', 'jump', 'explore', 'research', 'upgrade', 'expand', 'build', 'mission'] },
+          message: { type: 'string' },
+          createdAt: { type: 'string', description: 'ISO 8601 timestamp' },
+        },
+        required: ['id', 'turn', 'type', 'message', 'createdAt'],
+      },
      UpgradeRequest: {
        type: 'object',
        properties: {
@@ -1,6 +1,6 @@
 {
  "name": "space-wanderer",
-  "version": "0.8.0",
+  "version": "0.9.10",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3000",
@@ -15,6 +15,9 @@
    "@radix-ui/react-tabs": "^1.1.13",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "d3-force": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
    "drizzle-orm": "^0.45.2",
    "next": "^16.3.5",
    "react": "^19.3.0",
@@ -25,11 +28,14 @@
  "devDependencies": {
    "@playwright/test": "1.63.0",
    "@tailwindcss/postcss": "^4.2.0",
-    "tailwindcss": "^4.2.0",
+    "@types/d3-force": "^3.0.10",
+    "@types/d3-selection": "^3.0.12",
+    "@types/d3-zoom": "^3.0.9",
    "@types/node": "^22.20.3",
    "@types/react": "^19.3.0",
    "@types/react-dom": "^19.3.0",
    "@types/sql.js": "^1.4.11",
+    "tailwindcss": "^4.2.0",
    "typescript": "^7.0.2",
    "vitest": "^5.0.1"
  }
Author	SHA1	Message	Date
kamilkrzywda	d083b5b708	Merge pull request 'v0.9.10 — world map fills entire tab area, no scrollbar (#36 )' (#39 ) from world-map-full-area into master CI / build + unit + e2e (push) Successful in 3m22s Details	2026-09-29 16:09:15 +02:00
kamilkrzywda	c012b0fe56	fix(ui): keep the OPERATIONS tab bar intact when tall tabs overflow the pane (#36 ) CI / build + unit + e2e (pull_request) Successful in 2m30s Details	2026-09-29 14:03:27 +00:00
kamilkrzywda	6483d510ef	Merge pull request 'v0.9.10 — world map fills entire tab area, no scrollbar (#36 )' (#37 ) from world-map-full-area into master CI / build + unit + e2e (push) Failing after 13m40s Details	2026-09-29 15:03:00 +02:00
kamilkrzywda	bc6bc7dd07	fix(ui): scale WORLD MAP to fill its tab pane without an internal scrollbar (#36 ) CI / build + unit + e2e (pull_request) Failing after 13m30s Details	2026-09-29 12:59:16 +00:00
kamilkrzywda	3a786913df	Merge pull request 'v0.9.9 — world map: force-directed graph with pan+zoom (#28 )' (#34 ) from world-map-graph-viz into master CI / build + unit + e2e (push) Successful in 3m10s Details	2026-09-29 13:27:17 +02:00
kamilkrzywda	978a1d119d	feat(ui): render WORLD MAP as a force-directed d3 graph with pan + zoom (#28 ) CI / build + unit + e2e (pull_request) Successful in 2m50s Details	2026-09-29 11:24:02 +00:00
kamilkrzywda	a57c590bae	Merge pull request 'v0.9.8 — pin tab bar at top while panel content scrolls (#31 )' (#33 ) from pin-tab-bar into master CI / build + unit + e2e (push) Successful in 2m49s Details	2026-09-29 12:25:01 +02:00
kamilkrzywda	1710e50b63	fix(ui): pin the OPERATIONS tab bar while panel content scrolls (#31 ) CI / build + unit + e2e (pull_request) Successful in 2m47s Details The TabsList is now position:sticky top:0 with a z-index above the panel content. In wide mode it pins to the top of the OPERATIONS scroll area (#21's center-pane scroller); in narrow mode, where the body scrolls and there is no inner scroll container, it pins to the viewport. The existing opaque background keeps scrolled content from showing through.	2026-09-29 10:22:14 +00:00
kamilkrzywda	1bb04d2a51	Merge pull request 'v0.9.7 — local system refreshes after jump, no page reload needed (#30 )' (#32 ) from local-system-refresh into master CI / build + unit + e2e (push) Successful in 3m7s Details	2026-09-29 12:03:41 +02:00
kamilkrzywda	e27ff7015e	fix(ui): refresh LOCAL SYSTEM after a jump instead of waiting for a page reload (#30 ) CI / build + unit + e2e (pull_request) Successful in 2m39s Details WorldMapPanel owns the world state and applied the /api/jump response locally, so MissionControl's lifted /api/system state (LOCAL SYSTEM tab, CARGO HOLD, SECTOR row) stayed on the previous system until a full refresh. The panel now takes an onJumped callback that MissionControl wires to an /api/system refetch after every successful jump.	2026-09-29 10:00:18 +00:00
kamilkrzywda	e6c88b10c2	Merge pull request 'v0.9.6 — keep active tab between page refresh (#27 )' (#29 ) from keep-active-tab into master CI / build + unit + e2e (push) Successful in 2m46s Details	2026-09-29 11:43:21 +02:00
kamilkrzywda	f4690bc1a2	feat(ui): keep the active operations tab across page refreshes (#27 ) CI / build + unit + e2e (pull_request) Successful in 2m15s Details Persist the selected tab ID to localStorage (sw-active-tab) on every change and restore it on mount when it matches one of the seven valid tab IDs. The Radix Tabs become controlled for this; SSR and first client render still agree on the default, so there is no hydration mismatch.	2026-09-29 09:42:18 +00:00
kamilkrzywda	4b030716f7	Merge pull request 'v0.9.5 — fix infinite loop on name-pool exhaustion (server freeze) (#21 )' (#26 ) from ui-layout-fix into master CI / build + unit + e2e (push) Successful in 2m54s Details	2026-09-29 11:22:07 +02:00
kamilkrzywda	06f8a28e96	fix(game): numbered name fallback when pool exhausted — server no longer freezes past 128 systems CI / build + unit + e2e (pull_request) Successful in 2m38s Details Production freeze reported after the v0.9.3 (#21) deploy: every API route hung and all panels stayed at LOADING. Root cause was not the #21 layout (verified healthy across all 7 tabs/viewports) but makeName's unbounded rejection loop over a finite 16x8=128 system-name pool — once a save grew past ~128 systems, any jump into an undiscovered system spun forever on Node's single thread (sql.js is synchronous), blocking the whole process. makeName and makeCrewName now fall back to numbered variants ('Kepler Drift 2') once their pools are exhausted, so they always terminate.	2026-09-29 09:18:00 +00:00
kamilkrzywda	36ff412f0b	Merge pull request 'v0.9.4 — top bar shows app version instead of ◄ SHIP (#23 )' (#25 ) from topbar-version into master CI / build + unit + e2e (push) Successful in 3m12s Details	2026-09-29 10:33:19 +02:00
kamilkrzywda	c35edc60d0	feat(ui): top bar shows app version instead of ◄ SHIP label (#23 ) CI / build + unit + e2e (pull_request) Successful in 2m44s Details	2026-09-29 08:30:35 +00:00
kamilkrzywda	f545792c36	Merge pull request 'v0.9.3 — layout: only middle pane scrolls, side panels stay fixed (#21 )' (#24 ) from middle-pane-scroll into master CI / build + unit + e2e (push) Successful in 2m29s Details	2026-09-29 10:24:56 +02:00
kamilkrzywda	593cca5dce	release v0.9.3 CI / build + unit + e2e (pull_request) Successful in 2m49s Details	2026-09-29 08:21:14 +00:00
kamilkrzywda	d2fb252a98	feat(ui): only the middle column scrolls — side panes stay fixed (#21 ) Pin the wide layout to the viewport (height:100vh + overflow:hidden on the root), add min-height:0 to the BODY wrapper and 3-column grid so the flex chain actually constrains, and make the OPERATIONS panel a flex column whose PanelContent is the scroll area (header stays pinned; the Panel root's default overflow:hidden would otherwise clip). Columns' existing overflow-y:auto now scrolls inside their tracks. Narrow mode keeps natural body flow.	2026-09-29 08:21:14 +00:00
kamilkrzywda	bf6d8714e6	Merge pull request 'v0.9.2 — WORLD MAP: click-to-jump on galactic chart, drop jump routes list (#19 )' (#22 ) from world-map-click-jump into master CI / build + unit + e2e (push) Successful in 2m19s Details	2026-09-29 10:06:05 +02:00
kamilkrzywda	32dda04e92	release v0.9.2 CI / build + unit + e2e (pull_request) Successful in 2m57s Details	2026-09-29 08:00:44 +00:00
kamilkrzywda	ef1d282770	feat(ui): world map — jump by clicking chart fields (#19 ) Remove the bottom JUMP ROUTES button list; systems adjacent to the current one become clickable galactic-chart nodes (same POST /api/jump flow, same state refreshes). Current + unreachable systems are dimmed and not clickable. NodeGraph gains optional onNodeClick + per-node disabled (backward-compatible); two smoke tests updated to click chart fields.	2026-09-29 08:00:44 +00:00
kamilkrzywda	18ca5eae6c	Merge pull request 'v0.9.1 — layout pass: CARGO HOLD to right pane, wider panes, drop placeholders' (#20 ) from layout-tweaks into master CI / build + unit + e2e (push) Successful in 2m27s Details	2026-09-29 09:12:54 +02:00
kamilkrzywda	b05ac32da6	release v0.9.1 CI / build + unit + e2e (pull_request) Successful in 2m37s Details	2026-09-29 06:48:20 +00:00
kamilkrzywda	85627201f8	feat(ui): layout pass — CARGO HOLD to right column, wider panes, drop placeholders CARGO HOLD // INVENTORY moves out of the LOCAL SYSTEM tab into a persistent right-column panel; UPCOMING ENCOUNTERS removed; SHIP DATA folded into VESSEL METRICS (SECTOR + TURN kept with real values, filler dropped). Grid goes 260px/1fr/240px -> 320px/1fr/360px. Cargo state uses the lifted-state pattern: MissionControl owns /api/system and LocalSystemPanel reports each scan's response up via onChanged (ShipSystemsPanel style) — no polling.	2026-09-29 06:48:20 +00:00
kamilkrzywda	fb11a8ef81	Merge pull request 'v0.9.0 — EVENT LOG: real game events in the terminal (#11 )' (#18 ) from event-log into master CI / build + unit + e2e (push) Successful in 2m51s Details	2026-09-29 05:05:30 +02:00
kamilkrzywda	37b193ffb8	test(e2e): tab-switch test — assert real log lines, not the removed placeholder CI / build + unit + e2e (pull_request) Successful in 2m36s Details CI run 361: v0.9.0 replaced the placeholder feed with EventLogPanel, but this pre-existing assertion still expected 'SHIP LOG // PLACEHOLDER FEED'. Assert a real T<turn> // <MESSAGE> line instead — every save has the turn-0 new_game event, so it holds on a fresh stack and across retries.	2026-09-29 03:02:04 +00:00
kamilkrzywda	760a45fc4b	release v0.9.0 CI / build + unit + e2e (pull_request) Failing after 3m12s Details	2026-09-29 02:48:25 +00:00
kamilkrzywda	0b435a583b	test(e2e): event log entries + restart persistence smoke: jump (shared helper) + scan, then assert both events are in GET /api/events with the newer one first, and that the EVENT LOG terminal renders both T<turn> // <MESSAGE> lines. Idempotent across retries — asserts on this run's own entries by turn/message, never absolute counts. state: the latest five log lines come back identical (ids included) after the mid-run container restart.	2026-09-29 02:47:36 +00:00
kamilkrzywda	29e8ac6909	feat(ui): EVENT LOG tab renders the real game log Self-fetching EventLogPanel (MissionPanel pattern — refetches on each tab open). One terminal line per event: T<turn> // <MESSAGE>, newest first, with the event's local time as the timestamp; new_game lines render as system lines. Placeholder feed + now() removed from mission-control.	2026-09-29 02:45:38 +00:00
kamilkrzywda	21abf8768f	feat(api): GET /api/events endpoint + OpenAPI Latest game events, newest first; auto-initializes like the other reads. ?limit= defaults to 50 (cap 200), non-integer/out-of-range → 400. OpenAPI spec gains the path + Event schema (14 -> 15 paths).	2026-09-29 02:45:38 +00:00
kamilkrzywda	8d678d73ce	test: assert events for the remaining action types expand had no event assertion at all; build and mission-complete asserted type/message but not the event's turn. Issue #11 requires every action type to be covered with correct turn/type/message.	2026-09-29 02:45:38 +00:00
kamilkrzywda	0d5858695a	feat(events): event log read — getEvents + limit parsing lib/game/events.ts: the latest N events of the save, newest first (ORDER BY id DESC), with parseEventLimit for the optional ?limit= param (default 50, cap 200, 400 otherwise). Unit tests cover default/accept/reject and newest-first ordering + slicing.	2026-09-29 02:45:38 +00:00