+ {/* Swarm Template Selector - Show when no active swarm */}
+ {!swarmState.isActive && !isConnected && (
+
+ {
+ // When a template is selected, populate the composer with the prompt
+ composerRef.current?.focusInput();
+ }}
+ />
+
+ )}
+
;
+ }
+ if (cleanName.startsWith('agent_')) {
+ return
;
+ }
+ if (cleanName.startsWith('memory_')) {
+ return
;
+ }
+ if (cleanName.startsWith('neural_') || cleanName.startsWith('task_orchestrate')) {
+ return
;
+ }
+
switch (toolName) {
case 'Read':
return
;
diff --git a/src/web/chat/components/SwarmHealth/SwarmHealthMonitor.tsx b/src/web/chat/components/SwarmHealth/SwarmHealthMonitor.tsx
new file mode 100644
index 00000000..e26b532d
--- /dev/null
+++ b/src/web/chat/components/SwarmHealth/SwarmHealthMonitor.tsx
@@ -0,0 +1,250 @@
+import React from 'react';
+import { Activity, AlertCircle, CheckCircle, XCircle, TrendingUp, TrendingDown } from 'lucide-react';
+import type { SwarmState } from '../SwarmOrchestration/SwarmOrchestrationPanel';
+
+export interface SwarmHealth {
+ score: number; // 0-100
+ status: 'healthy' | 'warning' | 'critical' | 'offline';
+ metrics: {
+ agentResponseRate: number; // 0-100
+ errorRate: number; // 0-100
+ avgResponseTime: number; // milliseconds
+ resourceUsage: number; // 0-100
+ };
+ issues: Array<{
+ severity: 'low' | 'medium' | 'high';
+ message: string;
+ timestamp: string;
+ }>;
+ trend: 'improving' | 'stable' | 'declining';
+}
+
+interface SwarmHealthMonitorProps {
+ swarmState: SwarmState;
+ health?: SwarmHealth;
+ compact?: boolean;
+}
+
+// Calculate health from swarm state (simplified algorithm)
+function calculateHealth(swarmState: SwarmState): SwarmHealth {
+ if (!swarmState.isActive) {
+ return {
+ score: 0,
+ status: 'offline',
+ metrics: {
+ agentResponseRate: 0,
+ errorRate: 0,
+ avgResponseTime: 0,
+ resourceUsage: 0,
+ },
+ issues: [],
+ trend: 'stable',
+ };
+ }
+
+ const { totalAgents, activeAgents, agents } = swarmState;
+
+ // Calculate metrics
+ const agentResponseRate = totalAgents > 0 ? (activeAgents / totalAgents) * 100 : 100;
+ const completedAgents = agents.filter(a => a.status === 'completed').length;
+ const errorRate = 0; // Would need error tracking
+ const avgResponseTime = 150; // Would need actual timing data
+ const resourceUsage = (activeAgents / Math.max(totalAgents, 1)) * 80; // Simplified
+
+ // Calculate overall health score (0-100)
+ let score = 100;
+
+ // Deduct for low agent response rate
+ if (agentResponseRate < 50) score -= 30;
+ else if (agentResponseRate < 75) score -= 15;
+
+ // Deduct for high error rate
+ score -= errorRate * 0.5;
+
+ // Deduct for slow response times
+ if (avgResponseTime > 500) score -= 20;
+ else if (avgResponseTime > 300) score -= 10;
+
+ // Ensure score is in range
+ score = Math.max(0, Math.min(100, score));
+
+ // Determine status
+ let status: SwarmHealth['status'];
+ if (score >= 80) status = 'healthy';
+ else if (score >= 60) status = 'warning';
+ else status = 'critical';
+
+ // Generate issues
+ const issues: SwarmHealth['issues'] = [];
+ if (agentResponseRate < 75) {
+ issues.push({
+ severity: agentResponseRate < 50 ? 'high' : 'medium',
+ message: `Low agent response rate: ${agentResponseRate.toFixed(0)}%`,
+ timestamp: new Date().toISOString(),
+ });
+ }
+ if (avgResponseTime > 300) {
+ issues.push({
+ severity: avgResponseTime > 500 ? 'high' : 'medium',
+ message: `High response time: ${avgResponseTime}ms`,
+ timestamp: new Date().toISOString(),
+ });
+ }
+
+ return {
+ score,
+ status,
+ metrics: {
+ agentResponseRate,
+ errorRate,
+ avgResponseTime,
+ resourceUsage,
+ },
+ issues,
+ trend: 'stable', // Would need historical data
+ };
+}
+
+export function SwarmHealthMonitor({ swarmState, health: providedHealth, compact }: SwarmHealthMonitorProps) {
+ const health = providedHealth || calculateHealth(swarmState);
+
+ if (!swarmState.isActive) {
+ return null;
+ }
+
+ const getStatusColor = (status: SwarmHealth['status']) => {
+ switch (status) {
+ case 'healthy': return 'text-green-600 bg-green-50 border-green-200';
+ case 'warning': return 'text-yellow-600 bg-yellow-50 border-yellow-200';
+ case 'critical': return 'text-red-600 bg-red-50 border-red-200';
+ case 'offline': return 'text-gray-600 bg-gray-50 border-gray-200';
+ }
+ };
+
+ const getStatusIcon = (status: SwarmHealth['status']) => {
+ switch (status) {
+ case 'healthy': return
;
+ case 'warning': return
;
+ case 'critical': return
;
+ case 'offline': return
;
+ }
+ };
+
+ const getTrendIcon = (trend: SwarmHealth['trend']) => {
+ switch (trend) {
+ case 'improving': return
;
+ case 'declining': return
;
+ case 'stable': return
;
+ }
+ };
+
+ if (compact) {
+ return (
+
+ {getStatusIcon(health.status)}
+ {health.status}
+ โข
+ {health.score}
+
+ );
+ }
+
+ return (
+
+ {/* Header */}
+
+
+
+ {getTrendIcon(health.trend)}
+
+ {getStatusIcon(health.status)}
+ {health.status}
+
+
+
+
+ {/* Health Score */}
+
+
+ Overall Health
+ {health.score}/100
+
+
+
= 80 ? 'bg-green-500' :
+ health.score >= 60 ? 'bg-yellow-500' :
+ 'bg-red-500'
+ }`}
+ style={{ width: `${health.score}%` }}
+ />
+
+
+
+ {/* Metrics Grid */}
+
+
+
Response Rate
+
+ {health.metrics.agentResponseRate.toFixed(0)}%
+
+
+
+
Error Rate
+
+ {health.metrics.errorRate.toFixed(1)}%
+
+
+
+
Avg Response
+
+ {health.metrics.avgResponseTime}ms
+
+
+
+
Resource Use
+
+ {health.metrics.resourceUsage.toFixed(0)}%
+
+
+
+
+ {/* Issues */}
+ {health.issues.length > 0 && (
+
+
Active Issues
+
+ {health.issues.map((issue, index) => (
+
+ ))}
+
+
+ )}
+
+ {/* No Issues Message */}
+ {health.issues.length === 0 && health.status === 'healthy' && (
+
+
+
+ All systems operational
+
+
+ )}
+
+ );
+}
diff --git a/src/web/chat/components/SwarmHealth/index.ts b/src/web/chat/components/SwarmHealth/index.ts
new file mode 100644
index 00000000..761a9765
--- /dev/null
+++ b/src/web/chat/components/SwarmHealth/index.ts
@@ -0,0 +1 @@
+export * from './SwarmHealthMonitor';
diff --git a/src/web/chat/components/SwarmNotifications/SwarmNotificationCenter.tsx b/src/web/chat/components/SwarmNotifications/SwarmNotificationCenter.tsx
new file mode 100644
index 00000000..572a5834
--- /dev/null
+++ b/src/web/chat/components/SwarmNotifications/SwarmNotificationCenter.tsx
@@ -0,0 +1,293 @@
+import React, { useState, useEffect } from 'react';
+import { Bell, X, CheckCircle, AlertCircle, Info, Users, Brain, Zap } from 'lucide-react';
+
+export type SwarmNotificationType =
+ | 'agent_spawn'
+ | 'agent_complete'
+ | 'swarm_init'
+ | 'swarm_complete'
+ | 'task_orchestrate'
+ | 'error'
+ | 'milestone'
+ | 'approval_needed';
+
+export interface SwarmNotification {
+ id: string;
+ type: SwarmNotificationType;
+ title: string;
+ message: string;
+ timestamp: Date;
+ read: boolean;
+ severity: 'info' | 'success' | 'warning' | 'error';
+ agentId?: string;
+ agentName?: string;
+ actionUrl?: string;
+}
+
+interface SwarmNotificationCenterProps {
+ notifications: SwarmNotification[];
+ onMarkAsRead: (id: string) => void;
+ onMarkAllAsRead: () => void;
+ onDismiss: (id: string) => void;
+ onDismissAll: () => void;
+}
+
+export function SwarmNotificationCenter({
+ notifications,
+ onMarkAsRead,
+ onMarkAllAsRead,
+ onDismiss,
+ onDismissAll,
+}: SwarmNotificationCenterProps) {
+ const [isOpen, setIsOpen] = useState(false);
+ const [filter, setFilter] = useState<'all' | 'unread'>('all');
+
+ const unreadCount = notifications.filter(n => !n.read).length;
+
+ const filteredNotifications = filter === 'unread'
+ ? notifications.filter(n => !n.read)
+ : notifications;
+
+ const getNotificationIcon = (type: SwarmNotificationType) => {
+ switch (type) {
+ case 'swarm_init':
+ case 'swarm_complete':
+ return
;
+ case 'agent_spawn':
+ case 'agent_complete':
+ return
;
+ case 'task_orchestrate':
+ return
;
+ case 'error':
+ return
;
+ case 'milestone':
+ case 'approval_needed':
+ return
;
+ default:
+ return
;
+ }
+ };
+
+ const getSeverityBorder = (severity: SwarmNotification['severity']) => {
+ switch (severity) {
+ case 'success': return 'border-l-4 border-l-green-500';
+ case 'warning': return 'border-l-4 border-l-yellow-500';
+ case 'error': return 'border-l-4 border-l-red-500';
+ default: return 'border-l-4 border-l-blue-500';
+ }
+ };
+
+ const formatTimestamp = (date: Date) => {
+ const now = new Date();
+ const diffMs = now.getTime() - date.getTime();
+ const diffMins = Math.floor(diffMs / 60000);
+
+ if (diffMins < 1) return 'Just now';
+ if (diffMins < 60) return `${diffMins}m ago`;
+
+ const diffHours = Math.floor(diffMins / 60);
+ if (diffHours < 24) return `${diffHours}h ago`;
+
+ const diffDays = Math.floor(diffHours / 24);
+ return `${diffDays}d ago`;
+ };
+
+ return (
+
+ {/* Bell Icon Button */}
+
+
+ {/* Notification Panel */}
+ {isOpen && (
+ <>
+ {/* Backdrop */}
+
setIsOpen(false)}
+ />
+
+ {/* Panel */}
+
+ {/* Header */}
+
+
+
Notifications
+
+
+
+ {/* Filter Tabs */}
+
+
+
+
+
+ {/* Actions */}
+ {notifications.length > 0 && (
+
+
+
+
+ )}
+
+
+ {/* Notification List */}
+
+ {filteredNotifications.length === 0 ? (
+
+
+
+ {filter === 'unread' ? 'No unread notifications' : 'No notifications yet'}
+
+
+ ) : (
+
+ {filteredNotifications.map((notification) => (
+
+
+ {/* Icon */}
+
+ {getNotificationIcon(notification.type)}
+
+
+ {/* Content */}
+
+
+
+ {notification.title}
+
+
+ {formatTimestamp(notification.timestamp)}
+
+
+
+
+ {notification.message}
+
+
+ {notification.agentName && (
+
+ Agent: {notification.agentName}
+
+ )}
+
+ {/* Actions */}
+
+ {!notification.read && (
+
+ )}
+
+
+
+
+
+ ))}
+
+ )}
+
+
+
+ )}
+
+ );
+}
+
+// Hook to manage notifications
+export function useSwarmNotifications() {
+ const [notifications, setNotifications] = useState
([]);
+
+ const addNotification = (notification: Omit) => {
+ const newNotification: SwarmNotification = {
+ ...notification,
+ id: `notification-${Date.now()}-${Math.random()}`,
+ timestamp: new Date(),
+ read: false,
+ };
+ setNotifications(prev => [newNotification, ...prev]);
+ };
+
+ const markAsRead = (id: string) => {
+ setNotifications(prev =>
+ prev.map(n => n.id === id ? { ...n, read: true } : n)
+ );
+ };
+
+ const markAllAsRead = () => {
+ setNotifications(prev => prev.map(n => ({ ...n, read: true })));
+ };
+
+ const dismiss = (id: string) => {
+ setNotifications(prev => prev.filter(n => n.id !== id));
+ };
+
+ const dismissAll = () => {
+ setNotifications([]);
+ };
+
+ return {
+ notifications,
+ addNotification,
+ markAsRead,
+ markAllAsRead,
+ dismiss,
+ dismissAll,
+ };
+}
diff --git a/src/web/chat/components/SwarmNotifications/index.ts b/src/web/chat/components/SwarmNotifications/index.ts
new file mode 100644
index 00000000..14047324
--- /dev/null
+++ b/src/web/chat/components/SwarmNotifications/index.ts
@@ -0,0 +1 @@
+export * from './SwarmNotificationCenter';
diff --git a/src/web/chat/components/SwarmOrchestration/SwarmOrchestrationPanel.tsx b/src/web/chat/components/SwarmOrchestration/SwarmOrchestrationPanel.tsx
new file mode 100644
index 00000000..a4fbe285
--- /dev/null
+++ b/src/web/chat/components/SwarmOrchestration/SwarmOrchestrationPanel.tsx
@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { Users, Brain, Zap, Activity, ChevronDown, ChevronUp } from 'lucide-react';
+import { AgentCapabilitiesMatrix } from '../AgentCapabilities';
+
+export interface AgentInfo {
+ id: string;
+ name: string;
+ role: string;
+ status: 'active' | 'idle' | 'completed';
+ currentTask?: string;
+}
+
+export interface SwarmState {
+ isActive: boolean;
+ totalAgents: number;
+ activeAgents: number;
+ currentOperation?: string;
+ agents: AgentInfo[];
+}
+
+interface SwarmOrchestrationPanelProps {
+ swarmState: SwarmState;
+}
+
+export function SwarmOrchestrationPanel({ swarmState }: SwarmOrchestrationPanelProps) {
+ const [showCapabilities, setShowCapabilities] = useState(false);
+
+ if (!swarmState.isActive) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ Swarm Orchestration Active
+
+
+
+
{swarmState.activeAgents} / {swarmState.totalAgents} agents active
+
+
+
+ {swarmState.currentOperation && (
+
+
+ Operation: {swarmState.currentOperation}
+
+ )}
+
+
+ {swarmState.agents.map((agent) => (
+
+ ))}
+
+
+ {/* Agent Capabilities Matrix - Expandable */}
+ {swarmState.agents.length > 0 && (
+
+
+
+ {showCapabilities && (
+
+ )}
+
+ )}
+
+
+
{agent.role}
+ {agent.currentTask && (
+
+ {agent.currentTask}
+
+ )}
+
+ {/* Template Grid */}
+
+ {SWARM_TEMPLATES.map((template) => (
+
+ ))}
+
+
+ {/* Details Modal */}
+ {showDetails && selectedTemplate && (
+
+
+
+ {/* Header */}
+
+
+
+ {selectedTemplate.icon}
+
+
+
{selectedTemplate.name}
+
+ {selectedTemplate.description}
+
+
+
+
+
+
+ {/* Stats */}
+
+
+
Agents
+
{selectedTemplate.agentCount}
+
+
+
Duration
+
{selectedTemplate.estimatedDuration}
+
+
+
Difficulty
+
+ {selectedTemplate.difficulty}
+
+
+
+
+ {/* Agents */}
+
+
Swarm Composition
+
+ {selectedTemplate.agents.map((agent, index) => (
+
+
+
+ {agent.role}
+
+
{agent.task}
+
+ ))}
+
+
+
+ {/* Tags */}
+
+
Tags
+
+ {selectedTemplate.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+ {/* Custom Prompt */}
+
+
+