fix(console): render thinking traces as markdown

[ndizazzo]

Original problem

Thinking trace content in the React chat UI rendered as pre-wrapped plain text, so markdown markers like **bold**, ordered steps, nested bullets, inline code, and emphasis appeared raw inside reasoning traces. Final assistant responses already rendered through markdown, so the trace panel looked inconsistent and harder to scan.

Diagnostics

The issue was isolated to MessageRow.tsx: normal assistant segments used AssistantMarkdown, while thinking segments used a raw span with whitespace-pre-wrap.

Screenshot of the fixed thinking trace:

Fix

• Render thinking trace segments through the existing assistant markdown renderer.
• Keep trace-specific muted styling for bold text so the reasoning panel stays visually secondary to the final answer.
• Restore semantic ordered and unordered list rendering so numbered reasoning steps and nested bullets format correctly.
• Add regression coverage for bold, inline code, italics, ordered lists, nested bullets, and hidden raw markdown markers inside thinking traces.

No protocol or compatibility impact; this is UI-only rendering behavior.

Validation

• pnpm prettier --check src/features/chat/components/MessageRow.tsx src/features/chat/components/MessageRow.test.tsx
• pnpm vitest run src/features/chat/components/MessageRow.test.tsx
• just build
• Browser check in the developer playground confirmed the thinking trace DOM includes strong, code, em, ol, and ul nodes, with no raw ** visible.
• UI changes include screenshot above.

Summary by CodeRabbit

Release Notes

• New Features

  • Enhanced markdown rendering for thinking content with support for lists, text emphasis, code formatting, and improved visual styling
  • Simplified thinking content presentation in the chat interface

• Bug Fixes

  • Improved text selection behavior and CSS styling for thinking segments to ensure consistent appearance

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2fac33e4-595e-487e-baf0-ab1c5b1eeda9

📥 Commits

Reviewing files that changed from the base of the PR and between 6f814d9 and ad888e6.

📒 Files selected for processing (4)

• crates/mesh-llm-ui/src/features/chat/components/MessageRow.test.tsx
• crates/mesh-llm-ui/src/features/chat/components/MessageRow.tsx
• crates/mesh-llm-ui/src/features/chat/pages/ChatPage.test.tsx
• crates/mesh-llm-ui/src/features/developer/playground/areas/ChatComponentsArea.tsx

✅ Files skipped from review due to trivial changes (2)

• crates/mesh-llm-ui/src/features/developer/playground/areas/ChatComponentsArea.tsx
• crates/mesh-llm-ui/src/features/chat/pages/ChatPage.test.tsx

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

• crates/mesh-llm-ui/src/features/chat/components/MessageRow.tsx
• crates/mesh-llm-ui/src/features/chat/components/MessageRow.test.tsx

---

📝 Walkthrough

Walkthrough

Updates the MessageRow component to render assistant thinking traces as markdown with conditional AssistantMarkdown variant support. List styling switches to marker-based CSS classes. Tests verify ancestor-element selectability and confirm markdown formatting in thinking traces, with terminology unified across test files and developer-facing descriptions.

Changes

Chat thinking-markdown rendering updates

Layer / File(s)	Summary
Thinking markdown variant and list styling crates/mesh-llm-ui/src/features/chat/components/MessageRow.tsx	AssistantMarkdown now accepts a variant prop to apply thinking-specific styling that mutes strong text emphasis. Thinking segments render via AssistantMarkdown with variant="thinking" instead of whitespace-pre-wrap spans. List renderers update: ol and ul use list-decimal and list-disc CSS classes, and li uses a marker-text layout.
Test assertion alignment for new DOM structure crates/mesh-llm-ui/src/features/chat/components/MessageRow.test.tsx, crates/mesh-llm-ui/src/features/chat/pages/ChatPage.test.tsx, crates/mesh-llm-ui/src/features/developer/playground/areas/ChatComponentsArea.tsx	Assertions for thinking and streamed content text change from direct class checks to .select-text ancestor checks via closest(). New test validates that thinking traces render markdown formatting (bold, code, emphasis) and list element classes. List item styling expectations adjust for marker-based rendering. Terminology unified from "Thinking trace" to "Thinking" across test expectations and developer-playground panel descriptions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• Mesh-LLM/mesh-llm#841: Both PRs modify MessageRow's "Thinking" segment rendering and its test assertions in MessageRow.test.tsx, with overlapping changes to how thinking output is validated and displayed.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: rendering thinking traces as markdown in the console UI, which is the core fix across multiple files.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/fix-thinking-markdown

---

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

[michaelneale]

Looks good - probably could relabel it to just "thinking". Dont need to mention trace as extra jargon in gui?