claude-team-dashboard 1.2.2

package/src/components/ConnectionStatus.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { WifiOff, RefreshCw, Zap } from 'lucide-react';
+
+export function ConnectionStatus({ isConnected, error }) {
+  if (isConnected) {
+    return (
+      <div
+        className="inline-flex items-center gap-2.5 px-4 py-2 rounded-xl font-semibold text-sm transition-all duration-300 group"
+        role="status"
+        aria-live="polite"
+        aria-label="Connection status: Connected"
+        style={{
+          background: 'linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(21, 128, 61, 0.15) 100%)',
+          color: '#4ade80',
+          border: '1px solid rgba(34, 197, 94, 0.4)',
+          boxShadow: '0 4px 12px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)',
+          textShadow: '0 0 10px rgba(34, 197, 94, 0.4)'
+        }}
+      >
+        {/* Animated Pulse Indicator */}
+        <div className="relative">
+          <Zap
+            className="h-4 w-4 group-hover:scale-110 transition-transform duration-300"
+            style={{
+              filter: 'drop-shadow(0 0 6px rgba(34, 197, 94, 0.6))'
+            }}
+          />
+          <div
+            className="absolute inset-0 rounded-full animate-ping"
+            style={{
+              background: 'rgba(34, 197, 94, 0.4)'
+            }}
+          />
+        </div>
+
+        <span className="tracking-wide">Connected</span>
+
+        {/* Live Indicator Dot */}
+        <div
+          className="h-2 w-2 rounded-full animate-pulse"
+          style={{
+            background: '#4ade80',
+            boxShadow: '0 0 8px rgba(34, 197, 94, 0.8), 0 0 16px rgba(34, 197, 94, 0.4)'
+          }}
+        />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div
+        className="inline-flex items-center gap-2.5 px-4 py-2 rounded-xl font-semibold text-sm transition-all duration-300"
+        role="alert"
+        aria-live="assertive"
+        aria-label={`Connection error: ${error}`}
+        style={{
+          background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.15) 100%)',
+          color: '#f87171',
+          border: '1px solid rgba(239, 68, 68, 0.4)',
+          boxShadow: '0 4px 12px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)',
+          textShadow: '0 0 10px rgba(239, 68, 68, 0.4)',
+          animation: 'shake 0.5s ease-in-out'
+        }}
+      >
+        <WifiOff
+          className="h-4 w-4"
+          style={{
+            filter: 'drop-shadow(0 0 6px rgba(239, 68, 68, 0.6))'
+          }}
+        />
+        <span className="tracking-wide truncate max-w-xs">{error}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="inline-flex items-center gap-2.5 px-4 py-2 rounded-xl font-semibold text-sm transition-all duration-300"
+      role="status"
+      aria-live="polite"
+      aria-label="Connection status: Connecting"
+      aria-busy="true"
+      style={{
+        background: 'linear-gradient(135deg, rgba(234, 179, 8, 0.25) 0%, rgba(202, 138, 4, 0.15) 100%)',
+        color: '#facc15',
+        border: '1px solid rgba(234, 179, 8, 0.4)',
+        boxShadow: '0 4px 12px rgba(234, 179, 8, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)',
+        textShadow: '0 0 10px rgba(234, 179, 8, 0.4)'
+      }}
+    >
+      <RefreshCw
+        className="h-4 w-4 animate-spin"
+        style={{
+          filter: 'drop-shadow(0 0 6px rgba(234, 179, 8, 0.6))',
+          animationDuration: '2s'
+        }}
+      />
+      <span className="tracking-wide">Connecting...</span>
+
+      {/* Pulsing Dots */}
+      <div className="flex gap-1">
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            className="h-1.5 w-1.5 rounded-full"
+            style={{
+              background: '#facc15',
+              animation: 'pulse 1.4s ease-in-out infinite',
+              animationDelay: `${i * 0.2}s`,
+              boxShadow: '0 0 6px rgba(234, 179, 8, 0.6)'
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+ConnectionStatus.propTypes = {
+  isConnected: PropTypes.bool.isRequired,
+  error: PropTypes.string
+};

package/src/components/DetailedTaskProgress.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { CheckCircle, Clock, AlertCircle, TrendingUp } from 'lucide-react';
+
+export function DetailedTaskProgress({ tasks }) {
+  if (!tasks || tasks.length === 0) return null;
+
+  const pendingTasks = tasks.filter(t => t.status === 'pending');
+  const inProgressTasks = tasks.filter(t => t.status === 'in_progress');
+  const completedTasks = tasks.filter(t => t.status === 'completed');
+  const blockedTasks = tasks.filter(t => t.blockedBy && t.blockedBy.length > 0);
+
+  const completionPercentage = tasks.length > 0
+    ? Math.round((completedTasks.length / tasks.length) * 100)
+    : 0;
+
+  return (
+    <div className="card">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <TrendingUp className="h-5 w-5 text-claude-orange" />
+          <h3 className="text-lg font-semibold text-white">Task Progress Details</h3>
+        </div>
+        <span className="text-2xl font-bold text-white">{completionPercentage}%</span>
+      </div>
+
+      {/* Overall Progress Bar */}
+      <div className="mb-6">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm text-gray-400">Overall Completion</span>
+          <span className="text-sm text-white font-semibold">
+            {completedTasks.length} / {tasks.length} tasks
+          </span>
+        </div>
+        <div className="w-full bg-gray-700 rounded-full h-3 overflow-hidden">
+          <div
+            className="h-3 rounded-full transition-all duration-500"
+            style={{
+              width: `${completionPercentage}%`,
+              background: 'linear-gradient(90deg, #10b981 0%, #34d399 50%, #6ee7b7 100%)',
+              boxShadow: '0 0 10px rgba(16, 185, 129, 0.5)'
+            }}
+          ></div>
+        </div>
+      </div>
+
+      {/* Detailed Breakdown */}
+      <div className="space-y-3">
+        {/* Pending */}
+        <div className="flex items-center justify-between p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/30">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-yellow-500/20">
+              <Clock className="h-4 w-4 text-yellow-400" />
+            </div>
+            <div>
+              <div className="text-sm font-semibold text-white">Pending Tasks</div>
+              <div className="text-xs text-gray-400">Waiting to start</div>
+            </div>
+          </div>
+          <div className="text-right">
+            <div className="text-xl font-bold text-yellow-400">{pendingTasks.length}</div>
+            <div className="text-xs text-gray-400">
+              {tasks.length > 0 ? Math.round((pendingTasks.length / tasks.length) * 100) : 0}%
+            </div>
+          </div>
+        </div>
+
+        {/* In Progress */}
+        <div className="flex items-center justify-between p-3 rounded-lg bg-blue-500/10 border border-blue-500/30">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-blue-500/20">
+              <div className="h-4 w-4 border-2 border-blue-400 border-t-transparent rounded-full animate-spin"></div>
+            </div>
+            <div>
+              <div className="text-sm font-semibold text-white">In Progress</div>
+              <div className="text-xs text-gray-400">Currently working</div>
+            </div>
+          </div>
+          <div className="text-right">
+            <div className="text-xl font-bold text-blue-400">{inProgressTasks.length}</div>
+            <div className="text-xs text-gray-400">
+              {tasks.length > 0 ? Math.round((inProgressTasks.length / tasks.length) * 100) : 0}%
+            </div>
+          </div>
+        </div>
+
+        {/* Completed */}
+        <div className="flex items-center justify-between p-3 rounded-lg bg-green-500/10 border border-green-500/30">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-green-500/20">
+              <CheckCircle className="h-4 w-4 text-green-400" />
+            </div>
+            <div>
+              <div className="text-sm font-semibold text-white">Completed</div>
+              <div className="text-xs text-gray-400">Successfully finished</div>
+            </div>
+          </div>
+          <div className="text-right">
+            <div className="text-xl font-bold text-green-400">{completedTasks.length}</div>
+            <div className="text-xs text-gray-400">{completionPercentage}%</div>
+          </div>
+        </div>
+
+        {/* Blocked */}
+        {blockedTasks.length > 0 && (
+          <div className="flex items-center justify-between p-3 rounded-lg bg-red-500/10 border border-red-500/30">
+            <div className="flex items-center gap-3">
+              <div className="p-2 rounded-lg bg-red-500/20">
+                <AlertCircle className="h-4 w-4 text-red-400" />
+              </div>
+              <div>
+                <div className="text-sm font-semibold text-white">Blocked</div>
+                <div className="text-xs text-gray-400">Waiting on dependencies</div>
+              </div>
+            </div>
+            <div className="text-right">
+              <div className="text-xl font-bold text-red-400">{blockedTasks.length}</div>
+              <div className="text-xs text-gray-400">
+                {tasks.length > 0 ? Math.round((blockedTasks.length / tasks.length) * 100) : 0}%
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ErrorBoundary.jsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Activity, AlertCircle, RefreshCw } from 'lucide-react';
+
+export class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+    this.setState({
+      error,
+      errorInfo
+    });
+  }
+
+  handleReload = () => {
+    window.location.reload();
+  };
+
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null
+    });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-6">
+          <div className="max-w-2xl w-full">
+            {/* Error Card */}
+            <div className="card p-8 text-center">
+              {/* Icon */}
+              <div className="mb-6 flex justify-center">
+                <div className="relative">
+                  <Activity className="h-20 w-20 text-claude-orange animate-pulse" />
+                  <AlertCircle className="h-8 w-8 text-red-400 absolute -top-2 -right-2" />
+                </div>
+              </div>
+
+              {/* Title */}
+              <h1 className="text-3xl font-bold text-white mb-3">
+                Oops! Something went wrong
+              </h1>
+
+              {/* Description */}
+              <p className="text-gray-400 mb-6">
+                The dashboard encountered an unexpected error. Don't worry, your data is safe.
+              </p>
+
+              {/* Error Details (Development) */}
+              {process.env.NODE_ENV === 'development' && this.state.error && (
+                <div className="mb-6 text-left bg-gray-800 rounded-lg p-4 border border-red-500/30">
+                  <h3 className="text-sm font-semibold text-red-400 mb-2">Error Details:</h3>
+                  <pre className="text-xs text-gray-300 overflow-x-auto">
+                    {this.state.error.toString()}
+                  </pre>
+                  {this.state.errorInfo && (
+                    <details className="mt-3">
+                      <summary className="text-xs text-gray-400 cursor-pointer hover:text-white">
+                        Component Stack
+                      </summary>
+                      <pre className="text-xs text-gray-300 mt-2 overflow-x-auto">
+                        {this.state.errorInfo.componentStack}
+                      </pre>
+                    </details>
+                  )}
+                </div>
+              )}
+
+              {/* Action Buttons */}
+              <div className="flex gap-4 justify-center">
+                <button
+                  onClick={this.handleReset}
+                  className="flex items-center gap-2 px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors"
+                >
+                  <RefreshCw className="h-4 w-4" />
+                  Try Again
+                </button>
+                <button
+                  onClick={this.handleReload}
+                  className="flex items-center gap-2 px-6 py-3 bg-claude-orange hover:bg-orange-600 text-white rounded-lg font-medium transition-colors"
+                >
+                  <RefreshCw className="h-4 w-4" />
+                  Reload Dashboard
+                </button>
+              </div>
+
+              {/* Help Text */}
+              <p className="text-sm text-gray-500 mt-6">
+                If this error persists, please{' '}
+                <a
+                  href="https://github.com/mukul975/agentdashboard/issues"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-claude-orange hover:text-orange-400 underline"
+                >
+                  report it on GitHub
+                </a>
+              </p>
+            </div>
+
+            {/* Tips Card */}
+            <div className="mt-6 card p-6">
+              <h3 className="text-lg font-semibold text-white mb-3">Troubleshooting Tips:</h3>
+              <ul className="text-sm text-gray-400 space-y-2">
+                <li>• Check if the backend server is running on port 3001</li>
+                <li>• Verify that Claude Code agent teams are active</li>
+                <li>• Try clearing your browser cache and reloading</li>
+                <li>• Check the browser console for additional error details</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/Header.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Activity, ExternalLink, Menu, X } from 'lucide-react';
+import { ConnectionStatus } from './ConnectionStatus';
+
+export function Header({ isConnected, error, onMenuToggle, isMenuOpen }) {
+  return (
+    <header
+      className="sticky top-0 z-50 border-b backdrop-blur-xl"
+      style={{
+        background: 'linear-gradient(135deg, rgba(17, 24, 39, 0.85) 0%, rgba(31, 41, 55, 0.9) 100%)',
+        borderColor: 'rgba(249, 115, 22, 0.15)',
+        boxShadow: '0 4px 24px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(249, 115, 22, 0.1)'
+      }}
+      role="banner"
+    >
+      <div className="container mx-auto px-6 py-4">
+        <div className="flex items-center justify-between">
+          {/* Logo and Title */}
+          <div className="flex items-center gap-4">
+            {/* Mobile Menu Button */}
+            <button
+              onClick={onMenuToggle}
+              className="lg:hidden p-2 rounded-lg transition-all duration-200 hover:bg-gray-700/50"
+              aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+            >
+              {isMenuOpen ? (
+                <X className="h-6 w-6 text-gray-300" />
+              ) : (
+                <Menu className="h-6 w-6 text-gray-300" />
+              )}
+            </button>
+
+            {/* Logo with Gradient Animation */}
+            <div
+              className="relative p-3 rounded-xl overflow-hidden group"
+              style={{
+                background: 'linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(251, 146, 60, 0.15) 100%)',
+                boxShadow: '0 4px 12px rgba(249, 115, 22, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)',
+                border: '1px solid rgba(249, 115, 22, 0.3)'
+              }}
+            >
+              {/* Animated Background Overlay */}
+              <div
+                className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                style={{
+                  background: 'linear-gradient(135deg, rgba(249, 115, 22, 0.3), rgba(251, 146, 60, 0.25))',
+                }}
+              />
+
+              <Activity
+                className="h-7 w-7 text-claude-orange relative z-10 group-hover:scale-110 transition-transform duration-300"
+                style={{
+                  filter: 'drop-shadow(0 0 8px rgba(249, 115, 22, 0.5))'
+                }}
+              />
+
+              {/* Rotating Glow */}
+              <div
+                className="absolute inset-0 opacity-50"
+                style={{
+                  background: 'radial-gradient(circle at center, rgba(249, 115, 22, 0.4), transparent 70%)',
+                  animation: 'spin 20s linear infinite'
+                }}
+              />
+            </div>
+
+            {/* Title and Subtitle */}
+            <div>
+              <h1
+                className="text-2xl font-bold gradient-text"
+                style={{
+                  background: 'linear-gradient(135deg, #fff 0%, #fb923c 100%)',
+                  WebkitBackgroundClip: 'text',
+                  WebkitTextFillColor: 'transparent',
+                  backgroundClip: 'text',
+                  letterSpacing: '-0.02em'
+                }}
+              >
+                Claude Agent Dashboard
+              </h1>
+              <p
+                className="text-sm mt-0.5"
+                style={{
+                  color: 'rgba(209, 213, 219, 0.8)',
+                  letterSpacing: '0.01em'
+                }}
+              >
+                Real-time agent team monitoring
+              </p>
+            </div>
+          </div>
+
+          {/* Right Side Actions */}
+          <div className="flex items-center gap-4">
+            {/* Connection Status */}
+            <ConnectionStatus isConnected={isConnected} error={error} />
+
+            {/* Documentation Link */}
+            <a
+              href="https://code.claude.com/docs/en/agent-teams"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hidden md:flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all duration-300 group"
+              style={{
+                background: 'linear-gradient(135deg, rgba(55, 65, 81, 0.6) 0%, rgba(31, 41, 55, 0.6) 100%)',
+                border: '1px solid rgba(75, 85, 99, 0.5)',
+                color: '#e5e7eb',
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05)'
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = 'linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(251, 146, 60, 0.15) 100%)';
+                e.currentTarget.style.borderColor = 'rgba(249, 115, 22, 0.4)';
+                e.currentTarget.style.transform = 'translateY(-2px)';
+                e.currentTarget.style.boxShadow = '0 4px 12px rgba(249, 115, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'linear-gradient(135deg, rgba(55, 65, 81, 0.6) 0%, rgba(31, 41, 55, 0.6) 100%)';
+                e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)';
+                e.currentTarget.style.transform = 'translateY(0)';
+                e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05)';
+              }}
+            >
+              <ExternalLink className="h-4 w-4 group-hover:rotate-12 transition-transform duration-300" />
+              <span className="text-sm">Documentation</span>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      {/* Animated Bottom Border */}
+      <div
+        className="absolute bottom-0 left-0 right-0 h-px"
+        style={{
+          background: 'linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.5) 50%, transparent 100%)',
+          backgroundSize: '200% 100%',
+          animation: 'gradient-flow 3s ease infinite'
+        }}
+      />
+    </header>
+  );
+}
+
+Header.propTypes = {
+  isConnected: PropTypes.bool.isRequired,
+  error: PropTypes.string,
+  onMenuToggle: PropTypes.func,
+  isMenuOpen: PropTypes.bool
+};
+
+Header.defaultProps = {
+  onMenuToggle: () => {},
+  isMenuOpen: false
+};