feat(tui): single-line tail preview in minimal thinking mode

Author: nexxeln

packages/opencode/src/cli/cmd/tui/feature-plugins/system/session-v2.tsx

@@ -390,49 +390,46 @@ function AssistantReasoning(props: {
 }) {
   const { theme } = useTheme()
   const thinking = useThinkingMode()
-  const [userExpanded, setUserExpanded] = createSignal<boolean | undefined>(undefined)
-  const [autoFolded, setAutoFolded] = createSignal(false)
+  const dimensions = useTerminalDimensions()
+  const [expanded, setExpanded] = createSignal(false)
+  const [graceElapsed, setGraceElapsed] = createSignal(false)
   const content = createMemo(() => props.part.text.replace("[REDACTED]", "").trim())
-  // v2 reasoning parts have no `time.end` (see SessionMessageAssistantReasoning
-  // in the v2 SDK), so collapse on parent-message completion. Coarser than
-  // the main session view but the best signal we have here.
-  const collapsible = createMemo(() => thinking.mode() === "minimal" && props.completedAt() !== undefined)
+  const inMinimal = createMemo(() => thinking.mode() === "minimal")
+  // v2 reasoning parts have no `time.end`, so we settle on parent-message
+  // completion. Coarser than the main session view but the best signal here.
+  const isDone = createMemo(() => props.completedAt() !== undefined)
+  const tailPreview = createMemo(() => {
+    const flat = content().replace(/\s+/g, " ").trim()
+    // Budget for the v2 view's container padding (2) + our paddingLeft (3) +
+    // "▼ Thinking: " (12) + a little slack.
+    const max = Math.max(20, dimensions().width - 20)
+    return Locale.truncateLeft(flat, max)
+  })
 
   createEffect(() => {
-    if (!collapsible()) {
-      setAutoFolded(false)
-      return
-    }
-    if (userExpanded() !== undefined) return
-    if (autoFolded()) return
+    if (!inMinimal()) return
+    if (!isDone()) return
+    if (graceElapsed()) return
     const completed = props.completedAt()
     if (completed === undefined) return
     const remaining = MINIMAL_AUTO_COLLAPSE_MS - (Date.now() - completed)
     if (remaining <= 0) {
-      setAutoFolded(true)
+      setGraceElapsed(true)
       return
     }
-    const timer = setTimeout(() => setAutoFolded(true), remaining)
+    const timer = setTimeout(() => setGraceElapsed(true), remaining)
     onCleanup(() => clearTimeout(timer))
   })
 
-  const expanded = createMemo(() => {
-    if (!collapsible()) return true
-    const choice = userExpanded()
-    if (choice !== undefined) return choice
-    return !autoFolded()
-  })
-  const collapsed = createMemo(() => collapsible() && !expanded())
   const toggle = () => {
-    if (!collapsible()) return
-    setUserExpanded(!expanded())
+    if (!inMinimal()) return
+    setExpanded((prev) => !prev)
   }
 
   return (
     <Show when={content() && thinking.mode() !== "hide"}>
-      <Show
-        when={collapsed()}
-        fallback={
+      <Switch>
+        <Match when={!inMinimal() || expanded()}>
           <box
             paddingLeft={2}
             marginTop={1}
@@ -448,24 +445,27 @@ function AssistantReasoning(props: {
               drawUnstyledText={false}
               streaming={true}
               syntaxStyle={props.subtleSyntax}
-              content={(collapsible() ? "▼ " : "") + "_Thinking:_ " + content()}
+              content={(inMinimal() ? "▼ " : "") + "_Thinking:_ " + content()}
               conceal={true}
               fg={theme.textMuted}
             />
           </box>
-        }
-      >
-        <box paddingLeft={3} marginTop={1} flexShrink={0} onMouseUp={toggle}>
-          <code
-            filetype="markdown"
-            drawUnstyledText={false}
-            syntaxStyle={props.subtleSyntax}
-            content={"▶ _Thought_"}
-            conceal={true}
-            fg={theme.textMuted}
-          />
-        </box>
-      </Show>
+        </Match>
+        <Match when={isDone() && graceElapsed()}>
+          <box paddingLeft={3} marginTop={1} flexShrink={0} onMouseUp={toggle}>
+            <text fg={theme.textMuted} wrapMode="none">
+              ▶ Thought
+            </text>
+          </box>
+        </Match>
+        <Match when={true}>
+          <box paddingLeft={3} marginTop={1} flexShrink={0} onMouseUp={toggle}>
+            <text fg={theme.textMuted} wrapMode="none">
+              {"▼ Thinking: " + tailPreview()}
+            </text>
+          </box>
+        </Match>
+      </Switch>
     </Show>
   )
 }

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -1513,70 +1513,63 @@ const PART_MAPPING = {
 function ReasoningPart(props: { last: boolean; part: ReasoningPart; message: AssistantMessage }) {
   const { theme, subtleSyntax } = useTheme()
   const ctx = use()
-  // `userExpanded` is the user's explicit choice. `undefined` means "no choice
-  // yet, follow the auto behavior". Once they click, it pins to true/false.
-  const [userExpanded, setUserExpanded] = createSignal<boolean | undefined>(undefined)
-  // Flips to true after the grace period elapses post-finalization.
-  const [autoFolded, setAutoFolded] = createSignal(false)
+  // In minimal mode the part stays a single line throughout — closed by default
+  // so the layout never shifts. Clicking expands into the full markdown block.
+  const [expanded, setExpanded] = createSignal(false)
+  // Flips after the grace window: the closed line switches from a live tail
+  // preview of the reasoning to the static "Thought for Xs" stamp.
+  const [graceElapsed, setGraceElapsed] = createSignal(false)
 
   const content = createMemo(() => {
-    // Filter out redacted reasoning chunks from OpenRouter
-    // OpenRouter sends encrypted reasoning data that appears as [REDACTED]
+    // OpenRouter encrypts some reasoning blocks; drop the placeholder.
     return props.part.text.replace("[REDACTED]", "").trim()
   })
   // Reasoning is finalized when the server sets `time.end` (see processor.ts).
-  // This flips independently of the parent message completing, so the
-  // collapse happens as soon as thinking ends — even while text/tools stream.
+  // This flips independently of the parent message completing.
   const isDone = createMemo(() => props.part.time.end !== undefined)
-  const collapsible = createMemo(() => ctx.thinkingMode() === "minimal" && isDone())
+  const inMinimal = createMemo(() => ctx.thinkingMode() === "minimal")
   const duration = createMemo(() => {
     const end = props.part.time.end
-    if (end === undefined) return 0
-    return Math.max(0, end - props.part.time.start)
+    return end === undefined ? 0 : Math.max(0, end - props.part.time.start)
+  })
+  // Live single-line preview of the streaming reasoning. Whitespace is
+  // collapsed so multi-paragraph reasoning shows as one flowing line, and we
+  // right-truncate so the most recent words remain visible as deltas arrive.
+  const tailPreview = createMemo(() => {
+    const flat = content().replace(/\s+/g, " ").trim()
+    // Budget for paddingLeft (3) + "▼ Thinking: " (12) + a couple cells slack.
+    const max = Math.max(20, ctx.width - 18)
+    return Locale.truncateLeft(flat, max)
   })
 
-  // Schedule auto-collapse a short delay after reasoning finalizes in minimal
-  // mode, so the fold doesn't snap the instant streaming stops. A manual
-  // toggle or leaving minimal mode cancels the pending timer. For reasoning
-  // that finished before this component mounted (e.g. loading a past session)
-  // we skip the grace and collapse immediately.
+  // Grace timer: after finalization the closed view holds the tail preview
+  // for a beat, then switches to the timestamp. Historical sessions (loaded
+  // later) snap directly past the grace.
   createEffect(() => {
-    if (!collapsible()) {
-      setAutoFolded(false)
-      return
-    }
-    if (userExpanded() !== undefined) return
-    if (autoFolded()) return
+    if (!inMinimal()) return
+    if (!isDone()) return
+    if (graceElapsed()) return
     const end = props.part.time.end
     if (end === undefined) return
     const remaining = MINIMAL_AUTO_COLLAPSE_MS - (Date.now() - end)
     if (remaining <= 0) {
-      setAutoFolded(true)
+      setGraceElapsed(true)
       return
     }
-    const timer = setTimeout(() => setAutoFolded(true), remaining)
+    const timer = setTimeout(() => setGraceElapsed(true), remaining)
     onCleanup(() => clearTimeout(timer))
   })
 
-  // Effective expansion: stay expanded while streaming and during grace; fold
-  // when auto-fold fires; user clicks override everything.
-  const expanded = createMemo(() => {
-    if (!collapsible()) return true
-    const choice = userExpanded()
-    if (choice !== undefined) return choice
-    return !autoFolded()
-  })
-  const collapsed = createMemo(() => collapsible() && !expanded())
   const toggle = () => {
-    if (!collapsible()) return
-    setUserExpanded(!expanded())
+    if (!inMinimal()) return
+    setExpanded((prev) => !prev)
   }
 
   return (
     <Show when={content() && ctx.thinkingMode() !== "hide"}>
-      <Show
-        when={collapsed()}
-        fallback={
+      <Switch>
+        <Match when={!inMinimal() || expanded()}>
+          {/* Full markdown block: `show` mode, or `minimal` after the user clicks open. */}
           <box
             id={"text-" + props.part.id}
             paddingLeft={2}
@@ -1592,24 +1585,29 @@ function ReasoningPart(props: { last: boolean; part: ReasoningPart; message: Ass
               drawUnstyledText={false}
               streaming={true}
               syntaxStyle={subtleSyntax()}
-              content={(collapsible() ? "▼ " : "") + "_Thinking:_ " + content()}
+              content={(inMinimal() ? "▼ " : "") + "_Thinking:_ " + content()}
               conceal={ctx.conceal()}
               fg={theme.textMuted}
             />
           </box>
-        }
-      >
-        <box id={"text-" + props.part.id} paddingLeft={3} marginTop={1} flexShrink={0} onMouseUp={toggle}>
-          <code
-            filetype="markdown"
-            drawUnstyledText={false}
-            syntaxStyle={subtleSyntax()}
-            content={"▶ _Thought for " + Locale.duration(duration()) + "_"}
-            conceal={ctx.conceal()}
-            fg={theme.textMuted}
-          />
-        </box>
-      </Show>
+        </Match>
+        <Match when={isDone() && graceElapsed()}>
+          {/* Settled: timestamp. */}
+          <box id={"text-" + props.part.id} paddingLeft={3} marginTop={1} flexShrink={0} onMouseUp={toggle}>
+            <text fg={theme.textMuted} wrapMode="none">
+              {"▶ Thought for " + Locale.duration(duration())}
+            </text>
+          </box>
+        </Match>
+        <Match when={true}>
+          {/* Still streaming or inside the grace window: live tail preview. */}
+          <box id={"text-" + props.part.id} paddingLeft={3} marginTop={1} flexShrink={0} onMouseUp={toggle}>
+            <text fg={theme.textMuted} wrapMode="none">
+              {"▼ Thinking: " + tailPreview()}
+            </text>
+          </box>
+        </Match>
+      </Switch>
     </Show>
   )
 }