story-kit: merge 81_story_agent_roster_badges_show_availability_state

frontend/src/components/AgentPanel.tsx

@@ -105,19 +105,20 @@ function RosterBadge({
 				padding: "2px 8px",
 				borderRadius: "6px",
 				fontSize: "0.7em",
-				background: isActive ? "#58a6ff18" : "#ffffff08",
-				color: isActive ? "#58a6ff" : "#888",
-				border: isActive ? "1px solid #58a6ff44" : "1px solid #333",
+				background: isActive ? "#58a6ff18" : "#3fb95015",
+				color: isActive ? "#58a6ff" : "#3fb950",
+				border: isActive ? "1px solid #58a6ff44" : "1px solid #3fb95040",
 				transition: "background 0.3s, color 0.3s, border-color 0.3s",
 			}}
 			title={
 				isActive
 					? `Working on #${storyNumber ?? activeStoryId}`
-					: `${agent.role || agent.name} — idle`
+					: `${agent.role || agent.name} — available`
 			}
 		>
 			{isActive && (
 				<span
+					data-testid={`roster-dot-${agent.name}`}
 					style={{
 						width: "5px",
 						height: "5px",
@@ -130,20 +131,23 @@ function RosterBadge({
 			)}
 			{!isActive && (
 				<span
+					data-testid={`roster-dot-${agent.name}`}
 					style={{
 						width: "5px",
 						height: "5px",
 						borderRadius: "50%",
-						background: "#555",
+						background: "#3fb950",
 						flexShrink: 0,
 					}}
 				/>
 			)}
-			<span style={{ fontWeight: 600, color: isActive ? "#58a6ff" : "#aaa" }}>
+			<span
+				style={{ fontWeight: 600, color: isActive ? "#58a6ff" : "#3fb950" }}
+			>
 				{agent.name}
 			</span>
 			{agent.model && (
-				<span style={{ color: isActive ? "#7ab8ff" : "#666" }}>
+				<span style={{ color: isActive ? "#7ab8ff" : "#5ab96a" }}>
 					{agent.model}
 				</span>
 			)}
@@ -153,7 +157,7 @@ function RosterBadge({
 				</span>
 			)}
 			{!isActive && (
-				<span style={{ color: "#444", fontStyle: "italic" }}>idle</span>
+				<span style={{ color: "#5ab96a", fontStyle: "italic" }}>available</span>
 			)}
 		</span>
 	);