refactor: 移除 Team 和 Swarm 协作功能
Some checks failed
CI / Lint & TypeCheck (push) Has been cancelled
CI / Unit Tests (push) Has been cancelled
CI / Build Frontend (push) Has been cancelled
CI / Rust Check (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
Some checks failed
CI / Lint & TypeCheck (push) Has been cancelled
CI / Unit Tests (push) Has been cancelled
CI / Build Frontend (push) Has been cancelled
CI / Rust Check (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
功能论证结论：Team（团队）和 Swarm（协作）为零后端支持的 纯前端 localStorage 空壳，Pipeline 系统已完全覆盖其全部能力。 删除 16 个文件，约 7,950 行代码： - 5 个组件：TeamCollaborationView, TeamOrchestrator, TeamList, DevQALoop, SwarmDashboard - 1 个 Store：teamStore.ts - 3 个 Client/库：team-client.ts, useTeamEvents.ts, agent-swarm.ts - 1 个类型文件：team.ts - 4 个测试文件 - 1 个文档（归档 swarm-coordination.md） 修改 4 个文件： - Sidebar.tsx：移除"团队"和"协作"导航项 - App.tsx：移除 team/swarm 视图路由 - types/index.ts：移除 team 类型导出 - chatStore.ts：移除 dispatchSwarmTask 方法 更新 CHANGELOG.md 和功能文档 README.md
This commit is contained in:
iven
@@ -1,464 +0,0 @@
|
||||
/**
|
||||
* DevQALoop - Developer ↔ QA Review Loop Interface
|
||||
*
|
||||
* Visualizes the iterative review cycle between Developer and QA agents,
|
||||
* showing iteration count, feedback history, and current state.
|
||||
*
|
||||
* @module components/DevQALoop
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useTeamStore } from '../store/teamStore';
|
||||
import type { DevQALoop as DevQALoopType, ReviewFeedback, ReviewIssue } from '../types/team';
|
||||
import {
|
||||
RefreshCw, CheckCircle, XCircle, AlertTriangle,
|
||||
Clock, MessageSquare, FileCode, Bug, Lightbulb, ChevronDown, ChevronUp,
|
||||
Send, ThumbsUp, ThumbsDown, AlertOctagon,
|
||||
} from 'lucide-react';
|
||||
|
||||
// === Sub-Components ===
|
||||
|
||||
interface FeedbackItemProps {
|
||||
feedback: ReviewFeedback;
|
||||
iteration: number;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
function FeedbackItem({ feedback, iteration, isExpanded, onToggle }: FeedbackItemProps) {
|
||||
const verdictColors = {
|
||||
approved: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
|
||||
needs_work: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
|
||||
rejected: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
|
||||
};
|
||||
|
||||
const verdictIcons = {
|
||||
approved: <ThumbsUp className="w-4 h-4" />,
|
||||
needs_work: <AlertTriangle className="w-4 h-4" />,
|
||||
rejected: <ThumbsDown className="w-4 h-4" />,
|
||||
};
|
||||
|
||||
const severityColors = {
|
||||
critical: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
|
||||
major: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
|
||||
minor: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
|
||||
suggestion: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="w-full px-4 py-3 flex items-center justify-between bg-gray-50 dark:bg-gray-800"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-6 h-6 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs font-medium">
|
||||
{iteration}
|
||||
</span>
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium flex items-center gap-1 ${verdictColors[feedback.verdict]}`}>
|
||||
{verdictIcons[feedback.verdict]}
|
||||
{feedback.verdict.replace('_', ' ')}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{new Date(feedback.reviewedAt).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
{isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Comments */}
|
||||
{feedback.comments.length > 0 && (
|
||||
<div>
|
||||
<h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Comments</h5>
|
||||
<ul className="space-y-2">
|
||||
{feedback.comments.map((comment, idx) => (
|
||||
<li key={idx} className="text-sm text-gray-600 dark:text-gray-400 flex items-start gap-2">
|
||||
<MessageSquare className="w-4 h-4 mt-0.5 text-gray-400" />
|
||||
{comment}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Issues */}
|
||||
{feedback.issues.length > 0 && (
|
||||
<div>
|
||||
<h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Issues ({feedback.issues.length})</h5>
|
||||
<div className="space-y-2">
|
||||
{feedback.issues.map((issue, idx) => (
|
||||
<div key={idx} className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className={`px-1.5 py-0.5 rounded text-xs font-medium ${severityColors[issue.severity]}`}>
|
||||
{issue.severity}
|
||||
</span>
|
||||
{issue.file && (
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
|
||||
<FileCode className="w-3 h-3" />
|
||||
{issue.file}{issue.line ? `:${issue.line}` : ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300">{issue.description}</p>
|
||||
{issue.suggestion && (
|
||||
<p className="mt-1 text-xs text-blue-600 dark:text-blue-400 flex items-start gap-1">
|
||||
<Lightbulb className="w-3 h-3 mt-0.5" />
|
||||
{issue.suggestion}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ReviewFormProps {
|
||||
loopId: string;
|
||||
teamId: string;
|
||||
onSubmit: (feedback: Omit<ReviewFeedback, 'reviewedAt' | 'reviewerId'>) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
function ReviewForm({ loopId: _loopId, teamId: _teamId, onSubmit, onCancel }: ReviewFormProps) {
|
||||
const [verdict, setVerdict] = useState<ReviewFeedback['verdict']>('needs_work');
|
||||
const [comment, setComment] = useState('');
|
||||
const [issues, setIssues] = useState<ReviewIssue[]>([]);
|
||||
const [newIssue, setNewIssue] = useState<Partial<ReviewIssue>>({});
|
||||
|
||||
const handleAddIssue = () => {
|
||||
if (!newIssue.description) return;
|
||||
setIssues([...issues, {
|
||||
severity: newIssue.severity || 'minor',
|
||||
description: newIssue.description,
|
||||
file: newIssue.file,
|
||||
line: newIssue.line,
|
||||
suggestion: newIssue.suggestion,
|
||||
} as ReviewIssue]);
|
||||
setNewIssue({});
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
onSubmit({
|
||||
verdict,
|
||||
comments: comment ? [comment] : [],
|
||||
issues,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg space-y-4">
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Submit Review</h4>
|
||||
|
||||
{/* Verdict */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Verdict</label>
|
||||
<div className="flex gap-2">
|
||||
{(['approved', 'needs_work', 'rejected'] as const).map(v => (
|
||||
<button
|
||||
key={v}
|
||||
onClick={() => setVerdict(v)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium ${
|
||||
verdict === v
|
||||
? v === 'approved'
|
||||
? 'bg-green-500 text-white'
|
||||
: v === 'needs_work'
|
||||
? 'bg-yellow-500 text-white'
|
||||
: 'bg-red-500 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{v.replace('_', ' ')}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comment */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Comment</label>
|
||||
<textarea
|
||||
value={comment}
|
||||
onChange={(e) => setComment(e.target.value)}
|
||||
placeholder="Overall feedback..."
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Add Issue */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Add Issue</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<select
|
||||
value={newIssue.severity || 'minor'}
|
||||
onChange={(e) => setNewIssue({ ...newIssue, severity: e.target.value as ReviewIssue['severity'] })}
|
||||
className="px-2 py-1.5 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm"
|
||||
>
|
||||
<option value="critical">Critical</option>
|
||||
<option value="major">Major</option>
|
||||
<option value="minor">Minor</option>
|
||||
<option value="suggestion">Suggestion</option>
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
value={newIssue.file || ''}
|
||||
onChange={(e) => setNewIssue({ ...newIssue, file: e.target.value })}
|
||||
placeholder="File path"
|
||||
className="px-2 py-1.5 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
value={newIssue.line || ''}
|
||||
onChange={(e) => setNewIssue({ ...newIssue, line: parseInt(e.target.value) || undefined })}
|
||||
placeholder="Line"
|
||||
className="px-2 py-1.5 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={newIssue.description || ''}
|
||||
onChange={(e) => setNewIssue({ ...newIssue, description: e.target.value })}
|
||||
placeholder="Issue description"
|
||||
className="px-2 py-1.5 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={newIssue.suggestion || ''}
|
||||
onChange={(e) => setNewIssue({ ...newIssue, suggestion: e.target.value })}
|
||||
placeholder="Suggested fix (optional)"
|
||||
className="w-full mt-2 px-2 py-1.5 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm"
|
||||
/>
|
||||
<button
|
||||
onClick={handleAddIssue}
|
||||
disabled={!newIssue.description}
|
||||
className="mt-2 px-3 py-1.5 text-sm bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50"
|
||||
>
|
||||
Add Issue
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Issues List */}
|
||||
{issues.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
{issues.map((issue, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-sm p-2 bg-white dark:bg-gray-900 rounded">
|
||||
<span className="px-1.5 py-0.5 rounded text-xs bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300">
|
||||
{issue.severity}
|
||||
</span>
|
||||
<span className="flex-1 truncate">{issue.description}</span>
|
||||
<button
|
||||
onClick={() => setIssues(issues.filter((_, i) => i !== idx))}
|
||||
className="text-gray-400 hover:text-red-500"
|
||||
>
|
||||
<XCircle className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center justify-center gap-2"
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
Submit Review
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// === Main Component ===
|
||||
|
||||
interface DevQALoopPanelProps {
|
||||
loop: DevQALoopType;
|
||||
teamId: string;
|
||||
developerName: string;
|
||||
reviewerName: string;
|
||||
taskTitle: string;
|
||||
}
|
||||
|
||||
export function DevQALoopPanel({ loop, teamId, developerName, reviewerName, taskTitle }: DevQALoopPanelProps) {
|
||||
const [expandedFeedback, setExpandedFeedback] = useState<number | null>(null);
|
||||
const [showReviewForm, setShowReviewForm] = useState(false);
|
||||
|
||||
const { submitReview, updateLoopState } = useTeamStore();
|
||||
|
||||
const stateConfig = {
|
||||
idle: { color: 'gray', icon: <Clock className="w-5 h-5" />, label: 'Idle' },
|
||||
developing: { color: 'blue', icon: <FileCode className="w-5 h-5" />, label: 'Developing' },
|
||||
reviewing: { color: 'yellow', icon: <RefreshCw className="w-5 h-5" />, label: 'Reviewing' },
|
||||
revising: { color: 'orange', icon: <Bug className="w-5 h-5" />, label: 'Revising' },
|
||||
approved: { color: 'green', icon: <CheckCircle className="w-5 h-5" />, label: 'Approved' },
|
||||
escalated: { color: 'red', icon: <AlertOctagon className="w-5 h-5" />, label: 'Escalated' },
|
||||
};
|
||||
|
||||
const config = stateConfig[loop.state];
|
||||
|
||||
const handleSubmitReview = async (feedback: Omit<ReviewFeedback, 'reviewedAt' | 'reviewerId'>) => {
|
||||
await submitReview(teamId, loop.id, feedback);
|
||||
setShowReviewForm(false);
|
||||
};
|
||||
|
||||
const handleCompleteRevision = async () => {
|
||||
await updateLoopState(teamId, loop.id, 'reviewing');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className={`px-4 py-3 bg-${config.color}-50 dark:bg-${config.color}-900/20 border-b border-${config.color}-200 dark:border-${config.color}-800`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`text-${config.color}-500`}>{config.icon}</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Dev↔QA Loop</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">{taskTitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium bg-${config.color}-100 text-${config.color}-700 dark:bg-${config.color}-900/30 dark:text-${config.color}-300`}>
|
||||
{config.label}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Iteration {loop.iterationCount + 1}/{loop.maxIterations}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Flow Visualization */}
|
||||
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${
|
||||
['developing', 'revising'].includes(loop.state) ? 'bg-blue-500 text-white' : 'bg-gray-200 dark:bg-gray-700'
|
||||
}`}>
|
||||
<FileCode className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<div className="font-medium text-gray-900 dark:text-white">{developerName}</div>
|
||||
<div className="text-xs text-gray-500">Developer</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 mx-4 flex items-center">
|
||||
<div className="flex-1 h-0.5 bg-gray-200 dark:bg-gray-700" />
|
||||
<RefreshCw className={`w-5 h-5 mx-2 ${loop.state === 'reviewing' ? 'text-yellow-500 animate-spin' : 'text-gray-400'}`} />
|
||||
<div className="flex-1 h-0.5 bg-gray-200 dark:bg-gray-700" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-sm text-right">
|
||||
<div className="font-medium text-gray-900 dark:text-white">{reviewerName}</div>
|
||||
<div className="text-xs text-gray-500">QA Reviewer</div>
|
||||
</div>
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${
|
||||
loop.state === 'reviewing' ? 'bg-yellow-500 text-white' : 'bg-gray-200 dark:bg-gray-700'
|
||||
}`}>
|
||||
<Bug className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-1">
|
||||
{Array.from({ length: loop.maxIterations }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex-1 h-2 rounded ${
|
||||
i < loop.iterationCount
|
||||
? 'bg-yellow-400'
|
||||
: i === loop.iterationCount && ['developing', 'reviewing', 'revising'].includes(loop.state)
|
||||
? 'bg-blue-400'
|
||||
: 'bg-gray-200 dark:bg-gray-700'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feedback History */}
|
||||
<div className="p-4 space-y-3 max-h-64 overflow-y-auto">
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">Feedback History</h4>
|
||||
{loop.feedbackHistory.length === 0 ? (
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
No feedback yet. First review pending.
|
||||
</div>
|
||||
) : (
|
||||
loop.feedbackHistory.map((feedback, idx) => (
|
||||
<FeedbackItem
|
||||
key={idx}
|
||||
feedback={feedback}
|
||||
iteration={idx + 1}
|
||||
isExpanded={expandedFeedback === idx}
|
||||
onToggle={() => setExpandedFeedback(expandedFeedback === idx ? null : idx)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="p-4 border-t border-gray-200 dark:border-gray-700">
|
||||
{loop.state === 'escalated' ? (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
|
||||
<AlertOctagon className="w-6 h-6 mx-auto mb-2 text-red-500" />
|
||||
<p className="text-sm text-red-700 dark:text-red-300">
|
||||
Maximum iterations reached. Human intervention required.
|
||||
</p>
|
||||
</div>
|
||||
) : loop.state === 'approved' ? (
|
||||
<div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
|
||||
<CheckCircle className="w-6 h-6 mx-auto mb-2 text-green-500" />
|
||||
<p className="text-sm text-green-700 dark:text-green-300">
|
||||
Task approved and completed!
|
||||
</p>
|
||||
</div>
|
||||
) : loop.state === 'reviewing' && !showReviewForm ? (
|
||||
<button
|
||||
onClick={() => setShowReviewForm(true)}
|
||||
className="w-full px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 flex items-center justify-center gap-2"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Submit Review
|
||||
</button>
|
||||
) : loop.state === 'revising' ? (
|
||||
<button
|
||||
onClick={handleCompleteRevision}
|
||||
className="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center justify-center gap-2"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
Complete Revision
|
||||
</button>
|
||||
) : showReviewForm ? (
|
||||
<ReviewForm
|
||||
loopId={loop.id}
|
||||
teamId={teamId}
|
||||
onSubmit={handleSubmitReview}
|
||||
onCancel={() => setShowReviewForm(false)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DevQALoopPanel;
|
||||
@@ -1,25 +1,22 @@
|
||||
import { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Users, Bot, Zap, Layers, Package,
|
||||
Bot, Zap, Package,
|
||||
Search, Sparkles, ChevronRight, X
|
||||
} from 'lucide-react';
|
||||
import { CloneManager } from './CloneManager';
|
||||
import { TeamList } from './TeamList';
|
||||
import { useConfigStore } from '../store/configStore';
|
||||
import { containerVariants, defaultTransition } from '../lib/animations';
|
||||
|
||||
export type MainViewType = 'chat' | 'automation' | 'team' | 'swarm' | 'skills';
|
||||
export type MainViewType = 'chat' | 'automation' | 'skills';
|
||||
|
||||
interface SidebarProps {
|
||||
onOpenSettings?: () => void;
|
||||
onMainViewChange?: (view: MainViewType) => void;
|
||||
selectedTeamId?: string;
|
||||
onSelectTeam?: (teamId: string) => void;
|
||||
onNewChat?: () => void;
|
||||
}
|
||||
|
||||
type Tab = 'chat' | 'clones' | 'automation' | 'team' | 'swarm' | 'skills';
|
||||
type Tab = 'chat' | 'clones' | 'automation' | 'skills';
|
||||
|
||||
// 导航项配置 - WorkBuddy 风格
|
||||
const NAV_ITEMS: {
|
||||
@@ -31,15 +28,11 @@ const NAV_ITEMS: {
|
||||
{ key: 'clones', label: '分身', icon: Bot },
|
||||
{ key: 'automation', label: '自动化', icon: Zap, mainView: 'automation' },
|
||||
{ key: 'skills', label: '技能', icon: Package, mainView: 'skills' },
|
||||
{ key: 'team', label: '团队', icon: Users, mainView: 'team' },
|
||||
{ key: 'swarm', label: '协作', icon: Layers, mainView: 'swarm' },
|
||||
];
|
||||
|
||||
export function Sidebar({
|
||||
onOpenSettings,
|
||||
onMainViewChange,
|
||||
selectedTeamId,
|
||||
onSelectTeam,
|
||||
onNewChat
|
||||
}: SidebarProps) {
|
||||
const [activeTab, setActiveTab] = useState<Tab>('clones');
|
||||
@@ -55,12 +48,6 @@ export function Sidebar({
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectTeam = (teamId: string) => {
|
||||
onSelectTeam?.(teamId);
|
||||
setActiveTab('team');
|
||||
onMainViewChange?.('team');
|
||||
};
|
||||
|
||||
return (
|
||||
<aside className="w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 flex flex-col flex-shrink-0">
|
||||
{/* 搜索框 */}
|
||||
@@ -123,7 +110,7 @@ export function Sidebar({
|
||||
{/* 分隔线 */}
|
||||
<div className="my-3 mx-3 border-t border-gray-100 dark:border-gray-800" />
|
||||
|
||||
{/* 内容区域 - 只显示分身、团队、协作的内容，自动化和技能在主内容区显示 */}
|
||||
{/* 内容区域 - 只显示分身内容，自动化和技能在主内容区显示 */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
@@ -136,13 +123,7 @@ export function Sidebar({
|
||||
className="h-full overflow-y-auto"
|
||||
>
|
||||
{activeTab === 'clones' && <CloneManager />}
|
||||
{/* skills、automation 和 swarm 不在侧边栏显示内容，由主内容区显示 */}
|
||||
{activeTab === 'team' && (
|
||||
<TeamList
|
||||
selectedTeamId={selectedTeamId}
|
||||
onSelectTeam={handleSelectTeam}
|
||||
/>
|
||||
)}
|
||||
{/* skills 和 automation 不在侧边栏显示内容，由主内容区显示 */}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
@@ -1,590 +0,0 @@
|
||||
/**
|
||||
* SwarmDashboard - Multi-Agent Collaboration Task Dashboard
|
||||
*
|
||||
* Visualizes swarm tasks, multi-agent collaboration) with real-time
|
||||
* status updates, task history, and manual trigger functionality.
|
||||
*
|
||||
* Part of ZCLAW L4 Self-Evolution capability.
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Users,
|
||||
Play,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Clock,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Layers,
|
||||
GitBranch,
|
||||
MessageSquare,
|
||||
RefreshCw,
|
||||
Plus,
|
||||
History,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
AgentSwarm,
|
||||
type SwarmTask,
|
||||
type Subtask,
|
||||
type SwarmTaskStatus,
|
||||
type CommunicationStyle,
|
||||
} from '../lib/agent-swarm';
|
||||
import { useAgentStore } from '../store/agentStore';
|
||||
|
||||
// === Types ===
|
||||
|
||||
interface SwarmDashboardProps {
|
||||
className?: string;
|
||||
onTaskSelect?: (task: SwarmTask) => void;
|
||||
}
|
||||
|
||||
type FilterType = 'all' | 'active' | 'completed' | 'failed';
|
||||
|
||||
// === Status Config ===
|
||||
|
||||
const TASK_STATUS_CONFIG: Record<SwarmTaskStatus, { label: string; className: string; dotClass: string; icon: typeof CheckCircle }> = {
|
||||
planning: {
|
||||
label: '规划中',
|
||||
className: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
|
||||
dotClass: 'bg-purple-500',
|
||||
icon: Layers,
|
||||
},
|
||||
executing: {
|
||||
label: '执行中',
|
||||
className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
|
||||
dotClass: 'bg-blue-500 animate-pulse',
|
||||
icon: Play,
|
||||
},
|
||||
aggregating: {
|
||||
label: '汇总中',
|
||||
className: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400',
|
||||
dotClass: 'bg-cyan-500 animate-pulse',
|
||||
icon: RefreshCw,
|
||||
},
|
||||
done: {
|
||||
label: '已完成',
|
||||
className: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
|
||||
dotClass: 'bg-green-500',
|
||||
icon: CheckCircle,
|
||||
},
|
||||
failed: {
|
||||
label: '失败',
|
||||
className: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
|
||||
dotClass: 'bg-red-500',
|
||||
icon: XCircle,
|
||||
},
|
||||
};
|
||||
|
||||
const SUBTASK_STATUS_CONFIG: Record<string, { label: string; dotClass: string }> = {
|
||||
pending: { label: '待执行', dotClass: 'bg-gray-400' },
|
||||
running: { label: '执行中', dotClass: 'bg-blue-500 animate-pulse' },
|
||||
done: { label: '完成', dotClass: 'bg-green-500' },
|
||||
failed: { label: '失败', dotClass: 'bg-red-500' },
|
||||
};
|
||||
|
||||
const COMMUNICATION_STYLE_CONFIG: Record<CommunicationStyle, { label: string; icon: typeof Users; description: string }> = {
|
||||
sequential: {
|
||||
label: '顺序执行',
|
||||
icon: GitBranch,
|
||||
description: '每个 Agent 依次处理，输出传递给下一个',
|
||||
},
|
||||
parallel: {
|
||||
label: '并行执行',
|
||||
icon: Layers,
|
||||
description: '多个 Agent 同时处理不同子任务',
|
||||
},
|
||||
debate: {
|
||||
label: '辩论模式',
|
||||
icon: MessageSquare,
|
||||
description: '多个 Agent 提供观点，协调者综合',
|
||||
},
|
||||
};
|
||||
|
||||
// === Components ===
|
||||
|
||||
function TaskStatusBadge({ status }: { status: SwarmTaskStatus }) {
|
||||
const config = TASK_STATUS_CONFIG[status];
|
||||
const Icon = config.icon;
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium ${config.className}`}>
|
||||
<Icon className="w-3 h-3" />
|
||||
{config.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function SubtaskStatusDot({ status }: { status: string }) {
|
||||
const config = SUBTASK_STATUS_CONFIG[status] || SUBTASK_STATUS_CONFIG.pending;
|
||||
return <span className={`w-2 h-2 rounded-full ${config.dotClass}`} title={config.label} />;
|
||||
}
|
||||
|
||||
function CommunicationStyleBadge({ style }: { style: CommunicationStyle }) {
|
||||
const config = COMMUNICATION_STYLE_CONFIG[style];
|
||||
const Icon = config.icon;
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
|
||||
title={config.description}
|
||||
>
|
||||
<Icon className="w-3 h-3" />
|
||||
{config.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function SubtaskItem({
|
||||
subtask,
|
||||
agentName,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
}: {
|
||||
subtask: Subtask;
|
||||
agentName: string;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
const duration = useMemo(() => {
|
||||
if (!subtask.startedAt) return null;
|
||||
const start = new Date(subtask.startedAt).getTime();
|
||||
const end = subtask.completedAt ? new Date(subtask.completedAt).getTime() : Date.now();
|
||||
return Math.round((end - start) / 1000);
|
||||
}, [subtask.startedAt, subtask.completedAt]);
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="w-full flex items-center gap-3 px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-left"
|
||||
>
|
||||
<SubtaskStatusDot status={subtask.status} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
|
||||
{subtask.description}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
分配给: {agentName}
|
||||
{duration !== null && <span className="ml-2">· {duration}s</span>}
|
||||
</div>
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="w-4 h-4 text-gray-400" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isExpanded && subtask.result && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="border-t border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="p-3 text-sm text-gray-600 dark:text-gray-300 whitespace-pre-wrap max-h-40 overflow-y-auto">
|
||||
{subtask.result}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{subtask.error && (
|
||||
<div className="px-3 py-2 bg-red-50 dark:bg-red-900/20 border-t border-gray-200 dark:border-gray-700">
|
||||
<p className="text-xs text-red-600 dark:text-red-400">{subtask.error}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TaskCard({
|
||||
task,
|
||||
isSelected,
|
||||
onSelect,
|
||||
}: {
|
||||
task: SwarmTask;
|
||||
isSelected: boolean;
|
||||
onSelect: () => void;
|
||||
}) {
|
||||
const [expandedSubtasks, setExpandedSubtasks] = useState<Set<string>>(new Set());
|
||||
const { clones } = useAgentStore();
|
||||
|
||||
const toggleSubtask = useCallback((subtaskId: string) => {
|
||||
setExpandedSubtasks((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(subtaskId)) {
|
||||
next.delete(subtaskId);
|
||||
} else {
|
||||
next.add(subtaskId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const completedCount = task.subtasks.filter((s) => s.status === 'done').length;
|
||||
const totalDuration = useMemo(() => {
|
||||
if (!task.completedAt) return null;
|
||||
const start = new Date(task.createdAt).getTime();
|
||||
const end = new Date(task.completedAt).getTime();
|
||||
return Math.round((end - start) / 1000);
|
||||
}, [task.createdAt, task.completedAt]);
|
||||
|
||||
const getAgentName = (agentId: string) => {
|
||||
const agent = clones.find((a) => a.id === agentId);
|
||||
return agent?.name || agentId;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`border rounded-lg overflow-hidden transition-all ${
|
||||
isSelected
|
||||
? 'border-orange-500 dark:border-orange-400 ring-2 ring-orange-500/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={onSelect}
|
||||
className="w-full p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<TaskStatusBadge status={task.status} />
|
||||
<CommunicationStyleBadge style={task.communicationStyle} />
|
||||
</div>
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
|
||||
{task.description}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<Users className="w-3 h-3" />
|
||||
{completedCount}/{task.subtasks.length} 子任务
|
||||
</span>
|
||||
{totalDuration !== null && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{totalDuration}s
|
||||
</span>
|
||||
)}
|
||||
<span>{new Date(task.createdAt).toLocaleString('zh-CN')}</span>
|
||||
</div>
|
||||
</div>
|
||||
{isSelected ? (
|
||||
<ChevronDown className="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isSelected && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="border-t border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="p-4 space-y-3">
|
||||
<h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
子任务
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{task.subtasks.map((subtask) => (
|
||||
<SubtaskItem
|
||||
key={subtask.id}
|
||||
subtask={subtask}
|
||||
agentName={getAgentName(subtask.assignedTo)}
|
||||
isExpanded={expandedSubtasks.has(subtask.id)}
|
||||
onToggle={() => toggleSubtask(subtask.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{task.finalResult && (
|
||||
<div className="mt-4 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
|
||||
<h4 className="text-xs font-medium text-green-700 dark:text-green-400 mb-1">
|
||||
最终结果
|
||||
</h4>
|
||||
<p className="text-sm text-green-600 dark:text-green-300 whitespace-pre-wrap">
|
||||
{task.finalResult}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateTaskForm({
|
||||
onSubmit,
|
||||
onCancel,
|
||||
}: {
|
||||
onSubmit: (description: string, style: CommunicationStyle) => void;
|
||||
onCancel: () => void;
|
||||
}) {
|
||||
const [description, setDescription] = useState('');
|
||||
const [style, setStyle] = useState<CommunicationStyle>('sequential');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (description.trim()) {
|
||||
onSubmit(description.trim(), style);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
任务描述
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="描述需要协作完成的任务..."
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent text-sm"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
协作模式
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{(Object.keys(COMMUNICATION_STYLE_CONFIG) as CommunicationStyle[]).map((s) => {
|
||||
const config = COMMUNICATION_STYLE_CONFIG[s];
|
||||
const Icon = config.icon;
|
||||
return (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
onClick={() => setStyle(s)}
|
||||
className={`flex flex-col items-center gap-1 p-2 rounded-lg border transition-all ${
|
||||
style === s
|
||||
? 'border-orange-500 bg-orange-50 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-600 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
<span className="text-xs">{config.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!description.trim()}
|
||||
className="px-4 py-1.5 text-sm bg-orange-500 hover:bg-orange-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-lg transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
<Sparkles className="w-4 h-4" />
|
||||
创建任务
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
// === Main Component ===
|
||||
|
||||
export function SwarmDashboard({ className = '', onTaskSelect }: SwarmDashboardProps) {
|
||||
const [swarm] = useState(() => new AgentSwarm());
|
||||
const [tasks, setTasks] = useState<SwarmTask[]>([]);
|
||||
const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
|
||||
const [filter, setFilter] = useState<FilterType>('all');
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
|
||||
// Load tasks from swarm history
|
||||
useEffect(() => {
|
||||
const history = swarm.getHistory();
|
||||
setTasks([...history].reverse()); // Most recent first
|
||||
}, [swarm]);
|
||||
|
||||
const filteredTasks = useMemo(() => {
|
||||
switch (filter) {
|
||||
case 'active':
|
||||
return tasks.filter((t) => ['planning', 'executing', 'aggregating'].includes(t.status));
|
||||
case 'completed':
|
||||
return tasks.filter((t) => t.status === 'done');
|
||||
case 'failed':
|
||||
return tasks.filter((t) => t.status === 'failed');
|
||||
default:
|
||||
return tasks;
|
||||
}
|
||||
}, [tasks, filter]);
|
||||
|
||||
const stats = useMemo(() => {
|
||||
const active = tasks.filter((t) => ['planning', 'executing', 'aggregating'].includes(t.status)).length;
|
||||
const completed = tasks.filter((t) => t.status === 'done').length;
|
||||
const failed = tasks.filter((t) => t.status === 'failed').length;
|
||||
return { total: tasks.length, active, completed, failed };
|
||||
}, [tasks]);
|
||||
|
||||
const handleRefresh = useCallback(async () => {
|
||||
setIsRefreshing(true);
|
||||
// Simulate refresh delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
const history = swarm.getHistory();
|
||||
setTasks([...history].reverse());
|
||||
setIsRefreshing(false);
|
||||
}, [swarm]);
|
||||
|
||||
const handleCreateTask = useCallback(
|
||||
(description: string, style: CommunicationStyle) => {
|
||||
const task = swarm.createTask(description, { communicationStyle: style });
|
||||
setTasks((prev) => [task, ...prev]);
|
||||
setSelectedTaskId(task.id);
|
||||
setShowCreateForm(false);
|
||||
onTaskSelect?.(task);
|
||||
|
||||
// Note: Actual execution should be triggered via chatStore.dispatchSwarmTask
|
||||
console.log('[SwarmDashboard] Task created:', task.id, 'Style:', style);
|
||||
},
|
||||
[swarm, onTaskSelect]
|
||||
);
|
||||
|
||||
const handleSelectTask = useCallback(
|
||||
(taskId: string) => {
|
||||
setSelectedTaskId((prev) => (prev === taskId ? null : taskId));
|
||||
const task = tasks.find((t) => t.id === taskId);
|
||||
if (task && selectedTaskId !== taskId) {
|
||||
onTaskSelect?.(task);
|
||||
}
|
||||
},
|
||||
[tasks, onTaskSelect, selectedTaskId]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col h-full ${className}`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-5 h-5 text-orange-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">协作任务</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={isRefreshing}
|
||||
className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50"
|
||||
title="刷新"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowCreateForm((prev) => !prev)}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm bg-orange-500 hover:bg-orange-600 text-white rounded-lg transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
新建
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Bar */}
|
||||
<div className="flex items-center gap-4 px-4 py-2 bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700 text-xs">
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
总计: <span className="font-medium text-gray-900 dark:text-gray-100">{stats.total}</span>
|
||||
</span>
|
||||
<span className="text-blue-600 dark:text-blue-400">
|
||||
活跃: <span className="font-medium">{stats.active}</span>
|
||||
</span>
|
||||
<span className="text-green-600 dark:text-green-400">
|
||||
完成: <span className="font-medium">{stats.completed}</span>
|
||||
</span>
|
||||
{stats.failed > 0 && (
|
||||
<span className="text-red-600 dark:text-red-400">
|
||||
失败: <span className="font-medium">{stats.failed}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filter Tabs */}
|
||||
<div className="flex gap-1 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
|
||||
{(['all', 'active', 'completed', 'failed'] as FilterType[]).map((f) => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setFilter(f)}
|
||||
className={`px-3 py-1 text-xs rounded-full transition-colors ${
|
||||
filter === f
|
||||
? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400'
|
||||
: 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
{f === 'all' ? '全部' : f === 'active' ? '活跃' : f === 'completed' ? '已完成' : '失败'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Create Form */}
|
||||
<AnimatePresence>
|
||||
{showCreateForm && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="border-b border-gray-200 dark:border-gray-700 overflow-hidden"
|
||||
>
|
||||
<CreateTaskForm
|
||||
onSubmit={handleCreateTask}
|
||||
onCancel={() => setShowCreateForm(false)}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Task List */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||
{filteredTasks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400">
|
||||
<History className="w-8 h-8 mb-2 opacity-50" />
|
||||
<p className="text-sm">
|
||||
{filter === 'all'
|
||||
? '暂无协作任务'
|
||||
: filter === 'active'
|
||||
? '暂无活跃任务'
|
||||
: filter === 'completed'
|
||||
? '暂无已完成任务'
|
||||
: '暂无失败任务'}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
className="mt-2 text-orange-500 hover:text-orange-600 text-sm"
|
||||
>
|
||||
创建第一个任务
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
filteredTasks.map((task) => (
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
isSelected={selectedTaskId === task.id}
|
||||
onSelect={() => handleSelectTask(task.id)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SwarmDashboard;
|
||||
@@ -1,401 +0,0 @@
|
||||
/**
|
||||
* TeamCollaborationView - Real-time Team Collaboration Status
|
||||
*
|
||||
* Displays live collaboration events, member status, task progress,
|
||||
* and team metrics in a unified dashboard view.
|
||||
*
|
||||
* @module components/TeamCollaborationView
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useTeamStore } from '../store/teamStore';
|
||||
import type { Team, TeamMember, TeamTask, CollaborationEvent } from '../types/team';
|
||||
import {
|
||||
Activity, Users, CheckCircle, AlertTriangle, Play,
|
||||
ArrowRight, GitBranch, MessageSquare, FileCode, Bot, Zap,
|
||||
TrendingUp, TrendingDown, Minus, Circle,
|
||||
} from 'lucide-react';
|
||||
|
||||
// === Sub-Components ===
|
||||
|
||||
interface EventFeedItemProps {
|
||||
event: CollaborationEvent;
|
||||
team: Team;
|
||||
}
|
||||
|
||||
function EventFeedItem({ event, team }: EventFeedItemProps) {
|
||||
const sourceMember = team.members.find(m => m.agentId === event.sourceAgentId);
|
||||
|
||||
const eventIcons: Record<CollaborationEvent['type'], React.ReactNode> = {
|
||||
task_assigned: <ArrowRight className="w-4 h-4 text-blue-500" />,
|
||||
task_started: <Play className="w-4 h-4 text-green-500" />,
|
||||
task_completed: <CheckCircle className="w-4 h-4 text-green-600" />,
|
||||
review_requested: <MessageSquare className="w-4 h-4 text-yellow-500" />,
|
||||
review_submitted: <FileCode className="w-4 h-4 text-purple-500" />,
|
||||
loop_state_change: <RefreshCw className="w-4 h-4 text-orange-500" />,
|
||||
member_status_change: <Users className="w-4 h-4 text-gray-500" />,
|
||||
};
|
||||
|
||||
const formatTime = (timestamp: string) => {
|
||||
const diff = Date.now() - new Date(timestamp).getTime();
|
||||
if (diff < 60000) return 'Just now';
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
|
||||
return new Date(timestamp).toLocaleTimeString();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-3 p-3 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg">
|
||||
<div className="mt-0.5">{eventIcons[event.type]}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-gray-900 dark:text-white text-sm">
|
||||
{sourceMember?.name || 'System'}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{event.type.replace(/_/g, ' ')}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-0.5 line-clamp-2">
|
||||
{typeof event.payload.description === 'string'
|
||||
? event.payload.description
|
||||
: JSON.stringify(event.payload).slice(0, 100)}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-xs text-gray-400 whitespace-nowrap">
|
||||
{formatTime(event.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RefreshCw({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M21 2v6h-6M3 22v-6h6M21 12A9 9 0 0 0 6 5.3L3 8M3 12a9 9 0 0 0 15 6.7l3-2.7" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
interface MemberStatusBadgeProps {
|
||||
member: TeamMember;
|
||||
}
|
||||
|
||||
function MemberStatusBadge({ member }: MemberStatusBadgeProps) {
|
||||
const statusConfig = {
|
||||
idle: { color: 'bg-gray-400', label: 'Idle' },
|
||||
running: { color: 'bg-green-500 animate-pulse', label: 'Active' },
|
||||
paused: { color: 'bg-yellow-500', label: 'Paused' },
|
||||
error: { color: 'bg-red-500', label: 'Error' },
|
||||
};
|
||||
|
||||
const config = statusConfig[member.status];
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 p-2 rounded-lg bg-gray-50 dark:bg-gray-800">
|
||||
<div className="relative">
|
||||
<div className={`w-3 h-3 rounded-full ${config.color}`} />
|
||||
{member.currentTasks.length > 0 && (
|
||||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<span className="text-[10px] text-white font-bold">{member.currentTasks.length}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||
{member.name}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">{config.label}</span>
|
||||
</div>
|
||||
<div className="mt-1 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-blue-500 transition-all"
|
||||
style={{ width: `${member.workload}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface TaskProgressCardProps {
|
||||
task: TeamTask;
|
||||
assignee?: TeamMember;
|
||||
}
|
||||
|
||||
function TaskProgressCard({ task, assignee }: TaskProgressCardProps) {
|
||||
const statusConfig: Record<TeamTask['status'], { color: string; icon: React.ReactNode }> = {
|
||||
pending: { color: 'text-gray-400', icon: <Circle className="w-4 h-4" /> },
|
||||
assigned: { color: 'text-blue-400', icon: <ArrowRight className="w-4 h-4" /> },
|
||||
in_progress: { color: 'text-green-500', icon: <Play className="w-4 h-4" /> },
|
||||
review: { color: 'text-yellow-500', icon: <MessageSquare className="w-4 h-4" /> },
|
||||
blocked: { color: 'text-red-500', icon: <AlertTriangle className="w-4 h-4" /> },
|
||||
completed: { color: 'text-green-600', icon: <CheckCircle className="w-4 h-4" /> },
|
||||
failed: { color: 'text-red-600', icon: <AlertTriangle className="w-4 h-4" /> },
|
||||
};
|
||||
|
||||
const config = statusConfig[task.status];
|
||||
|
||||
return (
|
||||
<div className="p-3 rounded-lg border border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-start gap-2">
|
||||
<div className={config.color}>{config.icon}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||
{task.title}
|
||||
</span>
|
||||
<span className={`text-xs px-1.5 py-0.5 rounded ${
|
||||
task.priority === 'critical' ? 'bg-red-100 text-red-700' :
|
||||
task.priority === 'high' ? 'bg-orange-100 text-orange-700' :
|
||||
task.priority === 'medium' ? 'bg-yellow-100 text-yellow-700' :
|
||||
'bg-gray-100 text-gray-700'
|
||||
}`}>
|
||||
{task.priority}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>{task.type}</span>
|
||||
{assignee && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span>{assignee.name}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface MetricCardProps {
|
||||
label: string;
|
||||
value: number | string;
|
||||
trend?: 'up' | 'down' | 'neutral';
|
||||
format?: 'number' | 'percent' | 'time';
|
||||
}
|
||||
|
||||
function MetricCard({ label, value, trend, format = 'number' }: MetricCardProps) {
|
||||
const formattedValue = format === 'percent' ? `${value}%` :
|
||||
format === 'time' ? `${Math.floor((value as number) / 60000)}m` :
|
||||
value;
|
||||
|
||||
return (
|
||||
<div className="p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">{label}</span>
|
||||
{trend && (
|
||||
trend === 'up' ? <TrendingUp className="w-3 h-3 text-green-500" /> :
|
||||
trend === 'down' ? <TrendingDown className="w-3 h-3 text-red-500" /> :
|
||||
<Minus className="w-3 h-3 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 text-xl font-bold text-gray-900 dark:text-white">
|
||||
{formattedValue}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// === Main Component ===
|
||||
|
||||
interface TeamCollaborationViewProps {
|
||||
teamId: string;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
export function TeamCollaborationView({ teamId, compact = false }: TeamCollaborationViewProps) {
|
||||
const { teams, recentEvents, metrics, activeTeam } = useTeamStore();
|
||||
const [autoScroll, setAutoScroll] = useState(true);
|
||||
const eventFeedRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const team = teams.find(t => t.id === teamId) || activeTeam;
|
||||
|
||||
useEffect(() => {
|
||||
if (autoScroll && eventFeedRef.current) {
|
||||
eventFeedRef.current.scrollTop = 0;
|
||||
}
|
||||
}, [recentEvents, autoScroll]);
|
||||
|
||||
if (!team) {
|
||||
return (
|
||||
<div className="p-6 text-center text-gray-500 dark:text-gray-400">
|
||||
<Users className="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600" />
|
||||
<p>No team selected</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const tasksByStatus = {
|
||||
active: team.tasks.filter(t => ['in_progress', 'review'].includes(t.status)),
|
||||
pending: team.tasks.filter(t => ['pending', 'assigned'].includes(t.status)),
|
||||
completed: team.tasks.filter(t => t.status === 'completed'),
|
||||
blocked: team.tasks.filter(t => ['blocked', 'failed'].includes(t.status)),
|
||||
};
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Quick Stats */}
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-500">{tasksByStatus.active.length}</div>
|
||||
<div className="text-xs text-gray-500">Active</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-gray-400">{tasksByStatus.pending.length}</div>
|
||||
<div className="text-xs text-gray-500">Pending</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-green-500">{tasksByStatus.completed.length}</div>
|
||||
<div className="text-xs text-gray-500">Done</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-red-500">{tasksByStatus.blocked.length}</div>
|
||||
<div className="text-xs text-gray-500">Blocked</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Member Status */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{team.members.slice(0, 4).map(member => (
|
||||
<MemberStatusBadge key={member.id} member={member} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-white dark:bg-gray-900">
|
||||
{/* Header */}
|
||||
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-5 h-5 text-blue-500" />
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">{team.name}</h3>
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${
|
||||
team.status === 'active' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' :
|
||||
team.status === 'paused' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300' :
|
||||
'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
|
||||
}`}>
|
||||
{team.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<GitBranch className="w-4 h-4" />
|
||||
<span>{team.pattern}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metrics */}
|
||||
{metrics && (
|
||||
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="grid grid-cols-5 gap-3">
|
||||
<MetricCard label="Completed" value={metrics.tasksCompleted} />
|
||||
<MetricCard label="Pass Rate" value={metrics.passRate.toFixed(0)} format="percent" trend={metrics.passRate > 80 ? 'up' : 'down'} />
|
||||
<MetricCard label="Avg Time" value={metrics.avgCompletionTime} format="time" />
|
||||
<MetricCard label="Iterations" value={metrics.avgIterations.toFixed(1)} trend={metrics.avgIterations < 2 ? 'up' : 'neutral'} />
|
||||
<MetricCard label="Efficiency" value={metrics.efficiency.toFixed(0)} format="percent" trend={metrics.efficiency > 70 ? 'up' : 'down'} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Left: Members & Tasks */}
|
||||
<div className="w-1/2 border-r border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden">
|
||||
{/* Members */}
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
|
||||
<Bot className="w-4 h-4" />
|
||||
Team Members ({team.members.length})
|
||||
</h4>
|
||||
<div className="space-y-2 max-h-32 overflow-y-auto">
|
||||
{team.members.map(member => (
|
||||
<MemberStatusBadge key={member.id} member={member} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tasks */}
|
||||
<div className="flex-1 p-4 overflow-y-auto">
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
|
||||
<Activity className="w-4 h-4" />
|
||||
Active Tasks ({tasksByStatus.active.length})
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{tasksByStatus.active.map(task => (
|
||||
<TaskProgressCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
assignee={team.members.find(m => m.id === task.assigneeId)}
|
||||
/>
|
||||
))}
|
||||
{tasksByStatus.active.length === 0 && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
No active tasks
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{tasksByStatus.blocked.length > 0 && (
|
||||
<>
|
||||
<h4 className="text-sm font-medium text-red-600 dark:text-red-400 mt-4 mb-2 flex items-center gap-2">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
Blocked ({tasksByStatus.blocked.length})
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{tasksByStatus.blocked.map(task => (
|
||||
<TaskProgressCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
assignee={team.members.find(m => m.id === task.assigneeId)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Event Feed */}
|
||||
<div className="w-1/2 flex flex-col overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2">
|
||||
<Zap className="w-4 h-4" />
|
||||
Live Events
|
||||
</h4>
|
||||
<label className="flex items-center gap-2 text-xs text-gray-500">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoScroll}
|
||||
onChange={(e) => setAutoScroll(e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
Auto-scroll
|
||||
</label>
|
||||
</div>
|
||||
<div ref={eventFeedRef} className="flex-1 overflow-y-auto p-2">
|
||||
{recentEvents.filter(e => e.teamId === teamId).length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
<Activity className="w-8 h-8 mx-auto mb-2 text-gray-300 dark:text-gray-600" />
|
||||
<p className="text-sm">No recent activity</p>
|
||||
</div>
|
||||
) : (
|
||||
recentEvents
|
||||
.filter(e => e.teamId === teamId)
|
||||
.map((event, idx) => (
|
||||
<EventFeedItem key={`${event.timestamp}-${idx}`} event={event} team={team} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamCollaborationView;
|
||||
@@ -1,294 +0,0 @@
|
||||
/**
|
||||
* TeamList - Sidebar Team List Component
|
||||
*
|
||||
* Displays a compact list of teams for the sidebar navigation.
|
||||
*
|
||||
* @module components/TeamList
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTeamStore } from '../store/teamStore';
|
||||
import { useAgentStore } from '../store/agentStore';
|
||||
import { useChatStore } from '../store/chatStore';
|
||||
import { Users, Plus, Activity, CheckCircle, AlertTriangle, X, Bot } from 'lucide-react';
|
||||
import type { TeamMemberRole } from '../types/team';
|
||||
|
||||
interface TeamListProps {
|
||||
onSelectTeam?: (teamId: string) => void;
|
||||
selectedTeamId?: string;
|
||||
}
|
||||
|
||||
export function TeamList({ onSelectTeam, selectedTeamId }: TeamListProps) {
|
||||
const { teams, loadTeams, setActiveTeam, createTeam, isLoading } = useTeamStore();
|
||||
const clones = useAgentStore((s) => s.clones);
|
||||
const { agents } = useChatStore();
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [teamName, setTeamName] = useState('');
|
||||
const [teamDescription, setTeamDescription] = useState('');
|
||||
const [teamPattern, setTeamPattern] = useState<'sequential' | 'parallel' | 'pipeline'>('sequential');
|
||||
const [selectedAgents, setSelectedAgents] = useState<string[]>([]);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
loadTeams();
|
||||
} catch (err) {
|
||||
console.error('[TeamList] Failed to load teams:', err);
|
||||
}
|
||||
}, [loadTeams]);
|
||||
|
||||
const handleSelectTeam = (teamId: string) => {
|
||||
const team = teams.find(t => t.id === teamId);
|
||||
if (team) {
|
||||
setActiveTeam(team);
|
||||
onSelectTeam?.(teamId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateTeam = async () => {
|
||||
if (!teamName.trim() || selectedAgents.length === 0) return;
|
||||
|
||||
setIsCreating(true);
|
||||
try {
|
||||
const roleAssignments: { agentId: string; role: TeamMemberRole }[] = selectedAgents.map((agentId, index) => ({
|
||||
agentId,
|
||||
role: (index === 0 ? 'orchestrator' : index === 1 ? 'reviewer' : 'worker') as TeamMemberRole,
|
||||
}));
|
||||
|
||||
const team = await createTeam({
|
||||
name: teamName.trim(),
|
||||
description: teamDescription.trim() || undefined,
|
||||
pattern: teamPattern,
|
||||
memberAgents: roleAssignments,
|
||||
});
|
||||
|
||||
if (team) {
|
||||
setShowCreateModal(false);
|
||||
setTeamName('');
|
||||
setTeamDescription('');
|
||||
setSelectedAgents([]);
|
||||
setTeamPattern('sequential');
|
||||
setActiveTeam(team);
|
||||
onSelectTeam?.(team.id);
|
||||
}
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleAgentSelection = (agentId: string) => {
|
||||
setSelectedAgents(prev =>
|
||||
prev.includes(agentId)
|
||||
? prev.filter(id => id !== agentId)
|
||||
: [...prev, agentId]
|
||||
);
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return <Activity className="w-3 h-3 text-green-500" />;
|
||||
case 'paused':
|
||||
return <AlertTriangle className="w-3 h-3 text-yellow-500" />;
|
||||
case 'completed':
|
||||
return <CheckCircle className="w-3 h-3 text-blue-500" />;
|
||||
default:
|
||||
return <Activity className="w-3 h-3 text-gray-400" />;
|
||||
}
|
||||
};
|
||||
|
||||
// Merge clones and agents for display - normalize to common type with defensive checks
|
||||
const availableAgents: Array<{ id: string; name: string; role?: string }> =
|
||||
(clones && clones.length > 0)
|
||||
? clones.map(c => ({ id: c.id, name: c.name, role: c.role }))
|
||||
: (agents && agents.length > 0)
|
||||
? agents.map(a => ({
|
||||
id: a.id,
|
||||
name: a.name,
|
||||
role: '默认助手',
|
||||
}))
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="p-3 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
团队
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
|
||||
title="创建团队"
|
||||
>
|
||||
<Plus className="w-4 h-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create Team Modal */}
|
||||
{showCreateModal && (
|
||||
<div className="absolute inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-80 max-h-[90vh] overflow-y-auto">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white">创建团队</h3>
|
||||
<button
|
||||
onClick={() => setShowCreateModal(false)}
|
||||
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
|
||||
>
|
||||
<X className="w-4 h-4 text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Team Name */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
团队名称 *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={teamName}
|
||||
onChange={(e) => setTeamName(e.target.value)}
|
||||
placeholder="例如：开发团队 Alpha"
|
||||
className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Team Description */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
描述
|
||||
</label>
|
||||
<textarea
|
||||
value={teamDescription}
|
||||
onChange={(e) => setTeamDescription(e.target.value)}
|
||||
placeholder="这个团队将负责什么工作？"
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Collaboration Pattern */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
协作模式
|
||||
</label>
|
||||
<select
|
||||
value={teamPattern}
|
||||
onChange={(e) => setTeamPattern(e.target.value as typeof teamPattern)}
|
||||
className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400"
|
||||
>
|
||||
<option value="sequential">顺序执行（逐个任务）</option>
|
||||
<option value="parallel">并行执行（同时工作）</option>
|
||||
<option value="pipeline">流水线（输出传递给下一步）</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Agent Selection */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
选择智能体 (已选择 {selectedAgents.length} 个) *
|
||||
</label>
|
||||
<div className="space-y-2 max-h-40 overflow-y-auto">
|
||||
{availableAgents.map((agent) => (
|
||||
<button
|
||||
key={agent.id}
|
||||
onClick={() => toggleAgentSelection(agent.id)}
|
||||
className={`w-full p-2 rounded-lg text-left text-sm transition-colors flex items-center gap-2 ${
|
||||
selectedAgents.includes(agent.id)
|
||||
? 'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800'
|
||||
: 'bg-gray-50 dark:bg-gray-700 border border-transparent hover:bg-gray-100 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className="w-6 h-6 rounded-full bg-gray-600 flex items-center justify-center text-white text-xs">
|
||||
<Bot className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-gray-900 dark:text-white truncate">{agent.name}</span>
|
||||
{selectedAgents.includes(agent.id) && (
|
||||
<CheckCircle className="w-4 h-4 text-blue-500 ml-auto" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
{availableAgents.length === 0 && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 text-center py-2">
|
||||
暂无可用智能体，请先创建一个智能体。
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-gray-200 dark:border-gray-700 flex gap-2">
|
||||
<button
|
||||
onClick={() => setShowCreateModal(false)}
|
||||
className="flex-1 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreateTeam}
|
||||
disabled={!teamName.trim() || selectedAgents.length === 0 || isCreating}
|
||||
className="flex-1 px-4 py-2 text-sm text-white bg-gray-700 dark:bg-gray-600 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{isCreating ? '创建中...' : '创建'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Team List */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="p-4 text-center text-gray-400 text-sm">加载中...</div>
|
||||
) : !Array.isArray(teams) || teams.length === 0 ? (
|
||||
<div className="p-4 text-center">
|
||||
<Users className="w-8 h-8 mx-auto mb-2 text-gray-300 dark:text-gray-600" />
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500">
|
||||
暂无团队
|
||||
</p>
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
|
||||
点击 + 创建一个团队
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1 p-2">
|
||||
{teams.map((team) => (
|
||||
<button
|
||||
key={team.id}
|
||||
onClick={() => handleSelectTeam(team.id)}
|
||||
className={`w-full p-2 rounded-lg text-left transition-colors ${
|
||||
selectedTeamId === team.id
|
||||
? 'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusIcon(team.status)}
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||
{team.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<Users className="w-3 h-3" />
|
||||
{team.members.length}
|
||||
</span>
|
||||
<span>·</span>
|
||||
<span>{team.tasks.length} 个任务</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamList;
|
||||
@@ -1,580 +0,0 @@
|
||||
/**
|
||||
* TeamOrchestrator - Multi-Agent Team Orchestration UI
|
||||
*
|
||||
* Provides an interface for creating teams, assigning agents,
|
||||
* managing tasks, and monitoring collaboration workflows.
|
||||
*
|
||||
* @module components/TeamOrchestrator
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTeamStore } from '../store/teamStore';
|
||||
import { useAgentStore } from '../store/agentStore';
|
||||
import { DevQALoopPanel } from './DevQALoop';
|
||||
import type {
|
||||
TeamMember,
|
||||
TeamTask,
|
||||
TeamMemberRole,
|
||||
TaskPriority,
|
||||
CollaborationPattern,
|
||||
} from '../types/team';
|
||||
import {
|
||||
Users, Plus, Trash2, X,
|
||||
Bot, Clock, AlertTriangle, CheckCircle,
|
||||
Play, UserPlus, FileText, RefreshCw,
|
||||
} from 'lucide-react';
|
||||
|
||||
// === Sub-Components ===
|
||||
|
||||
interface MemberCardProps {
|
||||
member: TeamMember;
|
||||
isSelected: boolean;
|
||||
onSelect: () => void;
|
||||
onRoleChange: (role: TeamMemberRole) => void;
|
||||
onRemove: () => void;
|
||||
}
|
||||
|
||||
function MemberCard({ member, isSelected, onSelect, onRoleChange, onRemove }: MemberCardProps) {
|
||||
const [showRoleMenu, setShowRoleMenu] = useState(false);
|
||||
|
||||
const roleColors: Record<TeamMemberRole, string> = {
|
||||
orchestrator: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
|
||||
developer: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
|
||||
reviewer: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
|
||||
tester: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
|
||||
architect: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300',
|
||||
specialist: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300',
|
||||
};
|
||||
|
||||
const statusColors = {
|
||||
idle: 'bg-gray-400',
|
||||
running: 'bg-green-500 animate-pulse',
|
||||
paused: 'bg-yellow-500',
|
||||
error: 'bg-red-500',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`p-3 rounded-lg border cursor-pointer transition-all ${
|
||||
isSelected
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
onClick={onSelect}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${statusColors[member.status]}`} />
|
||||
<Bot className="w-4 h-4 text-gray-500" />
|
||||
<span className="font-medium text-gray-900 dark:text-white">{member.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setShowRoleMenu(!showRoleMenu); }}
|
||||
className={`px-2 py-0.5 rounded text-xs font-medium ${roleColors[member.role]}`}
|
||||
>
|
||||
{member.role}
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onRemove(); }}
|
||||
className="p-1 text-gray-400 hover:text-red-500"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showRoleMenu && (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{(['orchestrator', 'developer', 'reviewer', 'tester', 'architect', 'specialist'] as TeamMemberRole[]).map(role => (
|
||||
<button
|
||||
key={role}
|
||||
onClick={(e) => { e.stopPropagation(); onRoleChange(role); setShowRoleMenu(false); }}
|
||||
className={`px-2 py-0.5 rounded text-xs ${roleColors[role]} hover:opacity-80`}
|
||||
>
|
||||
{role}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-2 flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>Workload: {member.workload}%</span>
|
||||
<span>Tasks: {member.currentTasks.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface TaskCardProps {
|
||||
task: TeamTask;
|
||||
members: TeamMember[];
|
||||
isSelected: boolean;
|
||||
onSelect: () => void;
|
||||
onAssign: (memberId: string) => void;
|
||||
onStatusChange: (status: TeamTask['status']) => void;
|
||||
}
|
||||
|
||||
function TaskCard({ task, members, isSelected, onSelect, onAssign, onStatusChange: _onStatusChange }: TaskCardProps) {
|
||||
const [showAssignMenu, setShowAssignMenu] = useState(false);
|
||||
|
||||
const priorityColors: Record<TaskPriority, string> = {
|
||||
critical: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
|
||||
high: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
|
||||
medium: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
|
||||
low: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300',
|
||||
};
|
||||
|
||||
const statusIcons: Record<TeamTask['status'], React.ReactNode> = {
|
||||
pending: <Clock className="w-4 h-4 text-gray-400" />,
|
||||
assigned: <UserPlus className="w-4 h-4 text-blue-400" />,
|
||||
in_progress: <Play className="w-4 h-4 text-green-400" />,
|
||||
review: <FileText className="w-4 h-4 text-yellow-400" />,
|
||||
blocked: <AlertTriangle className="w-4 h-4 text-red-400" />,
|
||||
completed: <CheckCircle className="w-4 h-4 text-green-500" />,
|
||||
failed: <X className="w-4 h-4 text-red-500" />,
|
||||
};
|
||||
|
||||
const assignee = members.find(m => m.id === task.assigneeId);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`p-3 rounded-lg border cursor-pointer transition-all ${
|
||||
isSelected
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
onClick={onSelect}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
{statusIcons[task.status]}
|
||||
<span className="font-medium text-gray-900 dark:text-white">{task.title}</span>
|
||||
</div>
|
||||
{task.description && (
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
|
||||
{task.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${priorityColors[task.priority]}`}>
|
||||
{task.priority}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setShowAssignMenu(!showAssignMenu); }}
|
||||
className={`px-2 py-1 rounded text-xs border ${
|
||||
assignee
|
||||
? 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
|
||||
: 'border-gray-200 text-gray-500 hover:border-gray-300 dark:border-gray-700 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{assignee ? assignee.name : 'Assign...'}
|
||||
</button>
|
||||
<span className="text-xs text-gray-400">{task.type}</span>
|
||||
</div>
|
||||
{task.estimate && (
|
||||
<span className="text-xs text-gray-400">{task.estimate}pts</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showAssignMenu && (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{members.map(member => (
|
||||
<button
|
||||
key={member.id}
|
||||
onClick={(e) => { e.stopPropagation(); onAssign(member.id); setShowAssignMenu(false); }}
|
||||
className="px-2 py-1 rounded text-xs border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
>
|
||||
{member.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// === Main Component ===
|
||||
|
||||
interface TeamOrchestratorProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function TeamOrchestrator({ isOpen, onClose }: TeamOrchestratorProps) {
|
||||
const [view, setView] = useState<'teams' | 'tasks' | 'members' | 'review'>('teams');
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [newTeamName, setNewTeamName] = useState('');
|
||||
const [newTeamPattern, setNewTeamPattern] = useState<CollaborationPattern>('sequential');
|
||||
|
||||
const {
|
||||
teams,
|
||||
activeTeam,
|
||||
metrics,
|
||||
error,
|
||||
selectedTaskId,
|
||||
selectedMemberId,
|
||||
loadTeams,
|
||||
createTeam,
|
||||
deleteTeam,
|
||||
setActiveTeam,
|
||||
addTask,
|
||||
updateTaskStatus,
|
||||
assignTask,
|
||||
addMember,
|
||||
removeMember,
|
||||
updateMemberRole,
|
||||
setSelectedTask,
|
||||
setSelectedMember,
|
||||
startDevQALoop,
|
||||
} = useTeamStore();
|
||||
|
||||
const clones = useAgentStore((s) => s.clones);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadTeams();
|
||||
}
|
||||
}, [isOpen, loadTeams]);
|
||||
|
||||
const handleCreateTeam = async () => {
|
||||
if (!newTeamName.trim()) return;
|
||||
const team = await createTeam({
|
||||
name: newTeamName.trim(),
|
||||
pattern: newTeamPattern,
|
||||
memberAgents: [],
|
||||
});
|
||||
if (team) {
|
||||
setActiveTeam(team);
|
||||
setNewTeamName('');
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddMember = async (agentId: string) => {
|
||||
if (!activeTeam) return;
|
||||
await addMember(activeTeam.id, agentId, 'developer');
|
||||
};
|
||||
|
||||
const handleAddTask = async () => {
|
||||
if (!activeTeam) return;
|
||||
await addTask({
|
||||
teamId: activeTeam.id,
|
||||
title: `Task ${activeTeam.tasks.length + 1}`,
|
||||
priority: 'medium',
|
||||
type: 'implementation',
|
||||
});
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-[90vw] h-[85vh] flex flex-col overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Users className="w-6 h-6 text-blue-500" />
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white">Team Orchestrator</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{metrics && (
|
||||
<div className="flex items-center gap-4 mr-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>Completed: {metrics.tasksCompleted}</span>
|
||||
<span>Pass Rate: {metrics.passRate.toFixed(0)}%</span>
|
||||
<span>Efficiency: {metrics.efficiency.toFixed(0)}%</span>
|
||||
</div>
|
||||
)}
|
||||
<button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">
|
||||
<X className="w-5 h-5 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Sidebar - Team List */}
|
||||
<div className="w-64 border-r border-gray-200 dark:border-gray-700 p-4 overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Teams</h3>
|
||||
<button
|
||||
onClick={() => setIsCreating(true)}
|
||||
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
|
||||
>
|
||||
<Plus className="w-4 h-4 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isCreating && (
|
||||
<div className="mb-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<input
|
||||
type="text"
|
||||
value={newTeamName}
|
||||
onChange={(e) => setNewTeamName(e.target.value)}
|
||||
placeholder="Team name..."
|
||||
className="w-full px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
/>
|
||||
<select
|
||||
value={newTeamPattern}
|
||||
onChange={(e) => setNewTeamPattern(e.target.value as CollaborationPattern)}
|
||||
className="w-full mt-2 px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
>
|
||||
<option value="sequential">Sequential</option>
|
||||
<option value="parallel">Parallel</option>
|
||||
<option value="pipeline">Pipeline</option>
|
||||
<option value="review_loop">Dev↔QA Loop</option>
|
||||
</select>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<button
|
||||
onClick={handleCreateTeam}
|
||||
className="flex-1 px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsCreating(false)}
|
||||
className="flex-1 px-2 py-1 text-xs border rounded hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
{teams.map(team => (
|
||||
<div
|
||||
key={team.id}
|
||||
onClick={() => setActiveTeam(team)}
|
||||
className={`p-3 rounded-lg cursor-pointer transition-all ${
|
||||
activeTeam?.id === team.id
|
||||
? 'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800'
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium text-gray-900 dark:text-white">{team.name}</span>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); deleteTeam(team.id); }}
|
||||
className="p-1 text-gray-400 hover:text-red-500"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-1 flex items-center gap-2 text-xs text-gray-500">
|
||||
<Users className="w-3 h-3" />
|
||||
<span>{team.members.length} members</span>
|
||||
<span>·</span>
|
||||
<span>{team.tasks.length} tasks</span>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<span className="px-1.5 py-0.5 text-xs bg-gray-100 dark:bg-gray-700 rounded">
|
||||
{team.pattern}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
{activeTeam ? (
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* View Tabs */}
|
||||
<div className="px-6 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setView('tasks')}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium ${
|
||||
view === 'tasks'
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
Tasks
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setView('members')}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium ${
|
||||
view === 'members'
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
Members
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setView('review')}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-1 ${
|
||||
view === 'review'
|
||||
? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Review
|
||||
{activeTeam.activeLoops.length > 0 && (
|
||||
<span className="ml-1 px-1.5 py-0.5 text-xs bg-yellow-200 dark:bg-yellow-800 rounded-full">
|
||||
{activeTeam.activeLoops.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tasks View */}
|
||||
{view === 'tasks' && (
|
||||
<div className="flex-1 p-6 overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Tasks</h3>
|
||||
<button
|
||||
onClick={handleAddTask}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Task
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{activeTeam.tasks.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
No tasks yet. Click "Add Task" to create one.
|
||||
</div>
|
||||
) : (
|
||||
activeTeam.tasks.map(task => (
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
members={activeTeam.members}
|
||||
isSelected={selectedTaskId === task.id}
|
||||
onSelect={() => setSelectedTask(task.id)}
|
||||
onAssign={(memberId) => assignTask(activeTeam.id, task.id, memberId)}
|
||||
onStatusChange={(status) => updateTaskStatus(activeTeam.id, task.id, status)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Members View */}
|
||||
{view === 'members' && (
|
||||
<div className="flex-1 p-6 overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Members</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
className="px-3 py-1.5 text-sm border rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
onChange={(e) => handleAddMember(e.target.value)}
|
||||
value=""
|
||||
>
|
||||
<option value="">Add Agent...</option>
|
||||
{clones.map(clone => (
|
||||
<option key={clone.id} value={clone.id}>
|
||||
{clone.name || clone.nickname || clone.id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{activeTeam.members.length === 0 ? (
|
||||
<div className="col-span-2 text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
No members yet. Select an agent to add.
|
||||
</div>
|
||||
) : (
|
||||
activeTeam.members.map(member => (
|
||||
<MemberCard
|
||||
key={member.id}
|
||||
member={member}
|
||||
isSelected={selectedMemberId === member.id}
|
||||
onSelect={() => setSelectedMember(member.id)}
|
||||
onRoleChange={(role) => updateMemberRole(activeTeam.id, member.id, role)}
|
||||
onRemove={() => removeMember(activeTeam.id, member.id)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Review View - Dev↔QA Loop */}
|
||||
{view === 'review' && (
|
||||
<div className="flex-1 p-6 overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Dev↔QA Review Loops</h3>
|
||||
<button
|
||||
onClick={async () => {
|
||||
// Start a new Dev↔QA loop with the first available task and members
|
||||
if (activeTeam.tasks.length > 0 && activeTeam.members.length >= 2) {
|
||||
const devMember = activeTeam.members.find(m => m.role === 'developer');
|
||||
const reviewerMember = activeTeam.members.find(m => m.role === 'reviewer');
|
||||
if (devMember && reviewerMember) {
|
||||
const task = activeTeam.tasks.find(t => t.status === 'pending' || t.status === 'in_progress');
|
||||
if (task) {
|
||||
await startDevQALoop(activeTeam.id, task.id, devMember.id, reviewerMember.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
disabled={activeTeam.tasks.length === 0 || activeTeam.members.length < 2}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Start Review Loop
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{activeTeam.activeLoops.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
<RefreshCw className="w-12 h-12 mx-auto mb-4 text-gray-300 dark:text-gray-600" />
|
||||
<p>No active review loops.</p>
|
||||
<p className="text-sm mt-2">Add tasks and members, then start a Dev↔QA loop.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{activeTeam.activeLoops.map(loop => {
|
||||
const task = activeTeam.tasks.find(t => t.id === loop.taskId);
|
||||
const developer = activeTeam.members.find(m => m.id === loop.developerId);
|
||||
const reviewer = activeTeam.members.find(m => m.id === loop.reviewerId);
|
||||
|
||||
return (
|
||||
<DevQALoopPanel
|
||||
key={loop.id}
|
||||
loop={loop}
|
||||
teamId={activeTeam.id}
|
||||
developerName={developer?.name || 'Unknown Developer'}
|
||||
reviewerName={reviewer?.name || 'Unknown Reviewer'}
|
||||
taskTitle={task?.title || 'Unknown Task'}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center text-gray-500 dark:text-gray-400">
|
||||
<div className="text-center">
|
||||
<Users className="w-12 h-12 mx-auto mb-4 text-gray-300 dark:text-gray-600" />
|
||||
<p>Select or create a team to get started</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-6 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>{teams.length} teams total</span>
|
||||
{error && <span className="text-red-500">{error}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user