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
This commit is contained in:
Gabriel Gordon-Hall
2025-07-08 14:59:41 +01:00
committed by GitHub
parent e973eef2b3
commit cd5e37764f
9 changed files with 913 additions and 293 deletions

View File

@@ -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");
}
}

View File

@@ -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");
}
}

View File

@@ -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
fn make_path_relative(&self, path: &str) -> String {
/// Convert absolute paths to relative paths based on worktree path
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
if let Ok(current_dir) = std::env::current_dir() {
if let Ok(relative_path) = path_obj.strip_prefix(&current_dir) {
return relative_path.to_string_lossy().to_string();
}
// Try to make path relative to worktree path
if let Ok(relative_path) = path_obj.strip_prefix(worktree_obj) {
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::FileWrite { path } => path.clone(),
ActionType::CommandRun { command } => command.clone(),
ActionType::Search { query } => query.clone(),
ActionType::WebFetch { url } => url.clone(),
ActionType::FileRead { path } => format!("`{}`", path),
ActionType::FileWrite { path } => format!("`{}`", path),
ActionType::CommandRun { command } => format!("`{}`", command),
ActionType::Search { query } => format!("`{}`", query),
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(),
"list_directory" | "ls" => {
"todowrite" | "todoread" | "todo_write" | "todo_read" => {
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" => {
if let Some(query) = input.get("query").and_then(|q| q.as_str()) {
format!("Search: {}", query)
"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(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" => {
if let Some(pattern) = input.get("filePattern").and_then(|p| p.as_str()) {
format!("File pattern: {}", pattern)
"grep" => {
let pattern = input.get("pattern").and_then(|p| p.as_str()).unwrap_or("");
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),
},

View File

@@ -294,26 +294,77 @@ impl ClaudeExecutor {
worktree_path: &str,
) -> String {
match action_type {
ActionType::FileRead { path } => path.clone(),
ActionType::FileWrite { path } => path.clone(),
ActionType::CommandRun { command } => command.clone(),
ActionType::Search { query } => query.clone(),
ActionType::WebFetch { url } => url.clone(),
ActionType::FileRead { path } => format!("`{}`", path),
ActionType::FileWrite { path } => format!("`{}`", path),
ActionType::CommandRun { command } => format!("`{}`", command),
ActionType::Search { query } => format!("`{}`", query),
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!(
"List directory: {}",
self.make_path_relative(path, worktree_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()
}
}
"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()) {
ActionType::Search {
query: file_pattern.to_string(),
if let Some(pattern) = input.get("pattern").and_then(|p| p.as_str()) {
ActionType::Other {
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`");
}
}

View File

@@ -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;

View File

@@ -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' ? (
<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">
<Markdown>{entry.content}</Markdown>
</div>
{shouldRenderMarkdown(entry.entry_type) ? (
<MarkdownRenderer
content={entry.content}
className="whitespace-pre-wrap break-words"
/>
) : (
entry.content
)}

View File

@@ -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 */}
<div className="flex-1 min-h-0 p-4 overflow-y-auto">
{diffLoading ? (
<div className="flex items-center justify-center h-32">
<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>
</div>
) : diffError ? (
<div className="text-center py-8 text-destructive">
<p>{diffError}</p>
</div>
) : !diff || diff.files.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
<FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
<p>No changes detected</p>
<p className="text-sm">
The worktree is identical to the base commit
</p>
</div>
) : (
<div className="space-y-3">
{diff.files.map((file, fileIndex) => (
{/* Top area - Code Changes (responsive height) */}
{showDiffs && (
<div
className={`${areAllFilesCollapsed() ? 'h-auto' : 'max-h-[66vh]'} min-h-0 ${areAllFilesCollapsed() ? 'p-2' : 'p-4'} overflow-y-auto`}
>
{diffLoading ? (
<div className="flex items-center justify-center h-32">
<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>
</div>
) : diffError ? (
<div className="text-center py-8 text-destructive">
<p>{diffError}</p>
</div>
) : !diff || diff.files.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
<FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
<p>No changes detected</p>
<p className="text-sm">
The worktree is identical to the base commit
</p>
</div>
) : (
<div
className={`${areAllFilesCollapsed() ? 'space-y-1' : 'space-y-3'}`}
>
<div
key={fileIndex}
className="border rounded-lg overflow-hidden"
className={`flex items-center justify-between ${areAllFilesCollapsed() ? 'mb-1' : 'mb-3'}`}
>
<div className="bg-muted px-3 py-1.5 border-b flex items-center justify-between">
<p className="text-sm font-medium text-muted-foreground font-mono">
{file.path}
</p>
<div className="text-sm text-muted-foreground">
{diff.files.length} file
{diff.files.length !== 1 ? 's' : ''} changed
</div>
<div className="flex items-center gap-2">
<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}`}
onClick={() => setShowDiffs(false)}
className="h-7 text-xs"
>
<Trash2 className="h-4 w-4" />
<span className="text-xs">
{deletingFiles.has(file.path)
? 'Deleting...'
: 'Delete File'}
</span>
<EyeOff className="h-3 w-3 mr-1" />
Hide Diffs
</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 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"
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>
);
</div>
{diff.files.map((file, fileIndex) => (
<div
key={fileIndex}
className={`border rounded-lg overflow-hidden ${collapsedFiles.has(file.path) ? 'border-muted' : ''}`}
>
<div
className={`bg-muted px-3 py-1.5 flex items-center justify-between ${!collapsedFiles.has(file.path) ? 'border-b' : ''}`}
>
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="sm"
onClick={() => toggleFileCollapse(file.path)}
className="h-6 w-6 p-0 hover:bg-muted-foreground/10"
title={
collapsedFiles.has(file.path)
? 'Expand diff'
: 'Collapse diff'
}
return (
<div key={`section-${sectionIndex}`}>
{section.type === 'expanded' &&
section.expandKey && (
<div className="w-full">
>
{collapsedFiles.has(file.path) ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronUp className="h-4 w-4" />
)}
</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" />
Hide expanded lines
<ChevronDown className="h-3 w-3 mr-1" />
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 */}
<div className="h-1/3 min-h-0 border-t bg-muted/30">
return (
<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}

View File

@@ -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>
);
}

4
package-lock.json generated
View File

@@ -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"