@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/browser-agent/src/bun/index.ts

@@ -0,0 +1,130 @@
+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";
+import { config } from "../server-config";
+
+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!");
+
+// ==============================
+// Optional: Web service for LAN access (hybrid mode)
+// ==============================
+if (config.enableWebService) {
+	try {
+		const { createWebServer, getLocalIP } = await import("../shared/lib/web-server");
+
+		const webServer = await createWebServer({
+			port: config.port,
+			authToken: config.authToken,
+			maxUploadSize: config.maxUploadSize,
+			corsOrigin: "*",
+		});
+
+		const localIp = getLocalIP();
+		log.info(`[Hybrid] Web service started: http://${localIp}:${webServer.port}`);
+		log.info(`[Hybrid] RPC: POST http://${localIp}:${webServer.port}/api/rpc`);
+		log.info(`[Hybrid] SSE: GET  http://${localIp}:${webServer.port}/api/events`);
+		log.info(
+			`[Hybrid] Share URL: http://${localIp}:${webServer.port}?token=${webServer.authToken}`
+		);
+
+		server.emitEvent("hybrid.ready", {
+			url: `http://${localIp}:${webServer.port}`,
+			rpcUrl: `http://${localIp}:${webServer.port}/api/rpc`,
+			sseUrl: `http://${localIp}:${webServer.port}/api/events`,
+			token: webServer.authToken,
+		});
+	} catch (err) {
+		log.error("[Hybrid] Failed to start web service", {
+			error: err instanceof Error ? err.message : String(err),
+		});
+	}
+}
+
+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/browser-agent/src/bun/three.d.ts

@@ -0,0 +1 @@
+declare module "three";

package/templates/browser-agent/src/gateway/http-routes.ts

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

package/templates/browser-agent/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/browser-agent/src/gateway/sse-transport.ts

@@ -0,0 +1,221 @@
+/**
+ * SSE + HTTP Transport for the web gateway.
+ *
+ * Replaces the WebSocket handler. Two HTTP endpoints:
+ *   GET  /api/events?token=xxx  → opens an SSE stream (server→client push + response delivery)
+ *   POST /api/rpc?token=xxx      → sends an RPC request (client→server)
+ *
+ * Each SSE client gets its own RPCServer instance (matching the previous
+ * per-connection WebSocket model). POST /api/rpc carries the clientId to
+ * route the message into the correct RPCServer.
+ */
+
+import type { IncomingMessage, Server, ServerResponse } from "http";
+import { randomUUID, 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 as unknown as Buffer, bufB as unknown as Buffer);
+}
+
+export interface SseHandlerDeps {
+	config: { readonly port: number; readonly authToken: string; readonly maxUploadSize: number };
+}
+
+interface SseClient {
+	id: string;
+	res: ServerResponse;
+	rpcServer: RPCServer;
+	transport: Transport;
+	messageHandlers: Set<(msg: unknown) => void>;
+	cleanup: () => void;
+}
+
+export interface SseHandler {
+	clients: Map<string, SseClient>;
+	handleSseConnect: (req: IncomingMessage, res: ServerResponse) => void;
+	handleRpcPost: (req: IncomingMessage, res: ServerResponse) => Promise<void>;
+	close: () => void;
+}
+
+/**
+ * Build a Transport that bridges an SSE response stream (for server→client)
+ * with the accumulated message handlers (fed by POST /api/rpc).
+ */
+function createSseTransport(client: SseClient): Transport {
+	const send = async (message: unknown): Promise<void> => {
+		if (client.res.writableEnded) return;
+		client.res.write(`data: ${JSON.stringify(message)}\n\n`);
+	};
+
+	const onMessage = (handler: (msg: unknown) => void): (() => void) => {
+		client.messageHandlers.add(handler);
+		return () => {
+			client.messageHandlers.delete(handler);
+		};
+	};
+
+	const onError = (): (() => void) => {
+		return () => {};
+	};
+
+	const onDisconnect = (handler: () => void): (() => void) => {
+		// onClose is wired in handleSseConnect; expose a registration stub
+		client.cleanup = handler;
+		return () => {
+			if (client.cleanup === handler) client.cleanup = () => {};
+		};
+	};
+
+	return {
+		send,
+		onMessage,
+		onError,
+		onDisconnect,
+		isConnected: () => !client.res.writableEnded,
+		close: () => {},
+	};
+}
+
+export function createSseHandler(_httpServer: Server, deps: SseHandlerDeps): SseHandler {
+	void deps; // deps kept for API symmetry with createWsHandler; config is enforced by http-routes auth
+	const clients = new Map<string, SseClient>();
+
+	function handleSseConnect(req: IncomingMessage, res: ServerResponse): void {
+		// SSE response headers — disable proxy buffering for real-time streaming
+		res.writeHead(200, {
+			"Content-Type": "text/event-stream",
+			"Cache-Control": "no-cache, no-transform",
+			Connection: "keep-alive",
+			"X-Accel-Buffering": "no",
+			"Access-Control-Allow-Origin": "*",
+		});
+
+		const id = randomUUID();
+		const messageHandlers = new Set<(msg: unknown) => void>();
+
+		const client: SseClient = {
+			id,
+			res,
+			messageHandlers,
+			rpcServer: undefined as unknown as RPCServer,
+			transport: undefined as unknown as Transport,
+			cleanup: () => {},
+		};
+
+		client.transport = createSseTransport(client);
+		client.rpcServer = new RPCServer(client.transport);
+		registerAllHandlers(client.rpcServer, { platform: "web" });
+
+		clients.set(id, client);
+
+		// Send the clientId as the first event so the client can use it for POSTs
+		res.write(`event: ready\ndata: ${JSON.stringify({ clientId: id })}\n\n`);
+
+		// Heartbeat every 25s to keep proxies from timing out
+		const heartbeat = setInterval(() => {
+			if (res.writableEnded) return;
+			res.write(": ping\n\n");
+		}, 25000);
+
+		log.info("SSE client connected", { id, total: clients.size });
+
+		const onClose = (): void => {
+			clearInterval(heartbeat);
+			clients.delete(id);
+			client.cleanup();
+			client.rpcServer.close();
+			log.info("SSE client disconnected", { id, total: clients.size });
+		};
+
+		req.on("close", onClose);
+		req.on("error", onClose);
+	}
+
+	async function handleRpcPost(req: IncomingMessage, res: ServerResponse): Promise<void> {
+		const url = req.url ? new URL(req.url, "http://localhost") : null;
+		const clientId = url?.searchParams.get("clientId");
+
+		if (!clientId) {
+			res.writeHead(400, { "Content-Type": "application/json" });
+			res.end(JSON.stringify({ error: "Missing clientId" }));
+			return;
+		}
+
+		const client = clients.get(clientId);
+		if (!client) {
+			res.writeHead(404, { "Content-Type": "application/json" });
+			res.end(JSON.stringify({ error: "Unknown clientId (SSE not connected)" }));
+			return;
+		}
+
+		// Read JSON body
+		let body = "";
+		for await (const chunk of req) {
+			body += typeof chunk === "string" ? chunk : Buffer.from(chunk).toString("utf8");
+		}
+
+		let message: unknown;
+		try {
+			message = JSON.parse(body);
+		} catch {
+			res.writeHead(400, { "Content-Type": "application/json" });
+			res.end(JSON.stringify({ error: "Invalid JSON" }));
+			return;
+		}
+
+		// Acknowledge receipt — the actual RPC response will arrive via the SSE stream
+		res.writeHead(202, { "Content-Type": "application/json" });
+		res.end(JSON.stringify({ accepted: true }));
+
+		// Route the message into the client's RPCServer via its transport handlers
+		const msgType = (message as any)?.type;
+		const msgMethod = (message as any)?.method;
+		log.info("RPC routing", { clientId, msgType, msgMethod, handlerCount: client.messageHandlers.size });
+		for (const handler of client.messageHandlers) {
+			try {
+				handler(message);
+			} catch (err) {
+				log.error("RPC handler error", { clientId, msgMethod, error: err instanceof Error ? err.message : String(err) });
+			}
+		}
+	}
+
+	return {
+		clients,
+		handleSseConnect,
+		handleRpcPost,
+		close: (): void => {
+			for (const client of clients.values()) {
+				client.rpcServer.close();
+				if (!client.res.writableEnded) {
+					client.res.end();
+				}
+			}
+			clients.clear();
+		},
+	};
+}
+
+export function verifyToken(req: IncomingMessage, authToken: string): boolean {
+	const auth = req.headers["authorization"];
+	if (auth && safeEqual(auth, `Bearer ${authToken}`)) return true;
+
+	if (req.url) {
+		try {
+			const url = new URL(req.url, "http://localhost");
+			const token = url.searchParams.get("token");
+			if (token && safeEqual(token, authToken)) return true;
+		} catch {
+			/* invalid URL */
+		}
+	}
+	return false;
+}

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

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+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 } from "./components/layout/AppLayout";
+import { ErrorBoundary as _EB } from "./components/common/ErrorBoundary";
+
+const ErrorBoundary = _EB as unknown as React.FC<{ children: ReactNode }>;
+
+function App() {
+	const { t } = useTranslation();
+	const ready = useConnectionStore((s) => s.ready);
+
+	useBreakpointSync();
+	useRpcInit();
+
+	const { sidebarWidth, handleResizeStart } = useSidebarResize();
+
+	// RPC 连接尚未建立时显示加载
+	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 (
+		<ErrorBoundary>
+			<AppLayout
+				sidebarWidth={sidebarWidth}
+				handleResizeStart={handleResizeStart}
+			/>
+		</ErrorBoundary>
+	);
+}
+
+export default App;

package/templates/browser-agent/src/mainview/__tests__/hooks/use-rpc-init.test.ts

@@ -0,0 +1,202 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+
+const mockInitializeConnection = vi.fn();
+const mockAddLog = vi.fn();
+const mockSubscribe = vi.fn();
+const mockUnsubscribe = vi.fn();
+const mockCall = vi.fn();
+
+const mockChatSetMessages = vi.fn();
+const mockChatSetState = vi.fn();
+
+let mockConnectionState: Record<string, unknown>;
+let mockLogState: Record<string, unknown>;
+let mockChatState: Record<string, unknown>;
+
+function resetMockConnectionState(overrides?: Partial<Record<string, unknown>>) {
+	mockConnectionState = {
+		ready: false,
+		initializeConnection: mockInitializeConnection,
+		...overrides,
+	};
+}
+
+function resetMockLogState(overrides?: Partial<Record<string, unknown>>) {
+	mockLogState = {
+		addLog: mockAddLog,
+		...overrides,
+	};
+}
+
+function resetMockChatState(overrides?: Partial<Record<string, unknown>>) {
+	mockChatState = {
+		setMessages: mockChatSetMessages,
+		messages: [],
+		...overrides,
+	};
+}
+
+vi.mock('../../stores/use-connection-store', () => {
+	return {
+		useConnectionStore: Object.assign(
+			(selector: (s: Record<string, unknown>) => unknown) => selector(mockConnectionState),
+			{
+				getState: () => mockConnectionState,
+				setState: (
+					partial:
+						| Partial<Record<string, unknown>>
+						| ((prev: Record<string, unknown>) => Partial<Record<string, unknown>>),
+				) => {
+					const next = typeof partial === 'function' ? partial(mockConnectionState) : partial;
+					mockConnectionState = { ...mockConnectionState, ...next };
+				},
+			},
+		),
+	};
+});
+
+vi.mock('../../stores/use-log-store', () => {
+	return {
+		useLogStore: Object.assign(
+			(selector: (s: Record<string, unknown>) => unknown) => selector(mockLogState),
+			{
+				getState: () => mockLogState,
+				setState: (
+					partial:
+						| Partial<Record<string, unknown>>
+						| ((prev: Record<string, unknown>) => Partial<Record<string, unknown>>),
+				) => {
+					const next = typeof partial === 'function' ? partial(mockLogState) : partial;
+					mockLogState = { ...mockLogState, ...next };
+				},
+			},
+		),
+	};
+});
+
+vi.mock('../../stores/use-chat-store', () => ({
+	useChatStore: Object.assign(
+		(selector: (s: Record<string, unknown>) => unknown) => selector(mockChatState),
+		{
+			getState: () => mockChatState,
+			setState: mockChatSetState,
+		},
+	),
+}));
+
+vi.mock('../../lib/api-client', () => ({
+	apiClient: {
+		subscribe: mockSubscribe,
+		unsubscribe: mockUnsubscribe,
+		call: mockCall,
+	},
+}));
+
+describe('useRpcInit', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockSubscribe.mockResolvedValue('sub-1');
+		mockCall.mockResolvedValue({ messages: [] });
+		resetMockLogState();
+		resetMockChatState();
+	});
+
+	it('should call initializeConnection on mount', async () => {
+		resetMockConnectionState({ ready: false });
+		const { useRpcInit } = await import('../../hooks/use-rpc-init');
+		renderHook(() => useRpcInit());
+		expect(mockInitializeConnection).toHaveBeenCalledTimes(1);
+	});
+
+	it('should not subscribe when not ready', async () => {
+		resetMockConnectionState({ ready: false });
+		const { useRpcInit } = await import('../../hooks/use-rpc-init');
+		renderHook(() => useRpcInit());
+		expect(mockSubscribe).not.toHaveBeenCalled();
+		expect(mockCall).not.toHaveBeenCalled();
+	});
+
+	it('should subscribe and load history when ready', async () => {
+		resetMockConnectionState({ ready: true });
+		const { useRpcInit } = await import('../../hooks/use-rpc-init');
+		renderHook(() => useRpcInit());
+
+		await waitFor(() => {
+			expect(mockSubscribe).toHaveBeenCalledWith('chat.message', expect.any(Function), {});
+		});
+
+		await waitFor(() => {
+			expect(mockCall).toHaveBeenCalledWith('chat.list', { limit: 100 });
+		});
+	});
+
+	it('should load history messages into chat store', async () => {
+		const messages = [
+			{ id: '1', role: 'user' as const, content: 'hello', timestamp: 1000 },
+			{ id: '2', role: 'assistant' as const, content: 'world', timestamp: 2000 },
+		];
+		mockCall.mockResolvedValue({ messages });
+
+		resetMockConnectionState({ ready: true });
+		const { useRpcInit } = await import('../../hooks/use-rpc-init');
+		renderHook(() => useRpcInit());
+
+		await waitFor(() => {
+			expect(mockChatSetMessages).toHaveBeenCalled();
+		});
+
+		expect(mockAddLog).toHaveBeenCalledWith('Loaded 2 history messages');
+	});
+
+	it('should unsubscribe on cleanup when ready', async () => {
+		resetMockConnectionState({ ready: true });
+		const { useRpcInit } = await import('../../hooks/use-rpc-init');
+		const { unmount } = renderHook(() => useRpcInit());
+
+		await waitFor(() => {
+			expect(mockSubscribe).toHaveBeenCalled();
+		});
+
+		unmount();
+		expect(mockUnsubscribe).toHaveBeenCalledWith('sub-1');
+	});
+
+	it('should handle history load failure gracefully', async () => {
+		mockCall.mockRejectedValue(new Error('Network error'));
+		resetMockConnectionState({ ready: true });
+		const { useRpcInit } = await import('../../hooks/use-rpc-init');
+		renderHook(() => useRpcInit());
+
+		await waitFor(() => {
+			expect(mockAddLog).toHaveBeenCalledWith(expect.stringContaining('Failed to load history'));
+		});
+	});
+
+	it('should forward chat.message payloads to chat store via setState', async () => {
+		let subscriptionHandler: ((payload: Record<string, unknown>) => void) | undefined;
+		mockSubscribe.mockImplementation(
+			async (_event: string, handler: (p: Record<string, unknown>) => void) => {
+				subscriptionHandler = handler;
+				return 'sub-1';
+			},
+		);
+
+		resetMockConnectionState({ ready: true });
+		const { useRpcInit } = await import('../../hooks/use-rpc-init');
+		renderHook(() => useRpcInit());
+
+		await waitFor(() => {
+			expect(mockSubscribe).toHaveBeenCalled();
+		});
+
+		subscriptionHandler!({
+			id: 'msg-1',
+			role: 'assistant',
+			content: 'test message',
+			timestamp: 12345,
+		});
+
+		expect(mockChatSetState).toHaveBeenCalled();
+	});
+});