mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-01 08:13:37 +00:00
feat: enhance log viewer with tool category support and filtering
- Added tool category icons and colors for log entries based on their metadata, improving visual differentiation. - Implemented search functionality and filters for log entry types and tool categories, allowing users to customize their view. - Enhanced log entry parsing to include tool-specific summaries and file paths, providing more context in the logs. - Introduced a clear filters button to reset search and category filters, improving user experience. - Updated the log viewer UI to accommodate new features, including a sticky header for better accessibility.
This commit is contained in:
Kacper
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { useState, useMemo, useEffect, useRef } from "react";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
@@ -14,13 +14,23 @@ import {
|
||||
Info,
|
||||
FileOutput,
|
||||
Brain,
|
||||
Eye,
|
||||
Pencil,
|
||||
Terminal,
|
||||
Search,
|
||||
ListTodo,
|
||||
Layers,
|
||||
X,
|
||||
Filter,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
parseLogOutput,
|
||||
getLogTypeColors,
|
||||
shouldCollapseByDefault,
|
||||
type LogEntry,
|
||||
type LogEntryType,
|
||||
type ToolCategory,
|
||||
} from "@/lib/log-parser";
|
||||
|
||||
interface LogViewerProps {
|
||||
@@ -53,6 +63,54 @@ const getLogIcon = (type: LogEntryType) => {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a tool-specific icon based on the tool category
|
||||
*/
|
||||
const getToolCategoryIcon = (category: ToolCategory | undefined) => {
|
||||
switch (category) {
|
||||
case "read":
|
||||
return <Eye className="w-4 h-4" />;
|
||||
case "edit":
|
||||
return <Pencil className="w-4 h-4" />;
|
||||
case "write":
|
||||
return <FileOutput className="w-4 h-4" />;
|
||||
case "bash":
|
||||
return <Terminal className="w-4 h-4" />;
|
||||
case "search":
|
||||
return <Search className="w-4 h-4" />;
|
||||
case "todo":
|
||||
return <ListTodo className="w-4 h-4" />;
|
||||
case "task":
|
||||
return <Layers className="w-4 h-4" />;
|
||||
default:
|
||||
return <Wrench className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns color classes for a tool category
|
||||
*/
|
||||
const getToolCategoryColor = (category: ToolCategory | undefined): string => {
|
||||
switch (category) {
|
||||
case "read":
|
||||
return "text-blue-400 bg-blue-500/10 border-blue-500/30";
|
||||
case "edit":
|
||||
return "text-amber-400 bg-amber-500/10 border-amber-500/30";
|
||||
case "write":
|
||||
return "text-emerald-400 bg-emerald-500/10 border-emerald-500/30";
|
||||
case "bash":
|
||||
return "text-purple-400 bg-purple-500/10 border-purple-500/30";
|
||||
case "search":
|
||||
return "text-cyan-400 bg-cyan-500/10 border-cyan-500/30";
|
||||
case "todo":
|
||||
return "text-green-400 bg-green-500/10 border-green-500/30";
|
||||
case "task":
|
||||
return "text-indigo-400 bg-indigo-500/10 border-indigo-500/30";
|
||||
default:
|
||||
return "text-zinc-400 bg-zinc-500/10 border-zinc-500/30";
|
||||
}
|
||||
};
|
||||
|
||||
interface LogEntryItemProps {
|
||||
entry: LogEntry;
|
||||
isExpanded: boolean;
|
||||
@@ -63,9 +121,40 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
|
||||
const colors = getLogTypeColors(entry.type);
|
||||
const hasContent = entry.content.length > 100;
|
||||
|
||||
// For tool_call entries, use tool-specific styling
|
||||
const isToolCall = entry.type === "tool_call";
|
||||
const toolCategory = entry.metadata?.toolCategory;
|
||||
const toolCategoryColors = isToolCall ? getToolCategoryColor(toolCategory) : "";
|
||||
|
||||
// Get the appropriate icon based on entry type and tool category
|
||||
const icon = isToolCall ? getToolCategoryIcon(toolCategory) : getLogIcon(entry.type);
|
||||
|
||||
// Get collapsed preview text - prefer smart summary for tool calls
|
||||
const collapsedPreview = useMemo(() => {
|
||||
if (isExpanded) return "";
|
||||
|
||||
// Use smart summary if available
|
||||
if (entry.metadata?.summary) {
|
||||
return entry.metadata.summary;
|
||||
}
|
||||
|
||||
// Fallback to truncated content
|
||||
return entry.content.slice(0, 80) + (entry.content.length > 80 ? "..." : "");
|
||||
}, [isExpanded, entry.metadata?.summary, entry.content]);
|
||||
|
||||
// Format content - detect and highlight JSON
|
||||
const formattedContent = useMemo(() => {
|
||||
const content = entry.content;
|
||||
let content = entry.content;
|
||||
|
||||
// For tool_call entries, remove redundant "Tool: X" and "Input:" prefixes
|
||||
// since we already show the tool name in the header badge
|
||||
if (isToolCall) {
|
||||
// Remove "🔧 Tool: ToolName\n" or "Tool: ToolName\n" prefix
|
||||
content = content.replace(/^(?:🔧\s*)?Tool:\s*\w+\s*\n?/i, "");
|
||||
// Remove standalone "Input:" label (keep the JSON that follows)
|
||||
content = content.replace(/^Input:\s*\n?/i, "");
|
||||
content = content.trim();
|
||||
}
|
||||
|
||||
// Try to find and format JSON blocks
|
||||
const jsonRegex = /(\{[\s\S]*?\}|\[[\s\S]*?\])/g;
|
||||
@@ -103,14 +192,20 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
|
||||
}
|
||||
|
||||
return parts.length > 0 ? parts : [{ type: "text" as const, content }];
|
||||
}, [entry.content]);
|
||||
}, [entry.content, isToolCall]);
|
||||
|
||||
// Get colors - use tool category colors for tool_call entries
|
||||
const colorParts = toolCategoryColors.split(" ");
|
||||
const textColor = isToolCall ? (colorParts[0] || "text-zinc-400") : colors.text;
|
||||
const bgColor = isToolCall ? (colorParts[1] || "bg-zinc-500/10") : colors.bg;
|
||||
const borderColor = isToolCall ? (colorParts[2] || "border-zinc-500/30") : colors.border;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-lg border-l-4 transition-all duration-200",
|
||||
colors.bg,
|
||||
colors.border,
|
||||
bgColor,
|
||||
borderColor,
|
||||
"hover:brightness-110"
|
||||
)}
|
||||
data-testid={`log-entry-${entry.type}`}
|
||||
@@ -130,14 +225,14 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
|
||||
<span className="w-4 flex-shrink-0" />
|
||||
)}
|
||||
|
||||
<span className={cn("flex-shrink-0", colors.icon)}>
|
||||
{getLogIcon(entry.type)}
|
||||
<span className={cn("flex-shrink-0", isToolCall ? toolCategoryColors.split(" ")[0] : colors.icon)}>
|
||||
{icon}
|
||||
</span>
|
||||
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs font-medium px-2 py-0.5 rounded-full flex-shrink-0",
|
||||
colors.badge
|
||||
isToolCall ? toolCategoryColors : colors.badge
|
||||
)}
|
||||
data-testid="log-entry-badge"
|
||||
>
|
||||
@@ -145,9 +240,7 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
|
||||
</span>
|
||||
|
||||
<span className="text-xs text-zinc-400 truncate flex-1 ml-2">
|
||||
{!isExpanded &&
|
||||
entry.content.slice(0, 80) +
|
||||
(entry.content.length > 80 ? "..." : "")}
|
||||
{collapsedPreview}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@@ -167,7 +260,7 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
|
||||
<pre
|
||||
className={cn(
|
||||
"whitespace-pre-wrap break-words",
|
||||
colors.text
|
||||
textColor
|
||||
)}
|
||||
>
|
||||
{part.content}
|
||||
@@ -182,10 +275,109 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
|
||||
);
|
||||
}
|
||||
|
||||
interface ToolCategoryStats {
|
||||
read: number;
|
||||
edit: number;
|
||||
write: number;
|
||||
bash: number;
|
||||
search: number;
|
||||
todo: number;
|
||||
task: number;
|
||||
other: number;
|
||||
}
|
||||
|
||||
export function LogViewer({ output, className }: LogViewerProps) {
|
||||
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [hiddenTypes, setHiddenTypes] = useState<Set<LogEntryType>>(new Set());
|
||||
const [hiddenCategories, setHiddenCategories] = useState<Set<ToolCategory>>(new Set());
|
||||
|
||||
const entries = useMemo(() => parseLogOutput(output), [output]);
|
||||
// Parse entries and compute initial expanded state together
|
||||
const { entries, initialExpandedIds } = useMemo(() => {
|
||||
const parsedEntries = parseLogOutput(output);
|
||||
const toExpand: string[] = [];
|
||||
|
||||
parsedEntries.forEach((entry) => {
|
||||
// If entry should NOT collapse by default, mark it for expansion
|
||||
if (!shouldCollapseByDefault(entry)) {
|
||||
toExpand.push(entry.id);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
entries: parsedEntries,
|
||||
initialExpandedIds: new Set(toExpand),
|
||||
};
|
||||
}, [output]);
|
||||
|
||||
// Merge initial expanded IDs with user-toggled ones
|
||||
// Use a ref to track if we've applied initial state
|
||||
const appliedInitialRef = useRef<Set<string>>(new Set());
|
||||
|
||||
// Apply initial expanded state for new entries
|
||||
const effectiveExpandedIds = useMemo(() => {
|
||||
const result = new Set(expandedIds);
|
||||
initialExpandedIds.forEach((id) => {
|
||||
if (!appliedInitialRef.current.has(id)) {
|
||||
appliedInitialRef.current.add(id);
|
||||
result.add(id);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}, [expandedIds, initialExpandedIds]);
|
||||
|
||||
// Calculate stats for tool categories
|
||||
const stats = useMemo(() => {
|
||||
const toolCalls = entries.filter((e) => e.type === "tool_call");
|
||||
const byCategory: ToolCategoryStats = {
|
||||
read: 0,
|
||||
edit: 0,
|
||||
write: 0,
|
||||
bash: 0,
|
||||
search: 0,
|
||||
todo: 0,
|
||||
task: 0,
|
||||
other: 0,
|
||||
};
|
||||
|
||||
toolCalls.forEach((tc) => {
|
||||
const cat = tc.metadata?.toolCategory || "other";
|
||||
byCategory[cat]++;
|
||||
});
|
||||
|
||||
return {
|
||||
total: toolCalls.length,
|
||||
byCategory,
|
||||
errors: entries.filter((e) => e.type === "error").length,
|
||||
};
|
||||
}, [entries]);
|
||||
|
||||
// Filter entries based on search and hidden types/categories
|
||||
const filteredEntries = useMemo(() => {
|
||||
return entries.filter((entry) => {
|
||||
// Filter by hidden types
|
||||
if (hiddenTypes.has(entry.type)) return false;
|
||||
|
||||
// Filter by hidden tool categories (for tool_call entries)
|
||||
if (entry.type === "tool_call" && entry.metadata?.toolCategory) {
|
||||
if (hiddenCategories.has(entry.metadata.toolCategory)) return false;
|
||||
}
|
||||
|
||||
// Filter by search query
|
||||
if (searchQuery) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
return (
|
||||
entry.content.toLowerCase().includes(query) ||
|
||||
entry.title.toLowerCase().includes(query) ||
|
||||
entry.metadata?.toolName?.toLowerCase().includes(query) ||
|
||||
entry.metadata?.summary?.toLowerCase().includes(query) ||
|
||||
entry.metadata?.filePath?.toLowerCase().includes(query)
|
||||
);
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}, [entries, hiddenTypes, hiddenCategories, searchQuery]);
|
||||
|
||||
const toggleEntry = (id: string) => {
|
||||
setExpandedIds((prev) => {
|
||||
@@ -200,13 +392,45 @@ export function LogViewer({ output, className }: LogViewerProps) {
|
||||
};
|
||||
|
||||
const expandAll = () => {
|
||||
setExpandedIds(new Set(entries.map((e) => e.id)));
|
||||
setExpandedIds(new Set(filteredEntries.map((e) => e.id)));
|
||||
};
|
||||
|
||||
const collapseAll = () => {
|
||||
setExpandedIds(new Set());
|
||||
};
|
||||
|
||||
const toggleTypeFilter = (type: LogEntryType) => {
|
||||
setHiddenTypes((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(type)) {
|
||||
next.delete(type);
|
||||
} else {
|
||||
next.add(type);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleCategoryFilter = (category: ToolCategory) => {
|
||||
setHiddenCategories((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(category)) {
|
||||
next.delete(category);
|
||||
} else {
|
||||
next.add(category);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchQuery("");
|
||||
setHiddenTypes(new Set());
|
||||
setHiddenCategories(new Set());
|
||||
};
|
||||
|
||||
const hasActiveFilters = searchQuery || hiddenTypes.size > 0 || hiddenCategories.size > 0;
|
||||
|
||||
if (entries.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center p-8 text-muted-foreground">
|
||||
@@ -229,28 +453,123 @@ export function LogViewer({ output, className }: LogViewerProps) {
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
// Tool categories to display in stats bar
|
||||
const toolCategoryLabels: { key: ToolCategory; label: string }[] = [
|
||||
{ key: "read", label: "Read" },
|
||||
{ key: "edit", label: "Edit" },
|
||||
{ key: "write", label: "Write" },
|
||||
{ key: "bash", label: "Bash" },
|
||||
{ key: "search", label: "Search" },
|
||||
{ key: "todo", label: "Todo" },
|
||||
{ key: "task", label: "Task" },
|
||||
{ key: "other", label: "Other" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-2", className)}>
|
||||
{/* Header with controls */}
|
||||
<div className={cn("flex flex-col", className)}>
|
||||
{/* Sticky header with search, stats, and filters */}
|
||||
{/* Use -top-4 to compensate for parent's p-4 padding, pt-4 to restore visual spacing */}
|
||||
<div className="sticky -top-4 z-10 bg-zinc-950/95 backdrop-blur-sm pt-4 pb-2 space-y-2 -mx-4 px-4">
|
||||
{/* Search bar */}
|
||||
<div className="flex items-center gap-2 px-1" data-testid="log-search-bar">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search logs..."
|
||||
className="w-full pl-8 pr-8 py-1.5 text-xs bg-zinc-900/50 border border-zinc-700/50 rounded-md text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-zinc-600"
|
||||
data-testid="log-search-input"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => setSearchQuery("")}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300"
|
||||
data-testid="log-search-clear"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded hover:bg-zinc-800/50 transition-colors flex items-center gap-1"
|
||||
data-testid="log-clear-filters"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
Clear Filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tool category stats bar */}
|
||||
{stats.total > 0 && (
|
||||
<div className="flex items-center gap-1 px-1 flex-wrap" data-testid="log-stats-bar">
|
||||
<span className="text-xs text-zinc-500 mr-1">
|
||||
<Wrench className="w-3 h-3 inline mr-1" />
|
||||
{stats.total} tools:
|
||||
</span>
|
||||
{toolCategoryLabels.map(({ key, label }) => {
|
||||
const count = stats.byCategory[key];
|
||||
if (count === 0) return null;
|
||||
const isHidden = hiddenCategories.has(key);
|
||||
const colorClasses = getToolCategoryColor(key);
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => toggleCategoryFilter(key)}
|
||||
className={cn(
|
||||
"text-xs px-2 py-0.5 rounded-full border transition-all flex items-center gap-1",
|
||||
colorClasses,
|
||||
isHidden && "opacity-40 line-through"
|
||||
)}
|
||||
title={isHidden ? `Show ${label} tools` : `Hide ${label} tools`}
|
||||
data-testid={`log-category-filter-${key}`}
|
||||
>
|
||||
{getToolCategoryIcon(key)}
|
||||
<span>{count}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{stats.errors > 0 && (
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-red-500/10 text-red-400 border border-red-500/30 flex items-center gap-1">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
{stats.errors}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Header with type filters and controls */}
|
||||
<div className="flex items-center justify-between px-1" data-testid="log-viewer-header">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<Filter className="w-3 h-3 text-zinc-500 mr-1" />
|
||||
{Object.entries(typeCounts).map(([type, count]) => {
|
||||
const colors = getLogTypeColors(type as LogEntryType);
|
||||
const isHidden = hiddenTypes.has(type as LogEntryType);
|
||||
return (
|
||||
<span
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => toggleTypeFilter(type as LogEntryType)}
|
||||
className={cn(
|
||||
"text-xs px-2 py-0.5 rounded-full",
|
||||
colors.badge
|
||||
"text-xs px-2 py-0.5 rounded-full transition-all",
|
||||
colors.badge,
|
||||
isHidden && "opacity-40 line-through"
|
||||
)}
|
||||
data-testid={`log-type-count-${type}`}
|
||||
title={isHidden ? `Show ${type}` : `Hide ${type}`}
|
||||
data-testid={`log-type-filter-${type}`}
|
||||
>
|
||||
{type}: {count}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-zinc-500">
|
||||
{filteredEntries.length}/{entries.length}
|
||||
</span>
|
||||
<button
|
||||
onClick={expandAll}
|
||||
className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded hover:bg-zinc-800/50 transition-colors"
|
||||
@@ -267,17 +586,32 @@ export function LogViewer({ output, className }: LogViewerProps) {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Log entries */}
|
||||
<div className="space-y-2" data-testid="log-entries-container">
|
||||
{entries.map((entry) => (
|
||||
<LogEntryItem
|
||||
key={entry.id}
|
||||
entry={entry}
|
||||
isExpanded={expandedIds.has(entry.id)}
|
||||
onToggle={() => toggleEntry(entry.id)}
|
||||
/>
|
||||
))}
|
||||
<div className="space-y-2 mt-2" data-testid="log-entries-container">
|
||||
{filteredEntries.length === 0 ? (
|
||||
<div className="text-center py-4 text-zinc-500 text-sm">
|
||||
No entries match your filters.
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="ml-2 text-primary hover:underline"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
filteredEntries.map((entry) => (
|
||||
<LogEntryItem
|
||||
key={entry.id}
|
||||
entry={entry}
|
||||
isExpanded={effectiveExpandedIds.has(entry.id)}
|
||||
onToggle={() => toggleEntry(entry.id)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user