Cockpit — Design Spec
internal prototype · canonical JSON + Dreamborn Forge HTML
internal generated
design_doc · markdown

Cockpit — Design Spec

Cockpit — Design Spec Date: 2026 04 25 Status: Design approved — ready for implementation plan URL: cockpit.bezeliq.ai What It Is A live operations dashboard for the RedKey/BezelIQ platform. Justin watches agents work, projects progress, and exec decisions queue up — in real time, from a browser, served at cockpit.bezeliq.ai. Not a reporting tool. Not a buil...

Cockpit — Design Spec

Date: 2026-04-25 Status: Design approved — ready for implementation plan URL: cockpit.bezeliq.ai

---

What It Is

A live operations dashboard for the RedKey/BezelIQ platform. Justin watches agents work, projects progress, and exec decisions queue up — in real-time, from a browser, served at cockpit.bezeliq.ai.

Not a reporting tool. Not a build log viewer. The cockpit is the control room: what's running, who's doing it, and what needs a decision.

---

Architecture

Single file: cockpit/index.html — all HTML, CSS, and JS inline. No build step. No framework. Deploy is scp cockpit/index.html ccos@87.99.154.64:/tmp/ then move to nginx root.

Live data: Supabase JS SDK loaded from CDN (@supabase/supabase-js). Supabase Realtime websocket subscriptions on entity tables. Updates push to the browser as the listener writes — no polling.

Design system: Forge (already in the existing shell) — dark amber, Space Grotesk + JetBrains Mono, #0c0a07 background, amber accent #f59e0b.

  • projects — project list + status
  • stages — stage status transitions
  • phases — phase status + progress
  • agent_tasks — task status, agent assignment, action line
  • agent_state — agent working/idle/blocked + current action

Auth: Supabase anon key embedded in the HTML. All queries are read-only selects. No RLS rows exposed that aren't safe to read.

Deployment: nginx at cockpit.bezeliq.ai serves the single HTML file. No server-side logic.

---

Navigation

Hash-based routing. Two states, no page reload:

| Hash | View | |---|---| | #/ | Projects list (default) | | #/projects/0.0.XXXXX | Project detail |

Browser back/forward works. Entering a project URL directly works (loads data then renders detail).

---

Layout

Three columns, fixed height viewport:

`` ┌─────────────────────────────────────────────────────┐ │ NAV: RedKey · testnet · live indicator · clock │ ├──────────────────────────────┬──────────────────────┤ │ │ │ │ MAIN (dynamic) │ RIGHT (fixed) │ │ │ Agents │ │ Projects list │ Exec Inbox │ │ or │ CRM │ │ Project detail │ │ │ │ │ └──────────────────────────────┴──────────────────────┘ ``

Right panel is always visible regardless of navigation state. Main panel switches between the two views.

---

Projects List View (`#/`)

Default view on load. Main panel shows all projects as clickable rows.

  • Project name (bold, amber if active)
  • Status badge (active / on_hold / cancelled / complete)
  • Topic ID as HashScan link: 0.0.XXXXX ↗ (links to https://hashscan.io/testnet/topic/0.0.XXXXX)
  • Created date
  • Created by
  • Current stage name + brief activity summary (e.g. "Build · Phase 1 active · quinn working")
  • Chevron ›

Clicking any row navigates to #/projects/0.0.XXXXX.

---

Project Detail View (`#/projects/0.0.XXXXX`)

Header: Breadcrumb: ‹ Projects | [Project Name] + status badge. Clicking ‹ Projects navigates back to #/.

Stages section:

Stages are the primary navigation layer. Rendered as an accordion list — one row per stage, ordered by sequence.

  • Status dot (green = complete, amber pulsing = active, hollow = pending)
  • Stage name + stage type
  • One-line summary: completion date if done, current activity if active, "Not started" if pending
  • Status badge
  • Expand chevron

Active stage is open by default. Clicking a collapsed stage row opens it (and closes the currently open one).

Inside an open stage:

  • Phase number + status label
  • Phase name
  • Progress bar (tasks complete / total)
  • Task count
  • Phase topic ID as HashScan link
  • Clicking a card sets it as the selected phase

2. Task list — shown below the phase cards for the selected phase (active phase selected by default). Shows ALL tasks regardless of status:

Right Panel

Always visible. Three sections stacked vertically.

Agents

All agents listed: claire, quinn, vikram, priya, mindy, luna, zara, arlo, engine.

Working agents (green dot, glow pulse): `` ● quinn HCS listener · dynamic entity topics ``

Idle agents (hollow dot, dimmed name): `` ○ priya ``

Blocked agents (red dot): `` ● engine Blocked · missing task output ``

  • Green #34d399 with glow → working
  • Hollow (dark fill, dim border) → idle
  • Red #ef4444 → blocked

Data source: agent_state.status + agent_state.action. Updates via Realtime subscription.

Exec Inbox
  • Task topic ID
  • Task title (from brief field, first line)
  • Approve button (primary) — posts task.complete to the HCS post server at http://87.99.154.64:3001/post-hcs-message
  • Review button (secondary) — navigates to #/projects/... for the related project

Empty state: 0 pending in a dashed border box.

CRM

Single link: Open Twenty ↗ → http://87.99.154.64:3000. Opens in new tab.

---

Live Update Behaviour

On any Realtime event, only the affected component re-renders — not a full page refresh.

| Table | Triggers re-render of | |---|---| | agent_state | Agent panel (dot + action line) | | agent_tasks | Task list rows within the open phase | | projects | Project list row + project detail header badge | | stages | Stage accordion row (status, summary line) | | phases | Phase card (progress bar, task count) |

The live indicator dot in the nav bar reflects websocket connection state: amber pulse = connected, dim = disconnected.

---