boc/packages/ui/src/App.tsx

import { Routes, Route, Link } from 'react-router-dom';
import { useState } from 'react';
import DatasetExplorer from './pages/DatasetExplorer';
import ArtifactViewer from './pages/ArtifactViewer';
import MissionUpload from './pages/MissionUpload';
import FieldConsole from './pages/FieldConsole';
import HealthDashboard from './pages/HealthDashboard';
import PilotChecklist from './pages/PilotChecklist';
import ReadinessDashboard from './pages/ReadinessDashboard';
import KillList from './pages/KillList';

function App() {
  const [developerMode, setDeveloperMode] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: 1200, margin: '0 auto', padding: 12 }}>
      <header style={{ borderBottom: '2px solid #333', paddingBottom: 12, marginBottom: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h1 style={{ fontSize: '1.3rem', margin: 0 }}>LandveX</h1>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <button
              onClick={() => setDeveloperMode(!developerMode)}
              style={{
                padding: '4px 8px',
                background: developerMode ? '#ffd700' : '#f0f0f0',
                border: '1px solid #ccc',
                borderRadius: 4,
                cursor: 'pointer',
                fontSize: '0.7rem',
              }}
            >
              {developerMode ? '🔓' : '🔒'}
            </button>
            <button
              onClick={() => setMenuOpen(!menuOpen)}
              style={{
                padding: '4px 8px',
                background: '#f0f0f0',
                border: '1px solid #ccc',
                borderRadius: 4,
                cursor: 'pointer',
                fontSize: '0.9rem',
              }}
            >
              ☰
            </button>
          </div>
        </div>
        {menuOpen && (
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12, fontSize: '0.9rem' }}>
            <Link to="/" onClick={() => setMenuOpen(false)}>📊 Explorer</Link>
            <Link to="/upload" onClick={() => setMenuOpen(false)}>📤 Upload</Link>
            <Link to="/console" onClick={() => setMenuOpen(false)}>🎮 Console</Link>
            <Link to="/health" onClick={() => setMenuOpen(false)}>🏥 Health</Link>
            <Link to="/pilot" onClick={() => setMenuOpen(false)}>✅ Pilot</Link>
            <Link to="/readiness" onClick={() => setMenuOpen(false)}>📋 Ready</Link>
            <Link to="/kill" onClick={() => setMenuOpen(false)}>🔥 Kill</Link>
            {developerMode && (
              <>
                <Link to="/datasets" onClick={() => setMenuOpen(false)}>🗂️ Data</Link>
                <Link to="/models" onClick={() => setMenuOpen(false)}>🧠 Models</Link>
                <Link to="/training" onClick={() => setMenuOpen(false)}>🏋️ Train</Link>
              </>
            )}
          </nav>
        )}
      </header>

      <Routes>
        <Route path="/" element={<DatasetExplorer />} />
        <Route path="/upload" element={<MissionUpload />} />
        <Route path="/artifact/:id" element={<ArtifactViewer />} />
        <Route path="/console" element={<FieldConsole />} />
        <Route path="/health" element={<HealthDashboard />} />
        <Route path="/pilot" element={<PilotChecklist />} />
        <Route path="/readiness" element={<ReadinessDashboard />} />
        <Route path="/kill" element={<KillList />} />
      </Routes>
    </div>
  );
}

export default App;