@dyyz1993/create-agent 2.0.0 → 2.0.1

package/templates/agent/src/gateway/ws-handler.ts

@@ -13,74 +13,102 @@ import { createLogger } from "../shared/lib/logger";
 const log = createLogger("gateway");
 
 function safeEqual(a: string, b: string): boolean {
-  const bufA = Buffer.from(a);
-  const bufB = Buffer.from(b);
-  if (bufA.length !== bufB.length) return false;
-  return timingSafeEqual(bufA, bufB);
+	const bufA = Buffer.from(a);
+	const bufB = Buffer.from(b);
+	if (bufA.length !== bufB.length) return false;
+	return timingSafeEqual(bufA, bufB);
 }
 
 export interface WsHandlerDeps {
-  config: { readonly port: number; readonly authToken: string; readonly maxUploadSize: number };
+	config: { readonly port: number; readonly authToken: string; readonly maxUploadSize: number };
 }
 
 export function createWsHandler(httpServer: Server, deps: WsHandlerDeps): WebSocketServer {
-  const { config: cfg } = deps;
-  const wss = new WebSocketServer({ server: httpServer, path: "/ws" });
+	const { config: cfg } = deps;
+	const wss = new WebSocketServer({ server: httpServer, path: "/ws" });
 
-  wss.on("connection", (ws: WebSocket, req) => {
-    // Token 验证
-    const url = req.url ? new URL(req.url, "http://localhost") : null;
-    const token = url?.searchParams.get("token");
-    if (!safeEqual(token || "", cfg.authToken)) {
-      log.warn("Connection rejected: invalid token");
-      ws.close(4001, "Unauthorized");
-      return;
-    }
+	wss.on("connection", (ws: WebSocket, req) => {
+		// Token 验证（header 优先，query fallback）
+		const url = req.url ? new URL(req.url, "http://localhost") : null;
+		const headerToken = (req.headers["sec-websocket-protocol"] as string) || undefined;
+		const queryToken = url?.searchParams.get("token");
+		const token = headerToken || queryToken;
+		if (!safeEqual(token || "", cfg.authToken)) {
+			log.warn("Connection rejected: invalid token", {
+				providedPrefix: token ? `${token.substring(0, 4)}***` : "(none)",
+			});
+			ws.close(4001, "Unauthorized");
+			return;
+		}
 
-    log.info("Client connected", { total: wss.clients.size });
+		log.info("Client connected", { total: wss.clients.size });
 
-    const wsTransport = {
-      send: async (message: unknown): Promise<void> => {
-        if (ws.readyState === WebSocket.OPEN) {
-          ws.send(JSON.stringify(message));
-        }
-      },
-      onMessage: (handler: (message: unknown) => void): (() => void) => {
-        const listener = (data: Buffer) => {
-          try {
-            const msg = JSON.parse(data.toString());
-            handler(msg);
-          } catch (err) {
-            log.error("Failed to parse message", { error: err instanceof Error ? err.message : String(err) });
-          }
-        };
-        ws.on("message", listener);
-        return () => ws.off("message", listener);
-      },
-      onError: (): (() => void) => {
-        return () => {};
-      },
-      onDisconnect: (): (() => void) => {
-        return () => {};
-      },
-      isConnected: (): boolean => ws.readyState === WebSocket.OPEN,
-      close: (): void => {},
-    };
+		const PING_INTERVAL = 30000;
+		let pongReceived = true;
+		const pingTimer = setInterval(() => {
+			if (ws.readyState !== WebSocket.OPEN) {
+				clearInterval(pingTimer);
+				return;
+			}
+			if (!pongReceived) {
+				log.warn("Client heartbeat timeout, closing connection");
+				clearInterval(pingTimer);
+				ws.terminate();
+				return;
+			}
+			pongReceived = false;
+			ws.ping();
+		}, PING_INTERVAL);
 
-    const rpcServer = new RPCServer(wsTransport as Transport);
+		ws.on("pong", () => {
+			pongReceived = true;
+		});
 
-    // 自动导入并注册所有 handlers
-    registerAllHandlers(rpcServer, { platform: "web" });
+		const wsTransport = {
+			send: async (message: unknown): Promise<void> => {
+				if (ws.readyState === WebSocket.OPEN) {
+					ws.send(JSON.stringify(message));
+				}
+			},
+			onMessage: (handler: (message: unknown) => void): (() => void) => {
+				const listener = (data: Buffer) => {
+					try {
+						const msg = JSON.parse(data.toString());
+						handler(msg);
+					} catch (err) {
+						log.error("Failed to parse message", {
+							error: err instanceof Error ? err.message : String(err),
+						});
+					}
+				};
+				ws.on("message", listener);
+				return () => ws.off("message", listener);
+			},
+			onError: (): (() => void) => {
+				return () => {};
+			},
+			onDisconnect: (): (() => void) => {
+				return () => {};
+			},
+			isConnected: (): boolean => ws.readyState === WebSocket.OPEN,
+			close: (): void => {},
+		};
 
-    ws.on("close", () => {
-      log.info("Client disconnected", { total: wss.clients.size });
-      rpcServer.close();
-    });
+		const rpcServer = new RPCServer(wsTransport as Transport);
 
-    ws.on("error", (err: Error) => {
-      log.error("Client error", { error: err.message });
-    });
-  });
+		// 自动导入并注册所有 handlers
+		registerAllHandlers(rpcServer, { platform: "web" });
 
-  return wss;
+		ws.on("close", () => {
+			if (pingTimer) clearInterval(pingTimer);
+			log.info("Client disconnected", { total: wss.clients.size });
+			rpcServer.close();
+		});
+
+		ws.on("error", (err: Error) => {
+			log.error("Client error", { error: err.message });
+		});
+	});
+
+	return wss;
 }

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/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"}