feat(bd-3fs): Add CollisionAlert component to web frontend
- Create CollisionAlert.tsx component with real-time collision notifications - Add collision alert types (FileCollision, BeadCollision, TaskCollision, CollisionAlert) to types.ts - Integrate CollisionAlert into App.tsx with WebSocket support - Add CSS styles for collision alert panel with severity grouping - Add header toggle button for collision alerts with unacknowledged count badge Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jeda
parent
0f2b4df36e
commit
08dccf98a2
9 changed files with 1887 additions and 8 deletions
853
package-lock.json
generated
853
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -35,6 +35,9 @@
|
|||
"node": ">=18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^6.9.1",
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"@types/express": "^5.0.6",
|
||||
"@types/node": "^20.11.0",
|
||||
"@types/react": "^19.2.14",
|
||||
|
|
@ -42,6 +45,7 @@
|
|||
"@types/ws": "^8.18.1",
|
||||
"@vitejs/plugin-react": "^5.1.4",
|
||||
"@vitest/coverage-v8": "^4.0.18",
|
||||
"jsdom": "^28.1.0",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"typescript": "^5.3.0",
|
||||
|
|
|
|||
286
src/web/frontend/components/ActivityStream.test.tsx
Normal file
286
src/web/frontend/components/ActivityStream.test.tsx
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
/**
|
||||
* Tests for ActivityStream component
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import ActivityStream from '../src/components/ActivityStream';
|
||||
import { LogEvent } from '../src/types';
|
||||
|
||||
// Mock scroll behavior
|
||||
const mockScrollTo = vi.fn();
|
||||
Object.defineProperty(HTMLElement.prototype, 'scrollTop', {
|
||||
set: mockScrollTo,
|
||||
get: () => 0,
|
||||
});
|
||||
Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
|
||||
get: () => 1000,
|
||||
});
|
||||
|
||||
describe('ActivityStream', () => {
|
||||
const createMockEvent = (overrides: Partial<LogEvent> = {}): LogEvent => ({
|
||||
timestamp: '2026-03-03T12:00:00.000Z',
|
||||
level: 'info',
|
||||
worker: 'claude-code-glm-5-alpha',
|
||||
message: 'Test message',
|
||||
raw: '{"ts":123,"worker":"test","level":"info","msg":"Test message"}',
|
||||
...overrides,
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
mockScrollTo.mockClear();
|
||||
});
|
||||
|
||||
describe('rendering', () => {
|
||||
it('should render with empty events', () => {
|
||||
render(<ActivityStream events={[]} selectedWorker={null} />);
|
||||
|
||||
expect(screen.getByText('All Events')).toBeInTheDocument();
|
||||
expect(screen.getByText('(0)')).toBeInTheDocument();
|
||||
expect(screen.getByText('No events to display')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render event count correctly', () => {
|
||||
const events = [
|
||||
createMockEvent({ message: 'Event 1' }),
|
||||
createMockEvent({ message: 'Event 2' }),
|
||||
createMockEvent({ message: 'Event 3' }),
|
||||
];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
expect(screen.getByText('(3)')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render selected worker in title when provided', () => {
|
||||
render(<ActivityStream events={[]} selectedWorker="alpha" />);
|
||||
|
||||
expect(screen.getByText('Events for alpha')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display event messages', () => {
|
||||
const { container } = render(
|
||||
<ActivityStream
|
||||
events={[
|
||||
createMockEvent({ message: 'First event' }),
|
||||
createMockEvent({ message: 'Second event' }),
|
||||
]}
|
||||
selectedWorker={null}
|
||||
/>
|
||||
);
|
||||
|
||||
// Use container to find event items and check for message content
|
||||
const eventItems = container.querySelectorAll('.event-item');
|
||||
expect(eventItems[0].textContent).toContain('First event');
|
||||
expect(eventItems[1].textContent).toContain('Second event');
|
||||
});
|
||||
|
||||
it('should display tool name when present', () => {
|
||||
const events = [
|
||||
createMockEvent({ message: 'Tool executed', tool: 'Read' }),
|
||||
];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
expect(screen.getByText(/\[Read\] Tool executed/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not display tool prefix when tool is undefined', () => {
|
||||
const events = [
|
||||
createMockEvent({ message: 'No tool event' }),
|
||||
];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
const eventElement = screen.getByText(/No tool event/);
|
||||
expect(eventElement.textContent).toBe('No tool event');
|
||||
});
|
||||
});
|
||||
|
||||
describe('event levels', () => {
|
||||
it('should display info level events', () => {
|
||||
const events = [createMockEvent({ level: 'info' })];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
const levelElement = screen.getByText('info');
|
||||
expect(levelElement).toHaveClass('info');
|
||||
});
|
||||
|
||||
it('should display warn level events', () => {
|
||||
const events = [createMockEvent({ level: 'warn' })];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
const levelElement = screen.getByText('warn');
|
||||
expect(levelElement).toHaveClass('warn');
|
||||
});
|
||||
|
||||
it('should display error level events', () => {
|
||||
const events = [createMockEvent({ level: 'error' })];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
const levelElement = screen.getByText('error');
|
||||
expect(levelElement).toHaveClass('error');
|
||||
});
|
||||
|
||||
it('should display debug level events', () => {
|
||||
const events = [createMockEvent({ level: 'debug' })];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
const levelElement = screen.getByText('debug');
|
||||
expect(levelElement).toHaveClass('debug');
|
||||
});
|
||||
});
|
||||
|
||||
describe('worker display', () => {
|
||||
it('should display truncated worker name when no worker selected', () => {
|
||||
const events = [
|
||||
createMockEvent({ worker: 'claude-code-glm-5-alpha' }),
|
||||
];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
expect(screen.getByText('[alpha]')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should extract last part of hyphenated worker names', () => {
|
||||
const events = [
|
||||
createMockEvent({ worker: 'worker-with-multiple-parts' }),
|
||||
];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
expect(screen.getByText('[parts]')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should hide worker name when a worker is selected', () => {
|
||||
const events = [
|
||||
createMockEvent({ worker: 'claude-code-glm-5-alpha' }),
|
||||
];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker="alpha" />);
|
||||
|
||||
expect(screen.queryByText('[alpha]')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('time formatting', () => {
|
||||
it('should format timestamp to HH:MM:SS', () => {
|
||||
// 2026-03-03T12:34:56.000Z
|
||||
const events = [
|
||||
createMockEvent({ timestamp: '2026-03-03T12:34:56.000Z' }),
|
||||
];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
// Time is formatted in local timezone, so just check the pattern
|
||||
const timeElements = screen.getAllByText(/\d{2}:\d{2}:\d{2}/);
|
||||
expect(timeElements.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('event ordering', () => {
|
||||
it('should render events in order', () => {
|
||||
const { container } = render(
|
||||
<ActivityStream
|
||||
events={[
|
||||
createMockEvent({ message: 'First', timestamp: '2026-03-03T12:00:00.000Z' }),
|
||||
createMockEvent({ message: 'Second', timestamp: '2026-03-03T12:01:00.000Z' }),
|
||||
createMockEvent({ message: 'Third', timestamp: '2026-03-03T12:02:00.000Z' }),
|
||||
]}
|
||||
selectedWorker={null}
|
||||
/>
|
||||
);
|
||||
|
||||
const eventItems = container.querySelectorAll('.event-item');
|
||||
expect(eventItems[0].textContent).toContain('First');
|
||||
expect(eventItems[1].textContent).toContain('Second');
|
||||
expect(eventItems[2].textContent).toContain('Third');
|
||||
});
|
||||
});
|
||||
|
||||
describe('CSS classes', () => {
|
||||
it('should apply activity-stream class to container', () => {
|
||||
const { container } = render(
|
||||
<ActivityStream events={[]} selectedWorker={null} />
|
||||
);
|
||||
|
||||
expect(container.querySelector('.activity-stream')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply event-list class to list container', () => {
|
||||
const { container } = render(
|
||||
<ActivityStream events={[]} selectedWorker={null} />
|
||||
);
|
||||
|
||||
expect(container.querySelector('.event-list')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply event-item class to each event', () => {
|
||||
const events = [
|
||||
createMockEvent({ message: 'Event 1' }),
|
||||
createMockEvent({ message: 'Event 2' }),
|
||||
];
|
||||
|
||||
const { container } = render(
|
||||
<ActivityStream events={events} selectedWorker={null} />
|
||||
);
|
||||
|
||||
const eventItems = container.querySelectorAll('.event-item');
|
||||
expect(eventItems).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('should apply no-events class to empty message', () => {
|
||||
const { container } = render(
|
||||
<ActivityStream events={[]} selectedWorker={null} />
|
||||
);
|
||||
|
||||
expect(container.querySelector('.no-events')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('edge cases', () => {
|
||||
it('should handle single event', () => {
|
||||
const events = [createMockEvent({ message: 'Only event' })];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
expect(screen.getByText('(1)')).toBeInTheDocument();
|
||||
expect(screen.getByText(/Only event/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle many events', () => {
|
||||
const events = Array.from({ length: 100 }, (_, i) =>
|
||||
createMockEvent({ message: `Event ${i}` })
|
||||
);
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
expect(screen.getByText('(100)')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle long messages', () => {
|
||||
const longMessage = 'A'.repeat(500);
|
||||
const events = [createMockEvent({ message: longMessage })];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
expect(screen.getByText(new RegExp(longMessage))).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle special characters in messages', () => {
|
||||
const events = [
|
||||
createMockEvent({ message: 'Message with <special> & "chars"' }),
|
||||
];
|
||||
|
||||
render(<ActivityStream events={events} selectedWorker={null} />);
|
||||
|
||||
expect(screen.getByText(/Message with <special> & "chars"/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
|
@ -1,20 +1,24 @@
|
|||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { LogEvent, WorkerInfo, WebSocketMessage } from './types';
|
||||
import { LogEvent, WorkerInfo, WebSocketMessage, CollisionAlert as CollisionAlertData } from './types';
|
||||
import WorkerGrid from './components/WorkerGrid';
|
||||
import ActivityStream from './components/ActivityStream';
|
||||
import WorkerDetail from './components/WorkerDetail';
|
||||
import CollisionAlert from './components/CollisionAlert';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [workers, setWorkers] = useState<WorkerInfo[]>([]);
|
||||
const [events, setEvents] = useState<LogEvent[]>([]);
|
||||
const [selectedWorker, setSelectedWorker] = useState<string | null>(null);
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [collisionAlerts, setCollisionAlerts] = useState<CollisionAlertData[]>([]);
|
||||
const [showCollisionPanel, setShowCollisionPanel] = useState(false);
|
||||
|
||||
const handleWebSocketMessage = useCallback((message: WebSocketMessage) => {
|
||||
if (message.type === 'init') {
|
||||
const data = message.data as { workers?: WorkerInfo[]; recentEvents?: LogEvent[] };
|
||||
const data = message.data as { workers?: WorkerInfo[]; recentEvents?: LogEvent[]; alerts?: CollisionAlertData[] };
|
||||
if (data.workers) setWorkers(data.workers);
|
||||
if (data.recentEvents) setEvents(data.recentEvents);
|
||||
if (data.alerts) setCollisionAlerts(data.alerts);
|
||||
} else if (message.type === 'event') {
|
||||
const event = message.data as LogEvent;
|
||||
setEvents(prev => [...prev.slice(-199), event]);
|
||||
|
|
@ -42,6 +46,15 @@ const App: React.FC = () => {
|
|||
}];
|
||||
}
|
||||
});
|
||||
} else if (message.type === 'collision-alert') {
|
||||
const alert = message.data as CollisionAlertData;
|
||||
setCollisionAlerts(prev => {
|
||||
// Avoid duplicates
|
||||
if (prev.some(a => a.id === alert.id)) {
|
||||
return prev.map(a => a.id === alert.id ? alert : a);
|
||||
}
|
||||
return [...prev, alert];
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
|
@ -84,13 +97,39 @@ const App: React.FC = () => {
|
|||
? workers.find(w => w.id === selectedWorker)
|
||||
: null;
|
||||
|
||||
const handleAcknowledgeAlert = useCallback((alertId: string) => {
|
||||
setCollisionAlerts(prev =>
|
||||
prev.map(a => a.id === alertId ? { ...a, acknowledged: true } : a)
|
||||
);
|
||||
}, []);
|
||||
|
||||
const handleAcknowledgeAllAlerts = useCallback(() => {
|
||||
setCollisionAlerts(prev =>
|
||||
prev.map(a => ({ ...a, acknowledged: true }))
|
||||
);
|
||||
}, []);
|
||||
|
||||
const unacknowledgedAlertCount = collisionAlerts.filter(a => !a.acknowledged).length;
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<header className="header">
|
||||
<h1>FABRIC</h1>
|
||||
<div className="connection-status">
|
||||
<span className={`status-dot ${connected ? 'connected' : ''}`}></span>
|
||||
{connected ? 'Connected' : 'Disconnected'}
|
||||
<div className="header-actions">
|
||||
{unacknowledgedAlertCount > 0 && (
|
||||
<button
|
||||
className="collision-alert-toggle"
|
||||
onClick={() => setShowCollisionPanel(!showCollisionPanel)}
|
||||
title="View collision alerts"
|
||||
>
|
||||
<span className="collision-alert-icon">!</span>
|
||||
<span className="collision-alert-count">{unacknowledgedAlertCount}</span>
|
||||
</button>
|
||||
)}
|
||||
<div className="connection-status">
|
||||
<span className={`status-dot ${connected ? 'connected' : ''}`}></span>
|
||||
{connected ? 'Connected' : 'Disconnected'}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -113,6 +152,16 @@ const App: React.FC = () => {
|
|||
allWorkerEvents={selectedWorker ? filteredEvents : undefined}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showCollisionPanel && (
|
||||
<CollisionAlert
|
||||
alerts={collisionAlerts}
|
||||
onAcknowledge={handleAcknowledgeAlert}
|
||||
onAcknowledgeAll={handleAcknowledgeAllAlerts}
|
||||
visible={showCollisionPanel}
|
||||
onClose={() => setShowCollisionPanel(false)}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
313
src/web/frontend/src/components/CollisionAlert.tsx
Normal file
313
src/web/frontend/src/components/CollisionAlert.tsx
Normal file
|
|
@ -0,0 +1,313 @@
|
|||
import React, { useState, useMemo } from 'react';
|
||||
import { CollisionAlert as CollisionAlertData } from '../types';
|
||||
|
||||
interface CollisionAlertProps {
|
||||
/** Array of collision alerts to display */
|
||||
alerts: CollisionAlertData[];
|
||||
|
||||
/** Callback when an alert is acknowledged */
|
||||
onAcknowledge?: (alertId: string) => void;
|
||||
|
||||
/** Callback when all alerts are acknowledged */
|
||||
onAcknowledgeAll?: () => void;
|
||||
|
||||
/** Whether the panel is visible */
|
||||
visible?: boolean;
|
||||
|
||||
/** Callback to close the panel */
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* CollisionAlert Component
|
||||
*
|
||||
* Displays collision alerts to users, warning about potential duplicate work
|
||||
* or conflicting operations between workers. Ported from TUI CollisionAlert.ts
|
||||
*/
|
||||
const CollisionAlert: React.FC<CollisionAlertProps> = ({
|
||||
alerts,
|
||||
onAcknowledge,
|
||||
onAcknowledgeAll,
|
||||
visible = true,
|
||||
onClose,
|
||||
}) => {
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
|
||||
// Group alerts by severity
|
||||
const groupedAlerts = useMemo(() => {
|
||||
const critical = alerts.filter(a => a.severity === 'critical' || a.severity === 'error');
|
||||
const warnings = alerts.filter(a => a.severity === 'warning');
|
||||
const info = alerts.filter(a => a.severity === 'info');
|
||||
return { critical, warnings, info };
|
||||
}, [alerts]);
|
||||
|
||||
const unacknowledgedCount = useMemo(() => {
|
||||
return alerts.filter(a => !a.acknowledged).length;
|
||||
}, [alerts]);
|
||||
|
||||
const getSeverityIcon = (severity: CollisionAlertData['severity']): string => {
|
||||
switch (severity) {
|
||||
case 'critical':
|
||||
return '!!!';
|
||||
case 'error':
|
||||
return '!!';
|
||||
case 'warning':
|
||||
return '!';
|
||||
case 'info':
|
||||
return 'i';
|
||||
}
|
||||
};
|
||||
|
||||
const getSeverityClass = (severity: CollisionAlertData['severity']): string => {
|
||||
return `collision-severity-${severity}`;
|
||||
};
|
||||
|
||||
const getTypeIcon = (type: CollisionAlertData['type']): string => {
|
||||
switch (type) {
|
||||
case 'file':
|
||||
return 'F';
|
||||
case 'bead':
|
||||
return 'B';
|
||||
case 'task':
|
||||
return 'T';
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (timestamp: number): string => {
|
||||
return new Date(timestamp).toLocaleTimeString();
|
||||
};
|
||||
|
||||
const handleAcknowledge = (alertId: string) => {
|
||||
onAcknowledge?.(alertId);
|
||||
};
|
||||
|
||||
const handleAcknowledgeAll = () => {
|
||||
onAcknowledgeAll?.();
|
||||
};
|
||||
|
||||
const handleSelectAlert = (index: number) => {
|
||||
setSelectedIndex(index);
|
||||
};
|
||||
|
||||
const selectedAlert = alerts[selectedIndex];
|
||||
|
||||
if (!visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="collision-alert-panel">
|
||||
{/* Header */}
|
||||
<div className="collision-alert-header">
|
||||
<h2>
|
||||
<span className="collision-alert-icon">!</span>
|
||||
Collision Alerts
|
||||
{unacknowledgedCount > 0 && (
|
||||
<span className="collision-badge">{unacknowledgedCount}</span>
|
||||
)}
|
||||
</h2>
|
||||
{onClose && (
|
||||
<button
|
||||
className="collision-alert-close"
|
||||
onClick={onClose}
|
||||
title="Close panel"
|
||||
>
|
||||
x
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="collision-alert-content">
|
||||
{alerts.length === 0 ? (
|
||||
<div className="collision-empty">
|
||||
<span className="collision-empty-icon">OK</span>
|
||||
<span>No active collisions detected</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Summary */}
|
||||
<div className="collision-summary">
|
||||
<span className="collision-count">
|
||||
Alerts: {alerts.length} ({unacknowledgedCount} unacknowledged)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Critical/Error Alerts */}
|
||||
{groupedAlerts.critical.length > 0 && (
|
||||
<div className="collision-group collision-group-critical">
|
||||
<div className="collision-group-header">
|
||||
<span className="collision-group-icon">!!!</span>
|
||||
CRITICAL/ERROR ({groupedAlerts.critical.length})
|
||||
</div>
|
||||
<div className="collision-group-items">
|
||||
{groupedAlerts.critical.map((alert, idx) => {
|
||||
const globalIdx = alerts.indexOf(alert);
|
||||
return (
|
||||
<div
|
||||
key={alert.id}
|
||||
className={`collision-item ${getSeverityClass(alert.severity)} ${
|
||||
globalIdx === selectedIndex ? 'selected' : ''
|
||||
} ${alert.acknowledged ? 'acknowledged' : ''}`}
|
||||
onClick={() => handleSelectAlert(globalIdx)}
|
||||
>
|
||||
<span className="collision-item-icon">
|
||||
{getSeverityIcon(alert.severity)}
|
||||
</span>
|
||||
<span className="collision-item-type">
|
||||
[{getTypeIcon(alert.type)}]
|
||||
</span>
|
||||
<span className="collision-item-title">
|
||||
{alert.title.length > 40 ? alert.title.slice(0, 40) + '...' : alert.title}
|
||||
</span>
|
||||
<span className="collision-item-workers">
|
||||
{alert.workers.length > 2
|
||||
? `${alert.workers.length} workers`
|
||||
: alert.workers.slice(0, 2).join(', ')}
|
||||
</span>
|
||||
{alert.acknowledged && (
|
||||
<span className="collision-item-ack">[ACK]</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Warning Alerts */}
|
||||
{groupedAlerts.warnings.length > 0 && (
|
||||
<div className="collision-group collision-group-warning">
|
||||
<div className="collision-group-header">
|
||||
<span className="collision-group-icon">!</span>
|
||||
WARNINGS ({groupedAlerts.warnings.length})
|
||||
</div>
|
||||
<div className="collision-group-items">
|
||||
{groupedAlerts.warnings.map((alert, idx) => {
|
||||
const globalIdx = alerts.indexOf(alert);
|
||||
return (
|
||||
<div
|
||||
key={alert.id}
|
||||
className={`collision-item ${getSeverityClass(alert.severity)} ${
|
||||
globalIdx === selectedIndex ? 'selected' : ''
|
||||
} ${alert.acknowledged ? 'acknowledged' : ''}`}
|
||||
onClick={() => handleSelectAlert(globalIdx)}
|
||||
>
|
||||
<span className="collision-item-icon">
|
||||
{getSeverityIcon(alert.severity)}
|
||||
</span>
|
||||
<span className="collision-item-type">
|
||||
[{getTypeIcon(alert.type)}]
|
||||
</span>
|
||||
<span className="collision-item-title">
|
||||
{alert.title.length > 40 ? alert.title.slice(0, 40) + '...' : alert.title}
|
||||
</span>
|
||||
<span className="collision-item-workers">
|
||||
{alert.workers.length > 2
|
||||
? `${alert.workers.length} workers`
|
||||
: alert.workers.slice(0, 2).join(', ')}
|
||||
</span>
|
||||
{alert.acknowledged && (
|
||||
<span className="collision-item-ack">[ACK]</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Info Alerts */}
|
||||
{groupedAlerts.info.length > 0 && (
|
||||
<div className="collision-group collision-group-info">
|
||||
<div className="collision-group-header">
|
||||
<span className="collision-group-icon">i</span>
|
||||
INFO ({groupedAlerts.info.length})
|
||||
</div>
|
||||
<div className="collision-group-items">
|
||||
{groupedAlerts.info.map((alert, idx) => {
|
||||
const globalIdx = alerts.indexOf(alert);
|
||||
return (
|
||||
<div
|
||||
key={alert.id}
|
||||
className={`collision-item ${getSeverityClass(alert.severity)} ${
|
||||
globalIdx === selectedIndex ? 'selected' : ''
|
||||
} ${alert.acknowledged ? 'acknowledged' : ''}`}
|
||||
onClick={() => handleSelectAlert(globalIdx)}
|
||||
>
|
||||
<span className="collision-item-icon">
|
||||
{getSeverityIcon(alert.severity)}
|
||||
</span>
|
||||
<span className="collision-item-type">
|
||||
[{getTypeIcon(alert.type)}]
|
||||
</span>
|
||||
<span className="collision-item-title">
|
||||
{alert.title.length > 40 ? alert.title.slice(0, 40) + '...' : alert.title}
|
||||
</span>
|
||||
<span className="collision-item-workers">
|
||||
{alert.workers.length > 2
|
||||
? `${alert.workers.length} workers`
|
||||
: alert.workers.slice(0, 2).join(', ')}
|
||||
</span>
|
||||
{alert.acknowledged && (
|
||||
<span className="collision-item-ack">[ACK]</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Selected Alert Details */}
|
||||
{selectedAlert && (
|
||||
<div className="collision-detail">
|
||||
<div className="collision-detail-divider">
|
||||
------------------------------------------
|
||||
</div>
|
||||
<div className="collision-detail-header">Selected Alert Details:</div>
|
||||
<div className="collision-detail-row">
|
||||
<span className="collision-detail-label">Title:</span>
|
||||
<span className="collision-detail-value">{selectedAlert.title}</span>
|
||||
</div>
|
||||
<div className="collision-detail-row">
|
||||
<span className="collision-detail-value">
|
||||
{selectedAlert.description}
|
||||
</span>
|
||||
</div>
|
||||
<div className="collision-detail-row">
|
||||
<span className="collision-detail-label">Workers:</span>
|
||||
<span className="collision-detail-value">
|
||||
{selectedAlert.workers.join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
{selectedAlert.suggestion && (
|
||||
<div className="collision-detail-suggestion">
|
||||
Suggestion: {selectedAlert.suggestion}
|
||||
</div>
|
||||
)}
|
||||
<div className="collision-detail-actions">
|
||||
<button
|
||||
className="collision-action-btn"
|
||||
onClick={() => handleAcknowledge(selectedAlert.id)}
|
||||
disabled={selectedAlert.acknowledged}
|
||||
>
|
||||
[Enter] Acknowledge
|
||||
</button>
|
||||
<button
|
||||
className="collision-action-btn"
|
||||
onClick={handleAcknowledgeAll}
|
||||
>
|
||||
[a] Acknowledge All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CollisionAlert;
|
||||
|
|
@ -47,6 +47,39 @@ body {
|
|||
color: var(--accent);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.collision-alert-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
background: rgba(255, 152, 0, 0.2);
|
||||
border: 1px solid var(--warning);
|
||||
color: var(--warning);
|
||||
padding: 0.375rem 0.625rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.collision-alert-toggle:hover {
|
||||
background: rgba(255, 152, 0, 0.3);
|
||||
}
|
||||
|
||||
.collision-alert-toggle .collision-alert-icon {
|
||||
font-weight: bold;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.collision-alert-toggle .collision-alert-count {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -661,6 +694,288 @@ body {
|
|||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Collision Alert Panel Styles
|
||||
============================================ */
|
||||
|
||||
.collision-alert-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
min-width: 300px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.collision-alert-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--bg-tertiary);
|
||||
border-bottom: 1px solid var(--bg-primary);
|
||||
}
|
||||
|
||||
.collision-alert-header h2 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.collision-alert-icon {
|
||||
font-size: 1rem;
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.collision-badge {
|
||||
background: var(--error);
|
||||
color: #fff;
|
||||
font-size: 0.7rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 10px;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.collision-alert-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.collision-alert-close:hover {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.collision-alert-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.collision-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
color: var(--success);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.collision-empty-icon {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.collision-summary {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
border-bottom: 1px solid var(--bg-tertiary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.collision-count {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.collision-group {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.collision-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.collision-group-critical .collision-group-header {
|
||||
color: var(--error);
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
}
|
||||
|
||||
.collision-group-warning .collision-group-header {
|
||||
color: var(--warning);
|
||||
background: rgba(255, 193, 7, 0.1);
|
||||
}
|
||||
|
||||
.collision-group-info .collision-group-header {
|
||||
color: var(--info);
|
||||
background: rgba(33, 150, 243, 0.1);
|
||||
}
|
||||
|
||||
.collision-group-icon {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.collision-group-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.collision-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8125rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.collision-item:hover {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.collision-item.selected {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.collision-item.acknowledged {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.collision-severity-critical .collision-item-icon,
|
||||
.collision-severity-error .collision-item-icon {
|
||||
color: var(--error);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.collision-severity-warning .collision-item-icon {
|
||||
color: var(--warning);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.collision-severity-info .collision-item-icon {
|
||||
color: var(--info);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.collision-item-icon {
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.collision-item-type {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.75rem;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.collision-item-title {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.collision-item-workers {
|
||||
color: #00bcd4;
|
||||
font-size: 0.75rem;
|
||||
max-width: 80px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.collision-item-ack {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.collision-detail {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border-top: 1px solid var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.collision-detail-divider {
|
||||
color: var(--text-secondary);
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.collision-detail-header {
|
||||
font-weight: 600;
|
||||
font-size: 0.8125rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.collision-detail-row {
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.25rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.collision-detail-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.collision-detail-value {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.collision-detail-suggestion {
|
||||
color: #00bcd4;
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.375rem 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.collision-detail-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.collision-action-btn {
|
||||
background: var(--bg-tertiary);
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.collision-action-btn:hover:not(:disabled) {
|
||||
background: var(--bg-primary);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.collision-action-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.replay-controls {
|
||||
|
|
@ -681,4 +996,12 @@ body {
|
|||
.replay-help {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collision-alert-panel {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.collision-detail-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,12 +28,13 @@ export interface FileCollision {
|
|||
}
|
||||
|
||||
export interface WebSocketMessage {
|
||||
type: 'init' | 'event' | 'collision';
|
||||
type: 'init' | 'event' | 'collision' | 'collision-alert';
|
||||
data: {
|
||||
workers?: WorkerInfo[];
|
||||
recentEvents?: LogEvent[];
|
||||
collisions?: FileCollision[];
|
||||
} | LogEvent | FileCollision;
|
||||
alerts?: CollisionAlert[];
|
||||
} | LogEvent | FileCollision | CollisionAlert;
|
||||
}
|
||||
|
||||
// Cross-Reference Types
|
||||
|
|
@ -98,3 +99,44 @@ export interface ReplayProgress {
|
|||
total: number;
|
||||
percent: number;
|
||||
}
|
||||
|
||||
// Collision Alert Types
|
||||
export interface FileCollision {
|
||||
path: string;
|
||||
workers: string[];
|
||||
detectedAt: number;
|
||||
isActive: boolean;
|
||||
events?: LogEvent[];
|
||||
}
|
||||
|
||||
export interface BeadCollision {
|
||||
beadId: string;
|
||||
workers: string[];
|
||||
detectedAt: number;
|
||||
isActive: boolean;
|
||||
severity: 'warning' | 'critical';
|
||||
events?: LogEvent[];
|
||||
}
|
||||
|
||||
export interface TaskCollision {
|
||||
type: 'directory' | 'related_files' | 'dependency';
|
||||
description: string;
|
||||
workers: string[];
|
||||
affectedResources: string[];
|
||||
detectedAt: number;
|
||||
isActive: boolean;
|
||||
riskLevel: 'low' | 'medium' | 'high';
|
||||
}
|
||||
|
||||
export interface CollisionAlert {
|
||||
id: string;
|
||||
type: 'file' | 'bead' | 'task';
|
||||
severity: 'info' | 'warning' | 'error' | 'critical';
|
||||
title: string;
|
||||
description: string;
|
||||
workers: string[];
|
||||
timestamp: number;
|
||||
acknowledged: boolean;
|
||||
collision: FileCollision | BeadCollision | TaskCollision;
|
||||
suggestion?: string;
|
||||
}
|
||||
|
|
|
|||
4
src/web/frontend/test/setup.ts
Normal file
4
src/web/frontend/test/setup.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/**
|
||||
* Test setup for React Testing Library
|
||||
*/
|
||||
import '@testing-library/jest-dom/vitest';
|
||||
|
|
@ -2,6 +2,11 @@ import { defineConfig } from 'vitest/config';
|
|||
|
||||
export default defineConfig({
|
||||
test: {
|
||||
exclude: ['node_modules', 'dist', 'src/web/frontend/**'],
|
||||
exclude: ['node_modules', 'dist'],
|
||||
include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
|
||||
environmentMatchGlobs: [
|
||||
['src/web/frontend/**/*.test.tsx', 'jsdom'],
|
||||
],
|
||||
setupFiles: ['./src/web/frontend/test/setup.ts'],
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue