@steerable/agent-shell-web 0.6.15

package/src/components/chat/ExecutedActionsCard.tsx

@@ -0,0 +1,216 @@
+import type { ReactNode } from 'react';
+import { LuCircleCheck, LuCircleX } from 'react-icons/lu';
+import { ToolExecutionCard } from '@steerable/agent-ui/cards';
+import type { ToolExecutionPayload } from '@steerable/agent-protocol';
+import { UnifiedDiff } from './UnifiedDiff';
+import { summarizeRunCodeAction, summarizeWebAction, expandRunCodeActions } from './executed-actions-model';
+
+/**
+ * ExecutedActionsCard — visual surface for the `executed_actions` SSE event
+ * emitted by local-backend after each tool-call round.
+ *
+ * Per `src/local-backend/router.ts` each entry is:
+ *   { tool, mode, policy, shellClassification, arguments, result }
+ *
+ * The list rendering is delegated to `@steerable/agent-ui/cards`'
+ * `ToolExecutionCard`; this file is the thin local adapter that:
+ *   1. Maps the local-backend `ExecutedAction` shape to the framework's
+ *      canonical `ToolExecutionPayload` (id / name / status / args / output).
+ *   2. Adds the "已自动执行 N 个操作" summary banner above the list — the
+ *      framework intentionally leaves grouping policy to the host app since
+ *      different products count successes / failures differently.
+ */
+
+export interface ExecutedAction {
+  /** Sidecar tool-call id; used to update a running row when the result lands. */
+  id?: string;
+  tool: string;
+  mode?: string;
+  policy?: unknown;
+  shellClassification?: string;
+  arguments?: unknown;
+  result?: unknown;
+  /**
+   * W4-2: per-exec sandbox marker (`data._sandbox` lifted by the CoreLoop).
+   * enforcement: full = OS deny-by-default; partial = documented gap (e.g.
+   * port-only egress); none = no backend on this platform.
+   */
+  sandbox?: { backend?: string; enforcement: string };
+}
+
+interface ExecutedActionsCardProps {
+  actions: ExecutedAction[];
+  /** Drop the outer card chrome when nested in a turn-process group. */
+  compact?: boolean;
+}
+
+function deriveStatus(action: ExecutedAction): ToolExecutionPayload['status'] {
+  const result = action.result;
+  if (result === undefined || result === null) return 'running';
+  if (typeof result !== 'object') return 'succeeded';
+  if ('success' in result) {
+    return (result as { success?: unknown }).success ? 'succeeded' : 'failed';
+  }
+  if ('error' in result) return 'failed';
+  return 'succeeded';
+}
+
+function summarizeArguments(args: unknown): string | null {
+  if (args === null || args === undefined) return null;
+  if (typeof args === 'string') return args.length > 60 ? args.slice(0, 57) + '…' : args;
+  if (typeof args !== 'object') return String(args);
+  const obj = args as Record<string, unknown>;
+  for (const key of ['command', 'cmd', 'query', 'path', 'file', 'target', 'message']) {
+    const v = obj[key];
+    if (typeof v === 'string' && v.length > 0) {
+      return v.length > 60 ? v.slice(0, 57) + '…' : v;
+    }
+  }
+  return null;
+}
+
+function sandboxBadge(sandbox: ExecutedAction['sandbox']): string | null {
+  if (!sandbox) return null;
+  switch (sandbox.enforcement) {
+    case 'full':
+      return '[沙箱]';
+    case 'partial':
+      return '[沙箱·部分]';
+    default:
+      return '[未沙箱]';
+  }
+}
+
+function actionToTool(action: ExecutedAction, idx: number): ToolExecutionPayload {
+  const status = deriveStatus(action);
+  const errorText =
+    status === 'failed' && action.result && typeof action.result === 'object'
+      ? typeof (action.result as { error?: unknown }).error === 'string'
+        ? ((action.result as { error: string }).error)
+        : null
+      : null;
+  // W5-2: web_search/web_fetch 用结构化中文摘要（查询词/URL + 结果计数/
+  // 状态码），其余工具走通用参数摘要。
+  const summary =
+    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}`,
+    name: action.tool,
+    status,
+    summary: badge ? `${badge} ${summary ?? ''}`.trim() : summary,
+    args: action.arguments,
+    output: action.result,
+    error: errorText,
+    durationMs: null,
+    icon: null,
+    expandable: true,
+  };
+}
+
+/**
+ * renderOutput slot for ToolExecutionCard: when a tool result carries a
+ * unified `diff` (local_edit_file), render it as a coloured diff; otherwise
+ * fall back to the default JSON/text view.
+ */
+function renderActionOutput(output: unknown): ReactNode {
+  if (output && typeof output === 'object') {
+    const obj = output as Record<string, unknown>;
+    if (typeof obj.diff === 'string' && obj.diff.length > 0) {
+      const { diff, ...rest } = obj;
+      const hasRest = Object.keys(rest).some(
+        (k) => k !== 'success' && rest[k] !== undefined && rest[k] !== null,
+      );
+      return (
+        <div className="space-y-2">
+          <UnifiedDiff diff={diff} />
+          {hasRest && (
+            <pre className="whitespace-pre-wrap break-words rounded bg-agent-muted/40 px-2 py-1.5 text-[11px] text-agent-foreground">
+              {JSON.stringify(rest, null, 2)}
+            </pre>
+          )}
+        </div>
+      );
+    }
+  }
+  if (output === undefined || output === null) return null;
+  const text = typeof output === 'string' ? output : JSON.stringify(output, null, 2);
+  return (
+    <pre className="whitespace-pre-wrap break-words rounded bg-agent-muted/40 px-2 py-1.5 text-[11px] text-agent-foreground">
+      {text}
+    </pre>
+  );
+}
+
+/** Inline tool rows for a mixed think→act timeline (no summary banner). */
+export function ToolsFlow({ actions, compact = false }: ExecutedActionsCardProps) {
+  if (!actions || actions.length === 0) return null;
+  const expanded = expandRunCodeActions(actions);
+  return (
+    <div
+      className={
+        compact
+          ? 'overflow-hidden rounded-agent-md border border-agent-border/80 bg-agent-canvas'
+          : 'my-2 overflow-hidden rounded-agent-md border border-agent-border bg-agent-canvas'
+      }
+    >
+      <div className="space-y-px">
+        {expanded.map((action, i) => (
+          <ToolExecutionCard
+            key={action.id ?? `${action.tool}-${i}`}
+            payload={actionToTool(action, i)}
+            renderOutput={renderActionOutput}
+            className="rounded-none border-0 border-t border-agent-border first:border-t-0"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function ExecutedActionsCard({ actions }: ExecutedActionsCardProps) {
+  if (!actions || actions.length === 0) return null;
+
+  const expanded = expandRunCodeActions(actions);
+  const successCount = expanded.filter((a) => deriveStatus(a) === 'succeeded').length;
+  const failureCount = expanded.filter((a) => deriveStatus(a) === 'failed').length;
+  const runningCount = expanded.filter((a) => deriveStatus(a) === 'running').length;
+
+  return (
+    <div className="my-2 overflow-hidden rounded-agent-md border border-agent-border bg-agent-canvas">
+      <div className="flex items-center justify-between border-b border-agent-border bg-agent-muted/30 px-3 py-1.5">
+        <div className="flex items-center gap-1.5 text-xs">
+          {failureCount === 0 ? (
+            <LuCircleCheck className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400" />
+          ) : (
+            <LuCircleX className="h-3.5 w-3.5 text-agent-destructive" />
+          )}
+          <span className="font-medium text-agent-foreground">
+            已自动执行 {expanded.length} 个操作
+          </span>
+        </div>
+        <span className="text-[11px] text-agent-muted-foreground">
+          {runningCount > 0
+            ? `${runningCount} 执行中`
+            : failureCount > 0
+              ? `${successCount} 成功 · ${failureCount} 失败`
+              : `全部成功`}
+        </span>
+      </div>
+      <div className="space-y-px">
+        {expanded.map((action, i) => (
+          <ToolExecutionCard
+            key={action.id ?? `${action.tool}-${i}`}
+            payload={actionToTool(action, i)}
+            renderOutput={renderActionOutput}
+            className="rounded-none border-0 border-t border-agent-border first:border-t-0"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default ExecutedActionsCard;

package/src/components/chat/InterruptedTurnCard.tsx

@@ -0,0 +1,53 @@
+/**
+ * W7-1 崩溃恢复入口卡片。
+ *
+ * 上一轮回复因应用退出/异常中断而没有完成时（local-backend 在 messages
+ * 响应里下发 `interrupted: true`——签名是 settings_kv 里残留的
+ * turn_active 标记，而非文案截断的启发式），在消息列表尾部展示本卡片：
+ * 「继续上次回复」走后端的 resume 通道（sidecar 回放 durable record 的
+ * 投影作为循环种子，用户无需重发请求）；「忽略」仅在本次挂载内隐藏卡片，
+ * 不写库——下次打开会话若标记仍在会再次提示。
+ *
+ * 用户主动停止（completionStatus: cancelled）与失败（failed）都是活进程
+ * 写下的终态，不会进入本卡片：前者是用户的明确意图，后者已有错误展示。
+ */
+import { LuTriangleAlert } from 'react-icons/lu';
+
+export interface InterruptedTurnCardProps {
+  /** 点击「继续上次回复」——触发 resume 流（不再追加用户消息）。 */
+  onContinue: () => void;
+  /** 点击「忽略」——本次挂载内隐藏卡片（不落库）。 */
+  onDismiss: () => void;
+}
+
+export function InterruptedTurnCard({ onContinue, onDismiss }: InterruptedTurnCardProps) {
+  return (
+    <div
+      role="status"
+      className="mt-1.5 flex items-center justify-between gap-3 rounded-agent-md border border-amber-400/40 bg-amber-400/10 px-3 py-2 text-xs"
+    >
+      <div className="flex items-center gap-2 text-amber-700 dark:text-amber-300">
+        <LuTriangleAlert className="h-4 w-4 shrink-0" />
+        <span>上次回复因应用退出或异常中断，未能完成。</span>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="rounded px-1.5 py-0.5 text-amber-700/80 transition-colors hover:text-amber-900 dark:text-amber-300/80 dark:hover:text-amber-100"
+        >
+          忽略
+        </button>
+        <button
+          type="button"
+          onClick={onContinue}
+          className="inline-flex items-center gap-1 rounded-full bg-agent-foreground px-3 py-1 font-medium text-agent-canvas transition hover:opacity-90"
+        >
+          继续上次回复
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default InterruptedTurnCard;

package/src/components/chat/LocalChatPanel.tsx

@@ -0,0 +1,408 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import type { ChatMessage } from '@steerable/agent-protocol';
+import { ChatPanel } from '@steerable/agent-ui';
+import type { SteerOutcome } from '@steerable/agent-ui';
+import type { LocalChat, LocalChatAgent, LocalTask } from '@/lib/local-api';
+import {
+  ChatInput,
+  type ChatInputHandle,
+  type ChatMode,
+  type ExecPolicy,
+  type MentionReference,
+} from './ChatInput';
+import { EmptyChat } from './EmptyChat';
+import { MessageList } from './MessageList';
+import type { ExecutedAction } from './ExecutedActionsCard';
+import type { ChildInfo } from './OrchestrationChildrenCard';
+import type { TurnBlock } from './turn-timeline';
+import {
+  isImageFile,
+  saveChatAttachments,
+  type AttachmentFile,
+} from '@/lib/attachments';
+
+/**
+ * LocalChatPanel — the product chat shell.
+ *
+ * History:
+ *   - Pre-0.3 of `@steerable/agent-ui`, the framework's `ChatPanel` was a
+ *     barebones monolith with no slots — so this file shipped a complete
+ *     parallel implementation.
+ *   - 0.3 introduced the compound API (`ChatPanel.Root/.Header/.Messages/.
+ *     Input/.Empty`). This file is now a thin facade that plugs in the local
+ *     rich renderers (`MessageList` with agent badges + executed-actions
+ *     cards, `ChatInput` with the meta-row agent picker + settings gear)
+ *     into the framework's structural shell.
+ *
+ * Props mirror the framework's `ChatPanelProps` so the swap in `AgentPage`
+ * remained a single import change. Two extras are accepted:
+ *   - `agents` — agent catalog for the assistant bubble badge.
+ *   - `currentAgent` — chat-level agent, used as the badge fallback while
+ *     the in-flight assistant turn hasn't flushed its `agentId` to the DB.
+ *
+ * Input value is lifted here (not inside `ChatInput`) so the empty-state
+ * `EmptyChat` can call back into us to set the textarea contents — same UX
+ * as the cloud product's `setAndFocusInputMessage`.
+ */
+
+export interface LocalChatPanelProps {
+  messages: ChatMessage[];
+  isStreaming?: boolean;
+  onSubmit: (input: { content: string; metadata?: Record<string, unknown> }) => void | Promise<void>;
+  onCancel?: () => void;
+  /** 轮中转向（streaming 期间 Enter）：注入失败由 hook 兜底为排队/直发，见 ChatInput。 */
+  onSteer?: (text: string) => Promise<SteerOutcome>;
+  /** W6-2 follow-up 排队：streaming 期间 ⌘/Ctrl+Enter 把文本排入待发队列。 */
+  onFollowUp?: (text: string) => void;
+  /** 排队待发的 follow-up 文本列表。 */
+  pendingFollowUps?: string[];
+  /** 撤回第 N 条排队中的 follow-up。 */
+  onRemoveFollowUp?: (index: number) => void;
+  className?: string;
+  inputPlaceholder?: string;
+  /**
+   * 当前会话 id。提供后，提交时上传的附件会被持久化到会话空间
+   * （`saveChatAttachments`），消息正文与图像元数据用落盘路径。落地页
+   * （尚无 chatId）可省略，由调用方在创建会话后自行持久化。
+   */
+  chatId?: string | null;
+  /** Slot rendered above the message list (header / agent picker / …). */
+  header?: ReactNode;
+  /**
+   * 空会话 hero 布局：提供后，当 messages 为空且未在流式时，整个面板渲染为
+   * 居中首屏（品牌标题 + 居中输入框，无 header）——与 /agent 落地页
+   * （EmptyChatGate）同款视觉。首条消息落地后自动切回常规布局。
+   */
+  emptyHero?: { title: string; subtitle?: string };
+  /** Override the default `EmptyChat` empty-state. */
+  emptyState?: ReactNode;
+  /** Disable the input (e.g. during initial chat-history load). */
+  disabled?: boolean;
+
+  agents: LocalChatAgent[];
+  chats?: LocalChat[];
+  currentAgent: LocalChatAgent | null;
+  selectedAgentId?: string | null;
+  onSelectAgent?: (agentId: string) => void | Promise<void>;
+
+  /**
+   * Tool calls keyed by persisted assistant message id. Forwarded straight
+   * to `MessageList`. See its prop docs for the in-flight vs historical
+   * split.
+   */
+  executedActionsByMessageId?: Record<string, ExecutedAction[]>;
+  /** In-flight tool calls — rendered under the latest assistant bubble. */
+  currentTurnActions?: ExecutedAction[];
+  timelineByMessageId?: Record<string, TurnBlock[]>;
+  currentTurnTimeline?: TurnBlock[];
+  currentTurnStartedAtMs?: number;
+  durationByMessageId?: Record<string, number>;
+  /** P3.1: in-flight child agents + per-message reconciliation map. */
+  currentTurnChildren?: ChildInfo[];
+  orchestrationChildrenByMessageId?: Record<string, ChildInfo[]>;
+  /** Current round number for the in-flight turn (1-based). */
+  currentRound?: number;
+  /**
+   * Settings gear callback for the input toolbar. Receiving this enables
+   * the gear button on `ChatInput`; AgentPage wires it to opening
+   * `LocalLlmSettingsModal`. Optional so the panel still works in places
+   * (preview harness, unit tests) without modal infra.
+   */
+  onOpenSettings?: () => void;
+  /** Extra controls on the input's left toolbar (AgentPage mounts the
+   * model/effort picker here). Forwarded to ChatInput's `toolbarExtras`. */
+  inputToolbarExtras?: ReactNode;
+  /** Slot in the composer meta row above the input box, before the agent
+   * picker (AgentPage mounts the project badge here). */
+  inputLeadingChrome?: ReactNode;
+
+  /** Current chat mode (Agent / Plan). When unset, the toggle is hidden. */
+  mode?: ChatMode;
+  /** Called when the user switches modes. */
+  onModeChange?: (mode: ChatMode) => void;
+  /** 命令沙箱档。未传 onExecPolicyChange 时不显示选择器。 */
+  execPolicy?: ExecPolicy;
+  onExecPolicyChange?: (policy: ExecPolicy) => void;
+  /** Slot rendered just above the input box (e.g. "执行此计划" 操作条). */
+  inputBanner?: ReactNode;
+  /** W1.2.1: regenerate an assistant turn (fork-preserving). */
+  onRegenerate?: (messageId: string) => Promise<void>;
+  /** W7-1: 上一轮被中断（崩溃/强杀）——消息列表尾部展示「继续上次回复」卡片。 */
+  interrupted?: boolean;
+  /** W7-1: 点击「继续上次回复」。 */
+  onContinueInterrupted?: () => void;
+  /** W7-1: 点击「忽略」（本次挂载内隐藏，不落库）。 */
+  onDismissInterrupted?: () => void;
+  /** 本次挂载期间跑完的后台任务——消息列尾部的终态通知卡。 */
+  finishedTasks?: LocalTask[];
+  /** 终态卡「查看过程」：在右侧栏打开该任务的推理过程。 */
+  onInspectTask?: (task: LocalTask) => void;
+  /** 终态卡「忽略」（本次挂载内隐藏，不落库）。 */
+  onDismissFinishedTask?: (taskId: string) => void;
+  /** 分享当前对话（截图）。落到最近一条助手消息的时间戳行。 */
+  onShare?: () => Promise<boolean>;
+}
+
+export function LocalChatPanel({
+  messages,
+  isStreaming = false,
+  onSubmit,
+  onCancel,
+  className,
+  inputPlaceholder,
+  chatId,
+  header,
+  emptyHero,
+  emptyState,
+  disabled = false,
+  agents,
+  chats = [],
+  currentAgent,
+  selectedAgentId,
+  onSelectAgent,
+  executedActionsByMessageId,
+  currentTurnActions,
+  timelineByMessageId,
+  currentTurnTimeline,
+  currentTurnStartedAtMs,
+  durationByMessageId,
+  currentTurnChildren,
+  orchestrationChildrenByMessageId,
+  currentRound,
+  onOpenSettings,
+  inputToolbarExtras,
+  inputLeadingChrome,
+  mode,
+  onModeChange,
+  execPolicy,
+  onExecPolicyChange,
+  inputBanner,
+  onSteer,
+  onFollowUp,
+  pendingFollowUps,
+  onRemoveFollowUp,
+  onRegenerate,
+  interrupted,
+  onContinueInterrupted,
+  onDismissInterrupted,
+  finishedTasks,
+  onInspectTask,
+  onDismissFinishedTask,
+  onShare,
+}: LocalChatPanelProps) {
+  const [inputValue, setInputValue] = useState('');
+  const [files, setFiles] = useState<AttachmentFile[]>([]);
+  const [mentionReferences, setMentionReferences] = useState<MentionReference[]>([]);
+  const inputRef = useRef<ChatInputHandle>(null);
+
+  const handleSelectPrompt = useCallback((prompt: string) => {
+    setInputValue(prompt);
+    // Wait for the textarea to receive the new value before pulling focus,
+    // otherwise `focusAtEnd` would land on an empty buffer.
+    requestAnimationFrame(() => {
+      inputRef.current?.focusAtEnd();
+    });
+  }, []);
+
+  const handleSubmit = useCallback(async () => {
+    let trimmed = inputValue.trim();
+    if (!trimmed && files.length === 0) return;
+
+    // 把上传的文件持久化到会话空间：成功项用落盘路径（稳定、可被 agent
+    // 读回），失败项退回原源路径。落地页（无 chatId）由调用方创建会话后
+    // 自行持久化，这里 chatId 为空时原样用源路径。
+    const resolvedFiles = chatId ? await saveChatAttachments(chatId, files) : files;
+
+    // Append file references to the user message content
+    if (resolvedFiles.length > 0) {
+      const fileRefs = resolvedFiles.map(f => `- \`${f.path}\``).join('\n');
+      if (trimmed) {
+        trimmed = `${trimmed}\n\n---\n关联文件:\n${fileRefs}`;
+      } else {
+        trimmed = `关联文件:\n${fileRefs}`;
+      }
+    }
+
+    const mentionedAgentIds = mentionReferences
+      .filter((ref) => ref.type === 'agent')
+      .map((ref) => ref.id);
+    const referencedChatIds = mentionReferences
+      .filter((ref) => ref.type === 'chat')
+      .map((ref) => ref.id);
+    // W6-3: image attachments ride as metadata so the main process reads the
+    // bytes into base64 ImageParts; the text path refs above stay so the
+    // persisted record reflects that an image was attached.
+    const imageAttachments = resolvedFiles
+      .filter((f) => isImageFile(f.path))
+      .map((f) => ({ path: f.path, name: f.name }));
+    const metadata = {
+      ...(mode === 'plan' ? { mode: 'plan' as const } : {}),
+      ...(execPolicy === 'full' ? { execPolicy: 'full' as const } : {}),
+      ...(selectedAgentId ? { agentId: selectedAgentId } : {}),
+      ...(mentionedAgentIds.length > 0 ? { mentionedAgentIds } : {}),
+      ...(referencedChatIds.length > 0 ? { referencedChatIds } : {}),
+      ...(imageAttachments.length > 0 ? { images: imageAttachments } : {}),
+    };
+
+    // Snapshot what we're about to clear so a failed submit can restore it —
+    // clearing eagerly before `onSubmit` settles used to lose the user's text
+    // (and any attachments/mentions) whenever the submit rejected.
+    const submittedFiles = files;
+    const submittedMentions = mentionReferences;
+    setInputValue('');
+    setFiles([]);
+    setMentionReferences([]);
+    try {
+      await onSubmit({
+        content: trimmed,
+        metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
+      });
+    } catch (err) {
+      // Restore so the user doesn't lose what they typed; they can retry.
+      // Callers here (ChatInput) invoke this fire-and-forget (`void onSubmit()`),
+      // so we swallow rather than rethrow into an unhandled rejection.
+      console.warn('[LocalChatPanel] submit failed, restoring input', err);
+      setInputValue(inputValue);
+      setFiles(submittedFiles);
+      setMentionReferences(submittedMentions);
+    }
+  }, [inputValue, files, mentionReferences, onSubmit, mode, execPolicy, chatId, selectedAgentId]);
+
+  // 空会话 hero：messages 为空且未在流式时整面板切到居中首屏布局。
+  const showEmptyHero = Boolean(emptyHero) && messages.length === 0 && !isStreaming;
+
+  // Sync `chat-input-box-width` CSS var so bubbles match the input width
+  // (cloud product uses 95% of the input box; we mirror that here so message
+  // bubbles + input visually align in a column).
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const containerEl = containerRef.current;
+    if (!containerEl) return;
+    const inputBox = containerEl.querySelector<HTMLElement>('.chat-input-box');
+    if (!inputBox) return;
+
+    const sync = () => {
+      const width = inputBox.getBoundingClientRect().width;
+      if (width > 0) {
+        containerEl.style.setProperty(
+          '--chat-input-box-width',
+          `${Math.round(width * 0.95)}px`,
+        );
+      }
+    };
+
+    sync();
+    const obs = new ResizeObserver(sync);
+    obs.observe(inputBox);
+    return () => obs.disconnect();
+    // hero ↔ 常规布局切换会重挂 ChatInput（DOM 位置变了），需要重新找
+    // inputBox 并重新 observe，否则气泡宽度变量停在旧节点上。
+  }, [showEmptyHero]);
+
+  const chatInputNode = (
+    <ChatInput
+      ref={inputRef}
+      value={inputValue}
+      onChange={setInputValue}
+      onSubmit={handleSubmit}
+      onCancel={onCancel}
+      onSteer={onSteer}
+      onFollowUp={onFollowUp}
+      pendingFollowUps={pendingFollowUps}
+      onRemoveFollowUp={onRemoveFollowUp}
+      isStreaming={isStreaming}
+      disabled={disabled}
+      placeholder={
+        mode === 'plan'
+          ? '描述你的目标，Agent 将先制定计划…'
+          : inputPlaceholder
+      }
+      currentAgent={currentAgent}
+      agents={agents}
+      chats={chats}
+      selectedAgentId={selectedAgentId}
+      onSelectAgent={onSelectAgent}
+      onOpenSettings={onOpenSettings}
+      toolbarExtras={inputToolbarExtras}
+      leadingChrome={inputLeadingChrome}
+      mode={mode}
+      onModeChange={onModeChange}
+      execPolicy={execPolicy}
+      onExecPolicyChange={onExecPolicyChange}
+      files={files}
+      onFilesChange={setFiles}
+      onMentionReferencesChange={setMentionReferences}
+    />
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className={`chat-panel-container flex h-full flex-col overflow-hidden ${className ?? ''}`.trim()}
+    >
+      <ChatPanel.Root className="flex h-full flex-col overflow-hidden" unstyled>
+        {showEmptyHero ? (
+          <div className="flex min-h-0 flex-1 items-center justify-center p-4 sm:p-8">
+            <div className="flex w-full max-w-2xl flex-col items-center gap-6">
+              <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-sm text-agent-muted-foreground">
+                    {emptyHero.subtitle}
+                  </p>
+                )}
+              </div>
+              <div className="w-full">
+                {inputBanner}
+                {chatInputNode}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <>
+            {/* 不用框架的 ChatPanel.Header：它默认带 border-b 下划线且 cn 是
+                纯拼接（无 tailwind-merge），类覆盖不可靠。这里用无边框的
+                普通容器，padding 由内部 ChatHeader 自带。 */}
+            {header ? (
+              <div className="flex items-center gap-2 bg-agent-canvas">{header}</div>
+            ) : null}
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+              <MessageList
+                messages={messages}
+                isStreaming={isStreaming}
+                agents={agents}
+                chats={chats}
+                currentAgent={currentAgent}
+                executedActionsByMessageId={executedActionsByMessageId}
+                currentTurnActions={currentTurnActions}
+                timelineByMessageId={timelineByMessageId}
+                currentTurnTimeline={currentTurnTimeline}
+                currentTurnStartedAtMs={currentTurnStartedAtMs}
+                durationByMessageId={durationByMessageId}
+                currentTurnChildren={currentTurnChildren}
+                orchestrationChildrenByMessageId={orchestrationChildrenByMessageId}
+                currentRound={currentRound}
+                emptyState={emptyState ?? <EmptyChat onSelectPrompt={handleSelectPrompt} />}
+                mode={mode}
+                onRegenerate={onRegenerate}
+                interrupted={interrupted}
+                onContinueInterrupted={onContinueInterrupted}
+                onDismissInterrupted={onDismissInterrupted}
+                finishedTasks={finishedTasks}
+                onInspectTask={onInspectTask}
+                onDismissFinishedTask={onDismissFinishedTask}
+                onShare={onShare}
+              />
+              {inputBanner}
+              {chatInputNode}
+            </div>
+          </>
+        )}
+      </ChatPanel.Root>
+    </div>
+  );
+}
+
+export default LocalChatPanel;