/* App shell: sidebar, topbar, routing, theme, command palette */ const NAV = [ { group: "Network", items: [ { id: "dashboard", label: "Overview", icon: "dashboard" }, { id: "map", label: "Network map", icon: "map" }, { id: "machines", label: "Machines", icon: "machines", count: (s) => s.machines.length }, { id: "routes", label: "Routes & exit", icon: "routes" }, ]}, { group: "Access", items: [ { id: "users", label: "Users", icon: "users", count: (s) => s.users.length }, { id: "keys", label: "Keys", icon: "key", count: (s) => s.preauthKeys.filter((k) => k.expiration > Date.now()).length + s.apiKeys.filter((k) => k.expiration > Date.now()).length }, { id: "acl", label: "Access controls", icon: "acl" }, { id: "dns", label: "DNS", icon: "dns" }, ]}, ]; const TITLES = { dashboard: "Overview", map: "Network map", machines: "Machines", routes: "Routes & exit nodes", users: "Users", keys: "Keys", acl: "Access controls", dns: "DNS", settings: "Settings", servers: "Backend" }; function App() { const s = useStore(); const [route, setRoute] = useState(() => location.hash.slice(1) || "dashboard"); const [theme, setTheme] = useState(() => localStorage.getItem("hs-theme") || "light"); const [navOpen, setNavOpen] = useState(false); const [cmdk, setCmdk] = useState(false); const [machineFilter, setMachineFilter] = useState(null); const [welcome, setWelcome] = useState(false); useEffect(() => { const hasLive = (s.servers || []).some((sv) => sv.mode === "live"); if (!hasLive && localStorage.getItem("hs.welcomeDismissed") !== "1") setWelcome(true); }, []); const dismissWelcome = () => { localStorage.setItem("hs.welcomeDismissed", "1"); setWelcome(false); }; const go = useCallback((r, opts) => { setRoute(r); location.hash = r; setNavOpen(false); if (r === "machines" && opts?.filter) setMachineFilter(opts.filter); else if (r === "machines") setMachineFilter(null); }, []); useEffect(() => { document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("hs-theme", theme); }, [theme]); useEffect(() => { const h = (e) => { if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); setCmdk((v) => !v); } }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, []); useEffect(() => { const onHash = () => setRoute(location.hash.slice(1) || "dashboard"); window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); const view = () => { switch (route) { case "dashboard": return ; case "map": return ; case "machines": return ; case "routes": return ; case "users": return ; case "keys": return ; case "acl": return ; case "dns": return ; case "settings": return ; case "servers": return ; default: return ; } }; return (
{navOpen &&
setNavOpen(false)} />}

{TITLES[route] || "Headscale"}

{s.serverInfo.url.replace(/^https?:\/\//, "")} / {route}
{s.loading && syncing}
setCmdk(true)}> Search or jump to… ⌘K
}>
Notifications
go("routes")}>Route pending approval34m go("machines")}>2 keys expiring soon2h go("machines")}>ci-runner-02 joined5m
{s.mode === "live" && !s.health.ok && (
Can't reach {s.serverInfo.url}. {s.error || "Check the URL, API token, and that the server is reachable from this browser (CORS)."}
)}
{view()}
{cmdk && setCmdk(false)} setTheme={setTheme} />} {welcome && { dismissWelcome(); go("servers"); }} />}
); } function CommandPalette({ go, close, setTheme }) { const s = useStore(); const [q, setQ] = useState(""); const [active, setActive] = useState(0); const inputRef = useRef(null); useEffect(() => { inputRef.current?.focus(); }, []); const pages = NAV.flatMap((sec) => sec.items).map((it) => ({ kind: "page", id: it.id, label: it.label, icon: it.icon })); const machines = s.machines.map((m) => ({ kind: "machine", id: m.id, label: m.name, sub: m.ip4, icon: osIcon(m.kind, m.os) })); const actions = [ { kind: "action", id: "reg", label: "Register machine", icon: "plus", run: () => go("machines") }, { kind: "action", id: "key", label: "Generate pre-auth key", icon: "key", run: () => go("keys") }, { kind: "action", id: "theme", label: "Toggle light / dark theme", icon: "moon", run: () => setTheme((t) => t === "dark" ? "light" : "dark") }, { kind: "action", id: "acl", label: "Edit access controls", icon: "acl", run: () => go("acl") }, ]; const ql = q.toLowerCase(); const fPages = pages.filter((p) => p.label.toLowerCase().includes(ql)); const fActions = actions.filter((a) => a.label.toLowerCase().includes(ql)); const fMachines = q ? machines.filter((m) => m.label.toLowerCase().includes(ql) || m.sub.includes(ql)).slice(0, 6) : []; const flat = [...fPages.map((x) => ({ ...x, _g: "Navigate" })), ...fActions.map((x) => ({ ...x, _g: "Actions" })), ...fMachines.map((x) => ({ ...x, _g: "Machines" }))]; const choose = (item) => { if (!item) return; if (item.kind === "page") go(item.id); else if (item.kind === "action") item.run(); else if (item.kind === "machine") go("machines"); close(); }; const onKey = (e) => { if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => Math.min(a + 1, flat.length - 1)); } if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); } if (e.key === "Enter") { e.preventDefault(); choose(flat[active]); } if (e.key === "Escape") close(); }; let gi = -1; let lastG = null; return (
e.target === e.currentTarget && close()}>
{ setQ(e.target.value); setActive(0); }} onKeyDown={onKey} placeholder="Search machines, run actions, jump to a page…" /> esc
{flat.length === 0 &&
No results for “{q}”
} {flat.map((item) => { gi++; const showG = item._g !== lastG; lastG = item._g; const idx = gi; return ( {showG &&
{item._g}
}
setActive(idx)} onClick={() => choose(item)}> {item.label} {item.sub && {item.sub}} {item.kind === "page" && ↵}
); })}
); } function Settings({ theme, setTheme }) { const s = useStore(); return (

Settings

Console preferences & server configuration

Appearance

{["light", "dark"].map((t) => (
setTheme(t)} style={{ flex: 1, cursor: "pointer", border: "1px solid " + (theme === t ? "var(--accent)" : "var(--border-strong)"), borderRadius: 10, padding: 12, background: theme === t ? "var(--accent-soft)" : "transparent" }}>
{t}
))}

Server

{s.serverInfo.url} {s.serverInfo.version} {s.serverInfo.ipv4} {s.serverInfo.ipv6} {dur(s.serverInfo.uptime)}
); } /* ---- Headscale Servers: standalone multi-server management page ---- */ function ServersPage() { const s = useStore(); const toast = useToast(); const blank = { name: "", url: "https://", token: "", mode: "live", seed: "full" }; const [editing, setEditing] = useState(null); // null | "new" | server id const [form, setForm] = useState(blank); const [io, setIo] = useState(null); // null | "export" | "import" const startEdit = (sv) => { setEditing(sv.id); setForm({ ...sv }); }; const startNew = () => { setEditing("new"); setForm(blank); }; const cancel = () => { setEditing(null); setForm(blank); }; // ESC cancels the editor / closes the import-export panel useEffect(() => { const h = (e) => { if (e.key === "Escape") { if (io) setIo(null); else if (editing) cancel(); } }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, [editing, io]); const saveForm = () => { if (editing === "new") { HS.addServer(form); toast.push({ kind: "success", title: "Server added", msg: form.name }); } else { HS.updateServer(editing, form); toast.push({ kind: "success", title: "Server updated", msg: form.name }); } cancel(); }; return (

Headscale Servers

Manage demo & live control servers · test connectivity and authentication
{!editing && <> }
{io && setIo(null)} toast={toast} />} {!editing && ( <>
{s.servers.map((sv) => (
{sv.name} {sv.mode} {sv.id === s.activeId && active}
{sv.url}{sv.mode === "live" ? (sv.token ? " · token set" : " · no token") : " · seed " + sv.seed}
{sv.id !== s.activeId ? : }
))}
Demo servers run fully in-browser with rich mock data — no network needed. Live servers talk to a real Headscale API with a Bearer token; the server must send CORS headers for this page's origin. Server list & tokens are stored in this browser only.
)} {editing && }
); } /* ---- export / import live-server configs (file + copy/paste) ---- */ function ServerIO({ mode, close, toast }) { const s = useStore(); const liveCount = s.servers.filter((sv) => sv.mode === "live").length; const [text, setText] = useState(mode === "export" ? HS.exportServers(true) : ""); const [copied, setCopied] = useState(false); const fileRef = useRef(null); const download = () => { const blob = new Blob([HS.exportServers(true)], { type: "application/json" }); const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = "headscale-servers.json"; a.click(); URL.revokeObjectURL(a.href); }; const onFile = (e) => { const f = e.target.files && e.target.files[0]; if (!f) return; const r = new FileReader(); r.onload = () => setText(String(r.result || "")); r.readAsText(f); }; const doImport = () => { const res = HS.importServers(text); if (!res.ok) { toast.push({ kind: "error", title: "Import failed", msg: res.error }); return; } toast.push({ kind: res.added ? "success" : "info", title: "Import complete", msg: `${res.added} added${res.skipped ? `, ${res.skipped} skipped` : ""}` }); close(); }; return (
: <>
}> {mode === "export" ? ( <> {liveCount === 0 && No live servers to export yet.}