@dyyz1993/create-agent 2.1.0 → 2.1.2

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

@@ -0,0 +1,65 @@
+/**
+ * Asset Store — 资源管理
+ *
+ * 对应 PRD §4.6 资源管理 + §8 数据模型
+ */
+
+import { create } from "zustand";
+
+interface Asset {
+	id: string;
+	kind: string;
+	name: string;
+	size?: number;
+	mime: string;
+	path?: string;
+	url?: string;
+	dataUrl?: string;
+	source: { sessionId: string; taskId: string; createdAt: number };
+}
+
+interface AssetState {
+	// 当前展示的资源列表
+	assets: Asset[];
+
+	// Actions
+	setAssets: (assets: Asset[]) => void;
+	addAsset: (asset: Asset) => void;
+	addAssets: (assets: Asset[]) => void;
+	clearAssets: () => void;
+	/** 下载资源 */
+	downloadAsset: (assetId: string) => void;
+	/** 获取资源下载 URL */
+	getDownloadUrl: (asset: Asset) => string;
+}
+
+export const useAssetStore = create<AssetState>((set, get) => ({
+	assets: [],
+
+	setAssets: (assets) => set({ assets }),
+
+	addAsset: (asset) =>
+		set((s) => ({ assets: [...s.assets, asset] })),
+
+	addAssets: (assets) =>
+		set((s) => ({ assets: [...s.assets, ...assets] })),
+
+	clearAssets: () => set({ assets: [] }),
+
+	downloadAsset: (assetId: string) => {
+		const asset = get().assets.find((a) => a.id === assetId);
+		if (!asset) return;
+		const url = get().getDownloadUrl(asset);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = asset.name;
+		a.click();
+	},
+
+	getDownloadUrl: (asset: Asset) => {
+		if (asset.dataUrl) return asset.dataUrl;
+		if (asset.path) return `/api/assets/${asset.id}/download`;
+		if (asset.url) return asset.url;
+		return "";
+	},
+}));

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

@@ -0,0 +1,200 @@
+/**
+ * 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?: any;
+	error?: string;
+	at: number;
+}
+
+interface ChatState {
+	messages: (AgentMessage | { id: string; role: "user"; text: string; at: number })[];
+
+	// 流式回调，由 ChatPanel 绑定
+	_onEventCallback: ((event: any) => void) | null;
+	setOnEventCallback: (cb: ((event: any) => 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: any[]) => 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/browser-agent/src/mainview/stores/use-connection-store.ts

@@ -0,0 +1,173 @@
+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: any;
+
+	setReady: (ready: boolean) => void;
+	setMode: (mode: "web" | "desktop") => void;
+	setBrowserStatus: (status: "offline" | "online", browsers?: any[]) => void;
+	setTabs: (tabs: BrowserTab[], activeIndex: number) => void;
+	selectTab: (index: number | null) => void;
+	setPlugins: (plugins: any[]) => 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/browser-agent/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/browser-agent/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/browser-agent/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/browser-agent/src/mainview/stores/use-record-store.ts

@@ -0,0 +1,147 @@
+/**
+ * Record Store — 浏览器录制状态管理
+ *
+ * 管理录制生命周期：开始 → 录制中 → 停止 → 录制结果
+ * 录制开始时自动切到「加工」Tab，让用户看到录制状态。
+ */
+
+import { create } from "zustand";
+import { apiClient } from "../lib/api-client";
+import { networkBus } from "../lib/network-bus";
+import { useConnectionStore } from "./use-connection-store";
+
+export interface RecordingResult {
+	actions: number;
+	network: number;
+	durationMs: number;
+	steps: number;
+	data: any;
+}
+
+interface RecordState {
+	isRecording: boolean;
+	recordSession: string | null;
+	actionCount: number;
+	lastRecording: RecordingResult | null;
+	error: string | null;
+
+	startRecording: () => Promise<boolean>;
+	stopRecording: () => Promise<RecordingResult | null>;
+	pollStatus: () => Promise<void>;
+	clearError: () => void;
+}
+
+let pollTimer: ReturnType<typeof setInterval> | null = null;
+
+export const useRecordStore = create<RecordState>((set, get) => ({
+	isRecording: false,
+	recordSession: null,
+	actionCount: 0,
+	lastRecording: null,
+	error: null,
+
+			startRecording: async () => {
+				set({ error: null });
+				try {
+					// 获取当前选中标签页
+					const connState = useConnectionStore.getState();
+					const tabIdx = connState.selectedTabIndex ?? connState.activeTabIndex;
+					const currentTab = connState.tabs[tabIdx];
+					const url = currentTab?.url && currentTab.url !== "about:blank" ? currentTab.url : undefined;
+
+					// 先导航 daemon 到目标 URL（确保录制正确的页面）
+					if (url) {
+						try {
+							await apiClient.call("browser.execXbrowser", { command: `goto "${url}"` });
+						} catch {
+							/* ignore navigation errors */
+						}
+					}
+
+			networkBus.emitRequest("browser.recordStart", { url });
+			const result = await apiClient.call("browser.recordStart", { url });
+			networkBus.emitResponse("browser.recordStart", 0);
+
+			if (result.success) {
+				set({
+					isRecording: true,
+					recordSession: result.session,
+					actionCount: 0,
+					lastRecording: null,
+				});
+
+				// 启动轮询，更新操作计数
+				if (pollTimer) clearInterval(pollTimer);
+				pollTimer = setInterval(() => {
+					get().pollStatus();
+				}, 2000);
+
+				return true;
+			} else {
+				set({ error: "录制启动失败" });
+				return false;
+			}
+		} catch (err) {
+			set({ error: err instanceof Error ? err.message : "录制启动失败" });
+			return false;
+		}
+	},
+
+	stopRecording: async () => {
+		const session = get().recordSession;
+		if (!session) return null;
+
+		// 停止轮询
+		if (pollTimer) {
+			clearInterval(pollTimer);
+			pollTimer = null;
+		}
+
+		try {
+			networkBus.emitRequest("browser.recordStop", { session });
+			const result = await apiClient.call("browser.recordStop", { session });
+			networkBus.emitResponse("browser.recordStop", 0);
+
+			const recording: RecordingResult = {
+				actions: result.actions || 0,
+				network: result.network || 0,
+				durationMs: result.durationMs || 0,
+				steps: result.steps || 0,
+				data: result.data,
+			};
+
+			console.log("[record] stopRecording result:", { actions: recording.actions, network: recording.network, durationMs: recording.durationMs, dataKeys: recording.data ? Object.keys(recording.data) : null });
+
+			set({
+				isRecording: false,
+				recordSession: null,
+				actionCount: 0,
+				lastRecording: recording,
+			});
+
+			return recording;
+		} catch (err) {
+			set({
+				isRecording: false,
+				recordSession: null,
+				error: err instanceof Error ? err.message : "停止录制失败",
+			});
+			return null;
+		}
+	},
+
+	pollStatus: async () => {
+		const session = get().recordSession;
+		if (!session) return;
+		try {
+			const result = await apiClient.call("browser.recordStatus", { session });
+			if (result.recording) {
+				set({ actionCount: result.actions || 0 });
+			}
+		} catch {
+			/* ignore poll errors */
+		}
+	},
+
+	clearError: () => set({ error: null }),
+}));