@steerable/agent-shell-web 0.6.40 → 0.6.42

package/README.md

@@ -14,9 +14,14 @@ export default createProductViteConfig({ productDir, flavor });
 
 The product's Vite build compiles this package's `src/` into the product's own
 bundle; there is no prebuilt `dist/` here. See
-[`docs/spec/architecture.md`](https://github.com/pathlyapp/opensteerable/blob/develop/docs/spec/architecture.md)
+[`docs/spec/architecture.md`](https://github.com/pathlyapp/steerable/blob/develop/docs/spec/architecture.md)
 for the tier model.
 
+Renderer code reads native and backend capabilities through `HostBridge`.
+Browser mode uses the HTTP/SSE adapter; Tauri mode layers native commands and
+menu events over that same adapter. `ElectronBridge` and
+`getElectronBridge()` remain deprecated compatibility aliases.
+
 Products that require authentication can register an `AppShellGate` from
 `@steerable/agent-shell-web/auth/gate` before calling `bootstrap()`. An
 enabled gate renders before the application router and calls

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.40",
+  "version": "0.6.42",
   "type": "module",
   "description": "Steerable framework — product-neutral renderer SPA source for @steerable/agent-shell (React + Vite). Consumed by product web entry points via the `@/` alias (anchored at this package's src/) and the createProductViteConfig factory. Published as a source package (src/), plus the compiled vite.base config factory (vite.base.js + .d.ts) for Node-side config loading.",
   "license": "Apache-2.0",
   "homepage": "https://steerableframework.com/",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/pathlyapp/opensteerable.git",
+    "url": "git+https://github.com/pathlyapp/steerable.git",
     "directory": "packages/agent-shell/web"
   },
   "bugs": {
-    "url": "https://github.com/pathlyapp/opensteerable/issues"
+    "url": "https://github.com/pathlyapp/steerable/issues"
   },
   "exports": {
     "./auth/gate": "./src/auth/gate.ts",
@@ -32,10 +32,12 @@
     "provenance": true
   },
   "dependencies": {
+    "@tauri-apps/api": "^2.11.1",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
     "framer-motion": "^12.38.0",
+    "html2canvas": "^1.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.5.0",
@@ -43,8 +45,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-protocol": "0.6.40",
-    "@steerable/agent-ui": "0.6.40"
+    "@steerable/agent-ui": "0.6.42",
+    "@steerable/agent-protocol": "0.6.42"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -57,7 +59,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.6.40"
+    "@steerable/pack-sdk": "0.6.42"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/components/chat/AskUserPromptProvider.tsx

@@ -13,16 +13,53 @@ import { getElectronBridge, type AskUserPromptRequest } from '@/lib/electron-bri
 type AnswerValue = string | string[];
 
 interface AskUserPromptContextValue {
+  queue: AskUserPromptRequest[];
+  answer: (requestId: string, answers: Record<string, AnswerValue>) => void;
+}
+
+interface AskUserPromptView {
   current: AskUserPromptRequest | null;
   pendingCount: number;
   answer: (answers: Record<string, AnswerValue>) => void;
 }
 
+/**
+ * Chat id from `#/agent/:chatId` (hash router) or `/agent/:chatId`.
+ * The running server build drops `chatId` on the ask-user payload.
+ */
+function chatIdFromLocation(location: { pathname: string; hash: string }): string | null {
+  const hashed = location.hash.startsWith('#') ? location.hash.slice(1) : '';
+  const raw = hashed || location.pathname;
+  const match = raw.match(/\/agent\/([^/?#]+)/);
+  if (!match?.[1]) return null;
+  try {
+    return decodeURIComponent(match[1]);
+  } catch {
+    return match[1];
+  }
+}
+
+function bindPromptToActiveChat(request: AskUserPromptRequest): AskUserPromptRequest {
+  if (request.chatId) return request;
+  const chatId = chatIdFromLocation(window.location);
+  if (!chatId) return request;
+  return { ...request, chatId };
+}
+
+/** A prompt with a chat id belongs only to that chat. A prompt without one stays visible so an older request is still answerable. */
+function promptVisibleInChat(
+  request: AskUserPromptRequest,
+  chatId: string | null | undefined,
+): boolean {
+  if (!request.chatId) return !chatId;
+  return request.chatId === chatId;
+}
+
 const AskUserPromptContext = createContext<AskUserPromptContextValue | null>(null);
 
 /**
- * Keeps structured user prompts alive across chat navigation while allowing
- * the active composer to present the current prompt.
+ * Keeps structured user prompts alive across chat navigation. Each composer
+ * presents only the prompt that belongs to its chat.
  */
 export function AskUserPromptProvider({ children }: { children: ReactNode }) {
   const [queue, setQueue] = useState<AskUserPromptRequest[]>([]);
@@ -38,10 +75,12 @@ export function AskUserPromptProvider({ children }: { children: ReactNode }) {
     ) => {
       setQueue((previous) => {
         const known = new Set(previous.map(({ requestId }) => requestId));
-        const additions = requests.filter(
-          ({ requestId }) =>
-            !known.has(requestId) && !answeredRequestIds.current.has(requestId),
-        );
+        const additions = requests
+          .filter(
+            ({ requestId }) =>
+              !known.has(requestId) && !answeredRequestIds.current.has(requestId),
+          )
+          .map(bindPromptToActiveChat);
         if (additions.length === 0) return previous;
         return placement === 'prepend'
           ? [...additions, ...previous]
@@ -65,25 +104,22 @@ export function AskUserPromptProvider({ children }: { children: ReactNode }) {
     };
   }, []);
 
-  const current = queue[0] ?? null;
   const answer = useCallback(
-    (answers: Record<string, AnswerValue>) => {
-      if (!current) return;
+    (requestId: string, answers: Record<string, AnswerValue>) => {
       const bridge = getElectronBridge();
-      answeredRequestIds.current.add(current.requestId);
-      setQueue((previous) => previous.slice(1));
-      void bridge?.askUser?.answer({ requestId: current.requestId, answers });
+      answeredRequestIds.current.add(requestId);
+      setQueue((previous) => previous.filter((request) => request.requestId !== requestId));
+      void bridge?.askUser?.answer({ requestId, answers });
     },
-    [current],
+    [],
   );
 
   const value = useMemo(
     () => ({
-      current,
-      pendingCount: Math.max(0, queue.length - 1),
+      queue,
       answer,
     }),
-    [answer, current, queue.length],
+    [answer, queue],
   );
 
   return (
@@ -93,7 +129,20 @@ export function AskUserPromptProvider({ children }: { children: ReactNode }) {
   );
 }
 
-/** Returns the structured prompt currently assigned to the chat composer. */
-export function useAskUserPrompt(): AskUserPromptContextValue | null {
-  return useContext(AskUserPromptContext);
+/** Returns the structured prompt for this composer’s chat, if one is waiting. */
+export function useAskUserPrompt(chatId?: string | null): AskUserPromptView | null {
+  const context = useContext(AskUserPromptContext);
+  return useMemo(() => {
+    if (!context) return null;
+    const mine = context.queue.filter((request) => promptVisibleInChat(request, chatId));
+    const current = mine[0] ?? null;
+    return {
+      current,
+      pendingCount: Math.max(0, mine.length - 1),
+      answer: (answers) => {
+        if (!current) return;
+        context.answer(current.requestId, answers);
+      },
+    };
+  }, [chatId, context]);
 }

package/src/components/chat/AskUserQuestionMenu.tsx

@@ -139,7 +139,7 @@ function Footer({
             className="inline-flex items-center gap-1 rounded-agent-md px-2.5 py-1.5 text-xs font-medium text-agent-muted-foreground transition hover:bg-agent-muted hover:text-agent-foreground"
           >
             <LuWand size={12} />
-            交给我决定
+            交给AI决定
           </button>
         )}
       </div>
@@ -588,9 +588,11 @@ export function AskUserQuestionMenu({
             {bottomHint ? ` · ${bottomHint}` : ''}
           </p>
         </div>
-        <span className="rounded-full border border-agent-border px-2 py-0.5 text-[10px] font-medium text-agent-muted-foreground">
-          {current.type === 'password' ? '密码输入' : current.multiSelect ? '可多选' : '菜单选择'}
-        </span>
+        {current.type === 'password' || current.multiSelect ? (
+          <span className="rounded-full border border-agent-border px-2 py-0.5 text-[10px] font-medium text-agent-muted-foreground">
+            {current.type === 'password' ? '密码输入' : '可多选'}
+          </span>
+        ) : null}
       </div>
 
       {current.type === 'select' ? (

package/src/components/chat/ChatInput.tsx

@@ -162,6 +162,8 @@ export interface ChatInputProps {
   skills?: SkillItem[];
   /** MCP tools for slash command autocomplete and chip rendering. */
   mcpTools?: McpToolItem[];
+  /** Chat this composer belongs to. Ask-user cards for other chats stay hidden. */
+  chatId?: string | null;
 }
 
 export type MentionReference = {
@@ -677,6 +679,84 @@ function getMentionRanges(
   return ranges;
 }
 
+/** 截图粘贴常见的空名 / `image.png`，同一秒再贴会按文件名被去重掉。 */
+const GENERIC_CLIPBOARD_IMAGE_NAME =
+  /^(image|clipboard|pasted-image|blob)(\.[a-z0-9]+)?$/i;
+
+const IMAGE_MIME_EXT: Record<string, string> = {
+  'image/png': 'png',
+  'image/jpeg': 'jpg',
+  'image/gif': 'gif',
+  'image/webp': 'webp',
+  'image/bmp': 'bmp',
+};
+
+function clipboardFiles(data: DataTransfer | null): File[] {
+  if (!data) return [];
+  const fromItems: File[] = [];
+  for (const item of Array.from(data.items ?? [])) {
+    if (item.kind !== 'file') continue;
+    const file = item.getAsFile();
+    if (file) fromItems.push(file);
+  }
+  if (fromItems.length > 0) return fromItems;
+  return Array.from(data.files ?? []);
+}
+
+function namePastedImage(file: File, serial: number, now: Date): File {
+  if (!file.type.startsWith('image/')) return file;
+  if (file.name.trim() && !GENERIC_CLIPBOARD_IMAGE_NAME.test(file.name.trim())) return file;
+  const ext = IMAGE_MIME_EXT[file.type.toLowerCase()] ?? 'png';
+  const pad = (n: number) => String(n).padStart(2, '0');
+  const stamp = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}-${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+  return new File([file], `pasted-${stamp}-${serial}.${ext}`, {
+    type: file.type,
+    lastModified: file.lastModified,
+  });
+}
+
+function AttachmentChip({
+  file,
+  onRemove,
+}: {
+  file: AttachmentFile;
+  onRemove: () => void;
+}) {
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  useEffect(() => {
+    const blob = file.file;
+    if (!blob?.type.startsWith('image/')) {
+      setPreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(blob);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [file.file]);
+
+  return (
+    <div
+      className="group flex items-center gap-1.5 rounded border border-agent-border bg-agent-muted/60 px-2.5 py-1 text-xs text-agent-foreground transition-all duration-150 select-none hover:bg-agent-muted max-w-xs"
+      title={file.path || file.name}
+    >
+      {previewUrl ? (
+        <img src={previewUrl} alt="" className="h-8 w-8 shrink-0 rounded object-cover" />
+      ) : (
+        <LuFile className="h-3.5 w-3.5 shrink-0 text-agent-muted-foreground" />
+      )}
+      <span className="max-w-[160px] truncate font-medium">{file.name}</span>
+      <button
+        type="button"
+        onClick={onRemove}
+        className="flex h-4 w-4 items-center justify-center rounded-full text-agent-muted-foreground transition-colors hover:bg-agent-foreground/10 hover:text-agent-foreground"
+        aria-label={`移除文件 ${file.name}`}
+      >
+        <LuX className="h-3 w-3" />
+      </button>
+    </div>
+  );
+}
+
 export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
   function ChatInput(
     {
@@ -709,10 +789,11 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       onMentionReferencesChange,
       skills: propSkills,
       mcpTools: propMcpTools,
+      chatId,
     },
     ref,
   ) {
-    const askUserPrompt = useAskUserPrompt();
+    const askUserPrompt = useAskUserPrompt(chatId);
     const approvalPrompt = useApprovalPrompt();
     const editorRef = useRef<HTMLDivElement>(null);
     const agentMenuRef = useRef<HTMLDivElement>(null);
@@ -741,6 +822,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     const compositionEndAtRef = useRef<number>(0);
 
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const pasteSerialRef = useRef(0);
     // 工具栏"空间不足时优先隐藏快捷键提示"的测量 refs，见下方 useLayoutEffect。
     const toolbarRowRef = useRef<HTMLDivElement>(null);
     const toolbarLeftRef = useRef<HTMLDivElement>(null);
@@ -1339,7 +1421,19 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 
     const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
       event.preventDefault();
-      replaceSelection(event.clipboardData.getData('text/plain'));
+      const data = event.clipboardData;
+      const pasted = !disabled && allowFileAttach ? clipboardFiles(data) : [];
+      if (pasted.length > 0) {
+        const now = new Date();
+        addFiles(
+          pasted.map((file) => {
+            pasteSerialRef.current += 1;
+            return toAttachment(namePastedImage(file, pasteSerialRef.current, now));
+          }),
+        );
+      }
+      const text = data?.getData('text/plain') ?? '';
+      if (text) replaceSelection(text);
     };
 
     const handleEditorScroll = () => {
@@ -1791,24 +1885,11 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
           {actualFiles.length > 0 && (
             <div className="flex flex-wrap gap-1.5 px-2.5 pb-1.5 pt-0.5">
               {actualFiles.map((file, idx) => (
-                <div
-                  key={idx}
-                  className="group flex items-center gap-1.5 rounded bg-agent-muted/60 hover:bg-agent-muted px-2.5 py-1 text-xs border border-agent-border text-agent-foreground select-none max-w-xs transition-all duration-150"
-                  title={file.path}
-                >
-                  <LuFile className="h-3.5 w-3.5 shrink-0 text-agent-muted-foreground" />
-                  <span className="truncate max-w-[160px] font-medium">
-                    {file.name}
-                  </span>
-                  <button
-                    type="button"
-                    onClick={() => handleRemoveFile(idx)}
-                    className="flex h-4 w-4 items-center justify-center rounded-full text-agent-muted-foreground hover:bg-agent-foreground/10 hover:text-agent-foreground transition-colors"
-                    aria-label={`移除文件 ${file.name}`}
-                  >
-                    <LuX className="h-3 w-3" />
-                  </button>
-                </div>
+                <AttachmentChip
+                  key={`${file.path || file.name}-${idx}`}
+                  file={file}
+                  onRemove={() => handleRemoveFile(idx)}
+                />
               ))}
             </div>
           )}
@@ -1842,7 +1923,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 onClick={handlePickFiles}
                 disabled={disabled || isStreaming}
                 className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground disabled:cursor-not-allowed disabled:opacity-50"
-                title="上传文件（可多选）"
+                title="上传文件，或在输入框粘贴图片"
                 aria-label="上传文件"
                 data-testid="chat-attach"
               >

package/src/components/chat/LocalChatPanel.tsx

@@ -402,6 +402,7 @@ export function LocalChatPanel({
           if (attachmentError) setAttachmentError(null);
         }}
         onMentionReferencesChange={setMentionReferences}
+        chatId={chatId}
       />
     </>
   );

package/src/hooks/useChatsAndAgents.ts

@@ -2,7 +2,7 @@
  * `useChatsAndAgents` — sidebar state (paginated chats + agent catalog + the
  * "agent picked for next new chat" selection) for the Agent shell.
  *
- * Wave 1 of the steerable-framework refactor moved the generic pagination /
+ * Wave 1 of the Steerable refactor moved the generic pagination /
  * agent-selection / title-patching machinery into `@steerable/agent-ui/state`
  * as `useChatList<TChat, TAgent>`. This file is now an Electron-flavoured
  * adapter:

package/src/lib/attachments.ts

@@ -1,8 +1,8 @@
 /**
  * 会话附件（文件上传）的 renderer 侧助手。
  *
- * ChatInput 只负责「收集」文件——通过隐藏的 `<input type="file" multiple>`
- * 或拖拽拿到 File，产出 `AttachmentFile`（{name, path, file?}）交给父组件。
+ * ChatInput 只负责「收集」文件——通过隐藏的 `<input type="file" multiple>`、
+ * 拖拽，或在输入框粘贴图片拿到 File，产出 `AttachmentFile`（{name, path, file?}）交给父组件。
  * 真正把文件落进会话空间（`<userDataDir>/attachments/<chatId>/`）由
  * `saveChatAttachments` 在提交时完成：
  *   - Electron：File 对象带真实 `path`，走 `attachments:save` IPC 拷贝；

package/src/lib/chat-transport.ts

@@ -28,7 +28,7 @@
  * Framework `SSEEvent` (packages/agent-protocol/ts/src/generated/SSEEvent.ts)
  * is the canonical normalisation target. The legacy-envelope mapping lives in
  * `@steerable/agent-ui/state`'s `bridgeLegacySSE` — this file used to keep its
- * own copy; wave 1 of the steerable-framework refactor consolidated them.
+ * own copy; wave 1 of the Steerable refactor consolidated them.
  *
  * We do still keep one app-specific guard: if any content has already
  * streamed and the backend ends with `budget_exhausted`, we downgrade that

package/src/lib/electron-bridge.ts

@@ -1,6 +1,5 @@
 /**
- * Typed view of `window.electron`, the bridge that Electron's preload script
- * (src/preload.ts in the main project) exposes via `contextBridge`.
+ * Host-neutral bridge used by the renderer in desktop and browser modes.
  *
  * This file MUST stay a subset / aligned shape with `ElectronAPI` in
  * `../../../src/preload.ts`. We intentionally don't TypeScript-reference that
@@ -8,13 +7,14 @@
  * into the renderer's compile graph. Treat this as a contract surface and
  * extend it lazily as apps/web starts using new bridge methods.
  *
- * Outside Electron (e.g. plain `vite dev` in a browser tab without preload),
- * `window.electron` is undefined. Always read it via `getElectronBridge()`
- * and handle the `null` case so the SPA stays demoable in a normal browser.
+ * `window.electron` and `getElectronBridge()` remain compatibility aliases for
+ * existing products. New integrations should use `window.steerableHost` and
+ * `getHostBridge()`.
  */
 
 import type { SSEEvent } from '@steerable/agent-protocol';
 import { getHttpBridge } from './http-bridge';
+import { getTauriBridge } from './tauri-bridge';
 
 export type LocalBackendRequestInput = {
   method: string;
@@ -61,6 +61,8 @@ export interface AskUserPromptRequest {
   requestId: string;
   intro: string;
   questions: Array<Record<string, unknown>>;
+  /** 发起提问的对话。缺省时卡片不绑定会话（旧请求）。 */
+  chatId?: string;
 }
 
 /**
@@ -86,7 +88,7 @@ export interface TerminalSpawnOptions {
   rows?: number;
 }
 
-export interface ElectronBridge {
+export interface HostBridge {
   runtime: 'local';
   platform: NodeJS.Platform;
   local?: {
@@ -249,9 +251,14 @@ export interface ElectronBridge {
   // shell 桥接口保持产品中立（3.1）。
 }
 
+/** @deprecated Use `HostBridge`. */
+export type ElectronBridge = HostBridge;
+
 declare global {
   interface Window {
+    steerableHost?: HostBridge;
     electron?: ElectronBridge;
+    __TAURI_INTERNALS__?: object;
     /**
      * BS server（src/server/）托管 index.html 时注入的引导信息；存在即代表
      * 当前跑在浏览器-服务器模式，getElectronBridge() 会返回 HTTP 实现。
@@ -264,13 +271,30 @@ declare global {
   }
 }
 
-export function getElectronBridge(): ElectronBridge | null {
+export function getHostBridge(): HostBridge | null {
   if (typeof window === 'undefined') return null;
+  if (window.steerableHost) return window.steerableHost;
   if (window.electron) return window.electron;
+  if (window.__TAURI_INTERNALS__ && window.__DEEPPATH_BS__) {
+    return getTauriBridge();
+  }
   if (window.__DEEPPATH_BS__) return getHttpBridge();
   return null;
 }
 
+/** @deprecated Use `getHostBridge`. */
+export const getElectronBridge = getHostBridge;
+
+export function isDesktopHost(): boolean {
+  if (typeof window === 'undefined') return false;
+  return Boolean(
+    window.steerableHost ||
+      window.electron ||
+      (window.__TAURI_INTERNALS__ && window.__DEEPPATH_BS__),
+  );
+}
+
+/** @deprecated Use `isDesktopHost` when desktop-only behavior is required. */
 export function isElectron(): boolean {
-  return getElectronBridge() !== null;
+  return getHostBridge() !== null;
 }

package/src/lib/host-bridge.ts

@@ -0,0 +1,7 @@
+/**
+ * Canonical renderer host contract.
+ *
+ * The legacy `electron-bridge` module remains available so existing product
+ * sources can migrate without a synchronized breaking release.
+ */
+export * from './electron-bridge';

package/src/lib/tauri-bridge.ts

@@ -0,0 +1,96 @@
+/**
+ * Tauri desktop adapter.
+ *
+ * Agent, terminal, approval, attachment, and pack traffic continues through
+ * the shared BS HTTP/SSE host. Only native desktop operations are overridden
+ * with narrow Tauri commands and events.
+ */
+import { invoke } from '@tauri-apps/api/core';
+import { listen, type UnlistenFn } from '@tauri-apps/api/event';
+import html2canvas from 'html2canvas';
+import type { HostBridge } from './electron-bridge';
+import { createHttpBridge } from './http-bridge';
+
+type VoidCallback = () => void;
+
+function createMenuSubscription(event: string): {
+  on(callback: VoidCallback): void;
+  off(): void;
+} {
+  const subscriptions = new Map<VoidCallback, Promise<UnlistenFn>>();
+  return {
+    on(callback) {
+      if (subscriptions.has(callback)) return;
+      const subscription = listen(event, () => callback());
+      subscriptions.set(callback, subscription);
+    },
+    off() {
+      const active = Array.from(subscriptions.values());
+      subscriptions.clear();
+      for (const subscription of active) {
+        void subscription.then((unlisten) => unlisten());
+      }
+    },
+  };
+}
+
+export function createTauriBridge(): HostBridge {
+  const bridge = createHttpBridge();
+  const newChatMenu = createMenuSubscription('menu:new-chat');
+  const terminalMenu = createMenuSubscription('menu:open-terminal');
+
+  return {
+    ...bridge,
+    local: {
+      ...bridge.local,
+      selectDirectory: (options) =>
+        invoke('host_select_directory', { options: options ?? {} }),
+      saveTextFile: (options) =>
+        invoke('host_save_text_file', { options }),
+      captureScreenshot: async (rect) => {
+        try {
+          const x = Math.max(0, (rect?.x ?? 0) + window.scrollX);
+          const y = Math.max(0, (rect?.y ?? 0) + window.scrollY);
+          const width = Math.max(1, rect?.width ?? window.innerWidth);
+          const height = Math.max(1, rect?.height ?? window.innerHeight);
+          const canvas = await html2canvas(document.body, {
+            x,
+            y,
+            width,
+            height,
+            scale: window.devicePixelRatio,
+            useCORS: true,
+            logging: false,
+          });
+          const pngBase64 = canvas.toDataURL('image/png').split(',', 2)[1];
+          if (!pngBase64) {
+            return { success: false, error: 'Failed to encode screenshot' };
+          }
+          return await invoke('host_capture_screenshot', {
+            image: {
+              pngBase64,
+              width: canvas.width,
+              height: canvas.height,
+            },
+          });
+        } catch (error) {
+          return {
+            success: false,
+            error: error instanceof Error ? error.message : String(error),
+          };
+        }
+      },
+    },
+    onMenuNewChat: newChatMenu.on,
+    offMenuNewChat: newChatMenu.off,
+    onMenuOpenTerminal: terminalMenu.on,
+    offMenuOpenTerminal: terminalMenu.off,
+  };
+}
+
+let singleton: HostBridge | null = null;
+
+export function getTauriBridge(): HostBridge {
+  singleton ??= createTauriBridge();
+  return singleton;
+}