Build, Control Center & Media Views
Documentation for /command/build (build pipeline visualization), /command/control-center (mission control), and /command/media (Plex and media services)
Build, Control Center & Media Views
Three Command Center pages cover build operations, real-time mission control, and media management.
Build Swarm (/command/build)
File: src/pages/command/build.astro
The build page is a read-only mirror of the internal unified build dashboard. It displays the Gentoo distributed build pipeline with live event telemetry. Uses BaseLayout + CommandNav with a custom starfield background (three star layers rendered inline rather than the shared Starfield component).
Sub-Navigation
A secondary nav bar below CommandNav offers three views:
- Packet Tracer (this page, active by default)
- Fleet Overview (links to
/build-swarm) - Telemetry (links to
/telemetry)
Mega Stats Row
Seven headline metrics displayed in large monospace text across the top:
| Stat | ID | Color Theme |
|---|---|---|
| Completed | statCompleted | green |
| Building | statBuilding | amber |
| Queued | statQueued | blue |
| Failed | statFailed | red |
| Blocked | statBlocked | orange |
| Total Cores | statCores | cyan |
| Speedup Factor | statSpeedup | purple |
All values initialize as -- and populate from the gateway API (/api/gateway/nodes?all=true and /api/gateway/status).
Live Pipeline Flow
The main visualization is an SVG-based pipeline flow (#pipelineSvg) that renders build events as animated shapes moving through the system. Above the SVG is an interactive event legend where each event type is a clickable filter toggle.
The 11 event types with their visual shapes:
Build Flow:
| Event | Shape | Color | Description |
|---|---|---|---|
request | Arrow Up | #22d3ee (cyan) | New build request submitted |
delegate | Square | #f97316 (orange) | Package delegated to a drone |
package | Hexagon | #10b981 (emerald) | Package actively compiling |
complete | Star | #22c55e (green) | Build completed successfully |
Sync & Data:
| Event | Shape | Color | Description |
|---|---|---|---|
sync | Diamond | #a855f7 (purple) | Binary sync transfer between nodes |
binpkg | Circle | #3b82f6 (blue) | Binary package created/available |
Status & Health:
| Event | Shape | Color | Description |
|---|---|---|---|
ping | Small Circle | #06b6d4 (cyan) | Drone heartbeat |
register | Pentagon | #f59e0b (amber) | Drone registration event |
Problem Resolution:
| Event | Shape | Color | Description |
|---|---|---|---|
blocked | Cross | #ef4444 (red) | Package blocked by dependency |
unblock | Ring | #84cc16 (lime) | Blocked package resolved |
redelegate | Triangle | #ec4899 (pink) | Package reassigned to different drone |
Drone Status:
| Event | Shape | Color | Description |
|---|---|---|---|
ground | Arrow Down | #fbbf24 (yellow) | Drone grounded (taken offline) |
unground | Arrow Up | #4ade80 (green) | Drone ungrounded (back online) |
Clicking any legend item toggles that event type on/off in the visualization. The “ALL” button resets all filters to active.
Build Timeline
Below the pipeline, a collapsible Gantt-chart panel (#timelinePanel) renders build durations on a canvas element. Color coding: green (completed), amber (building), red (failed), blue (queued). The timeline shows a configurable time range.
Data Source
The build page polls the gateway API at http://10.42.0.199:8090 (dev) or through the Cloudflare Worker proxy (prod). The live indicator dot in the header transitions from “Connecting” to “Live” (green) or “Offline” (red).
Control Center (/command/control-center)
File: src/pages/command/control-center.astro
Mission control with four tabbed views in a single page. Uses BaseLayout + CommandNav, with dedicated CSS from styles/control-center.css.
Tab Navigation
Four tabs in the header, switchable without page reload:
| Tab | Icon | Content |
|---|---|---|
| Topology | 🌐 | SVG network topology with animated packet flow |
| Fleet | 🤖 | Drone cards organized by site |
| Pipeline | 📦 | Build queue visualization |
| Logs | 📜 | Persistent build logs |
Topology Tab
A full SVG diagram (viewBox="0 0 1200 700") renders the build swarm topology:
- Gateway node at center-top (Altair-Link / 10.42.0.199)
- Orchestrator Milky Way (Izar-Host / 10.42.0.2 side) — Primary
- Orchestrator Andromeda (Tarn-Host / 192.168.20.100 side) — Standby
- Milky Way drones: drone-Izar-Host (16 cores), Tau-Host (8 cores), sweeper on Capella-Outpost
- Andromeda drones: drone-Tarn (14 cores), drone-Meridian-Host (24 cores)
Animated packets flow along connection paths between nodes using SVG <path> elements with radial gradient glows (green, cyan, purple). A dashed cross-galaxy mesh line represents the Tailscale link.
Status indicator circles on each node update color based on live state: green (online), amber (standby), grey (offline).
Fleet Tab
Drone cards split into two sections:
- Milky Way Fleet (Milky Way, 10.42.0.0/24)
- Andromeda Fleet (Andromeda, 192.168.20.0/24)
Each fleet grid is populated by JavaScript from the gateway API. Cards show drone name, core count, current package (if building), and status.
Pipeline Tab
An SVG pipeline visualization (viewBox="0 0 1100 450") shows the build flow in stages:
- Queue (left) — pending package count with a scrollable list
- Building (center) — per-drone build slots showing what each drone is compiling. Five drone slots: drone-Izar-Host (16c), Tau-Host (8c), sweeper-galileo, drone-Tarn (14c), drone-Meridian-Host (24c)
- Completed (right-top) — completed count
- Failed (right-top) — failed count
- Blocked/Errors (right-bottom) — error list
Flow arrows with “dispatch” labels connect stages. A progress bar along the bottom shows overall completion percentage.
A “Recent Events” panel below the SVG shows timestamped build events (redelegations, completions, errors).
Logs Tab
Full-height log viewer with filter buttons: All, Builds, Errors, System. Logs are persisted to localStorage with a maximum of 2000 entries to prevent unbounded growth. The persistent log console at the bottom of the page is visible across all tabs with controls for:
- Pause/resume auto-scroll
- Clear log history
- Expand/collapse the console
- Filter by log category
Polling
The control center polls more aggressively than the hub page:
- Gateway API: every 2-5 seconds for node status, build queue, and events
- Connection status indicator in the header shows live state with a colored dot and text
Media (/command/media)
File: src/pages/command/media.astro
Media services overview with Starfield background and glass morphism styling. Uses BaseLayout + CommandNav.
Quick Stats
Four metrics in the hero section: Active Streams, Libraries, Movies, TV Shows. All populate from the media proxy API.
Now Playing
A “Now Playing” section shows any active Plex streams with user, title, and playback details. Renders a loading placeholder until the API responds.
Plex Servers
Three server cards defined in the page frontmatter:
| Name | Role | Icon |
|---|---|---|
| Kraken-Commander | Primary Plex | 🎬 |
| Kraken-Logistics | Secondary Plex | 🎬 |
| Shield-Stream | Shield TV | 📺 |
Both Plex server instances run on the Polaris-Media LXC container on Tarn-Host (192.168.20.100): Kraken-commander on port 32400 and Kraken-logistics-officer on port 32401. The NVIDIA Shield Pro at 192.168.20.65 serves as the primary playback endpoint.
Library Statistics
Four library cards show counts for: Movies, TV Shows, Music, Audiobooks. Values are fetched from /api/proxy/media/public/summary.
*arr Apps
Four media management applications displayed as cards:
| App | Role | Color |
|---|---|---|
| Sonarr | TV Shows | #00ccff |
| Radarr | Movies | #ffc230 |
| Lidarr | Music | #00ff00 |
| Prowlarr | Indexers | #ff6600 |
These run as Docker containers on Meridian-Host (192.168.20.50). Note: Sonarr, Radarr, and Prowlarr are currently in a stopped state — they run on-demand for media management rather than continuously.
API Endpoint
Media data is fetched via /api/proxy/media/public/summary, which proxies to the homelab-services-api on Altair-Link (10.42.0.199:8093). The connection indicator pill shows the current API state.