@dyyz1993/create-agent 2.1.0 → 2.1.2

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

@@ -0,0 +1,198 @@
+/**
+ * Chat Store — Agent 流式聊天
+ *
+ * 对应 PRD §4.2-4.3：SSE 流式渲染、轮次展示、工具调用卡片
+ */
+
+import { create } from 'zustand';
+
+export interface ToolCall {
+	id: string;
+	tool: string;
+	input: string;
+	output: string;
+	status: 'running' | 'done';
+}
+
+export interface Turn {
+	turn: number;
+	toolCalls: ToolCall[];
+	text: string;
+	done: boolean;
+}
+
+export interface AgentMessage {
+	id: string;
+	role: 'agent';
+	text: string;
+	turns: Turn[];
+	thinking: string;
+	steps?: { label: string; status: string; detail?: string }[];
+	summary?: unknown;
+	error?: string;
+	at: number;
+}
+
+interface ChatState {
+	messages: (AgentMessage | { id: string; role: 'user'; text: string; at: number })[];
+
+	// 流式回调，由 ChatPanel 绑定
+	_onEventCallback: ((event: unknown) => void) | null;
+	setOnEventCallback: (cb: ((event: unknown) => void) | null) => void;
+
+	addUserMessage: (text: string) => void;
+	addAgentPlaceholder: (id: string) => void;
+	patchLastAgent: (patch: Partial<AgentMessage>) => void;
+	pushToolCall: (tc: ToolCall) => void;
+	updateToolCall: (tcId: string, output: string) => void;
+	appendThinking: (delta: string) => void;
+	appendText: (delta: string) => void;
+	markTurnDone: (turnNum: number) => void;
+	setMessages: (msgs: unknown[]) => void;
+}
+
+export const useChatStore = create<ChatState>((set, get) => ({
+	messages: [],
+	_onEventCallback: null,
+
+	setOnEventCallback: (cb) => set({ _onEventCallback: cb }),
+
+	addUserMessage: (text) =>
+		set((s) => ({
+			messages: [
+				...s.messages,
+				{ id: `msg_${Date.now()}`, role: 'user' as const, text, at: Date.now() },
+			],
+		})),
+
+	addAgentPlaceholder: (id) =>
+		set((s) => ({
+			messages: [
+				...s.messages,
+				{
+					id,
+					role: 'agent' as const,
+					text: '',
+					turns: [],
+					thinking: '',
+					at: Date.now(),
+				},
+			],
+		})),
+
+	patchLastAgent: (patch) => {
+		const msgs = [...get().messages];
+		for (let i = msgs.length - 1; i >= 0; i--) {
+			const entry = msgs[i];
+			if (!entry || entry.role !== 'agent') continue;
+			msgs[i] = { ...(entry as AgentMessage), ...patch };
+			break;
+		}
+		set({ messages: msgs });
+	},
+
+	pushToolCall: (tc) => {
+		const msgs = [...get().messages];
+		for (let i = msgs.length - 1; i >= 0; i--) {
+			const entry = msgs[i];
+			if (!entry || entry.role !== 'agent') continue;
+			const m = entry as AgentMessage;
+			const turns = [...(m.turns || [])];
+			const lastTurn = turns[turns.length - 1];
+			if (turns.length === 0 || !lastTurn || lastTurn.done) {
+				turns.push({
+					turn: turns.length + 1,
+					toolCalls: [],
+					text: '',
+					done: false,
+				});
+			}
+			const currentTurn = turns[turns.length - 1];
+			if (currentTurn) {
+				currentTurn.toolCalls = [...currentTurn.toolCalls, tc];
+			}
+			msgs[i] = { ...m, turns };
+			break;
+		}
+		set({ messages: msgs });
+	},
+
+	updateToolCall: (tcId, output) => {
+		const msgs = [...get().messages];
+		for (let i = msgs.length - 1; i >= 0; i--) {
+			const entry = msgs[i];
+			if (!entry || entry.role !== 'agent') continue;
+			const m = entry as AgentMessage;
+			const turns = [...(m.turns || [])];
+			const cur = turns[turns.length - 1];
+			if (cur) {
+				const calls = [...cur.toolCalls];
+				const idx = calls.findIndex((c) => c.id === tcId);
+				if (idx >= 0) {
+					const c = calls[idx];
+					if (c) calls[idx] = { ...c, output, status: 'done' as const };
+				} else {
+					const ri =
+						calls.length - 1 - [...calls].reverse().findIndex((c) => c.status === 'running');
+					const c = calls[ri];
+					if (c) calls[ri] = { ...c, output, status: 'done' as const };
+				}
+				cur.toolCalls = calls;
+			}
+			msgs[i] = { ...m, turns };
+			break;
+		}
+		set({ messages: msgs });
+	},
+
+	appendThinking: (delta) => {
+		const msgs = [...get().messages];
+		for (let i = msgs.length - 1; i >= 0; i--) {
+			const entry = msgs[i];
+			if (!entry || entry.role !== 'agent') continue;
+			const m = entry as AgentMessage;
+			msgs[i] = { ...m, thinking: (m.thinking || '') + delta };
+			break;
+		}
+		set({ messages: msgs });
+	},
+
+	appendText: (delta) => {
+		const msgs = [...get().messages];
+		for (let i = msgs.length - 1; i >= 0; i--) {
+			const entry = msgs[i];
+			if (!entry || entry.role !== 'agent') continue;
+			const m = entry as AgentMessage;
+			const turns = [...(m.turns || [])];
+			const openTurn = turns.find((t) => !t.done);
+			if (openTurn) {
+				openTurn.text = (openTurn.text || '') + delta;
+			}
+			msgs[i] = { ...m, turns, text: (m.text || '') + delta };
+			break;
+		}
+		set({ messages: msgs });
+	},
+
+	markTurnDone: (_turnNum) => {
+		const msgs = [...get().messages];
+		for (let i = msgs.length - 1; i >= 0; i--) {
+			const entry = msgs[i];
+			if (!entry || entry.role !== 'agent') continue;
+			const m = entry as AgentMessage;
+			const turns = [...(m.turns || [])];
+			const lastTurn = turns[turns.length - 1];
+			if (turns.length > 0 && lastTurn && !lastTurn.done) {
+				turns[turns.length - 1] = {
+					...lastTurn,
+					done: true,
+				};
+			}
+			msgs[i] = { ...m, turns };
+			break;
+		}
+		set({ messages: msgs });
+	},
+
+	setMessages: (msgs) => set({ messages: msgs }),
+}));

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

@@ -0,0 +1,168 @@
+import { create } from 'zustand';
+import { apiClient } from '../lib/api-client';
+import { useLogStore } from './use-log-store';
+import { networkBus } from '../lib/network-bus';
+
+export interface BrowserTab {
+	index: number;
+	url: string;
+	title: string;
+	active: boolean;
+}
+
+// 轮询定时器（模块级，避免重复创建）
+let _pollTimer: ReturnType<typeof setInterval> | null = null;
+
+interface ConnectionState {
+	mode: 'web' | 'desktop';
+	ready: boolean;
+	// 浏览器连接状态
+	browserStatus: 'offline' | 'online';
+	browsers: { pluginId: string; name: string; tabs: number }[];
+	tabs: BrowserTab[];
+	activeTabIndex: number;
+	selectedTabIndex: number | null; // null = 用活跃 tab
+	// 插件
+	plugins: { name: string; description: string }[];
+	activePlugins: string[];
+	// 系统信息
+	systemInfo: unknown;
+
+	setReady: (ready: boolean) => void;
+	setMode: (mode: 'web' | 'desktop') => void;
+	setBrowserStatus: (status: 'offline' | 'online', browsers?: unknown[]) => void;
+	setTabs: (tabs: BrowserTab[], activeIndex: number) => void;
+	selectTab: (index: number | null) => void;
+	setPlugins: (plugins: unknown[]) => void;
+	setActivePlugins: (plugins: string[]) => void;
+	toggleActivePlugin: (name: string) => void;
+	initializeConnection: () => void;
+	checkBrowser: () => Promise<void>;
+	loadTabs: () => Promise<void>;
+	startConnectionPolling: () => void;
+	stopConnectionPolling: () => void;
+}
+
+export const useConnectionStore = create<ConnectionState>((set, get) => ({
+	mode: 'web',
+	ready: false,
+	browserStatus: 'offline',
+	browsers: [],
+	tabs: [],
+	activeTabIndex: 0,
+	selectedTabIndex: null,
+	plugins: [],
+	activePlugins: [],
+	systemInfo: null,
+
+	setReady: (ready) => set({ ready }),
+	setMode: (mode) => set({ mode }),
+
+	setBrowserStatus: (status, browsers) => set({ browserStatus: status, browsers: browsers || [] }),
+
+	setTabs: (tabs, activeIndex) => set({ tabs, activeTabIndex: activeIndex }),
+
+	selectTab: (index) => set({ selectedTabIndex: index }),
+
+	setPlugins: (plugins) => set({ plugins }),
+
+	setActivePlugins: (plugins) => set({ activePlugins: plugins }),
+
+	toggleActivePlugin: (name) => {
+		const current = get().activePlugins;
+		if (current.includes(name)) {
+			set({ activePlugins: current.filter((p) => p !== name) });
+		} else {
+			set({ activePlugins: [...current, name] });
+		}
+	},
+
+	initializeConnection: () => {
+		const MAX_RETRIES = 5;
+		let retries = 0;
+		const init = async () => {
+			try {
+				await apiClient.initialize();
+				const transport = apiClient.getTransport();
+				set({
+					mode: transport === 'ipc' ? 'desktop' : 'web',
+					ready: true,
+				});
+				useLogStore
+					.getState()
+					.addLog(`${transport === 'ipc' ? 'Desktop' : 'Web'} mode - ${transport.toUpperCase()}`);
+
+				// 初始检测浏览器连接 + 加载标签页
+				await get().checkBrowser();
+				if (get().browserStatus === 'online') {
+					await get().loadTabs();
+				} else {
+					// 未连接 → 启动轮询，用户装好扩展后自动发现
+					get().startConnectionPolling();
+				}
+			} catch {
+				retries++;
+				if (retries < MAX_RETRIES) {
+					setTimeout(init, 1000);
+				} else {
+					useLogStore.getState().addLog(`Failed to connect after ${MAX_RETRIES} retries`);
+				}
+			}
+		};
+		init();
+	},
+
+	checkBrowser: async () => {
+		try {
+			const result = await apiClient.call('browser.checkConnection', {});
+			const wasOffline = get().browserStatus === 'offline';
+			set({
+				browserStatus: result.connected ? 'online' : 'offline',
+				browsers: result.browsers,
+			});
+			// 刚连上时，立即加载标签页
+			if (wasOffline && result.connected) {
+				await get().loadTabs();
+			}
+		} catch {
+			set({ browserStatus: 'offline', browsers: [] });
+		}
+	},
+
+	loadTabs: async () => {
+		try {
+			const result = await apiClient.call('browser.listTabs', {});
+			set({ tabs: result.tabs, activeTabIndex: result.activeIndex });
+		} catch (err) {
+			networkBus.emitStatus(`加载标签页失败: ${err instanceof Error ? err.message : String(err)}`);
+		}
+	},
+
+	/**
+	 * 启动连接轮询 — 未连接时每 3 秒检测一次，连上后停止。
+	 * 用户安装扩展后会自动发现。
+	 */
+	startConnectionPolling: () => {
+		// 已连接就不轮询
+		if (get().browserStatus === 'online') return;
+		if (_pollTimer) return; // 已有轮询在跑
+
+		_pollTimer = setInterval(async () => {
+			await get().checkBrowser();
+			// 连上了就停止轮询
+			if (get().browserStatus === 'online') {
+				if (_pollTimer) {
+					clearInterval(_pollTimer);
+					_pollTimer = null;
+				}
+			}
+		}, 3000);
+	},
+
+	stopConnectionPolling: () => {
+		if (_pollTimer) {
+			clearInterval(_pollTimer);
+			_pollTimer = null;
+		}
+	},
+}));

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

@@ -0,0 +1,68 @@
+/**
+ * Context Store — 上下文管理（文件夹 / 连接器 / 工作文件）
+ */
+import { create } from "zustand";
+import { apiClient } from "../lib/api-client";
+import { useLogStore } from "./use-log-store";
+
+export interface ContextFolder { path: string; name: string }
+export interface Connector { id: string; name: string; type: string; enabled: boolean }
+export interface WorkingFile { path: string; name: string; size?: number }
+
+interface ContextState {
+	folders: ContextFolder[];
+	connectors: Connector[];
+	workingFiles: WorkingFile[];
+	fetchAll: () => Promise<void>;
+	addFolder: (path: string) => Promise<void>;
+	removeFolder: (path: string) => Promise<void>;
+	toggleConnector: (id: string, enabled: boolean) => Promise<void>;
+	addWorkingFile: (path: string) => Promise<void>;
+	removeWorkingFile: (path: string) => Promise<void>;
+}
+
+export const useContextStore = create<ContextState>((set) => ({
+	folders: [],
+	connectors: [],
+	workingFiles: [],
+
+	fetchAll: async () => {
+		try {
+			const [f, c, w] = await Promise.all([
+				apiClient.call("context.listFolders", {}),
+				apiClient.call("context.listConnectors", {}),
+				apiClient.call("context.listWorkingFiles", {}),
+			]);
+			set({ folders: f.folders, connectors: c.connectors, workingFiles: w.files });
+		} catch (err) {
+			useLogStore.getState().addLog("error", "Failed to fetch context", { error: err });
+		}
+	},
+
+	addFolder: async (path) => {
+		const res = await apiClient.call("context.addFolder", { path });
+		set((s) => ({ folders: [...s.folders, res.folder] }));
+	},
+
+	removeFolder: async (path) => {
+		await apiClient.call("context.removeFolder", { path });
+		set((s) => ({ folders: s.folders.filter((f) => f.path !== path) }));
+	},
+
+	toggleConnector: async (id, enabled) => {
+		const res = await apiClient.call("context.toggleConnector", { id, enabled });
+		set((s) => ({
+			connectors: s.connectors.map((c) => (c.id === id ? res.connector : c)),
+		}));
+	},
+
+	addWorkingFile: async (path) => {
+		const res = await apiClient.call("context.addWorkingFile", { path });
+		set((s) => ({ workingFiles: [...s.workingFiles, res.file] }));
+	},
+
+	removeWorkingFile: async (path) => {
+		await apiClient.call("context.removeWorkingFile", { path });
+		set((s) => ({ workingFiles: s.workingFiles.filter((f) => f.path !== path) }));
+	},
+}));

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

@@ -0,0 +1,27 @@
+import { create } from "zustand";
+import type { Locale } from "../lib/i18n";
+
+interface LocaleState {
+  locale: Locale;
+  setLocale: (locale: Locale) => void;
+}
+
+function getInitialLocale(): Locale {
+  if (typeof window === "undefined") return "en";
+  const stored = localStorage.getItem("locale");
+  if (stored === "en" || stored === "zh") return stored;
+  const browserLang = navigator.language.toLowerCase();
+  if (browserLang.startsWith("zh")) return "zh";
+  return "en";
+}
+
+export const useLocaleStore = create<LocaleState>((set) => ({
+  locale: getInitialLocale(),
+  setLocale: (locale) => {
+    localStorage.setItem("locale", locale);
+    import("../lib/i18n").then((i18n) => {
+      i18n.default.changeLanguage(locale);
+    });
+    set({ locale });
+  },
+}));

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

@@ -0,0 +1,16 @@
+import { create } from "zustand";
+
+interface LogState {
+  logs: string[];
+  addLog: (message: string) => void;
+}
+
+const MAX_LOGS = 100;
+
+export const useLogStore = create<LogState>((set) => ({
+  logs: [],
+  addLog: (message) =>
+    set((state) => ({
+      logs: [...state.logs.slice(-(MAX_LOGS - 1)), `[${new Date().toISOString().slice(11, 19)}] ${message}`],
+    })),
+}));

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

@@ -0,0 +1,18 @@
+/**
+ * Network Panel state — shared open/close state between TopBar button
+ * and the AppLayout drawer.
+ */
+
+import { create } from "zustand";
+
+interface NetworkPanelState {
+	open: boolean;
+	toggle: () => void;
+	setOpen: (open: boolean) => void;
+}
+
+export const useNetworkPanelStore = create<NetworkPanelState>((set, get) => ({
+	open: false,
+	toggle: () => set({ open: !get().open }),
+	setOpen: (open) => set({ open }),
+}));

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

@@ -0,0 +1,47 @@
+/**
+ * Output Store — 产出物管理（Artifacts）
+ */
+import { create } from "zustand";
+import { apiClient } from "../lib/api-client";
+import { useLogStore } from "./use-log-store";
+
+export interface Output {
+	id: string;
+	name: string;
+	kind: "file" | "snippet" | "link";
+	path?: string;
+	content?: string;
+	size?: number;
+	taskId?: string;
+	createdAt: number;
+}
+
+interface OutputState {
+	outputs: Output[];
+	fetchOutputs: () => Promise<void>;
+	addOutput: (name: string, kind: Output["kind"], path?: string, taskId?: string) => Promise<void>;
+	removeOutput: (id: string) => Promise<void>;
+}
+
+export const useOutputStore = create<OutputState>((set) => ({
+	outputs: [],
+
+	fetchOutputs: async () => {
+		try {
+			const res = await apiClient.call("output.list", {});
+			set({ outputs: res.outputs });
+		} catch (err) {
+			useLogStore.getState().addLog("error", "Failed to fetch outputs", { error: err });
+		}
+	},
+
+	addOutput: async (name, kind, path, taskId) => {
+		const res = await apiClient.call("output.add", { name, kind, path, taskId });
+		set((s) => ({ outputs: [res.output, ...s.outputs] }));
+	},
+
+	removeOutput: async (id) => {
+		await apiClient.call("output.remove", { id });
+		set((s) => ({ outputs: s.outputs.filter((o) => o.id !== id) }));
+	},
+}));

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

@@ -0,0 +1,97 @@
+/**
+ * Preview Store — 内嵌浏览器状态管理（Code Tab）
+ */
+import { create } from 'zustand';
+import { apiClient } from '../lib/api-client';
+import { useLogStore } from './use-log-store';
+
+export type NavState = 'idle' | 'loading' | 'ready' | 'error';
+
+export interface PreviewTab {
+	id: string;
+	url: string;
+	title: string;
+	state: NavState;
+	canGoBack: boolean;
+	canGoForward: boolean;
+}
+
+interface PreviewState {
+	currentTab: PreviewTab | null;
+	useIframe: boolean;
+	navState: NavState;
+	history: string[];
+	openUrl: (url: string) => Promise<void>;
+	navigate: (action: 'back' | 'forward' | 'reload') => Promise<void>;
+	closeTab: () => Promise<void>;
+	loadHistory: () => Promise<void>;
+}
+
+export const usePreviewStore = create<PreviewState>((set, get) => ({
+	currentTab: null,
+	useIframe: true,
+	navState: 'idle',
+	history: [],
+
+	openUrl: async (url) => {
+		const fullUrl = url.startsWith('http') ? url : `http://${url}`;
+		set({ navState: 'loading' });
+
+		try {
+			const res = await apiClient.call('preview.open', { url: fullUrl });
+
+			// 订阅导航状态事件（subId 暂不存储，订阅会自动管理）
+			await apiClient.subscribe(
+				'preview.navState',
+				(tab: PreviewTab) => {
+					if (tab.id === get().currentTab?.id) {
+						set({ currentTab: tab, navState: tab.state });
+					}
+				},
+				{},
+			);
+
+			set({
+				currentTab: { ...res.tab, state: res.tab.state },
+				useIframe: res.useIframe,
+				navState: res.tab.state,
+			});
+		} catch (err) {
+			useLogStore.getState().addLog('error', 'Failed to open URL', { error: err });
+			set({ navState: 'error' });
+		}
+	},
+
+	navigate: async (action) => {
+		const tab = get().currentTab;
+		if (!tab) return;
+		set({ navState: 'loading' });
+		try {
+			await apiClient.call('preview.navigate', { tabId: tab.id, action });
+		} catch (err) {
+			useLogStore.getState().addLog('error', 'Navigation failed', { error: err });
+			set({ navState: 'error' });
+		}
+	},
+
+	closeTab: async () => {
+		const tab = get().currentTab;
+		if (tab) {
+			try {
+				await apiClient.call('preview.close', { tabId: tab.id });
+			} catch {
+				/* ignore */
+			}
+		}
+		set({ currentTab: null, navState: 'idle' });
+	},
+
+	loadHistory: async () => {
+		try {
+			const res = await apiClient.call('preview.history', {});
+			set({ history: res.urls });
+		} catch {
+			/* ignore */
+		}
+	},
+}));