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>

web/Cards.tsx

@@ -0,0 +1,103 @@
+import type { ReactNode } from 'react';
+
+// Shared visual language for the /headscale panels, matching the /soulseek grouped views: almost-black
+// cards on hairline white borders. Kept local to the app so the look changes in one place.
+
+export const Card = ({ children }: { children: ReactNode }) => (
+  <div className="overflow-hidden rounded-xl border border-white/10 bg-zinc-950 shadow-sm">{children}</div>
+);
+
+export const SectionHeader = ({
+  title,
+  subtitle,
+  action,
+}: {
+  title: string;
+  subtitle?: string;
+  action?: ReactNode;
+}) => (
+  <div className="flex items-start justify-between gap-4 px-1 pb-3">
+    <div className="min-w-0">
+      <h2 className="text-sm font-semibold text-zinc-100">{title}</h2>
+      {subtitle && <p className="mt-0.5 text-xs text-zinc-500">{subtitle}</p>}
+    </div>
+    {action && <div className="shrink-0">{action}</div>}
+  </div>
+);
+
+type ButtonProps = {
+  children: ReactNode;
+  onClick?: () => void;
+  type?: 'button' | 'submit';
+  variant?: 'primary' | 'ghost' | 'danger';
+  disabled?: boolean;
+  title?: string;
+};
+
+const VARIANTS: Record<NonNullable<ButtonProps['variant']>, string> = {
+  primary: 'border-primary/40 bg-primary/15 text-primary hover:bg-primary/25',
+  ghost: 'border-white/10 bg-white/[0.02] text-zinc-300 hover:bg-white/10 hover:text-zinc-100',
+  danger: 'border-red-500/30 bg-red-500/10 text-red-300 hover:bg-red-500/20',
+};
+
+export const Button = ({ children, onClick, type = 'button', variant = 'ghost', disabled, title }: ButtonProps) => (
+  <button
+    type={type}
+    onClick={onClick}
+    disabled={disabled}
+    title={title}
+    className={`inline-flex cursor-pointer items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors disabled:cursor-default disabled:opacity-40 ${VARIANTS[variant]}`}
+  >
+    {children}
+  </button>
+);
+
+type FieldProps = {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  hint?: string;
+  type?: 'text' | 'password';
+  autoFocus?: boolean;
+};
+
+export const Field = ({ label, value, onChange, placeholder, hint, type = 'text', autoFocus }: FieldProps) => (
+  <label className="flex flex-col gap-1.5">
+    <span className="text-xs font-medium text-zinc-400">{label}</span>
+    <input
+      type={type}
+      value={value}
+      onChange={(ev) => onChange(ev.target.value)}
+      placeholder={placeholder}
+      autoFocus={autoFocus}
+      spellCheck={false}
+      autoComplete="off"
+      className="rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-600 focus:border-primary/50"
+    />
+    {hint && <span className="text-[11px] leading-snug text-zinc-600">{hint}</span>}
+  </label>
+);
+
+/** Tiny status light: green healthy, amber unknown/unverified, red failing. */
+export const Dot = ({ tone }: { tone: 'ok' | 'warn' | 'bad' | 'idle' }) => {
+  const color =
+    tone === 'ok' ? 'bg-emerald-400' : tone === 'warn' ? 'bg-amber-400' : tone === 'bad' ? 'bg-red-400' : 'bg-zinc-600';
+  return <span className={`inline-block h-2 w-2 shrink-0 rounded-full ${color}`} />;
+};
+
+export const Badge = ({ children, tone = 'neutral' }: { children: ReactNode; tone?: 'neutral' | 'active' }) => (
+  <span
+    className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium ${
+      tone === 'active' ? 'border-primary/40 bg-primary/10 text-primary' : 'border-white/10 text-zinc-400'
+    }`}
+  >
+    {children}
+  </span>
+);
+
+export const ErrorNote = ({ children }: { children: ReactNode }) => (
+  <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs leading-snug text-red-300">
+    {children}
+  </div>
+);