feat(kanban): add feature summary display and agent context info

Enhance Kanban cards to show comprehensive feature information:
- Add feature summary field to display completed work details
- Show agent context info (model, progress, tasks) on cards
- Display tool usage and token consumption metrics
- Add expandable summary dialog for detailed view
- Update prompts to require summary when marking features complete
- Improve UI for waiting_approval and verified states

Modified: kanban-card.tsx, board-view.tsx, feature-loader.js,
mcp-server-factory.js, prompt-builder.js, app-store.ts
Created: agent-context-parser.ts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>

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

@@ -404,6 +404,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`,

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";
@@ -36,8 +36,20 @@ import {
   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";
 
 interface KanbanCardProps {
   feature: Feature;
@@ -54,6 +66,10 @@ interface KanbanCardProps {
   hasContext?: boolean;
   isCurrentAutoTask?: boolean;
   shortcutKey?: string;
+  /** Context content for extracting progress info */
+  contextContent?: string;
+  /** Feature summary from agent completion */
+  summary?: string;
 }
 
 export function KanbanCard({
@@ -71,8 +87,56 @@ export function KanbanCard({
   hasContext,
   isCurrentAutoTask,
   shortcutKey,
+  contextContent,
+  summary,
 }: KanbanCardProps) {
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isSummaryDialogOpen, setIsSummaryDialogOpen] = useState(false);
+  const [agentInfo, setAgentInfo] = useState<AgentTaskInfo | null>(null);
+
+  // 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();
@@ -220,6 +284,141 @@ export function KanbanCard({
           </div>
         )}
 
+        {/* Agent Info Panel - shows for in_progress, waiting_approval, verified */}
+        {feature.status !== "backlog" && agentInfo && (
+          <div className="mb-3 space-y-2">
+            {/* Model & Progress Bar */}
+            <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 && (
@@ -471,6 +670,40 @@ export function KanbanCard({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Summary Modal */}
+      <Dialog open={isSummaryDialogOpen} onOpenChange={setIsSummaryDialogOpen}>
+        <DialogContent
+          className="max-w-2xl 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">
+              {feature.description}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+            <div className="prose prose-sm prose-invert max-w-none">
+              <pre className="whitespace-pre-wrap text-sm text-zinc-300 bg-zinc-900/50 p-4 rounded-lg border border-white/10">
+                {feature.summary || summary || agentInfo?.summary || "No summary available"}
+              </pre>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setIsSummaryDialogOpen(false)}
+              data-testid="close-summary-button"
+            >
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Card>
   );
 }