@steerable/agent-shell-web 0.6.28 → 0.6.29

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

@@ -1,11 +1,12 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   LuCircle,
   LuCircleCheck,
   LuCircleDot,
   LuChevronDown,
-  LuChevronRight,
   LuListChecks,
+  LuLoaderCircle,
+  LuX,
 } from 'react-icons/lu';
 import {
   summarizeTodos,
@@ -60,7 +61,7 @@ export function TodoItems({
 }) {
   return (
     <ol
-      className={`m-0 list-none ${compact ? 'max-h-40 space-y-1 overflow-y-auto px-2.5 py-1.5' : 'space-y-1 px-2.5 py-1.5'}`}
+      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';
@@ -70,7 +71,7 @@ export function TodoItems({
             key={todo.id}
             data-testid={`todo-item-${todo.id}`}
             data-status={todo.status}
-            className="flex items-start gap-2 text-[12px] leading-relaxed"
+            className="flex items-start gap-2 text-[11px] leading-relaxed"
           >
             <StatusIcon status={todo.status} className="mt-[2px]" />
             <span
@@ -79,7 +80,7 @@ export function TodoItems({
                   ? 'text-agent-muted-foreground line-through'
                   : active
                     ? 'font-medium text-agent-foreground'
-                    : 'text-agent-foreground'
+                    : 'text-agent-muted-foreground/85'
               }
             >
               {todo.content}
@@ -92,46 +93,142 @@ export function TodoItems({
 }
 
 export function SessionTodoList({ todos }: { todos: SessionTodo[] }) {
-  const [expanded, setExpanded] = useState(false);
+  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
-      className="mb-1 overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas shadow-sm"
+      ref={containerRef}
+      className="relative inline-flex items-center"
       data-testid="session-todo-list"
     >
       <button
         type="button"
-        onClick={() => setExpanded((value) => !value)}
-        className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left"
+        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}
       >
-        {expanded ? (
-          <LuChevronDown className="h-3.5 w-3.5 shrink-0 text-agent-muted-foreground" />
+        {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} />
         ) : (
-          <LuChevronRight className="h-3.5 w-3.5 shrink-0 text-agent-muted-foreground" />
-        )}
-        {expanded || !current ? (
           <LuListChecks className="h-3.5 w-3.5 shrink-0 text-agent-foreground" />
-        ) : (
-          <StatusIcon status={current.status} />
         )}
-        <span className="min-w-0 flex-1 truncate text-[12px] font-medium text-agent-foreground">
-          {expanded ? '任务清单' : (current?.content ?? '任务清单')}
+        <span className="min-w-0 flex-1 truncate font-medium">
+          {isAllCompleted ? '任务清单' : (current?.content ?? '任务清单')}
         </span>
         {progressLabel ? (
           <span
-            className="shrink-0 rounded-full bg-agent-muted px-1.5 py-0.5 text-[10px] font-medium text-agent-muted-foreground"
+            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 ? <TodoItems todos={todos} compact /> : null}
+
+      {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/SuggestedReplies.tsx

@@ -1,3 +1,5 @@
+import { LuSparkles } from 'react-icons/lu';
+
 /**
  * WorkBuddy-style follow-up chips: next-turn user inputs rendered under the
  * latest assistant reply. Source is the model's judgment of `[next_steps]`
@@ -15,18 +17,23 @@ export function SuggestedReplies({
 
   return (
     <div
-      className="mx-auto flex w-full max-w-[var(--chat-input-box-width)] flex-col items-start gap-1 px-1 pt-0.5 text-[12px]"
+      className="mx-auto mt-2.5 flex w-full max-w-[var(--chat-input-box-width)] flex-wrap items-center gap-1.5 px-1 pb-0.5"
       data-testid="suggested-replies"
     >
+      <div className="mr-0.5 inline-flex items-center gap-1 text-[11px] font-medium text-agent-muted-foreground/70 select-none">
+        <LuSparkles className="h-3 w-3 text-agent-muted-foreground/80" />
+        <span>建议回复</span>
+      </div>
       {suggestions.map((text) => (
         <button
           key={text}
           type="button"
           data-testid="suggested-reply"
           onClick={() => onSelect(text)}
-          className="max-w-full rounded-full border border-agent-border bg-agent-muted/40 px-2 py-0.5 text-left text-[12px] leading-[1.45] text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
+          title={text}
+          className="inline-flex max-w-[280px] sm:max-w-[340px] items-center rounded-full border border-agent-border/80 bg-agent-canvas px-2.5 py-1 text-left text-[12px] leading-[1.4] text-agent-muted-foreground transition-all duration-150 hover:border-agent-foreground/30 hover:bg-agent-foreground/5 hover:text-agent-foreground shadow-2xs active:scale-[0.98]"
         >
-          {text}
+          <span className="truncate">{text}</span>
         </button>
       ))}
     </div>
@@ -34,3 +41,4 @@ export function SuggestedReplies({
 }
 
 export default SuggestedReplies;
+

package/src/components/chat/TaskProcessPanel.tsx

@@ -1,18 +1,34 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { LuArrowDown, LuLoaderCircle, LuTerminal } from 'react-icons/lu';
 import { DockHeaderButton, DockPanelHeader } from '@/components/DockPanelHeader';
-import { getTaskProcess } from '@/lib/local-api';
+import { getChildProcess, getTaskProcess } from '@/lib/local-api';
 import { getElectronBridge } from '@/lib/electron-bridge';
 import { Markdown } from '@/components/chat/Markdown';
 import { TurnProcessGroup } from '@/components/chat/TurnProcessGroup';
-import { parseTurnBlocks, type TurnBlock } from '@/components/chat/turn-timeline';
+import {
+  parseTurnBlocks,
+  timelineContentSignature,
+  type TurnBlock,
+} from '@/components/chat/turn-timeline';
 
 export interface InspectedTask {
   id: string;
   chatId: string;
   title: string;
+  /**
+   * 子代理过程：按它自己的 durable record 读，而不是任务表。设了它就走
+   * `GET /child-process`，`live` 期间轮询（子回合边跑边写 record）。
+   */
+  recordId?: string;
+  /** 目标仍在运行——决定轮询与标题状态。 */
+  live?: boolean;
 }
 
+const CHILD_POLL_INTERVAL_MS = 1500;
+
+/** 连续这么多次轮询读到同一份内容就认为子代理跑完了（≈60s）。 */
+const CHILD_IDLE_POLLS_UNTIL_DONE = 40;
+
 const NEAR_BOTTOM_THRESHOLD_PX = 100;
 
 /**
@@ -74,27 +90,46 @@ export function TaskProcessPanel({
 
   // live 增量在 paint 前钉住底部。smooth scroll 会先露出一帧半截内容再往下
   // 滑，Windows 经典滚动条就会上下跳。
-  const timelineSig = blocks
-    .map((block) =>
-      block.type === 'tools' ? `t${block.actions.length}` : `c${block.content.length}`,
-    )
-    .join('|');
+  const timelineSig = timelineContentSignature(blocks);
   useLayoutEffect(() => {
     if (!isAtBottomRef.current) return;
     scrollToBottom('auto');
   }, [timelineSig, live, scrollToBottom]);
 
+  const childRecordId = inspected.recordId;
+
   useEffect(() => {
     let cancelled = false;
+    let timer: number | undefined;
+    let lastSig: string | null = null;
+    let idlePolls = 0;
     setLoading(true);
     setError(null);
-    void (async () => {
+    const load = async () => {
       try {
-        const snapshot = await getTaskProcess(inspected.id);
-        if (cancelled) return;
-        setBlocks(parseTurnBlocks(snapshot.timeline) ?? []);
-        setLive(snapshot.live);
-        setStale(snapshot.stale);
+        if (childRecordId) {
+          const snapshot = await getChildProcess(childRecordId);
+          if (cancelled) return;
+          const next = parseTurnBlocks(snapshot.timeline) ?? [];
+          const sig = timelineContentSignature(next);
+          idlePolls = sig === lastSig ? idlePolls + 1 : 0;
+          lastSig = sig;
+          setBlocks(next);
+          // 子代理跑完不会再有事件通知这个面板（它的 live 是点开那刻的快照），
+          // 所以用「record 不再变化」当结束信号：停轮询、标题转「已结束」。
+          if (timer !== undefined && idlePolls >= CHILD_IDLE_POLLS_UNTIL_DONE) {
+            window.clearInterval(timer);
+            timer = undefined;
+            setLive(false);
+          }
+          setStale(false);
+        } else {
+          const snapshot = await getTaskProcess(inspected.id);
+          if (cancelled) return;
+          setBlocks(parseTurnBlocks(snapshot.timeline) ?? []);
+          setLive(snapshot.live);
+          setStale(snapshot.stale);
+        }
       } catch (err) {
         if (cancelled) return;
         setError(err instanceof Error ? err.message : String(err));
@@ -102,13 +137,22 @@ export function TaskProcessPanel({
       } finally {
         if (!cancelled) setLoading(false);
       }
-    })();
+    };
+    if (childRecordId) setLive(Boolean(inspected.live));
+    void load();
+    // 子代理没有 task-process 广播通道（它不是任务），运行中靠轮询它的
+    // record 追进度；终态打开只读一次。
+    if (childRecordId && inspected.live) {
+      timer = window.setInterval(() => void load(), CHILD_POLL_INTERVAL_MS);
+    }
     return () => {
       cancelled = true;
+      if (timer !== undefined) window.clearInterval(timer);
     };
-  }, [inspected.id]);
+  }, [inspected.id, childRecordId, inspected.live]);
 
   useEffect(() => {
+    if (childRecordId) return;
     const bridge = getElectronBridge();
     if (!bridge?.onTaskProcess) return;
     return bridge.onTaskProcess((payload) => {
@@ -121,13 +165,14 @@ export function TaskProcessPanel({
       setLive(payload.live);
       if (payload.live) setStale(false);
     });
-  }, [inspected.id]);
+  }, [inspected.id, childRecordId]);
 
   const statusLabel = live
     ? '正在推理'
     : stale
       ? '进程已中断（表上仍是运行中）'
       : '已结束';
+  const panelTitle = `${childRecordId ? '子代理推理' : '后台推理'} · ${statusLabel}`;
 
   return (
     <div
@@ -135,7 +180,7 @@ export function TaskProcessPanel({
       data-testid="task-process-panel"
     >
       <DockPanelHeader
-        title={`后台推理 · ${statusLabel}`}
+        title={panelTitle}
         onClose={onClose}
         closeLabel="关闭过程面板"
         actions={

package/src/components/chat/TurnProcessGroup.tsx

@@ -7,6 +7,8 @@ import {
 } from '@/lib/show-thinking-content';
 import { Markdown } from './Markdown';
 import { ToolsFlow } from './ExecutedActionsCard';
+import type { InspectTaskInput } from './executed-actions-model';
+import type { ChildInfo } from './OrchestrationChildrenCard';
 import {
   estimateReasoningDurationMs,
   processStatusLabel,
@@ -176,6 +178,8 @@ function ProcessBlockItems({
   agents,
   chats,
   chatId,
+  onInspectTask,
+  orchestrationChildren,
   thinkingDisplay,
   keepFinishedThinkingOpen = false,
   thinkingElapsedByIndex,
@@ -185,6 +189,8 @@ function ProcessBlockItems({
   agents: LocalChatAgent[];
   chats: LocalChat[];
   chatId?: string | null;
+  onInspectTask?: (task: InspectTaskInput) => void;
+  orchestrationChildren?: ChildInfo[];
   thinkingDisplay: ThinkingDisplayMode;
   keepFinishedThinkingOpen?: boolean;
   thinkingElapsedByIndex?: Array<number | undefined>;
@@ -218,7 +224,14 @@ function ProcessBlockItems({
         if (block.type === 'tools') {
           return (
             <div key={`tools-${index}`} data-testid="turn-tools">
-              <ToolsFlow actions={block.actions} compact />
+              <ToolsFlow
+                actions={block.actions}
+                compact
+                agents={agents}
+                chatId={chatId}
+                onInspectTask={onInspectTask}
+                orchestrationChildren={orchestrationChildren}
+              />
             </div>
           );
         }
@@ -245,6 +258,8 @@ function ProcessBlocks({
   agents,
   chats,
   chatId,
+  onInspectTask,
+  orchestrationChildren,
   thinkingDisplay,
   keepFinishedThinkingOpen,
   thinkingElapsedByIndex,
@@ -254,6 +269,8 @@ function ProcessBlocks({
   agents: LocalChatAgent[];
   chats: LocalChat[];
   chatId?: string | null;
+  onInspectTask?: (task: InspectTaskInput) => void;
+  orchestrationChildren?: ChildInfo[];
   thinkingDisplay: ThinkingDisplayMode;
   keepFinishedThinkingOpen: boolean;
   thinkingElapsedByIndex?: Array<number | undefined>;
@@ -266,6 +283,8 @@ function ProcessBlocks({
         agents={agents}
         chats={chats}
         chatId={chatId}
+        onInspectTask={onInspectTask}
+        orchestrationChildren={orchestrationChildren}
         thinkingDisplay={thinkingDisplay}
         keepFinishedThinkingOpen={keepFinishedThinkingOpen}
         thinkingElapsedByIndex={thinkingElapsedByIndex}
@@ -280,6 +299,8 @@ export function TurnProcessGroup({
   agents,
   chats,
   chatId,
+  onInspectTask,
+  orchestrationChildren,
   emptyFallback,
   streamingHint,
   startedAtMs,
@@ -294,6 +315,9 @@ export function TurnProcessGroup({
   agents: LocalChatAgent[];
   chats: LocalChat[];
   chatId?: string | null;
+  onInspectTask?: (task: InspectTaskInput) => void;
+  /** 本回合子代理：委派行据此跳转到子代理过程。 */
+  orchestrationChildren?: ChildInfo[];
   emptyFallback: ReactNode;
   /** Shown while streaming after a tools row and before the summary lands. */
   streamingHint?: ReactNode;
@@ -422,6 +446,8 @@ export function TurnProcessGroup({
           agents={agents}
           chats={chats}
           chatId={chatId}
+          onInspectTask={onInspectTask}
+          orchestrationChildren={orchestrationChildren}
           thinkingDisplay={thinkingDisplay}
           keepFinishedThinkingOpen={!collapseWhenFinished}
           thinkingElapsedByIndex={thinkingElapsedByIndex}

package/src/components/chat/UserMessage.tsx

@@ -20,9 +20,9 @@ import { useCopy } from './useCopy';
  *   - **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 mentioned-agent chip / inline `ref://` / `tool://` / `agent://`
- *     parsing.** Agent-only mode doesn't surface multi-agent mentions or
- *     pinned-ref shortcuts, so the markdown content is rendered directly.
+ *   - **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
@@ -62,7 +62,7 @@ export function UserMessage({ message, agents = [], chats = [] }: UserMessagePro
 
   return (
     <motion.div
-      className="group/message mb-1"
+      className="group/message"
       data-message-role="user"
       data-message-id={message.id}
       initial={{ opacity: 0, y: 20 }}
@@ -70,7 +70,7 @@ export function UserMessage({ message, agents = [], chats = [] }: UserMessagePro
       transition={{ duration: 0.3 }}
     >
       <div className="flex justify-start">
-        <div className="mx-auto w-full max-w-[var(--chat-input-box-width)] rounded-lg border border-agent-border bg-agent-muted px-2.5 py-2 text-xs text-agent-foreground">
+        <div className="mx-auto w-full max-w-[var(--chat-input-box-width)] rounded-agent-lg border border-agent-border/80 bg-agent-muted/70 px-3 py-2 text-xs text-agent-foreground">
           <div className="relative">
             <div
               ref={contentRef}