@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/browser-agent/src/mainview/components/chat/ToolPicker.tsx

@@ -0,0 +1,115 @@
+/**
+ * ToolPicker — 工具/插件快捷选择栏
+ *
+ * 用户点选工具卡片（可多选），选中的工具以 chip 形式展示在输入框上方。
+ * 发送时，选中的工具列表 + 输入框文本一起发给 Agent。
+ * Agent 根据工具列表自动编排执行顺序。
+ */
+
+import { useState } from "react";
+import { X, Plus } from "lucide-react";
+import { useConnectionStore } from "../../stores/use-connection-store";
+
+/** 内置工具模板（不需要 xbrowser 插件支持） */
+const BUILTIN_TOOLS = [
+	{ id: "scrape", label: "📡 采集页面", hint: "提取当前页面内容转 Markdown" },
+	{ id: "crawl", label: "🕷️ 爬取网站", hint: "批量爬取多个页面" },
+	{ id: "map", label: "🗺️ 网站地图", hint: "发现网站所有 URL" },
+	{ id: "screenshot", label: "📸 截图", hint: "截取当前页面" },
+	{ id: "search", label: "🔍 搜索", hint: "搜索引擎搜索关键词" },
+	{ id: "scrape-xhs", label: "📕 小红书", hint: "采集小红书笔记" },
+];
+
+interface ToolPickerProps {
+	selectedTools: string[];
+	onToggle: (toolId: string) => void;
+	onClear: () => void;
+}
+
+export function ToolPicker({ selectedTools, onToggle, onClear }: ToolPickerProps) {
+	const [expanded, setExpanded] = useState(false);
+	const plugins = useConnectionStore((s) => s.plugins);
+
+	// 合并内置工具 + xbrowser 插件
+	const allTools = [
+		...BUILTIN_TOOLS,
+		...plugins
+			.filter((p) => !BUILTIN_TOOLS.some((b) => b.id === p.name))
+			.map((p) => ({ id: p.name, label: `🧩 ${p.name}`, hint: p.description })),
+	];
+
+	const selectedSet = new Set(selectedTools);
+
+	return (
+		<div className="mb-2">
+			{/* 选中的工具 chips */}
+			{selectedTools.length > 0 && (
+				<div className="flex items-center gap-1 mb-1.5 flex-wrap">
+					{selectedTools.map((toolId) => {
+						const tool = allTools.find((t) => t.id === toolId);
+						return (
+							<span
+								key={toolId}
+								className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-[var(--color-accent)]/15 text-[var(--color-text-accent)] text-xs"
+							>
+								{tool?.label || toolId}
+								<button
+									onClick={() => onToggle(toolId)}
+									className="hover:text-[var(--color-text-error)]"
+								>
+									<X className="w-3 h-3" />
+								</button>
+							</span>
+						);
+					})}
+					<button
+						onClick={onClear}
+						className="text-xs text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]"
+					>
+						清空
+					</button>
+				</div>
+			)}
+
+			{/* 工具选择栏（可展开/收起） */}
+			<div className="flex items-center gap-1 flex-wrap">
+				{expanded ? (
+					<>
+						{allTools.map((tool) => {
+							const isSelected = selectedSet.has(tool.id);
+							return (
+								<button
+									key={tool.id}
+									onClick={() => onToggle(tool.id)}
+									title={tool.hint}
+									className={`px-2.5 py-1 rounded-lg text-xs transition-all ${
+										isSelected
+											? "bg-[var(--color-accent)]/20 text-[var(--color-text-accent)] border border-[var(--color-accent)]/40"
+											: "border border-[var(--color-border-secondary)] text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]"
+									}`}
+								>
+									{tool.label}
+									{isSelected && <span className="ml-1">✓</span>}
+								</button>
+							);
+						})}
+						<button
+							onClick={() => setExpanded(false)}
+							className="px-2 py-1 text-xs text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]"
+						>
+							收起
+						</button>
+					</>
+				) : (
+					<button
+						onClick={() => setExpanded(true)}
+						className="flex items-center gap-1 px-2 py-1 rounded-lg text-xs border border-[var(--color-border-secondary)] text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-primary)] transition-colors"
+					>
+						<Plus className="w-3 h-3" />
+						选择工具{selectedTools.length > 0 ? ` (${selectedTools.length})` : ""}
+					</button>
+				)}
+			</div>
+		</div>
+	);
+}

package/templates/browser-agent/src/mainview/components/common/ErrorBoundary.tsx

@@ -0,0 +1 @@
+export { ErrorBoundary } from "@shared/components/ErrorBoundary";

package/templates/browser-agent/src/mainview/components/common/LanguageSwitcher.tsx

@@ -0,0 +1,15 @@
+import { useLocaleStore } from "../../stores/use-locale-store";
+
+export function LanguageSwitcher() {
+  const { locale, setLocale } = useLocaleStore();
+  return (
+    <button
+      data-testid="language-switcher"
+      onClick={() => setLocale(locale === "en" ? "zh" : "en")}
+      className="px-1.5 py-0.5 rounded text-xs hover:bg-[var(--color-bg-hover)] transition-colors text-[var(--color-text-secondary)]"
+      title={locale === "en" ? "切换到中文" : "Switch to English"}
+    >
+      {locale === "en" ? "中" : "EN"}
+    </button>
+  );
+}

package/templates/browser-agent/src/mainview/components/common/ThemeToggle.tsx

@@ -0,0 +1,45 @@
+import { useThemeStore } from '../../stores/use-theme-store';
+
+export function ThemeToggle() {
+	const theme = useThemeStore((s) => s.theme);
+	const toggleTheme = useThemeStore((s) => s.toggleTheme);
+
+	return (
+		<button
+			data-testid="theme-toggle"
+			onClick={toggleTheme}
+			className="p-1.5 rounded-md hover:bg-[var(--color-bg-hover)] transition-colors"
+			title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+		>
+			{theme === 'dark' ? (
+				<svg
+					className="w-4 h-4 text-yellow-400"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					strokeWidth={2}
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+					/>
+				</svg>
+			) : (
+				<svg
+					className="w-4 h-4 text-[var(--color-text-tertiary)]"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					strokeWidth={2}
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+					/>
+				</svg>
+			)}
+		</button>
+	);
+}

package/templates/browser-agent/src/mainview/components/common/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+vi.mock("../../../lib/i18n", () => ({
+  default: {
+    isInitialized: true,
+    language: "en",
+    changeLanguage: vi.fn(),
+    t: (key: string) => key,
+    getResource: vi.fn(),
+  },
+  supportedLocales: ["en", "zh"],
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: "en", changeLanguage: vi.fn() },
+  }),
+  initReactI18next: { type: "3rdParty", init: vi.fn() },
+}));
+
+describe("ErrorBoundary", () => {
+  it("should render children when no error", async () => {
+    const { ErrorBoundary } = await import("../ErrorBoundary");
+    render(
+      <ErrorBoundary>
+        <div>Normal content</div>
+      </ErrorBoundary>
+    );
+    expect(screen.getByText("Normal content")).toBeDefined();
+  });
+
+  it("should render fallback UI when child throws", async () => {
+    const { ErrorBoundary } = await import("../ErrorBoundary");
+
+    const ThrowingComponent = () => {
+      throw new Error("Test error");
+    };
+
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    render(
+      <ErrorBoundary>
+        <ThrowingComponent />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText(/something went wrong/i)).toBeDefined();
+
+    spy.mockRestore();
+  });
+
+  it("should show retry button in error state", async () => {
+    const { ErrorBoundary } = await import("../ErrorBoundary");
+
+    const ThrowingComponent = () => {
+      throw new Error("Test error");
+    };
+
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    render(
+      <ErrorBoundary>
+        <ThrowingComponent />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByRole("button", { name: /retry/i })).toBeDefined();
+
+    spy.mockRestore();
+  });
+});

package/templates/browser-agent/src/mainview/components/common/__tests__/LanguageSwitcher.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import React from "react";
+
+const mockSetLocale = vi.fn();
+
+vi.mock("../../stores/use-locale-store", () => ({
+  useLocaleStore: (selector: (s: any) => any) =>
+    selector({ locale: "en", setLocale: mockSetLocale }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+describe("LanguageSwitcher", () => {
+  afterEach(cleanup);
+
+  it("should render a button", async () => {
+    const { LanguageSwitcher } = await import("../LanguageSwitcher");
+    render(<LanguageSwitcher />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("should show '中' when locale is en", async () => {
+    const { LanguageSwitcher } = await import("../LanguageSwitcher");
+    render(<LanguageSwitcher />);
+    expect(screen.getByText("中")).toBeInTheDocument();
+  });
+
+  it("should have title 切换到中文 for en locale", async () => {
+    const { LanguageSwitcher } = await import("../LanguageSwitcher");
+    render(<LanguageSwitcher />);
+    expect(screen.getByRole("button")).toHaveAttribute("title", "切换到中文");
+  });
+
+  it("should display locale-specific text content", async () => {
+    const { LanguageSwitcher } = await import("../LanguageSwitcher");
+    render(<LanguageSwitcher />);
+    const button = screen.getByRole("button");
+    expect(button.textContent).toBe("中");
+    expect(button.className).toContain("rounded");
+  });
+});

package/templates/browser-agent/src/mainview/components/common/__tests__/ThemeToggle.test.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import React from "react";
+
+const mockToggle = vi.fn();
+
+vi.mock("../../stores/use-theme-store", () => ({
+  useThemeStore: (selector: (s: any) => any) =>
+    selector({ theme: "dark", toggleTheme: mockToggle }),
+}));
+
+describe("ThemeToggle", () => {
+  afterEach(cleanup);
+
+  it("should render a button", async () => {
+    const { ThemeToggle } = await import("../ThemeToggle");
+    render(<ThemeToggle />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("should show sun icon for dark theme", async () => {
+    const { ThemeToggle } = await import("../ThemeToggle");
+    const { container } = render(<ThemeToggle />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+    expect(svg!.getAttribute("class")).toContain("text-yellow-400");
+  });
+
+  it("should have title Switch to light mode for dark theme", async () => {
+    const { ThemeToggle } = await import("../ThemeToggle");
+    render(<ThemeToggle />);
+    expect(screen.getByRole("button")).toHaveAttribute("title", "Switch to light mode");
+  });
+
+  it("should render SVG element inside button", async () => {
+    const { ThemeToggle } = await import("../ThemeToggle");
+    const { container } = render(<ThemeToggle />);
+    const button = container.querySelector("button");
+    expect(button!.querySelector("svg")).toBeInTheDocument();
+  });
+});

package/templates/browser-agent/src/mainview/components/dev/NetworkPanel.tsx

@@ -0,0 +1,155 @@
+/**
+ * Network Panel — live RPC/SSE communication feed.
+ *
+ * - NetworkToggleButton: goes in the TopBar (icon with activity badge).
+ * - NetworkDrawer: rendered in AppLayout, shows the live log feed.
+ *
+ * Data comes from the networkBus (populated by api-client). Solves the
+ * "I can't see any network activity" problem with the old silent WebSocket.
+ */
+
+import { useState, useEffect, useRef } from "react";
+import { Activity, ChevronDown, Trash2 } from "lucide-react";
+import { networkBus, type NetworkLogEntry } from "../../lib/network-bus";
+import { useNetworkPanelStore } from "../../stores/use-network-panel-store";
+
+const KIND_STYLES: Record<NetworkLogEntry["kind"], { color: string; icon: string }> = {
+	request: { color: "var(--color-text-accent)", icon: "→" },
+	response: { color: "var(--color-text-success)", icon: "←" },
+	event: { color: "var(--color-text-secondary)", icon: "⚡" },
+	status: { color: "var(--color-text-tertiary)", icon: "•" },
+};
+
+function formatTime(ts: number): string {
+	const d = new Date(ts);
+	return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}:${String(d.getSeconds()).padStart(2, "0")}.${String(d.getMilliseconds()).padStart(3, "0").slice(0, 2)}`;
+}
+
+/** Toggle button — place in TopBar */
+export function NetworkToggleButton() {
+	const open = useNetworkPanelStore((s) => s.open);
+	const toggle = useNetworkPanelStore((s) => s.toggle);
+	const [count, setCount] = useState(0);
+
+	useEffect(() => {
+		setCount(networkBus.getEntries().length);
+		const unsub = networkBus.subscribe(() => {
+			setCount((c) => c + 1);
+		});
+		return unsub;
+	}, []);
+
+	return (
+		<button
+			onClick={toggle}
+			title="网络通讯面板"
+			className={`relative text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)] transition-colors p-1 rounded hover:bg-[var(--color-bg-hover)] ${
+				open ? "text-[var(--color-text-accent)] bg-[var(--color-bg-hover)]" : ""
+			}`}
+		>
+			<Activity className="w-4 h-4" />
+			{count > 0 && !open && (
+				<span className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-[var(--color-accent)] animate-pulse" />
+			)}
+		</button>
+	);
+}
+
+/** Drawer — place in AppLayout bottom */
+export function NetworkDrawer() {
+	const open = useNetworkPanelStore((s) => s.open);
+	const setOpen = useNetworkPanelStore((s) => s.setOpen);
+	const [entries, setEntries] = useState<NetworkLogEntry[]>([]);
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const autoScroll = useRef(true);
+
+	useEffect(() => {
+		setEntries(networkBus.getEntries());
+		const unsub = networkBus.subscribe((entry) => {
+			setEntries((prev) => [...prev.slice(-199), entry]);
+		});
+		return unsub;
+	}, []);
+
+	useEffect(() => {
+		if (!open || !autoScroll.current || !scrollRef.current) return;
+		scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+	}, [entries, open]);
+
+	const handleScroll = (): void => {
+		if (!scrollRef.current) return;
+		const el = scrollRef.current;
+		autoScroll.current = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+	};
+
+	if (!open) return null;
+
+	return (
+		<div className="h-56 bg-[var(--color-bg-sidebar)] border-t border-[var(--color-border-primary)] flex flex-col z-30 shadow-lg flex-shrink-0">
+			{/* Header */}
+			<div className="flex items-center justify-between px-3 py-1.5 border-b border-[var(--color-border-primary)] bg-[var(--color-bg-secondary)]">
+				<div className="flex items-center gap-2 text-xs font-medium">
+					<Activity className="w-3 h-3 text-[var(--color-text-accent)]" />
+					<span>网络通讯 ({entries.length})</span>
+					<span className="text-[var(--color-text-tertiary)] font-normal ml-2">
+						POST /api/rpc · SSE /api/events
+					</span>
+				</div>
+				<div className="flex items-center gap-1">
+					<button
+						onClick={() => setEntries([])}
+						title="清空"
+						className="text-[var(--color-text-placeholder)] hover:text-[var(--color-text-error)] p-1"
+					>
+						<Trash2 className="w-3 h-3" />
+					</button>
+					<button
+						onClick={() => setOpen(false)}
+						title="收起"
+						className="text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)] p-1"
+					>
+						<ChevronDown className="w-3 h-3" />
+					</button>
+				</div>
+			</div>
+
+			{/* Entries */}
+			<div
+				ref={scrollRef}
+				onScroll={handleScroll}
+				className="flex-1 overflow-auto font-mono text-[11px] leading-relaxed"
+			>
+				{entries.length === 0 ? (
+					<div className="text-center text-[var(--color-text-tertiary)] py-8">
+						等待通讯…发送消息后会在这里看到 RPC 请求和 SSE 事件
+					</div>
+				) : (
+					entries.map((entry) => {
+						const style = KIND_STYLES[entry.kind];
+						return (
+							<div
+								key={entry.id}
+								className="flex items-start gap-2 px-3 py-0.5 hover:bg-[var(--color-bg-hover)] border-b border-[var(--color-border-secondary)]"
+							>
+								<span className="text-[var(--color-text-tertiary)] flex-shrink-0">
+									{formatTime(entry.time)}
+								</span>
+								<span style={{ color: style.color }} className="flex-shrink-0 w-4">
+									{style.icon}
+								</span>
+								<span className="text-[var(--color-text-primary)] break-all">
+									{entry.label}
+									{entry.detail && (
+										<span className="text-[var(--color-text-tertiary)] ml-1">
+											{entry.detail}
+										</span>
+									)}
+								</span>
+							</div>
+						);
+					})
+				)}
+			</div>
+		</div>
+	);
+}