feat: add SVG key renderers for inflight and GPU graph actions

tests/render.test.ts

@@ -0,0 +1,78 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { renderGpuGraph, renderInflight, svgDataUrl } from "../src/lib/render";
+
+test("svgDataUrl wraps an SVG as a base64 data URL", () => {
+  const url = svgDataUrl("<svg></svg>");
+  assert.match(url, /^data:image\/svg\+xml;base64,/);
+});
+
+test("renderInflight: ready + count renders IDLE in green", () => {
+  const svg = renderInflight({ modelName: "Qwen3.8-27B-NVFP4", state: "ready", count: 0, offline: false, pulse: false });
+  assert.match(svg, /IDLE/);
+  assert.match(svg, /#1e6b34/);
+  assert.doesNotMatch(svg, /ACTIVE/);
+});
+
+test("renderInflight: ready + count>0 renders ACTIVE in red", () => {
+  const svg = renderInflight({ modelName: "Qwen3.8-27B-NVFP4", state: "ready", count: 2, offline: false, pulse: false });
+  assert.match(svg, /ACTIVE/);
+  assert.match(svg, /#8b2626/);
+});
+
+test("renderInflight: pulse toggles opacity while active", () => {
+  const a = renderInflight({ modelName: "A", state: "ready", count: 1, offline: false, pulse: false });
+  const b = renderInflight({ modelName: "A", state: "ready", count: 1, offline: false, pulse: true });
+  assert.notEqual(a, b);
+  assert.match(b, /opacity="0.55"/);
+});
+
+test("renderInflight: offline and no-model states", () => {
+  const offline = renderInflight({ modelName: "A", state: "ready", count: 0, offline: true, pulse: false });
+  assert.match(offline, /OFFLINE/);
+  const noModel = renderInflight({ modelName: "unset", state: undefined, count: 0, offline: false, pulse: false });
+  assert.match(noModel, /NO MODEL/);
+});
+
+test("renderInflight: loading renders LOADING in amber", () => {
+  const svg = renderInflight({ modelName: "A", state: "loading", count: 0, offline: false, pulse: false });
+  assert.match(svg, /LOADING/);
+  assert.match(svg, /#8a6d1d/);
+});
+
+test("renderGpuGraph: draws a polyline, value, and metric label", () => {
+  const svg = renderGpuGraph({
+    gpuName: "GPU 2 · RTX 5090",
+    metric: "util_percent",
+    value: 67,
+    history: [0, 20, 40, 67],
+    offline: false,
+  });
+  assert.match(svg, /<polyline/);
+  assert.match(svg, /67%/);
+  assert.match(svg, /UTIL/);
+  assert.match(svg, /GPU 2/);
+});
+
+test("renderGpuGraph: power draws a watts value", () => {
+  const svg = renderGpuGraph({
+    gpuName: "ALL GPUS",
+    metric: "power",
+    value: 1030,
+    history: [900, 1000, 1030],
+    offline: false,
+  });
+  assert.match(svg, /1030W/);
+  assert.match(svg, /PWR/);
+  assert.match(svg, /ALL GPUS/);
+});
+
+test("renderGpuGraph: offline frame", () => {
+  const svg = renderGpuGraph({ gpuName: "ALL GPUS", metric: "util_percent", value: undefined, history: [], offline: true });
+  assert.match(svg, /OFFLINE/);
+});
+
+test("renderGpuGraph: single-point history avoids divide-by-zero", () => {
+  const svg = renderGpuGraph({ gpuName: "ALL GPUS", metric: "util_percent", value: 50, history: [50], offline: false });
+  assert.match(svg, /<svg/);
+});