Infra: operator-console redesign (per the Infrastructure design package)
ci / gates (push) Failing after 5s
ci / rust (push) Has been skipped
ci / sandbox-k8s (push) Has been skipped
ci / frontend (push) Has been skipped
ci / e2e (push) Has been skipped

Refactor the Infrastructure tier into the dark operator console from the design
package, wired to the real fleet backend (no new plumbing):
- InfraNav: page-scoped left nav grouped RUN HERE FIRST (Local & Tailscale, with
  online count + sub-items) / NEXT (Cloud providers, SOON) + coral "Connect a
  host" button; coral spine on the active view.
- FleetConsole: center reads top-to-bottom — kicker → "Your fleet" → 5 stat tiles
  (HOSTS/ONLINE/MEMORY/STORAGE/CONTAINERS) → Tailscale device card → LOCAL HOSTS
  host cards + add-host dashed tile. Cloud view = how-it-works + SOON.
- Host cards (design system): status dot (blink when online) + hostname, IP/version
  line, CPU/RAM meter bars (cyan→amber→coral by load), disk/load/ctrs mini-row, and
  a footer that's a copyable `ssh <node>` target (online) OR a "waiting for daemon"
  spinner (pairing) — PLUS a Terminal button that opens the in-app shell.
- FleetPill (top bar, N/M hosts online) + FleetStatusBar (ambient: daemon · tailnet
  · WSS · sandbox).

Per the chosen reconciliation: kept the cloud-apps computer pull-out as the right
column, the connect-host wizard as a modal, and the in-app terminal. Dashboard
infra branch rewired (InfraNav + FleetConsole + status bar; dropped the old
InfraStage/InfraConsole split). cm-blink/spin/cm-fade keyframes already existed.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
This commit is contained in:
Omar Sobh
2026-06-24 22:49:17 -07:00
co-authored by Claude Opus 4.8
parent 8e71c8403b
commit b840de7c3b
6 changed files with 2762 additions and 25 deletions
@@ -239,7 +239,7 @@ function tsOnline(lastSeen: string | null): boolean {
}
/** Connect a workspace's Tailscale (BYO) and show its tailnet device metrics. */
function TailscaleSection() {
export function TailscaleSection() {
const { data: status, refresh } = useFetchJson<{ connected: boolean; tailnet: string | null }>("/api/fleet/tailscale");
const { data: dev } = useFetchJson<{ connected: boolean; devices: TsDevice[]; error?: string }>(status?.connected ? "/api/fleet/tailscale/devices" : null);
const [apiKey, setApiKey] = useState("");