claude-team-dashboard 1.2.2

package/src/components/AgentOutputViewer.jsx

@@ -0,0 +1,334 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Terminal, Maximize2, Minimize2, Download, RefreshCw, AlertCircle } from 'lucide-react';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
+
+export function AgentOutputViewer({ agentOutputs }) {
+  const [selectedOutput, setSelectedOutput] = useState(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [refreshError, setRefreshError] = useState(null);
+  const [localOutputs, setLocalOutputs] = useState(agentOutputs || []);
+  const outputRef = useRef(null);
+  const pollingIntervalRef = useRef(null);
+
+  // Fetch outputs from API
+  const fetchOutputs = useCallback(async () => {
+    try {
+      setIsRefreshing(true);
+      setRefreshError(null);
+
+      const response = await fetch(`http://${window.location.hostname}:3001/api/agent-outputs`);
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+
+      if (data.outputs && Array.isArray(data.outputs)) {
+        setLocalOutputs(data.outputs);
+        return data.outputs;
+      } else {
+        throw new Error('Invalid response format');
+      }
+    } catch (error) {
+      console.error('Error fetching agent outputs:', error);
+      setRefreshError(error.message);
+      return null;
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, []);
+
+  // Manual refresh handler
+  const handleManualRefresh = useCallback(async () => {
+    await fetchOutputs();
+  }, [fetchOutputs]);
+
+  // Use WebSocket data when available, fallback to polling
+  useEffect(() => {
+    if (agentOutputs && agentOutputs.length > 0) {
+      setLocalOutputs(agentOutputs);
+      setRefreshError(null);
+    }
+  }, [agentOutputs]);
+
+  // Fallback polling mechanism (only if no WebSocket data)
+  useEffect(() => {
+    // If we haven't received any data via WebSocket, start polling
+    if (!agentOutputs || agentOutputs.length === 0) {
+      // Initial fetch
+      fetchOutputs();
+
+      // Poll every 5 seconds as fallback
+      pollingIntervalRef.current = setInterval(() => {
+        fetchOutputs();
+      }, 5000);
+    } else {
+      // Clear polling if WebSocket is working
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+    }
+
+    return () => {
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+      }
+    };
+  }, [agentOutputs, fetchOutputs]);
+
+  useEffect(() => {
+    // Auto-select most recent output
+    if (localOutputs && localOutputs.length > 0 && !selectedOutput) {
+      setSelectedOutput(localOutputs[0]);
+    }
+
+    // Update selected output if it exists in new data
+    if (selectedOutput && localOutputs && localOutputs.length > 0) {
+      const updatedOutput = localOutputs.find(o => o.taskId === selectedOutput.taskId);
+      if (updatedOutput && updatedOutput.lastModified !== selectedOutput.lastModified) {
+        setSelectedOutput(updatedOutput);
+      }
+    }
+  }, [localOutputs, selectedOutput]);
+
+  useEffect(() => {
+    // Auto-scroll to bottom when content updates
+    if (autoScroll && outputRef.current) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+  }, [selectedOutput, autoScroll]);
+
+  const downloadOutput = () => {
+    if (!selectedOutput) return;
+
+    const blob = new Blob([selectedOutput.content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `agent-${selectedOutput.taskId}-output.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const formatSize = (bytes) => {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  };
+
+  if (!localOutputs || localOutputs.length === 0) {
+    return (
+      <div className="card">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <Terminal className="h-5 w-5 text-claude-orange" />
+            <h3 className="text-lg font-semibold text-white">Agent Output Stream</h3>
+          </div>
+          <button
+            onClick={handleManualRefresh}
+            disabled={isRefreshing}
+            className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors disabled:opacity-50"
+            aria-label="Refresh outputs"
+            title="Refresh outputs"
+          >
+            <RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+
+        {refreshError && (
+          <div className="mb-4 p-3 rounded-lg bg-red-900/20 border border-red-500/30 flex items-start gap-2">
+            <AlertCircle className="h-5 w-5 text-red-400 flex-shrink-0 mt-0.5" />
+            <div className="flex-1">
+              <p className="text-sm text-red-400 font-medium">Failed to load outputs</p>
+              <p className="text-xs text-red-400/80 mt-1">{refreshError}</p>
+            </div>
+          </div>
+        )}
+
+        <div className="text-center py-12 text-gray-400">
+          <Terminal className="h-16 w-16 mx-auto mb-3 opacity-50" />
+          <p className="text-sm">No agent outputs available</p>
+          <p className="text-xs mt-1">Real-time teammate outputs will stream here</p>
+          {isRefreshing && (
+            <p className="text-xs mt-2 text-claude-orange">Loading outputs...</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`card ${isExpanded ? 'fixed inset-4 z-50' : ''}`}>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <Terminal className="h-5 w-5 text-claude-orange animate-pulse" />
+          <h3 className="text-lg font-semibold text-white">Agent Output Stream</h3>
+          <span className="px-2 py-0.5 bg-green-500/20 text-green-400 text-xs rounded-full border border-green-500/30 flex items-center gap-1">
+            <span className="h-2 w-2 rounded-full bg-green-400 animate-pulse"></span>
+            LIVE
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={handleManualRefresh}
+            disabled={isRefreshing}
+            className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            aria-label="Refresh outputs"
+            title="Refresh outputs"
+          >
+            <RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
+          </button>
+          <button
+            onClick={() => setAutoScroll(!autoScroll)}
+            className={`px-3 py-2 rounded-lg text-xs font-medium transition-colors ${
+              autoScroll
+                ? 'bg-green-500/20 text-green-400 border border-green-500/30'
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            }`}
+            aria-label={autoScroll ? "Auto-scroll enabled" : "Enable auto-scroll"}
+            title={autoScroll ? "Auto-scroll enabled" : "Enable auto-scroll"}
+          >
+            {autoScroll ? 'Auto-scroll ON' : 'Auto-scroll OFF'}
+          </button>
+          <button
+            onClick={downloadOutput}
+            disabled={!selectedOutput}
+            className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            aria-label="Download agent output"
+            title="Download agent output"
+          >
+            <Download className="h-4 w-4" />
+          </button>
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors"
+            aria-label={isExpanded ? 'Minimize output viewer' : 'Maximize output viewer'}
+            aria-expanded={isExpanded}
+            title={isExpanded ? 'Minimize' : 'Maximize'}
+          >
+            {isExpanded ? (
+              <Minimize2 className="h-4 w-4" />
+            ) : (
+              <Maximize2 className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Error Display */}
+      {refreshError && (
+        <div className="mb-4 p-3 rounded-lg bg-yellow-900/20 border border-yellow-500/30 flex items-start gap-2">
+          <AlertCircle className="h-5 w-5 text-yellow-400 flex-shrink-0 mt-0.5" />
+          <div className="flex-1">
+            <p className="text-sm text-yellow-400 font-medium">Connection Issue</p>
+            <p className="text-xs text-yellow-400/80 mt-1">
+              {refreshError} - Displaying cached data or using fallback polling
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Output Selector */}
+      <div className="mb-4">
+        <label className="block text-sm text-gray-400 mb-2">Select Agent Output:</label>
+        <div className="flex gap-2 overflow-x-auto pb-2">
+          {localOutputs.map((output, index) => (
+            <button
+              key={output.taskId}
+              onClick={() => setSelectedOutput(output)}
+              className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all ${
+                selectedOutput?.taskId === output.taskId
+                  ? 'bg-claude-orange text-white shadow-lg'
+                  : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+              }`}
+              style={{
+                animation: `fadeInScale 0.3s ease-out ${index * 0.05}s backwards`
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Terminal className="h-4 w-4" />
+                <span>Task {output.taskId}</span>
+              </div>
+              <div className="text-xs opacity-75 mt-0.5">
+                {dayjs(output.lastModified).fromNow()}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Output Display */}
+      {selectedOutput && (
+        <>
+          {/* Output Info */}
+          <div className="mb-3 p-3 rounded-lg bg-gray-700/30 border border-gray-600/50">
+            <div className="flex items-center justify-between text-sm">
+              <div className="flex items-center gap-4">
+                <span className="text-gray-400">
+                  Task ID: <span className="text-white font-mono">{selectedOutput.taskId}</span>
+                </span>
+                <span className="text-gray-400">
+                  Size: <span className="text-white">{formatSize(selectedOutput.size)}</span>
+                </span>
+              </div>
+              <span className="text-gray-400">
+                Updated: <span className="text-white">{dayjs(selectedOutput.lastModified).fromNow()}</span>
+              </span>
+            </div>
+          </div>
+
+          {/* Terminal Output */}
+          <div
+            ref={outputRef}
+            className={`font-mono text-sm bg-gray-900 rounded-lg p-4 overflow-auto border border-gray-700 ${
+              isExpanded ? 'h-[calc(100vh-300px)]' : 'h-[500px]'
+            }`}
+            onScroll={(e) => {
+              const { scrollTop, scrollHeight, clientHeight } = e.target;
+              const isAtBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 10;
+              if (!isAtBottom && autoScroll) {
+                setAutoScroll(false);
+              }
+            }}
+          >
+            {selectedOutput.content ? (
+              <pre className="text-green-400 whitespace-pre-wrap break-words">
+                {selectedOutput.content}
+              </pre>
+            ) : (
+              <div className="text-gray-500 text-center py-12">
+                <Terminal className="h-12 w-12 mx-auto mb-3 opacity-50" />
+                <p className="text-sm font-medium mb-2">No output content available</p>
+                <p className="text-xs text-gray-600 max-w-md mx-auto">
+                  This task output is empty. Agent outputs will appear here when agents write to their output streams during task execution.
+                </p>
+                <p className="text-xs text-gray-600 mt-2">
+                  Empty outputs are normal for agents that complete tasks quickly without verbose logging.
+                </p>
+              </div>
+            )}
+          </div>
+
+          {/* Footer Info */}
+          <div className="mt-3 text-xs text-gray-400 text-center flex items-center justify-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-green-400 animate-pulse"></span>
+            <span>
+              Real-time output from Claude Code agent • Updates via WebSocket
+              {!agentOutputs || agentOutputs.length === 0 ? ' (fallback polling active)' : ''}
+            </span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/ArchiveViewer.jsx

@@ -0,0 +1,283 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Archive, Calendar, Users, CheckCircle, Clock, TrendingUp, ChevronDown, ChevronUp, Package, FileText } from 'lucide-react';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import duration from 'dayjs/plugin/duration';
+
+dayjs.extend(relativeTime);
+dayjs.extend(duration);
+
+export function ArchiveViewer() {
+  const [archives, setArchives] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [expandedArchive, setExpandedArchive] = useState(null);
+  const [selectedArchiveDetails, setSelectedArchiveDetails] = useState(null);
+
+  useEffect(() => {
+    fetchArchives();
+  }, []);
+
+  const fetchArchives = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('http://localhost:3001/api/archive');
+      if (!response.ok) {
+        throw new Error('Failed to fetch archives');
+      }
+      const data = await response.json();
+      setArchives(data.archives || []);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error('Error fetching archives:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchArchiveDetails = async (filename) => {
+    try {
+      const response = await fetch(`http://localhost:3001/api/archive/${filename}`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch archive details');
+      }
+      const data = await response.json();
+      setSelectedArchiveDetails(data);
+    } catch (err) {
+      console.error('Error fetching archive details:', err);
+    }
+  };
+
+  const toggleExpand = async (filename) => {
+    if (expandedArchive === filename) {
+      setExpandedArchive(null);
+      setSelectedArchiveDetails(null);
+    } else {
+      setExpandedArchive(filename);
+      await fetchArchiveDetails(filename);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="card">
+        <div className="flex items-center justify-center py-12">
+          <div className="text-center">
+            <Package className="h-12 w-12 text-gray-500 mx-auto mb-3 animate-pulse" />
+            <p className="text-gray-400">Loading archived teams...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="card border-l-4 border-l-red-500">
+        <div className="flex items-center gap-3 text-red-400">
+          <Archive className="h-6 w-6" />
+          <div>
+            <h3 className="font-semibold">Error Loading Archives</h3>
+            <p className="text-sm text-gray-400 mt-1">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (archives.length === 0) {
+    return (
+      <div className="card">
+        <div className="text-center py-12">
+          <Archive className="h-16 w-16 text-gray-600 mx-auto mb-4" />
+          <h3 className="text-xl font-semibold text-white mb-2">
+            No Archived Teams Yet
+          </h3>
+          <p className="text-gray-400">
+            When your agent teams complete their work, they'll be archived here for reference
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="card border-l-4 border-l-purple-500 bg-gradient-to-r from-purple-900/20 to-transparent">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="bg-purple-500/20 p-3 rounded-lg">
+              <Archive className="h-6 w-6 text-purple-400" />
+            </div>
+            <div>
+              <h2 className="text-2xl font-bold text-white">Team Archive</h2>
+              <p className="text-gray-400 text-sm mt-1">
+                History of completed agent teams and their accomplishments
+              </p>
+            </div>
+          </div>
+          <div className="bg-purple-500/20 px-4 py-2 rounded-lg">
+            <span className="text-2xl font-bold text-purple-400">{archives.length}</span>
+            <span className="text-sm text-gray-400 ml-2">archived</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Archive List */}
+      {archives.map((archive, index) => (
+        <div
+          key={archive.filename}
+          className="card border-l-4 border-l-purple-500 hover:border-l-purple-400 transition-all duration-300"
+        >
+          {/* Archive Header */}
+          <div className="flex items-start justify-between mb-4">
+            <div className="flex-1">
+              <div className="flex items-center gap-3 mb-2">
+                <h3 className="text-xl font-bold text-white">{archive.overview?.split('"')[1] || 'Unknown Team'}</h3>
+                <span className="px-3 py-1 bg-purple-500/20 text-purple-400 text-xs font-medium rounded-full">
+                  #{index + 1}
+                </span>
+              </div>
+              <p className="text-gray-300 text-sm leading-relaxed">{archive.overview}</p>
+            </div>
+            <button
+              onClick={() => toggleExpand(archive.filename)}
+              className="ml-4 p-2 hover:bg-gray-700 rounded-lg transition-colors flex-shrink-0"
+              aria-label={expandedArchive === archive.filename ? "Collapse details" : "Expand details"}
+              aria-expanded={expandedArchive === archive.filename}
+            >
+              {expandedArchive === archive.filename ? (
+                <ChevronUp className="h-5 w-5 text-gray-400" />
+              ) : (
+                <ChevronDown className="h-5 w-5 text-gray-400" />
+              )}
+            </button>
+          </div>
+
+          {/* Archive Stats */}
+          <div className="flex flex-wrap gap-3 mb-4">
+            <div className="flex items-center gap-2 bg-gray-700/50 px-3 py-2 rounded-lg">
+              <Calendar className="h-4 w-4 text-purple-400" />
+              <span className="text-sm text-gray-300">
+                {dayjs(archive.archivedAt).format('MMM D, YYYY')}
+              </span>
+              <span className="text-xs text-gray-500">
+                ({dayjs(archive.archivedAt).fromNow()})
+              </span>
+            </div>
+
+            {archive.members && (
+              <div className="flex items-center gap-2 bg-gray-700/50 px-3 py-2 rounded-lg">
+                <Users className="h-4 w-4 text-blue-400" />
+                <span className="text-sm text-gray-300">
+                  {Array.isArray(archive.members) ? archive.members.length : 0} members
+                </span>
+              </div>
+            )}
+
+            {archive.accomplishments && (
+              <div className="flex items-center gap-2 bg-gray-700/50 px-3 py-2 rounded-lg">
+                <CheckCircle className="h-4 w-4 text-green-400" />
+                <span className="text-sm text-gray-300">
+                  {archive.accomplishments.length} completed
+                </span>
+              </div>
+            )}
+
+            {archive.duration && (
+              <div className="flex items-center gap-2 bg-gray-700/50 px-3 py-2 rounded-lg">
+                <Clock className="h-4 w-4 text-orange-400" />
+                <span className="text-sm text-gray-300">
+                  {archive.duration}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Quick Summary */}
+          {archive.created && (
+            <div className="bg-gray-800/50 rounded-lg p-3 mb-4">
+              <p className="text-sm text-gray-400 flex items-center gap-2">
+                <TrendingUp className="h-4 w-4 text-purple-400" />
+                {archive.created}
+              </p>
+            </div>
+          )}
+
+          {/* Expanded Details */}
+          {expandedArchive === archive.filename && (
+            <div className="mt-4 pt-4 border-t border-gray-700 space-y-4 animate-fadeIn">
+              {/* Team Members */}
+              {archive.members && archive.members.length > 0 && (
+                <div>
+                  <h4 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
+                    <Users className="h-5 w-5 text-blue-400" />
+                    Team Members
+                  </h4>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                    {archive.members.map((member, idx) => (
+                      <div key={idx} className="bg-gray-800/50 rounded-lg p-3 flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold text-sm">
+                          {member.split(' ')[0]?.[0] || '?'}
+                        </div>
+                        <span className="text-sm text-gray-300">{member}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Accomplishments */}
+              {archive.accomplishments && archive.accomplishments.length > 0 && (
+                <div>
+                  <h4 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
+                    <CheckCircle className="h-5 w-5 text-green-400" />
+                    Key Accomplishments
+                  </h4>
+                  <div className="space-y-2">
+                    {archive.accomplishments.map((accomplishment, idx) => (
+                      <div key={idx} className="bg-gray-800/50 rounded-lg p-3 flex items-start gap-3">
+                        <CheckCircle className="h-4 w-4 text-green-400 mt-0.5 flex-shrink-0" />
+                        <span className="text-sm text-gray-300 leading-relaxed">
+                          {accomplishment.replace('✅ ', '')}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Full Details Link */}
+              {selectedArchiveDetails && (
+                <div className="bg-purple-900/20 rounded-lg p-4 border border-purple-500/30">
+                  <div className="flex items-center gap-2 mb-2">
+                    <FileText className="h-4 w-4 text-purple-400" />
+                    <h4 className="text-sm font-semibold text-purple-400">Full Archive Data</h4>
+                  </div>
+                  <p className="text-xs text-gray-400 mb-2">
+                    Team: {selectedArchiveDetails.teamName}
+                  </p>
+                  <p className="text-xs text-gray-400">
+                    Total Tasks: {selectedArchiveDetails.rawData?.tasks?.length || 0}
+                  </p>
+                  {selectedArchiveDetails.rawData?.config && (
+                    <p className="text-xs text-gray-400">
+                      Configuration: {selectedArchiveDetails.rawData.config.members?.length || 0} members configured
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+ArchiveViewer.propTypes = {
+  // No props needed - fetches its own data
+};