@dyyz1993/create-agent 1.9.0

package/templates/general/src/mainview/hooks/use-input-history.ts

@@ -0,0 +1,84 @@
+import { useState, useCallback, useRef } from "react";
+
+const HISTORY_KEY = "pi-input-history";
+const MAX_ITEMS = 10;
+
+function getStorageKey(sessionId: string): string {
+  return `${HISTORY_KEY}:${sessionId}`;
+}
+
+function readHistory(sessionId: string): string[] {
+  try {
+    const raw = localStorage.getItem(getStorageKey(sessionId));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed)) return parsed.slice(0, MAX_ITEMS);
+  } catch { /* ignore */ }
+  return [];
+}
+
+function writeHistory(sessionId: string, items: string[]) {
+  try {
+    localStorage.setItem(getStorageKey(sessionId), JSON.stringify(items.slice(0, MAX_ITEMS)));
+  } catch { /* ignore */ }
+}
+
+export function useInputHistory(sessionId: string) {
+  const historyRef = useRef<string[]>(readHistory(sessionId));
+  const indexRef = useRef(-1);
+  const [, forceUpdate] = useState(0);
+
+  const hasPrev = historyRef.current.length > 0 && indexRef.current < historyRef.current.length - 1;
+  const hasNext = indexRef.current > 0;
+
+  const saveToHistory = useCallback((text: string) => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    const h = historyRef.current;
+    const filtered = h.filter((item) => item !== trimmed);
+    const updated = [trimmed, ...filtered].slice(0, MAX_ITEMS);
+    historyRef.current = updated;
+    writeHistory(sessionId, updated);
+    indexRef.current = -1;
+    forceUpdate((n) => n + 1);
+  }, [sessionId]);
+
+  const navigatePrev = useCallback((): string | null => {
+    const h = historyRef.current;
+    if (h.length === 0) return null;
+    const nextIdx = Math.min(indexRef.current + 1, h.length - 1);
+    indexRef.current = nextIdx;
+    forceUpdate((n) => n + 1);
+    return h[nextIdx];
+  }, []);
+
+  const navigateNext = useCallback((): string | null => {
+    const h = historyRef.current;
+    if (h.length === 0) return null;
+    const nextIdx = indexRef.current - 1;
+    if (nextIdx < 0) {
+      indexRef.current = -1;
+      forceUpdate((n) => n + 1);
+      return "";
+    }
+    indexRef.current = nextIdx;
+    forceUpdate((n) => n + 1);
+    return h[nextIdx];
+  }, []);
+
+  const clearHistory = useCallback(() => {
+    historyRef.current = [];
+    indexRef.current = -1;
+    try {
+      localStorage.removeItem(getStorageKey(sessionId));
+    } catch { /* ignore */ }
+    forceUpdate((n) => n + 1);
+  }, [sessionId]);
+
+  const resetIndex = useCallback(() => {
+    indexRef.current = -1;
+    forceUpdate((n) => n + 1);
+  }, []);
+
+  return { saveToHistory, navigatePrev, navigateNext, clearHistory, resetIndex, hasPrev, hasNext };
+}

package/templates/general/src/mainview/hooks/use-rpc-init.ts

@@ -0,0 +1,61 @@
+import { useEffect } from "react";
+import { useConnectionStore } from "../stores/use-connection-store";
+import { useLogStore } from "../stores/use-log-store";
+import { useExplorerStore } from "../stores/use-explorer-store";
+import { useChatStore } from "../stores/use-chat-store";
+import { apiClient } from "../lib/api-client";
+
+export function useRpcInit() {
+  const ready = useConnectionStore((s) => s.ready);
+  const addLog = useLogStore((s) => s.addLog);
+  const initializeConnection = useConnectionStore((s) => s.initializeConnection);
+  const listRootDir = useExplorerStore((s) => s.listRootDir);
+
+  useEffect(() => {
+    initializeConnection();
+  }, [initializeConnection]);
+
+  useEffect(() => {
+    if (!ready) return;
+
+    let subscriptionId: string | null = null;
+
+    const setup = async () => {
+      listRootDir();
+
+      subscriptionId = await apiClient.subscribe("chat.message", (payload) => {
+        useChatStore.getState().addMessage({
+          id: payload.id,
+          role: payload.role,
+          content: payload.content,
+          timestamp: payload.timestamp,
+        });
+      }, {});
+      addLog("Subscribed to chat.message");
+
+      try {
+        const history = await apiClient.call("chat.list", { limit: 100 });
+        if (history.messages.length > 0) {
+          useChatStore.getState().setMessages(
+            history.messages.map((m: { id: string; role: "user" | "assistant"; content: string; timestamp: number }) => ({
+              id: m.id,
+              role: m.role,
+              content: m.content,
+              timestamp: m.timestamp,
+            }))
+          );
+          addLog(`Loaded ${history.messages.length} history messages`);
+        }
+      } catch (err) {
+        addLog(`Failed to load history: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    };
+    setup();
+
+    return () => {
+      if (subscriptionId) {
+        apiClient.unsubscribe(subscriptionId);
+      }
+    };
+  }, [ready, addLog, listRootDir]);
+}

package/templates/general/src/mainview/hooks/use-sidebar-resize.ts

@@ -0,0 +1,40 @@
+import { useCallback, useRef } from "react";
+import { useSidebarStore } from "../stores/use-sidebar-store";
+
+export function useSidebarResize() {
+  const sidebarWidth = useSidebarStore((s) => s.sidebarWidth);
+  const setSidebarWidth = useSidebarStore((s) => s.setSidebarWidth);
+
+  const resizingRef = useRef(false);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+
+  const handleResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      resizingRef.current = true;
+      startXRef.current = e.clientX;
+      startWidthRef.current = sidebarWidth;
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+
+      const onMove = (ev: MouseEvent) => {
+        if (!resizingRef.current) return;
+        const delta = ev.clientX - startXRef.current;
+        setSidebarWidth(startWidthRef.current + delta);
+      };
+      const onUp = () => {
+        resizingRef.current = false;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [sidebarWidth, setSidebarWidth]
+  );
+
+  return { sidebarWidth, handleResizeStart };
+}

package/templates/general/src/mainview/index.css

@@ -0,0 +1,61 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f3f4f6;
+  --color-bg-tertiary: #e5e7eb;
+  --color-bg-input: #f9fafb;
+  --color-bg-hover: #e5e7eb;
+  --color-bg-active: #d1d5db;
+  --color-bg-sidebar: #f3f4f6;
+  --color-bg-overlay: rgba(0, 0, 0, 0.5);
+
+  --color-text-primary: #111827;
+  --color-text-secondary: #4b5563;
+  --color-text-tertiary: #9ca3af;
+  --color-text-placeholder: #6b7280;
+  --color-text-accent: #4f46e5;
+  --color-text-success: #16a34a;
+  --color-text-error: #dc2626;
+  --color-text-info: #0891b2;
+
+  --color-border-primary: #d1d5db;
+  --color-border-secondary: #e5e7eb;
+
+  --color-accent: #4f46e5;
+  --color-accent-hover: #4338ca;
+
+  --color-badge-bg: #e0e7ff;
+  --color-badge-text: #3730a3;
+}
+
+.dark {
+  --color-bg-primary: #111827;
+  --color-bg-secondary: #1f2937;
+  --color-bg-tertiary: #374151;
+  --color-bg-input: #374151;
+  --color-bg-hover: #4b5563;
+  --color-bg-active: #6b7280;
+  --color-bg-sidebar: #1f2937;
+  --color-bg-overlay: rgba(0, 0, 0, 0.7);
+
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #d1d5db;
+  --color-text-tertiary: #6b7280;
+  --color-text-placeholder: #9ca3af;
+  --color-text-accent: #818cf8;
+  --color-text-success: #4ade80;
+  --color-text-error: #f87171;
+  --color-text-info: #22d3ee;
+
+  --color-border-primary: #374151;
+  --color-border-secondary: #4b5563;
+
+  --color-accent: #6366f1;
+  --color-accent-hover: #4f46e5;
+
+  --color-badge-bg: #312e81;
+  --color-badge-text: #a5b4fc;
+}

package/templates/general/src/mainview/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React + Tailwind + Vite</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/templates/general/src/mainview/lib/api-client.ts

@@ -0,0 +1,175 @@
+import { createTypedClient, WebSocketTransport, IPCTransport } from "@dyyz1993/rpc-core";
+import type { TypedClient, MethodParams, MethodResult, EventPayload, EventMetadata } from "@dyyz1993/rpc-core";
+import type { RPCMethods, RPCEvents } from "../../shared/rpc-schema";
+
+/**
+ * Token 来源优先级：
+ * 1. URL query ?token=xxx（部署时注入）
+ * 2. localStorage "rpc-auth-token"
+ * 3. 默认值（开发用）
+ */
+function resolveAuthToken(): string {
+  if (typeof window !== "undefined") {
+    const fromQuery = new URLSearchParams(window.location.search).get("token");
+    if (fromQuery) return fromQuery;
+    const fromStorage = localStorage.getItem("rpc-auth-token");
+    if (fromStorage) return fromStorage;
+  }
+  return "pi-agent-template-token";
+}
+
+const AUTH_TOKEN = resolveAuthToken();
+
+class APIClientImpl {
+  private client: TypedClient<RPCMethods, RPCEvents> | null = null;
+  private initPromise: Promise<void> | null = null;
+  private _transport: "ipc" | "websocket" = "websocket";
+  private _baseUrl: string | null = null;
+  private wsTransport: WebSocketTransport | null = null;
+
+  /**
+   * 桌面端同步初始化：通过 executeJavascript 接收 + __electrobunBunBridge 发送
+   */
+  initSyncForDesktop(): void {
+    if (this.client) return;
+
+    const ipcTransport = new IPCTransport();
+    this._transport = "ipc";
+    this._baseUrl = null; // 桌面端不走 HTTP
+    this.client = createTypedClient<RPCMethods, RPCEvents>(ipcTransport);
+    this.setupElectrobunBridge(ipcTransport);
+  }
+
+  /**
+   * 异步初始化：Web 端使用（连接 WebSocket）
+   */
+  async initialize(): Promise<void> {
+    // 已连接且 transport 正常 → 直接返回
+    if (this.client && (this._transport === "ipc" || this.wsTransport?.isConnected())) {
+      return;
+    }
+
+    // client 存在但 WS 断开了 → 清理后重连
+    if (this.client && this.wsTransport && !this.wsTransport.isConnected()) {
+      this.wsTransport.close();
+      this.wsTransport = null;
+      this.client = null;
+      this.initPromise = null;
+    }
+
+    if (this.initPromise) return this.initPromise;
+
+    this.initPromise = (async () => {
+      const env = this.detectEnvironment();
+
+      if (env === "electrobun") {
+        // 不应走到这里，桌面端应通过 initSyncForDesktop() 初始化
+        this.initSyncForDesktop();
+      } else {
+        this._transport = "websocket";
+        const wsUrl = this.getWebSocketUrl();
+        this.wsTransport = new WebSocketTransport(wsUrl);
+        await this.wsTransport.connect();
+        this.client = createTypedClient<RPCMethods, RPCEvents>(this.wsTransport);
+
+        const wsUrlObj = new URL(wsUrl);
+        this._baseUrl = `http://${wsUrlObj.host}`;
+      }
+    })();
+
+    return this.initPromise;
+  }
+
+  private detectEnvironment(): "electrobun" | "browser" {
+    if (typeof window === "undefined") return "browser";
+    if (window.__electrobunBunBridge) return "electrobun";
+    return "browser";
+  }
+
+  private getWebSocketUrl(): string {
+    if (typeof window === "undefined") return `ws://localhost:3100?token=${AUTH_TOKEN}`;
+    const customUrl = (
+      new URLSearchParams(window.location.search).get("ws") ||
+      localStorage.getItem("rpc-websocket-url")
+    );
+    if (customUrl) return customUrl.includes("token=") ? customUrl : `${customUrl}?token=${AUTH_TOKEN}`;
+    return `ws://${window.location.host}/ws?token=${AUTH_TOKEN}`;
+  }
+
+  /**
+   * 桌面端 IPC 桥接：
+   * - Bun → Browser: 通过 executeJavascript 调用 window.__piAgentIPC()
+   * - Browser → Bun: 通过 __electrobunBunBridge.postMessage 发送 Electrobun 消息格式
+   */
+  private setupElectrobunBridge(ipcTransport: IPCTransport): void {
+    if (typeof window === "undefined") return;
+
+    const win = window;
+
+    // 1. 注册接收函数：Bun 通过 executeJavascript 调用此函数发送消息到 Browser
+    win.__piAgentIPC = (msg: unknown) => {
+      ipcTransport.simulateMessage(msg);
+    };
+
+    // 2. 覆写 send：将 RPC-core 消息包装成 Electrobun 消息格式，通过原生桥接发送
+    const bridge = win.__electrobunBunBridge;
+
+    if (bridge) {
+      ipcTransport.send = async (message: unknown) => {
+        // 包装成 Electrobun message packet，bun 端 defineRPC 注册了 "rpc-message" handler
+        const electrobunPacket = {
+          type: "message",
+          id: "rpc-message",
+          payload: JSON.stringify(message),
+        };
+        bridge.postMessage(JSON.stringify(electrobunPacket));
+      };
+    }
+  }
+
+  getTransport(): "ipc" | "websocket" {
+    return this._transport;
+  }
+
+  /** Web 端 HTTP 基础 URL（如 http://localhost:3100），桌面端返回 null */
+  getBaseUrl(): string | null {
+    return this._baseUrl;
+  }
+
+  /** 获取当前 auth token（用于需要直接调 HTTP 的场景） */
+  getAuthToken(): string {
+    return AUTH_TOKEN;
+  }
+
+  async call<K extends keyof RPCMethods>(
+    method: K,
+    params: MethodParams<RPCMethods, K>
+  ): Promise<MethodResult<RPCMethods, K>> {
+    await this.initialize();
+    return this.client!.call(method, params);
+  }
+
+  async subscribe<K extends keyof RPCEvents>(
+    eventType: K,
+    handler: (payload: EventPayload<RPCEvents[K]>, metadata: EventMetadata<RPCEvents[K]>) => void,
+    filter?: Record<string, unknown>
+  ): Promise<string> {
+    await this.initialize();
+    return this.client!.subscribe(eventType, handler, filter);
+  }
+
+  unsubscribe(subscriptionId: string): void {
+    this.client?.unsubscribe(subscriptionId);
+  }
+
+  isConnected(): boolean {
+    return this.client !== null;
+  }
+
+  close(): void {
+    this.client?.close();
+  }
+}
+
+export const apiClient = new APIClientImpl();
+export type { APIClientImpl, RPCMethods, RPCEvents };

package/templates/general/src/mainview/lib/i18n/index.ts

@@ -0,0 +1,30 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import en from "./locales/en.json";
+import zh from "./locales/zh.json";
+
+export const supportedLocales = ["en", "zh"] as const;
+export type Locale = (typeof supportedLocales)[number];
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translation: en },
+      zh: { translation: zh },
+    },
+    fallbackLng: "en",
+    supportedLngs: [...supportedLocales],
+    interpolation: {
+      escapeValue: false,
+    },
+    detection: {
+      order: ["localStorage", "navigator"],
+      lookupLocalStorage: "locale",
+      caches: ["localStorage"],
+    },
+  });
+
+export default i18n;

package/templates/general/src/mainview/lib/i18n/locales/en.json

@@ -0,0 +1,157 @@
+{
+  "app": {
+    "title": "Pi Agent",
+    "connecting": "Connecting to RPC server...",
+    "mode": {
+      "desktop": "Desktop (IPC)",
+      "web": "Web (WebSocket)"
+    }
+  },
+  "sidebar": {
+    "explorer": "Explorer",
+    "git": "Source Control",
+    "search": "Search",
+    "rules": "Rules"
+  },
+  "tabs": {
+    "chat": "Chat",
+    "feed": "Feed + Subs",
+    "bash": "Terminal",
+    "todo": "Todo",
+    "debug": "Debug"
+  },
+  "chat": {
+    "title": "Messages",
+    "placeholder": "Type a message...",
+    "send": "Send",
+    "empty": "Start a conversation..."
+  },
+  "explorer": {
+    "title": "Explorer",
+    "pathPlaceholder": "Path",
+    "refresh": "Refresh",
+    "listDirectory": "List directory",
+    "newFile": "New File",
+    "newFolder": "New Folder",
+    "rename": "Rename",
+    "delete": "Delete",
+    "copyPath": "Copy Path",
+    "confirmDelete": "Confirm Delete",
+    "confirmDeleteMessage": "Are you sure you want to delete \"{{name}}\"? This action cannot be undone.",
+    "emptyHint": "Enter path and click refresh"
+  },
+  "git": {
+    "title": "Source Control",
+    "staged": "Staged Changes",
+    "changes": "Changes",
+    "untracked": "Untracked",
+    "noChanges": "No changes detected",
+    "commits": "Commits",
+    "noCommits": "No commits",
+    "noFiles": "No files",
+    "loadingFiles": "Loading files...",
+    "commitPlaceholder": "Commit message (Ctrl+Enter to commit)",
+    "committing": "Committing...",
+    "commit": "Commit",
+    "openDiff": "Open Diff",
+    "openFile": "Open File",
+    "copyHash": "Copy Hash",
+    "copyMessage": "Copy Message",
+    "copyPath": "Copy Path",
+    "pull": "Pull",
+    "push": "Push",
+    "refresh": "Refresh",
+    "stage": "Stage",
+    "unstage": "Unstage",
+    "stageAll": "Stage all",
+    "unstageAll": "Unstage all",
+    "worktrees": "Worktrees",
+    "close": "Close",
+    "justNow": "just now",
+    "minutesAgo": "{{count}}m ago",
+    "hoursAgo": "{{count}}h ago",
+    "daysAgo": "{{count}}d ago"
+  },
+  "feed": {
+    "title": "Feed + Subscriptions",
+    "newPost": "New Post",
+    "authorPlaceholder": "Author",
+    "post": "Post",
+    "postPlaceholder": "Write a post...",
+    "subscribeWithFilter": "Subscribe with Filter",
+    "filterPlaceholder": "filter JSON, e.g. {\"category\":\"tech\"}",
+    "subscribe": "Subscribe",
+    "unsubscribe": "Unsubscribe",
+    "noFilter": "no filter",
+    "eventStream": "Event Stream",
+    "live": "LIVE",
+    "noPostsYet": "No posts yet. Create one above!"
+  },
+  "todo": {
+    "title": "Todo",
+    "add": "Add Todo",
+    "placeholder": "What needs to be done?",
+    "save": "Add",
+    "empty": "No tasks yet",
+    "emptyHint": "Click \"Add Todo\" to create one",
+    "status": "Status:",
+    "statusPending": "pending",
+    "statusInProgress": "in progress",
+    "statusCompleted": "completed"
+  },
+  "rules": {
+    "title": "Rules",
+    "add": "Add Rule",
+    "namePlaceholder": "Rule name",
+    "patternPlaceholder": "Glob pattern (e.g. **/*.ts)",
+    "save": "Save",
+    "empty": "No rules defined yet",
+    "emptyHint": "Click \"Add Rule\" to create one",
+    "pattern": "Pattern:"
+  },
+  "bash": {
+    "title": "Terminal",
+    "enterCommand": "Enter command...",
+    "run": "Run",
+    "processRunning": "Process running... (PID: {{pid}})",
+    "waitingOutput": "Waiting for output...",
+    "exit": "Exit: {{code}}",
+    "noActiveProcess": "No active process",
+    "getStarted": "Run a command to get started",
+    "kill": "Kill",
+    "exited": "exited({{code}})"
+  },
+  "diff": {
+    "lineByLine": "Line by line",
+    "sideBySide": "Side by side",
+    "loading": "Loading diff...",
+    "before": "Before",
+    "after": "After"
+  },
+  "debug": {
+    "rpcCalls": "RPC Calls",
+    "call": "Call",
+    "subscriptions": "Subscriptions",
+    "subscribe": "Subscribe",
+    "unsubscribe": "Unsubscribe",
+    "events": "{{count}} events",
+    "noEvents": "No events yet",
+    "logs": "Logs"
+  },
+  "theme": {
+    "light": "Light",
+    "dark": "Dark",
+    "toggle": "Toggle theme"
+  },
+  "locale": {
+    "en": "English",
+    "zh": "中文"
+  },
+  "common": {
+    "loading": "Loading...",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "save": "Save",
+    "delete": "Delete"
+  }
+}