feat(phase-12-13): complete performance optimization and test coverage
Phase 12 - Performance Optimization: - Add message-virtualization.ts with useVirtualizedMessages hook - Implement MessageCache<T> LRU cache for rendered content - Add createMessageBatcher for WebSocket message batching - Add calculateVisibleRange and debounced scroll handlers - Support for 10,000+ messages without performance degradation Phase 13 - Test Coverage: - Add workflowStore.test.ts (28 tests) - Add configStore.test.ts (40 tests) - Update general-settings.test.tsx to match current UI - Total tests: 148 passing Code Quality: - TypeScript compilation passes - All 148 tests pass Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
iven
@@ -6,9 +6,12 @@
|
||||
* @module components/TeamList
|
||||
*/
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTeamStore } from '../store/teamStore';
|
||||
import { Users, Plus, Activity, CheckCircle, AlertTriangle } from 'lucide-react';
|
||||
import { useGatewayStore } from '../store/gatewayStore';
|
||||
import { useChatStore } from '../store/chatStore';
|
||||
import { Users, Plus, Activity, CheckCircle, AlertTriangle, X, Bot } from 'lucide-react';
|
||||
import type { TeamMemberRole } from '../types/team';
|
||||
|
||||
interface TeamListProps {
|
||||
onSelectTeam?: (teamId: string) => void;
|
||||
@@ -16,7 +19,15 @@ interface TeamListProps {
|
||||
}
|
||||
|
||||
export function TeamList({ onSelectTeam, selectedTeamId }: TeamListProps) {
|
||||
const { teams, loadTeams, setActiveTeam, isLoading } = useTeamStore();
|
||||
const { teams, loadTeams, setActiveTeam, createTeam, isLoading } = useTeamStore();
|
||||
const { clones } = useGatewayStore();
|
||||
const { agents } = useChatStore();
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [teamName, setTeamName] = useState('');
|
||||
const [teamDescription, setTeamDescription] = useState('');
|
||||
const [teamPattern, setTeamPattern] = useState<'sequential' | 'parallel' | 'pipeline'>('sequential');
|
||||
const [selectedAgents, setSelectedAgents] = useState<string[]>([]);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadTeams();
|
||||
@@ -30,6 +41,45 @@ export function TeamList({ onSelectTeam, selectedTeamId }: TeamListProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateTeam = async () => {
|
||||
if (!teamName.trim() || selectedAgents.length === 0) return;
|
||||
|
||||
setIsCreating(true);
|
||||
try {
|
||||
const roleAssignments: { agentId: string; role: TeamMemberRole }[] = selectedAgents.map((agentId, index) => ({
|
||||
agentId,
|
||||
role: (index === 0 ? 'orchestrator' : index === 1 ? 'reviewer' : 'worker') as TeamMemberRole,
|
||||
}));
|
||||
|
||||
const team = await createTeam({
|
||||
name: teamName.trim(),
|
||||
description: teamDescription.trim() || undefined,
|
||||
pattern: teamPattern,
|
||||
memberAgents: roleAssignments,
|
||||
});
|
||||
|
||||
if (team) {
|
||||
setShowCreateModal(false);
|
||||
setTeamName('');
|
||||
setTeamDescription('');
|
||||
setSelectedAgents([]);
|
||||
setTeamPattern('sequential');
|
||||
setActiveTeam(team);
|
||||
onSelectTeam?.(team.id);
|
||||
}
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleAgentSelection = (agentId: string) => {
|
||||
setSelectedAgents(prev =>
|
||||
prev.includes(agentId)
|
||||
? prev.filter(id => id !== agentId)
|
||||
: [...prev, agentId]
|
||||
);
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
@@ -43,6 +93,13 @@ export function TeamList({ onSelectTeam, selectedTeamId }: TeamListProps) {
|
||||
}
|
||||
};
|
||||
|
||||
// Merge clones and agents for display
|
||||
const availableAgents = clones.length > 0 ? clones : agents.map(a => ({
|
||||
id: a.id,
|
||||
name: a.name,
|
||||
role: '默认助手',
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
{/* Header */}
|
||||
@@ -52,14 +109,130 @@ export function TeamList({ onSelectTeam, selectedTeamId }: TeamListProps) {
|
||||
Teams
|
||||
</h3>
|
||||
<button
|
||||
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
|
||||
title="Create Team"
|
||||
>
|
||||
<Plus className="w-4 h-4 text-gray-400" />
|
||||
<Plus className="w-4 h-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create Team Modal */}
|
||||
{showCreateModal && (
|
||||
<div className="absolute inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-80 max-h-[90vh] overflow-y-auto">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white">Create Team</h3>
|
||||
<button
|
||||
onClick={() => setShowCreateModal(false)}
|
||||
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
|
||||
>
|
||||
<X className="w-4 h-4 text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Team Name */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Team Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={teamName}
|
||||
onChange={(e) => setTeamName(e.target.value)}
|
||||
placeholder="e.g., Dev Team Alpha"
|
||||
className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Team Description */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={teamDescription}
|
||||
onChange={(e) => setTeamDescription(e.target.value)}
|
||||
placeholder="What will this team work on?"
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Collaboration Pattern */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Collaboration Pattern
|
||||
</label>
|
||||
<select
|
||||
value={teamPattern}
|
||||
onChange={(e) => setTeamPattern(e.target.value as typeof teamPattern)}
|
||||
className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="sequential">Sequential (Task by task)</option>
|
||||
<option value="parallel">Parallel (Concurrent work)</option>
|
||||
<option value="pipeline">Pipeline (Output feeds next)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Agent Selection */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Select Agents ({selectedAgents.length} selected) *
|
||||
</label>
|
||||
<div className="space-y-2 max-h-40 overflow-y-auto">
|
||||
{availableAgents.map((agent) => (
|
||||
<button
|
||||
key={agent.id}
|
||||
onClick={() => toggleAgentSelection(agent.id)}
|
||||
className={`w-full p-2 rounded-lg text-left text-sm transition-colors flex items-center gap-2 ${
|
||||
selectedAgents.includes(agent.id)
|
||||
? 'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800'
|
||||
: 'bg-gray-50 dark:bg-gray-700 border border-transparent hover:bg-gray-100 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-orange-400 to-red-500 flex items-center justify-center text-white text-xs">
|
||||
<Bot className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-gray-900 dark:text-white truncate">{agent.name}</span>
|
||||
{selectedAgents.includes(agent.id) && (
|
||||
<CheckCircle className="w-4 h-4 text-blue-500 ml-auto" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
{availableAgents.length === 0 && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 text-center py-2">
|
||||
No agents available. Create an agent first.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-gray-200 dark:border-gray-700 flex gap-2">
|
||||
<button
|
||||
onClick={() => setShowCreateModal(false)}
|
||||
className="flex-1 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreateTeam}
|
||||
disabled={!teamName.trim() || selectedAgents.length === 0 || isCreating}
|
||||
className="flex-1 px-4 py-2 text-sm text-white bg-blue-500 rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{isCreating ? 'Creating...' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Team List */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{isLoading ? (
|
||||
|
||||
Reference in New Issue
Block a user