222 lines
9.5 KiB
TypeScript
222 lines
9.5 KiB
TypeScript
import { lazy, Suspense, useState, useEffect } from 'react';
|
|
import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from 'react-router-dom';
|
|
import Login from './components/Login';
|
|
import Layout from './components/Layout';
|
|
import Dashboard from './components/Dashboard';
|
|
import CommandPalette from './components/CommandPalette/CommandPalette';
|
|
import ShortcutsHelp from './components/ShortcutsHelp/ShortcutsHelp';
|
|
import { ToastProvider } from './components/Toasts/ToastProvider';
|
|
import { useToast } from './components/Toasts/useToast';
|
|
import { useGlobalHotkeys } from './hooks/useGlobalHotkeys';
|
|
import { isDeveloperMode } from './lib/devGate';
|
|
|
|
// Page components are code-split per route. Each lands as its own
|
|
// chunk and only downloads when the user navigates to that path —
|
|
// initial page-load stays slim. Dashboard stays eager because it's
|
|
// the landing page: lazy-loading it would Suspense-flicker on every
|
|
// login for zero gain.
|
|
const DeckyFleet = lazy(() => import('./components/DeckyFleet'));
|
|
const LiveLogs = lazy(() => import('./components/LiveLogs'));
|
|
const Webhooks = lazy(() => import('./components/Webhooks'));
|
|
const Attackers = lazy(() => import('./components/Attackers'));
|
|
const AttackerDetail = lazy(() => import('./components/AttackerDetail'));
|
|
const Identities = lazy(() => import('./components/Identities'));
|
|
const IdentityDetail = lazy(() => import('./components/IdentityDetail'));
|
|
const Campaigns = lazy(() => import('./components/Campaigns'));
|
|
const CampaignDetail = lazy(() => import('./components/CampaignDetail'));
|
|
const Orchestrator = lazy(() => import('./components/Orchestrator'));
|
|
const PersonaGeneration = lazy(() => import('./components/PersonaGeneration'));
|
|
const SyntheticFiles = lazy(() => import('./components/SyntheticFiles/SyntheticFiles'));
|
|
const RealismConfig = lazy(() => import('./components/RealismConfig/RealismConfig'));
|
|
const CanaryTokens = lazy(() => import('./components/CanaryTokens'));
|
|
const TopologyPersonaGeneration = lazy(() =>
|
|
import('./components/PersonaGeneration').then((m) => ({ default: m.TopologyPersonaGeneration })),
|
|
);
|
|
const Config = lazy(() => import('./components/Config'));
|
|
const Bounty = lazy(() => import('./components/Bounty'));
|
|
const Credentials = lazy(() => import('./components/Credentials'));
|
|
const RemoteUpdates = lazy(() => import('./components/RemoteUpdates'));
|
|
const SwarmHosts = lazy(() => import('./components/SwarmHosts'));
|
|
const MazeNET = lazy(() => import('./components/MazeNET/MazeNET'));
|
|
const TopologyList = lazy(() => import('./components/TopologyList/TopologyList'));
|
|
/* Dev-gated route: when VITE_DECNET_DEVELOPER is unset at build time,
|
|
* isDeveloperMode() collapses to `false` and Vite tree-shakes both
|
|
* the import below and the conditional <Route> out of the bundle. */
|
|
const ThemeLab = lazy(() => import('./components/ThemeLab/ThemeLab'));
|
|
|
|
/* Minimal fallback rendered while a lazy-loaded route chunk is in
|
|
* flight. Matches the house "dim mono" voice — no spinner library,
|
|
* no new CSS. Visible for a few frames on first navigation to a
|
|
* route; cached thereafter. */
|
|
const RouteFallback: React.FC = () => (
|
|
<div
|
|
style={{
|
|
padding: '48px',
|
|
textAlign: 'center',
|
|
opacity: 0.5,
|
|
fontSize: '0.82rem',
|
|
letterSpacing: '1.5px',
|
|
fontFamily: 'var(--font-mono)',
|
|
}}
|
|
>
|
|
LOADING…
|
|
</div>
|
|
);
|
|
|
|
/* Unified MazeNET entrypoint: no ?topology → topology selector,
|
|
* ?topology=<id> → editor bound to that topology. */
|
|
function MazeNETRoute() {
|
|
const qs = typeof window !== 'undefined' ? window.location.search : '';
|
|
const hasId = new URLSearchParams(qs).get('topology');
|
|
return hasId ? <MazeNET /> : <TopologyList />;
|
|
}
|
|
|
|
function isTokenValid(token: string): boolean {
|
|
try {
|
|
const payload = JSON.parse(atob(token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/')));
|
|
return typeof payload.exp === 'number' && payload.exp * 1000 > Date.now();
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function getValidToken(): string | null {
|
|
const stored = localStorage.getItem('token');
|
|
if (stored && isTokenValid(stored)) return stored;
|
|
if (stored) localStorage.removeItem('token');
|
|
return null;
|
|
}
|
|
|
|
const ACTION_LABELS: Record<string, string> = {
|
|
'deploy': 'DEPLOY · OPENING WIZARD',
|
|
'pause-logs': 'STREAM · TOGGLE QUEUED',
|
|
'mutate-all': 'MUTATE ALL · QUEUED',
|
|
'export-bounty': 'EXPORT BOUNTY · QUEUED',
|
|
};
|
|
|
|
interface AuthedShellProps {
|
|
onLogout: () => void;
|
|
onSearch: (q: string) => void;
|
|
searchQuery: string;
|
|
}
|
|
|
|
const AuthedShell: React.FC<AuthedShellProps> = ({ onLogout, onSearch, searchQuery }) => {
|
|
const navigate = useNavigate();
|
|
const { push } = useToast();
|
|
const [cmdOpen, setCmdOpen] = useState(false);
|
|
const [helpOpen, setHelpOpen] = useState(false);
|
|
|
|
useGlobalHotkeys({ cmdOpen, setCmdOpen, helpOpen, setHelpOpen });
|
|
|
|
const handleAction = (id: string) => {
|
|
if (id === 'shortcuts-help') { setHelpOpen(true); return; }
|
|
if (id === 'deploy') navigate('/fleet');
|
|
window.dispatchEvent(new CustomEvent('decnet:cmd', { detail: { id } }));
|
|
push({ text: ACTION_LABELS[id] ?? `${id.toUpperCase()} · QUEUED`, tone: 'violet', icon: 'terminal' });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Layout onLogout={onLogout} onSearch={onSearch} onOpenCmd={() => setCmdOpen(true)}>
|
|
<Suspense fallback={<RouteFallback />}>
|
|
<Routes>
|
|
<Route path="/" element={<Dashboard searchQuery={searchQuery} />} />
|
|
<Route path="/fleet" element={<DeckyFleet searchQuery={searchQuery} />} />
|
|
<Route path="/topologies" element={<Navigate to="/mazenet" replace />} />
|
|
<Route path="/mazenet" element={<MazeNETRoute />} />
|
|
<Route path="/live-logs" element={<LiveLogs />} />
|
|
<Route path="/webhooks" element={<Webhooks />} />
|
|
<Route path="/bounty" element={<Bounty />} />
|
|
<Route path="/credentials" element={<Credentials />} />
|
|
<Route path="/attackers" element={<Attackers />} />
|
|
<Route path="/attackers/:id" element={<AttackerDetail />} />
|
|
<Route path="/identities" element={<Identities />} />
|
|
<Route path="/identities/:id" element={<IdentityDetail />} />
|
|
<Route path="/campaigns" element={<Campaigns />} />
|
|
<Route path="/campaigns/:id" element={<CampaignDetail />} />
|
|
<Route path="/orchestrator" element={<Orchestrator />} />
|
|
<Route path="/persona-generation" element={<PersonaGeneration />} />
|
|
<Route path="/synthetic-files" element={<SyntheticFiles />} />
|
|
<Route path="/realism-config" element={<RealismConfig />} />
|
|
<Route path="/canary-tokens" element={<CanaryTokens />} />
|
|
<Route path="/topologies/:id/personas" element={<TopologyPersonaGeneration />} />
|
|
<Route path="/config" element={<Config />} />
|
|
<Route path="/swarm-updates" element={<RemoteUpdates />} />
|
|
<Route path="/swarm/hosts" element={<SwarmHosts />} />
|
|
<Route path="/swarm/enroll" element={<Navigate to="/swarm/hosts" replace />} />
|
|
{isDeveloperMode() && (
|
|
<Route path="/theme-lab" element={<ThemeLab />} />
|
|
)}
|
|
<Route path="*" element={<Navigate to="/" replace />} />
|
|
</Routes>
|
|
</Suspense>
|
|
</Layout>
|
|
<CommandPalette
|
|
open={cmdOpen}
|
|
onClose={() => setCmdOpen(false)}
|
|
onNav={navigate}
|
|
onAction={handleAction}
|
|
/>
|
|
<ShortcutsHelp open={helpOpen} onClose={() => setHelpOpen(false)} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
function App() {
|
|
const [token, setToken] = useState<string | null>(getValidToken);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
useEffect(() => {
|
|
const onAuthLogout = () => setToken(null);
|
|
window.addEventListener('auth:logout', onAuthLogout);
|
|
return () => window.removeEventListener('auth:logout', onAuthLogout);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let accent = 'matrix';
|
|
try {
|
|
const raw = localStorage.getItem('decnet_tweaks');
|
|
if (raw) {
|
|
const parsed = JSON.parse(raw);
|
|
if (parsed?.accent === 'matrix' || parsed?.accent === 'violet') accent = parsed.accent;
|
|
}
|
|
} catch { /* fall through to default */ }
|
|
document.documentElement.setAttribute('data-accent', accent);
|
|
|
|
/* Theme hydration order on boot:
|
|
* 1. localStorage `decnet_theme` — the saved user preference
|
|
* from the topbar Sun/Moon toggle. Default = 'dark'.
|
|
* 2. sessionStorage `decnet_theme_lab` — dev-mode lab override
|
|
* (set from /theme-lab). Tab-scoped, wins on top so devs
|
|
* can A/B without clobbering their saved preference. */
|
|
let theme: 'dark' | 'light' = 'dark';
|
|
try {
|
|
const saved = localStorage.getItem('decnet_theme');
|
|
if (saved === 'light' || saved === 'dark') theme = saved;
|
|
} catch { /* ignore */ }
|
|
try {
|
|
const lab = sessionStorage.getItem('decnet_theme_lab');
|
|
if (lab === 'light' || lab === 'dark') theme = lab;
|
|
} catch { /* ignore */ }
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
}, []);
|
|
|
|
const handleLogin = (newToken: string) => setToken(newToken);
|
|
const handleLogout = () => { localStorage.removeItem('token'); setToken(null); };
|
|
const handleSearch = (query: string) => setSearchQuery(query);
|
|
|
|
if (!token) {
|
|
return <Login onLogin={handleLogin} />;
|
|
}
|
|
|
|
return (
|
|
<Router>
|
|
<ToastProvider>
|
|
<AuthedShell onLogout={handleLogout} onSearch={handleSearch} searchQuery={searchQuery} />
|
|
</ToastProvider>
|
|
</Router>
|
|
);
|
|
}
|
|
|
|
export default App;
|