@steerable/agent-shell-web 0.6.27 → 0.6.29

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

@@ -15,11 +15,13 @@ import { InterruptedTurnCard } from './InterruptedTurnCard';
 import { TaskOutcomeCards } from './TaskOutcomeCards';
 import { SuggestedReplies } from './SuggestedReplies';
 import type { ExecutedAction } from './ExecutedActionsCard';
+import type { InspectTaskInput } from './executed-actions-model';
 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';
+import type { LlmSpeedSnapshot } from './process-status';
 
 /**
  * MessageList — scrolling viewport that renders user/assistant message
@@ -80,6 +82,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 水合）。
@@ -129,7 +135,7 @@ interface MessageListProps {
    */
   finishedTasks?: LocalTask[];
   /** 点「查看过程」：在右侧栏打开该任务的推理过程。 */
-  onInspectTask?: (task: LocalTask) => void;
+  onInspectTask?: (task: InspectTaskInput) => void;
   /** 点「忽略」：隐藏这条终态通知（本次挂载内，不落库）。 */
   onDismissFinishedTask?: (taskId: string) => void;
   /** 分享当前对话（截图）。只画在最近一条助手消息的时间戳行上。 */
@@ -155,6 +161,8 @@ export function MessageList({
   currentTurnTimeline,
   currentTurnStartedAtMs,
   durationByMessageId,
+  currentLlmSpeed,
+  llmSpeedByMessageId,
   turnFilesByMessageId,
   currentTurnFiles,
   currentTurnChildren,
@@ -241,12 +249,12 @@ export function MessageList({
     <div className="relative flex-1 overflow-hidden">
       <div
         ref={containerRef}
-        className="h-full overflow-y-auto overflow-anchor-none px-3 py-3"
+        className="h-full overflow-y-auto overflow-anchor-none px-3 pt-3 pb-6"
       >
         {visibleMessages.length === 0 ? (
           emptyState ?? null
         ) : (
-          <div className="mx-auto w-full space-y-1.5">
+          <div className="mx-auto w-full max-w-3xl space-y-4">
             {visibleMessages.map((message, index) => {
               const isLast = index === visibleMessages.length - 1;
               if (message.role === 'user') {
@@ -299,10 +307,12 @@ export function MessageList({
                 typeof message.messageMetadata === 'string'
                   ? message.messageMetadata
                   : undefined;
+              let previousUser: ChatMessage | undefined;
               let previousUserCreatedAt: string | undefined;
               for (let i = index - 1; i >= 0; i -= 1) {
                 if (visibleMessages[i].role === 'user') {
-                  previousUserCreatedAt = visibleMessages[i].createdAt;
+                  previousUser = visibleMessages[i];
+                  previousUserCreatedAt = previousUser.createdAt;
                   break;
                 }
               }
@@ -311,6 +321,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}>
@@ -324,13 +339,16 @@ export function MessageList({
                     executedActions={actions}
                     timeline={turnTimeline}
                     orchestrationChildren={childList}
+                    previousUser={previousUser}
                     currentRound={isStreamingTail ? currentRound : undefined}
                     isPlanMode={isPlanMode}
                     onRegenerate={onRegenerate}
                     startedAtMs={isStreamingTail ? currentTurnStartedAtMs : undefined}
                     durationMs={durationMs}
+                    llmSpeed={llmSpeed}
                     turnFiles={turnFiles}
                     onShare={message.id === lastAssistantId ? onShare : undefined}
+                    onInspectTask={onInspectTask}
                   />
                   {!isStreaming &&
                   message.id === lastAssistantId &&
@@ -376,7 +394,7 @@ export function MessageList({
             setIsAtBottom(true);
             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"
+          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="回到底部"
         >

package/src/components/chat/ModelPicker.tsx

@@ -117,7 +117,7 @@ export function ModelPicker({
             if (next && status !== 'live' && !loading) void refresh();
           }}
           disabled={disabled}
-          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]"
+          className="inline-flex h-6 min-w-0 max-w-[160px] items-center gap-1 rounded-full border border-agent-border bg-agent-canvas px-1.5 text-[12px] leading-[1.45] 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}` : ''}（仍可手动指定模型）`
@@ -165,7 +165,7 @@ export function ModelPicker({
                 setModelMenuOpen(false);
               }}
               className={[
-                'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors',
+                'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-[12px] leading-[1.45] transition-colors',
                 model == null
                   ? 'bg-agent-foreground/10 text-agent-foreground'
                   : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
@@ -192,7 +192,7 @@ export function ModelPicker({
                     setModelMenuOpen(false);
                   }}
                   className={[
-                    'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors',
+                    'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-[12px] leading-[1.45] transition-colors',
                     isActive
                       ? 'bg-agent-foreground/10 text-agent-foreground'
                       : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
@@ -232,7 +232,7 @@ export function ModelPicker({
               setModelMenuOpen(false);
             }}
             disabled={disabled}
-            className="inline-flex h-7 items-center gap-1 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"
+            className="inline-flex h-6 items-center gap-1 rounded-full border border-agent-border bg-agent-canvas px-1.5 text-[12px] leading-[1.45] text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-70"
             title="推理档位（随每轮请求下发；模型不支持会直接报错）"
             aria-haspopup="menu"
             aria-expanded={effortMenuOpen}
@@ -253,7 +253,7 @@ export function ModelPicker({
                   setEffortMenuOpen(false);
                 }}
                 className={[
-                  'flex w-full rounded px-2 py-1.5 text-left text-xs transition-colors',
+                  'flex w-full rounded px-2 py-1.5 text-left text-[12px] leading-[1.45] transition-colors',
                   reasoningEffort == null
                     ? 'bg-agent-foreground/10 text-agent-foreground'
                     : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
@@ -271,7 +271,7 @@ export function ModelPicker({
                     setEffortMenuOpen(false);
                   }}
                   className={[
-                    'flex w-full rounded px-2 py-1.5 text-left text-xs transition-colors',
+                    'flex w-full rounded px-2 py-1.5 text-left text-[12px] leading-[1.45] transition-colors',
                     reasoningEffort === level
                       ? 'bg-agent-foreground/10 text-agent-foreground'
                       : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',

package/src/components/chat/OrchestrationChildrenCard.tsx

@@ -1,9 +1,16 @@
 import { useMemo } from 'react';
-import { OrchestrationPlanCard } from '@steerable/agent-ui/cards';
+import {
+  OrchestrationPlanCard,
+  ORCHESTRATION_DOT_CLASS,
+  ORCHESTRATION_STATUS_LABEL,
+} from '@steerable/agent-ui/cards';
 import {
   childrenToCardModel,
+  findAgentForProfile,
+  shouldShowOrchestrationBoard,
   type ChildInfo,
 } from './orchestration-children-model';
+import type { LocalChatAgent } from '@/lib/local-api';
 
 /**
  * OrchestrationChildrenCard — the desktop surface of the framework's P3.1
@@ -13,25 +20,82 @@ import {
  * payload is synthesized from spawn events, so there is no separate "plan"
  * step: the plan IS the set of spawned children.
  *
+ * Rows are overridden (`renderTaskRow`) to add the agent's colored initial
+ * next to its display name, matching the `@提及` chip in the composer and in
+ * user bubbles. Status labels and dot colors come from the card's own
+ * exported tables so the two surfaces cannot drift.
+ *
  * The mapping logic lives in `./orchestration-children-model` (pure,
  * runtime-dependency-free) so node-side tests do not pull the agent-ui
- * dist build.
+ * dist build. A single delegate child is not rendered here: the tool row
+ * already shows 「委派 ·」.
+ *
+ * **Currently unmounted.** Nothing renders this card: every child is a
+ * `delegate_subagent` call, and that tool row carries the same progress
+ * (执行中 → 已完成) plus the expandable task brief and the child's report.
+ * `ChildInfo` and the event fold stay in use — they feed the turn's agent
+ * badges — so putting the board back is one JSX line in `AssistantMessage`.
  */
 
 export type { ChildInfo } from './orchestration-children-model';
 
-export function OrchestrationChildrenCard({ children }: { children: ChildInfo[] }) {
+export function OrchestrationChildrenCard({
+  children,
+  agents = [],
+}: {
+  children: ChildInfo[];
+  agents?: ReadonlyArray<Pick<LocalChatAgent, 'id' | 'slug' | 'name' | 'color'>>;
+}) {
   const { payload, taskStatuses } = useMemo(
     () => childrenToCardModel(children),
     [children],
   );
+  const delegateOnly = children.every((child) => Boolean(child.profile));
 
-  if (children.length === 0) return null;
+  if (!shouldShowOrchestrationBoard(children)) return null;
   return (
     <OrchestrationPlanCard
       payload={payload}
       taskStatuses={taskStatuses}
-      agentNameFor={(id) => id}
+      headerLabel={delegateOnly ? '子代理' : undefined}
+      hideMode={delegateOnly}
+      renderTaskRow={(task, status) => {
+        // 没有匹配的智能体：编排六件套的子代理（只有 lineage id）或被删掉的
+        // 智能体，显示画像原文。
+        const agent = findAgentForProfile(task.agentId, agents);
+        const displayName = agent?.name ?? task.agentId;
+        return (
+          <li className="flex items-start gap-2 text-sm">
+            <span
+              className={`mt-1.5 h-2 w-2 flex-shrink-0 rounded-full ${ORCHESTRATION_DOT_CLASS[status]}`}
+              aria-hidden
+            />
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <span
+                  data-agent-color-dot=""
+                  className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full text-[8px] font-semibold text-white"
+                  style={{ backgroundColor: agent?.color || '#7c3aed' }}
+                  aria-hidden
+                >
+                  {displayName.trim()[0]?.toUpperCase() ?? 'A'}
+                </span>
+                <span className="font-medium text-[var(--agent-foreground,#111827)]">
+                  {displayName}
+                </span>
+                <span className="text-xs text-[var(--agent-muted-foreground,#6b7280)]">
+                  {ORCHESTRATION_STATUS_LABEL[status]}
+                </span>
+              </div>
+              {task.prompt ? (
+                <p className="mt-0.5 line-clamp-2 text-xs text-[var(--agent-muted-foreground,#6b7280)]">
+                  {task.prompt}
+                </p>
+              ) : null}
+            </div>
+          </li>
+        );
+      }}
       defaultExpanded
     />
   );

package/src/components/chat/SessionTodoList.tsx

@@ -0,0 +1,234 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  LuCircle,
+  LuCircleCheck,
+  LuCircleDot,
+  LuChevronDown,
+  LuListChecks,
+  LuLoaderCircle,
+  LuX,
+} from 'react-icons/lu';
+import {
+  summarizeTodos,
+  type SessionTodo,
+  type TodoStatus,
+} from './todo-list-model';
+
+function StatusIcon({
+  status,
+  className,
+}: {
+  status: TodoStatus;
+  className?: string;
+}) {
+  const cls = ['h-3.5 w-3.5 shrink-0', className].filter(Boolean).join(' ');
+  if (status === 'completed') {
+    return <LuCircleCheck className={`${cls} text-emerald-600 dark:text-emerald-400`} />;
+  }
+  if (status === 'in_progress') {
+    return <LuCircleDot className={`${cls} text-blue-600 dark:text-blue-400`} />;
+  }
+  return <LuCircle className={`${cls} text-agent-muted-foreground/70`} />;
+}
+
+export function currentTodoStep(todos: SessionTodo[]): SessionTodo | null {
+  return (
+    todos.find((todo) => todo.status === 'in_progress') ??
+    todos.find((todo) => todo.status === 'pending') ??
+    todos[todos.length - 1] ??
+    null
+  );
+}
+
+export function todoProgressCopy(todos: SessionTodo[]): string {
+  const summary = summarizeTodos(todos);
+  if (summary.total === 0) return '';
+  if (summary.completed === summary.total) {
+    return `${summary.completed}/${summary.total} 已完成`;
+  }
+  const currentIndex = todos.findIndex((todo) => todo.status === 'in_progress');
+  const step =
+    currentIndex >= 0 ? currentIndex + 1 : Math.min(summary.completed + 1, summary.total);
+  return `执行到 ${step}/${summary.total}`;
+}
+
+export function TodoItems({
+  todos,
+  compact = false,
+}: {
+  todos: SessionTodo[];
+  compact?: boolean;
+}) {
+  return (
+    <ol
+      className={`m-0 list-none ${compact ? 'max-h-48 space-y-1 overflow-y-auto px-2.5 py-1.5' : 'space-y-1 px-2.5 py-1.5'}`}
+    >
+      {todos.map((todo) => {
+        const done = todo.status === 'completed';
+        const active = todo.status === 'in_progress';
+        return (
+          <li
+            key={todo.id}
+            data-testid={`todo-item-${todo.id}`}
+            data-status={todo.status}
+            className="flex items-start gap-2 text-[11px] leading-relaxed"
+          >
+            <StatusIcon status={todo.status} className="mt-[2px]" />
+            <span
+              className={
+                done
+                  ? 'text-agent-muted-foreground line-through'
+                  : active
+                    ? 'font-medium text-agent-foreground'
+                    : 'text-agent-muted-foreground/85'
+              }
+            >
+              {todo.content}
+            </span>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+export function SessionTodoList({ todos }: { todos: SessionTodo[] }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const current = useMemo(() => currentTodoStep(todos), [todos]);
+  const progressLabel = useMemo(() => todoProgressCopy(todos), [todos]);
+  
+  const hasActive = useMemo(
+    () => todos.some((t) => t.status === 'in_progress'),
+    [todos],
+  );
+  const isAllCompleted = useMemo(() => {
+    const summary = summarizeTodos(todos);
+    return summary.total > 0 && summary.completed === summary.total;
+  }, [todos]);
+
+  // 执行中默认展开，全部完成默认折叠；允许用户手动点击收起或展开
+  const [userToggled, setUserToggled] = useState<boolean | null>(null);
+  const expanded = userToggled ?? hasActive;
+
+  // 当任务全部执行完毕时，自动收起为紧凑胶囊
+  useEffect(() => {
+    if (isAllCompleted) {
+      setUserToggled(false);
+    }
+  }, [isAllCompleted]);
+
+  // 当新出现执行中的任务时，恢复默认展开
+  useEffect(() => {
+    if (hasActive) {
+      setUserToggled(null);
+    }
+  }, [hasActive]);
+
+  // 任务全部完成后，如果展开了浮层，点击外部区域时自动收起
+  useEffect(() => {
+    if (!expanded || !isAllCompleted) return;
+    const handlePointerDown = (event: PointerEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setUserToggled(false);
+      }
+    };
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => document.removeEventListener('pointerdown', handlePointerDown);
+  }, [expanded, isAllCompleted]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative inline-flex items-center"
+      data-testid="session-todo-list"
+    >
+      <button
+        type="button"
+        onClick={() => setUserToggled(!expanded)}
+        className={[
+          'flex h-6 max-w-[240px] sm:max-w-[320px] items-center gap-1.5 rounded-full px-2 text-left text-[11px] transition-all duration-200 select-none shadow-2xs',
+          isAllCompleted
+            ? 'border border-emerald-500/25 bg-emerald-500/[0.04] text-emerald-700 dark:text-emerald-300 hover:bg-emerald-500/[0.08]'
+            : hasActive
+              ? 'border border-blue-500/30 bg-blue-500/[0.06] text-blue-700 dark:text-blue-300 hover:bg-blue-500/10'
+              : 'border border-agent-border/80 bg-agent-canvas text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
+        ].join(' ')}
+        aria-expanded={expanded}
+      >
+        {isAllCompleted ? (
+          <LuCircleCheck className="h-3.5 w-3.5 shrink-0 text-emerald-600 dark:text-emerald-400" />
+        ) : hasActive ? (
+          <LuLoaderCircle className="h-3.5 w-3.5 shrink-0 animate-spin text-blue-600 dark:text-blue-400" />
+        ) : current ? (
+          <StatusIcon status={current.status} />
+        ) : (
+          <LuListChecks className="h-3.5 w-3.5 shrink-0 text-agent-foreground" />
+        )}
+        <span className="min-w-0 flex-1 truncate font-medium">
+          {isAllCompleted ? '任务清单' : (current?.content ?? '任务清单')}
+        </span>
+        {progressLabel ? (
+          <span
+            className={`shrink-0 rounded-full px-1.5 py-0.2 text-[10px] font-medium ${
+              isAllCompleted
+                ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+                : hasActive
+                  ? 'bg-blue-500/15 text-blue-700 dark:text-blue-300'
+                  : 'bg-agent-muted text-agent-muted-foreground'
+            }`}
+            data-testid="todo-progress"
+          >
+            {progressLabel}
+          </span>
+        ) : null}
+        <LuChevronDown
+          className={`h-3 w-3 shrink-0 text-current transition-transform duration-200 ${
+            expanded ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+
+      {expanded && (
+        <div
+          className="absolute bottom-full right-0 mb-1.5 w-72 sm:w-80 overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas/98 backdrop-blur-md shadow-xl z-40 animate-in fade-in slide-in-from-bottom-1 duration-150"
+        >
+          <div className="flex items-center justify-between border-b border-agent-border/60 bg-agent-muted/30 px-2.5 py-1.5">
+            <div className="flex items-center gap-1.5 text-[11px] font-medium text-agent-foreground">
+              <LuListChecks className="h-3.5 w-3.5 text-agent-foreground" />
+              <span>任务清单</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              {progressLabel && (
+                <span
+                  className={`rounded-full px-1.5 py-0.2 text-[10px] font-medium ${
+                    isAllCompleted
+                      ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+                      : 'bg-blue-500/10 text-blue-600 dark:text-blue-400'
+                  }`}
+                >
+                  {progressLabel}
+                </span>
+              )}
+              <button
+                type="button"
+                onClick={() => setUserToggled(false)}
+                className="flex h-5 w-5 items-center justify-center rounded text-agent-muted-foreground transition-colors hover:bg-agent-foreground/10 hover:text-agent-foreground"
+                title="收起清单"
+                aria-label="收起清单"
+              >
+                <LuX className="h-3 w-3" />
+              </button>
+            </div>
+          </div>
+          <TodoItems todos={todos} compact />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SessionTodoList;
+

package/src/components/chat/SessionTreeModal.tsx

@@ -136,9 +136,9 @@ export function SessionTreeModal({ chatId, onClose, onBranchSwitched }: SessionT
       data-session-tree-modal
     >
       <div className="flex max-h-[85vh] w-full max-w-lg flex-col overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas shadow-xl">
-        <div className="flex items-center gap-2 border-b border-agent-border px-4 py-2.5">
+        <div className="flex items-center gap-2 border-b border-agent-border px-3 py-2">
           <LuGitBranch className="h-4 w-4 shrink-0 text-agent-muted-foreground" />
-          <span className="min-w-0 flex-1 truncate text-sm font-medium text-agent-foreground">
+          <span className="min-w-0 flex-1 truncate text-xs font-medium text-agent-foreground">
             会话分支树
             {data && data.nodeCount > 1 && (
               <span className="ml-1.5 text-xs font-normal text-agent-muted-foreground">
@@ -206,7 +206,7 @@ export function SessionTreeModal({ chatId, onClose, onBranchSwitched }: SessionT
         </div>
 
         {!loading && !isEmpty && (
-          <div className="border-t border-agent-border px-4 py-2 text-[10px] text-agent-muted-foreground/80">
+          <div className="border-t border-agent-border px-3 py-1.5 text-[10px] text-agent-muted-foreground/80">
             {data?.truncated
               ? '分支过多，树已被截断（仅显示部分节点）。'
               : '点击切换分支；↑↓ 移动，Enter 切换，Esc 关闭。'}