add the officer-headscale sidecar and its server registry ui

officer-headscale owns the whole Headscale contract: the registered servers and
their admin api keys, the >=0.29 version floor, and every multi-call composition
the ui needs. the platform side is auth+forward only and holds no headscale
credentials, so the existing /api/vpn/enroll route and its HEADSCALE_* env vars
are untouched and unrelated.

officer manages many servers rather than one. the owner registers each with a url
and a key generated on that server and switches between them; exactly one is
active, enforced by a partial unique index rather than by convention. keys are
encrypted at rest and never leave the sidecar — the list projection cannot return
one. registration validates before it saves: an unauthenticated GET /version to
prove something headscale-shaped is there and meets the floor, then an
authenticated call to prove the key works. an edit that moves either half
re-validates.

there is deliberately no transparent /api/v1/* passthrough. headscale serialises
every uint64 as a json string and its rest shape moved repeatedly below 0.29;
proxying raw would push all of that into the browser, which is the mistake the
soulseek panels made with 37 raw upstream calls.

the /headscale workspace is nav + view over the panel system. only the servers
section is implemented — nodes, users and pre-auth keys say so plainly rather
than rendering an empty table that reads as a failed fetch.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/apps/officer-web/Screens/Dashboard/Headscale/HeadscaleScreen.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useMemo } from 'react';
+import type { LayoutNode } from 'officerdev';
+import { WorkspaceView } from 'officerdev';
+import { useDashboardState } from 'state/useDashboardState';
+import { defaultLayout } from './defaultLayout';
+
+// /headscale uses the Workspace/Panel system (like /soulseek and /music): a section nav (headscale-nav) on
+// the left and a section view (headscale-view) on the right, coordinating via the 'headscale:section'
+// channel. Both talk to the officer-headscale sidecar through the /api/headscale auth proxy, which holds no
+// Headscale credentials of its own — the registered servers and their keys live in the sidecar.
+
+const ALLOWED_APP_TYPES = new Set<string | null>(['headscale-nav', 'headscale-view', null]);
+
+function normalizeLayout(node: LayoutNode): LayoutNode {
+  if (node.type === 'panel') {
+    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'headscale-view' };
+  }
+  const children = node.children.map((c) => {
+    const fixed = normalizeLayout(c.node);
+    return fixed === c.node ? c : { ...c, node: fixed };
+  });
+  const changed = children.some((c, i) => c !== node.children[i]);
+  return changed ? { ...node, children } : node;
+}
+
+export const HeadscaleScreen = () => {
+  const rawWorkspace = useDashboardState<LayoutNode>('screens/headscale', defaultLayout);
+
+  const workspace = useMemo(() => {
+    const fixed = normalizeLayout(rawWorkspace.value);
+    if (fixed === rawWorkspace.value) return rawWorkspace;
+    return { ...rawWorkspace, value: fixed };
+  }, [rawWorkspace]);
+
+  useEffect(() => {
+    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
+      rawWorkspace.setValue(workspace.value);
+    }
+  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+
+  return (
+    <div className="h-full w-full pt-2">
+      <WorkspaceView workspace={workspace} locked />
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Headscale/defaultLayout.ts

@@ -0,0 +1,11 @@
+import type { LayoutNode } from 'officerdev';
+
+export const defaultLayout: LayoutNode = {
+  type: 'group',
+  id: 'headscale-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'headscale-nav', appType: 'headscale-nav' }, size: 22 },
+    { node: { type: 'panel', id: 'headscale-view', appType: 'headscale-view' }, size: 78 },
+  ],
+};

src/apps/officer-web/Screens/Dashboard/Headscale/index.tsx

@@ -0,0 +1 @@
+export * from './HeadscaleScreen';

src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx

@@ -134,6 +134,7 @@ import {
   Music,
   Activity,
   Radio,
+  Network,
 } from 'lucide-react';
 
 export const ALL_DOCK_ITEMS: DockItem[] = [
@@ -143,6 +144,7 @@ export const ALL_DOCK_ITEMS: DockItem[] = [
   { label: 'Chat', to: '/chat', icon: MessageCircle, color: '#60a5fa' },
   { label: 'Music', to: '/music', icon: Music, color: '#22c55e' },
   { label: 'Soulseek', to: '/soulseek', image: '/slskd.png', color: '#ffffff' },
+  { label: 'Headscale', to: '/headscale', icon: Network, color: '#818cf8' },
   { label: 'Editor', to: '/code-editor', icon: Code, color: '#a78bfa' },
   { label: 'Plans', to: '/plans', icon: FileText, color: '#f472b6' },
   { label: 'Jobs', to: '/jobs', icon: Workflow, color: '#14b8a6' },

src/apps/officer-web/Screens/Dashboard/index.tsx

@@ -12,6 +12,7 @@ export * from './Tasks';
 export * from './Files';
 export * from './Music';
 export * from './Soulseek';
+export * from './Headscale';
 export * from './SystemMonitor';
 export * from './Activity';
 export * from './CodeEditor';