@steerable/agent-shell-web 0.6.74 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.74",
+  "version": "0.7.1",
   "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.74",
-    "@steerable/agent-ui": "0.6.74"
+    "@steerable/agent-protocol": "0.7.1",
+    "@steerable/agent-ui": "0.7.1"
   },
   "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.74"
+    "@steerable/pack-sdk": "0.7.1"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/AppShell.tsx

@@ -1,10 +1,12 @@
 import { Outlet } from 'react-router-dom';
+import { ZoomToast } from './components/ZoomToast';
 import { hasHostBridge } from './lib/host-bridge';
 import { isDemoMode } from './lib/demo-flag';
 
 export function AppShell() {
   return (
     <div className="flex h-full w-full flex-col bg-agent-canvas text-agent-foreground">
+      <ZoomToast />
       <main className="flex flex-1 overflow-hidden">
         <Outlet />
       </main>

package/src/components/AgentSidebar.tsx

@@ -88,10 +88,13 @@ import {
   LuFolderPlus,
   LuPencil,
   LuEllipsis,
+  LuGitBranch,
   LuCircleHelp,
+  LuTerminal,
 } from "react-icons/lu";
 import { RiPushpin2Fill, RiPushpin2Line } from "react-icons/ri";
 import { parseChatTitle } from "@/lib/chat-title";
+import { chatRowKeys } from "@/lib/chat-row-keys";
 import { getDateGroupLabel, getDateGroupPriority } from "@/lib/date-groups";
 import { getHostBridge, hasHostBridge } from "@/lib/host-bridge";
 import { hasGeneralSettingsChrome, hostToolChrome, settingsChrome } from "@/lib/host-tools";
@@ -100,7 +103,9 @@ import {
   deleteProject,
   getChatLiveStream,
   openLocalPath,
+  forkChat,
   setChatPinned,
+  updateChatTitle,
   updateProject,
   type LocalChat,
   type LocalChatAgent,
@@ -175,6 +180,103 @@ function placeProjectMenu(anchor: HTMLElement): { top: number; left: number } {
   return { top: Math.max(8, box.top), left };
 }
 
+function formatForkBytes(bytes: number | undefined): string {
+  if (typeof bytes !== "number" || !Number.isFinite(bytes)) return "";
+  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${bytes} B`;
+}
+
+function ChatRowMenu({
+  anchor,
+  onClose,
+  onRename,
+  onFork,
+  onDelete,
+}: {
+  anchor: HTMLElement;
+  onClose: () => void;
+  onRename: () => void;
+  onFork: () => void;
+  onDelete: () => void;
+}) {
+  const pos = placeProjectMenu(anchor);
+  const buttonRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const [index, setIndex] = useState(0);
+  const actions = [
+    { testId: "sidebar-chat-rename", label: t("Rename"), run: onRename, danger: false, ariaLabel: undefined as string | undefined },
+    { testId: "sidebar-chat-fork", label: t("Fork"), run: onFork, danger: false, ariaLabel: undefined as string | undefined },
+    { testId: "sidebar-chat-delete", label: t("Delete"), run: onDelete, danger: true, ariaLabel: t("Delete chat") },
+  ];
+  useEffect(() => {
+    buttonRefs.current[index]?.focus();
+  }, [index]);
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+        return;
+      }
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        const count = actions.length;
+        setIndex((current) =>
+          event.key === "ArrowDown" ? (current + 1) % count : (current - 1 + count) % count,
+        );
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose, actions.length]);
+  return createPortal(
+    <>
+      <div className="fixed inset-0 z-[90]" onClick={onClose} />
+      <div
+        role="menu"
+        className="fixed z-[91] w-44 overflow-hidden rounded-2xl border border-agent-border bg-agent-canvas p-1 shadow-lg"
+        style={pos}
+        data-testid="sidebar-chat-menu"
+      >
+        {actions.map((action, actionIndex) => (
+          <button
+            key={action.testId}
+            ref={(node) => {
+              buttonRefs.current[actionIndex] = node;
+            }}
+            type="button"
+            role="menuitem"
+            data-testid={action.testId}
+            title={action.ariaLabel}
+            aria-label={action.ariaLabel}
+            onClick={action.run}
+            onKeyDown={(event) => {
+              if (event.key !== "Enter") return;
+              event.preventDefault();
+              action.run();
+            }}
+            className={[
+              "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs hover:bg-agent-foreground/5",
+              action.danger ? "text-agent-destructive" : "text-agent-foreground",
+              actionIndex === actions.length - 1 ? "mt-1 border-t border-agent-border/60" : "",
+            ].join(" ")}
+          >
+            {actionIndex === 0 ? (
+              <LuPencil className="h-3.5 w-3.5 shrink-0 text-agent-muted-foreground" />
+            ) : action.danger ? (
+              <LuTrash2 className="h-3.5 w-3.5 shrink-0" />
+            ) : (
+              <LuGitBranch className="h-3.5 w-3.5 shrink-0 text-agent-muted-foreground" />
+            )}
+            {action.label}
+          </button>
+        ))}
+      </div>
+    </>,
+    document.body,
+  );
+}
+
 function ProjectOverflowMenu({
   project,
   chatCount,
@@ -369,6 +471,7 @@ export function AgentSidebar({
     refreshChats,
     setSelectedAgentId,
     deleteChat,
+    patchChatTitle,
     isLoadingMoreChats,
     hasMoreChats,
     loadMoreChats,
@@ -567,6 +670,23 @@ export function AgentSidebar({
     null,
   );
   const [renamingValue, setRenamingValue] = useState("");
+  const [chatMenu, setChatMenu] = useState<{
+    id: string;
+    title: string;
+    anchor: HTMLElement;
+  } | null>(null);
+  const [renamingChatId, setRenamingChatId] = useState<string | null>(null);
+  const [renamingChatValue, setRenamingChatValue] = useState("");
+  const [renameError, setRenameError] = useState<string | null>(null);
+  const [renameHint, setRenameHint] = useState<{
+    chatId: string;
+    text: string;
+  } | null>(null);
+  const renameCancelledRef = useRef(false);
+  const renameBusyRef = useRef(false);
+  const [renamingBusy, setRenamingBusy] = useState(false);
+  const [forkingChatId, setForkingChatId] = useState<string | null>(null);
+  const forkingChatRef = useRef<string | null>(null);
   const [pendingDeleteProject, setPendingDeleteProject] =
     useState<LocalProject | null>(null);
   const [deletingProjectId, setDeletingProjectId] = useState<string | null>(
@@ -908,10 +1028,92 @@ export function AgentSidebar({
     [pinningChatId, refreshChats],
   );
 
+  useEffect(() => {
+    if (!renameHint) return;
+    const timer = window.setTimeout(() => setRenameHint(null), 3000);
+    return () => window.clearTimeout(timer);
+  }, [renameHint]);
+
+  const beginChatRename = useCallback((chat: { id: string; title: string }) => {
+    setChatMenu(null);
+    setRenameError(null);
+    setRenameHint(null);
+    renameCancelledRef.current = false;
+    setRenamingChatId(chat.id);
+    setRenamingChatValue(chat.title);
+  }, []);
+
+  const commitChatRename = useCallback(
+    async (chatId: string, previous: string) => {
+      if (renameBusyRef.current) return;
+      const next = renamingChatValue.trim();
+      if (!next || next === previous) {
+        setRenamingChatId(null);
+        setRenameError(null);
+        return;
+      }
+      renameBusyRef.current = true;
+      setRenamingBusy(true);
+      try {
+        await updateChatTitle(chatId, next);
+        patchChatTitle(chatId, next);
+        setRenamingChatId(null);
+        setRenameError(null);
+      } catch (err) {
+        const status = (err as { status?: number }).status;
+        if (status === 409) {
+          setRenamingChatId(null);
+          setRenameError(null);
+          setRenameHint({
+            chatId,
+            text: t(
+              "This chat is running in another process. Try renaming it again in a moment.",
+            ),
+          });
+          return;
+        }
+        setRenameError(err instanceof Error ? err.message : String(err));
+      } finally {
+        renameBusyRef.current = false;
+        setRenamingBusy(false);
+      }
+    },
+    [patchChatTitle, renamingChatValue],
+  );
+
+  const forkThisChat = useCallback(
+    async (chat: { id: string }) => {
+      if (forkingChatRef.current) return;
+      forkingChatRef.current = chat.id;
+      setForkingChatId(chat.id);
+      setChatMenu(null);
+      try {
+        const created = await forkChat(chat.id);
+        await refreshChats();
+        navigate(`/agent/${created.chatId}`);
+      } catch (err) {
+        const status = (err as { status?: number }).status;
+        const bytes = (err as { data?: { bytes?: number } }).data?.bytes;
+        const text =
+          status === 409
+            ? t("This chat is still generating. Fork it after this turn finishes.")
+            : status === 413
+              ? t("This workspace is too large to fork ({size}).", {
+                  size: formatForkBytes(bytes),
+                })
+              : t(err instanceof Error && err.message ? err.message : 'Fork failed');
+        setRenameHint({ chatId: chat.id, text });
+      } finally {
+        forkingChatRef.current = null;
+        setForkingChatId(null);
+      }
+    },
+    [navigate, refreshChats],
+  );
+
   // 单条会话行——无项目日期分组和项目分组共用同一个渲染，避免两份 JSX。
   const renderChatRow = (chat: (typeof normalizedChats)[number]) => {
     const isCurrent = currentChatId === chat.id;
-    const isDeleting = deletingChatId === chat.id;
     const isPinning = pinningChatId === chat.id;
     const isStreaming = Boolean(
       chat.isStreaming || streamingChatIds.has(chat.id),
@@ -921,6 +1123,80 @@ export function AgentSidebar({
       pendingAskUserChatIds.has(chat.id) ||
       pendingApprovalChatIds.has(chat.id),
     );
+    const renameHintText =
+      renameHint?.chatId === chat.id ? (
+        <p
+          className="px-2.5 pb-1 text-[10px] leading-snug text-agent-muted-foreground"
+          data-testid="sidebar-chat-rename-hint"
+        >
+          {renameHint.text}
+        </p>
+      ) : null;
+
+    if (renamingChatId === chat.id) {
+      return (
+        <div
+          key={chat.id}
+          className="group/item relative"
+          data-testid="sidebar-chat-row"
+          data-chat-id={chat.id}
+        >
+          <form
+            className="px-2.5 py-0.5"
+            aria-busy={renamingBusy}
+            onSubmit={(event) => {
+              event.preventDefault();
+              void commitChatRename(chat.id, chat.title);
+            }}
+          >
+            <div className="relative">
+            <input
+              autoFocus
+              readOnly={renamingBusy}
+              data-testid="sidebar-chat-rename-input"
+              value={renamingChatValue}
+              aria-label={t("Rename")}
+              onChange={(event) => setRenamingChatValue(event.target.value)}
+              onBlur={() => {
+                if (renameCancelledRef.current) {
+                  renameCancelledRef.current = false;
+                  return;
+                }
+                if (renameBusyRef.current) return;
+                void commitChatRename(chat.id, chat.title);
+              }}
+              onFocus={(event) => event.currentTarget.select()}
+              onKeyDown={(event) => {
+                if (event.key !== "Escape") return;
+                event.preventDefault();
+                if (renameBusyRef.current) return;
+                renameCancelledRef.current = true;
+                setRenamingChatId(null);
+                setRenameError(null);
+              }}
+              className="h-6 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-2 pr-6 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30 read-only:opacity-70"
+            />
+            {renamingBusy ? (
+              <LuLoaderCircle
+                className="pointer-events-none absolute right-1.5 top-1 h-3.5 w-3.5 animate-spin text-agent-muted-foreground"
+                data-testid="sidebar-chat-rename-busy"
+                aria-hidden="true"
+              />
+            ) : null}
+            </div>
+            {renameError ? (
+              <p
+                className="mt-0.5 text-[10px] leading-snug text-agent-destructive"
+                data-testid="sidebar-chat-rename-error"
+              >
+                {renameError}
+              </p>
+            ) : null}
+          </form>
+          {renameHintText}
+        </div>
+      );
+    }
 
     return (
       <div
@@ -934,6 +1210,11 @@ export function AgentSidebar({
           onClick={() => {
             navigate(`/agent/${chat.id}`);
           }}
+          onKeyDown={(event) => {
+            if (event.key !== chatRowKeys.rename) return;
+            event.preventDefault();
+            beginChatRename(chat);
+          }}
           className={[
             "flex h-7 w-full min-w-0 items-center gap-1.5 rounded-full px-2.5 text-xs transition-colors duration-200",
             isCurrent
@@ -969,7 +1250,17 @@ export function AgentSidebar({
               aria-label={t("Triggered by automation")}
             />
           )}
-          <span className="min-w-0 truncate leading-none">{chat.title}</span>
+          <span className="min-w-0 truncate leading-none group-hover/item:pr-14 group-focus-within/item:pr-14">
+            {chat.title}
+          </span>
+          {forkingChatId === chat.id ? (
+            <span
+              className="shrink-0 text-[10px] text-agent-muted-foreground"
+              data-testid="sidebar-chat-forking"
+            >
+              {t("Forking…")}
+            </span>
+          ) : null}
         </button>
         {/* Semi-transparent gradient container for action buttons:
             fades long text smoothly to the left so buttons don't collide with text. */}
@@ -1002,21 +1293,21 @@ export function AgentSidebar({
             type="button"
             onClick={(event) => {
               event.stopPropagation();
-              setPendingDeleteChat({ id: chat.id, title: chat.title });
+              setChatMenu({
+                id: chat.id,
+                title: chat.title,
+                anchor: event.currentTarget,
+              });
             }}
-            disabled={isDeleting}
-            className="flex h-6 w-6 items-center justify-center rounded-full text-agent-foreground/70 transition-all duration-200 hover:bg-agent-foreground/10 hover:text-agent-destructive disabled:cursor-not-allowed disabled:opacity-100"
-            title={t("Delete chat")}
-            aria-label={t("Delete chat")}
-            data-testid="sidebar-chat-delete"
+            className="flex h-6 w-6 items-center justify-center rounded-full text-agent-foreground/70 transition-all duration-200 hover:bg-agent-foreground/10 hover:text-agent-foreground"
+            title={t("More actions")}
+            aria-label={t("More actions")}
+            data-testid="sidebar-chat-more"
           >
-            <LuTrash2
-              className={["h-3.5 w-3.5", isDeleting ? "animate-pulse" : ""].join(
-                " ",
-              )}
-            />
+            <LuEllipsis className="h-3.5 w-3.5" />
           </button>
         </div>
+        {renameHintText}
       </div>
     );
   };
@@ -1352,6 +1643,16 @@ export function AgentSidebar({
                                     <span className="min-w-0 truncate normal-case">
                                       {project.name}
                                     </span>
+                                    {project.origin === "cli" ? (
+                                      <span
+                                        className="ml-1 inline-flex shrink-0"
+                                        title={t("Created from the command line")}
+                                        aria-label={t("Created from the command line")}
+                                        data-testid="sidebar-project-cli-origin"
+                                      >
+                                        <LuTerminal className="h-3 w-3" aria-hidden="true" />
+                                      </span>
+                                    ) : null}
                                     <span className="ml-1 shrink-0">
                                       {collapsedProjectIds.has(project.id) ? (
                                         <LuChevronRight className="h-3 w-3" />
@@ -1611,6 +1912,32 @@ export function AgentSidebar({
           );
         })()}
 
+      {chatMenu ? (
+        <ChatRowMenu
+          anchor={chatMenu.anchor}
+          onClose={() => {
+            const chatId = chatMenu.id;
+            setChatMenu(null);
+            requestAnimationFrame(() => {
+              const row = document.querySelector(
+                `[data-testid="sidebar-chat-row"][data-chat-id="${CSS.escape(chatId)}"]`,
+              );
+              row?.querySelector("button")?.focus();
+            });
+          }}
+          onRename={() => beginChatRename(chatMenu)}
+          onFork={() => {
+            const target = chatMenu;
+            setChatMenu(null);
+            void forkThisChat(target);
+          }}
+          onDelete={() => {
+            setPendingDeleteChat({ id: chatMenu.id, title: chatMenu.title });
+            setChatMenu(null);
+          }}
+        />
+      ) : null}
+
       <ConfirmDialog
         open={pendingDeleteChat !== null}
         title={t("Delete chat")}

package/src/components/ChatHeader.tsx

@@ -30,6 +30,8 @@ import type { LocalChat, LocalProject, LocalTask } from '@/lib/local-api';
 import {
   activateChatBranch,
   discardTaskWorktree,
+  forkChat,
+  getChat,
   getChatBranches,
   mergeTaskWorktree,
   openLocalPath,
@@ -49,6 +51,7 @@ import {
 import { hostToolChrome } from '@/lib/host-tools';
 import { PanelToggleButton } from '@/layouts/PanelToggleButton';
 import { t } from '@/i18n';
+import { forkSourceTime } from './chat/timestamp';
 import {
   getTurnFileCategory,
   isIgnoredTurnFile,
@@ -127,6 +130,9 @@ export function ChatHeader({
   const [exportError, setExportError] = useState<string | null>(null);
   const [sharing, setSharing] = useState(false);
   const [pinning, setPinning] = useState(false);
+  const [forking, setForking] = useState(false);
+  const [forkError, setForkError] = useState<string | null>(null);
+  const [forkedFrom, setForkedFrom] = useState<{ chatId: string; title: string } | null>(null);
   const [openingPath, setOpeningPath] = useState<string | null>(null);
   const [menuBox, setMenuBox] = useState<{ top: number; left: number; width: number } | null>(
     null,
@@ -135,6 +141,50 @@ export function ChatHeader({
   const summaryButtonRef = useRef<HTMLButtonElement | null>(null);
   const popoverRef = useRef<HTMLDivElement | null>(null);
 
+  useEffect(() => {
+    if (!chat?.id) {
+      setForkedFrom(null);
+      return;
+    }
+    let cancelled = false;
+    getChat(chat.id)
+      .then((doc) => {
+        if (!cancelled) setForkedFrom(doc.forkedFrom);
+      })
+      .catch(() => {
+        if (!cancelled) setForkedFrom(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [chat?.id]);
+
+  const forkThisChat = async () => {
+    if (!chat || forking) return;
+    setForking(true);
+    setForkError(null);
+    try {
+      const created = await forkChat(chat.id);
+      await onChatChanged?.();
+      window.location.hash = `#/agent/${created.chatId}`;
+      setPopover(null);
+    } catch (err) {
+      const status = (err as { status?: number }).status;
+      const bytes = (err as { data?: { bytes?: number } }).data?.bytes;
+      setForkError(
+        status === 409
+          ? t('This chat is still generating. Fork it after this turn finishes.')
+          : status === 413
+            ? t('This workspace is too large to fork ({size}).', {
+                size: typeof bytes === 'number' ? `${(bytes / (1024 * 1024)).toFixed(1)} MB` : '',
+              })
+            : t(err instanceof Error && err.message ? err.message : 'Fork failed'),
+      );
+    } finally {
+      setForking(false);
+    }
+  };
+
   const showTerminalChrome = hostToolChrome('terminal');
   const allowOpenPath = hostToolChrome('local-fs');
   const openIds = openPanelIds ?? (rightPanel ? [rightPanel] : []);
@@ -306,6 +356,9 @@ export function ChatHeader({
                   onShare={shareChat}
                   showBranches={Boolean(onBranchSwitched)}
                   onOpenBranches={() => void openBranchPage()}
+                  forking={forking}
+                  forkError={forkError}
+                  onFork={() => void forkThisChat()}
                 />
               ))}
             {popover === 'summary' && (
@@ -337,6 +390,26 @@ export function ChatHeader({
         >
           {chat?.title ?? t('No chat selected')}
         </span>
+        {forkedFrom ? (
+          <span
+            className="inline-flex min-w-0 items-center gap-1 text-[10px] text-agent-muted-foreground"
+            data-testid="chat-fork-source"
+          >
+            <span className="min-w-0 truncate">
+              {t('Forked from "{title}" · {time}', {
+                title: forkedFrom.title,
+                time: forkSourceTime(chat?.createdAt),
+              })}
+            </span>
+            <a
+              href={`#/agent/${forkedFrom.chatId}`}
+              className="shrink-0 hover:underline"
+              data-testid="chat-fork-open-source"
+            >
+              {t('Open the original chat')}
+            </a>
+          </span>
+        ) : null}
       </div>
       {chat && (
         <button
@@ -404,6 +477,9 @@ function ChatActionsMenu({
   onShare,
   showBranches,
   onOpenBranches,
+  forking,
+  forkError,
+  onFork,
 }: {
   pinned: boolean;
   pinning: boolean;
@@ -417,6 +493,9 @@ function ChatActionsMenu({
   onShare: () => void;
   showBranches: boolean;
   onOpenBranches: () => void;
+  forking: boolean;
+  forkError: string | null;
+  onFork: () => void;
 }) {
   return (
     <>
@@ -466,6 +545,22 @@ function ChatActionsMenu({
           data-action="share"
         />
       )}
+      <MenuRow
+        icon={forking ? <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" /> : <LuGitBranch className="h-3.5 w-3.5" />}
+        label={t('Fork')}
+        title={forkError ?? t('Fork')}
+        disabled={forking}
+        onClick={onFork}
+        data-testid="header-fork-chat"
+      />
+      {forkError ? (
+        <p
+          className="px-3 pb-1 text-[10px] leading-snug text-agent-muted-foreground"
+          data-testid="header-fork-error"
+        >
+          {forkError}
+        </p>
+      ) : null}
       {showBranches && (
         <MenuRow
           icon={<LuGitBranch className="h-3.5 w-3.5" />}

package/src/components/TerminalView.tsx

@@ -197,10 +197,15 @@ export function TerminalView({
     window.addEventListener('resize', handleResize);
     const ro = new ResizeObserver(handleResize);
     ro.observe(containerRef.current);
+    // Webview zoom changes CSS pixel size without a window resize on WKWebView.
+    const offZoom = bridge.onZoomChanged?.(() => {
+      requestAnimationFrame(() => handleResize());
+    });
 
     const containerEl = containerRef.current;
     return () => {
       cancelled = true;
+      offZoom?.();
       window.removeEventListener('resize', handleResize);
       containerEl?.removeEventListener('contextmenu', onContextMenu);
       ro.disconnect();

package/src/components/ZoomToast.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { t } from '@/i18n';
+import { getHostBridge } from '@/lib/host-bridge';
+
+const TOAST_MS = 1500;
+
+/**
+ * Desktop zoom level, centered at the top of the window.
+ * Shown after each zoom change, then hidden. Absent when the host has no zoom.
+ */
+export function ZoomToast() {
+  const [scale, setScale] = useState<number | null>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const bridge = getHostBridge();
+    if (!bridge?.onZoomChanged) return;
+    let timer = 0;
+    const off = bridge.onZoomChanged(({ scale: next }) => {
+      setScale(next);
+      setVisible(true);
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => setVisible(false), TOAST_MS);
+    });
+    return () => {
+      off();
+      window.clearTimeout(timer);
+    };
+  }, []);
+
+  if (!visible || scale == null) return null;
+  const percent = Math.round(scale * 100);
+  return (
+    <div className="pointer-events-none fixed inset-x-0 top-3 z-50 flex justify-center">
+      <div
+        className="pointer-events-auto flex items-center gap-2 rounded-full border border-agent-border bg-agent-canvas/95 px-3 py-1 text-xs text-agent-foreground shadow-sm"
+        data-testid="zoom-toast"
+      >
+        <span>{percent}%</span>
+        <button
+          type="button"
+          className="text-agent-muted-foreground hover:text-agent-foreground"
+          onClick={() => {
+            void getHostBridge()?.setZoom?.(1);
+          }}
+        >
+          {t('Reset')}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/chat/ApprovalModal.tsx

@@ -45,11 +45,28 @@ interface DecisionButton {
   tone: 'allow' | 'deny' | 'abort';
 }
 
-const ALLOW_BUTTONS: DecisionButton[] = [
-  { kind: 'allow_once', label: 'Allow once', tone: 'allow' },
-  { kind: 'allow_for_session', label: 'Allow for this chat', tone: 'allow' },
-  { kind: 'allow_always', label: 'Always allow', tone: 'allow' },
-];
+function categoryName(label: string): string {
+  return t(label);
+}
+
+function allowButtons(request: ApprovalPromptRequest): DecisionButton[] {
+  const category = request.category !== request.toolName && request.categoryLabel
+    ? categoryName(request.categoryLabel)
+    : undefined;
+  return [
+    { kind: 'allow_once', label: 'Allow once', tone: 'allow' },
+    {
+      kind: 'allow_for_session',
+      label: category ? t('Allow {category} for this chat', { category }) : 'Allow for this chat',
+      tone: 'allow',
+    },
+    {
+      kind: 'allow_always',
+      label: category ? t('Always allow {category}', { category }) : 'Always allow',
+      tone: 'allow',
+    },
+  ];
+}
 
 const DENY_BUTTONS: DecisionButton[] = [
   { kind: 'deny_once', label: 'Deny once', tone: 'deny' },
@@ -101,6 +118,15 @@ export function ApprovalPromptMenu({
   // 用户能认出 api.github.com，认不出 cdn.jsdelivr.net.evil.com）。
   const isEgress = current.category === 'network_egress';
   const isSandboxEscalation = current.category === 'sandbox_escalation';
+  const isBrowser = current.category === 'browser';
+  const sandboxOff = current.sandboxEnforced === false;
+  const outsideWorkspace =
+    current.outsideWorkspace === true &&
+    !isEgress &&
+    !isSandboxEscalation &&
+    !isBrowser &&
+    !sandboxOff;
+  const cwd = typeof current.arguments.cwd === 'string' ? current.arguments.cwd : '';
   const egressHost =
     typeof current.arguments.host === 'string' ? current.arguments.host : '';
   const egressPort =
@@ -126,17 +152,31 @@ export function ApprovalPromptMenu({
                     {egressHost}
                     {egressPort !== null ? `:${egressPort}` : ''}
                   </span>
+                  {current.categoryLabel ? (
+                    <span className="text-agent-muted-foreground">
+                      {t('({category})', { category: categoryName(current.categoryLabel) })}
+                    </span>
+                  ) : null}
                 </>
               ) : isSandboxEscalation ? (
-                <>{t('Agent requests to run a command outside the workspace')}</>
+                <>
+                  {t('Agent requests to run a command outside the workspace')}
+                  {current.categoryLabel ? (
+                    <span className="ml-1 text-agent-muted-foreground">
+                      {t('({category})', { category: categoryName(current.categoryLabel) })}
+                    </span>
+                  ) : null}
+                </>
               ) : (
                 <>
                   {t('Agent requests to run')}
                   <span className="mx-1 font-mono">{current.toolName}</span>
                   <span className="text-agent-muted-foreground">
-                    {t('({mode} action)', {
-                      mode: MODE_LABEL[current.mode] ? t(MODE_LABEL[current.mode]) : current.mode,
-                    })}
+                    {current.categoryLabel
+                      ? t('({category})', { category: categoryName(current.categoryLabel) })
+                      : t('({mode} action)', {
+                          mode: MODE_LABEL[current.mode] ? t(MODE_LABEL[current.mode]) : current.mode,
+                        })}
                   </span>
                 </>
               )}
@@ -165,6 +205,32 @@ export function ApprovalPromptMenu({
                 'The workspace sandbox blocked this command. Allowing it retries only this command, without limiting where it can write.',
               )}
             </p>
+          ) : isBrowser ? (
+            <p className="mt-2 text-[11px] leading-relaxed text-agent-muted-foreground">
+              {t(
+                'Opening pages, clicking, filling, and pressing keys act on that site and can send information off this computer. Scrolling, reading, and screenshots do not need approval.',
+              )}
+            </p>
+          ) : outsideWorkspace ? (
+            <p className="mt-2 text-[11px] leading-relaxed text-agent-muted-foreground">
+              {current.outsideWorkspaceKind === 'workspace'
+                ? cwd
+                  ? t(
+                      'The command runs in the sandbox. Working directory {cwd} is outside this chat workspace, so writes there are blocked.',
+                      { cwd },
+                    )
+                  : t(
+                      'The command runs in the sandbox. Its working directory is outside this chat workspace, so writes there are blocked.',
+                    )
+                : cwd
+                  ? t(
+                      'The command runs in the sandbox. Working directory {cwd} is outside the project, so writes there are blocked. Add that directory as a project source folder when a write is required.',
+                      { cwd },
+                    )
+                  : t(
+                      'The command runs in the sandbox. Its working directory is outside the project, so writes there are blocked. Add that directory as a project source folder when a write is required.',
+                    )}
+            </p>
           ) : (
             <>
               {current.category !== current.toolName && (
@@ -175,11 +241,13 @@ export function ApprovalPromptMenu({
                   )}
                 </p>
               )}
-              <p className="mt-2 text-[11px] leading-relaxed text-agent-muted-foreground">
-                {t(
-                  'Runs in the workspace sandbox. Writes outside it are blocked. To write outside, switch the sandbox to "Full access" and try again.',
-                )}
-              </p>
+              {!sandboxOff && (
+                <p className="mt-2 text-[11px] leading-relaxed text-agent-muted-foreground">
+                  {t(
+                    'Runs in the workspace sandbox. Writes outside it are blocked. To write outside, switch the sandbox to "Full access" and try again.',
+                  )}
+                </p>
+              )}
             </>
           )}
         </div>
@@ -188,8 +256,8 @@ export function ApprovalPromptMenu({
           <DecisionRow
             buttons={
               isEgress
-                ? ALLOW_BUTTONS.filter((b) => b.kind !== 'allow_always')
-                : ALLOW_BUTTONS
+                ? allowButtons(current).filter((b) => b.kind !== 'allow_always')
+                : allowButtons(current)
             }
             onPick={onDecide}
           />
@@ -213,12 +281,8 @@ export function ApprovalPromptMenu({
           </div>
           <p className="text-[11px] leading-relaxed text-agent-muted-foreground">
             {isEgress
-              ? t(
-                  '"This chat" decisions are remembered in this chat until the agent process exits. With no action for about 3 minutes, the request is denied.',
-                )
-              : t(
-                  '"This chat" decisions are remembered in this chat. "Always" decisions are written to ~/.steerable/approvals.json on this computer and apply across chats. With no action for about 2 minutes, the request is denied.',
-                )}
+              ? t('With no action for about 3 minutes, the request is denied and that network access fails.')
+              : t('"This chat" applies only to this chat. "Always" is saved on this computer and applies to every chat.')}
           </p>
         </div>
     </div>

package/src/components/chat/ExecutedActionsCard.tsx

@@ -60,6 +60,8 @@ export interface ExecutedAction {
    * port-only egress); none = no backend on this platform.
    */
   sandbox?: { backend?: string; enforcement: string };
+  /** Set when a session allow covered this call, so the row can say so. */
+  approval?: { kind?: string; category?: string; cached?: boolean; waitMs?: number };
   /**
    * 工具注册时声明的卡片。`declared` 为真时行标题用 `title`，
    * 不再按工具名猜测。旧事件没有这个字段，仍走原来的摘要。
@@ -70,6 +72,7 @@ export interface ExecutedAction {
     title: string;
     declared: boolean;
   };
+  durationMs?: number;
 }
 
 export interface ExecutedActionsCardProps {
@@ -126,6 +129,13 @@ function sandboxBadge(sandbox: ExecutedAction['sandbox']): string | null {
   }
 }
 
+function sessionAllowNote(action: ExecutedAction): string | undefined {
+  if (action.approval?.kind === 'allow_for_session' && action.approval.cached === true) {
+    return t('Allowed for this chat');
+  }
+  return undefined;
+}
+
 function actionToTool(action: ExecutedAction, idx: number): ToolExecutionPayload {
   const status = deriveStatus(action);
   const env = parseToolEnvelope(action.result);
@@ -156,7 +166,7 @@ function actionToTool(action: ExecutedAction, idx: number): ToolExecutionPayload
     args: action.arguments,
     output: action.result,
     error: errorText,
-    durationMs: null,
+    durationMs: typeof action.durationMs === 'number' ? action.durationMs : null,
     icon: null,
     expandable: true,
   };
@@ -533,6 +543,7 @@ export function ToolsFlow({
               renderOutput={extras.renderOutput ?? renderActionOutput}
               onActivate={inspect.onActivate}
               activateTitle={inspect.activateTitle}
+              note={sessionAllowNote(action)}
               className="rounded-none border-0 border-t border-agent-border first:border-t-0"
             />
           );
@@ -595,6 +606,7 @@ export function ExecutedActionsCard({
               renderOutput={extras.renderOutput ?? renderActionOutput}
               onActivate={inspect.onActivate}
               activateTitle={inspect.activateTitle}
+              note={sessionAllowNote(action)}
               className="rounded-none border-0 border-t border-agent-border first:border-t-0"
             />
           );

package/src/components/chat/executed-actions-model.ts

@@ -106,14 +106,9 @@ export function summarizeRunCodeAction(
       : t('Program');
   const head =
     description.length > 40 ? `${description.slice(0, 37)}…` : description;
-  const data = resultData(result);
-  const calls = Array.isArray((data as { calls?: unknown } | null)?.calls)
-    ? ((data as { calls: RunCodeCall[] }).calls)
-    : [];
-  const failed =
-    result &&
-    typeof result === 'object' &&
-    (result as { success?: unknown }).success === false;
+  const parsed = asObject(parseJsonValue(result));
+  const calls = runCodeCalls(result);
+  const failed = parsed?.success === false;
   if (failed) return t('Program "{name}" failed', { name: head });
   return calls.length > 0
     ? t('Program "{name}" · {count} inner tools', { name: head, count: calls.length })
@@ -121,10 +116,14 @@ export function summarizeRunCodeAction(
 }
 
 export interface ExecutedActionLike {
+  id?: string;
   tool: string;
   arguments?: unknown;
   result?: unknown;
   sandbox?: { backend?: string; enforcement: string };
+  approval?: { kind?: string; cached?: boolean };
+  view?: { title?: string; declared?: boolean };
+  durationMs?: number;
 }
 
 export interface DelegateSubagentView {
@@ -602,21 +601,44 @@ export function summarizeTaskAction(
   return null;
 }
 
+function runCodeBody(result: unknown): Record<string, unknown> | null {
+  const obj = asObject(parseJsonValue(result));
+  if (!obj) return null;
+  return asObject(obj.data) ?? obj;
+}
+
+function runCodeCalls(result: unknown): RunCodeCall[] {
+  const calls = runCodeBody(result)?.calls;
+  return Array.isArray(calls) ? (calls as RunCodeCall[]) : [];
+}
+
+function approvalFromNestedResult(result: unknown): ExecutedActionLike['approval'] {
+  const marker = asObject(runCodeBody(result)?._approval);
+  if (!marker || typeof marker.kind !== 'string') return undefined;
+  return {
+    kind: marker.kind,
+    ...(marker.cached === true ? { cached: true } : {}),
+  };
+}
+
 /** Flatten a run_code action into the outer program plus inner tool rows. */
 export function expandRunCodeActions<T extends ExecutedActionLike>(actions: T[]): T[] {
   const out: T[] = [];
   for (const action of actions) {
     out.push(action);
     if (action.tool !== 'run_code') continue;
-    const data = resultData(action.result) as { calls?: RunCodeCall[] } | null;
-    const calls = Array.isArray(data?.calls) ? data.calls : [];
+    const calls = runCodeCalls(action.result);
     for (const call of calls) {
       const name = typeof call.tool === 'string' ? call.tool : 'tool';
       out.push({
         ...action,
+        id: undefined,
+        view: undefined,
+        durationMs: undefined,
         tool: name,
         arguments: call.arguments,
         result: call.result,
+        approval: approvalFromNestedResult(call.result),
       });
     }
   }

package/src/components/chat/timestamp.ts

@@ -22,3 +22,15 @@ export function getFriendlyDate(date: Date): string {
   });
   return `${month}-${day} ${time}`;
 }
+
+/** Fork source bar: month, day, and 24-hour time from the new chat's createdAt. */
+export function forkSourceTime(iso: string | undefined): string {
+  if (!iso) return '';
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return '';
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hour = String(date.getHours()).padStart(2, '0');
+  const minute = String(date.getMinutes()).padStart(2, '0');
+  return `${month}-${day} ${hour}:${minute}`;
+}

package/src/components/settings/AppearanceSettingsPanel.tsx

@@ -1,10 +1,96 @@
+import { useEffect, useState } from 'react';
 import {
   THINKING_DISPLAY_OPTIONS,
   persistThinkingDisplay,
   useThinkingDisplay,
 } from '@/lib/show-thinking-content';
+import { getHostBridge } from '@/lib/host-bridge';
 import { localeEndonym, supportedLocales, useI18n } from '@/i18n';
 
+function stepZoom(scale: number, direction: -1 | 1): number {
+  const snapped = Math.round(scale * 10) / 10;
+  const next = Math.round((snapped + direction * 0.1) * 10) / 10;
+  return Math.min(2, Math.max(0.8, next));
+}
+
+function InterfaceZoomRow() {
+  const { t } = useI18n();
+  const [scale, setScale] = useState<number | null>(null);
+  const [available, setAvailable] = useState(false);
+
+  useEffect(() => {
+    const zoom = getHostBridge();
+    if (!zoom?.getZoom) return;
+    setAvailable(true);
+    let active = true;
+    void zoom.getZoom().then((next) => {
+      if (active) setScale(next);
+    });
+    const off = zoom.onZoomChanged?.((payload) => setScale(payload.scale));
+    return () => {
+      active = false;
+      off?.();
+    };
+  }, []);
+
+  if (!available || scale == null) return null;
+  const percent = Math.round(scale * 100);
+  return (
+    <div
+      className="flex items-center justify-between gap-3 rounded-agent-md border border-agent-border bg-agent-card p-2.5"
+      data-testid="interface-zoom"
+    >
+      <div>
+        <p className="text-xs font-medium text-agent-foreground">{t('Interface zoom')}</p>
+        <p className="mt-1 text-xs text-agent-muted-foreground" data-testid="interface-zoom-level">
+          {percent}%
+        </p>
+      </div>
+      <div className="flex items-center gap-1">
+        <button
+          type="button"
+          className="h-7 w-7 rounded-full border border-agent-border text-sm text-agent-foreground disabled:opacity-30"
+          aria-label={t('Zoom out')}
+          data-testid="interface-zoom-out"
+          disabled={percent <= 80}
+          onClick={() => {
+            const next = stepZoom(scale, -1);
+            setScale(next);
+            void getHostBridge()?.setZoom?.(next);
+          }}
+        >
+          −
+        </button>
+        <button
+          type="button"
+          className="h-7 w-7 rounded-full border border-agent-border text-sm text-agent-foreground disabled:opacity-30"
+          aria-label={t('Zoom in')}
+          data-testid="interface-zoom-in"
+          disabled={percent >= 200}
+          onClick={() => {
+            const next = stepZoom(scale, 1);
+            setScale(next);
+            void getHostBridge()?.setZoom?.(next);
+          }}
+        >
+          +
+        </button>
+        <button
+          type="button"
+          className="h-7 rounded-full border border-agent-border px-2 text-xs text-agent-foreground"
+          data-testid="interface-zoom-reset"
+          onClick={() => {
+            setScale(1);
+            void getHostBridge()?.setZoom?.(1);
+          }}
+        >
+          {t('Reset')}
+        </button>
+      </div>
+    </div>
+  );
+}
+
 /**
  * 界面偏好：思考过程正文按「隐藏 / 显示5行 / 完整显示」三档。
  * 产品声明了多于一种语言时，在这里切换。立即写入 localStorage。
@@ -96,6 +182,7 @@ export function AppearanceSettingsPanel() {
           })}
         </div>
       </div>
+      <InterfaceZoomRow />
     </div>
   );
 }

package/src/i18n/index.tsx

@@ -9,8 +9,15 @@ import {
   supportedLocales,
   t,
 } from './runtime';
+import { getHostBridge } from '@/lib/host-bridge';
 
 export { configureI18n, getLocale, registerLocale, setLocale, supportedLocales, t };
+
+/** Tell the desktop shell the page locale so native menus can relabel. */
+export function notifyHostLocale(locale: string): void {
+  getHostBridge()?.setLocale?.(locale);
+}
+
 export { LOCALE_STORAGE_KEY, SOURCE_LOCALE, normalizeLocale, resolveLocale } from './translate';
 
 interface I18nContextValue {
@@ -35,7 +42,7 @@ export function I18nProvider({ children }: { children: ReactNode }) {
       t,
       setLocale: (next) => {
         if (!setLocale(next)) return;
-        window.steerableHost?.setLocale?.(next);
+        notifyHostLocale(next);
       },
     }),
     [locale],

package/src/layouts/AgentLayout.tsx

@@ -19,6 +19,8 @@ import {
 } from '@/hooks/useChatsAndAgents';
 import { hostToolChrome, sanitizeRightPanelKind, settingsChrome } from '@/lib/host-tools';
 import { t } from '@/i18n';
+import { BRAND_NAME } from '@/brand';
+import { chatWindowTitle } from '@/lib/chat-row-keys';
 import {
   closeRightPanelTab,
   collapseRightPanel,
@@ -139,6 +141,12 @@ export type AgentOutletContext = UseChatsAndAgentsResult & {
 function AgentLayoutContent() {
   const data = useChatsAndAgents();
   const { chatId } = useParams<{ chatId?: string }>();
+  const currentChatTitle = chatId
+    ? data.chats.find((chat) => chat.id === chatId)?.title
+    : undefined;
+  useEffect(() => {
+    document.title = chatWindowTitle(currentChatTitle, BRAND_NAME);
+  }, [currentChatTitle]);
 
   // ── 包槽位 fallback 发送通道：AgentPage 注册 handleSubmit，包面板（如
   // PPT 单页修改在 sidecar 未就绪时）经 sendChatMessage 退回主聊天发送。

package/src/lib/chat-row-keys.ts

@@ -0,0 +1,10 @@
+/** 侧栏会话行快捷键。改这个表即可重绑，组件不要写死键名。 */
+export const chatRowKeys = {
+  rename: 'F2',
+} as const;
+
+/** 当前会话标题写进窗口标题；没有会话时只留产品名。 */
+export function chatWindowTitle(chatTitle: string | undefined, brand: string): string {
+  const title = chatTitle?.trim();
+  return title ? `${title} — ${brand}` : brand;
+}

package/src/lib/host-bridge.ts

@@ -44,6 +44,20 @@ export interface ApprovalPromptRequest {
   round: number;
   /** 发起审批的对话。缺省时卡片不绑定会话（旧请求）。 */
   chatId?: string;
+  /** 已按当前语言解析的类别名。缺省时类别就是工具名。 */
+  categoryLabel?: string;
+  /** shell 的 cwd 在该对话可写目录之外。 */
+  outsideWorkspace?: boolean;
+  /**
+   * `workspace`：没有绑定项目，cwd 在对话工作区外。
+   * 缺省时用项目外的说明（可加为源文件夹）。
+   */
+  outsideWorkspaceKind?: 'workspace';
+  /**
+   * 命令沙箱是否还在。`false` 时不说写入会被拒绝。
+   * 缺省保持旧 sidecar 的说明。
+   */
+  sandboxEnforced?: boolean;
 }
 
 /**
@@ -222,6 +236,13 @@ export interface HostBridge {
   readClipboard?: () => Promise<HostClipboard>;
   /** Plain text from the OS pasteboard. Empty when the clipboard has no text. */
   readClipboardText?: () => Promise<string>;
+  /**
+   * Desktop webview zoom, 0.8–2 in steps of 0.1. Absent in the browser,
+   * where the page must not register zoom shortcuts or show the setting.
+   */
+  getZoom?: () => Promise<number>;
+  setZoom?: (scale: number) => Promise<number>;
+  onZoomChanged?: (callback: (payload: { scale: number }) => void) => () => void;
   /**
    * 异步 AI 标题就绪通知。Backend 在每条 chat 首条助手回复完成后 fire-and-forget
    * 跑 LLM 生成标题；完成时通过这个通道把 `{chatId, title}` 推过来。返回的函数

package/src/lib/http-bridge.ts

@@ -65,8 +65,9 @@ async function http<T>(method: string, path: string, body?: unknown): Promise<T>
   });
   const data = (await res.json().catch(() => null)) as T;
   if (!res.ok) {
-    const err = new Error(httpErrorMessage(data, res.status)) as Error & { status?: number };
+    const err = new Error(httpErrorMessage(data, res.status)) as Error & { status?: number; data?: unknown };
     err.status = res.status;
+    err.data = data;
     throw err;
   }
   return data;

package/src/lib/local-api.ts

@@ -12,6 +12,7 @@
  *     may drift from any public cloud API. Aligning the two is out of scope.
  */
 
+import { getLocale } from '@/i18n';
 import { getHostBridge } from './host-bridge';
 
 export interface LocalChat {
@@ -466,6 +467,8 @@ export interface LocalProject {
   trusted?: boolean;
   /** 侧边栏顺序，越小越靠前。缺省时列表顺序由服务端决定。 */
   sortOrder?: number;
+  /** 命令行创建的项目。桌面创建的记录没有该字段。 */
+  origin?: 'cli';
   createdAt: string;
   updatedAt: string;
 }
@@ -619,6 +622,35 @@ export async function updateChatProject(chatId: string, projectId: string | null
   });
 }
 
+export async function getChat(chatId: string) {
+  return bridge().localBackend.request<{
+    id: string;
+    title: string;
+    forkedFrom: { chatId: string; title: string } | null;
+  }>({
+    method: 'GET',
+    path: `/api/v2/chats/${encodeURIComponent(chatId)}`,
+  });
+}
+
+/** 复制会话。409 表示原会话正被占用，413 表示工作区超过复制上限。 */
+export async function forkChat(chatId: string) {
+  return bridge().localBackend.request<{ chatId: string }>({
+    method: 'POST',
+    path: `/api/v2/chats/${encodeURIComponent(chatId)}/fork`,
+    body: { locale: getLocale() },
+  });
+}
+
+/** 用户重命名。409 表示会话锁被占用，调用方恢复旧名。 */
+export async function updateChatTitle(chatId: string, title: string) {
+  return bridge().localBackend.request<{ id: string; title: string }>({
+    method: 'PATCH',
+    path: `/api/v2/chats/${encodeURIComponent(chatId)}/settings`,
+    body: { title },
+  });
+}
+
 /* ---------------- Local LLM settings ---------------- */
 
 export type LlmProvider = 'ollama' | 'openai-compat' | 'anthropic' | 'google' | 'openai-responses';

package/src/lib/tauri-bridge.ts

@@ -95,6 +95,27 @@ export function createTauriBridge(): HostBridge {
     offMenuPaste: pasteMenu.off,
     readClipboard: () => invoke<HostClipboard>('host_read_clipboard'),
     readClipboardText: () => invoke<string>('host_read_clipboard_text'),
+    getZoom: () => invoke<number>('ui_get_zoom'),
+    setZoom: (scale) => invoke<number>('ui_set_zoom', { scale }),
+    setLocale: (locale) => {
+      void invoke('ui_set_locale', { locale });
+    },
+    onZoomChanged(callback) {
+      let unlisten: UnlistenFn | undefined;
+      let cancelled = false;
+      const pending = listen<{ scale: number }>('ui:zoom-changed', (event) => {
+        callback(event.payload);
+      });
+      void pending.then((stop) => {
+        if (cancelled) stop();
+        else unlisten = stop;
+      });
+      return () => {
+        cancelled = true;
+        if (unlisten) unlisten();
+        else void pending.then((stop) => stop());
+      };
+    },
     app: {
       snapshot: () => invoke<AppReleaseSnapshot>('app_release_snapshot'),
       check: () => invoke<AppReleaseSnapshot>('app_release_check'),

package/src/main.tsx

@@ -2,7 +2,7 @@ import { StrictMode, lazy, Suspense, type ReactNode } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { createHashRouter, RouterProvider } from 'react-router-dom';
 import { AppShell } from './AppShell';
-import { I18nProvider, configureI18n, getLocale } from './i18n';
+import { I18nProvider, configureI18n, getLocale, notifyHostLocale } from './i18n';
 import { AgentLayout } from './layouts/AgentLayout';
 import { AgentPage } from './pages/AgentPage';
 import { SettingsPage } from './pages/SettingsPage';
@@ -105,7 +105,7 @@ export async function bootstrap(): Promise<void> {
     defaultLocale: import.meta.env.VITE_DEFAULT_LOCALE || 'en',
   });
   document.documentElement.lang = getLocale() === 'zh' ? 'zh-CN' : getLocale();
-  window.steerableHost?.setLocale?.(getLocale());
+  notifyHostLocale(getLocale());
   document.title = BRAND_NAME;
   const icon = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
   if (icon) {