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 happen...
No explicit evidence field yet. Require tests, screenshots, linked PRs, or reviewed outputs before marking complete.
Date: 2026-04-28
Status: Approved — pending implementation
Replaces: cockpit/index.html (renamed and rebuilt in-place)
URL: https://cockpit.bezeliq.ai (unchanged)
---
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.
---
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
---
The hero view. Every agent as a card, grouped by department.
exec · ops · platform · dev · design · qa · crm · sales · marketing
``
┌─────────────────────────┐
│ [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 animationblocked— 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_typeshown as badge (spec_gap / tool_failure / ambiguity etc.)- [Unblock] button visible on card — posts
task.availableback to role topic
- This month (default)
- Toggle to: this week / all time (toggle control above fleet grid)
- AI-generated professional headshots
- Consistent lighting and framing across all agents
- Stored at Cloudflare Images, referenced by URL
agent_definitionstable: addavatar_url textcolumn- Fallback: initials avatar (first letter of name, colored by department) if
avatar_urlis null
---
Real-time event stream. Newest at top. Auto-scrolls; pauses on hover.
| 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.completeandtask.blockedevents show HashScan link (testnet icon↗)- Running cost total at top of feed: Platform today: $4.82 (updates live)
Supabase realtime on cluster_events + agent_tasks + agent_state tables. Same subscription pattern as existing cockpit realtime setup.
---
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)
---