feat: improve agent output modal with parsed log viewer

Add a parsed log viewer to the agent output modal that groups and colors
log entries by type (tool calls, phases, errors, success messages, etc.)
similar to Coolify logs. Includes:

- New log-parser.ts utility for parsing agent output into structured entries
- New LogViewer component with collapsible entries and colored badges
- Toggle between Parsed and Raw view modes in the modal header
- Type-specific colors (amber for tools, cyan for phases, red for errors)
- Expand/Collapse all buttons for better navigation
- JSON content detection and formatting within entries

Generated with Claude Code

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/src/components/ui/log-viewer.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  MessageSquare,
+  Wrench,
+  Zap,
+  AlertCircle,
+  CheckCircle2,
+  AlertTriangle,
+  Bug,
+  Info,
+  FileOutput,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  parseLogOutput,
+  getLogTypeColors,
+  type LogEntry,
+  type LogEntryType,
+} 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 "debug":
+      return <Bug className="w-4 h-4" />;
+    default:
+      return <Info className="w-4 h-4" />;
+  }
+};
+
+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;
+
+  // Format content - detect and highlight JSON
+  const formattedContent = useMemo(() => {
+    const content = entry.content;
+
+    // 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]);
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border-l-4 transition-all duration-200",
+        colors.bg,
+        colors.border,
+        "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", colors.icon)}>
+          {getLogIcon(entry.type)}
+        </span>
+
+        <span
+          className={cn(
+            "text-xs font-medium px-2 py-0.5 rounded-full flex-shrink-0",
+            colors.badge
+          )}
+          data-testid="log-entry-badge"
+        >
+          {entry.title}
+        </span>
+
+        <span className="text-sm text-zinc-400 truncate flex-1 ml-2">
+          {!isExpanded &&
+            entry.content.slice(0, 80) +
+              (entry.content.length > 80 ? "..." : "")}
+        </span>
+      </button>
+
+      {(isExpanded || !hasContent) && (
+        <div
+          className="px-4 pb-3 pt-1"
+          data-testid={`log-entry-content-${entry.id}`}
+        >
+          <div className="font-mono text-sm 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-purple-300">
+                    {part.content}
+                  </pre>
+                ) : (
+                  <pre
+                    className={cn(
+                      "whitespace-pre-wrap break-words",
+                      colors.text
+                    )}
+                  >
+                    {part.content}
+                  </pre>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function LogViewer({ output, className }: LogViewerProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+
+  const entries = useMemo(() => parseLogOutput(output), [output]);
+
+  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(entries.map((e) => e.id)));
+  };
+
+  const collapseAll = () => {
+    setExpandedIds(new Set());
+  };
+
+  if (entries.length === 0) {
+    return null;
+  }
+
+  // Count entries by type
+  const typeCounts = entries.reduce((acc, entry) => {
+    acc[entry.type] = (acc[entry.type] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {/* Header with controls */}
+      <div className="flex items-center justify-between px-1" data-testid="log-viewer-header">
+        <div className="flex items-center gap-2 flex-wrap">
+          {Object.entries(typeCounts).map(([type, count]) => {
+            const colors = getLogTypeColors(type as LogEntryType);
+            return (
+              <span
+                key={type}
+                className={cn(
+                  "text-xs px-2 py-0.5 rounded-full",
+                  colors.badge
+                )}
+                data-testid={`log-type-count-${type}`}
+              >
+                {type}: {count}
+              </span>
+            );
+          })}
+        </div>
+        <div className="flex items-center gap-1">
+          <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>
+
+      {/* 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>
+    </div>
+  );
+}

app/src/components/views/agent-output-modal.tsx

@@ -8,8 +8,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Loader2 } from "lucide-react";
+import { Loader2, List, FileText } from "lucide-react";
 import { getElectronAPI } from "@/lib/electron";
+import { LogViewer } from "@/components/ui/log-viewer";
 
 interface AgentOutputModalProps {
   open: boolean;
@@ -20,6 +21,8 @@ interface AgentOutputModalProps {
   onNumberKeyPress?: (key: string) => void;
 }
 
+type ViewMode = "parsed" | "raw";
+
 export function AgentOutputModal({
   open,
   onClose,
@@ -29,6 +32,7 @@ export function AgentOutputModal({
 }: AgentOutputModalProps) {
   const [output, setOutput] = useState<string>("");
   const [isLoading, setIsLoading] = useState(true);
+  const [viewMode, setViewMode] = useState<ViewMode>("parsed");
   const scrollRef = useRef<HTMLDivElement>(null);
   const autoScrollRef = useRef(true);
   const projectPathRef = useRef<string>("");
@@ -202,10 +206,38 @@ export function AgentOutputModal({
         data-testid="agent-output-modal"
       >
         <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Loader2 className="w-5 h-5 text-purple-500 animate-spin" />
-            Agent Output
-          </DialogTitle>
+          <div className="flex items-center justify-between">
+            <DialogTitle className="flex items-center gap-2">
+              <Loader2 className="w-5 h-5 text-purple-500 animate-spin" />
+              Agent Output
+            </DialogTitle>
+            <div className="flex items-center gap-1 bg-zinc-900/50 rounded-lg p-1">
+              <button
+                onClick={() => setViewMode("parsed")}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                  viewMode === "parsed"
+                    ? "bg-purple-500/20 text-purple-300 shadow-sm"
+                    : "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50"
+                }`}
+                data-testid="view-mode-parsed"
+              >
+                <List className="w-3.5 h-3.5" />
+                Parsed
+              </button>
+              <button
+                onClick={() => setViewMode("raw")}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                  viewMode === "raw"
+                    ? "bg-purple-500/20 text-purple-300 shadow-sm"
+                    : "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50"
+                }`}
+                data-testid="view-mode-raw"
+              >
+                <FileText className="w-3.5 h-3.5" />
+                Raw
+              </button>
+            </div>
+          </div>
           <DialogDescription className="mt-1">
             {featureDescription}
           </DialogDescription>
@@ -225,6 +257,8 @@ export function AgentOutputModal({
             <div className="flex items-center justify-center h-full text-muted-foreground">
               No output yet. The agent will stream output here as it works.
             </div>
+          ) : viewMode === "parsed" ? (
+            <LogViewer output={output} />
           ) : (
             <div className="whitespace-pre-wrap break-words text-zinc-300">
               {output}