story-kit: start 73_story_fade_out_completed_agents

.story_kit/work/2_current/73_story_fade_out_completed_agents.md

@@ -0,0 +1,25 @@
+---
+name: Fade Out Completed Agents in Panel
+test_plan: pending
+---
+
+# "Story 70: Fade Out Completed Agents in Panel"
+
+## User Story
+
+As a user, I want completed agent entries in the Agents panel to gradually fade out and disappear after about 60 seconds, so that the panel doesn't fill up with stale results.
+
+## Acceptance Criteria
+
+- [ ] When an agent reaches a terminal state (completed or failed), a 60-second countdown begins
+- [ ] During the countdown the entry fades from full opacity to zero using a CSS transition
+- [ ] After the fade completes, the entry is removed from the panel DOM
+- [ ] Running and pending agents are never faded or removed
+- [ ] If the user expands a fading entry (clicks the triangle), the fade pauses so they can read the output
+- [ ] Collapsing the entry resumes the fade from where it left off
+
+## Out of Scope
+
+- Persisting completed agent history across page refreshes
+- A "show all completed" toggle to bring back faded entries
+- Configurable fade duration

frontend/src/App.css

@@ -226,3 +226,13 @@ body,
 .pulse {
 	animation: pulse 1.5s infinite;
 }
+
+/* Agent entry fade-out for completed/failed agents */
+@keyframes agentFadeOut {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}

frontend/src/components/AgentPanel.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 import type { AgentConfigInfo, AgentInfo } from "../api/agents";
 import { agentsApi } from "../api/agents";
 
@@ -156,3 +156,207 @@ describe("AgentPanel diff command", () => {
 		).toBeInTheDocument();
 	});
 });
+
+describe("AgentPanel fade-out", () => {
+	beforeAll(() => {
+		Element.prototype.scrollIntoView = vi.fn();
+	});
+
+	beforeEach(() => {
+		mockedAgents.getAgentConfig.mockResolvedValue(ROSTER);
+		mockedAgents.listAgents.mockResolvedValue([]);
+	});
+
+	it("applies fade animation to a completed agent", async () => {
+		const agentList: AgentInfo[] = [
+			{
+				story_id: "73_fade_test",
+				agent_name: "coder-1",
+				status: "completed",
+				session_id: null,
+				worktree_path: null,
+				base_branch: null,
+			},
+		];
+		mockedAgents.listAgents.mockResolvedValue(agentList);
+
+		const { container } = render(<AgentPanel />);
+
+		const entry = await waitFor(() => {
+			const el = container.querySelector(
+				'[data-testid="agent-entry-73_fade_test:coder-1"]',
+			);
+			expect(el).toBeInTheDocument();
+			return el as HTMLElement;
+		});
+
+		expect(entry.style.animationName).toBe("agentFadeOut");
+	});
+
+	it("applies fade animation to a failed agent", async () => {
+		const agentList: AgentInfo[] = [
+			{
+				story_id: "73_fade_fail",
+				agent_name: "coder-1",
+				status: "failed",
+				session_id: null,
+				worktree_path: null,
+				base_branch: null,
+			},
+		];
+		mockedAgents.listAgents.mockResolvedValue(agentList);
+
+		const { container } = render(<AgentPanel />);
+
+		const entry = await waitFor(() => {
+			const el = container.querySelector(
+				'[data-testid="agent-entry-73_fade_fail:coder-1"]',
+			);
+			expect(el).toBeInTheDocument();
+			return el as HTMLElement;
+		});
+
+		expect(entry.style.animationName).toBe("agentFadeOut");
+	});
+
+	it("does not apply fade animation to a running agent", async () => {
+		const agentList: AgentInfo[] = [
+			{
+				story_id: "73_running",
+				agent_name: "coder-1",
+				status: "running",
+				session_id: null,
+				worktree_path: null,
+				base_branch: null,
+			},
+		];
+		mockedAgents.listAgents.mockResolvedValue(agentList);
+
+		const { container } = render(<AgentPanel />);
+
+		const entry = await waitFor(() => {
+			const el = container.querySelector(
+				'[data-testid="agent-entry-73_running:coder-1"]',
+			);
+			expect(el).toBeInTheDocument();
+			return el as HTMLElement;
+		});
+
+		expect(entry.style.animationName).not.toBe("agentFadeOut");
+	});
+
+	it("pauses the fade when the entry is expanded", async () => {
+		const agentList: AgentInfo[] = [
+			{
+				story_id: "73_pause_test",
+				agent_name: "coder-1",
+				status: "completed",
+				session_id: null,
+				worktree_path: null,
+				base_branch: null,
+			},
+		];
+		mockedAgents.listAgents.mockResolvedValue(agentList);
+
+		const { container } = render(<AgentPanel />);
+
+		const entry = await waitFor(() => {
+			const el = container.querySelector(
+				'[data-testid="agent-entry-73_pause_test:coder-1"]',
+			);
+			expect(el).toBeInTheDocument();
+			return el as HTMLElement;
+		});
+
+		// Initially running (not paused)
+		expect(entry.style.animationPlayState).toBe("running");
+
+		// Expand the agent
+		const expandButton = screen.getByRole("button", { name: "▶" });
+		await userEvent.click(expandButton);
+
+		// Animation should be paused
+		expect(entry.style.animationPlayState).toBe("paused");
+	});
+
+	it("resumes the fade when the entry is collapsed", async () => {
+		const agentList: AgentInfo[] = [
+			{
+				story_id: "73_resume_test",
+				agent_name: "coder-1",
+				status: "completed",
+				session_id: null,
+				worktree_path: null,
+				base_branch: null,
+			},
+		];
+		mockedAgents.listAgents.mockResolvedValue(agentList);
+
+		const { container } = render(<AgentPanel />);
+
+		const entry = await waitFor(() => {
+			const el = container.querySelector(
+				'[data-testid="agent-entry-73_resume_test:coder-1"]',
+			);
+			expect(el).toBeInTheDocument();
+			return el as HTMLElement;
+		});
+
+		const expandButton = screen.getByRole("button", { name: "▶" });
+
+		// Expand
+		await userEvent.click(expandButton);
+		expect(entry.style.animationPlayState).toBe("paused");
+
+		// Collapse
+		await userEvent.click(expandButton);
+		expect(entry.style.animationPlayState).toBe("running");
+	});
+
+	describe("removes the agent entry after 60s", () => {
+		beforeEach(() => {
+			vi.useFakeTimers();
+		});
+
+		afterEach(() => {
+			vi.useRealTimers();
+		});
+
+		it("removes the agent entry after the 60-second fade completes", async () => {
+			const agentList: AgentInfo[] = [
+				{
+					story_id: "73_remove_test",
+					agent_name: "coder-1",
+					status: "completed",
+					session_id: null,
+					worktree_path: null,
+					base_branch: null,
+				},
+			];
+			mockedAgents.listAgents.mockResolvedValue(agentList);
+
+			const { container } = render(<AgentPanel />);
+
+			// Wait for the agent entry to appear
+			await waitFor(() => {
+				expect(
+					container.querySelector(
+						'[data-testid="agent-entry-73_remove_test:coder-1"]',
+					),
+				).toBeInTheDocument();
+			});
+
+			// Advance timers by 60 seconds
+			vi.advanceTimersByTime(60_000);
+
+			// Entry should be removed
+			await waitFor(() => {
+				expect(
+					container.querySelector(
+						'[data-testid="agent-entry-73_remove_test:coder-1"]',
+					),
+				).not.toBeInTheDocument();
+			});
+		});
+	});
+});

frontend/src/components/AgentPanel.tsx

@@ -16,6 +16,7 @@ interface AgentState {
 	sessionId: string | null;
 	worktreePath: string | null;
 	baseBranch: string | null;
+	terminalAt: number | null;
 }
 
 const STATUS_COLORS: Record<AgentStatusValue, string> = {
@@ -283,6 +284,8 @@ export function EditorCommand({
 	);
 }
 
+const FADE_DURATION_MS = 60_000;
+
 export function AgentPanel() {
 	const [agents, setAgents] = useState<Record<string, AgentState>>({});
 	const [roster, setRoster] = useState<AgentConfigInfo[]>([]);
@@ -294,6 +297,10 @@ export function AgentPanel() {
 	const [editingEditor, setEditingEditor] = useState(false);
 	const cleanupRefs = useRef<Record<string, () => void>>({});
 	const logEndRefs = useRef<Record<string, HTMLDivElement | null>>({});
+	// Refs for fade-out timers (pause/resume on expand/collapse)
+	const fadeTimerRef = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+	const fadeElapsedRef = useRef<Record<string, number>>({});
+	const fadeTimerStartRef = useRef<Record<string, number | null>>({});
 
 	// Load roster, existing agents, and editor preference on mount
 	useEffect(() => {
@@ -306,8 +313,11 @@ export function AgentPanel() {
 			.listAgents()
 			.then((agentList) => {
 				const agentMap: Record<string, AgentState> = {};
+				const now = Date.now();
 				for (const a of agentList) {
 					const key = agentKey(a.story_id, a.agent_name);
+					const isTerminal =
+						a.status === "completed" || a.status === "failed";
 					agentMap[key] = {
 						agentName: a.agent_name,
 						status: a.status,
@@ -315,6 +325,7 @@ export function AgentPanel() {
 						sessionId: a.session_id,
 						worktreePath: a.worktree_path,
 						baseBranch: a.base_branch,
+						terminalAt: isTerminal ? now : null,
 					};
 					if (a.status === "running" || a.status === "pending") {
 						subscribeToAgent(a.story_id, a.agent_name);
@@ -357,17 +368,26 @@ export function AgentPanel() {
 						sessionId: null,
 						worktreePath: null,
 						baseBranch: null,
+						terminalAt: null,
 					};
 
 					switch (event.type) {
-						case "status":
+						case "status": {
+							const newStatus =
+								(event.status as AgentStatusValue) ?? current.status;
+							const isTerminal =
+								newStatus === "completed" || newStatus === "failed";
 							return {
 								...prev,
 								[key]: {
 									...current,
-									status: (event.status as AgentStatusValue) ?? current.status,
+									status: newStatus,
+									terminalAt: isTerminal
+										? (current.terminalAt ?? Date.now())
+										: current.terminalAt,
 								},
 							};
+						}
 						case "output":
 							return {
 								...prev,
@@ -383,6 +403,7 @@ export function AgentPanel() {
 									...current,
 									status: "completed",
 									sessionId: event.session_id ?? current.sessionId,
+									terminalAt: current.terminalAt ?? Date.now(),
 								},
 							};
 						case "error":
@@ -395,6 +416,7 @@ export function AgentPanel() {
 										...current.log,
 										`[ERROR] ${event.message ?? "Unknown error"}`,
 									],
+									terminalAt: current.terminalAt ?? Date.now(),
 								},
 							};
 						default:
@@ -418,6 +440,53 @@ export function AgentPanel() {
 		}
 	}, [expandedKey, agents]);
 
+	// Manage fade-out timers for terminal agents.
+	// Timers are paused when an entry is expanded and resumed on collapse.
+	useEffect(() => {
+		for (const [key, agent] of Object.entries(agents)) {
+			if (!agent.terminalAt) continue;
+			const isExpanded = expandedKey === key;
+			const hasTimer = key in fadeTimerRef.current;
+
+			if (isExpanded && hasTimer) {
+				// Pause: clear timer and accumulate elapsed time
+				clearTimeout(fadeTimerRef.current[key]);
+				const started = fadeTimerStartRef.current[key];
+				if (started !== null && started !== undefined) {
+					fadeElapsedRef.current[key] =
+						(fadeElapsedRef.current[key] ?? 0) + (Date.now() - started);
+				}
+				delete fadeTimerRef.current[key];
+				fadeTimerStartRef.current[key] = null;
+			} else if (!isExpanded && !hasTimer) {
+				// Start or resume timer with remaining time
+				const elapsed = fadeElapsedRef.current[key] ?? 0;
+				const remaining = Math.max(0, FADE_DURATION_MS - elapsed);
+				fadeTimerStartRef.current[key] = Date.now();
+				fadeTimerRef.current[key] = setTimeout(() => {
+					setAgents((prev) => {
+						const next = { ...prev };
+						delete next[key];
+						return next;
+					});
+					delete fadeTimerRef.current[key];
+					delete fadeTimerStartRef.current[key];
+					delete fadeElapsedRef.current[key];
+				}, remaining);
+			}
+		}
+	}, [agents, expandedKey]);
+
+	// Clean up fade timers on unmount
+	useEffect(() => {
+		return () => {
+			for (const timer of Object.values(fadeTimerRef.current)) {
+				clearTimeout(timer);
+			}
+			fadeTimerRef.current = {};
+		};
+	}, []);
+
 	const handleStop = async (storyId: string, agentName: string) => {
 		setActionError(null);
 		const key = agentKey(storyId, agentName);
@@ -626,11 +695,22 @@ export function AgentPanel() {
 					{Object.entries(agents).map(([key, a]) => (
 						<div
 							key={`agent-${key}`}
+							data-testid={`agent-entry-${key}`}
 							style={{
 								border: "1px solid #2a2a2a",
 								borderRadius: "8px",
 								background: "#191919",
 								overflow: "hidden",
+								...(a.terminalAt
+									? {
+											animationName: "agentFadeOut",
+											animationDuration: "60s",
+											animationTimingFunction: "linear",
+											animationFillMode: "forwards",
+											animationPlayState:
+												expandedKey === key ? "paused" : "running",
+										}
+									: {}),
 							}}
 						>
 							<div