@dyyz1993/create-agent 2.1.1 → 2.1.2

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

@@ -0,0 +1,272 @@
+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 = 220;
+export const SIDEBAR_MAX_WIDTH = 520;
+export const SIDEBAR_ICON_WIDTH = 56;
+const DEFAULT_WIDTH = 280;
+
+/** 断点定义：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<string>(get().collapsedSections);
+		if (sections.has(id)) {
+			sections.delete(id);
+		} else {
+			sections.add(id);
+		}
+		persistCollapsedSections(sections);
+		set({ collapsedSections: sections });
+	},
+
+	_setBreakpoint: (bp) => set({ breakpoint: bp }),
+}));
+
+/** 右侧面板状态 — 可调宽 + 可收起（类似左栏） */
+export type RightPanelMode = 'full' | 'hidden';
+
+const RIGHT_WIDTH_KEY = 'rightpanel-width';
+const RIGHT_MODE_KEY = 'rightpanel-mode';
+export const RIGHT_PANEL_MIN_WIDTH = 240;
+export const RIGHT_PANEL_MAX_WIDTH = 600;
+export const RIGHT_PANEL_DEFAULT_WIDTH = 320;
+
+function readRightWidth(): number {
+	try {
+		const v = Number(localStorage.getItem(RIGHT_WIDTH_KEY));
+		if (Number.isNaN(v) || v < RIGHT_PANEL_MIN_WIDTH || v > RIGHT_PANEL_MAX_WIDTH)
+			return RIGHT_PANEL_DEFAULT_WIDTH;
+		return v;
+	} catch {
+		return RIGHT_PANEL_DEFAULT_WIDTH;
+	}
+}
+
+function readRightMode(): RightPanelMode {
+	try {
+		const v = localStorage.getItem(RIGHT_MODE_KEY);
+		if (v === 'hidden') return 'hidden';
+	} catch {
+		/* ignore */
+	}
+	return 'full';
+}
+
+interface RightPanelState {
+	width: number;
+	mode: RightPanelMode;
+	/**
+	 * 因点击聊天中的 localhost 链接而展开的预览态。
+	 * 为 true 时，右栏强制展开并以 ~40% 宽度显示浏览器预览，
+	 * 优先级高于 mode 和当前 Tab 的默认右栏内容。
+	 */
+	expandedForPreview: boolean;
+	/** 展开前的宽度，关闭预览后恢复 */
+	widthBeforeExpand: number | null;
+	setWidth: (w: number) => void;
+	setMode: (m: RightPanelMode) => void;
+	toggleMode: () => void;
+	/** 点击聊天链接触发：展开右栏到 ~40% 并显示预览 */
+	openForPreview: () => void;
+	/** 关闭预览：恢复展开前的宽度与 mode */
+	closePreview: () => void;
+}
+
+export const useRightPanelStore = create<RightPanelState>((set, get) => ({
+	width: readRightWidth(),
+	mode: readRightMode(),
+	expandedForPreview: false,
+	widthBeforeExpand: null,
+
+	setWidth: (w) => {
+		const clamped = Math.min(RIGHT_PANEL_MAX_WIDTH, Math.max(RIGHT_PANEL_MIN_WIDTH, w));
+		try {
+			localStorage.setItem(RIGHT_WIDTH_KEY, String(clamped));
+		} catch {
+			/* ignore */
+		}
+		set({ width: clamped });
+	},
+
+	setMode: (m) => {
+		try {
+			localStorage.setItem(RIGHT_MODE_KEY, m);
+		} catch {
+			/* ignore */
+		}
+		set({ mode: m });
+	},
+
+	toggleMode: () => {
+		const next: RightPanelMode = get().mode === 'full' ? 'hidden' : 'full';
+		try {
+			localStorage.setItem(RIGHT_MODE_KEY, next);
+		} catch {
+			/* ignore */
+		}
+		set({ mode: next });
+	},
+
+	/**
+	 * 聊天链接点击：展开右栏至视口的 ~40%，
+	 * 记录展开前的宽度以便关闭时恢复。
+	 */
+	openForPreview: () => {
+		const { expandedForPreview, width } = get();
+		if (expandedForPreview) return; // 已展开则不重复触发
+		const target = Math.round((typeof window !== 'undefined' ? window.innerWidth : 1440) * 0.4);
+		const clamped = Math.min(RIGHT_PANEL_MAX_WIDTH, Math.max(RIGHT_PANEL_MIN_WIDTH, target));
+		set({
+			expandedForPreview: true,
+			widthBeforeExpand: width,
+			width: clamped,
+		});
+	},
+
+	/** 关闭预览：恢复展开前的宽度 */
+	closePreview: () => {
+		const { widthBeforeExpand } = get();
+		set({
+			expandedForPreview: false,
+			width: widthBeforeExpand ?? readRightWidth(),
+			widthBeforeExpand: null,
+		});
+	},
+}));

package/templates/cowork/src/mainview/stores/use-task-store.ts

@@ -0,0 +1,86 @@
+/**
+ * 任务 Store — 任务 CRUD + 选中态
+ */
+import { create } from "zustand";
+import { apiClient } from "../lib/api-client";
+import { useLogStore } from "./use-log-store";
+
+export type TaskStatus = "queued" | "analyzing" | "executing" | "waiting_input" | "review" | "completed" | "failed";
+
+export interface Step {
+	label: string;
+	status: "pending" | "running" | "done" | "error";
+	detail?: string;
+}
+
+export interface Task {
+	id: string;
+	title: string;
+	status: TaskStatus;
+	progress?: { steps: Step[] };
+	createdAt: number;
+	updatedAt: number;
+}
+
+interface TaskState {
+	tasks: Task[];
+	currentTaskId: string | null;
+	fetchTasks: () => Promise<void>;
+	createTask: (title: string) => Promise<Task>;
+	selectTask: (id: string) => void;
+	updateTask: (id: string, patch: Partial<Pick<Task, "title" | "status" | "progress">>) => Promise<void>;
+	deleteTask: (id: string) => Promise<void>;
+}
+
+export const useTaskStore = create<TaskState>((set, get) => ({
+	tasks: [],
+	currentTaskId: null,
+
+	fetchTasks: async () => {
+		try {
+			const res = await apiClient.call("task.list", {});
+			set({ tasks: res.tasks });
+			// 自动选中第一个任务
+			const first = res.tasks[0];
+			if (!get().currentTaskId && first) {
+				set({ currentTaskId: first.id });
+			}
+		} catch (err) {
+			useLogStore.getState().addLog("error", "Failed to fetch tasks", { error: err });
+		}
+	},
+
+	createTask: async (title) => {
+		const res = await apiClient.call("task.create", { title });
+		set((s) => ({ tasks: [res.task, ...s.tasks], currentTaskId: res.task.id }));
+		return res.task;
+	},
+
+	selectTask: (id) => set({ currentTaskId: id }),
+
+	updateTask: async (id, patch) => {
+		try {
+			const res = await apiClient.call("task.update", { id, patch });
+			set((s) => ({
+				tasks: s.tasks.map((t) => (t.id === id ? res.task : t)),
+			}));
+		} catch (err) {
+			useLogStore.getState().addLog("error", "Failed to update task", { error: err });
+		}
+	},
+
+	deleteTask: async (id) => {
+		try {
+			await apiClient.call("task.delete", { id });
+			set((s) => {
+				const tasks = s.tasks.filter((t) => t.id !== id);
+				return {
+					tasks,
+					currentTaskId: s.currentTaskId === id ? (tasks[0]?.id ?? null) : s.currentTaskId,
+				};
+			});
+		} catch (err) {
+			useLogStore.getState().addLog("error", "Failed to delete task", { error: err });
+		}
+	},
+}));

package/templates/cowork/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/cowork/src/mainview/stores/use-view-store.ts

@@ -0,0 +1,29 @@
+/**
+ * View Store — 全局视图状态
+ *
+ * 管理当前激活的视图 Tab（Chat/Code/Cowork）+ 右侧面板折叠状态。
+ */
+
+import { create } from "zustand";
+
+export type CenterTab = "chat" | "code" | "cowork";
+
+interface ViewState {
+	centerTab: CenterTab;
+	setCenterTab: (tab: CenterTab) => void;
+	rightPanelCollapsed: Record<string, boolean>;
+	toggleRightPanel: (id: string) => void;
+}
+
+export const useViewStore = create<ViewState>((set) => ({
+	centerTab: "cowork",
+	setCenterTab: (tab) => set({ centerTab: tab }),
+	rightPanelCollapsed: {},
+	toggleRightPanel: (id) =>
+		set((s) => ({
+			rightPanelCollapsed: {
+				...s.rightPanelCollapsed,
+				[id]: !s.rightPanelCollapsed[id],
+			},
+		})),
+}));

package/templates/cowork/src/mainview/types/index.ts

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

package/templates/cowork/src/server-config.ts

@@ -0,0 +1,44 @@
+/**
+ * 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, 5300, 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',
+	corsOrigin: process.env.CORS_ORIGIN || 'http://localhost:7300',
+} as const;

package/templates/cowork/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/cowork/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);
+	});
+});