claude-team-dashboard 1.2.2

package/src/components/TeamCard.jsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Users, ChevronDown, ChevronUp, Activity, Clock, CheckCircle, Loader } from 'lucide-react';
+import { AgentCard } from './AgentCard';
+import { TaskList } from './TaskList';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
+
+export function TeamCard({ team }) {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const { name, config, tasks, lastUpdated } = team;
+  const members = config.members || [];
+  const lead = members.find(m => m.name === config.leadName);
+
+  const taskStats = {
+    pending: tasks.filter(t => t.status === 'pending').length,
+    inProgress: tasks.filter(t => t.status === 'in_progress').length,
+    completed: tasks.filter(t => t.status === 'completed').length
+  };
+
+  return (
+    <div className="card border-l-4 border-l-claude-orange">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className="bg-claude-orange/20 p-2 rounded-lg">
+            <Users className="h-6 w-6 text-claude-orange" />
+          </div>
+          <div>
+            <h3 className="text-xl font-bold text-white">{name}</h3>
+            {config.description && (
+              <p className="text-gray-400 text-sm mt-1">{config.description}</p>
+            )}
+          </div>
+        </div>
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
+          aria-label={isExpanded ? "Collapse team details" : "Expand team details"}
+          aria-expanded={isExpanded}
+        >
+          {isExpanded ? (
+            <ChevronUp className="h-5 w-5 text-gray-400" />
+          ) : (
+            <ChevronDown className="h-5 w-5 text-gray-400" />
+          )}
+        </button>
+      </div>
+
+      <div className="flex flex-wrap gap-2 mb-4">
+        <div className="flex items-center gap-2 bg-gray-700/50 px-3 py-1 rounded-full">
+          <Users className="h-4 w-4 text-gray-400" />
+          <span className="text-sm text-gray-300">{members.length} agents</span>
+        </div>
+        <div className="flex items-center gap-2 bg-gray-700/50 px-3 py-1 rounded-full">
+          <Activity className="h-4 w-4 text-gray-400" />
+          <span className="text-sm text-gray-300">{tasks.length} tasks</span>
+        </div>
+        <div className="flex items-center gap-2 bg-gray-700/50 px-3 py-1 rounded-full">
+          <Clock className="h-4 w-4 text-gray-400" />
+          <span className="text-sm text-gray-300">
+            {dayjs(new Date(lastUpdated)).fromNow()}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex gap-2 mb-4">
+        <span className="badge badge-pending">
+          <Clock className="h-3 w-3 inline-block mr-1" aria-hidden="true" />
+          {taskStats.pending} pending
+        </span>
+        <span className="badge badge-in-progress">
+          <Loader className="h-3 w-3 inline-block mr-1 animate-spin" aria-hidden="true" />
+          {taskStats.inProgress} in progress
+        </span>
+        <span className="badge badge-completed">
+          <CheckCircle className="h-3 w-3 inline-block mr-1" aria-hidden="true" />
+          {taskStats.completed} completed
+        </span>
+      </div>
+
+      {isExpanded && (
+        <div className="space-y-6 mt-6">
+          <div>
+            <h4 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
+              <Users className="h-5 w-5" />
+              Team Members
+            </h4>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              {lead && (
+                <AgentCard agent={lead} isLead={true} />
+              )}
+              {members
+                .filter(m => m.name !== config.leadName)
+                .map((agent, index) => (
+                  <AgentCard key={index} agent={agent} isLead={false} />
+                ))}
+            </div>
+          </div>
+
+          <div>
+            <h4 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
+              <Activity className="h-5 w-5" />
+              Tasks
+            </h4>
+            <TaskList tasks={tasks} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+TeamCard.propTypes = {
+  team: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    config: PropTypes.shape({
+      description: PropTypes.string,
+      leadName: PropTypes.string,
+      members: PropTypes.arrayOf(PropTypes.object)
+    }),
+    tasks: PropTypes.array,
+    lastUpdated: PropTypes.string
+  }).isRequired
+};

package/src/components/TeamHistory.jsx

@@ -0,0 +1,204 @@
+import React, { useState } from 'react';
+import { History, Users, CheckCircle2, Clock, ChevronDown, ChevronRight } from 'lucide-react';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
+
+export function TeamHistory({ teamHistory }) {
+  const [expandedTeam, setExpandedTeam] = useState(null);
+
+  if (!teamHistory || teamHistory.length === 0) {
+    return (
+      <div className="card">
+        <div className="flex items-center gap-2 mb-4">
+          <History className="h-5 w-5 text-claude-orange" />
+          <h3 className="text-lg font-semibold text-white">Team History</h3>
+        </div>
+        <div className="text-center py-12 text-gray-400">
+          <History className="h-16 w-16 mx-auto mb-3 opacity-50" />
+          <p className="text-sm">No team history yet</p>
+          <p className="text-xs mt-1">Past teams will appear here</p>
+        </div>
+      </div>
+    );
+  }
+
+  const toggleTeam = (teamName) => {
+    setExpandedTeam(expandedTeam === teamName ? null : teamName);
+  };
+
+  const getTaskStats = (tasks) => {
+    return {
+      total: tasks.length,
+      completed: tasks.filter(t => t.status === 'completed').length,
+      inProgress: tasks.filter(t => t.status === 'in_progress').length,
+      pending: tasks.filter(t => t.status === 'pending').length
+    };
+  };
+
+  return (
+    <div className="card">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <History className="h-5 w-5 text-claude-orange" />
+          <h3 className="text-lg font-semibold text-white">Team History</h3>
+        </div>
+        <span className="text-sm text-gray-400">
+          {teamHistory.length} team{teamHistory.length !== 1 ? 's' : ''}
+        </span>
+      </div>
+
+      <div className="space-y-3 max-h-[600px] overflow-y-auto">
+        {teamHistory.map((team, index) => {
+          const stats = getTaskStats(team.tasks);
+          const isExpanded = expandedTeam === team.name;
+          const completionRate = stats.total > 0 ? (stats.completed / stats.total) * 100 : 0;
+
+          return (
+            <div
+              key={team.name}
+              className="border border-gray-700 rounded-xl overflow-hidden transition-all hover:border-claude-orange/50"
+              style={{
+                animation: `fadeInScale 0.3s ease-out ${index * 0.05}s backwards`
+              }}
+            >
+              {/* Team Header */}
+              <div
+                className="p-4 bg-gray-700/30 cursor-pointer hover:bg-gray-700/50 transition-colors"
+                onClick={() => toggleTeam(team.name)}
+                role="button"
+                tabIndex={0}
+                aria-expanded={isExpanded}
+                aria-label={isExpanded ? `Collapse ${team.name} details` : `Expand ${team.name} details`}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    toggleTeam(team.name);
+                  }
+                }}
+              >
+                <div className="flex items-start gap-3">
+                  <div className="mt-1" aria-hidden="true">
+                    {isExpanded ? (
+                      <ChevronDown className="h-5 w-5 text-gray-400" />
+                    ) : (
+                      <ChevronRight className="h-5 w-5 text-gray-400" />
+                    )}
+                  </div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      <h4 className="text-white font-semibold">{team.name}</h4>
+                      {team.isActive && (
+                        <span className="px-2 py-0.5 bg-green-500/20 text-green-400 text-xs rounded-full border border-green-500/30">
+                          Active
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="flex items-center gap-4 text-xs text-gray-400 mb-2">
+                      <div className="flex items-center gap-1">
+                        <Users className="h-3 w-3" />
+                        {team.config.members?.length || 0} members
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <CheckCircle2 className="h-3 w-3" />
+                        {stats.total} tasks
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Clock className="h-3 w-3" />
+                        {dayjs(team.lastModified).fromNow()}
+                      </div>
+                    </div>
+
+                    {/* Progress Bar */}
+                    <div className="w-full bg-gray-600 rounded-full h-2">
+                      <div
+                        className="bg-gradient-to-r from-green-500 to-emerald-400 h-2 rounded-full transition-all duration-500"
+                        style={{ width: `${completionRate}%` }}
+                      ></div>
+                    </div>
+                    <div className="mt-1 text-xs text-gray-400">
+                      {stats.completed}/{stats.total} tasks completed ({Math.round(completionRate)}%)
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Expanded Content */}
+              {isExpanded && (
+                <div className="p-4 bg-gray-800/30 border-t border-gray-700 space-y-4">
+                  {/* Members */}
+                  <div>
+                    <h5 className="text-sm font-semibold text-white mb-2">Team Members</h5>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                      {team.config.members?.map((member, idx) => (
+                        <div
+                          key={idx}
+                          className="p-2 rounded-lg bg-gray-700/30 border border-gray-600/50"
+                        >
+                          <div className="font-medium text-sm text-white">{member.name}</div>
+                          <div className="text-xs text-gray-400">{member.agentType}</div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Task Stats */}
+                  <div>
+                    <h5 className="text-sm font-semibold text-white mb-2">Task Summary</h5>
+                    <div className="grid grid-cols-4 gap-2">
+                      <div className="p-2 rounded-lg bg-gray-700/30 text-center">
+                        <div className="text-lg font-bold text-white">{stats.total}</div>
+                        <div className="text-xs text-gray-400">Total</div>
+                      </div>
+                      <div className="p-2 rounded-lg bg-green-500/10 text-center">
+                        <div className="text-lg font-bold text-green-400">{stats.completed}</div>
+                        <div className="text-xs text-gray-400">Done</div>
+                      </div>
+                      <div className="p-2 rounded-lg bg-blue-500/10 text-center">
+                        <div className="text-lg font-bold text-blue-400">{stats.inProgress}</div>
+                        <div className="text-xs text-gray-400">Active</div>
+                      </div>
+                      <div className="p-2 rounded-lg bg-yellow-500/10 text-center">
+                        <div className="text-lg font-bold text-yellow-400">{stats.pending}</div>
+                        <div className="text-xs text-gray-400">Pending</div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Recent Tasks */}
+                  {team.tasks.slice(0, 5).length > 0 && (
+                    <div>
+                      <h5 className="text-sm font-semibold text-white mb-2">Recent Tasks</h5>
+                      <div className="space-y-1">
+                        {team.tasks.slice(0, 5).map((task, idx) => (
+                          <div
+                            key={idx}
+                            className="p-2 rounded-lg bg-gray-700/20 text-sm"
+                          >
+                            <div className="flex items-center gap-2">
+                              <span className={`h-2 w-2 rounded-full flex-shrink-0 ${
+                                task.status === 'completed' ? 'bg-green-400' :
+                                task.status === 'in_progress' ? 'bg-blue-400' :
+                                'bg-yellow-400'
+                              }`}></span>
+                              <span className="text-white truncate">{task.subject}</span>
+                              {task.owner && (
+                                <span className="ml-auto text-xs text-gray-400">{task.owner}</span>
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/__tests__/ConnectionStatus.test.jsx

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ConnectionStatus } from '../ConnectionStatus';
+
+describe('ConnectionStatus Component', () => {
+  it('renders connected status correctly', () => {
+    render(<ConnectionStatus isConnected={true} error={null} />);
+
+    const statusText = screen.getByText(/connected/i);
+    expect(statusText).toBeInTheDocument();
+  });
+
+  it('renders connecting status when disconnected without error', () => {
+    render(<ConnectionStatus isConnected={false} error={null} />);
+
+    const statusText = screen.getByText(/connecting/i);
+    expect(statusText).toBeInTheDocument();
+  });
+
+  it('renders error message when error provided', () => {
+    const errorMessage = 'Connection failed';
+    render(<ConnectionStatus isConnected={false} error={errorMessage} />);
+
+    const errorText = screen.getByText(errorMessage);
+    expect(errorText).toBeInTheDocument();
+  });
+
+  it('displays green indicator when connected', () => {
+    const { container } = render(<ConnectionStatus isConnected={true} error={null} />);
+
+    // Check for green color classes
+    const statusDiv = container.querySelector('.bg-green-500\\/20');
+    expect(statusDiv).toBeInTheDocument();
+    expect(statusDiv).toHaveClass('text-green-400');
+  });
+
+  it('displays red indicator when error occurs', () => {
+    const { container } = render(<ConnectionStatus isConnected={false} error="Error" />);
+
+    // Check for red color classes
+    const statusDiv = container.querySelector('.bg-red-500\\/20');
+    expect(statusDiv).toBeInTheDocument();
+    expect(statusDiv).toHaveClass('text-red-400');
+  });
+
+  it('displays yellow indicator when connecting', () => {
+    const { container } = render(<ConnectionStatus isConnected={false} error={null} />);
+
+    // Check for yellow color classes
+    const statusDiv = container.querySelector('.bg-yellow-500\\/20');
+    expect(statusDiv).toBeInTheDocument();
+    expect(statusDiv).toHaveClass('text-yellow-400');
+  });
+});

package/src/components/__tests__/StatsOverview.test.jsx

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { StatsOverview } from '../StatsOverview';
+
+describe('StatsOverview Component', () => {
+  const mockStats = {
+    totalTeams: 4,
+    totalAgents: 19,
+    totalTasks: 42,
+    inProgressTasks: 18,
+    completedTasks: 16,
+    blockedTasks: 2
+  };
+
+  it('renders all stats correctly', () => {
+    render(<StatsOverview stats={mockStats} />);
+
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('19')).toBeInTheDocument();
+    expect(screen.getByText('42')).toBeInTheDocument();
+    expect(screen.getByText('18')).toBeInTheDocument();
+    expect(screen.getByText('16')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+
+  it('renders nothing when no stats provided', () => {
+    const { container } = render(<StatsOverview stats={null} />);
+
+    // Component returns null when stats is null
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders all stat labels correctly', () => {
+    render(<StatsOverview stats={mockStats} />);
+
+    expect(screen.getByText('Active Teams')).toBeInTheDocument();
+    expect(screen.getByText('Total Agents')).toBeInTheDocument();
+    expect(screen.getByText('Total Tasks')).toBeInTheDocument();
+    expect(screen.getByText('In Progress')).toBeInTheDocument();
+    expect(screen.getByText('Completed')).toBeInTheDocument();
+    expect(screen.getByText('Blocked')).toBeInTheDocument();
+  });
+
+  it('renders with correct grid layout', () => {
+    const { container } = render(<StatsOverview stats={mockStats} />);
+
+    const grid = container.querySelector('.grid');
+    expect(grid).toHaveClass('grid-cols-2', 'md:grid-cols-3', 'lg:grid-cols-6');
+  });
+
+  it('renders icons for each stat', () => {
+    const { container } = render(<StatsOverview stats={mockStats} />);
+
+    // Check for 6 icon containers (one for each stat)
+    const iconContainers = container.querySelectorAll('.flex-shrink-0');
+    expect(iconContainers.length).toBe(6);
+  });
+
+  it('displays stat values with correct formatting', () => {
+    render(<StatsOverview stats={mockStats} />);
+
+    // Check that values are displayed as bold white text
+    const valueElements = screen.getByText('4').closest('p');
+    expect(valueElements).toHaveClass('text-xl', 'font-bold', 'text-white');
+  });
+});

package/src/config/constants.js

@@ -0,0 +1,59 @@
+// WebSocket Configuration
+export const WS_CONFIG = {
+  RECONNECT_DELAY: 3000,
+  PING_INTERVAL: 30000,
+  MAX_RECONNECT_ATTEMPTS: 5
+};
+
+// Server Configuration
+export const SERVER_CONFIG = {
+  WS_PORT: 3001,
+  API_PORT: 3001,
+  ALLOWED_ORIGINS: ['http://localhost:5173', 'http://127.0.0.1:5173']
+};
+
+// UI Configuration
+export const UI_CONFIG = {
+  MAX_ACTIVITY_ITEMS: 50,
+  ACTIVITY_UPDATE_INTERVAL: 5000,
+  PULSE_ANIMATION_DURATION: 300,
+  DEFAULT_TEAM_EXPANDED: true
+};
+
+// Task Status
+export const TASK_STATUS = {
+  PENDING: 'pending',
+  IN_PROGRESS: 'in_progress',
+  COMPLETED: 'completed',
+  DELETED: 'deleted'
+};
+
+// Theme Colors
+export const THEME_COLORS = {
+  CLAUDE_ORANGE: '#f28234',
+  SUCCESS: '#10b981',
+  WARNING: '#f59e0b',
+  ERROR: '#ef4444',
+  INFO: '#3b82f6'
+};
+
+// Message Types
+export const MESSAGE_TYPES = {
+  INITIAL_DATA: 'initial_data',
+  TEAMS_UPDATE: 'teams_update',
+  TASK_UPDATE: 'task_update'
+};
+
+// Rate Limiting
+export const RATE_LIMIT = {
+  WINDOW_MS: 15 * 60 * 1000, // 15 minutes
+  MAX_REQUESTS: 100
+};
+
+// File Watching
+export const WATCH_CONFIG = {
+  POLLING_INTERVAL: 1000,
+  STABILITY_THRESHOLD: 500,
+  POLL_INTERVAL: 100,
+  DEPTH: 10
+};