mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-02 08:33:36 +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
@@ -15,6 +15,38 @@ export type LogEntryType =
|
||||
| "warning"
|
||||
| "thinking";
|
||||
|
||||
export type ToolCategory = 'read' | 'edit' | 'write' | 'bash' | 'search' | 'todo' | 'task' | 'other';
|
||||
|
||||
const TOOL_CATEGORIES: Record<string, ToolCategory> = {
|
||||
'Read': 'read',
|
||||
'Edit': 'edit',
|
||||
'Write': 'write',
|
||||
'Bash': 'bash',
|
||||
'Grep': 'search',
|
||||
'Glob': 'search',
|
||||
'WebSearch': 'search',
|
||||
'WebFetch': 'read',
|
||||
'TodoWrite': 'todo',
|
||||
'Task': 'task',
|
||||
'NotebookEdit': 'edit',
|
||||
'KillShell': 'bash',
|
||||
};
|
||||
|
||||
/**
|
||||
* Categorizes a tool name into a predefined category
|
||||
*/
|
||||
export function categorizeToolName(toolName: string): ToolCategory {
|
||||
return TOOL_CATEGORIES[toolName] || 'other';
|
||||
}
|
||||
|
||||
export interface LogEntryMetadata {
|
||||
toolName?: string;
|
||||
toolCategory?: ToolCategory;
|
||||
filePath?: string;
|
||||
summary?: string;
|
||||
phase?: string;
|
||||
}
|
||||
|
||||
export interface LogEntry {
|
||||
id: string;
|
||||
type: LogEntryType;
|
||||
@@ -22,11 +54,7 @@ export interface LogEntry {
|
||||
content: string;
|
||||
timestamp?: string;
|
||||
collapsed?: boolean;
|
||||
metadata?: {
|
||||
toolName?: string;
|
||||
phase?: string;
|
||||
[key: string]: string | undefined;
|
||||
};
|
||||
metadata?: LogEntryMetadata;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -93,11 +121,14 @@ function detectEntryType(content: string): LogEntryType {
|
||||
return "error";
|
||||
}
|
||||
|
||||
// Success messages
|
||||
// Success messages and summary sections
|
||||
if (
|
||||
trimmed.startsWith("✅") ||
|
||||
trimmed.toLowerCase().includes("success") ||
|
||||
trimmed.toLowerCase().includes("completed")
|
||||
trimmed.toLowerCase().includes("completed") ||
|
||||
// Markdown summary headers
|
||||
trimmed.match(/^##\s+(Summary|Feature|Changes|Implementation)/i) ||
|
||||
trimmed.match(/^(I've|I have) (successfully |now )?(completed|finished|implemented)/i)
|
||||
) {
|
||||
return "success";
|
||||
}
|
||||
@@ -135,9 +166,11 @@ function detectEntryType(content: string): LogEntryType {
|
||||
|
||||
/**
|
||||
* Extracts tool name from a tool call entry
|
||||
* Matches both "🔧 Tool: Name" and "Tool: Name" formats
|
||||
*/
|
||||
function extractToolName(content: string): string | undefined {
|
||||
const match = content.match(/🔧\s*Tool:\s*(\S+)/);
|
||||
// Try emoji format first, then plain format
|
||||
const match = content.match(/(?:🔧\s*)?Tool:\s*(\S+)/);
|
||||
return match?.[1];
|
||||
}
|
||||
|
||||
@@ -159,6 +192,134 @@ function extractPhase(content: string): string | undefined {
|
||||
return match?.[1]?.toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts file path from tool input JSON
|
||||
*/
|
||||
function extractFilePath(content: string): string | undefined {
|
||||
try {
|
||||
const inputMatch = content.match(/Input:\s*([\s\S]*)/);
|
||||
if (!inputMatch) return undefined;
|
||||
|
||||
const jsonStr = inputMatch[1].trim();
|
||||
const parsed = JSON.parse(jsonStr) as Record<string, unknown>;
|
||||
|
||||
if (typeof parsed.file_path === 'string') return parsed.file_path;
|
||||
if (typeof parsed.path === 'string') return parsed.path;
|
||||
if (typeof parsed.notebook_path === 'string') return parsed.notebook_path;
|
||||
|
||||
return undefined;
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a smart summary for tool calls based on the tool name and input
|
||||
*/
|
||||
export function generateToolSummary(toolName: string, content: string): string | undefined {
|
||||
try {
|
||||
// Try to parse JSON input
|
||||
const inputMatch = content.match(/Input:\s*([\s\S]*)/);
|
||||
if (!inputMatch) return undefined;
|
||||
|
||||
const jsonStr = inputMatch[1].trim();
|
||||
const parsed = JSON.parse(jsonStr) as Record<string, unknown>;
|
||||
|
||||
switch (toolName) {
|
||||
case 'Read': {
|
||||
const filePath = parsed.file_path as string | undefined;
|
||||
return `Reading ${filePath?.split('/').pop() || 'file'}`;
|
||||
}
|
||||
case 'Edit': {
|
||||
const filePath = parsed.file_path as string | undefined;
|
||||
const fileName = filePath?.split('/').pop() || 'file';
|
||||
return `Editing ${fileName}`;
|
||||
}
|
||||
case 'Write': {
|
||||
const filePath = parsed.file_path as string | undefined;
|
||||
return `Writing ${filePath?.split('/').pop() || 'file'}`;
|
||||
}
|
||||
case 'Bash': {
|
||||
const command = parsed.command as string | undefined;
|
||||
const cmd = command?.slice(0, 50) || '';
|
||||
return `Running: ${cmd}${(command?.length || 0) > 50 ? '...' : ''}`;
|
||||
}
|
||||
case 'Grep': {
|
||||
const pattern = parsed.pattern as string | undefined;
|
||||
return `Searching for "${pattern?.slice(0, 30) || ''}"`;
|
||||
}
|
||||
case 'Glob': {
|
||||
const pattern = parsed.pattern as string | undefined;
|
||||
return `Finding files: ${pattern || ''}`;
|
||||
}
|
||||
case 'TodoWrite': {
|
||||
const todos = parsed.todos as unknown[] | undefined;
|
||||
const todoCount = todos?.length || 0;
|
||||
return `${todoCount} todo item${todoCount !== 1 ? 's' : ''}`;
|
||||
}
|
||||
case 'Task': {
|
||||
const subagentType = parsed.subagent_type as string | undefined;
|
||||
const description = parsed.description as string | undefined;
|
||||
return `${subagentType || 'Agent'}: ${description || ''}`;
|
||||
}
|
||||
case 'WebSearch': {
|
||||
const query = parsed.query as string | undefined;
|
||||
return `Searching: "${query?.slice(0, 40) || ''}"`;
|
||||
}
|
||||
case 'WebFetch': {
|
||||
const url = parsed.url as string | undefined;
|
||||
return `Fetching: ${url?.slice(0, 40) || ''}`;
|
||||
}
|
||||
case 'NotebookEdit': {
|
||||
const notebookPath = parsed.notebook_path as string | undefined;
|
||||
return `Editing notebook: ${notebookPath?.split('/').pop() || 'notebook'}`;
|
||||
}
|
||||
case 'KillShell': {
|
||||
return 'Terminating shell session';
|
||||
}
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines if an entry should be collapsed by default
|
||||
*/
|
||||
export function shouldCollapseByDefault(entry: LogEntry): boolean {
|
||||
// Collapse if content is long
|
||||
if (entry.content.length > 200) return true;
|
||||
|
||||
// Collapse if contains multi-line JSON (> 5 lines)
|
||||
const lineCount = entry.content.split('\n').length;
|
||||
if (lineCount > 5 && (entry.content.includes('{') || entry.content.includes('['))) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Collapse TodoWrite with multiple items
|
||||
if (entry.metadata?.toolName === 'TodoWrite') {
|
||||
try {
|
||||
const inputMatch = entry.content.match(/Input:\s*([\s\S]*)/);
|
||||
if (inputMatch) {
|
||||
const parsed = JSON.parse(inputMatch[1].trim()) as Record<string, unknown>;
|
||||
const todos = parsed.todos as unknown[] | undefined;
|
||||
if (todos && todos.length > 1) return true;
|
||||
}
|
||||
} catch {
|
||||
// Ignore parse errors
|
||||
}
|
||||
}
|
||||
|
||||
// Collapse Edit with code blocks
|
||||
if (entry.metadata?.toolName === 'Edit' && entry.content.includes('old_string')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a title for a log entry
|
||||
*/
|
||||
@@ -183,8 +344,16 @@ function generateTitle(type: LogEntryType, content: string): string {
|
||||
}
|
||||
case "error":
|
||||
return "Error";
|
||||
case "success":
|
||||
case "success": {
|
||||
// Check if it's a summary section
|
||||
if (content.match(/^##\s+(Summary|Feature|Changes|Implementation)/i)) {
|
||||
return "Summary";
|
||||
}
|
||||
if (content.match(/^All tasks completed/i) || content.match(/^(I've|I have) (successfully |now )?(completed|finished|implemented)/i)) {
|
||||
return "Summary";
|
||||
}
|
||||
return "Success";
|
||||
}
|
||||
case "warning":
|
||||
return "Warning";
|
||||
case "thinking":
|
||||
@@ -198,6 +367,39 @@ function generateTitle(type: LogEntryType, content: string): string {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tracks bracket depth for JSON accumulation
|
||||
*/
|
||||
function calculateBracketDepth(line: string): { braceChange: number; bracketChange: number } {
|
||||
let braceChange = 0;
|
||||
let bracketChange = 0;
|
||||
let inString = false;
|
||||
let escapeNext = false;
|
||||
|
||||
for (const char of line) {
|
||||
if (escapeNext) {
|
||||
escapeNext = false;
|
||||
continue;
|
||||
}
|
||||
if (char === '\\') {
|
||||
escapeNext = true;
|
||||
continue;
|
||||
}
|
||||
if (char === '"') {
|
||||
inString = !inString;
|
||||
continue;
|
||||
}
|
||||
if (inString) continue;
|
||||
|
||||
if (char === '{') braceChange++;
|
||||
else if (char === '}') braceChange--;
|
||||
else if (char === '[') bracketChange++;
|
||||
else if (char === ']') bracketChange--;
|
||||
}
|
||||
|
||||
return { braceChange, bracketChange };
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses raw log output into structured entries
|
||||
*/
|
||||
@@ -213,10 +415,30 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
|
||||
let currentContent: string[] = [];
|
||||
let entryStartLine = 0; // Track the starting line for deterministic ID generation
|
||||
|
||||
// JSON accumulation state
|
||||
let inJsonAccumulation = false;
|
||||
let jsonBraceDepth = 0;
|
||||
let jsonBracketDepth = 0;
|
||||
|
||||
const finalizeEntry = () => {
|
||||
if (currentEntry && currentContent.length > 0) {
|
||||
currentEntry.content = currentContent.join("\n").trim();
|
||||
if (currentEntry.content) {
|
||||
// Populate enhanced metadata for tool calls
|
||||
const toolName = currentEntry.metadata?.toolName;
|
||||
if (toolName && currentEntry.type === 'tool_call') {
|
||||
const toolCategory = categorizeToolName(toolName);
|
||||
const filePath = extractFilePath(currentEntry.content);
|
||||
const summary = generateToolSummary(toolName, currentEntry.content);
|
||||
|
||||
currentEntry.metadata = {
|
||||
...currentEntry.metadata,
|
||||
toolCategory,
|
||||
filePath,
|
||||
summary,
|
||||
};
|
||||
}
|
||||
|
||||
// Generate deterministic ID based on content and position
|
||||
const entryWithId: LogEntry = {
|
||||
...currentEntry as Omit<LogEntry, 'id'>,
|
||||
@@ -226,6 +448,9 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
|
||||
}
|
||||
}
|
||||
currentContent = [];
|
||||
inJsonAccumulation = false;
|
||||
jsonBraceDepth = 0;
|
||||
jsonBracketDepth = 0;
|
||||
};
|
||||
|
||||
let lineIndex = 0;
|
||||
@@ -238,6 +463,23 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
|
||||
continue;
|
||||
}
|
||||
|
||||
// If we're in JSON accumulation mode, keep accumulating until depth returns to 0
|
||||
if (inJsonAccumulation) {
|
||||
currentContent.push(line);
|
||||
const { braceChange, bracketChange } = calculateBracketDepth(trimmedLine);
|
||||
jsonBraceDepth += braceChange;
|
||||
jsonBracketDepth += bracketChange;
|
||||
|
||||
// JSON is complete when depth returns to 0
|
||||
if (jsonBraceDepth <= 0 && jsonBracketDepth <= 0) {
|
||||
inJsonAccumulation = false;
|
||||
jsonBraceDepth = 0;
|
||||
jsonBracketDepth = 0;
|
||||
}
|
||||
lineIndex++;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Detect if this line starts a new entry
|
||||
const lineType = detectEntryType(trimmedLine);
|
||||
const isNewEntry =
|
||||
@@ -257,7 +499,14 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
|
||||
trimmedLine.match(/\[Status\]/i) ||
|
||||
trimmedLine.toLowerCase().includes("ultrathink preparation") ||
|
||||
trimmedLine.toLowerCase().includes("thinking level") ||
|
||||
(trimmedLine.startsWith("Input:") && currentEntry?.type === "tool_call");
|
||||
// Agent summary sections (markdown headers after tool calls)
|
||||
trimmedLine.match(/^##\s+(Summary|Feature|Changes|Implementation)/i) ||
|
||||
// Summary introduction lines
|
||||
trimmedLine.match(/^All tasks completed/i) ||
|
||||
trimmedLine.match(/^(I've|I have) (successfully |now )?(completed|finished|implemented)/i);
|
||||
|
||||
// Check if this is an Input: line that should trigger JSON accumulation
|
||||
const isInputLine = trimmedLine.startsWith("Input:") && currentEntry?.type === "tool_call";
|
||||
|
||||
if (isNewEntry) {
|
||||
// Finalize previous entry
|
||||
@@ -277,9 +526,40 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
|
||||
},
|
||||
};
|
||||
currentContent.push(trimmedLine);
|
||||
} else if (isInputLine && currentEntry) {
|
||||
// Start JSON accumulation mode
|
||||
currentContent.push(trimmedLine);
|
||||
|
||||
// Check if there's JSON on the same line after "Input:"
|
||||
const inputContent = trimmedLine.replace(/^Input:\s*/, '');
|
||||
if (inputContent) {
|
||||
const { braceChange, bracketChange } = calculateBracketDepth(inputContent);
|
||||
jsonBraceDepth = braceChange;
|
||||
jsonBracketDepth = bracketChange;
|
||||
|
||||
// Only enter accumulation mode if JSON is incomplete
|
||||
if (jsonBraceDepth > 0 || jsonBracketDepth > 0) {
|
||||
inJsonAccumulation = true;
|
||||
}
|
||||
} else {
|
||||
// Input: line with JSON starting on next line
|
||||
inJsonAccumulation = true;
|
||||
}
|
||||
} else if (currentEntry) {
|
||||
// Continue current entry
|
||||
currentContent.push(line);
|
||||
|
||||
// Check if this line starts a JSON block
|
||||
if (trimmedLine.startsWith('{') || trimmedLine.startsWith('[')) {
|
||||
const { braceChange, bracketChange } = calculateBracketDepth(trimmedLine);
|
||||
if (braceChange > 0 || bracketChange > 0) {
|
||||
jsonBraceDepth = braceChange;
|
||||
jsonBracketDepth = bracketChange;
|
||||
if (jsonBraceDepth > 0 || jsonBracketDepth > 0) {
|
||||
inJsonAccumulation = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Track starting line for deterministic ID
|
||||
entryStartLine = lineIndex;
|
||||
|
||||
Reference in New Issue
Block a user