Merge pull request #137 from AutoMaker-Org/fix/agent-output

refactor: remove direct file saving from AgentOutputModal and impleme…

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect, useRef } from "react";
 import {
   ChevronDown,
   ChevronRight,
@@ -14,13 +14,26 @@ import {
   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 {
@@ -53,6 +66,160 @@ 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 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;
@@ -63,9 +230,54 @@ 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(() => {
-    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();
+    }
+
+    // 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;
@@ -103,14 +315,20 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
     }
 
     return parts.length > 0 ? parts : [{ type: "text" as const, content }];
-  }, [entry.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",
-        colors.bg,
+        bgColor,
-        colors.border,
+        borderColor,
         "hover:brightness-110"
       )}
       data-testid={`log-entry-${entry.type}`}
@@ -130,14 +348,14 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
           <span className="w-4 flex-shrink-0" />
         )}
 
-        <span className={cn("flex-shrink-0", colors.icon)}>
+        <span className={cn("flex-shrink-0", isToolCall ? toolCategoryColors.split(" ")[0] : colors.icon)}>
-          {getLogIcon(entry.type)}
+          {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 +363,7 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
         </span>
 
         <span className="text-xs text-zinc-400 truncate flex-1 ml-2">
-          {!isExpanded &&
+          {collapsedPreview}
-            entry.content.slice(0, 80) +
-              (entry.content.length > 80 ? "..." : "")}
         </span>
       </button>
 
@@ -156,36 +372,140 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
           className="px-4 pb-3 pt-1"
           data-testid={`log-entry-content-${entry.id}`}
         >
-          <div className="font-mono text-xs space-y-1">
+          {/* Render TodoWrite entries with special formatting */}
-            {formattedContent.map((part, index) => (
+          {parsedTodos ? (
-              <div key={index}>
+            <TodoListRenderer todos={parsedTodos} />
-                {part.type === "json" ? (
+          ) : (
-                  <pre className="bg-zinc-900/50 rounded p-2 overflow-x-auto text-xs text-primary">
+            <div className="font-mono text-xs space-y-1">
-                    {part.content}
+              {formattedContent.map((part, index) => (
-                  </pre>
+                <div key={index}>
-                ) : (
+                  {part.type === "json" ? (
-                  <pre
+                    <pre className="bg-zinc-900/50 rounded p-2 overflow-x-auto text-xs text-primary">
-                    className={cn(
+                      {part.content}
-                      "whitespace-pre-wrap break-words",
+                    </pre>
-                      colors.text
+                  ) : (
-                    )}
+                    <pre
-                  >
+                      className={cn(
-                    {part.content}
+                        "whitespace-pre-wrap break-words",
-                  </pre>
+                        textColor
-                )}
+                      )}
-              </div>
+                    >
-            ))}
+                      {part.content}
-          </div>
+                    </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());
 
-  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 +520,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 +581,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)}>
+    <div className={cn("flex flex-col", className)}>
-      {/* Header with controls */}
+      {/* 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",
+                  "text-xs px-2 py-0.5 rounded-full transition-all",
-                  colors.badge
+                  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 +714,32 @@ export function LogViewer({ output, className }: LogViewerProps) {
           </button>
         </div>
       </div>
+      </div>
 
       {/* Log entries */}
-      <div className="space-y-2" data-testid="log-entries-container">
+      <div className="space-y-2 mt-2" data-testid="log-entries-container">
-        {entries.map((entry) => (
+        {filteredEntries.length === 0 ? (
-          <LogEntryItem
+          <div className="text-center py-4 text-zinc-500 text-sm">
-            key={entry.id}
+            No entries match your filters.
-            entry={entry}
+            {hasActiveFilters && (
-            isExpanded={expandedIds.has(entry.id)}
+              <button
-            onToggle={() => toggleEntry(entry.id)}
+                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>
   );

apps/app/src/components/views/board-view/dialogs/agent-output-modal.tsx

@@ -99,24 +99,6 @@ export function AgentOutputModal({
     loadOutput();
   }, [open, featureId]);
 
-  // Save output to file
-  const saveOutput = async (newContent: string) => {
-    if (!projectPathRef.current) return;
-
-    const api = getElectronAPI();
-    if (!api) return;
-
-    try {
-      // Use features API - agent output is stored in features/{id}/agent-output.md
-      // We need to write it directly since there's no updateAgentOutput method
-      // The context-manager handles this on the backend, but for frontend edits we write directly
-      const outputPath = `${projectPathRef.current}/.automaker/features/${featureId}/agent-output.md`;
-      await api.writeFile(outputPath, newContent);
-    } catch (error) {
-      console.error("Failed to save output:", error);
-    }
-  };
-
   // Listen to auto mode events and update output
   useEffect(() => {
     if (!open) return;
@@ -142,7 +124,7 @@ export function AgentOutputModal({
             ? JSON.stringify(event.input, null, 2)
             : "";
           newContent = `\n🔧 Tool: ${toolName}\n${
-            toolInput ? `Input: ${toolInput}` : ""
+            toolInput ? `Input: ${toolInput}\n` : ""
           }`;
           break;
         case "auto_mode_phase":
@@ -202,11 +184,8 @@ export function AgentOutputModal({
       }
 
       if (newContent) {
-        setOutput((prev) => {
+        // Only update local state - server is the single source of truth for file writes
-          const updated = prev + newContent;
+        setOutput((prev) => prev + newContent);
-          saveOutput(updated);
-          return updated;
-        });
       }
     });
 

apps/app/src/lib/agent-context-parser.ts

@@ -130,9 +130,16 @@ function getCurrentPhase(content: string): "planning" | "action" | "verification
 
 /**
  * Extracts a summary from completed feature context
+ * Looks for content between <summary> and </summary> tags
  */
 function extractSummary(content: string): string | undefined {
-  // Look for summary sections - capture everything including subsections (###)
+  // Look for <summary> tags - capture everything between opening and closing tags
+  const summaryTagMatch = content.match(/<summary>([\s\S]*?)<\/summary>/i);
+  if (summaryTagMatch) {
+    return summaryTagMatch[1].trim();
+  }
+
+  // Fallback: Look for summary sections - capture everything including subsections (###)
   // Stop at same-level ## sections (but not ###), or tool markers, or end
   const summaryMatch = content.match(/## Summary[^\n]*\n([\s\S]*?)(?=\n## [^#]|\n🔧|$)/i);
   if (summaryMatch) {

apps/app/src/lib/log-parser.ts

@@ -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?: {
+  metadata?: LogEntryMetadata;
-    toolName?: string;
-    phase?: string;
-    [key: string]: string | undefined;
-  };
 }
 
 /**
@@ -93,11 +121,16 @@ 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") ||
+    // Summary tags (preferred format from agent)
+    trimmed.startsWith("<summary>") ||
+    // Markdown summary headers (fallback)
+    trimmed.match(/^##\s+(Summary|Feature|Changes|Implementation)/i) ||
+    trimmed.match(/^(I've|I have) (successfully |now )?(completed|finished|implemented)/i)
   ) {
     return "success";
   }
@@ -107,10 +140,11 @@ function detectEntryType(content: string): LogEntryType {
     return "warning";
   }
 
-  // Thinking/Preparation info
+  // Thinking/Preparation info (be specific to avoid matching summary content)
   if (
     trimmed.toLowerCase().includes("ultrathink") ||
-    trimmed.toLowerCase().includes("thinking level") ||
+    trimmed.match(/thinking level[:\s]*(low|medium|high|none|\d)/i) ||
+    trimmed.match(/^thinking level\s*$/i) ||
     trimmed.toLowerCase().includes("estimated cost") ||
     trimmed.toLowerCase().includes("estimated time") ||
     trimmed.toLowerCase().includes("budget tokens") ||
@@ -135,9 +169,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 +195,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 +347,19 @@ function generateTitle(type: LogEntryType, content: string): string {
     }
     case "error":
       return "Error";
-    case "success":
+    case "success": {
+      // Check if it's a summary section
+      if (content.startsWith("<summary>") || content.includes("<summary>")) {
+        return "Summary";
+      }
+      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 +373,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 +421,33 @@ 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;
+
+  // Summary tag accumulation state
+  let inSummaryAccumulation = false;
+
   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 +457,10 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
       }
     }
     currentContent = [];
+    inJsonAccumulation = false;
+    jsonBraceDepth = 0;
+    jsonBracketDepth = 0;
+    inSummaryAccumulation = false;
   };
 
   let lineIndex = 0;
@@ -238,6 +473,35 @@ 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;
+    }
+
+    // If we're in summary accumulation mode, keep accumulating until </summary>
+    if (inSummaryAccumulation) {
+      currentContent.push(line);
+      // Summary is complete when we see closing tag
+      if (trimmedLine.includes("</summary>")) {
+        inSummaryAccumulation = false;
+        // Don't finalize here - let normal flow handle it
+      }
+      lineIndex++;
+      continue;
+    }
+
     // Detect if this line starts a new entry
     const lineType = detectEntryType(trimmedLine);
     const isNewEntry =
@@ -256,8 +520,17 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
       trimmedLine.match(/\[ERROR\]/i) ||
       trimmedLine.match(/\[Status\]/i) ||
       trimmedLine.toLowerCase().includes("ultrathink preparation") ||
-      trimmedLine.toLowerCase().includes("thinking level") ||
+      trimmedLine.match(/thinking level[:\s]*(low|medium|high|none|\d)/i) ||
-      (trimmedLine.startsWith("Input:") && currentEntry?.type === "tool_call");
+      // Summary tags (preferred format from agent)
+      trimmedLine.startsWith("<summary>") ||
+      // Agent summary sections (markdown headers - fallback)
+      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 +550,45 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
         },
       };
       currentContent.push(trimmedLine);
+
+      // If this is a <summary> tag, start summary accumulation mode
+      if (trimmedLine.startsWith("<summary>") && !trimmedLine.includes("</summary>")) {
+        inSummaryAccumulation = true;
+      }
+    } 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;

apps/server/src/services/auto-mode-service.ts

@@ -531,13 +531,15 @@ Address the follow-up instructions above. Review the previous work and make the
       }
 
       // Use fullPrompt (already built above) with model and all images
+      // Pass previousContext so the history is preserved in the output file
       await this.runAgent(
         workDir,
         featureId,
         fullPrompt,
         abortController,
         allImagePaths.length > 0 ? allImagePaths : imagePaths,
-        model
+        model,
+        previousContext || undefined
       );
 
       // Mark as waiting_approval for user review
@@ -1137,7 +1139,22 @@ Implement this feature by:
 4. Add or update tests as needed
 5. Ensure the code follows existing patterns and conventions
 
-When done, summarize what you implemented and any notes for the developer.`;
+When done, wrap your final summary in <summary> tags like this:
+
+<summary>
+## Summary: [Feature Title]
+
+### Changes Implemented
+- [List of changes made]
+
+### Files Modified
+- [List of files]
+
+### Notes for Developer
+- [Any important notes]
+</summary>
+
+This helps parse your summary correctly in the output logs.`;
 
     return prompt;
   }
@@ -1148,7 +1165,8 @@ When done, summarize what you implemented and any notes for the developer.`;
     prompt: string,
     abortController: AbortController,
     imagePaths?: string[],
-    model?: string
+    model?: string,
+    previousContent?: string
   ): Promise<void> {
     // CI/CD Mock Mode: Return early with mock response when AUTOMAKER_MOCK_AGENT is set
     // This prevents actual API calls during automated testing
@@ -1250,7 +1268,10 @@ This mock response was generated because AUTOMAKER_MOCK_AGENT=true was set.
 
     // Execute via provider
     const stream = provider.executeQuery(options);
-    let responseText = "";
+    // Initialize with previous content if this is a follow-up, with a separator
+    let responseText = previousContent
+      ? `${previousContent}\n\n---\n\n## Follow-up Session\n\n`
+      : "";
     // Agent output goes to .automaker directory
     // Note: We use the original projectPath here (from config), not workDir
     // because workDir might be a worktree path
@@ -1258,10 +1279,43 @@ This mock response was generated because AUTOMAKER_MOCK_AGENT=true was set.
     const featureDirForOutput = getFeatureDir(configProjectPath, featureId);
     const outputPath = path.join(featureDirForOutput, "agent-output.md");
 
+    // Incremental file writing state
+    let writeTimeout: ReturnType<typeof setTimeout> | null = null;
+    const WRITE_DEBOUNCE_MS = 500; // Batch writes every 500ms
+
+    // Helper to write current responseText to file
+    const writeToFile = async (): Promise<void> => {
+      try {
+        await fs.mkdir(path.dirname(outputPath), { recursive: true });
+        await fs.writeFile(outputPath, responseText);
+      } catch (error) {
+        // Log but don't crash - file write errors shouldn't stop execution
+        console.error(`[AutoMode] Failed to write agent output for ${featureId}:`, error);
+      }
+    };
+
+    // Debounced write - schedules a write after WRITE_DEBOUNCE_MS
+    const scheduleWrite = (): void => {
+      if (writeTimeout) {
+        clearTimeout(writeTimeout);
+      }
+      writeTimeout = setTimeout(() => {
+        writeToFile();
+      }, WRITE_DEBOUNCE_MS);
+    };
+
     for await (const msg of stream) {
       if (msg.type === "assistant" && msg.message?.content) {
         for (const block of msg.message.content) {
           if (block.type === "text") {
+            // Add separator before new text if we already have content and it doesn't end with newlines
+            if (responseText.length > 0 && !responseText.endsWith('\n\n')) {
+              if (responseText.endsWith('\n')) {
+                responseText += '\n';
+              } else {
+                responseText += '\n\n';
+              }
+            }
             responseText += block.text || "";
 
             // Check for authentication errors in the response
@@ -1277,33 +1331,49 @@ This mock response was generated because AUTOMAKER_MOCK_AGENT=true was set.
               );
             }
 
+            // Schedule incremental file write (debounced)
+            scheduleWrite();
+
             this.emitAutoModeEvent("auto_mode_progress", {
               featureId,
               content: block.text,
             });
           } else if (block.type === "tool_use") {
+            // Emit event for real-time UI
             this.emitAutoModeEvent("auto_mode_tool", {
               featureId,
               tool: block.name,
               input: block.input,
             });
+
+            // Also add to file output for persistence
+            if (responseText.length > 0 && !responseText.endsWith('\n')) {
+              responseText += '\n';
+            }
+            responseText += `\n🔧 Tool: ${block.name}\n`;
+            if (block.input) {
+              responseText += `Input: ${JSON.stringify(block.input, null, 2)}\n`;
+            }
+            scheduleWrite();
           }
         }
       } else if (msg.type === "error") {
         // Handle error messages
         throw new Error(msg.error || "Unknown error");
       } else if (msg.type === "result" && msg.subtype === "success") {
-        responseText = msg.result || responseText;
+        // Don't replace responseText - the accumulated content is the full history
+        // The msg.result is just a summary which would lose all tool use details
+        // Just ensure final write happens
+        scheduleWrite();
       }
     }
 
-    // Save agent output
+    // Clear any pending timeout and do a final write to ensure all content is saved
-    try {
+    if (writeTimeout) {
-      await fs.mkdir(path.dirname(outputPath), { recursive: true });
+      clearTimeout(writeTimeout);
-      await fs.writeFile(outputPath, responseText);
-    } catch {
-      // May fail if directory doesn't exist
     }
+    // Final write - ensure all accumulated content is saved
+    await writeToFile();
   }
 
   private async executeFeatureWithContext(