mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-01-31 20:03:37 +00:00
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>
This commit is contained in:
Kacper
@@ -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`,
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
246
app/src/lib/agent-context-parser.ts
Normal file
246
app/src/lib/agent-context-parser.ts
Normal file
@@ -0,0 +1,246 @@
|
||||
/**
|
||||
* 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 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 summary sections
|
||||
const summaryMatch = content.match(/## Summary[^\n]*\n([\s\S]{1,500}?)(?=\n##|\n🔧|$)/i);
|
||||
if (summaryMatch) {
|
||||
return summaryMatch[1].trim();
|
||||
}
|
||||
|
||||
// Look for "What was done" type sections
|
||||
const whatWasDoneMatch = content.match(/(?:What was done|Changes made|Implemented)[^\n]*\n([\s\S]{1,500}?)(?=\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,
|
||||
};
|
||||
}
|
||||
@@ -61,6 +61,7 @@ export interface Feature {
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user