Skip to content

feat(v1.2): Real-Time Observability Dashboard#12

Merged
Steffen025 merged 3 commits intomainfrom
feature/v1.2-observability-dashboard
Feb 4, 2026
Merged

feat(v1.2): Real-Time Observability Dashboard#12
Steffen025 merged 3 commits intomainfrom
feature/v1.2-observability-dashboard

Conversation

@Steffen025
Copy link
Copy Markdown
Owner

Summary

Complete monitoring infrastructure for PAI-OpenCode with real-time event streaming, SQLite persistence, and a Vue 3 dashboard.

What's New

Observability Server (:8889)

  • Bun HTTP server with REST API and SSE streaming
  • SQLite database with 30-day retention
  • 14 event types captured across all plugin hooks

Vue 3 Dashboard

  • Dashboard: Real-time stats + live event stream
  • Events: Searchable/filterable browser with pagination
  • Sessions: Expandable session viewer
  • GitHub Dark theme (#0d1117)

Plugin Integration

  • New observability-emitter.ts handler
  • Fire-and-forget pattern (1s timeout, non-blocking)
  • +82 lines in pai-unified.ts

API Endpoints

Endpoint Method Purpose
/health GET Health check
/events POST Event ingestion
/api/events GET Query events
/api/events/stream GET SSE real-time
/api/sessions GET Query sessions
/api/stats GET Statistics

Testing

  • ✅ Server starts and responds to health checks
  • ✅ Event ingestion works
  • ✅ SQLite persistence works
  • ✅ Stats aggregation works
  • ✅ Dashboard builds successfully

Files Changed

.opencode/observability-server/     # NEW - Server + Dashboard
.opencode/plugins/handlers/observability-emitter.ts  # NEW
.opencode/plugins/pai-unified.ts    # +82 lines
docs/specs/OBSERVABILITY-SERVER-SPEC.md  # NEW
CHANGELOG.md                        # Updated

Steffen Zellmer added 3 commits February 5, 2026 00:08
Phase 1 of Observability Dashboard implementation:

Server Infrastructure:
- Bun HTTP server on port 8889 with SQLite persistence
- REST API: /api/events, /api/sessions, /api/stats
- SSE streaming at /api/events/stream for real-time updates
- Basic HTML dashboard at root with live event display

Plugin Integration:
- observability-emitter.ts handler with 14 event types
- Fire-and-forget pattern (1s timeout, fail silently)
- Integrated into pai-unified.ts across all hooks

Event Types Captured:
- Session lifecycle (start, end)
- Tool executions and security blocks
- User/assistant messages
- Ratings (explicit and implicit)
- Agent spawn/complete
- Voice notifications, learning captures, ISC validation

Tested and verified all endpoints working correctly.
Complete Vue 3 + Vite + Tailwind CSS dashboard:

Pages:
- Dashboard: Real-time stats cards + live event stream
- Events: Searchable/filterable event browser with pagination
- Sessions: Session list with expandable event details

Components:
- StatsCards: Auto-refreshing statistics (30s interval)
- EventStream: SSE real-time feed with pause/resume
- EventList: Paginated events with type filter
- SessionList: Expandable session viewer

Features:
- GitHub Dark theme (#0d1117 background)
- TypeScript throughout with full API typing
- Vue Router for navigation
- Real-time SSE connection with status indicator
- Color-coded event types
- Responsive design

Tech Stack:
- Vue 3.4 (Composition API)
- Vite 5.0
- Tailwind CSS 3.4
- TypeScript 5.3
@Steffen025 Steffen025 merged commit fa61290 into main Feb 4, 2026
@Steffen025 Steffen025 deleted the feature/v1.2-observability-dashboard branch February 4, 2026 23:46
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