Skip to content

Embedded WebUI

Continuum Router includes an embedded browser-based administration interface compiled directly into the binary. No external files, build tools, or Node.js pipeline are needed - the WebUI is always available as part of the single-binary deployment.

Overview

The WebUI provides a graphical interface for the same operations available through the Admin REST API. It is particularly useful for:

  • Interactive backend health monitoring
  • API key lifecycle management (create, rotate, enable/disable, delete)
  • Live configuration editing with validation
  • Configuration change history and rollback

The WebUI is protected by the same admin authentication middleware as the /admin/* endpoints. No additional authentication configuration is required.

Configuration

The webui section in your configuration file controls the embedded interface:

webui:
  enabled: true        # default: true when admin is configured
  path_prefix: /webui  # default: /webui

Configuration Properties:

Property Type Default Description
enabled boolean true Enable or disable the WebUI
path_prefix string /webui URL path prefix for the WebUI. Must start with /. Must not contain ...

If webui is omitted from the configuration, the defaults above apply (WebUI enabled at /webui).

To disable the WebUI entirely:

webui:
  enabled: false

Accessing the WebUI

Once the router is running with admin authentication configured, navigate to:

http://<host>:<port>/webui/

For example, with the default settings:

http://localhost:8080/webui/

You will be prompted to enter your admin bearer token. The token is stored in localStorage for the browser session and used as a Bearer header on all subsequent Admin API calls.

Authentication

The WebUI uses the same Bearer token authentication as the Admin API. Configure admin authentication in the admin section:

admin:
  auth:
    method: bearer
    token: "${ADMIN_TOKEN}"

When you first open the WebUI in a browser, enter the bearer token in the login prompt. The token is stored in the browser's localStorage under the key continuum_admin_token.

Pages

Dashboard

The Dashboard provides an at-a-glance view of the router's health and activity:

  • Backend health status (healthy / degraded / unhealthy)
  • Circuit breaker states per backend
  • Quick statistics (request count, error rate, average latency)
  • Auto-refresh every 5 seconds

API Keys

The API Keys page provides full lifecycle management for API keys:

  • List all keys with masked values and status indicators
  • Create new keys with configurable scopes and rate limits
  • Edit existing key metadata (name, description, scopes, rate limit)
  • Rotate key values (generate a new secret while preserving the key ID)
  • Enable or disable keys without deleting them
  • Delete keys permanently
  • Search and filter by name or status

Backends

The Backends page displays and manages backend configurations:

  • List all configured backends with health indicators
  • Add new backends with type, URL, and weight settings
  • Edit backend properties (URL, weight, models)
  • Remove backends at runtime
  • View per-backend latency and circuit breaker state

Configuration

The Configuration page provides section-based configuration editing:

  • Browse configuration by section (server, health_checks, logging, etc.)
  • Edit sections as JSON with in-browser validation
  • Export the full configuration as YAML or TOML
  • Import configuration from a file
  • View hot-reload status (which sections support live updates)

History

The History page shows a timeline of configuration changes:

  • View all configuration modifications with timestamps
  • Inspect diffs between configuration versions
  • Roll back to a previous configuration state

Technology Stack

The WebUI is built with:

  • Alpine.js - Lightweight reactivity for interactive components
  • Tailwind CSS - Utility-first styling loaded from CDN (cdn.jsdelivr.net)
  • Vanilla JavaScript - No framework dependencies beyond Alpine.js

Assets are embedded using rust-embed and served with:

  • ETag-based caching - Content-addressed ETags enable 304 Not Modified responses
  • Cache-Control headers - no-cache for HTML (always revalidates), public, max-age=3600 for JS/CSS
  • Security headers - X-Content-Type-Options: nosniff, X-Frame-Options: SAMEORIGIN
  • Content Security Policy - CDN URLs pinned to cdn.jsdelivr.net and fonts.googleapis.com

Security Considerations

  • All WebUI routes require valid admin authentication. Unauthenticated requests receive 401 Unauthorized.
  • The path_prefix must start with / and must not contain .. to prevent path traversal.
  • File paths within the asset server are also validated against traversal sequences (.., null bytes) before serving.
  • The Content Security Policy restricts script and style sources to self and pinned CDN origins.
  • X-Frame-Options: SAMEORIGIN prevents clickjacking from cross-origin frames.

Disabling the WebUI

If you do not need the browser interface, disable it to reduce the attack surface:

webui:
  enabled: false

When disabled, all requests to the configured path_prefix will return 404 Not Found.

Custom Path Prefix

To serve the WebUI at a different path (for example, behind a reverse proxy):

webui:
  enabled: true
  path_prefix: /admin/ui

The WebUI will then be available at:

http://localhost:8080/admin/ui/

Ensure your reverse proxy forwards requests to this prefix correctly:

location /admin/ui/ {
    proxy_pass http://localhost:8080/admin/ui/;
}