@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/browser-agent/src/mainview/stores/use-session-store.ts

@@ -0,0 +1,151 @@
+/**
+ * Session Store — 会话管理
+ *
+ * 对应 PRD §8 数据模型：会话 CRUD、消息管理
+ */
+
+import { create } from "zustand";
+import { apiClient } from "../lib/api-client";
+
+interface Message {
+	id: string;
+	role: "user" | "agent";
+	text: string;
+	steps?: { label: string; status: string; detail?: string }[];
+	toolCalls?: { tool: string; input: string; output: string; status: string }[];
+	thinking?: string;
+	turns?: any[];
+	summary?: any;
+	error?: string;
+	at: number;
+}
+
+interface SessionSummary {
+	id: string;
+	title: string;
+	createdAt: number;
+	status: string;
+	messageCount: number;
+	assetCount: number;
+}
+
+interface SessionDetail {
+	id: string;
+	title: string;
+	messages: Message[];
+	assets: any[];
+	createdAt: number;
+	status: string;
+}
+
+interface SessionState {
+	// 会话列表
+	sessions: SessionSummary[];
+	currentSessionId: string | null;
+	currentSession: SessionDetail | null;
+	running: boolean;
+
+	// Actions
+	setRunning: (running: boolean) => void;
+	refreshSessions: () => Promise<void>;
+	createSession: (title?: string) => Promise<SessionSummary>;
+	loadSession: (id: string) => Promise<void>;
+	patchCurrentSession: (patch: Partial<SessionDetail>) => void;
+	patchLastAgentMessage: (patch: Partial<Message>) => void;
+	/** 确保 UI 有一个可用的会话（空会话或已有会话），用户能直接输入 */
+	ensureDefaultSession: () => Promise<string>;
+	/** 智能新建：当前空会话未被使用时复用，否则新建 */
+	newSessionSmart: () => Promise<string>;
+}
+
+export const useSessionStore = create<SessionState>((set, get) => ({
+	sessions: [],
+	currentSessionId: null,
+	currentSession: null,
+	running: false,
+
+	setRunning: (running) => set({ running }),
+
+	refreshSessions: async () => {
+		try {
+			const result = await apiClient.call("session.list", {});
+			set({ sessions: result.sessions });
+		} catch (err) {
+			console.error("Failed to load sessions", err);
+		}
+	},
+
+		createSession: async (title) => {
+			const result = await apiClient.call("session.create", { title }) as SessionSummary;
+			await get().refreshSessions();
+			return result;
+		},
+
+	loadSession: async (id) => {
+		try {
+			const session = await apiClient.call("session.get", { id });
+			if (session) {
+				set({ currentSessionId: id, currentSession: session });
+			}
+		} catch (err) {
+			console.error("Failed to load session", err);
+		}
+	},
+
+	patchCurrentSession: (patch) => {
+		const cur = get().currentSession;
+		if (cur) {
+			set({ currentSession: { ...cur, ...patch } });
+		}
+	},
+
+	patchLastAgentMessage: (patch) => {
+			const cur = get().currentSession;
+			if (!cur) return;
+			const msgs = [...(cur.messages || [])];
+			for (let i = msgs.length - 1; i >= 0; i--) {
+				const m = msgs[i];
+				if (!m || m.role !== "agent") continue;
+				msgs[i] = { ...m, ...patch };
+				break;
+			}
+			set({ currentSession: { ...cur, messages: msgs } });
+		},
+
+	ensureDefaultSession: async () => {
+		const state = get();
+		// 已有选中的会话 → 不动
+		if (state.currentSessionId) return state.currentSessionId;
+
+		// 刷新列表
+		await get().refreshSessions();
+		const sessions = get().sessions;
+
+		if (sessions.length > 0) {
+			// 有历史会话 → 选中第一个
+			const first = sessions[0]!;
+			await get().loadSession(first.id);
+			return first.id;
+		}
+
+		// 没有任何会话 → 创建空会话
+		const sess = await get().createSession("新会话");
+		await get().loadSession(sess.id);
+		return sess.id;
+	},
+
+	newSessionSmart: async () => {
+		const state = get();
+		// 如果当前会话是空的（没有消息），直接复用，不创建新的
+		if (state.currentSession) {
+			const msgCount = state.currentSession.messages?.length || 0;
+			if (msgCount === 0) {
+				return state.currentSessionId!;
+			}
+		}
+		// 否则创建新会话
+		const sess = await get().createSession("新会话");
+		await get().loadSession(sess.id);
+		return sess.id;
+	},
+}));

package/templates/browser-agent/src/mainview/stores/use-sidebar-store.ts

@@ -0,0 +1,161 @@
+import { create } from "zustand";
+
+export type Breakpoint = "mobile" | "tablet" | "desktop" | "wide";
+
+/** 侧边栏三态折叠模式 */
+export type SidebarMode = "full" | "icon" | "hidden";
+
+const PINNED_KEY = "sidebar-pinned";
+const WIDTH_KEY = "sidebar-width";
+const MODE_KEY = "sidebar-mode";
+const COLLAPSED_SECTIONS_KEY = "sidebar-collapsed-sections";
+
+export const SIDEBAR_MIN_WIDTH = 180;
+export const SIDEBAR_MAX_WIDTH = 480;
+export const SIDEBAR_ICON_WIDTH = 56;
+const DEFAULT_WIDTH = 240;
+
+/** 断点定义：mobile <768, tablet 768-1023, desktop 1024-1279, wide ≥1280 */
+function getBreakpoint(width: number): Breakpoint {
+	if (width < 768) return "mobile";
+	if (width < 1024) return "tablet";
+	if (width < 1280) return "desktop";
+	return "wide";
+}
+
+interface SidebarState {
+	breakpoint: Breakpoint;
+	isPinned: boolean;
+	drawerOpen: boolean;
+	sidebarWidth: number;
+	/** 三态折叠模式（替代 isPinned 在桌面端的主折叠语义） */
+	sidebarMode: SidebarMode;
+	/** 区块级折叠（section id 集合，如 "skills" / "sessions"） */
+	collapsedSections: Set<string>;
+	setPinned: (pinned: boolean) => void;
+	setDrawerOpen: (open: boolean) => void;
+	setSidebarWidth: (width: number) => void;
+	setSidebarMode: (mode: SidebarMode) => void;
+	/** 循环切换：full → icon → hidden → full */
+	cycleSidebarMode: () => void;
+	/** 切换区块折叠状态 */
+	toggleSection: (id: string) => void;
+	_setBreakpoint: (bp: Breakpoint) => void;
+}
+
+function readPinned(): boolean {
+	try {
+		const stored = localStorage.getItem(PINNED_KEY);
+		if (stored !== null) return stored !== "false";
+		return window.innerWidth >= 1024;
+	} catch {
+		return true;
+	}
+}
+
+function readWidth(): number {
+	try {
+		const v = Number(localStorage.getItem(WIDTH_KEY));
+		if (Number.isNaN(v) || v < SIDEBAR_MIN_WIDTH || v > SIDEBAR_MAX_WIDTH) return DEFAULT_WIDTH;
+		return v;
+	} catch {
+		return DEFAULT_WIDTH;
+	}
+}
+
+function readMode(): SidebarMode {
+	try {
+		const v = localStorage.getItem(MODE_KEY);
+		if (v === "full" || v === "icon" || v === "hidden") return v;
+	} catch { /* ignore */ }
+	return "full";
+}
+
+function readCollapsedSections(): Set<string> {
+	try {
+		const v = localStorage.getItem(COLLAPSED_SECTIONS_KEY);
+		if (v) return new Set(JSON.parse(v) as string[]);
+	} catch { /* ignore */ }
+	return new Set();
+}
+
+function persistCollapsedSections(set: Set<string>): void {
+	try {
+		localStorage.setItem(COLLAPSED_SECTIONS_KEY, JSON.stringify([...set]));
+	} catch { /* ignore */ }
+}
+
+const initialWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+
+export const useSidebarStore = create<SidebarState>((set, get) => ({
+	breakpoint: getBreakpoint(initialWidth),
+	isPinned: readPinned(),
+	drawerOpen: false,
+	sidebarWidth: readWidth(),
+	sidebarMode: readMode(),
+	collapsedSections: readCollapsedSections(),
+
+	setPinned: (pinned) => {
+		try {
+			localStorage.setItem(PINNED_KEY, String(pinned));
+		} catch { /* ignore */ }
+		set({ isPinned: pinned, drawerOpen: false });
+	},
+
+	setDrawerOpen: (open) => {
+		set({ drawerOpen: open });
+	},
+
+	setSidebarWidth: (width) => {
+		const clamped = Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_MIN_WIDTH, width));
+		try {
+			localStorage.setItem(WIDTH_KEY, String(clamped));
+		} catch { /* ignore */ }
+		set({ sidebarWidth: clamped });
+	},
+
+	setSidebarMode: (mode) => {
+		try {
+			localStorage.setItem(MODE_KEY, mode);
+		} catch { /* ignore */ }
+		set({ sidebarMode: mode });
+	},
+
+	cycleSidebarMode: () => {
+		const order: SidebarMode[] = ["full", "icon", "hidden"];
+		const current = get().sidebarMode;
+		const next = order[(order.indexOf(current) + 1) % order.length] || "full";
+		try {
+			localStorage.setItem(MODE_KEY, next);
+		} catch { /* ignore */ }
+		set({ sidebarMode: next });
+	},
+
+	toggleSection: (id) => {
+		const sections = new Set(get().collapsedSections);
+		if (sections.has(id)) {
+			sections.delete(id);
+		} else {
+			sections.add(id);
+		}
+		persistCollapsedSections(sections);
+		set({ collapsedSections: sections });
+	},
+
+	_setBreakpoint: (bp) => set({ breakpoint: bp }),
+}));
+
+/** 资源面板（右侧）状态 */
+interface PanelState {
+	assetsVisible: boolean;
+	assetsDrawerOpen: boolean;
+	setAssetsVisible: (v: boolean) => void;
+	setAssetsDrawerOpen: (open: boolean) => void;
+}
+
+export const useAssetsPanelStore = create<PanelState>((set) => ({
+	assetsVisible: true,
+	assetsDrawerOpen: false,
+	setAssetsVisible: (v) => set({ assetsVisible: v }),
+	setAssetsDrawerOpen: (open) => set({ assetsDrawerOpen: open }),
+}));

package/templates/browser-agent/src/mainview/stores/use-theme-store.ts

@@ -0,0 +1,46 @@
+import { create } from "zustand";
+
+export type Theme = "light" | "dark";
+
+interface ThemeState {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
+function getInitialTheme(): Theme {
+  if (typeof window === "undefined") return "dark";
+  const stored = localStorage.getItem("theme");
+  if (stored === "light" || stored === "dark") return stored;
+  return "dark";
+}
+
+function applyTheme(theme: Theme): void {
+  if (typeof document === "undefined") return;
+  if (theme === "dark") {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+  localStorage.setItem("theme", theme);
+}
+
+export const useThemeStore = create<ThemeState>((set) => {
+  const initial = getInitialTheme();
+  applyTheme(initial);
+
+  return {
+    theme: initial,
+    setTheme: (theme) => {
+      applyTheme(theme);
+      set({ theme });
+    },
+    toggleTheme: () => {
+      set((state) => {
+        const next = state.theme === "dark" ? "light" : "dark";
+        applyTheme(next);
+        return { theme: next };
+      });
+    },
+  };
+});

package/templates/browser-agent/src/mainview/stores/use-view-store.ts

@@ -0,0 +1,20 @@
+/**
+ * View Store — 全局视图状态
+ *
+ * 管理当前激活的视图 Tab（会话/加工）。
+ * TopBar、SidebarInner、AppLayout 都能访问，无需层层传递。
+ */
+
+import { create } from "zustand";
+
+export type ViewTab = "chat" | "process";
+
+interface ViewState {
+	activeView: ViewTab;
+	setActiveView: (view: ViewTab) => void;
+}
+
+export const useViewStore = create<ViewState>((set) => ({
+	activeView: "chat",
+	setActiveView: (view) => set({ activeView: view }),
+}));

package/templates/browser-agent/src/mainview/types/index.ts

@@ -0,0 +1,6 @@
+export type ChatMessage = {
+	id: string;
+	role: 'user' | 'assistant';
+	content: string;
+	timestamp: number;
+};

package/templates/browser-agent/src/server-config.ts

@@ -0,0 +1,45 @@
+/**
+ * Web server configuration — single source of truth.
+ * Values are read from environment variables with sensible defaults.
+ */
+
+import { randomUUID } from 'crypto';
+
+if (process.env.NODE_ENV === 'production' && !process.env.AUTH_TOKEN) {
+	throw new Error(
+		'[FATAL] AUTH_TOKEN environment variable must be set in production mode. ' +
+			'Example: AUTH_TOKEN=$(openssl rand -hex 32) bun src/server.ts',
+	);
+}
+
+export function parseEnvInt(
+	key: string,
+	value: string | undefined,
+	defaultValue: number,
+	min: number,
+	max: number,
+): number {
+	if (value === undefined || value === '') return defaultValue;
+	const parsed = parseInt(value, 10);
+	if (isNaN(parsed) || parsed < min || parsed > max) {
+		process.stderr.write(`[config] Invalid ${key}: "${value}", using default: ${defaultValue}\n`);
+		return defaultValue;
+	}
+	return parsed;
+}
+
+export const config = {
+	port: parseEnvInt('PORT', process.env.PORT, 5200, 1024, 65535),
+	authToken: process.env.AUTH_TOKEN || `dev-${randomUUID()}`,
+	maxUploadSize: parseEnvInt(
+		'MAX_UPLOAD_SIZE',
+		process.env.MAX_UPLOAD_SIZE,
+		50 * 1024 * 1024,
+		0,
+		1024 * 1024 * 1024,
+	),
+	logDir: process.env.LOG_DIR || 'logs',
+	enableWebService: process.env.ENABLE_WEB_SERVICE === 'true',
+	enableMockStream: process.env.ENABLE_MOCK_STREAM === 'true',
+	corsOrigin: process.env.CORS_ORIGIN || 'http://localhost:7200',
+} as const;

package/templates/browser-agent/src/server.ts

@@ -0,0 +1,78 @@
+/**
+ * Web server entry point — HTTP file endpoints + SSE/HTTP RPC gateway.
+ * Port auto-negotiation: tries config.port first, increments on EADDRINUSE.
+ * Writes actual port to .server-port for dev orchestration.
+ */
+
+import { writeFileSync, unlinkSync, existsSync } from "fs";
+import { join, resolve, basename } from "path";
+import { config } from "./server-config";
+import { createWebServer, getLocalIP } from "./shared/lib/web-server";
+import { createLogger, configureLogDir } from "./shared/lib/logger";
+import { registerPort, unregisterPort, formatRegistryForOutput } from "./shared/lib/port-registry";
+import { discoverMethodNames } from "./shared/register-all-handlers";
+
+configureLogDir(config.logDir);
+const log = createLogger("server");
+
+const PORT_FILE = join(import.meta.dir, "..", ".server-port");
+const PROJECT_ROOT = resolve(import.meta.dir, "..");
+const PROJECT_NAME = basename(PROJECT_ROOT);
+
+function cleanupPortFile() {
+	try {
+		if (existsSync(PORT_FILE)) unlinkSync(PORT_FILE);
+	} catch {}
+	unregisterPort(PROJECT_ROOT);
+}
+
+function writePortFile(port: number) {
+	writeFileSync(PORT_FILE, String(port), "utf-8");
+}
+
+process.on("exit", cleanupPortFile);
+process.on("SIGINT", () => {
+	cleanupPortFile();
+	process.exit(0);
+});
+process.on("SIGTERM", () => {
+	cleanupPortFile();
+	process.exit(0);
+});
+
+async function start() {
+	const { port, close } = await createWebServer({
+		port: config.port,
+		authToken: config.authToken,
+		maxUploadSize: config.maxUploadSize,
+		corsOrigin: config.corsOrigin,
+	});
+
+	process.on("SIGINT", () => {
+		close();
+		cleanupPortFile();
+		process.exit(0);
+	});
+	process.on("SIGTERM", () => {
+		close();
+		cleanupPortFile();
+		process.exit(0);
+	});
+
+	writePortFile(port);
+	registerPort(PROJECT_ROOT, port, PROJECT_NAME);
+
+	const localIp = getLocalIP();
+	log.info(`HTTP + SSE server running on http://localhost:${port}`);
+	log.info(`Local network access: http://${localIp}:${port}`);
+	log.info(`RPC: POST http://localhost:${port}/api/rpc (auth required)`);
+	log.info(`SSE: GET  http://localhost:${port}/api/events (auth required)`);
+	log.info(`Available RPC methods: ${discoverMethodNames().join(", ")}`);
+	log.info("File endpoints: GET /file/{path}, GET /info/{path}");
+	log.info(formatRegistryForOutput());
+}
+
+start().catch((err) => {
+	log.error("Server failed to start", { error: err.message });
+	process.exit(1);
+});

package/templates/browser-agent/src/shared/handlers/__tests__/chat-concurrency.test.ts

@@ -0,0 +1,127 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { join } from "path";
+import { homedir } from "os";
+import { unlink } from "fs/promises";
+import { existsSync } from "fs";
+
+vi.mock("../../lib/logger", () => ({
+	createLogger: () => ({
+		info: vi.fn(),
+		error: vi.fn(),
+		warn: vi.fn(),
+		debug: vi.fn(),
+	}),
+}));
+
+function createMockServer() {
+	const handlers = new Map<string, (params: unknown) => Promise<unknown>>();
+	return {
+		register: vi.fn((method: string, handler: (params: unknown) => Promise<unknown>) => {
+			handlers.set(method, handler);
+		}),
+		emitEvent: vi.fn(),
+		handlers,
+		async call(method: string, params: unknown) {
+			const h = handlers.get(method);
+			if (!h) throw new Error(`No handler for ${method}`);
+			return h(params);
+		},
+	};
+}
+
+const DESKTOP_HISTORY_PATH = join(homedir(), ".pi-agent", "chat-history-desktop.json");
+
+describe("Chat Handler 并发安全", () => {
+	beforeEach(() => {
+		vi.resetModules();
+	});
+
+	afterEach(async () => {
+		if (existsSync(DESKTOP_HISTORY_PATH)) {
+			await unlink(DESKTOP_HISTORY_PATH).catch(() => {});
+		}
+	});
+
+	it("两个独立的 RPCServer 应注册各自的 handler", async () => {
+		const { register } = await import("../chat");
+		const serverA = createMockServer();
+		const serverB = createMockServer();
+
+		register(serverA as any, { platform: "desktop" });
+		register(serverB as any, { platform: "web" });
+
+		expect(serverA.register).toHaveBeenCalledWith("chat.list", expect.any(Function));
+		expect(serverA.register).toHaveBeenCalledWith("chat.send", expect.any(Function));
+		expect(serverB.register).toHaveBeenCalledWith("chat.list", expect.any(Function));
+		expect(serverB.register).toHaveBeenCalledWith("chat.send", expect.any(Function));
+	});
+
+	it("server A 的消息不影响 server B 的消息列表", async () => {
+		const { register } = await import("../chat");
+		const serverA = createMockServer();
+		const serverB = createMockServer();
+
+		register(serverA as any, { platform: "desktop" });
+		register(serverB as any, { platform: "web" });
+
+		await serverA.call("chat.send", { content: "hello from desktop" });
+		await serverB.call("chat.send", { content: "hello from web" });
+
+		const resultA = (await serverA.call("chat.list", { limit: 50 })) as {
+			messages: { content: string }[];
+		};
+		const resultB = (await serverB.call("chat.list", { limit: 50 })) as {
+			messages: { content: string }[];
+		};
+
+		const desktopContents = resultA.messages.map((m) => m.content);
+		const webContents = resultB.messages.map((m) => m.content);
+
+		expect(desktopContents).toContain("hello from desktop");
+		expect(webContents).toContain("hello from web");
+		expect(desktopContents).not.toContain("hello from web");
+		expect(webContents).not.toContain("hello from desktop");
+	});
+
+	it("同一 server 内的消息按顺序写入", async () => {
+		const { register } = await import("../chat");
+		const server = createMockServer();
+		register(server as any, { platform: "desktop" });
+
+		await server.call("chat.send", { content: "msg1" });
+		await server.call("chat.send", { content: "msg2" });
+		await server.call("chat.send", { content: "msg3" });
+
+		const result = (await server.call("chat.list", { limit: 50 })) as {
+			messages: { role: string; content: string }[];
+		};
+
+		const userMsgs = result.messages.filter((m) => m.role === "user").map((m) => m.content);
+		expect(userMsgs).toEqual(["msg1", "msg2", "msg3"]);
+	});
+
+	it("存储路径应包含平台标识（desktop/web）或唯一 ID", async () => {
+		const { getStoragePathFor } = await import("../chat");
+		const desktopPath = getStoragePathFor("desktop");
+		const webPath = getStoragePathFor("web");
+
+		expect(desktopPath).toContain("desktop");
+		expect(webPath).not.toBe(desktopPath);
+		expect(webPath).toMatch(/web/);
+	});
+
+	it("desktop 使用固定路径保留历史", async () => {
+		const { getStoragePathFor } = await import("../chat");
+		const path1 = getStoragePathFor("desktop");
+		const path2 = getStoragePathFor("desktop");
+		expect(path1).toBe(path2);
+		expect(path1).toContain("chat-history-desktop.json");
+	});
+
+	it("web 每次生成不同的路径", async () => {
+		const { getStoragePathFor } = await import("../chat");
+		const path1 = getStoragePathFor("web");
+		const path2 = getStoragePathFor("web");
+		expect(path1).not.toBe(path2);
+	});
+});