story-kit: merge 87_story_update_agent_lozenge_colour_scheme_across_panels

frontend/src/components/AgentPanel.test.tsx

@@ -88,16 +88,16 @@ describe("RosterBadge availability state", () => {
 		expect(dot.style.animation).toBe("");
 	});
 
-	it("shows green badge styling for an idle agent", async () => {
+	it("shows grey badge styling for an idle agent", async () => {
 		render(<AgentPanel />);
 
 		const badge = await screen.findByTestId("roster-badge-coder-1");
-		// JSDOM normalizes #3fb95015 to rgba(63, 185, 80, 0.082) and #3fb950 to rgb(63, 185, 80)
-		expect(badge.style.background).toBe("rgba(63, 185, 80, 0.082)");
-		expect(badge.style.color).toBe("rgb(63, 185, 80)");
+		// JSDOM normalizes #aaa18 to rgba(170, 170, 170, 0.094) and #aaa to rgb(170, 170, 170)
+		expect(badge.style.background).toBe("rgba(170, 170, 170, 0.094)");
+		expect(badge.style.color).toBe("rgb(170, 170, 170)");
 	});
 
-	it("shows a blue pulsing dot for an active agent", async () => {
+	it("shows a green pulsing dot for an active agent", async () => {
 		const agentList: AgentInfo[] = [
 			{
 				story_id: "81_active",
@@ -113,12 +113,12 @@ describe("RosterBadge availability state", () => {
 		render(<AgentPanel />);
 
 		const dot = await screen.findByTestId("roster-dot-coder-1");
-		// JSDOM normalizes #58a6ff to rgb(88, 166, 255)
-		expect(dot.style.background).toBe("rgb(88, 166, 255)");
+		// JSDOM normalizes #3fb950 to rgb(63, 185, 80)
+		expect(dot.style.background).toBe("rgb(63, 185, 80)");
 		expect(dot.style.animation).toBe("pulse 1.5s infinite");
 	});
 
-	it("shows blue badge styling for an active agent", async () => {
+	it("shows green badge styling for an active agent", async () => {
 		const agentList: AgentInfo[] = [
 			{
 				story_id: "81_active",
@@ -134,9 +134,8 @@ describe("RosterBadge availability state", () => {
 		render(<AgentPanel />);
 
 		const badge = await screen.findByTestId("roster-badge-coder-1");
-		// JSDOM normalizes #58a6ff18 to rgba(88, 166, 255, 0.094) and #58a6ff to rgb(88, 166, 255)
-		expect(badge.style.background).toBe("rgba(88, 166, 255, 0.094)");
-		expect(badge.style.color).toBe("rgb(88, 166, 255)");
+		// JSDOM normalizes #3fb95018 to rgba(63, 185, 80, 0.094) and #3fb950 to rgb(63, 185, 80)
+		expect(badge.style.background).toBe("rgba(63, 185, 80, 0.094)");
+		expect(badge.style.color).toBe("rgb(63, 185, 80)");
 	});
 });
-

frontend/src/components/AgentPanel.tsx

@@ -59,9 +59,9 @@ function RosterBadge({
 				padding: "2px 8px",
 				borderRadius: "6px",
 				fontSize: "0.7em",
-				background: isActive ? "#58a6ff18" : "#3fb95015",
-				color: isActive ? "#58a6ff" : "#3fb950",
-				border: isActive ? "1px solid #58a6ff44" : "1px solid #3fb95040",
+				background: isActive ? "#3fb95018" : "#aaaaaa18",
+				color: isActive ? "#3fb950" : "#aaa",
+				border: isActive ? "1px solid #3fb95044" : "1px solid #aaaaaa44",
 				transition: "background 0.3s, color 0.3s, border-color 0.3s",
 			}}
 			title={
@@ -77,7 +77,7 @@ function RosterBadge({
 						width: "5px",
 						height: "5px",
 						borderRadius: "50%",
-						background: "#58a6ff",
+						background: "#3fb950",
 						animation: "pulse 1.5s infinite",
 						flexShrink: 0,
 					}}
@@ -95,23 +95,21 @@ function RosterBadge({
 					}}
 				/>
 			)}
-			<span
-				style={{ fontWeight: 600, color: isActive ? "#58a6ff" : "#3fb950" }}
-			>
+			<span style={{ fontWeight: 600, color: isActive ? "#3fb950" : "#aaa" }}>
 				{agent.name}
 			</span>
 			{agent.model && (
-				<span style={{ color: isActive ? "#7ab8ff" : "#5ab96a" }}>
+				<span style={{ color: isActive ? "#5ab96a" : "#888" }}>
 					{agent.model}
 				</span>
 			)}
 			{isActive && storyNumber && (
-				<span style={{ color: "#7ab8ff", marginLeft: "2px" }}>
+				<span style={{ color: "#5ab96a", marginLeft: "2px" }}>
 					#{storyNumber}
 				</span>
 			)}
 			{!isActive && (
-				<span style={{ color: "#5ab96a", fontStyle: "italic" }}>available</span>
+				<span style={{ color: "#888", fontStyle: "italic" }}>available</span>
 			)}
 		</span>
 	);

frontend/src/components/LozengeFlyContext.test.tsx

@@ -410,7 +410,7 @@ describe("LozengeFlyProvider fly-out", () => {
 // ─── Idle vs active visual distinction ────────────────────────────────────────
 
 describe("AgentLozenge idle vs active appearance", () => {
-	it("running agent lozenge uses the blue active color", () => {
+	it("running agent lozenge uses the green active color", () => {
 		const items = [
 			{
 				story_id: "74_running_color",
@@ -429,8 +429,8 @@ describe("AgentLozenge idle vs active appearance", () => {
 			'[data-testid="slot-lozenge-74_running_color"]',
 		) as HTMLElement;
 		expect(lozenge).toBeInTheDocument();
-		// Blue: rgb(88, 166, 255) = #58a6ff
-		expect(lozenge.style.color).toBe("rgb(88, 166, 255)");
+		// Green: rgb(63, 185, 80) = #3fb950
+		expect(lozenge.style.color).toBe("rgb(63, 185, 80)");
 	});
 
 	it("pending agent lozenge uses the yellow pending color", () => {

frontend/src/components/LozengeFlyContext.tsx

@@ -323,7 +323,7 @@ function FloatingLozengeSurface({ lozenges }: { lozenges: FlyingLozenge[] }) {
 }
 
 function FlyingLozengeClone({ lozenge }: { lozenge: FlyingLozenge }) {
-	const color = lozenge.isActive ? "#58a6ff" : "#e3b341";
+	const color = lozenge.isActive ? "#3fb950" : "#e3b341";
 	const x = lozenge.flying ? lozenge.endX : lozenge.startX;
 	const y = lozenge.flying ? lozenge.endY : lozenge.startY;
 

frontend/src/components/StagePanel.tsx

@@ -21,7 +21,7 @@ function AgentLozenge({
 	const lozengeRef = useRef<HTMLDivElement>(null);
 	const isRunning = agent.status === "running";
 	const isPending = agent.status === "pending";
-	const color = isRunning ? "#58a6ff" : isPending ? "#e3b341" : "#aaa";
+	const color = isRunning ? "#3fb950" : isPending ? "#e3b341" : "#aaa";
 	const label = agent.model
 		? `${agent.agent_name} ${agent.model}`
 		: agent.agent_name;