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

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

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: 1200, margin: '0 auto', padding: 20 }}>
      <header style={{ borderBottom: '2px solid #333', paddingBottom: 20, marginBottom: 20 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h1>LandveX {developerMode ? '(Developer Mode)' : ''}</h1>
          <button
            onClick={() => setDeveloperMode(!developerMode)}
            style={{
              padding: '8px 16px',
              background: developerMode ? '#ffd700' : '#f0f0f0',
              border: '1px solid #ccc',
              borderRadius: 4,
              cursor: 'pointer',
            }}
          >
            {developerMode ? '🔓 Developer' : '🔒 Normal'}
          </button>
        </div>
        <nav style={{ display: 'flex', gap: 20, marginTop: 10 }}>
          <Link to="/">Dataset Explorer</Link>
          <Link to="/upload">Mission Upload</Link>
          <Link to="/console">Field Console</Link>
          <Link to="/health">Health</Link>
          <Link to="/pilot">Pilot 001</Link>
          <Link to="/readiness">Readiness</Link>
          {developerMode && (
            <>
              <Link to="/datasets">Datasets</Link>
              <Link to="/models">Models</Link>
              <Link to="/training">Training</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 />} />
      </Routes>
    </div>
  );
}

export default App;