From bf761384025e71f5521888cc8d3710cca3da7436 Mon Sep 17 00:00:00 2001
From: "wayne.luo" <wayne.luo@bybit.com>
Date: Tue, 8 Sep 2026 17:11:24 +0800
Subject: [PATCH 1/2] Show the reasoning level of the running turn

The reasoning control is hidden while a turn streams because the level
cannot be changed mid-turn. That also hides the level itself, exactly when
it decides how long the turn runs and how much budget it spends.

Render the active level as a read-only label in the same slot while
streaming. It is not a button: nothing can change until the turn ends, so
a clickable control would only invite clicks that do nothing. The label
reuses the existing display label, icon, padding, height, and mobile
collapse rule, so the control row keeps its spacing next to Stop.
---
 .../ChatInput.streaming-thinking.test.mjs     | 26 +++++++++++++++++++
 components/ChatInput.tsx                      | 20 ++++++++++++++
 lib/i18n/messages/en.ts                       |  1 +
 lib/i18n/messages/zh-CN.ts                    |  1 +
 lib/i18n/messages/zh-TW.ts                    |  1 +
 5 files changed, 49 insertions(+)
 create mode 100644 components/ChatInput.streaming-thinking.test.mjs

diff --git a/components/ChatInput.streaming-thinking.test.mjs b/components/ChatInput.streaming-thinking.test.mjs
new file mode 100644
index 000000000..5d31cf22c
--- /dev/null
+++ b/components/ChatInput.streaming-thinking.test.mjs
@@ -0,0 +1,26 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+
+const source = await readFile(new URL("./ChatInput.tsx", import.meta.url), "utf8");
+const controls = source.slice(source.indexOf("{isStreaming && onThinkingLevelChange &&"));
+
+test("shows the reasoning level of the running turn without offering a control", () => {
+  const readOnly = controls.slice(0, controls.indexOf("{!isStreaming && onThinkingLevelChange &&"));
+  assert.match(readOnly, /<span\s+title=\{t\("chat\.currentReasoning", \{ level: thinkingDisplayLabel \}\)\}/);
+  assert.match(readOnly, /\{thinkingDisplayLabel\}<\/span>/);
+  assert.doesNotMatch(readOnly, /<button|onClick=/);
+});
+
+test("keeps the read-only level aligned with the neighbouring controls", () => {
+  const readOnly = controls.slice(0, controls.indexOf("{!isStreaming && onThinkingLevelChange &&"));
+  const dropdown = controls.slice(controls.indexOf("{!isStreaming && onThinkingLevelChange &&"));
+  const padding = /padding: isMobile \? "0 6px" : "8px 12px"/;
+  const height = /height: 32/;
+  for (const [label, markup] of [["read-only", readOnly], ["dropdown", dropdown]]) {
+    assert.match(markup, padding, `${label} horizontal padding`);
+    assert.match(markup, height, `${label} height`);
+  }
+  // The label collapses to the icon on mobile exactly like the editable control.
+  assert.match(readOnly, /\(!isMobile \|\| controlsMenuOpen\) &&/);
+});
diff --git a/components/ChatInput.tsx b/components/ChatInput.tsx
index 1f91913cb..e30ab7b03 100644
--- a/components/ChatInput.tsx
+++ b/components/ChatInput.tsx
@@ -26,6 +26,7 @@ import { FolderIcon, getFileIcon } from "./FileIcons";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { useI18n } from "@/hooks/useI18n";
 import { useChatAppearance } from "@/hooks/useChatAppearance";
+import { ThinkingIcon } from "./ThinkingIcon";
 import type { ToolPreset } from "@/lib/tool-presets";
 import { ModelSelector, type ModelSelectorOption } from "./ModelSelector";
 
@@ -2268,6 +2269,25 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput({
                 backdropFilter: "blur(10px)",
               } : null),
             }}>
+            {isStreaming && onThinkingLevelChange && (
+              // The level cannot change mid-turn, so this is read-only: a button here
+              // would invite clicks that do nothing. It still answers the question
+              // that matters while a turn runs, which budget is this one spending.
+              <span
+                title={t("chat.currentReasoning", { level: thinkingDisplayLabel })}
+                style={{
+                  display: "flex", alignItems: "center", gap: 5,
+                  // The control row has no gap; each control pads itself, so match
+                  // the neighbouring buttons or this sits flush against Stop.
+                  padding: isMobile ? "0 6px" : "8px 12px",
+                  height: 32,
+                  color: "var(--text-dim)", fontSize: 12,
+                }}
+              >
+                <ThinkingIcon active={false} size={11} />
+                {(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{thinkingDisplayLabel}</span>}
+              </span>
+            )}
             {!isStreaming && onThinkingLevelChange && (
               <div ref={thinkingDropdownRef} style={{ position: "relative" }}>
                 <button
diff --git a/lib/i18n/messages/en.ts b/lib/i18n/messages/en.ts
index 632b630ce..946be622d 100644
--- a/lib/i18n/messages/en.ts
+++ b/lib/i18n/messages/en.ts
@@ -372,6 +372,7 @@ export const enLocale: LocalePlugin = {
     "chat.allBuiltInTools": "All built-in tools",
     "chat.changeReasoning": "Change reasoning level: {level}",
     "chat.changeReasoningLabel": "Change reasoning level",
+    "chat.currentReasoning": "Reasoning level for this turn: {level}",
     "chat.changeToolPreset": "Change tool preset",
     "chat.stopCompaction": "Stop compaction",
     "chat.compactContext": "Compact context",
diff --git a/lib/i18n/messages/zh-CN.ts b/lib/i18n/messages/zh-CN.ts
index a2f69aa51..88a0723a0 100644
--- a/lib/i18n/messages/zh-CN.ts
+++ b/lib/i18n/messages/zh-CN.ts
@@ -372,6 +372,7 @@ export const zhCNLocale: LocalePlugin = {
     "chat.allBuiltInTools": "全部内置工具",
     "chat.changeReasoning": "更改推理级别：{level}",
     "chat.changeReasoningLabel": "更改推理级别",
+    "chat.currentReasoning": "本轮使用的推理级别：{level}",
     "chat.changeToolPreset": "更改工具预设",
     "chat.stopCompaction": "停止压缩",
     "chat.compactContext": "压缩上下文",
diff --git a/lib/i18n/messages/zh-TW.ts b/lib/i18n/messages/zh-TW.ts
index c8ddcd17d..ff36c3f2e 100644
--- a/lib/i18n/messages/zh-TW.ts
+++ b/lib/i18n/messages/zh-TW.ts
@@ -372,6 +372,7 @@ export const zhTWLocale: LocalePlugin = {
     "chat.allBuiltInTools": "全部內建工具",
     "chat.changeReasoning": "變更推理層級：{level}",
     "chat.changeReasoningLabel": "變更推理層級",
+    "chat.currentReasoning": "本輪使用的推理層級：{level}",
     "chat.changeToolPreset": "更改工具預設",
     "chat.stopCompaction": "停止壓縮",
     "chat.compactContext": "壓縮上下文",

From 37b65538b77617a5ee4b596c82128b6300cf9616 Mon Sep 17 00:00:00 2001
From: "wayne.luo" <wayne.luo@bybit.com>
Date: Wed, 9 Sep 2026 13:20:54 +0800
Subject: [PATCH 2/2] Address review: show the level the turn actually runs
 with

Choosing "Use pi default" sets the selector to "auto" without touching the
runtime, so the runtime can keep an earlier explicit level. Rendering the
selector state while streaming would then label a turn "auto" that is in
fact running at, say, "high".

When a turn starts, read the runtime's thinking level from the agent state
and adopt it, so the read-only label and the selector both reflect the
level in effect. The lookup is skipped if the turn has already ended.
---
 components/ChatInput.streaming-thinking.test.mjs |  9 +++++++++
 hooks/useAgentSession.ts                         | 12 ++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/components/ChatInput.streaming-thinking.test.mjs b/components/ChatInput.streaming-thinking.test.mjs
index 5d31cf22c..24d30dd0a 100644
--- a/components/ChatInput.streaming-thinking.test.mjs
+++ b/components/ChatInput.streaming-thinking.test.mjs
@@ -24,3 +24,12 @@ test("keeps the read-only level aligned with the neighbouring controls", () => {
   // The label collapses to the icon on mobile exactly like the editable control.
   assert.match(readOnly, /\(!isMobile \|\| controlsMenuOpen\) &&/);
 });
+
+test("shows the level the runtime actually applies, not the selector placeholder", async () => {
+  const session = await readFile(new URL("../hooks/useAgentSession.ts", import.meta.url), "utf8");
+  const start = session.slice(session.indexOf('case "agent_start":'), session.indexOf('case "agent_end":'));
+  // Choosing "auto" leaves pi's setting untouched, so the selector alone cannot be trusted.
+  assert.match(session, /if \(level === "auto"\) return;/);
+  assert.match(start, /fetch\(`\/api\/agent\/\$\{encodeURIComponent\(sessionIdRef\.current\)\}`\)/);
+  assert.match(start, /if \(!agentRunningRef\.current \|\| !d\.state\?\.thinkingLevel\) return;\s*setThinkingLevel\(d\.state\.thinkingLevel as ThinkingLevelOption\);/);
+});
diff --git a/hooks/useAgentSession.ts b/hooks/useAgentSession.ts
index efd2b8132..14951a048 100644
--- a/hooks/useAgentSession.ts
+++ b/hooks/useAgentSession.ts
@@ -1071,6 +1071,18 @@ export function useAgentSession(opts: UseAgentSessionOptions) {
         setAgentRunning(true);
         setAgentPhase({ kind: "waiting_model" });
         dispatch({ type: "start" });
+        // "auto" is a client-side placeholder that leaves pi's setting untouched,
+        // so the selector can disagree with the runtime. Show the level this turn
+        // actually runs with.
+        if (sessionIdRef.current) {
+          fetch(`/api/agent/${encodeURIComponent(sessionIdRef.current)}`)
+            .then((r) => r.json())
+            .then((d: { state?: AgentStateResponse }) => {
+              if (!agentRunningRef.current || !d.state?.thinkingLevel) return;
+              setThinkingLevel(d.state.thinkingLevel as ThinkingLevelOption);
+            })
+            .catch(() => {});
+        }
         break;
       case "agent_end":
         // One logical prompt can emit multiple agent_end events before retrying,