@steerable/agent-shell-web 0.6.27 → 0.6.29

package/src/components/chat/AssistantMessage.tsx

@@ -5,7 +5,9 @@ import type { ChatMessage } from '@steerable/agent-protocol';
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
 import { Markdown } from './Markdown';
 import { ExecutedActionsCard, type ExecutedAction } from './ExecutedActionsCard';
-import { OrchestrationChildrenCard, type ChildInfo } from './OrchestrationChildrenCard';
+import type { ChildInfo } from './OrchestrationChildrenCard';
+import { collectTurnParticipants, extractMentionedAgentIds } from './executed-actions-model';
+import type { InspectTaskInput } from './executed-actions-model';
 import { StreamingStatus } from './StreamingStatus';
 import { getFriendlyDate } from './timestamp';
 import { useCopy } from './useCopy';
@@ -13,6 +15,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.
@@ -77,8 +85,15 @@ interface AssistantMessageProps {
    * `content` keep the legacy stacked layout.
    */
   timeline?: TurnBlock[];
-  /** P3.1: live child-agent list for this turn (orchestration card). */
+  /**
+   * P3.1 子代理生命周期。看板卡片已不再渲染——每个 `委派 · X` 工具行从
+   * 「执行中」到「已完成」本身就是同一份进度，还能展开看任务书与回报。
+   * 这份列表现在喂两处：顶栏参与者徽章（没有 `@提及` 时的回落来源），
+   * 以及委派行跳转右侧过程栏所需的子代理 record。
+   */
   orchestrationChildren?: ChildInfo[];
+  /** 上一轮用户消息：顶栏按里面的 `@提及` 画参与的智能体。 */
+  previousUser?: Pick<ChatMessage, 'content'> & { messageMetadata?: string | null };
   /**
    * Current round number for the in-flight turn (1-based). Only meaningful
    * when `isStreaming === true` and this is the tail message — used by
@@ -98,6 +113,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 持久化）。渲染在回答
@@ -109,37 +130,42 @@ interface AssistantMessageProps {
    * 行上，跟复制 / 重新生成同一排。
    */
   onShare?: () => Promise<boolean>;
+  onInspectTask?: (task: InspectTaskInput) => void;
 }
 
-function agentInitial(agent: LocalChatAgent | null): string {
-  if (!agent?.name) return 'A';
-  return agent.name.trim()[0]?.toUpperCase() ?? 'A';
+function agentInitial(name: string): string {
+  return name.trim()[0]?.toUpperCase() ?? 'A';
 }
 
 function AgentBadge({
-  agent,
+  name,
+  color,
+  title,
   isStreaming,
 }: {
-  agent: LocalChatAgent;
-  isStreaming: boolean;
+  name: string;
+  color: string;
+  title?: string;
+  isStreaming?: boolean;
 }) {
   return (
     <div
       className="inline-flex items-center gap-1.5 text-[11px] leading-none text-agent-muted-foreground"
-      title={agent.description || agent.name}
+      title={title || name}
     >
       <span
+        data-agent-color-dot=""
         className="inline-flex items-center justify-center rounded-full text-[9px] font-semibold text-white"
         style={{
           width: 14,
           height: 14,
-          backgroundColor: agent.color || '#7c3aed',
+          backgroundColor: color,
         }}
       >
-        {agentInitial(agent)}
+        {agentInitial(name)}
       </span>
       <span className="max-w-[160px] truncate rounded bg-agent-canvas/90 px-1">
-        {agent.name}
+        {name}
       </span>
       {isStreaming && (
         <span className="ml-1 inline-flex h-1.5 w-1.5 animate-pulse rounded-full bg-agent-foreground/30" />
@@ -152,11 +178,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 事件时把最后一条助手消息的内容打成
@@ -192,9 +214,20 @@ function readTurnFailure(
   return null;
 }
 
+function readPersistedAgentId(message: ChatMessage): string | undefined {
+  const raw = (message as { messageMetadata?: unknown }).messageMetadata;
+  if (typeof raw !== 'string' || !raw) return undefined;
+  try {
+    const agentId = (JSON.parse(raw) as { agentId?: unknown }).agentId;
+    return typeof agentId === 'string' && agentId ? agentId : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 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 +239,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,
@@ -216,34 +260,56 @@ export function AssistantMessage({
   executedActions,
   timeline,
   orchestrationChildren,
+  previousUser,
   currentRound = 1,
   isPlanMode = false,
   onRegenerate,
   startedAtMs,
   durationMs,
+  llmSpeed,
   turnFiles,
   onShare,
+  onInspectTask,
 }: AssistantMessageProps) {
   const content = message.content || '';
   const failure = readTurnFailure(message, content);
   // 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
-    ? agents.find((a) => a.id === message.agentId) ?? null
+  const persistedAgentId =
+    typeof message.agentId === 'string' && message.agentId
+      ? message.agentId
+      : readPersistedAgentId(message);
+  const persistedAgent = persistedAgentId
+    ? agents.find((a) => a.id === persistedAgentId) ?? null
     : null;
   // Stream-time fallback: only allow the chat-level agent to "claim" a turn
   // while it's actively streaming and hasn't flushed agentId to the DB yet.
   const displayAgent = persistedAgent ?? (isStreaming ? currentAgent : null);
   const useTimeline = timeline !== undefined;
   const blocks = timeline ?? [];
+  const toolActions = [
+    ...(executedActions ?? []),
+    ...blocks.flatMap((block) => (block.type === 'tools' ? block.actions : [])),
+  ];
+  const participants = collectTurnParticipants(displayAgent, {
+    agents,
+    children: orchestrationChildren,
+    actions: toolActions,
+    mentionedAgentIds: extractMentionedAgentIds(previousUser, agents),
+  });
+  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"
       data-message-role="assistant"
       data-message-id={message.id}
       initial={{ opacity: 0, y: 8 }}
@@ -251,10 +317,22 @@ export function AssistantMessage({
       transition={{ duration: 0.25 }}
     >
       <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]">
-            {displayAgent ? (
-              <AgentBadge agent={displayAgent} isStreaming={isStreaming} />
+        {(participants.length > 0 || isPlanMode) && (
+          <div className="mb-1 flex min-h-4 items-center justify-between gap-2">
+            {participants.length > 0 ? (
+              <div
+                data-testid="turn-agent-badges"
+                className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1"
+              >
+                {participants.map((agent, index) => (
+                  <AgentBadge
+                    key={agent.key}
+                    name={agent.name}
+                    color={agent.color}
+                    isStreaming={isStreaming && index === 0}
+                  />
+                ))}
+              </div>
             ) : (
               <div />
             )}
@@ -266,9 +344,6 @@ export function AssistantMessage({
             )}
           </div>
         )}
-        {orchestrationChildren && orchestrationChildren.length > 0 && (
-          <OrchestrationChildrenCard children={orchestrationChildren} />
-        )}
         {useTimeline ? (
           <>
           <TurnProcessGroup
@@ -279,6 +354,8 @@ export function AssistantMessage({
             agents={agents}
             chats={chats}
             chatId={chatId}
+            onInspectTask={onInspectTask}
+            orchestrationChildren={orchestrationChildren}
             emptyFallback={
               failure ? (
                 <TurnErrorBubble reason={failure.reason} />
@@ -291,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>
               )
@@ -305,7 +382,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 />}
@@ -323,11 +400,17 @@ export function AssistantMessage({
         ) : (
           <>
             {executedActions && executedActions.length > 0 && (
-              <ExecutedActionsCard actions={executedActions} />
+              <ExecutedActionsCard
+                actions={executedActions}
+                agents={agents}
+                chatId={chatId}
+                onInspectTask={onInspectTask}
+                orchestrationChildren={orchestrationChildren}
+              />
             )}
             {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 +426,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>
             )}
@@ -357,16 +440,19 @@ export function AssistantMessage({
         {/* 回合产物文件列表：钉在回答之下、时间戳行之上（Codex 式收尾）。
             回合收尾才有数据，流式期间天然为空。 */}
         {!isStreaming && turnFiles && turnFiles.length > 0 && (
-          <div className="mt-1.5">
+          <div className="mt-2.5 mb-1">
             <TurnFilesCard files={turnFiles} />
           </div>
         )}
-        <div className="mt-1 flex items-center gap-2 text-[11px] text-agent-muted-foreground">
+        <div className="mt-2 flex items-center gap-2 text-[11px] text-agent-muted-foreground/80">
           <span>
             {message.createdAt
               ? getFriendlyDate(new Date(message.createdAt))
               : ''}
           </span>
+          {tokenSpeed ? (
+            <span data-testid="turn-token-speed">{tokenSpeed}</span>
+          ) : null}
           {content && !isStreaming && (
             <button
               type="button"

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;
@@ -141,6 +141,8 @@ export interface ChatInputProps {
   /** Slot in the composer meta row above the input box, before the agent
    * picker (e.g. the project badge). */
   leadingChrome?: ReactNode;
+  /** Slot in the composer meta row above the input box, right-aligned (e.g. SessionTodoList). */
+  trailingChrome?: ReactNode;
   /** Current chat mode. When unset the toggle is hidden (defaults to 'agent'). */
   mode?: ChatMode;
   /** Called when the user switches between Agent / Plan mode. */
@@ -696,6 +698,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       onOpenSettings,
       toolbarExtras,
       leadingChrome,
+      trailingChrome,
       mode,
       onModeChange,
       execPolicy,
@@ -1512,7 +1515,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 +1530,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,10 +1552,10 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     return (
       // @container：底栏元素的显隐/宽度用容器查询（@sm = 384px）而不是
       // 视口断点——侧边栏占宽后，视口够宽但输入框本身可能已经很窄。
-      <div className="chat-input-container @container relative px-3 pb-3 pt-1">
-        {(leadingChrome || selectedAgent) && (
+      <div className="chat-input-container @container relative px-2.5 pb-2.5 pt-1">
+        {(leadingChrome || selectedAgent || trailingChrome) && (
           <div
-            className="relative mb-1 flex min-w-0 items-center gap-1.5"
+            className="relative mb-1.5 flex min-w-0 items-center gap-1.5"
             data-testid="composer-meta-row"
           >
             {leadingChrome}
@@ -1568,6 +1571,11 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 mentionReferences={mentionReferences}
               />
             )}
+            {trailingChrome && (
+              <div className="ml-auto flex items-center min-w-0">
+                {trailingChrome}
+              </div>
+            )}
           </div>
         )}
         {mentionQuery && mentionSuggestions.length > 0 && (
@@ -1712,7 +1720,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 +1747,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 +1777,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 +1785,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 +1810,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 +1835,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 +1855,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 +1929,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 +1945,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 +1979,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 +1993,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 +2011,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">