{
  "id": "2026-04-25-cockpit-design-ea42b1624f",
  "scope": "redkey",
  "source_of_truth": "repo",
  "source_path": "docs/superpowers/specs/2026-04-25-cockpit-design.md",
  "source_kind": "markdown",
  "visibility": "internal",
  "renderer_id": "design_doc.dreamborn-forge.generated.v1",
  "design_system": "dreamborn-design-system:forge",
  "generated_at": "2026-05-09T13:00:55.768Z",
  "artifact_type": "design_doc",
  "schema_version": "design_doc.generated.v1",
  "title": "Cockpit — Design Spec",
  "summary": "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...",
  "format_source": "markdown",
  "sections": [
    {
      "title": "Cockpit — Design Spec",
      "level": 1,
      "body": "**Date:** 2026-04-25\n**Status:** Design approved — ready for implementation plan\n**URL:** cockpit.bezeliq.ai\n\n---"
    },
    {
      "title": "What It Is",
      "level": 2,
      "body": "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.\n\nNot 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.\n\n---"
    },
    {
      "title": "Architecture",
      "level": 2,
      "body": "**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.\n\n**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.\n\n**Design system:** Forge (already in the existing shell) — dark amber, Space Grotesk + JetBrains Mono, `#0c0a07` background, amber accent `#f59e0b`.\n\n**Supabase tables subscribed:**\n- `projects` — project list + status\n- `stages` — stage status transitions\n- `phases` — phase status + progress\n- `agent_tasks` — task status, agent assignment, action line\n- `agent_state` — agent working/idle/blocked + current action\n\n**Auth:** Supabase anon key embedded in the HTML. All queries are read-only selects. No RLS rows exposed that aren't safe to read.\n\n**Deployment:** nginx at `cockpit.bezeliq.ai` serves the single HTML file. No server-side logic.\n\n---"
    },
    {
      "title": "Navigation",
      "level": 2,
      "body": "Hash-based routing. Two states, no page reload:\n\n| Hash | View |\n|---|---|\n| `#/` | Projects list (default) |\n| `#/projects/0.0.XXXXX` | Project detail |\n\nBrowser back/forward works. Entering a project URL directly works (loads data then renders detail).\n\n---"
    },
    {
      "title": "Layout",
      "level": 2,
      "body": "Three columns, fixed height viewport:\n\n```\n┌─────────────────────────────────────────────────────┐\n│ NAV: RedKey · testnet · live indicator · clock      │\n├──────────────────────────────┬──────────────────────┤\n│                              │                      │\n│  MAIN (dynamic)              │  RIGHT (fixed)       │\n│                              │  Agents              │\n│  Projects list               │  Exec Inbox          │\n│    or                        │  CRM                 │\n│  Project detail              │                      │\n│                              │                      │\n└──────────────────────────────┴──────────────────────┘\n```\n\nRight panel is always visible regardless of navigation state. Main panel switches between the two views.\n\n---"
    },
    {
      "title": "Projects List View (`#/`)",
      "level": 2,
      "body": "Default view on load. Main panel shows all projects as clickable rows.\n\n**Each project row contains:**\n- Project name (bold, amber if active)\n- Status badge (active / on_hold / cancelled / complete)\n- Topic ID as HashScan link: `0.0.XXXXX ↗` (links to `https://hashscan.io/testnet/topic/0.0.XXXXX`)\n- Created date\n- Created by\n- Current stage name + brief activity summary (e.g. \"Build · Phase 1 active · quinn working\")\n- Chevron `›`\n\nClicking any row navigates to `#/projects/0.0.XXXXX`.\n\n---"
    },
    {
      "title": "Project Detail View (`#/projects/0.0.XXXXX`)",
      "level": 2,
      "body": "**Header:**\nBreadcrumb: `‹ Projects | [Project Name]` + status badge. Clicking `‹ Projects` navigates back to `#/`.\n\n**Stages section:**\n\nStages are the primary navigation layer. Rendered as an accordion list — one row per stage, ordered by sequence.\n\nEach stage row shows:\n- Status dot (green = complete, amber pulsing = active, hollow = pending)\n- Stage name + stage type\n- One-line summary: completion date if done, current activity if active, \"Not started\" if pending\n- Status badge\n- Expand chevron\n\n**Active stage is open by default.** Clicking a collapsed stage row opens it (and closes the currently open one).\n\nInside an open stage:\n\n1. **Phase cards** — displayed as a grid (up to 3 columns). Each card shows:\n   - Phase number + status label\n   - Phase name\n   - Progress bar (tasks complete / total)\n   - Task count\n   - Phase topic ID as HashScan link\n   - Clicking a card sets it as the selected phase\n\n2. **Task list** — shown below the phase cards for the selected phase (active phase selected by default). Shows ALL tasks regardless of status:\n\n| Indicator | Status | Content |\n|---|---|---|\n| `✓` green | complete | Task name (dimmed), agent, done badge |\n| `●` amber | working | Task name, agent action line below, working badge |\n| `○` hollow | pending | Task name (dimmed), `depends on: X` if applicable, pending badge |\n| `✕` red | blocked | Task name, block reason line below in red, blocked badge |\n\nEach task row includes task topic ID as HashScan link.\n\n---"
    },
    {
      "title": "Right Panel",
      "level": 2,
      "body": "Always visible. Three sections stacked vertically."
    },
    {
      "title": "Agents",
      "level": 3,
      "body": "All agents listed: claire, quinn, vikram, priya, mindy, luna, zara, arlo, engine.\n\n**Working agents** (green dot, glow pulse):\n```\n● quinn\n  HCS listener · dynamic entity topics\n```\n\n**Idle agents** (hollow dot, dimmed name):\n```\n○ priya\n```\n\n**Blocked agents** (red dot):\n```\n● engine\n  Blocked · missing task output\n```\n\nStatus dot colors:\n- Green `#34d399` with glow → `working`\n- Hollow (dark fill, dim border) → `idle`\n- Red `#ef4444` → `blocked`\n\nData source: `agent_state.status` + `agent_state.action`. Updates via Realtime subscription."
    },
    {
      "title": "Exec Inbox",
      "level": 3,
      "body": "Items from `agent_tasks` where `role = exec` and `status = assigned`. Each item shows:\n- Task topic ID\n- Task title (from `brief` field, first line)\n- **Approve** button (primary) — posts `task.complete` to the HCS post server at `http://87.99.154.64:3001/post-hcs-message`\n- **Review** button (secondary) — navigates to `#/projects/...` for the related project\n\nEmpty state: `0 pending` in a dashed border box."
    },
    {
      "title": "CRM",
      "level": 3,
      "body": "Single link: `Open Twenty ↗` → `http://87.99.154.64:3000`. Opens in new tab.\n\n---"
    },
    {
      "title": "Live Update Behaviour",
      "level": 2,
      "body": "On any Realtime event, only the affected component re-renders — not a full page refresh.\n\n| Table | Triggers re-render of |\n|---|---|\n| `agent_state` | Agent panel (dot + action line) |\n| `agent_tasks` | Task list rows within the open phase |\n| `projects` | Project list row + project detail header badge |\n| `stages` | Stage accordion row (status, summary line) |\n| `phases` | Phase card (progress bar, task count) |\n\nThe live indicator dot in the nav bar reflects websocket connection state: amber pulse = connected, dim = disconnected.\n\n---"
    },
    {
      "title": "HashScan Links",
      "level": 2,
      "body": "All topic ID links point to the Hedera testnet mirror:\n```\nhttps://hashscan.io/testnet/topic/0.0.XXXXX\n```\n\nOpen in a new tab. Applied to: project topic IDs in the list, phase topic IDs in phase cards, task topic IDs in task rows.\n\n---"
    },
    {
      "title": "Out of Scope (This Build)",
      "level": 2,
      "body": "- Role queue depth display (can add later — needs a queue depth query)\n- Task detail modal / side panel\n- CRM pipeline view (link-out to Twenty only for now)\n- Auth / login gate\n- Mobile layout\n- Dark/light theme toggle\n\n---"
    },
    {
      "title": "Data Queries",
      "level": 2,
      "body": "**Projects list:**\n```sql\nSELECT id, client_id, title, status, active_stage_id, created_by, created_at\nFROM projects\nORDER BY created_at DESC\n```\n\n**Stages for a project:**\n```sql\nSELECT id, project_id, stage_type, title, status, current_step, created_at\nFROM stages\nWHERE project_id = $1\nORDER BY created_at ASC\n```\n\n**Phases for a stage:**\n```sql\nSELECT id, stage_id, name, status, depends_on, created_at\nFROM phases\nWHERE stage_id = $1\nORDER BY created_at ASC\n```\n\n**Tasks for a phase (all statuses):**\n```sql\nSELECT id, phase_id, role, agent, status, brief, depends_on, output_ref, cost_usd, duration_seconds, created_at, updated_at\nFROM agent_tasks\nWHERE phase_id = $1\nORDER BY created_at ASC\n```\n\n**Agent state (all agents):**\n```sql\nSELECT agent, status, task_id, action, updated_at\nFROM agent_state\nORDER BY agent ASC\n```\n\n**Exec inbox:**\n```sql\nSELECT id, brief, created_at\nFROM agent_tasks\nWHERE role = 'exec' AND status = 'assigned'\nORDER BY created_at ASC\n```"
    }
  ],
  "html_path": "artifacts/2026-04-25-cockpit-design-ea42b1624f.html",
  "json_path": "artifacts/2026-04-25-cockpit-design-ea42b1624f.json"
}