diff --git a/desktop/frontend/src/components/Transcript.tsx b/desktop/frontend/src/components/Transcript.tsx
index 43dd73875d..306cd03f1c 100644
--- a/desktop/frontend/src/components/Transcript.tsx
+++ b/desktop/frontend/src/components/Transcript.tsx
@@ -3,7 +3,7 @@ import type { Item, LiveStream } from "../lib/useController";
import type { CheckpointMeta } from "../lib/types";
import { useT } from "../lib/i18n";
import { AssistantMessage, TurnActions, UserMessage } from "./Message";
-import { ProcessCompactIcon, ProcessPhaseIcon } from "./ProcessCard";
+import { ProcessBrainIcon, ProcessCompactIcon, ProcessPhaseIcon } from "./ProcessCard";
import { ToolCard } from "./ToolCard";
import { ArrowDown, ChevronRight } from "lucide-react";
import { Welcome } from "./Welcome";
@@ -16,6 +16,7 @@ import { useEntranceAnimation } from "../lib/useEntranceAnimation";
import { useScrollManager } from "../lib/useScrollManager";
import { buildStepGroups, buildTurnGroups, compactQuestionText, createWarmLayerState, lastQuestionTurn, questionAnchorId, questionTurnsById, scrollVersion, warmColdPageForTurn, warmLayerWithColdPageAtLeast, warmLayerWithExpandedTurn, warmLayerWithNextColdPage, warmPagination, warmUserPreview, type QuestionAnchor, type TurnGroup, type WarmLayerState } from "../lib/transcriptGrouping";
import { appendTurnActionCopyText } from "../lib/turnActionCopy";
+import { displayReasoningText } from "../lib/reasoningDisplay";
type ToolItem = Extract
;
type AssistantItem = Extract;
@@ -23,6 +24,7 @@ type OpenTurnAction = { turn: number; menu: "summary" | "rewind" };
const QUESTION_NAV_MIN_COUNT = 2;
const LiveStreamContext = createContext(undefined);
+type AssistantReasoningDisplay = "normal" | "hide";
const LiveAssistantMessage = memo(function LiveAssistantMessage({
item,
@@ -30,20 +32,38 @@ const LiveAssistantMessage = memo(function LiveAssistantMessage({
expandWhileStreaming = true,
truncateStreamingReasoning = false,
creationMode = false,
+ reasoningDisplay = "normal",
}: {
item: AssistantItem;
defaultExpanded?: boolean;
expandWhileStreaming?: boolean;
truncateStreamingReasoning?: boolean;
creationMode?: boolean;
+ reasoningDisplay?: AssistantReasoningDisplay;
}) {
const live = useContext(LiveStreamContext);
const shown = useMemo(
- () =>
- live && live.id === item.id
- ? { ...item, text: live.text, reasoning: live.reasoning, streaming: true, reasoningComplete: live.reasoningComplete }
- : item,
- [item, live?.id, live?.text, live?.reasoning, live?.reasoningComplete],
+ () => {
+ const merged =
+ live && live.id === item.id
+ ? {
+ ...item,
+ text: live.text,
+ reasoning: live.reasoning,
+ streaming: true,
+ reasoningComplete: live.reasoningComplete,
+ reasoningDurationMs:
+ live.reasoningStartedAt && live.reasoningCompletedAt && live.reasoningCompletedAt >= live.reasoningStartedAt
+ ? live.reasoningCompletedAt - live.reasoningStartedAt
+ : item.reasoningDurationMs,
+ }
+ : item;
+ if (reasoningDisplay === "hide") {
+ return { ...merged, reasoning: "", reasoningComplete: true, reasoningDurationMs: undefined };
+ }
+ return merged;
+ },
+ [item, live?.id, live?.text, live?.reasoning, live?.reasoningComplete, live?.reasoningStartedAt, live?.reasoningCompletedAt, reasoningDisplay],
);
return (
+
+
+
{running ? t("msg.thinkingRunning") : t("msg.thinking")}
+
+
{visibleReasoning}
+
+ );
+}
+
// ── Layer budgets ─────────────────────────────────────────────────────────────
// Hot zone: the most recent N user turns are always fully rendered. All data
// stays in memory (items[]), so expanding a warm turn is instant — no API call.
@@ -75,6 +124,55 @@ const WARM_PAGE_SIZE = 20; // cold-zone pagination batch
// ── Helpers ───────────────────────────────────────────────────────────────────
+function processDurationMs(items: Item[]): number {
+ return items.reduce((ms, it) => {
+ if (it.kind === "tool") return ms + (it.durationMs ?? 0);
+ if (it.kind === "assistant") return ms + (it.reasoningDurationMs ?? 0);
+ return ms;
+ }, 0);
+}
+
+function useTick(on: boolean): number {
+ const [, setN] = useState(0);
+ useEffect(() => {
+ if (!on) return;
+ const id = window.setInterval(() => setN((n) => n + 1), 1000);
+ return () => window.clearInterval(id);
+ }, [on]);
+ return Date.now();
+}
+
+function formatWorkDuration(durationMs: number, t: ReturnType