@dyyz1993/create-agent 1.9.0

package/templates/chat/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "pi-chat-app",
+	"version": "1.0.0",
+	"description": "Chat-focused template",
+	"scripts": {
+		"start": "vite build && electrobun dev",
+		"dev": "electrobun dev --watch",
+		"dev:web": "bun scripts/dev.ts",
+		"dev:server": "bun src/server.ts",
+		"build": "vite build",
+		"build:canary": "vite build && electrobun build --env=canary",
+		"lint": "eslint .",
+		"lint:fix": "eslint . --fix",
+		"prepare": "husky",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:coverage": "vitest run --coverage"
+	},
+	"dependencies": {
+		"@dyyz1993/rpc-core": "^1.2.0",
+		"@tanstack/react-virtual": "^3.13.24",
+		"electrobun": "1.13.1",
+		"i18next": "^24.2.2",
+		"i18next-browser-languagedetector": "^8.0.4",
+		"lucide-react": "^1.9.0",
+		"prism-react-renderer": "^2.4.1",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-i18next": "^15.4.1",
+		"react-markdown": "^10.1.0",
+		"remark-gfm": "^4.0.1",
+		"zustand": "^5.0.12"
+	},
+	"devDependencies": {
+		"@dyyz1993/eslint-plugin-rpc": "workspace:*",
+		"@eslint/js": "^9.0.0",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
+		"@types/bun": "latest",
+		"@types/react": "^18.3.12",
+		"@types/react-dom": "^18.3.1",
+		"@types/ws": "^8.18.1",
+		"@vitejs/plugin-react": "^4.3.4",
+		"autoprefixer": "^10.4.20",
+		"concurrently": "^9.1.0",
+		"eslint": "^9.0.0",
+		"happy-dom": "^20.9.0",
+		"husky": "^9.1.0",
+		"jsdom": "^29.1.1",
+		"postcss": "^8.4.49",
+		"tailwindcss": "^3.4.16",
+		"typescript": "^5.7.2",
+		"typescript-eslint": "^8.0.0",
+		"vite": "^6.0.3",
+		"vitest": "^4.1.5"
+	}
+}

package/templates/chat/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

package/templates/chat/scripts/dev.ts

@@ -0,0 +1,138 @@
+/**
+ * Dev orchestration script — single command to start backend + Vite.
+ *
+ * Usage: bun run dev:web
+ *
+ * 1. Starts backend server (dynamic port, writes to .server-port)
+ * 2. Waits for .server-port to appear
+ * 3. Starts Vite dev server (reads backend port for proxy)
+ * 4. On Ctrl+C / SIGTERM: kills both processes, cleans up .server-port
+ */
+
+import { spawn } from "child_process";
+import { existsSync, readFileSync, unlinkSync } from "fs";
+import { resolve } from "path";
+
+const ROOT = resolve(import.meta.dir, "..");
+const PORT_FILE = resolve(ROOT, ".server-port");
+const MAX_WAIT_MS = 10000;
+const POLL_INTERVAL_MS = 100;
+
+let backend: ReturnType<typeof spawn> | null = null;
+let vite: ReturnType<typeof spawn> | null = null;
+let shuttingDown = false;
+
+function cleanup() {
+  if (shuttingDown) return;
+  shuttingDown = true;
+
+  if (vite && !vite.killed) {
+    vite.kill("SIGTERM");
+  }
+  if (backend && !backend.killed) {
+    backend.kill("SIGTERM");
+  }
+  try { if (existsSync(PORT_FILE)) unlinkSync(PORT_FILE); } catch { /* ignore cleanup errors */ }
+
+  setTimeout(() => {
+    if (backend && !backend.killed) backend.kill("SIGKILL");
+    if (vite && !vite.killed) vite.kill("SIGKILL");
+    process.exit(0);
+  }, 3000);
+}
+
+process.on("SIGINT", cleanup);
+process.on("SIGTERM", cleanup);
+process.on("exit", () => {
+  try { if (existsSync(PORT_FILE)) unlinkSync(PORT_FILE); } catch { /* ignore */ }
+});
+
+function log(tag: string, msg: string) {
+  console.log(`[${tag}] ${msg}`);
+}
+
+function waitForPortFile(): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const start = Date.now();
+    const check = () => {
+      if (existsSync(PORT_FILE)) {
+        try {
+          const port = parseInt(readFileSync(PORT_FILE, "utf-8").trim());
+          if (port > 0) { resolve(port); return; }
+        } catch { /* ignore parse errors */ }
+      }
+      if (Date.now() - start > MAX_WAIT_MS) {
+        reject(new Error("Timed out waiting for backend to start"));
+        return;
+      }
+      setTimeout(check, POLL_INTERVAL_MS);
+    };
+    check();
+  });
+}
+
+async function main() {
+  log("dev", "Starting backend server...");
+
+  backend = spawn("bun", ["src/server.ts"], {
+    cwd: ROOT,
+    stdio: ["pipe", "pipe", "pipe"],
+  });
+
+  backend.stdout?.on("data", (data: Buffer) => {
+    data.toString().split("\n").filter(Boolean).forEach((line) => {
+      log("backend", line);
+    });
+  });
+
+  backend.stderr?.on("data", (data: Buffer) => {
+    data.toString().split("\n").filter(Boolean).forEach((line) => {
+      log("backend", line);
+    });
+  });
+
+  backend.on("exit", (code) => {
+    if (!shuttingDown) {
+      log("backend", `exited with code ${code}`);
+      cleanup();
+    }
+  });
+
+  const backendPort = await waitForPortFile();
+  log("dev", `Backend ready on port ${backendPort}`);
+
+  log("dev", "Starting Vite dev server...");
+  vite = spawn("vite", [], {
+    cwd: ROOT,
+    stdio: ["pipe", "pipe", "pipe"],
+    env: { ...process.env },
+  });
+
+  vite.stdout?.on("data", (data: Buffer) => {
+    data.toString().split("\n").filter(Boolean).forEach((line) => {
+      log("vite", line);
+    });
+  });
+
+  vite.stderr?.on("data", (data: Buffer) => {
+    data.toString().split("\n").filter(Boolean).forEach((line) => {
+      log("vite", line);
+    });
+  });
+
+  vite.on("exit", (code) => {
+    if (!shuttingDown) {
+      log("vite", `exited with code ${code}`);
+      cleanup();
+    }
+  });
+
+  log("dev", `Proxy: Vite → http://localhost:${backendPort}`);
+  log("dev", "Press Ctrl+C to stop both servers");
+}
+
+main().catch((err) => {
+  console.error("Dev startup failed:", err.message);
+  cleanup();
+  process.exit(1);
+});

package/templates/chat/src/__tests__/server-config.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from "vitest";
+import { parseEnvInt } from "../server-config";
+
+describe("parseEnvInt", () => {
+  it("should return default when value is undefined", () => {
+    expect(parseEnvInt("TEST_KEY", undefined, 3100, 1024, 65535)).toBe(3100);
+  });
+
+  it("should return default when value is empty string", () => {
+    expect(parseEnvInt("TEST_KEY", "", 3100, 1024, 65535)).toBe(3100);
+  });
+
+  it("should parse valid number", () => {
+    expect(parseEnvInt("TEST_KEY", "8080", 3100, 1024, 65535)).toBe(8080);
+  });
+
+  it("should return default for NaN input", () => {
+    expect(parseEnvInt("TEST_KEY", "abc", 3100, 1024, 65535)).toBe(3100);
+  });
+
+  it("should return default for out-of-range value (too low)", () => {
+    expect(parseEnvInt("TEST_KEY", "80", 3100, 1024, 65535)).toBe(3100);
+  });
+
+  it("should return default for out-of-range value (too high)", () => {
+    expect(parseEnvInt("TEST_KEY", "99999", 3100, 1024, 65535)).toBe(3100);
+  });
+
+  it("should accept boundary min value", () => {
+    expect(parseEnvInt("TEST_KEY", "1024", 3100, 1024, 65535)).toBe(1024);
+  });
+
+  it("should accept boundary max value", () => {
+    expect(parseEnvInt("TEST_KEY", "65535", 3100, 1024, 65535)).toBe(65535);
+  });
+});
+
+describe("server-config exports", () => {
+  it("should export config with all required fields", async () => {
+    const { config } = await import("../server-config");
+    expect(config).toHaveProperty("port");
+    expect(config).toHaveProperty("authToken");
+    expect(config).toHaveProperty("maxUploadSize");
+    expect(config).toHaveProperty("logDir");
+    expect(config).toHaveProperty("corsOrigin");
+    expect(typeof config.port).toBe("number");
+    expect(typeof config.authToken).toBe("string");
+    expect(typeof config.maxUploadSize).toBe("number");
+    expect(typeof config.corsOrigin).toBe("string");
+  });
+
+  it("should have sensible defaults", async () => {
+    const { config } = await import("../server-config");
+    expect(config.port).toBeGreaterThanOrEqual(1024);
+    expect(config.port).toBeLessThanOrEqual(65535);
+    expect(config.maxUploadSize).toBeGreaterThan(0);
+    expect(config.corsOrigin).toBeTruthy();
+  });
+});

package/templates/chat/src/bun/index.ts

@@ -0,0 +1,72 @@
+import { BrowserWindow, BrowserView, Updater, ApplicationMenu } from "electrobun/bun";
+import { RPCServer } from "@dyyz1993/rpc-core";
+import { ElectrobunTransport } from "../gateway/ipc-transport";
+import { registerAllHandlers } from "../shared/register-all-handlers";
+import { createLogger, configureLogDir } from "../shared/lib/logger";
+
+configureLogDir("logs");
+const log = createLogger("server");
+
+async function getMainViewUrl(): Promise<string> {
+  const channel = await Updater.localInfo.channel();
+  const DEV_SERVER_URL = "http://localhost:5173";
+  if (channel === "dev") {
+    try {
+      await fetch(DEV_SERVER_URL, { method: "HEAD" });
+      log.info(`HMR enabled: Using Vite dev server at ${DEV_SERVER_URL}`);
+      return DEV_SERVER_URL;
+    } catch {
+      log.info("Vite dev server not running.");
+    }
+  }
+  return "views://mainview/index.html";
+}
+
+const url = await getMainViewUrl();
+
+const transport = new ElectrobunTransport();
+const server = new RPCServer(transport);
+
+// --- 注册 RPC handlers（自动导入 handlers barrel） ---
+registerAllHandlers(server, { platform: "desktop" });
+
+// --- 创建窗口 ---
+
+const mainWindow = new BrowserWindow({
+  title: "Pi Agent",
+  url,
+  frame: {
+    width: 1200,
+    height: 800,
+    x: 200,
+    y: 200,
+  },
+  rpc: BrowserView.defineRPC({
+    maxRequestTime: 60000,
+    handlers: {
+      requests: {},
+      messages: {
+        // @ts-expect-error Electrobun's messages schema doesn't support custom keys at compile time
+        "rpc-message": (data: unknown) => {
+          try {
+            const message = typeof data === "string" ? JSON.parse(data) : data;
+            transport.handleMessage(message);
+          } catch (error) {
+            log.error("Failed to parse RPC message", { error });
+          }
+        },
+      },
+    },
+  }),
+});
+
+transport.setBrowserView(mainWindow.webview);
+
+log.info("Pi Agent desktop app started!");
+
+ApplicationMenu.setApplicationMenu([
+  { label: "Pi Agent", submenu: [{ role: "about" }, { type: "separator" }, { role: "hide" }, { role: "hideOthers" }, { role: "showAll" }, { type: "separator" }, { role: "quit" }] },
+  { label: "Edit", submenu: [{ role: "undo" }, { role: "redo" }, { type: "separator" }, { role: "cut" }, { role: "copy" }, { role: "paste" }, { role: "selectAll" }] },
+  { label: "View", submenu: [{ role: "toggleFullScreen" }] },
+  { label: "Window", submenu: [{ role: "minimize" }, { role: "zoom" }] },
+]);

package/templates/chat/src/gateway/__tests__/ws-handler.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+vi.mock("../../server-config", () => ({
+  config: {
+    authToken: "test-token",
+    port: 3100,
+    corsOrigin: "http://localhost:5173",
+  },
+}));
+
+vi.mock("../../shared/lib/logger", () => ({
+  createLogger: () => ({
+    info: vi.fn(),
+    error: vi.fn(),
+    warn: vi.fn(),
+    debug: vi.fn(),
+  }),
+}));
+
+describe("WebSocket Handler", () => {
+  beforeEach(() => {
+    vi.resetModules();
+  });
+
+  it("should reject connections without token", async () => {
+    const { config } = await import("../../server-config");
+
+    const token = null;
+    const isValid = token === config.authToken;
+    expect(isValid).toBe(false);
+  });
+
+  it("should reject wrong token", async () => {
+    const { config } = await import("../../server-config");
+
+    const token = "wrong-token";
+    const isValid = token === config.authToken;
+    expect(isValid).toBe(false);
+  });
+
+  it("should accept correct token", async () => {
+    const { config } = await import("../../server-config");
+
+    const token = "test-token";
+    const isValid = token === config.authToken;
+    expect(isValid).toBe(true);
+  });
+});

package/templates/chat/src/gateway/http-routes.ts

@@ -0,0 +1 @@
+export { createHttpHandler, type HttpRouteDeps } from "@shared/http-routes";

package/templates/chat/src/gateway/ipc-transport.ts

@@ -0,0 +1,68 @@
+import type { Transport, MessageHandler, ErrorHandler } from "@dyyz1993/rpc-core";
+
+/**
+ * Transport that bridges between Bun and Webview via:
+ * - Bun → Browser: executeJavascript calls window.__piAgentIPC()
+ * - Browser → Bun: __electrobunBunBridge.postMessage with Electrobun message format
+ */
+export class ElectrobunTransport implements Transport {
+  private messageHandlers: Set<MessageHandler> = new Set();
+  private errorHandlers: Set<ErrorHandler> = new Set();
+  private browserView: { executeJavascript: (js: string) => void } | null = null;
+  private closed = false;
+
+  setBrowserView(view: { executeJavascript: (js: string) => void }): void {
+    this.browserView = view;
+  }
+
+  async send(message: unknown): Promise<void> {
+    if (this.closed) {
+      throw new Error("Transport is closed");
+    }
+    if (!this.browserView) {
+      throw new Error("BrowserView not set");
+    }
+
+    // Pass JSON directly as a JS expression — JSON is valid JavaScript
+    const msgJson = JSON.stringify(message);
+    this.browserView.executeJavascript(
+      `if(typeof window.__piAgentIPC==="function"){window.__piAgentIPC(${msgJson})}`
+    );
+  }
+
+  onMessage(handler: MessageHandler): () => void {
+    this.messageHandlers.add(handler);
+    return () => {
+      this.messageHandlers.delete(handler);
+    };
+  }
+
+  onError(handler: ErrorHandler): () => void {
+    this.errorHandlers.add(handler);
+    return () => {
+      this.errorHandlers.delete(handler);
+    };
+  }
+
+  onDisconnect(): () => void {
+    return () => {};
+  }
+
+  isConnected(): boolean {
+    return this.browserView !== null && !this.closed;
+  }
+
+  close(): void {
+    this.closed = true;
+    this.messageHandlers.clear();
+    this.errorHandlers.clear();
+    this.browserView = null;
+  }
+
+  handleMessage(message: unknown): void {
+    if (this.closed) return;
+    for (const handler of this.messageHandlers) {
+      handler(message);
+    }
+  }
+}

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

@@ -0,0 +1,86 @@
+/**
+ * WebSocket handler for the web gateway.
+ * Handles WS connections, auth, and bridges to RPCServer.
+ */
+
+import type { Server } from "http";
+import { WebSocketServer, WebSocket } from "ws";
+import { timingSafeEqual } from "crypto";
+import { RPCServer, type Transport } from "@dyyz1993/rpc-core";
+import { registerAllHandlers } from "../shared/register-all-handlers";
+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);
+}
+
+export interface WsHandlerDeps {
+  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" });
+
+  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;
+    }
+
+    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 rpcServer = new RPCServer(wsTransport as Transport);
+
+    // 自动导入并注册所有 handlers
+    registerAllHandlers(rpcServer, { platform: "web" });
+
+    ws.on("close", () => {
+      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/chat/src/mainview/App.tsx

@@ -0,0 +1,108 @@
+import { useEffect } from "react";
+import { Wifi, Monitor } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { apiClient } from "./lib/api-client";
+import { useConnectionStore } from "./stores/use-connection-store";
+import { useLogStore } from "./stores/use-log-store";
+import { useChatStore } from "./stores/use-chat-store";
+import { useSidebarStore } from "./stores/use-sidebar-store";
+import { useBreakpointSync } from "./hooks/use-breakpoint";
+import { ActivityBar } from "./components/activity-bar/ActivityBar";
+import { MobileTabBar } from "./components/activity-bar/MobileTabBar";
+import { ChatPanel } from "./components/chat/ChatPanel";
+
+function App() {
+  const { t } = useTranslation();
+  const mode = useConnectionStore((s) => s.mode);
+  const ready = useConnectionStore((s) => s.ready);
+  const initializeConnection = useConnectionStore((s) => s.initializeConnection);
+  const addLog = useLogStore((s) => s.addLog);
+
+  const breakpoint = useSidebarStore((s) => s.breakpoint);
+
+  useBreakpointSync();
+
+  const isMobile = breakpoint === "mobile";
+
+  useEffect(() => {
+    initializeConnection();
+  }, [initializeConnection]);
+
+  useEffect(() => {
+    if (!ready) return;
+
+    let subscriptionId: string | null = null;
+
+    const setup = async () => {
+      subscriptionId = await apiClient.subscribe("chat.message", (payload) => {
+        useChatStore.getState().addMessage({
+          id: payload.id,
+          role: payload.role,
+          content: payload.content,
+          timestamp: payload.timestamp,
+        });
+      }, {});
+      addLog("Subscribed to chat.message");
+
+      try {
+        const history = await apiClient.call("chat.list", { limit: 100 });
+        if (history.messages.length > 0) {
+          useChatStore.getState().setMessages(
+            history.messages.map((m: { id: string; role: "user" | "assistant"; content: string; timestamp: number }) => ({
+              id: m.id,
+              role: m.role,
+              content: m.content,
+              timestamp: m.timestamp,
+            }))
+          );
+          addLog(`Loaded ${history.messages.length} history messages`);
+        }
+      } catch (err) {
+        addLog(`Failed to load history: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    };
+    setup();
+
+    return () => {
+      if (subscriptionId) {
+        apiClient.unsubscribe(subscriptionId);
+      }
+    };
+  }, [ready, addLog]);
+
+  if (!ready) {
+    return (
+      <div className="h-screen bg-[var(--color-bg-primary)] flex items-center justify-center">
+        <div className="text-center">
+          <div className="inline-block w-8 h-8 border-2 border-[var(--color-text-accent)] border-t-transparent rounded-full animate-spin mb-4" />
+          <div className="text-[var(--color-text-tertiary)] text-sm">{t("app.connecting")}</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] flex flex-col overflow-hidden">
+      {!isMobile && (
+        <div className="h-8 bg-[var(--color-bg-secondary)] flex items-center px-3 text-xs border-b border-[var(--color-border-primary)] flex-shrink-0">
+          <span className={`px-2 py-0.5 rounded flex items-center gap-1 ${mode === "desktop" ? "bg-green-600" : "bg-blue-600"}`}>
+            {mode === "desktop" ? <Monitor className="w-3 h-3" /> : <Wifi className="w-3 h-3" />}
+            {mode === "desktop" ? t("app.mode.desktop") : t("app.mode.web")}
+          </span>
+          <span className="ml-3 text-[var(--color-text-tertiary)]">{t("app.title")}</span>
+        </div>
+      )}
+
+      <div className="flex-1 flex overflow-hidden relative">
+        {!isMobile && <ActivityBar />}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <ChatPanel />
+        </div>
+      </div>
+
+      {isMobile && <MobileTabBar />}
+    </div>
+  );
+}
+
+export default App;