@steerable/agent-shell-web 0.6.51 → 0.6.53

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

package/src/components/chat/UserMessage.tsx

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
-import { LuChevronDown, LuChevronUp, LuCheck, LuCopy } from 'react-icons/lu';
+import { LuChevronDown, LuChevronUp, LuCheck, LuCopy, LuCornerDownRight } from 'react-icons/lu';
 import type { ChatMessage } from '@steerable/agent-protocol';
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
 import { useSlashSources } from '@/lib/slash-sources';
@@ -12,38 +12,32 @@ import { useCopy } from './useCopy';
  * UserMessage — port of `deeppath`'s user-bubble component, trimmed to the
  * agent-only surface.
  *
- * Differences vs the original:
- *   - **No RefCards.** Local-backend messages don't carry the `messageMetadata.refs`
- *     array used by the cloud product to attach goal/task/event/document refs;
- *     when we eventually want this for agent (e.g. uploaded files), it'll go
- *     here.
- *   - **No edit button.** The cloud product's `editChatMessage` rewrites the
- *     SSE turn in place — we don't have that machinery yet. Tracking under
- *     phase 2c.
- *   - **No inline `ref://` / `tool://` / `agent://` parsing.** Pinned-ref
- *     shortcuts stay cloud-only. `@智能体名` is a Markdown chip painted from
- *     the agent list + message text (refresh restores from content).
- *
- * What we KEEP from the old version (and why it matters for parity):
- *   - Left-aligned bubble (not right-aligned). The product chat layout stacks
- *     both user + assistant bubbles flush-left in a vertical column — this is
- *     the most visible "feel" difference vs a typical chat UI.
- *   - Bubble background uses the secondary muted token so it sits a notch
- *     above the canvas without competing with assistant bubbles.
- *   - 4.5em fold + gradient mask + 「展开全部 / 收起」 toggle so a wall-of-text
- *     user prompt doesn't steal the whole viewport before the assistant
- *     replies.
- *   - Friendly timestamp at bottom-right.
- *   - `framer-motion` fade/slide-in on mount.
+ * Grouping (方案 A):
+ *   When multiple user messages occur consecutively without an assistant reply
+ *   in between, MessageList renders them as a single connected card:
+ *   - The first message has `isGroupStart = true`
+ *   - Mid-turn / follow-up steered additions have `isAppended = true`
+ *   - The outer container groups them with a subtle dashed divider and a
+ *     「↳ 追加」 badge.
  */
 
 interface UserMessageProps {
   message: ChatMessage;
   agents?: LocalChatAgent[];
   chats?: LocalChat[];
+  /** Whether this message is part of a consecutive user message group. */
+  isGrouped?: boolean;
+  /** Whether this message is an appended follow-up inside the group (not the first one). */
+  isAppended?: boolean;
 }
 
-export function UserMessage({ message, agents = [], chats = [] }: UserMessageProps) {
+export function UserMessage({
+  message,
+  agents = [],
+  chats = [],
+  isGrouped = false,
+  isAppended = false,
+}: UserMessageProps) {
   const content = message.content || '';
   // 发出去的消息里 `/技能` `/mcp__srv__tool` 要和输入框里同样渲染成工具卡片。
   // 目录来自共享缓存，整屏消息只拉一次。
@@ -60,6 +54,103 @@ export function UserMessage({ message, agents = [], chats = [] }: UserMessagePro
     setIsOverflowing(el.scrollHeight > el.clientHeight + 1);
   }, [content, isExpanded]);
 
+  // When rendered as an item inside a group, the parent handles the outer card.
+  if (isGrouped) {
+    return (
+      <div
+        className={`group/message relative px-3 py-2 text-xs text-agent-foreground ${
+          isAppended ? 'border-t border-dashed border-agent-border/60 bg-agent-muted/30' : ''
+        }`}
+        data-message-role="user"
+        data-message-id={message.id}
+      >
+        {isAppended && (
+          <div className="mb-1 flex items-center gap-1 text-[11px] font-medium text-agent-muted-foreground select-none">
+            <LuCornerDownRight className="h-3 w-3 text-agent-primary/80" />
+            <span className="rounded bg-agent-primary/10 px-1 py-0.5 text-[10px] text-agent-primary font-medium">
+              追加
+            </span>
+          </div>
+        )}
+        <div className="relative">
+          <div
+            ref={contentRef}
+            className={`markdown-content pl-1 ${
+              !isExpanded ? 'overflow-hidden' : ''
+            }`}
+            style={!isExpanded ? { maxHeight: '4.5em' } : undefined}
+          >
+            {content ? (
+              <Markdown
+                inlineParagraph
+                agents={agents}
+                chats={chats}
+                skills={skills}
+                mcpTools={mcpTools}
+              >
+                {content}
+              </Markdown>
+            ) : (
+              <div className="h-4" />
+            )}
+          </div>
+          {!isExpanded && isOverflowing && (
+            <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-5 bg-gradient-to-t from-agent-muted to-transparent" />
+          )}
+        </div>
+
+        {isOverflowing && (
+          <button
+            type="button"
+            onClick={(event) => {
+              event.stopPropagation();
+              setIsExpanded((prev) => !prev);
+            }}
+            className="mt-1 inline-flex items-center gap-0.5 text-xs text-agent-muted-foreground transition-colors hover:text-agent-foreground"
+          >
+            {isExpanded ? (
+              <>
+                收起
+                <LuChevronUp className="h-3 w-3" />
+              </>
+            ) : (
+              <>
+                展开全部
+                <LuChevronDown className="h-3 w-3" />
+              </>
+            )}
+          </button>
+        )}
+
+        <div className="mt-1 flex items-center justify-between">
+          <button
+            type="button"
+            onClick={() => void copy()}
+            className="inline-flex items-center gap-0.5 rounded text-xs text-agent-muted-foreground opacity-0 transition-all duration-200 hover:text-agent-foreground focus:opacity-100 group-hover/message:opacity-100"
+            title={copied ? '已复制' : '复制消息'}
+            aria-label={copied ? '已复制' : '复制消息'}
+          >
+            {copied ? (
+              <>
+                <LuCheck className="h-3 w-3 text-emerald-600 dark:text-emerald-400" />
+                <span className="text-emerald-600 dark:text-emerald-400">
+                  已复制
+                </span>
+              </>
+            ) : (
+              <LuCopy className="h-3 w-3" />
+            )}
+          </button>
+          <div className="text-[11px] text-agent-muted-foreground">
+            {message.createdAt
+              ? getFriendlyDate(new Date(message.createdAt))
+              : getFriendlyDate(new Date())}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <motion.div
       className="group/message"