fix(frontend): hide reasoning steps and fix thinking overlap

[icycrystal4]

Summary

• Hide all reasoning type thinking steps (displayed separately by ReasoningDisplay)
• Fix overlapping issue between "Using tools" and "Thinking..." elements

Changes

• useThinkingState.ts: Filter out all reasoning type steps since they are already displayed by ReasoningDisplay component
• SimpleThinkingView.tsx: Change margin from -mb-2 to mb-3 to prevent overlap with ReasoningDisplay

Test plan

• Start a conversation with DeepSeek R1 model
• Verify no "💭 Model Thinking" entries appear in thinking panel
• Verify "Using tools" and "Thinking..." elements do not overlap

Summary by CodeRabbit

• Bug Fixes

  • Thinking list now omits reasoning steps entirely and delegates their display to a separate reasoning component, improving clarity.

• Style

  • Adjusted container spacing in the thinking view for better visual balance.
  • Miscellaneous formatting improvements for consistency across the thinking UI code.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Reformats a thinking UI component and changes thinking-item filtering: SimpleThinkingView has cosmetic formatting and a container class tweak; useThinkingState now excludes all items whose details?.type === 'reasoning' instead of only filtering consecutive duplicates.

Changes

Cohort / File(s)	Summary
UI Component (formatting & class) frontend/src/features/tasks/components/message/thinking/SimpleThinkingView.tsx	Cosmetic formatting (removed trailing semicolons, spacing adjustments) and container class updated from -mb-2 → mb-3. No exported API changes.
Thinking state (filter logic) frontend/src/features/tasks/components/message/thinking/hooks/useThinkingState.ts	Filtering behavior changed: items now exclude all steps with details?.type === 'reasoning' rather than only removing consecutive duplicate reasoning steps. Public hook signature unchanged.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix(frontend): filter duplicate reasoning steps on page refresh #840: Modifies useThinkingState.ts filtering of reasoning steps (related logic changes).
• fix: repair process does not reveal the problem in the thought process. #782: Adjusts handling/merging of result.thinking during chat streaming (related thinking-item handling).
• refactor(frontend): composable ThinkingDisplay component architecture #698: Touched SimpleThinkingView.tsx and thinking hook previously; related to thinking UI refactor.

Suggested reviewers

• feifei325
• qdaxb
• Micro66

Poem

🐰 I hopped in code with tiny paws,
Dropped semicolons without a pause,
Reasoning whispers — now out of sight,
Clean lines bounce in morning light,
A little rabbit cheers the shift so bright.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes both main changes: hiding reasoning steps and fixing the thinking overlap issue mentioned in the PR objectives.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5317f8f and 0085c24.

📒 Files selected for processing (2)

• frontend/src/features/tasks/components/message/thinking/SimpleThinkingView.tsx
• frontend/src/features/tasks/components/message/thinking/hooks/useThinkingState.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/features/tasks/components/message/thinking/hooks/useThinkingState.ts

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{py,ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{py,ts,tsx,js,jsx}: All code comments MUST be written in English
File size MUST NOT exceed 1000 lines - split into multiple sub-modules if exceeded
Function length SHOULD NOT exceed 50 lines (preferred)

Files:

• frontend/src/features/tasks/components/message/thinking/SimpleThinkingView.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

TypeScript/React MUST use strict mode, functional components, Prettier for formatting, ESLint for linting, single quotes, and no semicolons

Files:

• frontend/src/features/tasks/components/message/thinking/SimpleThinkingView.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

TypeScript MUST use const over let, never use var

Files:

• frontend/src/features/tasks/components/message/thinking/SimpleThinkingView.tsx

frontend/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

frontend/src/**/*.{ts,tsx}: MUST use useTranslation hook imported from @/hooks/useTranslation, not from react-i18next
MUST use single namespace with useTranslation() - never use array format like useTranslation(['common', 'groups'])
Frontend message data MUST always use messages from useUnifiedMessages() hook as the single source of truth for displaying messages - never use selectedTaskDetail.subtasks
Frontend i18n translation keys MUST use current namespace format t('key.subkey') for keys within namespace and t('namespace:key.subkey') for cross-namespace keys

Files:

• frontend/src/features/tasks/components/message/thinking/SimpleThinkingView.tsx

frontend/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Frontend MUST only use NEXT_PUBLIC_* environment variables for client-safe values

Files:

• frontend/src/features/tasks/components/message/thinking/SimpleThinkingView.tsx

🧠 Learnings (3)

📚 Learning: 2025-12-31T03:47:12.173Z

Learnt from: CR
Repo: wecode-ai/Wegent PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T03:47:12.173Z
Learning: Applies to frontend/src/**/*.{ts,tsx} : Frontend message data MUST always use `messages` from `useUnifiedMessages()` hook as the single source of truth for displaying messages - never use `selectedTaskDetail.subtasks`

Applied to files:

• frontend/src/features/tasks/components/message/thinking/SimpleThinkingView.tsx

📚 Learning: 2025-12-18T02:09:09.776Z

Learnt from: CR
Repo: wecode-ai/Wegent PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-18T02:09:09.776Z
Learning: Applies to frontend/src/**/*.tsx : Frontend component files named with CRD terms: team-list.tsx, bot-form.tsx, model-selector.tsx

Applied to files:

• frontend/src/features/tasks/components/message/thinking/SimpleThinkingView.tsx

📚 Learning: 2025-12-18T02:09:09.776Z

Learnt from: CR
Repo: wecode-ai/Wegent PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-18T02:09:09.776Z
Learning: Applies to frontend/src/components/**/*.tsx : Extract reusable UI logic: place shared business components in `src/components/common/`, and pure UI components in `src/components/ui/` (shadcn/ui)

Applied to files:

• frontend/src/features/tasks/components/message/thinking/SimpleThinkingView.tsx

🧬 Code graph analysis (1)

frontend/src/features/tasks/components/message/thinking/SimpleThinkingView.tsx (2)

frontend/src/features/tasks/components/message/thinking/types.ts (1)

• ThinkingStep (8-76)

frontend/src/features/tasks/components/message/thinking/utils/thinkingUtils.ts (3)

• isRunningStatus (157-159)
• isTerminalStatus (150-152)
• extractToolCalls (11-29)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: E2E Tests (Shard 3/3)
• GitHub Check: E2E Tests (Shard 1/3)
• GitHub Check: E2E Tests (Shard 2/3)
• GitHub Check: Test wegent CLI Integration
• GitHub Check: Test Frontend

🔇 Additional comments (8)

frontend/src/features/tasks/components/message/thinking/SimpleThinkingView.tsx (8)

5-11: LGTM!

Imports are well-organized and comply with coding guidelines. The useTranslation hook is correctly imported from @/hooks/useTranslation.

---

13-29: LGTM!

Interface definitions are well-typed with appropriate optional fields and union types. Comments are in English per coding guidelines.

---

35-40: LGTM!

Good use of memo for performance optimization and proper useTranslation() usage with single namespace format as required by coding guidelines.

---

43-123: LGTM!

The tool entry processing logic is well-structured with appropriate tracking of tool start/completion pairs. The JSON parsing is properly wrapped in try/catch for robustness.

---

125-142: LGTM!

State management and early return logic are correctly implemented. The fallback to toolCountFromCounts provides good resilience when toolEntries is empty.

---

144-150: LGTM!

Translation keys correctly use the cross-namespace format (chat:messages.*) with appropriate fallback strings.

---

152-153: The margin fix correctly addresses the overlap issue.

Changing from -mb-2 (negative margin causing overlap) to mb-3 (positive margin) properly spaces this component from the ReasoningDisplay component below it.

---

154-207: LGTM!

The collapsible UI implementation is clean with proper accessibility (using a button element), appropriate status-based styling, and smooth animations. The export follows the expected pattern.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}