@steerable/agent-shell-web 0.6.55 → 0.6.57

package/README.md

@@ -17,10 +17,9 @@ bundle; there is no prebuilt `dist/` here. See
 [`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.
+Renderer code reads native and backend capabilities through `HostBridge`
+(`getHostBridge()`). Browser mode uses the HTTP/SSE adapter; Tauri mode
+layers native commands and menu events over that same adapter.
 
 Products that require authentication can register an `AppShellGate` from
 `@steerable/agent-shell-web/auth/gate` before calling `bootstrap()`. An

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.55",
+  "version": "0.6.57",
   "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",
@@ -45,8 +45,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-protocol": "0.6.55",
-    "@steerable/agent-ui": "0.6.55"
+    "@steerable/agent-ui": "0.6.57",
+    "@steerable/agent-protocol": "0.6.57"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -59,7 +59,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.6.55"
+    "@steerable/pack-sdk": "0.6.57"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/AppShell.tsx

@@ -1,5 +1,5 @@
 import { Outlet } from 'react-router-dom';
-import { isElectron } from './lib/electron-bridge';
+import { hasHostBridge } from './lib/host-bridge';
 import { isDemoMode } from './lib/demo-flag';
 
 export function AppShell() {
@@ -13,9 +13,9 @@ export function AppShell() {
           Demo · simulated data, no live model
         </div>
       ) : (
-        !isElectron() && (
+        !hasHostBridge() && (
           <div className="border-t border-agent-border bg-agent-muted px-3 py-1 text-xs text-agent-muted-foreground">
-            Browser preview mode &middot; running outside Electron, IPC bridge unavailable
+            Browser preview mode &middot; no host bridge
           </div>
         )
       )}

package/src/components/AgentSidebar.tsx

@@ -92,7 +92,7 @@ import {
 import { RiPushpin2Fill, RiPushpin2Line } from "react-icons/ri";
 import { parseChatTitle } from "@/lib/chat-title";
 import { getDateGroupLabel, getDateGroupPriority } from "@/lib/date-groups";
-import { getElectronBridge, isElectron } from "@/lib/electron-bridge";
+import { getHostBridge, hasHostBridge } from "@/lib/host-bridge";
 import { hasGeneralSettingsChrome, hostToolChrome, settingsChrome } from "@/lib/host-tools";
 import {
   createProject,
@@ -290,7 +290,7 @@ export function AgentSidebar({
   const navigate = useNavigate();
   const location = useLocation();
   const { chatId: currentChatId } = useParams<{ chatId?: string }>();
-  const bridge = getElectronBridge();
+  const bridge = getHostBridge();
   const release = useAppRelease();
   const onSettingsPage = location.pathname === "/settings";
   // 插件页（及旧的 agents/skills/mcp 深链）高亮「插件」；其余 /settings 高亮底部综合设置。
@@ -385,7 +385,7 @@ export function AgentSidebar({
     const backgroundIds = [...streamingChatIds].filter(
       (id) => id !== currentChatId,
     );
-    if (backgroundIds.length === 0 || !isElectron()) return;
+    if (backgroundIds.length === 0 || !hasHostBridge()) return;
 
     let cancelled = false;
     let ticking = false;
@@ -908,7 +908,7 @@ export function AgentSidebar({
     normalizedChats.length,
   ]);
 
-  const hasElectron = isElectron();
+  const hasElectron = hasHostBridge();
 
   return (
     <div className="flex h-full w-full flex-col border-r border-agent-border/60 bg-agent-muted/70 backdrop-blur-md">

package/src/components/CreateProjectModal.tsx

@@ -7,7 +7,7 @@ import { createPortal } from 'react-dom';
 import { LuFolder, LuFolderPlus, LuX } from 'react-icons/lu';
 import { BRAND_NAME } from '@/brand';
 import { ConfirmDialog } from '@/components/ConfirmDialog';
-import { getElectronBridge } from '@/lib/electron-bridge';
+import { getHostBridge } from '@/lib/host-bridge';
 import { t } from '@/i18n';
 
 export interface ProjectFormValues {
@@ -83,7 +83,7 @@ export function CreateProjectModal({
       addSourceFolder(typed);
       return;
     }
-    const picker = getElectronBridge()?.local?.selectDirectory;
+    const picker = getHostBridge()?.local?.selectDirectory;
     if (!picker) {
       setError(t('Enter a folder path'));
       return;

package/src/components/SidebarRelease.tsx

@@ -4,9 +4,9 @@ import {
   type AppReleaseView,
 } from '@/lib/app-release';
 import {
-  getElectronBridge,
+  getHostBridge,
   type AppReleaseSnapshot,
-} from '@/lib/electron-bridge';
+} from '@/lib/host-bridge';
 import { t } from '@/i18n';
 
 export function useAppRelease(): AppReleaseView & { run: () => void } {
@@ -14,7 +14,7 @@ export function useAppRelease(): AppReleaseView & { run: () => void } {
   const [confirmedCurrent, setConfirmedCurrent] = useState(false);
 
   useEffect(() => {
-    const app = getElectronBridge()?.app;
+    const app = getHostBridge()?.app;
     if (!app) return;
     let alive = true;
     void app.snapshot().then((next) => {
@@ -32,7 +32,7 @@ export function useAppRelease(): AppReleaseView & { run: () => void } {
   }, []);
 
   const run = useCallback(() => {
-    const app = getElectronBridge()?.app;
+    const app = getHostBridge()?.app;
     if (!app || !snap || !snap.enabled) return;
     if (snap.phase !== 'idle' && snap.phase !== 'error' && snap.phase !== 'ready') return;
     const task = snap.phase === 'ready' ? app.install() : app.check();

package/src/components/TerminalPanel.tsx

@@ -1,5 +1,5 @@
 import { Suspense, lazy, useEffect, useState } from 'react';
-import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
+import { getHostBridge, hasHostBridge } from '@/lib/host-bridge';
 import { t } from '@/i18n';
 
 // 把 xterm 那一坨 (~300KB) 拆到独立 chunk —— 用户没打开终端就不下载。
@@ -17,7 +17,7 @@ const TerminalView = lazy(() =>
  * xterm 视图，不杀 shell；重新打开时通过 `terminal:ensure` 的 replay
  * buffer 补回面板关闭期间的输出。
  *
- * Electron 检测保留给浏览器预览 / dev 模式（没有 `window.electron` 就
+ * Electron 检测保留给浏览器预览 / dev 模式（没有 `window.steerableHost` 就
  * 连不到本地 PTY）。延迟到首个 effect 再渲染，避免检测闪烁。
  */
 export function TerminalPanel({
@@ -33,7 +33,7 @@ export function TerminalPanel({
   const [hasElectron, setHasElectron] = useState<boolean | null>(null);
 
   useEffect(() => {
-    setHasElectron(isElectron() && !!getElectronBridge()?.terminal);
+    setHasElectron(hasHostBridge() && !!getHostBridge()?.terminal);
   }, []);
 
   if (hasElectron === null) {

package/src/components/TerminalView.tsx

@@ -5,7 +5,7 @@ import { WebLinksAddon } from '@xterm/addon-web-links';
 import { LuListTodo } from 'react-icons/lu';
 import '@xterm/xterm/css/xterm.css';
 import { DockHeaderButton, DockPanelHeader } from '@/components/DockPanelHeader';
-import { getElectronBridge } from '@/lib/electron-bridge';
+import { getHostBridge } from '@/lib/host-bridge';
 import { BRAND_NAME } from '@/brand';
 import { t } from '@/i18n';
 
@@ -14,7 +14,7 @@ import { t } from '@/i18n';
  * `terminal.*` bridge. Ported from `deeppath/apps/web/src/app/agent/terminal/
  * TerminalView.tsx`, with these adaptations:
  *
- *   - `window.electron` direct access → `getElectronBridge()` helper so the
+ *   - `window.steerableHost` direct access → `getHostBridge()` helper so the
  *     "no bridge" path is type-safe.
  *   - Removed `'use client'` directive (not a Next.js project).
  *   - Container is `h-full` instead of `h-screen` so the component is
@@ -45,11 +45,11 @@ export function TerminalView({
 
   useEffect(() => {
     if (!containerRef.current) return;
-    const bridge = getElectronBridge();
+    const bridge = getHostBridge();
     const terminal = bridge?.terminal;
     if (!terminal) {
       setStatus('error');
-      setStatusMsg(t('window.electron.terminal is unavailable'));
+      setStatusMsg(t('The host terminal is unavailable'));
       return;
     }
 

package/src/components/chat/ApprovalModal.tsx

@@ -2,7 +2,7 @@ import { LuShieldAlert, LuTriangleAlert } from 'react-icons/lu';
 import {
   type ApprovalDecisionKind,
   type ApprovalPromptRequest,
-} from '@/lib/electron-bridge';
+} from '@/lib/host-bridge';
 import { t } from '@/i18n';
 
 /**

package/src/components/chat/ApprovalPromptProvider.tsx

@@ -9,10 +9,10 @@ import {
   type ReactNode,
 } from 'react';
 import {
-  getElectronBridge,
+  getHostBridge,
   type ApprovalDecisionKind,
   type ApprovalPromptRequest,
-} from '@/lib/electron-bridge';
+} from '@/lib/host-bridge';
 import { bindPromptToActiveChat, promptVisibleInChat } from './prompt-chat-scope';
 
 interface ApprovalPromptContextValue {
@@ -37,7 +37,7 @@ export function ApprovalPromptProvider({ children }: { children: ReactNode }) {
   const decidedRequestIds = useRef(new Set<string>());
 
   useEffect(() => {
-    const bridge = getElectronBridge();
+    const bridge = getHostBridge();
     if (!bridge?.approval) return;
     let active = true;
     const addRequests = (
@@ -76,7 +76,7 @@ export function ApprovalPromptProvider({ children }: { children: ReactNode }) {
   }, []);
 
   const decide = useCallback((requestId: string, kind: ApprovalDecisionKind) => {
-    const bridge = getElectronBridge();
+    const bridge = getHostBridge();
     decidedRequestIds.current.add(requestId);
     setQueue((previous) => previous.filter((request) => request.requestId !== requestId));
     void bridge?.approval?.decide({ requestId, kind });

package/src/components/chat/AskUserPromptProvider.tsx

@@ -8,7 +8,7 @@ import {
   useState,
   type ReactNode,
 } from 'react';
-import { getElectronBridge, type AskUserPromptRequest } from '@/lib/electron-bridge';
+import { getHostBridge, type AskUserPromptRequest } from '@/lib/host-bridge';
 import { bindPromptToActiveChat, promptVisibleInChat } from './prompt-chat-scope';
 
 type AnswerValue = string | string[];
@@ -35,7 +35,7 @@ export function AskUserPromptProvider({ children }: { children: ReactNode }) {
   const answeredRequestIds = useRef(new Set<string>());
 
   useEffect(() => {
-    const bridge = getElectronBridge();
+    const bridge = getHostBridge();
     if (!bridge?.askUser) return;
     let active = true;
     const addRequests = (
@@ -75,7 +75,7 @@ export function AskUserPromptProvider({ children }: { children: ReactNode }) {
 
   const answer = useCallback(
     (requestId: string, answers: Record<string, AnswerValue>) => {
-      const bridge = getElectronBridge();
+      const bridge = getHostBridge();
       answeredRequestIds.current.add(requestId);
       setQueue((previous) => previous.filter((request) => request.requestId !== requestId));
       void bridge?.askUser?.answer({ requestId, answers });

package/src/components/chat/ChatProjectBadge.tsx

@@ -10,7 +10,7 @@ import {
   LuPlus,
 } from 'react-icons/lu';
 import { CreateProjectModal } from '@/components/CreateProjectModal';
-import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
+import { getHostBridge, hasHostBridge } from '@/lib/host-bridge';
 import {
   createProject,
   updateChatProject,
@@ -219,8 +219,8 @@ export function ChatProjectBadge({
 
   const changeFolder = () =>
     run(async () => {
-      if (!isElectron() || !project) return;
-      const result = await getElectronBridge()!.local?.selectDirectory({
+      if (!hasHostBridge() || !project) return;
+      const result = await getHostBridge()!.local?.selectDirectory({
         title: t('Choose a new folder for "{name}"', { name: project.name }),
       });
       if (!result || result.canceled || result.filePaths.length === 0) return;

package/src/components/chat/TaskPanelModal.tsx

@@ -18,7 +18,7 @@ import {
   mergeTaskWorktree,
   type LocalTask,
 } from '@/lib/local-api';
-import { getElectronBridge } from '@/lib/electron-bridge';
+import { getHostBridge } from '@/lib/host-bridge';
 import { t } from '@/i18n';
 
 /**
@@ -81,7 +81,7 @@ export function TaskPanelModal({
   // 任务终态推送 → 重拉列表。preload 只透传 chatId/taskId/status，
   // 记录本体以 SQLite 为准。
   useEffect(() => {
-    const bridge = getElectronBridge();
+    const bridge = getHostBridge();
     if (!bridge?.onTaskUpdated) return;
     return bridge.onTaskUpdated((payload) => {
       if (payload.chatId === chatId) void refresh();

package/src/components/chat/TaskProcessPanel.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react
 import { LuArrowDown, LuLoaderCircle, LuTerminal } from 'react-icons/lu';
 import { DockHeaderButton, DockPanelHeader } from '@/components/DockPanelHeader';
 import { getChildProcess, getTaskProcess } from '@/lib/local-api';
-import { getElectronBridge } from '@/lib/electron-bridge';
+import { getHostBridge } from '@/lib/host-bridge';
 import { t } from '@/i18n';
 import { Markdown } from '@/components/chat/Markdown';
 import { TurnProcessGroup } from '@/components/chat/TurnProcessGroup';
@@ -154,7 +154,7 @@ export function TaskProcessPanel({
 
   useEffect(() => {
     if (childRecordId) return;
-    const bridge = getElectronBridge();
+    const bridge = getHostBridge();
     if (!bridge?.onTaskProcess) return;
     return bridge.onTaskProcess((payload) => {
       if (payload.taskId !== inspected.id) return;

package/src/components/chat/useChatTasks.ts

@@ -10,7 +10,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { listChatTasks, type LocalTask } from '@/lib/local-api';
-import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
+import { getHostBridge, hasHostBridge } from '@/lib/host-bridge';
 
 export interface ChatTaskSummary {
   total: number;
@@ -68,7 +68,7 @@ export function useChatTasks(chatId: string | null): ChatTasksState {
   const seenRef = useRef<Map<string, LocalTask['status']> | null>(null);
 
   const refresh = useCallback(async () => {
-    if (!chatId || !isElectron()) {
+    if (!chatId || !hasHostBridge()) {
       setTasks(NO_TASKS);
       return;
     }
@@ -105,7 +105,7 @@ export function useChatTasks(chatId: string | null): ChatTasksState {
 
   useEffect(() => {
     if (!chatId) return;
-    const bridge = getElectronBridge();
+    const bridge = getHostBridge();
     if (!bridge?.onTaskUpdated) return;
     return bridge.onTaskUpdated((payload) => {
       if (payload.chatId === chatId) void refresh();

package/src/components/settings/AgentCapabilityFields.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { LuLoaderCircle, LuSearch } from 'react-icons/lu';
 import { t } from '@/i18n';
-import { isElectron } from '@/lib/electron-bridge';
+import { hasHostBridge } from '@/lib/host-bridge';
 import {
   listChatAgentSkills,
   listChatAgentTools,
@@ -154,7 +154,7 @@ export function AgentCapabilityFields({
   const [toolFilter, setToolFilter] = useState('');
 
   const fetchCatalogs = useCallback(async () => {
-    if (!isElectron()) return;
+    if (!hasHostBridge()) return;
     setLoading(true);
     try {
       const [skillRes, toolRes] = await Promise.all([

package/src/components/settings/AgentsSettingsPanel.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-icons/lu';
 import { ConfirmDialog } from '@/components/ConfirmDialog';
 import { t } from '@/i18n';
-import { isElectron } from '@/lib/electron-bridge';
+import { hasHostBridge } from '@/lib/host-bridge';
 import {
   archiveChatAgent,
   createChatAgent,
@@ -101,7 +101,7 @@ export function AgentsSettingsPanel({
   const [error, setError] = useState<string | null>(null);
 
   const fetchAgents = useCallback(async () => {
-    if (!isElectron()) return;
+    if (!hasHostBridge()) return;
     setLoading(true);
     setError(null);
     try {
@@ -151,7 +151,7 @@ export function AgentsSettingsPanel({
 
   const handleSave = async () => {
     const trimmedName = name.trim();
-    if (!trimmedName || !isElectron()) return;
+    if (!trimmedName || !hasHostBridge()) return;
     setSaving(true);
     setError(null);
     try {

package/src/components/settings/CliInstallSettingsPanel.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { LuLoader, LuTerminal } from 'react-icons/lu';
+import { t } from '@/i18n';
+import { installCommandLineTool } from '@/lib/local-api';
+
+export function CliInstallSettingsPanel(props: {
+  binName: string;
+  install?: () => Promise<{ path: string; onPath: boolean }>;
+}) {
+  const install = props.install ?? (() => installCommandLineTool(props.binName));
+  const [running, setRunning] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const onClick = async () => {
+    setRunning(true);
+    setMessage(null);
+    setError(null);
+    try {
+      const result = await install();
+      setMessage(result.onPath
+        ? t('Installed {path}', { path: result.path })
+        : t('Installed {path}. Add its directory to PATH.', { path: result.path }));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  return (
+    <div className="space-y-2 rounded-agent-md border border-agent-border bg-agent-card p-2.5" data-testid="cli-install-settings">
+      <p className="text-xs text-agent-muted-foreground">
+        {t('Install the command-line tool on your PATH so you can run it from a terminal.')}
+      </p>
+      <button
+        type="button"
+        data-testid="cli-install-button"
+        onClick={() => void onClick()}
+        disabled={running}
+        className="inline-flex items-center gap-1.5 rounded-agent-md bg-agent-primary px-3 py-1.5 text-xs font-medium text-agent-primary-foreground transition hover:bg-agent-primary/90 disabled:opacity-50"
+      >
+        {running ? (
+          <>
+            <LuLoader className="h-3.5 w-3.5 animate-spin" />
+            {t('Installing…')}
+          </>
+        ) : (
+          <>
+            <LuTerminal className="h-3.5 w-3.5" />
+            {t('Install command-line tool')}
+          </>
+        )}
+      </button>
+      {message && (
+        <p data-testid="cli-install-message" className="text-xs text-agent-foreground">
+          {message}
+        </p>
+      )}
+      {error && (
+        <p data-testid="cli-install-error" className="text-xs text-agent-destructive">
+          {t('Install failed: {error}', { error })}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/settings/InsightsSettingsPanel.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { LuChartBar } from 'react-icons/lu';
 import { BRAND_NAME } from '@/brand';
 import { t } from '@/i18n';
-import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
+import { getHostBridge, hasHostBridge } from '@/lib/host-bridge';
 
 type InsightsWire = {
   installId: string;
@@ -34,8 +34,8 @@ export function InsightsConsentBanner() {
   const [saving, setSaving] = useState(false);
 
   useEffect(() => {
-    if (!isElectron()) return;
-    void getElectronBridge()!
+    if (!hasHostBridge()) return;
+    void getHostBridge()!
       .localBackend.request<InsightsWire>({ method: 'GET', path: '/api/v2/local-settings/insights' })
       .then((data) => {
         if (!data.promptedAt) setOpen(true);
@@ -44,10 +44,10 @@ export function InsightsConsentBanner() {
   }, []);
 
   const save = useCallback(async (upload: boolean) => {
-    if (!isElectron()) return;
+    if (!hasHostBridge()) return;
     setSaving(true);
     try {
-      await getElectronBridge()!.localBackend.request({
+      await getHostBridge()!.localBackend.request({
         method: 'POST',
         path: '/api/v2/local-settings/insights',
         body: {
@@ -112,11 +112,11 @@ export function InsightsSettingsPanel() {
   const [error, setError] = useState<string | null>(null);
 
   const load = useCallback(async () => {
-    if (!isElectron()) return;
+    if (!hasHostBridge()) return;
     setLoading(true);
     setError(null);
     try {
-      const res = await getElectronBridge()!.localBackend.request<InsightsWire>({
+      const res = await getHostBridge()!.localBackend.request<InsightsWire>({
         method: 'GET',
         path: '/api/v2/local-settings/insights',
       });
@@ -133,11 +133,11 @@ export function InsightsSettingsPanel() {
   }, [load]);
 
   const save = async () => {
-    if (!isElectron()) return;
+    if (!hasHostBridge()) return;
     setSaving(true);
     setError(null);
     try {
-      const res = await getElectronBridge()!.localBackend.request<InsightsWire>({
+      const res = await getHostBridge()!.localBackend.request<InsightsWire>({
         method: 'POST',
         path: '/api/v2/local-settings/insights',
         body: {
@@ -162,15 +162,15 @@ export function InsightsSettingsPanel() {
   };
 
   const exportFile = async () => {
-    if (!isElectron()) return;
+    if (!hasHostBridge()) return;
     setError(null);
     try {
-      const bundle = await getElectronBridge()!.localBackend.request<unknown>({
+      const bundle = await getHostBridge()!.localBackend.request<unknown>({
         method: 'GET',
         path: '/api/v2/insights/export',
       });
       const text = `${JSON.stringify(bundle, null, 2)}\n`;
-      const saved = await getElectronBridge()!.local?.saveTextFile?.({
+      const saved = await getHostBridge()!.local?.saveTextFile?.({
         title: t('Export local insight records'),
         defaultPath: `deeppath-insights-${new Date().toISOString().slice(0, 10)}.json`,
         content: text,
@@ -182,10 +182,10 @@ export function InsightsSettingsPanel() {
   };
 
   const uploadNow = async () => {
-    if (!isElectron()) return;
+    if (!hasHostBridge()) return;
     setError(null);
     try {
-      const res = await getElectronBridge()!.localBackend.request<{ ok: boolean; detail: string }>({
+      const res = await getHostBridge()!.localBackend.request<{ ok: boolean; detail: string }>({
         method: 'POST',
         path: '/api/v2/insights/upload-local',
       });
@@ -214,7 +214,7 @@ export function InsightsSettingsPanel() {
             'Even if the user does not agree to upload, records stay on this device. You can export JSON and send it to the product team, or click "Upload now" once.',
           )}
         </p>
-        {!isElectron() ? (
+        {!hasHostBridge() ? (
           <p className="text-[11px] text-agent-muted-foreground">{t('Open this in the desktop app')}</p>
         ) : loading ? (
           <p className="text-[11px] text-agent-muted-foreground">{t('Loading…')}</p>

package/src/components/settings/LlmSettingsPanel.tsx

@@ -33,7 +33,7 @@ import { modelCapabilityChips } from '@/components/settings/model-capabilities';
 import { ModelIdCombobox } from '@/components/settings/ModelIdCombobox';
 import { SettingsSaveButton } from '@/components/settings/SettingsSaveButton';
 import { t } from '@/i18n';
-import { isElectron } from '@/lib/electron-bridge';
+import { hasHostBridge } from '@/lib/host-bridge';
 import {
   COMPAT_AUTO,
   formStateFromOverrides,
@@ -124,7 +124,7 @@ export const LlmSettingsPanel = forwardRef<LlmSettingsPanelHandle, LlmSettingsPa
   const [resolvedPreset, setResolvedPreset] = useState<ProviderPresetOverride | null>(null);
 
   const reload = useCallback(async () => {
-    if (!isElectron()) {
+    if (!hasHostBridge()) {
       setError(t('Open this in the desktop app'));
       return;
     }
@@ -344,7 +344,7 @@ export const LlmSettingsPanel = forwardRef<LlmSettingsPanelHandle, LlmSettingsPa
   };
 
   const handleSave = async () => {
-    if (!isElectron()) {
+    if (!hasHostBridge()) {
       setError(t('Open this in the desktop app'));
       return;
     }