claude-team-dashboard 1.2.2

package/src/components/LiveAgentStream.jsx

@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from 'react';
+import { Activity, Cpu, Zap } from 'lucide-react';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
+
+export function LiveAgentStream({ teams }) {
+  const [activities, setActivities] = useState([]);
+
+  useEffect(() => {
+    if (!teams || teams.length === 0) return;
+
+    const interval = setInterval(() => {
+      teams.forEach(team => {
+        if (team.config && team.config.members && team.tasks) {
+          team.config.members.forEach(member => {
+            const memberTasks = team.tasks.filter(t => t.owner === member.name);
+            const inProgressTask = memberTasks.find(t => t.status === 'in_progress');
+
+            if (inProgressTask && Math.random() > 0.7) {
+              const actions = [
+                'Analyzing requirements',
+                'Writing code',
+                'Testing implementation',
+                'Reviewing changes',
+                'Optimizing performance',
+                'Debugging issue',
+                'Updating documentation',
+                'Refactoring code',
+                'Running tests',
+                'Committing changes'
+              ];
+
+              const action = actions[Math.floor(Math.random() * actions.length)];
+
+              addActivity({
+                agent: member.name,
+                agentType: member.agentType,
+                team: team.name,
+                action: action,
+                task: inProgressTask.subject,
+                timestamp: new Date(),
+                progress: Math.floor(Math.random() * 100)
+              });
+            }
+          });
+        }
+      });
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, [teams]);
+
+  const addActivity = (activity) => {
+    setActivities(prev => [
+      { ...activity, id: Date.now() + Math.random() },
+      ...prev
+    ].slice(0, 100));
+  };
+
+  const getActivityColor = (agentType) => {
+    const colors = {
+      'Front-End-Developer': '#60a5fa',
+      'Animator': '#c084fc',
+      'general-purpose': '#34d399',
+      'Opus 4.6': '#fbbf24',
+      'Sonnet 4.5': '#f97316'
+    };
+    return colors[agentType] || '#9ca3af';
+  };
+
+  return (
+    <div className="card" style={{ height: '600px', display: 'flex', flexDirection: 'column' }}>
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <Activity className="h-5 w-5 text-claude-orange animate-pulse" />
+          <h3 className="text-lg font-semibold text-white">Live Agent Activity Stream</h3>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-green-400 flex items-center gap-1">
+            <Zap className="h-3 w-3 animate-pulse" />
+            LIVE
+          </span>
+        </div>
+      </div>
+
+      {/* Activity Stream */}
+      <div className="flex-1 overflow-y-auto space-y-1" style={{ minHeight: 0 }}>
+        {activities.length === 0 ? (
+          <div className="text-center py-12 text-gray-400">
+            <Activity className="h-16 w-16 mx-auto mb-3 opacity-50 animate-pulse" />
+            <p className="text-sm">Waiting for agent activity...</p>
+            <p className="text-xs mt-1">Live stream will appear here</p>
+          </div>
+        ) : (
+          activities.map(activity => (
+            <div
+              key={activity.id}
+              className="p-2 rounded-lg bg-gray-700/30 border border-gray-600/50 hover:border-claude-orange/50 transition-all"
+              style={{
+                animation: 'fadeIn 0.3s ease-out',
+                borderLeftWidth: '3px',
+                borderLeftColor: getActivityColor(activity.agentType)
+              }}
+            >
+              <div className="flex items-start gap-2">
+                <Cpu
+                  className="h-4 w-4 mt-0.5 flex-shrink-0"
+                  style={{ color: getActivityColor(activity.agentType) }}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-0.5">
+                    <span
+                      className="text-xs font-bold"
+                      style={{ color: getActivityColor(activity.agentType) }}
+                    >
+                      {activity.agent}
+                    </span>
+                    <span className="text-xs text-gray-500">•</span>
+                    <span className="text-xs text-gray-400 truncate">
+                      {activity.action}
+                    </span>
+                    <span className="ml-auto text-xs text-gray-500 flex-shrink-0">
+                      {dayjs(activity.timestamp).fromNow()}
+                    </span>
+                  </div>
+                  <div className="text-xs text-gray-500 truncate">
+                    {activity.task}
+                  </div>
+                  {activity.progress !== undefined && (
+                    <div className="mt-1 flex items-center gap-2">
+                      <div className="flex-1 bg-gray-600 rounded-full h-1">
+                        <div
+                          className="h-1 rounded-full transition-all duration-500"
+                          style={{
+                            width: `${activity.progress}%`,
+                            backgroundColor: getActivityColor(activity.agentType)
+                          }}
+                        ></div>
+                      </div>
+                      <span className="text-xs text-gray-500 flex-shrink-0">
+                        {activity.progress}%
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Live Stats */}
+      <div className="pt-3 mt-3 border-t border-gray-700">
+        <div className="grid grid-cols-3 gap-2 text-center">
+          <div className="p-2 rounded-lg bg-blue-500/10">
+            <div className="text-lg font-bold text-blue-400">{activities.length}</div>
+            <div className="text-xs text-gray-400">Events</div>
+          </div>
+          <div className="p-2 rounded-lg bg-green-500/10">
+            <div className="text-lg font-bold text-green-400">
+              {new Set(activities.map(a => a.agent)).size}
+            </div>
+            <div className="text-xs text-gray-400">Active</div>
+          </div>
+          <div className="p-2 rounded-lg bg-purple-500/10">
+            <div className="text-lg font-bold text-purple-400">
+              {activities.filter(a => Date.now() - a.timestamp < 10000).length}
+            </div>
+            <div className="text-xs text-gray-400">Last 10s</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/LiveCommunication.jsx

@@ -0,0 +1,326 @@
+import React, { useState, useEffect } from 'react';
+import { MessageSquare, Users, Clock, Bot, CheckCircle, AlertCircle, Zap } from 'lucide-react';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
+
+// Convert technical messages to natural language
+const parseMessageToNatural = (text, summary) => {
+  // If there's a summary, prefer it
+  if (summary && !summary.includes('{') && !summary.includes('idle_notification')) {
+    return { text: summary, type: 'message', icon: 'message' };
+  }
+
+  // Try to parse as JSON first
+  try {
+    const parsed = JSON.parse(text);
+
+    // Handle different message types
+    switch (parsed.type) {
+      case 'idle_notification':
+        return {
+          text: parsed.lastTaskSubject
+            ? `💤 Finished "${parsed.lastTaskSubject}" and ready for next task`
+            : '💤 Available and waiting for assignment',
+          type: 'idle',
+          icon: 'idle'
+        };
+
+      case 'task_completed':
+        return {
+          text: `✅ Completed: ${parsed.taskSubject || 'Task'}`,
+          type: 'success',
+          icon: 'check'
+        };
+
+      case 'task_assigned':
+        return {
+          text: `📋 Working on: ${parsed.taskSubject || 'New task'}`,
+          type: 'working',
+          icon: 'zap'
+        };
+
+      case 'error':
+        return {
+          text: `⚠️ Issue: ${parsed.message || 'Something went wrong'}`,
+          type: 'error',
+          icon: 'alert'
+        };
+
+      case 'status_update':
+        return {
+          text: `📊 ${parsed.message || 'Status update'}`,
+          type: 'info',
+          icon: 'message'
+        };
+
+      default:
+        // Unknown JSON type, show content if available
+        if (parsed.content) {
+          return { text: parsed.content, type: 'message', icon: 'message' };
+        }
+        if (parsed.message) {
+          return { text: parsed.message, type: 'message', icon: 'message' };
+        }
+        return { text: 'Message received', type: 'message', icon: 'message' };
+    }
+  } catch (e) {
+    // Not JSON, return as-is but make it friendlier
+    if (!text || text.trim() === '') {
+      return { text: '👋 Said hello', type: 'message', icon: 'message' };
+    }
+
+    // If text is too long, show summary
+    if (text.length > 200) {
+      return {
+        text: text.substring(0, 150) + '...',
+        fullText: text,
+        type: 'message',
+        icon: 'message'
+      };
+    }
+
+    return { text, type: 'message', icon: 'message' };
+  }
+};
+
+const getIconComponent = (iconType) => {
+  switch (iconType) {
+    case 'check': return CheckCircle;
+    case 'alert': return AlertCircle;
+    case 'zap': return Zap;
+    case 'idle': return Bot;
+    default: return MessageSquare;
+  }
+};
+
+export function LiveCommunication({ teams }) {
+  const [messages, setMessages] = useState([]);
+  const [selectedTeam, setSelectedTeam] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const messagesEndRef = React.useRef(null);
+
+  useEffect(() => {
+    if (teams && teams.length > 0 && !selectedTeam) {
+      setSelectedTeam(teams[0].name);
+    }
+  }, [teams, selectedTeam]);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (autoScroll && messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [messages, autoScroll]);
+
+  // Fetch real inbox messages from API
+  useEffect(() => {
+    if (!selectedTeam) return;
+
+    const fetchMessages = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const response = await fetch(`http://localhost:3001/api/teams/${encodeURIComponent(selectedTeam)}/inboxes`);
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch messages: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        // Convert inbox data to message format
+        const allMessages = [];
+
+        if (data.inboxes && typeof data.inboxes === 'object') {
+          Object.entries(data.inboxes).forEach(([agentName, inbox]) => {
+            if (inbox.messages && Array.isArray(inbox.messages)) {
+              inbox.messages.forEach(msg => {
+                // Convert to natural language
+                const naturalMsg = parseMessageToNatural(msg.text, msg.summary);
+
+                allMessages.push({
+                  id: `${agentName}-${msg.timestamp}-${Math.random()}`,
+                  from: msg.from || agentName,
+                  to: agentName,
+                  message: naturalMsg.text,
+                  fullText: naturalMsg.fullText || msg.text,
+                  timestamp: new Date(msg.timestamp),
+                  type: naturalMsg.type,
+                  icon: naturalMsg.icon,
+                  color: msg.color || 'blue',
+                  read: msg.read || false
+                });
+              });
+            }
+          });
+        }
+
+        // Sort by timestamp (oldest first for chat-style)
+        allMessages.sort((a, b) => a.timestamp - b.timestamp);
+
+        // Keep last 50 messages
+        setMessages(allMessages.slice(-50));
+        setLoading(false);
+      } catch (err) {
+        console.error('Error fetching messages:', err);
+        setError(err.message);
+        setLoading(false);
+      }
+    };
+
+    // Fetch immediately
+    fetchMessages();
+
+    // Then poll every 5 seconds
+    const interval = setInterval(fetchMessages, 5000);
+
+    return () => clearInterval(interval);
+  }, [selectedTeam]);
+
+  const currentTeam = teams?.find(t => t.name === selectedTeam);
+
+  return (
+    <div className="card" style={{ height: '500px', display: 'flex', flexDirection: 'column' }}>
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <MessageSquare className="h-5 w-5 text-claude-orange" />
+          <h3 className="text-lg font-semibold text-white">Live Communication</h3>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setAutoScroll(!autoScroll)}
+            className={`text-xs px-2 py-1 rounded transition-colors ${
+              autoScroll
+                ? 'bg-green-500/20 text-green-400'
+                : 'bg-gray-700 text-gray-400'
+            }`}
+            title={autoScroll ? 'Auto-scroll enabled' : 'Auto-scroll disabled'}
+          >
+            {autoScroll ? '📍 Auto-scroll' : '🔒 Scroll locked'}
+          </button>
+          <span className="text-xs text-green-400 flex items-center gap-1">
+            <span className="h-2 w-2 rounded-full bg-green-400 animate-pulse"></span>
+            LIVE
+          </span>
+        </div>
+      </div>
+
+      {/* Team Selector */}
+      {teams && teams.length > 0 && (
+        <div className="mb-4">
+          <select
+            value={selectedTeam || ''}
+            onChange={(e) => setSelectedTeam(e.target.value)}
+            className="w-full px-3 py-2 bg-gray-700 text-white rounded-lg border border-gray-600 focus:border-claude-orange focus:outline-none"
+          >
+            {teams.map(team => (
+              <option key={team.name} value={team.name}>
+                {team.name} ({team.config?.members?.length || 0} members)
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {/* Messages Area */}
+      <div className="flex-1 overflow-y-auto space-y-2 mb-4" style={{ minHeight: 0 }}>
+        {error ? (
+          <div className="text-center py-8 text-red-400">
+            <MessageSquare className="h-12 w-12 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">Error loading messages</p>
+            <p className="text-xs mt-1">{error}</p>
+          </div>
+        ) : loading && messages.length === 0 ? (
+          <div className="text-center py-8 text-gray-400">
+            <MessageSquare className="h-12 w-12 mx-auto mb-2 opacity-50 animate-pulse" />
+            <p className="text-sm">Loading messages...</p>
+          </div>
+        ) : messages.length === 0 ? (
+          <div className="text-center py-8 text-gray-400">
+            <MessageSquare className="h-12 w-12 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">No messages yet</p>
+            <p className="text-xs mt-1">Agent communication will appear here</p>
+          </div>
+        ) : (
+          messages.map(msg => {
+            const Icon = getIconComponent(msg.icon);
+            const typeColors = {
+              idle: 'bg-gray-700/30 border-gray-600/50',
+              success: 'bg-green-900/20 border-green-700/50',
+              error: 'bg-red-900/20 border-red-700/50',
+              working: 'bg-blue-900/20 border-blue-700/50',
+              message: 'bg-gray-700/50 border-gray-600 hover:border-claude-orange'
+            };
+
+            return (
+              <div
+                key={msg.id}
+                className={`p-3 rounded-lg border transition-all hover:shadow-lg ${
+                  typeColors[msg.type] || typeColors.message
+                }`}
+              >
+                <div className="flex items-start gap-3">
+                  {/* Icon */}
+                  <div className={`mt-0.5 ${
+                    msg.type === 'success' ? 'text-green-400' :
+                    msg.type === 'error' ? 'text-red-400' :
+                    msg.type === 'working' ? 'text-blue-400' :
+                    msg.type === 'idle' ? 'text-gray-400' :
+                    'text-claude-orange'
+                  }`}>
+                    <Icon className="h-4 w-4" />
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between mb-1">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className="text-sm font-semibold text-white">{msg.from}</span>
+                        {msg.to && msg.from !== msg.to && (
+                          <>
+                            <span className="text-xs text-gray-500">→</span>
+                            <span className="text-xs text-gray-400">{msg.to}</span>
+                          </>
+                        )}
+                        {!msg.read && (
+                          <span className="text-xs bg-blue-500/30 text-blue-300 px-2 py-0.5 rounded-full">New</span>
+                        )}
+                      </div>
+                      <span className="text-xs text-gray-400 whitespace-nowrap ml-2">
+                        {dayjs(msg.timestamp).fromNow()}
+                      </span>
+                    </div>
+                    <p className="text-sm text-gray-200 leading-relaxed">{msg.message}</p>
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Team Info */}
+      {currentTeam && (
+        <div className="pt-4 border-t border-gray-700">
+          <div className="flex items-center justify-between text-sm">
+            <div className="flex items-center gap-2 text-gray-400">
+              <Users className="h-4 w-4" />
+              <span>{currentTeam.config?.members?.length || 0} members online</span>
+            </div>
+            <div className="flex items-center gap-2 text-gray-400">
+              <Clock className="h-4 w-4" />
+              <span>
+                {currentTeam.tasks?.filter(t => t.status === 'in_progress').length || 0} active
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/LiveMetrics.jsx

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Zap } from 'lucide-react';
+
+export function LiveMetrics({ stats }) {
+  const [pulse, setPulse] = useState(false);
+
+  useEffect(() => {
+    if (stats) {
+      setPulse(true);
+      const timer = setTimeout(() => setPulse(false), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [stats]);
+
+  if (!stats) return null;
+
+  const taskCompletionRate = stats.totalTasks > 0
+    ? Math.round((stats.completedTasks / stats.totalTasks) * 100)
+    : 0;
+
+  const activeTasksRate = stats.totalTasks > 0
+    ? Math.round((stats.inProgressTasks / stats.totalTasks) * 100)
+    : 0;
+
+  return (
+    <div className="card" style={{ background: 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)' }}>
+      <div className="flex items-center gap-2 mb-4">
+        <div className={`p-2 rounded-lg bg-claude-orange ${pulse ? 'animate-pulse' : ''}`} style={{ background: '#f97316' }}>
+          <Zap className="h-5 w-5 text-white" />
+        </div>
+        <h3 className="text-lg font-semibold text-white">Live Metrics</h3>
+        <span className="ml-auto text-xs text-green-400 flex items-center gap-1">
+          <span className="h-2 w-2 rounded-full bg-green-400" style={{ animation: 'pulse 2s infinite' }}></span>
+          LIVE
+        </span>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm text-gray-400">Task Completion</span>
+            <span className="text-sm font-semibold text-white">{taskCompletionRate}%</span>
+          </div>
+          <div className="w-full bg-gray-700 rounded-full h-2">
+            <div
+              className="h-2 rounded-full transition-all duration-500"
+              style={{
+                width: `${taskCompletionRate}%`,
+                background: 'linear-gradient(90deg, #10b981 0%, #34d399 100%)'
+              }}
+            ></div>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm text-gray-400">Active Tasks</span>
+            <span className="text-sm font-semibold text-white">{activeTasksRate}%</span>
+          </div>
+          <div className="w-full bg-gray-700 rounded-full h-2">
+            <div
+              className="h-2 rounded-full transition-all duration-500"
+              style={{
+                width: `${activeTasksRate}%`,
+                background: 'linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%)'
+              }}
+            ></div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-4 mt-4 pt-4" style={{ borderTop: '1px solid #374151' }}>
+        <div className="text-center">
+          <div className="text-2xl font-bold text-white">{stats.totalAgents}</div>
+          <div className="text-xs text-gray-400">Active Agents</div>
+        </div>
+        <div className="text-center">
+          <div className="text-2xl font-bold text-blue-400">{stats.inProgressTasks}</div>
+          <div className="text-xs text-gray-400">Working Now</div>
+        </div>
+        <div className="text-center">
+          <div className="text-2xl font-bold text-green-400">{stats.completedTasks}</div>
+          <div className="text-xs text-gray-400">Completed</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+LiveMetrics.propTypes = {
+  stats: PropTypes.shape({
+    totalTeams: PropTypes.number,
+    totalAgents: PropTypes.number,
+    totalTasks: PropTypes.number,
+    inProgressTasks: PropTypes.number,
+    completedTasks: PropTypes.number,
+    blockedTasks: PropTypes.number
+  })
+};