Dashboard

[augusto-noxtec]

Pull Request

📋 Description

A clear and concise description of what this PR does and why it's needed.

🎯 AIOX Story Reference

Story ID:
Story File:
Sprint:

Acceptance Criteria Addressed

• AC ID: Description

🔗 Related Issue

Closes #(issue number)

📦 Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📚 Documentation update
• 🔧 Refactoring (no functional changes)
• ⚡ Performance improvement
• 🧪 Test update

🎯 Scope

• Core framework (aiox-core/)
• Squad (squads/)
• Tools (tools/)
• Documentation (docs/)
• CI/CD (.github/)
• Other: ________________

📝 Changes Made

• Change 1
• Change 2
• Change 3

🧪 Testing

• Added tests for new functionality
• All existing tests pass
• Manual testing completed
• Tested on multiple platforms (if applicable)

Test Results

# Paste test results here
npm test
# Results: ...

📸 Screenshots (if applicable)

Add screenshots to help explain your changes.

✅ Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have updated the documentation accordingly
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published

🔒 Security

• I have reviewed my code for security vulnerabilities
• I have not introduced any new security issues
• I have checked for sensitive data exposure

🐰 CodeRabbit Review

• No CRITICAL issues found
• No HIGH severity issues blocking merge
• All CodeRabbit suggestions addressed or documented

📊 Quality Gates

Check	Status
Lint	⏳ Pending
TypeCheck	⏳ Pending
Tests	⏳ Pending
Coverage	⏳ Pending
CodeRabbit	⏳ Pending

📖 Documentation

• Updated README.md (if needed)
• Updated CHANGELOG.md
• Updated API documentation (if applicable)
• Added code comments (if applicable)

👥 Reviewers

Tag relevant reviewers:

• @SynkraAI (PO - required for squad changes)

🚀 Deployment Notes

Any special deployment considerations or migration steps needed?

---

Note: For expansion-pack related PRs, Product Owner (PO) approval is required before merge.

Summary by CodeRabbit

• New Features

  • Introduced a Visual Observer dashboard for real-time monitoring of agent activity, pipeline execution stages, active terminals, and system events with WebSocket-based live updates and client-side filtering.

• Chores

  • Updated project configuration and build metadata.
  • Extended linting rules to exclude additional project areas.

[vercel]

@claude is attempting to deploy a commit to the Pedro Valério Lopez's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f947b6a8-f239-4611-a636-b29e3da8de94

📥 Commits

Reviewing files that changed from the base of the PR and between f74e3e7 and d37e93b.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (7)

• .aiox-core/data/entity-registry.yaml
• .aiox-core/install-manifest.yaml
• .synapse/.gitignore
• eslint.config.js
• observer/dashboard.html
• observer/event-store.js
• observer/server.js

---

Walkthrough

This PR introduces an Observer dashboard system to AIOX, adding a browser-based visualization for agent state and pipeline progress. The implementation includes a static HTML dashboard with WebSocket client, a backend event store with circular buffering and state management, and an HTTP/WebSocket server for real-time streaming. Configuration files are updated to exclude observer resources from linting and track updated build artifacts.

Changes

Cohort / File(s)	Summary
Configuration & Metadata .aiox-core/install-manifest.yaml, eslint.config.js, .synapse/.gitignore	Updated build manifest timestamps and artifact hashes; added observer/** to ESLint ignore patterns; added new .gitignore to exclude Synapse runtime directories (sessions/, cache/).
Observer Dashboard UI observer/dashboard.html	New static HTML dashboard page with embedded CSS and JavaScript. Provides multi-panel UI for active agent, pipeline progress stages, active terminals, event log with type filtering, and metrics display. Establishes WebSocket connection to backend with reconnection logic and renders real-time state updates.
Observer Backend observer/event-store.js, observer/server.js	Event store module (event-store.js) implements circular-buffer in-memory store with event validation, state derivation, metrics tracking (per-type counts, rolling rate calculation), and session/pipeline/agent context extraction. Server module (server.js) runs HTTP API with WebSocket support, handles RFC 6455 WebSocket handshake and frames, routes POST/GET endpoints for event submission and status retrieval, watches external bob-status file, and broadcasts state changes to connected clients.

Sequence Diagram

sequenceDiagram
    participant Browser as Browser Client
    participant Server as WebSocket Server
    participant Store as Event Store
    participant File as bob-status.json

    Browser->>Server: Establish WebSocket connection
    Server->>Store: Get current state
    Store-->>Server: Return state snapshot + recent events
    Server-->>Browser: Send init message {state, recentEvents}
    Browser->>Browser: Initialize UI with state

    loop Event Streaming
        alt HTTP POST /events
            Browser->>Server: POST event JSON
            Server->>Store: addEvent(event)
            Store->>Store: Update metrics & derived state
        else File System Change
            File->>Server: bob-status.json updated
            Server->>Store: setBobStatus(status)
            Store->>Store: Update pipeline & agent info
        end
        
        Server->>Browser: Broadcast message {type, data, timestamp}
        Browser->>Browser: Process message & update UI
    end

    Browser->>Server: Request /status
    Server->>Store: getState()
    Store-->>Server: Return current state
    Server-->>Browser: JSON response

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can make CodeRabbit's review stricter and more nitpicky using the `assertive` profile, if that's what you prefer.

Change the reviews.profile setting to assertive to make CodeRabbit's nitpick more issues in your PRs.

[github-actions]

Welcome to aiox-core! Thanks for your first pull request.

What happens next?

1. Automated checks will run on your PR
2. A maintainer will review your changes
3. Once approved, we'll merge your contribution!

PR Checklist:

• Tests pass (npm test)
• Linting passes (npm run lint)
• Commit messages follow Conventional Commits

Thanks for contributing!