@dyyz1993/create-agent 1.9.0

package/templates/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/agent/src/mainview/__tests__/i18n/i18n.test.ts

@@ -0,0 +1,48 @@
+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("Pi 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("Pi Agent");
+  });
+});

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

@@ -0,0 +1,37 @@
+import "@testing-library/jest-dom/vitest";
+
+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/agent/src/mainview/__tests__/stores/use-chat-store.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useChatStore } from "../../stores/use-chat-store";
+import { act } from "@testing-library/react";
+
+vi.mock("../../lib/api-client", () => ({
+  apiClient: {
+    call: vi.fn().mockResolvedValue({ ok: true }),
+  },
+}));
+
+vi.mock("../../stores/use-log-store", () => ({
+  useLogStore: {
+    getState: () => ({ addLog: vi.fn() }),
+  },
+}));
+
+describe("useChatStore", () => {
+  beforeEach(() => {
+    act(() => {
+      useChatStore.setState({
+        messages: [],
+        inputText: "",
+      });
+    });
+  });
+
+  it("initial state", () => {
+    const state = useChatStore.getState();
+    expect(state.messages).toEqual([]);
+    expect(state.inputText).toBe("");
+  });
+
+  it("setInputText", () => {
+    act(() => {
+      useChatStore.getState().setInputText("hello");
+    });
+    expect(useChatStore.getState().inputText).toBe("hello");
+  });
+
+  it("addMessage", () => {
+    const msg = {
+      id: "1",
+      role: "user" as const,
+      content: "hi",
+      timestamp: Date.now(),
+    };
+    act(() => {
+      useChatStore.getState().addMessage(msg);
+    });
+    expect(useChatStore.getState().messages).toHaveLength(1);
+    expect(useChatStore.getState().messages[0].content).toBe("hi");
+  });
+
+  it("setMessages", () => {
+    const msgs = [
+      { id: "1", role: "user" as const, content: "a", timestamp: 1000 },
+      { id: "2", role: "assistant" as const, content: "b", timestamp: 2000 },
+    ];
+    act(() => {
+      useChatStore.getState().setMessages(msgs);
+    });
+    expect(useChatStore.getState().messages).toHaveLength(2);
+  });
+
+  it("addMessage appends to existing", () => {
+    act(() => {
+      useChatStore.getState().setMessages([
+        { id: "1", role: "user", content: "a", timestamp: 1000 },
+      ]);
+    });
+    act(() => {
+      useChatStore.getState().addMessage({
+        id: "2",
+        role: "assistant",
+        content: "b",
+        timestamp: 2000,
+      });
+    });
+    const msgs = useChatStore.getState().messages;
+    expect(msgs).toHaveLength(2);
+    expect(msgs[1].content).toBe("b");
+  });
+});

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

@@ -0,0 +1,85 @@
+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({
+        activePanel: "explorer",
+        isPinned: true,
+        drawerOpen: false,
+        sidebarWidth: 240,
+        breakpoint: "desktop",
+      });
+    });
+  });
+
+  it("togglePanel switches to new panel", () => {
+    act(() => {
+      useSidebarStore.getState().togglePanel("git");
+    });
+    expect(useSidebarStore.getState().activePanel).toBe("git");
+  });
+
+  it("togglePanel same panel closes it", () => {
+    act(() => {
+      useSidebarStore.getState().togglePanel("explorer");
+    });
+    expect(useSidebarStore.getState().activePanel).toBeNull();
+    expect(useSidebarStore.getState().drawerOpen).toBe(false);
+  });
+
+  it("setActivePanel", () => {
+    act(() => {
+      useSidebarStore.getState().setActivePanel("search");
+    });
+    expect(useSidebarStore.getState().activePanel).toBe("search");
+  });
+
+  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 with unpinned clears activePanel", () => {
+    act(() => {
+      useSidebarStore.setState({ isPinned: false, drawerOpen: true, activePanel: "explorer" });
+    });
+    act(() => {
+      useSidebarStore.getState().setDrawerOpen(false);
+    });
+    expect(useSidebarStore.getState().drawerOpen).toBe(false);
+    expect(useSidebarStore.getState().activePanel).toBeNull();
+  });
+
+  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/agent/src/mainview/components/activity-bar/ActivityBar.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from "react-i18next";
+import { Folder, GitBranch, Search, Shield } from "lucide-react";
+import { useSidebarStore, type SidebarPanelId } from "../../stores/use-sidebar-store";
+
+export function ActivityBar() {
+  const { t } = useTranslation();
+  const activePanel = useSidebarStore((s) => s.activePanel);
+  const togglePanel = useSidebarStore((s) => s.togglePanel);
+
+  const items: { id: SidebarPanelId; icon: typeof Folder; label: string }[] = [
+    { id: "explorer", icon: Folder, label: t("sidebar.explorer") },
+    { id: "git", icon: GitBranch, label: t("sidebar.git") },
+    { id: "search", icon: Search, label: t("sidebar.search") },
+    { id: "rules", icon: Shield, label: t("sidebar.rules") },
+  ];
+
+  return (
+    <div data-testid="activity-bar" className="w-12 bg-[var(--color-bg-primary)] border-r border-[var(--color-border-primary)] flex flex-col items-center py-2 gap-1 flex-shrink-0">
+      {items.map(({ id, icon: Icon, label }) => (
+        <button
+          key={id}
+          title={label}
+          data-testid={`tab-${id}`}
+          onClick={() => togglePanel(id)}
+          className={`w-10 h-10 flex items-center justify-center rounded transition-colors ${
+            activePanel === id
+              ? "bg-[var(--color-bg-tertiary)] text-[var(--color-text-primary)] border-l-2 border-[var(--color-text-primary)]"
+              : "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)]"
+          }`}
+        >
+          <Icon className="w-5 h-5" />
+        </button>
+      ))}
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/activity-bar/MobileTabBar.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from "react-i18next";
+import { Folder, GitBranch, Search, Shield } from "lucide-react";
+import { useSidebarStore, type SidebarPanelId } from "../../stores/use-sidebar-store";
+
+export function MobileTabBar() {
+  const { t } = useTranslation();
+  const activePanel = useSidebarStore((s) => s.activePanel);
+  const togglePanel = useSidebarStore((s) => s.togglePanel);
+
+  const items: { id: SidebarPanelId; icon: typeof Folder; label: string }[] = [
+    { id: "explorer", icon: Folder, label: t("sidebar.explorer") },
+    { id: "git", icon: GitBranch, label: t("sidebar.git") },
+    { id: "search", icon: Search, label: t("sidebar.search") },
+    { id: "rules", icon: Shield, label: t("sidebar.rules") },
+  ];
+
+  return (
+    <div data-testid="mobile-tab-bar" className="h-14 bg-[var(--color-bg-primary)] border-t border-[var(--color-border-primary)] flex items-center justify-around flex-shrink-0">
+      {items.map(({ id, icon: Icon, label }) => (
+        <button
+          key={id}
+          data-testid={`tab-${id}`}
+          onClick={() => togglePanel(id)}
+          className={`flex flex-col items-center justify-center gap-0.5 px-3 py-1 rounded transition-colors ${
+            activePanel === id
+              ? "text-[var(--color-text-accent)]"
+              : "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)]"
+          }`}
+        >
+          <Icon className="w-5 h-5" />
+          <span className="text-[10px]">{label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/activity-bar/__tests__/ActivityBar.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+const mockTogglePanel = vi.fn();
+
+vi.mock("../../../stores/use-sidebar-store", () => ({
+  useSidebarStore: (selector: any) =>
+    selector({ activePanel: "explorer", togglePanel: mockTogglePanel }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("ActivityBar", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("should render all activity bar buttons", async () => {
+    const { ActivityBar } = await import("../ActivityBar");
+    render(<ActivityBar />);
+    expect(screen.getByTitle("sidebar.explorer")).toBeDefined();
+    expect(screen.getByTitle("sidebar.git")).toBeDefined();
+    expect(screen.getByTitle("sidebar.search")).toBeDefined();
+    expect(screen.getByTitle("sidebar.rules")).toBeDefined();
+  });
+
+  it("should call togglePanel on button click", async () => {
+    const { ActivityBar } = await import("../ActivityBar");
+    render(<ActivityBar />);
+    fireEvent.click(screen.getByTitle("sidebar.git"));
+    expect(mockTogglePanel).toHaveBeenCalledWith("git");
+  });
+
+  it("should highlight active panel button", async () => {
+    const { ActivityBar } = await import("../ActivityBar");
+    const _container = render(<ActivityBar />);
+    const activeBtn = screen.getByTitle("sidebar.explorer").closest("button");
+    expect(activeBtn?.className).toContain("border-l-2");
+  });
+});

package/templates/agent/src/mainview/components/activity-bar/__tests__/MobileTabBar.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+const mockTogglePanel = vi.fn();
+
+vi.mock("../../../stores/use-sidebar-store", () => ({
+  useSidebarStore: (selector: any) =>
+    selector({ activePanel: null, togglePanel: mockTogglePanel }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("MobileTabBar", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("should render all tab buttons", async () => {
+    const { MobileTabBar } = await import("../MobileTabBar");
+    render(<MobileTabBar />);
+    expect(screen.getByText("sidebar.explorer")).toBeDefined();
+    expect(screen.getByText("sidebar.git")).toBeDefined();
+    expect(screen.getByText("sidebar.search")).toBeDefined();
+    expect(screen.getByText("sidebar.rules")).toBeDefined();
+  });
+
+  it("should call togglePanel on tab click", async () => {
+    const { MobileTabBar } = await import("../MobileTabBar");
+    render(<MobileTabBar />);
+    fireEvent.click(screen.getByText("sidebar.search"));
+    expect(mockTogglePanel).toHaveBeenCalledWith("search");
+  });
+
+  it("should render 4 tab buttons", async () => {
+    const { MobileTabBar } = await import("../MobileTabBar");
+    render(<MobileTabBar />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons.length).toBe(4);
+  });
+});