@agent-native/core 0.76.7 → 0.76.9

package/corpus/core/docs/content/locales/zh-CN/workspace-connections.md

@@ -16,7 +16,7 @@ description: "用于 connect-once-use-everywhere 集成的共享提供商元数
 - **credentialRef** — 指向保管库机密 (`{ key: "SLACK_BOT_TOKEN", scope: "org" }`) 的指针。连接表明令牌所在的位置；金库保存着价值。
 - **就绪** - 应用程序看到的组合状态：`connected`（已授予 + 存在凭据）、`needs_grant`、`needs_credentials`、`needs_attention` 或 `not_configured`。
 
-```an-diagram title="Connect once, grant apps, reuse credentials" summary="A Connection holds provider metadata (never secrets) and credentialRefs that point at the vault. Per-app Grants unlock it. Apps read a single Readiness status."
+```an-diagram title="连接一次、授予应用程序、重复使用凭据" summary="连接保存提供者元数据（绝不是秘密）和指向保管库的 credentialRefs。每个应用程序授予解锁它。应用程序读取单个就绪状态。"
 {
   "html": "<div class=\"diagram-conn\"><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill accent\">Connection</span><div class=\"diagram-box\" data-rough>named provider account<br><small class=\"diagram-muted\">provider, label, status, scopes, config &middot; never stores secret values</small></div><div class=\"diagram-muted\">credentialRef &rarr; pointer to a vault secret</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill\">Grant</span><div class=\"diagram-box\" data-rough>per-app permission<br><small class=\"diagram-muted\">no grant = no credential access</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill ok\">Readiness</span><small class=\"diagram-muted\">what the app sees</small><div class=\"sev-row\"><span class=\"diagram-pill ok\">connected</span><span class=\"diagram-pill warn\">needs_grant</span></div><div class=\"sev-row\"><span class=\"diagram-pill warn\">needs_credentials</span><span class=\"diagram-pill warn\">needs_attention</span></div><div class=\"sev-row\"><span class=\"diagram-pill\">not_configured</span></div></div></div>",
   "css": ".diagram-conn{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-conn .col{display:flex;flex-direction:column;gap:8px;padding:14px;min-width:220px}.diagram-conn .diagram-arrow{font-size:22px;line-height:1}.diagram-conn .sev-row{display:flex;gap:8px;flex-wrap:wrap}"
@@ -206,7 +206,7 @@ const brainCatalog = await listWorkspaceConnectionProviderCatalogForApp({
 
 工作区连接提供程序元数据回答：“这是哪个提供程序，它能做什么，可能需要什么凭据密钥，以及哪些模板应提供它？”
 
-```an-diagram title="Connection store vs. vault" summary="The vault owns the secret value. The connection owns provider metadata plus credentialRefs (pointers). At execution time the app resolves the ref through a granted connection and reads the value from the vault."
+```an-diagram title="连接存储与保管库" summary="金库拥有秘密价值。连接拥有提供者元数据和 credentialRefs（指针）。在执行时，应用程序通过授予的连接解析引用并从保管库读取值。"
 {
   "html": "<div class=\"diagram-vault\"><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill accent\">Connection store</span><div class=\"diagram-box\" data-rough>provider account + metadata<br><small class=\"diagram-muted\">status, scopes, config</small></div><div class=\"diagram-box\" data-rough>credentialRef<br><small class=\"diagram-muted\">{ key: SLACK_BOT_TOKEN, scope: org }</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">App action</span><small class=\"diagram-muted\">resolves at execution time through a granted ref</small><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill ok\">Vault</span><div class=\"diagram-box\" data-rough>secret value<br><small class=\"diagram-muted\">never returned to the agent or UI</small></div></div></div>",
   "css": ".diagram-vault{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-vault .col{display:flex;flex-direction:column;gap:8px;padding:14px;min-width:220px}.diagram-vault .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-vault .diagram-arrow{font-size:22px;line-height:1}"

package/corpus/core/docs/content/locales/zh-CN/workspace-management.md

@@ -9,7 +9,7 @@ description: "分支、CODEOWNERS、PR 审查以及 Dispatch 如何与 git 级
 
 本指南涵盖了运行代理本机工作区的操作方面 - 如何分支、谁审查什么、如何设置代码所有权以及 Dispatch 控制平面如何适应您的治理模型。
 
-```an-diagram title="Two governance planes" summary="Git governs code; Dispatch governs runtime. They are complementary — don't replicate one inside the other."
+```an-diagram title="两个治理平面" summary="Git 管理代码； Dispatch 控制运行时。它们是互补的——不要将一个复制到另一个中。"
 {
   "html": "<div class=\"gov\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Git / GitHub</span><strong>Code governance</strong><div class=\"gov-list\"><span class=\"diagram-pill\">CODEOWNERS</span><span class=\"diagram-pill\">branch protection</span><span class=\"diagram-pill\">PR review</span><span class=\"diagram-pill\">git log / blame</span></div></div><div class=\"diagram-pill diagram-muted\">+</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Dispatch</span><strong>Runtime governance</strong><div class=\"gov-list\"><span class=\"diagram-pill\">vault secrets &amp; grants</span><span class=\"diagram-pill\">workspace resources</span><span class=\"diagram-pill\">agent profiles</span><span class=\"diagram-pill\">approvals &amp; audit</span></div></div></div>",
   "css": ".gov{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.gov .diagram-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:240px}.gov .gov-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}"
@@ -47,13 +47,13 @@ main                         ← production
 
 代码治理由存储库根目录中的几个文件配置：
 
-```an-file-tree title="Governance config in the repo"
+```an-file-tree title="repo 中的治理配置"
 {
   "entries": [
-    { "path": ".github/CODEOWNERS", "note": "Auto-assigns reviewers per changed path" },
-    { "path": ".github/labeler.yml", "note": "Auto-labels PRs by app" },
-    { "path": "pnpm-workspace.yaml", "note": "Workspace-level — broad review" },
-    { "path": "package.json", "note": "Workspace-level — platform team owns" }
+    { "path": ".github/CODEOWNERS", "note": "按变更路径自动分配 reviewers" },
+    { "path": ".github/labeler.yml", "note": "按 app 自动给 PR 加标签" },
+    { "path": "pnpm-workspace.yaml", "note": "Workspace 级别：宽范围 review" },
+    { "path": "package.json", "note": "Workspace 级别：平台团队负责" }
   ]
 }
 ```

package/corpus/core/docs/content/locales/zh-CN/workspace.md

@@ -11,9 +11,9 @@ description: "Claude - 每个用户的代码级自定义 - skills、内存、指
 
 变化：**它是 SQL 行，而不是文件系统文件。**每个用户都将自己的工作区存储在数据库中。没有要启动的开发盒，没有每个用户的容器，没有要安装的文件。多租户 SaaS 可以为每个用户提供基本上免费的完全可定制的代理，因为所有这些都是行——个人内存、个人 MCP 服务器、个人 skills、个人子代理——并且共享代码库同时托管所有这些。
 
-```an-diagram title="A Claude-Code workspace, but stored in SQL" summary="The same customization layer — instructions, skills, memory, agents, jobs, MCP — except every file is a row in a shared multi-tenant database."
+```an-diagram title="Claude-Code 工作区，但存储在 SQL 中" summary="相同的定制层——指令、技能、内存、代理、作业、MCP——除了每个文件都是共享多租户数据库中的一行。"
 {
-  "html": "<div class=\"ws-map\"><div class=\"diagram-card cc\"><span class=\"diagram-pill warn\">Claude Code / Codex</span><small class=\"diagram-muted\">~/.claude/ on a local disk</small><div class=\"ws-files\"><span class=\"diagram-box\">CLAUDE.md</span><span class=\"diagram-box\">skills/</span><span class=\"diagram-box\">memory</span><span class=\"diagram-box\">mcp.json</span></div><small class=\"diagram-muted\">one codebase per developer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card an\"><span class=\"diagram-pill accent\">Agent-native workspace</span><small class=\"diagram-muted\">rows in one SQL database</small><div class=\"ws-rows\"><span class=\"diagram-pill\">AGENTS.md</span><span class=\"diagram-pill\">skills/&hellip;</span><span class=\"diagram-pill\">memory/&hellip;</span><span class=\"diagram-pill\">mcp-servers/&hellip;</span></div><small class=\"diagram-muted\">one codebase, many users, scoped <code>u:&lt;email&gt;:&hellip;</code></small></div></div>",
+  "html": "<div class=\"ws-map\"><div class=\"diagram-card cc\"><span class=\"diagram-pill warn\">Claude Code / Codex</span><small class=\"diagram-muted\">~/.claude/ on a local disk</small><div class=\"ws-files\"><span class=\"diagram-box\">CLAUDE.md</span><span class=\"diagram-box\">skills/</span><span class=\"diagram-box\">memory</span><span class=\"diagram-box\">mcp.json</span></div><small class=\"diagram-muted\">one codebase per developer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card an\"><span class=\"diagram-pill accent\">Agent-native workspace</span><small class=\"diagram-muted\">rows in one SQL 数据库</small><div class=\"ws-rows\"><span class=\"diagram-pill\">AGENTS.md</span><span class=\"diagram-pill\">skills/&hellip;</span><span class=\"diagram-pill\">memory/&hellip;</span><span class=\"diagram-pill\">mcp-servers/&hellip;</span></div><small class=\"diagram-muted\">one codebase, many users, scoped <code>u:&lt;email&gt;:&hellip;</code></small></div></div>",
   "css": ".ws-map{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ws-map .diagram-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:220px}.ws-map .ws-files,.ws-map .ws-rows{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}.ws-map .diagram-arrow{font-size:24px}"
 }
 ```
@@ -51,7 +51,7 @@ description: "Claude - 每个用户的代码级自定义 - skills、内存、指
 
 这些路径适用于所有三个范围 - 工作空间、组织/应用程序和个人。当同一路径存在于多个级别时，后面的范围获胜。
 
-```an-diagram title="Three scopes, one effective file" summary="The runtime resolves the same path across workspace, app, and personal scopes on read — the most specific scope wins."
+```an-diagram title="三个范围，一个有效文件" summary="运行时在读取时解析跨工作区、应用程序和个人范围的相同路径 - 最具体的范围获胜。"
 {
   "html": "<div class=\"ws-stack\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Workspace</span><small class=\"diagram-muted\">company-wide defaults from Dispatch</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">Organization / app</span><small class=\"diagram-muted\">team override for one app</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Personal</span><small class=\"diagram-muted\">per-user override &mdash; wins</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">Effective <code>context/brand.md</code></div></div>",
   "css": ".ws-stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.ws-stack .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:280px}.ws-stack .diagram-arrow{font-size:20px;align-self:center}.ws-stack code{font-size:.85em}.ws-stack .diagram-box{align-self:center;margin-top:4px}"
@@ -217,7 +217,7 @@ Skills 是 `skills/` 路径（最好是 `skills/<name>/SKILL.md`）下的 Markdo
 
 自定义代理使用 YAML frontmatter 加上 Markdown 指令：
 
-```an-annotated-code title="A custom agent profile"
+```an-annotated-code title="自定义代理配置文件"
 {
   "filename": "agents/design.md",
   "language": "markdown",

package/corpus/core/docs/content/locales/zh-CN/writing-agent-instructions.md

@@ -7,7 +7,7 @@ description: "如何为代理原生应用或模板编写出色的代理指令：
 
 代理在代理本机应用程序中的行为仅与您给出的说明一样好。三个表面承载该指导：`AGENTS.md`（地图）、skills（深入研究）和操作/工具描述（代理如何选择正确的工具）。写下每一篇都是为了快速检索，而不是为了散文。
 
-```an-diagram title="Three authored surfaces + one runtime surface" summary="AGENTS.md and tool descriptions load every turn; skills load on demand; application_state is written live by your UI."
+```an-diagram title="三个创作表面 + 一个运行时表面" summary="AGENTS.md 和工具描述每回合都会加载；按需加载技能； application_state 由您的 UI 实时编写。"
 {
   "html": "<div class=\"diagram-surfaces\"><div class=\"diagram-card always\" data-rough><span class=\"diagram-pill accent\">Every turn</span><strong>AGENTS.md</strong><small class=\"diagram-muted\">the map: purpose, core rules, state keys, action + skills index</small></div><div class=\"diagram-card always\" data-rough><span class=\"diagram-pill accent\">Every turn</span><strong>Tool descriptions</strong><small class=\"diagram-muted\">drive tool selection — one precise sentence each</small></div><div class=\"diagram-card ondemand\" data-rough><span class=\"diagram-pill\">On demand</span><strong>Skills</strong><small class=\"diagram-muted\">deep how-to, loaded when the description fires</small></div><div class=\"diagram-card runtime\" data-rough><span class=\"diagram-pill ok\">Live</span><strong>application_state</strong><small class=\"diagram-muted\">written by your UI: navigation, selection, focus</small></div></div>",
   "css": ".diagram-surfaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.diagram-surfaces .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px}"

package/corpus/core/docs/content/real-time-collaboration.md

@@ -121,8 +121,12 @@ Prevents Vite from re-bundling TipTap in incompatible ways during dev:
 
 ```ts
 // vite.config.ts
+import { reactRouter } from "@react-router/dev/vite";
+import { agentNative } from "@agent-native/core/vite";
+import { defineConfig } from "vite";
+
 export default defineConfig({
-  plugins: [reactRouter()],
+  plugins: [reactRouter(), agentNative()],
   optimizeDeps: {
     include: [
       "yjs",

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.76.7",
+  "version": "0.76.9",
   "type": "module",
   "engines": {
     "node": ">=22"

package/corpus/core/src/agent/run-store.ts

@@ -414,6 +414,27 @@ export async function readBackgroundRunClaim(runId: string): Promise<{
   };
 }
 
+/**
+ * Resolve the authenticated owner email for a run by joining it to its chat
+ * thread. The durable background worker's self-dispatch is cookieless
+ * (HMAC-only — see `AGENT_CHAT_PROCESS_RUN_PATH`), so it has no session for the
+ * normal owner resolution and would otherwise be treated as unauthenticated.
+ * The thread's `owner_email` was written by the authenticated foreground when it
+ * created the thread, so it is a trusted, non-forgeable owner source: only the
+ * HMAC-signed `runId` selects the row, and the caller cannot influence which
+ * owner that row maps to. Returns null when the run (or its thread) is missing.
+ */
+export async function getRunOwnerEmail(runId: string): Promise<string | null> {
+  await ensureRunTables();
+  const client = getDbExec();
+  const { rows } = await client.execute({
+    sql: `SELECT t.owner_email AS owner_email FROM agent_runs r JOIN chat_threads t ON r.thread_id = t.id WHERE r.id = ? LIMIT 1`,
+    args: [runId],
+  });
+  const row = rows?.[0] as { owner_email?: string | null } | undefined;
+  return row?.owner_email ?? null;
+}
+
 /**
  * Atomically acquire a run lease for a thread. Succeeds (returns true) only
  * when no other run for the same thread is currently status='running' with a

package/corpus/core/src/client/AgentPanel.tsx

@@ -106,6 +106,7 @@ import {
   AGENT_CHAT_VIEW_TRANSITION_CLASS,
   getAgentChatViewTransitionStyle,
 } from "./chat-view-transition.js";
+import { useT } from "./i18n.js";
 
 // Lazy-load AgentTerminal to avoid bundling xterm.js when not needed
 const AgentTerminal = lazy(() =>
@@ -168,6 +169,10 @@ const AGENT_PANEL_ROOT_STYLE = {
   fontSize: 13,
   lineHeight: 1.2,
 } satisfies React.CSSProperties;
+type AgentPanelStyle = React.CSSProperties & {
+  "--agent-sidebar-closed-transform"?: string;
+  "--agent-sidebar-width"?: string;
+};
 const AGENT_PANEL_HEADER_CLASS =
   "relative z-[240] flex h-12 shrink-0 items-center justify-between gap-2 border-b border-border";
 const AGENT_PANEL_HEADER_STYLE = {
@@ -647,6 +652,7 @@ function AgentPanelInner({
   codeAccess,
   ...assistantChatProps
 }: AgentPanelProps) {
+  const t = useT();
   const mounted = useClientOnly();
   const keyPrefix = storageKey ? `:${storageKey}` : "";
   const execModeKey = `${EXEC_MODE_KEY}${keyPrefix}`;
@@ -864,16 +870,16 @@ function AgentPanelInner({
   const inferredCodeAccessEnabled = !isDevMode || isDevFrameChatSurface;
   const codeAccessEnabled = codeAccess?.enabled ?? inferredCodeAccessEnabled;
   const codeUnavailableTitle =
-    codeAccess?.unavailableTitle ?? "Open Desktop to edit code";
+    codeAccess?.unavailableTitle ?? t("agentPanel.openDesktopToEditCode");
   const codeUnavailableDescription =
     codeAccess?.unavailableDescription ??
-    "Source-code changes and CLI access are available in the Agent Native Desktop app.";
+    t("agentPanel.codeUnavailableDescription");
   const codeUnavailableCtaLabel =
-    codeAccess?.unavailableCtaLabel ?? "Download Desktop";
+    codeAccess?.unavailableCtaLabel ?? t("agentPanel.downloadDesktop");
   const codeUnavailableCtaHref =
     codeAccess?.unavailableCtaHref ?? "https://www.agent-native.com/download";
   const codeUnavailableSecondaryCtaLabel =
-    codeAccess?.unavailableSecondaryCtaLabel ?? "Use Builder";
+    codeAccess?.unavailableSecondaryCtaLabel ?? t("agentPanel.useBuilder");
   const codeUnavailableSecondaryCtaHref =
     codeAccess?.unavailableSecondaryCtaHref;
   const canUseCodeTools =
@@ -925,7 +931,7 @@ function AgentPanelInner({
             <TooltipTrigger asChild>
               <button
                 onClick={() => switchMode("chat")}
-                aria-label="Chat mode"
+                aria-label={t("agentPanel.chatMode")}
                 className={cn(
                   "flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none",
                   activeMode === "chat"
@@ -935,17 +941,17 @@ function AgentPanelInner({
                 style={AGENT_PANEL_CONTROL_STYLE}
               >
                 <IconMessageCircle size={14} />
-                Chat
+                {t("agentPanel.chat")}
               </button>
             </TooltipTrigger>
-            <TooltipContent>Chat mode</TooltipContent>
+            <TooltipContent>{t("agentPanel.chatMode")}</TooltipContent>
           </Tooltip>
           {showCliMode && (
             <Tooltip>
               <TooltipTrigger asChild>
                 <button
                   onClick={() => switchMode("cli")}
-                  aria-label="CLI terminal mode"
+                  aria-label={t("agentPanel.cliTerminalMode")}
                   className={cn(
                     "flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none",
                     activeMode === "cli"
@@ -955,12 +961,12 @@ function AgentPanelInner({
                   style={AGENT_PANEL_CONTROL_STYLE}
                 >
                   <IconTerminal2 size={14} />
-                  CLI
+                  {t("agentPanel.cli")}
                 </button>
               </TooltipTrigger>
               <TooltipContent className="max-w-[260px]">
                 {codeAccessEnabled
-                  ? "CLI terminal mode"
+                  ? t("agentPanel.cliTerminalMode")
                   : codeUnavailableDescription}
               </TooltipContent>
             </Tooltip>
@@ -969,7 +975,7 @@ function AgentPanelInner({
             <TooltipTrigger asChild>
               <button
                 onClick={() => switchMode("resources")}
-                aria-label="Workspace files, agents, skills, and tasks"
+                aria-label={t("agentPanel.workspaceMode")}
                 className={cn(
                   "agent-sidebar-hover-reveal flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none",
                   activeMode === "resources"
@@ -979,17 +985,15 @@ function AgentPanelInner({
                 style={AGENT_PANEL_CONTROL_STYLE}
               >
                 <IconLayoutGrid size={14} />
-                Workspace
+                {t("agentPanel.workspace")}
               </button>
             </TooltipTrigger>
-            <TooltipContent>
-              Workspace files, agents, skills, and tasks
-            </TooltipContent>
+            <TooltipContent>{t("agentPanel.workspaceMode")}</TooltipContent>
           </Tooltip>
         </div>
       </TooltipProvider>
     ),
-    [codeAccessEnabled, codeUnavailableDescription, showCliMode],
+    [codeAccessEnabled, codeUnavailableDescription, showCliMode, t],
   );
 
   const [headerMenuOpen, setHeaderMenuOpen] = useState(false);
@@ -1043,10 +1047,10 @@ function AgentPanelInner({
           }
         />
         {mode === "chat" && (
-          <IconTooltip content="New chat">
+          <IconTooltip content={t("agentPanel.newChat")}>
             <button
               onClick={addTab}
-              aria-label="New chat"
+              aria-label={t("agentPanel.newChat")}
               className="agent-sidebar-hover-reveal flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50"
             >
               <IconPlus size={14} />
@@ -1054,10 +1058,10 @@ function AgentPanelInner({
           </IconTooltip>
         )}
         {mode === "cli" && canUseCodeTools && (
-          <IconTooltip content="New terminal">
+          <IconTooltip content={t("agentPanel.newTerminal")}>
             <button
               onClick={addCliTab}
-              aria-label="New terminal"
+              aria-label={t("agentPanel.newTerminal")}
               className="agent-sidebar-hover-reveal flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50"
             >
               <IconPlus size={14} />
@@ -1072,7 +1076,7 @@ function AgentPanelInner({
                 (headerMenuOpen || mode === "settings") &&
                   "bg-accent text-foreground",
               )}
-              aria-label="Agent panel options"
+              aria-label={t("agentPanel.panelOptions")}
             >
               <IconDotsVertical size={14} />
             </button>
@@ -1085,7 +1089,7 @@ function AgentPanelInner({
                     size={14}
                     className="shrink-0"
                   />
-                  Collapse sidebar
+                  {t("agentPanel.collapseSidebar")}
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
               </>
@@ -1093,7 +1097,9 @@ function AgentPanelInner({
             {mode === "chat" && toggleHistory && (
               <DropdownMenuItem onSelect={toggleHistory}>
                 <IconHistory size={14} className="shrink-0" />
-                {showHistory ? "Hide chats" : "All chats"}
+                {showHistory
+                  ? t("agentPanel.hideChats")
+                  : t("agentPanel.allChats")}
               </DropdownMenuItem>
             )}
             {mode === "chat" && (
@@ -1135,11 +1141,11 @@ function AgentPanelInner({
               )}
             >
               <IconSettings size={14} className="shrink-0" />
-              Settings
+              {t("agentPanel.settings")}
             </DropdownMenuItem>
             <DropdownMenuItem onSelect={() => setFeedbackOpen(true)}>
               <IconMessageDots size={14} className="shrink-0" />
-              Feedback
+              {t("agentPanel.feedback")}
             </DropdownMenuItem>
             {onToggleFullscreen && (
               <DropdownMenuItem onSelect={onToggleFullscreen}>
@@ -1148,7 +1154,9 @@ function AgentPanelInner({
                 ) : (
                   <IconArrowsMaximize size={14} className="shrink-0" />
                 )}
-                {isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+                {isFullscreen
+                  ? t("agentPanel.exitFullscreen")
+                  : t("agentPanel.fullscreen")}
               </DropdownMenuItem>
             )}
             {((mode === "chat" && activeTabId) ||
@@ -1160,7 +1168,7 @@ function AgentPanelInner({
                     <>
                       <DropdownMenuItem onSelect={() => closeTab(activeTabId)}>
                         <IconX size={14} className="shrink-0" />
-                        Close Tab
+                        {t("agentPanel.closeTab")}
                         <DropdownMenuShortcut>
                           {closeTabHint}
                         </DropdownMenuShortcut>
@@ -1168,10 +1176,10 @@ function AgentPanelInner({
                       <DropdownMenuItem
                         onSelect={() => closeOtherTabs(activeTabId)}
                       >
-                        Close Other Tabs
+                        {t("agentPanel.closeOtherTabs")}
                       </DropdownMenuItem>
                       <DropdownMenuItem onSelect={() => closeAllTabs()}>
-                        Close All Tabs
+                        {t("agentPanel.closeAllTabs")}
                         <DropdownMenuShortcut>
                           {closeAllTabsHint}
                         </DropdownMenuShortcut>
@@ -1180,7 +1188,7 @@ function AgentPanelInner({
                   ) : (
                     <DropdownMenuItem onSelect={clearActiveTab}>
                       <IconX size={14} className="shrink-0" />
-                      Clear chat
+                      {t("agentPanel.clearChat")}
                     </DropdownMenuItem>
                   )
                 ) : (
@@ -1189,7 +1197,7 @@ function AgentPanelInner({
                       onSelect={() => closeCliTab(activeCliTab)}
                     >
                       <IconX size={14} className="shrink-0" />
-                      Close Tab
+                      {t("agentPanel.closeTab")}
                       <DropdownMenuShortcut>
                         {closeTabHint}
                       </DropdownMenuShortcut>
@@ -1197,10 +1205,10 @@ function AgentPanelInner({
                     <DropdownMenuItem
                       onSelect={() => closeOtherCliTabs(activeCliTab)}
                     >
-                      Close Other Tabs
+                      {t("agentPanel.closeOtherTabs")}
                     </DropdownMenuItem>
                     <DropdownMenuItem onSelect={() => closeAllCliTabs()}>
-                      Close All Tabs
+                      {t("agentPanel.closeAllTabs")}
                       <DropdownMenuShortcut>
                         {closeAllTabsHint}
                       </DropdownMenuShortcut>
@@ -1234,6 +1242,7 @@ function AgentPanelInner({
       selectedCli,
       storageKey,
       switchMode,
+      t,
     ],
   );
 
@@ -1633,12 +1642,12 @@ function AgentPanelInner({
               <CodeAccessUnavailablePanel
                 title={
                   codeAccessEnabled
-                    ? "CLI requires dev mode"
+                    ? t("agentPanel.cliRequiresDevMode")
                     : codeUnavailableTitle
                 }
                 description={
                   codeAccessEnabled
-                    ? "Run this app locally with pnpm dev or use Builder.io to access the CLI terminal."
+                    ? t("agentPanel.cliRequiresDevModeDescription")
                     : codeUnavailableDescription
                 }
                 ctaLabel={codeUnavailableCtaLabel}
@@ -1702,6 +1711,7 @@ const SIDEBAR_STORAGE_KEY = "agent-native-sidebar-width";
 const SIDEBAR_FULLSCREEN_KEY = "agent-native-sidebar-fullscreen";
 const SIDEBAR_MIN = 280;
 const SIDEBAR_MAX = 700;
+const SIDEBAR_ANIMATION_MS = 260;
 const SIDEBAR_OVERLAY_Z_INDEX = 70;
 const SIDEBAR_FULLSCREEN_Z_INDEX = 90;
 /** Max width of the centered chat column in fullscreen mode (Claude-style). */
@@ -2225,8 +2235,10 @@ export interface AgentSidebarProps {
   position?: "left" | "right";
   /** Whether the sidebar starts open. Default: false */
   defaultOpen?: boolean;
-  /** Animate the mobile overlay in a sheet-style slide transition. */
+  /** Animate the mobile overlay in a sheet-style slide transition. Default: true */
   animateMobile?: boolean;
+  /** Animate desktop open/close by resizing the sidebar. Default: true */
+  animateDesktop?: boolean;
   /**
    * Apply the shared chat view-transition marker/name to the sidebar panel so a
    * page-level AgentChatSurface can morph into it on navigation.
@@ -2264,7 +2276,8 @@ export function AgentSidebar({
   sidebarWidth,
   position = "right",
   defaultOpen = false,
-  animateMobile = false,
+  animateMobile = true,
+  animateDesktop = true,
   chatViewTransition = false,
   storageKey,
   openOnChatRunning = false,
@@ -2649,14 +2662,50 @@ export function AgentSidebar({
   // already viewport-covering, so the maximize button is hidden and the
   // mounted state ignores any persisted value.
   const effectiveFullscreen = !onFullscreenRequest && fullscreen && !isMobile;
+  const mobileAnimationEnabled =
+    !presentationMode && !effectiveFullscreen && isMobile && animateMobile;
+  const desktopAnimationEnabled =
+    !presentationMode && !effectiveFullscreen && !isMobile && animateDesktop;
+  const sidebarAnimationEnabled =
+    mobileAnimationEnabled || desktopAnimationEnabled;
+  const [renderAnimatedPanel, setRenderAnimatedPanel] =
+    useState(shouldMountPanel);
+
+  useEffect(() => {
+    if (!sidebarAnimationEnabled) {
+      setRenderAnimatedPanel(shouldMountPanel);
+      return;
+    }
+
+    let unmountTimer: number | undefined;
+
+    if (shouldMountPanel) {
+      setRenderAnimatedPanel(true);
+    } else {
+      unmountTimer = window.setTimeout(() => {
+        setRenderAnimatedPanel(false);
+      }, SIDEBAR_ANIMATION_MS);
+    }
+
+    return () => {
+      if (unmountTimer !== undefined) {
+        window.clearTimeout(unmountTimer);
+      }
+    };
+  }, [shouldMountPanel, sidebarAnimationEnabled]);
+
+  const shouldRenderPanel = sidebarAnimationEnabled
+    ? renderAnimatedPanel
+    : shouldMountPanel;
+  const panelOpen = open && shouldMountPanel;
   // On desktop the resize handle is also the visual divider. Avoid painting a
   // second panel border next to it.
-  const showResizeHandle = !isMobile && !effectiveFullscreen && open;
+  const showResizeHandle = !isMobile && !effectiveFullscreen && panelOpen;
 
   // On mobile the sidebar floats as a fixed overlay so the content below isn't
   // squashed. On desktop it participates in the flex layout as before, except
   // in fullscreen mode where it overlays the entire viewport (Claude-style).
-  let panelStyle: React.CSSProperties;
+  let panelStyle: AgentPanelStyle;
   if (isMobile) {
     panelStyle = {
       ...AGENT_PANEL_ROOT_STYLE,
@@ -2671,14 +2720,9 @@ export function AgentSidebar({
       background: "hsl(var(--background))",
       borderLeft: isLeft ? "none" : "1px solid hsl(var(--border))",
       borderRight: isLeft ? "1px solid hsl(var(--border))" : "none",
-      display: animateMobile || open ? "flex" : "none",
-      transform: animateMobile
-        ? open
-          ? "translateX(0)"
-          : `translateX(${isLeft ? "-" : ""}calc(100% + 1px))`
-        : undefined,
-      pointerEvents: animateMobile && !open ? "none" : undefined,
-      willChange: animateMobile ? "transform" : undefined,
+      display: mobileAnimationEnabled || panelOpen ? "flex" : "none",
+      "--agent-sidebar-closed-transform": `translateX(${isLeft ? "-" : ""}calc(100% + 1px))`,
+      pointerEvents: mobileAnimationEnabled && !panelOpen ? "none" : undefined,
     };
   } else if (effectiveFullscreen) {
     panelStyle = {
@@ -2694,19 +2738,26 @@ export function AgentSidebar({
   } else {
     panelStyle = {
       ...AGENT_PANEL_ROOT_STYLE,
-      width,
+      "--agent-sidebar-width": `${width}px`,
+      width: desktopAnimationEnabled ? undefined : width,
       maxHeight: "100vh",
       borderLeft:
-        isLeft || showResizeHandle ? "none" : "1px solid hsl(var(--border))",
+        !panelOpen || isLeft || showResizeHandle
+          ? "none"
+          : "1px solid hsl(var(--border))",
       borderRight:
-        !isLeft || showResizeHandle ? "none" : "1px solid hsl(var(--border))",
-      display: open ? "flex" : "none",
+        !panelOpen || !isLeft || showResizeHandle
+          ? "none"
+          : "1px solid hsl(var(--border))",
+      display: desktopAnimationEnabled || panelOpen ? "flex" : "none",
+      minWidth: desktopAnimationEnabled ? 0 : undefined,
+      pointerEvents: desktopAnimationEnabled && !panelOpen ? "none" : undefined,
     };
   }
 
   // Mount the live chat surface only while visible or actively needed. Keeping
   // it mounted while closed starts app-state polling on every public page view.
-  const sidebar = shouldMountPanel ? (
+  const sidebar = shouldRenderPanel ? (
     <>
       {showResizeHandle && !isLeft && (
         <ResizeHandle position={position} onDrag={handleDrag} />
@@ -2715,17 +2766,23 @@ export function AgentSidebar({
         className={cn(
           "agent-sidebar-panel flex shrink-0 flex-col overflow-hidden text-[13px] leading-[1.2] antialiased",
           chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS,
-          animateMobile &&
-            isMobile &&
-            "shadow-2xl transition-transform duration-[260ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+          mobileAnimationEnabled && "shadow-2xl",
         )}
+        data-agent-sidebar-animation={
+          mobileAnimationEnabled
+            ? "mobile"
+            : desktopAnimationEnabled
+              ? "desktop"
+              : undefined
+        }
+        data-agent-sidebar-state={panelOpen ? "open" : "closed"}
         style={
           chatViewTransition
             ? getAgentChatViewTransitionStyle(panelStyle)
             : panelStyle
         }
-        inert={isMobile && !open ? true : undefined}
-        aria-hidden={isMobile && !open ? true : undefined}
+        inert={sidebarAnimationEnabled && !panelOpen ? true : undefined}
+        aria-hidden={sidebarAnimationEnabled && !panelOpen ? true : undefined}
       >
         <AgentPanel
           emptyStateText={emptyStateText}
@@ -2753,19 +2810,22 @@ export function AgentSidebar({
     <div className="flex min-w-0 flex-1 h-screen overflow-hidden">
       <AgentNativeRouteWarmup />
       {/* Mobile backdrop — tapping it closes the sidebar */}
-      {isMobile && !presentationMode && (animateMobile || open) && (
-        <div
-          className={cn(
-            "fixed inset-0 bg-black/40",
-            animateMobile &&
-              "transition-opacity duration-200 motion-reduce:transition-none",
-            animateMobile && !open && "pointer-events-none opacity-0",
-            animateMobile && open && "opacity-100",
-          )}
-          style={{ zIndex: SIDEBAR_OVERLAY_Z_INDEX - 1 }}
-          onClick={() => setOpenPersisted(false)}
-        />
-      )}
+      {isMobile &&
+        !presentationMode &&
+        (mobileAnimationEnabled ? shouldRenderPanel : open) && (
+          <div
+            className={cn(
+              "agent-sidebar-backdrop fixed inset-0 bg-black/40",
+              mobileAnimationEnabled && !panelOpen && "pointer-events-none",
+            )}
+            data-agent-sidebar-animation={
+              mobileAnimationEnabled ? "mobile" : undefined
+            }
+            data-agent-sidebar-state={panelOpen ? "open" : "closed"}
+            style={{ zIndex: SIDEBAR_OVERLAY_Z_INDEX - 1 }}
+            onClick={() => setOpenPersisted(false)}
+          />
+        )}
       {/* URLSync writes the current URL to application-state so the agent
           sees what page/filters the user is on, and applies URL-update
           commands the agent writes via `set-search-params` / `set-url`. */}