From 5291e0fa6ed265390c690a70691bf01cfca931ab Mon Sep 17 00:00:00 2001
From: Kamil Krzywda <krzywda.kamil@gmail.com>
Date: Mon, 28 Sep 2026 19:18:34 +0000
Subject: [PATCH] =?UTF-8?q?app:=20rebuild=20operations=20tabs=20as=207-tab?=
 =?UTF-8?q?=20game=20template=20(world=20map,=20local=20system,=20crew,=20?=
 =?UTF-8?q?ship=20systems,=20skill=20tree,=20missions,=20event=20log)=20?=
 =?UTF-8?q?=E2=80=94=20visual=20only?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/mission-control.tsx | 436 +++++++++++++++++++++++----------
 1 file changed, 301 insertions(+), 135 deletions(-)

diff --git a/components/mission-control.tsx b/components/mission-control.tsx
index bceb7f4..0741b72 100644
--- a/components/mission-control.tsx
+++ b/components/mission-control.tsx
@@ -2,11 +2,12 @@
 
 import { useEffect, useState } from 'react'
 import { Badge } from '@/components/ui/badge'
-import { BarChart } from '@/components/ui/bar-chart'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { LineChart } from '@/components/ui/line-chart'
+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 { ProgressRing } from '@/components/ui/progress-ring'
+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'
@@ -42,19 +43,82 @@ const shipSystems: SystemEntry[] = [
   { name: 'COMMS', status: 'ACTIVE' },
 ]
 
-const bayOutput = [
-  { label: 'PWR', value: 14 },
-  { label: 'NAV', value: 9 },
-  { label: 'COM', value: 6 },
-  { label: 'WPN', value: 3 },
-  { label: 'LSS', value: 12 },
-  { label: 'ENG', value: 11 },
-  { label: 'BAY', value: 7 },
-  { label: 'MED', value: 5 },
+// 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 hullTrack = [100, 98, 97, 96, 94, 95, 92, 90, 89, 87]
-const hullLabels = hullTrack.map((_, i) => `T-${hullTrack.length - 1 - i}`)
+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 — the current system (regenerated per save after each jump, later).
+const localSystemNodes: NodeGraphNode[] = [
+  { id: 'star', label: 'Kepler-442', x: 50, y: 50, status: 'ACTIVE', sublabel: 'G2 STAR' },
+  { id: 'aurelle', label: 'Aurelle', x: 18, y: 30, status: 'ACTIVE', sublabel: 'TERRESTRIAL' },
+  { id: 'brimstone', label: 'Brimstone', x: 76, y: 24, status: 'NEUTRAL', sublabel: 'GAS GIANT' },
+  { id: 'ashfall', label: 'Ashfall', x: 90, y: 52, status: 'WARNING', sublabel: 'MOON' },
+  { id: 'cinderrock', label: 'Cinderrock', x: 74, y: 80, status: 'NEUTRAL', sublabel: 'ROCKY' },
+  { id: 'driftband', label: 'Driftband', x: 30, y: 78, status: 'WARNING', sublabel: 'ASTEROID RING' },
+  { id: 'palemoon', label: 'Palemoon', x: 8, y: 54, status: 'NEUTRAL', sublabel: 'MOON' },
+]
+
+const localSystemEdges: NodeGraphEdge[] = [
+  { from: 'star', to: 'aurelle' },
+  { from: 'star', to: 'brimstone' },
+  { from: 'brimstone', to: 'ashfall', label: 'MOON' },
+  { from: 'star', to: 'cinderrock' },
+  { from: 'star', to: 'driftband' },
+  { from: 'aurelle', to: 'palemoon', label: 'MOON' },
+]
+
+const explorablePlanets = [
+  { name: 'AURELLE', type: 'TERRESTRIAL // OCEAN CONTINENTS', state: 'UNEXPLORED' as const },
+  { name: 'BRIMSTONE', type: 'GAS GIANT // CLOUD DECKS', state: 'SCANNED' as const },
+  { name: 'ASHFALL (MOON)', type: 'VOLCANIC MOON // SULFUR VEINS', state: 'UNEXPLORED' as const },
+  { name: 'CINDERROCK', type: 'ROCKY // IRON RICH', state: 'UNEXPLORED' as const },
+  { name: 'DRIFTBAND', type: 'ASTEROID FIELD // HAZARD', state: 'HAZARD' as const },
+]
+
+const crew = [
+  { name: 'CMDR. E. VANCE', role: 'COMMANDER', good: 'STEADY UNDER PRESSURE', bad: 'RIGID — SLOW TO ADAPT' },
+  { name: 'LT. M. OKONKWO', role: 'PILOT', good: 'RECKLESS COURAGE', bad: 'SHORT FUSE' },
+  { name: 'DR. I. SORENSEN', role: 'MEDIC', good: 'CALM IN A CRISIS', bad: 'OVERCAUTIOUS' },
+  { name: 'R. "SPARK" DELACRUZ', role: 'ENGINEER', good: 'FIXES ANYTHING', bad: 'CARELESS WITH FUSES' },
+]
+
+const shipSystemCards = [
+  { name: 'REACTOR', level: 'LV 2', status: 'ACTIVE' as const, actions: ['EXPAND', 'UPGRADE'] },
+  { name: 'LIFE SUPPORT', level: 'LV 1', status: 'ACTIVE' as const, actions: ['EXPAND', 'UPGRADE'] },
+  { name: 'NAV COMPUTER', level: 'LV 3', status: 'SCANNING' as const, actions: ['EXPAND', 'UPGRADE'] },
+  { name: 'WEAPONS', level: 'OFFLINE', status: 'OFFLINE' as const, actions: ['BUILD NEW'] },
+  { name: 'COMMS ARRAY', level: 'LV 1', status: 'ACTIVE' as const, actions: ['EXPAND', 'UPGRADE'] },
+]
+
+const skillCards = [
+  { name: 'ADVANCED FUSION CORE', unlocks: 'REACTOR LV 4 + OVERCLOCK', state: 'AVAILABLE' as const },
+  { name: 'HULL PLATING SCHEMATICS', unlocks: 'BUILD ARMOR BAY MODULES', state: 'AVAILABLE' as const },
+  { name: 'CREW TRAINING PROTOCOLS', unlocks: 'RETRAIN CREW TRAITS', state: 'LOCKED' as const },
+  { name: 'JUMP DRIVE TUNING', unlocks: 'SHORTER JUMP COOLDOWN', state: 'LOCKED' as const },
+]
 
 const encounters = [
   { name: 'DERELICT FREIGHTER', when: 'T-07:14', id: '#E-102' },
@@ -237,7 +301,7 @@ export function MissionControl() {
             background: 'var(--border)',
           }}
         >
-          {/* ── LEFT: SHIP SYSTEMS + VESSEL METRICS ── */}
+          {/* ── LEFT: SHIP SYSTEMS + VESSEL METRICS (mirrors the SHIP SYSTEMS tab) ── */}
           <div
             style={{
               background: 'var(--background)',
@@ -264,64 +328,16 @@ export function MissionControl() {
                 <PanelTitle>VESSEL METRICS</PanelTitle>
               </PanelHeader>
               <PanelContent>
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-around',
-                    paddingTop: '0.5rem',
-                    paddingBottom: '0.25rem',
-                  }}
-                >
-                  <ProgressRing value={87} label="HULL" variant="ACTIVE" size={74} />
-                  <ProgressRing value={94} label="REACTOR" variant="ACTIVE" size={74} />
-                  <ProgressRing value={50} label="CREW / 6" variant="WARNING" size={74} />
-                </div>
-
-                <div
-                  style={{
-                    marginTop: '0.75rem',
-                    paddingTop: '0.75rem',
-                    borderTop: '1px solid var(--border)',
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 1fr 1fr',
-                    gap: '0.25rem',
-                    textAlign: 'center',
-                  }}
-                >
-                  {[
-                    { label: 'HULL INTEGRITY', note: 'last scan T-02' },
-                    { label: 'REACTOR OUTPUT', note: 'idle cycle' },
-                    { label: 'CREW ROSTER', note: 'of 6 berths' },
-                  ].map((item) => (
-                    <div key={item.label}>
-                      <div
-                        style={{
-                          fontSize: '0.52rem',
-                          color: 'var(--text-muted)',
-                          letterSpacing: '0.08em',
-                          textTransform: 'uppercase',
-                        }}
-                      >
-                        {item.label}
-                      </div>
-                      <div
-                        style={{
-                          fontSize: '0.48rem',
-                          color: 'var(--border)',
-                          letterSpacing: '0.06em',
-                          marginTop: '1px',
-                        }}
-                      >
-                        {item.note}
-                      </div>
-                    </div>
-                  ))}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.875rem' }}>
+                  <Progress label="HULL INTEGRITY" value={87} />
+                  <Progress label="REACTOR OUTPUT" value={94} />
+                  <Progress label="CREW ROSTER / 6" value={50} />
                 </div>
               </PanelContent>
             </Panel>
           </div>
 
-          {/* ── CENTER: OPERATIONS TABS ── */}
+          {/* ── CENTER: GAME TEMPLATE TABS (visual only — no handlers, placeholder data) ── */}
           <div
             style={{
               background: 'var(--background)',
@@ -341,75 +357,237 @@ export function MissionControl() {
               </PanelHeader>
 
               <PanelContent style={{ padding: 0 }}>
-                <Tabs defaultValue="systems">
+                <Tabs defaultValue="world-map">
                   <TabsList
-                    style={{ padding: '0 1rem', background: 'var(--surface-raised)' }}
+                    style={{
+                      padding: '0 1rem',
+                      background: 'var(--surface-raised)',
+                      overflowX: 'auto',
+                    }}
                   >
-                    <TabsTrigger value="systems">SYSTEMS</TabsTrigger>
-                    <TabsTrigger value="next">NEXT MISSION</TabsTrigger>
-                    <TabsTrigger value="log">LOG</TabsTrigger>
-                    <TabsTrigger value="hull">HULL TRACK</TabsTrigger>
+                    <TabsTrigger value="world-map">WORLD MAP</TabsTrigger>
+                    <TabsTrigger value="local-system">LOCAL SYSTEM</TabsTrigger>
+                    <TabsTrigger value="crew">CREW</TabsTrigger>
+                    <TabsTrigger value="ship-systems">SHIP SYSTEMS</TabsTrigger>
+                    <TabsTrigger value="skill-tree">SKILL TREE</TabsTrigger>
+                    <TabsTrigger value="missions">MISSIONS</TabsTrigger>
+                    <TabsTrigger value="event-log">EVENT LOG</TabsTrigger>
                   </TabsList>
 
-                  {/* SYSTEMS TAB */}
-                  <TabsContent value="systems" style={{ margin: 0, padding: '1rem' }}>
-                    <BarChart
-                      data={bayOutput}
-                      orientation="vertical"
+                  {/* WORLD MAP TAB */}
+                  <TabsContent value="world-map" style={{ margin: 0, padding: '1rem' }}>
+                    <NodeGraph
+                      nodes={worldMapNodes}
+                      edges={worldMapEdges}
                       variant="ACTIVE"
-                      title="MODULE OUTPUT BY BAY (PLACEHOLDER)"
+                      title="GALACTIC CHART // JUMP ROUTES (PLACEHOLDER)"
+                      height={380}
                       style={{ width: '100%' }}
                     />
-                    <div
-                      style={{
-                        marginTop: '1rem',
-                        display: 'grid',
-                        gridTemplateColumns: 'repeat(3, 1fr)',
-                        gap: '0.625rem',
-                      }}
-                    >
-                      {[
-                        { label: 'TOTAL MODULES', value: 34 },
-                        { label: 'ONLINE', value: 29 },
-                        { label: 'EFFICIENCY', value: '85%' },
-                      ].map((s) => (
+                  </TabsContent>
+
+                  {/* LOCAL SYSTEM TAB */}
+                  <TabsContent value="local-system" style={{ margin: 0, padding: '1rem' }}>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+                      <NodeGraph
+                        nodes={localSystemNodes}
+                        edges={localSystemEdges}
+                        variant="ACTIVE"
+                        title="KEPLER DRIFT // LOCAL SYSTEM (PLACEHOLDER)"
+                        height={280}
+                        style={{ width: '100%' }}
+                      />
+
+                      <div
+                        style={{
+                          border: '1px solid var(--border)',
+                          background: 'var(--surface)',
+                          overflow: 'hidden',
+                        }}
+                      >
                         <div
-                          key={s.label}
                           style={{
-                            padding: '0.75rem',
-                            background: 'var(--surface)',
-                            border: '1px solid var(--border)',
-                            textAlign: 'center',
+                            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',
                           }}
                         >
-                          <div
-                            style={{
-                              fontSize: '0.55rem',
-                              color: 'var(--text-muted)',
-                              letterSpacing: '0.12em',
-                              marginBottom: '0.4rem',
-                            }}
-                          >
-                            {s.label}
-                          </div>
-                          <div
-                            style={{
-                              fontSize: '1.1rem',
-                              fontWeight: 700,
-                              color: 'var(--color-green)',
-                              textShadow: 'var(--text-glow-green)',
-                              letterSpacing: '0.02em',
-                            }}
-                          >
-                            {s.value}
-                          </div>
+                          EXPLORABLE WORLDS // FIND THINGS HERE (PLACEHOLDER)
                         </div>
+                        {explorablePlanets.map((planet, i) => (
+                          <div
+                            key={planet.name}
+                            style={{
+                              display: 'flex',
+                              justifyContent: 'space-between',
+                              alignItems: 'center',
+                              gap: '0.5rem',
+                              padding: '0.6rem 0.75rem',
+                              borderBottom:
+                                i < explorablePlanets.length - 1
+                                  ? '1px solid var(--border)'
+                                  : 'none',
+                            }}
+                          >
+                            <div style={{ overflow: 'hidden' }}>
+                              <div
+                                style={{
+                                  fontSize: '0.68rem',
+                                  color: 'var(--text-secondary)',
+                                  letterSpacing: '0.04em',
+                                  textTransform: 'uppercase',
+                                }}
+                              >
+                                {planet.name}
+                              </div>
+                              <div
+                                style={{
+                                  fontSize: '0.57rem',
+                                  color: 'var(--text-muted)',
+                                  letterSpacing: '0.06em',
+                                  marginTop: '2px',
+                                }}
+                              >
+                                {planet.type}
+                              </div>
+                            </div>
+                            <Badge
+                              variant={
+                                planet.state === 'UNEXPLORED'
+                                  ? 'SCANNING'
+                                  : planet.state === 'HAZARD'
+                                    ? 'WARNING'
+                                    : 'ACTIVE'
+                              }
+                            >
+                              {planet.state}
+                            </Badge>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  {/* CREW TAB */}
+                  <TabsContent value="crew" style={{ margin: 0, padding: '1rem' }}>
+                    <div
+                      style={{
+                        display: 'grid',
+                        gridTemplateColumns: narrow ? '1fr' : 'repeat(2, 1fr)',
+                        gap: '0.75rem',
+                      }}
+                    >
+                      {crew.map((member) => (
+                        <Card key={member.name}>
+                          <CardHeader>
+                            <div style={{ display: 'flex', alignItems: 'center' }}>
+                              <CardTitle>{member.name}</CardTitle>
+                              <Badge variant="ACTIVE" className="ml-auto">
+                                ACTIVE
+                              </Badge>
+                            </div>
+                            <p
+                              style={{
+                                fontSize: '0.6rem',
+                                color: 'var(--text-muted)',
+                                letterSpacing: '0.1em',
+                                textTransform: 'uppercase',
+                              }}
+                            >
+                              {member.role}
+                            </p>
+                          </CardHeader>
+                          <CardContent style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
+                            <div style={{ fontSize: '0.7rem', letterSpacing: '0.05em' }}>
+                              <span style={{ color: 'var(--color-green)' }}>+ </span>
+                              <span style={{ color: 'var(--text-secondary)' }}>{member.good}</span>
+                            </div>
+                            <div style={{ fontSize: '0.7rem', letterSpacing: '0.05em' }}>
+                              <span style={{ color: 'var(--color-red)' }}>- </span>
+                              <span style={{ color: 'var(--text-secondary)' }}>{member.bad}</span>
+                            </div>
+                          </CardContent>
+                        </Card>
                       ))}
                     </div>
                   </TabsContent>
 
-                  {/* NEXT MISSION TAB */}
-                  <TabsContent value="next" style={{ margin: 0, padding: '1rem' }}>
+                  {/* SHIP SYSTEMS TAB */}
+                  <TabsContent value="ship-systems" style={{ margin: 0, padding: '1rem' }}>
+                    <div
+                      style={{
+                        display: 'grid',
+                        gridTemplateColumns: narrow ? '1fr' : 'repeat(2, 1fr)',
+                        gap: '0.75rem',
+                      }}
+                    >
+                      {shipSystemCards.map((system) => (
+                        <Card key={system.name}>
+                          <CardHeader>
+                            <div style={{ display: 'flex', alignItems: 'center' }}>
+                              <CardTitle>{system.name}</CardTitle>
+                              <Badge variant={system.status} className="ml-auto">
+                                {system.level}
+                              </Badge>
+                            </div>
+                          </CardHeader>
+                          <CardContent>
+                            <p style={{ fontSize: '0.65rem', color: 'var(--text-muted)', letterSpacing: '0.08em' }}>
+                              MODULE BAY // PLACEHOLDER READOUT
+                            </p>
+                          </CardContent>
+                          <CardFooter className="gap-2">
+                            {system.actions.map((action) => (
+                              <Button key={action} variant="OUTLINE" size="SM">
+                                {action}
+                              </Button>
+                            ))}
+                          </CardFooter>
+                        </Card>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  {/* SKILL TREE TAB */}
+                  <TabsContent value="skill-tree" style={{ margin: 0, padding: '1rem' }}>
+                    <div
+                      style={{
+                        display: 'grid',
+                        gridTemplateColumns: narrow ? '1fr' : 'repeat(2, 1fr)',
+                        gap: '0.75rem',
+                      }}
+                    >
+                      {skillCards.map((skill) => (
+                        <Card key={skill.name}>
+                          <CardHeader>
+                            <div style={{ display: 'flex', alignItems: 'center' }}>
+                              <CardTitle>{skill.name}</CardTitle>
+                              <Badge variant={skill.state === 'AVAILABLE' ? 'ACTIVE' : 'OFFLINE'} className="ml-auto">
+                                {skill.state}
+                              </Badge>
+                            </div>
+                          </CardHeader>
+                          <CardContent>
+                            <p style={{ fontSize: '0.65rem', color: 'var(--text-muted)', letterSpacing: '0.08em' }}>
+                              UNLOCKS: {skill.unlocks}
+                            </p>
+                          </CardContent>
+                          <CardFooter>
+                            <Button variant="OUTLINE" size="SM">
+                              RESEARCH
+                            </Button>
+                          </CardFooter>
+                        </Card>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  {/* MISSIONS TAB */}
+                  <TabsContent value="missions" style={{ margin: 0, padding: '1rem' }}>
                     <div
                       style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}
                     >
@@ -466,8 +644,8 @@ export function MissionControl() {
                     </div>
                   </TabsContent>
 
-                  {/* LOG TAB */}
-                  <TabsContent value="log" style={{ margin: 0, padding: '1rem' }}>
+                  {/* EVENT LOG TAB */}
+                  <TabsContent value="event-log" style={{ margin: 0, padding: '1rem' }}>
                     <Terminal
                       lines={logLines}
                       title="SHIP LOG // PLACEHOLDER FEED"
@@ -475,18 +653,6 @@ export function MissionControl() {
                       style={{ width: '100%' }}
                     />
                   </TabsContent>
-
-                  {/* HULL TRACK TAB */}
-                  <TabsContent value="hull" style={{ margin: 0, padding: '1rem' }}>
-                    <LineChart
-                      series={[{ id: 'hull', label: 'HULL INTEGRITY %', data: hullTrack }]}
-                      labels={hullLabels}
-                      title="HULL INTEGRITY TRACK // PLACEHOLDER"
-                      showArea
-                      animated={false}
-                      style={{ width: '100%' }}
-                    />
-                  </TabsContent>
                 </Tabs>
               </PanelContent>
             </Panel>