@dyyz1993/create-agent 2.0.0 → 2.1.0

package/templates/agent/src/mainview/App.tsx

@@ -1,41 +1,44 @@
+import type { ReactNode } from "react";
 import { useState } from "react";
 import { useConnectionStore } from "./stores/use-connection-store";
 import { useBreakpointSync } from "./hooks/use-breakpoint";
 import { useRpcInit } from "./hooks/use-rpc-init";
 import { useSidebarResize } from "./hooks/use-sidebar-resize";
 import { AppLayout, type CenterTab } from "./components/layout/AppLayout";
-import { ErrorBoundary } from "./components/common/ErrorBoundary";
+import { ErrorBoundary as _EB } from "./components/common/ErrorBoundary";
+
+const ErrorBoundary = _EB as unknown as React.FC<{ children: ReactNode }>;
 
 function App() {
-  const ready = useConnectionStore((s) => s.ready);
-  const [centerTab, setCenterTab] = useState<CenterTab>("chat");
+	const ready = useConnectionStore((s) => s.ready);
+	const [centerTab, setCenterTab] = useState<CenterTab>("chat");
 
-  useBreakpointSync();
-  useRpcInit();
+	useBreakpointSync();
+	useRpcInit();
 
-  const { sidebarWidth, handleResizeStart } = useSidebarResize();
+	const { sidebarWidth, handleResizeStart } = useSidebarResize();
 
-  if (!ready) {
-    return (
-      <div className="h-screen bg-gray-900 flex items-center justify-center">
-        <div className="text-center">
-          <div className="inline-block w-8 h-8 border-2 border-indigo-400 border-t-transparent rounded-full animate-spin mb-4" />
-          <div className="text-gray-400 text-sm">Connecting to RPC server...</div>
-        </div>
-      </div>
-    );
-  }
+	if (!ready) {
+		return (
+			<div className="h-screen bg-gray-900 flex items-center justify-center">
+				<div className="text-center">
+					<div className="inline-block w-8 h-8 border-2 border-indigo-400 border-t-transparent rounded-full animate-spin mb-4" />
+					<div className="text-gray-400 text-sm">Connecting to RPC server...</div>
+				</div>
+			</div>
+		);
+	}
 
-  return (
-    <ErrorBoundary>
-      <AppLayout
-        centerTab={centerTab}
-        setCenterTab={setCenterTab}
-        sidebarWidth={sidebarWidth}
-        handleResizeStart={handleResizeStart}
-      />
-    </ErrorBoundary>
-  );
+	return (
+		<ErrorBoundary>
+			<AppLayout
+				centerTab={centerTab}
+				setCenterTab={setCenterTab}
+				sidebarWidth={sidebarWidth}
+				handleResizeStart={handleResizeStart}
+			/>
+		</ErrorBoundary>
+	);
 }
 
 export default App;

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

@@ -44,5 +44,6 @@ describe("i18n configuration", () => {
     const i18n = await import("../../lib/i18n");
     await i18n.default.changeLanguage("zh");
     expect(i18n.default.t("app.title")).toBe("Pi Agent");
+    expect(i18n.default.t("sidebar.explorer")).toBe("资源管理器");
   });
 });

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

@@ -1,37 +1,40 @@
-import "@testing-library/jest-dom/vitest";
+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,
-  }),
+	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,
-  };
+	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__/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/agent/src/mainview/components/chat/ChatPanel.tsx

@@ -6,97 +6,97 @@ 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 { 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,
-  });
+	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]);
+	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>
+	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 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>
-  );
+			<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/common/ErrorBoundary.tsx

@@ -1,58 +1 @@
-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;
-  }
-}
+export { ErrorBoundary } from "@shared/components/ErrorBoundary";

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

@@ -4,6 +4,7 @@ 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"}

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

@@ -6,6 +6,7 @@ export function ThemeToggle() {
 
   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"}