offscale is a plugin

headscale leaves the platform. 45 files move to plugins/offscale/ and the
platform stops knowing it exists.

  api/router.ts   the thin auth-gated proxy, now at /api/offscale
  sidecar/        18 files, the whole headscale contract and its admin keys
  db/             schema + queries, offscale_servers
  web/            26 files as panels and a layout — no screen, per the rule

removed from the platform: the hono mount, the `headscale` capability, the
App.tsx route pair, the screen and its barrel, the AppRegistry spread, the
officerdev re-exports, the dock tile, the page-title rule, and both database
barrels. tsgo is clean and nothing references it.

the imports tell the story of what the plugin↔host API actually is. the sidecar
takes @@/sidecar/protocol, @@/sidecar/connect, @@/data-path and
@@/officer-url.mjs; the queries take officerdb/db and officerdb/crypto; the
schema takes officerdb/auth/schema for the one reference a plugin may make; the
web half takes useClient, copyToClipboard, WorkspaceView and TerminalView from
the officerdev barrel. all of it resolves because a plugin lives inside the repo
— no publishing, no version negotiation.

AND IT FOUND A REAL BUG IN THE INSTALLER. createSidecarProxy learns its port
from a one-shot `<name>:server` event and subscribes when the plugin's router is
first imported — at mount. install started the sidecar BEFORE mounting, so the
announcement fired into a void: process online, routes mounted, every request
answering `503 sidecar not available` until something forced a reconnect. it
would have hit every plugin with an http sidecar. `example` never caught it
because it has no listener to announce.

install and enable now mount before starting; disable still unmounts before
stopping. neither direction leaves a mounted route in front of a sidecar that
cannot be reached.

verified live: /api/offscale/_officer/servers answers {"servers":[]}, /offscale
and /offscale/nodes serve, the old /api/headscale is 404, the offscale
capability is registered from the manifest, and officer-offscale is online.

757 pass, same 10 pre-existing failures.

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

plugins/offscale/web/ViewShell.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react';
+import { Loader2, ServerOff } from 'lucide-react';
+import { NO_ACTIVE_SERVER } from './shared';
+import { headscaleErrorMessage } from './useHeadscaleServers';
+import { ErrorNote } from './Cards';
+
+// The loading / no-server / failed states every domain section shares.
+//
+// "No active server" is a 409 carrying a `code`, deliberately not a 404 and deliberately not an empty
+// list — an empty node table would read as "your tailnet is empty", which is a very different and much
+// more alarming statement than "you haven't picked a server".
+
+function isNoActiveServer(err: unknown): boolean {
+  const raw = (err as { message?: unknown } | null)?.message;
+  if (typeof raw !== 'string') return false;
+  try {
+    return (JSON.parse(raw) as { code?: unknown }).code === NO_ACTIVE_SERVER;
+  } catch {
+    return false;
+  }
+}
+
+type ViewShellProps = {
+  isLoading: boolean;
+  error: unknown;
+  /** What this section is called, for the loading and empty copy. */
+  label: string;
+  children: ReactNode;
+};
+
+export const ViewShell = ({ isLoading, error, label, children }: ViewShellProps) => {
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-zinc-500">
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+        Loading {label}…
+      </div>
+    );
+  }
+
+  if (error && isNoActiveServer(error)) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
+        <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-white/5 text-zinc-400">
+          <ServerOff className="h-6 w-6" />
+        </div>
+        <div>
+          <div className="text-base font-semibold text-zinc-100">No server selected</div>
+          <p className="mt-1 text-sm text-zinc-500">Pick one in the Servers section to see its {label}.</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4">
+        <ErrorNote>
+          Could not load {label}: {headscaleErrorMessage(error)}
+        </ErrorNote>
+      </div>
+    );
+  }
+
+  return <div className="h-full overflow-y-auto p-4">{children}</div>;
+};
+
+/** Centred "nothing here yet" body for a section whose fetch succeeded but returned nothing. */
+export const EmptyBody = ({ icon, title, hint }: { icon: ReactNode; title: string; hint: string }) => (
+  <div className="flex flex-col items-center gap-3 py-16 text-center">
+    <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-white/5 text-zinc-400">{icon}</div>
+    <div>
+      <div className="text-base font-semibold text-zinc-100">{title}</div>
+      <p className="mt-1 max-w-sm text-sm text-zinc-500">{hint}</p>
+    </div>
+  </div>
+);