Merge pull request 'v0.9.3 — layout: only middle pane scrolls, side panels stay fixed (#21)' (#24) from middle-pane-scroll into master

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.

CHANGELOG.md

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

components/local-system.tsx

@@ -1,69 +1,50 @@
 '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) => {
+      setExploringId(planetId)
+      try {
+        const res = await fetch('/api/explore', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ planetId }),
+        })
+        const body = (await res.json()) as ExploreResult & { error?: string }
+        if (!res.ok) throw new Error(body.error ?? `HTTP ${res.status}`)
+        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)
+      }
+    },
+    [onChanged]
+  )
 
-  const explore = useCallback(async (planetId: number) => {
-    setExploringId(planetId)
-    try {
-      const res = await fetch('/api/explore', {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ planetId }),
-      })
-      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
-      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>
-    )
-  }
-
-  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>

components/mission-control.tsx

@@ -15,14 +15,15 @@ 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'
 
 // 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
-// All seven tabs render live data (/api/world, /api/system, /api/crew, /api/ship, /api/tech,
-// /api/missions, /api/events). 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(
@@ -36,31 +37,15 @@ function useNarrow(threshold = 900): boolean {
   return narrow
 }
 
-// ── 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' },
-]
-
 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)
 
@@ -75,6 +60,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}`)
@@ -113,6 +107,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',
@@ -202,6 +200,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',
@@ -248,8 +247,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)',
           }}
@@ -297,11 +297,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>
@@ -321,7 +344,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' }}>
@@ -329,7 +354,7 @@ export function MissionControl() {
                 </div>
               </PanelHeader>
 
-              <PanelContent style={{ padding: 0 }}>
+              <PanelContent style={{ padding: 0, flex: 1, minHeight: 0, overflowY: 'auto' }}>
                 <Tabs defaultValue="world-map">
                   <TabsList
                     style={{
@@ -352,9 +377,9 @@ export function MissionControl() {
                     <WorldMapPanel height={380} />
                   </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 */}
@@ -386,7 +411,7 @@ export function MissionControl() {
             </Panel>
           </div>
 
-          {/* ── RIGHT: UPCOMING ENCOUNTERS + SHIP DATA ── */}
+          {/* ── RIGHT: CARGO HOLD (persistent — inventory lifted from /api/system) ── */}
           <div
             style={{
               background: 'var(--background)',
@@ -399,110 +424,34 @@ export function MissionControl() {
           >
             <Panel notch="sm">
               <PanelHeader>
-                <PanelTitle>UPCOMING ENCOUNTERS</PanelTitle>
-                <div style={{ marginLeft: 'auto' }}>
-                  <Badge variant="SCANNING">{encounters.length} QUEUED</Badge>
-                </div>
+                <PanelTitle>CARGO HOLD // INVENTORY</PanelTitle>
+                {system && (
+                  <div style={{ marginLeft: 'auto' }}>
+                    <Badge variant={system.inventory.length > 0 ? 'ACTIVE' : 'OFFLINE'}>
+                      {system.inventory.reduce((n, i) => n + i.qty, 0)} UNITS
+                    </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>
-                        </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}
+                {!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>
-                  ))}
-                </div>
+                  ))
+                )}
               </PanelContent>
             </Panel>
           </div>

components/ui/node-graph.tsx

@@ -13,6 +13,7 @@ export interface NodeGraphNode {
   y: number
   status?: NodeStatus
   sublabel?: string
+  disabled?: boolean   // not clickable even when onNodeClick is set (e.g. the current system)
 }
 
 export interface NodeGraphEdge {
@@ -29,6 +30,7 @@ export interface NodeGraphProps extends React.HTMLAttributes<HTMLDivElement> {
   title?: string
   height?: number
   directed?: boolean
+  onNodeClick?: (id: string) => void   // makes non-disabled nodes clickable buttons
 }
 
 const VARIANT_COLORS: Record<NodeGraphVariant, string> = {
@@ -59,6 +61,7 @@ const NodeGraph = React.forwardRef<HTMLDivElement, NodeGraphProps>(
       title,
       height   = 320,
       directed = false,
+      onNodeClick,
       style,
       ...props
     },
@@ -219,13 +222,21 @@ const NodeGraph = React.forwardRef<HTMLDivElement, NodeGraphProps>(
               const cy = nodePy(node)
               const isHovered   = hovered === node.id
               const statusColor = node.status ? STATUS_COLOR[node.status] : color
+              const clickable   = !!onNodeClick && !node.disabled
 
               return (
                 <g
                   key={node.id}
                   onMouseEnter={() => setHovered(node.id)}
                   onMouseLeave={() => setHovered(null)}
-                  style={{ cursor: 'default' }}
+                  onClick={clickable ? () => onNodeClick(node.id) : undefined}
+                  onKeyDown={clickable
+                    ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onNodeClick(node.id) } }
+                    : undefined}
+                  role={clickable ? 'button' : undefined}
+                  tabIndex={clickable ? 0 : undefined}
+                  aria-label={clickable ? node.label.toUpperCase() : undefined}
+                  style={{ cursor: clickable ? 'pointer' : 'default' }}
                 >
                   {/* Background */}
                   <rect

components/world-map.tsx

@@ -1,13 +1,12 @@
 'use client'
 
 import { useCallback, useEffect, useState } from 'react'
-import { Button } from '@/components/ui/button'
 import { NodeGraph } from '@/components/ui/node-graph'
 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,
+// WORLD MAP tab — renders real world state from /api/world. Clicking a system adjacent to the
+// current one on the galactic chart jumps there (same POST /api/jump flow as before); the
+// current and unreachable systems are dimmed and not clickable. Turn-based: fetch on mount,
 // refetch via the jump response — no polling.
 
 interface WorldMapPanelProps {
@@ -74,58 +73,34 @@ export function WorldMapPanel({ height = 380 }: WorldMapPanelProps) {
   }
 
   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)!)
+  // Systems one jump away — the only clickable chart fields (the same set as the old JUMP ROUTES list).
+  const reachableIds = new Set(
+    world.edges.filter(([a, b]) => a === current.id || b === current.id).map(([a, b]) => (a === current.id ? b : a))
+  )
 
   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',
-        }))}
+        nodes={world.systems.map((s) => {
+          const jumpable = !s.current && reachableIds.has(s.id)
+          return {
+            id: String(s.id),
+            label: s.name,
+            x: s.x,
+            y: s.y,
+            status: s.current ? 'ACTIVE' : jumpable ? 'NEUTRAL' : 'OFFLINE',
+            sublabel: s.current ? 'CURRENT' : jumpable ? (s.discovered ? 'DISCOVERED // JUMP' : 'UNKNOWN // JUMP') : s.discovered ? 'DISCOVERED' : 'UNKNOWN',
+            disabled: !jumpable || jumpingId !== null, // dimmed + not clickable; all locked while a jump is in flight
+          }
+        })}
         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%' }}
+        onNodeClick={(id) => void jump(Number(id))}
       />
 
-      <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',
-          }}
-        >
-          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>
-          ))}
-        </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' }}>

e2e/smoke.spec.ts

@@ -71,12 +71,17 @@ test('tabs switch panels client-side (event log terminal)', async ({ page }) =>
 });
 
 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 }) => {
@@ -87,7 +92,8 @@ 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);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "space-wanderer",
-  "version": "0.9.0",
+  "version": "0.9.3",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",