feat: add extended thinking blocks display

Implements support for displaying Claude's extended thinking blocks in
the conversation UI with a collapsible, visually distinct component.

Changes:
- Backend: Update wsl_bridge.rs to emit thinking blocks with dedicated
  line_type instead of system messages
- Types: Add "thinking" to TerminalLine type union
- Config: Add show_thinking_blocks toggle (default: true)
- UI: Create ThinkingBlock.svelte component with collapsible interface
- Terminal: Update to conditionally render thinking blocks
- Settings: Add toggle in Appearance section of ConfigSidebar

The ThinkingBlock component features:
- Lightbulb icon to indicate extended thinking
- Collapsible/expandable with animated chevron
- Distinct styling: dimmed, italic, monospace
- Timestamp display
- Respects global show_thinking_blocks config setting

Note: Extended thinking support in Claude Code CLI appears to be in
development. This implementation is ready and will automatically display
thinking blocks once the CLI begins emitting them.

Issue: #120

 Implemented by Hikari~ 🌸
This commit is contained in:
2026-02-07 12:42:34 -08:00
committed by Naomi Carrigan
parent e397435dbe
commit 7781b2caab
9 changed files with 247 additions and 75 deletions
+17
View File
@@ -51,6 +51,7 @@
budget_action: "warn",
budget_warning_threshold: 0.8,
discord_rpc_enabled: true,
show_thinking_blocks: true,
});
let showCustomThemeEditor = $state(false);
@@ -703,6 +704,22 @@
Use Ctrl++ / Ctrl+- to quickly adjust, Ctrl+0 to reset
</p>
</div>
<!-- Show Thinking Blocks Toggle -->
<div class="mb-4">
<label class="flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
bind:checked={config.show_thinking_blocks}
class="w-4 h-4 rounded border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--accent-primary)] focus:ring-[var(--accent-primary)]"
/>
<span class="text-sm text-[var(--text-primary)]">Show Extended Thinking Blocks</span>
</label>
<p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
Display Claude's extended thinking process in the conversation. Thinking blocks can be
expanded/collapsed to see reasoning details.
</p>
</div>
</section>
<!-- Window Section -->