feat: improve agent conversation rendering (#94)

* format TODO list

* make diff box collapsible

* improve tool styling

* improve styling consistency between amp and claude

* fix tests

* fmt

* improve diff box collapsing and markdown spacing

* attempt to improve spacing

* add toggle to hide all diffs from sidebar view

backend/src/executor.rs

@@ -710,6 +710,7 @@ fn parse_session_id_from_line(line: &str) -> Option<String> {
 #[cfg(test)]
 mod tests {
     use super::*;
+    use crate::executors::{AmpExecutor, ClaudeExecutor};
 
     #[test]
     fn test_parse_claude_session_id() {
@@ -779,4 +780,116 @@ mod tests {
             .unwrap()
             .contains("**Formula:** a² + b² = c²"));
     }
+
+    #[test]
+    fn test_amp_log_normalization() {
+        let amp_executor = AmpExecutor;
+        let amp_logs = r#"{"type":"initial","threadID":"T-f8f7fec0-b330-47ab-b63a-b72c42f1ef6a"}
+{"type":"messages","messages":[[0,{"role":"user","content":[{"type":"text","text":"Task title: Create and start should open task\nTask description: When I press 'create & start' on task creation dialog it should then open the task in the sidebar"}],"meta":{"sentAt":1751544747623}}]],"toolResults":[]}
+{"type":"messages","messages":[[1,{"role":"assistant","content":[{"type":"thinking","thinking":"The user wants to implement a feature where pressing \"create & start\" on the task creation dialog should open the task in the sidebar."},{"type":"text","text":"I'll help you implement the \"create & start\" functionality. Let me explore the codebase to understand the current task creation and sidebar structure."},{"type":"tool_use","id":"toolu_01FQqskzGAhZaZu8H6qSs5pV","name":"todo_write","input":{"todos":[{"id":"1","content":"Explore task creation dialog component","status":"todo","priority":"high"}]}}],"state":{"type":"complete","stopReason":"tool_use"}}]],"toolResults":[]}"#;
+
+        let result = amp_executor
+            .normalize_logs(amp_logs, "/tmp/test-worktree")
+            .unwrap();
+
+        assert_eq!(result.executor_type, "amp");
+        assert_eq!(
+            result.session_id,
+            Some("T-f8f7fec0-b330-47ab-b63a-b72c42f1ef6a".to_string())
+        );
+        assert!(!result.entries.is_empty());
+
+        // Check that we have user message, assistant message, thinking, and tool use entries
+        let user_messages: Vec<_> = result
+            .entries
+            .iter()
+            .filter(|e| matches!(e.entry_type, NormalizedEntryType::UserMessage))
+            .collect();
+        assert!(!user_messages.is_empty());
+
+        let assistant_messages: Vec<_> = result
+            .entries
+            .iter()
+            .filter(|e| matches!(e.entry_type, NormalizedEntryType::AssistantMessage))
+            .collect();
+        assert!(!assistant_messages.is_empty());
+
+        let thinking_entries: Vec<_> = result
+            .entries
+            .iter()
+            .filter(|e| matches!(e.entry_type, NormalizedEntryType::Thinking))
+            .collect();
+        assert!(!thinking_entries.is_empty());
+
+        let tool_uses: Vec<_> = result
+            .entries
+            .iter()
+            .filter(|e| matches!(e.entry_type, NormalizedEntryType::ToolUse { .. }))
+            .collect();
+        assert!(!tool_uses.is_empty());
+
+        // Check that tool use content is concise (not the old verbose format)
+        let todo_tool_use = tool_uses.iter().find(|e| match &e.entry_type {
+            NormalizedEntryType::ToolUse { tool_name, .. } => tool_name == "todo_write",
+            _ => false,
+        });
+        assert!(todo_tool_use.is_some());
+        let todo_tool_use = todo_tool_use.unwrap();
+        // Should be concise, not "Tool: todo_write with input: ..."
+        assert_eq!(
+            todo_tool_use.content,
+            "TODO List:\n⏳ Explore task creation dialog component (high)"
+        );
+    }
+
+    #[test]
+    fn test_claude_log_normalization() {
+        let claude_executor = ClaudeExecutor;
+        let claude_logs = r#"{"type":"system","subtype":"init","cwd":"/private/tmp/mission-control-worktree-8ff34214-7bb4-4a5a-9f47-bfdf79e20368","session_id":"499dcce4-04aa-4a3e-9e0c-ea0228fa87c9","tools":["Task","Bash","Glob","Grep","LS","exit_plan_mode","Read","Edit","MultiEdit","Write","NotebookRead","NotebookEdit","WebFetch","TodoRead","TodoWrite","WebSearch"],"mcp_servers":[],"model":"claude-sonnet-4-20250514","permissionMode":"bypassPermissions","apiKeySource":"none"}
+{"type":"assistant","message":{"id":"msg_014xUHgkAhs6cRx5WVT3s7if","type":"message","role":"assistant","model":"claude-sonnet-4-20250514","content":[{"type":"text","text":"I'll help you list your projects using vibe-kanban. Let me first explore the codebase to understand how vibe-kanban works and find your projects."}],"stop_reason":null,"stop_sequence":null,"usage":{"input_tokens":4,"cache_creation_input_tokens":13497,"cache_read_input_tokens":0,"output_tokens":1,"service_tier":"standard"}},"parent_tool_use_id":null,"session_id":"499dcce4-04aa-4a3e-9e0c-ea0228fa87c9"}
+{"type":"assistant","message":{"id":"msg_014xUHgkAhs6cRx5WVT3s7if","type":"message","role":"assistant","model":"claude-sonnet-4-20250514","content":[{"type":"tool_use","id":"toolu_01Br3TvXdmW6RPGpB5NihTHh","name":"Task","input":{"description":"Find vibe-kanban projects","prompt":"I need to find and list projects using vibe-kanban."}}],"stop_reason":null,"stop_sequence":null,"usage":{"input_tokens":4,"cache_creation_input_tokens":13497,"cache_read_input_tokens":0,"output_tokens":1,"service_tier":"standard"}},"parent_tool_use_id":null,"session_id":"499dcce4-04aa-4a3e-9e0c-ea0228fa87c9"}"#;
+
+        let result = claude_executor
+            .normalize_logs(claude_logs, "/tmp/test-worktree")
+            .unwrap();
+
+        assert_eq!(result.executor_type, "claude");
+        assert_eq!(
+            result.session_id,
+            Some("499dcce4-04aa-4a3e-9e0c-ea0228fa87c9".to_string())
+        );
+        assert!(!result.entries.is_empty());
+
+        // Check that we have system, assistant message, and tool use entries
+        let system_messages: Vec<_> = result
+            .entries
+            .iter()
+            .filter(|e| matches!(e.entry_type, NormalizedEntryType::SystemMessage))
+            .collect();
+        assert!(!system_messages.is_empty());
+
+        let assistant_messages: Vec<_> = result
+            .entries
+            .iter()
+            .filter(|e| matches!(e.entry_type, NormalizedEntryType::AssistantMessage))
+            .collect();
+        assert!(!assistant_messages.is_empty());
+
+        let tool_uses: Vec<_> = result
+            .entries
+            .iter()
+            .filter(|e| matches!(e.entry_type, NormalizedEntryType::ToolUse { .. }))
+            .collect();
+        assert!(!tool_uses.is_empty());
+
+        // Check that tool use content is concise (not the old verbose format)
+        let task_tool_use = tool_uses.iter().find(|e| match &e.entry_type {
+            NormalizedEntryType::ToolUse { tool_name, .. } => tool_name == "Task",
+            _ => false,
+        });
+        assert!(task_tool_use.is_some());
+        let task_tool_use = task_tool_use.unwrap();
+        // Should be the task description, not "Tool: Task with input: ..."
+        assert_eq!(task_tool_use.content, "Find vibe-kanban projects");
+    }
 }

backend/src/executor_tests.rs

@@ -1,116 +0,0 @@
-#[cfg(test)]
-mod tests {
-    use crate::{
-        executor::{Executor, NormalizedEntryType},
-        executors::{AmpExecutor, ClaudeExecutor},
-    };
-
-    #[test]
-    fn test_amp_log_normalization() {
-        let amp_executor = AmpExecutor;
-        let amp_logs = r#"{"type":"initial","threadID":"T-f8f7fec0-b330-47ab-b63a-b72c42f1ef6a"}
-{"type":"messages","messages":[[0,{"role":"user","content":[{"type":"text","text":"Task title: Create and start should open task\nTask description: When I press 'create & start' on task creation dialog it should then open the task in the sidebar"}],"meta":{"sentAt":1751544747623}}]],"toolResults":[]}
-{"type":"messages","messages":[[1,{"role":"assistant","content":[{"type":"thinking","thinking":"The user wants to implement a feature where pressing \"create & start\" on the task creation dialog should open the task in the sidebar."},{"type":"text","text":"I'll help you implement the \"create & start\" functionality. Let me explore the codebase to understand the current task creation and sidebar structure."},{"type":"tool_use","id":"toolu_01FQqskzGAhZaZu8H6qSs5pV","name":"todo_write","input":{"todos":[{"id":"1","content":"Explore task creation dialog component","status":"todo","priority":"high"}]}}],"state":{"type":"complete","stopReason":"tool_use"}}]],"toolResults":[]}"#;
-
-        let result = amp_executor
-            .normalize_logs(amp_logs, "/tmp/test-worktree")
-            .unwrap();
-
-        assert_eq!(result.executor_type, "amp");
-        assert_eq!(
-            result.session_id,
-            Some("T-f8f7fec0-b330-47ab-b63a-b72c42f1ef6a".to_string())
-        );
-        assert!(!result.entries.is_empty());
-
-        // Check that we have user message, assistant message, thinking, and tool use entries
-        let user_messages: Vec<_> = result
-            .entries
-            .iter()
-            .filter(|e| matches!(e.entry_type, NormalizedEntryType::UserMessage))
-            .collect();
-        assert!(!user_messages.is_empty());
-
-        let assistant_messages: Vec<_> = result
-            .entries
-            .iter()
-            .filter(|e| matches!(e.entry_type, NormalizedEntryType::AssistantMessage))
-            .collect();
-        assert!(!assistant_messages.is_empty());
-
-        let thinking_entries: Vec<_> = result
-            .entries
-            .iter()
-            .filter(|e| matches!(e.entry_type, NormalizedEntryType::Thinking))
-            .collect();
-        assert!(!thinking_entries.is_empty());
-
-        let tool_uses: Vec<_> = result
-            .entries
-            .iter()
-            .filter(|e| matches!(e.entry_type, NormalizedEntryType::ToolUse { .. }))
-            .collect();
-        assert!(!tool_uses.is_empty());
-
-        // Check that tool use content is concise (not the old verbose format)
-        let todo_tool_use = tool_uses.iter().find(|e| match &e.entry_type {
-            NormalizedEntryType::ToolUse { tool_name, .. } => tool_name == "todo_write",
-            _ => false,
-        });
-        assert!(todo_tool_use.is_some());
-        let todo_tool_use = todo_tool_use.unwrap();
-        // Should be concise, not "Tool: todo_write with input: ..."
-        assert_eq!(todo_tool_use.content, "Managing TODO list");
-    }
-
-    #[test]
-    fn test_claude_log_normalization() {
-        let claude_executor = ClaudeExecutor;
-        let claude_logs = r#"{"type":"system","subtype":"init","cwd":"/private/tmp/mission-control-worktree-8ff34214-7bb4-4a5a-9f47-bfdf79e20368","session_id":"499dcce4-04aa-4a3e-9e0c-ea0228fa87c9","tools":["Task","Bash","Glob","Grep","LS","exit_plan_mode","Read","Edit","MultiEdit","Write","NotebookRead","NotebookEdit","WebFetch","TodoRead","TodoWrite","WebSearch"],"mcp_servers":[],"model":"claude-sonnet-4-20250514","permissionMode":"bypassPermissions","apiKeySource":"none"}
-{"type":"assistant","message":{"id":"msg_014xUHgkAhs6cRx5WVT3s7if","type":"message","role":"assistant","model":"claude-sonnet-4-20250514","content":[{"type":"text","text":"I'll help you list your projects using vibe-kanban. Let me first explore the codebase to understand how vibe-kanban works and find your projects."}],"stop_reason":null,"stop_sequence":null,"usage":{"input_tokens":4,"cache_creation_input_tokens":13497,"cache_read_input_tokens":0,"output_tokens":1,"service_tier":"standard"}},"parent_tool_use_id":null,"session_id":"499dcce4-04aa-4a3e-9e0c-ea0228fa87c9"}
-{"type":"assistant","message":{"id":"msg_014xUHgkAhs6cRx5WVT3s7if","type":"message","role":"assistant","model":"claude-sonnet-4-20250514","content":[{"type":"tool_use","id":"toolu_01Br3TvXdmW6RPGpB5NihTHh","name":"Task","input":{"description":"Find vibe-kanban projects","prompt":"I need to find and list projects using vibe-kanban."}}],"stop_reason":null,"stop_sequence":null,"usage":{"input_tokens":4,"cache_creation_input_tokens":13497,"cache_read_input_tokens":0,"output_tokens":1,"service_tier":"standard"}},"parent_tool_use_id":null,"session_id":"499dcce4-04aa-4a3e-9e0c-ea0228fa87c9"}"#;
-
-        let result = claude_executor
-            .normalize_logs(claude_logs, "/tmp/test-worktree")
-            .unwrap();
-
-        assert_eq!(result.executor_type, "claude");
-        assert_eq!(
-            result.session_id,
-            Some("499dcce4-04aa-4a3e-9e0c-ea0228fa87c9".to_string())
-        );
-        assert!(!result.entries.is_empty());
-
-        // Check that we have system, assistant message, and tool use entries
-        let system_messages: Vec<_> = result
-            .entries
-            .iter()
-            .filter(|e| matches!(e.entry_type, NormalizedEntryType::SystemMessage))
-            .collect();
-        assert!(!system_messages.is_empty());
-
-        let assistant_messages: Vec<_> = result
-            .entries
-            .iter()
-            .filter(|e| matches!(e.entry_type, NormalizedEntryType::AssistantMessage))
-            .collect();
-        assert!(!assistant_messages.is_empty());
-
-        let tool_uses: Vec<_> = result
-            .entries
-            .iter()
-            .filter(|e| matches!(e.entry_type, NormalizedEntryType::ToolUse { .. }))
-            .collect();
-        assert!(!tool_uses.is_empty());
-
-        // Check that tool use content is concise (not the old verbose format)
-        let task_tool_use = tool_uses.iter().find(|e| match &e.entry_type {
-            NormalizedEntryType::ToolUse { tool_name, .. } => tool_name == "Task",
-            _ => false,
-        });
-        assert!(task_tool_use.is_some());
-        let task_tool_use = task_tool_use.unwrap();
-        // Should be the task description, not "Tool: Task with input: ..."
-        assert_eq!(task_tool_use.content, "Find vibe-kanban projects");
-    }
-}

backend/src/executors/amp.rs

@@ -91,7 +91,7 @@ Task title: {}"#,
     fn normalize_logs(
         &self,
         logs: &str,
-        _worktree_path: &str,
+        worktree_path: &str,
     ) -> Result<NormalizedConversation, String> {
         use serde_json::Value;
 
@@ -199,13 +199,16 @@ Task title: {}"#,
                                                                     .unwrap_or(&Value::Null);
                                                                 let action_type = self
                                                                     .extract_action_type(
-                                                                        tool_name, input,
+                                                                        tool_name,
+                                                                        input,
+                                                                        worktree_path,
                                                                     );
                                                                 let content = self
                                                                     .generate_concise_content(
                                                                         tool_name,
                                                                         input,
                                                                         &action_type,
+                                                                        worktree_path,
                                                                     );
 
                                                                 entries.push(NormalizedEntry {
@@ -235,7 +238,7 @@ Task title: {}"#,
                         true
                     }
                     // Ignore these JSON types - they're not relevant for task execution logs
-                    "initial" | "token-usage" | "state" => true,
+                    "initial" | "token-usage" | "state" | "shutdown" => true,
                     _ => false,
                 }
             } else {
@@ -271,20 +274,19 @@ Task title: {}"#,
 }
 
 impl AmpExecutor {
-    /// Convert absolute paths to relative paths based on current working directory
+    /// Convert absolute paths to relative paths based on worktree path
-    fn make_path_relative(&self, path: &str) -> String {
+    fn make_path_relative(&self, path: &str, worktree_path: &str) -> String {
         let path_obj = Path::new(path);
+        let worktree_obj = Path::new(worktree_path);
 
         // If path is already relative, return as is
         if path_obj.is_relative() {
             return path.to_string();
         }
 
-        // Try to get current working directory and make path relative to it
+        // Try to make path relative to worktree path
-        if let Ok(current_dir) = std::env::current_dir() {
+        if let Ok(relative_path) = path_obj.strip_prefix(worktree_obj) {
-            if let Ok(relative_path) = path_obj.strip_prefix(&current_dir) {
+            return relative_path.to_string_lossy().to_string();
-                return relative_path.to_string_lossy().to_string();
-            }
         }
 
         // If we can't make it relative, return the original path
@@ -296,37 +298,141 @@ impl AmpExecutor {
         tool_name: &str,
         input: &serde_json::Value,
         action_type: &ActionType,
+        worktree_path: &str,
     ) -> String {
         match action_type {
-            ActionType::FileRead { path } => path.clone(),
+            ActionType::FileRead { path } => format!("`{}`", path),
-            ActionType::FileWrite { path } => path.clone(),
+            ActionType::FileWrite { path } => format!("`{}`", path),
-            ActionType::CommandRun { command } => command.clone(),
+            ActionType::CommandRun { command } => format!("`{}`", command),
-            ActionType::Search { query } => query.clone(),
+            ActionType::Search { query } => format!("`{}`", query),
-            ActionType::WebFetch { url } => url.clone(),
+            ActionType::WebFetch { url } => format!("`{}`", url),
             ActionType::TaskCreate { description } => description.clone(),
             ActionType::Other { description: _ } => {
                 // For other tools, try to extract key information or fall back to tool name
                 match tool_name.to_lowercase().as_str() {
-                    "todo_write" | "todo_read" => "Managing TODO list".to_string(),
+                    "todowrite" | "todoread" | "todo_write" | "todo_read" => {
-                    "list_directory" | "ls" => {
+                        if let Some(todos) = input.get("todos").and_then(|t| t.as_array()) {
+                            let mut todo_items = Vec::new();
+                            for todo in todos {
+                                if let (Some(content), Some(status)) = (
+                                    todo.get("content").and_then(|c| c.as_str()),
+                                    todo.get("status").and_then(|s| s.as_str()),
+                                ) {
+                                    let emoji = match status {
+                                        "completed" => "✅",
+                                        "in_progress" | "in-progress" => "🔄",
+                                        "pending" | "todo" => "⏳",
+                                        _ => "📝",
+                                    };
+                                    let priority = todo
+                                        .get("priority")
+                                        .and_then(|p| p.as_str())
+                                        .unwrap_or("medium");
+                                    todo_items
+                                        .push(format!("{} {} ({})", emoji, content, priority));
+                                }
+                            }
+                            if !todo_items.is_empty() {
+                                format!("TODO List:\n{}", todo_items.join("\n"))
+                            } else {
+                                "Managing TODO list".to_string()
+                            }
+                        } else {
+                            "Managing TODO list".to_string()
+                        }
+                    }
+                    "ls" => {
                         if let Some(path) = input.get("path").and_then(|p| p.as_str()) {
-                            format!("List directory: {}", self.make_path_relative(path))
+                            let relative_path = self.make_path_relative(path, worktree_path);
+                            if relative_path.is_empty() {
+                                "List directory".to_string()
+                            } else {
+                                format!("List directory: `{}`", relative_path)
+                            }
                         } else {
                             "List directory".to_string()
                         }
                     }
-                    "codebase_search_agent" => {
+                    "glob" => {
-                        if let Some(query) = input.get("query").and_then(|q| q.as_str()) {
+                        let pattern = input.get("pattern").and_then(|p| p.as_str()).unwrap_or("*");
-                            format!("Search: {}", query)
+                        let path = input.get("path").and_then(|p| p.as_str());
+
+                        if let Some(path) = path {
+                            let relative_path = self.make_path_relative(path, worktree_path);
+                            format!("Find files: `{}` in `{}`", pattern, relative_path)
                         } else {
-                            "Codebase search".to_string()
+                            format!("Find files: `{}`", pattern)
                         }
                     }
-                    "glob" => {
+                    "grep" => {
-                        if let Some(pattern) = input.get("filePattern").and_then(|p| p.as_str()) {
+                        let pattern = input.get("pattern").and_then(|p| p.as_str()).unwrap_or("");
-                            format!("File pattern: {}", pattern)
+                        let include = input.get("include").and_then(|i| i.as_str());
+                        let path = input.get("path").and_then(|p| p.as_str());
+
+                        let mut parts = vec![format!("Search: `{}`", pattern)];
+                        if let Some(include) = include {
+                            parts.push(format!("in `{}`", include));
+                        }
+                        if let Some(path) = path {
+                            let relative_path = self.make_path_relative(path, worktree_path);
+                            parts.push(format!("at `{}`", relative_path));
+                        }
+                        parts.join(" ")
+                    }
+                    "read" => {
+                        if let Some(file_path) = input.get("file_path").and_then(|p| p.as_str()) {
+                            let relative_path = self.make_path_relative(file_path, worktree_path);
+                            format!("Read file: `{}`", relative_path)
                         } else {
-                            "File pattern search".to_string()
+                            "Read file".to_string()
+                        }
+                    }
+                    "write" => {
+                        if let Some(file_path) = input.get("file_path").and_then(|p| p.as_str()) {
+                            let relative_path = self.make_path_relative(file_path, worktree_path);
+                            format!("Write file: `{}`", relative_path)
+                        } else {
+                            "Write file".to_string()
+                        }
+                    }
+                    "edit" => {
+                        if let Some(file_path) = input.get("file_path").and_then(|p| p.as_str()) {
+                            let relative_path = self.make_path_relative(file_path, worktree_path);
+                            format!("Edit file: `{}`", relative_path)
+                        } else {
+                            "Edit file".to_string()
+                        }
+                    }
+                    "multiedit" => {
+                        if let Some(file_path) = input.get("file_path").and_then(|p| p.as_str()) {
+                            let relative_path = self.make_path_relative(file_path, worktree_path);
+                            format!("Multi-edit file: `{}`", relative_path)
+                        } else {
+                            "Multi-edit file".to_string()
+                        }
+                    }
+                    "bash" => {
+                        if let Some(command) = input.get("command").and_then(|c| c.as_str()) {
+                            format!("Run command: `{}`", command)
+                        } else {
+                            "Run command".to_string()
+                        }
+                    }
+                    "webfetch" => {
+                        if let Some(url) = input.get("url").and_then(|u| u.as_str()) {
+                            format!("Fetch URL: `{}`", url)
+                        } else {
+                            "Fetch URL".to_string()
+                        }
+                    }
+                    "task" => {
+                        if let Some(description) = input.get("description").and_then(|d| d.as_str())
+                        {
+                            format!("Task: {}", description)
+                        } else if let Some(prompt) = input.get("prompt").and_then(|p| p.as_str()) {
+                            format!("Task: {}", prompt)
+                        } else {
+                            "Task".to_string()
                         }
                     }
                     _ => tool_name.to_string(),
@@ -335,16 +441,21 @@ impl AmpExecutor {
         }
     }
 
-    fn extract_action_type(&self, tool_name: &str, input: &serde_json::Value) -> ActionType {
+    fn extract_action_type(
+        &self,
+        tool_name: &str,
+        input: &serde_json::Value,
+        worktree_path: &str,
+    ) -> ActionType {
         match tool_name.to_lowercase().as_str() {
             "read_file" | "read" => {
                 if let Some(path) = input.get("path").and_then(|p| p.as_str()) {
                     ActionType::FileRead {
-                        path: self.make_path_relative(path),
+                        path: self.make_path_relative(path, worktree_path),
                     }
                 } else if let Some(file_path) = input.get("file_path").and_then(|p| p.as_str()) {
                     ActionType::FileRead {
-                        path: self.make_path_relative(file_path),
+                        path: self.make_path_relative(file_path, worktree_path),
                     }
                 } else {
                     ActionType::Other {
@@ -352,14 +463,14 @@ impl AmpExecutor {
                     }
                 }
             }
-            "edit_file" | "write" | "create_file" => {
+            "edit_file" | "write" | "create_file" | "edit" | "multiedit" => {
                 if let Some(path) = input.get("path").and_then(|p| p.as_str()) {
                     ActionType::FileWrite {
-                        path: self.make_path_relative(path),
+                        path: self.make_path_relative(path, worktree_path),
                     }
                 } else if let Some(file_path) = input.get("file_path").and_then(|p| p.as_str()) {
                     ActionType::FileWrite {
-                        path: self.make_path_relative(file_path),
+                        path: self.make_path_relative(file_path, worktree_path),
                     }
                 } else {
                     ActionType::Other {
@@ -423,6 +534,15 @@ impl AmpExecutor {
                     }
                 }
             }
+            "glob" => ActionType::Other {
+                description: "File pattern search".to_string(),
+            },
+            "ls" => ActionType::Other {
+                description: "List directory".to_string(),
+            },
+            "todowrite" | "todoread" | "todo_write" | "todo_read" => ActionType::Other {
+                description: "Manage TODO list".to_string(),
+            },
             _ => ActionType::Other {
                 description: format!("Tool: {}", tool_name),
             },

backend/src/executors/claude.rs

@@ -294,26 +294,77 @@ impl ClaudeExecutor {
         worktree_path: &str,
     ) -> String {
         match action_type {
-            ActionType::FileRead { path } => path.clone(),
+            ActionType::FileRead { path } => format!("`{}`", path),
-            ActionType::FileWrite { path } => path.clone(),
+            ActionType::FileWrite { path } => format!("`{}`", path),
-            ActionType::CommandRun { command } => command.clone(),
+            ActionType::CommandRun { command } => format!("`{}`", command),
-            ActionType::Search { query } => query.clone(),
+            ActionType::Search { query } => format!("`{}`", query),
-            ActionType::WebFetch { url } => url.clone(),
+            ActionType::WebFetch { url } => format!("`{}`", url),
             ActionType::TaskCreate { description } => description.clone(),
             ActionType::Other { description: _ } => {
                 // For other tools, try to extract key information or fall back to tool name
                 match tool_name.to_lowercase().as_str() {
-                    "todoread" | "todowrite" => "Managing TODO list".to_string(),
+                    "todoread" | "todowrite" => {
+                        // Extract todo list from input to show actual todos
+                        if let Some(todos) = input.get("todos").and_then(|t| t.as_array()) {
+                            let mut todo_items = Vec::new();
+                            for todo in todos {
+                                if let Some(content) = todo.get("content").and_then(|c| c.as_str())
+                                {
+                                    let status = todo
+                                        .get("status")
+                                        .and_then(|s| s.as_str())
+                                        .unwrap_or("pending");
+                                    let status_emoji = match status {
+                                        "completed" => "✅",
+                                        "in_progress" => "🔄",
+                                        "pending" | "todo" => "⏳",
+                                        _ => "📝",
+                                    };
+                                    let priority = todo
+                                        .get("priority")
+                                        .and_then(|p| p.as_str())
+                                        .unwrap_or("medium");
+                                    todo_items.push(format!(
+                                        "{} {} ({})",
+                                        status_emoji, content, priority
+                                    ));
+                                }
+                            }
+                            if !todo_items.is_empty() {
+                                format!("TODO List:\n{}", todo_items.join("\n"))
+                            } else {
+                                "Managing TODO list".to_string()
+                            }
+                        } else {
+                            "Managing TODO list".to_string()
+                        }
+                    }
                     "ls" => {
                         if let Some(path) = input.get("path").and_then(|p| p.as_str()) {
-                            format!(
+                            let relative_path = self.make_path_relative(path, worktree_path);
-                                "List directory: {}",
+                            if relative_path.is_empty() {
-                                self.make_path_relative(path, worktree_path)
+                                "List directory".to_string()
-                            )
+                            } else {
+                                format!("List directory: `{}`", relative_path)
+                            }
                         } else {
                             "List directory".to_string()
                         }
                     }
+                    "glob" => {
+                        let pattern = input.get("pattern").and_then(|p| p.as_str()).unwrap_or("*");
+                        let path = input.get("path").and_then(|p| p.as_str());
+
+                        if let Some(search_path) = path {
+                            format!(
+                                "Find files: `{}` in `{}`",
+                                pattern,
+                                self.make_path_relative(search_path, worktree_path)
+                            )
+                        } else {
+                            format!("Find files: `{}`", pattern)
+                        }
+                    }
                     "codebase_search_agent" => {
                         if let Some(query) = input.get("query").and_then(|q| q.as_str()) {
                             format!("Search: {}", query)
@@ -383,9 +434,9 @@ impl ClaudeExecutor {
                 }
             }
             "glob" => {
-                if let Some(file_pattern) = input.get("filePattern").and_then(|p| p.as_str()) {
+                if let Some(pattern) = input.get("pattern").and_then(|p| p.as_str()) {
-                    ActionType::Search {
+                    ActionType::Other {
-                        query: file_pattern.to_string(),
+                        description: format!("Find files: {}", pattern),
                     }
                 } else {
                     ActionType::Other {
@@ -523,4 +574,153 @@ mod tests {
         let result = executor.make_path_relative(&absolute_path, test_worktree);
         assert_eq!(result, "src/main.rs");
     }
+
+    #[test]
+    fn test_todo_tool_content_extraction() {
+        let executor = ClaudeExecutor;
+
+        // Test TodoWrite with actual todo list
+        let todo_input = serde_json::json!({
+            "todos": [
+                {
+                    "id": "1",
+                    "content": "Fix the navigation bug",
+                    "status": "completed",
+                    "priority": "high"
+                },
+                {
+                    "id": "2",
+                    "content": "Add user authentication",
+                    "status": "in_progress",
+                    "priority": "medium"
+                },
+                {
+                    "id": "3",
+                    "content": "Write documentation",
+                    "status": "pending",
+                    "priority": "low"
+                }
+            ]
+        });
+
+        let result = executor.generate_concise_content(
+            "TodoWrite",
+            &todo_input,
+            &ActionType::Other {
+                description: "Tool: TodoWrite".to_string(),
+            },
+            "/tmp/test-worktree",
+        );
+
+        assert!(result.contains("TODO List:"));
+        assert!(result.contains("✅ Fix the navigation bug (high)"));
+        assert!(result.contains("🔄 Add user authentication (medium)"));
+        assert!(result.contains("⏳ Write documentation (low)"));
+    }
+
+    #[test]
+    fn test_todo_tool_empty_list() {
+        let executor = ClaudeExecutor;
+
+        // Test TodoWrite with empty todo list
+        let empty_input = serde_json::json!({
+            "todos": []
+        });
+
+        let result = executor.generate_concise_content(
+            "TodoWrite",
+            &empty_input,
+            &ActionType::Other {
+                description: "Tool: TodoWrite".to_string(),
+            },
+            "/tmp/test-worktree",
+        );
+
+        assert_eq!(result, "Managing TODO list");
+    }
+
+    #[test]
+    fn test_todo_tool_no_todos_field() {
+        let executor = ClaudeExecutor;
+
+        // Test TodoWrite with no todos field
+        let no_todos_input = serde_json::json!({
+            "other_field": "value"
+        });
+
+        let result = executor.generate_concise_content(
+            "TodoWrite",
+            &no_todos_input,
+            &ActionType::Other {
+                description: "Tool: TodoWrite".to_string(),
+            },
+            "/tmp/test-worktree",
+        );
+
+        assert_eq!(result, "Managing TODO list");
+    }
+
+    #[test]
+    fn test_glob_tool_content_extraction() {
+        let executor = ClaudeExecutor;
+
+        // Test Glob with pattern and path
+        let glob_input = serde_json::json!({
+            "pattern": "**/*.ts",
+            "path": "/tmp/test-worktree/src"
+        });
+
+        let result = executor.generate_concise_content(
+            "Glob",
+            &glob_input,
+            &ActionType::Other {
+                description: "Find files: **/*.ts".to_string(),
+            },
+            "/tmp/test-worktree",
+        );
+
+        assert_eq!(result, "Find files: `**/*.ts` in `src`");
+    }
+
+    #[test]
+    fn test_glob_tool_pattern_only() {
+        let executor = ClaudeExecutor;
+
+        // Test Glob with pattern only
+        let glob_input = serde_json::json!({
+            "pattern": "*.js"
+        });
+
+        let result = executor.generate_concise_content(
+            "Glob",
+            &glob_input,
+            &ActionType::Other {
+                description: "Find files: *.js".to_string(),
+            },
+            "/tmp/test-worktree",
+        );
+
+        assert_eq!(result, "Find files: `*.js`");
+    }
+
+    #[test]
+    fn test_ls_tool_content_extraction() {
+        let executor = ClaudeExecutor;
+
+        // Test LS with path
+        let ls_input = serde_json::json!({
+            "path": "/tmp/test-worktree/components"
+        });
+
+        let result = executor.generate_concise_content(
+            "LS",
+            &ls_input,
+            &ActionType::Other {
+                description: "Tool: LS".to_string(),
+            },
+            "/tmp/test-worktree",
+        );
+
+        assert_eq!(result, "List directory: `components`");
+    }
 }

backend/src/lib.rs

@@ -12,9 +12,6 @@ pub mod routes;
 pub mod services;
 pub mod utils;
 
-#[cfg(test)]
-mod executor_tests;
-
 #[derive(RustEmbed)]
 #[folder = "../frontend/dist"]
 pub struct Assets;

frontend/src/components/tasks/NormalizedConversationViewer.tsx

@@ -16,9 +16,10 @@ import {
   ChevronUp,
   ToggleLeft,
   ToggleRight,
+  CheckSquare,
 } from 'lucide-react';
-import Markdown from 'react-markdown';
 import { makeRequest } from '@/lib/api';
+import { MarkdownRenderer } from '@/components/ui/markdown-renderer';
 import type {
   NormalizedConversation,
   NormalizedEntry,
@@ -50,7 +51,19 @@ const getEntryIcon = (entryType: NormalizedEntryType) => {
     return <AlertCircle className="h-4 w-4 text-red-600" />;
   }
   if (entryType.type === 'tool_use') {
-    const { action_type } = entryType;
+    const { action_type, tool_name } = entryType;
+
+    // Special handling for TODO tools
+    if (
+      tool_name &&
+      (tool_name.toLowerCase() === 'todowrite' ||
+        tool_name.toLowerCase() === 'todoread' ||
+        tool_name.toLowerCase() === 'todo_write' ||
+        tool_name.toLowerCase() === 'todo_read')
+    ) {
+      return <CheckSquare className="h-4 w-4 text-purple-600" />;
+    }
+
     if (action_type.action === 'file_read') {
       return <Eye className="h-4 w-4 text-orange-600" />;
     }
@@ -88,6 +101,18 @@ const getContentClassName = (entryType: NormalizedEntryType) => {
     return `${baseClasses} text-red-600 font-mono bg-red-50 dark:bg-red-950/20 px-2 py-1 rounded`;
   }
 
+  // Special styling for TODO lists
+  if (
+    entryType.type === 'tool_use' &&
+    entryType.tool_name &&
+    (entryType.tool_name.toLowerCase() === 'todowrite' ||
+      entryType.tool_name.toLowerCase() === 'todoread' ||
+      entryType.tool_name.toLowerCase() === 'todo_write' ||
+      entryType.tool_name.toLowerCase() === 'todo_read')
+  ) {
+    return `${baseClasses} font-mono text-purple-700 dark:text-purple-300 bg-purple-50 dark:bg-purple-950/20 px-2 py-1 rounded`;
+  }
+
   return baseClasses;
 };
 
@@ -182,6 +207,37 @@ const clusterGeminiMessages = (
   return clustered;
 };
 
+// Helper function to determine if content should be rendered as markdown
+const shouldRenderMarkdown = (entryType: NormalizedEntryType) => {
+  // Render markdown for assistant messages and tool outputs that contain backticks
+  return (
+    entryType.type === 'assistant_message' ||
+    (entryType.type === 'tool_use' &&
+      entryType.tool_name &&
+      (entryType.tool_name.toLowerCase() === 'todowrite' ||
+        entryType.tool_name.toLowerCase() === 'todoread' ||
+        entryType.tool_name.toLowerCase() === 'todo_write' ||
+        entryType.tool_name.toLowerCase() === 'todo_read' ||
+        entryType.tool_name.toLowerCase() === 'glob' ||
+        entryType.tool_name.toLowerCase() === 'ls' ||
+        entryType.tool_name.toLowerCase() === 'list_directory' ||
+        entryType.tool_name.toLowerCase() === 'read' ||
+        entryType.tool_name.toLowerCase() === 'read_file' ||
+        entryType.tool_name.toLowerCase() === 'write' ||
+        entryType.tool_name.toLowerCase() === 'create_file' ||
+        entryType.tool_name.toLowerCase() === 'edit' ||
+        entryType.tool_name.toLowerCase() === 'edit_file' ||
+        entryType.tool_name.toLowerCase() === 'multiedit' ||
+        entryType.tool_name.toLowerCase() === 'bash' ||
+        entryType.tool_name.toLowerCase() === 'run_command' ||
+        entryType.tool_name.toLowerCase() === 'grep' ||
+        entryType.tool_name.toLowerCase() === 'search' ||
+        entryType.tool_name.toLowerCase() === 'webfetch' ||
+        entryType.tool_name.toLowerCase() === 'web_fetch' ||
+        entryType.tool_name.toLowerCase() === 'task'))
+  );
+};
+
 export function NormalizedConversationViewer({
   executionProcess,
   projectId,
@@ -358,7 +414,10 @@ export function NormalizedConversationViewer({
           </div>
           <div className="flex-1 min-w-0">
             <div className="text-sm whitespace-pre-wrap text-foreground">
-              {conversation.prompt}
+              <MarkdownRenderer
+                content={conversation.prompt}
+                className="whitespace-pre-wrap break-words"
+              />
             </div>
           </div>
         </div>
@@ -391,7 +450,14 @@ export function NormalizedConversationViewer({
                   <div className={isExpanded ? 'space-y-2' : ''}>
                     <div className={getContentClassName(entry.entry_type)}>
                       {isExpanded ? (
-                        entry.content
+                        shouldRenderMarkdown(entry.entry_type) ? (
+                          <MarkdownRenderer
+                            content={entry.content}
+                            className="whitespace-pre-wrap break-words"
+                          />
+                        ) : (
+                          entry.content
+                        )
                       ) : (
                         <>
                           {entry.content.split('\n')[0]}
@@ -417,10 +483,11 @@ export function NormalizedConversationViewer({
                   </div>
                 ) : (
                   <div className={getContentClassName(entry.entry_type)}>
-                    {entry.entry_type.type === 'assistant_message' ? (
+                    {shouldRenderMarkdown(entry.entry_type) ? (
-                      <div className="[&>p]:mb-2 [&>ul]:list-disc [&>ul]:ml-4 [&>ol]:list-decimal [&>ol]:ml-4 [&>code]:bg-muted [&>code]:px-1 [&>code]:rounded [&>pre]:bg-muted [&>pre]:p-3 [&>pre]:rounded [&>h1]:font-bold [&>h2]:font-semibold">
+                      <MarkdownRenderer
-                        <Markdown>{entry.content}</Markdown>
+                        content={entry.content}
-                      </div>
+                        className="whitespace-pre-wrap break-words"
+                      />
                     ) : (
                       entry.content
                     )}

frontend/src/components/tasks/TaskDetailsPanel.tsx

@@ -19,7 +19,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { FileText, ChevronDown, ChevronUp, Trash2 } from 'lucide-react';
+import {
+  FileText,
+  ChevronDown,
+  ChevronUp,
+  Trash2,
+  Eye,
+  EyeOff,
+} from 'lucide-react';
 import type {
   TaskWithAttemptStatus,
   EditorType,
@@ -84,8 +91,10 @@ export function TaskDetailsPanel({
   const [expandedSections, setExpandedSections] = useState<Set<string>>(
     new Set()
   );
+  const [collapsedFiles, setCollapsedFiles] = useState<Set<string>>(new Set());
   const [deletingFiles, setDeletingFiles] = useState<Set<string>>(new Set());
   const [fileToDelete, setFileToDelete] = useState<string | null>(null);
+  const [showDiffs, setShowDiffs] = useState(true);
 
   // Use the custom hook for all task details logic
   const {
@@ -462,6 +471,35 @@ export function TaskDetailsPanel({
     });
   };
 
+  const toggleFileCollapse = (filePath: string) => {
+    setCollapsedFiles((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(filePath)) {
+        newSet.delete(filePath);
+      } else {
+        newSet.add(filePath);
+      }
+      return newSet;
+    });
+  };
+
+  const collapseAllFiles = () => {
+    if (diff) {
+      setCollapsedFiles(new Set(diff.files.map((file) => file.path)));
+    }
+  };
+
+  const expandAllFiles = () => {
+    setCollapsedFiles(new Set());
+  };
+
+  // Helper to check if all files with content are collapsed
+  const areAllFilesCollapsed = () => {
+    return (
+      diff && diff.files.length > 0 && collapsedFiles.size === diff.files.length
+    );
+  };
+
   const handleDeleteFileClick = (filePath: string) => {
     setFileToDelete(filePath);
   };
@@ -798,89 +836,163 @@ export function TaskDetailsPanel({
     if (hasChanges) {
       return (
         <>
-          {/* Top 2/3 - Code Changes */}
+          {/* Top area - Code Changes (responsive height) */}
-          <div className="flex-1 min-h-0 p-4 overflow-y-auto">
+          {showDiffs && (
-            {diffLoading ? (
+            <div
-              <div className="flex items-center justify-center h-32">
+              className={`${areAllFilesCollapsed() ? 'h-auto' : 'max-h-[66vh]'} min-h-0 ${areAllFilesCollapsed() ? 'p-2' : 'p-4'} overflow-y-auto`}
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
+            >
-                <p className="text-muted-foreground ml-4">Loading changes...</p>
+              {diffLoading ? (
-              </div>
+                <div className="flex items-center justify-center h-32">
-            ) : diffError ? (
+                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
-              <div className="text-center py-8 text-destructive">
+                  <p className="text-muted-foreground ml-4">
-                <p>{diffError}</p>
+                    Loading changes...
-              </div>
+                  </p>
-            ) : !diff || diff.files.length === 0 ? (
+                </div>
-              <div className="text-center py-8 text-muted-foreground">
+              ) : diffError ? (
-                <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                <div className="text-center py-8 text-destructive">
-                <p>No changes detected</p>
+                  <p>{diffError}</p>
-                <p className="text-sm">
+                </div>
-                  The worktree is identical to the base commit
+              ) : !diff || diff.files.length === 0 ? (
-                </p>
+                <div className="text-center py-8 text-muted-foreground">
-              </div>
+                  <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
-            ) : (
+                  <p>No changes detected</p>
-              <div className="space-y-3">
+                  <p className="text-sm">
-                {diff.files.map((file, fileIndex) => (
+                    The worktree is identical to the base commit
+                  </p>
+                </div>
+              ) : (
+                <div
+                  className={`${areAllFilesCollapsed() ? 'space-y-1' : 'space-y-3'}`}
+                >
                   <div
-                    key={fileIndex}
+                    className={`flex items-center justify-between ${areAllFilesCollapsed() ? 'mb-1' : 'mb-3'}`}
-                    className="border rounded-lg overflow-hidden"
                   >
-                    <div className="bg-muted px-3 py-1.5 border-b flex items-center justify-between">
+                    <div className="text-sm text-muted-foreground">
-                      <p className="text-sm font-medium text-muted-foreground font-mono">
+                      {diff.files.length} file
-                        {file.path}
+                      {diff.files.length !== 1 ? 's' : ''} changed
-                      </p>
+                    </div>
+                    <div className="flex items-center gap-2">
                       <Button
                         variant="ghost"
                         size="sm"
-                        onClick={() => handleDeleteFileClick(file.path)}
+                        onClick={() => setShowDiffs(false)}
-                        disabled={deletingFiles.has(file.path)}
+                        className="h-7 text-xs"
-                        className="text-red-600 hover:text-red-800 hover:bg-red-50 h-8 px-3 gap-1"
-                        title={`Delete ${file.path}`}
                       >
-                        <Trash2 className="h-4 w-4" />
+                        <EyeOff className="h-3 w-3 mr-1" />
-                        <span className="text-xs">
+                        Hide Diffs
-                          {deletingFiles.has(file.path)
-                            ? 'Deleting...'
-                            : 'Delete File'}
-                        </span>
                       </Button>
+                      {diff.files.length > 1 && (
+                        <>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={expandAllFiles}
+                            className="h-7 text-xs"
+                            disabled={collapsedFiles.size === 0}
+                          >
+                            Expand All
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={collapseAllFiles}
+                            className="h-7 text-xs"
+                            disabled={collapsedFiles.size === diff.files.length}
+                          >
+                            Collapse All
+                          </Button>
+                        </>
+                      )}
                     </div>
-                    <div className="overflow-x-auto">
+                  </div>
-                      <div className="inline-block min-w-full">
+                  {diff.files.map((file, fileIndex) => (
-                        {processFileChunks(file.chunks, fileIndex).map(
+                    <div
-                          (section, sectionIndex) => {
+                      key={fileIndex}
-                            if (
+                      className={`border rounded-lg overflow-hidden ${collapsedFiles.has(file.path) ? 'border-muted' : ''}`}
-                              section.type === 'context' &&
+                    >
-                              section.lines.length === 0 &&
+                      <div
-                              section.expandKey
+                        className={`bg-muted px-3 py-1.5 flex items-center justify-between ${!collapsedFiles.has(file.path) ? 'border-b' : ''}`}
-                            ) {
+                      >
-                              const lineCount =
+                        <div className="flex items-center gap-2">
-                                parseInt(section.expandKey.split('-')[2]) -
+                          <Button
-                                parseInt(section.expandKey.split('-')[1]);
+                            variant="ghost"
-                              return (
+                            size="sm"
-                                <div
+                            onClick={() => toggleFileCollapse(file.path)}
-                                  key={`expand-${section.expandKey}`}
+                            className="h-6 w-6 p-0 hover:bg-muted-foreground/10"
-                                  className="w-full"
+                            title={
-                                >
+                              collapsedFiles.has(file.path)
-                                  <Button
+                                ? 'Expand diff'
-                                    variant="ghost"
+                                : 'Collapse diff'
-                                    size="sm"
-                                    onClick={() =>
-                                      toggleExpandSection(section.expandKey!)
-                                    }
-                                    className="w-full h-6 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-950/50 border-t border-b border-gray-200 dark:border-gray-700 rounded-none justify-start"
-                                  >
-                                    <ChevronDown className="h-3 w-3 mr-1" />
-                                    Show {lineCount} more lines
-                                  </Button>
-                                </div>
-                              );
                             }
-
+                          >
-                            return (
+                            {collapsedFiles.has(file.path) ? (
-                              <div key={`section-${sectionIndex}`}>
+                              <ChevronDown className="h-4 w-4" />
-                                {section.type === 'expanded' &&
+                            ) : (
-                                  section.expandKey && (
+                              <ChevronUp className="h-4 w-4" />
-                                    <div className="w-full">
+                            )}
+                          </Button>
+                          <p className="text-sm font-medium text-muted-foreground font-mono">
+                            {file.path}
+                          </p>
+                          {collapsedFiles.has(file.path) && (
+                            <div className="flex items-center gap-1 text-xs text-muted-foreground ml-2">
+                              <span className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 px-1.5 py-0.5 rounded">
+                                +
+                                {file.chunks
+                                  .filter((c) => c.chunk_type === 'Insert')
+                                  .reduce(
+                                    (acc, c) =>
+                                      acc + c.content.split('\n').length - 1,
+                                    0
+                                  )}
+                              </span>
+                              <span className="bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 px-1.5 py-0.5 rounded">
+                                -
+                                {file.chunks
+                                  .filter((c) => c.chunk_type === 'Delete')
+                                  .reduce(
+                                    (acc, c) =>
+                                      acc + c.content.split('\n').length - 1,
+                                    0
+                                  )}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleDeleteFileClick(file.path)}
+                          disabled={deletingFiles.has(file.path)}
+                          className="text-red-600 hover:text-red-800 hover:bg-red-50 h-8 px-3 gap-1"
+                          title={`Delete ${file.path}`}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                          <span className="text-xs">
+                            {deletingFiles.has(file.path)
+                              ? 'Deleting...'
+                              : 'Delete File'}
+                          </span>
+                        </Button>
+                      </div>
+                      {!collapsedFiles.has(file.path) && (
+                        <div className="overflow-x-auto">
+                          <div className="inline-block min-w-full">
+                            {processFileChunks(file.chunks, fileIndex).map(
+                              (section, sectionIndex) => {
+                                if (
+                                  section.type === 'context' &&
+                                  section.lines.length === 0 &&
+                                  section.expandKey
+                                ) {
+                                  const lineCount =
+                                    parseInt(section.expandKey.split('-')[2]) -
+                                    parseInt(section.expandKey.split('-')[1]);
+                                  return (
+                                    <div
+                                      key={`expand-${section.expandKey}`}
+                                      className="w-full"
+                                    >
                                       <Button
                                         variant="ghost"
                                         size="sm"
@@ -891,53 +1003,96 @@ export function TaskDetailsPanel({
                                         }
                                         className="w-full h-6 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-950/50 border-t border-b border-gray-200 dark:border-gray-700 rounded-none justify-start"
                                       >
-                                        <ChevronUp className="h-3 w-3 mr-1" />
+                                        <ChevronDown className="h-3 w-3 mr-1" />
-                                        Hide expanded lines
+                                        Show {lineCount} more lines
                                       </Button>
                                     </div>
-                                  )}
+                                  );
-                                {section.lines.map((line, lineIndex) => (
+                                }
-                                  <div
-                                    key={`${sectionIndex}-${lineIndex}`}
-                                    className={getChunkClassName(
-                                      line.chunkType
-                                    )}
-                                    style={{ minWidth: 'max-content' }}
-                                  >
-                                    <div
-                                      className={getLineNumberClassName(
-                                        line.chunkType
-                                      )}
-                                    >
-                                      <span className="inline-block w-5 text-right">
-                                        {line.oldLineNumber || ''}
-                                      </span>
-                                      <span className="inline-block w-5 text-right ml-1">
-                                        {line.newLineNumber || ''}
-                                      </span>
-                                    </div>
-                                    <div className="flex-1 px-2 min-h-[1.25rem] flex items-center">
-                                      <span className="inline-block w-4">
-                                        {getChunkPrefix(line.chunkType)}
-                                      </span>
-                                      <span>{line.content}</span>
-                                    </div>
-                                  </div>
-                                ))}
-                              </div>
-                            );
-                          }
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
 
-          {/* Bottom 1/3 - Agent Logs */}
+                                return (
-          <div className="h-1/3 min-h-0 border-t bg-muted/30">
+                                  <div key={`section-${sectionIndex}`}>
+                                    {section.type === 'expanded' &&
+                                      section.expandKey && (
+                                        <div className="w-full">
+                                          <Button
+                                            variant="ghost"
+                                            size="sm"
+                                            onClick={() =>
+                                              toggleExpandSection(
+                                                section.expandKey!
+                                              )
+                                            }
+                                            className="w-full h-6 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-950/50 border-t border-b border-gray-200 dark:border-gray-700 rounded-none justify-start"
+                                          >
+                                            <ChevronUp className="h-3 w-3 mr-1" />
+                                            Hide expanded lines
+                                          </Button>
+                                        </div>
+                                      )}
+                                    {section.lines.map((line, lineIndex) => (
+                                      <div
+                                        key={`${sectionIndex}-${lineIndex}`}
+                                        className={getChunkClassName(
+                                          line.chunkType
+                                        )}
+                                        style={{ minWidth: 'max-content' }}
+                                      >
+                                        <div
+                                          className={getLineNumberClassName(
+                                            line.chunkType
+                                          )}
+                                        >
+                                          <span className="inline-block w-5 text-right">
+                                            {line.oldLineNumber || ''}
+                                          </span>
+                                          <span className="inline-block w-5 text-right ml-1">
+                                            {line.newLineNumber || ''}
+                                          </span>
+                                        </div>
+                                        <div className="flex-1 px-2 min-h-[1.25rem] flex items-center">
+                                          <span className="inline-block w-4">
+                                            {getChunkPrefix(line.chunkType)}
+                                          </span>
+                                          <span>{line.content}</span>
+                                        </div>
+                                      </div>
+                                    ))}
+                                  </div>
+                                );
+                              }
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Show Diffs button when diffs are hidden */}
+          {!showDiffs && hasChanges && (
+            <div className="p-2 border-b bg-muted/50">
+              <div className="flex justify-center">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowDiffs(true)}
+                  className="h-7 text-xs"
+                >
+                  <Eye className="h-3 w-3 mr-1" />
+                  Show Diffs
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Bottom area - Agent Logs (responsive height) */}
+          <div
+            className={`${!showDiffs || areAllFilesCollapsed() ? 'flex-1' : 'flex-1'} min-h-0 ${showDiffs ? 'border-t' : ''} bg-muted/30`}
+          >
             <div
               ref={scrollContainerRef}
               onScroll={handleLogsScroll}

frontend/src/components/ui/markdown-renderer.tsx

@@ -0,0 +1,84 @@
+import ReactMarkdown from 'react-markdown';
+
+interface MarkdownRendererProps {
+  content: string;
+  className?: string;
+}
+
+export function MarkdownRenderer({
+  content,
+  className = '',
+}: MarkdownRendererProps) {
+  return (
+    <div className={className}>
+      <ReactMarkdown
+        components={{
+          code: ({ children, ...props }) => (
+            <code
+              {...props}
+              className="bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm font-mono"
+            >
+              {children}
+            </code>
+          ),
+          strong: ({ children, ...props }) => (
+            <strong {...props} className="font-bold">
+              {children}
+            </strong>
+          ),
+          em: ({ children, ...props }) => (
+            <em {...props} className="italic">
+              {children}
+            </em>
+          ),
+          p: ({ children, ...props }) => (
+            <p {...props} className="mb-0 last:mb-0 leading-tight">
+              {children}
+            </p>
+          ),
+          h1: ({ children, ...props }) => (
+            <h1
+              {...props}
+              className="text-lg font-bold mb-0 mt-1 first:mt-0 leading-tight"
+            >
+              {children}
+            </h1>
+          ),
+          h2: ({ children, ...props }) => (
+            <h2
+              {...props}
+              className="text-base font-bold mb-0 mt-1 first:mt-0 leading-tight"
+            >
+              {children}
+            </h2>
+          ),
+          h3: ({ children, ...props }) => (
+            <h3
+              {...props}
+              className="text-sm font-bold mb-0 mt-1 first:mt-0 leading-tight"
+            >
+              {children}
+            </h3>
+          ),
+          ul: ({ children, ...props }) => (
+            <ul {...props} className="list-disc ml-4 mb-0 -space-y-1">
+              {children}
+            </ul>
+          ),
+          ol: ({ children, ...props }) => (
+            <ol {...props} className="list-decimal ml-4 mb-0 -space-y-1">
+              {children}
+            </ol>
+          ),
+          li: ({ children, ...props }) => (
+            <li {...props} className="mb-0 leading-tight -my-0.5">
+              {children}
+            </li>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "vibe-kanban",
-  "version": "0.0.37-ersion.3",
+  "version": "0.0.38",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vibe-kanban",
-      "version": "0.0.37-ersion.3",
+      "version": "0.0.38",
       "devDependencies": {
         "concurrently": "^8.2.2",
         "vite": "^6.3.5"