feat(team): implement multi-agent team collaboration UI
Phase 6 progress - Multi-Agent Team Collaboration: Types (types/team.ts): - Team, TeamMember, TeamTask type definitions - Dev↔QA Loop state machine types - CollaborationEvent and TeamMetrics types Store (store/teamStore.ts): - Team CRUD operations with localStorage persistence - Task assignment and status management - Dev↔QA loop lifecycle management - Real-time collaboration events Components: - TeamOrchestrator.tsx: Team creation, member/task management UI - DevQALoop.tsx: Developer↔QA review loop visualization - TeamCollaborationView.tsx: Real-time collaboration dashboard Features: - 6 agent roles: orchestrator, developer, reviewer, tester, architect, specialist - 7 task statuses: pending → assigned → in_progress → review → completed/failed - Dev↔QA loop with max 3 iterations before escalation - 4 collaboration patterns: sequential, parallel, pipeline, review_loop - Live event feed with auto-scroll - Team metrics: completion rate, pass rate, efficiency score Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
468
desktop/src/components/DevQALoop.tsx
Normal file
468
desktop/src/components/DevQALoop.tsx
Normal file
@@ -0,0 +1,468 @@
|
|||||||
|
/**
|
||||||
|
* 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, useEffect } from 'react';
|
||||||
|
import { useTeamStore } from '../store/teamStore';
|
||||||
|
import type { DevQALoop as DevQALoopType, ReviewFeedback, ReviewIssue } from '../types/team';
|
||||||
|
import {
|
||||||
|
RefreshCw, CheckCircle, XCircle, AlertTriangle, ArrowRight,
|
||||||
|
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, 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 handleStartRevising = async () => {
|
||||||
|
await updateLoopState(teamId, loop.id, 'revising');
|
||||||
|
};
|
||||||
|
|
||||||
|
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;
|
||||||
399
desktop/src/components/TeamCollaborationView.tsx
Normal file
399
desktop/src/components/TeamCollaborationView.tsx
Normal file
@@ -0,0 +1,399 @@
|
|||||||
|
/**
|
||||||
|
* 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, Clock, AlertTriangle, Play, Pause,
|
||||||
|
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">
|
||||||
|
{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;
|
||||||
508
desktop/src/components/TeamOrchestrator.tsx
Normal file
508
desktop/src/components/TeamOrchestrator.tsx
Normal file
@@ -0,0 +1,508 @@
|
|||||||
|
/**
|
||||||
|
* 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, useCallback } from 'react';
|
||||||
|
import { useTeamStore } from '../store/teamStore';
|
||||||
|
import { useGatewayStore } from '../store/gatewayStore';
|
||||||
|
import type {
|
||||||
|
Team,
|
||||||
|
TeamMember,
|
||||||
|
TeamTask,
|
||||||
|
TeamMemberRole,
|
||||||
|
TaskPriority,
|
||||||
|
CollaborationPattern,
|
||||||
|
} from '../types/team';
|
||||||
|
import {
|
||||||
|
Users, Plus, Trash2, Edit2, Check, X, ChevronDown, ChevronUp,
|
||||||
|
Bot, GitBranch, ArrowRight, Clock, AlertTriangle, CheckCircle,
|
||||||
|
Play, Pause, Settings, UserPlus, FileText, Activity,
|
||||||
|
} 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 }: 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'>('teams');
|
||||||
|
const [isCreating, setIsCreating] = useState(false);
|
||||||
|
const [newTeamName, setNewTeamName] = useState('');
|
||||||
|
const [newTeamPattern, setNewTeamPattern] = useState<CollaborationPattern>('sequential');
|
||||||
|
|
||||||
|
const {
|
||||||
|
teams,
|
||||||
|
activeTeam,
|
||||||
|
metrics,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
selectedTaskId,
|
||||||
|
selectedMemberId,
|
||||||
|
loadTeams,
|
||||||
|
createTeam,
|
||||||
|
deleteTeam,
|
||||||
|
setActiveTeam,
|
||||||
|
addTask,
|
||||||
|
updateTaskStatus,
|
||||||
|
assignTask,
|
||||||
|
addMember,
|
||||||
|
removeMember,
|
||||||
|
updateMemberRole,
|
||||||
|
setSelectedTask,
|
||||||
|
setSelectedMember,
|
||||||
|
} = useTeamStore();
|
||||||
|
|
||||||
|
const { clones } = useGatewayStore();
|
||||||
|
|
||||||
|
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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
587
desktop/src/store/teamStore.ts
Normal file
587
desktop/src/store/teamStore.ts
Normal file
@@ -0,0 +1,587 @@
|
|||||||
|
/**
|
||||||
|
* Team Store - Multi-Agent Team Collaboration State Management
|
||||||
|
*
|
||||||
|
* Manages team orchestration, task assignment, Dev↔QA loops,
|
||||||
|
* and real-time collaboration state.
|
||||||
|
*
|
||||||
|
* @module store/teamStore
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { create } from 'zustand';
|
||||||
|
import type {
|
||||||
|
Team,
|
||||||
|
TeamMember,
|
||||||
|
TeamTask,
|
||||||
|
TeamTaskStatus,
|
||||||
|
TeamMemberRole,
|
||||||
|
DevQALoop,
|
||||||
|
DevQALoopState,
|
||||||
|
CollaborationPattern,
|
||||||
|
CreateTeamRequest,
|
||||||
|
AddTeamTaskRequest,
|
||||||
|
TeamMetrics,
|
||||||
|
CollaborationEvent,
|
||||||
|
ReviewFeedback,
|
||||||
|
TaskDeliverable,
|
||||||
|
} from '../types/team';
|
||||||
|
import { getGatewayClient } from '../lib/gateway-client';
|
||||||
|
|
||||||
|
// === Store State ===
|
||||||
|
|
||||||
|
interface TeamStoreState {
|
||||||
|
// Data
|
||||||
|
teams: Team[];
|
||||||
|
activeTeam: Team | null;
|
||||||
|
metrics: TeamMetrics | null;
|
||||||
|
|
||||||
|
// UI State
|
||||||
|
isLoading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
selectedTaskId: string | null;
|
||||||
|
selectedMemberId: string | null;
|
||||||
|
|
||||||
|
// Real-time events
|
||||||
|
recentEvents: CollaborationEvent[];
|
||||||
|
|
||||||
|
// Actions - Team Management
|
||||||
|
loadTeams: () => Promise<void>;
|
||||||
|
createTeam: (request: CreateTeamRequest) => Promise<Team | null>;
|
||||||
|
deleteTeam: (teamId: string) => Promise<boolean>;
|
||||||
|
setActiveTeam: (team: Team | null) => void;
|
||||||
|
|
||||||
|
// Actions - Member Management
|
||||||
|
addMember: (teamId: string, agentId: string, role: TeamMemberRole) => Promise<TeamMember | null>;
|
||||||
|
removeMember: (teamId: string, memberId: string) => Promise<boolean>;
|
||||||
|
updateMemberRole: (teamId: string, memberId: string, role: TeamMemberRole) => Promise<boolean>;
|
||||||
|
|
||||||
|
// Actions - Task Management
|
||||||
|
addTask: (request: AddTeamTaskRequest) => Promise<TeamTask | null>;
|
||||||
|
updateTaskStatus: (teamId: string, taskId: string, status: TeamTaskStatus) => Promise<boolean>;
|
||||||
|
assignTask: (teamId: string, taskId: string, memberId: string) => Promise<boolean>;
|
||||||
|
submitDeliverable: (teamId: string, taskId: string, deliverable: TaskDeliverable) => Promise<boolean>;
|
||||||
|
|
||||||
|
// Actions - Dev↔QA Loop
|
||||||
|
startDevQALoop: (teamId: string, taskId: string, developerId: string, reviewerId: string) => Promise<DevQALoop | null>;
|
||||||
|
submitReview: (teamId: string, loopId: string, feedback: Omit<ReviewFeedback, 'reviewedAt' | 'reviewerId'>) => Promise<boolean>;
|
||||||
|
updateLoopState: (teamId: string, loopId: string, state: DevQALoopState) => Promise<boolean>;
|
||||||
|
|
||||||
|
// Actions - Events
|
||||||
|
addEvent: (event: CollaborationEvent) => void;
|
||||||
|
clearEvents: () => void;
|
||||||
|
|
||||||
|
// Actions - UI
|
||||||
|
setSelectedTask: (taskId: string | null) => void;
|
||||||
|
setSelectedMember: (memberId: string | null) => void;
|
||||||
|
clearError: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// === Helper Functions ===
|
||||||
|
|
||||||
|
const generateId = () => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||||
|
|
||||||
|
const calculateMetrics = (team: Team): TeamMetrics => {
|
||||||
|
const completedTasks = team.tasks.filter(t => t.status === 'completed');
|
||||||
|
const totalTasks = team.tasks.length;
|
||||||
|
const reviewedTasks = completedTasks.filter(t => t.reviewFeedback);
|
||||||
|
|
||||||
|
const avgCompletionTime = completedTasks.length > 0
|
||||||
|
? completedTasks.reduce((sum, t) => {
|
||||||
|
if (t.startedAt && t.completedAt) {
|
||||||
|
return sum + (new Date(t.completedAt).getTime() - new Date(t.startedAt).getTime());
|
||||||
|
}
|
||||||
|
return sum;
|
||||||
|
}, 0) / completedTasks.length
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
const approvedReviews = reviewedTasks.filter(t => t.reviewFeedback?.verdict === 'approved');
|
||||||
|
const passRate = reviewedTasks.length > 0
|
||||||
|
? (approvedReviews.length / reviewedTasks.length) * 100
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
const totalIterations = team.activeLoops.reduce((sum, loop) => sum + loop.iterationCount, 0);
|
||||||
|
const avgIterations = team.activeLoops.length > 0
|
||||||
|
? totalIterations / team.activeLoops.length
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
const escalations = team.activeLoops.filter(loop => loop.state === 'escalated').length;
|
||||||
|
|
||||||
|
const efficiency = totalTasks > 0
|
||||||
|
? Math.min(100, (completedTasks.length / totalTasks) * 100 * (passRate / 100))
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
return {
|
||||||
|
tasksCompleted: completedTasks.length,
|
||||||
|
avgCompletionTime,
|
||||||
|
passRate,
|
||||||
|
avgIterations,
|
||||||
|
escalations,
|
||||||
|
efficiency,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// === Store Implementation ===
|
||||||
|
|
||||||
|
export const useTeamStore = create<TeamStoreState>((set, get) => ({
|
||||||
|
// Initial State
|
||||||
|
teams: [],
|
||||||
|
activeTeam: null,
|
||||||
|
metrics: null,
|
||||||
|
isLoading: false,
|
||||||
|
error: null,
|
||||||
|
selectedTaskId: null,
|
||||||
|
selectedMemberId: null,
|
||||||
|
recentEvents: [],
|
||||||
|
|
||||||
|
// Team Management
|
||||||
|
loadTeams: async () => {
|
||||||
|
set({ isLoading: true, error: null });
|
||||||
|
try {
|
||||||
|
const client = getGatewayClient();
|
||||||
|
// For now, load from localStorage until API is available
|
||||||
|
const stored = localStorage.getItem('zclaw-teams');
|
||||||
|
const teams: Team[] = stored ? JSON.parse(stored) : [];
|
||||||
|
set({ teams, isLoading: false });
|
||||||
|
} catch (error) {
|
||||||
|
set({ error: (error as Error).message, isLoading: false });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
createTeam: async (request: CreateTeamRequest) => {
|
||||||
|
set({ isLoading: true, error: null });
|
||||||
|
try {
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
const members: TeamMember[] = request.memberAgents.map((m, index) => ({
|
||||||
|
id: generateId(),
|
||||||
|
agentId: m.agentId,
|
||||||
|
name: `Agent-${m.agentId.slice(0, 4)}`,
|
||||||
|
role: m.role,
|
||||||
|
skills: [],
|
||||||
|
workload: 0,
|
||||||
|
status: 'idle',
|
||||||
|
maxConcurrentTasks: m.role === 'orchestrator' ? 5 : 2,
|
||||||
|
currentTasks: [],
|
||||||
|
}));
|
||||||
|
|
||||||
|
const team: Team = {
|
||||||
|
id: generateId(),
|
||||||
|
name: request.name,
|
||||||
|
description: request.description,
|
||||||
|
members,
|
||||||
|
tasks: [],
|
||||||
|
pattern: request.pattern,
|
||||||
|
activeLoops: [],
|
||||||
|
status: 'active',
|
||||||
|
createdAt: now,
|
||||||
|
updatedAt: now,
|
||||||
|
};
|
||||||
|
|
||||||
|
set(state => {
|
||||||
|
const teams = [...state.teams, team];
|
||||||
|
localStorage.setItem('zclaw-teams', JSON.stringify(teams));
|
||||||
|
return { teams, activeTeam: team, isLoading: false };
|
||||||
|
});
|
||||||
|
|
||||||
|
return team;
|
||||||
|
} catch (error) {
|
||||||
|
set({ error: (error as Error).message, isLoading: false });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteTeam: async (teamId: string) => {
|
||||||
|
set({ isLoading: true, error: null });
|
||||||
|
try {
|
||||||
|
set(state => {
|
||||||
|
const teams = state.teams.filter(t => t.id !== teamId);
|
||||||
|
localStorage.setItem('zclaw-teams', JSON.stringify(teams));
|
||||||
|
return {
|
||||||
|
teams,
|
||||||
|
activeTeam: state.activeTeam?.id === teamId ? null : state.activeTeam,
|
||||||
|
isLoading: false
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
set({ error: (error as Error).message, isLoading: false });
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setActiveTeam: (team: Team | null) => {
|
||||||
|
set(state => ({
|
||||||
|
activeTeam: team,
|
||||||
|
metrics: team ? calculateMetrics(team) : null,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
// Member Management
|
||||||
|
addMember: async (teamId: string, agentId: string, role: TeamMemberRole) => {
|
||||||
|
const state = get();
|
||||||
|
const team = state.teams.find(t => t.id === teamId);
|
||||||
|
if (!team) return null;
|
||||||
|
|
||||||
|
const member: TeamMember = {
|
||||||
|
id: generateId(),
|
||||||
|
agentId,
|
||||||
|
name: `Agent-${agentId.slice(0, 4)}`,
|
||||||
|
role,
|
||||||
|
skills: [],
|
||||||
|
workload: 0,
|
||||||
|
status: 'idle',
|
||||||
|
maxConcurrentTasks: role === 'orchestrator' ? 5 : 2,
|
||||||
|
currentTasks: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
const updatedTeam = {
|
||||||
|
...team,
|
||||||
|
members: [...team.members, member],
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
set(state => {
|
||||||
|
const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
|
||||||
|
localStorage.setItem('zclaw-teams', JSON.stringify(teams));
|
||||||
|
return {
|
||||||
|
teams,
|
||||||
|
activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return member;
|
||||||
|
},
|
||||||
|
|
||||||
|
removeMember: async (teamId: string, memberId: string) => {
|
||||||
|
const state = get();
|
||||||
|
const team = state.teams.find(t => t.id === teamId);
|
||||||
|
if (!team) return false;
|
||||||
|
|
||||||
|
const updatedTeam = {
|
||||||
|
...team,
|
||||||
|
members: team.members.filter(m => m.id !== memberId),
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
set(state => {
|
||||||
|
const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
|
||||||
|
localStorage.setItem('zclaw-teams', JSON.stringify(teams));
|
||||||
|
return {
|
||||||
|
teams,
|
||||||
|
activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
updateMemberRole: async (teamId: string, memberId: string, role: TeamMemberRole) => {
|
||||||
|
const state = get();
|
||||||
|
const team = state.teams.find(t => t.id === teamId);
|
||||||
|
if (!team) return false;
|
||||||
|
|
||||||
|
const updatedTeam = {
|
||||||
|
...team,
|
||||||
|
members: team.members.map(m =>
|
||||||
|
m.id === memberId ? { ...m, role, maxConcurrentTasks: role === 'orchestrator' ? 5 : 2 } : m
|
||||||
|
),
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
set(state => {
|
||||||
|
const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
|
||||||
|
localStorage.setItem('zclaw-teams', JSON.stringify(teams));
|
||||||
|
return {
|
||||||
|
teams,
|
||||||
|
activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Task Management
|
||||||
|
addTask: async (request: AddTeamTaskRequest) => {
|
||||||
|
const state = get();
|
||||||
|
const team = state.teams.find(t => t.id === request.teamId);
|
||||||
|
if (!team) return null;
|
||||||
|
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
const task: TeamTask = {
|
||||||
|
id: generateId(),
|
||||||
|
title: request.title,
|
||||||
|
description: request.description,
|
||||||
|
status: request.assigneeId ? 'assigned' : 'pending',
|
||||||
|
priority: request.priority,
|
||||||
|
assigneeId: request.assigneeId,
|
||||||
|
dependencies: request.dependencies || [],
|
||||||
|
type: request.type,
|
||||||
|
estimate: request.estimate,
|
||||||
|
createdAt: now,
|
||||||
|
updatedAt: now,
|
||||||
|
};
|
||||||
|
|
||||||
|
const updatedTeam = {
|
||||||
|
...team,
|
||||||
|
tasks: [...team.tasks, task],
|
||||||
|
updatedAt: now,
|
||||||
|
};
|
||||||
|
|
||||||
|
set(state => {
|
||||||
|
const teams = state.teams.map(t => t.id === request.teamId ? updatedTeam : t);
|
||||||
|
localStorage.setItem('zclaw-teams', JSON.stringify(teams));
|
||||||
|
return {
|
||||||
|
teams,
|
||||||
|
activeTeam: state.activeTeam?.id === request.teamId ? updatedTeam : state.activeTeam,
|
||||||
|
metrics: state.activeTeam?.id === request.teamId ? calculateMetrics(updatedTeam) : state.metrics,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return task;
|
||||||
|
},
|
||||||
|
|
||||||
|
updateTaskStatus: async (teamId: string, taskId: string, status: TeamTaskStatus) => {
|
||||||
|
const state = get();
|
||||||
|
const team = state.teams.find(t => t.id === teamId);
|
||||||
|
if (!team) return false;
|
||||||
|
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
const updatedTeam = {
|
||||||
|
...team,
|
||||||
|
tasks: team.tasks.map(t => {
|
||||||
|
if (t.id !== taskId) return t;
|
||||||
|
const updates: Partial<TeamTask> = { status, updatedAt: now };
|
||||||
|
if (status === 'in_progress' && !t.startedAt) {
|
||||||
|
updates.startedAt = now;
|
||||||
|
}
|
||||||
|
if (status === 'completed') {
|
||||||
|
updates.completedAt = now;
|
||||||
|
}
|
||||||
|
return { ...t, ...updates };
|
||||||
|
}),
|
||||||
|
updatedAt: now,
|
||||||
|
};
|
||||||
|
|
||||||
|
set(state => {
|
||||||
|
const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
|
||||||
|
localStorage.setItem('zclaw-teams', JSON.stringify(teams));
|
||||||
|
return {
|
||||||
|
teams,
|
||||||
|
activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
|
||||||
|
metrics: state.activeTeam?.id === teamId ? calculateMetrics(updatedTeam) : state.metrics,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
assignTask: async (teamId: string, taskId: string, memberId: string) => {
|
||||||
|
const state = get();
|
||||||
|
const team = state.teams.find(t => t.id === teamId);
|
||||||
|
if (!team) return false;
|
||||||
|
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
const updatedTeam = {
|
||||||
|
...team,
|
||||||
|
tasks: team.tasks.map(t =>
|
||||||
|
t.id === taskId
|
||||||
|
? { ...t, assigneeId: memberId, status: 'assigned' as TeamTaskStatus, updatedAt: now }
|
||||||
|
: t
|
||||||
|
),
|
||||||
|
members: team.members.map(m =>
|
||||||
|
m.id === memberId
|
||||||
|
? { ...m, currentTasks: [...m.currentTasks, taskId], workload: (m.workload + 25) }
|
||||||
|
: m
|
||||||
|
),
|
||||||
|
updatedAt: now,
|
||||||
|
};
|
||||||
|
|
||||||
|
set(state => {
|
||||||
|
const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
|
||||||
|
localStorage.setItem('zclaw-teams', JSON.stringify(teams));
|
||||||
|
return {
|
||||||
|
teams,
|
||||||
|
activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
submitDeliverable: async (teamId: string, taskId: string, deliverable: TaskDeliverable) => {
|
||||||
|
const state = get();
|
||||||
|
const team = state.teams.find(t => t.id === teamId);
|
||||||
|
if (!team) return false;
|
||||||
|
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
const updatedTeam = {
|
||||||
|
...team,
|
||||||
|
tasks: team.tasks.map(t =>
|
||||||
|
t.id === taskId
|
||||||
|
? { ...t, deliverable, status: 'review' as TeamTaskStatus, updatedAt: now }
|
||||||
|
: t
|
||||||
|
),
|
||||||
|
updatedAt: now,
|
||||||
|
};
|
||||||
|
|
||||||
|
set(state => {
|
||||||
|
const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
|
||||||
|
localStorage.setItem('zclaw-teams', JSON.stringify(teams));
|
||||||
|
return {
|
||||||
|
teams,
|
||||||
|
activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Dev↔QA Loop
|
||||||
|
startDevQALoop: async (teamId: string, taskId: string, developerId: string, reviewerId: string) => {
|
||||||
|
const state = get();
|
||||||
|
const team = state.teams.find(t => t.id === teamId);
|
||||||
|
if (!team) return null;
|
||||||
|
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
const loop: DevQALoop = {
|
||||||
|
id: generateId(),
|
||||||
|
developerId,
|
||||||
|
reviewerId,
|
||||||
|
taskId,
|
||||||
|
state: 'developing',
|
||||||
|
iterationCount: 0,
|
||||||
|
maxIterations: 3,
|
||||||
|
feedbackHistory: [],
|
||||||
|
startedAt: now,
|
||||||
|
lastUpdatedAt: now,
|
||||||
|
};
|
||||||
|
|
||||||
|
const updatedTeam = {
|
||||||
|
...team,
|
||||||
|
activeLoops: [...team.activeLoops, loop],
|
||||||
|
updatedAt: now,
|
||||||
|
};
|
||||||
|
|
||||||
|
set(state => {
|
||||||
|
const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
|
||||||
|
localStorage.setItem('zclaw-teams', JSON.stringify(teams));
|
||||||
|
return {
|
||||||
|
teams,
|
||||||
|
activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return loop;
|
||||||
|
},
|
||||||
|
|
||||||
|
submitReview: async (teamId: string, loopId: string, feedback: Omit<ReviewFeedback, 'reviewedAt' | 'reviewerId'>) => {
|
||||||
|
const state = get();
|
||||||
|
const team = state.teams.find(t => t.id === teamId);
|
||||||
|
if (!team) return false;
|
||||||
|
|
||||||
|
const loop = team.activeLoops.find(l => l.id === loopId);
|
||||||
|
if (!loop) return false;
|
||||||
|
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
const fullFeedback: ReviewFeedback = {
|
||||||
|
...feedback,
|
||||||
|
reviewedAt: now,
|
||||||
|
reviewerId: loop.reviewerId,
|
||||||
|
};
|
||||||
|
|
||||||
|
let newState: DevQALoopState;
|
||||||
|
let newIterationCount = loop.iterationCount;
|
||||||
|
|
||||||
|
if (feedback.verdict === 'approved') {
|
||||||
|
newState = 'approved';
|
||||||
|
} else if (newIterationCount >= loop.maxIterations - 1) {
|
||||||
|
newState = 'escalated';
|
||||||
|
} else {
|
||||||
|
newState = 'revising';
|
||||||
|
newIterationCount++;
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatedTeam = {
|
||||||
|
...team,
|
||||||
|
tasks: team.tasks.map(t =>
|
||||||
|
t.id === loop.taskId
|
||||||
|
? { ...t, reviewFeedback: fullFeedback, updatedAt: now }
|
||||||
|
: t
|
||||||
|
),
|
||||||
|
activeLoops: team.activeLoops.map(l =>
|
||||||
|
l.id === loopId
|
||||||
|
? {
|
||||||
|
...l,
|
||||||
|
state: newState,
|
||||||
|
iterationCount: newIterationCount,
|
||||||
|
feedbackHistory: [...l.feedbackHistory, fullFeedback],
|
||||||
|
lastUpdatedAt: now,
|
||||||
|
}
|
||||||
|
: l
|
||||||
|
),
|
||||||
|
updatedAt: now,
|
||||||
|
};
|
||||||
|
|
||||||
|
set(state => {
|
||||||
|
const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
|
||||||
|
localStorage.setItem('zclaw-teams', JSON.stringify(teams));
|
||||||
|
return {
|
||||||
|
teams,
|
||||||
|
activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
|
||||||
|
metrics: state.activeTeam?.id === teamId ? calculateMetrics(updatedTeam) : state.metrics,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
updateLoopState: async (teamId: string, loopId: string, state: DevQALoopState) => {
|
||||||
|
const teamStore = get();
|
||||||
|
const team = teamStore.teams.find(t => t.id === teamId);
|
||||||
|
if (!team) return false;
|
||||||
|
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
const updatedTeam = {
|
||||||
|
...team,
|
||||||
|
activeLoops: team.activeLoops.map(l =>
|
||||||
|
l.id === loopId
|
||||||
|
? { ...l, state, lastUpdatedAt: now }
|
||||||
|
: l
|
||||||
|
),
|
||||||
|
updatedAt: now,
|
||||||
|
};
|
||||||
|
|
||||||
|
set(state => {
|
||||||
|
const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
|
||||||
|
localStorage.setItem('zclaw-teams', JSON.stringify(teams));
|
||||||
|
return {
|
||||||
|
teams,
|
||||||
|
activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Events
|
||||||
|
addEvent: (event: CollaborationEvent) => {
|
||||||
|
set(state => ({
|
||||||
|
recentEvents: [event, ...state.recentEvents].slice(0, 100),
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
clearEvents: () => {
|
||||||
|
set({ recentEvents: [] });
|
||||||
|
},
|
||||||
|
|
||||||
|
// UI
|
||||||
|
setSelectedTask: (taskId: string | null) => {
|
||||||
|
set({ selectedTaskId: taskId });
|
||||||
|
},
|
||||||
|
|
||||||
|
setSelectedMember: (memberId: string | null) => {
|
||||||
|
set({ selectedMemberId: memberId });
|
||||||
|
},
|
||||||
|
|
||||||
|
clearError: () => {
|
||||||
|
set({ error: null });
|
||||||
|
},
|
||||||
|
}));
|
||||||
@@ -56,3 +56,24 @@ export type {
|
|||||||
WorkflowControlRequest,
|
WorkflowControlRequest,
|
||||||
WorkflowControlResponse,
|
WorkflowControlResponse,
|
||||||
} from './workflow';
|
} from './workflow';
|
||||||
|
|
||||||
|
// Team Collaboration Types
|
||||||
|
export type {
|
||||||
|
TeamMemberRole,
|
||||||
|
TeamTaskStatus,
|
||||||
|
TaskPriority,
|
||||||
|
TeamMember,
|
||||||
|
TeamTask,
|
||||||
|
TaskDeliverable,
|
||||||
|
ReviewFeedback,
|
||||||
|
ReviewIssue,
|
||||||
|
DevQALoopState,
|
||||||
|
DevQALoop,
|
||||||
|
CollaborationPattern,
|
||||||
|
Team,
|
||||||
|
CollaborationEvent,
|
||||||
|
TeamMetrics,
|
||||||
|
CreateTeamRequest,
|
||||||
|
AddTeamTaskRequest,
|
||||||
|
TeamResponse,
|
||||||
|
} from './team';
|
||||||
|
|||||||
296
desktop/src/types/team.ts
Normal file
296
desktop/src/types/team.ts
Normal file
@@ -0,0 +1,296 @@
|
|||||||
|
/**
|
||||||
|
* Multi-Agent Team Collaboration Types for OpenFang
|
||||||
|
*
|
||||||
|
* This module defines types for multi-agent team orchestration,
|
||||||
|
* collaboration workflows, and Dev↔QA loops.
|
||||||
|
*
|
||||||
|
* @module types/team
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type { Agent, AgentStatus } from './agent';
|
||||||
|
|
||||||
|
// === Team Definition ===
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Role of an agent within a team
|
||||||
|
*/
|
||||||
|
export type TeamMemberRole =
|
||||||
|
| 'orchestrator' // Team coordinator - assigns tasks, manages flow
|
||||||
|
| 'developer' // Primary implementation agent
|
||||||
|
| 'reviewer' // Code review and quality assurance
|
||||||
|
| 'tester' // Testing and validation
|
||||||
|
| 'architect' // System design and architecture
|
||||||
|
| 'specialist'; // Domain-specific expertise
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Possible states for a team task
|
||||||
|
*/
|
||||||
|
export type TeamTaskStatus =
|
||||||
|
| 'pending' // Waiting to be assigned
|
||||||
|
| 'assigned' // Assigned to an agent but not started
|
||||||
|
| 'in_progress' // Currently being worked on
|
||||||
|
| 'review' // Under review by another agent
|
||||||
|
| 'blocked' // Blocked by dependency or issue
|
||||||
|
| 'completed' // Successfully completed
|
||||||
|
| 'failed'; // Failed with error
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Priority levels for team tasks
|
||||||
|
*/
|
||||||
|
export type TaskPriority = 'critical' | 'high' | 'medium' | 'low';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A member of a team (an agent with a specific role)
|
||||||
|
*/
|
||||||
|
export interface TeamMember {
|
||||||
|
/** Unique identifier for this team member */
|
||||||
|
id: string;
|
||||||
|
/** ID of the underlying agent */
|
||||||
|
agentId: string;
|
||||||
|
/** Agent display name */
|
||||||
|
name: string;
|
||||||
|
/** Role within the team */
|
||||||
|
role: TeamMemberRole;
|
||||||
|
/** Skills this member contributes */
|
||||||
|
skills: string[];
|
||||||
|
/** Current workload (0-100%) */
|
||||||
|
workload: number;
|
||||||
|
/** Current status */
|
||||||
|
status: AgentStatus;
|
||||||
|
/** Maximum concurrent tasks */
|
||||||
|
maxConcurrentTasks: number;
|
||||||
|
/** Current assigned task IDs */
|
||||||
|
currentTasks: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A task that can be assigned to team members
|
||||||
|
*/
|
||||||
|
export interface TeamTask {
|
||||||
|
/** Unique task identifier */
|
||||||
|
id: string;
|
||||||
|
/** Task title */
|
||||||
|
title: string;
|
||||||
|
/** Detailed task description */
|
||||||
|
description?: string;
|
||||||
|
/** Current status */
|
||||||
|
status: TeamTaskStatus;
|
||||||
|
/** Priority level */
|
||||||
|
priority: TaskPriority;
|
||||||
|
/** ID of assigned team member */
|
||||||
|
assigneeId?: string;
|
||||||
|
/** IDs of tasks this depends on */
|
||||||
|
dependencies: string[];
|
||||||
|
/** Task type classification */
|
||||||
|
type: 'implementation' | 'review' | 'testing' | 'design' | 'deployment';
|
||||||
|
/** Estimated effort (story points or hours) */
|
||||||
|
estimate?: number;
|
||||||
|
/** ISO timestamp of creation */
|
||||||
|
createdAt: string;
|
||||||
|
/** ISO timestamp of last update */
|
||||||
|
updatedAt?: string;
|
||||||
|
/** ISO timestamp when work started */
|
||||||
|
startedAt?: string;
|
||||||
|
/** ISO timestamp of completion */
|
||||||
|
completedAt?: string;
|
||||||
|
/** Result or deliverable */
|
||||||
|
deliverable?: TaskDeliverable;
|
||||||
|
/** Review feedback if in review */
|
||||||
|
reviewFeedback?: ReviewFeedback;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Deliverable produced by a task
|
||||||
|
*/
|
||||||
|
export interface TaskDeliverable {
|
||||||
|
/** Type of deliverable */
|
||||||
|
type: 'code' | 'document' | 'test' | 'config' | 'report';
|
||||||
|
/** Description of what was produced */
|
||||||
|
description: string;
|
||||||
|
/** File paths modified/created */
|
||||||
|
files?: string[];
|
||||||
|
/** Key metrics or outcomes */
|
||||||
|
metrics?: Record<string, number | string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Feedback from a review
|
||||||
|
*/
|
||||||
|
export interface ReviewFeedback {
|
||||||
|
/** Review verdict */
|
||||||
|
verdict: 'approved' | 'needs_work' | 'rejected';
|
||||||
|
/** Detailed feedback */
|
||||||
|
comments: string[];
|
||||||
|
/** Issues found */
|
||||||
|
issues: ReviewIssue[];
|
||||||
|
/** ISO timestamp of review */
|
||||||
|
reviewedAt: string;
|
||||||
|
/** ID of reviewer */
|
||||||
|
reviewerId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An issue found during review
|
||||||
|
*/
|
||||||
|
export interface ReviewIssue {
|
||||||
|
/** Issue severity */
|
||||||
|
severity: 'critical' | 'major' | 'minor' | 'suggestion';
|
||||||
|
/** Issue description */
|
||||||
|
description: string;
|
||||||
|
/** File location if applicable */
|
||||||
|
file?: string;
|
||||||
|
/** Line number if applicable */
|
||||||
|
line?: number;
|
||||||
|
/** Suggested fix */
|
||||||
|
suggestion?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// === Dev↔QA Loop ===
|
||||||
|
|
||||||
|
/**
|
||||||
|
* States in the Dev↔QA loop
|
||||||
|
*/
|
||||||
|
export type DevQALoopState =
|
||||||
|
| 'idle' // No active loop
|
||||||
|
| 'developing' // Developer is implementing
|
||||||
|
| 'reviewing' // QA is reviewing
|
||||||
|
| 'revising' // Developer is fixing issues
|
||||||
|
| 'approved' // QA approved the work
|
||||||
|
| 'escalated'; // Too many retries, needs human intervention
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A Dev↔QA loop instance
|
||||||
|
*/
|
||||||
|
export interface DevQALoop {
|
||||||
|
/** Unique loop identifier */
|
||||||
|
id: string;
|
||||||
|
/** ID of the developer agent */
|
||||||
|
developerId: string;
|
||||||
|
/** ID of the QA/reviewer agent */
|
||||||
|
reviewerId: string;
|
||||||
|
/** Task being worked on */
|
||||||
|
taskId: string;
|
||||||
|
/** Current state */
|
||||||
|
state: DevQALoopState;
|
||||||
|
/** Number of revision cycles */
|
||||||
|
iterationCount: number;
|
||||||
|
/** Maximum iterations before escalation */
|
||||||
|
maxIterations: number;
|
||||||
|
/** All feedback history */
|
||||||
|
feedbackHistory: ReviewFeedback[];
|
||||||
|
/** ISO timestamp of loop start */
|
||||||
|
startedAt: string;
|
||||||
|
/** ISO timestamp of last state change */
|
||||||
|
lastUpdatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// === Team Collaboration ===
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Possible collaboration patterns
|
||||||
|
*/
|
||||||
|
export type CollaborationPattern =
|
||||||
|
| 'sequential' // Tasks completed one after another
|
||||||
|
| 'parallel' // Tasks completed simultaneously
|
||||||
|
| 'pipeline' // Output of one feeds into next
|
||||||
|
| 'review_loop'; // Dev↔QA iteration pattern
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A team collaboration session
|
||||||
|
*/
|
||||||
|
export interface Team {
|
||||||
|
/** Unique team identifier */
|
||||||
|
id: string;
|
||||||
|
/** Team name */
|
||||||
|
name: string;
|
||||||
|
/** Team description */
|
||||||
|
description?: string;
|
||||||
|
/** Team members */
|
||||||
|
members: TeamMember[];
|
||||||
|
/** Active tasks */
|
||||||
|
tasks: TeamTask[];
|
||||||
|
/** Collaboration pattern */
|
||||||
|
pattern: CollaborationPattern;
|
||||||
|
/** Active Dev↔QA loops */
|
||||||
|
activeLoops: DevQALoop[];
|
||||||
|
/** Team status */
|
||||||
|
status: 'active' | 'paused' | 'completed' | 'error';
|
||||||
|
/** ISO timestamp of creation */
|
||||||
|
createdAt: string;
|
||||||
|
/** ISO timestamp of last activity */
|
||||||
|
updatedAt?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Real-time collaboration event
|
||||||
|
*/
|
||||||
|
export interface CollaborationEvent {
|
||||||
|
/** Event type */
|
||||||
|
type: 'task_assigned' | 'task_started' | 'task_completed' |
|
||||||
|
'review_requested' | 'review_submitted' |
|
||||||
|
'loop_state_change' | 'member_status_change';
|
||||||
|
/** ID of the team */
|
||||||
|
teamId: string;
|
||||||
|
/** ID of the source agent */
|
||||||
|
sourceAgentId: string;
|
||||||
|
/** Event payload */
|
||||||
|
payload: Record<string, unknown>;
|
||||||
|
/** ISO timestamp */
|
||||||
|
timestamp: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Team performance metrics
|
||||||
|
*/
|
||||||
|
export interface TeamMetrics {
|
||||||
|
/** Total tasks completed */
|
||||||
|
tasksCompleted: number;
|
||||||
|
/** Average task completion time (ms) */
|
||||||
|
avgCompletionTime: number;
|
||||||
|
/** Review pass rate (0-100) */
|
||||||
|
passRate: number;
|
||||||
|
/** Average iterations per task */
|
||||||
|
avgIterations: number;
|
||||||
|
/** Escalation count */
|
||||||
|
escalations: number;
|
||||||
|
/** Team efficiency score (0-100) */
|
||||||
|
efficiency: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// === API Types ===
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Request to create a new team
|
||||||
|
*/
|
||||||
|
export interface CreateTeamRequest {
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
memberAgents: Array<{
|
||||||
|
agentId: string;
|
||||||
|
role: TeamMemberRole;
|
||||||
|
}>;
|
||||||
|
pattern: CollaborationPattern;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Request to add a task to a team
|
||||||
|
*/
|
||||||
|
export interface AddTeamTaskRequest {
|
||||||
|
teamId: string;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
priority: TaskPriority;
|
||||||
|
type: TeamTask['type'];
|
||||||
|
assigneeId?: string;
|
||||||
|
dependencies?: string[];
|
||||||
|
estimate?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Response for team operations
|
||||||
|
*/
|
||||||
|
export interface TeamResponse {
|
||||||
|
team: Team;
|
||||||
|
success: boolean;
|
||||||
|
error?: string;
|
||||||
|
}
|
||||||
@@ -429,9 +429,20 @@ ZCLAW 是基于 **OpenFang** (Rust Agent OS) 的 AI Agent 桌面客户端，核
|
|||||||
*Phase 1-4 已完成 ✅*
|
*Phase 1-4 已完成 ✅*
|
||||||
*Phase 5 已完成 ✅*
|
*Phase 5 已完成 ✅*
|
||||||
* 基础 Skills: 9 个 ✅
|
* 基础 Skills: 9 个 ✅
|
||||||
* agency-agents 集成: 60+ Skills ✅
|
* agency-agents 集成: 68 Skills ✅
|
||||||
* 多 Agent 协作框架: 完整 ✅
|
* 多 Agent 协作框架: 完整 ✅
|
||||||
* 协作协议 (Handoff Templates)
|
* 协作协议 (Handoff Templates)
|
||||||
* Agent 激活提示
|
* Agent 激活提示
|
||||||
* 7 阶段 Playbooks (Discovery → Operate)
|
* 7 阶段 Playbooks (Discovery → Operate)
|
||||||
*下一步: 多 Agent Team 协作功能实现*
|
*Phase 6 进行中 🔄*
|
||||||
|
* 多 Agent Team 协作 UI 实现:
|
||||||
|
* ✅ 类型定义 (`types/team.ts`)
|
||||||
|
* ✅ Team Store (`store/teamStore.ts`)
|
||||||
|
* ✅ Agent 编排器 UI (`components/TeamOrchestrator.tsx`)
|
||||||
|
* ✅ Dev↔QA 循环界面 (`components/DevQALoop.tsx`)
|
||||||
|
* ✅ 实时协作状态 (`components/TeamCollaborationView.tsx`)
|
||||||
|
* 待完成:
|
||||||
|
* 组件集成到主应用
|
||||||
|
* WebSocket 实时事件同步
|
||||||
|
* 与 OpenFang API 对接
|
||||||
|
*下一步: 组件集成与 API 对接*
|
||||||
|
|||||||
Reference in New Issue
Block a user