From ca478ee1248771c163634c7240be25fee78d0e95 Mon Sep 17 00:00:00 2001
From: Bryce Zuccaro <bryce@zuccaro.me>
Date: Fri, 14 Aug 2026 12:11:07 -0600
Subject: [PATCH] style: use a constant dark background for the In-Flight
 Monitor key

---
 src/lib/render.ts    |  9 ++++-----
 tests/render.test.ts | 15 +++++++++------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/lib/render.ts b/src/lib/render.ts
index 6724a8a..7139787 100644
--- a/src/lib/render.ts
+++ b/src/lib/render.ts
@@ -26,7 +26,7 @@ export function renderInflight(opts: InflightRenderOptions): string {
   const name = escapeXml(shorten(opts.modelName));
 
   if (opts.offline) {
-    return frame("#3a3a3a", [
+    return frame("#10131a", [
       centerText("!!", 34, 20, "bold", "#e0e0e0"),
       centerText("OFFLINE", 52, 9, "normal", "#bdbdbd"),
       centerText(name, 64, 7, "normal", "#ffffff"),
@@ -34,18 +34,17 @@ export function renderInflight(opts: InflightRenderOptions): string {
   }
 
   if (opts.modelName === "unset") {
-    return frame("#222222", [
+    return frame("#10131a", [
       centerText("?", 36, 16, "bold", "#888888"),
       centerText("NO MODEL", 54, 8, "normal", "#666666"),
     ]);
   }
 
   if (!opts.state) {
-    return frame("#222222", [centerText("…", 36, 16, "bold", "#999999"), centerText(name, 60, 7, "normal", "#999999")]);
+    return frame("#10131a", [centerText("…", 36, 16, "bold", "#999999"), centerText(name, 60, 7, "normal", "#999999")]);
   }
 
   const isActive = opts.state === "ready" && opts.count > 0;
-  const bg = opts.state === "ready" ? (isActive ? "#8b2626" : "#1e6b34") : opts.state === "loading" ? "#8a6d1d" : "#3a3a3a";
   const center = isActive ? `${opts.count}` : opts.state === "ready" ? "IDLE" : opts.state === "loading" ? "LOADING" : "OFF";
   const centerSize = isActive ? 24 : 16;
 
@@ -64,7 +63,7 @@ export function renderInflight(opts: InflightRenderOptions): string {
     }
   }
 
-  return frame(bg, parts);
+  return frame("#10131a", parts);
 }
 
 export interface GpuGraphRenderOptions {
diff --git a/tests/render.test.ts b/tests/render.test.ts
index 0e2685f..45d2e52 100644
--- a/tests/render.test.ts
+++ b/tests/render.test.ts
@@ -7,19 +7,21 @@ test("svgDataUrl wraps an SVG as a base64 data URL", () => {
   assert.match(url, /^data:image\/svg\+xml;base64,/);
 });
 
-test("renderInflight: ready + count renders IDLE in green", () => {
+test("renderInflight: ready + count renders IDLE on dark bg", () => {
   const svg = renderInflight({ modelName: "Qwen3.8-27B-NVFP4", state: "ready", count: 0, offline: false });
   assert.match(svg, /IDLE/);
-  assert.match(svg, /#1e6b34/);
+  assert.match(svg, /#10131a/);
   assert.doesNotMatch(svg, /ACTIVE/);
+  assert.doesNotMatch(svg, /#1e6b34/);
 });
 
-test("renderInflight: ready + count>0 renders the count number on red", () => {
+test("renderInflight: ready + count>0 renders the count number on dark bg", () => {
   const svg = renderInflight({ modelName: "Qwen3.8-27B-NVFP4", state: "ready", count: 2, offline: false });
   assert.match(svg, /2/);
-  assert.match(svg, /#8b2626/);
+  assert.match(svg, /#10131a/);
   assert.doesNotMatch(svg, /ACTIVE/);
   assert.doesNotMatch(svg, /IDLE/);
+  assert.doesNotMatch(svg, /#8b2626/);
 });
 
 test("renderInflight: idle state does not show a count number", () => {
@@ -54,10 +56,11 @@ test("renderInflight: offline and no-model states", () => {
   assert.match(noModel, /NO MODEL/);
 });
 
-test("renderInflight: loading renders LOADING in amber", () => {
+test("renderInflight: loading renders LOADING on dark bg", () => {
   const svg = renderInflight({ modelName: "A", state: "loading", count: 0, offline: false });
   assert.match(svg, /LOADING/);
-  assert.match(svg, /#8a6d1d/);
+  assert.match(svg, /#10131a/);
+  assert.doesNotMatch(svg, /#8a6d1d/);
 });
 
 test("renderGpuGraph: draws a polyline, value, and metric label", () => {