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);

  const navStyle: React.CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    marginTop: 12,
    fontSize: '1rem',
    padding: '12px 0',
    borderTop: '1px solid #eee',
  };

  const linkStyle: React.CSSProperties = {
    padding: '8px 12px',
    textDecoration: 'none',
    color: '#333',
    borderRadius: 4,
    display: 'block',
  };

  const buttonStyle: React.CSSProperties = {
    padding: '8px 12px',
    background: '#f0f0f0',
    border: '1px solid #ccc',
    borderRadius: 4,
    cursor: 'pointer',
    fontSize: '1rem',
    minWidth: 44,
    minHeight: 44,
  };

  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={buttonStyle}
              aria-label="Toggle developer mode"
            >
              {developerMode ? '🔓' : '🔒'}
            </button>
            <button
              onClick={() => setMenuOpen(!menuOpen)}
              style={buttonStyle}
              aria-label="Toggle menu"
            >
              {menuOpen ? '✕' : '☰'}
            </button>
          </div>
        </div>
        {menuOpen && (
          <nav style={navStyle}>
            <Link to="/" onClick={() => setMenuOpen(false)} style={linkStyle}>📊 Explorer</Link>
            <Link to="/upload" onClick={() => setMenuOpen(false)} style={linkStyle}>📤 Upload</Link>
            <Link to="/console" onClick={() => setMenuOpen(false)} style={linkStyle}>🎮 Console</Link>
            <Link to="/health" onClick={() => setMenuOpen(false)} style={linkStyle}>🏥 Health</Link>
            <Link to="/pilot" onClick={() => setMenuOpen(false)} style={linkStyle}>✅ Pilot</Link>
            <Link to="/readiness" onClick={() => setMenuOpen(false)} style={linkStyle}>📋 Ready</Link>
            <Link to="/kill" onClick={() => setMenuOpen(false)} style={linkStyle}>🔥 Kill</Link>
            {developerMode && (
              <>
                <Link to="/datasets" onClick={() => setMenuOpen(false)} style={linkStyle}>🗂️ Data</Link>
                <Link to="/models" onClick={() => setMenuOpen(false)} style={linkStyle}>🧠 Models</Link>
                <Link to="/training" onClick={() => setMenuOpen(false)} style={linkStyle}>🏋️ 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;