diff --git a/.coverage_baseline b/.coverage_baseline
new file mode 100644
index 0000000..cc7fba8
--- /dev/null
+++ b/.coverage_baseline
@@ -0,0 +1 @@
+64.60
diff --git a/frontend/src/components/AgentPanel.test.tsx b/frontend/src/components/AgentPanel.test.tsx
index dd156e6..3b057e3 100644
--- a/frontend/src/components/AgentPanel.test.tsx
+++ b/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();
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();
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();
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)");
});
});
-
diff --git a/frontend/src/components/AgentPanel.tsx b/frontend/src/components/AgentPanel.tsx
index 01105bc..3476c8a 100644
--- a/frontend/src/components/AgentPanel.tsx
+++ b/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({
}}
/>
)}
-
+
{agent.name}
{agent.model && (
-
+
{agent.model}
)}
{isActive && storyNumber && (
-
+
#{storyNumber}
)}
{!isActive && (
- available
+ available
)}
);
diff --git a/frontend/src/components/LozengeFlyContext.test.tsx b/frontend/src/components/LozengeFlyContext.test.tsx
index c623bd9..b542c2a 100644
--- a/frontend/src/components/LozengeFlyContext.test.tsx
+++ b/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", () => {
diff --git a/frontend/src/components/LozengeFlyContext.tsx b/frontend/src/components/LozengeFlyContext.tsx
index f40d426..ab495b0 100644
--- a/frontend/src/components/LozengeFlyContext.tsx
+++ b/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;
diff --git a/frontend/src/components/StagePanel.tsx b/frontend/src/components/StagePanel.tsx
index 1d6e1c4..eee562d 100644
--- a/frontend/src/components/StagePanel.tsx
+++ b/frontend/src/components/StagePanel.tsx
@@ -21,7 +21,7 @@ function AgentLozenge({
const lozengeRef = useRef(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;