Studio · Observability and Operational Dashboards

Purpose#

Evaluate operational health with the real observability evaluator across three lanes: a multi-window multi-burn-rate SLO alerting lane (per-window error-budget burn rates, a page/ticket alert decision per service, and a fleet rollup); a V7 platform + cost telemetry lane (realm population, retention, mesh pressure, sandbox fuel, scan queue, payouts, inflation, bandwidth and estimated hourly cost, with tunable cost levers); and a V7 creator-analytics lane (per-realm DAU/WAU/MAU, retention, funnel, revenue and mod engagement with actionable guidance). The workspace (StudioObservabilityOperationalDashboardsWorkspace) is an admin lane console that loads one catalog on mount and posts each lane's payload to its own evaluate endpoint.

Entry points#

• Studio root (/studio) — discoverable as an operations workspace
• Sibling quick actions — Experimentation and Feature Flags, Metrics and Analytics Instrumentation, Resilience and Error UX, Background Jobs and Progress UX, and Activity and Change Feeds workspaces link in/out
• Direct URL / bookmark — yes

Layout regions#

page.tsx mounts ShellLayout active="studio", renders StudioObservabilityOperationalDashboardsWorkspace, then a single panel of 5 quickAction links with stable data-obs-quick-action selectors. There is no breadcrumb and no Route Map panel on this route.

• Workspace heading (<h1> via WorkspaceHeading): "Studio Observability & Operational Dashboards"
• Summary (data-observability-dashboard-summary)
• SLO Burn-Rate Lane (<h2> data-obs-lane-heading): load-states + services form + result region
• V7 Platform + Cost Telemetry (<h2> data-v7-platform-cost-heading, rendered once the catalog loads): cost-lever controls + telemetry form + result region
• V7 Creator Analytics (<h2> data-v7-creator-analytics-heading, rendered once the catalog loads): realm selector + analytics form + result region
• Footer quick actions (panel data-obs-quick-actions data-obs-quick-action-count="5"): 5 sibling quickAction links

The default payloads for the two V7 lanes are seeded from the catalog's platformTelemetryFixture / creatorAnalyticsFixture (and the imported @v7/contracts fixtures), but evaluation is real-backed: the edited payload is POSTed to the BFF evaluator on submit.

States#

• Loading — data-obs-loading "Loading SLO burn evaluator..." while the catalog request is in flight
• Unauthorized — data-obs-unauthorized "Access restricted." on a 401/403 (admin scope required)
• Error — data-obs-error "Could not load the SLO burn evaluator." on a non-OK catalog response, malformed catalog response, or network failure
• Ready (forms) — catalog loaded: data-obs-enums (alert levels / fleet statuses), the data-obs-form SLO form, plus the data-v7-platform-cost-form and data-v7-creator-analytics-form lanes with data-*-form-state="idle"
• Pending evaluation — submitted valid JSON sets data-obs-form-state="pending", data-v7-platform-cost-form-state="pending", or data-v7-creator-analytics-form-state="pending", disables duplicate submit, and exposes aria-busy="true" until the BFF responds
• SLO result — data-obs-result with data-obs-fleet status + page / ticket / healthy counts and the per-service table
• Platform result — data-v7-platform-cost-result (summary, metrics, cost levers, realm telemetry, payout distribution, alerts)
• Creator result — data-v7-creator-analytics-result (summary, metrics, realms, funnel, revenue breakdown, mod engagement, actions)
• Validation — data-obs-evaluate-error / data-v7-platform-cost-error / data-v7-creator-analytics-error for invalid JSON, live BFF 400 details, malformed 200 responses, or network failure

Interactions#

SLO Burn-Rate Lane (form)#

• Services JSON (textarea data-obs-payload, aria-label "services json") — services with windowed error rates + a burnPolicy
• Evaluate SLO burn (button data-obs-submit, type=submit, data-obs-submit-state) — POSTs to /v1/admin/studio/observability-dashboards/evaluate, blocks double-submit while pending, and holds a 44 px minimum target
• Result — data-obs-fleet headline; table data-obs-services rows data-obs-service-row with data-alert, cells data-obs-worst-burn, data-obs-page-windows, data-obs-alert

V7 Platform + Cost Telemetry (form)#

• Mesh tier (select data-v7-cost-lever-control data-lever-id="mesh-tier", aria-label "mesh tier") — options from catalog.meshTiers
• Balance-fleet depth (input type=number data-lever-id="balance-fleet-depth", aria-label "balance fleet depth")
• AI-creation usage (input type=number data-lever-id="ai-creation-usage", aria-label "ai creation usage")
• V7 telemetry JSON (textarea data-v7-platform-cost-payload, aria-label "v7 platform cost telemetry json")
• Evaluate V7 platform cost (button data-v7-platform-cost-submit, type=submit, data-v7-platform-cost-submit-state) — merges costLevers then POSTs to /v1/admin/studio/observability-dashboards/evaluate-platform-cost, blocks double-submit while pending, and holds a 44 px minimum target
• Result — data-v7-platform-cost-summary, data-v7-platform-metrics, data-v7-cost-levers, data-v7-realm-telemetry, data-v7-payout-distribution, and data-v7-platform-alerts

V7 Creator Analytics (form)#

• Creator realm (select data-v7-creator-realm-select, aria-label "creator analytics realm") — realm options from the catalog fixture
• Creator analytics JSON (textarea data-v7-creator-analytics-payload, aria-label "v7 creator analytics json")
• Evaluate creator analytics (button data-v7-creator-analytics-submit, type=submit, data-v7-creator-analytics-submit-state) — merges selectedRealmId then POSTs to /v1/admin/studio/observability-dashboards/evaluate-creator-analytics, blocks double-submit while pending, and holds a 44 px minimum target
• Result — data-v7-creator-analytics-summary, data-v7-creator-analytics-metrics, data-v7-creator-realms, data-v7-creator-funnel, data-v7-creator-revenue-breakdown, data-v7-creator-mod-engagement, and data-v7-creator-actions

Footer quick actions#

• Open Experimentation and Feature Flags workspace (data-obs-quick-action="experimentation-feature-flags") → /studio/experimentation-feature-flags
• Back to Metrics and Analytics Instrumentation workspace (data-obs-quick-action="metrics-analytics-instrumentation") → /studio/metrics-analytics-instrumentation
• Back to Resilience and Error UX workspace (data-obs-quick-action="resilience-error-ux") → /studio/resilience-error-ux
• Back to Background Jobs and Progress UX workspace (data-obs-quick-action="background-jobs-progress-ux") → /studio/background-jobs-progress-ux
• Back to Activity and Change Feeds workspace (data-obs-quick-action="activity-change-feeds") → /studio/activity-change-feeds

Data & contracts#

• Reads: GET /v1/admin/studio/observability-dashboards (catalog: alertLevels, fleetStatuses, platformMetricIds, costLeverIds, meshTiers, platformTelemetryFixture, creatorAnalyticsMetricIds, creatorAnalyticsFixture) on mount
• Writes: POST …/observability-dashboards/evaluate (SLO), …/evaluate-platform-cost (platform), …/evaluate-creator-analytics (creator)
• Realtime: none
• Client fetch: buildBffAuthHeaders(), cache: 'no-store', abort-on-unmount; V7 default payloads seeded from @v7/contracts fixtures + the catalog fixtures
• BFF route: apps/oshun/bff/src/routes/admin-studio-observability-dashboards.ts
• Evaluator sources: apps/oshun/bff/src/studio/observability-slo-burn-store.ts for SLO burn and V7 platform/cost telemetry, and apps/oshun/bff/src/studio/creator-analytics-store.ts for V7 creator analytics
• Auth/role check: catalog, SLO, and platform-cost endpoints accept admin:* or admin:studio; creator analytics accepts those admin scopes plus creator:analytics. The page still loads through the admin-scoped catalog, fails closed on 401/403, and the route is signed-in + studio via the proxy gate.
• Telemetry source note: the V7 lanes are seeded from catalog-provided deterministic fixtures and then evaluate the form payload the operator submits; this route does not subscribe to live realm telemetry streams.

E2E coverage#

• Real-dev-infra Playwright: apps/oshun/web/e2e/studio-observability-operational-dashboards.spec.ts
  • Opens the real Next Studio shell, forwards browser observability catalog/evaluator requests to the real local BFF, captures browser auth headers and request bodies, and covers admin, non-admin, and anonymous auth states.
  • Verifies catalog loading/failure/malformed/network states, seeded and edited SLO evaluations, V7 platform cost lever changes, V7 creator realm selection, invalid JSON with zero POSTs, live BFF 400 details, malformed 200 fail-closed parsing, endpoint-network failures, pending-submit lockout for all three lanes, all five quick-action targets, direct BFF auth/schema gates, axe, 44 px controls, and mobile containment.
• Component/unit coverage: apps/oshun/web/src/components/__tests__/StudioObservabilityOperationalDashboardsWorkspace.test.tsx, apps/oshun/web/src/components/__tests__/StudioObservabilityOperationalDashboardsWorkspace.validation.test.tsx
• BFF route tests: apps/oshun/bff/src/__tests__/admin-studio-observability-dashboards-route.test.ts

Cross-references#

• Parent: ../studio-overview.md
• Sibling: studio-metrics-analytics-instrumentation.md, studio-resilience-error-ux.md, studio-performance-budgets.md
• Source: apps/oshun/web/src/components/studio/StudioObservabilityOperationalDashboardsWorkspace.tsx

Open questions / known gaps#

• Confirm where the /v1/admin/studio/observability-dashboards BFF route sources its SLO / platform-cost / creator-analytics evaluators (modules + which admin:* scopes)
• Document whether the V7 platform/creator lanes ever consume live realm telemetry or only the catalog-provided fixtures the form is seeded with