mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-02 08:33:36 +00:00
b59bbd93ba
- Introduced a new TodoListRenderer component to display parsed todo items with status indicators and colors. - Implemented a parseTodoContent function to extract todo items from TodoWrite JSON content. - Enhanced LogEntryItem to conditionally render todo items when a TodoWrite entry is detected, improving log entry clarity and usability. - Updated UI to visually differentiate between todo item statuses, enhancing user experience in task tracking.
747 lines
23 KiB
TypeScript
747 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useMemo, useEffect, useRef } from "react";
|
|
import {
|
|
ChevronDown,
|
|
ChevronRight,
|
|
MessageSquare,
|
|
Wrench,
|
|
Zap,
|
|
AlertCircle,
|
|
CheckCircle2,
|
|
AlertTriangle,
|
|
Bug,
|
|
Info,
|
|
FileOutput,
|
|
Brain,
|
|
Eye,
|
|
Pencil,
|
|
Terminal,
|
|
Search,
|
|
ListTodo,
|
|
Layers,
|
|
X,
|
|
Filter,
|
|
Circle,
|
|
Play,
|
|
Loader2,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
parseLogOutput,
|
|
getLogTypeColors,
|
|
shouldCollapseByDefault,
|
|
type LogEntry,
|
|
type LogEntryType,
|
|
type ToolCategory,
|
|
} from "@/lib/log-parser";
|
|
|
|
interface LogViewerProps {
|
|
output: string;
|
|
className?: string;
|
|
}
|
|
|
|
const getLogIcon = (type: LogEntryType) => {
|
|
switch (type) {
|
|
case "prompt":
|
|
return <MessageSquare className="w-4 h-4" />;
|
|
case "tool_call":
|
|
return <Wrench className="w-4 h-4" />;
|
|
case "tool_result":
|
|
return <FileOutput className="w-4 h-4" />;
|
|
case "phase":
|
|
return <Zap className="w-4 h-4" />;
|
|
case "error":
|
|
return <AlertCircle className="w-4 h-4" />;
|
|
case "success":
|
|
return <CheckCircle2 className="w-4 h-4" />;
|
|
case "warning":
|
|
return <AlertTriangle className="w-4 h-4" />;
|
|
case "thinking":
|
|
return <Brain className="w-4 h-4" />;
|
|
case "debug":
|
|
return <Bug className="w-4 h-4" />;
|
|
default:
|
|
return <Info className="w-4 h-4" />;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 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 for parsed todo items from TodoWrite tool
|
|
*/
|
|
interface TodoItem {
|
|
content: string;
|
|
status: "pending" | "in_progress" | "completed";
|
|
activeForm?: string;
|
|
}
|
|
|
|
/**
|
|
* Parses TodoWrite JSON content and extracts todo items
|
|
*/
|
|
function parseTodoContent(content: string): TodoItem[] | null {
|
|
try {
|
|
// Find the JSON object in the content
|
|
const jsonMatch = content.match(/\{[\s\S]*"todos"[\s\S]*\}/);
|
|
if (!jsonMatch) return null;
|
|
|
|
const parsed = JSON.parse(jsonMatch[0]) as { todos?: TodoItem[] };
|
|
if (!parsed.todos || !Array.isArray(parsed.todos)) return null;
|
|
|
|
return parsed.todos;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Renders a list of todo items with status icons and colors
|
|
*/
|
|
function TodoListRenderer({ todos }: { todos: TodoItem[] }) {
|
|
const getStatusIcon = (status: TodoItem["status"]) => {
|
|
switch (status) {
|
|
case "completed":
|
|
return <CheckCircle2 className="w-4 h-4 text-emerald-400" />;
|
|
case "in_progress":
|
|
return <Loader2 className="w-4 h-4 text-amber-400 animate-spin" />;
|
|
case "pending":
|
|
return <Circle className="w-4 h-4 text-zinc-500" />;
|
|
default:
|
|
return <Circle className="w-4 h-4 text-zinc-500" />;
|
|
}
|
|
};
|
|
|
|
const getStatusColor = (status: TodoItem["status"]) => {
|
|
switch (status) {
|
|
case "completed":
|
|
return "text-emerald-300 line-through opacity-70";
|
|
case "in_progress":
|
|
return "text-amber-300";
|
|
case "pending":
|
|
return "text-zinc-400";
|
|
default:
|
|
return "text-zinc-400";
|
|
}
|
|
};
|
|
|
|
const getStatusBadge = (status: TodoItem["status"]) => {
|
|
switch (status) {
|
|
case "completed":
|
|
return (
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400 ml-auto">
|
|
Done
|
|
</span>
|
|
);
|
|
case "in_progress":
|
|
return (
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/20 text-amber-400 ml-auto">
|
|
In Progress
|
|
</span>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-1">
|
|
{todos.map((todo, index) => (
|
|
<div
|
|
key={index}
|
|
className={cn(
|
|
"flex items-start gap-2 p-2 rounded-md transition-colors",
|
|
todo.status === "in_progress" && "bg-amber-500/5 border border-amber-500/20",
|
|
todo.status === "completed" && "bg-emerald-500/5",
|
|
todo.status === "pending" && "bg-zinc-800/30"
|
|
)}
|
|
>
|
|
<div className="mt-0.5 flex-shrink-0">{getStatusIcon(todo.status)}</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className={cn("text-sm", getStatusColor(todo.status))}>
|
|
{todo.content}
|
|
</p>
|
|
{todo.status === "in_progress" && todo.activeForm && (
|
|
<p className="text-xs text-amber-400/70 mt-0.5 italic">
|
|
{todo.activeForm}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{getStatusBadge(todo.status)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface LogEntryItemProps {
|
|
entry: LogEntry;
|
|
isExpanded: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
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) : "";
|
|
|
|
// Check if this is a TodoWrite entry and parse the todos
|
|
const isTodoWrite = entry.metadata?.toolName === "TodoWrite";
|
|
const parsedTodos = useMemo(() => {
|
|
if (!isTodoWrite) return null;
|
|
return parseTodoContent(entry.content);
|
|
}, [isTodoWrite, entry.content]);
|
|
|
|
// 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(() => {
|
|
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();
|
|
}
|
|
|
|
// For summary entries, remove the <summary> and </summary> tags
|
|
if (entry.title === "Summary") {
|
|
content = content.replace(/^<summary>\s*/i, "");
|
|
content = content.replace(/\s*<\/summary>\s*$/i, "");
|
|
content = content.trim();
|
|
}
|
|
|
|
// Try to find and format JSON blocks
|
|
const jsonRegex = /(\{[\s\S]*?\}|\[[\s\S]*?\])/g;
|
|
let lastIndex = 0;
|
|
const parts: { type: "text" | "json"; content: string }[] = [];
|
|
|
|
let match;
|
|
while ((match = jsonRegex.exec(content)) !== null) {
|
|
// Add text before JSON
|
|
if (match.index > lastIndex) {
|
|
parts.push({
|
|
type: "text",
|
|
content: content.slice(lastIndex, match.index),
|
|
});
|
|
}
|
|
|
|
// Try to parse and format JSON
|
|
try {
|
|
const parsed = JSON.parse(match[1]);
|
|
parts.push({
|
|
type: "json",
|
|
content: JSON.stringify(parsed, null, 2),
|
|
});
|
|
} catch {
|
|
// Not valid JSON, treat as text
|
|
parts.push({ type: "text", content: match[1] });
|
|
}
|
|
|
|
lastIndex = match.index + match[1].length;
|
|
}
|
|
|
|
// Add remaining text
|
|
if (lastIndex < content.length) {
|
|
parts.push({ type: "text", content: content.slice(lastIndex) });
|
|
}
|
|
|
|
return parts.length > 0 ? parts : [{ type: "text" as const, content }];
|
|
}, [entry.content, entry.title, 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",
|
|
bgColor,
|
|
borderColor,
|
|
"hover:brightness-110"
|
|
)}
|
|
data-testid={`log-entry-${entry.type}`}
|
|
>
|
|
<button
|
|
onClick={onToggle}
|
|
className="w-full px-3 py-2 flex items-center gap-2 text-left"
|
|
data-testid={`log-entry-toggle-${entry.id}`}
|
|
>
|
|
{hasContent ? (
|
|
isExpanded ? (
|
|
<ChevronDown className="w-4 h-4 text-zinc-400 flex-shrink-0" />
|
|
) : (
|
|
<ChevronRight className="w-4 h-4 text-zinc-400 flex-shrink-0" />
|
|
)
|
|
) : (
|
|
<span className="w-4 flex-shrink-0" />
|
|
)}
|
|
|
|
<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",
|
|
isToolCall ? toolCategoryColors : colors.badge
|
|
)}
|
|
data-testid="log-entry-badge"
|
|
>
|
|
{entry.title}
|
|
</span>
|
|
|
|
<span className="text-xs text-zinc-400 truncate flex-1 ml-2">
|
|
{collapsedPreview}
|
|
</span>
|
|
</button>
|
|
|
|
{(isExpanded || !hasContent) && (
|
|
<div
|
|
className="px-4 pb-3 pt-1"
|
|
data-testid={`log-entry-content-${entry.id}`}
|
|
>
|
|
{/* Render TodoWrite entries with special formatting */}
|
|
{parsedTodos ? (
|
|
<TodoListRenderer todos={parsedTodos} />
|
|
) : (
|
|
<div className="font-mono text-xs space-y-1">
|
|
{formattedContent.map((part, index) => (
|
|
<div key={index}>
|
|
{part.type === "json" ? (
|
|
<pre className="bg-zinc-900/50 rounded p-2 overflow-x-auto text-xs text-primary">
|
|
{part.content}
|
|
</pre>
|
|
) : (
|
|
<pre
|
|
className={cn(
|
|
"whitespace-pre-wrap break-words",
|
|
textColor
|
|
)}
|
|
>
|
|
{part.content}
|
|
</pre>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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());
|
|
|
|
// 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) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) {
|
|
next.delete(id);
|
|
} else {
|
|
next.add(id);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const expandAll = () => {
|
|
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">
|
|
<div className="text-center">
|
|
<Info className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
|
<p className="text-sm">No log entries yet. Logs will appear here as the process runs.</p>
|
|
{output && output.trim() && (
|
|
<div className="mt-4 p-3 bg-zinc-900/50 rounded text-xs font-mono text-left max-h-40 overflow-auto">
|
|
<pre className="whitespace-pre-wrap">{output}</pre>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Count entries by type
|
|
const typeCounts = entries.reduce((acc, entry) => {
|
|
acc[entry.type] = (acc[entry.type] || 0) + 1;
|
|
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", 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-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 (
|
|
<button
|
|
key={type}
|
|
onClick={() => toggleTypeFilter(type as LogEntryType)}
|
|
className={cn(
|
|
"text-xs px-2 py-0.5 rounded-full transition-all",
|
|
colors.badge,
|
|
isHidden && "opacity-40 line-through"
|
|
)}
|
|
title={isHidden ? `Show ${type}` : `Hide ${type}`}
|
|
data-testid={`log-type-filter-${type}`}
|
|
>
|
|
{type}: {count}
|
|
</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"
|
|
data-testid="log-expand-all"
|
|
>
|
|
Expand All
|
|
</button>
|
|
<button
|
|
onClick={collapseAll}
|
|
className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded hover:bg-zinc-800/50 transition-colors"
|
|
data-testid="log-collapse-all"
|
|
>
|
|
Collapse All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Log entries */}
|
|
<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>
|
|
);
|
|
}
|