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

Ops Studio — Design Spec

Ops Studio — Design Spec Date: 2026 04 28 Status: Approved — pending implementation Replaces: cockpit/index.html (renamed and rebuilt in place) URL: https://cockpit.bezeliq.ai (unchanged) What It Is Ops Studio is the live operations dashboard for the BezelIQ/RedKey platform. It is the single screen that shows Justin (and eventually clients) everything happen...

Agent Handoff
Start Here

Ops Studio — Design Spec Date: 2026 04 28 Status: Approved — pending implementation Replaces: cockpit/index.html (renamed and rebuilt in place) URL: https://cockpit.bezeliq.ai (unchanged) What It Is Ops Studio is the live operations dashboard for the BezelIQ/RedKey platform. It is the single screen that shows Justin (and eventually clients) everything happen...

Completion Evidence

No explicit evidence field yet. Require tests, screenshots, linked PRs, or reviewed outputs before marking complete.

Ops Studio — Design Spec

Date: 2026-04-28 Status: Approved — pending implementation Replaces: cockpit/index.html (renamed and rebuilt in-place) URL: https://cockpit.bezeliq.ai (unchanged)

---

What It Is

Ops Studio is the live operations dashboard for the BezelIQ/RedKey platform. It is the single screen that shows Justin (and eventually clients) everything happening in the agent fleet — who is working, what it costs, what just happened, and what is stuck. It is designed to be left open on a second monitor and to impress anyone who sees it.

The design principles: 1. Radical transparency — cost, time, Anthropic spend, Hedera proof — nothing hidden 2. Mission-control aesthetic — dark, precise, alive. Agents pulse when working. 3. Action-first — blocked items and exec gates surface immediately, not buried 4. Real numbers — every task has a dollar amount. The platform has a P&L.

---

Layout

Three-panel shell:

`` ┌──────────────────────────────────────────────────────────────────┐ │ BezelIQ · Ops Studio [Fleet | Workflows | Health] ✉ │ ├────────────────────────────────────────────┬─────────────────────┤ │ │ │ │ MAIN PANEL │ LIVE FEED │ │ (tab-switched) │ (always visible) │ │ │ │ └────────────────────────────────────────────┴─────────────────────┘ ``

  • Nav bar — brand + 3 tab buttons (Fleet / Workflows / Health) + inbox badge + live indicator
  • Main panel — 75% width, tab-switched between Fleet, Workflows, Health
  • Live feed — 25% width, always visible regardless of active tab, real-time event stream
  • Default tab on load: Fleet

---

Tab 1 — Agent Fleet

The hero view. Every agent as a card, grouped by department.

Department groups (in order)

exec · ops · platform · dev · design · qa · crm · sales · marketing

Agent Card

`` ┌─────────────────────────┐ │ [avatar] ● working │ ← 40px avatar, status orb top-right │ │ │ Quinn │ ← name, 16px semibold │ developer │ ← role, 11px muted mono │ │ │ $47.20 143 tasks │ ← equal weight, 20px, side by side │ │ │ auth middleware refac… │ ← current task title, 11px mono, truncated └─────────────────────────┘ ``

  • working — green, pulsing animation (db-pulse)
  • idle — gray, no animation
  • blocked — red, card border glows red, reason shown below task title

Hover state: reveals last action + time ago (e.g. "completed task 0.0.88 · 4m ago")

  • Full-width avatar header + name + department + model
  • Lifetime stats: total tasks, total cost, avg cost/task, avg duration, first task date
  • Last 20 task events (claim → complete/blocked, with cost, duration, HashScan link)
  • Actions: [Pause daemon] [Resume daemon] [Dispatch task…]
  • Current task detail if working: full brief title + task_id + HashScan link + elapsed time
  • Red border glow
  • blocker_type shown as badge (spec_gap / tool_failure / ambiguity etc.)
  • [Unblock] button visible on card — posts task.available back to role topic
Cost display
  • This month (default)
  • Toggle to: this week / all time (toggle control above fleet grid)
Avatar images
  • AI-generated professional headshots
  • Consistent lighting and framing across all agents
  • Stored at Cloudflare Images, referenced by URL
  • agent_definitions table: add avatar_url text column
  • Fallback: initials avatar (first letter of name, colored by department) if avatar_url is null

---

Live Feed (right rail — always visible)

Real-time event stream. Newest at top. Auto-scrolls; pauses on hover.

Event types

| Event | Indicator | Format | |---|---|---| | task.claim | amber | Quinn · claimed · 0.0.8807878 | | task.complete | green | Priya · complete · $0.31 · 4m · 0.0.8807879 | | task.blocked | red | Harper · blocked · spec_gap | | phase.complete | green | Phase 2 complete · 4/4 tasks | | exec.gate | amber | Exec gate waiting · 0.0.8807880 |

  • Click → jumps to task in Workflows tab (or opens exec gate in inbox drawer)
  • task.complete and task.blocked events show HashScan link (testnet icon )
  • Running cost total at top of feed: Platform today: $4.82 (updates live)
Feed data source

Supabase realtime on cluster_events + agent_tasks + agent_state tables. Same subscription pattern as existing cockpit realtime setup.

---

Tab 2 — Workflows

Existing project/stage/phase/task tree, restyled to match Ops Studio aesthetic. No structural changes to the data model.

  • Active tasks show elapsed time + claimed_by agent avatar (16px inline)
  • Task cost shown on complete rows ($0.31)
  • Blocked tasks show blocker_type badge + [Unblock] action
  • Phase cards show cost subtotal ($4.20 · 12 tasks)
  • HashScan link on every task row (already exists, keep it)

---