Update reasoning row states

Author: jacobjmc

src/features/messages/components/MessageRows.tsx

@@ -405,7 +405,11 @@ export const ReasoningRow = memo(function ReasoningRow({
   const { summaryTitle, bodyText, hasBody } = parsed;
   const reasoningTone: StatusTone = hasBody ? "completed" : "processing";
   return (
-    <div className="tool-inline reasoning-inline">
+    <div
+      className={`tool-inline reasoning-inline ${
+        hasBody ? "reasoning-inline-with-body" : "reasoning-inline-title-only"
+      }`}
+    >
       <button
         type="button"
         className="tool-inline-bar-toggle"

src/features/messages/components/Messages.test.tsx

@@ -335,7 +335,7 @@ describe("Messages", () => {
     expect(useFileLinkOpenerMock).toHaveBeenCalledTimes(1);
   });
 
-  it("renders title-only reasoning rows and uses reasoning title for the working indicator", () => {
+  it("renders title-only reasoning rows and keeps the working indicator generic", () => {
     const items: ConversationItem[] = [
       {
         id: "reasoning-1",
@@ -358,7 +358,8 @@ describe("Messages", () => {
     );
 
     const workingText = container.querySelector(".working-text");
-    expect(workingText?.textContent ?? "").toContain("Scanning repository");
+    expect(workingText?.textContent ?? "").toContain("Working");
+    expect(workingText?.textContent ?? "").not.toContain("Scanning repository");
     expect(container.querySelector(".reasoning-inline")).toBeTruthy();
   });
 
@@ -388,7 +389,8 @@ describe("Messages", () => {
     const reasoningDetail = container.querySelector(".reasoning-inline-detail");
     expect(reasoningDetail?.textContent ?? "").toContain("Looking for entry points");
     const workingText = container.querySelector(".working-text");
-    expect(workingText?.textContent ?? "").toContain("Scanning repository");
+    expect(workingText?.textContent ?? "").toContain("Working");
+    expect(workingText?.textContent ?? "").not.toContain("Scanning repository");
   });
 
   it("uses content for the reasoning title when summary is empty", () => {
@@ -414,7 +416,8 @@ describe("Messages", () => {
     );
 
     const workingText = container.querySelector(".working-text");
-    expect(workingText?.textContent ?? "").toContain("Plan from content");
+    expect(workingText?.textContent ?? "").toContain("Working");
+    expect(workingText?.textContent ?? "").not.toContain("Plan from content");
     const reasoningDetail = container.querySelector(".reasoning-inline-detail");
     expect(reasoningDetail?.textContent ?? "").toContain("More detail here");
     expect(reasoningDetail?.textContent ?? "").not.toContain("Plan from content");
@@ -453,7 +456,7 @@ describe("Messages", () => {
     expect(workingText?.textContent ?? "").not.toContain("Old reasoning title");
   });
 
-  it("keeps the latest title-only reasoning label while rendering a reasoning row", () => {
+  it("renders the title-only reasoning row and keeps the working indicator generic", () => {
     const items: ConversationItem[] = [
       {
         id: "reasoning-title-only",
@@ -485,7 +488,8 @@ describe("Messages", () => {
     );
 
     const workingText = container.querySelector(".working-text");
-    expect(workingText?.textContent ?? "").toContain("Indexing workspace");
+    expect(workingText?.textContent ?? "").toContain("Working");
+    expect(workingText?.textContent ?? "").not.toContain("Indexing workspace");
     expect(container.querySelector(".reasoning-inline")).toBeTruthy();
   });
 

src/features/messages/components/Messages.tsx

@@ -207,6 +207,25 @@ export const Messages = memo(function Messages({
     [items, reasoningMetaById],
   );
 
+  const hasVisibleReasoningInActiveTail = useMemo(() => {
+    for (let index = visibleItems.length - 1; index >= 0; index -= 1) {
+      const item = visibleItems[index];
+      if (item.kind === "message") {
+        break;
+      }
+      if (item.kind !== "reasoning") {
+        continue;
+      }
+      if (reasoningMetaById.get(item.id)?.workingLabel) {
+        return true;
+      }
+    }
+    return false;
+  }, [visibleItems, reasoningMetaById]);
+
+  const workingReasoningLabel =
+    isThinking && hasVisibleReasoningInActiveTail ? null : latestReasoningLabel;
+
   useEffect(() => {
     const itemsToExpand: string[] = [];
     for (let index = visibleItems.length - 1; index >= 0; index -= 1) {
@@ -517,7 +536,7 @@ export const Messages = memo(function Messages({
         processingStartedAt={processingStartedAt}
         lastDurationMs={lastDurationMs}
         hasItems={items.length > 0}
-        reasoningLabel={latestReasoningLabel}
+        reasoningLabel={workingReasoningLabel}
       />
       {!items.length && !userInputNode && !isThinking && !isLoadingMessages && (
         <div className="empty messages-empty">

src/styles/messages.css

@@ -815,6 +815,32 @@
   color: var(--text-muted);
 }
 
+.reasoning-inline-title-only {
+  margin: 6px 0 10px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.reasoning-inline-title-only .tool-inline-content {
+  gap: 4px;
+}
+
+.reasoning-inline-title-only .tool-inline-summary {
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.reasoning-inline-title-only .tool-inline-value {
+  font-weight: 600;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.reasoning-inline-title-only .tool-inline-icon.processing {
+  color: var(--status-success);
+}
+
 .tool-command {
   display: flex;
   flex-direction: column;