Command Center Overview

The Command Center is the main dashboard at /command. It aggregates live data from the build swarm, infrastructure services, media stack, and network topology into a single hub page. Every other Command Center view branches off from here.

Page Layout

The hub page uses BaseLayout with these key components layered on top:

Component	Purpose
CommandNav	Sticky 8-tab navigation bar (hub, build, infrastructure, services, media, network, personal, mission control)
Starfield	Animated particle background from components/space/Starfield.astro
ConnectionStatus	Fixed-position pill in the top-right showing API connection state

The page imports static configuration from two config files:

• src/config/infrastructure.ts — INFRASTRUCTURE_STATS provides baseline numbers for build swarm drones, cores, and system counts.
• src/config/network-data.ts — NETWORK_SUMMARY and CLOUDFLARE_TUNNEL_SERVICES provide network topology data and external service definitions.

Glass morphism styling comes from styles/glass-morphism.css and styles/space-theme.css.

Hero Section

The hero displays a gradient title with a heartbeat indicator dot beside it. The dot starts grey and turns green with a pulsing animation once any API responds successfully. Below the title is a quick stats bar with six metrics:

Metric	Source
Systems	INFRASTRUCTURE_STATS.infrastructure.totalSystems
Cores	NETWORK_SUMMARY.totals.cores
RAM	NETWORK_SUMMARY.totals.ram
Storage	NETWORK_SUMMARY.totals.storage
Galaxies	NETWORK_SUMMARY.totals.networks (2 — Milky Way and Andromeda)
VPN Nodes	NETWORK_SUMMARY.vpn.nodeCount

Section Cards

Six cards link to the main Command Center sub-pages. Each card has a status dot, two stat boxes, an activity line, and an accent color:

Card	Route	Accent	Stats Shown
Build Swarm	/command/build	amber	Drones, Cores
Infrastructure	/command/infrastructure	cyan	Systems, Online
Services	/command/services	purple	Containers, Pods
Media	/command/media	pink	Streams, Libraries
Network	/command/network	green	VPN Nodes, Networks
Personal	/command/personal	amber	Vaults, Backups

The Build Swarm card is marked featured: true, which makes it span two grid columns on desktop. Each card’s status dot updates to green (online) or red (offline) after the API fetch cycle completes.

A “Mission Control” banner above the cards links to /command/control-center with a shimmer animation.

Galaxy Network Topology

Below the section cards, a topology visualization shows the two sites:

• Milky Way (10.42.0.0/24) — displayed as a cyan-bordered galaxy card with host count and core count
• Andromeda (192.168.20.0/24) — displayed as a pink-bordered galaxy card

Between them, a Tailscale mesh connector shows animated data packets flowing between sites with a ~38ms latency label. The packet animation uses CSS keyframes on absolutely-positioned dots traveling along a 3px line.

On mobile, the layout switches from horizontal to vertical with the mesh connector rotating to horizontal flow.

External Services Grid

The page filters CLOUDFLARE_TUNNEL_SERVICES (excluding Arcturus-Prime.com itself) and renders them as clickable links with Font Awesome icons:

Service	Domain	Icon
Gitea	git.Arcturus-Prime.com	fa-code-branch
OpenWebUI	chat.Arcturus-Prime.com	fa-comments
VS Code Server	dev.Arcturus-Prime.com	fa-terminal
Vaultwarden	vault.Arcturus-Prime.com	fa-shield-alt
File Browser	files.Arcturus-Prime.com	fa-folder-open
Command Center	status.Arcturus-Prime.com	fa-satellite-dish
Quartz Blog	blog.Arcturus-Prime.com	fa-rss

Each link opens in a new tab with rel="noopener noreferrer".

Live Fleet Status

Four quick-access cards at the bottom summarize real-time fleet health:

• Build Swarm — Drones Online (e.g., 3/5), Queue Depth. Links to /command/build.
• Services — Container count, K3s Pod count. Links to /command/services.
• Media — Active Streams, Library count. Links to /command/media.
• System Health — Uptime percentage, Monitor count. Links to /status.

API Polling

The client-side script (using astro:page-load for View Transitions compatibility) calls seven fetch functions in parallel on initial load and then every 30 seconds:

fetchBuildSwarm()   -> /api/gateway/nodes?all=true, /api/gateway/status
fetchSvcData()      -> /api/proxy/services/summary
fetchInfraData()    -> /api/proxy/services/infrastructure
fetchMediaData()    -> /api/proxy/services/media
fetchNetworkData()  -> /api/proxy/services/network
fetchPersonalData() -> /api/proxy/services/personal
fetchUptimeData()   -> /api/uptime-kuma/status-page/heartbeat/main

All fetches use the shared command-api library (src/lib/command-api.ts) which handles timeout, error recovery, and source tracking (live vs. static fallback).

On initial load, the hub also fires prefetchEndpoints() to warm the cache for sub-pages:

/api/gateway/nodes?all=true
/api/proxy/services/public/docker?all=true
/api/proxy/services/public/k3s
/api/proxy/media/public/summary
/api/uptime-kuma/status-page/heartbeat/main

Shared Components

CommandNav

Defined in src/components/command/CommandNav.astro. Accepts an activePage prop from the set: hub, build, infrastructure, services, media, network, personal, control-center. Eight tabs total, each with an emoji icon and accent color. The active tab gets a tinted background using color-mix(). Sticky-positioned at top: 64px (below the site header). On mobile (< 768px), labels hide and only icons display.

ConnectionStatus

Defined in src/components/command/ConnectionStatus.astro. A pill-shaped indicator with three visual states:

State	Dot Color	Animation
connecting	amber	Pulsing
online	green	Pulsing
offline	red	None
static-view	amber	None

Can be rendered as fixed (top-right of viewport) or inline via the position prop. The connection status is updated by calling setConnectionStatus() from the command-api library after each fetch cycle.

Cleanup

The polling interval is stored in a module-scoped variable and cleared on astro:before-preparation (View Transitions navigation away) to prevent multiple intervals stacking up across page transitions.