Labs: expand the live Thinking row into the streaming thought

apps/web/src/components/chat/MessagesTimeline.browser.test.tsx

@@ -62,6 +62,23 @@ vi.mock(import("~/assets/assetUrls"), async (original) => {
   };
 });
 
+const liveThinkingState = vi.hoisted(() => ({ enabled: false }));
+vi.mock(import("../../hooks/useSettings"), async (original) => {
+  const actual = await original();
+  const { DEFAULT_UNIFIED_SETTINGS } = await import("@t3tools/contracts/settings");
+  const settings = () => ({
+    ...DEFAULT_UNIFIED_SETTINGS,
+    liveThinkingEnabled: liveThinkingState.enabled,
+  });
+  return {
+    ...actual,
+    useEnvironmentSettings: ((
+      _environmentId: EnvironmentId,
+      selector?: (s: ReturnType<typeof settings>) => unknown,
+    ) => (selector ? selector(settings()) : settings())) as never,
+  };
+});
+
 const ENVIRONMENT_ID = EnvironmentId.make("environment-local");
 const CREATED_AT = "2026-03-17T19:12:28.000Z";
 
@@ -152,8 +169,12 @@ async function click(element: HTMLElement) {
   await act(async () => element.click());
 }
 
-function setup({ scheduledTasks = [] as ReadonlyArray<{ id: string; title: string }> } = {}) {
+function setup({
+  scheduledTasks = [] as ReadonlyArray<{ id: string; title: string }>,
+  liveThinkingEnabled = false,
+} = {}) {
   environmentQuery.data = { tasks: scheduledTasks };
+  liveThinkingState.enabled = liveThinkingEnabled;
 }
 
 const TASK_ID = ScheduledTaskId.make("task-1");
@@ -1165,3 +1186,118 @@ it("keeps concurrent approvals actionable outside collapsed work and restores se
     .element(screen.getByRole("button", { name: "Open the current tab", exact: true }))
     .toBeVisible();
 });
+
+describe("labs live-thinking row", () => {
+  const runId = RunId.make("run-live-thinking");
+  const thoughtDetail =
+    "The build fails because the fixture is stale. Let me check the fixture before touching anything else.";
+  const entries: Entry[] = [
+    {
+      id: "entry-live-thinking",
+      kind: "work",
+      createdAt: CREATED_AT,
+      entry: {
+        id: "live-thinking",
+        createdAt: CREATED_AT,
+        runId,
+        label: "Thinking",
+        tone: "thinking",
+        itemType: "reasoning",
+        toolLifecycleStatus: "inProgress",
+        detail: thoughtDetail,
+      },
+    },
+  ];
+  const liveProps = {
+    isWorking: true,
+    latestRun: { runId, status: "running" as const, startedAt: CREATED_AT, completedAt: null },
+  };
+  const liveRow = (screen: Awaited<ReturnType<typeof renderTimeline>>) =>
+    screen.container.querySelector("[data-timeline-row-kind='work-live'] button");
+  const liveRowScroller = (screen: Awaited<ReturnType<typeof renderTimeline>>) =>
+    screen.container.querySelector("[data-timeline-row-kind='work-live'] .max-h-96");
+
+  it("keeps the work-group toggle while the labs setting is off", async () => {
+    setup();
+    await using screen = await renderTimeline(entries, liveProps);
+    expect(liveRow(screen)).not.toBeNull();
+    await click(liveRow(screen) as HTMLElement);
+    // The click toggles the work group: the group row appears and the thought stays
+    // folded in the entry row, never in the live row.
+    await vi.waitFor(() =>
+      expect(screen.container.querySelector("[data-timeline-row-kind='work']")).not.toBeNull(),
+    );
+    expect(liveRowScroller(screen)).toBeNull();
+  });
+
+  it("expands the full streaming thought on click while the labs setting is on", async () => {
+    setup({ liveThinkingEnabled: true });
+    await using screen = await renderTimeline(entries, liveProps);
+    expect(liveRow(screen)).not.toBeNull();
+    await click(liveRow(screen) as HTMLElement);
+    // The thought expands directly below the live row; the work group stays folded.
+    const fullThought = "Let me check the fixture before touching anything else";
+    await expect.element(screen.getByText(new RegExp(fullThought))).toBeVisible();
+    expect(liveRow(screen)?.textContent).not.toContain(fullThought);
+    expect(liveRowScroller(screen)?.textContent?.split(fullThought)).toHaveLength(2);
+    await vi.waitFor(() =>
+      expect(screen.container.querySelector("[data-timeline-row-kind='work']")).toBeNull(),
+    );
+    await click(liveRow(screen) as HTMLElement);
+    await vi.waitFor(() => expect(liveRowScroller(screen)).toBeNull());
+
+    await click(screen.button("Show work details"));
+    await vi.waitFor(() =>
+      expect(screen.container.querySelector("[data-timeline-row-kind='work']")).not.toBeNull(),
+    );
+  });
+
+  it("expands the fallback thought and retains failed-tool disclosure", async () => {
+    setup({ liveThinkingEnabled: true });
+    const failedEntries: Entry[] = [
+      {
+        id: "entry-settled-thought",
+        kind: "work",
+        createdAt: CREATED_AT,
+        entry: {
+          id: "settled-thought",
+          createdAt: CREATED_AT,
+          runId,
+          label: "Thinking",
+          tone: "thinking",
+          itemType: "reasoning",
+          toolLifecycleStatus: "completed",
+          detail: "The command failed because the fixture is stale.",
+        },
+      },
+      {
+        id: "entry-failed-command",
+        kind: "work",
+        createdAt: CREATED_AT,
+        entry: {
+          id: "failed-command",
+          createdAt: CREATED_AT,
+          runId,
+          label: "Ran rg",
+          command: "rg toolCall",
+          requestKind: "command",
+          tone: "tool",
+          toolLifecycleStatus: "failed",
+        },
+      },
+    ];
+    await using screen = await renderTimeline(failedEntries, liveProps);
+    const fallbackThought = screen.container.querySelector(
+      "[data-timeline-row-kind='thinking'] button",
+    );
+    expect(fallbackThought).not.toBeNull();
+    await click(fallbackThought as HTMLElement);
+    await expect
+      .element(screen.getByText(/command failed because the fixture is stale/))
+      .toBeVisible();
+
+    const disclosure = screen.button("Show failed tool details");
+    await click(disclosure);
+    await expect.element(screen.getByText(/rg toolCall/)).toBeVisible();
+  });
+});

apps/web/src/components/chat/MessagesTimeline.logic.test.ts

@@ -2365,6 +2365,140 @@ describe("deriveMessagesTimelineRows", () => {
     expect(declinedRows.filter((row) => row.id === "live-activity-row")).toHaveLength(1);
   });
 
+  describe("labs live-thinking row", () => {
+    const liveThinkingBase = {
+      latestRun: {
+        runId: "turn-1" as never,
+        status: "running" as const,
+        startedAt: "2026-01-01T00:00:00Z",
+        completedAt: null,
+      },
+      isWorking: true,
+      activeTurnStartedAt: "2026-01-01T00:00:00Z",
+      turnDiffSummaries: [],
+      supportsConversationRollback: false,
+    };
+
+    it("flags the live work row so its click expands the streaming thought", () => {
+      const deriveRows = (liveThinkingEnabled?: boolean) =>
+        deriveMessagesTimelineRows({
+          ...(liveThinkingEnabled === undefined ? {} : { liveThinkingEnabled }),
+          ...liveThinkingBase,
+          timelineEntries: [
+            {
+              id: "streaming-thought-entry",
+              kind: "work",
+              createdAt: "2026-01-01T00:00:05Z",
+              entry: {
+                id: "streaming-thought",
+                createdAt: "2026-01-01T00:00:05Z",
+                runId: "turn-1" as never,
+                label: "Thinking",
+                tone: "thinking" as const,
+                itemType: "reasoning" as const,
+                toolLifecycleStatus: "inProgress" as const,
+                detail: "The build fails because the fixture is stale.",
+              },
+            },
+          ],
+        });
+
+      const enabledRow = deriveRows(true).find((row) => row.kind === "work-live");
+      expect(enabledRow).toMatchObject({
+        kind: "work-live",
+        liveThinking: true,
+        thought: { id: "streaming-thought" },
+      });
+      const disabledRow = deriveRows(false).find((row) => row.kind === "work-live");
+      expect(disabledRow).toMatchObject({
+        kind: "work-live",
+        thought: { id: "streaming-thought" },
+      });
+      expect(disabledRow?.liveThinking).toBeUndefined();
+      const defaultRow = deriveRows().find((row) => row.kind === "work-live");
+      expect(defaultRow?.liveThinking).toBeUndefined();
+    });
+
+    it("attaches the thought to the bare thinking row only when the toggle is on", () => {
+      const deriveRows = (liveThinkingEnabled?: boolean) =>
+        deriveMessagesTimelineRows({
+          ...(liveThinkingEnabled === undefined ? {} : { liveThinkingEnabled }),
+          ...liveThinkingBase,
+          timelineEntries: [
+            {
+              id: "settled-thought-entry",
+              kind: "work",
+              createdAt: "2026-01-01T00:00:04Z",
+              entry: {
+                id: "settled-thought",
+                createdAt: "2026-01-01T00:00:04Z",
+                runId: "turn-1" as never,
+                label: "Thinking",
+                tone: "thinking" as const,
+                itemType: "reasoning" as const,
+                toolLifecycleStatus: "completed" as const,
+                detail: "The build fails because the fixture is stale.",
+              },
+            },
+            {
+              id: "failed-command-entry",
+              kind: "work",
+              createdAt: "2026-01-01T00:00:05Z",
+              entry: {
+                id: "failed-command",
+                createdAt: "2026-01-01T00:00:05Z",
+                runId: "turn-1" as never,
+                label: "Ran rg",
+                command: "rg toolCall",
+                requestKind: "command",
+                tone: "tool" as const,
+                toolLifecycleStatus: "failed" as const,
+              },
+            },
+          ],
+        });
+
+      const enabledRow = deriveRows(true).find((row) => row.kind === "thinking");
+      expect(enabledRow).toMatchObject({
+        kind: "thinking",
+        thought: { id: "settled-thought" },
+      });
+      const disabledRow = deriveRows(false).find((row) => row.kind === "thinking");
+      expect(disabledRow).toMatchObject({ kind: "thinking" });
+      expect(disabledRow?.thought).toBeUndefined();
+      const defaultRow = deriveRows().find((row) => row.kind === "thinking");
+      expect(defaultRow?.thought).toBeUndefined();
+    });
+
+    it("leaves the live row bare while the thought is still empty", () => {
+      const rows = deriveMessagesTimelineRows({
+        liveThinkingEnabled: true,
+        ...liveThinkingBase,
+        timelineEntries: [
+          {
+            id: "empty-thought-entry",
+            kind: "work",
+            createdAt: "2026-01-01T00:00:05Z",
+            entry: {
+              id: "empty-thought",
+              createdAt: "2026-01-01T00:00:05Z",
+              runId: "turn-1" as never,
+              label: "Thinking",
+              tone: "thinking" as const,
+              itemType: "reasoning" as const,
+              toolLifecycleStatus: "inProgress" as const,
+              detail: "   ",
+            },
+          },
+        ],
+      });
+      const liveRow = rows.find((r) => r.kind === "work-live");
+      expect(liveRow).toBeUndefined();
+      const thinkingRow = rows.find((r) => r.kind === "thinking");
+      expect(thinkingRow?.thought).toBeUndefined();
+    });
+  });
+
   it("does not fold the session's running turn when latestRun regresses", () => {
     const rows = deriveMessagesTimelineRows({
       timelineEntries: [

apps/web/src/components/chat/MessagesTimeline.logic.ts

@@ -522,6 +522,8 @@ type MessagesTimelineRowContent =
       expanded: boolean;
       active: boolean;
       thought?: WorkLogEntry;
+      /** Labs live-thinking: the row's click expands the full streaming thought. */
+      liveThinking?: true;
     }
   | {
       kind: "working";
@@ -536,6 +538,8 @@ type MessagesTimelineRowContent =
       createdAt: string | null;
       groupId?: string;
       expanded?: boolean;
+      /** Labs live-thinking: the streaming thought the row expands into. */
+      thought?: WorkLogEntry;
     }
   | {
       kind: "work-toggle";
@@ -1392,6 +1396,8 @@ export function deriveMessagesTimelineRows(input: {
   expandedAttemptIds?: ReadonlySet<RunAttemptId>;
   expandedWorkGroupIds?: ReadonlySet<string>;
   isWorking: boolean;
+  /** Labs live-thinking: the live Thinking row expands into the streaming thought. */
+  liveThinkingEnabled?: boolean;
   /** Native subagent work has no app run; runless entries form the live response. */
   runlessWorkActive?: boolean;
   activeTurnStartedAt?: string | null;
@@ -1565,6 +1571,9 @@ export function deriveMessagesTimelineRows(input: {
             expanded: input.expandedWorkGroupIds?.has(groupId) ?? false,
             active: latestToolKeepsActivityLive,
             ...(latestThoughtEntry ? { thought: latestThoughtEntry.entry } : {}),
+            ...(input.liveThinkingEnabled === true && latestThoughtEntry
+              ? { liveThinking: true as const }
+              : {}),
           };
         })()
       : null;
@@ -2102,6 +2111,7 @@ export function deriveMessagesTimelineRows(input: {
     !compactionOnlyRunFinished &&
     (latestToolFailed || (!hasActivityRow && !input.pendingApprovalRequestIds?.size))
   ) {
+    const liveThought = input.liveThinkingEnabled === true ? latestThoughtEntry?.entry : undefined;
     const failedGroupAnchor = latestToolFailed ? activeWorkAnchor : undefined;
     if (failedGroupAnchor) {
       const groupId = workGroupId(failedGroupAnchor.id);
@@ -2112,6 +2122,7 @@ export function deriveMessagesTimelineRows(input: {
         createdAt: input.activeTurnStartedAt ?? null,
         groupId,
         expanded,
+        ...(liveThought ? { thought: liveThought } : {}),
       });
       if (expanded) {
         nextRows.push(
@@ -2127,6 +2138,7 @@ export function deriveMessagesTimelineRows(input: {
         kind: "thinking",
         id: LIVE_ACTIVITY_ROW_ID,
         createdAt: input.activeTurnStartedAt ?? null,
+        ...(liveThought ? { thought: liveThought } : {}),
       });
     }
   }

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -24,6 +24,7 @@ import { resolveWorkGroupScrollAnchor } from "@t3tools/client-runtime/work-log/s
 import type { WorkflowOpening } from "@t3tools/client-runtime/state/subagentRuntime";
 import { observeResize } from "~/lib/observeResize";
 import { useStableCallback } from "~/hooks/useStableCallback";
+import { useEnvironmentSettings } from "../../hooks/useSettings";
 
 const NOOP_USE_ARTIFACT_TEMPLATE = () => {};
 const EMPTY_PENDING_APPROVALS: ReadonlyArray<PendingApproval> = [];
@@ -393,6 +394,11 @@ const ConversationTimeline = memo(function ConversationTimeline({
   topFadeEnabled = false,
   historyControls,
 }: MessagesTimelineProps) {
+  // Labs live-thinking: the live Thinking row expands into the streaming thought.
+  const liveThinkingEnabled = useEnvironmentSettings(
+    activeThreadEnvironmentId,
+    (settings) => settings.liveThinkingEnabled,
+  );
   const listIdentityKey = displayThreadKey ?? routeThreadKey;
   // Snapshot restore positions on identity changes; ongoing scroll writes must not move them.
   // Find open at the opening is part of the snapshot: opening find later
@@ -674,6 +680,7 @@ const ConversationTimeline = memo(function ConversationTimeline({
     expandedAttemptIds: visibleExpandedAttemptIds,
     expandedWorkGroupIds,
     isWorking,
+    liveThinkingEnabled,
     runlessWorkActive,
     activeTurnStartedAt,
     turnDiffSummaries,