ui: WORLD MAP tab renders live world state with jump buttons (real data from /api/world)

components/mission-control.tsx

@@ -5,17 +5,18 @@ import { Badge } from '@/components/ui/badge'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { NodeGraph, type NodeGraphEdge, type NodeGraphNode } from '@/components/ui/node-graph'
 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 { WorldMapPanel } from '@/components/world-map'
 
 // 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), with
-// placeholder SpaceWanderer content — no game logic yet. Single player, no auth, by design.
+// showcase (src/app/_pages/showcase/mission-control-content.tsx in baxy5/scificn-ui). The
+// WORLD MAP tab renders live data from /api/world; the other tabs keep placeholder content
+// until their own issues land. Single player, no auth, by design.
 
 function useNarrow(threshold = 900): boolean {
   const [narrow, setNarrow] = useState(
@@ -43,33 +44,6 @@ const shipSystems: SystemEntry[] = [
   { name: 'COMMS', status: 'ACTIVE' },
 ]
 
-// WORLD MAP — every node is a solar system, edges are jump routes.
-const worldMapNodes: NodeGraphNode[] = [
-  { id: 'kepler', label: 'Kepler Drift', x: 50, y: 48, status: 'ACTIVE', sublabel: 'CURRENT' },
-  { id: 'vesper', label: 'Vesper Reach', x: 22, y: 26, status: 'NEUTRAL', sublabel: '3 WORLDS' },
-  { id: 'hollow', label: 'Hollow Gate', x: 74, y: 20, status: 'NEUTRAL', sublabel: '5 WORLDS' },
-  { id: 'cinder', label: 'Cinder Field', x: 86, y: 56, status: 'WARNING', sublabel: 'RADIATION' },
-  { id: 'lantern', label: 'Lantern Void', x: 30, y: 74, status: 'NEUTRAL', sublabel: '2 WORLDS' },
-  { id: 'sable', label: 'Sable Reach', x: 8, y: 46, status: 'OFFLINE', sublabel: 'UNKNOWN' },
-  { id: 'orpheus', label: 'Orpheus Deep', x: 52, y: 10, status: 'NEUTRAL', sublabel: '7 WORLDS' },
-  { id: 'mire', label: 'Mire Station', x: 68, y: 84, status: 'ACTIVE', sublabel: 'OUTPOST' },
-  { id: 'thalassa', label: 'Thalassa Bend', x: 12, y: 86, status: 'NEUTRAL', sublabel: '4 WORLDS' },
-  { id: 'kuiper', label: 'Kuiper Shard', x: 90, y: 30, status: 'CRITICAL', sublabel: 'WARZONE' },
-]
-
-const worldMapEdges: NodeGraphEdge[] = [
-  { from: 'kepler', to: 'vesper', animated: true },
-  { from: 'kepler', to: 'hollow', label: 'JUMP-2' },
-  { from: 'kepler', to: 'lantern', animated: true },
-  { from: 'kepler', to: 'mire' },
-  { from: 'vesper', to: 'orpheus' },
-  { from: 'hollow', to: 'kuiper', label: 'JUMP-1' },
-  { from: 'cinder', to: 'kuiper' },
-  { from: 'lantern', to: 'thalassa' },
-  { from: 'sable', to: 'vesper' },
-  { from: 'mire', to: 'cinder' },
-]
-
 // LOCAL SYSTEM — explorable worlds of the current system (regenerated per save after each jump, later).
 const explorablePlanets = [
   {
@@ -360,16 +334,9 @@ export function MissionControl() {
                     <TabsTrigger value="event-log">EVENT LOG</TabsTrigger>
                   </TabsList>
 
-                  {/* WORLD MAP TAB */}
+                  {/* WORLD MAP TAB — live data from /api/world */}
                   <TabsContent value="world-map" style={{ margin: 0, padding: '1rem' }}>
-                    <NodeGraph
-                      nodes={worldMapNodes}
-                      edges={worldMapEdges}
-                      variant="ACTIVE"
-                      title="GALACTIC CHART // JUMP ROUTES (PLACEHOLDER)"
-                      height={380}
-                      style={{ width: '100%' }}
-                    />
+                    <WorldMapPanel height={380} />
                   </TabsContent>
 
                   {/* LOCAL SYSTEM TAB */}