Skip to content

Frontend UI

The Control Center frontend is a single-page application built with vanilla HTML, CSS, and JavaScript. No build tools or frameworks are required.

File Location

control-center/app/static/index.html

The entire frontend is a single HTML file served by FastAPI's StaticFiles mount.

Tabs

Tab Description
🏠 Dashboard System overview with status cards, security pipeline, quick actions
🔒 AI Access Level Simple access level selection with visual cards
🔧 Advanced Firewall Low-level rule management, profiles, and toggles
🌐 DNS Monitor Pi-hole statistics, query log, top domains
🔐 VPN Tunnels WireGuard tunnel status cards
� Secrets Centralized credential management with masked values and VM deployment
�📜 Audit Log Structured event timeline with severity filtering
🔌 Web Services Traefik route management
🔧 Debug Raw iptables dump and blocked traffic log
📖 Guide Built-in documentation and help

Design

Theme

Dark theme using CSS custom properties:

:root {
  --bg: #0d1117;       /* Background */
  --surface: #161b22;  /* Cards, panels */
  --border: #30363d;   /* Borders */
  --text: #e6edf3;     /* Primary text */
  --muted: #8b949e;    /* Secondary text */
  --accent: #58a6ff;   /* Links, active states */
  --green: #3fb950;    /* Success */
  --red: #f85149;      /* Danger */
  --orange: #d29922;   /* Warning */
  --purple: #bc8cff;   /* AI-related elements */
}

Key UI Components

  • Status cards — Grid of metric cards on the dashboard
  • Security pipeline — Vertical pipeline showing all 7 security layers with status
  • Access level cards — Clickable cards with current level highlighting
  • VPN tunnel cards — Per-tunnel status with connection details
  • Secrets manager — Per-app collapsible panels with masked values, reveal buttons, and deploy action
  • VPN-only toggle — Clickable 🔒/🌐 button per route to toggle VPN-only access
  • Audit timeline — Chronological event list with severity badges
  • Confirmation modals — Required for destructive actions (killswitch, profile changes)

Auto-Refresh

The dashboard auto-refreshes every 30 seconds:

_refreshTimer = setInterval(refreshAll, 30000);

Other tabs refresh on tab activation, not automatically.

API Communication

All API calls go through a simple wrapper:

async function api(path, opts={}) {
  const r = await fetch('/api'+path, {
    headers: {'Content-Type':'application/json'}, ...opts
  });
  if (!r.ok) { throw new Error(await r.text()); }
  return r.json();
}

All destructive actions show a confirmation modal before executing.

XSS Protection

All user-supplied text is escaped before insertion into the DOM:

function esc(s) {
  if (!s) return '';
  const d = document.createElement('div');
  d.textContent = String(s);
  return d.innerHTML;
}