@steerable/agent-shell-web 0.6.26 → 0.6.28

package/src/components/chat/ChatInput.tsx

@@ -81,7 +81,7 @@ export type { ExecPolicy, McpToolItem, SkillItem };
  *   - Compact-mode responsive layout.
  */
 
-const MIN_HEIGHT_PX = 44;
+const MIN_HEIGHT_PX = 36;
 const MAX_HEIGHT_PX = 220;
 const MENTION_PATTERN = /(@[^\s@]+)/g;
 const MAX_MENTION_SUGGESTIONS = 8;
@@ -1512,7 +1512,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 
     if (approvalPrompt?.current) {
       return (
-        <div className="chat-input-container @container relative px-3 pb-3 pt-1">
+        <div className="chat-input-container @container relative px-2.5 pb-2 pt-0.5">
           <ApprovalPromptMenu
             key={approvalPrompt.current.requestId}
             request={approvalPrompt.current}
@@ -1527,7 +1527,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       const request = askUserPrompt.current;
       return (
         <div
-          className="chat-input-container @container relative px-3 pb-3 pt-1"
+          className="chat-input-container @container relative px-2.5 pb-2 pt-0.5"
           data-testid="ask-user-composer"
         >
           <AskUserQuestionMenu
@@ -1549,7 +1549,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     return (
       // @container：底栏元素的显隐/宽度用容器查询（@sm = 384px）而不是
       // 视口断点——侧边栏占宽后，视口够宽但输入框本身可能已经很窄。
-      <div className="chat-input-container @container relative px-3 pb-3 pt-1">
+      <div className="chat-input-container @container relative px-2.5 pb-2 pt-0.5">
         {(leadingChrome || selectedAgent) && (
           <div
             className="relative mb-1 flex min-w-0 items-center gap-1.5"
@@ -1712,7 +1712,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
           onDrop={handleDrop}
         >
           {pendingFollowUps.length > 0 && (
-            <div className="flex flex-col gap-1 border-b border-agent-border bg-agent-muted/30 px-3 py-2">
+            <div className="flex flex-col gap-1 border-b border-agent-border bg-agent-muted/30 px-2.5 py-1.5">
               <div className="text-[11px] font-medium text-agent-muted-foreground">
                 排队中（{pendingFollowUps.length}）· 本轮结束后自动发出 · 停止将丢弃
               </div>
@@ -1739,14 +1739,14 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
           {steerNotice && (
             <div
               role="status"
-              className="border-b border-agent-border bg-agent-muted/20 px-3 py-1.5 text-[11px] text-agent-muted-foreground"
+              className="border-b border-agent-border bg-agent-muted/20 px-2.5 py-1 text-[11px] text-agent-muted-foreground"
             >
               {steerNotice}
             </div>
           )}
           <div className="chat-input-surface relative overflow-hidden">
             <div
-              className="chat-input-placeholder pointer-events-none absolute inset-x-0 top-0 px-3 pt-3 text-sm text-agent-muted-foreground"
+              className="chat-input-placeholder pointer-events-none absolute inset-x-0 top-0 px-2.5 pt-2 text-xs text-agent-muted-foreground"
               style={{ visibility: value ? 'hidden' : undefined }}
             >
               {placeholder}
@@ -1769,7 +1769,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
               onCompositionStart={handleCompositionStart}
               onCompositionEnd={handleCompositionEnd}
               onScroll={handleEditorScroll}
-              className="chat-input-editor relative z-10 block w-full overflow-y-auto whitespace-pre-wrap break-words border-0 bg-transparent px-3 pt-3 text-sm text-agent-foreground caret-agent-foreground outline-none selection:bg-agent-foreground/20"
+              className="chat-input-editor relative z-10 block w-full overflow-y-auto whitespace-pre-wrap break-words border-0 bg-transparent px-2.5 pt-2 text-xs text-agent-foreground caret-agent-foreground outline-none selection:bg-agent-foreground/20"
               style={{
                 minHeight: MIN_HEIGHT_PX,
                 maxHeight: MAX_HEIGHT_PX,
@@ -1777,7 +1777,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
             />
           </div>
           {actualFiles.length > 0 && (
-            <div className="flex flex-wrap gap-1.5 px-3 pb-2 pt-0.5">
+            <div className="flex flex-wrap gap-1.5 px-2.5 pb-1.5 pt-0.5">
               {actualFiles.map((file, idx) => (
                 <div
                   key={idx}
@@ -1802,7 +1802,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
           )}
           <div
             ref={toolbarRowRef}
-            className="flex items-center justify-between gap-2 px-2 pb-2 pt-1"
+            className="flex items-center justify-between gap-1.5 px-2 py-1 text-[12px] leading-[1.45]"
           >
             {/* Left toolbar: mode + exec sandbox + host extras + settings.
                 Agent picker lives in the meta row above the box, next to
@@ -1827,11 +1827,11 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 type="button"
                 onClick={handlePickFiles}
                 disabled={disabled || isStreaming}
-                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"
+                className="flex h-6 w-6 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="上传文件"
               >
-                <LuPaperclip className="h-3.5 w-3.5" />
+                <LuPaperclip className="h-3 w-3" />
               </button>
               {/* 隐藏的原生多选文件输入：点击回形针按钮触发系统选择框。 */}
               <input
@@ -1847,12 +1847,12 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 <button
                   type="button"
                   onClick={onOpenSettings}
-                  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"
+                  className="flex h-6 w-6 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"
                 >
-                  <LuSettings className="h-3.5 w-3.5" />
+                  <LuSettings className="h-3 w-3" />
                 </button>
               )}
             </div>
@@ -1921,10 +1921,10 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 disabled={!isStreaming && !canSend}
                 className={
                   isStreaming
-                    ? 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-agent-destructive text-white transition hover:opacity-90'
+                    ? 'flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-agent-destructive text-white transition hover:opacity-90'
                     : canSend
-                      ? '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'
+                      ? 'flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-agent-foreground text-agent-canvas transition hover:opacity-90'
+                      : 'flex h-6 w-6 shrink-0 cursor-not-allowed items-center justify-center rounded-full bg-agent-muted text-agent-muted-foreground'
                 }
                 title={
                   isStreaming
@@ -1937,9 +1937,9 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 data-testid="chat-send"
               >
                 {isStreaming ? (
-                  <LuSquare className="h-3.5 w-3.5 fill-current" />
+                  <LuSquare className="h-3 w-3 fill-current" />
                 ) : (
-                  <LuArrowUp className="h-4 w-4" />
+                  <LuArrowUp className="h-3.5 w-3.5" />
                 )}
               </button>
             </div>
@@ -1971,7 +1971,7 @@ function ModeToggle({
     // shrink-0：分段控件被 flex 压缩会压扁文字；极窄容器（<@sm）退化为
     // 纯图标（title 兜底语义），把收缩量让给可截断的选择器。
     <div
-      className="inline-flex h-7 shrink-0 items-center rounded-full border border-agent-border bg-agent-canvas p-0.5"
+      className="inline-flex h-6 shrink-0 items-center rounded-full border border-agent-border bg-agent-canvas p-0.5"
       role="radiogroup"
       aria-label="对话模式"
       data-testid="mode-toggle"
@@ -1985,13 +1985,13 @@ function ModeToggle({
         title="Agent 模式：直接执行任务"
         data-testid="mode-agent"
         className={[
-          'inline-flex h-6 items-center gap-1 rounded-full px-2 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-70',
+          'inline-flex h-5 items-center gap-1 rounded-full px-1.5 text-[12px] leading-[1.45] transition-colors disabled:cursor-not-allowed disabled:opacity-70',
           mode === 'agent'
             ? 'bg-agent-foreground/10 text-agent-foreground'
             : 'text-agent-muted-foreground hover:text-agent-foreground',
         ].join(' ')}
       >
-        <LuInfinity className="h-3.5 w-3.5" />
+        <LuInfinity className="h-3 w-3" />
         <span className="@max-sm:hidden">Agent</span>
       </button>
       <button
@@ -2003,13 +2003,13 @@ function ModeToggle({
         title="Plan 模式：先制定计划，只读不执行"
         data-testid="mode-plan"
         className={[
-          'inline-flex h-6 items-center gap-1 rounded-full px-2 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-70',
+          'inline-flex h-5 items-center gap-1 rounded-full px-1.5 text-[12px] leading-[1.45] transition-colors disabled:cursor-not-allowed disabled:opacity-70',
           mode === 'plan'
             ? 'bg-amber-400/20 text-amber-600 dark:text-amber-400'
             : 'text-agent-muted-foreground hover:text-agent-foreground',
         ].join(' ')}
       >
-        <LuListChecks className="h-3.5 w-3.5" />
+        <LuListChecks className="h-3 w-3" />
         <span className="@max-sm:hidden">Plan</span>
       </button>
     </div>

package/src/components/chat/ExecPolicyPicker.tsx

@@ -64,16 +64,16 @@ export function ExecPolicyPicker({
         title={current.description}
         onClick={() => setOpen((next) => !next)}
         className={[
-          'inline-flex h-7 max-w-[140px] items-center gap-1 rounded-full border px-2 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-70',
+          'inline-flex h-6 max-w-[140px] items-center gap-1 rounded-full border px-1.5 text-[12px] leading-[1.45] transition-colors disabled:cursor-not-allowed disabled:opacity-70',
           isFull
             ? 'border-amber-400/50 bg-amber-400/10 text-amber-700 dark:text-amber-400'
             : 'border-agent-border bg-agent-canvas text-agent-foreground hover:bg-agent-foreground/5',
         ].join(' ')}
       >
         {isFull ? (
-          <LuLockOpen className="h-3.5 w-3.5 shrink-0" />
+          <LuLockOpen className="h-3 w-3 shrink-0" />
         ) : (
-          <LuFolderLock className="h-3.5 w-3.5 shrink-0" />
+          <LuFolderLock className="h-3 w-3 shrink-0" />
         )}
         <span className="truncate">{current.label}</span>
         <LuChevronDown className="h-3 w-3 shrink-0 text-agent-muted-foreground" />
@@ -104,7 +104,7 @@ export function ExecPolicyPicker({
                     : 'hover:bg-agent-foreground/5',
                 ].join(' ')}
               >
-                <span className="text-xs font-medium text-agent-foreground">
+                <span className="text-[12px] font-medium leading-[1.45] text-agent-foreground">
                   {option.label}
                 </span>
                 <span className="text-[11px] leading-snug text-agent-muted-foreground">

package/src/components/chat/ExecutedActionsCard.tsx

@@ -42,6 +42,8 @@ interface ExecutedActionsCardProps {
   actions: ExecutedAction[];
   /** Drop the outer card chrome when nested in a turn-process group. */
   compact?: boolean;
+  /** Show args/output instead of a one-line summary. Defaults to collapsed. */
+  defaultExpanded?: boolean;
 }
 
 function deriveStatus(action: ExecutedAction): ToolExecutionPayload['status'] {
@@ -145,7 +147,11 @@ function renderActionOutput(output: unknown): ReactNode {
 }
 
 /** Inline tool rows for a mixed think→act timeline (no summary banner). */
-export function ToolsFlow({ actions, compact = false }: ExecutedActionsCardProps) {
+export function ToolsFlow({
+  actions,
+  compact = false,
+  defaultExpanded = false,
+}: ExecutedActionsCardProps) {
   if (!actions || actions.length === 0) return null;
   const expanded = expandRunCodeActions(actions);
   return (
@@ -161,6 +167,7 @@ export function ToolsFlow({ actions, compact = false }: ExecutedActionsCardProps
           <ToolExecutionCard
             key={action.id ?? `${action.tool}-${i}`}
             payload={actionToTool(action, i)}
+            defaultExpanded={defaultExpanded}
             renderOutput={renderActionOutput}
             className="rounded-none border-0 border-t border-agent-border first:border-t-0"
           />
@@ -179,8 +186,8 @@ export function ExecutedActionsCard({ actions }: ExecutedActionsCardProps) {
   const runningCount = expanded.filter((a) => deriveStatus(a) === 'running').length;
 
   return (
-    <div className="my-2 overflow-hidden rounded-agent-md border border-agent-border bg-agent-canvas">
-      <div className="flex items-center justify-between border-b border-agent-border bg-agent-muted/30 px-3 py-1.5">
+    <div className="my-1.5 overflow-hidden rounded-agent-md border border-agent-border bg-agent-canvas">
+      <div className="flex items-center justify-between border-b border-agent-border bg-agent-muted/30 px-2.5 py-1">
         <div className="flex items-center gap-1.5 text-xs">
           {failureCount === 0 ? (
             <LuCircleCheck className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400" />

package/src/components/chat/FilePathCode.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import { openLocalPath, type ResolvedLocalPath } from '@/lib/local-api';
 import { peekResolvedPath, subscribeResolvedPath } from './path-mentions';
+import { splitTurnFilePath } from './turn-files';
 
 /**
  * 行内代码里的文件路径：后端确认存在后变成可点击，点击用系统默认应用打开。
@@ -59,7 +60,7 @@ export function FilePathCode({ candidate, chatId, children, ...rest }: FilePathC
         openError ? 'text-red-600 dark:text-red-400' : ''
       }`}
     >
-      {children}
+      {splitTurnFilePath(resolved.path).name || children}
     </button>
   );
 }

package/src/components/chat/LocalChatPanel.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import type { ChatMessage } from '@steerable/agent-protocol';
 import { ChatPanel } from '@steerable/agent-ui';
 import type { SteerOutcome } from '@steerable/agent-ui';
@@ -16,6 +16,9 @@ import type { ExecutedAction } from './ExecutedActionsCard';
 import type { ChildInfo } from './OrchestrationChildrenCard';
 import type { TurnBlock } from './turn-timeline';
 import type { TurnFile } from './turn-files';
+import type { LlmSpeedSnapshot } from './process-status';
+import { SessionTodoList } from './SessionTodoList';
+import { resolveLatestSessionTodos } from './todo-list-model';
 import {
   isImageFile,
   saveChatAttachments,
@@ -98,6 +101,8 @@ export interface LocalChatPanelProps {
   currentTurnTimeline?: TurnBlock[];
   currentTurnStartedAtMs?: number;
   durationByMessageId?: Record<string, number>;
+  currentLlmSpeed?: LlmSpeedSnapshot;
+  llmSpeedByMessageId?: Record<string, LlmSpeedSnapshot>;
   /** 回合产物文件列表（按落库消息 id 键控），转发给 MessageList。 */
   turnFilesByMessageId?: Record<string, TurnFile[]>;
   /** 当轮产物文件（流尾声到达、尚未归档到落库 id 的尾部消息用）。 */
@@ -176,6 +181,8 @@ export function LocalChatPanel({
   currentTurnTimeline,
   currentTurnStartedAtMs,
   durationByMessageId,
+  currentLlmSpeed,
+  llmSpeedByMessageId,
   turnFilesByMessageId,
   currentTurnFiles,
   currentTurnChildren,
@@ -285,6 +292,30 @@ export function LocalChatPanel({
   // 空会话 hero：messages 为空且未在流式时整面板切到居中首屏布局。
   const showEmptyHero = Boolean(emptyHero) && messages.length === 0 && !isStreaming;
 
+  const sessionTodos = useMemo(
+    () =>
+      resolveLatestSessionTodos({
+        messages,
+        executedActionsByMessageId,
+        currentTurnActions,
+        timelineByMessageId,
+        currentTurnTimeline,
+      }),
+    [
+      messages,
+      executedActionsByMessageId,
+      currentTurnActions,
+      timelineByMessageId,
+      currentTurnTimeline,
+    ],
+  );
+
+  const sessionTodoBanner = sessionTodos ? (
+    <div className="px-2.5">
+      <SessionTodoList todos={sessionTodos} />
+    </div>
+  ) : null;
+
   // Sync `chat-input-box-width` CSS var so bubbles match the input width
   // (cloud product uses 95% of the input box; we mirror that here so message
   // bubbles + input visually align in a column).
@@ -356,20 +387,21 @@ export function LocalChatPanel({
     >
       <ChatPanel.Root className="flex h-full flex-col overflow-hidden" unstyled>
         {showEmptyHero ? (
-          <div className="flex min-h-0 flex-1 items-center justify-center p-4 sm:p-8">
-            <div className="flex w-full max-w-2xl flex-col items-center gap-6">
+          <div className="flex min-h-0 flex-1 items-center justify-center p-3 sm:p-5">
+            <div className="flex w-full max-w-2xl flex-col items-center gap-4">
               <div className="text-center">
                 <h1 className="text-xl font-semibold tracking-tight text-agent-foreground">
                   {emptyHero?.title}
                 </h1>
                 {emptyHero?.subtitle && (
-                  <p className="mt-1.5 text-sm text-agent-muted-foreground">
+                  <p className="mt-1.5 text-xs text-agent-muted-foreground">
                     {emptyHero.subtitle}
                   </p>
                 )}
               </div>
               <div className="w-full">
                 {inputBanner}
+                {sessionTodoBanner}
                 {chatInputNode}
               </div>
             </div>
@@ -396,6 +428,8 @@ export function LocalChatPanel({
                 currentTurnTimeline={currentTurnTimeline}
                 currentTurnStartedAtMs={currentTurnStartedAtMs}
                 durationByMessageId={durationByMessageId}
+                currentLlmSpeed={currentLlmSpeed}
+                llmSpeedByMessageId={llmSpeedByMessageId}
                 turnFilesByMessageId={turnFilesByMessageId}
                 currentTurnFiles={currentTurnFiles}
                 currentTurnChildren={currentTurnChildren}
@@ -415,6 +449,7 @@ export function LocalChatPanel({
                 onSelectSuggestion={onSelectSuggestion}
               />
               {inputBanner}
+              {sessionTodoBanner}
               {chatInputNode}
             </div>
           </>

package/src/components/chat/Markdown.tsx

@@ -20,6 +20,7 @@ import {
 import { PlanTodoList } from './PlanTodoList';
 import { FilePathCode } from './FilePathCode';
 import { looksLikeFilePath } from './path-mentions';
+import { stripNextStepsTags } from './next-steps-tags';
 
 /**
  * Markdown renderer shared by `UserMessage` and `AssistantMessage`.
@@ -59,25 +60,25 @@ const components: Components = {
   h1: (props: ComponentPropsWithoutRef<'h1'>) => (
     <h1
       {...props}
-      className="mb-2 mt-3 text-base font-semibold text-agent-foreground first:mt-0"
+      className="mb-0.5 mt-1.5 text-xs font-semibold text-agent-foreground first:mt-0"
     />
   ),
   h2: (props: ComponentPropsWithoutRef<'h2'>) => (
     <h2
       {...props}
-      className="mb-1.5 mt-3 text-[14px] font-semibold text-agent-foreground first:mt-0"
+      className="mb-0.5 mt-1.5 text-xs font-semibold text-agent-foreground first:mt-0"
     />
   ),
   h3: (props: ComponentPropsWithoutRef<'h3'>) => (
     <h3
       {...props}
-      className="mb-1 mt-2 text-[13px] font-semibold text-agent-foreground first:mt-0"
+      className="mb-0.5 mt-1.5 text-xs font-semibold text-agent-foreground first:mt-0"
     />
   ),
   h4: (props: ComponentPropsWithoutRef<'h4'>) => (
     <h4
       {...props}
-      className="mb-1 mt-2 text-[13px] font-semibold text-agent-foreground first:mt-0"
+      className="mb-0.5 mt-1.5 text-xs font-semibold text-agent-foreground first:mt-0"
     />
   ),
 
@@ -85,16 +86,16 @@ const components: Components = {
     <p
       style={{ whiteSpace: 'pre-line' }}
       {...props}
-      className="my-1 leading-relaxed"
+      className="my-0.5 leading-relaxed"
     />
   ),
 
   // ── Lists ─────────────────────────────────────────────────────────────
   ul: (props: ComponentPropsWithoutRef<'ul'>) => (
-    <ul {...props} className="my-1.5 list-disc space-y-0.5 pl-5" />
+    <ul {...props} className="my-1 list-disc space-y-0.5 pl-4" />
   ),
   ol: (props: ComponentPropsWithoutRef<'ol'>) => (
-    <ol {...props} className="my-1.5 list-decimal space-y-0.5 pl-5" />
+    <ol {...props} className="my-1 list-decimal space-y-0.5 pl-4" />
   ),
   li: (props: ComponentPropsWithoutRef<'li'>) => (
     <li
@@ -115,18 +116,18 @@ const components: Components = {
   blockquote: (props: ComponentPropsWithoutRef<'blockquote'>) => (
     <blockquote
       {...props}
-      className="my-1.5 border-l-2 border-agent-border bg-agent-muted/40 px-3 py-1 text-[13px] text-agent-muted-foreground [&>p]:my-0"
+      className="my-1 border-l-2 border-agent-border bg-agent-muted/40 px-2 py-0.5 text-xs text-agent-muted-foreground [&>p]:my-0"
     />
   ),
 
   // ── Horizontal rule ──────────────────────────────────────────────────
   hr: (props: ComponentPropsWithoutRef<'hr'>) => (
-    <hr {...props} className="my-3 border-agent-border" />
+    <hr {...props} className="my-2 border-agent-border" />
   ),
 
   // ── Tables ───────────────────────────────────────────────────────────
   table: (props: ComponentPropsWithoutRef<'table'>) => (
-    <div className="my-2 w-full overflow-x-auto rounded-md border border-agent-border">
+    <div className="my-1.5 w-full overflow-x-auto rounded-md border border-agent-border">
       <table {...props} className="w-full border-collapse text-[12px]" />
     </div>
   ),
@@ -136,13 +137,13 @@ const components: Components = {
   th: (props: ComponentPropsWithoutRef<'th'>) => (
     <th
       {...props}
-      className="border-b border-agent-border px-2 py-1.5 text-left font-medium text-agent-foreground"
+      className="border-b border-agent-border px-2 py-1 text-left font-medium text-agent-foreground"
     />
   ),
   td: (props: ComponentPropsWithoutRef<'td'>) => (
     <td
       {...props}
-      className="border-b border-agent-border px-2 py-1.5 align-top break-words"
+      className="border-b border-agent-border px-2 py-1 align-top break-words"
       style={{ maxWidth: '300px' }}
     />
   ),
@@ -159,7 +160,7 @@ const components: Components = {
     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"
+        className="my-1.5 overflow-x-auto rounded-md border border-agent-border bg-agent-muted/60 p-2 text-[12px] leading-relaxed text-agent-foreground"
       />
     );
   },
@@ -453,7 +454,7 @@ export function Markdown({
       rehypePlugins={[rehypeRaw]}
       components={finalComponents}
     >
-      {children}
+      {stripNextStepsTags(children)}
     </ReactMarkdown>
   );
 }

package/src/components/chat/MessageList.tsx

@@ -20,6 +20,7 @@ import type { ChatMode } from './ChatInput';
 import type { TurnBlock } from './turn-timeline';
 import type { TurnFile } from './turn-files';
 import { inferDurationMs, readPersistedDurationMs } from './elapsed';
+import type { LlmSpeedSnapshot } from './process-status';
 
 /**
  * MessageList — scrolling viewport that renders user/assistant message
@@ -80,6 +81,10 @@ interface MessageListProps {
   currentTurnStartedAtMs?: number;
   /** Frozen duration keyed by assistant message id (live freeze + history). */
   durationByMessageId?: Record<string, number>;
+  /** Live model-request speed for the in-flight assistant turn. */
+  currentLlmSpeed?: LlmSpeedSnapshot;
+  /** Frozen model-request speed keyed by assistant message id. */
+  llmSpeedByMessageId?: Record<string, LlmSpeedSnapshot>;
   /**
    * 回合产物文件列表，按落库消息 id 键控（live 回合在 message_id 事件时
    * 归档；历史回合从 messageMetadata.turnFiles 水合）。
@@ -155,6 +160,8 @@ export function MessageList({
   currentTurnTimeline,
   currentTurnStartedAtMs,
   durationByMessageId,
+  currentLlmSpeed,
+  llmSpeedByMessageId,
   turnFilesByMessageId,
   currentTurnFiles,
   currentTurnChildren,
@@ -173,8 +180,8 @@ export function MessageList({
   onSelectSuggestion,
 }: MessageListProps) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const endRef = useRef<HTMLDivElement>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
+  const isAtBottomRef = useRef(true);
 
   const visibleMessages = messages.filter(
     (m) => m.role === 'user' || m.role === 'assistant',
@@ -192,13 +199,18 @@ export function MessageList({
     if (!el) return;
     const atBottom =
       el.scrollHeight - el.scrollTop - el.clientHeight < NEAR_BOTTOM_THRESHOLD_PX;
+    isAtBottomRef.current = atBottom;
     setIsAtBottom(atBottom);
   }, []);
 
-  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
-    const el = endRef.current;
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'auto') => {
+    const el = containerRef.current;
     if (!el) return;
-    el.scrollIntoView({ behavior, block: 'end' });
+    if (behavior === 'smooth') {
+      el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+      return;
+    }
+    el.scrollTop = el.scrollHeight;
   }, []);
 
   useEffect(() => {
@@ -213,33 +225,35 @@ export function MessageList({
   // Snap to bottom on first paint, regardless of whether the user "was" at
   // the bottom — there's no "before" on mount.
   useLayoutEffect(() => {
-    scrollToBottom('instant' as ScrollBehavior);
+    isAtBottomRef.current = true;
+    scrollToBottom('auto');
     setIsAtBottom(true);
   }, [scrollToBottom]);
 
-  // Subsequent auto-scroll only when the user is already near the bottom,
-  // so reading old messages doesn't get yanked.
+  // Stick to the bottom *before paint* while the user is still anchored.
+  // Smooth `scrollIntoView` on every reasoning token paints a frame mid-list
+  // then animates down — on Windows the classic scrollbar visibly jumps.
   const lastMessageId = visibleMessages[visibleMessages.length - 1]?.id;
   const lastContentLen = visibleMessages[visibleMessages.length - 1]?.content?.length ?? 0;
   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, suggestedSig, isAtBottom, scrollToBottom]);
+  useLayoutEffect(() => {
+    if (!isAtBottomRef.current) return;
+    scrollToBottom('auto');
+  }, [lastMessageId, lastContentLen, lastTimelineSig, suggestedSig, scrollToBottom]);
 
   return (
     <div className="relative flex-1 overflow-hidden">
       <div
         ref={containerRef}
-        className="h-full overflow-y-auto px-3 py-3"
+        className="h-full overflow-y-auto overflow-anchor-none px-2.5 py-2"
       >
         {visibleMessages.length === 0 ? (
           emptyState ?? null
         ) : (
-          <div className="mx-auto w-full space-y-1.5">
+          <div className="mx-auto w-full space-y-1">
             {visibleMessages.map((message, index) => {
               const isLast = index === visibleMessages.length - 1;
               if (message.role === 'user') {
@@ -304,6 +318,11 @@ export function MessageList({
                 : durationByMessageId?.[message.id]
                   ?? readPersistedDurationMs(metadataJson)
                   ?? inferDurationMs(previousUserCreatedAt, message.createdAt);
+              const persistedSpeed = llmSpeedByMessageId?.[message.id];
+              const isSpeedTail = isLast && currentLlmSpeed !== undefined;
+              const llmSpeed =
+                persistedSpeed
+                ?? (isStreamingTail || isSpeedTail ? currentLlmSpeed : undefined);
 
               return (
                 <div key={message.id}>
@@ -322,6 +341,7 @@ export function MessageList({
                     onRegenerate={onRegenerate}
                     startedAtMs={isStreamingTail ? currentTurnStartedAtMs : undefined}
                     durationMs={durationMs}
+                    llmSpeed={llmSpeed}
                     turnFiles={turnFiles}
                     onShare={message.id === lastAssistantId ? onShare : undefined}
                   />
@@ -359,14 +379,17 @@ export function MessageList({
             ) : null}
           </div>
         )}
-        <div ref={endRef} />
       </div>
 
       {!isAtBottom && visibleMessages.length > 0 && (
         <button
           type="button"
-          onClick={() => scrollToBottom('smooth')}
-          className="absolute bottom-3 right-3 flex h-8 w-8 items-center justify-center rounded-full border border-agent-border bg-agent-canvas text-agent-foreground shadow-md transition-colors hover:bg-agent-foreground/5"
+          onClick={() => {
+            isAtBottomRef.current = true;
+            setIsAtBottom(true);
+            scrollToBottom('smooth');
+          }}
+          className="absolute bottom-2 right-2 flex h-7 w-7 items-center justify-center rounded-full border border-agent-border bg-agent-canvas text-agent-foreground shadow-md transition-colors hover:bg-agent-foreground/5"
           title="回到底部"
           aria-label="回到底部"
         >