feat(chat): display structured content blocks for tool calls and thinking

MarkShawn2020 · claude · MarkShawn2020 · commit 3f164750385e · 2026-03-31T18:43:36.000+08:00
Parse Claude Code JSONL tool_use, tool_result, and thinking blocks into
structured ContentBlock types. Render tool calls as colored badges,
tool results as collapsible bordered blocks, and thinking as collapsible
italic sections. Original chat view still shows flat text only.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
@@ -186,6 +186,19 @@ pub struct Session {
     pub usage: Option<SessionUsage>,
 }
 
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(tag = "type")]
+pub enum ContentBlock {
+    #[serde(rename = "text")]
+    Text { text: String },
+    #[serde(rename = "tool_use")]
+    ToolUse { id: String, name: String, summary: String },
+    #[serde(rename = "tool_result")]
+    ToolResult { tool_use_id: String, content: String },
+    #[serde(rename = "thinking")]
+    Thinking { thinking: String },
+}
+
 #[derive(Debug, Serialize, Deserialize)]
 pub struct Message {
     pub uuid: String,
@@ -195,6 +208,7 @@ pub struct Message {
     pub is_meta: bool,  // slash command 展开的内容
     pub is_tool: bool,  // tool_use 或 tool_result
     pub line_number: usize,
+    pub content_blocks: Option<Vec<ContentBlock>>,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
@@ -1053,6 +1067,7 @@ async fn get_session_messages(
                     if let Some(msg) = &parsed.message {
                         let role = msg.role.clone().unwrap_or_default();
                         let (content, is_tool) = extract_content_with_meta(&msg.content);
+                        let content_blocks = extract_content_blocks(&msg.content);
                         let is_meta = parsed.is_meta.unwrap_or(false);
 
                         if !content.is_empty() {
@@ -1064,6 +1079,7 @@ async fn get_session_messages(
                                 is_meta,
                                 is_tool,
                                 line_number: idx + 1,
+                                content_blocks,
                             });
                         }
                     }
@@ -1391,6 +1407,103 @@ fn search_chats(
     Ok(results)
 }
 
+fn summarize_tool_input(name: &str, input: &serde_json::Value) -> String {
+    let obj = match input.as_object() {
+        Some(o) => o,
+        None => return String::new(),
+    };
+    match name {
+        "Read" | "Write" => obj.get("file_path").and_then(|v| v.as_str()).unwrap_or("").to_string(),
+        "Edit" => {
+            let path = obj.get("file_path").and_then(|v| v.as_str()).unwrap_or("");
+            let old = obj.get("old_string").and_then(|v| v.as_str()).unwrap_or("");
+            if old.is_empty() { path.to_string() } else {
+                format!("{} ({}...)", path, &old.chars().take(40).collect::<String>())
+            }
+        }
+        "Bash" => obj.get("command").and_then(|v| v.as_str()).unwrap_or("").to_string(),
+        "Grep" => obj.get("pattern").and_then(|v| v.as_str()).unwrap_or("").to_string(),
+        "Glob" => obj.get("pattern").and_then(|v| v.as_str()).unwrap_or("").to_string(),
+        "Task" => obj.get("description").and_then(|v| v.as_str()).unwrap_or("").to_string(),
+        "WebFetch" => obj.get("url").and_then(|v| v.as_str()).unwrap_or("").to_string(),
+        "WebSearch" => obj.get("query").and_then(|v| v.as_str()).unwrap_or("").to_string(),
+        _ => {
+            // Try common field names
+            for key in &["file_path", "path", "command", "query", "pattern", "url", "description"] {
+                if let Some(v) = obj.get(*key).and_then(|v| v.as_str()) {
+                    return v.to_string();
+                }
+            }
+            String::new()
+        }
+    }
+}
+
+fn extract_tool_result_content(value: &serde_json::Value) -> String {
+    match value {
+        serde_json::Value::String(s) => s.clone(),
+        serde_json::Value::Array(arr) => {
+            arr.iter()
+                .filter_map(|item| {
+                    let obj = item.as_object()?;
+                    if obj.get("type").and_then(|v| v.as_str()) == Some("text") {
+                        obj.get("text").and_then(|v| v.as_str()).map(String::from)
+                    } else {
+                        None
+                    }
+                })
+                .collect::<Vec<_>>()
+                .join("\n")
+        }
+        _ => String::new(),
+    }
+}
+
+fn extract_content_blocks(value: &Option<serde_json::Value>) -> Option<Vec<ContentBlock>> {
+    let arr = match value {
+        Some(serde_json::Value::Array(arr)) => arr,
+        Some(serde_json::Value::String(s)) => {
+            return Some(vec![ContentBlock::Text { text: s.clone() }]);
+        }
+        _ => return None,
+    };
+
+    let blocks: Vec<ContentBlock> = arr
+        .iter()
+        .filter_map(|item| {
+            let obj = item.as_object()?;
+            let block_type = obj.get("type").and_then(|v| v.as_str())?;
+            match block_type {
+                "text" => {
+                    let text = obj.get("text").and_then(|v| v.as_str())?.to_string();
+                    if text.is_empty() { None } else { Some(ContentBlock::Text { text }) }
+                }
+                "tool_use" => {
+                    let id = obj.get("id").and_then(|v| v.as_str()).unwrap_or("").to_string();
+                    let name = obj.get("name").and_then(|v| v.as_str()).unwrap_or("").to_string();
+                    let input = obj.get("input").cloned().unwrap_or(serde_json::Value::Null);
+                    let summary = summarize_tool_input(&name, &input);
+                    Some(ContentBlock::ToolUse { id, name, summary })
+                }
+                "tool_result" => {
+                    let tool_use_id = obj.get("tool_use_id").and_then(|v| v.as_str()).unwrap_or("").to_string();
+                    let content = obj.get("content")
+                        .map(|v| extract_tool_result_content(v))
+                        .unwrap_or_default();
+                    Some(ContentBlock::ToolResult { tool_use_id, content })
+                }
+                "thinking" => {
+                    let thinking = obj.get("thinking").and_then(|v| v.as_str()).unwrap_or("").to_string();
+                    if thinking.is_empty() { None } else { Some(ContentBlock::Thinking { thinking }) }
+                }
+                _ => None,
+            }
+        })
+        .collect();
+
+    if blocks.is_empty() { None } else { Some(blocks) }
+}
+
 fn extract_content_with_meta(value: &Option<serde_json::Value>) -> (String, bool) {
     match value {
         Some(serde_json::Value::String(s)) => (s.clone(), false),
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -67,6 +67,12 @@ export interface SessionUsageEntry {
   usage: SessionUsage;
 }
 
+export type ContentBlock =
+  | { type: "text"; text: string }
+  | { type: "tool_use"; id: string; name: string; summary: string }
+  | { type: "tool_result"; tool_use_id: string; content: string }
+  | { type: "thinking"; thinking: string };
+
 export interface Message {
   uuid: string;
   role: string;
@@ -75,6 +81,7 @@ export interface Message {
   is_meta: boolean;
   is_tool: boolean;
   line_number: number;
+  content_blocks?: ContentBlock[];
 }
 
 export interface ChatMessage {
diff --git a/src/views/Chat/ContentBlockRenderer.tsx b/src/views/Chat/ContentBlockRenderer.tsx
@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { CollapsibleContent } from "./CollapsibleContent";
+import type { ContentBlock } from "../../types";
+
+interface ContentBlockRendererProps {
+  blocks: ContentBlock[];
+  markdown: boolean;
+}
+
+const TOOL_COLORS: Record<string, string> = {
+  Read: "bg-blue-100 text-blue-800",
+  Write: "bg-green-100 text-green-800",
+  Edit: "bg-yellow-100 text-yellow-800",
+  Bash: "bg-orange-100 text-orange-800",
+  Grep: "bg-purple-100 text-purple-800",
+  Glob: "bg-purple-100 text-purple-800",
+  Task: "bg-indigo-100 text-indigo-800",
+  WebFetch: "bg-cyan-100 text-cyan-800",
+  WebSearch: "bg-cyan-100 text-cyan-800",
+};
+
+function ToolUseBadge({ name, summary }: { name: string; summary: string }) {
+  const color = TOOL_COLORS[name] || "bg-muted text-muted-foreground";
+  return (
+    <div className="flex items-center gap-2 py-1">
+      <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${color}`}>
+        {name}
+      </span>
+      {summary && (
+        <span className="text-xs font-mono text-muted-foreground truncate max-w-[500px]">
+          {summary}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function ToolResultBlock({ content }: { content: string }) {
+  const [expanded, setExpanded] = useState(false);
+  const isLong = content.length > 200;
+  const display = !expanded && isLong ? content.slice(0, 200) + "..." : content;
+
+  return (
+    <div className="border-l-2 border-border pl-3 py-1 my-1">
+      <pre className="text-xs font-mono text-muted-foreground whitespace-pre-wrap break-words">
+        {display}
+      </pre>
+      {isLong && (
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="text-xs text-primary hover:text-primary/80 mt-0.5"
+        >
+          {expanded ? "Collapse" : "Expand"}
+        </button>
+      )}
+    </div>
+  );
+}
+
+function ThinkingBlock({ thinking }: { thinking: string }) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="my-1">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="text-xs text-muted-foreground hover:text-foreground italic"
+      >
+        {expanded ? "Hide thinking..." : "Thinking..."}
+      </button>
+      {expanded && (
+        <div className="border-l-2 border-border/50 pl-3 mt-1">
+          <p className="text-xs text-muted-foreground italic whitespace-pre-wrap break-words">
+            {thinking}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ContentBlockRenderer({ blocks, markdown }: ContentBlockRendererProps) {
+  return (
+    <div className="space-y-1">
+      {blocks.map((block, i) => {
+        switch (block.type) {
+          case "text":
+            return <CollapsibleContent key={i} content={block.text} markdown={markdown} />;
+          case "tool_use":
+            return <ToolUseBadge key={i} name={block.name} summary={block.summary} />;
+          case "tool_result":
+            return <ToolResultBlock key={i} content={block.content} />;
+          case "thinking":
+            return <ThinkingBlock key={i} thinking={block.thinking} />;
+        }
+      })}
+    </div>
+  );
+}
diff --git a/src/views/Chat/MessageView.tsx b/src/views/Chat/MessageView.tsx
@@ -20,6 +20,7 @@ import {
 import { useAtom } from "jotai";
 import { originalChatAtom, markdownPreviewAtom } from "../../store";
 import { CollapsibleContent } from "./CollapsibleContent";
+import { ContentBlockRenderer } from "./ContentBlockRenderer";
 import { ExportDialog } from "./ExportDialog";
 import { useReadableText } from "./utils";
 import { useAppConfig } from "../../context";
@@ -170,7 +171,11 @@ export function MessageView({ projectId, projectPath, sessionId, summary: initia
                 </DropdownMenuContent>
               </DropdownMenu>
               <p className="text-xs text-muted-foreground-foreground mb-2 uppercase tracking-wide">{msg.role}</p>
-              <CollapsibleContent content={displayContent} markdown={markdownPreview} />
+              {msg.content_blocks && !originalChat ? (
+                <ContentBlockRenderer blocks={msg.content_blocks} markdown={markdownPreview} />
+              ) : (
+                <CollapsibleContent content={displayContent} markdown={markdownPreview} />
+              )}
             </div>
           );
         })}
diff --git a/src/views/Chat/ProjectList.tsx b/src/views/Chat/ProjectList.tsx
@@ -13,6 +13,7 @@ import { useAppConfig } from "../../context";
 import { useReadableText } from "./utils";
 import { useInvokeQuery } from "../../hooks";
 import { CollapsibleContent } from "./CollapsibleContent";
+import { ContentBlockRenderer } from "./ContentBlockRenderer";
 import { ProjectLogo } from "../Workspace/ProjectLogo";
 import {
   DropdownMenu,
@@ -474,7 +475,11 @@ function SessionDetail({ session, onOpen }: { session: Session; onOpen: () => vo
                   <Copy size={14} />
                 </button>
                 <p className="text-xs text-muted-foreground mb-2 uppercase tracking-wide">{msg.role}</p>
-                <CollapsibleContent content={displayContent} markdown={markdownPreview} />
+                {msg.content_blocks && !originalChat ? (
+                  <ContentBlockRenderer blocks={msg.content_blocks} markdown={markdownPreview} />
+                ) : (
+                  <CollapsibleContent content={displayContent} markdown={markdownPreview} />
+                )}
               </div>
             );
           })}
