@steerable/agent-shell-web 0.6.27 → 0.6.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.27",
+  "version": "0.6.28",
   "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",
@@ -46,8 +46,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-protocol": "0.6.27",
-    "@steerable/agent-ui": "0.6.27"
+    "@steerable/agent-protocol": "0.6.28",
+    "@steerable/agent-ui": "0.6.28"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -60,7 +60,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.6.27"
+    "@steerable/pack-sdk": "0.6.28"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/components/AgentSidebar.tsx

@@ -477,7 +477,7 @@ export function AgentSidebar({
             navigate(`/agent/${chat.id}`);
           }}
           className={[
-            'flex h-8 w-full min-w-0 items-center gap-1.5 rounded-full px-3 text-sm transition-colors duration-200',
+            'flex h-7 w-full min-w-0 items-center gap-1.5 rounded-full px-2.5 text-xs transition-colors duration-200',
             isCurrent
               ? 'bg-agent-foreground/10 font-medium text-agent-foreground'
               : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
@@ -620,7 +620,7 @@ export function AgentSidebar({
   return (
     <div className="flex h-full w-full flex-col border-r border-agent-border/60 bg-agent-muted/70 backdrop-blur-md">
       {/* ───── Brand + actions ───── */}
-      <div className="flex h-12 flex-shrink-0 items-center justify-between px-3">
+      <div className="flex h-9 flex-shrink-0 items-center justify-between px-2.5">
         <BrandLockup />
         <div className="flex items-center gap-1">
           <button
@@ -638,12 +638,12 @@ export function AgentSidebar({
       {/* ───── 会话 ───── */}
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
         {/* 新对话 + 智能体 / Skill / MCP 设置入口 — 横版行按钮，各自打开独立设置页 */}
-        <div className="flex-shrink-0 space-y-0.5 px-3 pb-0.5">
+        <div className="flex-shrink-0 space-y-0.5 px-2.5 pb-0.5">
           <button
             type="button"
             onClick={() => handleOpenNewChat()}
             className={[
-              'flex h-8 w-full items-center gap-2 rounded-full px-3 text-sm transition-colors',
+              'flex h-7 w-full items-center gap-1.5 rounded-full px-2.5 text-xs transition-colors',
               onNewChatHome
                 ? 'bg-agent-foreground/10 font-medium text-agent-foreground'
                 : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
@@ -651,14 +651,14 @@ export function AgentSidebar({
             title="新建对话"
             data-testid="sidebar-new-chat"
           >
-            <LuPlus className="h-4 w-4" />
+            <LuPlus className="h-3.5 w-3.5" />
             <span>新对话</span>
           </button>
           <button
             type="button"
             onClick={() => navigate('/settings?section=agents')}
             className={[
-              'flex h-8 w-full items-center gap-2 rounded-full px-3 text-sm transition-colors',
+              'flex h-7 w-full items-center gap-1.5 rounded-full px-2.5 text-xs transition-colors',
               onSettingsPage && settingsSection === 'agents'
                 ? 'bg-agent-foreground/10 font-medium text-agent-foreground'
                 : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
@@ -666,14 +666,14 @@ export function AgentSidebar({
             title="智能体管理"
             data-testid="sidebar-agent-settings"
           >
-            <LuBot className="h-4 w-4" />
+            <LuBot className="h-3.5 w-3.5" />
             <span>智能体管理</span>
           </button>
           <button
             type="button"
             onClick={() => navigate('/settings?section=skills')}
             className={[
-              'flex h-8 w-full items-center gap-2 rounded-full px-3 text-sm transition-colors',
+              'flex h-7 w-full items-center gap-1.5 rounded-full px-2.5 text-xs transition-colors',
               onSettingsPage && settingsSection === 'skills'
                 ? 'bg-agent-foreground/10 font-medium text-agent-foreground'
                 : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
@@ -681,14 +681,14 @@ export function AgentSidebar({
             title="Skill 设置"
             data-testid="sidebar-skill-settings"
           >
-            <LuBlocks className="h-4 w-4" />
+            <LuBlocks className="h-3.5 w-3.5" />
             <span>Skill 设置</span>
           </button>
           <button
             type="button"
             onClick={() => navigate('/settings?section=mcp')}
             className={[
-              'flex h-8 w-full items-center gap-2 rounded-full px-3 text-sm transition-colors',
+              'flex h-7 w-full items-center gap-1.5 rounded-full px-2.5 text-xs transition-colors',
               onSettingsPage && settingsSection === 'mcp'
                 ? 'bg-agent-foreground/10 font-medium text-agent-foreground'
                 : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
@@ -696,11 +696,11 @@ export function AgentSidebar({
             title="MCP 设置"
             data-testid="sidebar-mcp-settings"
           >
-            <LuPlug className="h-4 w-4" />
+            <LuPlug className="h-3.5 w-3.5" />
             <span>MCP 设置</span>
           </button>
         </div>
-        <div className="flex flex-shrink-0 items-center justify-between py-1.5 pl-4 pr-3">
+        <div className="flex flex-shrink-0 items-center justify-between py-1 pl-2.5 pr-2.5">
           <button
             type="button"
             onClick={() => setChatsExpanded((v) => !v)}
@@ -747,7 +747,7 @@ export function AgentSidebar({
                 加载中...
               </div>
             ) : chatGroups.length === 0 && projectGroups.length === 0 ? (
-              <div className="flex flex-col items-center gap-1.5 py-6 text-xs text-agent-muted-foreground">
+              <div className="flex flex-col items-center gap-1.5 py-4 text-xs text-agent-muted-foreground">
                 <LuMessageSquare className="h-4 w-4 text-agent-muted-foreground/60" />
                 暂无会话
               </div>
@@ -759,7 +759,7 @@ export function AgentSidebar({
                     <div className="group/proj relative">
                       {renamingProjectId === project.id ? (
                         <form
-                          className="flex items-center px-3 pb-1 pt-2"
+                          className="flex items-center px-2.5 pb-1 pt-1.5"
                           onSubmit={(event) => {
                             event.preventDefault();
                             void handleRenameProject(project.id);
@@ -781,7 +781,7 @@ export function AgentSidebar({
                           <button
                             type="button"
                             onClick={() => toggleProjectCollapsed(project.id)}
-                            className="flex w-full min-w-0 items-center px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wider text-agent-muted-foreground/80 transition-colors hover:text-agent-foreground"
+                            className="flex w-full min-w-0 items-center px-2.5 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wider text-agent-muted-foreground/80 transition-colors hover:text-agent-foreground"
                             title={`${project.name}\n${project.folderPath}`}
                           >
                             <span className="mr-1">
@@ -856,7 +856,7 @@ export function AgentSidebar({
                     {!collapsedProjectIds.has(project.id) && (
                       <div className="space-y-0.5">
                         {items.length === 0 ? (
-                          <div className="px-3 py-1 text-[11px] text-agent-muted-foreground/60">
+                          <div className="px-2.5 py-0.5 text-[11px] text-agent-muted-foreground/60">
                             暂无会话 — hover 项目名点 + 新建
                           </div>
                         ) : (
@@ -869,7 +869,7 @@ export function AgentSidebar({
                 {/* 无项目对话排在项目分组之后：保持原有日期分组 */}
                 {chatGroups.map((group) => (
                   <div key={group.label} className="mb-1">
-                    <div className="px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wider text-agent-muted-foreground/80">
+                    <div className="px-2.5 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wider text-agent-muted-foreground/80">
                       {group.label}
                     </div>
                     <div className="space-y-0.5">
@@ -899,7 +899,7 @@ export function AgentSidebar({
 
       {(error || projectError) && (
         <div
-          className="flex-shrink-0 border-t border-agent-destructive/40 bg-agent-destructive/10 px-3 py-2 text-[11px] text-agent-destructive"
+          className="flex-shrink-0 border-t border-agent-destructive/40 bg-agent-destructive/10 px-2.5 py-1.5 text-[11px] text-agent-destructive"
           role="alert"
         >
           {error ?? projectError}
@@ -907,13 +907,13 @@ export function AgentSidebar({
       )}
 
       {/* ───── Footer: 右侧面板切换（终端 | 包槽位）+ 设置 ───── */}
-      <div className="flex-shrink-0 border-t border-agent-border/40 px-3 py-2">
+      <div className="flex-shrink-0 border-t border-agent-border/40 px-2.5 py-1.5">
         {chatSlots.length === 0 ? (
           <button
             type="button"
             onClick={() => onToggleRightPanel('terminal')}
             className={[
-              'flex h-8 w-full items-center gap-2 rounded-full px-3 text-sm transition-colors',
+              'flex h-7 w-full items-center gap-1.5 rounded-full px-2.5 text-xs transition-colors',
               rightPanel === 'terminal'
                 ? 'bg-agent-foreground/10 font-medium text-agent-foreground'
                 : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-foreground',
@@ -921,7 +921,7 @@ export function AgentSidebar({
             title={`${rightPanel === 'terminal' ? '关闭' : '打开'}终端面板 (${isMac ? '⌘T' : 'Ctrl+T'})`}
             data-testid="sidebar-terminal"
           >
-            <LuTerminal className="h-4 w-4" />
+            <LuTerminal className="h-3.5 w-3.5" />
             <span>终端</span>
             <span className="ml-auto text-[10px] text-agent-muted-foreground/70">
               {isMac ? '⌘T' : 'Ctrl+T'}
@@ -931,7 +931,7 @@ export function AgentSidebar({
           <div
             role="group"
             aria-label="右侧面板切换"
-            className="flex h-8 w-full items-center gap-0.5 rounded-full bg-agent-foreground/5 p-0.5"
+            className="flex h-7 w-full items-center gap-0.5 rounded-full bg-agent-foreground/5 p-0.5"
           >
             <button
               type="button"
@@ -972,7 +972,7 @@ export function AgentSidebar({
           type="button"
           onClick={() => navigate('/settings')}
           className={[
-            'mt-0.5 flex h-8 w-full items-center gap-2 rounded-full px-3 text-sm transition-colors',
+            'mt-0.5 flex h-7 w-full items-center gap-1.5 rounded-full px-2.5 text-xs transition-colors',
             onGeneralSettings
               ? 'bg-agent-foreground/10 font-medium text-agent-foreground'
               : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
@@ -980,7 +980,7 @@ export function AgentSidebar({
           title="设置"
           data-testid="sidebar-llm-settings"
         >
-          <LuSettings className="h-4 w-4" />
+          <LuSettings className="h-3.5 w-3.5" />
           <span>设置</span>
         </button>
       </div>

package/src/components/BrandLockup.tsx

@@ -15,7 +15,7 @@ export function BrandLockup() {
         draggable={false}
       />
       {title ? (
-        <span className="truncate text-sm font-semibold tracking-tight text-agent-foreground">
+        <span className="truncate text-xs font-semibold tracking-tight text-agent-foreground">
           {title}
         </span>
       ) : null}

package/src/components/ChatHeader.tsx

@@ -127,7 +127,7 @@ export function ChatHeader({
             data-branch-menu
           >
             {!branches || branchCount === 0 ? (
-              <div className="px-3 py-2 text-xs text-agent-muted-foreground">
+              <div className="px-2.5 py-1.5 text-xs text-agent-muted-foreground">
                 暂无分支 — 重新生成回复后，旧版本会保留在这里。
               </div>
             ) : (
@@ -159,7 +159,7 @@ export function ChatHeader({
                       setBranchMenuOpen(false);
                       setTreeModalOpen(true);
                     }}
-                    className="flex w-full items-center gap-2 rounded px-3 py-1.5 text-left text-xs text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
+                    className="flex w-full items-center gap-2 rounded px-2.5 py-1 text-left text-xs text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
                     data-action="branch-tree"
                   >
                     <LuListTree className="h-3 w-3 shrink-0" />
@@ -174,19 +174,14 @@ export function ChatHeader({
       : null;
 
   return (
-    <header className="flex w-full min-w-0 items-center gap-3 bg-agent-canvas px-3 py-2">
+    <header className="flex w-full min-w-0 items-center gap-2 bg-agent-canvas px-2.5 py-1.5">
       <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-0.5">
         <span
-          className="break-words text-sm font-medium text-agent-foreground"
+          className="break-words text-xs font-medium text-agent-foreground"
           title={chat?.title}
         >
           {chat?.title ?? '未选择对话'}
         </span>
-        {chat && (
-          <span className="hidden shrink-0 font-mono text-[10px] text-agent-muted-foreground/70 md:inline">
-            {shortenId(chat.id)}
-          </span>
-        )}
       </div>
       {chat && onBranchSwitched && (
         <div className="shrink-0">
@@ -367,11 +362,6 @@ function taskButtonTitle(
     : `${base} · 点击处理 worktree`;
 }
 
-function shortenId(id: string): string {
-  if (id.length <= 12) return id;
-  return `${id.slice(0, 6)}…${id.slice(-4)}`;
-}
-
 /** Pin the branch menu to the trigger, clamped inside the chat panel so
  *  `overflow-hidden` ancestors cannot clip the left side of a `w-72` sheet. */
 function placeBranchMenu(button: HTMLElement): { top: number; left: number; width: number } {
@@ -403,7 +393,7 @@ function BranchRow({
       onClick={onSelect}
       aria-current={active ? 'true' : undefined}
       aria-disabled={disabled || active || undefined}
-      className={`flex w-full items-center gap-2 rounded px-3 py-1.5 text-left text-xs transition-colors ${
+      className={`flex w-full items-center gap-2 rounded px-2.5 py-1 text-left text-xs transition-colors ${
         active
           ? 'cursor-default bg-agent-foreground/5 font-medium text-agent-foreground'
           : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground'

package/src/components/LocalLlmSettingsModal.tsx

@@ -42,8 +42,8 @@ export function LocalLlmSettingsModal({ open, onClose, onSaved }: LocalLlmSettin
       <div
         className="flex h-[560px] max-h-[90vh] w-[540px] max-w-[92vw] flex-col overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas shadow-2xl animate-fade-in"
       >
-        <div className="flex h-12 flex-shrink-0 items-center justify-between border-b border-agent-border px-5">
-          <h2 className="text-sm font-semibold text-agent-foreground">本地模型设置</h2>
+        <div className="flex h-9 flex-shrink-0 items-center justify-between border-b border-agent-border px-3">
+          <h2 className="text-xs font-semibold text-agent-foreground">本地模型设置</h2>
           <button
             type="button"
             onClick={onClose}
@@ -53,14 +53,14 @@ export function LocalLlmSettingsModal({ open, onClose, onSaved }: LocalLlmSettin
             <LuX className="h-4 w-4" />
           </button>
         </div>
-        <div className="flex-1 overflow-y-auto p-5">
+        <div className="flex-1 overflow-y-auto p-3">
           <LlmSettingsPanel onSaved={onSaved} />
         </div>
-        <div className="flex h-12 flex-shrink-0 items-center justify-end border-t border-agent-border px-5 bg-agent-muted/10">
+        <div className="flex h-9 flex-shrink-0 items-center justify-end border-t border-agent-border px-3 bg-agent-muted/10">
           <button
             type="button"
             onClick={onClose}
-            className="h-8 rounded-full px-4 text-xs font-medium text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-foreground"
+            className="h-7 rounded-full px-3 text-xs font-medium text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-foreground"
           >
             关闭
           </button>

package/src/components/TerminalPanel.tsx

@@ -40,7 +40,7 @@ export function TerminalPanel({
   }
   if (!hasElectron) {
     return (
-      <div className="flex h-full w-full items-center justify-center bg-black p-6 text-center font-mono text-sm text-white">
+      <div className="flex h-full w-full items-center justify-center bg-black p-4 text-center font-mono text-xs text-white">
         <div>
           <p className="mb-2">⚠️ 此面板需要桌面客户端或 BS server 连接。</p>
           <p className="text-white/60">

package/src/components/chat/ApprovalModal.tsx

@@ -106,17 +106,17 @@ export function ApprovalPromptMenu({
 
   return (
     <div
-      className="overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas text-sm text-agent-foreground shadow-xl"
+      className="overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas text-xs text-agent-foreground shadow-xl"
       data-testid="approval-composer"
     >
-        <div className="flex items-center gap-2 border-b border-agent-border px-4 py-3">
+        <div className="flex items-center gap-2 border-b border-agent-border px-3 py-2">
           {destructive ? (
             <LuTriangleAlert className="h-4 w-4 shrink-0 text-agent-destructive" />
           ) : (
             <LuShieldAlert className="h-4 w-4 shrink-0 text-amber-500" />
           )}
           <div className="min-w-0 flex-1">
-            <div className="text-sm font-medium text-agent-foreground">
+            <div className="text-xs font-medium text-agent-foreground">
               {isEgress ? (
                 <>
                   Agent 请求访问外网
@@ -143,7 +143,7 @@ export function ApprovalPromptMenu({
           </div>
         </div>
 
-        <div className="max-h-48 overflow-auto px-4 py-3">
+        <div className="max-h-48 overflow-auto px-3 py-2">
           <pre className="whitespace-pre-wrap break-all rounded-agent-md bg-agent-muted/50 px-3 py-2 font-mono text-xs text-agent-foreground">
             {summarizeArguments(current.arguments)}
           </pre>
@@ -169,7 +169,7 @@ export function ApprovalPromptMenu({
           )}
         </div>
 
-        <div className="space-y-2 border-t border-agent-border px-4 py-3">
+        <div className="space-y-2 border-t border-agent-border px-3 py-2">
           <DecisionRow
             buttons={
               isEgress

package/src/components/chat/AskUserQuestionMenu.tsx

@@ -120,7 +120,7 @@ function Footer({
   children?: React.ReactNode;
 }) {
   return (
-    <div className="mt-4 flex items-center justify-between gap-3 border-t border-agent-border px-4 py-3">
+    <div className="mt-3 flex items-center justify-between gap-2 border-t border-agent-border px-3 py-2">
       <div className="flex min-w-0 items-center gap-2">
         {canGoBack && onBack && (
           <button
@@ -279,7 +279,7 @@ function SelectQuestionStep({
         role={question.multiSelect ? 'checkbox' : 'radio'}
         aria-checked={active}
         className={[
-          'flex w-full items-center gap-2 rounded-agent-md border px-3 py-2 text-left text-sm transition',
+          'flex w-full items-center gap-2 rounded-agent-md border px-3 py-2 text-left text-xs transition',
           active
             ? 'border-agent-foreground bg-agent-muted text-agent-foreground'
             : 'border-agent-border bg-agent-canvas text-agent-foreground hover:bg-agent-muted',
@@ -335,7 +335,7 @@ function SelectQuestionStep({
         role={question.multiSelect ? 'checkbox' : 'radio'}
         aria-checked={active}
         className={[
-          'flex w-full items-center gap-2 rounded-agent-md border border-dashed px-3 py-2 text-left text-sm transition',
+          'flex w-full items-center gap-2 rounded-agent-md border border-dashed px-3 py-2 text-left text-xs transition',
           active
             ? 'border-agent-foreground bg-agent-muted text-agent-foreground'
             : 'border-agent-border bg-agent-canvas text-agent-muted-foreground hover:bg-agent-muted hover:text-agent-foreground',
@@ -359,13 +359,13 @@ function SelectQuestionStep({
 
   return (
     <div>
-      <div className="space-y-2 px-4 py-3">
+      <div className="space-y-2 px-3 py-2">
         {question.header && (
           <p className="text-[11px] font-medium uppercase tracking-wide text-agent-muted-foreground">
             {question.header}
           </p>
         )}
-        <p className="text-sm font-medium text-agent-foreground">{question.text}</p>
+        <p className="text-xs font-medium text-agent-foreground">{question.text}</p>
         {question.detail && (
           <p className="whitespace-pre-line text-xs text-agent-muted-foreground">
             {question.detail}
@@ -396,7 +396,7 @@ function SelectQuestionStep({
               }
             }}
             placeholder={question.placeholder || '输入你的补充...'}
-            className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 text-sm text-agent-foreground outline-none placeholder:text-agent-muted-foreground focus:border-agent-foreground focus:ring-1 focus:ring-agent-foreground"
+            className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 text-xs text-agent-foreground outline-none placeholder:text-agent-muted-foreground focus:border-agent-foreground focus:ring-1 focus:ring-agent-foreground"
           />
         )}
 
@@ -414,7 +414,7 @@ function SelectQuestionStep({
                 }
               }}
               placeholder={question.placeholder || '输入你的回答...'}
-              className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 text-sm text-agent-foreground outline-none placeholder:text-agent-muted-foreground focus:border-agent-foreground focus:ring-1 focus:ring-agent-foreground"
+              className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 text-xs text-agent-foreground outline-none placeholder:text-agent-muted-foreground focus:border-agent-foreground focus:ring-1 focus:ring-agent-foreground"
             />
             <button
               type="button"
@@ -488,13 +488,13 @@ function TextQuestionStep({
 
   return (
     <div>
-      <div className="space-y-2 px-4 py-3">
+      <div className="space-y-2 px-3 py-2">
         {question.header && (
           <p className="text-[11px] font-medium uppercase tracking-wide text-agent-muted-foreground">
             {question.header}
           </p>
         )}
-        <p className="text-sm font-medium text-agent-foreground">{question.text}</p>
+        <p className="text-xs font-medium text-agent-foreground">{question.text}</p>
         {question.detail && (
           <p className="whitespace-pre-line text-xs text-agent-muted-foreground">
             {question.detail}
@@ -512,7 +512,7 @@ function TextQuestionStep({
             }
           }}
           placeholder={question.placeholder || '输入你的回答...'}
-          className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 text-sm text-agent-foreground outline-none placeholder:text-agent-muted-foreground focus:border-agent-foreground focus:ring-1 focus:ring-agent-foreground"
+          className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 text-xs text-agent-foreground outline-none placeholder:text-agent-muted-foreground focus:border-agent-foreground focus:ring-1 focus:ring-agent-foreground"
         />
       </div>
 
@@ -577,10 +577,10 @@ export function AskUserQuestionMenu({
   if (!current) return null;
 
   return (
-    <div className="overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas text-sm text-agent-foreground shadow-xl">
-      <div className="flex items-start justify-between gap-3 border-b border-agent-border px-4 py-3">
+    <div className="overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas text-xs text-agent-foreground shadow-xl">
+      <div className="flex items-start justify-between gap-2 border-b border-agent-border px-3 py-2">
         <div className="min-w-0 flex-1">
-          <p className="text-sm font-medium text-agent-foreground">
+          <p className="text-xs font-medium text-agent-foreground">
             {intro || '需要你的输入'}
           </p>
           <p className="mt-0.5 text-[11px] text-agent-muted-foreground">

package/src/components/chat/AssistantMessage.tsx

@@ -13,6 +13,12 @@ import type { TurnBlock } from './turn-timeline';
 import { TurnProcessGroup } from './TurnProcessGroup';
 import { TurnFilesCard } from './TurnFilesCard';
 import type { TurnFile } from './turn-files';
+import { stripNextStepsTags } from './next-steps-tags';
+import {
+  formatTokenSpeed,
+  llmRequestElapsedMs,
+  type LlmSpeedSnapshot,
+} from './process-status';
 
 /**
  * AssistantMessage — Tier-1 port of `deeppath`'s assistant-bubble.
@@ -98,6 +104,12 @@ interface AssistantMessageProps {
   startedAtMs?: number;
   /** Frozen wall-clock of a finished turn. */
   durationMs?: number;
+  /**
+   * Model-request generation speed (reasoning + reply + any other LLM
+   * output). Elapsed excludes tool waits. Live snapshots keep ticking
+   * while `live` is true.
+   */
+  llmSpeed?: LlmSpeedSnapshot;
   /**
    * 本回合产生/修改的文件列表（local-backend 回合收尾时收集，经
    * `turn_files` SSE + messageMetadata.turnFiles 持久化）。渲染在回答
@@ -152,11 +164,7 @@ const META_ACTION =
   'inline-flex items-center gap-0.5 rounded transition-all duration-200 hover:text-agent-foreground opacity-0 focus:opacity-100 group-hover/message:opacity-100';
 
 function bubbleClass(isPlanMode: boolean): string {
-  return `rounded-agent-lg border p-3 shadow-sm transition-all duration-200 ${
-    isPlanMode
-      ? 'border-amber-400/50 dark:border-amber-500/30 bg-amber-50/10 dark:bg-amber-950/5 shadow-amber-500/5'
-      : 'border-agent-border bg-agent-canvas'
-  }`;
+  return isPlanMode ? 'rounded-agent-lg bg-amber-50/10 dark:bg-amber-950/5' : '';
 }
 
 // 框架 useChatStream 收到 SSE error 事件时把最后一条助手消息的内容打成
@@ -194,7 +202,7 @@ function readTurnFailure(
 
 function TurnErrorBubble({ reason }: { reason: string }) {
   return (
-    <div className="rounded-agent-lg border border-agent-destructive/40 bg-agent-destructive/5 p-3 text-sm leading-relaxed text-agent-destructive shadow-sm">
+    <div className="rounded-agent-lg border border-agent-destructive/40 bg-agent-destructive/5 px-2.5 py-2 text-xs leading-relaxed text-agent-destructive shadow-sm">
       请求失败：{reason}
     </div>
   );
@@ -206,6 +214,17 @@ function StreamingCursor() {
   );
 }
 
+function useLiveNow(enabled: boolean): number {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!enabled) return;
+    setNow(Date.now());
+    const id = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, [enabled]);
+  return now;
+}
+
 export function AssistantMessage({
   message,
   isStreaming,
@@ -221,6 +240,7 @@ export function AssistantMessage({
   onRegenerate,
   startedAtMs,
   durationMs,
+  llmSpeed,
   turnFiles,
   onShare,
 }: AssistantMessageProps) {
@@ -229,7 +249,7 @@ export function AssistantMessage({
   // live 错误文本（"[stream error] ..."）不当正文渲染；落库的失败回合可能
   // 留有部分正文，此时正文与错误气泡都展示。
   const displayContent = failure?.contentIsError ? '' : content;
-  const { copied, copy } = useCopy(content);
+  const { copied, copy } = useCopy(stripNextStepsTags(content));
   const [regenerating, setRegenerating] = useState(false);
   const [regenerateError, setRegenerateError] = useState<string | null>(null);
   const persistedAgent = message.agentId
@@ -240,10 +260,15 @@ export function AssistantMessage({
   const displayAgent = persistedAgent ?? (isStreaming ? currentAgent : null);
   const useTimeline = timeline !== undefined;
   const blocks = timeline ?? [];
+  const now = useLiveNow(Boolean(isStreaming && llmSpeed?.live));
+  const tokenSpeed = formatTokenSpeed(
+    llmSpeed?.tokens ?? 0,
+    llmRequestElapsedMs(llmSpeed, now),
+  );
 
   return (
     <motion.div
-      className="group/message mb-2"
+      className="group/message mb-1"
       data-message-role="assistant"
       data-message-id={message.id}
       initial={{ opacity: 0, y: 8 }}
@@ -252,7 +277,7 @@ export function AssistantMessage({
     >
       <div className="mx-auto w-full max-w-[var(--chat-input-box-width)] px-1">
         {(displayAgent || isPlanMode) && (
-          <div className="flex items-center justify-between mb-1.5 min-h-[18px]">
+          <div className="mb-1 flex min-h-4 items-center justify-between">
             {displayAgent ? (
               <AgentBadge agent={displayAgent} isStreaming={isStreaming} />
             ) : (
@@ -291,7 +316,7 @@ export function AssistantMessage({
                   />
                 </div>
               ) : (
-                <div className={`${bubbleClass(isPlanMode)} text-sm italic text-agent-muted-foreground`}>
+                <div className={`${bubbleClass(isPlanMode)} text-xs italic text-agent-muted-foreground`}>
                   (空消息)
                 </div>
               )
@@ -305,7 +330,7 @@ export function AssistantMessage({
             }
             renderAnswer={(block, isLast) => (
               <div className={bubbleClass(isPlanMode)}>
-                <div className="markdown-content text-sm leading-relaxed text-agent-foreground">
+                <div className="markdown-content text-xs leading-relaxed text-agent-foreground">
                   <Markdown agents={agents} chats={chats} chatId={chatId}>{block.content}</Markdown>
                 </div>
                 {isStreaming && isLast && <StreamingCursor />}
@@ -327,7 +352,7 @@ export function AssistantMessage({
             )}
             {displayContent ? (
               <div className={bubbleClass(isPlanMode)}>
-                <div className="markdown-content text-sm leading-relaxed text-agent-foreground">
+                <div className="markdown-content text-xs leading-relaxed text-agent-foreground">
                   <Markdown agents={agents} chats={chats} chatId={chatId}>{displayContent}</Markdown>
                 </div>
                 {isStreaming && <StreamingCursor />}
@@ -343,7 +368,7 @@ export function AssistantMessage({
                 />
               </div>
             ) : (
-              <div className={`${bubbleClass(isPlanMode)} text-sm italic text-agent-muted-foreground`}>
+              <div className={`${bubbleClass(isPlanMode)} text-xs italic text-agent-muted-foreground`}>
                 (空消息)
               </div>
             )}
@@ -367,6 +392,9 @@ export function AssistantMessage({
               ? getFriendlyDate(new Date(message.createdAt))
               : ''}
           </span>
+          {tokenSpeed ? (
+            <span data-testid="turn-token-speed">{tokenSpeed}</span>
+          ) : null}
           {content && !isStreaming && (
             <button
               type="button"