80cadd1158
Some checks failed
CI / Lint & TypeCheck (push) Has been cancelled
CI / Unit Tests (push) Has been cancelled
CI / Build Frontend (push) Has been cancelled
CI / Rust Check (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
- Add Butler types (PainPoint, Proposal, DelegationResult) to viking-client.ts - Add butler API functions: getButlerInsights, getButlerProposals, recordButlerPainPoint, generateButlerSolution, updateButlerProposalStatus, butlerDelegateTask - Create ButlerPanel with three sections: - InsightsSection: pain point cards with evidence chain, severity, confidence - ProposalsSection: solution cards with accept/reject actions - MemorySection: Viking memory entries per agent - Create useButlerInsights hook for data fetching - Add "管家" tab to RightPanel with ConciergeBell icon Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
982 lines
41 KiB
TypeScript
982 lines
41 KiB
TypeScript
import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { getStoredGatewayUrl } from '../lib/gateway-client';
|
|
import { useConnectionStore } from '../store/connectionStore';
|
|
import { useAgentStore, type PluginStatus } from '../store/agentStore';
|
|
import { useConfigStore } from '../store/configStore';
|
|
import { toChatAgent, useChatStore, type CodeBlock } from '../store/chatStore';
|
|
import { useConversationStore } from '../store/chat/conversationStore';
|
|
import { intelligenceClient, type IdentitySnapshot } from '../lib/intelligence-client';
|
|
import {
|
|
Wifi, WifiOff, Bot, BarChart3, Plug, RefreshCw,
|
|
MessageSquare, Cpu, FileText, User, Activity, Brain,
|
|
Shield, Sparkles, List, Network, Dna, History,
|
|
ChevronDown, ChevronUp, RotateCcw, AlertCircle, Loader2,
|
|
ConciergeBell,
|
|
} from 'lucide-react';
|
|
import { ButlerPanel } from './ButlerPanel';
|
|
|
|
// === Helper to extract code blocks from markdown content ===
|
|
function extractCodeBlocksFromContent(content: string): CodeBlock[] {
|
|
const blocks: CodeBlock[] = [];
|
|
const regex = /```(\w*)\n([\s\S]*?)```/g;
|
|
let match;
|
|
|
|
while ((match = regex.exec(content)) !== null) {
|
|
const language = match[1] || 'text';
|
|
const codeContent = match[2].trim();
|
|
|
|
// Try to extract filename from first line comment
|
|
let filename: string | undefined;
|
|
let actualContent = codeContent;
|
|
|
|
// Check for filename patterns like "# filename.py" or "// filename.js"
|
|
const firstLine = codeContent.split('\n')[0];
|
|
const filenameMatch = firstLine.match(/^(?:#|\/\/|\/\*|<!--)\s*([^\s]+\.\w+)/);
|
|
if (filenameMatch) {
|
|
filename = filenameMatch[1];
|
|
actualContent = codeContent.split('\n').slice(1).join('\n').trim();
|
|
}
|
|
|
|
blocks.push({
|
|
language,
|
|
filename,
|
|
content: actualContent,
|
|
});
|
|
}
|
|
|
|
return blocks;
|
|
}
|
|
|
|
// === Tab Button Component ===
|
|
function TabButton({
|
|
active,
|
|
onClick,
|
|
icon,
|
|
label,
|
|
}: {
|
|
active: boolean;
|
|
onClick: () => void;
|
|
icon: ReactNode;
|
|
label: string;
|
|
}) {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
|
|
active
|
|
? 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300'
|
|
: 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300'
|
|
}`}
|
|
>
|
|
{icon}
|
|
<span>{label}</span>
|
|
</button>
|
|
);
|
|
}
|
|
import { MemoryPanel } from './MemoryPanel';
|
|
import { MemoryGraph } from './MemoryGraph';
|
|
import { ReflectionLog } from './ReflectionLog';
|
|
import { AutonomyConfig } from './AutonomyConfig';
|
|
import { IdentityChangeProposalPanel } from './IdentityChangeProposal';
|
|
import { CodeSnippetPanel, type CodeSnippet } from './CodeSnippetPanel';
|
|
import { cardHover, defaultTransition } from '../lib/animations';
|
|
import { Button, Badge } from './ui';
|
|
import { getPersonalityById } from '../lib/personality-presets';
|
|
import { silentErrorHandler } from '../lib/error-utils';
|
|
|
|
export function RightPanel() {
|
|
// Connection store
|
|
const connectionState = useConnectionStore((s) => s.connectionState);
|
|
const gatewayVersion = useConnectionStore((s) => s.gatewayVersion);
|
|
const error = useConnectionStore((s) => s.error);
|
|
const connect = useConnectionStore((s) => s.connect);
|
|
|
|
// Agent store
|
|
const clones = useAgentStore((s) => s.clones);
|
|
const usageStats = useAgentStore((s) => s.usageStats);
|
|
const pluginStatus = useAgentStore((s) => s.pluginStatus);
|
|
const loadClones = useAgentStore((s) => s.loadClones);
|
|
const loadUsageStats = useAgentStore((s) => s.loadUsageStats);
|
|
const loadPluginStatus = useAgentStore((s) => s.loadPluginStatus);
|
|
const updateClone = useAgentStore((s) => s.updateClone);
|
|
|
|
// Config store
|
|
const workspaceInfo = useConfigStore((s) => s.workspaceInfo);
|
|
const quickConfig = useConfigStore((s) => s.quickConfig);
|
|
|
|
const { messages, setCurrentAgent } = useChatStore();
|
|
const currentModel = useConversationStore((s) => s.currentModel);
|
|
const currentAgent = useConversationStore((s) => s.currentAgent);
|
|
const [activeTab, setActiveTab] = useState<'status' | 'files' | 'agent' | 'memory' | 'reflection' | 'autonomy' | 'evolution' | 'butler'>('status');
|
|
const [memoryViewMode, setMemoryViewMode] = useState<'list' | 'graph'>('list');
|
|
const [isEditingAgent, setIsEditingAgent] = useState(false);
|
|
const [agentDraft, setAgentDraft] = useState<AgentDraft | null>(null);
|
|
|
|
// Identity snapshot state
|
|
const [snapshots, setSnapshots] = useState<IdentitySnapshot[]>([]);
|
|
const [snapshotsExpanded, setSnapshotsExpanded] = useState(false);
|
|
const [snapshotsLoading, setSnapshotsLoading] = useState(false);
|
|
const [snapshotsError, setSnapshotsError] = useState<string | null>(null);
|
|
const [restoringSnapshotId, setRestoringSnapshotId] = useState<string | null>(null);
|
|
const [confirmRestoreId, setConfirmRestoreId] = useState<string | null>(null);
|
|
|
|
const connected = connectionState === 'connected';
|
|
const selectedClone = useMemo(
|
|
() => clones.find((clone) => clone.id === currentAgent?.id),
|
|
[clones, currentAgent?.id]
|
|
);
|
|
const focusAreas = selectedClone?.scenarios?.length ? selectedClone.scenarios : ['coding', 'writing', 'research', 'product', 'data'];
|
|
const bootstrapFiles = selectedClone?.bootstrapFiles || [];
|
|
const gatewayUrl = quickConfig.gatewayUrl || getStoredGatewayUrl();
|
|
|
|
useEffect(() => {
|
|
if (!selectedClone || isEditingAgent) return;
|
|
setAgentDraft(createAgentDraft(selectedClone, currentModel));
|
|
}, [selectedClone, currentModel, isEditingAgent]);
|
|
|
|
// Load data when connected
|
|
useEffect(() => {
|
|
if (connected) {
|
|
loadClones();
|
|
loadUsageStats();
|
|
loadPluginStatus();
|
|
}
|
|
}, [connected]);
|
|
|
|
const handleReconnect = () => {
|
|
connect().catch(silentErrorHandler('RightPanel'));
|
|
};
|
|
|
|
const handleStartEdit = () => {
|
|
if (!selectedClone) return;
|
|
setAgentDraft(createAgentDraft(selectedClone, currentModel));
|
|
setIsEditingAgent(true);
|
|
};
|
|
|
|
const handleCancelEdit = () => {
|
|
if (selectedClone) {
|
|
setAgentDraft(createAgentDraft(selectedClone, currentModel));
|
|
}
|
|
setIsEditingAgent(false);
|
|
};
|
|
|
|
const handleSaveAgent = async () => {
|
|
if (!selectedClone || !agentDraft || !agentDraft.name.trim()) return;
|
|
const updatedClone = await updateClone(selectedClone.id, {
|
|
name: agentDraft.name.trim(),
|
|
role: agentDraft.role.trim() || undefined,
|
|
nickname: agentDraft.nickname.trim() || undefined,
|
|
model: agentDraft.model.trim() || undefined,
|
|
scenarios: agentDraft.scenarios.split(',').map((item) => item.trim()).filter(Boolean),
|
|
workspaceDir: agentDraft.workspaceDir.trim() || undefined,
|
|
userName: agentDraft.userName.trim() || undefined,
|
|
userRole: agentDraft.userRole.trim() || undefined,
|
|
restrictFiles: agentDraft.restrictFiles,
|
|
privacyOptIn: agentDraft.privacyOptIn,
|
|
});
|
|
if (updatedClone) {
|
|
setCurrentAgent(toChatAgent(updatedClone));
|
|
setAgentDraft(createAgentDraft(updatedClone, updatedClone.model || currentModel));
|
|
setIsEditingAgent(false);
|
|
}
|
|
};
|
|
|
|
const loadSnapshots = useCallback(async () => {
|
|
const agentId = currentAgent?.id;
|
|
if (!agentId) return;
|
|
setSnapshotsLoading(true);
|
|
setSnapshotsError(null);
|
|
try {
|
|
const result = await intelligenceClient.identity.getSnapshots(agentId, 20);
|
|
setSnapshots(result);
|
|
} catch (err) {
|
|
const msg = err instanceof Error ? err.message : String(err);
|
|
setSnapshotsError(`加载快照失败: ${msg}`);
|
|
} finally {
|
|
setSnapshotsLoading(false);
|
|
}
|
|
}, [currentAgent?.id]);
|
|
|
|
const handleRestoreSnapshot = useCallback(async (snapshotId: string) => {
|
|
const agentId = currentAgent?.id;
|
|
if (!agentId) return;
|
|
setRestoringSnapshotId(snapshotId);
|
|
setSnapshotsError(null);
|
|
setConfirmRestoreId(null);
|
|
try {
|
|
await intelligenceClient.identity.restoreSnapshot(agentId, snapshotId);
|
|
await loadSnapshots();
|
|
} catch (err) {
|
|
const msg = err instanceof Error ? err.message : String(err);
|
|
setSnapshotsError(`回滚失败: ${msg}`);
|
|
} finally {
|
|
setRestoringSnapshotId(null);
|
|
}
|
|
}, [currentAgent?.id, loadSnapshots]);
|
|
|
|
// Load snapshots when agent tab is active and agent changes
|
|
useEffect(() => {
|
|
if (activeTab === 'agent' && currentAgent?.id) {
|
|
loadSnapshots();
|
|
}
|
|
}, [activeTab, currentAgent?.id, loadSnapshots]);
|
|
|
|
const userMsgCount = messages.filter(m => m.role === 'user').length;
|
|
const assistantMsgCount = messages.filter(m => m.role === 'assistant').length;
|
|
const toolCallCount = messages.filter(m => m.role === 'tool').length;
|
|
const runtimeSummary = connected ? '已连接' : connectionState === 'connecting' ? '连接中...' : connectionState === 'reconnecting' ? '重连中...' : '未连接';
|
|
const userNameDisplay = selectedClone?.userName || quickConfig.userName || 'User';
|
|
const userAddressing = selectedClone?.nickname || selectedClone?.userName || quickConfig.userName || 'User';
|
|
const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone || '系统时区';
|
|
|
|
// Extract code blocks from all messages (both from codeBlocks property and content parsing)
|
|
const codeSnippets = useMemo((): CodeSnippet[] => {
|
|
const snippets: CodeSnippet[] = [];
|
|
let globalIndex = 0;
|
|
|
|
for (let msgIdx = 0; msgIdx < messages.length; msgIdx++) {
|
|
const msg = messages[msgIdx];
|
|
|
|
// First, add any existing codeBlocks from the message
|
|
if (msg.codeBlocks && msg.codeBlocks.length > 0) {
|
|
for (const block of msg.codeBlocks) {
|
|
snippets.push({
|
|
id: `${msg.id}-codeblock-${globalIndex}`,
|
|
block,
|
|
messageIndex: msgIdx,
|
|
});
|
|
globalIndex++;
|
|
}
|
|
}
|
|
|
|
// Then, extract code blocks from the message content
|
|
if (msg.content) {
|
|
const extractedBlocks = extractCodeBlocksFromContent(msg.content);
|
|
for (const block of extractedBlocks) {
|
|
snippets.push({
|
|
id: `${msg.id}-extracted-${globalIndex}`,
|
|
block,
|
|
messageIndex: msgIdx,
|
|
});
|
|
globalIndex++;
|
|
}
|
|
}
|
|
}
|
|
|
|
return snippets;
|
|
}, [messages]);
|
|
|
|
return (
|
|
<aside className="w-full bg-white dark:bg-gray-900 flex flex-col">
|
|
{/* 顶部工具栏 - Tab 栏 */}
|
|
<div className="border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
|
|
{/* 主 Tab 行 */}
|
|
<div className="flex items-center px-2 pt-2 gap-1">
|
|
<TabButton
|
|
active={activeTab === 'status'}
|
|
onClick={() => setActiveTab('status')}
|
|
icon={<Activity className="w-4 h-4" />}
|
|
label="状态"
|
|
/>
|
|
<TabButton
|
|
active={activeTab === 'agent'}
|
|
onClick={() => setActiveTab('agent')}
|
|
icon={<User className="w-4 h-4" />}
|
|
label="Agent"
|
|
/>
|
|
<TabButton
|
|
active={activeTab === 'files'}
|
|
onClick={() => setActiveTab('files')}
|
|
icon={<FileText className="w-4 h-4" />}
|
|
label="文件"
|
|
/>
|
|
<TabButton
|
|
active={activeTab === 'memory'}
|
|
onClick={() => setActiveTab('memory')}
|
|
icon={<Brain className="w-4 h-4" />}
|
|
label="记忆"
|
|
/>
|
|
</div>
|
|
{/* 第二行 Tab */}
|
|
<div className="flex items-center px-2 pb-2 gap-1">
|
|
<TabButton
|
|
active={activeTab === 'reflection'}
|
|
onClick={() => setActiveTab('reflection')}
|
|
icon={<Sparkles className="w-4 h-4" />}
|
|
label="反思"
|
|
/>
|
|
<TabButton
|
|
active={activeTab === 'autonomy'}
|
|
onClick={() => setActiveTab('autonomy')}
|
|
icon={<Shield className="w-4 h-4" />}
|
|
label="自主"
|
|
/>
|
|
<TabButton
|
|
active={activeTab === 'evolution'}
|
|
onClick={() => setActiveTab('evolution')}
|
|
icon={<Dna className="w-4 h-4" />}
|
|
label="演化"
|
|
/>
|
|
<TabButton
|
|
active={activeTab === 'butler'}
|
|
onClick={() => setActiveTab('butler')}
|
|
icon={<ConciergeBell className="w-4 h-4" />}
|
|
label="管家"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 消息统计 */}
|
|
<div className="px-4 py-2 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between text-xs">
|
|
<div className="flex items-center gap-2 text-gray-500 dark:text-gray-400">
|
|
<BarChart3 className="w-3.5 h-3.5" />
|
|
<span>{messages.length} 条消息</span>
|
|
<span className="text-gray-300 dark:text-gray-600">|</span>
|
|
<span>{userMsgCount} 用户 / {assistantMsgCount} 助手</span>
|
|
</div>
|
|
<div className={`flex items-center gap-1 ${connected ? 'text-emerald-500' : 'text-gray-400'}`}>
|
|
{connected ? <Wifi className="w-3.5 h-3.5" /> : <WifiOff className="w-3.5 h-3.5" />}
|
|
<span>{runtimeSummary}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-4">
|
|
{activeTab === 'memory' ? (
|
|
<div className="space-y-3">
|
|
{/* 视图切换 */}
|
|
<div className="flex items-center gap-1 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg">
|
|
<button
|
|
onClick={() => setMemoryViewMode('list')}
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
|
|
memoryViewMode === 'list'
|
|
? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm'
|
|
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
|
|
}`}
|
|
>
|
|
<List className="w-3.5 h-3.5" />
|
|
列表
|
|
</button>
|
|
<button
|
|
onClick={() => setMemoryViewMode('graph')}
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
|
|
memoryViewMode === 'graph'
|
|
? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm'
|
|
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
|
|
}`}
|
|
>
|
|
<Network className="w-3.5 h-3.5" />
|
|
图谱
|
|
</button>
|
|
</div>
|
|
|
|
{/* 内容区域 */}
|
|
{memoryViewMode === 'list' ? (
|
|
<MemoryPanel />
|
|
) : (
|
|
<div className="h-[400px] rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
|
|
<MemoryGraph />
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : activeTab === 'reflection' ? (
|
|
<ReflectionLog />
|
|
) : activeTab === 'autonomy' ? (
|
|
<AutonomyConfig />
|
|
) : activeTab === 'evolution' ? (
|
|
<IdentityChangeProposalPanel />
|
|
) : activeTab === 'butler' ? (
|
|
<ButlerPanel agentId={currentAgent?.id} />
|
|
) : activeTab === 'agent'? (
|
|
<div className="space-y-4">
|
|
<motion.div
|
|
whileHover={cardHover}
|
|
transition={defaultTransition}
|
|
className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 shadow-sm"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-orange-400 to-red-500 flex items-center justify-center text-white text-lg font-semibold">
|
|
{selectedClone?.emoji ? (
|
|
<span className="text-2xl">{selectedClone.emoji}</span>
|
|
) : (
|
|
<span>🦞</span>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<div className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
|
{selectedClone?.name || currentAgent?.name || '全能助手'}
|
|
{selectedClone?.personality ? (
|
|
<Badge variant="default" className="text-xs ml-1">
|
|
{getPersonalityById(selectedClone.personality)?.label || selectedClone.personality}
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="default" className="text-xs ml-1">
|
|
友好亲切
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="text-sm text-gray-500 dark:text-gray-400">{selectedClone?.role || '全能型 AI 助手'}</div>
|
|
</div>
|
|
</div>
|
|
{selectedClone ? (
|
|
isEditingAgent ? (
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleCancelEdit}
|
|
aria-label="Cancel edit"
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
onClick={() => { handleSaveAgent().catch(silentErrorHandler('RightPanel')); }}
|
|
aria-label="Save edit"
|
|
>
|
|
保存
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleStartEdit}
|
|
aria-label="Edit Agent"
|
|
>
|
|
编辑
|
|
</Button>
|
|
)
|
|
) : null}
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
whileHover={cardHover}
|
|
transition={defaultTransition}
|
|
className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 shadow-sm"
|
|
>
|
|
<div className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">关于我</div>
|
|
{isEditingAgent && agentDraft ? (
|
|
<div className="space-y-2">
|
|
<AgentInput label="名称" value={agentDraft.name} onChange={(value) => setAgentDraft({ ...agentDraft, name: value })} />
|
|
<AgentInput label="角色" value={agentDraft.role} onChange={(value) => setAgentDraft({ ...agentDraft, role: value })} />
|
|
<AgentInput label="昵称" value={agentDraft.nickname} onChange={(value) => setAgentDraft({ ...agentDraft, nickname: value })} />
|
|
<AgentInput label="模型" value={agentDraft.model} onChange={(value) => setAgentDraft({ ...agentDraft, model: value })} />
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3 text-sm">
|
|
<AgentRow label="角色" value={selectedClone?.role || '全能型 AI 助手'} />
|
|
<AgentRow label="昵称" value={selectedClone?.nickname || '小龙'} />
|
|
<AgentRow label="模型" value={selectedClone?.model || currentModel} />
|
|
<AgentRow label="表情" value={selectedClone?.emoji || '🦞'} />
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
whileHover={cardHover}
|
|
transition={defaultTransition}
|
|
className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 shadow-sm"
|
|
>
|
|
<div className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">我眼中的你</div>
|
|
{isEditingAgent && agentDraft ? (
|
|
<div className="space-y-2">
|
|
<AgentInput label="你的名称" value={agentDraft.userName} onChange={(value) => setAgentDraft({ ...agentDraft, userName: value })} />
|
|
<AgentInput label="你的角色" value={agentDraft.userRole} onChange={(value) => setAgentDraft({ ...agentDraft, userRole: value })} />
|
|
<AgentInput label="场景" value={agentDraft.scenarios} onChange={(value) => setAgentDraft({ ...agentDraft, scenarios: value })} placeholder="编程, 研究" />
|
|
<AgentInput label="工作区" value={agentDraft.workspaceDir} onChange={(value) => setAgentDraft({ ...agentDraft, workspaceDir: value })} />
|
|
<AgentToggle label="文件限制" checked={agentDraft.restrictFiles} onChange={(value) => setAgentDraft({ ...agentDraft, restrictFiles: value })} />
|
|
<AgentToggle label="隐私计划" checked={agentDraft.privacyOptIn} onChange={(value) => setAgentDraft({ ...agentDraft, privacyOptIn: value })} />
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3 text-sm">
|
|
<AgentRow label="你的名称" value={userNameDisplay} />
|
|
<AgentRow label="称呼方式" value={userAddressing} />
|
|
<AgentRow label="时区" value={localTimezone} />
|
|
<div className="flex gap-4">
|
|
<div className="w-16 text-gray-500 dark:text-gray-400">专注</div>
|
|
<div className="flex-1 flex flex-wrap gap-2">
|
|
{focusAreas.map((item) => (
|
|
<Badge key={item} variant="default">{item}</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<AgentRow label="工作区" value={selectedClone?.workspaceDir || workspaceInfo?.path || '~/.zclaw/zclaw-workspace'} />
|
|
<AgentRow label="已解析" value={selectedClone?.workspaceResolvedPath || workspaceInfo?.resolvedPath || '-'} />
|
|
<AgentRow label="文件限制" value={selectedClone?.restrictFiles ? '已开启' : '已关闭'} />
|
|
<AgentRow label="隐私计划" value={selectedClone?.privacyOptIn ? '已加入' : '未加入'} />
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
whileHover={cardHover}
|
|
transition={defaultTransition}
|
|
className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 shadow-sm"
|
|
>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="text-sm font-semibold text-gray-900 dark:text-gray-100">引导文件</div>
|
|
<Badge variant={selectedClone?.bootstrapReady ? 'success' : 'default'}>
|
|
{selectedClone?.bootstrapReady ? '已生成' : '未生成'}
|
|
</Badge>
|
|
</div>
|
|
<div className="space-y-2 text-sm">
|
|
{bootstrapFiles.length > 0 ? bootstrapFiles.map((file) => (
|
|
<div key={file.name} className="rounded-lg border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 px-3 py-2">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="font-medium text-gray-800 dark:text-gray-200">{file.name}</span>
|
|
<Badge variant={file.exists ? 'success' : 'error'}>
|
|
{file.exists ? '已存在' : '缺失'}
|
|
</Badge>
|
|
</div>
|
|
<div className="mt-1 text-xs text-gray-500 dark:text-gray-400 break-all">{file.path}</div>
|
|
</div>
|
|
)) : (
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">该 Agent 尚未生成引导文件。</p>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* 历史快照 */}
|
|
<motion.div
|
|
whileHover={cardHover}
|
|
transition={defaultTransition}
|
|
className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 shadow-sm"
|
|
>
|
|
<button
|
|
type="button"
|
|
className="w-full flex items-center justify-between mb-0"
|
|
onClick={() => setSnapshotsExpanded(!snapshotsExpanded)}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<History className="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
|
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100">历史快照</span>
|
|
{snapshots.length > 0 && (
|
|
<Badge variant="default" className="text-xs">{snapshots.length}</Badge>
|
|
)}
|
|
</div>
|
|
{snapshotsExpanded ? (
|
|
<ChevronUp className="w-4 h-4 text-gray-400" />
|
|
) : (
|
|
<ChevronDown className="w-4 h-4 text-gray-400" />
|
|
)}
|
|
</button>
|
|
|
|
{snapshotsExpanded && (
|
|
<div className="mt-3 space-y-2">
|
|
{snapshotsError && (
|
|
<div className="flex items-center gap-2 p-2 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-xs">
|
|
<AlertCircle className="w-3.5 h-3.5 flex-shrink-0" />
|
|
<span>{snapshotsError}</span>
|
|
</div>
|
|
)}
|
|
|
|
{snapshotsLoading ? (
|
|
<div className="flex items-center justify-center py-4 text-gray-500 dark:text-gray-400 text-xs">
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
加载中...
|
|
</div>
|
|
) : snapshots.length === 0 ? (
|
|
<div className="text-center py-4 text-gray-500 dark:text-gray-400 text-xs bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-100 dark:border-gray-700">
|
|
暂无快照记录
|
|
</div>
|
|
) : (
|
|
snapshots.map((snap) => {
|
|
const isRestoring = restoringSnapshotId === snap.id;
|
|
const isConfirming = confirmRestoreId === snap.id;
|
|
const timeLabel = formatSnapshotTime(snap.timestamp);
|
|
|
|
return (
|
|
<div
|
|
key={snap.id}
|
|
className="flex items-start gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-700"
|
|
>
|
|
<div className="w-7 h-7 rounded-md bg-gray-200 dark:bg-gray-700 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<History className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="text-xs text-gray-500 dark:text-gray-400">{timeLabel}</span>
|
|
{isConfirming ? (
|
|
<div className="flex items-center gap-1.5">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setConfirmRestoreId(null)}
|
|
disabled={isRestoring}
|
|
className="text-xs px-2 py-0.5 h-auto"
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
onClick={() => handleRestoreSnapshot(snap.id)}
|
|
disabled={isRestoring}
|
|
className="text-xs px-2 py-0.5 h-auto bg-orange-500 hover:bg-orange-600"
|
|
>
|
|
{isRestoring ? (
|
|
<Loader2 className="w-3 h-3 mr-1 animate-spin" />
|
|
) : (
|
|
<RotateCcw className="w-3 h-3 mr-1" />
|
|
)}
|
|
确认回滚
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setConfirmRestoreId(snap.id)}
|
|
disabled={restoringSnapshotId !== null}
|
|
className="text-xs text-gray-500 hover:text-orange-600 px-2 py-0.5 h-auto"
|
|
title="回滚到此版本"
|
|
>
|
|
<RotateCcw className="w-3 h-3 mr-1" />
|
|
回滚
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-gray-700 dark:text-gray-300 mt-1 truncate" title={snap.reason}>
|
|
{snap.reason || '自动快照'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
</div>
|
|
) : activeTab === 'files' ? (
|
|
<div className="p-4">
|
|
<CodeSnippetPanel snippets={codeSnippets} />
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Gateway 连接状态 */}
|
|
<motion.div
|
|
whileHover={cardHover}
|
|
transition={defaultTransition}
|
|
className={`rounded-lg border p-3 ${connected ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800' : 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700'}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center gap-2">
|
|
{connected ? (
|
|
<Wifi className="w-4 h-4 text-green-600 dark:text-green-400" />
|
|
) : (
|
|
<WifiOff className="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
|
)}
|
|
<Badge variant={connected ? 'success' : 'default'}>
|
|
Gateway {connected ? '已连接' : connectionState === 'connecting' ? '连接中...' : connectionState === 'reconnecting' ? '重连中...' : '未连接'}
|
|
</Badge>
|
|
</div>
|
|
{connected && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => { loadUsageStats(); loadPluginStatus(); loadClones(); }}
|
|
className="p-1 text-gray-500 hover:text-orange-500"
|
|
title="刷新数据"
|
|
aria-label="刷新数据"
|
|
>
|
|
<RefreshCw className="w-3.5 h-3.5" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="space-y-1 text-xs">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">地址</span>
|
|
<span className="text-gray-700 font-mono">{gatewayUrl}</span>
|
|
</div>
|
|
{gatewayVersion && (
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">版本</span>
|
|
<span className="text-gray-700">{gatewayVersion}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">当前模型</span>
|
|
<span className="text-orange-600 font-medium">{currentModel}</span>
|
|
</div>
|
|
</div>
|
|
{!connected && connectionState !== 'connecting' && (
|
|
<div className="mt-2">
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
onClick={handleReconnect}
|
|
className="w-full"
|
|
>
|
|
连接 Gateway
|
|
</Button>
|
|
</div>
|
|
)}
|
|
{error && (
|
|
<p className="mt-2 text-xs text-red-500 truncate" title={error}>
|
|
{error.includes('Cannot read properties') || error.includes('TypeError')
|
|
? '连接状态获取失败，请重新连接'
|
|
: error}
|
|
</p>
|
|
)}
|
|
</motion.div>
|
|
|
|
{/* 当前会话 */}
|
|
<motion.div
|
|
whileHover={cardHover}
|
|
transition={defaultTransition}
|
|
className="bg-gray-50 rounded-lg border border-gray-100 p-3"
|
|
>
|
|
<h3 className="text-xs font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
|
|
<MessageSquare className="w-3.5 h-3.5" />
|
|
当前会话
|
|
</h3>
|
|
<div className="space-y-1.5 text-xs">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">用户消息</span>
|
|
<span className="font-medium text-gray-900">{userMsgCount}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">助手回复</span>
|
|
<span className="font-medium text-gray-900">{assistantMsgCount}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">工具调用</span>
|
|
<span className="font-medium text-gray-900">{toolCallCount}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">总消息数</span>
|
|
<span className="font-medium text-orange-600">{messages.length}</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* 分身 */}
|
|
<motion.div
|
|
whileHover={cardHover}
|
|
transition={defaultTransition}
|
|
className="bg-gray-50 rounded-lg border border-gray-100 p-3"
|
|
>
|
|
<h3 className="text-xs font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
|
|
<Bot className="w-3.5 h-3.5" />
|
|
分身状态
|
|
</h3>
|
|
{clones.length > 0 ? (
|
|
<div className="space-y-1.5">
|
|
{clones.slice(0, 5).map(c => (
|
|
<div key={c.id} className="flex items-center gap-2 text-xs">
|
|
<div className="w-5 h-5 bg-gradient-to-br from-orange-400 to-red-500 rounded-md flex items-center justify-center text-white text-[10px]">
|
|
<Bot className="w-3 h-3" />
|
|
</div>
|
|
<span className="text-gray-700 truncate">{c.name}</span>
|
|
</div>
|
|
))}
|
|
{clones.length > 5 && (
|
|
<p className="text-xs text-gray-500">+{clones.length - 5} 个分身</p>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p className="text-xs text-gray-500">
|
|
{connected ? '暂无分身，在左侧栏创建' : '连接后可用'}
|
|
</p>
|
|
)}
|
|
</motion.div>
|
|
|
|
{/* 用量统计 */}
|
|
{usageStats && (
|
|
<motion.div
|
|
whileHover={cardHover}
|
|
transition={defaultTransition}
|
|
className="bg-gray-50 rounded-lg border border-gray-100 p-3"
|
|
>
|
|
<h3 className="text-xs font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
|
|
<BarChart3 className="w-3.5 h-3.5" />
|
|
用量统计
|
|
</h3>
|
|
<div className="space-y-1.5 text-xs">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">总会话数</span>
|
|
<span className="font-medium text-gray-900">{usageStats.totalSessions}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">总消息数</span>
|
|
<span className="font-medium text-gray-900">{usageStats.totalMessages}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">总 Token</span>
|
|
<span className="font-medium text-gray-900">{usageStats.totalTokens.toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* 插件状态 */}
|
|
{pluginStatus.length > 0 && (
|
|
<motion.div
|
|
whileHover={cardHover}
|
|
transition={defaultTransition}
|
|
className="bg-gray-50 rounded-lg border border-gray-100 p-3"
|
|
>
|
|
<h3 className="text-xs font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
|
|
<Plug className="w-3.5 h-3.5" />
|
|
插件 ({pluginStatus.length})
|
|
</h3>
|
|
<div className="space-y-1 text-xs">
|
|
{pluginStatus.map((p: PluginStatus, i: number) => (
|
|
<div key={i} className="flex justify-between">
|
|
<span className="text-gray-600 truncate">{p.name || p.id}</span>
|
|
<span className={p.status === 'active' ? 'text-green-600' : 'text-gray-500'}>
|
|
{p.status === 'active' ? '运行中' : '已停止'}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* 系统信息 */}
|
|
<motion.div
|
|
whileHover={cardHover}
|
|
transition={defaultTransition}
|
|
className="bg-gray-50 rounded-lg border border-gray-100 p-3"
|
|
>
|
|
<h3 className="text-xs font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
|
|
<Cpu className="w-3.5 h-3.5" />
|
|
运行概览
|
|
</h3>
|
|
<div className="space-y-1.5 text-xs">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">连接状态</span>
|
|
<span className="text-gray-700">{runtimeSummary}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">Gateway 版本</span>
|
|
<span className="text-gray-700">{gatewayVersion || '-'}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">已加载分身</span>
|
|
<span className="text-gray-700">{clones.length}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">已加载插件</span>
|
|
<span className="text-gray-700">{pluginStatus.length}</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
function AgentRow({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="flex gap-4">
|
|
<div className="w-16 text-gray-500">{label}</div>
|
|
<div className="flex-1 text-gray-700 break-all">{value}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type AgentDraft = {
|
|
name: string;
|
|
role: string;
|
|
nickname: string;
|
|
model: string;
|
|
scenarios: string;
|
|
workspaceDir: string;
|
|
userName: string;
|
|
userRole: string;
|
|
restrictFiles: boolean;
|
|
privacyOptIn: boolean;
|
|
};
|
|
|
|
function createAgentDraft(
|
|
clone: {
|
|
name: string;
|
|
role?: string;
|
|
nickname?: string;
|
|
model?: string;
|
|
scenarios?: string[];
|
|
workspaceDir?: string;
|
|
userName?: string;
|
|
userRole?: string;
|
|
restrictFiles?: boolean;
|
|
privacyOptIn?: boolean;
|
|
},
|
|
currentModel: string
|
|
): AgentDraft {
|
|
return {
|
|
name: clone.name || '',
|
|
role: clone.role || '',
|
|
nickname: clone.nickname || '',
|
|
model: clone.model || currentModel,
|
|
scenarios: clone.scenarios?.join(', ') || '',
|
|
workspaceDir: clone.workspaceDir || '~/.zclaw/zclaw-workspace',
|
|
userName: clone.userName || '',
|
|
userRole: clone.userRole || '',
|
|
restrictFiles: clone.restrictFiles ?? true,
|
|
privacyOptIn: clone.privacyOptIn ?? false,
|
|
};
|
|
}
|
|
|
|
function AgentInput({
|
|
label,
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
}) {
|
|
return (
|
|
<label className="block">
|
|
<div className="text-xs text-gray-500 mb-1">{label}</div>
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none"
|
|
/>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function AgentToggle({
|
|
label,
|
|
checked,
|
|
onChange,
|
|
}: {
|
|
label: string;
|
|
checked: boolean;
|
|
onChange: (value: boolean) => void;
|
|
}) {
|
|
return (
|
|
<label className="flex items-center justify-between text-sm text-gray-700 border border-gray-100 rounded-lg px-3 py-2">
|
|
<span>{label}</span>
|
|
<input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function formatSnapshotTime(timestamp: string): string {
|
|
const now = Date.now();
|
|
const then = new Date(timestamp).getTime();
|
|
const diff = now - then;
|
|
|
|
if (diff < 60000) return '刚刚';
|
|
if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`;
|
|
if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`;
|
|
if (diff < 604800000) return `${Math.floor(diff / 86400000)} 天前`;
|
|
return new Date(timestamp).toLocaleDateString('zh-CN');
|
|
}
|