offscale, extracted from the platform into its own repository

The tailnet plugin — machines, users, pre-auth keys, access policy and device invites. Moved out of officerdev/platform, where it had lived in plugins/ since the plugin system was built. Until now this code existed in exactly one place: the platform repository. That made "gitignore the plugins directory" impossible to do safely, because untracking it would have left 49 files on a single disk with no remote. This repository is what makes that move safe. Same extraction as plugins/music before it: source only, no history. The platform's history still holds every commit that shaped this, and the SHAs cited across the codebase keep resolving — replaying it here would have created a second, divergent account of the same work. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-15 18:12:57 +00:00
commit 8a446bb4b5
50 changed files with 7188 additions and 0 deletions
@@ -0,0 +1,60 @@
+import { Check, Network, Plus } from 'lucide-react';
+import { Link } from 'react-router';
+import { headscaleSectionPath } from './shared';
+import { useHeadscaleServers } from './useHeadscaleServers';
+
+// Top-left panel of the /headscale workspace: which server everything else acts on.
+//
+// It is its own panel rather than a block inside HeadscaleNav because the two answer different questions —
+// "which server" and "which section" — and only one of them is navigation. Activating a server is a mutation
+// (a DB write that re-scopes every other query), so these stay buttons with no URL of their own, while the
+// section list below is real links.
+//
+// Every registered server is listed, including when there is only one: the panel's whole job is to say what
+// the rest of the screen is talking to, and a picker that hides itself at one server makes that invisible.
+
+export const HeadscaleServerPicker = () => {
+  const { servers, active, activate, isLoading } = useHeadscaleServers();
+
+  return (
+    <div className="flex h-full flex-col overflow-y-auto bg-muted/30">
+      <div className="flex items-center gap-3 px-4 py-4">
+        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-500/15 text-indigo-400 ring-1 ring-black/5">
+          <Network className="h-5 w-5" />
+        </div>
+        <div className="min-w-0">
+          <div className="truncate text-sm font-semibold leading-tight">Headscale</div>
+          <div className="truncate text-xs text-muted-foreground">{active ? active.name : 'no server'}</div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-0.5 px-2 pb-3">
+        {servers.map((server) => (
+          <button
+            key={server.id}
+            type="button"
+            onClick={() => !server.isActive && activate.mutate(server.id)}
+            disabled={activate.isPending}
+            title={server.url}
+            className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-left text-xs transition-colors ${
+              server.isActive ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:bg-muted'
+            }`}
+          >
+            <Check className={`h-3.5 w-3.5 shrink-0 ${server.isActive ? 'text-primary' : 'opacity-0'}`} />
+            <span className="min-w-0 flex-1 truncate">{server.name}</span>
+          </button>
+        ))}
+
+        {servers.length === 0 && !isLoading && (
+          <Link
+            to={headscaleSectionPath('servers')}
+            className="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          >
+            <Plus className="h-3.5 w-3.5 shrink-0" />
+            Register a server
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+};