@dyyz1993/create-agent 2.1.1 → 2.1.2

package/templates/cowork/src/gateway/sse-transport.ts

@@ -0,0 +1,231 @@
+/**
+ * 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 msg = message as Record<string, unknown>;
+		const msgType = msg?.type;
+		const msgMethod = msg?.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/cowork/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/cowork/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();
+	});
+});

package/templates/cowork/src/mainview/__tests__/hooks/use-sidebar-resize.test.ts

@@ -0,0 +1,127 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useSidebarStore } from "../../stores/use-sidebar-store";
+
+describe("useSidebarResize", () => {
+  beforeEach(() => {
+    act(() => {
+      useSidebarStore.setState({
+        sidebarWidth: 280,
+        isPinned: true,
+        activePanel: "explorer",
+        breakpoint: "desktop",
+        drawerOpen: false,
+      });
+    });
+  });
+
+  it("should return current sidebar width", async () => {
+    const { useSidebarResize } = await import("../../hooks/use-sidebar-resize");
+    const { result } = renderHook(() => useSidebarResize());
+    expect(result.current.sidebarWidth).toBe(280);
+  });
+
+  it("should provide handleResizeStart function", async () => {
+    const { useSidebarResize } = await import("../../hooks/use-sidebar-resize");
+    const { result } = renderHook(() => useSidebarResize());
+    expect(typeof result.current.handleResizeStart).toBe("function");
+  });
+
+  it("should update width on mouse drag", async () => {
+    const { useSidebarResize } = await import("../../hooks/use-sidebar-resize");
+    const { result } = renderHook(() => useSidebarResize());
+
+    const mouseDownEvent = new MouseEvent("mousedown", {
+      clientX: 280,
+      bubbles: true,
+    });
+    Object.defineProperty(mouseDownEvent, "preventDefault", {
+      value: vi.fn(),
+    });
+
+    act(() => {
+      result.current.handleResizeStart(mouseDownEvent);
+    });
+
+    const moveEvent = new MouseEvent("mousemove", {
+      clientX: 330,
+      bubbles: true,
+    });
+
+    act(() => {
+      window.dispatchEvent(moveEvent);
+    });
+
+    expect(useSidebarStore.getState().sidebarWidth).toBe(330);
+
+    const upEvent = new MouseEvent("mouseup");
+    act(() => {
+      window.dispatchEvent(upEvent);
+    });
+  });
+
+  it("should clean up cursor and listeners on mouseup", async () => {
+    const { useSidebarResize } = await import("../../hooks/use-sidebar-resize");
+    const { result } = renderHook(() => useSidebarResize());
+
+    const mouseDownEvent = new MouseEvent("mousedown", {
+      clientX: 280,
+      bubbles: true,
+    });
+    Object.defineProperty(mouseDownEvent, "preventDefault", {
+      value: vi.fn(),
+    });
+
+    act(() => {
+      result.current.handleResizeStart(mouseDownEvent);
+    });
+
+    expect(document.body.style.cursor).toBe("col-resize");
+    expect(document.body.style.userSelect).toBe("none");
+
+    const upEvent = new MouseEvent("mouseup");
+    act(() => {
+      window.dispatchEvent(upEvent);
+    });
+
+    expect(document.body.style.cursor).toBe("");
+    expect(document.body.style.userSelect).toBe("");
+  });
+
+  it("should clamp width to min/max bounds", async () => {
+    act(() => {
+      useSidebarStore.setState({ sidebarWidth: 200 });
+    });
+
+    const { useSidebarResize } = await import("../../hooks/use-sidebar-resize");
+    const { result } = renderHook(() => useSidebarResize());
+
+    const mouseDownEvent = new MouseEvent("mousedown", {
+      clientX: 200,
+      bubbles: true,
+    });
+    Object.defineProperty(mouseDownEvent, "preventDefault", {
+      value: vi.fn(),
+    });
+
+    act(() => {
+      result.current.handleResizeStart(mouseDownEvent);
+    });
+
+    const moveEvent = new MouseEvent("mousemove", {
+      clientX: 0,
+      bubbles: true,
+    });
+
+    act(() => {
+      window.dispatchEvent(moveEvent);
+    });
+
+    expect(useSidebarStore.getState().sidebarWidth).toBeGreaterThanOrEqual(180);
+
+    const upEvent = new MouseEvent("mouseup");
+    act(() => {
+      window.dispatchEvent(upEvent);
+    });
+  });
+});

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

@@ -0,0 +1,49 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+describe("i18n configuration", () => {
+  beforeEach(async () => {
+    vi.resetModules();
+  });
+
+  it("should export configured i18n instance", async () => {
+    const i18n = await import("../../lib/i18n");
+    expect(i18n.default).toBeDefined();
+    expect(i18n.default.isInitialized).toBe(true);
+  });
+
+  it("should have English translations", async () => {
+    const i18n = await import("../../lib/i18n");
+    expect(
+      i18n.default.getResource("en", "translation", "app.title")
+    ).toBeDefined();
+  });
+
+  it("should have Chinese translations", async () => {
+    const i18n = await import("../../lib/i18n");
+    expect(
+      i18n.default.getResource("zh", "translation", "app.title")
+    ).toBeDefined();
+  });
+
+  it("should change language", async () => {
+    const i18n = await import("../../lib/i18n");
+    await i18n.default.changeLanguage("zh");
+    expect(i18n.default.language).toBe("zh");
+
+    await i18n.default.changeLanguage("en");
+    expect(i18n.default.language).toBe("en");
+  });
+
+  it("should translate keys correctly in English", async () => {
+    const i18n = await import("../../lib/i18n");
+    await i18n.default.changeLanguage("en");
+    expect(i18n.default.t("app.title")).toBe("Browser Agent");
+  });
+
+  it("should translate keys correctly in Chinese", async () => {
+    const i18n = await import("../../lib/i18n");
+    await i18n.default.changeLanguage("zh");
+    expect(i18n.default.t("app.title")).toBe("Browser Agent");
+    expect(i18n.default.t("sidebar.explorer")).toBe("资源管理器");
+  });
+});

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

@@ -0,0 +1,40 @@
+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,
+	}),
+});
+
+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,
+	};
+})();
+
+Object.defineProperty(window, "localStorage", { value: localStorageMock });