@dyyz1993/create-agent 1.9.0

package/templates/chat/src/mainview/components/activity-bar/MobileTabBar.tsx

@@ -0,0 +1,20 @@
+import { useTranslation } from "react-i18next";
+import { items } from "./ActivityBar";
+
+export function MobileTabBar() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-14 bg-[var(--color-bg-primary)] border-t border-[var(--color-border-primary)] flex items-center justify-around flex-shrink-0">
+      {items.map(({ id, icon: Icon, labelKey }) => (
+        <button
+          key={id}
+          className="flex flex-col items-center justify-center gap-0.5 px-3 py-1 rounded transition-colors text-[var(--color-text-accent)]"
+        >
+          <Icon className="w-5 h-5" />
+          <span className="text-[10px]">{t(labelKey)}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/templates/chat/src/mainview/components/chat/ChatPanel.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useRef } from "react";
+import { MessageSquare, Send } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useChatStore } from "../../stores/use-chat-store";
+import { MessageBubble } from "./MessageBubble";
+
+export function ChatPanel() {
+  const { t } = useTranslation();
+  const messages = useChatStore((s) => s.messages);
+  const inputText = useChatStore((s) => s.inputText);
+  const setInputText = useChatStore((s) => s.setInputText);
+  const sendMessage = useChatStore((s) => s.sendMessage);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden relative">
+      {/* Chat header */}
+      <div className="px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex items-center justify-between flex-shrink-0">
+        <h2 className="text-sm font-semibold flex items-center gap-1.5">
+          <MessageSquare className="w-4 h-4 text-[var(--color-text-accent)]" />
+          {t("chat.title")}
+          {messages.length > 0 && (
+            <span className="ml-1 px-2 py-0.5 bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] rounded text-[10px]">
+              {messages.length}
+            </span>
+          )}
+        </h2>
+      </div>
+
+      {/* Messages list */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        {messages.length === 0 ? (
+          <div className="flex items-center justify-center h-full text-[var(--color-text-placeholder)] text-sm">
+            {t("chat.empty")}
+          </div>
+        ) : (
+          messages.map((msg) => <MessageBubble key={msg.id} message={msg} />)
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input bar */}
+      <div className="px-4 py-3 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border-primary)] flex gap-2 flex-shrink-0">
+        <input
+          type="text"
+          value={inputText}
+          onChange={(e) => setInputText(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && sendMessage()}
+          placeholder={t("chat.placeholder")}
+          className="flex-1 px-3 py-2 text-sm bg-[var(--color-bg-tertiary)] rounded-lg text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
+        />
+        <button
+          onClick={sendMessage}
+          className="px-4 py-2 text-sm bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded-lg transition-colors flex items-center gap-1.5"
+        >
+          <Send className="w-4 h-4" />
+          {t("chat.send")}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/chat/src/mainview/components/chat/MessageBubble.tsx

@@ -0,0 +1,85 @@
+import { Bot } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Highlight, themes } from "prism-react-renderer";
+import type { ChatMessage } from "../../types";
+
+interface MessageBubbleProps {
+  message: ChatMessage;
+}
+
+function formatTime(ts: number): string {
+  const d = new Date(ts);
+  const hh = d.getHours().toString().padStart(2, "0");
+  const mm = d.getMinutes().toString().padStart(2, "0");
+  return `${hh}:${mm}`;
+}
+
+function CodeBlock({ children, className }: { children: string; className?: string }) {
+  const language = className?.replace(/language-/, "") || "text";
+  return (
+    <Highlight theme={themes.nightOwl} code={children.trimEnd()} language={language}>
+      {({ style, tokens, getLineProps, getTokenProps }) => (
+        <pre
+          className="rounded-md p-3 my-2 overflow-x-auto text-xs leading-relaxed"
+          style={{ ...style, background: "#1e1e2e" }}
+        >
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line })}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+}
+
+export function MessageBubble({ message }: MessageBubbleProps) {
+  const isUser = message.role === "user";
+
+  return (
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"} items-start gap-2`}>
+      {!isUser && (
+        <div className="flex-shrink-0 mt-1">
+          <Bot className="w-4 h-4 text-[var(--color-text-accent)]" />
+        </div>
+      )}
+      <div
+        className={`max-w-[85%] px-3 py-2 rounded-lg text-sm break-words ${
+          isUser
+            ? "bg-[var(--color-accent)] text-[var(--color-text-primary)]"
+            : "bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)]"
+        }`}
+      >
+        {isUser ? (
+          <span className="whitespace-pre-wrap">{message.content}</span>
+        ) : (
+          <div className="markdown-body prose prose-invert prose-sm max-w-none [&_p]:mb-2 [&_p:last-child]:mb-0 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:mb-1 [&_h1]:text-base [&_h1]:font-bold [&_h1]:mb-2 [&_h2]:text-sm [&_h2]:font-bold [&_h2]:mb-1 [&_blockquote]:border-l-2 [&_blockquote]:border-[var(--color-text-accent)] [&_blockquote]:pl-3 [&_blockquote]:text-[var(--color-text-tertiary)] [&_a]:text-[var(--color-text-accent)] [&_a]:underline [&_code:not(pre_code)]:bg-[var(--color-bg-input)] [&_code:not(pre_code)]:px-1 [&_code:not(pre_code)]:rounded [&_code:not(pre_code)]:text-xs [&_table]:border-collapse [&_th]:border [&_th]:border-[var(--color-border-secondary)] [&_th]:px-2 [&_th]:py-1 [&_td]:border [&_td]:border-[var(--color-border-secondary)] [&_td]:px-2 [&_td]:py-1">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                code({ className, children, ...props }) {
+                  const isBlock = className?.startsWith("language-") || String(children).includes("\n");
+                  if (isBlock) {
+                    return <CodeBlock className={className}>{String(children)}</CodeBlock>;
+                  }
+                  return <code className={className} {...props}>{children}</code>;
+                },
+              }}
+            >
+              {message.content}
+            </ReactMarkdown>
+          </div>
+        )}
+      </div>
+      {message.timestamp && (
+        <span className="text-[10px] text-[var(--color-text-tertiary)] ml-2 flex-shrink-0">
+          {formatTime(message.timestamp)}
+        </span>
+      )}
+    </div>
+  );
+}

package/templates/chat/src/mainview/components/common/LanguageSwitcher.tsx

@@ -0,0 +1,15 @@
+import { useLocaleStore } from "../../stores/use-locale-store";
+
+export function LanguageSwitcher() {
+  const { locale, setLocale } = useLocaleStore();
+
+  return (
+    <button
+      onClick={() => setLocale(locale === "en" ? "zh" : "en")}
+      className="px-1.5 py-0.5 rounded text-xs hover:bg-[var(--color-bg-hover)] transition-colors text-[var(--color-text-secondary)]"
+      title={locale === "en" ? "切换到中文" : "Switch to English"}
+    >
+      {locale === "en" ? "中" : "EN"}
+    </button>
+  );
+}

package/templates/chat/src/mainview/components/common/ThemeToggle.tsx

@@ -0,0 +1,24 @@
+import { useThemeStore } from "../../stores/use-theme-store";
+
+export function ThemeToggle() {
+  const theme = useThemeStore((s) => s.theme);
+  const toggleTheme = useThemeStore((s) => s.toggleTheme);
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="p-1.5 rounded-md hover:bg-[var(--color-bg-hover)] transition-colors"
+      title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      {theme === "dark" ? (
+        <svg className="w-4 h-4 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+        </svg>
+      ) : (
+        <svg className="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>
+      )}
+    </button>
+  );
+}

package/templates/chat/src/mainview/components/sidebar/PinButton.tsx

@@ -0,0 +1,20 @@
+import { Pin, PinOff } from "lucide-react";
+import { useSidebarStore } from "../../stores/use-sidebar-store";
+
+export function PinButton() {
+  const isPinned = useSidebarStore((s) => s.isPinned);
+  const setPinned = useSidebarStore((s) => s.setPinned);
+  const isMobile = useSidebarStore((s) => s.breakpoint) === "mobile";
+
+  if (isMobile) return null;
+
+  return (
+    <button
+      onClick={() => setPinned(!isPinned)}
+      title={isPinned ? "Unpin sidebar" : "Pin sidebar"}
+      className="text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)] transition-colors"
+    >
+      {isPinned ? <PinOff className="w-3 h-3" /> : <Pin className="w-3 h-3" />}
+    </button>
+  );
+}

package/templates/chat/src/mainview/global.d.ts

@@ -0,0 +1,13 @@
+declare global {
+  interface Window {
+    __electrobun?: {
+      receiveMessageFromBun: (msg: unknown) => void;
+    };
+    __electrobunBunBridge?: {
+      postMessage: (msg: string) => void;
+    };
+    /** Desktop IPC receiver: Bun calls this via executeJavascript */
+    __piAgentIPC?: (msg: unknown) => void;
+  }
+}
+export {};

package/templates/chat/src/mainview/hooks/use-breakpoint.ts

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { useSidebarStore, type Breakpoint } from "../stores/use-sidebar-store";
+
+function getBreakpoint(width: number): Breakpoint {
+  if (width < 768) return "mobile";
+  if (width < 1024) return "tablet";
+  return "desktop";
+}
+
+/**
+ * 单一 ResizeObserver，同步 breakpoint 到 sidebar store。
+ * 组件通过 useSidebarStore(s => s.breakpoint) 读取。
+ */
+export function useBreakpointSync() {
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+    const obs = new ResizeObserver((entries) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        for (const entry of entries) {
+          const bp = getBreakpoint(entry.contentRect.width);
+          if (bp !== useSidebarStore.getState().breakpoint) {
+            useSidebarStore.getState()._setBreakpoint(bp);
+          }
+        }
+      }, 100);
+    });
+    obs.observe(document.documentElement);
+    return () => {
+      clearTimeout(timer);
+      obs.disconnect();
+    };
+  }, []);
+}

package/templates/chat/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/chat/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/chat/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/chat/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/chat/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;