Merge branch 'streamed-output-chain-of-thought'

Author: qorzj

package-lock.json

@@ -42,6 +42,7 @@
     "react": "^19.2.5",
     "read-package-up": "^12.0.0",
     "sharp": "^0.35.3",
+    "string-width": "^8.2.1",
     "yargs": "^18.0.0"
   },
   "devDependencies": {

packages/cli/package.json

@@ -1,5 +1,6 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
+import stringWidth from "string-width";
 import { buildLoadingText } from "../ui";
 
 test("buildLoadingText returns plain Thinking... when no progress", () => {
@@ -109,3 +110,60 @@ test("buildLoadingText falls back to Thinking... when timestamp is unparseable",
   });
   assert.equal(text, "Thinking...");
 });
+
+const previewProgress = {
+  requestId: "preview",
+  startedAt: "2026-04-28T00:00:00.000Z",
+  estimatedTokens: 1501,
+  formattedTokens: "1.5k",
+  phase: "update" as const,
+  previewText: "latest text",
+};
+const previewNow = Date.parse(previewProgress.startedAt) + 5000;
+const previewStatus = "Thinking... (5s) · ↓ 1.5k tokens";
+
+test("loading preview requires more than 1500 tokens and preserves status priority", () => {
+  const input = { progress: previewProgress, now: previewNow, screenWidth: 100 };
+  assert.equal(buildLoadingText(input), `${previewStatus} [latest text]`);
+  assert.equal(buildLoadingText({ ...input, progress: { ...previewProgress, estimatedTokens: 1500 } }), previewStatus);
+  assert.equal(buildLoadingText({ ...input, progress: { ...previewProgress, previewText: "" } }), previewStatus);
+  assert.equal(buildLoadingText({ ...input, now: previewNow - 4000 }), "Thinking...");
+  assert.equal(
+    buildLoadingText({
+      ...input,
+      processes: new Map([["p", { startTime: previewProgress.startedAt, command: "cmd" }]]),
+    }),
+    "(5s) cmd"
+  );
+  assert.equal(
+    buildLoadingText({ ...input, retry: { requestId: "r", error: "err", attempt: 1, maxRetries: 5, delayMs: 800 } }),
+    "Reconnecting... 1/5 (esc to interrupt)"
+  );
+});
+
+test("loading preview keeps the newest complete graphemes within the reserved boundary", () => {
+  const previewText = "old ".repeat(100) + "中文👨‍👩‍👧‍👦é";
+  for (const screenWidth of [35, 60, 70, 80, 100, 200]) {
+    const text = buildLoadingText({ progress: { ...previewProgress, previewText }, now: previewNow, screenWidth });
+    if (text !== previewStatus) {
+      assert.ok(stringWidth(text) <= screenWidth - 28);
+      assert.ok(text.startsWith(`${previewStatus} [...`));
+      assert.ok(text.endsWith("é]"));
+      const tail = text.slice(previewStatus.length + 5, -1);
+      assert.ok(previewText.endsWith(tail));
+      assert.ok(!tail.startsWith("\u200d"));
+    }
+  }
+  assert.equal(buildLoadingText({ progress: previewProgress, now: previewNow, screenWidth: 40 }), previewStatus);
+});
+
+test("loading preview hides below 80 columns and returns when the terminal grows", () => {
+  const input = { progress: previewProgress, now: previewNow };
+  for (const screenWidth of [40, 60, 70, 79, 0]) {
+    assert.equal(buildLoadingText({ ...input, screenWidth }), previewStatus);
+  }
+  assert.equal(buildLoadingText(input), previewStatus);
+  for (const screenWidth of [80, 100, 160]) {
+    assert.equal(buildLoadingText({ ...input, screenWidth }), `${previewStatus} [latest text]`);
+  }
+});

packages/cli/src/tests/loading-text.test.ts

@@ -0,0 +1,53 @@
+import assert from "node:assert/strict";
+import { Writable } from "node:stream";
+import { test } from "node:test";
+import { setTimeout } from "node:timers/promises";
+import { stripVTControlCharacters } from "node:util";
+import React from "react";
+import { render } from "ink";
+import stringWidth from "string-width";
+import { StatusLine } from "../ui/components/status-line";
+
+test("model status stays on one physical line while the spinner updates and the terminal shrinks", async () => {
+  const frames: string[] = [];
+  const output = Object.assign(
+    new Writable({
+      write(chunk, _encoding, callback) {
+        const frame = stripVTControlCharacters(chunk.toString()).trimEnd();
+        if (frame) frames.push(frame);
+        callback();
+      },
+    }),
+    { columns: 120, rows: 24, isTTY: true }
+  );
+  const text = "status: processing · 81.1K/1M [▓░░░░░░░░░░░░░░░] 8% · deepseek-v4-flash max 中文👋";
+  const app = render(React.createElement(StatusLine, { busy: true, text, width: output.columns }), {
+    stdout: output as unknown as NodeJS.WriteStream,
+    debug: true,
+    patchConsole: false,
+    exitOnCtrlC: false,
+  });
+  try {
+    for (const width of [120, 79, 65, 40, 120]) {
+      frames.length = 0;
+      output.columns = width;
+      output.emit("resize");
+      app.rerender(React.createElement(StatusLine, { busy: true, text, width }));
+      await app.waitUntilRenderFlush();
+      // A resize can flush the previous props before React commits the new width.
+      const resizedFrame = frames.at(-1);
+      frames.length = 0;
+      if (resizedFrame) frames.push(resizedFrame);
+      await setTimeout(100);
+      await app.waitUntilRenderFlush();
+      assert.ok(frames.length > 0);
+      for (const frame of frames) {
+        assert.equal(frame.split("\n").length, 1, frame);
+        assert.ok(stringWidth(frame) <= width, frame);
+      }
+    }
+  } finally {
+    app.unmount();
+    app.cleanup();
+  }
+});

packages/cli/src/tests/status-line-render.test.ts

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import { Box, Text } from "ink";
+
+const STATUS_SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export const StatusLine = React.memo(function StatusLine({
+  busy,
+  text,
+  width,
+}: {
+  busy: boolean;
+  text?: string;
+  width: number;
+}): React.ReactElement {
+  const [spinnerIndex, setSpinnerIndex] = useState(0);
+
+  useEffect(() => {
+    if (!busy) {
+      setSpinnerIndex(0);
+      return;
+    }
+
+    const timer = setInterval(() => {
+      setSpinnerIndex((index) => (index + 1) % STATUS_SPINNER_FRAMES.length);
+    }, 80);
+    return () => clearInterval(timer);
+  }, [busy]);
+
+  return (
+    <Box width={width} height={1} overflow="hidden">
+      {busy ? (
+        <Box marginRight={1} flexShrink={0}>
+          <Text color="yellow">{STATUS_SPINNER_FRAMES[spinnerIndex]}</Text>
+        </Box>
+      ) : null}
+      {text ? (
+        <Box flexGrow={1} flexShrink={1} minWidth={0}>
+          <Text dimColor wrap="truncate-end">
+            {text}
+          </Text>
+        </Box>
+      ) : null}
+    </Box>
+  );
+});

packages/cli/src/ui/components/status-line.tsx

@@ -1,4 +1,5 @@
 import type { LlmRetryEvent, LlmStreamProgress, SessionEntry } from "@vegamo/deepcode-core";
+import stringWidth from "string-width";
 
 type RunningProcesses = SessionEntry["processes"];
 
@@ -7,9 +8,12 @@ export type LoadingTextInput = {
   retry?: LlmRetryEvent | null;
   processes?: RunningProcesses;
   now: number;
+  screenWidth?: number;
 };
 
 const STALL_THRESHOLD_MS = 3000;
+const MIN_PREVIEW_TERMINAL_WIDTH = 80;
+const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
 
 export function buildLoadingText(input: LoadingTextInput): string {
   const { progress, retry, processes, now } = input;
@@ -38,7 +42,27 @@ export function buildLoadingText(input: LoadingTextInput): string {
 
   const elapsedSeconds = Math.floor(elapsedMs / 1000);
   const tokens = progress.formattedTokens || "0";
-  return `Thinking... (${elapsedSeconds}s) · ↓ ${tokens} tokens`;
+  const status = `Thinking... (${elapsedSeconds}s) · ↓ ${tokens} tokens`;
+  const preview = progress.previewText;
+  if (progress.estimatedTokens <= 1500 || !preview || (input.screenWidth ?? 0) < MIN_PREVIEW_TERMINAL_WIDTH) {
+    return status;
+  }
+  const available = (input.screenWidth ?? 0) - 28 - stringWidth(status) - 3; // Space and brackets.
+  if (available <= 0) {
+    return status;
+  }
+  if (stringWidth(preview) <= available) {
+    return `${status} [${preview}]`;
+  }
+  let tail = "";
+  let width = 3; // Leading ellipsis.
+  const graphemes = Array.from(segmenter.segment(preview), (part) => part.segment);
+  for (let i = graphemes.length - 1; i >= 0; i--) {
+    width += stringWidth(graphemes[i]!);
+    if (width > available) break;
+    tail = graphemes[i] + tail;
+  }
+  return tail ? `${status} [...${tail}]` : status;
 }
 
 function buildProcessLoadingText(processes: RunningProcesses | undefined, now: number): string | null {

packages/cli/src/ui/core/loading-text.ts

@@ -8,6 +8,7 @@ import { type PromptDraft, PromptInput, type PromptSubmission } from "./PromptIn
 import { MessageView, RawModeExitPrompt } from "../components";
 import { SessionList } from "./SessionList";
 import { type UndoRestoreMode, UndoSelector } from "./UndoSelector";
+import { StatusLine } from "../components/status-line";
 import { buildLoadingText } from "../core/loading-text";
 import { findExpandedThinkingId } from "../core/thinking-state";
 import { WelcomeScreen } from "./WelcomeScreen";
@@ -60,8 +61,6 @@ import { writeStdout, writeStdoutLine } from "../../utils/stdio-helpers";
 
 type View = "chat" | "session-list" | "undo" | "mcp-status";
 
-const STATUS_SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-
 type AppProps = {
   projectRoot: string;
   initialPrompt?: string;
@@ -70,39 +69,6 @@ type AppProps = {
   onRestart?: () => void;
 };
 
-const StatusLine = React.memo(function StatusLine({
-  busy,
-  text,
-}: {
-  busy: boolean;
-  text?: string;
-}): React.ReactElement {
-  const [spinnerIndex, setSpinnerIndex] = useState(0);
-
-  useEffect(() => {
-    if (!busy) {
-      setSpinnerIndex(0);
-      return;
-    }
-
-    const timer = setInterval(() => {
-      setSpinnerIndex((index) => (index + 1) % STATUS_SPINNER_FRAMES.length);
-    }, 80);
-    return () => clearInterval(timer);
-  }, [busy]);
-
-  return (
-    <Box>
-      {busy ? (
-        <Box marginRight={1}>
-          <Text color="yellow">{STATUS_SPINNER_FRAMES[spinnerIndex]}</Text>
-        </Box>
-      ) : null}
-      {text ? <Text dimColor>{text}</Text> : null}
-    </Box>
-  );
-});
-
 function App({ projectRoot, initialPrompt, resumeSessionId, forkSessionId, onRestart }: AppProps): React.ReactElement {
   const { exit } = useApp();
   const { stdout, write } = useStdout();
@@ -876,11 +842,12 @@ function App({ projectRoot, initialPrompt, resumeSessionId, forkSessionId, onRes
             progress: streamProgress,
             retry: retryEvent,
             processes: runningProcesses,
+            screenWidth,
             now: Date.now(),
           })
         : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps -- nowTick forces periodic recalculation for spinner animation
-    [busy, streamProgress, retryEvent, runningProcesses, nowTick]
+    [busy, streamProgress, retryEvent, runningProcesses, nowTick, screenWidth]
   );
 
   const welcomeItem: SessionMessage = useMemo(
@@ -996,7 +963,7 @@ function App({ projectRoot, initialPrompt, resumeSessionId, forkSessionId, onRes
   }
 
   return (
-    <Box flexDirection="column" width={screenWidth} minWidth={80} overflowX={"visible"}>
+    <Box flexDirection="column" width={screenWidth}>
       <Static items={staticItems}>
         {(item) => {
           if (item.id.startsWith("__welcome__")) {
@@ -1020,7 +987,7 @@ function App({ projectRoot, initialPrompt, resumeSessionId, forkSessionId, onRes
           );
         }}
       </Static>
-      {(busy || statusLine) && !isExiting ? <StatusLine busy={busy} text={statusLine} /> : null}
+      {(busy || statusLine) && !isExiting ? <StatusLine busy={busy} text={statusLine} width={screenWidth} /> : null}
       {errorLine ? (
         <Box>
           <Text color="red">Error: {errorLine}</Text>

packages/cli/src/ui/views/App.tsx

@@ -871,7 +871,9 @@ export const PromptInput = React.memo(function PromptInput({
       <SlashCommandMenu width={screenWidth} items={slashMenu} activeIndex={menuIndex} />
       {!showFooterText && (
         <Box>
-          <Text dimColor>{footerText}</Text>
+          <Text dimColor wrap="truncate-end">
+            {footerText}
+          </Text>
         </Box>
       )}
       {statusLineSegments && statusLineSegments.length > 0 && (