feat(l4): add Phase 1 UI components for self-evolution capability
SwarmDashboard (多 Agent 协作面板): - Task list with real-time status updates - Subtask visualization with results - Communication style indicators (Sequential/Parallel/Debate) - Task creation form with manual triggers SkillMarket (技能市场): - Browse 12 built-in skills by category - Keyword/capability search - Skill details with triggers and capabilities - Install/uninstall with L4 autonomy hooks HeartbeatConfig (心跳配置): - Enable/disable periodic proactive checks - Interval slider (5-120 minutes) - Proactivity level selector (Silent/Light/Standard/Autonomous) - Quiet hours configuration - Built-in check item toggles ReflectionLog (反思日志): - Reflection history with pattern analysis - Improvement suggestions by priority - Identity change proposal approval workflow - Manual reflection trigger - Config panel for trigger settings Part of ZCLAW L4 Self-Evolution capability. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
527
desktop/src/components/HeartbeatConfig.tsx
Normal file
527
desktop/src/components/HeartbeatConfig.tsx
Normal file
@@ -0,0 +1,527 @@
|
||||
/**
|
||||
* HeartbeatConfig - Configuration UI for periodic proactive checks
|
||||
*
|
||||
* Allows users to configure:
|
||||
* - Heartbeat interval (default 30 minutes)
|
||||
* - Enable/disable built-in check items
|
||||
* - Quiet hours (no notifications during sleep time)
|
||||
* - Proactivity level (silent/light/standard/autonomous)
|
||||
*
|
||||
* Part of ZCLAW L4 Self-Evolution capability.
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Heart,
|
||||
Settings,
|
||||
Clock,
|
||||
Moon,
|
||||
Sun,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
Info,
|
||||
RefreshCw,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
HeartbeatEngine,
|
||||
DEFAULT_HEARTBEAT_CONFIG,
|
||||
type HeartbeatConfig as HeartbeatConfigType,
|
||||
type HeartbeatResult,
|
||||
} from '../lib/heartbeat-engine';
|
||||
|
||||
// === Types ===
|
||||
|
||||
interface HeartbeatConfigProps {
|
||||
className?: string;
|
||||
onConfigChange?: (config: HeartbeatConfigType) => void;
|
||||
}
|
||||
|
||||
type ProactivityLevel = 'silent' | 'light' | 'standard' | 'autonomous';
|
||||
|
||||
// === Proactivity Level Config ===
|
||||
|
||||
const PROACTIVITY_CONFIG: Record<ProactivityLevel, { label: string; description: string; icon: typeof Moon }> = {
|
||||
silent: {
|
||||
label: '静默',
|
||||
description: '从不主动推送，仅被动响应',
|
||||
icon: VolumeX,
|
||||
},
|
||||
light: {
|
||||
label: '轻度',
|
||||
description: '仅紧急事项推送（如定时任务完成）',
|
||||
icon: Volume2,
|
||||
},
|
||||
standard: {
|
||||
label: '标准',
|
||||
description: '定期巡检 + 任务通知 + 建议推送',
|
||||
icon: AlertTriangle,
|
||||
},
|
||||
autonomous: {
|
||||
label: '自主',
|
||||
description: 'Agent 自行判断何时推送',
|
||||
icon: Heart,
|
||||
},
|
||||
};
|
||||
|
||||
// === Check Item Config ===
|
||||
|
||||
interface CheckItemConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
const BUILT_IN_CHECKS: CheckItemConfig[] = [
|
||||
{
|
||||
id: 'pending-tasks',
|
||||
name: '待办任务检查',
|
||||
description: '检查是否有未完成的任务需要跟进',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'memory-health',
|
||||
name: '记忆健康检查',
|
||||
description: '检查记忆存储是否过大需要清理',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'idle-greeting',
|
||||
name: '空闲问候',
|
||||
description: '长时间未使用时发送简短问候',
|
||||
enabled: false,
|
||||
},
|
||||
];
|
||||
|
||||
// === Components ===
|
||||
|
||||
function ProactivityLevelSelector({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: ProactivityLevel;
|
||||
onChange: (level: ProactivityLevel) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{(Object.keys(PROACTIVITY_CONFIG) as ProactivityLevel[]).map((level) => {
|
||||
const config = PROACTIVITY_CONFIG[level];
|
||||
const Icon = config.icon;
|
||||
const isSelected = value === level;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={level}
|
||||
onClick={() => onChange(level)}
|
||||
className={`flex items-start gap-2 p-3 rounded-lg border transition-all text-left ${
|
||||
isSelected
|
||||
? 'border-purple-500 bg-purple-50 dark:bg-purple-900/30'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
className={`w-4 h-4 mt-0.5 flex-shrink-0 ${
|
||||
isSelected ? 'text-purple-500' : 'text-gray-400'
|
||||
}`}
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
className={`text-sm font-medium ${
|
||||
isSelected ? 'text-purple-700 dark:text-purple-400' : 'text-gray-700 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{config.label}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{config.description}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function QuietHoursConfig({
|
||||
start,
|
||||
end,
|
||||
onStartChange,
|
||||
onEndChange,
|
||||
enabled,
|
||||
onToggle,
|
||||
}: {
|
||||
start?: string;
|
||||
end?: string;
|
||||
onStartChange: (time: string) => void;
|
||||
onEndChange: (time: string) => void;
|
||||
enabled: boolean;
|
||||
onToggle: (enabled: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Moon className="w-4 h-4 text-indigo-500" />
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">免打扰时段</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onToggle(!enabled)}
|
||||
className={`relative w-10 h-5 rounded-full transition-colors ${
|
||||
enabled ? 'bg-purple-500' : 'bg-gray-300 dark:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<motion.div
|
||||
animate={{ x: enabled ? 20 : 0 }}
|
||||
className="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{enabled && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="flex items-center gap-3 pl-6"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Sun className="w-3 h-3 text-gray-400" />
|
||||
<input
|
||||
type="time"
|
||||
value={end || '08:00'}
|
||||
onChange={(e) => onEndChange(e.target.value)}
|
||||
className="px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-gray-400">至</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Moon className="w-3 h-3 text-gray-400" />
|
||||
<input
|
||||
type="time"
|
||||
value={start || '22:00'}
|
||||
onChange={(e) => onStartChange(e.target.value)}
|
||||
className="px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CheckItemToggle({
|
||||
item,
|
||||
onToggle,
|
||||
}: {
|
||||
item: CheckItemConfig;
|
||||
onToggle: (enabled: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{item.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
|
||||
{item.description}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onToggle(!item.enabled)}
|
||||
className={`relative w-9 h-5 rounded-full transition-colors ${
|
||||
item.enabled ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<motion.div
|
||||
animate={{ x: item.enabled ? 18 : 0 }}
|
||||
className="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// === Main Component ===
|
||||
|
||||
export function HeartbeatConfig({ className = '', onConfigChange }: HeartbeatConfigProps) {
|
||||
const [config, setConfig] = useState<HeartbeatConfigType>(DEFAULT_HEARTBEAT_CONFIG);
|
||||
const [checkItems, setCheckItems] = useState<CheckItemConfig[]>(BUILT_IN_CHECKS);
|
||||
const [lastResult, setLastResult] = useState<HeartbeatResult | null>(null);
|
||||
const [isTesting, setIsTesting] = useState(false);
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
|
||||
// Load saved config
|
||||
useEffect(() => {
|
||||
const saved = localStorage.getItem('zclaw-heartbeat-config');
|
||||
if (saved) {
|
||||
try {
|
||||
const parsed = JSON.parse(saved);
|
||||
setConfig({ ...DEFAULT_HEARTBEAT_CONFIG, ...parsed });
|
||||
} catch {
|
||||
// Use defaults
|
||||
}
|
||||
}
|
||||
|
||||
const savedChecks = localStorage.getItem('zclaw-heartbeat-checks');
|
||||
if (savedChecks) {
|
||||
try {
|
||||
setCheckItems(JSON.parse(savedChecks));
|
||||
} catch {
|
||||
// Use defaults
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const updateConfig = useCallback(
|
||||
(updates: Partial<HeartbeatConfigType>) => {
|
||||
setConfig((prev) => {
|
||||
const next = { ...prev, ...updates };
|
||||
setHasChanges(true);
|
||||
onConfigChange?.(next);
|
||||
return next;
|
||||
});
|
||||
},
|
||||
[onConfigChange]
|
||||
);
|
||||
|
||||
const toggleCheckItem = useCallback((id: string, enabled: boolean) => {
|
||||
setCheckItems((prev) => {
|
||||
const next = prev.map((item) =>
|
||||
item.id === id ? { ...item, enabled } : item
|
||||
);
|
||||
setHasChanges(true);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleSave = useCallback(() => {
|
||||
localStorage.setItem('zclaw-heartbeat-config', JSON.stringify(config));
|
||||
localStorage.setItem('zclaw-heartbeat-checks', JSON.stringify(checkItems));
|
||||
setHasChanges(false);
|
||||
}, [config, checkItems]);
|
||||
|
||||
const handleTestHeartbeat = useCallback(async () => {
|
||||
setIsTesting(true);
|
||||
try {
|
||||
const engine = new HeartbeatEngine('zclaw-main', config);
|
||||
const result = await engine.tick();
|
||||
setLastResult(result);
|
||||
} catch (error) {
|
||||
console.error('[HeartbeatConfig] Test failed:', error);
|
||||
} finally {
|
||||
setIsTesting(false);
|
||||
}
|
||||
}, [config]);
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col h-full ${className}`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<Heart className="w-5 h-5 text-pink-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">心跳配置</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleTestHeartbeat}
|
||||
disabled={isTesting || !config.enabled}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${isTesting ? 'animate-spin' : ''}`} />
|
||||
测试
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!hasChanges}
|
||||
className="px-3 py-1.5 text-sm bg-pink-500 hover:bg-pink-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-lg transition-colors"
|
||||
>
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-6">
|
||||
{/* Enable Toggle */}
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||
config.enabled
|
||||
? 'bg-pink-100 dark:bg-pink-900/30'
|
||||
: 'bg-gray-200 dark:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`w-5 h-5 ${
|
||||
config.enabled ? 'text-pink-500' : 'text-gray-400'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
启用主动巡检
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Agent 将定期检查并主动推送通知
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => updateConfig({ enabled: !config.enabled })}
|
||||
className={`relative w-12 h-6 rounded-full transition-colors ${
|
||||
config.enabled ? 'bg-pink-500' : 'bg-gray-300 dark:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<motion.div
|
||||
animate={{ x: config.enabled ? 26 : 0 }}
|
||||
className="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{config.enabled && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
{/* Interval */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
巡检间隔
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 pl-6">
|
||||
<input
|
||||
type="range"
|
||||
min="5"
|
||||
max="120"
|
||||
step="5"
|
||||
value={config.intervalMinutes}
|
||||
onChange={(e) => updateConfig({ intervalMinutes: parseInt(e.target.value) })}
|
||||
className="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100 w-16 text-right">
|
||||
{config.intervalMinutes} 分钟
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Proactivity Level */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
主动性级别
|
||||
</span>
|
||||
</div>
|
||||
<div className="pl-6">
|
||||
<ProactivityLevelSelector
|
||||
value={config.proactivityLevel}
|
||||
onChange={(level) => updateConfig({ proactivityLevel: level })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quiet Hours */}
|
||||
<div className="space-y-2">
|
||||
<QuietHoursConfig
|
||||
start={config.quietHoursStart}
|
||||
end={config.quietHoursEnd}
|
||||
enabled={!!config.quietHoursStart}
|
||||
onStartChange={(time) => updateConfig({ quietHoursStart: time })}
|
||||
onEndChange={(time) => updateConfig({ quietHoursEnd: time })}
|
||||
onToggle={(enabled) =>
|
||||
updateConfig({
|
||||
quietHoursStart: enabled ? '22:00' : undefined,
|
||||
quietHoursEnd: enabled ? '08:00' : undefined,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Check Items */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Settings className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
检查项目
|
||||
</span>
|
||||
</div>
|
||||
<div className="pl-6 space-y-1 border-l-2 border-gray-200 dark:border-gray-700">
|
||||
{checkItems.map((item) => (
|
||||
<CheckItemToggle
|
||||
key={item.id}
|
||||
item={item}
|
||||
onToggle={(enabled) => toggleCheckItem(item.id, enabled)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Last Result */}
|
||||
{lastResult && (
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
{lastResult.status === 'ok' ? (
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
) : (
|
||||
<AlertTriangle className="w-4 h-4 text-yellow-500" />
|
||||
)}
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
上次测试结果
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
检查了 {lastResult.checkedItems} 项
|
||||
{lastResult.alerts.length > 0 && ` · ${lastResult.alerts.length} 个提醒`}
|
||||
</div>
|
||||
{lastResult.alerts.length > 0 && (
|
||||
<div className="mt-2 space-y-1">
|
||||
{lastResult.alerts.map((alert, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`text-xs p-2 rounded ${
|
||||
alert.urgency === 'high'
|
||||
? 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400'
|
||||
: alert.urgency === 'medium'
|
||||
? 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400'
|
||||
: 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
|
||||
}`}
|
||||
>
|
||||
<span className="font-medium">{alert.title}:</span> {alert.content}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex items-start gap-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-xs text-blue-600 dark:text-blue-400">
|
||||
<Info className="w-4 h-4 flex-shrink-0 mt-0.5" />
|
||||
<p>
|
||||
心跳机制让 Agent 具备主动意识，能够定期检查任务状态、记忆健康度等，并根据主动性级别推送通知。
|
||||
在"自主"模式下，Agent 将自行判断是否需要通知你。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeartbeatConfig;
|
||||
608
desktop/src/components/ReflectionLog.tsx
Normal file
608
desktop/src/components/ReflectionLog.tsx
Normal file
@@ -0,0 +1,608 @@
|
||||
/**
|
||||
* ReflectionLog - Self-reflection history and identity change approval UI
|
||||
*
|
||||
* Displays:
|
||||
* - Reflection history (patterns, improvements)
|
||||
* - Pending identity change proposals
|
||||
* - Approve/reject identity modifications
|
||||
* - Manual reflection trigger
|
||||
*
|
||||
* Part of ZCLAW L4 Self-Evolution capability.
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Brain,
|
||||
Sparkles,
|
||||
Check,
|
||||
X,
|
||||
Clock,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
RefreshCw,
|
||||
AlertTriangle,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
Minus,
|
||||
FileText,
|
||||
History,
|
||||
Play,
|
||||
Settings,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
ReflectionEngine,
|
||||
type ReflectionResult,
|
||||
type PatternObservation,
|
||||
type ImprovementSuggestion,
|
||||
type ReflectionConfig,
|
||||
DEFAULT_REFLECTION_CONFIG,
|
||||
} from '../lib/reflection-engine';
|
||||
import { getAgentIdentityManager, type IdentityChangeProposal } from '../lib/agent-identity';
|
||||
|
||||
// === Types ===
|
||||
|
||||
interface ReflectionLogProps {
|
||||
className?: string;
|
||||
agentId?: string;
|
||||
onProposalApprove?: (proposal: IdentityChangeProposal) => void;
|
||||
onProposalReject?: (proposal: IdentityChangeProposal) => void;
|
||||
}
|
||||
|
||||
// === Sentiment Config ===
|
||||
|
||||
const SENTIMENT_CONFIG: Record<string, { icon: typeof TrendingUp; color: string; bgColor: string }> = {
|
||||
positive: {
|
||||
icon: TrendingUp,
|
||||
color: 'text-green-600 dark:text-green-400',
|
||||
bgColor: 'bg-green-100 dark:bg-green-900/30',
|
||||
},
|
||||
negative: {
|
||||
icon: TrendingDown,
|
||||
color: 'text-red-600 dark:text-red-400',
|
||||
bgColor: 'bg-red-100 dark:bg-red-900/30',
|
||||
},
|
||||
neutral: {
|
||||
icon: Minus,
|
||||
color: 'text-gray-600 dark:text-gray-400',
|
||||
bgColor: 'bg-gray-100 dark:bg-gray-800',
|
||||
},
|
||||
};
|
||||
|
||||
// === Priority Config ===
|
||||
|
||||
const PRIORITY_CONFIG: Record<string, { color: string; bgColor: string }> = {
|
||||
high: {
|
||||
color: 'text-red-600 dark:text-red-400',
|
||||
bgColor: 'bg-red-100 dark:bg-red-900/30',
|
||||
},
|
||||
medium: {
|
||||
color: 'text-yellow-600 dark:text-yellow-400',
|
||||
bgColor: 'bg-yellow-100 dark:bg-yellow-900/30',
|
||||
},
|
||||
low: {
|
||||
color: 'text-blue-600 dark:text-blue-400',
|
||||
bgColor: 'bg-blue-100 dark:bg-blue-900/30',
|
||||
},
|
||||
};
|
||||
|
||||
// === Components ===
|
||||
|
||||
function SentimentBadge({ sentiment }: { sentiment: string }) {
|
||||
const config = SENTIMENT_CONFIG[sentiment] || SENTIMENT_CONFIG.neutral;
|
||||
const Icon = config.icon;
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${config.bgColor} ${config.color}`}
|
||||
>
|
||||
<Icon className="w-3 h-3" />
|
||||
{sentiment === 'positive' ? '积极' : sentiment === 'negative' ? '消极' : '中性'}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function PriorityBadge({ priority }: { priority: string }) {
|
||||
const config = PRIORITY_CONFIG[priority] || PRIORITY_CONFIG.medium;
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${config.bgColor} ${config.color}`}
|
||||
>
|
||||
{priority === 'high' ? '高' : priority === 'medium' ? '中' : '低'}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function PatternCard({ pattern }: { pattern: PatternObservation }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="w-full flex items-start gap-3 p-3 hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors text-left"
|
||||
>
|
||||
<SentimentBadge sentiment={pattern.sentiment} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-gray-900 dark:text-gray-100">{pattern.observation}</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
出现频率: {pattern.frequency} 次
|
||||
</p>
|
||||
</div>
|
||||
{expanded ? (
|
||||
<ChevronDown className="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{expanded && pattern.evidence.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="border-t border-gray-200 dark:border-gray-700 p-3 bg-gray-50 dark:bg-gray-800/30"
|
||||
>
|
||||
<h5 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">证据</h5>
|
||||
<ul className="space-y-1">
|
||||
{pattern.evidence.map((ev, i) => (
|
||||
<li key={i} className="text-xs text-gray-600 dark:text-gray-300 pl-2 border-l-2 border-gray-300 dark:border-gray-600">
|
||||
{ev}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ImprovementCard({ improvement }: { improvement: ImprovementSuggestion }) {
|
||||
return (
|
||||
<div className="flex items-start gap-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{improvement.area}
|
||||
</span>
|
||||
<PriorityBadge priority={improvement.priority} />
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">{improvement.suggestion}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProposalCard({
|
||||
proposal,
|
||||
onApprove,
|
||||
onReject,
|
||||
}: {
|
||||
proposal: IdentityChangeProposal;
|
||||
onApprove: () => void;
|
||||
onReject: () => void;
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const identityManager = getAgentIdentityManager();
|
||||
|
||||
const fileName = proposal.filePath.split('/').pop() || proposal.filePath;
|
||||
const fileType = fileName.toLowerCase().replace('.md', '').toUpperCase();
|
||||
|
||||
return (
|
||||
<div className="border border-yellow-300 dark:border-yellow-700 rounded-lg overflow-hidden bg-yellow-50 dark:bg-yellow-900/20">
|
||||
<div className="flex items-center gap-3 p-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-yellow-100 dark:bg-yellow-800 flex items-center justify-center">
|
||||
<FileText className="w-4 h-4 text-yellow-600 dark:text-yellow-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
|
||||
{fileType} 变更提议
|
||||
</span>
|
||||
<span className="px-1.5 py-0.5 text-xs bg-yellow-200 dark:bg-yellow-800 text-yellow-700 dark:text-yellow-300 rounded">
|
||||
待审批
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-yellow-600 dark:text-yellow-400 truncate">
|
||||
{proposal.reason}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="p-1 text-yellow-600 dark:text-yellow-400 hover:bg-yellow-100 dark:hover:bg-yellow-800 rounded"
|
||||
>
|
||||
{expanded ? (
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{expanded && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="border-t border-yellow-200 dark:border-yellow-700"
|
||||
>
|
||||
<div className="p-3 space-y-3">
|
||||
<div>
|
||||
<h5 className="text-xs font-medium text-yellow-700 dark:text-yellow-300 mb-1">
|
||||
当前内容
|
||||
</h5>
|
||||
<pre className="text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 p-2 rounded overflow-x-auto whitespace-pre-wrap">
|
||||
{proposal.currentContent.slice(0, 500)}
|
||||
{proposal.currentContent.length > 500 && '...'}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-xs font-medium text-yellow-700 dark:text-yellow-300 mb-1">
|
||||
建议内容
|
||||
</h5>
|
||||
<pre className="text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 p-2 rounded overflow-x-auto whitespace-pre-wrap">
|
||||
{proposal.proposedContent.slice(0, 500)}
|
||||
{proposal.proposedContent.length > 500 && '...'}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<div className="flex justify-end gap-2 p-3 border-t border-yellow-200 dark:border-yellow-700">
|
||||
<button
|
||||
onClick={onReject}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
拒绝
|
||||
</button>
|
||||
<button
|
||||
onClick={onApprove}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm bg-green-500 hover:bg-green-600 text-white rounded-lg transition-colors"
|
||||
>
|
||||
<Check className="w-4 h-4" />
|
||||
批准
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ReflectionEntry({
|
||||
result,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
}: {
|
||||
result: ReflectionResult;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
const positivePatterns = result.patterns.filter((p) => p.sentiment === 'positive').length;
|
||||
const negativePatterns = result.patterns.filter((p) => p.sentiment === 'negative').length;
|
||||
const highPriorityImprovements = result.improvements.filter((i) => i.priority === 'high').length;
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="w-full flex items-center gap-3 p-4 hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors text-left"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
|
||||
<Brain className="w-5 h-5 text-purple-500" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
自我反思
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{new Date(result.timestamp).toLocaleString('zh-CN')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-xs">
|
||||
<span className="text-green-600 dark:text-green-400">
|
||||
{positivePatterns} 积极
|
||||
</span>
|
||||
<span className="text-red-600 dark:text-red-400">
|
||||
{negativePatterns} 消极
|
||||
</span>
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
{result.improvements.length} 建议
|
||||
</span>
|
||||
{result.identityProposals.length > 0 && (
|
||||
<span className="text-yellow-600 dark:text-yellow-400">
|
||||
{result.identityProposals.length} 变更
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="w-4 h-4 text-gray-400" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="border-t border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Patterns */}
|
||||
{result.patterns.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
|
||||
行为模式
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{result.patterns.map((pattern, i) => (
|
||||
<PatternCard key={i} pattern={pattern} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Improvements */}
|
||||
{result.improvements.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
|
||||
改进建议
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{result.improvements.map((improvement, i) => (
|
||||
<ImprovementCard key={i} improvement={improvement} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Meta */}
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400 pt-2 border-t border-gray-200 dark:border-gray-700">
|
||||
<span>新增记忆: {result.newMemories}</span>
|
||||
<span>身份变更提议: {result.identityProposals.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// === Main Component ===
|
||||
|
||||
export function ReflectionLog({
|
||||
className = '',
|
||||
agentId = 'zclaw-main',
|
||||
onProposalApprove,
|
||||
onProposalReject,
|
||||
}: ReflectionLogProps) {
|
||||
const [engine] = useState(() => new ReflectionEngine());
|
||||
const [history, setHistory] = useState<ReflectionResult[]>([]);
|
||||
const [pendingProposals, setPendingProposals] = useState<IdentityChangeProposal[]>([]);
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
const [isReflecting, setIsReflecting] = useState(false);
|
||||
const [config, setConfig] = useState<ReflectionConfig>(DEFAULT_REFLECTION_CONFIG);
|
||||
const [showConfig, setShowConfig] = useState(false);
|
||||
|
||||
// Load history and pending proposals
|
||||
useEffect(() => {
|
||||
const loadedHistory = engine.getHistory();
|
||||
setHistory([...loadedHistory].reverse()); // Most recent first
|
||||
|
||||
const identityManager = getAgentIdentityManager();
|
||||
const proposals = identityManager.getPendingProposals(agentId);
|
||||
setPendingProposals(proposals);
|
||||
}, [engine, agentId]);
|
||||
|
||||
const handleReflect = useCallback(async () => {
|
||||
setIsReflecting(true);
|
||||
try {
|
||||
const result = await engine.reflect(agentId);
|
||||
setHistory((prev) => [result, ...prev]);
|
||||
|
||||
// Update pending proposals
|
||||
if (result.identityProposals.length > 0) {
|
||||
setPendingProposals((prev) => [...prev, ...result.identityProposals]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[ReflectionLog] Reflection failed:', error);
|
||||
} finally {
|
||||
setIsReflecting(false);
|
||||
}
|
||||
}, [engine, agentId]);
|
||||
|
||||
const handleApproveProposal = useCallback(
|
||||
(proposal: IdentityChangeProposal) => {
|
||||
const identityManager = getAgentIdentityManager();
|
||||
identityManager.approveChange(proposal.id);
|
||||
setPendingProposals((prev) => prev.filter((p) => p.id !== proposal.id));
|
||||
onProposalApprove?.(proposal);
|
||||
},
|
||||
[onProposalApprove]
|
||||
);
|
||||
|
||||
const handleRejectProposal = useCallback(
|
||||
(proposal: IdentityChangeProposal) => {
|
||||
const identityManager = getAgentIdentityManager();
|
||||
identityManager.rejectChange(proposal.id);
|
||||
setPendingProposals((prev) => prev.filter((p) => p.id !== proposal.id));
|
||||
onProposalReject?.(proposal);
|
||||
},
|
||||
[onProposalReject]
|
||||
);
|
||||
|
||||
const stats = useMemo(() => {
|
||||
const totalReflections = history.length;
|
||||
const totalPatterns = history.reduce((sum, r) => sum + r.patterns.length, 0);
|
||||
const totalImprovements = history.reduce((sum, r) => sum + r.improvements.length, 0);
|
||||
const totalIdentityChanges = history.reduce((sum, r) => sum + r.identityProposals.length, 0);
|
||||
return { totalReflections, totalPatterns, totalImprovements, totalIdentityChanges };
|
||||
}, [history]);
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col h-full ${className}`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<Brain className="w-5 h-5 text-purple-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">反思日志</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowConfig(!showConfig)}
|
||||
className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
title="配置"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleReflect}
|
||||
disabled={isReflecting}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm bg-purple-500 hover:bg-purple-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-lg transition-colors"
|
||||
>
|
||||
{isReflecting ? (
|
||||
<RefreshCw className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<Play className="w-4 h-4" />
|
||||
)}
|
||||
反思
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Bar */}
|
||||
<div className="flex items-center gap-4 px-4 py-2 bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700 text-xs">
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
反思: <span className="font-medium text-gray-900 dark:text-gray-100">{stats.totalReflections}</span>
|
||||
</span>
|
||||
<span className="text-purple-600 dark:text-purple-400">
|
||||
模式: <span className="font-medium">{stats.totalPatterns}</span>
|
||||
</span>
|
||||
<span className="text-blue-600 dark:text-blue-400">
|
||||
建议: <span className="font-medium">{stats.totalImprovements}</span>
|
||||
</span>
|
||||
<span className="text-yellow-600 dark:text-yellow-400">
|
||||
变更: <span className="font-medium">{stats.totalIdentityChanges}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Config Panel */}
|
||||
<AnimatePresence>
|
||||
{showConfig && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="border-b border-gray-200 dark:border-gray-700 overflow-hidden"
|
||||
>
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800/50 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">对话后触发反思</span>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="20"
|
||||
value={config.triggerAfterConversations}
|
||||
onChange={(e) =>
|
||||
setConfig((prev) => ({ ...prev, triggerAfterConversations: parseInt(e.target.value) || 5 }))
|
||||
}
|
||||
className="w-16 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">允许修改 SOUL.md</span>
|
||||
<button
|
||||
onClick={() => setConfig((prev) => ({ ...prev, allowSoulModification: !prev.allowSoulModification }))}
|
||||
className={`relative w-9 h-5 rounded-full transition-colors ${
|
||||
config.allowSoulModification ? 'bg-purple-500' : 'bg-gray-300 dark:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<motion.div
|
||||
animate={{ x: config.allowSoulModification ? 18 : 0 }}
|
||||
className="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">变更需审批</span>
|
||||
<button
|
||||
onClick={() => setConfig((prev) => ({ ...prev, requireApproval: !prev.requireApproval }))}
|
||||
className={`relative w-9 h-5 rounded-full transition-colors ${
|
||||
config.requireApproval ? 'bg-purple-500' : 'bg-gray-300 dark:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<motion.div
|
||||
animate={{ x: config.requireApproval ? 18 : 0 }}
|
||||
className="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{/* Pending Proposals */}
|
||||
{pendingProposals.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<h3 className="flex items-center gap-2 text-sm font-medium text-yellow-700 dark:text-yellow-300">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
待审批变更 ({pendingProposals.length})
|
||||
</h3>
|
||||
{pendingProposals.map((proposal) => (
|
||||
<ProposalCard
|
||||
key={proposal.id}
|
||||
proposal={proposal}
|
||||
onApprove={() => handleApproveProposal(proposal)}
|
||||
onReject={() => handleRejectProposal(proposal)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* History */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||
<History className="w-4 h-4" />
|
||||
反思历史
|
||||
</h3>
|
||||
|
||||
{history.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-gray-500 dark:text-gray-400">
|
||||
<Brain className="w-8 h-8 mb-2 opacity-50" />
|
||||
<p className="text-sm">暂无反思记录</p>
|
||||
<button
|
||||
onClick={handleReflect}
|
||||
className="mt-2 text-purple-500 hover:text-purple-600 text-sm"
|
||||
>
|
||||
触发第一次反思
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
history.map((result, i) => (
|
||||
<ReflectionEntry
|
||||
key={result.timestamp}
|
||||
result={result}
|
||||
isExpanded={expandedId === result.timestamp}
|
||||
onToggle={() => setExpandedId((prev) => (prev === result.timestamp ? null : result.timestamp))}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReflectionLog;
|
||||
473
desktop/src/components/SkillMarket.tsx
Normal file
473
desktop/src/components/SkillMarket.tsx
Normal file
@@ -0,0 +1,473 @@
|
||||
/**
|
||||
* SkillMarket - Skill browsing, search, and management UI
|
||||
*
|
||||
* Displays available skills (12 built-in + custom), allows users to:
|
||||
* - Browse skills by category
|
||||
* - Search skills by keyword/capability
|
||||
* - View skill details and capabilities
|
||||
* - Install/uninstall skills (with L4 autonomy integration)
|
||||
*
|
||||
* Part of ZCLAW L4 Self-Evolution capability.
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Search,
|
||||
Package,
|
||||
Check,
|
||||
X,
|
||||
Plus,
|
||||
Minus,
|
||||
Sparkles,
|
||||
Tag,
|
||||
Layers,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
RefreshCw,
|
||||
Info,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
SkillDiscoveryEngine,
|
||||
type SkillInfo,
|
||||
type SkillSuggestion,
|
||||
} from '../lib/skill-discovery';
|
||||
|
||||
// === Types ===
|
||||
|
||||
interface SkillMarketProps {
|
||||
className?: string;
|
||||
onSkillInstall?: (skill: SkillInfo) => void;
|
||||
onSkillUninstall?: (skill: SkillInfo) => void;
|
||||
}
|
||||
|
||||
type CategoryFilter = 'all' | 'development' | 'security' | 'analytics' | 'content' | 'ops' | 'management' | 'testing' | 'business' | 'marketing';
|
||||
|
||||
// === Category Config ===
|
||||
|
||||
const CATEGORY_CONFIG: Record<string, { label: string; color: string; bgColor: string }> = {
|
||||
development: { label: '开发', color: 'text-blue-600 dark:text-blue-400', bgColor: 'bg-blue-100 dark:bg-blue-900/30' },
|
||||
security: { label: '安全', color: 'text-red-600 dark:text-red-400', bgColor: 'bg-red-100 dark:bg-red-900/30' },
|
||||
analytics: { label: '分析', color: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30' },
|
||||
content: { label: '内容', color: 'text-pink-600 dark:text-pink-400', bgColor: 'bg-pink-100 dark:bg-pink-900/30' },
|
||||
ops: { label: '运维', color: 'text-orange-600 dark:text-orange-400', bgColor: 'bg-orange-100 dark:bg-orange-900/30' },
|
||||
management: { label: '管理', color: 'text-cyan-600 dark:text-cyan-400', bgColor: 'bg-cyan-100 dark:bg-cyan-900/30' },
|
||||
testing: { label: '测试', color: 'text-green-600 dark:text-green-400', bgColor: 'bg-green-100 dark:bg-green-900/30' },
|
||||
business: { label: '商业', color: 'text-yellow-600 dark:text-yellow-400', bgColor: 'bg-yellow-100 dark:bg-yellow-900/30' },
|
||||
marketing: { label: '营销', color: 'text-indigo-600 dark:text-indigo-400', bgColor: 'bg-indigo-100 dark:bg-indigo-900/30' },
|
||||
};
|
||||
|
||||
// === Components ===
|
||||
|
||||
function CategoryBadge({ category }: { category?: string }) {
|
||||
if (!category) return null;
|
||||
const config = CATEGORY_CONFIG[category] || {
|
||||
label: category,
|
||||
color: 'text-gray-600 dark:text-gray-400',
|
||||
bgColor: 'bg-gray-100 dark:bg-gray-800',
|
||||
};
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${config.bgColor} ${config.color}`}>
|
||||
<Tag className="w-3 h-3" />
|
||||
{config.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function SkillCard({
|
||||
skill,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
onInstall,
|
||||
onUninstall,
|
||||
}: {
|
||||
skill: SkillInfo;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
onInstall: () => void;
|
||||
onUninstall: () => void;
|
||||
}) {
|
||||
const config = CATEGORY_CONFIG[skill.category || ''] || CATEGORY_CONFIG.development;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`border rounded-lg overflow-hidden transition-all ${
|
||||
skill.installed
|
||||
? 'border-green-200 dark:border-green-800 bg-green-50/50 dark:bg-green-900/10'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="w-full p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Package className={`w-4 h-4 ${config.color}`} />
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{skill.name}
|
||||
</h3>
|
||||
{skill.installed && (
|
||||
<span className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
|
||||
<Check className="w-3 h-3" />
|
||||
已安装
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
|
||||
{skill.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
<CategoryBadge category={skill.category} />
|
||||
{skill.capabilities.slice(0, 3).map((cap) => (
|
||||
<span
|
||||
key={cap}
|
||||
className="px-1.5 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded"
|
||||
>
|
||||
{cap}
|
||||
</span>
|
||||
))}
|
||||
{skill.capabilities.length > 3 && (
|
||||
<span className="text-xs text-gray-400 dark:text-gray-500">
|
||||
+{skill.capabilities.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="w-4 h-4 text-gray-400" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="border-t border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Triggers */}
|
||||
<div>
|
||||
<h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
|
||||
触发词
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{skill.triggers.map((trigger) => (
|
||||
<span
|
||||
key={trigger}
|
||||
className="px-2 py-0.5 text-xs bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 rounded"
|
||||
>
|
||||
{trigger}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Capabilities */}
|
||||
<div>
|
||||
<h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
|
||||
能力
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{skill.capabilities.map((cap) => (
|
||||
<span
|
||||
key={cap}
|
||||
className="px-2 py-0.5 text-xs bg-purple-50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 rounded"
|
||||
>
|
||||
{cap}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tool Dependencies */}
|
||||
{skill.toolDeps.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
|
||||
工具依赖
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{skill.toolDeps.map((dep) => (
|
||||
<span
|
||||
key={dep}
|
||||
className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded font-mono"
|
||||
>
|
||||
{dep}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-2 pt-2 border-t border-gray-100 dark:border-gray-800">
|
||||
{skill.installed ? (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onUninstall();
|
||||
}}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
|
||||
>
|
||||
<Minus className="w-4 h-4" />
|
||||
卸载
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onInstall();
|
||||
}}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
安装
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SuggestionCard({ suggestion }: { suggestion: SkillSuggestion }) {
|
||||
const confidencePercent = Math.round(suggestion.confidence * 100);
|
||||
|
||||
return (
|
||||
<div className="p-3 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Sparkles className="w-4 h-4 text-blue-500" />
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{suggestion.skill.name}
|
||||
</span>
|
||||
<span className="text-xs text-blue-600 dark:text-blue-400 ml-auto">
|
||||
{confidencePercent}% 匹配
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-300 mb-2">{suggestion.reason}</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{suggestion.matchedPatterns.map((pattern) => (
|
||||
<span
|
||||
key={pattern}
|
||||
className="px-1.5 py-0.5 text-xs bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded"
|
||||
>
|
||||
{pattern}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// === Main Component ===
|
||||
|
||||
export function SkillMarket({
|
||||
className = '',
|
||||
onSkillInstall,
|
||||
onSkillUninstall,
|
||||
}: SkillMarketProps) {
|
||||
const [engine] = useState(() => new SkillDiscoveryEngine());
|
||||
const [skills, setSkills] = useState<SkillInfo[]>([]);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [categoryFilter, setCategoryFilter] = useState<CategoryFilter>('all');
|
||||
const [expandedSkillId, setExpandedSkillId] = useState<string | null>(null);
|
||||
const [suggestions, setSuggestions] = useState<SkillSuggestion[]>([]);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
|
||||
// Load skills
|
||||
useEffect(() => {
|
||||
const allSkills = engine.getAllSkills();
|
||||
setSkills(allSkills);
|
||||
}, [engine]);
|
||||
|
||||
// Filter skills
|
||||
const filteredSkills = useMemo(() => {
|
||||
let result = skills;
|
||||
|
||||
// Category filter
|
||||
if (categoryFilter !== 'all') {
|
||||
result = result.filter((s) => s.category === categoryFilter);
|
||||
}
|
||||
|
||||
// Search filter
|
||||
if (searchQuery.trim()) {
|
||||
const searchResult = engine.searchSkills(searchQuery);
|
||||
const matchingIds = new Set(searchResult.results.map((s) => s.id));
|
||||
result = result.filter((s) => matchingIds.has(s.id));
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [skills, categoryFilter, searchQuery, engine]);
|
||||
|
||||
// Get categories from skills
|
||||
const categories = useMemo(() => {
|
||||
const cats = new Set(skills.map((s) => s.category).filter(Boolean));
|
||||
return ['all', ...Array.from(cats)] as CategoryFilter[];
|
||||
}, [skills]);
|
||||
|
||||
// Stats
|
||||
const stats = useMemo(() => {
|
||||
const installed = skills.filter((s) => s.installed).length;
|
||||
return { total: skills.length, installed };
|
||||
}, [skills]);
|
||||
|
||||
const handleRefresh = useCallback(async () => {
|
||||
setIsRefreshing(true);
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
engine.refreshIndex();
|
||||
setSkills(engine.getAllSkills());
|
||||
setIsRefreshing(false);
|
||||
}, [engine]);
|
||||
|
||||
const handleInstall = useCallback(
|
||||
(skill: SkillInfo) => {
|
||||
engine.installSkill(skill.id);
|
||||
setSkills(engine.getAllSkills());
|
||||
onSkillInstall?.(skill);
|
||||
},
|
||||
[engine, onSkillInstall]
|
||||
);
|
||||
|
||||
const handleUninstall = useCallback(
|
||||
(skill: SkillInfo) => {
|
||||
engine.uninstallSkill(skill.id);
|
||||
setSkills(engine.getAllSkills());
|
||||
onSkillUninstall?.(skill);
|
||||
},
|
||||
[engine, onSkillUninstall]
|
||||
);
|
||||
|
||||
const handleSearch = useCallback(
|
||||
(query: string) => {
|
||||
setSearchQuery(query);
|
||||
if (query.trim()) {
|
||||
// Get suggestions based on search
|
||||
const mockConversation = [{ role: 'user' as const, content: query }];
|
||||
const newSuggestions = engine.suggestSkills(mockConversation);
|
||||
setSuggestions(newSuggestions.slice(0, 3));
|
||||
} else {
|
||||
setSuggestions([]);
|
||||
}
|
||||
},
|
||||
[engine]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col h-full ${className}`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="w-5 h-5 text-purple-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">技能市场</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={isRefreshing}
|
||||
className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50"
|
||||
title="刷新"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Bar */}
|
||||
<div className="flex items-center gap-4 px-4 py-2 bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700 text-xs">
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
总计: <span className="font-medium text-gray-900 dark:text-gray-100">{stats.total}</span>
|
||||
</span>
|
||||
<span className="text-green-600 dark:text-green-400">
|
||||
已安装: <span className="font-medium">{stats.installed}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
placeholder="搜索技能、能力、触发词..."
|
||||
className="w-full pl-9 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Suggestions */}
|
||||
<AnimatePresence>
|
||||
{suggestions.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="mt-3 space-y-2"
|
||||
>
|
||||
<h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 flex items-center gap-1">
|
||||
<Info className="w-3 h-3" />
|
||||
推荐技能
|
||||
</h4>
|
||||
{suggestions.map((suggestion) => (
|
||||
<SuggestionCard key={suggestion.skill.id} suggestion={suggestion} />
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="flex gap-1 px-4 py-2 border-b border-gray-200 dark:border-gray-700 overflow-x-auto">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => setCategoryFilter(cat)}
|
||||
className={`px-3 py-1 text-xs rounded-full whitespace-nowrap transition-colors ${
|
||||
categoryFilter === cat
|
||||
? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400'
|
||||
: 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
{cat === 'all' ? '全部' : CATEGORY_CONFIG[cat]?.label || cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Skill List */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||
{filteredSkills.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400">
|
||||
<Layers className="w-8 h-8 mb-2 opacity-50" />
|
||||
<p className="text-sm">
|
||||
{searchQuery ? '未找到匹配的技能' : '暂无技能'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredSkills.map((skill) => (
|
||||
<SkillCard
|
||||
key={skill.id}
|
||||
skill={skill}
|
||||
isExpanded={expandedSkillId === skill.id}
|
||||
onToggle={() => setExpandedSkillId((prev) => (prev === skill.id ? null : skill.id))}
|
||||
onInstall={() => handleInstall(skill)}
|
||||
onUninstall={() => handleUninstall(skill)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SkillMarket;
|
||||
591
desktop/src/components/SwarmDashboard.tsx
Normal file
591
desktop/src/components/SwarmDashboard.tsx
Normal file
@@ -0,0 +1,591 @@
|
||||
/**
|
||||
* SwarmDashboard - Multi-Agent Collaboration Task Dashboard
|
||||
*
|
||||
* Visualizes swarm tasks, multi-agent collaboration) with real-time
|
||||
* status updates, task history, and manual trigger functionality.
|
||||
*
|
||||
* Part of ZCLAW L4 Self-Evolution capability.
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Users,
|
||||
Play,
|
||||
Pause,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Clock,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Layers,
|
||||
GitBranch,
|
||||
MessageSquare,
|
||||
RefreshCw,
|
||||
Plus,
|
||||
History,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
AgentSwarm,
|
||||
type SwarmTask,
|
||||
type Subtask,
|
||||
type SwarmTaskStatus,
|
||||
type CommunicationStyle,
|
||||
} from '../lib/agent-swarm';
|
||||
import { useAgentStore } from '../store/agentStore';
|
||||
|
||||
// === Types ===
|
||||
|
||||
interface SwarmDashboardProps {
|
||||
className?: string;
|
||||
onTaskSelect?: (task: SwarmTask) => void;
|
||||
}
|
||||
|
||||
type FilterType = 'all' | 'active' | 'completed' | 'failed';
|
||||
|
||||
// === Status Config ===
|
||||
|
||||
const TASK_STATUS_CONFIG: Record<SwarmTaskStatus, { label: string; className: string; dotClass: string; icon: typeof CheckCircle }> = {
|
||||
planning: {
|
||||
label: '规划中',
|
||||
className: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
|
||||
dotClass: 'bg-purple-500',
|
||||
icon: Layers,
|
||||
},
|
||||
executing: {
|
||||
label: '执行中',
|
||||
className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
|
||||
dotClass: 'bg-blue-500 animate-pulse',
|
||||
icon: Play,
|
||||
},
|
||||
aggregating: {
|
||||
label: '汇总中',
|
||||
className: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400',
|
||||
dotClass: 'bg-cyan-500 animate-pulse',
|
||||
icon: RefreshCw,
|
||||
},
|
||||
done: {
|
||||
label: '已完成',
|
||||
className: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
|
||||
dotClass: 'bg-green-500',
|
||||
icon: CheckCircle,
|
||||
},
|
||||
failed: {
|
||||
label: '失败',
|
||||
className: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
|
||||
dotClass: 'bg-red-500',
|
||||
icon: XCircle,
|
||||
},
|
||||
};
|
||||
|
||||
const SUBTASK_STATUS_CONFIG: Record<string, { label: string; dotClass: string }> = {
|
||||
pending: { label: '待执行', dotClass: 'bg-gray-400' },
|
||||
running: { label: '执行中', dotClass: 'bg-blue-500 animate-pulse' },
|
||||
done: { label: '完成', dotClass: 'bg-green-500' },
|
||||
failed: { label: '失败', dotClass: 'bg-red-500' },
|
||||
};
|
||||
|
||||
const COMMUNICATION_STYLE_CONFIG: Record<CommunicationStyle, { label: string; icon: typeof Users; description: string }> = {
|
||||
sequential: {
|
||||
label: '顺序执行',
|
||||
icon: GitBranch,
|
||||
description: '每个 Agent 依次处理，输出传递给下一个',
|
||||
},
|
||||
parallel: {
|
||||
label: '并行执行',
|
||||
icon: Layers,
|
||||
description: '多个 Agent 同时处理不同子任务',
|
||||
},
|
||||
debate: {
|
||||
label: '辩论模式',
|
||||
icon: MessageSquare,
|
||||
description: '多个 Agent 提供观点，协调者综合',
|
||||
},
|
||||
};
|
||||
|
||||
// === Components ===
|
||||
|
||||
function TaskStatusBadge({ status }: { status: SwarmTaskStatus }) {
|
||||
const config = TASK_STATUS_CONFIG[status];
|
||||
const Icon = config.icon;
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium ${config.className}`}>
|
||||
<Icon className="w-3 h-3" />
|
||||
{config.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function SubtaskStatusDot({ status }: { status: string }) {
|
||||
const config = SUBTASK_STATUS_CONFIG[status] || SUBTASK_STATUS_CONFIG.pending;
|
||||
return <span className={`w-2 h-2 rounded-full ${config.dotClass}`} title={config.label} />;
|
||||
}
|
||||
|
||||
function CommunicationStyleBadge({ style }: { style: CommunicationStyle }) {
|
||||
const config = COMMUNICATION_STYLE_CONFIG[style];
|
||||
const Icon = config.icon;
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
|
||||
title={config.description}
|
||||
>
|
||||
<Icon className="w-3 h-3" />
|
||||
{config.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function SubtaskItem({
|
||||
subtask,
|
||||
agentName,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
}: {
|
||||
subtask: Subtask;
|
||||
agentName: string;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
const duration = useMemo(() => {
|
||||
if (!subtask.startedAt) return null;
|
||||
const start = new Date(subtask.startedAt).getTime();
|
||||
const end = subtask.completedAt ? new Date(subtask.completedAt).getTime() : Date.now();
|
||||
return Math.round((end - start) / 1000);
|
||||
}, [subtask.startedAt, subtask.completedAt]);
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="w-full flex items-center gap-3 px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-left"
|
||||
>
|
||||
<SubtaskStatusDot status={subtask.status} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
|
||||
{subtask.description}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
分配给: {agentName}
|
||||
{duration !== null && <span className="ml-2">· {duration}s</span>}
|
||||
</div>
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="w-4 h-4 text-gray-400" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isExpanded && subtask.result && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="border-t border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="p-3 text-sm text-gray-600 dark:text-gray-300 whitespace-pre-wrap max-h-40 overflow-y-auto">
|
||||
{subtask.result}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{subtask.error && (
|
||||
<div className="px-3 py-2 bg-red-50 dark:bg-red-900/20 border-t border-gray-200 dark:border-gray-700">
|
||||
<p className="text-xs text-red-600 dark:text-red-400">{subtask.error}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TaskCard({
|
||||
task,
|
||||
isSelected,
|
||||
onSelect,
|
||||
}: {
|
||||
task: SwarmTask;
|
||||
isSelected: boolean;
|
||||
onSelect: () => void;
|
||||
}) {
|
||||
const [expandedSubtasks, setExpandedSubtasks] = useState<Set<string>>(new Set());
|
||||
const { agents } = useAgentStore();
|
||||
|
||||
const toggleSubtask = useCallback((subtaskId: string) => {
|
||||
setExpandedSubtasks((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(subtaskId)) {
|
||||
next.delete(subtaskId);
|
||||
} else {
|
||||
next.add(subtaskId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const completedCount = task.subtasks.filter((s) => s.status === 'done').length;
|
||||
const totalDuration = useMemo(() => {
|
||||
if (!task.completedAt) return null;
|
||||
const start = new Date(task.createdAt).getTime();
|
||||
const end = new Date(task.completedAt).getTime();
|
||||
return Math.round((end - start) / 1000);
|
||||
}, [task.createdAt, task.completedAt]);
|
||||
|
||||
const getAgentName = (agentId: string) => {
|
||||
const agent = agents.find((a) => a.id === agentId);
|
||||
return agent?.name || agentId;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`border rounded-lg overflow-hidden transition-all ${
|
||||
isSelected
|
||||
? 'border-blue-500 dark:border-blue-400 ring-2 ring-blue-500/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={onSelect}
|
||||
className="w-full p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<TaskStatusBadge status={task.status} />
|
||||
<CommunicationStyleBadge style={task.communicationStyle} />
|
||||
</div>
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
|
||||
{task.description}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<Users className="w-3 h-3" />
|
||||
{completedCount}/{task.subtasks.length} 子任务
|
||||
</span>
|
||||
{totalDuration !== null && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{totalDuration}s
|
||||
</span>
|
||||
)}
|
||||
<span>{new Date(task.createdAt).toLocaleString('zh-CN')}</span>
|
||||
</div>
|
||||
</div>
|
||||
{isSelected ? (
|
||||
<ChevronDown className="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isSelected && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="border-t border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="p-4 space-y-3">
|
||||
<h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
子任务
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{task.subtasks.map((subtask) => (
|
||||
<SubtaskItem
|
||||
key={subtask.id}
|
||||
subtask={subtask}
|
||||
agentName={getAgentName(subtask.assignedTo)}
|
||||
isExpanded={expandedSubtasks.has(subtask.id)}
|
||||
onToggle={() => toggleSubtask(subtask.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{task.finalResult && (
|
||||
<div className="mt-4 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
|
||||
<h4 className="text-xs font-medium text-green-700 dark:text-green-400 mb-1">
|
||||
最终结果
|
||||
</h4>
|
||||
<p className="text-sm text-green-600 dark:text-green-300 whitespace-pre-wrap">
|
||||
{task.finalResult}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateTaskForm({
|
||||
onSubmit,
|
||||
onCancel,
|
||||
}: {
|
||||
onSubmit: (description: string, style: CommunicationStyle) => void;
|
||||
onCancel: () => void;
|
||||
}) {
|
||||
const [description, setDescription] = useState('');
|
||||
const [style, setStyle] = useState<CommunicationStyle>('sequential');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (description.trim()) {
|
||||
onSubmit(description.trim(), style);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
任务描述
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="描述需要协作完成的任务..."
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
协作模式
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{(Object.keys(COMMUNICATION_STYLE_CONFIG) as CommunicationStyle[]).map((s) => {
|
||||
const config = COMMUNICATION_STYLE_CONFIG[s];
|
||||
const Icon = config.icon;
|
||||
return (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
onClick={() => setStyle(s)}
|
||||
className={`flex flex-col items-center gap-1 p-2 rounded-lg border transition-all ${
|
||||
style === s
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-600 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
<span className="text-xs">{config.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!description.trim()}
|
||||
className="px-4 py-1.5 text-sm bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-lg transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
<Sparkles className="w-4 h-4" />
|
||||
创建任务
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
// === Main Component ===
|
||||
|
||||
export function SwarmDashboard({ className = '', onTaskSelect }: SwarmDashboardProps) {
|
||||
const [swarm] = useState(() => new AgentSwarm());
|
||||
const [tasks, setTasks] = useState<SwarmTask[]>([]);
|
||||
const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
|
||||
const [filter, setFilter] = useState<FilterType>('all');
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
|
||||
// Load tasks from swarm history
|
||||
useEffect(() => {
|
||||
const history = swarm.getHistory();
|
||||
setTasks([...history].reverse()); // Most recent first
|
||||
}, [swarm]);
|
||||
|
||||
const filteredTasks = useMemo(() => {
|
||||
switch (filter) {
|
||||
case 'active':
|
||||
return tasks.filter((t) => ['planning', 'executing', 'aggregating'].includes(t.status));
|
||||
case 'completed':
|
||||
return tasks.filter((t) => t.status === 'done');
|
||||
case 'failed':
|
||||
return tasks.filter((t) => t.status === 'failed');
|
||||
default:
|
||||
return tasks;
|
||||
}
|
||||
}, [tasks, filter]);
|
||||
|
||||
const stats = useMemo(() => {
|
||||
const active = tasks.filter((t) => ['planning', 'executing', 'aggregating'].includes(t.status)).length;
|
||||
const completed = tasks.filter((t) => t.status === 'done').length;
|
||||
const failed = tasks.filter((t) => t.status === 'failed').length;
|
||||
return { total: tasks.length, active, completed, failed };
|
||||
}, [tasks]);
|
||||
|
||||
const handleRefresh = useCallback(async () => {
|
||||
setIsRefreshing(true);
|
||||
// Simulate refresh delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
const history = swarm.getHistory();
|
||||
setTasks([...history].reverse());
|
||||
setIsRefreshing(false);
|
||||
}, [swarm]);
|
||||
|
||||
const handleCreateTask = useCallback(
|
||||
(description: string, style: CommunicationStyle) => {
|
||||
const task = swarm.createTask(description, { communicationStyle: style });
|
||||
setTasks((prev) => [task, ...prev]);
|
||||
setSelectedTaskId(task.id);
|
||||
setShowCreateForm(false);
|
||||
onTaskSelect?.(task);
|
||||
|
||||
// Note: Actual execution should be triggered via chatStore.dispatchSwarmTask
|
||||
console.log('[SwarmDashboard] Task created:', task.id, 'Style:', style);
|
||||
},
|
||||
[swarm, onTaskSelect]
|
||||
);
|
||||
|
||||
const handleSelectTask = useCallback(
|
||||
(taskId: string) => {
|
||||
setSelectedTaskId((prev) => (prev === taskId ? null : taskId));
|
||||
const task = tasks.find((t) => t.id === taskId);
|
||||
if (task && selectedTaskId !== taskId) {
|
||||
onTaskSelect?.(task);
|
||||
}
|
||||
},
|
||||
[tasks, onTaskSelect, selectedTaskId]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col h-full ${className}`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-5 h-5 text-blue-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">协作任务</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={isRefreshing}
|
||||
className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50"
|
||||
title="刷新"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowCreateForm((prev) => !prev)}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
新建
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Bar */}
|
||||
<div className="flex items-center gap-4 px-4 py-2 bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700 text-xs">
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
总计: <span className="font-medium text-gray-900 dark:text-gray-100">{stats.total}</span>
|
||||
</span>
|
||||
<span className="text-blue-600 dark:text-blue-400">
|
||||
活跃: <span className="font-medium">{stats.active}</span>
|
||||
</span>
|
||||
<span className="text-green-600 dark:text-green-400">
|
||||
完成: <span className="font-medium">{stats.completed}</span>
|
||||
</span>
|
||||
{stats.failed > 0 && (
|
||||
<span className="text-red-600 dark:text-red-400">
|
||||
失败: <span className="font-medium">{stats.failed}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filter Tabs */}
|
||||
<div className="flex gap-1 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
|
||||
{(['all', 'active', 'completed', 'failed'] as FilterType[]).map((f) => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setFilter(f)}
|
||||
className={`px-3 py-1 text-xs rounded-full transition-colors ${
|
||||
filter === f
|
||||
? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400'
|
||||
: 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
{f === 'all' ? '全部' : f === 'active' ? '活跃' : f === 'completed' ? '已完成' : '失败'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Create Form */}
|
||||
<AnimatePresence>
|
||||
{showCreateForm && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="border-b border-gray-200 dark:border-gray-700 overflow-hidden"
|
||||
>
|
||||
<CreateTaskForm
|
||||
onSubmit={handleCreateTask}
|
||||
onCancel={() => setShowCreateForm(false)}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Task List */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||
{filteredTasks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400">
|
||||
<History className="w-8 h-8 mb-2 opacity-50" />
|
||||
<p className="text-sm">
|
||||
{filter === 'all'
|
||||
? '暂无协作任务'
|
||||
: filter === 'active'
|
||||
? '暂无活跃任务'
|
||||
: filter === 'completed'
|
||||
? '暂无已完成任务'
|
||||
: '暂无失败任务'}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
className="mt-2 text-blue-500 hover:text-blue-600 text-sm"
|
||||
>
|
||||
创建第一个任务
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
filteredTasks.map((task) => (
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
isSelected={selectedTaskId === task.id}
|
||||
onSelect={() => handleSelectTask(task.id)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SwarmDashboard;
|
||||
Reference in New Issue
Block a user