@steerable/agent-shell-web 0.6.19 → 0.6.21

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>
   );

package/src/components/chat/FilePathCode.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { openLocalPath, type ResolvedLocalPath } from '@/lib/local-api';
+import { peekResolvedPath, subscribeResolvedPath } from './path-mentions';
+
+/**
+ * 行内代码里的文件路径：后端确认存在后变成可点击，点击用系统默认应用打开。
+ *
+ * 未确认存在（或后端不可达）时渲染成与普通行内代码完全一致的外观——路径
+ * 靠形状判断挑出，误报难免，不能给点不开的假 affordance。
+ */
+
+const INLINE_CODE_CLASS =
+  'rounded bg-agent-muted px-1 py-0.5 font-mono text-[0.85em] text-agent-foreground';
+
+interface FilePathCodeProps extends ComponentPropsWithoutRef<'code'> {
+  /** 行内代码的纯文本，即待解析的路径字面量。 */
+  candidate: string;
+  /** 当前对话（相对路径按其绑定项目根解析），落地页可缺省。 */
+  chatId?: string | null;
+  children: ReactNode;
+}
+
+export function FilePathCode({ candidate, chatId, children, ...rest }: FilePathCodeProps) {
+  const [resolved, setResolved] = useState<ResolvedLocalPath | null>(
+    () => peekResolvedPath(candidate, chatId) ?? null,
+  );
+  const [openError, setOpenError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setOpenError(null);
+    return subscribeResolvedPath(candidate, chatId, (entry) => setResolved(entry));
+  }, [candidate, chatId]);
+
+  if (!resolved) {
+    return (
+      <code {...rest} className={INLINE_CODE_CLASS}>
+        {children}
+      </code>
+    );
+  }
+
+  const handleClick = async () => {
+    setOpenError(null);
+    try {
+      const result = await openLocalPath(resolved.path);
+      if (!result.success) setOpenError(result.error || '打开失败');
+    } catch (err) {
+      setOpenError(err instanceof Error ? err.message : '打开失败');
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      data-file-path-chip=""
+      onClick={handleClick}
+      title={openError ? `${resolved.path}（${openError}）` : `点击打开 ${resolved.path}`}
+      className={`${INLINE_CODE_CLASS} cursor-pointer underline decoration-dotted underline-offset-2 transition-colors hover:bg-agent-accent/15 hover:text-agent-accent ${
+        openError ? 'text-red-600 dark:text-red-400' : ''
+      }`}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/chat/LocalChatPanel.tsx

@@ -15,6 +15,7 @@ import { MessageList } from './MessageList';
 import type { ExecutedAction } from './ExecutedActionsCard';
 import type { ChildInfo } from './OrchestrationChildrenCard';
 import type { TurnBlock } from './turn-timeline';
+import type { TurnFile } from './turn-files';
 import {
   isImageFile,
   saveChatAttachments,
@@ -97,6 +98,10 @@ export interface LocalChatPanelProps {
   currentTurnTimeline?: TurnBlock[];
   currentTurnStartedAtMs?: number;
   durationByMessageId?: Record<string, number>;
+  /** 回合产物文件列表（按落库消息 id 键控），转发给 MessageList。 */
+  turnFilesByMessageId?: Record<string, TurnFile[]>;
+  /** 当轮产物文件（流尾声到达、尚未归档到落库 id 的尾部消息用）。 */
+  currentTurnFiles?: TurnFile[];
   /** P3.1: in-flight child agents + per-message reconciliation map. */
   currentTurnChildren?: ChildInfo[];
   orchestrationChildrenByMessageId?: Record<string, ChildInfo[]>;
@@ -141,6 +146,11 @@ export interface LocalChatPanelProps {
   onDismissFinishedTask?: (taskId: string) => void;
   /** 分享当前对话（截图）。落到最近一条助手消息的时间戳行。 */
   onShare?: () => Promise<boolean>;
+  /**
+   * 最近一条助手回复下的下一轮输入建议。点击即作为新用户消息发出。
+   */
+  suggestedReplies?: string[];
+  onSelectSuggestion?: (text: string) => void;
 }
 
 export function LocalChatPanel({
@@ -166,6 +176,8 @@ export function LocalChatPanel({
   currentTurnTimeline,
   currentTurnStartedAtMs,
   durationByMessageId,
+  turnFilesByMessageId,
+  currentTurnFiles,
   currentTurnChildren,
   orchestrationChildrenByMessageId,
   currentRound,
@@ -189,6 +201,8 @@ export function LocalChatPanel({
   onInspectTask,
   onDismissFinishedTask,
   onShare,
+  suggestedReplies,
+  onSelectSuggestion,
 }: LocalChatPanelProps) {
   const [inputValue, setInputValue] = useState('');
   const [files, setFiles] = useState<AttachmentFile[]>([]);
@@ -374,6 +388,7 @@ export function LocalChatPanel({
                 isStreaming={isStreaming}
                 agents={agents}
                 chats={chats}
+                chatId={chatId}
                 currentAgent={currentAgent}
                 executedActionsByMessageId={executedActionsByMessageId}
                 currentTurnActions={currentTurnActions}
@@ -381,6 +396,8 @@ export function LocalChatPanel({
                 currentTurnTimeline={currentTurnTimeline}
                 currentTurnStartedAtMs={currentTurnStartedAtMs}
                 durationByMessageId={durationByMessageId}
+                turnFilesByMessageId={turnFilesByMessageId}
+                currentTurnFiles={currentTurnFiles}
                 currentTurnChildren={currentTurnChildren}
                 orchestrationChildrenByMessageId={orchestrationChildrenByMessageId}
                 currentRound={currentRound}
@@ -394,6 +411,8 @@ export function LocalChatPanel({
                 onInspectTask={onInspectTask}
                 onDismissFinishedTask={onDismissFinishedTask}
                 onShare={onShare}
+                suggestedReplies={suggestedReplies}
+                onSelectSuggestion={onSelectSuggestion}
               />
               {inputBanner}
               {chatInputNode}

package/src/components/chat/Markdown.tsx

@@ -18,6 +18,8 @@ import {
   type SkillItem,
 } from '@/lib/slash-sources';
 import { PlanTodoList } from './PlanTodoList';
+import { FilePathCode } from './FilePathCode';
+import { looksLikeFilePath } from './path-mentions';
 
 /**
  * Markdown renderer shared by `UserMessage` and `AssistantMessage`.
@@ -146,7 +148,31 @@ const components: Components = {
   ),
 
   // ── Code (inline + block) ─────────────────────────────────────────────
-  code: (props) => {
+  code: renderCode(null),
+  pre: (props: ComponentPropsWithoutRef<'pre'>) => {
+    // A ```plan fence arrives as <pre><code class="language-plan">…</code></pre>.
+    // The code renderer above already swaps the inner node for PlanTodoList;
+    // here we drop the <pre> shell so the card isn't boxed in a code block.
+    if (containsPlanCode(props.children)) {
+      return <>{props.children}</>;
+    }
+    return (
+      <pre
+        {...props}
+        className="my-2 overflow-x-auto rounded-md border border-agent-border bg-agent-muted/60 p-2.5 text-[12px] leading-relaxed text-agent-foreground"
+      />
+    );
+  },
+};
+
+/**
+ * 行内代码 / 代码块渲染器。`chatId` 只影响行内代码：形状上像本地路径的
+ * 字面量交给 FilePathCode，由它经后端确认存在后变成可点击（相对路径按
+ * 该对话绑定的项目根解析）。代码块内的路径不参与——整块代码是给人读/
+ * 复制的，逐 token 挑路径会把块结构打散。
+ */
+function renderCode(chatId: string | null): Components['code'] {
+  return (props) => {
     const { children, className, ...rest } = props as ComponentPropsWithoutRef<'code'> & {
       // react-markdown v9 dropped the `inline` typed prop. Distinguish by
       // language fence (the only time class is set is for fenced blocks
@@ -167,6 +193,14 @@ const components: Components = {
         </code>
       );
     }
+    const text = childrenToText(children);
+    if (looksLikeFilePath(text)) {
+      return (
+        <FilePathCode {...rest} candidate={text.trim()} chatId={chatId}>
+          {children}
+        </FilePathCode>
+      );
+    }
     return (
       <code
         {...rest}
@@ -175,22 +209,8 @@ const components: Components = {
         {children}
       </code>
     );
-  },
-  pre: (props: ComponentPropsWithoutRef<'pre'>) => {
-    // A ```plan fence arrives as <pre><code class="language-plan">…</code></pre>.
-    // The code renderer above already swaps the inner node for PlanTodoList;
-    // here we drop the <pre> shell so the card isn't boxed in a code block.
-    if (containsPlanCode(props.children)) {
-      return <>{props.children}</>;
-    }
-    return (
-      <pre
-        {...props}
-        className="my-2 overflow-x-auto rounded-md border border-agent-border bg-agent-muted/60 p-2.5 text-[12px] leading-relaxed text-agent-foreground"
-      />
-    );
-  },
-};
+  };
+}
 
 function isPlanCodeClass(className: unknown): boolean {
   return typeof className === 'string' && className.split(/\s+/).includes('language-plan');
@@ -359,6 +379,11 @@ interface MarkdownProps {
   skills?: SkillItem[];
   /** MCP tools behind `/mcp__srv__tool` chips. */
   mcpTools?: McpToolItem[];
+  /**
+   * 当前对话。行内代码里的路径要按它绑定的项目根解析相对路径；缺省时
+   * 相对路径按 home 解析（同无项目对话里 exec 的缺省 cwd）。
+   */
+  chatId?: string | null;
 }
 
 /**
@@ -401,15 +426,19 @@ export function Markdown({
   chats = [],
   skills = [],
   mcpTools = [],
+  chatId = null,
 }: MarkdownProps) {
-  const baseComponents: Components = inlineParagraph
-    ? {
-        ...components,
-        p: (props: ComponentPropsWithoutRef<'p'>) => (
-          <span style={{ whiteSpace: 'pre-line' }} {...props} />
-        ),
-      }
-    : components;
+  const baseComponents: Components = {
+    ...components,
+    code: renderCode(chatId),
+    ...(inlineParagraph
+      ? {
+          p: (props: ComponentPropsWithoutRef<'p'>) => (
+            <span style={{ whiteSpace: 'pre-line' }} {...props} />
+          ),
+        }
+      : {}),
+  };
 
   const finalComponents = withTokens(baseComponents, (node) =>
     renderTextWithMentions(node, agents, chats, skills, mcpTools),

package/src/components/chat/MessageList.tsx

@@ -13,10 +13,12 @@ import { UserMessage } from './UserMessage';
 import { AssistantMessage } from './AssistantMessage';
 import { InterruptedTurnCard } from './InterruptedTurnCard';
 import { TaskOutcomeCards } from './TaskOutcomeCards';
+import { SuggestedReplies } from './SuggestedReplies';
 import type { ExecutedAction } from './ExecutedActionsCard';
 import type { ChildInfo } from './OrchestrationChildrenCard';
 import type { ChatMode } from './ChatInput';
 import type { TurnBlock } from './turn-timeline';
+import type { TurnFile } from './turn-files';
 import { inferDurationMs, readPersistedDurationMs } from './elapsed';
 
 /**
@@ -55,6 +57,11 @@ interface MessageListProps {
   emptyState?: ReactNode;
   agents: LocalChatAgent[];
   chats?: LocalChat[];
+  /**
+   * 当前对话。正文行内代码里的路径按其绑定项目根解析后，确认存在的变成
+   * 可点击（见 FilePathCode）。
+   */
+  chatId?: string | null;
   currentAgent: LocalChatAgent | null;
   /**
    * Tool calls keyed by the persisted message id (post-stream). Used for
@@ -73,6 +80,17 @@ interface MessageListProps {
   currentTurnStartedAtMs?: number;
   /** Frozen duration keyed by assistant message id (live freeze + history). */
   durationByMessageId?: Record<string, number>;
+  /**
+   * 回合产物文件列表，按落库消息 id 键控（live 回合在 message_id 事件时
+   * 归档；历史回合从 messageMetadata.turnFiles 水合）。
+   */
+  turnFilesByMessageId?: Record<string, TurnFile[]>;
+  /**
+   * 当轮产物文件：turn_files 事件在流尾声到达，此时尾部助手消息仍挂着
+   * 占位 id（框架不会在 message_id 后改写它），归档 map 按键查不到——
+   * 与 currentTurnActions 同款尾部回退。
+   */
+  currentTurnFiles?: TurnFile[];
   /**
    * Tool calls accumulated for the in-flight assistant message that the
    * backend hasn't assigned a DB id to yet. Rendered under the latest
@@ -116,6 +134,11 @@ interface MessageListProps {
   onDismissFinishedTask?: (taskId: string) => void;
   /** 分享当前对话（截图）。只画在最近一条助手消息的时间戳行上。 */
   onShare?: () => Promise<boolean>;
+  /**
+   * 最近一条助手回复下的下一轮输入建议（WorkBuddy 式）。只在非流式时渲染。
+   */
+  suggestedReplies?: string[];
+  onSelectSuggestion?: (text: string) => void;
 }
 
 export function MessageList({
@@ -124,6 +147,7 @@ export function MessageList({
   emptyState,
   agents,
   chats = [],
+  chatId = null,
   currentAgent,
   executedActionsByMessageId,
   currentTurnActions,
@@ -131,6 +155,8 @@ export function MessageList({
   currentTurnTimeline,
   currentTurnStartedAtMs,
   durationByMessageId,
+  turnFilesByMessageId,
+  currentTurnFiles,
   currentTurnChildren,
   orchestrationChildrenByMessageId,
   currentRound,
@@ -143,6 +169,8 @@ export function MessageList({
   onInspectTask,
   onDismissFinishedTask,
   onShare,
+  suggestedReplies,
+  onSelectSuggestion,
 }: MessageListProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const endRef = useRef<HTMLDivElement>(null);
@@ -196,10 +224,11 @@ export function MessageList({
   const lastTimelineSig = currentTurnTimeline
     ?.map((block) => (block.type === 'tools' ? `t${block.actions.length}` : `c${block.content.length}`))
     .join('|') ?? '';
+  const suggestedSig = suggestedReplies?.join('\0') ?? '';
   useEffect(() => {
     if (!isAtBottom) return;
     scrollToBottom('smooth');
-  }, [lastMessageId, lastContentLen, lastTimelineSig, isAtBottom, scrollToBottom]);
+  }, [lastMessageId, lastContentLen, lastTimelineSig, suggestedSig, isAtBottom, scrollToBottom]);
 
   return (
     <div className="relative flex-1 overflow-hidden">
@@ -253,6 +282,12 @@ export function MessageList({
               const turnTimeline = persistedTimeline
                 ?? (isStreamingTail || isCurrentTimelineTail ? currentTurnTimeline : undefined);
 
+              const persistedTurnFiles = turnFilesByMessageId?.[message.id];
+              const isTurnFilesTail =
+                isLast && currentTurnFiles !== undefined && currentTurnFiles.length > 0;
+              const turnFiles = persistedTurnFiles
+                ?? (isTurnFilesTail ? currentTurnFiles : undefined);
+
               const metadataJson =
                 typeof message.messageMetadata === 'string'
                   ? message.messageMetadata
@@ -271,23 +306,36 @@ export function MessageList({
                   ?? inferDurationMs(previousUserCreatedAt, message.createdAt);
 
               return (
-                <AssistantMessage
-                  key={message.id}
-                  message={message}
-                  isStreaming={isStreamingTail}
-                  agents={agents}
-                  chats={chats}
-                  currentAgent={currentAgent}
-                  executedActions={actions}
-                  timeline={turnTimeline}
-                  orchestrationChildren={childList}
-                  currentRound={isStreamingTail ? currentRound : undefined}
-                  isPlanMode={isPlanMode}
-                  onRegenerate={onRegenerate}
-                  startedAtMs={isStreamingTail ? currentTurnStartedAtMs : undefined}
-                  durationMs={durationMs}
-                  onShare={message.id === lastAssistantId ? onShare : undefined}
-                />
+                <div key={message.id}>
+                  <AssistantMessage
+                    message={message}
+                    isStreaming={isStreamingTail}
+                    agents={agents}
+                    chats={chats}
+                    chatId={chatId}
+                    currentAgent={currentAgent}
+                    executedActions={actions}
+                    timeline={turnTimeline}
+                    orchestrationChildren={childList}
+                    currentRound={isStreamingTail ? currentRound : undefined}
+                    isPlanMode={isPlanMode}
+                    onRegenerate={onRegenerate}
+                    startedAtMs={isStreamingTail ? currentTurnStartedAtMs : undefined}
+                    durationMs={durationMs}
+                    turnFiles={turnFiles}
+                    onShare={message.id === lastAssistantId ? onShare : undefined}
+                  />
+                  {!isStreaming &&
+                  message.id === lastAssistantId &&
+                  suggestedReplies &&
+                  suggestedReplies.length > 0 &&
+                  onSelectSuggestion ? (
+                    <SuggestedReplies
+                      suggestions={suggestedReplies}
+                      onSelect={onSelectSuggestion}
+                    />
+                  ) : null}
+                </div>
               );
             })}
             {/* W7-1: 中断提示卡在消息列尾部、与最后一条用户消息同列——

package/src/components/chat/ModelPicker.tsx

@@ -104,7 +104,9 @@ export function ModelPicker({
 
   return (
     <div ref={rootRef} className="flex min-w-0 items-center gap-1">
-      <div className="relative">
+      {/* flex + min-w-0 截断链：窄容器下模型 id 省略号收缩，而不是把
+          旁边的圆形图标按钮压扁。 */}
+      <div className="relative flex min-w-0">
         <button
           type="button"
           onClick={() => {
@@ -115,7 +117,7 @@ export function ModelPicker({
             if (next && status !== 'live' && !loading) void refresh();
           }}
           disabled={disabled}
-          className="inline-flex h-7 max-w-[160px] items-center gap-1.5 rounded-full border border-agent-border bg-agent-canvas px-2 text-xs text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-70 @sm:max-w-[220px]"
+          className="inline-flex h-7 min-w-0 max-w-[160px] items-center gap-1.5 rounded-full border border-agent-border bg-agent-canvas px-2 text-xs text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-70 @sm:max-w-[220px]"
           title={
             status === 'offline'
               ? `模型目录不可用${catalog?.error ? `：${catalog.error}` : ''}（仍可手动指定模型）`
@@ -124,7 +126,7 @@ export function ModelPicker({
           aria-haspopup="menu"
           aria-expanded={modelMenuOpen}
         >
-          <span className="truncate">{effectiveModel || '选择模型'}</span>
+          <span className="min-w-0 truncate">{effectiveModel || '选择模型'}</span>
           {model != null && (
             <span className="inline-flex shrink-0 items-center rounded bg-agent-foreground/10 px-1 py-0.5 text-[9px] font-medium text-agent-foreground">
               本会话