Add keyboard shortcuts to toggle tool details and thinking blocks visibility

[shuv1337]

Problem/Context

Currently, there is a single showDetails state (src/app/index.tsx:582) that controls visibility for both tool outputs and thinking/reasoning blocks. Users should be able to independently control:

1. Tool details visibility - Show/hide tool execution results and outputs
2. Thinking blocks visibility - Show/hide model reasoning/thinking content

This aligns with the opencode TUI which provides separate toggle keybinds:

• <leader>d - Toggle tool details
• <leader>b - Toggle thinking blocks

Acceptance Criteria

• Add new state variables: showToolDetails and showThinkingBlocks (both default to true)
• Register keyboard shortcuts:
  • <leader>d toggles showToolDetails
  • <leader>b toggles showThinkingBlocks
• Update MessagePart.tsx to accept and pass through both props
• Update ToolPart.tsx to use showToolDetails prop
• Update ReasoningPart.tsx to use showThinkingBlocks prop
• Display toast feedback when toggling (e.g., "Tool details shown/hidden", "Thinking blocks shown/hidden")
• Persist preferences in localStorage for session continuity

Implementation Details

1. State Management (src/app/index.tsx)

Replace the existing single showDetails state:

// Current (line 582)
const [showDetails, setShowDetails] = useState(true);

// Proposed
const [showToolDetails, setShowToolDetails] = useState(true);
const [showThinkingBlocks, setShowThinkingBlocks] = useState(true);

2. Register Keyboard Shortcuts (src/app/index.tsx)

Add shortcuts following the existing pattern around lines 896-1165:

// Toggle tool details (<leader>d)
unregisterFns.push(
  registerShortcut({
    key: "d",
    handler: () => {
      setShowToolDetails((prev) => !prev);
      showToast(`Tool details ${!showToolDetails ? "shown" : "hidden"}`);
    },
    requiresLeader: true,
    description: "Toggle Tool Details",
    category: "action",
  })
);

// Toggle thinking blocks (<leader>b)
unregisterFns.push(
  registerShortcut({
    key: "b",
    handler: () => {
      setShowThinkingBlocks((prev) => !prev);
      showToast(`Thinking blocks ${!showThinkingBlocks ? "shown" : "hidden"}`);
    },
    requiresLeader: true,
    description: "Toggle Thinking Blocks",
    category: "action",
  })
);

3. Update Component Props

MessagePart.tsx (src/app/_components/message/MessagePart.tsx:14-36):

interface MessagePartProps {
  part: Part;
  showToolDetails?: boolean;
  showThinkingBlocks?: boolean;
}

ReasoningPart.tsx (src/app/_components/message/ReasoningPart.tsx):

• Rename showDetails prop to showThinkingBlocks for clarity

ToolPart.tsx (src/app/_components/message/ToolPart.tsx):

• Rename showDetails prop to showToolDetails for clarity

Key Files to Modify

• src/app/index.tsx - State management and shortcut registration
• src/app/_components/message/MessagePart.tsx - Props interface
• src/app/_components/message/ToolPart.tsx - Tool visibility logic
• src/app/_components/message/ReasoningPart.tsx - Thinking block visibility logic
• src/app/_components/message/StepPart.tsx - May need similar update

Reference Implementations

• AetherLink (settingsSlice.ts) - Uses separate showToolDetails and thinking display style settings
• TriliumNext (llm_chat_panel.ts) - Implements toggleThinkingDetails() for collapsible thinking panels

Tasks

• Create showToolDetails and showThinkingBlocks state
• Add <leader>d shortcut for tool details toggle
• Add <leader>b shortcut for thinking blocks toggle
• Update MessagePart component props
• Update ToolPart to respect showToolDetails
• Update ReasoningPart to respect showThinkingBlocks
• Update StepPart if applicable
• Add localStorage persistence
• Add toast notifications for toggle feedback
• Update help documentation/keyboard shortcuts list