Skip to content

feat(ui): wire analytics dashboards to real observability data — usage, activity, sessions, cost, A/B#59

Merged
dgarson merged 4 commits intoobservability/mainfrom
observability/analytics-ui
Feb 22, 2026
Merged

feat(ui): wire analytics dashboards to real observability data — usage, activity, sessions, cost, A/B#59
dgarson merged 4 commits intoobservability/mainfrom
observability/analytics-ui

Conversation

@dgarson
Copy link
Copy Markdown
Owner

@dgarson dgarson commented Feb 22, 2026

OBS-05: Analytics UI Wire-up

Wires the OpenClaw analytics/observability UI views to real data sources.

What changed

1. Refactored Analytics page (/analytics)

  • Switched from basic usage.status to rich sessions.usage API
  • Now shows: tokens in/out per model, total cost, session count, tool calls, latency stats (avg/p95/max)
  • Model cost breakdown with progress bars
  • Top tools widget
  • Message counts (user/assistant/errors)
  • Daily usage + cost breakdown charts (Recharts)
  • Auto-refresh every 30s
  • Sub-navigation links to new views

2. Cost Analysis view (/analytics/cost)

  • Date range picker (7d/30d/90d presets)
  • Cost summary: total, input, output, cache savings
  • Horizontal bar chart: top 10 models by cost
  • Pie chart: provider cost breakdown
  • Full model comparison table with % bars
  • Agent cost breakdown table
  • Channel cost breakdown
  • Auto-refresh every 60s

3. Agent Activity Dashboard (/analytics/activity)

  • Live gateway WebSocket event feed
  • Stat cards: active sessions, tool calls, messages, errors (today)
  • Event type filtering (message, tool_call, session_start, error, etc.)
  • Pause/resume/clear controls
  • Polls sessions.usage every 30s for aggregate stats

4. Session Replay / Debug Timeline (/analytics/sessions/:id)

  • Fetches sessions.usage.logs for chronological event list
  • Session summary: agent, model, tokens, cost, duration
  • Timeline with per-event: role badges, tool name badges, content preview
  • Expandable long content
  • Usage (tokens/cost) per event
  • Jaeger trace links when traceId available
  • Message count summary

5. A/B Experiment Dashboard (/analytics/experiments)

  • Attempts experiments.list gateway method
  • Graceful fallback "Coming Soon" with feature description when not available
  • When available: shows active/completed experiments with variant distribution bars and metric comparison
  • Statistical significance badges

New/modified files

Frontend (apps/web)

  • app/(main)/analytics/page.tsx — refactored to sessions.usage API
  • app/(main)/analytics/layout.tsx — sub-layout for analytics section
  • app/(main)/analytics/cost/page.tsx — new
  • app/(main)/analytics/activity/page.tsx — new
  • app/(main)/analytics/experiments/page.tsx — new
  • app/(main)/analytics/sessions/[id]/page.tsx — new
  • lib/gateway/types.ts — added rich usage types (SessionCostTotals, SessionsUsageResult, SessionLogEntry, Experiment types)
  • components/charts/usage-chart.tsx — fixed cost formatting (USD not cents)
  • components/charts/model-cost-chart.tsx — new horizontal bar chart component

API routes used

  • sessions.usage (existing) — main data source for all views
  • sessions.usage.logs (existing) — session replay timeline
  • experiments.list (future, from OBS-04) — graceful degradation when unavailable

No new gateway routes needed

All views wire to existing gateway WS methods. The rich sessions.usage API already provides byModel, byProvider, byAgent, byChannel, daily breakdowns, tool usage, latency stats, and message counts.

Target: observability/main

@dgarson dgarson merged commit d41ea13 into observability/main Feb 22, 2026
2 of 9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant