@dyyz1993/create-agent 1.9.0

package/templates/agent/src/mainview/components/bash/BashPanel.tsx

@@ -0,0 +1,206 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Play, Square, X } from "lucide-react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useBashStore } from "../../stores/use-bash-store";
+
+export function BashPanel() {
+  const { t } = useTranslation();
+  const [command, setCommand] = useState("");
+  const processes = useBashStore((s) => s.processes);
+  const activePid = useBashStore((s) => s.activePid);
+  const executeCommand = useBashStore((s) => s.executeCommand);
+  const killProcess = useBashStore((s) => s.killProcess);
+  const setActive = useBashStore((s) => s.setActive);
+  const parentRef = useRef<HTMLDivElement>(null);
+  const isUserScrollingRef = useRef(false);
+
+  const activeProcess = activePid != null ? processes.get(activePid) : null;
+  const lines = activeProcess?.output ? activeProcess.output.split("\n") : [];
+
+  const virtualizer = useVirtualizer({
+    count: lines.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 20,
+    overscan: 20,
+  });
+
+  const handleScroll = useCallback(() => {
+    const el = parentRef.current;
+    if (!el) return;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+    isUserScrollingRef.current = !atBottom;
+  }, []);
+
+  useEffect(() => {
+    if (!isUserScrollingRef.current && lines.length > 0) {
+      virtualizer.scrollToIndex(lines.length - 1, { align: "end" });
+    }
+  }, [lines.length, virtualizer]);
+
+  const handleRun = () => {
+    if (!command.trim()) return;
+    executeCommand(command.trim());
+    setCommand("");
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleRun();
+    }
+  };
+
+  const processList = Array.from(processes.entries());
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-3 border-b border-[var(--color-border-primary)] flex items-center gap-2">
+        <input
+          type="text"
+          value={command}
+          onChange={(e) => setCommand(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={t("bash.enterCommand")}
+          className="flex-1 bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)] px-3 py-1.5 rounded text-sm font-mono border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
+        />
+        <button
+          onClick={handleRun}
+          disabled={!command.trim()}
+          className="flex items-center gap-1 px-3 py-1.5 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-40 disabled:cursor-not-allowed rounded text-sm text-[var(--color-text-primary)]"
+        >
+          <Play className="w-3.5 h-3.5" />
+          {t("bash.run")}
+        </button>
+      </div>
+
+      {processList.length > 0 && (
+        <div className="flex gap-1 px-3 py-2 border-b border-[var(--color-border-primary)] overflow-x-auto">
+          {processList.map(([pid, proc]) => (
+            <button
+              key={pid}
+              onClick={() => setActive(pid)}
+              className={`group relative flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs whitespace-nowrap transition-colors ${
+                activePid === pid
+                  ? proc.running
+                    ? "bg-green-900/50 text-green-300 border border-green-700"
+                    : "bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)] border border-[var(--color-border-secondary)]"
+                  : "text-[var(--color-text-placeholder)] bg-[var(--color-bg-secondary)]/50 border border-transparent hover:text-[var(--color-text-secondary)]"
+              }`}
+            >
+              {proc.running && (
+                <span className="relative flex h-2 w-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+                </span>
+              )}
+              {!proc.running && (
+                <span className={`w-2 h-2 rounded-full ${proc.exitCode === 0 ? "bg-green-500" : "bg-red-500"}`} />
+              )}
+              PID {pid}
+              {proc.running && activePid === pid && (
+                <button
+                  onClick={(e) => { e.stopPropagation(); killProcess(pid); }}
+                  className="ml-0.5 text-[var(--color-text-error)] hover:text-red-300"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              )}
+              {!proc.running && (
+                <span className={`text-[10px] ${proc.exitCode === 0 ? "text-green-500/70" : "text-red-500/70"}`}>
+                  {t("bash.exited", { code: proc.exitCode ?? "?" })}
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div
+        ref={parentRef}
+        onScroll={handleScroll}
+        className="flex-1 overflow-auto p-3 font-mono text-xs text-[var(--color-text-secondary)] bg-gray-950 whitespace-pre-wrap leading-relaxed"
+      >
+        {activeProcess ? (
+          <>
+            {activeProcess.running && (
+              <div className="flex items-center gap-2 text-yellow-400 mb-2 pb-2 border-b border-[var(--color-bg-secondary)]">
+                <span className="relative flex h-2 w-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75" />
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-yellow-500" />
+                </span>
+                {t("bash.processRunning", { pid: activePid })}
+              </div>
+            )}
+            {lines.length > 0 ? (
+              <div
+                style={{
+                  height: virtualizer.getTotalSize(),
+                  width: "100%",
+                  position: "relative",
+                }}
+              >
+                {virtualizer.getVirtualItems().map((virtualRow) => {
+                  const line = lines[virtualRow.index];
+                  return (
+                    <div
+                      key={virtualRow.index}
+                      style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        height: `${virtualRow.size}px`,
+                        transform: `translateY(${virtualRow.start}px)`,
+                      }}
+                      className="hover:bg-[var(--color-bg-secondary)]/30 px-1 -mx-1 rounded"
+                    >
+                      <span className="text-[var(--color-text-placeholder)] select-none mr-2">&gt;</span>
+                      <span>{line || "\u00A0"}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : activeProcess.running ? (
+              <span className="text-gray-600">{t("bash.waitingOutput")}</span>
+            ) : null}
+            {!activeProcess.running && activeProcess.exitCode != null && (
+              <div className={`mt-2 pt-2 border-t border-[var(--color-bg-secondary)] text-xs font-semibold ${
+                activeProcess.exitCode === 0 ? "text-[var(--color-text-success)]" : "text-[var(--color-text-error)]"
+              }`}>
+                {t("bash.exit", { code: activeProcess.exitCode })}
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="flex flex-col items-center justify-center h-full text-gray-600">
+            <TerminalIcon className="w-12 h-12 mb-3 opacity-30" />
+            <span className="text-sm">{t("bash.noActiveProcess")}</span>
+            <span className="text-xs mt-1">{t("bash.getStarted")}</span>
+          </div>
+        )}
+      </div>
+
+      {activeProcess?.running && (
+        <div className="p-2 border-t border-[var(--color-border-primary)] flex justify-end">
+          <button
+            onClick={() => activePid != null && killProcess(activePid)}
+            className="flex items-center gap-1 px-3 py-1 bg-red-600 hover:bg-red-500 rounded text-xs text-[var(--color-text-primary)]"
+          >
+            <Square className="w-3 h-3" />
+            {t("bash.kill")}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TerminalIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="4 17 10 11 4 5" />
+      <line x1="12" y1="19" x2="20" y2="19" />
+    </svg>
+  );
+}

package/templates/agent/src/mainview/components/bash/__tests__/BashPanel.test.tsx

@@ -0,0 +1,103 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+
+vi.mock("@tanstack/react-virtual", () => ({
+  useVirtualizer: (options: { count: number }) => ({
+    getVirtualItems: () =>
+      Array.from({ length: options.count }).map((_, i) => ({
+        index: i,
+        key: i,
+        start: i * 20,
+        size: 20,
+      })),
+    getTotalSize: () => options.count * 20,
+    scrollToIndex: vi.fn(),
+  }),
+}));
+
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+const mockExecuteCommand = vi.fn();
+const mockKillProcess = vi.fn();
+const mockSetActive = vi.fn();
+
+vi.mock("../../../stores/use-bash-store", () => ({
+  useBashStore: (selector: any) =>
+    selector({
+      processes: new Map([
+        [1234, { running: true, output: "hello\nworld", exitCode: null }],
+        [5678, { running: false, output: "done", exitCode: 0 }],
+      ]),
+      activePid: 1234,
+      executeCommand: mockExecuteCommand,
+      killProcess: mockKillProcess,
+      setActive: mockSetActive,
+    }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("BashPanel", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("should render command input", async () => {
+    const { BashPanel } = await import("../BashPanel");
+    render(<BashPanel />);
+    expect(screen.getByPlaceholderText("bash.enterCommand")).toBeDefined();
+  });
+
+  it("should render run button", async () => {
+    const { BashPanel } = await import("../BashPanel");
+    render(<BashPanel />);
+    expect(screen.getByText("bash.run")).toBeDefined();
+  });
+
+  it("should show process tabs", async () => {
+    const { BashPanel } = await import("../BashPanel");
+    render(<BashPanel />);
+    expect(screen.getByText(/PID 1234/)).toBeDefined();
+    expect(screen.getByText(/PID 5678/)).toBeDefined();
+  });
+
+  it("should display active process output", async () => {
+    const { BashPanel } = await import("../BashPanel");
+    render(<BashPanel />);
+    expect(screen.getByText("hello")).toBeDefined();
+    expect(screen.getByText("world")).toBeDefined();
+  });
+
+  it("should render kill button for running process", async () => {
+    const { BashPanel } = await import("../BashPanel");
+    render(<BashPanel />);
+    expect(screen.getByText("bash.kill")).toBeDefined();
+  });
+
+  it("should call executeCommand on run", async () => {
+    const { BashPanel } = await import("../BashPanel");
+    render(<BashPanel />);
+    const input = screen.getByPlaceholderText("bash.enterCommand");
+    fireEvent.change(input, { target: { value: "ls -la" } });
+    fireEvent.click(screen.getByText("bash.run"));
+    expect(mockExecuteCommand).toHaveBeenCalledWith("ls -la");
+  });
+
+  it("should submit on Enter key", async () => {
+    const { BashPanel } = await import("../BashPanel");
+    render(<BashPanel />);
+    const input = screen.getByPlaceholderText("bash.enterCommand");
+    fireEvent.change(input, { target: { value: "pwd" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(mockExecuteCommand).toHaveBeenCalledWith("pwd");
+  });
+
+  it("should show running indicator", async () => {
+    const { BashPanel } = await import("../BashPanel");
+    render(<BashPanel />);
+    expect(screen.getByText(/bash.processRunning/)).toBeDefined();
+  });
+});

package/templates/agent/src/mainview/components/chat/ChatPanel.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { MessageSquare, Send } from "lucide-react";
+import { useChatStore } from "../../stores/use-chat-store";
+import { MessageBubble } from "./MessageBubble";
+
+export function ChatPanel() {
+  const { t } = useTranslation();
+  const messages = useChatStore((s) => s.messages);
+  const inputText = useChatStore((s) => s.inputText);
+  const setInputText = useChatStore((s) => s.setInputText);
+  const sendMessage = useChatStore((s) => s.sendMessage);
+  const parentRef = useRef<HTMLDivElement>(null);
+  const prevMessageCountRef = useRef(0);
+
+  const virtualizer = useVirtualizer({
+    count: messages.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 80,
+    overscan: 5,
+    measureElement: (element) => element?.getBoundingClientRect().height ?? 80,
+  });
+
+  useEffect(() => {
+    if (messages.length > prevMessageCountRef.current) {
+      virtualizer.scrollToIndex(messages.length - 1, { align: "end" });
+    }
+    prevMessageCountRef.current = messages.length;
+  }, [messages.length, virtualizer]);
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden relative">
+      <div className="px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex items-center justify-between flex-shrink-0">
+        <h2 className="text-sm font-semibold flex items-center gap-1.5">
+          <MessageSquare className="w-4 h-4 text-[var(--color-text-accent)]" />
+          {t("chat.title")}
+          {messages.length > 0 && (
+            <span className="ml-1 px-2 py-0.5 bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] rounded text-[10px]">
+              {messages.length}
+            </span>
+          )}
+        </h2>
+      </div>
+
+      <div ref={parentRef} className="flex-1 overflow-y-auto">
+        {messages.length === 0 ? (
+          <div className="flex items-center justify-center h-full text-[var(--color-text-placeholder)] text-sm">
+            {t("chat.empty")}
+          </div>
+        ) : (
+          <div
+            style={{
+              height: virtualizer.getTotalSize(),
+              width: "100%",
+              position: "relative",
+            }}
+          >
+            {virtualizer.getVirtualItems().map((virtualItem) => {
+              const msg = messages[virtualItem.index];
+              return (
+                <div
+                  key={msg.id}
+                  data-index={virtualItem.index}
+                  ref={virtualizer.measureElement}
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    transform: `translateY(${virtualItem.start}px)`,
+                    padding: "6px 16px",
+                  }}
+                >
+                  <MessageBubble message={msg} />
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <div className="px-4 py-3 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border-primary)] flex gap-2 flex-shrink-0">
+        <input
+          type="text"
+          value={inputText}
+          onChange={(e) => setInputText(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && sendMessage()}
+          placeholder={t("chat.placeholder")}
+          className="flex-1 px-3 py-2 text-sm bg-[var(--color-bg-tertiary)] rounded-lg text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
+        />
+        <button
+          onClick={sendMessage}
+          className="px-4 py-2 text-sm bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded-lg transition-colors flex items-center gap-1.5"
+        >
+          <Send className="w-4 h-4" />
+          {t("chat.send")}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/chat/MessageBubble.tsx

@@ -0,0 +1,86 @@
+import { memo } from "react";
+import { Bot } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Highlight, themes } from "prism-react-renderer";
+import type { ChatMessage } from "../../types";
+
+interface MessageBubbleProps {
+  message: ChatMessage;
+}
+
+function formatTime(ts: number): string {
+  const d = new Date(ts);
+  const hh = d.getHours().toString().padStart(2, "0");
+  const mm = d.getMinutes().toString().padStart(2, "0");
+  return `${hh}:${mm}`;
+}
+
+function CodeBlock({ children, className }: { children: string; className?: string }) {
+  const language = className?.replace(/language-/, "") || "text";
+  return (
+    <Highlight theme={themes.nightOwl} code={children.trimEnd()} language={language}>
+      {({ style, tokens, getLineProps, getTokenProps }) => (
+        <pre
+          className="rounded-md p-3 my-2 overflow-x-auto text-xs leading-relaxed"
+          style={{ ...style, background: "#1e1e2e" }}
+        >
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line })}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+}
+
+export const MessageBubble = memo(function MessageBubble({ message }: MessageBubbleProps) {
+  const isUser = message.role === "user";
+
+  return (
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"} items-start gap-2`}>
+      {!isUser && (
+        <div className="flex-shrink-0 mt-1">
+          <Bot className="w-4 h-4 text-[var(--color-text-accent)]" />
+        </div>
+      )}
+      <div
+        className={`max-w-[85%] px-3 py-2 rounded-lg text-sm break-words ${
+          isUser
+            ? "bg-[var(--color-accent)] text-[var(--color-text-primary)]"
+            : "bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)]"
+        }`}
+      >
+        {isUser ? (
+          <span className="whitespace-pre-wrap">{message.content}</span>
+        ) : (
+          <div className="markdown-body prose prose-invert prose-sm max-w-none [&_p]:mb-2 [&_p:last-child]:mb-0 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:mb-1 [&_h1]:text-base [&_h1]:font-bold [&_h1]:mb-2 [&_h2]:text-sm [&_h2]:font-bold [&_h2]:mb-1 [&_blockquote]:border-l-2 [&_blockquote]:border-[var(--color-text-accent)] [&_blockquote]:pl-3 [&_blockquote]:text-[var(--color-text-tertiary)] [&_a]:text-[var(--color-text-accent)] [&_a]:underline [&_code:not(pre_code)]:bg-[var(--color-bg-input)] [&_code:not(pre_code)]:px-1 [&_code:not(pre_code)]:rounded [&_code:not(pre_code)]:text-xs [&_table]:border-collapse [&_th]:border [&_th]:border-[var(--color-border-secondary)] [&_th]:px-2 [&_th]:py-1 [&_td]:border [&_td]:border-[var(--color-border-secondary)] [&_td]:px-2 [&_td]:py-1">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                code({ className, children, ...props }) {
+                  const isBlock = className?.startsWith("language-") || String(children).includes("\n");
+                  if (isBlock) {
+                    return <CodeBlock className={className}>{String(children)}</CodeBlock>;
+                  }
+                  return <code className={className} {...props}>{children}</code>;
+                },
+              }}
+            >
+              {message.content}
+            </ReactMarkdown>
+          </div>
+        )}
+      </div>
+      {message.timestamp && (
+        <span className="text-[10px] text-[var(--color-text-tertiary)] ml-2 flex-shrink-0">
+          {formatTime(message.timestamp)}
+        </span>
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,58 @@
+import React, { Component, type ErrorInfo, type ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error("[ErrorBoundary]", error, errorInfo);
+  }
+
+  handleRetry = (): void => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="flex flex-col items-center justify-center h-full p-8 bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">
+          <div className="text-4xl mb-4">⚠️</div>
+          <h2 className="text-lg font-semibold mb-2">Something went wrong</h2>
+          <p className="text-sm text-[var(--color-text-secondary)] mb-4 max-w-md text-center">
+            {this.state.error?.message || "An unexpected error occurred"}
+          </p>
+          <button
+            onClick={this.handleRetry}
+            className="px-4 py-2 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-white rounded-lg transition-colors text-sm"
+            role="button"
+            aria-label="Retry"
+          >
+            Retry
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

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

@@ -0,0 +1,14 @@
+import { useLocaleStore } from "../../stores/use-locale-store";
+
+export function LanguageSwitcher() {
+  const { locale, setLocale } = useLocaleStore();
+  return (
+    <button
+      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/agent/src/mainview/components/common/ThemeToggle.tsx

@@ -0,0 +1,24 @@
+import { useThemeStore } from "../../stores/use-theme-store";
+
+export function ThemeToggle() {
+  const theme = useThemeStore((s) => s.theme);
+  const toggleTheme = useThemeStore((s) => s.toggleTheme);
+
+  return (
+    <button
+      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-gray-600" 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/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();
+  });
+});