Merge branch 'main' of github.com:webdevcody/automaker

app/src/components/ui/markdown.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import { cn } from "@/lib/utils";
+
+interface MarkdownProps {
+  children: string;
+  className?: string;
+}
+
+/**
+ * Reusable Markdown component for rendering markdown content
+ * Styled for dark mode with proper typography
+ */
+export function Markdown({ children, className }: MarkdownProps) {
+  return (
+    <div
+      className={cn(
+        "prose prose-sm prose-invert max-w-none",
+        // Headings
+        "[&_h1]:text-xl [&_h1]:text-zinc-200 [&_h1]:font-semibold [&_h1]:mt-4 [&_h1]:mb-2",
+        "[&_h2]:text-lg [&_h2]:text-zinc-200 [&_h2]:font-semibold [&_h2]:mt-4 [&_h2]:mb-2",
+        "[&_h3]:text-base [&_h3]:text-zinc-200 [&_h3]:font-semibold [&_h3]:mt-3 [&_h3]:mb-2",
+        "[&_h4]:text-sm [&_h4]:text-zinc-200 [&_h4]:font-semibold [&_h4]:mt-2 [&_h4]:mb-1",
+        // Paragraphs
+        "[&_p]:text-zinc-300 [&_p]:leading-relaxed [&_p]:my-2",
+        // Lists
+        "[&_ul]:my-2 [&_ul]:pl-4 [&_ol]:my-2 [&_ol]:pl-4",
+        "[&_li]:text-zinc-300 [&_li]:my-0.5",
+        // Code
+        "[&_code]:text-cyan-400 [&_code]:bg-zinc-800/50 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-sm",
+        "[&_pre]:bg-zinc-900/80 [&_pre]:border [&_pre]:border-white/10 [&_pre]:rounded-lg [&_pre]:my-2 [&_pre]:p-3 [&_pre]:overflow-x-auto",
+        "[&_pre_code]:bg-transparent [&_pre_code]:p-0",
+        // Strong/Bold
+        "[&_strong]:text-zinc-200 [&_strong]:font-semibold",
+        // Links
+        "[&_a]:text-blue-400 [&_a]:no-underline hover:[&_a]:underline",
+        // Blockquotes
+        "[&_blockquote]:border-l-2 [&_blockquote]:border-zinc-600 [&_blockquote]:pl-4 [&_blockquote]:text-zinc-400 [&_blockquote]:italic [&_blockquote]:my-2",
+        // Horizontal rules
+        "[&_hr]:border-zinc-700 [&_hr]:my-4",
+        className
+      )}
+    >
+      <ReactMarkdown>{children}</ReactMarkdown>
+    </div>
+  );
+}

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

@@ -205,7 +205,7 @@ export function AgentOutputModal({
         className="max-w-4xl max-h-[80vh] flex flex-col"
         data-testid="agent-output-modal"
       >
-        <DialogHeader>
+        <DialogHeader className="flex-shrink-0">
           <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" />
@@ -238,7 +238,10 @@ export function AgentOutputModal({
               </button>
             </div>
           </div>
-          <DialogDescription className="mt-1">
+          <DialogDescription
+            className="mt-1 max-h-24 overflow-y-auto break-words"
+            data-testid="agent-output-description"
+          >
             {featureDescription}
           </DialogDescription>
         </DialogHeader>
@@ -266,7 +269,7 @@ export function AgentOutputModal({
           )}
         </div>
 
-        <div className="text-xs text-muted-foreground text-center">
+        <div className="text-xs text-muted-foreground text-center flex-shrink-0">
           {autoScrollRef.current
             ? "Auto-scrolling enabled"
             : "Scroll to bottom to enable auto-scroll"}

app/src/components/views/board-view.tsx

@@ -65,6 +65,8 @@ import {
   FastForward,
   FlaskConical,
   CheckCircle2,
+  MessageSquare,
+  GitCommit,
 } from "lucide-react";
 import { toast } from "sonner";
 import { Slider } from "@/components/ui/slider";
@@ -81,6 +83,7 @@ type ColumnId = Feature["status"];
 const COLUMNS: { id: ColumnId; title: string; color: string }[] = [
   { id: "backlog", title: "Backlog", color: "bg-zinc-500" },
   { id: "in_progress", title: "In Progress", color: "bg-yellow-500" },
+  { id: "waiting_approval", title: "Waiting Approval", color: "bg-orange-500" },
   { id: "verified", title: "Verified", color: "bg-green-500" },
 ];
 
@@ -119,6 +122,12 @@ export function BoardView() {
   const [showDeleteAllVerifiedDialog, setShowDeleteAllVerifiedDialog] =
     useState(false);
   const [persistedCategories, setPersistedCategories] = useState<string[]>([]);
+  const [showFollowUpDialog, setShowFollowUpDialog] = useState(false);
+  const [followUpFeature, setFollowUpFeature] = useState<Feature | null>(null);
+  const [followUpPrompt, setFollowUpPrompt] = useState("");
+  const [followUpImagePaths, setFollowUpImagePaths] = useState<
+    DescriptionImagePath[]
+  >([]);
 
   // Make current project available globally for modal
   useEffect(() => {
@@ -428,6 +437,7 @@ export function BoardView() {
         startedAt: f.startedAt,
         imagePaths: f.imagePaths,
         skipTests: f.skipTests,
+        summary: f.summary,
       }));
       await api.writeFile(
         `${currentProject.path}/.automaker/feature_list.json`,
@@ -776,6 +786,142 @@ export function BoardView() {
     });
   };
 
+  // Open follow-up dialog for waiting_approval features
+  const handleOpenFollowUp = (feature: Feature) => {
+    console.log("[Board] Opening follow-up dialog for feature:", {
+      id: feature.id,
+      description: feature.description,
+    });
+    setFollowUpFeature(feature);
+    setFollowUpPrompt("");
+    setFollowUpImagePaths([]);
+    setShowFollowUpDialog(true);
+  };
+
+  // Handle sending follow-up prompt
+  const handleSendFollowUp = async () => {
+    if (!currentProject || !followUpFeature || !followUpPrompt.trim()) return;
+
+    // Save values before clearing state
+    const featureId = followUpFeature.id;
+    const featureDescription = followUpFeature.description;
+    const prompt = followUpPrompt;
+    const imagePaths = followUpImagePaths.map((img) => img.path);
+
+    console.log("[Board] Sending follow-up prompt for feature:", {
+      id: featureId,
+      prompt: prompt,
+      imagePaths: imagePaths,
+    });
+
+    const api = getElectronAPI();
+    if (!api?.autoMode?.followUpFeature) {
+      console.error("Follow-up feature API not available");
+      toast.error("Follow-up not available", {
+        description: "This feature is not available in the current version.",
+      });
+      return;
+    }
+
+    // Move feature back to in_progress before sending follow-up
+    updateFeature(featureId, {
+      status: "in_progress",
+      startedAt: new Date().toISOString(),
+    });
+
+    // Reset follow-up state immediately (close dialog, clear form)
+    setShowFollowUpDialog(false);
+    setFollowUpFeature(null);
+    setFollowUpPrompt("");
+    setFollowUpImagePaths([]);
+
+    // Show success toast immediately
+    toast.success("Follow-up started", {
+      description: `Continuing work on: ${featureDescription.slice(0, 50)}${
+        featureDescription.length > 50 ? "..." : ""
+      }`,
+    });
+
+    // Call the API in the background (don't await - let it run async)
+    api.autoMode
+      .followUpFeature(currentProject.path, featureId, prompt, imagePaths)
+      .catch((error) => {
+        console.error("[Board] Error sending follow-up:", error);
+        toast.error("Failed to send follow-up", {
+          description:
+            error instanceof Error ? error.message : "An error occurred",
+        });
+        // Reload features to revert status if there was an error
+        loadFeatures();
+      });
+  };
+
+  // Handle commit-only for waiting_approval features (marks as verified and commits)
+  const handleCommitFeature = async (feature: Feature) => {
+    if (!currentProject) return;
+
+    console.log("[Board] Committing feature:", {
+      id: feature.id,
+      description: feature.description,
+    });
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.autoMode?.commitFeature) {
+        console.error("Commit feature API not available");
+        toast.error("Commit not available", {
+          description: "This feature is not available in the current version.",
+        });
+        return;
+      }
+
+      // Call the API to commit this feature
+      const result = await api.autoMode.commitFeature(
+        currentProject.path,
+        feature.id
+      );
+
+      if (result.success) {
+        console.log("[Board] Feature committed successfully");
+        // Move to verified status
+        moveFeature(feature.id, "verified");
+        toast.success("Feature committed", {
+          description: `Committed and verified: ${feature.description.slice(
+            0,
+            50
+          )}${feature.description.length > 50 ? "..." : ""}`,
+        });
+      } else {
+        console.error("[Board] Failed to commit feature:", result.error);
+        toast.error("Failed to commit feature", {
+          description: result.error || "An error occurred",
+        });
+        await loadFeatures();
+      }
+    } catch (error) {
+      console.error("[Board] Error committing feature:", error);
+      toast.error("Failed to commit feature", {
+        description:
+          error instanceof Error ? error.message : "An error occurred",
+      });
+      await loadFeatures();
+    }
+  };
+
+  // Move feature to waiting_approval (for skipTests features when agent completes)
+  const handleMoveToWaitingApproval = (feature: Feature) => {
+    console.log("[Board] Moving feature to waiting_approval:", {
+      id: feature.id,
+      description: feature.description,
+    });
+    updateFeature(feature.id, { status: "waiting_approval" });
+    toast.info("Feature ready for review", {
+      description: `Ready for approval: ${feature.description.slice(0, 50)}${
+        feature.description.length > 50 ? "..." : ""
+      }`,
+    });
+  };
+
   const checkContextExists = async (featureId: string): Promise<boolean> => {
     if (!currentProject) return false;
 
@@ -844,12 +990,30 @@ export function BoardView() {
   const handleForceStopFeature = async (feature: Feature) => {
     try {
       await autoMode.stopFeature(feature.id);
-      // Move the feature back to backlog status after stopping
-      moveFeature(feature.id, "backlog");
+
+      // Determine where to move the feature after stopping:
+      // - If it's a skipTests feature that was in waiting_approval (i.e., during commit operation),
+      //   move it back to waiting_approval so user can try commit again or do follow-up
+      // - Otherwise, move to backlog
+      const targetStatus =
+        feature.skipTests && feature.status === "waiting_approval"
+          ? "waiting_approval"
+          : "backlog";
+
+      if (targetStatus !== feature.status) {
+        moveFeature(feature.id, targetStatus);
+      }
+
       toast.success("Agent stopped", {
-        description: `Stopped working on: ${feature.description.slice(0, 50)}${
-          feature.description.length > 50 ? "..." : ""
-        }`,
+        description:
+          targetStatus === "waiting_approval"
+            ? `Stopped commit - returned to waiting approval: ${feature.description.slice(
+                0,
+                50
+              )}${feature.description.length > 50 ? "..." : ""}`
+            : `Stopped working on: ${feature.description.slice(0, 50)}${
+                feature.description.length > 50 ? "..." : ""
+              }`,
       });
     } catch (error) {
       console.error("[Board] Error stopping feature:", error);
@@ -1114,6 +1278,8 @@ export function BoardView() {
                             onMoveBackToInProgress={() =>
                               handleMoveBackToInProgress(feature)
                             }
+                            onFollowUp={() => handleOpenFollowUp(feature)}
+                            onCommit={() => handleCommitFeature(feature)}
                             hasContext={featuresWithContext.has(feature.id)}
                             isCurrentAutoTask={runningAutoTasks.includes(
                               feature.id
@@ -1457,6 +1623,86 @@ export function BoardView() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Follow-Up Prompt Dialog */}
+      <Dialog
+        open={showFollowUpDialog}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowFollowUpDialog(false);
+            setFollowUpFeature(null);
+            setFollowUpPrompt("");
+            setFollowUpImagePaths([]);
+          }
+        }}
+      >
+        <DialogContent
+          data-testid="follow-up-dialog"
+          onKeyDown={(e) => {
+            if (
+              (e.metaKey || e.ctrlKey) &&
+              e.key === "Enter" &&
+              followUpPrompt.trim()
+            ) {
+              e.preventDefault();
+              handleSendFollowUp();
+            }
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>Follow-Up Prompt</DialogTitle>
+            <DialogDescription>
+              Send additional instructions to continue working on this feature.
+              {followUpFeature && (
+                <span className="block mt-2 text-primary">
+                  Feature: {followUpFeature.description.slice(0, 100)}
+                  {followUpFeature.description.length > 100 ? "..." : ""}
+                </span>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="follow-up-prompt">Instructions</Label>
+              <DescriptionImageDropZone
+                value={followUpPrompt}
+                onChange={setFollowUpPrompt}
+                images={followUpImagePaths}
+                onImagesChange={setFollowUpImagePaths}
+                placeholder="Describe what needs to be fixed or changed..."
+              />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              The agent will continue from where it left off, using the existing
+              context. You can attach screenshots to help explain the issue.
+            </p>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => {
+                setShowFollowUpDialog(false);
+                setFollowUpFeature(null);
+                setFollowUpPrompt("");
+                setFollowUpImagePaths([]);
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSendFollowUp}
+              disabled={!followUpPrompt.trim()}
+              data-testid="confirm-follow-up"
+            >
+              <MessageSquare className="w-4 h-4 mr-2" />
+              Send Follow-Up
+              <span className="ml-2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-white/10 border border-white/20">
+                ⌘↵
+              </span>
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

app/src/components/views/code-view.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useAppStore } from "@/store/app-store";
+import { getElectronAPI } from "@/lib/electron";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  File,
+  Folder,
+  FolderOpen,
+  ChevronRight,
+  ChevronDown,
+  RefreshCw,
+  Code,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface FileTreeNode {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  children?: FileTreeNode[];
+  isExpanded?: boolean;
+}
+
+const IGNORE_PATTERNS = [
+  "node_modules",
+  ".git",
+  ".next",
+  "dist",
+  "build",
+  ".DS_Store",
+  "*.log",
+];
+
+const shouldIgnore = (name: string) => {
+  return IGNORE_PATTERNS.some((pattern) => {
+    if (pattern.startsWith("*")) {
+      return name.endsWith(pattern.slice(1));
+    }
+    return name === pattern;
+  });
+};
+
+export function CodeView() {
+  const { currentProject } = useAppStore();
+  const [fileTree, setFileTree] = useState<FileTreeNode[]>([]);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [fileContent, setFileContent] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(
+    new Set()
+  );
+
+  // Load directory tree
+  const loadTree = useCallback(async () => {
+    if (!currentProject) return;
+
+    setIsLoading(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.readdir(currentProject.path);
+
+      if (result.success && result.entries) {
+        const entries = result.entries
+          .filter((e) => !shouldIgnore(e.name))
+          .sort((a, b) => {
+            // Directories first
+            if (a.isDirectory && !b.isDirectory) return -1;
+            if (!a.isDirectory && b.isDirectory) return 1;
+            return a.name.localeCompare(b.name);
+          })
+          .map((e) => ({
+            name: e.name,
+            path: `${currentProject.path}/${e.name}`,
+            isDirectory: e.isDirectory,
+          }));
+
+        setFileTree(entries);
+      }
+    } catch (error) {
+      console.error("Failed to load file tree:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [currentProject]);
+
+  useEffect(() => {
+    loadTree();
+  }, [loadTree]);
+
+  // Load subdirectory
+  const loadSubdirectory = async (path: string): Promise<FileTreeNode[]> => {
+    try {
+      const api = getElectronAPI();
+      const result = await api.readdir(path);
+
+      if (result.success && result.entries) {
+        return result.entries
+          .filter((e) => !shouldIgnore(e.name))
+          .sort((a, b) => {
+            if (a.isDirectory && !b.isDirectory) return -1;
+            if (!a.isDirectory && b.isDirectory) return 1;
+            return a.name.localeCompare(b.name);
+          })
+          .map((e) => ({
+            name: e.name,
+            path: `${path}/${e.name}`,
+            isDirectory: e.isDirectory,
+          }));
+      }
+    } catch (error) {
+      console.error("Failed to load subdirectory:", error);
+    }
+    return [];
+  };
+
+  // Load file content
+  const loadFileContent = async (path: string) => {
+    try {
+      const api = getElectronAPI();
+      const result = await api.readFile(path);
+
+      if (result.success && result.content) {
+        setFileContent(result.content);
+        setSelectedFile(path);
+      }
+    } catch (error) {
+      console.error("Failed to load file:", error);
+    }
+  };
+
+  // Toggle folder expansion
+  const toggleFolder = async (node: FileTreeNode) => {
+    const newExpanded = new Set(expandedFolders);
+
+    if (expandedFolders.has(node.path)) {
+      newExpanded.delete(node.path);
+    } else {
+      newExpanded.add(node.path);
+
+      // Load children if not already loaded
+      if (!node.children) {
+        const children = await loadSubdirectory(node.path);
+        // Update the tree with children
+        const updateTree = (nodes: FileTreeNode[]): FileTreeNode[] => {
+          return nodes.map((n) => {
+            if (n.path === node.path) {
+              return { ...n, children };
+            }
+            if (n.children) {
+              return { ...n, children: updateTree(n.children) };
+            }
+            return n;
+          });
+        };
+        setFileTree(updateTree(fileTree));
+      }
+    }
+
+    setExpandedFolders(newExpanded);
+  };
+
+  // Render file tree node
+  const renderNode = (node: FileTreeNode, depth: number = 0) => {
+    const isExpanded = expandedFolders.has(node.path);
+    const isSelected = selectedFile === node.path;
+
+    return (
+      <div key={node.path}>
+        <div
+          className={cn(
+            "flex items-center gap-2 py-1 px-2 rounded cursor-pointer hover:bg-muted/50",
+            isSelected && "bg-muted"
+          )}
+          style={{ paddingLeft: `${depth * 16 + 8}px` }}
+          onClick={() => {
+            if (node.isDirectory) {
+              toggleFolder(node);
+            } else {
+              loadFileContent(node.path);
+            }
+          }}
+          data-testid={`file-tree-item-${node.name}`}
+        >
+          {node.isDirectory ? (
+            <>
+              {isExpanded ? (
+                <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
+              ) : (
+                <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+              )}
+              {isExpanded ? (
+                <FolderOpen className="w-4 h-4 text-primary shrink-0" />
+              ) : (
+                <Folder className="w-4 h-4 text-primary shrink-0" />
+              )}
+            </>
+          ) : (
+            <>
+              <span className="w-4" />
+              <File className="w-4 h-4 text-muted-foreground shrink-0" />
+            </>
+          )}
+          <span className="text-sm truncate">{node.name}</span>
+        </div>
+        {node.isDirectory && isExpanded && node.children && (
+          <div>
+            {node.children.map((child) => renderNode(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (!currentProject) {
+    return (
+      <div
+        className="flex-1 flex items-center justify-center"
+        data-testid="code-view-no-project"
+      >
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div
+        className="flex-1 flex items-center justify-center"
+        data-testid="code-view-loading"
+      >
+        <RefreshCw className="w-6 h-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex-1 flex flex-col overflow-hidden content-bg"
+      data-testid="code-view"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <Code className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h1 className="text-xl font-bold">Code Explorer</h1>
+            <p className="text-sm text-muted-foreground">
+              {currentProject.name}
+            </p>
+          </div>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={loadTree}
+          data-testid="refresh-tree"
+        >
+          <RefreshCw className="w-4 h-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
+
+      {/* Split View */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* File Tree */}
+        <div className="w-64 border-r overflow-y-auto" data-testid="file-tree">
+          <div className="p-2">{fileTree.map((node) => renderNode(node))}</div>
+        </div>
+
+        {/* Code Preview */}
+        <div className="flex-1 overflow-hidden">
+          {selectedFile ? (
+            <div className="h-full flex flex-col">
+              <div className="px-4 py-2 border-b bg-muted/30">
+                <p className="text-sm font-mono text-muted-foreground truncate">
+                  {selectedFile.replace(currentProject.path, "")}
+                </p>
+              </div>
+              <Card className="flex-1 m-4 overflow-hidden">
+                <CardContent className="p-0 h-full">
+                  <pre className="p-4 h-full overflow-auto text-sm font-mono whitespace-pre-wrap">
+                    <code data-testid="code-content">{fileContent}</code>
+                  </pre>
+                </CardContent>
+              </Card>
+            </div>
+          ) : (
+            <div className="flex-1 flex items-center justify-center">
+              <p className="text-muted-foreground">
+                Select a file to view its contents
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/src/components/views/kanban-card.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { cn } from "@/lib/utils";
@@ -20,7 +20,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Feature } from "@/store/app-store";
+import { Feature, useAppStore } from "@/store/app-store";
 import {
   GripVertical,
   Edit,
@@ -34,8 +34,23 @@ import {
   StopCircle,
   FlaskConical,
   ArrowLeft,
+  MessageSquare,
+  GitCommit,
+  Cpu,
+  Wrench,
+  ListTodo,
+  Sparkles,
+  Expand,
 } from "lucide-react";
 import { CountUpTimer } from "@/components/ui/count-up-timer";
+import { getElectronAPI } from "@/lib/electron";
+import {
+  parseAgentContext,
+  AgentTaskInfo,
+  formatModelName,
+  DEFAULT_MODEL,
+} from "@/lib/agent-context-parser";
+import { Markdown } from "@/components/ui/markdown";
 
 interface KanbanCardProps {
   feature: Feature;
@@ -47,9 +62,15 @@ interface KanbanCardProps {
   onForceStop?: () => void;
   onManualVerify?: () => void;
   onMoveBackToInProgress?: () => void;
+  onFollowUp?: () => void;
+  onCommit?: () => void;
   hasContext?: boolean;
   isCurrentAutoTask?: boolean;
   shortcutKey?: string;
+  /** Context content for extracting progress info */
+  contextContent?: string;
+  /** Feature summary from agent completion */
+  summary?: string;
 }
 
 export function KanbanCard({
@@ -62,11 +83,71 @@ export function KanbanCard({
   onForceStop,
   onManualVerify,
   onMoveBackToInProgress,
+  onFollowUp,
+  onCommit,
   hasContext,
   isCurrentAutoTask,
   shortcutKey,
+  contextContent,
+  summary,
 }: KanbanCardProps) {
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isSummaryDialogOpen, setIsSummaryDialogOpen] = useState(false);
+  const [agentInfo, setAgentInfo] = useState<AgentTaskInfo | null>(null);
+  const { kanbanCardDetailLevel } = useAppStore();
+
+  // Helper functions to check what should be shown based on detail level
+  const showSteps =
+    kanbanCardDetailLevel === "standard" ||
+    kanbanCardDetailLevel === "detailed";
+  const showAgentInfo = kanbanCardDetailLevel === "detailed";
+  const showProgressBar =
+    kanbanCardDetailLevel === "standard" ||
+    kanbanCardDetailLevel === "detailed";
+
+  // Load context file for in_progress, waiting_approval, and verified features
+  useEffect(() => {
+    const loadContext = async () => {
+      // Use provided context or load from file
+      if (contextContent) {
+        const info = parseAgentContext(contextContent);
+        setAgentInfo(info);
+        return;
+      }
+
+      // Only load for non-backlog features
+      if (feature.status === "backlog") {
+        setAgentInfo(null);
+        return;
+      }
+
+      try {
+        const api = getElectronAPI();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const currentProject = (window as any).__currentProject;
+        if (!currentProject?.path) return;
+
+        const contextPath = `${currentProject.path}/.automaker/agents-context/${feature.id}.md`;
+        const result = await api.readFile(contextPath);
+
+        if (result.success && result.content) {
+          const info = parseAgentContext(result.content);
+          setAgentInfo(info);
+        }
+      } catch {
+        // Context file might not exist
+        console.debug("[KanbanCard] No context file for feature:", feature.id);
+      }
+    };
+
+    loadContext();
+
+    // Reload context periodically while feature is running
+    if (isCurrentAutoTask) {
+      const interval = setInterval(loadContext, 3000);
+      return () => clearInterval(interval);
+    }
+  }, [feature.id, feature.status, contextContent, isCurrentAutoTask]);
 
   const handleDeleteClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -189,8 +270,8 @@ export function KanbanCard({
         </div>
       </CardHeader>
       <CardContent className="p-3 pt-0">
-        {/* Steps Preview */}
-        {feature.steps.length > 0 && (
+        {/* Steps Preview - Show in Standard and Detailed modes */}
+        {showSteps && feature.steps.length > 0 && (
           <div className="mb-3 space-y-1">
             {feature.steps.slice(0, 3).map((step, index) => (
               <div
@@ -213,6 +294,195 @@ export function KanbanCard({
           </div>
         )}
 
+        {/* Agent Info Panel - shows for in_progress, waiting_approval, verified */}
+        {/* Standard mode: Only show progress bar */}
+        {showProgressBar &&
+          !showAgentInfo &&
+          feature.status !== "backlog" &&
+          agentInfo &&
+          (isCurrentAutoTask || feature.status === "in_progress") && (
+            <div className="mb-3 space-y-1">
+              <div className="w-full h-1.5 bg-zinc-800 rounded-full overflow-hidden">
+                <div
+                  className="w-full h-full bg-primary transition-transform duration-500 ease-out origin-left"
+                  style={{
+                    transform: `translateX(${
+                      agentInfo.progressPercentage - 100
+                    }%)`,
+                  }}
+                />
+              </div>
+              <div className="flex items-center justify-between text-[10px] text-muted-foreground">
+                <span>{Math.round(agentInfo.progressPercentage)}%</span>
+              </div>
+            </div>
+          )}
+
+        {/* Detailed mode: Show all agent info */}
+        {showAgentInfo && feature.status !== "backlog" && agentInfo && (
+          <div className="mb-3 space-y-2">
+            {/* Model & Phase */}
+            <div className="flex items-center gap-2 text-xs">
+              <div className="flex items-center gap-1 text-cyan-400">
+                <Cpu className="w-3 h-3" />
+                <span className="font-medium">
+                  {formatModelName(DEFAULT_MODEL)}
+                </span>
+              </div>
+              {agentInfo.currentPhase && (
+                <div
+                  className={cn(
+                    "px-1.5 py-0.5 rounded text-[10px] font-medium",
+                    agentInfo.currentPhase === "planning" &&
+                      "bg-blue-500/20 text-blue-400",
+                    agentInfo.currentPhase === "action" &&
+                      "bg-amber-500/20 text-amber-400",
+                    agentInfo.currentPhase === "verification" &&
+                      "bg-green-500/20 text-green-400"
+                  )}
+                >
+                  {agentInfo.currentPhase}
+                </div>
+              )}
+            </div>
+
+            {/* Progress Indicator */}
+            {(isCurrentAutoTask || feature.status === "in_progress") && (
+              <div className="space-y-1">
+                <div className="w-full h-1.5 bg-zinc-800 rounded-full overflow-hidden">
+                  <div
+                    className="w-full h-full bg-primary transition-transform duration-500 ease-out origin-left"
+                    style={{
+                      transform: `translateX(${
+                        agentInfo.progressPercentage - 100
+                      }%)`,
+                    }}
+                  />
+                </div>
+                <div className="flex items-center justify-between text-[10px] text-muted-foreground">
+                  <div className="flex items-center gap-2">
+                    <span className="flex items-center gap-1">
+                      <Wrench className="w-2.5 h-2.5" />
+                      {agentInfo.toolCallCount} tools
+                    </span>
+                    {agentInfo.lastToolUsed && (
+                      <span
+                        className="text-zinc-500 truncate max-w-[80px]"
+                        title={agentInfo.lastToolUsed}
+                      >
+                        {agentInfo.lastToolUsed}
+                      </span>
+                    )}
+                  </div>
+                  <span>{Math.round(agentInfo.progressPercentage)}%</span>
+                </div>
+              </div>
+            )}
+
+            {/* Task List Progress (if todos found) */}
+            {agentInfo.todos.length > 0 && (
+              <div className="space-y-1">
+                <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+                  <ListTodo className="w-3 h-3" />
+                  <span>
+                    {
+                      agentInfo.todos.filter((t) => t.status === "completed")
+                        .length
+                    }
+                    /{agentInfo.todos.length} tasks
+                  </span>
+                </div>
+                <div className="space-y-0.5 max-h-16 overflow-y-auto">
+                  {agentInfo.todos.slice(0, 3).map((todo, idx) => (
+                    <div
+                      key={idx}
+                      className="flex items-center gap-1.5 text-[10px]"
+                    >
+                      {todo.status === "completed" ? (
+                        <CheckCircle2 className="w-2.5 h-2.5 text-green-500 shrink-0" />
+                      ) : todo.status === "in_progress" ? (
+                        <Loader2 className="w-2.5 h-2.5 text-amber-400 animate-spin shrink-0" />
+                      ) : (
+                        <Circle className="w-2.5 h-2.5 text-zinc-500 shrink-0" />
+                      )}
+                      <span
+                        className={cn(
+                          "truncate",
+                          todo.status === "completed" &&
+                            "text-zinc-500 line-through",
+                          todo.status === "in_progress" && "text-amber-400",
+                          todo.status === "pending" && "text-zinc-400"
+                        )}
+                      >
+                        {todo.content}
+                      </span>
+                    </div>
+                  ))}
+                  {agentInfo.todos.length > 3 && (
+                    <p className="text-[10px] text-muted-foreground pl-4">
+                      +{agentInfo.todos.length - 3} more
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Summary for waiting_approval and verified - prioritize feature.summary from UpdateFeatureStatus */}
+            {(feature.status === "waiting_approval" ||
+              feature.status === "verified") && (
+              <>
+                {(feature.summary || summary || agentInfo.summary) && (
+                  <div className="space-y-1 pt-1 border-t border-white/5">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1 text-[10px] text-green-400">
+                        <Sparkles className="w-3 h-3" />
+                        <span>Summary</span>
+                      </div>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setIsSummaryDialogOpen(true);
+                        }}
+                        className="p-0.5 rounded hover:bg-white/10 transition-colors text-zinc-500 hover:text-zinc-300"
+                        title="View full summary"
+                        data-testid={`expand-summary-${feature.id}`}
+                      >
+                        <Expand className="w-3 h-3" />
+                      </button>
+                    </div>
+                    <p className="text-[10px] text-zinc-400 line-clamp-3">
+                      {feature.summary || summary || agentInfo.summary}
+                    </p>
+                  </div>
+                )}
+                {/* Show tool count even without summary */}
+                {!feature.summary &&
+                  !summary &&
+                  !agentInfo.summary &&
+                  agentInfo.toolCallCount > 0 && (
+                    <div className="flex items-center gap-2 text-[10px] text-muted-foreground pt-1 border-t border-white/5">
+                      <span className="flex items-center gap-1">
+                        <Wrench className="w-2.5 h-2.5" />
+                        {agentInfo.toolCallCount} tool calls
+                      </span>
+                      {agentInfo.todos.length > 0 && (
+                        <span className="flex items-center gap-1">
+                          <CheckCircle2 className="w-2.5 h-2.5 text-green-500" />
+                          {
+                            agentInfo.todos.filter(
+                              (t) => t.status === "completed"
+                            ).length
+                          }{" "}
+                          tasks done
+                        </span>
+                      )}
+                    </div>
+                  )}
+              </>
+            )}
+          </div>
+        )}
+
         {/* Actions */}
         <div className="flex gap-2">
           {isCurrentAutoTask && (
@@ -363,6 +633,51 @@ export function KanbanCard({
               </Button>
             </>
           )}
+          {!isCurrentAutoTask && feature.status === "waiting_approval" && (
+            <>
+              {/* Follow-up prompt button */}
+              {onFollowUp && (
+                <Button
+                  variant="default"
+                  size="sm"
+                  className="flex-1 h-7 text-xs bg-blue-600 hover:bg-blue-700"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onFollowUp();
+                  }}
+                  data-testid={`follow-up-${feature.id}`}
+                >
+                  <MessageSquare className="w-3 h-3 mr-1" />
+                  Follow-up
+                </Button>
+              )}
+              {/* Commit and verify button */}
+              {onCommit && (
+                <Button
+                  variant="default"
+                  size="sm"
+                  className="flex-1 h-7 text-xs bg-green-600 hover:bg-green-700"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onCommit();
+                  }}
+                  data-testid={`commit-${feature.id}`}
+                >
+                  <GitCommit className="w-3 h-3 mr-1" />
+                  Commit
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 text-xs text-destructive hover:text-destructive hover:bg-destructive/10"
+                onClick={handleDeleteClick}
+                data-testid={`delete-waiting-feature-${feature.id}`}
+              >
+                <Trash2 className="w-3 h-3" />
+              </Button>
+            </>
+          )}
           {!isCurrentAutoTask && feature.status === "backlog" && (
             <>
               <Button
@@ -420,6 +735,43 @@ export function KanbanCard({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Summary Modal */}
+      <Dialog open={isSummaryDialogOpen} onOpenChange={setIsSummaryDialogOpen}>
+        <DialogContent
+          className="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col"
+          data-testid={`summary-dialog-${feature.id}`}
+        >
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Sparkles className="w-5 h-5 text-green-400" />
+              Implementation Summary
+            </DialogTitle>
+            <DialogDescription className="text-sm" title={feature.description}>
+              {feature.description.length > 100
+                ? `${feature.description.slice(0, 100)}...`
+                : feature.description}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto p-4 bg-zinc-900/50 rounded-lg border border-white/10">
+            <Markdown>
+              {feature.summary ||
+                summary ||
+                agentInfo?.summary ||
+                "No summary available"}
+            </Markdown>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setIsSummaryDialogOpen(false)}
+              data-testid="close-summary-button"
+            >
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Card>
   );
 }

app/src/components/views/settings-view.tsx

@@ -5,13 +5,6 @@ import { useAppStore } from "@/store/app-store";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import {
   Settings,
   Key,
@@ -34,11 +27,22 @@ import {
   Cat,
   Atom,
   Radio,
+  LayoutGrid,
+  Minimize2,
+  Square,
+  Maximize2,
 } from "lucide-react";
 
 export function SettingsView() {
-  const { apiKeys, setApiKeys, setCurrentView, theme, setTheme } =
-    useAppStore();
+  const {
+    apiKeys,
+    setApiKeys,
+    setCurrentView,
+    theme,
+    setTheme,
+    kanbanCardDetailLevel,
+    setKanbanCardDetailLevel,
+  } = useAppStore();
   const [anthropicKey, setAnthropicKey] = useState(apiKeys.anthropic);
   const [googleKey, setGoogleKey] = useState(apiKeys.google);
   const [showAnthropicKey, setShowAnthropicKey] = useState(false);
@@ -548,6 +552,81 @@ export function SettingsView() {
             </div>
           </div>
 
+          {/* Kanban Card Display Section */}
+          <div className="rounded-xl border border-white/10 bg-zinc-900/50 backdrop-blur-md overflow-hidden">
+            <div className="p-6 border-b border-white/10">
+              <div className="flex items-center gap-2 mb-2">
+                <LayoutGrid className="w-5 h-5 text-brand-500" />
+                <h2 className="text-lg font-semibold text-white">
+                  Kanban Card Display
+                </h2>
+              </div>
+              <p className="text-sm text-zinc-400">
+                Control how much information is displayed on Kanban cards.
+              </p>
+            </div>
+            <div className="p-6 space-y-4">
+              <div className="space-y-3">
+                <Label className="text-zinc-300">Detail Level</Label>
+                <div className="grid grid-cols-3 gap-3">
+                  <button
+                    onClick={() => setKanbanCardDetailLevel("minimal")}
+                    className={`flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-lg border transition-all ${
+                      kanbanCardDetailLevel === "minimal"
+                        ? "bg-white/5 border-brand-500 text-white"
+                        : "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
+                    }`}
+                    data-testid="kanban-detail-minimal"
+                  >
+                    <Minimize2 className="w-5 h-5" />
+                    <span className="font-medium text-sm">Minimal</span>
+                    <span className="text-xs text-zinc-500 text-center">
+                      Title & category only
+                    </span>
+                  </button>
+                  <button
+                    onClick={() => setKanbanCardDetailLevel("standard")}
+                    className={`flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-lg border transition-all ${
+                      kanbanCardDetailLevel === "standard"
+                        ? "bg-white/5 border-brand-500 text-white"
+                        : "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
+                    }`}
+                    data-testid="kanban-detail-standard"
+                  >
+                    <Square className="w-5 h-5" />
+                    <span className="font-medium text-sm">Standard</span>
+                    <span className="text-xs text-zinc-500 text-center">
+                      Steps & progress
+                    </span>
+                  </button>
+                  <button
+                    onClick={() => setKanbanCardDetailLevel("detailed")}
+                    className={`flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-lg border transition-all ${
+                      kanbanCardDetailLevel === "detailed"
+                        ? "bg-white/5 border-brand-500 text-white"
+                        : "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
+                    }`}
+                    data-testid="kanban-detail-detailed"
+                  >
+                    <Maximize2 className="w-5 h-5" />
+                    <span className="font-medium text-sm">Detailed</span>
+                    <span className="text-xs text-zinc-500 text-center">
+                      Model, tools & tasks
+                    </span>
+                  </button>
+                </div>
+                <p className="text-xs text-zinc-500">
+                  <strong>Minimal:</strong> Shows only title and category
+                  <br />
+                  <strong>Standard:</strong> Adds steps preview and progress bar
+                  <br />
+                  <strong>Detailed:</strong> Shows all info including model,
+                  tool calls, task list, and summaries
+                </p>
+              </div>
+            </div>
+          </div>
+
           {/* Save Button */}
           <div className="flex items-center gap-4">
             <Button

app/src/hooks/use-auto-mode.ts

@@ -113,7 +113,9 @@ export function useAutoMode() {
 
         case "auto_mode_phase":
           // Log phase transitions (Planning, Action, Verification)
-          console.log(`[AutoMode] Phase: ${event.phase} for ${event.featureId}`);
+          console.log(
+            `[AutoMode] Phase: ${event.phase} for ${event.featureId}`
+          );
           addAutoModeActivity({
             featureId: event.featureId,
             type: event.phase,
@@ -125,7 +127,13 @@ export function useAutoMode() {
     });
 
     return unsubscribe;
-  }, [addRunningTask, removeRunningTask, clearRunningTasks, setAutoModeRunning, addAutoModeActivity]);
+  }, [
+    addRunningTask,
+    removeRunningTask,
+    clearRunningTasks,
+    setAutoModeRunning,
+    addAutoModeActivity,
+  ]);
 
   // Start auto mode
   const start = useCallback(async () => {
@@ -181,33 +189,36 @@ export function useAutoMode() {
   }, [setAutoModeRunning, clearRunningTasks]);
 
   // Stop a specific feature
-  const stopFeature = useCallback(async (featureId: string) => {
-    try {
-      const api = getElectronAPI();
-      if (!api?.autoMode?.stopFeature) {
-        throw new Error("Stop feature API not available");
-      }
+  const stopFeature = useCallback(
+    async (featureId: string) => {
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode?.stopFeature) {
+          throw new Error("Stop feature API not available");
+        }
 
-      const result = await api.autoMode.stopFeature(featureId);
+        const result = await api.autoMode.stopFeature(featureId);
 
-      if (result.success) {
-        removeRunningTask(featureId);
-        console.log("[AutoMode] Feature stopped successfully:", featureId);
-        addAutoModeActivity({
-          featureId,
-          type: "complete",
-          message: "Feature stopped by user",
-          passes: false,
-        });
-      } else {
-        console.error("[AutoMode] Failed to stop feature:", result.error);
-        throw new Error(result.error || "Failed to stop feature");
+        if (result.success) {
+          removeRunningTask(featureId);
+          console.log("[AutoMode] Feature stopped successfully:", featureId);
+          addAutoModeActivity({
+            featureId,
+            type: "complete",
+            message: "Feature stopped by user",
+            passes: false,
+          });
+        } else {
+          console.error("[AutoMode] Failed to stop feature:", result.error);
+          throw new Error(result.error || "Failed to stop feature");
+        }
+      } catch (error) {
+        console.error("[AutoMode] Error stopping feature:", error);
+        throw error;
       }
-    } catch (error) {
-      console.error("[AutoMode] Error stopping feature:", error);
-      throw error;
-    }
-  }, [removeRunningTask, addAutoModeActivity]);
+    },
+    [removeRunningTask, addAutoModeActivity]
+  );
 
   return {
     isRunning: isAutoModeRunning,

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

@@ -0,0 +1,247 @@
+/**
+ * Agent Context Parser
+ * Extracts useful information from agent context files for display in kanban cards
+ */
+
+export interface AgentTaskInfo {
+  // Task list extracted from TodoWrite tool calls
+  todos: {
+    content: string;
+    status: "pending" | "in_progress" | "completed";
+  }[];
+
+  // Progress stats
+  toolCallCount: number;
+  lastToolUsed?: string;
+
+  // Phase info
+  currentPhase?: "planning" | "action" | "verification";
+
+  // Summary (if feature is completed)
+  summary?: string;
+
+  // Estimated progress percentage based on phase and tool calls
+  progressPercentage: number;
+}
+
+/**
+ * Default model used by the feature executor
+ */
+export const DEFAULT_MODEL = "claude-opus-4-5-20251101";
+
+/**
+ * Formats a model name for display
+ */
+export function formatModelName(model: string): string {
+  if (model.includes("opus")) return "Opus 4.5";
+  if (model.includes("sonnet")) return "Sonnet 4";
+  if (model.includes("haiku")) return "Haiku 3.5";
+  return model.split("-").slice(1, 3).join(" ");
+}
+
+/**
+ * Extracts todos from the context content
+ * Looks for TodoWrite tool calls in the format:
+ * TodoWrite: [{"content": "...", "status": "..."}]
+ */
+function extractTodos(content: string): AgentTaskInfo["todos"] {
+  const todos: AgentTaskInfo["todos"] = [];
+
+  // Look for TodoWrite tool inputs
+  const todoMatches = content.matchAll(/TodoWrite.*?(?:"todos"\s*:\s*)?(\[[\s\S]*?\](?=\s*(?:\}|$|🔧|📋|⚡|✅|❌)))/g);
+
+  for (const match of todoMatches) {
+    try {
+      // Try to find JSON array in the match
+      const jsonStr = match[1] || match[0];
+      const arrayMatch = jsonStr.match(/\[[\s\S]*?\]/);
+      if (arrayMatch) {
+        const parsed = JSON.parse(arrayMatch[0]);
+        if (Array.isArray(parsed)) {
+          for (const item of parsed) {
+            if (item.content && item.status) {
+              // Check if this todo already exists (avoid duplicates)
+              if (!todos.some(t => t.content === item.content)) {
+                todos.push({
+                  content: item.content,
+                  status: item.status,
+                });
+              }
+            }
+          }
+        }
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }
+
+  // Also try to extract from markdown task lists
+  const markdownTodos = content.matchAll(/- \[([ xX])\] (.+)/g);
+  for (const match of markdownTodos) {
+    const isCompleted = match[1].toLowerCase() === "x";
+    const content = match[2].trim();
+    if (!todos.some(t => t.content === content)) {
+      todos.push({
+        content,
+        status: isCompleted ? "completed" : "pending",
+      });
+    }
+  }
+
+  return todos;
+}
+
+/**
+ * Counts tool calls in the content
+ */
+function countToolCalls(content: string): number {
+  const matches = content.match(/🔧\s*Tool:/g);
+  return matches?.length || 0;
+}
+
+/**
+ * Gets the last tool used
+ */
+function getLastToolUsed(content: string): string | undefined {
+  const matches = [...content.matchAll(/🔧\s*Tool:\s*(\S+)/g)];
+  if (matches.length > 0) {
+    return matches[matches.length - 1][1];
+  }
+  return undefined;
+}
+
+/**
+ * Determines the current phase from the content
+ */
+function getCurrentPhase(content: string): "planning" | "action" | "verification" | undefined {
+  // Find the last phase marker
+  const planningIndex = content.lastIndexOf("📋");
+  const actionIndex = content.lastIndexOf("⚡");
+  const verificationIndex = content.lastIndexOf("✅");
+
+  const maxIndex = Math.max(planningIndex, actionIndex, verificationIndex);
+
+  if (maxIndex === -1) return undefined;
+  if (maxIndex === verificationIndex) return "verification";
+  if (maxIndex === actionIndex) return "action";
+  return "planning";
+}
+
+/**
+ * Extracts a summary from completed feature context
+ */
+function extractSummary(content: string): string | undefined {
+  // 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) {
+    return summaryMatch[1].trim();
+  }
+
+  // Look for completion markers and extract surrounding text
+  const completionMatch = content.match(/✓ (?:Feature|Verification|Task) (?:successfully|completed|verified)[^\n]*(?:\n[^\n]{1,200})?/i);
+  if (completionMatch) {
+    return completionMatch[0].trim();
+  }
+
+  // Look for "What was done" type sections
+  const whatWasDoneMatch = content.match(/(?:What was done|Changes made|Implemented)[^\n]*\n([\s\S]*?)(?=\n## [^#]|\n🔧|$)/i);
+  if (whatWasDoneMatch) {
+    return whatWasDoneMatch[1].trim();
+  }
+
+  return undefined;
+}
+
+/**
+ * Calculates progress percentage based on phase and context
+ * Uses a more dynamic approach that better reflects actual progress
+ */
+function calculateProgress(phase: AgentTaskInfo["currentPhase"], toolCallCount: number, todos: AgentTaskInfo["todos"]): number {
+  // If we have todos, primarily use them for progress calculation
+  if (todos.length > 0) {
+    const completedCount = todos.filter(t => t.status === "completed").length;
+    const inProgressCount = todos.filter(t => t.status === "in_progress").length;
+
+    // Weight: completed = 1, in_progress = 0.5, pending = 0
+    const progress = ((completedCount + inProgressCount * 0.5) / todos.length) * 90;
+
+    // Add a small base amount and cap at 95%
+    return Math.min(5 + progress, 95);
+  }
+
+  // Fallback: use phase-based progress with tool call scaling
+  let phaseProgress = 0;
+  switch (phase) {
+    case "planning":
+      // Planning phase: 5-25%
+      phaseProgress = 5 + Math.min(toolCallCount * 1, 20);
+      break;
+    case "action":
+      // Action phase: 25-75% based on tool calls (logarithmic scaling)
+      phaseProgress = 25 + Math.min(Math.log2(toolCallCount + 1) * 10, 50);
+      break;
+    case "verification":
+      // Verification phase: 75-95%
+      phaseProgress = 75 + Math.min(toolCallCount * 0.5, 20);
+      break;
+    default:
+      // Starting: just use tool calls
+      phaseProgress = Math.min(toolCallCount * 0.5, 10);
+  }
+
+  return Math.min(Math.round(phaseProgress), 95);
+}
+
+/**
+ * Parses agent context content and extracts useful information
+ */
+export function parseAgentContext(content: string): AgentTaskInfo {
+  if (!content || !content.trim()) {
+    return {
+      todos: [],
+      toolCallCount: 0,
+      progressPercentage: 0,
+    };
+  }
+
+  const todos = extractTodos(content);
+  const toolCallCount = countToolCalls(content);
+  const lastToolUsed = getLastToolUsed(content);
+  const currentPhase = getCurrentPhase(content);
+  const summary = extractSummary(content);
+  const progressPercentage = calculateProgress(currentPhase, toolCallCount, todos);
+
+  return {
+    todos,
+    toolCallCount,
+    lastToolUsed,
+    currentPhase,
+    summary,
+    progressPercentage,
+  };
+}
+
+/**
+ * Quick stats for display in card badges
+ */
+export interface QuickStats {
+  toolCalls: number;
+  completedTasks: number;
+  totalTasks: number;
+  phase?: string;
+}
+
+/**
+ * Extracts quick stats from context for compact display
+ */
+export function getQuickStats(content: string): QuickStats {
+  const info = parseAgentContext(content);
+  return {
+    toolCalls: info.toolCallCount,
+    completedTasks: info.todos.filter(t => t.status === "completed").length,
+    totalTasks: info.todos.length,
+    phase: info.currentPhase,
+  };
+}

app/src/lib/electron.ts

@@ -67,6 +67,8 @@ export interface AutoModeAPI {
   resumeFeature: (projectPath: string, featureId: string) => Promise<{ success: boolean; passes?: boolean; error?: string }>;
   contextExists: (projectPath: string, featureId: string) => Promise<{ success: boolean; exists?: boolean; error?: string }>;
   analyzeProject: (projectPath: string) => Promise<{ success: boolean; message?: string; error?: string }>;
+  followUpFeature: (projectPath: string, featureId: string, prompt: string, imagePaths?: string[]) => Promise<{ success: boolean; passes?: boolean; error?: string }>;
+  commitFeature: (projectPath: string, featureId: string) => Promise<{ success: boolean; error?: string }>;
   onEvent: (callback: (event: AutoModeEvent) => void) => () => void;
 }
 
@@ -573,6 +575,58 @@ function createMockAutoModeAPI(): AutoModeAPI {
       return { success: true, message: "Project analyzed successfully" };
     },
 
+    followUpFeature: async (projectPath: string, featureId: string, prompt: string, imagePaths?: string[]) => {
+      if (mockRunningFeatures.has(featureId)) {
+        return { success: false, error: `Feature ${featureId} is already running` };
+      }
+
+      console.log("[Mock] Follow-up feature:", { featureId, prompt, imagePaths });
+
+      mockRunningFeatures.add(featureId);
+
+      // Simulate follow-up work (similar to run but with additional context)
+      // Note: We don't await this - it runs in the background like the real implementation
+      simulateAutoModeLoop(projectPath, featureId);
+
+      // Return immediately so the modal can close (matches real implementation)
+      return { success: true };
+    },
+
+    commitFeature: async (projectPath: string, featureId: string) => {
+      console.log("[Mock] Committing feature:", { projectPath, featureId });
+
+      // Simulate commit operation
+      emitAutoModeEvent({
+        type: "auto_mode_feature_start",
+        featureId,
+        feature: {
+          id: featureId,
+          category: "Commit",
+          description: "Committing changes",
+        },
+      });
+
+      await delay(300, featureId);
+
+      emitAutoModeEvent({
+        type: "auto_mode_phase",
+        featureId,
+        phase: "action",
+        message: "Committing changes to git...",
+      });
+
+      await delay(500, featureId);
+
+      emitAutoModeEvent({
+        type: "auto_mode_feature_complete",
+        featureId,
+        passes: true,
+        message: "Changes committed successfully",
+      });
+
+      return { success: true };
+    },
+
     onEvent: (callback: (event: AutoModeEvent) => void) => {
       mockAutoModeCallbacks.push(callback);
       return () => {

app/src/store/app-store.ts

@@ -11,6 +11,7 @@ export type ViewMode =
   | "tools"
   | "interview"
   | "context";
+
 export type ThemeMode =
   | "light"
   | "dark"
@@ -26,6 +27,8 @@ export type ThemeMode =
   | "onedark"
   | "synthwave";
 
+export type KanbanCardDetailLevel = "minimal" | "standard" | "detailed";
+
 export interface ApiKeys {
   anthropic: string;
   google: string;
@@ -77,11 +80,12 @@ export interface Feature {
   category: string;
   description: string;
   steps: string[];
-  status: "backlog" | "in_progress" | "verified";
+  status: "backlog" | "in_progress" | "waiting_approval" | "verified";
   images?: FeatureImage[];
   imagePaths?: FeatureImagePath[]; // Paths to temp files for agent context
   startedAt?: string; // ISO timestamp for when the card moved to in_progress
   skipTests?: boolean; // When true, skip TDD approach and require manual verification
+  summary?: string; // Summary of what was done/modified by the agent
 }
 
 export interface AppState {
@@ -118,6 +122,9 @@ export interface AppState {
   runningAutoTasks: string[]; // Feature IDs being worked on (supports concurrent tasks)
   autoModeActivityLog: AutoModeActivity[];
   maxConcurrency: number; // Maximum number of concurrent agent tasks
+
+  // Kanban Card Display Settings
+  kanbanCardDetailLevel: KanbanCardDetailLevel; // Level of detail shown on kanban cards
 }
 
 export interface AutoModeActivity {
@@ -192,6 +199,9 @@ export interface AppActions {
   clearAutoModeActivity: () => void;
   setMaxConcurrency: (max: number) => void;
 
+  // Kanban Card Settings actions
+  setKanbanCardDetailLevel: (level: KanbanCardDetailLevel) => void;
+
   // Reset
   reset: () => void;
 }
@@ -216,6 +226,7 @@ const initialState: AppState = {
   runningAutoTasks: [],
   autoModeActivityLog: [],
   maxConcurrency: 3, // Default to 3 concurrent agents
+  kanbanCardDetailLevel: "standard", // Default to standard detail level
 };
 
 export const useAppStore = create<AppState & AppActions>()(
@@ -454,6 +465,10 @@ export const useAppStore = create<AppState & AppActions>()(
 
       setMaxConcurrency: (max) => set({ maxConcurrency: max }),
 
+      // Kanban Card Settings actions
+      setKanbanCardDetailLevel: (level) =>
+        set({ kanbanCardDetailLevel: level }),
+
       // Reset
       reset: () => set(initialState),
     }),
@@ -469,6 +484,7 @@ export const useAppStore = create<AppState & AppActions>()(
         chatSessions: state.chatSessions,
         chatHistoryOpen: state.chatHistoryOpen,
         maxConcurrency: state.maxConcurrency,
+        kanbanCardDetailLevel: state.kanbanCardDetailLevel,
       }),
     }
   )

app/src/types/electron.d.ts

@@ -233,6 +233,17 @@ export interface AutoModeAPI {
     error?: string;
   }>;
 
+  followUpFeature: (projectPath: string, featureId: string, prompt: string, imagePaths?: string[]) => Promise<{
+    success: boolean;
+    passes?: boolean;
+    error?: string;
+  }>;
+
+  commitFeature: (projectPath: string, featureId: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
   onEvent: (callback: (event: AutoModeEvent) => void) => () => void;
 }