Merge pull request 'v0.9.9 — world map: force-directed graph with pan+zoom (#28)' (#34) from world-map-graph-viz into master

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.

CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## 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).

bun.lock

@@ -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=="],

components/mission-control.tsx

@@ -1,6 +1,6 @@
 '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'
@@ -18,6 +18,7 @@ import { CREW_CAPACITY } from '@/lib/game/ship-costs'
 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). All seven
@@ -37,6 +38,11 @@ function useNarrow(threshold = 900): boolean {
   return narrow
 }
 
+// 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)
@@ -48,6 +54,9 @@ export function MissionControl() {
   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
@@ -97,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
@@ -107,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',
@@ -137,7 +169,7 @@ export function MissionControl() {
             flexShrink: 0,
           }}
         >
-          ◄ SHIP
+          v{pkg.version}
         </span>
 
         <span style={{ color: 'var(--border)', flexShrink: 0 }}>│</span>
@@ -196,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',
@@ -242,6 +275,7 @@ export function MissionControl() {
         <div
           style={{
             flex: 1,
+            minHeight: 0, // same — the columns' overflowY:auto then scrolls inside their tracks
             display: 'grid',
             gridTemplateColumns: narrow ? '1fr' : '320px 1fr 360px',
             gap: '1px',
@@ -338,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' }}>
@@ -346,13 +382,22 @@ export function MissionControl() {
                 </div>
               </PanelHeader>
 
-              <PanelContent style={{ padding: 0 }}>
+              <PanelContent style={{ padding: 0, flex: 1, minHeight: 0, overflowY: 'auto' }}>
-                <Tabs defaultValue="world-map">
+                <Tabs
+                  value={activeTab ?? 'world-map'}
+                  onValueChange={(v) => {
+                    setActiveTab(v)
+                    window.localStorage.setItem(ACTIVE_TAB_KEY, v) // #27 — keep the tab across refreshes
+                  }}
+                >
                   <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>
@@ -366,7 +411,7 @@ export function MissionControl() {
 
                   {/* WORLD MAP TAB — live data from /api/world */}
                   <TabsContent value="world-map" style={{ margin: 0, padding: '1rem' }}>
-                    <WorldMapPanel height={380} />
+                    <WorldMapPanel height={380} onJumped={refreshSystem} />
                   </TabsContent>
 
                   {/* LOCAL SYSTEM TAB — live data (state owned by MissionControl; scans report up) */}

components/ui/node-graph.tsx

@@ -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 }

components/world-map.tsx

@@ -1,23 +1,54 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
-import { Button } from '@/components/ui/button'
+import { forceCenter, forceCollide, forceLink, forceManyBody, forceSimulation } from 'd3-force'
-import { NodeGraph } from '@/components/ui/node-graph'
+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
+// WORLD MAP tab — real world state from /api/world on a force-directed chart (d3-force) with
-// offers a jump button per system adjacent to the current one (NodeGraph nodes are not
+// pan + zoom (d3-zoom), per #28. Clicking a system adjacent to the current one jumps there
-// clickable upstream, so the affordance lives in this list). Turn-based: fetch on mount,
+// (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.
 
 interface WorldMapPanelProps {
   height?: number
+  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, onJumped }: WorldMapPanelProps) {
   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 +68,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 +84,159 @@ 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
+
+    const W = container.clientWidth || 800
+    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) * height,
+    }))
+    const links: ChartLink[] = world.edges.map(([a, b]) => ({ source: a, target: b }))
+
+    const svg = select(container)
+      .append('svg')
+      .attr('width', '100%')
+      .attr('height', height)
+      .attr('viewBox', `0 0 ${W} ${height}`)
+      .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), height / (maxY - minY + pad * 2))
+      const tx = W / 2 - scale * ((minX + maxX) / 2)
+      const ty = height / 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, height / 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 +251,15 @@ 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)!)
-
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-      <NodeGraph
+      {/* Same wrapper + title bar as the old hand-rolled chart; d3 owns everything inside the box. */}
-        nodes={world.systems.map((s) => ({
+      <div style={{ border: '1px solid var(--border)', background: 'var(--surface)', fontFamily: 'var(--font-mono)', overflow: 'hidden' }}>
-          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={{
             padding: '0.4rem 0.75rem',
@@ -109,21 +271,9 @@ export function WorldMapPanel({ height = 380 }: WorldMapPanelProps) {
             textTransform: 'uppercase',
           }}
         >
-          JUMP ROUTES // FROM {current.name.toUpperCase()}
+          GALACTIC CHART // JUMP ROUTES — TURN {world.turn}
-        </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>
-          ))}
         </div>
+        <div ref={containerRef} style={{ width: '100%', height: `${height}px` }} />
       </div>
 
       {error && (

e2e/smoke.spec.ts

@@ -70,13 +70,60 @@ test('tabs switch panels client-side (event log terminal)', async ({ page }) =>
   await expect(page.getByText(/T\d+ \/\/ /).first()).toBeVisible();
 });
 
-test('world map shows the generated starting system and its neighbours', async ({ page }) => {
+test('active tab survives a page reload (#27)', async ({ page }) => {
   await page.goto('/');
-  // Live chart title carries the turn counter; a fresh save sits at the start with six jump routes.
+  // 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 });
+
+  // WORLD MAP is always tall enough to overflow (fixed-height chart) — deterministic across retries.
+  await page.getByRole('tab', { name: 'WORLD MAP' }).click();
+
+  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.
   await expect(page.getByText(/GALACTIC CHART \/\/ JUMP ROUTES — TURN \d+/)).toBeVisible();
-  const jumpButtons = page.getByRole('button', { name: /\/\/ JUMP$/ });
+  // The current system is marked, and every adjacent system is a clickable chart field (role=button).
-  await expect(jumpButtons.first()).toBeVisible();
+  const current = world.systems.find((s) => s.current)!;
-  await expect(jumpButtons).toHaveCount(6);
+  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 }) => {
@@ -87,13 +134,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;
 

lib/db/schema.ts

@@ -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),

lib/game/crew.test.ts

@@ -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)
+  })
 })

lib/game/crew.ts

@@ -49,13 +49,23 @@ 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(name)) {
+    if (!taken.has(base)) {
-      taken.add(name)
+      taken.add(base)
-      return name
+      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
+        }
+      }
     }
   }
 }

lib/game/world.test.ts

@@ -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', () => {

lib/game/world.ts

@@ -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,13 +36,25 @@ 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(name)) {
+    if (!taken.has(base)) {
-      taken.add(name)
+      taken.add(base)
-      return name
+      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
+        }
+      }
     }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "space-wanderer",
-  "version": "0.9.1",
+  "version": "0.9.9",
   "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"
   }