pastilhas
95b84ea748
Offscale was the first plugin extracted and it was done before we knew what "extracted" meant. Music, done last, is the standard. This brings offscale to it. ── The rebrand ── The plugin was `offscale` to the platform and `headscale` to itself: sidecar name and handles, the port announcement, the API proxy name, the React components, every hook, the react-query keys, the panel ids and appTypes, and the Postgres table. Now all of those say offscale. The line drawn, and it is deliberate: OffScale is Officer's tooling layer, and Headscale is the server it manages. So every IDENTIFIER is offscale, while a message like `headscale unreachable`, the `headscale apikeys create` hint and the ACL assistant's prompt still say Headscale — because they are talking about the remote server, and renaming them would make the code lie about what it reached. 495 occurrences became 180, and the 180 are all of that second kind. ── The live bug this uncovered ── `headscaleSectionPath` built links to `/headscale/<section>`. The shell has no such route — plugin routes come from `plugin.route`, which is `/offscale` — and it redirects unknown paths to the home page. So every section link in the nav, the console and the server picker silently went home. The extraction moved the route and left the link builder behind. Also live: ServersView told the user to run `pm2 start ecosystem.config.cjs --only officer-headscale`, a process that has not existed since the sidecar was renamed. ── The correctness fix music already had ── api/router.ts hardcoded `prefix: '/api/offscale'`. The proxy strips `prefix.length` characters, so a literal is correct only for a first-party publisher; published by anyone else this mounts at `/api/p/<publisher>/offscale` and forwards the wrong subpath. Derived from `mountPrefix()` now, as music does. ── The rest ── - assets/icon.png — the OffScale artwork, 256px to match music's. The tile stops being a glyph badge. - First tests: 21 of them, over the version floor and the protobuf normalisers. Those are the two places a Headscale release actually breaks this, and they had no coverage at all. `meetsFloor` has a real trap pinned now — comparing minor first would refuse 1.0 as older than 0.29. - OFFSCALE_API.md — the contract was a 45-line comment inside sidecar/index.ts, which is not linkable and not published. Now a document, as MUSIC_API.md is. - web/panels.ts re-exported three components. A plugin cannot export components; that was residue of the platform importing them before extraction. - Comments pointed at src/servers/api/headscale/ and src/servers/sidecar/headscale/, neither of which has existed since the extraction. The crypto purpose moved headscale → offscale too, and the secret-store row was renamed rather than left to create a fresh key — the material is preserved, so this is reversible. Free to do only because offscale_servers had 0 rows; with one stored API key it would have been a migration.
61 lines
2.7 KiB
TypeScript
61 lines
2.7 KiB
TypeScript
import { Check, Network, Plus } from 'lucide-react';
|
|
import { Link } from 'react-router';
|
|
import { offscaleSectionPath } from './shared';
|
|
import { useOffscaleServers } from './useOffscaleServers';
|
|
|
|
// Top-left panel of the /headscale workspace: which server everything else acts on.
|
|
//
|
|
// It is its own panel rather than a block inside OffscaleNav 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 OffscaleServerPicker = () => {
|
|
const { servers, active, activate, isLoading } = useOffscaleServers();
|
|
|
|
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={offscaleSectionPath('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>
|
|
);
|
|
};
|