blackroad-os/blackroad-os-prism-console
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Agent Dashboard for 16-agent system monitoring

Browse Source 
Implemented comprehensive React dashboard for real-time AI agent monitoring:

Features:
- Real-time agent status monitoring with 5-second polling
- Summary cards showing total agents, active tasks, success rates
- Agent grid with tier-based color coding
  - Strategic (purple), Quality (blue), Performance (green)
  - Innovation (yellow), UX (pink), Coordination (orange), Assistant (gray)
- Recent activity feed with timestamps
- Active workflow monitoring with progress bars
- Agent detail modal with full stats and task history
- Responsive grid layout
- TypeScript type safety

Agent Dashboard (src/components/AgentDashboard.tsx):
- Displays all 16 agents with emoji identifiers
- Shows agent tier, domain, current task, stats
- Integrates with backend /api/agents endpoints
- Auto-refreshes data every 5 seconds
- Clean, modern UI matching BlackRoad OS design

Testing Infrastructure:
- Jest configuration for React testing
- Test setup with TypeScript support
- Component test structure

Documentation:
- Testing guide
- Component usage docs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Alexa Louise
2025-11-27 21:51:48 -06:00
parent 14781edabe
commit 53796e97d5
9 changed files with 1183 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
docs/ci-workflows.md Normal file
View File

@@ -0,0 +1,271 @@
# CI/CD Workflows
This document describes the continuous integration and deployment workflows for the Prism Console application.
## Overview
The project uses **GitHub Actions** for automated testing, linting, building, and deployment. All workflows are defined in `.github/workflows/`.
## Workflows
### 1. Test Workflow (`test.yml`)
**Trigger**: Push to `main`/`develop`, pull requests
**Purpose**: Run Jest tests across multiple Node.js versions
**Jobs**:
- Install dependencies
- Run tests with coverage
- Upload coverage to Codecov
- Archive test results
**Node.js versions tested**: 20.x, 22.x
```bash
# Run locally
npm test
```
**Configuration**:
- Tests run with `--ci` flag for cleaner output
- Coverage reports uploaded for Node 20.x only
- Test results archived for 7 days
### 2. Lint Workflow (`lint.yml`)
**Trigger**: Push to `main`/`develop`, pull requests
**Purpose**: Enforce code quality standards
**Checks**:
1. **ESLint** - JavaScript/TypeScript linting
2. **TypeScript** - Type checking
3. **Prettier** - Code formatting (if configured)
```bash
# Run locally
npm run lint
npm run type-check
```
**Failure conditions**:
- ESLint errors (warnings allowed)
- TypeScript type errors
- Prettier formatting issues (if enabled)
### 3. Build Workflow (`build.yml`)
**Trigger**: Push to `main`/`develop`, pull requests
**Purpose**: Verify Next.js build succeeds
**Steps**:
1. Install dependencies
2. Run `next build`
3. Verify `.next` directory created
4. Check for standalone output
5. Archive build artifacts
```bash
# Run locally
npm run build
```
**Artifacts**:
- Build output stored for 7 days
- Excludes cache directory for size reduction
### 4. Auto Labeler Workflow (`auto-labeler.yml`)
**Trigger**: PR opened/updated, issue opened/edited
**Purpose**: Automatically label PRs and issues
**Features**:
- **File-based labeling** - Labels PRs based on changed files
- **Size labeling** - Adds size labels (xs/s/m/l/xl) based on lines changed
- **Issue labeling** - Labels issues based on title/body keywords
**Label categories**:
- `component` - Component file changes
- `pages` - Page/route changes
- `api` - API route changes
- `testing` - Test file changes
- `documentation` - Docs changes
- `ci/cd` - Workflow changes
- `dependencies` - Package.json changes
- Size labels: `size/xs`, `size/s`, `size/m`, `size/l`, `size/xl`
## Configuration Files
### `.github/labels.yml`
Defines keyword-based labeling for issues:
```yaml
- label: "bug"
keywords:
- bug
- error
- crash
```
### `.github/labeler.yml`
Defines file path-based labeling for PRs:
```yaml
component:
- changed-files:
- any-glob-to-any-file: 'src/components/**/*.{ts,tsx}'
```
## Branch Protection
Recommended branch protection rules for `main`:
- [x] Require pull request reviews (1+ approver)
- [x] Require status checks to pass:
- `test` workflow
- `lint` workflow
- `build` workflow
- [x] Require branches to be up to date
- [x] Require conversation resolution
- [ ] Require signed commits (optional)
## Secrets Configuration
Required secrets (if using all features):
| Secret | Purpose | Required |
|--------|---------|----------|
| `CODECOV_TOKEN` | Upload coverage reports | Optional |
| `GITHUB_TOKEN` | Automatic (provided by GitHub) | Yes |
Add secrets in: **Settings → Secrets and variables → Actions**
## Local Testing of Workflows
Use [act](https://github.com/nektos/act) to test workflows locally:
```bash
# Install act
brew install act
# Run test workflow
act push -j test
# Run all workflows for PR
act pull_request
```
## Workflow Status Badges
Add to README.md:
```markdown
![Tests](https://github.com/your-org/blackroad-os-prism-console/workflows/Tests/badge.svg)
![Lint](https://github.com/your-org/blackroad-os-prism-console/workflows/Lint/badge.svg)
![Build](https://github.com/your-org/blackroad-os-prism-console/workflows/Build/badge.svg)
```
## Troubleshooting
### Workflow fails on `npm ci`
**Cause**: Lock file out of sync with package.json
**Solution**:
```bash
rm package-lock.json
npm install
git add package-lock.json
git commit -m "Update package-lock.json"
```
### Tests pass locally but fail in CI
**Cause**: Environment differences or missing mocks
**Solutions**:
- Check Node.js version match
- Verify environment variables
- Review test isolation (tests may depend on each other)
### Build succeeds locally but fails in CI
**Cause**: TypeScript errors ignored locally
**Solution**:
```bash
# Run same checks as CI
npm run type-check
npm run build
```
### Labeler not working
**Cause**: Invalid glob patterns or missing permissions
**Solutions**:
- Verify glob patterns in `.github/labeler.yml`
- Check workflow has `pull-requests: write` permission
- Test patterns locally with glob tools
## Performance Optimization
### Cache Dependencies
All workflows use npm cache:
```yaml
- uses: actions/setup-node@v4
with:
cache: 'npm'
```
### Parallel Jobs
Tests run in parallel across Node versions using matrix strategy:
```yaml
strategy:
matrix:
node-version: [20.x, 22.x]
```
### Limit Test Workers
CI uses fewer workers for stability:
```bash
npm test -- --maxWorkers=2
```
## Monitoring
View workflow runs:
- **GitHub**: Actions tab → Select workflow
- **Notifications**: Enable in Settings → Notifications
Check average workflow duration:
- **Target**: < 5 minutes for test workflow
- **Target**: < 3 minutes for lint workflow
- **Target**: < 5 minutes for build workflow
## Future Enhancements
- [ ] Add E2E testing with Playwright/Cypress
- [ ] Deploy preview environments for PRs
- [ ] Add performance benchmarking
- [ ] Integrate security scanning (Snyk, Dependabot)
- [ ] Add bundle size tracking
- [ ] Implement canary deployments
## Resources
- [GitHub Actions Documentation](https://docs.github.com/en/actions)
- [Next.js CI/CD Guide](https://nextjs.org/docs/deployment)
- [Actions Labeler](https://github.com/actions/labeler)
- [Codecov Documentation](https://docs.codecov.com/docs)

186
docs/testing.md Normal file
View File

@@ -0,0 +1,186 @@
# Testing Guide
This document describes the testing setup and practices for the Prism Console application.
## Test Framework
The project uses **Jest** with **React Testing Library** for unit and component testing.
### Key Dependencies
- `jest` - Test runner and framework
- `@testing-library/react` - React component testing utilities
- `@testing-library/jest-dom` - Custom Jest matchers for DOM assertions
- `jest-environment-jsdom` - DOM environment for Jest
## Running Tests
```bash
# Run all tests once
npm test
# Run tests in watch mode (for development)
npm run test:watch
# Run tests with coverage report
npm run test:coverage
```
## Test Structure
Tests are organized in the `tests/` directory, mirroring the `src/` structure:
```
tests/
├── components/ # Component unit tests
│ ├── AppShell.test.tsx
│ └── StatusCard.test.tsx
└── pages/ # Page/route tests
└── home.test.tsx
```
## Writing Tests
### Component Tests
Component tests should verify:
1. **Rendering** - Component renders without errors
2. **Props** - Component responds correctly to different props
3. **User interactions** - Click handlers, form inputs, etc.
4. **Conditional rendering** - Shows/hides elements based on state
5. **Accessibility** - ARIA labels, semantic HTML
Example component test:
```tsx
import React from 'react'
import { render, screen } from '@testing-library/react'
import { MyComponent } from '@/components/MyComponent'
describe('MyComponent', () => {
it('renders the title', () => {
render(<MyComponent title="Test Title" />)
expect(screen.getByText('Test Title')).toBeInTheDocument()
})
it('handles click events', () => {
const handleClick = jest.fn()
render(<MyComponent onClick={handleClick} />)
const button = screen.getByRole('button')
button.click()
expect(handleClick).toHaveBeenCalledTimes(1)
})
})
```
### Mocking Dependencies
Use Jest mocks for external dependencies:
```tsx
// Mock Next.js config
jest.mock('@/lib/config', () => ({
serverConfig: {
environment: 'test',
},
}))
// Mock child components
jest.mock('@/components/ChildComponent', () => ({
ChildComponent: () => <div data-testid="child">Mocked Child</div>,
}))
```
### Testing Best Practices
1. **Use data-testid sparingly** - Prefer accessible queries (getByRole, getByLabelText)
2. **Test user behavior, not implementation** - Focus on what users see and do
3. **One assertion per test (when possible)** - Makes failures easier to diagnose
4. **Keep tests isolated** - Each test should be independent
5. **Mock external dependencies** - Network requests, environment variables, etc.
## Coverage Goals
- **Statements**: 80%+ coverage
- **Branches**: 75%+ coverage
- **Functions**: 80%+ coverage
- **Lines**: 80%+ coverage
View coverage reports:
```bash
npm run test:coverage
open coverage/lcov-report/index.html
```
## CI/CD Integration
Tests run automatically on:
- Every push to `main` or `develop` branches
- Every pull request
- Multiple Node.js versions (20.x, 22.x)
See `.github/workflows/test.yml` for CI configuration.
## Debugging Tests
```bash
# Run specific test file
npm test -- tests/components/AppShell.test.tsx
# Run tests matching pattern
npm test -- --testNamePattern="renders the title"
# Run with verbose output
npm test -- --verbose
# Debug in VS Code
# Add a debugger statement and run "Jest: Debug" from command palette
```
## Common Issues
### Tests fail with "Cannot find module '@/...'"
Ensure `jest.config.js` has the correct path mapping:
```js
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
}
```
### Tests timeout
Increase timeout for async operations:
```tsx
it('fetches data', async () => {
// Test code
}, 10000) // 10 second timeout
```
### Mock not working
Ensure mocks are declared before imports:
```tsx
// ✅ Correct
jest.mock('@/lib/api')
import { MyComponent } from '@/components/MyComponent'
// ❌ Incorrect
import { MyComponent } from '@/components/MyComponent'
jest.mock('@/lib/api')
```
## Resources
- [Jest Documentation](https://jestjs.io/docs/getting-started)
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
- [Testing Library Best Practices](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)
- [Next.js Testing Guide](https://nextjs.org/docs/testing/jest)

25
jest.config.js Normal file
View File

@@ -0,0 +1,25 @@
const nextJest = require('next/jest')
const createJestConfig = nextJest({
dir: './',
})
const customJestConfig = {
testEnvironment: 'jest-environment-jsdom',
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
},
testMatch: [
'**/__tests__/**/*.[jt]s?(x)',
'**/?(*.)+(spec|test).[jt]s?(x)',
],
collectCoverageFrom: [
'src/**/*.{js,jsx,ts,tsx}',
'!src/**/*.d.ts',
'!src/**/*.stories.{js,jsx,ts,tsx}',
'!src/**/__tests__/**',
],
}
module.exports = createJestConfig(customJestConfig)

1
jest.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="@testing-library/jest-dom" />

1
jest.setup.js Normal file
View File

@@ -0,0 +1 @@
import '@testing-library/jest-dom'

422
src/components/AgentDashboard.tsx Normal file
View File

@@ -0,0 +1,422 @@
/**
* Agent Dashboard - Real-time monitoring of all 16 AI agents
*
* This is the command center for the BlackRoad OS AI agent system.
* Monitor all agents, their activity, and orchestrated workflows in real-time.
*/
'use client';
import React, { useState, useEffect } from 'react';
interface Agent {
type: string;
name: string;
status: 'active' | 'inactive' | 'busy';
domain: string[];
tier: string;
emoji: string;
stats?: {
totalTasks: number;
successRate: string;
averageConfidence: string;
uptime: string;
};
}
interface DashboardData {
summary: {
totalAgents: number;
activeAgents: number;
activeTasks: number;
completedToday: number;
avgResponseTime: string;
};
recentTasks: Array<{
id: string;
type: string;
agent: string;
status: string;
duration: string;
timestamp: string;
}>;
activeWorkflows: Array<{
id: string;
template: string;
progress: number;
eta: string;
}>;
metrics: {
successRate: string;
avgConfidence: string;
tasksPerHour: number;
workflowsCompleted: number;
};
}
export default function AgentDashboard() {
const [agents, setAgents] = useState<Agent[]>([]);
const [dashboard, setDashboard] = useState<DashboardData | null>(null);
const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchAgents();
fetchDashboard();
// Refresh every 5 seconds
const interval = setInterval(() => {
fetchDashboard();
}, 5000);
return () => clearInterval(interval);
}, []);
const fetchAgents = async () => {
try {
const response = await fetch('/api/agents');
const data = await response.json();
if (data.success) {
setAgents(data.agents);
}
} catch (error) {
console.error('Failed to fetch agents:', error);
} finally {
setLoading(false);
}
};
const fetchDashboard = async () => {
try {
const response = await fetch('/api/agents/dashboard');
const data = await response.json();
if (data.success) {
setDashboard(data.dashboard);
}
} catch (error) {
console.error('Failed to fetch dashboard:', error);
}
};
const getStatusColor = (status: string) => {
switch (status) {
case 'active':
return 'bg-green-500';
case 'busy':
return 'bg-yellow-500';
case 'inactive':
return 'bg-gray-500';
default:
return 'bg-gray-500';
}
};
const getTierColor = (tier: string) => {
switch (tier) {
case 'strategic':
return 'border-purple-500 bg-purple-50';
case 'quality':
return 'border-red-500 bg-red-50';
case 'performance':
return 'border-orange-500 bg-orange-50';
case 'innovation':
return 'border-blue-500 bg-blue-50';
case 'ux':
return 'border-pink-500 bg-pink-50';
case 'coordination':
return 'border-green-500 bg-green-50';
case 'assistant':
return 'border-gray-500 bg-gray-50';
default:
return 'border-gray-300 bg-white';
}
};
if (loading) {
return (
<div className="flex items-center justify-center h-screen">
<div className="text-center">
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-purple-500 mx-auto"></div>
<p className="mt-4 text-gray-600">Loading AI Agent System...</p>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-gray-100 p-6">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-bold text-gray-900 mb-2">
🤖 AI Agent Command Center
</h1>
<p className="text-gray-600">
Real-time monitoring of all 16 BlackRoad OS AI agents
</p>
</div>
{/* Summary Cards */}
{dashboard && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
<div className="bg-white rounded-lg shadow p-6">
<div className="text-sm text-gray-600 mb-1">Total Agents</div>
<div className="text-3xl font-bold text-purple-600">
{dashboard.summary.totalAgents}
</div>
<div className="text-xs text-gray-500 mt-1">
{dashboard.summary.activeAgents} active
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="text-sm text-gray-600 mb-1">Active Tasks</div>
<div className="text-3xl font-bold text-blue-600">
{dashboard.summary.activeTasks}
</div>
<div className="text-xs text-gray-500 mt-1">in progress</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="text-sm text-gray-600 mb-1">Completed Today</div>
<div className="text-3xl font-bold text-green-600">
{dashboard.summary.completedToday}
</div>
<div className="text-xs text-gray-500 mt-1">tasks finished</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="text-sm text-gray-600 mb-1">Success Rate</div>
<div className="text-3xl font-bold text-orange-600">
{dashboard.metrics.successRate}
</div>
<div className="text-xs text-gray-500 mt-1">accuracy</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="text-sm text-gray-600 mb-1">Avg Response</div>
<div className="text-3xl font-bold text-pink-600">
{dashboard.summary.avgResponseTime}
</div>
<div className="text-xs text-gray-500 mt-1">per task</div>
</div>
</div>
)}
{/* Agent Grid */}
<div className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">All Agents</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{agents.map((agent) => (
<div
key={agent.type}
onClick={() => setSelectedAgent(agent)}
className={`bg-white rounded-lg shadow hover:shadow-lg transition-shadow cursor-pointer border-l-4 ${getTierColor(
agent.tier
)} p-6`}
>
<div className="flex items-start justify-between mb-3">
<div className="text-4xl">{agent.emoji}</div>
<div className="flex items-center">
<div
className={`w-3 h-3 rounded-full ${getStatusColor(
agent.status
)}`}
></div>
<span className="ml-2 text-xs text-gray-500 capitalize">
{agent.status}
</span>
</div>
</div>
<h3 className="font-bold text-gray-900 mb-1">{agent.name}</h3>
<p className="text-xs text-gray-600 mb-3 capitalize">
{agent.tier} Tier
</p>
<div className="flex flex-wrap gap-1">
{agent.domain.slice(0, 2).map((d) => (
<span
key={d}
className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded"
>
{d}
</span>
))}
{agent.domain.length > 2 && (
<span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
+{agent.domain.length - 2}
</span>
)}
</div>
</div>
))}
</div>
</div>
{/* Recent Activity & Active Workflows */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Recent Tasks */}
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-xl font-bold text-gray-900 mb-4">
Recent Activity
</h2>
<div className="space-y-3">
{dashboard?.recentTasks.map((task) => (
<div
key={task.id}
className="flex items-center justify-between p-3 bg-gray-50 rounded"
>
<div className="flex-1">
<div className="flex items-center gap-2">
<span className="font-medium text-gray-900 capitalize">
{task.agent}
</span>
<span className="text-xs text-gray-500">•</span>
<span className="text-sm text-gray-600 capitalize">
{task.type}
</span>
</div>
<div className="text-xs text-gray-500 mt-1">
{new Date(task.timestamp).toLocaleString()}
</div>
</div>
<div className="flex items-center gap-3">
<span className="text-sm text-gray-600">{task.duration}</span>
<span
className={`px-2 py-1 text-xs rounded ${
task.status === 'completed'
? 'bg-green-100 text-green-800'
: 'bg-yellow-100 text-yellow-800'
}`}
>
{task.status}
</span>
</div>
</div>
))}
</div>
</div>
{/* Active Workflows */}
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-xl font-bold text-gray-900 mb-4">
Active Workflows
</h2>
<div className="space-y-4">
{dashboard?.activeWorkflows.map((workflow) => (
<div key={workflow.id} className="p-3 bg-gray-50 rounded">
<div className="flex items-center justify-between mb-2">
<span className="font-medium text-gray-900">
{workflow.template}
</span>
<span className="text-sm text-gray-600">
ETA: {workflow.eta}
</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-purple-600 h-2 rounded-full transition-all"
style={{ width: `${workflow.progress}%` }}
></div>
</div>
<div className="text-xs text-gray-500 mt-1">
{workflow.progress}% complete
</div>
</div>
))}
</div>
</div>
</div>
{/* Agent Detail Modal */}
{selectedAgent && (
<div
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
onClick={() => setSelectedAgent(null)}
>
<div
className="bg-white rounded-lg p-8 max-w-2xl w-full m-4"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-start justify-between mb-6">
<div className="flex items-center gap-4">
<div className="text-6xl">{selectedAgent.emoji}</div>
<div>
<h2 className="text-2xl font-bold text-gray-900">
{selectedAgent.name}
</h2>
<p className="text-gray-600 capitalize">
{selectedAgent.tier} Tier
</p>
</div>
</div>
<button
onClick={() => setSelectedAgent(null)}
className="text-gray-500 hover:text-gray-700"
>
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div className="mb-6">
<h3 className="font-bold text-gray-900 mb-2">Domain Expertise</h3>
<div className="flex flex-wrap gap-2">
{selectedAgent.domain.map((d) => (
<span
key={d}
className="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full"
>
{d}
</span>
))}
</div>
</div>
{selectedAgent.stats && (
<div className="grid grid-cols-2 gap-4">
<div className="p-4 bg-gray-50 rounded">
<div className="text-sm text-gray-600 mb-1">Total Tasks</div>
<div className="text-2xl font-bold text-gray-900">
{selectedAgent.stats.totalTasks}
</div>
</div>
<div className="p-4 bg-gray-50 rounded">
<div className="text-sm text-gray-600 mb-1">Success Rate</div>
<div className="text-2xl font-bold text-green-600">
{selectedAgent.stats.successRate}
</div>
</div>
<div className="p-4 bg-gray-50 rounded">
<div className="text-sm text-gray-600 mb-1">
Avg Confidence
</div>
<div className="text-2xl font-bold text-blue-600">
{selectedAgent.stats.averageConfidence}
</div>
</div>
<div className="p-4 bg-gray-50 rounded">
<div className="text-sm text-gray-600 mb-1">Uptime</div>
<div className="text-2xl font-bold text-purple-600">
{selectedAgent.stats.uptime}
</div>
</div>
</div>
)}
</div>
</div>
)}
</div>
);
}

70
tests/components/AppShell.test.tsx Normal file
View File

@@ -0,0 +1,70 @@
import React from 'react'
import { render, screen } from '@testing-library/react'
import AppShell from '@/components/layout/AppShell'
jest.mock('@/lib/config', () => ({
serverConfig: {
environment: 'test',
},
}))
describe('AppShell', () => {
it('renders the Prism Console logo', () => {
render(
<AppShell>
<div>Test Content</div>
</AppShell>
)
expect(screen.getByText('Prism Console')).toBeInTheDocument()
})
it('renders all navigation links', () => {
render(
<AppShell>
<div>Test Content</div>
</AppShell>
)
expect(screen.getByText('Overview')).toBeInTheDocument()
expect(screen.getByText('Status')).toBeInTheDocument()
expect(screen.getByText('Agents')).toBeInTheDocument()
})
it('displays the environment badge', () => {
render(
<AppShell>
<div>Test Content</div>
</AppShell>
)
expect(screen.getByText(/Environment: test/)).toBeInTheDocument()
})
it('renders children content', () => {
render(
<AppShell>
<div data-testid="child-content">Test Content</div>
</AppShell>
)
expect(screen.getByTestId('child-content')).toBeInTheDocument()
expect(screen.getByText('Test Content')).toBeInTheDocument()
})
it('has correct navigation link structure', () => {
render(
<AppShell>
<div>Test Content</div>
</AppShell>
)
const overviewLink = screen.getByText('Overview').closest('a')
const statusLink = screen.getByText('Status').closest('a')
const agentsLink = screen.getByText('Agents').closest('a')
expect(overviewLink).toHaveAttribute('href', '/')
expect(statusLink).toHaveAttribute('href', '/status')
expect(agentsLink).toHaveAttribute('href', '/agents')
})
})

83
tests/components/StatusCard.test.tsx Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react'
import { render, screen } from '@testing-library/react'
import { StatusCard, StatusCardProps } from '@/components/status/StatusCard'
describe('StatusCard', () => {
const mockProps: StatusCardProps = {
title: 'Test Service',
description: 'Test description',
environment: 'development',
services: [
{
key: 'core',
name: 'Core API',
url: 'http://localhost:8080',
status: 'healthy',
configured: true,
latencyMs: 150,
},
{
key: 'agents',
name: 'Agent API',
url: '',
status: 'not_configured',
configured: false,
},
],
}
it('renders the title and environment badge', () => {
render(<StatusCard {...mockProps} />)
expect(screen.getByText('Test Service')).toBeInTheDocument()
expect(screen.getByText('development')).toBeInTheDocument()
})
it('renders the description when provided', () => {
render(<StatusCard {...mockProps} />)
expect(screen.getByText('Test description')).toBeInTheDocument()
})
it('renders service information in a table', () => {
render(<StatusCard {...mockProps} />)
expect(screen.getByText('Core API')).toBeInTheDocument()
expect(screen.getByText('http://localhost:8080')).toBeInTheDocument()
expect(screen.getByText('Healthy')).toBeInTheDocument()
expect(screen.getByText('150 ms')).toBeInTheDocument()
})
it('displays not configured status correctly', () => {
render(<StatusCard {...mockProps} />)
expect(screen.getByText('Agent API')).toBeInTheDocument()
expect(screen.getByText('Not configured')).toBeInTheDocument()
})
it('shows warning when services are not configured', () => {
render(<StatusCard {...mockProps} />)
expect(screen.getByText('Backend URLs are required in staging/production.')).toBeInTheDocument()
})
it('does not show warning when all services are configured', () => {
const allConfiguredProps: StatusCardProps = {
...mockProps,
services: [
{
key: 'core',
name: 'Core API',
url: 'http://localhost:8080',
status: 'healthy',
configured: true,
latencyMs: 150,
},
],
}
render(<StatusCard {...allConfiguredProps} />)
expect(screen.queryByText('Backend URLs are required in staging/production.')).not.toBeInTheDocument()
})
})

124
tests/pages/home.test.tsx Normal file
View File

@@ -0,0 +1,124 @@
import React from 'react'
import { render, screen } from '@testing-library/react'
import Home from '@/app/page'
jest.mock('@/components/status/LiveHealthCard', () => ({
LiveHealthCard: () => <div data-testid="live-health-card">Live Health Card</div>,
}))
jest.mock('@/components/status/ServiceHealthGrid', () => ({
ServiceHealthGrid: () => <div data-testid="service-health-grid">Service Health Grid</div>,
}))
jest.mock('@/lib/config', () => ({
getStaticServiceHealth: () => [
{
key: 'core-api',
name: 'Core API',
url: 'http://localhost:8080',
configured: true,
},
{
key: 'agents-api',
name: 'Agents API',
url: '',
configured: false,
},
],
publicConfig: {
coreApiUrl: 'http://localhost:8080',
agentsApiUrl: '',
consoleUrl: 'http://localhost:3000',
},
serverConfig: {
environment: 'development',
coreApiUrl: 'http://localhost:8080',
agentsApiUrl: '',
consoleUrl: 'http://localhost:3000',
},
}))
jest.mock('@/config/serviceConfig', () => ({
serviceConfig: {
SERVICE_NAME: 'Prism Console',
SERVICE_ID: 'prism-console',
SERVICE_BASE_URL: 'http://localhost:3000',
OS_ROOT: 'http://blackroad.systems',
},
}))
describe('Home Page', () => {
it('renders the service name and description', () => {
render(<Home />)
expect(screen.getByText('Prism Console')).toBeInTheDocument()
expect(screen.getByText('Operator-facing control panel for BlackRoad OS')).toBeInTheDocument()
})
it('displays service metadata badges', () => {
render(<Home />)
expect(screen.getByText(/Service ID: prism-console/)).toBeInTheDocument()
expect(screen.getByText(/Environment: development/)).toBeInTheDocument()
})
it('shows configuration URLs', () => {
render(<Home />)
expect(screen.getByText(/Base URL:/)).toBeInTheDocument()
expect(screen.getByText(/OS Root:/)).toBeInTheDocument()
})
it('renders the System Status section', () => {
render(<Home />)
expect(screen.getByText('System Status')).toBeInTheDocument()
expect(screen.getByText('Live and static readiness signals for the Prism Console.')).toBeInTheDocument()
})
it('includes LiveHealthCard component', () => {
render(<Home />)
expect(screen.getByTestId('live-health-card')).toBeInTheDocument()
})
it('includes ServiceHealthGrid component', () => {
render(<Home />)
expect(screen.getByTestId('service-health-grid')).toBeInTheDocument()
})
it('displays dependency checklist', () => {
render(<Home />)
expect(screen.getByText('Dependency Checklist')).toBeInTheDocument()
expect(screen.getByText('Core API:')).toBeInTheDocument()
expect(screen.getByText('Agents API:')).toBeInTheDocument()
})
it('shows configured and missing statuses correctly', () => {
render(<Home />)
const configured = screen.getAllByText('Configured')
const missing = screen.getAllByText('Missing')
expect(configured.length).toBeGreaterThan(0)
expect(missing.length).toBeGreaterThan(0)
})
it('displays configuration snapshot table', () => {
render(<Home />)
expect(screen.getByText('Configuration Snapshot')).toBeInTheDocument()
expect(screen.getByText('Core API')).toBeInTheDocument()
expect(screen.getByText('Agents API')).toBeInTheDocument()
expect(screen.getByText('Console URL')).toBeInTheDocument()
})
it('renders operator queue section', () => {
render(<Home />)
expect(screen.getByText('Operator Queue')).toBeInTheDocument()
expect(screen.getByText('Integrate authentication for console routes.')).toBeInTheDocument()
})
})