Last updated 2026-05-07

Web Dashboard

The dashboard is a Next.js (App Router) application under platform/web/. It is the visual layer for the runner and the stacked-diff workflow — list runs, stream logs, browse pull requests with a Monaco-backed diff viewer, and review feature documentation. It also exposes repo-backed secrets status, GitHub sync, deployment-log configuration, workflow editing, artifacts, and audit views.

Stack

  • Next.js App Router (a custom build — see platform/web/AGENTS.md for breaking changes).
  • refraction-ui primitives for layout (sidebar + topbar shell), buttons, cards, dialogs.
  • Tailwind with the same refraction-ui token system used by these docs.
  • TanStack Query for server-state fetching and SSE handling.
  • Monaco Editor (the engine that powers VS Code) for the diff viewer.
  • A built-in theme system: 5 schemes × light/dark/system, persisted across all pages.

Launching

# From the CLI (preferred)
stax dashboard            # opens http://localhost:3000


# Manually
cd platform/web
pnpm install
pnpm dev

How it talks to the runner

The dashboard never reads runner data directly from the browser. Instead, server-side /api/* routes proxy to:

  • The local runner on :4800 for runs, workflows, secrets, SSE.
  • The gh CLI for PR metadata and review state.
  • git for blob and diff content.
  • The workspace for repo-backed secrets metadata, feature docs, screenshots, and local sync logs.
browser ── HTTP ──▶ Next.js server (:3000) ── HTTP ──▶ runner (:4800)
                                            └── child_process ──▶ gh / git

Key views

  • Home — recent runs and quick-link tiles.
  • Runs — list and detail views with live logs over SSE.
  • Pull Requests — list of open PRs and a Monaco-backed diff/review screen.
  • Features — one card per feature with optional video and screenshot artifacts (from video-capture).
  • Diffs — drill into a single stacked diff, approve or reject, view per-file diffs.
  • Secrets — inspect the committed SOPS + age store, verify it, list recipients, and sync decrypted values to the runner mirror.
  • Issues — configure GitHub sync and production deployment logging to a GitHub issue.
  • Workflows — list and edit workflow YAML discovered by the runner.

Continue reading