feat(tui): share usage context formatting and refine thinking state

Author: See U

packages/tui/src/component/prompt/index.tsx

@@ -38,7 +38,7 @@ import { type AutocompleteRef, Autocomplete } from "./autocomplete"
 import { useRenderer, useTerminalDimensions, type JSX } from "@opentui/solid"
 import type { AssistantMessage, FilePart, UserMessage } from "@opencode-ai/sdk/v2"
 import { Locale } from "../../util/locale"
-import { usageColor } from "../../util/usage"
+import { usageColor, usageContext } from "../../util/usage"
 import { GLYPH } from "../../ui/glyphs"
 import { ACTIVITY_VERBS, activityVerb } from "../../ui/activity-verbs"
 import { errorMessage } from "../../util/error"
@@ -240,16 +240,14 @@ export function Prompt(props: PromptProps) {
     const last = msg.findLast((item): item is AssistantMessage => item.role === "assistant" && item.tokens.output > 0)
     if (!last) return
 
-    const tokens =
-      last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
-    if (tokens <= 0) return
-
     const model = sync.data.provider.find((item) => item.id === last.providerID)?.models[last.modelID]
-    const pct = model?.limit.context ? Math.round((tokens / model.limit.context) * 100) : undefined
+    const base = usageContext(last.tokens, model?.limit.context)
+    if (!base) return
+
     const cost = session?.cost ?? 0
     return {
-      context: pct !== undefined ? `${Locale.number(tokens)} (${pct}%)` : Locale.number(tokens),
-      percent: pct,
+      context: base.context,
+      percent: base.percent,
       cost: cost > 0 ? Locale.money(cost) : undefined,
     }
   })

packages/tui/src/context/thinking.ts

@@ -12,8 +12,31 @@ const MODES: readonly ThinkingMode[] = ["show", "hide"] as const
 export function reasoningSummary(text: string) {
   const content = text.trim()
   const match = content.match(/^\*\*([^*\n]+)\*\*(?:\r?\n\r?\n|$)/)
-  if (!match) return { title: null, body: content }
-  return { title: match[1].trim(), body: content.slice(match[0].length).trimEnd() }
+  if (match) return { title: match[1].trim(), body: content.slice(match[0].length).trimEnd() }
+  return { title: proseTitle(content), body: content }
+}
+
+const TITLE_MAX = 60
+
+// DeepSeek and most other providers stream plain-prose reasoning (no title
+// block); surface a topic preview from the first line so collapsed thinking
+// still hints at what the model is doing. Markdown decorations are stripped,
+// and the preview truncates at a word boundary.
+function proseTitle(text: string): string | null {
+  const firstLine = text.split(/\r?\n/, 1)[0].trim()
+  if (!firstLine) return null
+  const stripped = firstLine
+    .replace(/^#{1,6}\s+/, "")
+    .replace(/^[-*>+]\s+/, "")
+    .replace(/^\d+[.)]\s+/, "")
+    .replace(/\*\*/g, "")
+    .replace(/`/g, "")
+    .trim()
+  if (!stripped) return null
+  if (stripped.length <= TITLE_MAX) return stripped
+  const cut = stripped.slice(0, TITLE_MAX)
+  const lastSpace = cut.lastIndexOf(" ")
+  return `${(lastSpace > TITLE_MAX / 2 ? cut.slice(0, lastSpace) : cut).trimEnd()}…`
 }
 
 export function isThinkingMode(value: unknown): value is ThinkingMode {

packages/tui/src/routes/session/index.tsx

@@ -1596,6 +1596,7 @@ function ReasoningPart(props: { last: boolean; part: ReasoningPart; message: Ass
               internalBlockMode="top-level"
               content={ctx.conceal() ? polishMarkdown(summary().body) : summary().body}
               conceal={ctx.conceal()}
+              streaming={!isDone()}
               fg={theme.textMuted}
               bg={theme.background}
             />

packages/tui/src/routes/session/subagent-footer.tsx

@@ -6,7 +6,7 @@ import { useLocal } from "../../context/local"
 import { space } from "../../design-tokens"
 import type { AssistantMessage } from "@opencode-ai/sdk/v2"
 import { Locale } from "../../util/locale"
-import { usageColor } from "../../util/usage"
+import { usageColor, usageContext } from "../../util/usage"
 import { useCommandShortcut, useOpencodeKeymap } from "../../keymap"
 import { PixelIcon } from "../../component/icon-renderable"
 import { statusInfo } from "../../ui/icon"
@@ -40,17 +40,14 @@ export function SubagentFooter() {
     const last = msg.findLast((item): item is AssistantMessage => item.role === "assistant" && item.tokens.output > 0)
     if (!last) return
 
-    const tokens =
-      last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
-    if (tokens <= 0) return
-
     const model = sync.data.provider.find((item) => item.id === last.providerID)?.models[last.modelID]
-    const pct = model?.limit.context ? Math.round((tokens / model.limit.context) * 100) : undefined
-    const cost = session()?.cost ?? 0
+    const base = usageContext(last.tokens, model?.limit.context)
+    if (!base) return
 
+    const cost = session()?.cost ?? 0
     return {
-      context: pct !== undefined ? `${Locale.number(tokens)} (${pct}%)` : Locale.number(tokens),
-      percent: pct,
+      context: base.context,
+      percent: base.percent,
       cost: cost > 0 ? Locale.money(cost) : undefined,
     }
   })

packages/tui/src/util/usage.ts

@@ -1,3 +1,4 @@
+import { Locale } from "./locale"
 import type { Theme } from "../theme"
 
 /**
@@ -9,3 +10,24 @@ export function usageColor(theme: Theme, percent: number | undefined) {
   if (percent > 60) return theme.warning
   return theme.textMuted
 }
+
+/**
+ * Shared "tokens (pct) · cache N" usage string for the prompt bar and the
+ * subagent footer. Returns undefined when there is no token usage to show.
+ */
+export function usageContext(
+  tokens: {
+    readonly input: number
+    readonly output: number
+    readonly reasoning: number
+    readonly cache: { readonly read: number; readonly write: number }
+  },
+  contextLimit: number | undefined,
+) {
+  const total = tokens.input + tokens.output + tokens.reasoning + tokens.cache.read + tokens.cache.write
+  if (total <= 0) return undefined
+  const percent = contextLimit ? Math.round((total / contextLimit) * 100) : undefined
+  const context = percent !== undefined ? `${Locale.number(total)} (${percent}%)` : Locale.number(total)
+  const cache = tokens.cache.read > 0 ? ` · cache ${Locale.number(tokens.cache.read)}` : ""
+  return { context: `${context}${cache}`, percent }
+}

packages/tui/test/cli/tui/thinking.test.ts

@@ -23,14 +23,45 @@ describe("reasoningSummary", () => {
     })
   })
 
-  test("does not consume ordinary leading bold content", () => {
+  test("previews ordinary leading bold content as a prose title", () => {
     expect(reasoningSummary("**Important:** keep this in the body.")).toEqual({
-      title: null,
+      title: "Important: keep this in the body.",
       body: "**Important:** keep this in the body.",
     })
   })
 
   test("leaves content without a leading title in its body", () => {
-    expect(reasoningSummary("Details only.")).toEqual({ title: null, body: "Details only." })
+    expect(reasoningSummary("Details only.")).toEqual({ title: "Details only.", body: "Details only." })
+  })
+
+  test("previews DeepSeek-style prose reasoning from its first line", () => {
+    expect(
+      reasoningSummary(
+        "Let me trace how the session runner assembles the request.\n\nA few things to verify: the tool schema order, the system prompt, and the reasoning echo.",
+      ),
+    ).toEqual({
+      title: "Let me trace how the session runner assembles the request.",
+      body: "Let me trace how the session runner assembles the request.\n\nA few things to verify: the tool schema order, the system prompt, and the reasoning echo.",
+    })
+  })
+
+  test("strips markdown decorations from the prose preview", () => {
+    expect(reasoningSummary("## Approach\nFirst, check the cache fields.\n\nThen verify.")).toEqual({
+      title: "Approach",
+      body: "## Approach\nFirst, check the cache fields.\n\nThen verify.",
+    })
+    expect(reasoningSummary("- Investigate the failing test\n- Fix it")).toEqual({
+      title: "Investigate the failing test",
+      body: "- Investigate the failing test\n- Fix it",
+    })
+  })
+
+  test("truncates long prose previews at a word boundary", () => {
+    const longLine =
+      "Analyzing the interplay between the streamed usage payload and the cache accounting pipeline. ".repeat(2)
+    const result = reasoningSummary(longLine)
+    expect(result.title?.length).toBeLessThanOrEqual(61)
+    expect(result.title?.endsWith("…")).toBe(true)
+    expect(result.title).toBe("Analyzing the interplay between the streamed usage payload…")
   })
 })