@steerable/agent-shell-web 0.6.20 → 0.6.21

package/src/components/chat/FilePathCode.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { openLocalPath, type ResolvedLocalPath } from '@/lib/local-api';
+import { peekResolvedPath, subscribeResolvedPath } from './path-mentions';
+
+/**
+ * 行内代码里的文件路径：后端确认存在后变成可点击，点击用系统默认应用打开。
+ *
+ * 未确认存在（或后端不可达）时渲染成与普通行内代码完全一致的外观——路径
+ * 靠形状判断挑出，误报难免，不能给点不开的假 affordance。
+ */
+
+const INLINE_CODE_CLASS =
+  'rounded bg-agent-muted px-1 py-0.5 font-mono text-[0.85em] text-agent-foreground';
+
+interface FilePathCodeProps extends ComponentPropsWithoutRef<'code'> {
+  /** 行内代码的纯文本，即待解析的路径字面量。 */
+  candidate: string;
+  /** 当前对话（相对路径按其绑定项目根解析），落地页可缺省。 */
+  chatId?: string | null;
+  children: ReactNode;
+}
+
+export function FilePathCode({ candidate, chatId, children, ...rest }: FilePathCodeProps) {
+  const [resolved, setResolved] = useState<ResolvedLocalPath | null>(
+    () => peekResolvedPath(candidate, chatId) ?? null,
+  );
+  const [openError, setOpenError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setOpenError(null);
+    return subscribeResolvedPath(candidate, chatId, (entry) => setResolved(entry));
+  }, [candidate, chatId]);
+
+  if (!resolved) {
+    return (
+      <code {...rest} className={INLINE_CODE_CLASS}>
+        {children}
+      </code>
+    );
+  }
+
+  const handleClick = async () => {
+    setOpenError(null);
+    try {
+      const result = await openLocalPath(resolved.path);
+      if (!result.success) setOpenError(result.error || '打开失败');
+    } catch (err) {
+      setOpenError(err instanceof Error ? err.message : '打开失败');
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      data-file-path-chip=""
+      onClick={handleClick}
+      title={openError ? `${resolved.path}（${openError}）` : `点击打开 ${resolved.path}`}
+      className={`${INLINE_CODE_CLASS} cursor-pointer underline decoration-dotted underline-offset-2 transition-colors hover:bg-agent-accent/15 hover:text-agent-accent ${
+        openError ? 'text-red-600 dark:text-red-400' : ''
+      }`}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/chat/LocalChatPanel.tsx

@@ -15,6 +15,7 @@ import { MessageList } from './MessageList';
 import type { ExecutedAction } from './ExecutedActionsCard';
 import type { ChildInfo } from './OrchestrationChildrenCard';
 import type { TurnBlock } from './turn-timeline';
+import type { TurnFile } from './turn-files';
 import {
   isImageFile,
   saveChatAttachments,
@@ -97,6 +98,10 @@ export interface LocalChatPanelProps {
   currentTurnTimeline?: TurnBlock[];
   currentTurnStartedAtMs?: number;
   durationByMessageId?: Record<string, number>;
+  /** 回合产物文件列表（按落库消息 id 键控），转发给 MessageList。 */
+  turnFilesByMessageId?: Record<string, TurnFile[]>;
+  /** 当轮产物文件（流尾声到达、尚未归档到落库 id 的尾部消息用）。 */
+  currentTurnFiles?: TurnFile[];
   /** P3.1: in-flight child agents + per-message reconciliation map. */
   currentTurnChildren?: ChildInfo[];
   orchestrationChildrenByMessageId?: Record<string, ChildInfo[]>;
@@ -141,6 +146,11 @@ export interface LocalChatPanelProps {
   onDismissFinishedTask?: (taskId: string) => void;
   /** 分享当前对话（截图）。落到最近一条助手消息的时间戳行。 */
   onShare?: () => Promise<boolean>;
+  /**
+   * 最近一条助手回复下的下一轮输入建议。点击即作为新用户消息发出。
+   */
+  suggestedReplies?: string[];
+  onSelectSuggestion?: (text: string) => void;
 }
 
 export function LocalChatPanel({
@@ -166,6 +176,8 @@ export function LocalChatPanel({
   currentTurnTimeline,
   currentTurnStartedAtMs,
   durationByMessageId,
+  turnFilesByMessageId,
+  currentTurnFiles,
   currentTurnChildren,
   orchestrationChildrenByMessageId,
   currentRound,
@@ -189,6 +201,8 @@ export function LocalChatPanel({
   onInspectTask,
   onDismissFinishedTask,
   onShare,
+  suggestedReplies,
+  onSelectSuggestion,
 }: LocalChatPanelProps) {
   const [inputValue, setInputValue] = useState('');
   const [files, setFiles] = useState<AttachmentFile[]>([]);
@@ -374,6 +388,7 @@ export function LocalChatPanel({
                 isStreaming={isStreaming}
                 agents={agents}
                 chats={chats}
+                chatId={chatId}
                 currentAgent={currentAgent}
                 executedActionsByMessageId={executedActionsByMessageId}
                 currentTurnActions={currentTurnActions}
@@ -381,6 +396,8 @@ export function LocalChatPanel({
                 currentTurnTimeline={currentTurnTimeline}
                 currentTurnStartedAtMs={currentTurnStartedAtMs}
                 durationByMessageId={durationByMessageId}
+                turnFilesByMessageId={turnFilesByMessageId}
+                currentTurnFiles={currentTurnFiles}
                 currentTurnChildren={currentTurnChildren}
                 orchestrationChildrenByMessageId={orchestrationChildrenByMessageId}
                 currentRound={currentRound}
@@ -394,6 +411,8 @@ export function LocalChatPanel({
                 onInspectTask={onInspectTask}
                 onDismissFinishedTask={onDismissFinishedTask}
                 onShare={onShare}
+                suggestedReplies={suggestedReplies}
+                onSelectSuggestion={onSelectSuggestion}
               />
               {inputBanner}
               {chatInputNode}

package/src/components/chat/Markdown.tsx

@@ -18,6 +18,8 @@ import {
   type SkillItem,
 } from '@/lib/slash-sources';
 import { PlanTodoList } from './PlanTodoList';
+import { FilePathCode } from './FilePathCode';
+import { looksLikeFilePath } from './path-mentions';
 
 /**
  * Markdown renderer shared by `UserMessage` and `AssistantMessage`.
@@ -146,7 +148,31 @@ const components: Components = {
   ),
 
   // ── Code (inline + block) ─────────────────────────────────────────────
-  code: (props) => {
+  code: renderCode(null),
+  pre: (props: ComponentPropsWithoutRef<'pre'>) => {
+    // A ```plan fence arrives as <pre><code class="language-plan">…</code></pre>.
+    // The code renderer above already swaps the inner node for PlanTodoList;
+    // here we drop the <pre> shell so the card isn't boxed in a code block.
+    if (containsPlanCode(props.children)) {
+      return <>{props.children}</>;
+    }
+    return (
+      <pre
+        {...props}
+        className="my-2 overflow-x-auto rounded-md border border-agent-border bg-agent-muted/60 p-2.5 text-[12px] leading-relaxed text-agent-foreground"
+      />
+    );
+  },
+};
+
+/**
+ * 行内代码 / 代码块渲染器。`chatId` 只影响行内代码：形状上像本地路径的
+ * 字面量交给 FilePathCode，由它经后端确认存在后变成可点击（相对路径按
+ * 该对话绑定的项目根解析）。代码块内的路径不参与——整块代码是给人读/
+ * 复制的，逐 token 挑路径会把块结构打散。
+ */
+function renderCode(chatId: string | null): Components['code'] {
+  return (props) => {
     const { children, className, ...rest } = props as ComponentPropsWithoutRef<'code'> & {
       // react-markdown v9 dropped the `inline` typed prop. Distinguish by
       // language fence (the only time class is set is for fenced blocks
@@ -167,6 +193,14 @@ const components: Components = {
         </code>
       );
     }
+    const text = childrenToText(children);
+    if (looksLikeFilePath(text)) {
+      return (
+        <FilePathCode {...rest} candidate={text.trim()} chatId={chatId}>
+          {children}
+        </FilePathCode>
+      );
+    }
     return (
       <code
         {...rest}
@@ -175,22 +209,8 @@ const components: Components = {
         {children}
       </code>
     );
-  },
-  pre: (props: ComponentPropsWithoutRef<'pre'>) => {
-    // A ```plan fence arrives as <pre><code class="language-plan">…</code></pre>.
-    // The code renderer above already swaps the inner node for PlanTodoList;
-    // here we drop the <pre> shell so the card isn't boxed in a code block.
-    if (containsPlanCode(props.children)) {
-      return <>{props.children}</>;
-    }
-    return (
-      <pre
-        {...props}
-        className="my-2 overflow-x-auto rounded-md border border-agent-border bg-agent-muted/60 p-2.5 text-[12px] leading-relaxed text-agent-foreground"
-      />
-    );
-  },
-};
+  };
+}
 
 function isPlanCodeClass(className: unknown): boolean {
   return typeof className === 'string' && className.split(/\s+/).includes('language-plan');
@@ -359,6 +379,11 @@ interface MarkdownProps {
   skills?: SkillItem[];
   /** MCP tools behind `/mcp__srv__tool` chips. */
   mcpTools?: McpToolItem[];
+  /**
+   * 当前对话。行内代码里的路径要按它绑定的项目根解析相对路径；缺省时
+   * 相对路径按 home 解析（同无项目对话里 exec 的缺省 cwd）。
+   */
+  chatId?: string | null;
 }
 
 /**
@@ -401,15 +426,19 @@ export function Markdown({
   chats = [],
   skills = [],
   mcpTools = [],
+  chatId = null,
 }: MarkdownProps) {
-  const baseComponents: Components = inlineParagraph
-    ? {
-        ...components,
-        p: (props: ComponentPropsWithoutRef<'p'>) => (
-          <span style={{ whiteSpace: 'pre-line' }} {...props} />
-        ),
-      }
-    : components;
+  const baseComponents: Components = {
+    ...components,
+    code: renderCode(chatId),
+    ...(inlineParagraph
+      ? {
+          p: (props: ComponentPropsWithoutRef<'p'>) => (
+            <span style={{ whiteSpace: 'pre-line' }} {...props} />
+          ),
+        }
+      : {}),
+  };
 
   const finalComponents = withTokens(baseComponents, (node) =>
     renderTextWithMentions(node, agents, chats, skills, mcpTools),

package/src/components/chat/MessageList.tsx

@@ -13,10 +13,12 @@ import { UserMessage } from './UserMessage';
 import { AssistantMessage } from './AssistantMessage';
 import { InterruptedTurnCard } from './InterruptedTurnCard';
 import { TaskOutcomeCards } from './TaskOutcomeCards';
+import { SuggestedReplies } from './SuggestedReplies';
 import type { ExecutedAction } from './ExecutedActionsCard';
 import type { ChildInfo } from './OrchestrationChildrenCard';
 import type { ChatMode } from './ChatInput';
 import type { TurnBlock } from './turn-timeline';
+import type { TurnFile } from './turn-files';
 import { inferDurationMs, readPersistedDurationMs } from './elapsed';
 
 /**
@@ -55,6 +57,11 @@ interface MessageListProps {
   emptyState?: ReactNode;
   agents: LocalChatAgent[];
   chats?: LocalChat[];
+  /**
+   * 当前对话。正文行内代码里的路径按其绑定项目根解析后，确认存在的变成
+   * 可点击（见 FilePathCode）。
+   */
+  chatId?: string | null;
   currentAgent: LocalChatAgent | null;
   /**
    * Tool calls keyed by the persisted message id (post-stream). Used for
@@ -73,6 +80,17 @@ interface MessageListProps {
   currentTurnStartedAtMs?: number;
   /** Frozen duration keyed by assistant message id (live freeze + history). */
   durationByMessageId?: Record<string, number>;
+  /**
+   * 回合产物文件列表，按落库消息 id 键控（live 回合在 message_id 事件时
+   * 归档；历史回合从 messageMetadata.turnFiles 水合）。
+   */
+  turnFilesByMessageId?: Record<string, TurnFile[]>;
+  /**
+   * 当轮产物文件：turn_files 事件在流尾声到达，此时尾部助手消息仍挂着
+   * 占位 id（框架不会在 message_id 后改写它），归档 map 按键查不到——
+   * 与 currentTurnActions 同款尾部回退。
+   */
+  currentTurnFiles?: TurnFile[];
   /**
    * Tool calls accumulated for the in-flight assistant message that the
    * backend hasn't assigned a DB id to yet. Rendered under the latest
@@ -116,6 +134,11 @@ interface MessageListProps {
   onDismissFinishedTask?: (taskId: string) => void;
   /** 分享当前对话（截图）。只画在最近一条助手消息的时间戳行上。 */
   onShare?: () => Promise<boolean>;
+  /**
+   * 最近一条助手回复下的下一轮输入建议（WorkBuddy 式）。只在非流式时渲染。
+   */
+  suggestedReplies?: string[];
+  onSelectSuggestion?: (text: string) => void;
 }
 
 export function MessageList({
@@ -124,6 +147,7 @@ export function MessageList({
   emptyState,
   agents,
   chats = [],
+  chatId = null,
   currentAgent,
   executedActionsByMessageId,
   currentTurnActions,
@@ -131,6 +155,8 @@ export function MessageList({
   currentTurnTimeline,
   currentTurnStartedAtMs,
   durationByMessageId,
+  turnFilesByMessageId,
+  currentTurnFiles,
   currentTurnChildren,
   orchestrationChildrenByMessageId,
   currentRound,
@@ -143,6 +169,8 @@ export function MessageList({
   onInspectTask,
   onDismissFinishedTask,
   onShare,
+  suggestedReplies,
+  onSelectSuggestion,
 }: MessageListProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const endRef = useRef<HTMLDivElement>(null);
@@ -196,10 +224,11 @@ export function MessageList({
   const lastTimelineSig = currentTurnTimeline
     ?.map((block) => (block.type === 'tools' ? `t${block.actions.length}` : `c${block.content.length}`))
     .join('|') ?? '';
+  const suggestedSig = suggestedReplies?.join('\0') ?? '';
   useEffect(() => {
     if (!isAtBottom) return;
     scrollToBottom('smooth');
-  }, [lastMessageId, lastContentLen, lastTimelineSig, isAtBottom, scrollToBottom]);
+  }, [lastMessageId, lastContentLen, lastTimelineSig, suggestedSig, isAtBottom, scrollToBottom]);
 
   return (
     <div className="relative flex-1 overflow-hidden">
@@ -253,6 +282,12 @@ export function MessageList({
               const turnTimeline = persistedTimeline
                 ?? (isStreamingTail || isCurrentTimelineTail ? currentTurnTimeline : undefined);
 
+              const persistedTurnFiles = turnFilesByMessageId?.[message.id];
+              const isTurnFilesTail =
+                isLast && currentTurnFiles !== undefined && currentTurnFiles.length > 0;
+              const turnFiles = persistedTurnFiles
+                ?? (isTurnFilesTail ? currentTurnFiles : undefined);
+
               const metadataJson =
                 typeof message.messageMetadata === 'string'
                   ? message.messageMetadata
@@ -271,23 +306,36 @@ export function MessageList({
                   ?? inferDurationMs(previousUserCreatedAt, message.createdAt);
 
               return (
-                <AssistantMessage
-                  key={message.id}
-                  message={message}
-                  isStreaming={isStreamingTail}
-                  agents={agents}
-                  chats={chats}
-                  currentAgent={currentAgent}
-                  executedActions={actions}
-                  timeline={turnTimeline}
-                  orchestrationChildren={childList}
-                  currentRound={isStreamingTail ? currentRound : undefined}
-                  isPlanMode={isPlanMode}
-                  onRegenerate={onRegenerate}
-                  startedAtMs={isStreamingTail ? currentTurnStartedAtMs : undefined}
-                  durationMs={durationMs}
-                  onShare={message.id === lastAssistantId ? onShare : undefined}
-                />
+                <div key={message.id}>
+                  <AssistantMessage
+                    message={message}
+                    isStreaming={isStreamingTail}
+                    agents={agents}
+                    chats={chats}
+                    chatId={chatId}
+                    currentAgent={currentAgent}
+                    executedActions={actions}
+                    timeline={turnTimeline}
+                    orchestrationChildren={childList}
+                    currentRound={isStreamingTail ? currentRound : undefined}
+                    isPlanMode={isPlanMode}
+                    onRegenerate={onRegenerate}
+                    startedAtMs={isStreamingTail ? currentTurnStartedAtMs : undefined}
+                    durationMs={durationMs}
+                    turnFiles={turnFiles}
+                    onShare={message.id === lastAssistantId ? onShare : undefined}
+                  />
+                  {!isStreaming &&
+                  message.id === lastAssistantId &&
+                  suggestedReplies &&
+                  suggestedReplies.length > 0 &&
+                  onSelectSuggestion ? (
+                    <SuggestedReplies
+                      suggestions={suggestedReplies}
+                      onSelect={onSelectSuggestion}
+                    />
+                  ) : null}
+                </div>
               );
             })}
             {/* W7-1: 中断提示卡在消息列尾部、与最后一条用户消息同列——

package/src/components/chat/ModelPicker.tsx

@@ -104,7 +104,9 @@ export function ModelPicker({
 
   return (
     <div ref={rootRef} className="flex min-w-0 items-center gap-1">
-      <div className="relative">
+      {/* flex + min-w-0 截断链：窄容器下模型 id 省略号收缩，而不是把
+          旁边的圆形图标按钮压扁。 */}
+      <div className="relative flex min-w-0">
         <button
           type="button"
           onClick={() => {
@@ -115,7 +117,7 @@ export function ModelPicker({
             if (next && status !== 'live' && !loading) void refresh();
           }}
           disabled={disabled}
-          className="inline-flex h-7 max-w-[160px] items-center gap-1.5 rounded-full border border-agent-border bg-agent-canvas px-2 text-xs text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-70 @sm:max-w-[220px]"
+          className="inline-flex h-7 min-w-0 max-w-[160px] items-center gap-1.5 rounded-full border border-agent-border bg-agent-canvas px-2 text-xs text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-70 @sm:max-w-[220px]"
           title={
             status === 'offline'
               ? `模型目录不可用${catalog?.error ? `：${catalog.error}` : ''}（仍可手动指定模型）`
@@ -124,7 +126,7 @@ export function ModelPicker({
           aria-haspopup="menu"
           aria-expanded={modelMenuOpen}
         >
-          <span className="truncate">{effectiveModel || '选择模型'}</span>
+          <span className="min-w-0 truncate">{effectiveModel || '选择模型'}</span>
           {model != null && (
             <span className="inline-flex shrink-0 items-center rounded bg-agent-foreground/10 px-1 py-0.5 text-[9px] font-medium text-agent-foreground">
               本会话

package/src/components/chat/SuggestedReplies.tsx

@@ -0,0 +1,34 @@
+/**
+ * WorkBuddy-style follow-up chips: three next-turn user inputs rendered
+ * under the latest assistant reply. Clicking one sends that text immediately.
+ */
+export function SuggestedReplies({
+  suggestions,
+  onSelect,
+}: {
+  suggestions: string[];
+  onSelect: (text: string) => void;
+}) {
+  if (suggestions.length === 0) return null;
+
+  return (
+    <div
+      className="mx-auto flex w-full max-w-[var(--chat-input-box-width)] flex-col items-start gap-1.5 px-1 pt-1"
+      data-testid="suggested-replies"
+    >
+      {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-3 py-1.5 text-left text-[13px] leading-snug text-agent-foreground transition-colors hover:bg-agent-foreground/5"
+        >
+          {text}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default SuggestedReplies;

package/src/components/chat/TurnFilesCard.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import {
+  LuFilePen,
+  LuFilePlus,
+  LuFiles,
+  LuLoaderCircle,
+} from 'react-icons/lu';
+import { openLocalPath } from '@/lib/local-api';
+import {
+  formatFileSize,
+  splitTurnFilePath,
+  type TurnFile,
+} from './turn-files';
+
+/**
+ * TurnFilesCard — 回合产物文件列表（Codex 式「本轮写了哪些文件」）。
+ *
+ * 渲染在助手回合的末尾（回答气泡之下、时间戳行之上），回合内新建/修改的
+ * 文件逐行列出；点击行用系统默认应用打开该文件（PPT → PowerPoint/WPS，
+ * 报告 → 对应阅读器）。打开失败在行内给出错误提示，不打断会话。
+ *
+ * 数据来自 local-backend 的 `turn_files` SSE 事件 / messageMetadata 里的
+ * `turnFiles`（见 `src/local-backend/turn-files.ts` 的收集逻辑）。
+ */
+
+interface TurnFilesCardProps {
+  files: TurnFile[];
+}
+
+export function TurnFilesCard({ files }: TurnFilesCardProps) {
+  const [openingPath, setOpeningPath] = useState<string | null>(null);
+  const [openError, setOpenError] = useState<{ path: string; message: string } | null>(null);
+
+  if (files.length === 0) return null;
+
+  const handleOpen = async (file: TurnFile) => {
+    if (openingPath) return;
+    setOpeningPath(file.path);
+    setOpenError(null);
+    try {
+      const result = await openLocalPath(file.path);
+      if (!result.success) {
+        setOpenError({ path: file.path, message: result.error || '打开失败' });
+      }
+    } catch (err) {
+      setOpenError({
+        path: file.path,
+        message: err instanceof Error ? err.message : String(err),
+      });
+    } finally {
+      setOpeningPath(null);
+    }
+  };
+
+  return (
+    <div
+      className="rounded-agent-lg border border-agent-border bg-agent-canvas shadow-sm"
+      data-turn-files=""
+    >
+      <div className="flex items-center gap-1.5 border-b border-agent-border/60 px-3 py-1.5 text-[11px] text-agent-muted-foreground">
+        <LuFiles className="h-3.5 w-3.5" />
+        <span>本轮产生了 {files.length} 个文件，点击打开</span>
+      </div>
+      <ul className="max-h-64 overflow-y-auto py-1">
+        {files.map((file) => {
+          const { dir, name } = splitTurnFilePath(file.path);
+          const size = formatFileSize(file.size);
+          const busy = openingPath === file.path;
+          const error = openError?.path === file.path ? openError.message : null;
+          return (
+            <li key={file.path}>
+              <button
+                type="button"
+                onClick={() => void handleOpen(file)}
+                disabled={openingPath !== null}
+                title={file.path}
+                className="flex w-full items-center gap-2 px-3 py-1 text-left text-xs transition-colors hover:bg-agent-foreground/5 disabled:cursor-wait"
+                data-turn-file=""
+                data-kind={file.kind}
+              >
+                {busy ? (
+                  <LuLoaderCircle className="h-3.5 w-3.5 shrink-0 animate-spin text-agent-muted-foreground" />
+                ) : file.kind === 'created' ? (
+                  <LuFilePlus className="h-3.5 w-3.5 shrink-0 text-emerald-600 dark:text-emerald-400" />
+                ) : (
+                  <LuFilePen className="h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-400" />
+                )}
+                <span className="min-w-0 flex-1 truncate">
+                  <span className="font-medium text-agent-foreground">{name}</span>
+                  {dir && (
+                    <span className="ml-1.5 text-agent-muted-foreground">{dir}</span>
+                  )}
+                </span>
+                {size && (
+                  <span className="shrink-0 tabular-nums text-[11px] text-agent-muted-foreground">
+                    {size}
+                  </span>
+                )}
+              </button>
+              {error && (
+                <div className="px-3 pb-1 text-[11px] text-agent-destructive" role="status">
+                  打开失败：{error}
+                </div>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default TurnFilesCard;

package/src/components/chat/TurnProcessGroup.tsx

@@ -60,11 +60,13 @@ function ProcessBlocks({
   isStreaming,
   agents,
   chats,
+  chatId,
 }: {
   blocks: TurnBlock[];
   isStreaming: boolean;
   agents: LocalChatAgent[];
   chats: LocalChat[];
+  chatId?: string | null;
 }) {
   const lastIndex = blocks.length - 1;
   return (
@@ -77,7 +79,7 @@ function ProcessBlocks({
               key={`reasoning-${index}`}
               className="text-xs leading-relaxed text-agent-muted-foreground"
             >
-              <Markdown agents={agents} chats={chats}>{block.content}</Markdown>
+              <Markdown agents={agents} chats={chats} chatId={chatId}>{block.content}</Markdown>
               {isStreaming && isLast && (
                 <span className="ml-0.5 inline-block h-3 w-[2px] animate-agent-cursor-blink bg-agent-muted-foreground/60 align-text-bottom" />
               )}
@@ -92,7 +94,7 @@ function ProcessBlocks({
             key={`text-${index}`}
             className="markdown-content text-xs leading-relaxed text-agent-muted-foreground"
           >
-            <Markdown agents={agents} chats={chats}>{block.content}</Markdown>
+            <Markdown agents={agents} chats={chats} chatId={chatId}>{block.content}</Markdown>
           </div>
         );
       })}
@@ -105,6 +107,7 @@ export function TurnProcessGroup({
   isStreaming,
   agents,
   chats,
+  chatId,
   emptyFallback,
   streamingHint,
   startedAtMs,
@@ -115,6 +118,7 @@ export function TurnProcessGroup({
   isStreaming: boolean;
   agents: LocalChatAgent[];
   chats: LocalChat[];
+  chatId?: string | null;
   emptyFallback: ReactNode;
   /** Shown while streaming after a tools row and before the summary lands. */
   streamingHint?: ReactNode;
@@ -180,6 +184,7 @@ export function TurnProcessGroup({
           isStreaming={isStreaming && answer.length === 0}
           agents={agents}
           chats={chats}
+          chatId={chatId}
         />
       )}
       {showStreamingHint ? streamingHint : null}