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...

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)

---