Anto01
27e78d3d56
Canvas Components: - CustomExtractorNode.tsx: Node for custom Python extractors - CustomExtractorPanel.tsx: Configuration panel for custom extractors - ConnectionStatusIndicator.tsx: WebSocket status display - atomizer-spec.ts: TypeScript types for AtomizerSpec v2.0 Config: - migrator.py: Legacy config to AtomizerSpec v2.0 migration - Updated __init__.py exports for config and extractors MCP Tools: - spec.ts: MCP tools for spec manipulation - index.ts: Tool registration updates
50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
/**
|
|
* ConnectionStatusIndicator - Visual indicator for WebSocket connection status.
|
|
*/
|
|
|
|
import { ConnectionStatus } from '../../hooks/useSpecWebSocket';
|
|
|
|
interface ConnectionStatusIndicatorProps {
|
|
status: ConnectionStatus;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Visual indicator for WebSocket connection status.
|
|
* Can be used in the canvas UI to show sync state.
|
|
*/
|
|
export function ConnectionStatusIndicator({
|
|
status,
|
|
className = '',
|
|
}: ConnectionStatusIndicatorProps) {
|
|
const statusConfig = {
|
|
disconnected: {
|
|
color: 'bg-gray-500',
|
|
label: 'Disconnected',
|
|
},
|
|
connecting: {
|
|
color: 'bg-yellow-500 animate-pulse',
|
|
label: 'Connecting...',
|
|
},
|
|
connected: {
|
|
color: 'bg-green-500',
|
|
label: 'Connected',
|
|
},
|
|
reconnecting: {
|
|
color: 'bg-yellow-500 animate-pulse',
|
|
label: 'Reconnecting...',
|
|
},
|
|
};
|
|
|
|
const config = statusConfig[status];
|
|
|
|
return (
|
|
<div className={`flex items-center gap-2 ${className}`}>
|
|
<div className={`w-2 h-2 rounded-full ${config.color}`} />
|
|
<span className="text-xs text-dark-400">{config.label}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ConnectionStatusIndicator;
|