feat: 新增 agentfx 任务深链与研判报告入库流程

支持 goPath=agentfx 的 iframe 嵌入问答、内置研判助手种子与报告导入协助卡，并完善深度研究流式报告能力。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-27 16:32:22 +08:00
1 parent 6e9e89a6cb
commit 52b9cbf707
@@ -12,10 +12,11 @@ export function FlipDisplay({
  className?: string;
 }) {
  return (
-    <div className={cn("relative overflow-hidden", className)}>
+    <div className={cn("relative min-w-0 overflow-hidden", className)}>
      <AnimatePresence mode="wait">
        <motion.div
          key={uniqueKey}
+          className="min-w-0 max-w-full"
          initial={{ y: 8, opacity: 0 }}
          animate={{ y: 2, opacity: 1 }}
          exit={{ y: -8, opacity: 0 }}
@@ -4,9 +4,9 @@ import type { ChatStatus } from "ai";
 import {
  BrainCircuitIcon,
  BookMarkedIcon,
-  CheckIcon,
-  FileTextIcon,
-  FolderTreeIcon,
+  CheckIcon,
+  FileTextIcon,
+  FolderTreeIcon,
  GraduationCapIcon,
  LightbulbIcon,
  PaperclipIcon,
@@ -142,6 +142,7 @@ export function InputBox({
  assistantId,
  hideAdminRecommendedQuestions,
  compact,
+  hideContextTools,
  ...props
 }: Omit<ComponentProps<typeof PromptInput>, "onSubmit"> & {
  assistantId?: string | null;
@@ -149,6 +150,9 @@ export function InputBox({
  /** 紧凑模式（正常 App）新对话落地态：去掉旋转彩边、用 CM 参考图的白卡输入框，
   *  并在推荐问题上方加「试试这些高频业务场景」标题。仅落地态生效，默认 false。 */
  compact?: boolean;
+  /** 隐藏输入框工具条上的「写作 / 记忆 / 参考文献」上下文开关按钮（任务深链工作区等
+   *  受控场景用；文件/模型等其他按钮不受影响）。 */
+  hideContextTools?: boolean;
  disabled?: boolean;
  context: Omit<
    AgentThreadContext,
@@ -369,20 +373,20 @@ export function InputBox({
    [onContextChange, context],
  );

-  const handleWritingModeToggle = useCallback(() => {
+  const handleWritingModeToggle = useCallback(() => {
    onContextChange?.({
      ...context,
      writing_mode: !context.writing_mode,
    });
-  }, [context, onContextChange]);
-
-  const artifactDirectoryModeEnabled =
-    localSettings.display.artifactDirectoryModeEnabled ?? false;
-  const handleArtifactDirectoryModeToggle = useCallback(() => {
-    setLocalSettings("display", {
-      artifactDirectoryModeEnabled: !artifactDirectoryModeEnabled,
-    });
-  }, [artifactDirectoryModeEnabled, setLocalSettings]);
+  }, [context, onContextChange]);
+
+  const artifactDirectoryModeEnabled =
+    localSettings.display.artifactDirectoryModeEnabled ?? false;
+  const handleArtifactDirectoryModeToggle = useCallback(() => {
+    setLocalSettings("display", {
+      artifactDirectoryModeEnabled: !artifactDirectoryModeEnabled,
+    });
+  }, [artifactDirectoryModeEnabled, setLocalSettings]);

  const memoryInjectionEnabled = context.memory_injection_enabled ?? true;
  const handleMemoryInjectionToggle = useCallback(() => {
@@ -745,11 +749,11 @@ export function InputBox({
                )}
              />
            )}
-            {!frontendRagActive && <Tooltip
+            {!frontendRagActive && !hideContextTools && <Tooltip
              content={
                context.writing_mode
-                  ? "写作模式已开启：最终输出会强制保存为 Markdown 文件"
-                  : "开启写作模式：最终输出保存为 Markdown 文件并进入画布"
+                  ? "写作模式已开启：报告由深度研究管线按「通用分析结构」撰写，优先使用对话中已检索的资料"
+                  : "开启写作模式：对话照常进行，交付时由深度研究管线撰写报告并保存为 Markdown 进入画布"
              }
            >
              <PromptInputButton
@@ -769,38 +773,38 @@ export function InputBox({
                )}
                <FileTextIcon className="size-3" />
                <span className="text-xs font-normal">写作</span>
-              </PromptInputButton>
-            </Tooltip>}
-            {!frontendRagActive && <Tooltip
-              content={
-                artifactDirectoryModeEnabled
-                  ? "文件模式已开启：右侧会显示当前对话生成的全部文件目录"
-                  : "开启文件模式：在右侧目录中浏览当前对话生成的全部文件"
-              }
-            >
-              <PromptInputButton
-                type="button"
-                aria-pressed={artifactDirectoryModeEnabled}
-                disabled={disabled}
-                className={cn(
-                  "gap-1.5! rounded-full px-3! shadow-none",
-                  compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
-                  artifactDirectoryModeEnabled
-                    ? "border border-sky-300 bg-sky-50 text-sky-700 hover:bg-sky-100 dark:border-sky-600 dark:bg-sky-950/45 dark:text-sky-200"
-                    : compact
-                      ? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
-                      : "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
-                )}
-                onClick={handleArtifactDirectoryModeToggle}
-              >
-                {artifactDirectoryModeEnabled && (
-                  <CheckIcon className="size-3 text-sky-700 dark:text-sky-200" />
-                )}
-                <FolderTreeIcon className="size-3" />
-                <span className="text-xs font-normal">文件</span>
-              </PromptInputButton>
-            </Tooltip>}
-            {!frontendRagActive && <Tooltip
+              </PromptInputButton>
+            </Tooltip>}
+            {!frontendRagActive && <Tooltip
+              content={
+                artifactDirectoryModeEnabled
+                  ? "文件模式已开启：右侧会显示当前对话生成的全部文件目录"
+                  : "开启文件模式：在右侧目录中浏览当前对话生成的全部文件"
+              }
+            >
+              <PromptInputButton
+                type="button"
+                aria-pressed={artifactDirectoryModeEnabled}
+                disabled={disabled}
+                className={cn(
+                  "gap-1.5! rounded-full px-3! shadow-none",
+                  compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
+                  artifactDirectoryModeEnabled
+                    ? "border border-sky-300 bg-sky-50 text-sky-700 hover:bg-sky-100 dark:border-sky-600 dark:bg-sky-950/45 dark:text-sky-200"
+                    : compact
+                      ? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
+                      : "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
+                )}
+                onClick={handleArtifactDirectoryModeToggle}
+              >
+                {artifactDirectoryModeEnabled && (
+                  <CheckIcon className="size-3 text-sky-700 dark:text-sky-200" />
+                )}
+                <FolderTreeIcon className="size-3" />
+                <span className="text-xs font-normal">文件</span>
+              </PromptInputButton>
+            </Tooltip>}
+            {!frontendRagActive && !hideContextTools && <Tooltip
              content={
                memoryInjectionEnabled
                  ? "记忆注入已开启：对话前会注入历史记忆"
@@ -826,7 +830,7 @@ export function InputBox({
                <span className="text-xs font-normal">记忆</span>
              </PromptInputButton>
            </Tooltip>}
-            {!frontendRagActive && <Tooltip
+            {!frontendRagActive && !hideContextTools && <Tooltip
              content={
                ragModeEnabled
                  ? "参考文献模式已开启：检索类结果会按编号引用展示"
@@ -1,9 +1,9 @@
 import type { Message } from "@langchain/langgraph-sdk";
 import {
  BookOpenTextIcon,
-  CheckCircle2Icon,
-  ChevronDownIcon,
-  ChevronsDownIcon,
+  CheckCircle2Icon,
+  ChevronDownIcon,
+  ChevronsDownIcon,
  ChevronUp,
  FolderOpenIcon,
  GlobeIcon,
@@ -16,7 +16,7 @@ import {
  SquareTerminalIcon,
  WrenchIcon,
 } from "lucide-react";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type AnchorHTMLAttributes } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type AnchorHTMLAttributes } from "react";

 import {
  ChainOfThought,
@@ -338,9 +338,9 @@ function ToolCall({
  ragModeEnabled?: boolean;
 }) {
  const { t } = useI18n();
-  const displayMatch =
-    result !== undefined && isDisplaySamplePayload(result)
-      ? null
+  const displayMatch =
+    result !== undefined && isDisplaySamplePayload(result)
+      ? null
      : (findDisplayConfigForTool(name, skillDisplayMap, args) ??
        null);
  const displayItems =
@@ -349,24 +349,24 @@ function ToolCall({
          ...item,
          index: index + 1,
          skillName: displayMatch.skillName,
-          mode: item.displayMode ?? displayMatch.display.mode,
-        }))
-      : [];
-  const wikiQuery = name === "llmwiki_search" ? resolveSearchQuery(args, result) : "";
-  const wikiSearchLabel = name === "llmwiki_search"
-    ? wikiQuery
-      ? `Wiki 文档检索 "${wikiQuery}"`
-      : "Wiki 文档检索"
-    : null;
-  if (displayItems.length > 0) {
-    return (
-      <ChainOfThoughtStep
-        key={id}
-        label={
-          wikiSearchLabel || (displayMatch?.display.mode === "citation" || !displayMatch
-            ? "检索参考来源"
-            : `获取 ${displayItems.length} 条结果`)
-        }
+          mode: item.displayMode ?? displayMatch.display.mode,
+        }))
+      : [];
+  const wikiQuery = name === "llmwiki_search" ? resolveSearchQuery(args, result) : "";
+  const wikiSearchLabel = name === "llmwiki_search"
+    ? wikiQuery
+      ? `Wiki 文档检索 "${wikiQuery}"`
+      : "Wiki 文档检索"
+    : null;
+  if (displayItems.length > 0) {
+    return (
+      <ChainOfThoughtStep
+        key={id}
+        label={
+          wikiSearchLabel || (displayMatch?.display.mode === "citation" || !displayMatch
+            ? "检索参考来源"
+            : `获取 ${displayItems.length} 条结果`)
+        }
        icon={SearchIcon}
      >
        <DisplayResultsList results={displayItems} />
@@ -390,7 +390,7 @@ function ToolCall({
      mode: "citation" as const,
    }));
    return (
-      <ChainOfThoughtStep key={id} label={wikiSearchLabel || "检索参考来源"} icon={SearchIcon}>
+      <ChainOfThoughtStep key={id} label={wikiSearchLabel || "检索参考来源"} icon={SearchIcon}>
        <DisplayResultsList results={defaultItems} />
      </ChainOfThoughtStep>
    );
@@ -610,64 +610,64 @@ function DeepResearchProgressStep({
    ? args.label
    : "正在撰写研究报告";
  const detail = typeof args.detail === "string" ? args.detail.trim() : "";
-  const thinking = typeof args.thinking === "string" ? args.thinking.trim() : "";
-  const active = args.status !== "complete";
-  const [thinkingOpen, setThinkingOpen] = useState(false);
-  const [autoScrollPaused, setAutoScrollPaused] = useState(false);
-  const thinkingContentRef = useRef<HTMLPreElement>(null);
-  const autoScrollEnabledRef = useRef(true);
-  const programmaticScrollRef = useRef(false);
-  const previousActiveRef = useRef(active);
+  const thinking = typeof args.thinking === "string" ? args.thinking.trim() : "";
+  const active = args.status !== "complete";
+  const [thinkingOpen, setThinkingOpen] = useState(false);
+  const [autoScrollPaused, setAutoScrollPaused] = useState(false);
+  const thinkingContentRef = useRef<HTMLPreElement>(null);
+  const autoScrollEnabledRef = useRef(true);
+  const programmaticScrollRef = useRef(false);
+  const previousActiveRef = useRef(active);

-  useEffect(() => {
-    if (active && thinking) setThinkingOpen(true);
-  }, [active, thinking]);
-
-  useEffect(() => {
-    if (active && !previousActiveRef.current) {
-      autoScrollEnabledRef.current = true;
-      setAutoScrollPaused(false);
-    }
-    previousActiveRef.current = active;
-  }, [active]);
-
-  const scrollToLatestThinking = useCallback(() => {
-    if (!autoScrollEnabledRef.current) return;
-    const content = thinkingContentRef.current;
-    if (!content) return;
-    // Scroll events do not identify their initiator reliably across browsers.
-    // Mark this assignment so it never disables following as if it were a
-    // user drag; a user-originated scroll away from the bottom still pauses it.
-    programmaticScrollRef.current = true;
-    content.scrollTop = content.scrollHeight;
-    requestAnimationFrame(() => {
-      programmaticScrollRef.current = false;
-    });
-  }, []);
-
-  useLayoutEffect(() => {
-    if (!active || !thinkingOpen || !thinking) return;
-    scrollToLatestThinking();
-    // A second frame covers the browser's delayed reflow of a growing <pre>.
-    const frame = requestAnimationFrame(scrollToLatestThinking);
-    return () => cancelAnimationFrame(frame);
-  }, [active, thinking, thinkingOpen, scrollToLatestThinking]);
-
-  const pauseAutoScrollOnManualScroll = (event: React.UIEvent<HTMLPreElement>) => {
-    if (!active || !autoScrollEnabledRef.current || programmaticScrollRef.current) return;
-    const { clientHeight, scrollHeight, scrollTop } = event.currentTarget;
-    // Being at the bottom is still the follow state. Only an actual move away
-    // from it (wheel, touch, keyboard or scrollbar drag) pauses auto-follow.
-    if (scrollTop + clientHeight >= scrollHeight - 4) return;
-    autoScrollEnabledRef.current = false;
-    setAutoScrollPaused(true);
-  };
-
-  const resumeAutoScroll = () => {
-    autoScrollEnabledRef.current = true;
-    setAutoScrollPaused(false);
-    requestAnimationFrame(scrollToLatestThinking);
-  };
+  useEffect(() => {
+    if (active && thinking) setThinkingOpen(true);
+  }, [active, thinking]);
+
+  useEffect(() => {
+    if (active && !previousActiveRef.current) {
+      autoScrollEnabledRef.current = true;
+      setAutoScrollPaused(false);
+    }
+    previousActiveRef.current = active;
+  }, [active]);
+
+  const scrollToLatestThinking = useCallback(() => {
+    if (!autoScrollEnabledRef.current) return;
+    const content = thinkingContentRef.current;
+    if (!content) return;
+    // Scroll events do not identify their initiator reliably across browsers.
+    // Mark this assignment so it never disables following as if it were a
+    // user drag; a user-originated scroll away from the bottom still pauses it.
+    programmaticScrollRef.current = true;
+    content.scrollTop = content.scrollHeight;
+    requestAnimationFrame(() => {
+      programmaticScrollRef.current = false;
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!active || !thinkingOpen || !thinking) return;
+    scrollToLatestThinking();
+    // A second frame covers the browser's delayed reflow of a growing <pre>.
+    const frame = requestAnimationFrame(scrollToLatestThinking);
+    return () => cancelAnimationFrame(frame);
+  }, [active, thinking, thinkingOpen, scrollToLatestThinking]);
+
+  const pauseAutoScrollOnManualScroll = (event: React.UIEvent<HTMLPreElement>) => {
+    if (!active || !autoScrollEnabledRef.current || programmaticScrollRef.current) return;
+    const { clientHeight, scrollHeight, scrollTop } = event.currentTarget;
+    // Being at the bottom is still the follow state. Only an actual move away
+    // from it (wheel, touch, keyboard or scrollbar drag) pauses auto-follow.
+    if (scrollTop + clientHeight >= scrollHeight - 4) return;
+    autoScrollEnabledRef.current = false;
+    setAutoScrollPaused(true);
+  };
+
+  const resumeAutoScroll = () => {
+    autoScrollEnabledRef.current = true;
+    setAutoScrollPaused(false);
+    requestAnimationFrame(scrollToLatestThinking);
+  };

  return (
    <ChainOfThoughtStep
@@ -710,29 +710,29 @@ function DeepResearchProgressStep({
            <p aria-live={active ? "polite" : undefined} className="sr-only" role={active ? "status" : undefined}>
              {active ? "模型思考内容正在更新" : "模型思考内容已完成"}
            </p>
-            <div className="relative mt-1">
-              <pre
-                className="bg-muted/45 text-muted-foreground max-h-56 overflow-auto rounded-lg border px-3 py-2 text-xs leading-5 whitespace-pre-wrap break-words"
-              onScroll={pauseAutoScrollOnManualScroll}
-              ref={thinkingContentRef}
-              >
-                {thinking}
-              </pre>
-              {active && autoScrollPaused && (
-                <Button
-                  aria-label="恢复思考内容自动下滑"
-                  className="absolute top-1/2 left-1/2 h-9 -translate-x-1/2 -translate-y-1/2 gap-1.5 bg-background/95 px-3 text-xs shadow-md backdrop-blur-sm hover:bg-background"
-                  onClick={resumeAutoScroll}
-                  size="sm"
-                  title="恢复自动下滑"
-                  type="button"
-                  variant="outline"
-                >
-                  <ChevronsDownIcon className="size-3.5" />
-                  自动下滑
-                </Button>
-              )}
-            </div>
+            <div className="relative mt-1">
+              <pre
+                className="bg-muted/45 text-muted-foreground max-h-56 overflow-auto rounded-lg border px-3 py-2 text-xs leading-5 whitespace-pre-wrap break-words"
+              onScroll={pauseAutoScrollOnManualScroll}
+              ref={thinkingContentRef}
+              >
+                {thinking}
+              </pre>
+              {active && autoScrollPaused && (
+                <Button
+                  aria-label="恢复思考内容自动下滑"
+                  className="absolute top-1/2 left-1/2 h-9 -translate-x-1/2 -translate-y-1/2 gap-1.5 bg-background/95 px-3 text-xs shadow-md backdrop-blur-sm hover:bg-background"
+                  onClick={resumeAutoScroll}
+                  size="sm"
+                  title="恢复自动下滑"
+                  type="button"
+                  variant="outline"
+                >
+                  <ChevronsDownIcon className="size-3.5" />
+                  自动下滑
+                </Button>
+              )}
+            </div>
          </CollapsibleContent>
        </Collapsible>
      )}
@@ -740,6 +740,13 @@ function DeepResearchProgressStep({
  );
 }

+/** 文件卡片只显示文件名：宿主泄漏路径（F:\...\outputs\report.md）与虚拟路径
+ * （/mnt/user-data/outputs/report.md）统一收敛到最后一段，避免把服务端磁盘结构暴露给用户。 */
+function artifactDisplayName(path: string): string {
+  const filename = path.replace(/\\/g, "/").split("/").filter(Boolean).at(-1);
+  return filename || path;
+}
+
 function ArtifactWriteToolCall({
  id,
  messageId,
@@ -815,7 +822,7 @@ function ArtifactWriteToolCall({
    >
      {(normalizedPath || sourcePath) && (
        <ChainOfThoughtSearchResult className="cursor-pointer">
-          {normalizedPath || sourcePath}
+          {artifactDisplayName(normalizedPath || (sourcePath ?? ""))}
        </ChainOfThoughtSearchResult>
      )}
    </ChainOfThoughtStep>
@@ -134,6 +134,7 @@ export function MessageList({
  onSetupReportStructureApprove,
  onSetupReportStructureReject,
  researchApprovalSlot,
+  taskReportImportSlot,
  onOpenArtifact,
  onDownloadArtifact,
  afterDocumentRewriteItems,
@@ -168,6 +169,12 @@ export function MessageList({
   * assistant 消息行；不传该 slot 时普通对话/AI 写作零行为变化。
   */
  researchApprovalSlot?: (message: Message) => React.ReactNode;
+  /**
+   * agentfx「入库」协助卡插槽：任务工作区宿主（AgentChatPage taskBind）向 displayThread
+   * 注入带 `additional_kwargs.task_report_import_approval` 的虚拟 ai 消息，由本插槽渲染
+   * 「是否入库」卡片。不传该 slot 时（普通对话等）该分组不渲染，零行为变化。
+   */
+  taskReportImportSlot?: (message: Message) => React.ReactNode;
  onOpenArtifact?: (filepath: string) => void;
  /** Host override for downloading virtual/session-owned files in a present-files card. */
  onDownloadArtifact?: (filepath: string) => void | Promise<void>;
@@ -262,7 +269,7 @@ export function MessageList({

  // Durable ask time per message id, used to time-stamp the AI answer (which has
  // no timestamp of its own) with the time of the question that triggered it.
-  const turnTimes = useMemo(() => {
+  const turnTimes = useMemo(() => {
    const map = new Map<string, string>();
    let lastQuestionTime: string | undefined;
    for (const message of messages) {
@@ -276,22 +283,22 @@ export function MessageList({
      }
    }
    return map;
-  }, [messages, askTimes]);
-
-  // Associate each assistant answer with the nearest preceding user question.
-  // This powers the per-answer Word menu without changing message persistence.
-  const questionMarkdownByAssistantId = useMemo(() => {
-    const map = new Map<string, string>();
-    let currentQuestion = "";
-    for (const message of messages) {
-      if (message.type === "human") {
-        currentQuestion = extractContentFromMessage(message)?.trim() ?? "";
-      } else if (message.type === "ai" && message.id && currentQuestion) {
-        map.set(message.id, currentQuestion);
-      }
-    }
-    return map;
-  }, [messages]);
+  }, [messages, askTimes]);
+
+  // Associate each assistant answer with the nearest preceding user question.
+  // This powers the per-answer Word menu without changing message persistence.
+  const questionMarkdownByAssistantId = useMemo(() => {
+    const map = new Map<string, string>();
+    let currentQuestion = "";
+    for (const message of messages) {
+      if (message.type === "human") {
+        currentQuestion = extractContentFromMessage(message)?.trim() ?? "";
+      } else if (message.type === "ai" && message.id && currentQuestion) {
+        map.set(message.id, currentQuestion);
+      }
+    }
+    return map;
+  }, [messages]);

  const [settings] = useLocalSettings();
  const ragModeEnabled =
@@ -544,11 +551,11 @@ export function MessageList({
                      ? getQuestionAnchorId(msg, messages.indexOf(msg))
                      : undefined
                  }
-                  message={msg}
-                  questionMarkdown={
-                    msg.id ? questionMarkdownByAssistantId.get(msg.id) : undefined
-                  }
-                  isLoading={messageIsLoading}
+                  message={msg}
+                  questionMarkdown={
+                    msg.id ? questionMarkdownByAssistantId.get(msg.id) : undefined
+                  }
+                  isLoading={messageIsLoading}
                  threadId={threadId}
                  tokenUsageEnabled={tokenUsageEnabled}
                  displaySources={displaySources}
@@ -669,6 +676,14 @@ export function MessageList({
                {researchApprovalSlot(message)}
              </div>
            ) : null;
+          } else if (group.type === "assistant:task-report-import") {
+            // agentfx「入库」协助卡：宿主不传渲染函数时该分组不渲染。
+            const message = group.messages[0];
+            return taskReportImportSlot && message ? (
+              <div key={group.id} className="w-full pb-2">
+                {taskReportImportSlot(message)}
+              </div>
+            ) : null;
          } else if (group.type === "assistant:present-files") {
            const files: string[] = [];
            for (const message of group.messages) {
@@ -1,10 +1,10 @@
 import type { BaseStream } from "@langchain/langgraph-sdk";
-import { useEffect } from "react";
-
-import { useI18n } from "@/core/i18n/hooks";
-import type { AgentThreadState } from "@/core/threads";
-import { sanitizeThreadTitleForDisplay } from "@/core/threads/utils";
-import { desensitize } from "@/lib/desensitize";
+import { useEffect } from "react";
+
+import { useI18n } from "@/core/i18n/hooks";
+import type { AgentThreadState } from "@/core/threads";
+import { sanitizeThreadTitleForDisplay } from "@/core/threads/utils";
+import { desensitize } from "@/lib/desensitize";

 import { useThreadChat } from "./chats";
 import { FlipDisplay } from "./flip-display";
@@ -17,18 +17,18 @@ export function ThreadTitle({
  threadId: string;
  thread: BaseStream<AgentThreadState>;
 }) {
-  const { t } = useI18n();
-  const { isNewThread } = useThreadChat();
-  const displayTitle = sanitizeThreadTitleForDisplay(thread.values?.title);
-
-  useEffect(() => {
-    let _title = t.pages.untitled;
-
-    if (thread.values?.title) {
-      _title = displayTitle;
-    } else if (isNewThread) {
-      _title = t.pages.newChat;
-    }
+  const { t } = useI18n();
+  const { isNewThread } = useThreadChat();
+  const displayTitle = sanitizeThreadTitleForDisplay(thread.values?.title);
+
+  useEffect(() => {
+    let _title = t.pages.untitled;
+
+    if (thread.values?.title) {
+      _title = displayTitle;
+    } else if (isNewThread) {
+      _title = t.pages.newChat;
+    }
    if (thread.isThreadLoading) {
      document.title = `Loading... - ${t.pages.appName}`;
    } else {
@@ -38,18 +38,21 @@ export function ThreadTitle({
    isNewThread,
    t.pages.newChat,
    t.pages.untitled,
-    t.pages.appName,
-    thread.isThreadLoading,
-    thread.values,
-    displayTitle,
-  ]);
+    t.pages.appName,
+    thread.isThreadLoading,
+    thread.values,
+    displayTitle,
+  ]);

  if (!thread.values?.title) {
    return null;
  }
-  return (
-    <FlipDisplay uniqueKey={threadId}>
-      {desensitize(displayTitle)}
-    </FlipDisplay>
-  );
-}
+  const visibleTitle = desensitize(displayTitle);
+  return (
+    <FlipDisplay uniqueKey={threadId} className="min-w-0 w-full">
+      <span className="block truncate" title={visibleTitle}>
+        {visibleTitle}
+      </span>
+    </FlipDisplay>
+  );
+}