/* ============================================================ FLOWSHIELD — Shell: Sidebar + Topbar ============================================================ */ function Sidebar({ active, onNav, theme }) { usePlan(); // re-render del nav al cambiar de plan const op = window.NAV.filter(n => n.group === 'op'); const cfg = window.NAV.filter(n => n.group === 'cfg'); const [act, setAct] = useStateL(null); // {running, today, total} useEffectL(() => { let alive = true; const load = () => window.fsApi('/api/results/activity', { method:'GET' }) .then(d => { if (alive) setAct(d); }).catch(() => {}); load(); const t = setInterval(load, 20000); return () => { alive = false; clearInterval(t); }; }, [active]); const Item = ({ n }) => { const isActive = active === n.id; const locked = window.fsModuleAllowed && !window.fsModuleAllowed(n.id); return ( ); }; return ( ); } /* Selector de proyecto activo (alcance transversal por cliente). Vive en la cabecera para que siempre sepas en qué engagement estás y qué reporting saldrá. */ function ProjectPicker({ activeProject, onProject }) { const [projs, setProjs] = useStateL(null); const [open, setOpen] = useStateL(false); const ref = useRefL(null); useEffectL(() => { let alive = true; window.fsApi('/api/projects', { method:'GET' }) .then(d => { if (!alive) return; const list = (d && d.projects) || []; setProjs(list); if (activeProject && !list.some(p => p.id === activeProject)) onProject(''); // proyecto borrado → Todos }) .catch(() => { if (alive) setProjs([]); }); return () => { alive = false; }; }, []); useEffectL(() => { const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h); }, []); const list = projs || []; const cur = list.find(p => p.id === activeProject) || null; const pick = (id) => { onProject(id); setOpen(false); }; return (
{open && (
{list.length>0 &&
} {list.map(p => ( ))} {projs === null &&
Cargando…
} {projs !== null && list.length===0 &&
Sin proyectos todavía.
}
)}
); } function Topbar({ user, section, onLogout, onCmd, activeProject, onProject }) { const meta = window.NAV.find(n => n.id === section); return (
NODO OPERATIVO
); } /* Command palette */ function CmdPalette({ open, onClose, onNav }) { const [q, setQ] = useStateL(''); useEffectL(() => { if (open) setQ(''); }, [open]); if (!open) return null; const items = [ ...window.NAV.map(n => ({ type:'nav', id:n.id, label:n.label, icon:n.icon })), ...window.REDTEAM_TABS.flatMap(t => (t.sections||[]).flatMap(s => s.tools||[])).map(t => ({ type:'tool', id:'redteam', label:t.name, icon:t.icon, sub:'Red Team' })), ]; const seen = new Set(); const filtered = items.filter(i => { const k = i.type+i.label; if (seen.has(k)) return false; seen.add(k); return i.label.toLowerCase().includes(q.toLowerCase()); }).slice(0, 9); return (
e.stopPropagation()} style={{ width:'min(580px,92vw)', background:'var(--bg-panel)', border:'1px solid var(--line-bright)', borderRadius:14, overflow:'hidden', boxShadow:'0 30px 80px -20px rgba(0,0,0,.7)' }}>
setQ(e.target.value)} placeholder="Comando o herramienta…" style={{ flex:1, background:'none', border:'none', outline:'none', color:'var(--txt-hi)', fontSize:15, fontFamily:'var(--font-mono)' }} /> ESC
{filtered.map((i, idx) => ( ))} {!filtered.length &&
Sin resultados
}
); } Object.assign(window, { Sidebar, Topbar, CmdPalette });