@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/browser-agent/src/mainview/components/process/ProcessPanel.tsx

@@ -0,0 +1,329 @@
+/**
+ * ProcessPanel — 加工面板（录制结果 + Agent 加工）
+ *
+ * 展示录制摘要、操作时间线，触发 Agent 加工分析。
+ * 独立于会话，不混入聊天列表。
+ */
+
+import { useState, useCallback } from "react";
+import {
+	Cpu,
+	Clock,
+	MousePointerClick,
+	Network,
+	FileText,
+	Loader2,
+	CheckCircle2,
+	Camera,
+	ChevronDown,
+	ChevronRight,
+} from "lucide-react";
+import { useRecordStore } from "../../stores/use-record-store";
+import { useSessionStore } from "../../stores/use-session-store";
+import { useConnectionStore } from "../../stores/use-connection-store";
+import { apiClient } from "../../lib/api-client";
+
+const ACTION_ICONS: Record<string, string> = {
+	click: "👆", input: "⌨️", change: "📝", keydown: "🔑",
+	submit: "✅", scroll: "⬇️", navigation: "🧭", goto: "🧭",
+	dblclick: "👆👆", contextmenu: "🖱️", hover: "💡", drag: "🎯",
+};
+
+export function ProcessPanel() {
+	// ===== 所有 Hooks 必须在早期 return 之前声明 =====
+	const [expandedAction, setExpandedAction] = useState<number | null>(null);
+	const [capturing, setCapturing] = useState<number | null>(null);
+	const [screenshots, setScreenshots] = useState<Record<number, string>>({});
+	const [fullScreenshot, setFullScreenshot] = useState<string | null>(null);
+	const [capturingFull, setCapturingFull] = useState(false);
+
+	const captureActionScreenshot = useCallback(async (actionIndex: number) => {
+		setCapturing(actionIndex);
+		try {
+			const tabIdx = useConnectionStore.getState().selectedTabIndex ?? useConnectionStore.getState().activeTabIndex;
+			const cmd = `screenshot${tabIdx !== undefined ? ` --tab ${tabIdx}` : ''}`;
+			const result = await apiClient.call("browser.execXbrowser", { command: cmd });
+			if (result.data?.data) {
+				setScreenshots(prev => ({ ...prev, [actionIndex]: result.data.data }));
+			}
+		} catch (err) {
+			console.warn("截图失败:", err);
+		} finally {
+			setCapturing(null);
+		}
+	}, []);
+
+	const captureFullScreenshot = useCallback(async () => {
+		setCapturingFull(true);
+		try {
+			const tabIdx = useConnectionStore.getState().selectedTabIndex ?? useConnectionStore.getState().activeTabIndex;
+			const cmd = `screenshot --full-page${tabIdx !== undefined ? ` --tab ${tabIdx}` : ''}`;
+			const result = await apiClient.call("browser.execXbrowser", { command: cmd });
+			if (result.data?.data) {
+				setFullScreenshot(result.data.data);
+			}
+		} catch (err) {
+			console.warn("全页截图失败:", err);
+		} finally {
+			setCapturingFull(false);
+		}
+	}, []);
+
+	const lastRecording = useRecordStore((s) => s.lastRecording);
+	const ensureDefaultSession = useSessionStore((s) => s.ensureDefaultSession);
+	const [analyzing, setAnalyzing] = useState(false);
+	const [result, setResult] = useState<string | null>(null);
+	const [thinking, setThinking] = useState("");
+
+	const handleProcess = useCallback(async () => {
+		if (!lastRecording) return;
+		setAnalyzing(true);
+		setResult(null);
+		setThinking("");
+		try {
+			const sessionId = await ensureDefaultSession();
+			const messageId = `proc_${Date.now()}`;
+			const subs: string[] = [];
+			subs.push(
+				await apiClient.subscribe("browser.thinking", (evt: any) => {
+					if (evt.messageId === messageId) setThinking((prev) => prev + (evt.delta || ""));
+				}),
+			);
+			subs.push(
+				await apiClient.subscribe("browser.textDelta", (evt: any) => {
+					if (evt.messageId === messageId) setResult((prev) => (prev || "") + (evt.delta || ""));
+				}),
+			);
+			subs.push(
+				await apiClient.subscribe("browser.done", (evt: any) => {
+					if (evt.messageId === messageId) { setResult(evt.reply || ""); setAnalyzing(false); }
+				}),
+			);
+			await new Promise((r) => setTimeout(r, 300));
+			const res = await apiClient.call("browser.processRecording", { sessionId, recordingData: lastRecording.data, title: "录制加工" });
+			if (!result && res?.text) setResult(res.text);
+			setAnalyzing(false);
+			subs.forEach((id) => apiClient.unsubscribe(id));
+		} catch (err) {
+			setResult(`❌ 加工失败: ${err instanceof Error ? err.message : String(err)}`);
+			setAnalyzing(false);
+		}
+	}, [lastRecording, ensureDefaultSession, result]);
+
+	// ===== 无录制数据时的空状态 =====
+	if (!lastRecording) {
+		return (
+			<div className="flex-1 flex items-center justify-center text-center p-8">
+				<div>
+					<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-[var(--color-bg-tertiary)] mb-4">
+						<Cpu className="w-8 h-8 text-[var(--color-text-tertiary)]" />
+					</div>
+					<h3 className="text-lg font-semibold mb-2">暂无录制数据</h3>
+					<p className="text-sm text-[var(--color-text-tertiary)] max-w-sm">
+						点击顶栏的录制按钮，在浏览器中操作后停止录制，
+						录制结果会显示在这里，可以交给 Agent 加工分析。
+					</p>
+				</div>
+			</div>
+		);
+	}
+
+	// ===== 有录制数据 =====
+	const durationSec = Math.round(lastRecording.durationMs / 1000);
+	const rawActions = lastRecording.data?.actions;
+	const rawNetworks = lastRecording.data?.network;
+	const actions = Array.isArray(rawActions) ? rawActions : (Array.isArray(lastRecording.data?.data?.actions) ? lastRecording.data.data.actions : []);
+	const networks = Array.isArray(rawNetworks) ? rawNetworks : (Array.isArray(lastRecording.data?.data?.network) ? lastRecording.data.data.network : []);
+
+
+	return (
+		<div className="flex-1 overflow-auto p-4">
+			{/* 录制摘要卡片 */}
+			<div className="bg-[var(--color-bg-sidebar)] border border-[var(--color-border-primary)] rounded-xl p-4 mb-4">
+				<div className="flex items-center justify-between mb-3">
+					<h3 className="text-sm font-semibold flex items-center gap-2">
+						<CheckCircle2 className="w-4 h-4 text-[var(--color-text-success)]" />
+						录制完成
+					</h3>
+					<button
+						onClick={handleProcess}
+						disabled={analyzing}
+						className="px-4 py-1.5 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded-lg transition-colors disabled:opacity-50 flex items-center gap-1.5"
+					>
+						{analyzing ? <Loader2 className="w-3 h-3 animate-spin" /> : <Cpu className="w-3 h-3" />}
+						{analyzing ? "加工中..." : "Agent 加工"}
+					</button>
+				</div>
+				<div className="grid grid-cols-4 gap-3 text-center">
+					<div className="p-2 bg-[var(--color-bg-tertiary)] rounded-lg">
+						<MousePointerClick className="w-4 h-4 text-[var(--color-text-accent)] mx-auto mb-1" />
+						<div className="text-lg font-bold">{actions.length || lastRecording.actions}</div>
+						<div className="text-[10px] text-[var(--color-text-tertiary)]">操作数</div>
+					</div>
+					<div className="p-2 bg-[var(--color-bg-tertiary)] rounded-lg">
+						<Network className="w-4 h-4 text-[var(--color-text-accent)] mx-auto mb-1" />
+						<div className="text-lg font-bold">{networks.length || lastRecording.network}</div>
+						<div className="text-[10px] text-[var(--color-text-tertiary)]">网络请求</div>
+					</div>
+					<div className="p-2 bg-[var(--color-bg-tertiary)] rounded-lg">
+						<Clock className="w-4 h-4 text-[var(--color-text-accent)] mx-auto mb-1" />
+						<div className="text-lg font-bold">{durationSec}s</div>
+						<div className="text-[10px] text-[var(--color-text-tertiary)]">耗时</div>
+					</div>
+					<div className="p-2 bg-[var(--color-bg-tertiary)] rounded-lg">
+						<FileText className="w-4 h-4 text-[var(--color-text-accent)] mx-auto mb-1" />
+						<div className="text-lg font-bold">{lastRecording.steps}</div>
+						<div className="text-[10px] text-[var(--color-text-tertiary)]">步骤</div>
+					</div>
+				</div>
+			</div>
+
+			{/* 操作时间线 */}
+			{actions.length > 0 && (
+				<div className="bg-[var(--color-bg-sidebar)] border border-[var(--color-border-primary)] rounded-xl p-4 mb-4">
+					<div className="flex items-center justify-between mb-3">
+						<h4 className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wide">
+							📋 操作时间线 ({actions.length})
+						</h4>
+						<button
+							onClick={captureFullScreenshot}
+							disabled={capturingFull}
+							className="px-2 py-1 text-[10px] border border-[var(--color-border-secondary)] rounded hover:bg-[var(--color-bg-hover)] flex items-center gap-1"
+						>
+							<Camera className={`w-3 h-3 ${capturingFull ? "animate-pulse" : ""}`} />
+							{capturingFull ? "截取中..." : "📸 全页截图"}
+						</button>
+					</div>
+
+					{fullScreenshot && (
+						<div className="mb-3">
+							<img src={`data:image/png;base64,${fullScreenshot}`} alt="页面截图"
+								className="w-full rounded-lg border border-[var(--color-border-secondary)] max-h-48 object-cover" />
+						</div>
+					)}
+
+					<div className="space-y-1 max-h-96 overflow-auto">
+						{actions.slice(0, 50).map((action: any, i: number) => {
+							const type = action.type || action.action?.type || "unknown";
+							const selector = action.element?.selector || action.action?.element?.selector || "";
+							const value = action.value || action.action?.value || "";
+							const url = action.url || action.action?.url || "";
+							const tag = action.element?.tag || action.action?.element?.tag || "";
+							const text = action.element?.text || action.action?.element?.text || "";
+							const x = action.x || action.action?.x;
+							const y = action.y || action.action?.y;
+							const ts = action.timestamp || 0;
+							const baseTs = actions[0]?.timestamp || ts;
+							const elapsed = ts - baseTs;
+							const icon = ACTION_ICONS[type] || "•";
+							const isExpanded = expandedAction === i;
+							const hasScreenshot = screenshots[i];
+
+							return (
+								<div key={i}>
+									<div
+										className={`flex items-center gap-2 px-2 py-1.5 text-xs hover:bg-[var(--color-bg-hover)] rounded cursor-pointer ${isExpanded ? "bg-[var(--color-bg-tertiary)]" : ""}`}
+										onClick={() => setExpandedAction(isExpanded ? null : i)}
+									>
+										<span className="flex-shrink-0 w-5 text-center text-sm">{icon}</span>
+										<span className="text-[var(--color-text-tertiary)] font-mono w-6">#{i + 1}</span>
+										<span className="font-mono text-[var(--color-text-accent)] w-16">{type}</span>
+										{elapsed > 0 && <span className="text-[var(--color-text-tertiary)] font-mono w-12">+{fmt(elapsed)}</span>}
+										<span className="text-[var(--color-text-secondary)] truncate flex-1">
+											{selector ? selector.slice(0, 50) : tag}
+											{value && <span className="ml-1 text-[var(--color-text-tertiary)]">={value.slice(0, 20)}</span>}
+										</span>
+										{isExpanded ? <ChevronDown className="w-3 h-3 text-[var(--color-text-tertiary)]" /> : <ChevronRight className="w-3 h-3 text-[var(--color-text-tertiary)]" />}
+									</div>
+
+									{isExpanded && (
+										<div className="ml-8 mb-2 p-3 bg-[var(--color-bg-tertiary)] rounded-lg space-y-2">
+											<div className="grid grid-cols-2 gap-2 text-[11px]">
+												{selector && <D label="选择器" v={selector} />}
+												{value && <D label="值" v={value} />}
+												{tag && <D label="标签" v={tag} />}
+												{text && <D label="文本" v={text} />}
+												{url && <D label="URL" v={url} />}
+												{x !== undefined && y !== undefined && <D label="坐标" v={`(${x},${y})`} />}
+												<D label="时间" v={new Date(ts).toLocaleTimeString()} />
+												<D label="耗时" v={`+${fmt(elapsed)}`} />
+											</div>
+											{hasScreenshot ? (
+												<div>
+													<img src={`data:image/png;base64,${hasScreenshot}`} alt={`步骤${i+1}`}
+														className="w-full rounded border border-[var(--color-border-secondary)] max-h-40 object-cover" />
+												</div>
+											) : (
+												<button onClick={() => captureActionScreenshot(i)} disabled={capturing === i}
+													className="flex items-center gap-1 px-2 py-1 text-[10px] border rounded hover:bg-[var(--color-bg-hover)]">
+													<Camera className={`w-3 h-3 ${capturing === i ? "animate-pulse" : ""}`} />
+													{capturing === i ? "截取中..." : "📸 截图此元素"}
+												</button>
+											)}
+										</div>
+									)}
+								</div>
+							);
+						})}
+						{actions.length > 50 && <div className="text-center text-xs text-[var(--color-text-tertiary)] py-1">还有 {actions.length - 50} 条</div>}
+					</div>
+				</div>
+			)}
+
+			{/* 网络请求时间线 */}
+			{actions.length === 0 && networks.length > 0 && (
+				<div className="bg-[var(--color-bg-sidebar)] border border-[var(--color-border-primary)] rounded-xl p-4 mb-4">
+					<h4 className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wide mb-3">🌐 网络请求 ({networks.length})</h4>
+					<div className="space-y-1 max-h-64 overflow-auto">
+						{networks.slice(0, 30).map((n: any, i: number) => (
+							<div key={i} className="flex items-center gap-2 px-2 py-1 text-xs hover:bg-[var(--color-bg-hover)] rounded">
+								<span className="flex-shrink-0 px-1.5 py-0.5 rounded text-[10px] font-mono bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)]">{n.method || 'GET'}</span>
+								<span className="text-[var(--color-text-secondary)] truncate flex-1">{n.path || n.url}</span>
+								<span className="flex-shrink-0 text-[var(--color-text-tertiary)]">{n.status || '—'}</span>
+							</div>
+						))}
+						{networks.length > 30 && <div className="text-center text-xs text-[var(--color-text-tertiary)] py-1">还有 {networks.length - 30} 个</div>}
+					</div>
+				</div>
+			)}
+
+			{/* Agent 思考过程 */}
+			{thinking && (
+				<details className="mb-4 text-xs text-[var(--color-text-tertiary)]" open>
+					<summary className="cursor-pointer mb-1">💭 Agent 思考中...</summary>
+					<div className="p-2 bg-[var(--color-bg-tertiary)] rounded-lg whitespace-pre-wrap max-h-40 overflow-auto">{thinking.slice(-1000)}</div>
+				</details>
+			)}
+
+			{/* 加工结果 */}
+			{result && (
+				<div className="bg-[var(--color-bg-sidebar)] border border-[var(--color-accent)]/30 rounded-xl p-4">
+					<h4 className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wide mb-2">加工结果</h4>
+					<div className="text-sm leading-relaxed whitespace-pre-wrap">{result}</div>
+				</div>
+			)}
+
+			{analyzing && !result && !thinking && (
+				<div className="text-center py-8 text-sm text-[var(--color-text-tertiary)]">
+					<Loader2 className="w-6 h-6 animate-spin mx-auto mb-2" />
+					Agent 正在分析录制数据...
+				</div>
+			)}
+		</div>
+	);
+}
+
+// ===== 详情项 =====
+function D({ label, v }: { label: string; v: string }) {
+	return (
+		<div className="flex flex-col">
+			<span className="text-[var(--color-text-tertiary)] text-[10px]">{label}</span>
+			<span className="text-[var(--color-text-primary)] font-mono text-xs break-all">{v}</span>
+		</div>
+	);
+}
+
+function fmt(ms: number): string {
+	if (ms < 1000) return `${ms}ms`;
+	return `${(ms / 1000).toFixed(1)}s`;
+}

package/templates/browser-agent/src/mainview/components/sidebar/SessionSidebar.tsx

@@ -0,0 +1,122 @@
+/**
+ * 会话侧栏 — 历史会话列表
+ *
+ * 支持两种模式：完整（带区块折叠）+ 图标条（collapsed）
+ */
+
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Plus, MessagesSquare } from "lucide-react";
+import { useSessionStore } from "../../stores/use-session-store";
+import { useSidebarStore } from "../../stores/use-sidebar-store";
+
+interface SessionSidebarProps {
+	/** 图标条模式 */
+	collapsed?: boolean;
+}
+
+export function SessionSidebar({ collapsed }: SessionSidebarProps) {
+	const { t } = useTranslation();
+	const sessions = useSessionStore((s) => s.sessions);
+	const currentSessionId = useSessionStore((s) => s.currentSessionId);
+	const refreshSessions = useSessionStore((s) => s.refreshSessions);
+	const newSessionSmart = useSessionStore((s) => s.newSessionSmart);
+	const loadSession = useSessionStore((s) => s.loadSession);
+
+	const sectionCollapsed = useSidebarStore((s) => s.collapsedSections.has("sessions"));
+	const toggleSection = useSidebarStore((s) => s.toggleSection);
+
+	useEffect(() => {
+		refreshSessions();
+	}, []);
+
+	const handleNewSession = async () => {
+		await newSessionSmart();
+	};
+
+	const handleSwitchSession = async (id: string) => {
+		await loadSession(id);
+	};
+
+	// ── 图标条模式：只显示会话入口图标 + 新建按钮 ──
+	if (collapsed) {
+		return (
+			<div className="p-2 flex flex-col items-center gap-1">
+				<button
+					onClick={handleNewSession}
+					title={t("session.new")}
+					className="w-10 h-10 flex items-center justify-center rounded-lg bg-[var(--color-accent)]/15 text-[var(--color-text-accent)] hover:bg-[var(--color-accent)]/25 active:scale-95 transition-all"
+				>
+					<Plus className="w-4 h-4" />
+				</button>
+				<div className="w-6 h-px bg-[var(--color-border-secondary)] my-1" />
+				{sessions.slice(0, 8).map((s) => (
+					<button
+						key={s.id}
+						onClick={() => handleSwitchSession(s.id)}
+						title={s.title}
+						className={`w-10 h-8 flex items-center justify-center rounded-lg text-xs font-medium transition-all active:scale-95 ${
+							s.id === currentSessionId
+								? "bg-[var(--color-bg-active)] text-[var(--color-text-primary)]"
+								: "text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-primary)]"
+						}`}
+					>
+						{(s.title || "?").charAt(0).toUpperCase()}
+					</button>
+				))}
+				{sessions.length === 0 && (
+					<div title="暂无会话" className="w-10 h-8 flex items-center justify-center text-[var(--color-text-placeholder)]">
+						<MessagesSquare className="w-4 h-4 opacity-50" />
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	// ── 完整模式：带 section header 可折叠 ──
+	return (
+		<div className="p-2">
+			<div className="flex items-center justify-between px-2 mb-1">
+				<button
+					onClick={() => toggleSection("sessions")}
+					className="flex items-center gap-1 text-xs font-semibold text-[var(--color-text-secondary)] uppercase tracking-wider hover:text-[var(--color-text-primary)] transition-colors"
+				>
+					<span className="text-[10px]">{sectionCollapsed ? "▸" : "▾"}</span>
+					历史会话
+				</button>
+				<button
+					onClick={handleNewSession}
+					className="p-1 rounded hover:bg-[var(--color-bg-hover)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]"
+					title={t("session.new")}
+				>
+					<Plus className="w-3.5 h-3.5" />
+				</button>
+			</div>
+			{!sectionCollapsed && (
+				<div className="space-y-0.5">
+					{sessions.map((s) => (
+						<button
+							key={s.id}
+							onClick={() => handleSwitchSession(s.id)}
+							className={`w-full text-left px-3 py-1.5 rounded text-sm transition-colors ${
+								s.id === currentSessionId
+									? "bg-[var(--color-bg-active)] text-[var(--color-text-primary)]"
+									: "hover:bg-[var(--color-bg-hover)] text-[var(--color-text-secondary)]"
+							}`}
+						>
+							<div className="truncate">{s.title}</div>
+							<div className="text-xs text-[var(--color-text-tertiary)]">
+								{s.messageCount} 条消息
+							</div>
+						</button>
+					))}
+					{sessions.length === 0 && (
+						<div className="px-3 py-2 text-xs text-[var(--color-text-tertiary)]">
+							暂无会话
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}

package/templates/browser-agent/src/mainview/components/sidebar/SkillSidebar.tsx

@@ -0,0 +1,115 @@
+/**
+ * 技能侧栏 — 内置采集技能列表
+ *
+ * 点击技能 → 创建会话 → 触发 Agent 对话（带流式订阅）
+ * 支持两种模式：完整（带区块折叠）+ 图标条（collapsed）
+ */
+
+import { useSessionStore } from "../../stores/use-session-store";
+import { useAgentChat } from "../../hooks/use-agent-chat";
+import { useSidebarStore } from "../../stores/use-sidebar-store";
+
+interface SkillSidebarProps {
+	/** 图标条模式：只显示技能图标，hover 显示名称 */
+	collapsed?: boolean;
+}
+
+const BUILTIN_SKILLS = [
+	{
+		id: "xhs-explore",
+		name: "小红书首页采集",
+		icon: "📕",
+		description: "采集小红书首页推荐笔记",
+		prompt: "采集小红书首页热门笔记",
+	},
+	{
+		id: "xhs-search",
+		name: "关键词搜索采集",
+		icon: "🔍",
+		description: "搜索指定关键词的小红书笔记",
+		prompt: "搜索小红书关于美妆的笔记",
+	},
+	{
+		id: "xhs-blogger",
+		name: "博主主页采集",
+		icon: "👤",
+		description: "采集小红书博主主页的全部笔记",
+		prompt: "采集这个小红书博主的主页内容",
+	},
+];
+
+export function SkillSidebar({ collapsed }: SkillSidebarProps) {
+	const running = useSessionStore((s) => s.running);
+	const newSessionSmart = useSessionStore((s) => s.newSessionSmart);
+	const currentSessionId = useSessionStore((s) => s.currentSessionId);
+	const { chat } = useAgentChat();
+
+	const sectionCollapsed = useSidebarStore((s) => s.collapsedSections.has("skills"));
+	const toggleSection = useSidebarStore((s) => s.toggleSection);
+
+	const runSkill = async (skill: (typeof BUILTIN_SKILLS)[0]): Promise<void> => {
+		if (running) return;
+
+		// 智能创建会话（空会话复用）
+		const sessionId = currentSessionId || (await newSessionSmart());
+
+		// 触发 Agent 对话（useAgentChat 内部会订阅流式事件）
+		await chat(skill.prompt, sessionId, ["xiaohongshu"]);
+	};
+
+	// ── 图标条模式：只显示技能图标 ──
+	if (collapsed) {
+		return (
+			<div className="p-2 flex flex-col items-center gap-1">
+				{BUILTIN_SKILLS.map((skill) => (
+					<button
+						key={skill.id}
+						onClick={() => runSkill(skill)}
+						disabled={running}
+						title={skill.name}
+						className="w-10 h-10 flex items-center justify-center text-xl rounded-lg hover:bg-[var(--color-bg-hover)] active:scale-95 transition-all disabled:opacity-50"
+					>
+						{skill.icon}
+					</button>
+				))}
+			</div>
+		);
+	}
+
+	// ── 完整模式：带 section header 可折叠 ──
+	return (
+		<div className="p-2">
+			<button
+				onClick={() => toggleSection("skills")}
+				className="w-full flex items-center gap-1 px-2 mb-1 text-xs font-semibold text-[var(--color-text-secondary)] uppercase tracking-wider hover:text-[var(--color-text-primary)] transition-colors"
+			>
+				<span className="text-[10px]">{sectionCollapsed ? "▸" : "▾"}</span>
+				技能库
+			</button>
+			{!sectionCollapsed && (
+				<div className="space-y-1">
+					{BUILTIN_SKILLS.map((skill) => (
+						<button
+							key={skill.id}
+							onClick={() => runSkill(skill)}
+							disabled={running}
+							className="w-full text-left px-3 py-2 rounded-lg hover:bg-[var(--color-bg-hover)] transition-colors disabled:opacity-50"
+						>
+							<div className="flex items-center gap-2">
+								<span className="text-lg">{skill.icon}</span>
+								<div className="flex-1 min-w-0">
+									<div className="text-sm font-medium truncate">
+										{skill.name}
+									</div>
+									<div className="text-xs text-[var(--color-text-tertiary)] truncate">
+										{skill.description}
+									</div>
+								</div>
+							</div>
+						</button>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}