feat: Add Claude Code-style output formatting to interactive UI and CLI

[mkusaka]

Feature Request

Summary

Enhance both the interactive ratatui UI and one-shot CLI to adopt Claude Code's display formats with appropriate content handling for different view contexts.

Scope

• ✅ Interactive ratatui UI - search results list, preview, and message detail views
• ✅ One-shot CLI (ccms command) - search results output

Claude Code Display Patterns (Complete Reference)

Based on detailed analysis of Claude Code's actual output, here are all the display patterns to implement:

1. Tool Execution Patterns

Basic Format:

⏺ ToolName(arguments)
  ⎿ Result content

Tool Use/Result Pairing:

• Tool uses in Assistant messages are paired with tool results in User messages via tool_use_id
• When displaying a User message with tool results, show the corresponding Assistant's tool use
• Format: ⏺ ToolName(args) → result (list view) or full format (detail view)

Examples:

• ⏺ Bash(cargo test test_session_list)
• ⏺ Read(src/main.rs)
• ⏺ Edit(src/interactive_ratatui/mod.rs)
• ⏺ MultiEdit(path/to/file.ext)
• ⏺ Write(path/to/file.ext)
• ⏺ Grep(pattern: "error handling", path: "src")
• ⏺ WebSearch(query: "rust async pattern")

Tool Arguments Format:

• Read(file_path) - single path argument
• Write(file_path) - single path argument
• Edit(file_path) / MultiEdit(file_path) - file path
• Bash(command) - command string (truncate to ~50 chars with ...)
• Grep(pattern in path) - pattern and path
• WebSearch(query) - search query (truncate to ~40 chars)
• Other tools: Show first string parameter or (...) if none

Result Display Variations:

• Error: ⎿ Error: error message
• Waiting: ⎿ Waiting…
• No content: ⎿ (No content)
• Truncation (expandable): … +XX lines (ctrl+r to expand)
• Truncation (see all): … +XX lines (ctrl+r to see all)

2. Thinking Process Pattern

✻ Thinking...
  Indented thought content

List View Format:

• Join all lines with spaces, removing empty lines
• Format: ✻ Thinking... First line content continues here...
• Truncate to ~150 chars with ... if needed

3. Action Start Pattern (Japanese/Natural Language)

⏺ Action description in natural language

Examples:

• ⏺ 修正完了
• ⏺ 完璧！すべてのSessionList機能が実装されました。
• ⏺ Let me fix the clippy warning by creating a type alias

4. Compact Summary Pattern

⏺ Compact summary (ctrl+r to expand)
  ⎿ Read src/query/condition.rs (467 lines)
  ⎿ Read src/interactive_ratatui/ui/components/session_list_test.rs (180 lines)
  ⎿ Todo list read (4 items)

5. Section Separator

====================================================================================================== Previous Conversation Compacted ======================================================================================================

6. Specific Result Patterns

File Operations:

⏺ Write(src/new_file.rs)
  ⎿ Wrote 277 lines to src/new_file.rs
     #[cfg(test)]
     mod tests {
     … +267 lines (ctrl+r to expand)

Multi-file Edit:

⏺ MultiEdit(src/file.rs)
  ⎿ Updated src/file.rs with 10 additions and 3 removals
     149    match key.code {
     150 -  KeyCode::Up => Some(Message::Up),
     150 +  KeyCode::Up => Some(Message::ScrollUp),
     … +XX lines

Test Results:

⎿ running 359 tests
   test module::test_name ... ok
   test module::test_name2 ... ok
   … +319 lines (ctrl+r to expand)

Commit Results:

⎿ [branch-name commit-hash] commit message
   19 files changed, 1246 insertions(+), 62 deletions(-)
   create mode 100644 src/interactive_ratatui/ui/components/session_list.rs
   … +23 lines (ctrl+r to expand)

Build/Compile Output:

⎿ Compiling ccms v0.0.1 (/path/to/project)
   Finished `dev` profile [unoptimized + debuginfo] target(s) in 5.33s

Error with Details:

⎿ Error: Compiling ccms v0.0.1
   error[E0599]: no method named `render` found
     --> src/file.rs:1165:31
     |
   1165 |     terminal.draw(|f| app.render(f)).unwrap();
     |                           ^^^^^^ method not found
   … +14 lines (ctrl+r to see all)

Display Format Requirements by View Type

1. List View (Search Results, Session List)

• Tool executions: ToolName(arguments...) format
• Long arguments: Truncate with … (e.g., Bash(git commit -m "feat: enhance...")
• Tool results in User messages: ⏺ ToolName(args) → result... (paired format)
• Messages: Single line with newlines replaced by spaces
• Examples:
  • Read(src/main.rs)
  • ✻ Thinking... コードを分析します。このエラーは型の不一致が原因のようです。
  • ⏺ Bash(cargo build --release) → Compiling ccms v0.0.1...
  • ⏺ 完了しました！すべての要求された機能が実装されました：実装内容: 1. プレビューのデフォルト表示 ✅...

2. Preview View (Quick Preview)

• Tool results: Show with ⏺ and ⎿ markers
• Content: First few lines then … +XX lines (ctrl+r to expand)
• Structure: Preserve indentation and formatting
• Example:

  ⏺ Bash(cargo test)
    ⎿ running 10 tests
       test mod::test1 ... ok
       test mod::test2 ... ok
       … +8 lines (ctrl+r to expand)
  

3. Detail View (Full Display)

• Complete content: No truncation
• Original formatting: Preserve all formatting
• No … +XX lines: Show everything
• Tool Result with paired Tool Use:

  ⏺ Bash(cargo test)
  ⎿ running 10 tests
     test mod::test1 ... ok
     test mod::test2 ... ok
     ...
     test summary: 10 passed; 0 failed
  

Architecture Requirements

Message Relationship Building

To properly display tool use/result pairs, the search system needs to:

1. Track message relationships: Link tool uses (Assistant) with tool results (User) via tool_use_id
2. Store context: Add PreviousMessageInfo to SearchResult:

   pub struct PreviousMessageInfo {
       pub uuid: String,
       pub role: String,
       pub tool_name: Option<String>,
       pub tool_args: Option<String>,
       pub tool_id: Option<String>,
   }

3. Load related messages: When displaying tool results, fetch the corresponding tool use
4. Performance optimization: Skip relationship building for single message lookups (--message-id)

Target Views for Implementation

Interactive UI (ratatui)

1. Search Results List (result_list.rs)

   • Current: Display search results in a list
   • Apply: List display format with tool pairing
   • Content: Show tool executions as ToolName(args) or ToolName(args) → result

2. Message Detail View (message_detail.rs)

   • Current: Display selected message details
   • Apply: Detail display format (complete display)
   • Content: Show tool executions and results without truncation

3. Session List (session_list.rs)

   • Current: List of sessions
   • Apply: List display format
   • Content: Compact display of tool executions within sessions

4. Session Preview (Preview pane within Session List)

   • Current: Preview of selected session
   • Apply: Preview display format
   • Content: First few messages with … +XX lines format

5. Session Viewer (session_viewer.rs)

   • Current: Display all messages in a session
   • Apply: List format (for message list) + Detail format (when selected)
   • Content: Each message in List format, Detail format when selected

CLI Output (main.rs)

6. Search Results Output

   • Current: Output search results to terminal
   • Apply: Preview display format
   • Content: Format each result with ⏺ ToolName() and ⎿

7. Verbose Mode Output (when using --verbose flag)

   • Current: Detailed search results
   • Apply: Detail display format
   • Content: Complete display of tool executions and results

Implementation Scope

New files created:

• ✅ src/formatters/claude_code.rs - Claude Code formatter implementation
• ✅ src/formatters/mod.rs - Formatter module definition

Architecture changes:

• ✅ Added PreviousMessageInfo struct to SearchResult
• ✅ Implemented message relationship building in search engines
• ✅ Performance optimization for single message lookups

Files to update:

• src/interactive_ratatui/ui/components/result_list.rs
• src/interactive_ratatui/ui/components/message_detail.rs
• src/interactive_ratatui/ui/components/session_list.rs
• src/interactive_ratatui/ui/components/session_viewer.rs
• src/main.rs (CLI formatter integration)

Implementation Considerations

Content Processing

1. Indentation: Consistent 2-space indent after ⎿
2. Line numbering: When showing file contents
3. Truncation indicators:
   • … +XX lines (ctrl+r to expand) - for interactive expansion
   • … +XX lines (ctrl+r to see all) - for viewing all content
   • … +XX lines - simple truncation
4. Special markers:
   • ⏺ (U+23FA) - Record button for actions
   • ⎿ (U+23BF) - Circuit ground for results
   • ✻ (U+273B) - Teardrop-spoked asterisk for thinking
   • … (U+2026) - Horizontal ellipsis for truncation

Tool Result Parsing

• Identify Assistant messages containing tool executions
• Extract tool name and arguments from tool_use content
• Parse result blocks from User messages
• Match tool uses with results via tool_use_id
• Handle nested content (file diffs, test results, etc.)

Benefits

• Familiarity: Users of Claude Code will immediately understand the output
• Clarity: Clear visual hierarchy between actions and results
• Consistency: Same formatting style as Claude Code
• Information Density: Compact yet informative display
• Context Awareness: Tool results show their corresponding tool use

Related Components

• src/interactive_ratatui/ui/components/result_list.rs
• src/interactive_ratatui/ui/components/message_detail.rs
• src/interactive_ratatui/ui/components/session_list.rs
• src/interactive_ratatui/domain/models.rs (content processing)
• src/main.rs (CLI output)
• src/schemas/session_message.rs (for parsing tool uses)
• src/query/condition.rs (for PreviousMessageInfo)
• src/search/rayon_engine.rs (message relationship building)
• src/search/smol_engine.rs (message relationship building)
  EOF < /dev/null