@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/browser-agent/src/mainview/__tests__/hooks/use-sidebar-resize.test.ts

@@ -0,0 +1,127 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useSidebarStore } from "../../stores/use-sidebar-store";
+
+describe("useSidebarResize", () => {
+  beforeEach(() => {
+    act(() => {
+      useSidebarStore.setState({
+        sidebarWidth: 280,
+        isPinned: true,
+        activePanel: "explorer",
+        breakpoint: "desktop",
+        drawerOpen: false,
+      });
+    });
+  });
+
+  it("should return current sidebar width", async () => {
+    const { useSidebarResize } = await import("../../hooks/use-sidebar-resize");
+    const { result } = renderHook(() => useSidebarResize());
+    expect(result.current.sidebarWidth).toBe(280);
+  });
+
+  it("should provide handleResizeStart function", async () => {
+    const { useSidebarResize } = await import("../../hooks/use-sidebar-resize");
+    const { result } = renderHook(() => useSidebarResize());
+    expect(typeof result.current.handleResizeStart).toBe("function");
+  });
+
+  it("should update width on mouse drag", async () => {
+    const { useSidebarResize } = await import("../../hooks/use-sidebar-resize");
+    const { result } = renderHook(() => useSidebarResize());
+
+    const mouseDownEvent = new MouseEvent("mousedown", {
+      clientX: 280,
+      bubbles: true,
+    });
+    Object.defineProperty(mouseDownEvent, "preventDefault", {
+      value: vi.fn(),
+    });
+
+    act(() => {
+      result.current.handleResizeStart(mouseDownEvent);
+    });
+
+    const moveEvent = new MouseEvent("mousemove", {
+      clientX: 330,
+      bubbles: true,
+    });
+
+    act(() => {
+      window.dispatchEvent(moveEvent);
+    });
+
+    expect(useSidebarStore.getState().sidebarWidth).toBe(330);
+
+    const upEvent = new MouseEvent("mouseup");
+    act(() => {
+      window.dispatchEvent(upEvent);
+    });
+  });
+
+  it("should clean up cursor and listeners on mouseup", async () => {
+    const { useSidebarResize } = await import("../../hooks/use-sidebar-resize");
+    const { result } = renderHook(() => useSidebarResize());
+
+    const mouseDownEvent = new MouseEvent("mousedown", {
+      clientX: 280,
+      bubbles: true,
+    });
+    Object.defineProperty(mouseDownEvent, "preventDefault", {
+      value: vi.fn(),
+    });
+
+    act(() => {
+      result.current.handleResizeStart(mouseDownEvent);
+    });
+
+    expect(document.body.style.cursor).toBe("col-resize");
+    expect(document.body.style.userSelect).toBe("none");
+
+    const upEvent = new MouseEvent("mouseup");
+    act(() => {
+      window.dispatchEvent(upEvent);
+    });
+
+    expect(document.body.style.cursor).toBe("");
+    expect(document.body.style.userSelect).toBe("");
+  });
+
+  it("should clamp width to min/max bounds", async () => {
+    act(() => {
+      useSidebarStore.setState({ sidebarWidth: 200 });
+    });
+
+    const { useSidebarResize } = await import("../../hooks/use-sidebar-resize");
+    const { result } = renderHook(() => useSidebarResize());
+
+    const mouseDownEvent = new MouseEvent("mousedown", {
+      clientX: 200,
+      bubbles: true,
+    });
+    Object.defineProperty(mouseDownEvent, "preventDefault", {
+      value: vi.fn(),
+    });
+
+    act(() => {
+      result.current.handleResizeStart(mouseDownEvent);
+    });
+
+    const moveEvent = new MouseEvent("mousemove", {
+      clientX: 0,
+      bubbles: true,
+    });
+
+    act(() => {
+      window.dispatchEvent(moveEvent);
+    });
+
+    expect(useSidebarStore.getState().sidebarWidth).toBeGreaterThanOrEqual(180);
+
+    const upEvent = new MouseEvent("mouseup");
+    act(() => {
+      window.dispatchEvent(upEvent);
+    });
+  });
+});

package/templates/browser-agent/src/mainview/__tests__/i18n/i18n.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+describe("i18n configuration", () => {
+  beforeEach(async () => {
+    vi.resetModules();
+  });
+
+  it("should export configured i18n instance", async () => {
+    const i18n = await import("../../lib/i18n");
+    expect(i18n.default).toBeDefined();
+    expect(i18n.default.isInitialized).toBe(true);
+  });
+
+  it("should have English translations", async () => {
+    const i18n = await import("../../lib/i18n");
+    expect(
+      i18n.default.getResource("en", "translation", "app.title")
+    ).toBeDefined();
+  });
+
+  it("should have Chinese translations", async () => {
+    const i18n = await import("../../lib/i18n");
+    expect(
+      i18n.default.getResource("zh", "translation", "app.title")
+    ).toBeDefined();
+  });
+
+  it("should change language", async () => {
+    const i18n = await import("../../lib/i18n");
+    await i18n.default.changeLanguage("zh");
+    expect(i18n.default.language).toBe("zh");
+
+    await i18n.default.changeLanguage("en");
+    expect(i18n.default.language).toBe("en");
+  });
+
+  it("should translate keys correctly in English", async () => {
+    const i18n = await import("../../lib/i18n");
+    await i18n.default.changeLanguage("en");
+    expect(i18n.default.t("app.title")).toBe("Browser Agent");
+  });
+
+  it("should translate keys correctly in Chinese", async () => {
+    const i18n = await import("../../lib/i18n");
+    await i18n.default.changeLanguage("zh");
+    expect(i18n.default.t("app.title")).toBe("Browser Agent");
+    expect(i18n.default.t("sidebar.explorer")).toBe("资源管理器");
+  });
+});

package/templates/browser-agent/src/mainview/__tests__/setup.ts

@@ -0,0 +1,40 @@
+import { expect } from "vitest";
+import * as matchers from "@testing-library/jest-dom/matchers";
+
+expect.extend(matchers);
+
+Object.defineProperty(window, "matchMedia", {
+	writable: true,
+	value: (query: string) => ({
+		matches: false,
+		media: query,
+		onchange: null,
+		addListener: () => {},
+		removeListener: () => {},
+		addEventListener: () => {},
+		removeEventListener: () => {},
+		dispatchEvent: () => false,
+	}),
+});
+
+const localStorageMock = (() => {
+	let store: Record<string, string> = {};
+	return {
+		getItem: (key: string) => store[key] ?? null,
+		setItem: (key: string, value: string) => {
+			store[key] = String(value);
+		},
+		removeItem: (key: string) => {
+			delete store[key];
+		},
+		clear: () => {
+			store = {};
+		},
+		get length() {
+			return Object.keys(store).length;
+		},
+		key: (i: number) => Object.keys(store)[i] ?? null,
+	};
+})();
+
+Object.defineProperty(window, "localStorage", { value: localStorageMock });

package/templates/browser-agent/src/mainview/__tests__/stores/use-chat-store.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useChatStore } from "../../stores/use-chat-store";
+import { act } from "@testing-library/react";
+
+describe("useChatStore", () => {
+  beforeEach(() => {
+    act(() => {
+      useChatStore.setState({
+        messages: [],
+        _onEventCallback: null,
+      });
+    });
+  });
+
+  it("initial state", () => {
+    const state = useChatStore.getState();
+    expect(state.messages).toEqual([]);
+  });
+
+  it("addUserMessage appends a user message", () => {
+    act(() => {
+      useChatStore.getState().addUserMessage("hello");
+    });
+    const msgs = useChatStore.getState().messages;
+    expect(msgs).toHaveLength(1);
+    expect(msgs[0].role).toBe("user");
+    expect((msgs[0] as { text: string }).text).toBe("hello");
+  });
+
+  it("addAgentPlaceholder appends an agent message", () => {
+    act(() => {
+      useChatStore.getState().addAgentPlaceholder("agent-1");
+    });
+    const msgs = useChatStore.getState().messages;
+    expect(msgs).toHaveLength(1);
+    expect(msgs[0].role).toBe("agent");
+    expect(msgs[0].id).toBe("agent-1");
+  });
+
+  it("setMessages replaces all messages", () => {
+    const msgs = [
+      { id: "1", role: "user" as const, text: "a", at: 1000 },
+      { id: "2", role: "agent" as const, text: "b", turns: [], thinking: "", at: 2000 },
+    ];
+    act(() => {
+      useChatStore.getState().setMessages(msgs);
+    });
+    expect(useChatStore.getState().messages).toHaveLength(2);
+  });
+
+  it("addUserMessage then addAgentPlaceholder preserves order", () => {
+    act(() => {
+      useChatStore.getState().addUserMessage("question");
+      useChatStore.getState().addAgentPlaceholder("agent-1");
+    });
+    const msgs = useChatStore.getState().messages;
+    expect(msgs).toHaveLength(2);
+    expect(msgs[0].role).toBe("user");
+    expect(msgs[1].role).toBe("agent");
+  });
+
+  it("patchLastAgent updates the last agent message", () => {
+    act(() => {
+      useChatStore.getState().addAgentPlaceholder("agent-1");
+    });
+    act(() => {
+      useChatStore.getState().patchLastAgent({ thinking: "reasoning..." });
+    });
+    const msgs = useChatStore.getState().messages;
+    const agentMsg = msgs[0] as { thinking: string };
+    expect(agentMsg.thinking).toBe("reasoning...");
+  });
+});

package/templates/browser-agent/src/mainview/__tests__/stores/use-sidebar-store.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useSidebarStore, SIDEBAR_MIN_WIDTH, SIDEBAR_MAX_WIDTH } from "../../stores/use-sidebar-store";
+import { act } from "@testing-library/react";
+
+describe("useSidebarStore", () => {
+  beforeEach(() => {
+    act(() => {
+      useSidebarStore.setState({
+        isPinned: true,
+        drawerOpen: false,
+        sidebarWidth: 240,
+        breakpoint: "desktop",
+      });
+    });
+  });
+
+  it("setPinned", () => {
+    act(() => {
+      useSidebarStore.getState().setPinned(false);
+    });
+    expect(useSidebarStore.getState().isPinned).toBe(false);
+  });
+
+  it("setDrawerOpen", () => {
+    act(() => {
+      useSidebarStore.getState().setDrawerOpen(true);
+    });
+    expect(useSidebarStore.getState().drawerOpen).toBe(true);
+  });
+
+  it("setDrawerOpen false closes drawer", () => {
+    act(() => {
+      useSidebarStore.setState({ isPinned: false, drawerOpen: true });
+    });
+    act(() => {
+      useSidebarStore.getState().setDrawerOpen(false);
+    });
+    expect(useSidebarStore.getState().drawerOpen).toBe(false);
+  });
+
+  it("setSidebarWidth clamps to min", () => {
+    act(() => {
+      useSidebarStore.getState().setSidebarWidth(50);
+    });
+    expect(useSidebarStore.getState().sidebarWidth).toBe(SIDEBAR_MIN_WIDTH);
+  });
+
+  it("setSidebarWidth clamps to max", () => {
+    act(() => {
+      useSidebarStore.getState().setSidebarWidth(9999);
+    });
+    expect(useSidebarStore.getState().sidebarWidth).toBe(SIDEBAR_MAX_WIDTH);
+  });
+
+  it("_setBreakpoint", () => {
+    act(() => {
+      useSidebarStore.getState()._setBreakpoint("mobile");
+    });
+    expect(useSidebarStore.getState().breakpoint).toBe("mobile");
+  });
+});

package/templates/browser-agent/src/mainview/__tests__/theme-variables.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "fs";
+import { resolve, dirname } from "path";
+
+function extractVarNames(css: string, selector: string): string[] {
+  const regex = new RegExp(`${selector.replace(".", "\\.")}\\s*\\{([^}]+)\\}`, "s");
+  const match = css.match(regex);
+  if (!match) return [];
+  const vars = match[1].match(/--[\w-]+/g);
+  return vars ? [...new Set(vars)].sort() : [];
+}
+
+describe("CSS Variables", () => {
+  const cssPath = resolve(dirname(import.meta.url.replace("file://", "")), "../index.css");
+  const css = readFileSync(cssPath, "utf-8");
+
+  it("should have matching variables in :root and .dark", () => {
+    const rootVars = extractVarNames(css, ":root");
+    const darkVars = extractVarNames(css, ".dark");
+
+    expect(rootVars.length).toBeGreaterThan(0);
+    expect(darkVars.length).toBeGreaterThan(0);
+    expect(rootVars).toEqual(darkVars);
+  });
+
+  it("should have all required variable categories", () => {
+    const allVars = css.match(/--[\w-]+/g) || [];
+    const uniqueVars = [...new Set(allVars)];
+
+    const requiredPrefixes = ["bg-", "text-", "border-", "accent-"];
+    for (const prefix of requiredPrefixes) {
+      const hasPrefix = uniqueVars.some((v) => v.includes(prefix));
+      expect(hasPrefix, `Missing CSS variables with prefix: ${prefix}`).toBe(true);
+    }
+  });
+});

package/templates/browser-agent/src/mainview/components/assets/AssetsPanel.tsx

@@ -0,0 +1,139 @@
+/**
+ * 资源面板 — 右侧资源展示
+ *
+ * 对应 PRD §4.6 资源管理 + §5.2 资源面板职责
+ */
+
+import { useAssetStore } from "../../stores/use-asset-store";
+import { useSessionStore } from "../../stores/use-session-store";
+
+export function AssetsPanel() {
+	const currentSession = useSessionStore((s) => s.currentSession);
+	const assets = currentSession?.assets || [];
+	const downloadAsset = useAssetStore((s) => s.downloadAsset);
+	const getDownloadUrl = useAssetStore((s) => s.getDownloadUrl);
+
+	const screenshots = assets.filter((a) => a.kind === "screenshot");
+	const images = assets.filter((a) => a.kind === "image");
+	const files = assets.filter((a) =>
+		["csv", "json", "report"].includes(a.kind),
+	);
+	const zips = assets.filter((a) => a.kind === "zip");
+
+	return (
+		<div className="flex flex-col h-full">
+			<div className="px-3 py-2 border-b border-[var(--color-border-primary)]">
+				<h3 className="text-xs font-semibold text-[var(--color-text-secondary)] uppercase tracking-wider">
+					资源
+				</h3>
+				<div className="text-xs text-[var(--color-text-tertiary)] mt-0.5">
+					总计 {assets.length} 个资源
+				</div>
+			</div>
+
+			<div className="flex-1 overflow-y-auto p-3 space-y-4">
+				{/* 截图 */}
+				{screenshots.length > 0 && (
+					<div>
+						<h4 className="text-xs font-medium text-[var(--color-text-secondary)] mb-2">
+							截图
+						</h4>
+						<div className="grid grid-cols-1 gap-2">
+							{screenshots.map((s) => (
+								<img
+									key={s.id}
+									src={getDownloadUrl(s)}
+									alt={s.name}
+									className="rounded-lg border border-[var(--color-border-primary)] cursor-pointer hover:opacity-90 transition-opacity"
+									onClick={() => downloadAsset(s.id)}
+								/>
+							))}
+						</div>
+					</div>
+				)}
+
+				{/* 图片网格 */}
+				{images.length > 0 && (
+					<div>
+						<h4 className="text-xs font-medium text-[var(--color-text-secondary)] mb-2">
+							图片
+						</h4>
+						<div className="grid grid-cols-3 gap-1">
+							{images.slice(0, 9).map((img) => (
+								<img
+									key={img.id}
+									src={getDownloadUrl(img)}
+									alt={img.name}
+									className="rounded aspect-square object-cover border border-[var(--color-border-primary)] cursor-pointer hover:opacity-90"
+									onClick={() => downloadAsset(img.id)}
+								/>
+							))}
+							{images.length > 9 && (
+								<div className="rounded aspect-square bg-[var(--color-bg-tertiary)] flex items-center justify-center text-xs text-[var(--color-text-tertiary)]">
+									+{images.length - 9}
+								</div>
+							)}
+						</div>
+					</div>
+				)}
+
+				{/* 文件列表 */}
+				{files.length > 0 && (
+					<div>
+						<h4 className="text-xs font-medium text-[var(--color-text-secondary)] mb-2">
+							文件
+						</h4>
+						<div className="space-y-1">
+							{files.map((f) => (
+								<button
+									key={f.id}
+									onClick={() => downloadAsset(f.id)}
+									className="w-full flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[var(--color-bg-hover)] text-left text-sm"
+								>
+									<span className="text-xs">
+										{f.kind === "csv"
+											? "📊"
+											: f.kind === "json"
+												? "📋"
+												: "📄"}
+									</span>
+									<span className="flex-1 truncate text-xs">
+										{f.name}
+									</span>
+									<span className="text-xs text-[var(--color-text-tertiary)]">
+										{f.size
+											? f.size > 1024 * 1024
+												? `${(f.size / 1024 / 1024).toFixed(1)} MB`
+												: `${Math.round(f.size / 1024)} KB`
+											: ""}
+									</span>
+								</button>
+							))}
+						</div>
+					</div>
+				)}
+
+				{/* ZIP 打包 */}
+				{zips.length > 0 && (
+					<div>
+						{zips.map((z) => (
+							<button
+								key={z.id}
+								onClick={() => downloadAsset(z.id)}
+								className="w-full py-2 px-3 rounded-lg bg-[var(--color-accent)] text-white text-sm font-medium hover:opacity-90 transition-opacity"
+							>
+								📦 下载全部 (ZIP)
+							</button>
+						))}
+					</div>
+				)}
+
+				{assets.length === 0 && (
+					<div className="text-xs text-[var(--color-text-tertiary)] text-center py-8">
+						暂无资源
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}