@steerable/agent-shell-web 0.6.20 → 0.6.21

package/package.json

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

package/src/components/chat/ApprovalModal.tsx

@@ -1,25 +1,21 @@
-import { useEffect, useState } from 'react';
 import { LuShieldAlert, LuTriangleAlert } from 'react-icons/lu';
 import {
-  getElectronBridge,
   type ApprovalDecisionKind,
   type ApprovalPromptRequest,
 } from '@/lib/electron-bridge';
 
 /**
- * ApprovalModalHost — W4-1 审批代数的 Electron UI 半侧。
+ * ApprovalPromptMenu — W4-1 审批代数的输入区 UI。
  *
- * 挂载一次（AgentPage），订阅主进程广播的 `approval:request`，弹出模态
- * 让用户对工具调用做 7 变体决策（允许/拒绝 × 一次性/会话/持久 + 中止）。
- * 决定经 `approval:decide` IPC 回到主进程，再应答 sidecar 的反向调用。
+ * 由 ApprovalPromptProvider 提供当前请求，在普通输入框的位置让用户对
+ * 工具调用做 7 变体决策（允许/拒绝 × 一次性/会话/持久 + 中止）。
  *
  * 持久化语义（与框架 ApprovalExecutor 对齐）：
  *   - 一次性：只作用于本次调用，不缓存。
  *   - 会话：按 category（默认=工具名）缓存在本 chat 的会话级 cache。
  *   - 持久：写入 ~/.steerable/approvals.json，跨会话生效。
  *
- * 队列为 FIFO：模型一批并发多个工具调用时逐个请示（sidecar 串行等待
- * 每个应答）。组件卸载/无窗口时主进程 fail-closed 为 deny_once。
+ * 请求队列及刷新恢复由 Provider 管理。
  */
 
 const MODE_LABEL: Record<string, string> = {
@@ -88,26 +84,15 @@ function DecisionRow({
   );
 }
 
-export function ApprovalModalHost() {
-  const [queue, setQueue] = useState<ApprovalPromptRequest[]>([]);
-
-  useEffect(() => {
-    const bridge = getElectronBridge();
-    if (!bridge?.approval) return;
-    return bridge.approval.onRequest((request) => {
-      setQueue((prev) => [...prev, request]);
-    });
-  }, []);
-
-  const current = queue[0] ?? null;
-  if (!current) return null;
-
-  const decide = (kind: ApprovalDecisionKind) => {
-    const bridge = getElectronBridge();
-    setQueue((prev) => prev.slice(1));
-    void bridge?.approval?.decide({ requestId: current.requestId, kind });
-  };
-
+export function ApprovalPromptMenu({
+  request: current,
+  pendingCount,
+  onDecide,
+}: {
+  request: ApprovalPromptRequest;
+  pendingCount: number;
+  onDecide: (kind: ApprovalDecisionKind) => void;
+}) {
   const destructive = current.mode === 'destructive';
   // 网络出口拓宽（W-egress-ask）：sidecar 的 web 工具被 egress 代理 403
   // 后发起。白名单是代理进程级的（会话寿命），所以「始终」变体对网络
@@ -121,13 +106,9 @@ export function ApprovalModalHost() {
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
-      role="dialog"
-      aria-modal="true"
-      aria-label="工具调用审批"
-      data-testid="approval-dialog"
+      className="overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas text-sm text-agent-foreground shadow-xl"
+      data-testid="approval-composer"
     >
-      <div className="w-full max-w-lg rounded-agent-lg border border-agent-border bg-agent-canvas shadow-xl">
         <div className="flex items-center gap-2 border-b border-agent-border px-4 py-3">
           {destructive ? (
             <LuTriangleAlert className="h-4 w-4 shrink-0 text-agent-destructive" />
@@ -154,9 +135,9 @@ export function ApprovalModalHost() {
                 </>
               )}
             </div>
-            {queue.length > 1 && (
+            {pendingCount > 0 && (
               <div className="mt-0.5 text-[11px] text-agent-muted-foreground">
-                还有 {queue.length - 1} 个待审批
+                还有 {pendingCount} 个待审批
               </div>
             )}
           </div>
@@ -195,7 +176,7 @@ export function ApprovalModalHost() {
                 ? ALLOW_BUTTONS.filter((b) => b.kind !== 'allow_always')
                 : ALLOW_BUTTONS
             }
-            onPick={decide}
+            onPick={onDecide}
           />
           <div className="flex items-center justify-between gap-2">
             <DecisionRow
@@ -204,11 +185,11 @@ export function ApprovalModalHost() {
                   ? DENY_BUTTONS.filter((b) => b.kind !== 'deny_always')
                   : DENY_BUTTONS
               }
-              onPick={decide}
+              onPick={onDecide}
             />
             <button
               type="button"
-              onClick={() => decide('abort')}
+              onClick={() => onDecide('abort')}
               className="shrink-0 rounded-agent-md bg-agent-destructive px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90"
               data-testid="approval-abort"
             >
@@ -221,9 +202,8 @@ export function ApprovalModalHost() {
               : '「会话」决定在本对话内记住；「始终」决定写入本机 ~/.steerable/approvals.json，跨对话生效。不操作约 2 分钟后按拒绝处理。'}
           </p>
         </div>
-      </div>
     </div>
   );
 }
 
-export default ApprovalModalHost;
+export default ApprovalPromptMenu;

package/src/components/chat/ApprovalPromptProvider.tsx

@@ -0,0 +1,98 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  getElectronBridge,
+  type ApprovalDecisionKind,
+  type ApprovalPromptRequest,
+} from '@/lib/electron-bridge';
+
+interface ApprovalPromptContextValue {
+  current: ApprovalPromptRequest | null;
+  pendingCount: number;
+  decide: (kind: ApprovalDecisionKind) => void;
+}
+
+const ApprovalPromptContext = createContext<ApprovalPromptContextValue | null>(null);
+
+/** Keeps approval prompts alive while the active composer presents them. */
+export function ApprovalPromptProvider({ children }: { children: ReactNode }) {
+  const [queue, setQueue] = useState<ApprovalPromptRequest[]>([]);
+  const decidedRequestIds = useRef(new Set<string>());
+
+  useEffect(() => {
+    const bridge = getElectronBridge();
+    if (!bridge?.approval) return;
+    let active = true;
+    const addRequests = (
+      requests: ApprovalPromptRequest[],
+      placement: 'append' | 'prepend' = 'append',
+    ) => {
+      setQueue((previous) => {
+        const known = new Set(previous.map(({ requestId }) => requestId));
+        const additions = requests.filter(
+          ({ requestId }) =>
+            !known.has(requestId) && !decidedRequestIds.current.has(requestId),
+        );
+        if (additions.length === 0) return previous;
+        return placement === 'prepend'
+          ? [...additions, ...previous]
+          : [...previous, ...additions];
+      });
+    };
+    const unsubscribe = bridge.approval.onRequest((request) => {
+      addRequests([request]);
+    });
+    void bridge.approval
+      .pending()
+      .then((requests) => {
+        if (active) addRequests(requests, 'prepend');
+      })
+      .catch((error) => {
+        console.error('恢复待审批请求失败:', error);
+      });
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  }, []);
+
+  const current = queue[0] ?? null;
+  const decide = useCallback(
+    (kind: ApprovalDecisionKind) => {
+      if (!current) return;
+      const bridge = getElectronBridge();
+      decidedRequestIds.current.add(current.requestId);
+      setQueue((previous) => previous.slice(1));
+      void bridge?.approval?.decide({ requestId: current.requestId, kind });
+    },
+    [current],
+  );
+
+  const value = useMemo(
+    () => ({
+      current,
+      pendingCount: Math.max(0, queue.length - 1),
+      decide,
+    }),
+    [current, decide, queue.length],
+  );
+
+  return (
+    <ApprovalPromptContext.Provider value={value}>
+      {children}
+    </ApprovalPromptContext.Provider>
+  );
+}
+
+/** Returns the approval prompt currently assigned to the chat composer. */
+export function useApprovalPrompt(): ApprovalPromptContextValue | null {
+  return useContext(ApprovalPromptContext);
+}

package/src/components/chat/AskUserPromptProvider.tsx

@@ -0,0 +1,99 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { getElectronBridge, type AskUserPromptRequest } from '@/lib/electron-bridge';
+
+type AnswerValue = string | string[];
+
+interface AskUserPromptContextValue {
+  current: AskUserPromptRequest | null;
+  pendingCount: number;
+  answer: (answers: Record<string, AnswerValue>) => void;
+}
+
+const AskUserPromptContext = createContext<AskUserPromptContextValue | null>(null);
+
+/**
+ * Keeps structured user prompts alive across chat navigation while allowing
+ * the active composer to present the current prompt.
+ */
+export function AskUserPromptProvider({ children }: { children: ReactNode }) {
+  const [queue, setQueue] = useState<AskUserPromptRequest[]>([]);
+  const answeredRequestIds = useRef(new Set<string>());
+
+  useEffect(() => {
+    const bridge = getElectronBridge();
+    if (!bridge?.askUser) return;
+    let active = true;
+    const addRequests = (
+      requests: AskUserPromptRequest[],
+      placement: 'append' | 'prepend' = 'append',
+    ) => {
+      setQueue((previous) => {
+        const known = new Set(previous.map(({ requestId }) => requestId));
+        const additions = requests.filter(
+          ({ requestId }) =>
+            !known.has(requestId) && !answeredRequestIds.current.has(requestId),
+        );
+        if (additions.length === 0) return previous;
+        return placement === 'prepend'
+          ? [...additions, ...previous]
+          : [...previous, ...additions];
+      });
+    };
+    const unsubscribe = bridge.askUser.onRequest((request) => {
+      addRequests([request]);
+    });
+    void bridge.askUser
+      .pending()
+      .then((requests) => {
+        if (active) addRequests(requests, 'prepend');
+      })
+      .catch((error) => {
+        console.error('恢复待回答问题失败:', error);
+      });
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  }, []);
+
+  const current = queue[0] ?? null;
+  const answer = useCallback(
+    (answers: Record<string, AnswerValue>) => {
+      if (!current) return;
+      const bridge = getElectronBridge();
+      answeredRequestIds.current.add(current.requestId);
+      setQueue((previous) => previous.slice(1));
+      void bridge?.askUser?.answer({ requestId: current.requestId, answers });
+    },
+    [current],
+  );
+
+  const value = useMemo(
+    () => ({
+      current,
+      pendingCount: Math.max(0, queue.length - 1),
+      answer,
+    }),
+    [answer, current, queue.length],
+  );
+
+  return (
+    <AskUserPromptContext.Provider value={value}>
+      {children}
+    </AskUserPromptContext.Provider>
+  );
+}
+
+/** Returns the structured prompt currently assigned to the chat composer. */
+export function useAskUserPrompt(): AskUserPromptContextValue | null {
+  return useContext(AskUserPromptContext);
+}

package/src/components/chat/AssistantMessage.tsx

@@ -11,6 +11,8 @@ import { getFriendlyDate } from './timestamp';
 import { useCopy } from './useCopy';
 import type { TurnBlock } from './turn-timeline';
 import { TurnProcessGroup } from './TurnProcessGroup';
+import { TurnFilesCard } from './TurnFilesCard';
+import type { TurnFile } from './turn-files';
 
 /**
  * AssistantMessage — Tier-1 port of `deeppath`'s assistant-bubble.
@@ -55,6 +57,11 @@ interface AssistantMessageProps {
    */
   agents: LocalChatAgent[];
   chats?: LocalChat[];
+  /**
+   * 当前对话。正文行内代码里的路径按它绑定的项目根解析相对路径后，
+   * 确认存在的会变成可点击（见 FilePathCode）。
+   */
+  chatId?: string | null;
   /** Active chat-level agent — used as a fallback during streaming. */
   currentAgent: LocalChatAgent | null;
   /**
@@ -91,6 +98,12 @@ interface AssistantMessageProps {
   startedAtMs?: number;
   /** Frozen wall-clock of a finished turn. */
   durationMs?: number;
+  /**
+   * 本回合产生/修改的文件列表（local-backend 回合收尾时收集，经
+   * `turn_files` SSE + messageMetadata.turnFiles 持久化）。渲染在回答
+   * 气泡之下，点击用系统默认应用打开。空/undefined = 不渲染。
+   */
+  turnFiles?: TurnFile[];
   /**
    * 分享当前对话（截图复制到剪贴板）。只传给最近一条助手消息，画在时间戳
    * 行上，跟复制 / 重新生成同一排。
@@ -198,6 +211,7 @@ export function AssistantMessage({
   isStreaming,
   agents,
   chats = [],
+  chatId = null,
   currentAgent,
   executedActions,
   timeline,
@@ -207,6 +221,7 @@ export function AssistantMessage({
   onRegenerate,
   startedAtMs,
   durationMs,
+  turnFiles,
   onShare,
 }: AssistantMessageProps) {
   const content = message.content || '';
@@ -263,6 +278,7 @@ export function AssistantMessage({
             durationMs={durationMs}
             agents={agents}
             chats={chats}
+            chatId={chatId}
             emptyFallback={
               failure ? (
                 <TurnErrorBubble reason={failure.reason} />
@@ -290,7 +306,7 @@ export function AssistantMessage({
             renderAnswer={(block, isLast) => (
               <div className={bubbleClass(isPlanMode)}>
                 <div className="markdown-content text-sm leading-relaxed text-agent-foreground">
-                  <Markdown agents={agents} chats={chats}>{block.content}</Markdown>
+                  <Markdown agents={agents} chats={chats} chatId={chatId}>{block.content}</Markdown>
                 </div>
                 {isStreaming && isLast && <StreamingCursor />}
               </div>
@@ -312,7 +328,7 @@ export function AssistantMessage({
             {displayContent ? (
               <div className={bubbleClass(isPlanMode)}>
                 <div className="markdown-content text-sm leading-relaxed text-agent-foreground">
-                  <Markdown agents={agents} chats={chats}>{displayContent}</Markdown>
+                  <Markdown agents={agents} chats={chats} chatId={chatId}>{displayContent}</Markdown>
                 </div>
                 {isStreaming && <StreamingCursor />}
               </div>
@@ -338,6 +354,13 @@ export function AssistantMessage({
             ) : null}
           </>
         )}
+        {/* 回合产物文件列表：钉在回答之下、时间戳行之上（Codex 式收尾）。
+            回合收尾才有数据，流式期间天然为空。 */}
+        {!isStreaming && turnFiles && turnFiles.length > 0 && (
+          <div className="mt-1.5">
+            <TurnFilesCard files={turnFiles} />
+          </div>
+        )}
         <div className="mt-1 flex items-center gap-2 text-[11px] text-agent-muted-foreground">
           <span>
             {message.createdAt

package/src/components/chat/ChatInput.tsx

@@ -42,6 +42,10 @@ import {
   type McpToolItem,
   type SkillItem,
 } from '@/lib/slash-sources';
+import { useAskUserPrompt } from './AskUserPromptProvider';
+import { AskUserQuestionMenu } from './AskUserQuestionMenu';
+import { useApprovalPrompt } from './ApprovalPromptProvider';
+import { ApprovalPromptMenu } from './ApprovalModal';
 import { ExecPolicyPicker } from './ExecPolicyPicker';
 
 export type ChatMode = 'agent' | 'plan';
@@ -704,6 +708,8 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     },
     ref,
   ) {
+    const askUserPrompt = useAskUserPrompt();
+    const approvalPrompt = useApprovalPrompt();
     const editorRef = useRef<HTMLDivElement>(null);
     const agentMenuRef = useRef<HTMLDivElement>(null);
     const skillOptionRefs = useRef<Array<HTMLButtonElement | null>>([]);
@@ -731,6 +737,12 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     const compositionEndAtRef = useRef<number>(0);
 
     const fileInputRef = useRef<HTMLInputElement>(null);
+    // 工具栏"空间不足时优先隐藏快捷键提示"的测量 refs，见下方 useLayoutEffect。
+    const toolbarRowRef = useRef<HTMLDivElement>(null);
+    const toolbarLeftRef = useRef<HTMLDivElement>(null);
+    const hintRef = useRef<HTMLDivElement>(null);
+    const sendButtonRef = useRef<HTMLButtonElement>(null);
+    const [hintsSuppressed, setHintsSuppressed] = useState(false);
     const [localFiles, setLocalFiles] = useState<AttachmentFile[]>([]);
     const actualFiles = files ?? localFiles;
     const actualOnFilesChange = onFilesChange ?? setLocalFiles;
@@ -1050,6 +1062,50 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       return () => window.removeEventListener('keydown', onKey);
     }, [isStreaming, onCancel]);
 
+    // 快捷键提示是工具栏里优先级最低的元素：空间不够时第一个隐藏（先于
+    // 左侧选择器截断）。容器查询只看输入盒宽度、看不到左侧内容（模型 id
+    // 长度可变）的实际占用，所以直接测量：左组自然宽度 + 提示 + 发送键
+    // 放不下就收起提示。测量时临时取消左组 flex 收缩并强制显示提示，
+    // 拿到的都是不依赖当前收起状态的自然宽度——结果稳定，不会来回闪烁。
+    useLayoutEffect(() => {
+      const row = toolbarRowRef.current;
+      const left = toolbarLeftRef.current;
+      if (!row || !left) return;
+
+      const check = () => {
+        if (row.clientWidth === 0) return; // 无布局环境（happy-dom）不干预
+        const hint = hintRef.current;
+        const send = sendButtonRef.current;
+        const prevShrink = left.style.flexShrink;
+        left.style.flexShrink = '0';
+        const prevHintDisplay = hint?.style.display ?? '';
+        if (hint) hint.style.display = 'block';
+        const needed =
+          left.getBoundingClientRect().width +
+          (hint?.getBoundingClientRect().width ?? 0) +
+          (send?.getBoundingClientRect().width ?? 0) +
+          16; // gap-2 ×2：左右组之间 + 提示与发送键之间
+        left.style.flexShrink = prevShrink;
+        if (hint) hint.style.display = prevHintDisplay;
+        const available = row.clientWidth - 16; // px-2 两侧
+        const suppress = needed > available + 1;
+        setHintsSuppressed((prev) => (prev === suppress ? prev : suppress));
+      };
+
+      check();
+      const resizeObs = new ResizeObserver(check);
+      resizeObs.observe(row);
+      // 左组内容变化（切换模型/沙箱档、设置齿轮挂载）不改变行宽，
+      // ResizeObserver 观察不到，用 MutationObserver 兜底重新测量。
+      const mutationObs = new MutationObserver(check);
+      mutationObs.observe(left, { childList: true, subtree: true, characterData: true });
+      return () => {
+        resizeObs.disconnect();
+        mutationObs.disconnect();
+      };
+      // isStreaming 切换提示文案（kbd 标签不同、宽度不同），需要重测。
+    }, [isStreaming]);
+
     const trimmed = value.trim();
     const canSend = (trimmed.length > 0 || actualFiles.length > 0) && !disabled && !isStreaming;
 
@@ -1454,6 +1510,42 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       editorRef.current?.focus();
     };
 
+    if (approvalPrompt?.current) {
+      return (
+        <div className="chat-input-container @container relative px-3 pb-3 pt-1">
+          <ApprovalPromptMenu
+            key={approvalPrompt.current.requestId}
+            request={approvalPrompt.current}
+            pendingCount={approvalPrompt.pendingCount}
+            onDecide={approvalPrompt.decide}
+          />
+        </div>
+      );
+    }
+
+    if (askUserPrompt?.current) {
+      const request = askUserPrompt.current;
+      return (
+        <div
+          className="chat-input-container @container relative px-3 pb-3 pt-1"
+          data-testid="ask-user-composer"
+        >
+          <AskUserQuestionMenu
+            key={request.requestId}
+            intro={request.intro}
+            questions={request.questions}
+            onSubmit={askUserPrompt.answer}
+            onAutoContinue={() => askUserPrompt.answer({})}
+            bottomHint={
+              askUserPrompt.pendingCount > 0
+                ? `还有 ${askUserPrompt.pendingCount} 组问题待回答`
+                : undefined
+            }
+          />
+        </div>
+      );
+    }
+
     return (
       // @container：底栏元素的显隐/宽度用容器查询（@sm = 384px）而不是
       // 视口断点——侧边栏占宽后，视口够宽但输入框本身可能已经很窄。
@@ -1708,11 +1800,14 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
               ))}
             </div>
           )}
-          <div className="flex items-center justify-between gap-2 px-2 pb-2 pt-1">
+          <div
+            ref={toolbarRowRef}
+            className="flex items-center justify-between gap-2 px-2 pb-2 pt-1"
+          >
             {/* Left toolbar: mode + exec sandbox + host extras + settings.
                 Agent picker lives in the meta row above the box, next to
                 the project badge. min-w-0 允许窄屏时胶囊截断收缩。 */}
-            <div className="flex min-w-0 items-center gap-1">
+            <div ref={toolbarLeftRef} className="flex min-w-0 items-center gap-1">
               {mode && onModeChange && (
                 <ModeToggle
                   mode={mode}
@@ -1732,7 +1827,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 type="button"
                 onClick={handlePickFiles}
                 disabled={disabled || isStreaming}
-                className="flex h-7 w-7 items-center justify-center rounded-full text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground disabled:cursor-not-allowed disabled:opacity-50"
                 title="上传文件（可多选）"
                 aria-label="上传文件"
               >
@@ -1752,7 +1847,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 <button
                   type="button"
                   onClick={onOpenSettings}
-                  className="flex h-7 w-7 items-center justify-center rounded-full text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
+                  className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
                   title="LLM 设置"
                   aria-label="LLM 设置"
                   data-testid="chat-llm-settings"
@@ -1761,9 +1856,14 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 </button>
               )}
             </div>
-            <div className="flex items-center gap-2">
-              {/* 快捷键提示只在输入盒足够宽时出现（容器查询，非视口） */}
-              <div className="hidden text-[11px] text-agent-muted-foreground/80 @min-[520px]:block">
+            {/* shrink-0：发送键是固定尺寸圆钮，窄容器下不允许被压扁；
+                收缩量由左侧可截断的选择器吸收。 */}
+            <div className="flex shrink-0 items-center gap-2">
+              {/* 快捷键提示：空间不足时优先隐藏（测量逻辑见上方 effect） */}
+              <div
+                ref={hintRef}
+                className={`${hintsSuppressed ? 'hidden' : 'block'} text-[11px] text-agent-muted-foreground/80`}
+              >
                 {isStreaming ? (
                   <>
                     <kbd className="rounded border border-agent-border bg-agent-muted px-1 font-sans text-[10px]">
@@ -1815,15 +1915,16 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 )}
               </div>
               <button
+                ref={sendButtonRef}
                 type="button"
                 onClick={handleSendClick}
                 disabled={!isStreaming && !canSend}
                 className={
                   isStreaming
-                    ? 'flex h-8 w-8 items-center justify-center rounded-full bg-agent-destructive text-white transition hover:opacity-90'
+                    ? 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-agent-destructive text-white transition hover:opacity-90'
                     : canSend
-                      ? 'flex h-8 w-8 items-center justify-center rounded-full bg-agent-foreground text-agent-canvas transition hover:opacity-90'
-                      : 'flex h-8 w-8 cursor-not-allowed items-center justify-center rounded-full bg-agent-muted text-agent-muted-foreground'
+                      ? 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-agent-foreground text-agent-canvas transition hover:opacity-90'
+                      : 'flex h-8 w-8 shrink-0 cursor-not-allowed items-center justify-center rounded-full bg-agent-muted text-agent-muted-foreground'
                 }
                 title={
                   isStreaming
@@ -1867,8 +1968,10 @@ function ModeToggle({
   onChange: (mode: ChatMode) => void;
 }) {
   return (
+    // shrink-0：分段控件被 flex 压缩会压扁文字；极窄容器（<@sm）退化为
+    // 纯图标（title 兜底语义），把收缩量让给可截断的选择器。
     <div
-      className="inline-flex h-7 items-center rounded-full border border-agent-border bg-agent-canvas p-0.5"
+      className="inline-flex h-7 shrink-0 items-center rounded-full border border-agent-border bg-agent-canvas p-0.5"
       role="radiogroup"
       aria-label="对话模式"
       data-testid="mode-toggle"
@@ -1889,7 +1992,7 @@ function ModeToggle({
         ].join(' ')}
       >
         <LuInfinity className="h-3.5 w-3.5" />
-        <span>Agent</span>
+        <span className="@max-sm:hidden">Agent</span>
       </button>
       <button
         type="button"
@@ -1907,7 +2010,7 @@ function ModeToggle({
         ].join(' ')}
       >
         <LuListChecks className="h-3.5 w-3.5" />
-        <span>Plan</span>
+        <span className="@max-sm:hidden">Plan</span>
       </button>
     </div>
   );