@steerable/agent-shell-web 0.6.27 → 0.6.29

package/src/components/chat/ExecutedActionsCard.tsx

@@ -1,9 +1,32 @@
 import type { ReactNode } from 'react';
-import { LuCircleCheck, LuCircleX } from 'react-icons/lu';
+import { LuCircleCheck, LuCircleX, LuListTodo } from 'react-icons/lu';
 import { ToolExecutionCard } from '@steerable/agent-ui/cards';
 import type { ToolExecutionPayload } from '@steerable/agent-protocol';
+import type { LocalChatAgent } from '@/lib/local-api';
 import { UnifiedDiff } from './UnifiedDiff';
-import { summarizeRunCodeAction, summarizeWebAction, expandRunCodeActions } from './executed-actions-model';
+import {
+  summarizeRunCodeAction,
+  summarizeWebAction,
+  expandRunCodeActions,
+  parseDelegateSubagent,
+  summarizeDelegateSubagent,
+  delegateSubagentDisplayName,
+  parseTaskRun,
+  parseTaskToolOutput,
+  parseToolEnvelope,
+  humanizeDelegateError,
+  summarizeTaskAction,
+  taskToolLabel,
+  isTaskFamilyTool,
+  inspectableTaskFromAction,
+  shortTaskId,
+  type InspectTaskInput,
+} from './executed-actions-model';
+import {
+  findAgentForProfile,
+  matchChildForDelegation,
+  type ChildInfo,
+} from './orchestration-children-model';
 
 /**
  * ExecutedActionsCard — visual surface for the `executed_actions` SSE event
@@ -42,15 +65,26 @@ interface ExecutedActionsCardProps {
   actions: ExecutedAction[];
   /** Drop the outer card chrome when nested in a turn-process group. */
   compact?: boolean;
+  /** Show args/output instead of a one-line summary. Defaults to collapsed. */
+  defaultExpanded?: boolean;
+  /** Used to map `delegate_subagent` 画像名 to the agent's display name + color. */
+  agents?: ReadonlyArray<Pick<LocalChatAgent, 'id' | 'slug' | 'name' | 'color'>>;
+  chatId?: string | null;
+  onInspectTask?: (task: InspectTaskInput) => void;
+  /**
+   * 本回合的子代理生命周期。委派行据此找到子代理自己的 record，点一下就能
+   * 在右侧看它的推理过程。
+   */
+  orchestrationChildren?: ChildInfo[];
 }
 
 function deriveStatus(action: ExecutedAction): ToolExecutionPayload['status'] {
   const result = action.result;
   if (result === undefined || result === null) return 'running';
+  const env = parseToolEnvelope(result);
+  if (env.success === false || env.error) return 'failed';
+  if (env.success === true) return 'succeeded';
   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';
 }
@@ -83,15 +117,22 @@ function sandboxBadge(sandbox: ExecutedAction['sandbox']): string | null {
 
 function actionToTool(action: ExecutedAction, idx: number): ToolExecutionPayload {
   const status = deriveStatus(action);
+  const env = parseToolEnvelope(action.result);
   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
+    status === 'failed'
+      ? action.tool === 'delegate_subagent'
+        ? 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);
@@ -144,10 +185,312 @@ function renderActionOutput(output: unknown): ReactNode {
   );
 }
 
+const BUILTIN_DELEGATE_COLORS: Record<string, string> = {
+  explore: '#0ea5e9',
+  research: '#2563eb',
+  coder: '#16a34a',
+  'general-purpose': '#7c3aed',
+};
+
+function delegateColor(
+  profile: string | null,
+  agents: ReadonlyArray<Pick<LocalChatAgent, 'id' | 'slug' | 'name' | 'color'>>,
+): string {
+  if (profile) {
+    const agent = findAgentForProfile(profile, agents);
+    if (agent?.color) return agent.color;
+    if (BUILTIN_DELEGATE_COLORS[profile]) return BUILTIN_DELEGATE_COLORS[profile];
+  }
+  return '#7c3aed';
+}
+
+function DelegateLead({
+  name,
+  color,
+}: {
+  name: string;
+  color: string;
+}) {
+  return (
+    <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: color }}
+      aria-hidden
+    >
+      {name.trim()[0]?.toUpperCase() ?? 'A'}
+    </span>
+  );
+}
+
+function renderDelegateArgs(
+  args: unknown,
+  agents: ReadonlyArray<Pick<LocalChatAgent, 'id' | 'slug' | 'name' | 'color'>>,
+): ReactNode {
+  const { profile, task } = parseDelegateSubagent(args);
+  if (!profile && !task) {
+    return (
+      <pre className="whitespace-pre-wrap break-words rounded bg-agent-muted/40 px-2 py-1.5 text-[11px] text-agent-foreground">
+        {typeof args === 'string' ? args : JSON.stringify(args, null, 2)}
+      </pre>
+    );
+  }
+  // 自建智能体没有 slug 时画像名是 `agent-<id 片段>`，对用户无意义——出中文名。
+  const displayName = delegateSubagentDisplayName(profile, agents);
+  return (
+    <div className="space-y-1.5 text-[11px] text-agent-foreground">
+      {profile ? (
+        <section>
+          <div className="mb-0.5 text-[10px] uppercase tracking-wider text-agent-muted-foreground">
+            子代理
+          </div>
+          <div className="text-[11px]">{displayName}</div>
+        </section>
+      ) : null}
+      {task ? (
+        <section>
+          <div className="mb-0.5 text-[10px] uppercase tracking-wider text-agent-muted-foreground">
+            任务
+          </div>
+          <pre className="whitespace-pre-wrap break-words rounded bg-agent-muted/40 px-2 py-1.5">
+            {task}
+          </pre>
+        </section>
+      ) : null}
+    </div>
+  );
+}
+
+function renderDelegateOutput(output: unknown): ReactNode {
+  const env = parseToolEnvelope(output);
+  if (env.message) {
+    return (
+      <div className="space-y-1.5">
+        {kvBlock(
+          '回报',
+          <pre className="whitespace-pre-wrap break-words rounded bg-agent-muted/40 px-2 py-1.5">
+            {env.message}
+          </pre>,
+        )}
+      </div>
+    );
+  }
+  if (env.error || env.success === false) {
+    return <div className="text-[11px] text-agent-muted-foreground">没有文字回报</div>;
+  }
+  return renderActionOutput(output);
+}
+
+function TaskLead() {
+  return (
+    <span
+      data-task-lead=""
+      className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded bg-amber-100/80 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300"
+      aria-hidden
+    >
+      <LuListTodo className="h-2.5 w-2.5" />
+    </span>
+  );
+}
+
+const TASK_STATUS_ZH: Record<string, string> = {
+  running: '已启动',
+  blocked: '等待依赖',
+  completed: '已完成',
+  failed: '失败',
+};
+
+function kvBlock(label: string, value: ReactNode): ReactNode {
+  return (
+    <section>
+      <div className="mb-0.5 text-[10px] uppercase tracking-wider text-agent-muted-foreground">
+        {label}
+      </div>
+      <div className="text-[11px] text-agent-foreground">{value}</div>
+    </section>
+  );
+}
+
+function renderTaskArgs(tool: string, args: unknown): ReactNode {
+  if (tool === 'task_run') {
+    const parsed = parseTaskRun(args);
+    if (!parsed.task && parsed.dependsOn.length === 0 && !parsed.worktree) {
+      return renderActionOutput(args);
+    }
+    return (
+      <div className="space-y-1.5">
+        {parsed.task
+          ? kvBlock(
+              '任务',
+              <pre className="whitespace-pre-wrap break-words rounded bg-agent-muted/40 px-2 py-1.5">
+                {parsed.task}
+              </pre>,
+            )
+          : null}
+        {parsed.dependsOn.length > 0
+          ? kvBlock('依赖', parsed.dependsOn.map(shortTaskId).join('、'))
+          : null}
+        {parsed.worktree
+          ? kvBlock('工作区', parsed.worktreeName ? `隔离 · ${parsed.worktreeName}` : '隔离')
+          : null}
+      </div>
+    );
+  }
+  const obj = args && typeof args === 'object' ? (args as Record<string, unknown>) : null;
+  const taskId = typeof obj?.taskId === 'string' ? obj.taskId : null;
+  const message = typeof obj?.message === 'string' ? obj.message : null;
+  if (!taskId && !message) return renderActionOutput(args);
+  return (
+    <div className="space-y-1.5">
+      {taskId ? kvBlock('编号', <span className="font-mono">{shortTaskId(taskId)}</span>) : null}
+      {message
+        ? kvBlock(
+            '消息',
+            <pre className="whitespace-pre-wrap break-words rounded bg-agent-muted/40 px-2 py-1.5">
+              {message}
+            </pre>,
+          )
+        : null}
+    </div>
+  );
+}
+
+function renderTaskOutput(output: unknown): ReactNode {
+  const parsed = parseTaskToolOutput(output);
+  if (parsed.items.length === 0 && !parsed.hint) {
+    return renderActionOutput(output);
+  }
+  return (
+    <div className="space-y-2">
+      {parsed.items.map((item, index) => (
+        <div key={item.taskId ?? `task-${index}`} className="space-y-1.5">
+          {item.taskId
+            ? kvBlock('编号', <span className="font-mono">{shortTaskId(item.taskId)}</span>)
+            : null}
+          {item.status ? kvBlock('状态', TASK_STATUS_ZH[item.status] ?? item.status) : null}
+          {item.task
+            ? kvBlock(
+                '任务',
+                <pre className="whitespace-pre-wrap break-words rounded bg-agent-muted/40 px-2 py-1.5">
+                  {item.task}
+                </pre>,
+              )
+            : null}
+          {item.worktreeLabel ? kvBlock('工作区', item.worktreeLabel) : null}
+          {item.hint ? kvBlock('说明', item.hint) : null}
+          {item.answer
+            ? kvBlock(
+                '结果',
+                <pre className="whitespace-pre-wrap break-words rounded bg-agent-muted/40 px-2 py-1.5">
+                  {item.answer}
+                </pre>,
+              )
+            : null}
+          {item.error ? kvBlock('原因', item.error) : null}
+        </div>
+      ))}
+      {parsed.hint && parsed.items.every((item) => item.hint !== parsed.hint)
+        ? kvBlock('说明', parsed.hint)
+        : null}
+    </div>
+  );
+}
+
+function toolCardExtras(
+  action: ExecutedAction,
+  agents: ReadonlyArray<Pick<LocalChatAgent, 'id' | 'slug' | 'name' | 'color'>>,
+): {
+  label?: string;
+  lead?: ReactNode;
+  renderArgs?: (args: unknown) => ReactNode;
+  renderOutput?: (output: unknown) => ReactNode;
+} {
+  if (action.tool === 'delegate_subagent') {
+    const { profile } = parseDelegateSubagent(action.arguments);
+    const displayName = delegateSubagentDisplayName(profile, agents);
+    return {
+      label: `委派 · ${displayName}`,
+      lead: <DelegateLead name={displayName} color={delegateColor(profile, agents)} />,
+      renderArgs: (args) => renderDelegateArgs(args, agents),
+      renderOutput: renderDelegateOutput,
+    };
+  }
+  if (isTaskFamilyTool(action.tool)) {
+    return {
+      label: taskToolLabel(action.tool, action.arguments) ?? undefined,
+      lead: <TaskLead />,
+      renderArgs: (args) => renderTaskArgs(action.tool, args),
+      renderOutput: renderTaskOutput,
+    };
+  }
+  return { renderOutput: renderActionOutput };
+}
+
+function inspectActivate(
+  action: ExecutedAction,
+  chatId: string | null | undefined,
+  onInspectTask?: (task: InspectTaskInput) => void,
+  child?: ChildInfo,
+): { onActivate?: () => void; activateTitle?: string } {
+  if (!chatId || !onInspectTask) return {};
+  if (action.tool === 'delegate_subagent') {
+    if (!child?.recordId) return {};
+    const { task } = parseDelegateSubagent(action.arguments);
+    return {
+      onActivate: () =>
+        onInspectTask({
+          id: child.childId,
+          chatId,
+          recordId: child.recordId,
+          live: child.status === 'running',
+          title: task ?? '子代理任务',
+        }),
+      activateTitle: '查看子代理执行过程',
+    };
+  }
+  const target = inspectableTaskFromAction(action.tool, action.arguments, action.result);
+  if (!target) return {};
+  return {
+    onActivate: () => onInspectTask({ id: target.id, chatId, title: target.title }),
+    activateTitle: '查看后台执行过程',
+  };
+}
+
+/** 逐行配对委派与子代理：同画像多份活时按出现顺序对上。 */
+function delegationChildren(
+  actions: readonly ExecutedAction[],
+  children: readonly ChildInfo[],
+): Map<number, ChildInfo> {
+  const paired = new Map<number, ChildInfo>();
+  if (children.length === 0) return paired;
+  const taken = new Set<string>();
+  actions.forEach((action, index) => {
+    if (action.tool !== 'delegate_subagent') return;
+    const match = matchChildForDelegation(
+      parseDelegateSubagent(action.arguments),
+      children,
+      taken,
+    );
+    if (!match) return;
+    taken.add(match.childId);
+    paired.set(index, match);
+  });
+  return paired;
+}
+
 /** Inline tool rows for a mixed think→act timeline (no summary banner). */
-export function ToolsFlow({ actions, compact = false }: ExecutedActionsCardProps) {
+export function ToolsFlow({
+  actions,
+  compact = false,
+  defaultExpanded = false,
+  agents = [],
+  chatId = null,
+  onInspectTask,
+  orchestrationChildren = [],
+}: ExecutedActionsCardProps) {
   if (!actions || actions.length === 0) return null;
   const expanded = expandRunCodeActions(actions);
+  const childByIndex = delegationChildren(expanded, orchestrationChildren);
   return (
     <div
       className={
@@ -157,30 +500,47 @@ export function ToolsFlow({ actions, compact = false }: ExecutedActionsCardProps
       }
     >
       <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"
-          />
-        ))}
+        {expanded.map((action, i) => {
+          const extras = toolCardExtras(action, agents);
+          const inspect = inspectActivate(action, chatId, onInspectTask, childByIndex.get(i));
+          return (
+            <ToolExecutionCard
+              key={action.id ?? `${action.tool}-${i}`}
+              payload={actionToTool(action, i)}
+              defaultExpanded={defaultExpanded}
+              label={extras.label}
+              lead={extras.lead}
+              renderArgs={extras.renderArgs}
+              renderOutput={extras.renderOutput ?? renderActionOutput}
+              onActivate={inspect.onActivate}
+              activateTitle={inspect.activateTitle}
+              className="rounded-none border-0 border-t border-agent-border first:border-t-0"
+            />
+          );
+        })}
       </div>
     </div>
   );
 }
 
-export function ExecutedActionsCard({ actions }: ExecutedActionsCardProps) {
+export function ExecutedActionsCard({
+  actions,
+  agents = [],
+  chatId = null,
+  onInspectTask,
+  orchestrationChildren = [],
+}: ExecutedActionsCardProps) {
   if (!actions || actions.length === 0) return null;
 
   const expanded = expandRunCodeActions(actions);
+  const childByIndex = delegationChildren(expanded, orchestrationChildren);
   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="my-1.5 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-2.5 py-1">
         <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" />
@@ -200,14 +560,23 @@ export function ExecutedActionsCard({ actions }: ExecutedActionsCardProps) {
         </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"
-          />
-        ))}
+        {expanded.map((action, i) => {
+          const extras = toolCardExtras(action, agents);
+          const inspect = inspectActivate(action, chatId, onInspectTask, childByIndex.get(i));
+          return (
+            <ToolExecutionCard
+              key={action.id ?? `${action.tool}-${i}`}
+              payload={actionToTool(action, i)}
+              label={extras.label}
+              lead={extras.lead}
+              renderArgs={extras.renderArgs}
+              renderOutput={extras.renderOutput ?? renderActionOutput}
+              onActivate={inspect.onActivate}
+              activateTitle={inspect.activateTitle}
+              className="rounded-none border-0 border-t border-agent-border first:border-t-0"
+            />
+          );
+        })}
       </div>
     </div>
   );

package/src/components/chat/FilePathCode.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import { openLocalPath, type ResolvedLocalPath } from '@/lib/local-api';
 import { peekResolvedPath, subscribeResolvedPath } from './path-mentions';
+import { splitTurnFilePath } from './turn-files';
 
 /**
  * 行内代码里的文件路径：后端确认存在后变成可点击，点击用系统默认应用打开。
@@ -59,7 +60,7 @@ export function FilePathCode({ candidate, chatId, children, ...rest }: FilePathC
         openError ? 'text-red-600 dark:text-red-400' : ''
       }`}
     >
-      {children}
+      {splitTurnFilePath(resolved.path).name || children}
     </button>
   );
 }

package/src/components/chat/LocalChatPanel.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import { useCallback, useEffect, useMemo, 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';
@@ -13,9 +13,13 @@ import {
 import { EmptyChat } from './EmptyChat';
 import { MessageList } from './MessageList';
 import type { ExecutedAction } from './ExecutedActionsCard';
+import type { InspectTaskInput } from './executed-actions-model';
 import type { ChildInfo } from './OrchestrationChildrenCard';
 import type { TurnBlock } from './turn-timeline';
 import type { TurnFile } from './turn-files';
+import type { LlmSpeedSnapshot } from './process-status';
+import { SessionTodoList } from './SessionTodoList';
+import { resolveLatestSessionTodos } from './todo-list-model';
 import {
   isImageFile,
   saveChatAttachments,
@@ -98,6 +102,8 @@ export interface LocalChatPanelProps {
   currentTurnTimeline?: TurnBlock[];
   currentTurnStartedAtMs?: number;
   durationByMessageId?: Record<string, number>;
+  currentLlmSpeed?: LlmSpeedSnapshot;
+  llmSpeedByMessageId?: Record<string, LlmSpeedSnapshot>;
   /** 回合产物文件列表（按落库消息 id 键控），转发给 MessageList。 */
   turnFilesByMessageId?: Record<string, TurnFile[]>;
   /** 当轮产物文件（流尾声到达、尚未归档到落库 id 的尾部消息用）。 */
@@ -141,7 +147,7 @@ export interface LocalChatPanelProps {
   /** 本次挂载期间跑完的后台任务——消息列尾部的终态通知卡。 */
   finishedTasks?: LocalTask[];
   /** 终态卡「查看过程」：在右侧栏打开该任务的推理过程。 */
-  onInspectTask?: (task: LocalTask) => void;
+  onInspectTask?: (task: InspectTaskInput) => void;
   /** 终态卡「忽略」（本次挂载内隐藏，不落库）。 */
   onDismissFinishedTask?: (taskId: string) => void;
   /** 分享当前对话（截图）。落到最近一条助手消息的时间戳行。 */
@@ -176,6 +182,8 @@ export function LocalChatPanel({
   currentTurnTimeline,
   currentTurnStartedAtMs,
   durationByMessageId,
+  currentLlmSpeed,
+  llmSpeedByMessageId,
   turnFilesByMessageId,
   currentTurnFiles,
   currentTurnChildren,
@@ -225,7 +233,8 @@ export function LocalChatPanel({
     // 把上传的文件持久化到会话空间：成功项用落盘路径（稳定、可被 agent
     // 读回），失败项退回原源路径。落地页（无 chatId）由调用方创建会话后
     // 自行持久化，这里 chatId 为空时原样用源路径。
-    const resolvedFiles = chatId ? await saveChatAttachments(chatId, files) : files;
+    const resolvedFiles =
+      chatId && files.length > 0 ? await saveChatAttachments(chatId, files) : files;
 
     // Append file references to the user message content
     if (resolvedFiles.length > 0) {
@@ -285,9 +294,26 @@ export function LocalChatPanel({
   // 空会话 hero：messages 为空且未在流式时整面板切到居中首屏布局。
   const showEmptyHero = Boolean(emptyHero) && messages.length === 0 && !isStreaming;
 
+  const sessionTodos = useMemo(
+    () =>
+      resolveLatestSessionTodos({
+        messages,
+        executedActionsByMessageId,
+        currentTurnActions,
+        timelineByMessageId,
+        currentTurnTimeline,
+      }),
+    [
+      messages,
+      executedActionsByMessageId,
+      currentTurnActions,
+      timelineByMessageId,
+      currentTurnTimeline,
+    ],
+  );
+
   // 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).
+  // (mirrors the rendered input box width so message bubbles + input visually align in a column).
   const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     const containerEl = containerRef.current;
@@ -300,7 +326,7 @@ export function LocalChatPanel({
       if (width > 0) {
         containerEl.style.setProperty(
           '--chat-input-box-width',
-          `${Math.round(width * 0.95)}px`,
+          `${Math.round(width)}px`,
         );
       }
     };
@@ -339,6 +365,7 @@ export function LocalChatPanel({
       onOpenSettings={onOpenSettings}
       toolbarExtras={inputToolbarExtras}
       leadingChrome={inputLeadingChrome}
+      trailingChrome={sessionTodos ? <SessionTodoList todos={sessionTodos} /> : undefined}
       mode={mode}
       onModeChange={onModeChange}
       execPolicy={execPolicy}
@@ -356,14 +383,14 @@ export function LocalChatPanel({
     >
       <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="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-sm text-agent-muted-foreground">
+                  <p className="mt-1.5 text-xs text-agent-muted-foreground">
                     {emptyHero.subtitle}
                   </p>
                 )}
@@ -396,6 +423,8 @@ export function LocalChatPanel({
                 currentTurnTimeline={currentTurnTimeline}
                 currentTurnStartedAtMs={currentTurnStartedAtMs}
                 durationByMessageId={durationByMessageId}
+                currentLlmSpeed={currentLlmSpeed}
+                llmSpeedByMessageId={llmSpeedByMessageId}
                 turnFilesByMessageId={turnFilesByMessageId}
                 currentTurnFiles={currentTurnFiles}
                 currentTurnChildren={currentTurnChildren}
@@ -414,8 +443,10 @@ export function LocalChatPanel({
                 suggestedReplies={suggestedReplies}
                 onSelectSuggestion={onSelectSuggestion}
               />
-              {inputBanner}
-              {chatInputNode}
+              <div className="mx-auto w-full max-w-3xl">
+                {inputBanner}
+                {chatInputNode}
+              </div>
             </div>
           </>
         )}