feat: thinking block designs should occupy lesser space

[uinstinct]

Description

Makes thinking blocks occupy less space using the same design as tool calls.

• makes thinking block same as simple tool call ui
• replaces reasoning with thinking block peek

resolves CON-4521

AI Code Review

• Team members only: AI review runs automatically when PR is opened or marked ready for review
• Team members can also trigger a review by commenting @continue-review

Checklist

• [] I've read the contributing guide
• [] The relevant docs, if any, have been updated or created
• [] The relevant tests, if any, have been updated or created

Screen recording or screenshot

before

after

Tests

[ What tests were added or updated to ensure the changes work as expected? ]

---

Summary by cubic

Make thinking blocks more compact by matching the simple tool call UI, reducing vertical space and improving readability. Addresses CON-4521.

• Refactors
  • Replace Reasoning with ThinkingBlockPeek in StepContainer; remove Reasoning.tsx.
  • Restyle ThinkingBlockPeek to match tool call UI; collapsed by default with a small toggle.
  • Keep behavior: animated thinking state, elapsed time, token count, and redacted messaging.
  • Avoid duplicate redacted blocks and cap expanded height.

^{Written for commit 302ffb8. Summary will update automatically on new commits.}

[cubic-dev-ai]

2 issues found across 3 files

Prompt for AI agents (all 2 issues)

Understand the root cause of the following 2 issues and fix them.


<file name="gui/src/components/StepContainer/StepContainer.tsx">

<violation number="1" location="gui/src/components/StepContainer/StepContainer.tsx:92">
Passing the current item as prevItem breaks ThinkingBlockPeek’s duplicate-suppression logic, so assistant steps will render an extra thinking block whenever a standalone thinking message precedes them.</violation>
</file>

<file name="gui/src/components/mainInput/belowMainInput/ThinkingBlockPeek.tsx">

<violation number="1" location="gui/src/components/mainInput/belowMainInput/ThinkingBlockPeek.tsx:61">
Replacing the toggle with a plain div drops button semantics and keyboard support, so keyboard users can’t open the thinking block. Please keep this control as a button (or add appropriate semantics and key handling).</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

[cubic-dev-ai]

Passing the current item as prevItem breaks ThinkingBlockPeek’s duplicate-suppression logic, so assistant steps will render an extra thinking block whenever a standalone thinking message precedes them.

Prompt for AI agents

Address the following comment on gui/src/components/StepContainer/StepContainer.tsx at line 92:

<comment>Passing the current item as prevItem breaks ThinkingBlockPeek’s duplicate-suppression logic, so assistant steps will render an extra thinking block whenever a standalone thinking message precedes them.</comment>

<file context>
@@ -85,7 +85,14 @@ export default function StepContainer(props: StepContainerProps) {
+              &lt;ThinkingBlockPeek
+                content={props.item.reasoning.text}
+                index={props.index}
+                prevItem={props.index &gt; 0 ? props.item : null}
+                inProgress={!props.item.reasoning?.endAt}
+              /&gt;
</file context>

[uinstinct]

this will never be true because redactedThinking in props is always passed as undefined

[cubic-dev-ai]

Thanks for the feedback! I've saved this as a new learning to improve future reviews.

[cubic-dev-ai]

Replacing the toggle with a plain div drops button semantics and keyboard support, so keyboard users can’t open the thinking block. Please keep this control as a button (or add appropriate semantics and key handling).

Prompt for AI agents

Address the following comment on gui/src/components/mainInput/belowMainInput/ThinkingBlockPeek.tsx at line 61:

<comment>Replacing the toggle with a plain div drops button semantics and keyboard support, so keyboard users can’t open the thinking block. Please keep this control as a button (or add appropriate semantics and key handling).</comment>

<file context>
@@ -66,58 +56,49 @@ function ThinkingBlockPeek({
-          &lt;/SpoilerButton&gt;
+      &lt;div className=&quot;mt-1 flex flex-col px-4&quot;&gt;
+        &lt;div className=&quot;flex min-w-0 flex-row items-center justify-between gap-2&quot;&gt;
+          &lt;div
+            className=&quot;text-description flex min-w-0 cursor-pointer flex-row items-center gap-1.5 text-xs transition-colors duration-200 ease-in-out hover:brightness-125&quot;
+            data-testid=&quot;thinking-block-peek&quot;
</file context>

✅ Addressed in 302ffb8