story-kit: merge 143_story_remove_0_running_count_from_agents_panel_header

frontend/src/components/AgentPanel.test.tsx

@@ -70,6 +70,47 @@ describe("AgentPanel active work list removed", () => {
 	});
 });
 
+describe("Running count visibility in header", () => {
+	beforeAll(() => {
+		Element.prototype.scrollIntoView = vi.fn();
+	});
+
+	beforeEach(() => {
+		mockedAgents.getAgentConfig.mockResolvedValue(ROSTER);
+		mockedAgents.listAgents.mockResolvedValue([]);
+	});
+
+	// AC1: When no agents are running, "0 running" is NOT visible
+	it("does not show running count when no agents are running", async () => {
+		render(<AgentPanel />);
+
+		// Wait for roster to load
+		await screen.findByTestId("roster-badge-coder-1");
+
+		expect(screen.queryByText(/0 running/)).not.toBeInTheDocument();
+	});
+
+	// AC2: When agents are running, "N running" IS visible
+	it("shows running count when agents are running", async () => {
+		const agentList: AgentInfo[] = [
+			{
+				story_id: "99_active",
+				agent_name: "coder-1",
+				status: "running",
+				session_id: null,
+				worktree_path: "/tmp/wt",
+				base_branch: "master",
+				log_session_id: null,
+			},
+		];
+		mockedAgents.listAgents.mockResolvedValue(agentList);
+
+		render(<AgentPanel />);
+
+		await screen.findByText(/1 running/);
+	});
+});
+
 describe("RosterBadge availability state", () => {
 	beforeAll(() => {
 		Element.prototype.scrollIntoView = vi.fn();

frontend/src/components/AgentPanel.tsx

@@ -268,16 +268,22 @@ export function AgentPanel({ configVersion = 0 }: AgentPanelProps) {
 					}}
 				>
 					<div style={{ fontWeight: 600 }}>Agents</div>
-					<div
+					{Object.values(agents).filter((a) => a.status === "running").length >
-						style={{
+						0 && (
-							fontSize: "0.75em",
+						<div
-							color: "#777",
+							style={{
-							fontFamily: "monospace",
+								fontSize: "0.75em",
-						}}
+								color: "#777",
-					>
+								fontFamily: "monospace",
-						{Object.values(agents).filter((a) => a.status === "running").length}{" "}
+							}}
-						running
+						>
-					</div>
+							{
+								Object.values(agents).filter((a) => a.status === "running")
+									.length
+							}{" "}
+							running
+						</div>
+					)}
 				</div>
 				{lastRefresh && (
 					<div style={{ fontSize: "0.7em", color: "#555" }}>