@steerable/agent-shell-web 0.6.51 → 0.6.52

package/src/components/chat/ExecPolicyPicker.tsx

@@ -6,7 +6,7 @@ import type { ExecPolicy } from '@/lib/exec-policy';
  * ExecPolicyPicker — 输入框上的命令沙箱切换（类 Codex 底部权限档）。
  *
  * 切档立刻记住，下一轮才生效：当前回合的 `execSandbox` 已经随流发出。
- * 工作区 = Seatbelt/bwrap 只允许写项目家目录或本对话工作区；完整权限
+ * 工作区 = Seatbelt/bwrap 只允许写项目家目录、源文件夹（含各自子目录）或本对话工作区；完整权限
  * = 不下发命令沙箱，本机路径（如 Downloads）不再被 Operation not permitted 拦住。
  */
 
@@ -19,7 +19,7 @@ const OPTIONS: Array<{
     id: 'workspace',
     label: '工作区',
     description:
-      '命令只能写入当前项目或本对话工作区（文稿/<应用名>/conversations/）；工作区外路径会被系统拒绝。',
+      '只能写入当前工作区，范围外的路径会被拒绝。',
   },
   {
     id: 'full',

package/src/components/chat/ExecutedActionsCard.tsx

@@ -59,6 +59,16 @@ export interface ExecutedAction {
    * port-only egress); none = no backend on this platform.
    */
   sandbox?: { backend?: string; enforcement: string };
+  /**
+   * 工具注册时声明的卡片。`declared` 为真时行标题用 `title`，
+   * 不再按工具名猜测。旧事件没有这个字段，仍走原来的摘要。
+   */
+  view?: {
+    card: 'generic' | 'terminal' | 'diff' | 'search' | 'read' | 'web';
+    kind: string;
+    title: string;
+    declared: boolean;
+  };
 }
 
 export interface ExecutedActionsCardProps {
@@ -124,18 +134,18 @@ function actionToTool(action: ExecutedAction, idx: number): ToolExecutionPayload
         ? humanizeDelegateError(env.error)
         : env.error
       : null;
-  // W5-2: web_search/web_fetch 用结构化中文摘要（查询词/URL + 结果计数/
-  // 状态码），其余工具走通用参数摘要。
-  const summary =
-    (action.tool === 'delegate_subagent'
-      ? summarizeDelegateSubagent(action.arguments)
-      : null) ??
-    (isTaskFamilyTool(action.tool)
-      ? summarizeTaskAction(action.tool, action.arguments, action.result)
-      : null) ??
-    summarizeRunCodeAction(action.tool, action.arguments, action.result) ??
-    summarizeWebAction(action.tool, action.arguments, action.result) ??
-    summarizeArguments(action.arguments);
+  // 声明过的工具用 view.title。没有 view 的旧事件仍按工具名做摘要。
+  const summary = action.view?.declared
+    ? action.view.title
+    : ((action.tool === 'delegate_subagent'
+        ? summarizeDelegateSubagent(action.arguments)
+        : null) ??
+      (isTaskFamilyTool(action.tool)
+        ? summarizeTaskAction(action.tool, action.arguments, action.result)
+        : null) ??
+      summarizeRunCodeAction(action.tool, action.arguments, action.result) ??
+      summarizeWebAction(action.tool, action.arguments, action.result) ??
+      summarizeArguments(action.arguments));
   const badge = sandboxBadge(action.sandbox);
   return {
     id: action.id ?? `${action.tool}-${idx}`,

package/src/components/chat/LocalChatPanel.tsx

@@ -11,6 +11,7 @@ import {
   type MentionReference,
 } from './ChatInput';
 import { EmptyChat } from './EmptyChat';
+import { EmptyChatHero } from './EmptyChatHero';
 import { MessageList } from './MessageList';
 import type { ExecutedAction } from './ExecutedActionsCard';
 import type { InspectTaskInput } from './executed-actions-model';
@@ -18,6 +19,7 @@ import type { ChildInfo } from './OrchestrationChildrenCard';
 import type { TurnBlock } from './turn-timeline';
 import type { TurnFile } from './turn-files';
 import type { LlmSpeedSnapshot } from './process-status';
+import { ComposerStatusStack } from './composer-status-stack';
 import { SessionTodoList } from './SessionTodoList';
 import { resolveLatestSessionTodos } from './todo-list-model';
 import { SessionOrchestrationFlow } from './SessionOrchestrationFlow';
@@ -59,9 +61,9 @@ export interface LocalChatPanelProps {
   isStreaming?: boolean;
   onSubmit: (input: { content: string; metadata?: Record<string, unknown> }) => void | Promise<void>;
   onCancel?: () => void;
-  /** 轮中转向（streaming 期间 Enter）：注入失败由 hook 兜底为排队/直发，见 ChatInput。 */
+  /** 轮中插队（streaming 期间 ⌘/Ctrl+Enter）：注入失败由 hook 兜底为排队/直发。 */
   onSteer?: (text: string) => Promise<SteerOutcome>;
-  /** W6-2 follow-up 排队：streaming 期间 ⌘/Ctrl+Enter 把文本排入待发队列。 */
+  /** W6-2 follow-up 排队：streaming 期间 Enter 把文本排入待发队列。 */
   onFollowUp?: (text: string) => void;
   /** 排队待发的 follow-up 文本列表。 */
   pendingFollowUps?: string[];
@@ -78,11 +80,11 @@ export interface LocalChatPanelProps {
   /** Slot rendered above the message list (header / agent picker / …). */
   header?: ReactNode;
   /**
-   * 空会话 hero 布局：提供后，当 messages 为空且未在流式时，整个面板渲染为
-   * 居中首屏（品牌标题 + 居中输入框，无 header）——与 /agent 落地页
-   * （EmptyChatGate）同款视觉。首条消息落地后自动切回常规布局。
+   * 空会话 hero 布局：为 true 时，当 messages 为空且未在流式时，整个面板渲染为
+   * 居中首屏（品牌 logo + brand.homeHint + 居中输入框，无 header）——与 /agent
+   * 落地页（EmptyChatGate）同款视觉。首条消息落地后自动切回常规布局。
    */
-  emptyHero?: { title: string; subtitle?: string };
+  emptyHero?: boolean;
   /** Override the default `EmptyChat` empty-state. */
   emptyState?: ReactNode;
   /** Disable the input (e.g. during initial chat-history load). */
@@ -339,6 +341,7 @@ export function LocalChatPanel({
         orchestrationChildrenByMessageId,
         timelineByMessageId,
         currentTurnTimeline,
+        turnActive: isStreaming,
       }),
     [
       messages,
@@ -348,6 +351,7 @@ export function LocalChatPanel({
       orchestrationChildrenByMessageId,
       timelineByMessageId,
       currentTurnTimeline,
+      isStreaming,
     ],
   );
 
@@ -378,6 +382,17 @@ export function LocalChatPanel({
     // inputBox 并重新 observe，否则气泡宽度变量停在旧节点上。
   }, [showEmptyHero]);
 
+  const handleCancel = useCallback(() => {
+    if (pendingFollowUps && pendingFollowUps.length > 0) {
+      setInputValue((draft) =>
+        [...pendingFollowUps, draft.trim()]
+          .filter(Boolean)
+          .join('\n\n'),
+      );
+    }
+    onCancel?.();
+  }, [onCancel, pendingFollowUps]);
+
   const chatInputNode = (
     <>
       {attachmentError && (
@@ -394,7 +409,7 @@ export function LocalChatPanel({
         value={inputValue}
         onChange={setInputValue}
         onSubmit={handleSubmit}
-        onCancel={onCancel}
+        onCancel={handleCancel}
         onSteer={onSteer}
         onFollowUp={onFollowUp}
         pendingFollowUps={pendingFollowUps}
@@ -416,7 +431,7 @@ export function LocalChatPanel({
         leadingChrome={inputLeadingChrome}
         trailingChrome={
           sessionOrchestrationFlow || sessionTodos ? (
-            <div className="flex items-center gap-1.5 min-w-0">
+            <ComposerStatusStack>
               {sessionOrchestrationFlow ? (
                 <SessionOrchestrationFlow
                   flow={sessionOrchestrationFlow}
@@ -425,7 +440,7 @@ export function LocalChatPanel({
                 />
               ) : null}
               {sessionTodos ? <SessionTodoList todos={sessionTodos} /> : null}
-            </div>
+            </ComposerStatusStack>
           ) : undefined
         }
         mode={mode}
@@ -453,16 +468,7 @@ export function LocalChatPanel({
         {showEmptyHero ? (
           <div className="flex min-h-0 flex-1 items-center justify-center p-3 sm:p-5">
             <div className="flex w-full max-w-3xl 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-xs text-agent-muted-foreground">
-                    {emptyHero.subtitle}
-                  </p>
-                )}
-              </div>
+              <EmptyChatHero />
               <div className="w-full">
                 {inputBanner}
                 {chatInputNode}

package/src/components/chat/MessageList.tsx

@@ -2,6 +2,7 @@ import {
   useCallback,
   useEffect,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
   type ReactNode,
@@ -245,6 +246,43 @@ export function MessageList({
     scrollToBottom('auto');
   }, [lastMessageId, lastContentLen, lastTimelineSig, suggestedSig, scrollToBottom]);
 
+  // Group consecutive user messages into turns (方案 A).
+  // A group of 2+ user messages renders as a single connected card with
+  // dividers and "↳ 追加" badges, instead of separate disconnected bubbles.
+  type MessageItem =
+    | { type: 'user-group'; messages: ChatMessage[]; key: string }
+    | { type: 'assistant'; message: ChatMessage; originalIndex: number };
+
+  const groupedItems = useMemo<MessageItem[]>(() => {
+    const items: MessageItem[] = [];
+    let currentUserGroup: ChatMessage[] = [];
+
+    for (let i = 0; i < visibleMessages.length; i++) {
+      const msg = visibleMessages[i];
+      if (msg.role === 'user') {
+        currentUserGroup.push(msg);
+      } else {
+        if (currentUserGroup.length > 0) {
+          items.push({
+            type: 'user-group',
+            messages: currentUserGroup,
+            key: `ug-${currentUserGroup[0].id}`,
+          });
+          currentUserGroup = [];
+        }
+        items.push({ type: 'assistant', message: msg, originalIndex: i });
+      }
+    }
+    if (currentUserGroup.length > 0) {
+      items.push({
+        type: 'user-group',
+        messages: currentUserGroup,
+        key: `ug-${currentUserGroup[0].id}`,
+      });
+    }
+    return items;
+  }, [visibleMessages]);
+
   return (
     <div className="relative flex-1 overflow-hidden">
       <div
@@ -255,11 +293,45 @@ export function MessageList({
           emptyState ?? null
         ) : (
           <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') {
-                return <UserMessage key={message.id} message={message} agents={agents} chats={chats} />;
+            {groupedItems.map((item) => {
+              if (item.type === 'user-group') {
+                if (item.messages.length === 1) {
+                  return (
+                    <UserMessage
+                      key={item.messages[0].id}
+                      message={item.messages[0]}
+                      agents={agents}
+                      chats={chats}
+                    />
+                  );
+                }
+                // Multiple consecutive user messages: render as a unified combined card.
+                return (
+                  <div
+                    key={item.key}
+                    className="group/user-group"
+                    data-message-role="user-group"
+                  >
+                    <div className="flex justify-start">
+                      <div className="mx-auto w-full max-w-[var(--chat-input-box-width)] overflow-hidden rounded-agent-lg border border-agent-border/80 bg-agent-muted/70 shadow-sm">
+                        {item.messages.map((msg, idx) => (
+                          <UserMessage
+                            key={msg.id}
+                            message={msg}
+                            agents={agents}
+                            chats={chats}
+                            isGrouped
+                            isAppended={idx > 0}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                );
               }
+
+              const message = item.message;
+              const isLast = item.originalIndex === visibleMessages.length - 1;
               // Action attribution: prefer the per-message map (set when the
               // backend's `message_id` event reconciles the stream-time queue
               // with the DB id). The framework keeps the in-flight assistant's
@@ -309,7 +381,7 @@ export function MessageList({
                   : undefined;
               let previousUser: ChatMessage | undefined;
               let previousUserCreatedAt: string | undefined;
-              for (let i = index - 1; i >= 0; i -= 1) {
+              for (let i = item.originalIndex - 1; i >= 0; i -= 1) {
                 if (visibleMessages[i].role === 'user') {
                   previousUser = visibleMessages[i];
                   previousUserCreatedAt = previousUser.createdAt;

package/src/components/chat/ModelPicker.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { LuChevronDown, LuRefreshCw } from 'react-icons/lu';
+import { LuChevronDown, LuRefreshCw, LuSettings } from 'react-icons/lu';
 import { ModelCapabilityChips } from '@/components/settings/ModelCapabilityChips';
 import {
   getLlmModels,
@@ -32,6 +32,8 @@ export interface ModelPickerProps {
   reasoningEffort: string | null;
   onSelectModel: (model: string | null) => void;
   onSelectEffort: (effort: string | null) => void;
+  /** 打开 LLM 设置弹窗。 */
+  onOpenSettings?: () => void;
   disabled?: boolean;
 }
 
@@ -40,6 +42,7 @@ export function ModelPicker({
   reasoningEffort,
   onSelectModel,
   onSelectEffort,
+  onOpenSettings,
   disabled = false,
 }: ModelPickerProps) {
   const [catalog, setCatalog] = useState<GatewayModelCatalog | null>(null);
@@ -109,6 +112,7 @@ export function ModelPicker({
       <div className="relative flex min-w-0">
         <button
           type="button"
+          data-testid="model-picker"
           onClick={() => {
             const next = !modelMenuOpen;
             setModelMenuOpen(next);
@@ -155,6 +159,22 @@ export function ModelPicker({
                 >
                   <LuRefreshCw className={`h-3 w-3 ${loading ? 'animate-spin' : ''}`} />
                 </button>
+                {onOpenSettings && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onOpenSettings();
+                      setModelMenuOpen(false);
+                      setEffortMenuOpen(false);
+                    }}
+                    className="flex h-4 w-4 items-center justify-center rounded text-agent-muted-foreground transition-colors hover:text-agent-foreground"
+                    title="LLM 设置"
+                    aria-label="LLM 设置"
+                    data-testid="chat-llm-settings"
+                  >
+                    <LuSettings className="h-3 w-3" />
+                  </button>
+                )}
               </span>
             </div>
             <button

package/src/components/chat/OrchestrationFlowCard.tsx

@@ -35,6 +35,8 @@ function NodeStatusIcon({
       return <LuCircleDot className={`${cls} animate-pulse text-blue-600 dark:text-blue-400`} />;
     case 'interrupted':
       return <LuCirclePause className={`${cls} text-amber-600 dark:text-amber-400`} />;
+    case 'cancelled':
+      return <LuCircleX className={`${cls} text-agent-foreground`} />;
     case 'closed':
       return <LuCircleX className={`${cls} text-agent-muted-foreground`} />;
     case 'failed':
@@ -53,6 +55,8 @@ function statusBadgeText(status: OrchestrationNodeStatus): string {
       return '执行中';
     case 'interrupted':
       return '已暂停';
+    case 'cancelled':
+      return '已停止';
     case 'closed':
       return '已关闭';
     case 'failed':
@@ -71,6 +75,8 @@ function statusBadgeStyle(status: OrchestrationNodeStatus): string {
       return 'bg-blue-500/10 text-blue-700 dark:text-blue-300 border-blue-500/20';
     case 'interrupted':
       return 'bg-amber-500/10 text-amber-700 dark:text-amber-300 border-amber-500/20';
+    case 'cancelled':
+      return 'bg-agent-muted text-agent-foreground border-agent-border';
     case 'closed':
       return 'bg-agent-muted text-agent-muted-foreground border-agent-border';
     case 'failed':
@@ -415,10 +421,10 @@ export function OrchestrationFlowCard({
 
                       {/* 追加指令 */}
                       {node.steers.length > 0 ? (
-                        <div className="mt-1.5 space-y-0.5 rounded bg-amber-500/5 p-1 text-[10px] text-amber-800 dark:text-amber-200">
+                        <div className="mt-1.5 space-y-0.5 rounded border border-amber-800/20 bg-amber-100 px-1.5 py-1 text-[10px] text-amber-950">
                           {node.steers.map((s, sIdx) => (
                             <div key={sIdx} className="flex items-start gap-1">
-                              <LuMessageSquare className="mt-0.5 h-2.5 w-2.5 shrink-0 text-amber-600" />
+                              <LuMessageSquare className="mt-0.5 h-2.5 w-2.5 shrink-0 text-amber-900" />
                               <span className="truncate">{s.message}</span>
                             </div>
                           ))}
@@ -461,7 +467,11 @@ export function OrchestrationFlowCard({
               <LuCircleCheck className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400" />
               <span>结果汇聚 (Join)</span>
               <span className="text-[10px] opacity-80">
-                {isAllCompleted ? '所有分支已汇聚并完成回答' : '等待分支就绪...'}
+                {isAllCompleted
+                  ? '所有分支已汇聚并完成回答'
+                  : hasActive
+                    ? '等待分支就绪...'
+                    : '已停止'}
               </span>
             </div>
           </div>

package/src/components/chat/SessionOrchestrationFlow.tsx

@@ -20,6 +20,7 @@ import {
   type OrchestrationNodeStatus,
 } from './orchestration-flow-model';
 import type { InspectTaskInput } from './executed-actions-model';
+import { useExclusiveExpand } from './composer-status-stack';
 
 function FlowNodeStatusIcon({
   status,
@@ -36,6 +37,8 @@ function FlowNodeStatusIcon({
       return <LuCircleDot className={`${cls} animate-pulse text-blue-600 dark:text-blue-400`} />;
     case 'interrupted':
       return <LuCirclePause className={`${cls} text-amber-600 dark:text-amber-400`} />;
+    case 'cancelled':
+      return <LuCircleX className={`${cls} text-agent-foreground`} />;
     case 'closed':
     case 'failed':
       return <LuCircleX className={`${cls} text-agent-destructive`} />;
@@ -45,6 +48,27 @@ function FlowNodeStatusIcon({
   }
 }
 
+function statusBadgeText(status: OrchestrationNodeStatus): string {
+  switch (status) {
+    case 'completed':
+      return '已完成';
+    case 'running':
+      return '执行中';
+    case 'interrupted':
+      return '已暂停';
+    case 'cancelled':
+      return '已停止';
+    case 'closed':
+      return '已关闭';
+    case 'failed':
+      return '失败';
+    case 'pending':
+      return '等待中';
+    default:
+      return '等待中';
+  }
+}
+
 export function currentActiveNode(nodes: OrchestrationChildNode[]): OrchestrationChildNode | null {
   return (
     nodes.find((n) => n.status === 'running' || n.status === 'pending') ??
@@ -245,9 +269,11 @@ export function SessionOrchestrationFlow({
   const { nodes, isAllCompleted, hasActive, summaryCopy } = flow;
   const activeNode = useMemo(() => currentActiveNode(nodes), [nodes]);
 
-  // 执行中默认展开，全部完成默认收起为胶囊；支持用户手动点击切换展开状态
+  // 执行中默认展开，全部完成默认收起为胶囊；支持用户手动点击切换展开状态。
+  // 与任务清单同列时，展开浮层互斥。
   const [userToggled, setUserToggled] = useState<boolean | null>(null);
-  const expanded = userToggled ?? hasActive;
+  const desired = userToggled ?? hasActive;
+  const { expanded, requestOpen } = useExclusiveExpand('orchestration', desired);
 
   // 任务全部执行完成时自动收拢为胶囊
   useEffect(() => {
@@ -294,14 +320,20 @@ export function SessionOrchestrationFlow({
       {/* 输入框上方的胶囊触发器按钮 (类似 SessionTodoList) */}
       <button
         type="button"
-        onClick={() => setUserToggled(!expanded)}
+        onClick={() => {
+          if (expanded) setUserToggled(false);
+          else {
+            setUserToggled(true);
+            requestOpen();
+          }
+        }}
         className={[
           'flex h-6 max-w-[260px] sm:max-w-[340px] 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-violet-500/30 bg-violet-500/[0.06] text-violet-700 dark:text-violet-300 hover:bg-violet-500/10'
-              : 'border border-agent-border/80 bg-agent-canvas text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
+              : 'border border-agent-border/80 bg-agent-canvas text-agent-foreground hover:bg-agent-foreground/5',
         ].join(' ')}
         aria-expanded={expanded}
       >
@@ -318,7 +350,9 @@ export function SessionOrchestrationFlow({
         <span className="min-w-0 flex-1 truncate font-medium">
           {isAllCompleted
             ? '协同编排已就绪'
-            : (activeNode?.task ? activeNode.task : '协同编排流程')}
+            : hasActive
+              ? (activeNode?.task ? activeNode.task : '协同编排流程')
+              : '协同编排已停止'}
         </span>
 
         {summaryCopy ? (
@@ -328,7 +362,7 @@ export function SessionOrchestrationFlow({
                 ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
                 : hasActive
                   ? 'bg-violet-500/15 text-violet-700 dark:text-violet-300'
-                  : 'bg-agent-muted text-agent-muted-foreground'
+                  : 'bg-agent-muted text-agent-foreground'
             }`}
           >
             {summaryCopy}
@@ -345,7 +379,11 @@ export function SessionOrchestrationFlow({
       {/* 展开浮层：呈现真正的多智能体 Fork-Join 流程图 (DAG Flowchart) */}
       {expanded && (
         <div
-          className="absolute bottom-full right-0 mb-1.5 w-[390px] sm:w-[480px] 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"
+          className={`absolute bottom-full right-0 mb-1.5 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 ${
+            nodes.length >= 3
+              ? 'w-[440px] sm:w-[560px] max-w-[calc(100vw-2rem)]'
+              : 'w-[390px] sm:w-[480px] max-w-[calc(100vw-2rem)]'
+          }`}
         >
           {/* Header */}
           <div className="flex items-center justify-between border-b border-agent-border/60 bg-agent-muted/30 px-3 py-2">
@@ -361,7 +399,9 @@ export function SessionOrchestrationFlow({
                 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-violet-500/10 text-violet-600 dark:text-violet-400'
+                    : hasActive
+                      ? 'bg-violet-500/10 text-violet-600 dark:text-violet-400'
+                      : 'bg-agent-muted text-agent-foreground'
                 }`}
               >
                 {summaryCopy}
@@ -397,6 +437,7 @@ export function SessionOrchestrationFlow({
                 {nodes.map((node, index) => {
                   const done = node.status === 'completed';
                   const active = node.status === 'running' || node.status === 'pending';
+                  const stopped = node.status === 'cancelled' || node.status === 'interrupted';
                   const canInspect = Boolean(chatId && onInspectTask && node.recordId);
 
                   return (
@@ -407,24 +448,26 @@ export function SessionOrchestrationFlow({
                       <div>
                         {/* 节点顶栏：Todo 式勾选/圆点 + 分支编号 + 状态 */}
                         <div className="flex items-center justify-between gap-1 border-b border-agent-border/40 pb-1.5">
-                          <div className="flex items-center gap-1.5 min-w-0">
+                          <div className="flex items-center gap-1 min-w-0 flex-1">
                             <FlowNodeStatusIcon status={node.status} />
-                            <span className="font-semibold text-agent-foreground text-[11px] truncate">
+                            <span className="font-semibold text-agent-foreground text-[11px] truncate whitespace-nowrap">
                               分支 #{index + 1}
                             </span>
                           </div>
 
-                          <div className="flex items-center gap-1">
+                          <div className="flex items-center gap-1 shrink-0">
                             <span
-                              className={`rounded-full border px-1.5 py-0.2 text-[10px] font-medium ${
+                              className={`shrink-0 whitespace-nowrap rounded-full border px-1.5 py-0.2 text-[10px] font-medium leading-tight ${
                                 done
                                   ? 'border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
                                   : active
                                     ? 'border-blue-500/20 bg-blue-500/10 text-blue-700 dark:text-blue-300'
-                                    : 'border-agent-border bg-agent-muted text-agent-muted-foreground'
+                                    : stopped
+                                      ? 'border-agent-border bg-agent-muted text-agent-foreground'
+                                      : 'border-agent-border bg-agent-muted text-agent-muted-foreground'
                               }`}
                             >
-                              {done ? '已完成' : active ? '执行中' : '等待中'}
+                              {statusBadgeText(node.status)}
                             </span>
                             {canInspect && chatId ? (
                               <button
@@ -438,10 +481,10 @@ export function SessionOrchestrationFlow({
                                     title: node.task || '子代理执行过程',
                                   })
                                 }
-                                className="inline-flex shrink-0 items-center gap-0.5 rounded px-1 text-[10px] text-agent-muted-foreground hover:bg-agent-muted hover:text-agent-foreground"
+                                className="inline-flex shrink-0 whitespace-nowrap items-center gap-0.5 rounded px-1 text-[10px] text-agent-muted-foreground hover:bg-agent-muted hover:text-agent-foreground"
                                 title="查看过程"
                               >
-                                <LuExternalLink className="h-2.5 w-2.5" />
+                                <LuExternalLink className="h-2.5 w-2.5 shrink-0" />
                                 <span>过程</span>
                               </button>
                             ) : null}
@@ -466,10 +509,10 @@ export function SessionOrchestrationFlow({
 
                         {/* 追加指令 (Steer) */}
                         {node.steers.length > 0 ? (
-                          <div className="mt-1.5 space-y-0.5 rounded bg-amber-500/5 p-1 text-[10px] text-amber-800 dark:text-amber-200">
+                          <div className="mt-1.5 space-y-0.5 rounded border border-amber-800/20 bg-amber-100 px-1.5 py-1 text-[10px] text-amber-950">
                             {node.steers.map((s, sIdx) => (
                               <div key={sIdx} className="flex items-start gap-1">
-                                <LuMessageSquare className="mt-0.5 h-2.5 w-2.5 shrink-0 text-amber-600" />
+                                <LuMessageSquare className="mt-0.5 h-2.5 w-2.5 shrink-0 text-amber-900" />
                                 <span className="truncate">{s.message}</span>
                               </div>
                             ))}
@@ -512,7 +555,11 @@ export function SessionOrchestrationFlow({
                 <LuCircleCheck className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400" />
                 <span>结果汇聚 (Join)</span>
                 <span className="text-[10px] opacity-80">
-                  {isAllCompleted ? '所有分支已汇聚并完成回答' : '等待分支就绪...'}
+                  {isAllCompleted
+                    ? '所有分支已汇聚并完成回答'
+                    : hasActive
+                      ? '等待分支就绪...'
+                      : '已停止'}
                 </span>
               </div>
             </div>

package/src/components/chat/SessionTodoList.tsx

@@ -8,6 +8,7 @@ import {
   LuLoaderCircle,
   LuX,
 } from 'react-icons/lu';
+import { useExclusiveExpand } from './composer-status-stack';
 import {
   summarizeTodos,
   type SessionTodo,
@@ -106,9 +107,11 @@ export function SessionTodoList({ todos }: { todos: SessionTodo[] }) {
     return summary.total > 0 && summary.completed === summary.total;
   }, [todos]);
 
-  // 执行中默认展开，全部完成默认折叠；允许用户手动点击收起或展开
+  // 执行中默认展开，全部完成默认折叠；允许用户手动点击收起或展开。
+  // 与编排胶囊同列时，展开浮层互斥。
   const [userToggled, setUserToggled] = useState<boolean | null>(null);
-  const expanded = userToggled ?? hasActive;
+  const desired = userToggled ?? hasActive;
+  const { expanded, requestOpen } = useExclusiveExpand('todos', desired);
 
   // 当任务全部执行完毕时，自动收起为紧凑胶囊
   useEffect(() => {
@@ -147,7 +150,13 @@ export function SessionTodoList({ todos }: { todos: SessionTodo[] }) {
     >
       <button
         type="button"
-        onClick={() => setUserToggled(!expanded)}
+        onClick={() => {
+          if (expanded) setUserToggled(false);
+          else {
+            setUserToggled(true);
+            requestOpen();
+          }
+        }}
         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