ArgoBox
ArgoBox AI + Infrastructure + Labs
Ctrl+K
Site Architecture

Infrastructure Explorer

Interactive force-directed graph playground visualizing the dual-galaxy network topology with Tendril, live metrics, and multi-layout controls

March 1, 2026

Infrastructure Explorer

Route: /playground/infrastructure Rendering: Static (SSG) Auth: None (public) Source: src/pages/playground/infrastructure.astro

Purpose

An interactive force-directed graph visualization of the dual-galaxy network topology. Visitors explore 13 systems across two physical sites connected by Tailscale mesh VPN. Nodes are clickable, show live metrics when available, and the graph supports multiple layout algorithms.

This is the "wow" playground — the one that makes employers pause and think "this person built that?"

Architecture

Data Flow

network-data.ts (single source of truth)
    ↓
infra-topology.ts (transforms to Tendril format)
    ↓
infrastructure.astro (frontmatter imports)
    ↓
<script define:vars> (serialized to window globals)
    ↓
<script> module (TendrilGraph initialization)
    ↓
/api/proxy/infrastructure (live metrics overlay, 30s polling)

Data Module: src/lib/infra-topology.ts

Transforms src/config/network-data.ts host entries into Tendril-compatible node/edge arrays:

  • Filters out decommissioned hosts
  • Excludes build swarm nodes (decommissioned)
  • Adds network device nodes (Sentinel firewall, Nexus switch)
  • Defines edge relationships: local LAN, Tailscale mesh, backup, service dependency

Tendril Integration

Uses the vendored Tendril graph library (packages/tendril-graph/) — same library that powers the Knowledge Graph on /blog. Follows the KnowledgeGraph.astro pattern:

  1. Frontmatter imports DEFAULT_CONFIG + deepMerge from Tendril config
  2. Builds infrastructure-specific config (physics, node colors, sizing, layout)
  3. Serializes config to JSON via define:vars → window.INFRA_CONFIG
  4. Module <script> imports TendrilGraph from @argobox/tendril-graph and initializes

Page Structure

1. Stats Overview

Five stat cards from NETWORK_SUMMARY: galaxies, systems, cores, storage, mesh VPN.

2. Graph Controls Toolbar

  • Layout dropdown: Clustered (default), Force, Concentric, Radial
  • Fullscreen button: Uses requestFullscreen API
  • Auto-refresh toggle: Enables/disables 30s live data polling
  • Live indicator: Green "Live Data" or orange "Demo Mode" badge

3. Tendril Graph

Force-directed graph with:

  • 13 system nodes across two galaxy clusters (Milky Way cyan, Andromeda pink)
  • 2 network device nodes (firewall, switch)
  • Node shapes by type: hexagon (hypervisor), star (gateway), ellipse (workstation), rectangle (NAS), round-rectangle (media), diamond (network device)
  • Edge styles: solid (LAN), dashed purple (Tailscale), dotted green (backup), dotted cyan (service dependency)
  • Click interaction: Spotlight selected node + neighbors, show details panel
  • Galaxy clustering: Clustered layout separates the two sites visually

4. Details Panel

Slide-in panel showing: status, type, role, resources, galaxy, live metrics (CPU/RAM/disk bars), and services list.

5. Network Legend

Visual guide to node shapes, edge styles, and galaxy colors.

6. Architecture Info

Three explanation cards: Dual-Site Architecture, Zero-Trust Networking, Subnet Routing.

7. Explore More

Cross-links: Command Center, Homelab dashboard, Architecture page.

8. Challenges & Docs

Six challenge groups (beginner → expert):

  1. Graph Navigation — click nodes, switch layouts, fullscreen
  2. Dual-Galaxy Topology — identify clusters, count systems, find Tailscale edges
  3. System Roles — find hypervisors, gateway, storage, media, network devices
  4. Network Paths — distinguish edge types, trace cross-site paths
  5. Live Metrics — read CPU/RAM, identify offline systems
  6. Resilience Analysis — find single points of failure, assess redundancy

Live Data Integration

  • Endpoint: /api/proxy/infrastructure → Command Center public API
  • Polling: Every 30 seconds (toggleable via auto-refresh control)
  • Update: Maps API hostnames to Galactic node IDs, overlays CPU/RAM/disk metrics
  • Visual feedback: Node border color shifts with CPU load (cyan/pink → yellow → orange at high load)
  • Fallback: Demo mode with static topology when API is unreachable

Mobile Experience

At viewport < 768px, the Cytoscape graph is hidden and replaced with a mobile list view:

  • Systems grouped by galaxy
  • Tappable cards showing icon, name, role, specs
  • Same details panel on tap
  • Live polling still active

Technical Patterns

Pattern Implementation
Layout BaseLayout + Starfield + Nebula
Styles <style is:global> (Tendril renders its own DOM)
Events astro:page-load (View Transitions compatible)
Data injection <script define:vars> → window.INFRA_DATA / window.INFRA_CONFIG
Graph library import { TendrilGraph } from '@argobox/tendril-graph' in module <script>
Motion prefers-reduced-motion disables physics, shows static layout
Responsive Graph hidden at 768px, mobile list view shown
Rendering SSG — all API calls happen client-side at runtime

Related Pages

  • /playground — playground hub (card links here)
  • /architecture — static architecture reference page
  • /command — Command Center live dashboard
  • /homelab — hardware showcase
  • /blog — Knowledge Graph uses same Tendril library
playgroundinfrastructuretendrilgraphvisualization