@dyyz1993/create-agent 1.9.0

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

@@ -0,0 +1,93 @@
+import { create } from "zustand";
+import { apiClient } from "../lib/api-client";
+import { useLogStore } from "./use-log-store";
+
+const MAX_OUTPUT_LINES = 5000;
+const TRUNCATION_NOTICE = "... [output truncated, showing last 5000 lines]\n";
+
+interface ProcessInfo {
+  command: string;
+  output: string;
+  running: boolean;
+  exitCode?: number | null;
+}
+
+interface BashState {
+  processes: Map<number, ProcessInfo>;
+  activePid: number | null;
+  addProcess: (pid: number, command: string) => void;
+  updateOutput: (pid: number, data: string) => void;
+  removeProcess: (pid: number) => void;
+  setActive: (pid: number | null) => void;
+  executeCommand: (command: string, cwd?: string) => Promise<void>;
+  killProcess: (pid: number) => Promise<void>;
+  fetchProcesses: () => Promise<void>;
+}
+
+export const useBashStore = create<BashState>((set, get) => ({
+  processes: new Map(),
+  activePid: null,
+
+  addProcess: (pid, command) =>
+    set((s) => {
+      const next = new Map(s.processes);
+      next.set(pid, { command, output: "", running: true });
+      return { processes: next, activePid: pid };
+    }),
+
+  updateOutput: (pid, data) =>
+    set((s) => {
+      const next = new Map(s.processes);
+      const proc = next.get(pid);
+      if (!proc) return { processes: next };
+      let newOutput = proc.output + data;
+      const lines = newOutput.split("\n");
+      if (lines.length > MAX_OUTPUT_LINES) {
+        newOutput = TRUNCATION_NOTICE + lines.slice(-MAX_OUTPUT_LINES).join("\n");
+      }
+      next.set(pid, { ...proc, output: newOutput });
+      return { processes: next };
+    }),
+
+  removeProcess: (pid) =>
+    set((s) => {
+      const next = new Map(s.processes);
+      const proc = next.get(pid);
+      if (proc) next.set(pid, { ...proc, running: false });
+      return { processes: next };
+    }),
+
+  setActive: (pid) => set({ activePid: pid }),
+
+  executeCommand: async (command, cwd) => {
+    try {
+      const result = await apiClient.call("bash.execute", { command, cwd });
+      get().addProcess(result.pid, command);
+      get().updateOutput(result.pid, result.output);
+    } catch (err) {
+      useLogStore.getState().addLog(`Bash error: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  },
+
+  killProcess: async (pid) => {
+    try {
+      await apiClient.call("bash.kill", { pid });
+      get().removeProcess(pid);
+    } catch (err) {
+      useLogStore.getState().addLog(`Kill error: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  },
+
+  fetchProcesses: async () => {
+    try {
+      const result = await apiClient.call("bash.listProcesses", {});
+      const map = new Map<number, ProcessInfo>();
+      for (const p of result.processes) {
+        map.set(p.pid, { command: p.command, output: "", running: p.running });
+      }
+      set({ processes: map });
+    } catch (err) {
+      useLogStore.getState().addLog(`Fetch processes error: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  },
+}));

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

@@ -0,0 +1,37 @@
+import { create } from "zustand";
+import type { ChatMessage } from "../types";
+import { apiClient } from "../lib/api-client";
+import { useLogStore } from "./use-log-store";
+
+interface ChatState {
+  messages: ChatMessage[];
+  inputText: string;
+
+  setInputText: (text: string) => void;
+  sendMessage: () => Promise<void>;
+  addMessage: (msg: ChatMessage) => void;
+  setMessages: (msgs: ChatMessage[]) => void;
+}
+
+export const useChatStore = create<ChatState>((set, get) => ({
+  messages: [],
+  inputText: "",
+
+  setInputText: (text) => set({ inputText: text }),
+
+  sendMessage: async () => {
+    const { inputText } = get();
+    if (!inputText.trim()) return;
+    const text = inputText.trim();
+    set({ inputText: "" });
+    try {
+      await apiClient.call("chat.send", { content: text });
+    } catch (err) {
+      useLogStore.getState().addLog(`Chat error: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  },
+
+  addMessage: (msg) => set((s) => ({ messages: [...s.messages, msg] })),
+
+  setMessages: (msgs) => set({ messages: msgs }),
+}));

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

@@ -0,0 +1,42 @@
+import { create } from "zustand";
+import { apiClient } from "../lib/api-client";
+import { useLogStore } from "./use-log-store";
+
+interface ConnectionState {
+  mode: "web" | "desktop";
+  ready: boolean;
+  setReady: (ready: boolean) => void;
+  setMode: (mode: "web" | "desktop") => void;
+  initializeConnection: () => void;
+}
+
+export const useConnectionStore = create<ConnectionState>((set) => ({
+  mode: "web",
+  ready: false,
+  setReady: (ready) => set({ ready }),
+  setMode: (mode) => set({ mode }),
+
+  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()}`);
+      } catch {
+        retries++;
+        if (retries < MAX_RETRIES) {
+          setTimeout(init, 1000);
+        } else {
+          useLogStore.getState().addLog(`Failed to connect after ${MAX_RETRIES} retries`);
+        }
+      }
+    };
+    init();
+  },
+}));

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

@@ -0,0 +1,320 @@
+import { create } from "zustand";
+import { apiClient } from "../lib/api-client";
+import type { RPCMethods } from "../lib/api-client";
+import { rpcCache } from "../lib/rpc-cache";
+import type { TreeNode, FilePreview, EditingNode } from "../types";
+import { isTextFile, isImageFile, formatSize } from "../utils/file-utils";
+import { MAX_PREVIEW_SIZE } from "../utils/constants";
+import { useLogStore } from "./use-log-store";
+import { useConnectionStore } from "./use-connection-store";
+import { uploadEntriesWeb, importFilesDesktop, type DropEntry } from "../utils/drop-handler";
+
+interface ExplorerState {
+  treeNodes: TreeNode[];
+  currentPath: string;
+  selectedPath: string | null;
+  filePreview: FilePreview | null;
+  loadingFile: boolean;
+  editingNode: EditingNode | null;
+
+  setCurrentPath: (path: string) => void;
+  listRootDir: () => Promise<void>;
+  toggleNode: (nodePath: string) => Promise<void>;
+  openFile: (node: TreeNode) => Promise<void>;
+  closePreview: () => void;
+
+  createFile: (dirPath: string, name: string) => Promise<void>;
+  createDir: (dirPath: string, name: string) => Promise<void>;
+  renameNode: (oldPath: string, newName: string) => Promise<void>;
+  deleteNode: (path: string) => Promise<void>;
+  refreshDir: (dirPath: string) => Promise<void>;
+  startEditing: (path: string, type: EditingNode["type"]) => void;
+  cancelEditing: () => void;
+  importFiles: (entries: DropEntry[], destDir: string) => Promise<number>;
+}
+
+function entriesToTreeNodes(entries: RPCMethods["file.listDir"]["result"]["entries"]): TreeNode[] {
+  return entries.map((e) => ({
+    name: e.name,
+    path: e.path,
+    type: e.type,
+    size: e.size,
+    children: e.type === "directory" ? [] : undefined,
+    expanded: false,
+    loaded: false,
+  }));
+}
+
+function getFileUrl(filePath: string): string {
+  const mode = useConnectionStore.getState().mode;
+  if (mode === "desktop") return `file://${filePath}`;
+  const baseUrl = apiClient.getBaseUrl();
+  const token = apiClient.getAuthToken();
+  return `${baseUrl}/file/${encodeURIComponent(filePath)}?token=${token}`;
+}
+
+function findNode(nodes: TreeNode[], path: string): TreeNode | null {
+  for (const n of nodes) {
+    if (n.path === path) return n;
+    if (n.children) {
+      const found = findNode(n.children, path);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+function updateExpanded(nodes: TreeNode[], path: string, expanded: boolean): TreeNode[] {
+  return nodes.map((n) => {
+    if (n.path === path) return { ...n, expanded };
+    if (n.children) return { ...n, children: updateExpanded(n.children, path, expanded) };
+    return n;
+  });
+}
+
+function loadChildren(nodes: TreeNode[], nodePath: string, children: TreeNode[]): TreeNode[] {
+  return nodes.map((n) => {
+    if (n.path === nodePath) return { ...n, children, expanded: true, loaded: true };
+    if (n.children) return { ...n, children: loadChildren(n.children, nodePath, children) };
+    return n;
+  });
+}
+
+function removeNode(nodes: TreeNode[], path: string): TreeNode[] {
+  return nodes
+    .filter((n) => n.path !== path)
+    .map((n) => {
+      if (n.children) return { ...n, children: removeNode(n.children, path) };
+      return n;
+    });
+}
+
+function renameInTree(nodes: TreeNode[], oldPath: string, newPath: string, newName: string): TreeNode[] {
+  return nodes.map((n) => {
+    if (n.path === oldPath) {
+      return { ...n, name: newName, path: newPath };
+    }
+    if (n.children) {
+      return { ...n, children: renameInTree(n.children, oldPath, newPath, newName) };
+    }
+    return n;
+  });
+}
+
+export const useExplorerStore = create<ExplorerState>((set, get) => ({
+  treeNodes: [],
+  currentPath: "",
+  selectedPath: null,
+  filePreview: null,
+  loadingFile: false,
+  editingNode: null,
+
+  setCurrentPath: (path) => set({ currentPath: path }),
+
+  listRootDir: async () => {
+    const { currentPath } = get();
+    const addLog = useLogStore.getState().addLog;
+    addLog(`ListDir: ${currentPath}`);
+    try {
+      const res = await apiClient.call("file.listDir", { path: currentPath });
+      set({
+        treeNodes: entriesToTreeNodes(res.entries),
+        // Update currentPath to the resolved absolute path
+        currentPath: res.basePath,
+      });
+      addLog(`Found ${res.entries.length} items`);
+    } catch (err) {
+      addLog(`Error: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  },
+
+  toggleNode: async (nodePath: string) => {
+    const { treeNodes } = get();
+    const addLog = useLogStore.getState().addLog;
+    const target = findNode(treeNodes, nodePath);
+    if (!target) return;
+
+    if (target.expanded) {
+      set({ treeNodes: updateExpanded(treeNodes, nodePath, false) });
+    } else if (target.loaded) {
+      set({ treeNodes: updateExpanded(treeNodes, nodePath, true) });
+    } else {
+      addLog(`ListDir: ${nodePath}`);
+      try {
+        const res = await apiClient.call("file.listDir", { path: nodePath });
+        const children = entriesToTreeNodes(res.entries);
+        addLog(`Found ${res.entries.length} items`);
+        set({ treeNodes: loadChildren(treeNodes, nodePath, children) });
+      } catch (err) {
+        addLog(`Error: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    }
+  },
+
+  openFile: async (node: TreeNode) => {
+    if (node.type === "directory") return;
+    const addLog = useLogStore.getState().addLog;
+    set({ selectedPath: node.path, loadingFile: true });
+
+    const fileSize = node.size || 0;
+    const preview: FilePreview = {
+      path: node.path,
+      name: node.name,
+      content: null,
+      imageUrl: null,
+      mimeType: "",
+      size: fileSize,
+      isText: isTextFile(node.name),
+      isImage: isImageFile(node.name),
+    };
+
+    try {
+      const mode = useConnectionStore.getState().mode;
+
+      if (preview.isImage) {
+        preview.imageUrl = getFileUrl(node.path);
+      } else if (preview.isText) {
+        if (fileSize > MAX_PREVIEW_SIZE) {
+          preview.content = `[File too large to preview: ${formatSize(fileSize)}]\n\nThis file exceeds the 500KB preview limit.\nUse an external editor to view this file.`;
+          set({ filePreview: preview, loadingFile: false });
+          addLog(`Skipped large file: ${node.name} (${formatSize(fileSize)})`);
+          return;
+        }
+
+        let text: string;
+        if (mode === "desktop") {
+          // Desktop: read file via RPC (file:// blocked by webview)
+          const res = await apiClient.call("file.readFile", { path: node.path });
+          text = res.content;
+          preview.mimeType = "text/plain";
+        } else {
+          // Web: fetch via HTTP file server
+          const url = getFileUrl(node.path);
+          const res = await fetch(url);
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          text = await res.text();
+          preview.mimeType = res.headers.get("content-type") || "text/plain";
+        }
+        preview.content = text;
+        preview.totalLines = text.split("\n").length;
+      } else {
+        preview.content = `[Binary file: ${node.name} (${formatSize(preview.size)})]`;
+        preview.isText = true;
+      }
+      addLog(`Opened: ${node.name}`);
+    } catch (err) {
+      preview.content = `Failed to load: ${err instanceof Error ? err.message : String(err)}`;
+      preview.isText = true;
+      addLog(`Error opening ${node.name}: ${err instanceof Error ? err.message : String(err)}`);
+    }
+
+    set({ filePreview: preview, loadingFile: false });
+  },
+
+  closePreview: () => set({ filePreview: null, selectedPath: null }),
+
+  createFile: async (dirPath: string, name: string) => {
+    const addLog = useLogStore.getState().addLog;
+    try {
+      await apiClient.call("file.createFile", { dirPath, name });
+      rpcCache.invalidate("file.listDir");
+      addLog(`Created file: ${name}`);
+      set({ editingNode: null });
+      await get().refreshDir(dirPath);
+    } catch (err) {
+      addLog(`Error creating file: ${err instanceof Error ? err.message : String(err)}`);
+      set({ editingNode: null });
+    }
+  },
+
+  createDir: async (dirPath: string, name: string) => {
+    const addLog = useLogStore.getState().addLog;
+    try {
+      await apiClient.call("file.createDir", { dirPath, name });
+      rpcCache.invalidate("file.listDir");
+      addLog(`Created directory: ${name}`);
+      set({ editingNode: null });
+      await get().refreshDir(dirPath);
+    } catch (err) {
+      addLog(`Error creating directory: ${err instanceof Error ? err.message : String(err)}`);
+      set({ editingNode: null });
+    }
+  },
+
+  renameNode: async (oldPath: string, newName: string) => {
+    const { treeNodes } = get();
+    const addLog = useLogStore.getState().addLog;
+    try {
+      const res = await apiClient.call("file.rename", { oldPath, newName });
+      rpcCache.invalidate("file.listDir");
+      addLog(`Renamed to: ${newName}`);
+      set({
+        treeNodes: renameInTree(treeNodes, oldPath, res.newPath, newName),
+        editingNode: null,
+        selectedPath: res.newPath,
+      });
+    } catch (err) {
+      addLog(`Error renaming: ${err instanceof Error ? err.message : String(err)}`);
+      set({ editingNode: null });
+    }
+  },
+
+  deleteNode: async (path: string) => {
+    const { treeNodes } = get();
+    const addLog = useLogStore.getState().addLog;
+    try {
+      await apiClient.call("file.delete", { path });
+      rpcCache.invalidate("file.listDir");
+      addLog(`Deleted: ${path}`);
+      // Find parent dir to refresh
+      const pathParts = path.split("/");
+      pathParts.pop();
+      const parentPath = pathParts.join("/") || get().currentPath;
+      set({ treeNodes: removeNode(treeNodes, path) });
+      // Clear preview if the deleted file was being previewed
+      const { selectedPath } = get();
+      if (selectedPath === path) {
+        set({ selectedPath: null, filePreview: null });
+      }
+      await get().refreshDir(parentPath);
+    } catch (err) {
+      addLog(`Error deleting: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  },
+
+  refreshDir: async (dirPath: string) => {
+    const { treeNodes, currentPath } = get();
+    const addLog = useLogStore.getState().addLog;
+    // If refreshing root
+    if (dirPath === currentPath) {
+      await get().listRootDir();
+      return;
+    }
+    try {
+      const res = await apiClient.call("file.listDir", { path: dirPath });
+      const children = entriesToTreeNodes(res.entries);
+      set({ treeNodes: loadChildren(treeNodes, dirPath, children) });
+    } catch (err) {
+      addLog(`Error refreshing: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  },
+
+  startEditing: (path, type) => set({ editingNode: { path, type } }),
+  cancelEditing: () => set({ editingNode: null }),
+
+  importFiles: async (entries, destDir) => {
+    const addLog = useLogStore.getState().addLog;
+    const mode = useConnectionStore.getState().mode;
+    try {
+      const count = mode === "desktop"
+        ? await importFilesDesktop(entries, destDir)
+        : await uploadEntriesWeb(entries, destDir);
+      addLog(`Imported ${count} items to ${destDir}`);
+      await get().refreshDir(destDir);
+      return count;
+    } catch (err) {
+      addLog(`Import error: ${err instanceof Error ? err.message : String(err)}`);
+      throw err;
+    }
+  },
+}));

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

@@ -0,0 +1,129 @@
+import { create } from "zustand";
+import { apiClient } from "../lib/api-client";
+import type { FeedCategory, FeedPost } from "../../shared/modules/feed";
+
+interface FeedState {
+  posts: FeedPost[];
+  author: string;
+  category: FeedCategory;
+  content: string;
+  loading: boolean;
+
+  setAuthor: (author: string) => void;
+  setCategory: (category: FeedCategory) => void;
+  setContent: (content: string) => void;
+  createPost: () => Promise<void>;
+  loadPosts: () => Promise<void>;
+  addPost: (post: FeedPost) => void;
+}
+
+export const useFeedStore = create<FeedState>((set, get) => ({
+  posts: [],
+  author: "alice",
+  category: "tech",
+  content: "",
+  loading: false,
+
+  setAuthor: (author) => set({ author }),
+  setCategory: (category) => set({ category }),
+  setContent: (content) => set({ content }),
+
+  createPost: async () => {
+    const { content, category, author } = get();
+    if (!content.trim()) return;
+    set({ loading: true });
+    try {
+      await apiClient.call("feed.post", { content: content.trim(), category, author });
+      set({ content: "", loading: false });
+    } catch {
+      set({ loading: false });
+    }
+  },
+
+  loadPosts: async () => {
+    try {
+      const res = await apiClient.call("feed.list", { limit: 100 });
+      set({ posts: res.posts });
+    } catch {
+      // ignore
+    }
+  },
+
+  addPost: (post) => set((s) => ({ posts: [...s.posts, post] })),
+}));
+
+// --- Event Stream (订阅面板) ---
+
+export type SubEventType = "feed.update" | "chat.message" | "timer.tick";
+
+interface EventEntry {
+  id: string;
+  eventType: SubEventType;
+  payload: unknown;
+  filter: Record<string, unknown>;
+  timestamp: number;
+}
+
+interface EventStreamState {
+  entries: EventEntry[];
+  activeEventType: SubEventType;
+  activeFilter: string; // JSON string for the filter
+  subscriptionId: string | null;
+  subscribed: boolean;
+
+  setActiveEventType: (t: SubEventType) => void;
+  setActiveFilter: (f: string) => void;
+  handleSubscribe: () => Promise<void>;
+  handleUnsubscribe: () => void;
+  addEntry: (eventType: SubEventType, payload: unknown, filter: Record<string, unknown>) => void;
+}
+
+export const useEventStreamStore = create<EventStreamState>((set, get) => ({
+  entries: [],
+  activeEventType: "feed.update",
+  activeFilter: "",
+  subscriptionId: null,
+  subscribed: false,
+
+  setActiveEventType: (t) => set({ activeEventType: t }),
+  setActiveFilter: (f) => set({ activeFilter: f }),
+
+  handleSubscribe: async () => {
+    const { activeEventType, activeFilter } = get();
+    try {
+      const filter = activeFilter.trim() ? JSON.parse(activeFilter) : {};
+      const subId = await apiClient.subscribe(
+        activeEventType,
+        (payload: unknown) => {
+          get().addEntry(activeEventType, payload, filter);
+        },
+        filter,
+      );
+      set({ subscriptionId: subId, subscribed: true });
+    } catch (err) {
+      console.error("Subscribe error:", err);
+    }
+  },
+
+  handleUnsubscribe: () => {
+    const { subscriptionId } = get();
+    if (subscriptionId) {
+      apiClient.unsubscribe(subscriptionId);
+    }
+    set({ subscriptionId: null, subscribed: false });
+  },
+
+  addEntry: (eventType, payload, filter) =>
+    set((s) => ({
+      entries: [
+        ...s.entries.slice(-49),
+        {
+          id: `evt-${Date.now()}-${Math.random().toString(36).slice(2, 5)}`,
+          eventType,
+          payload,
+          filter,
+          timestamp: Date.now(),
+        },
+      ],
+    })),
+}));