UI: spot savings multiplier, AWS pool prices, scrollable node grid

- Show the spot price as a <1× multiplier of on-demand (e.g. 0.42×) with a
  'spot vs on-dmd' label, colored by how much you're saving; node spot tags
  show the effective $/hr and savings %.
- Node-pool dropdown shows realistic specs and prices (spot priced ~0.45×).
- Make the node and queue panels flex columns whose lists scroll
  internally, so a large cluster no longer overflows its row and covers the
  event log.

Co-authored-by: Jason Hall <imjasonh@users.noreply.github.com>

k8s-scheduler-game/src/ui.js

@@ -46,12 +46,14 @@ export class UI {
     nodeSel.innerHTML = Object.values(INSTANCE_TYPES)
       .map((t) => {
         const gpu = t.gpu ? `, ${t.gpu} GPU` : "";
+        const price =
+          t.family === "spot" ? `~$${(t.cost * 0.45).toFixed(2)}/hr spot` : `$${t.cost.toFixed(2)}/hr`;
         return `<option value="${t.key}">${t.key} — ${fmtCpu(t.cpu)} vCPU / ${fmtMem(
           t.mem
-        )}${gpu} · $${t.cost.toFixed(2)}/hr</option>`;
+        )}${gpu} · ${price}</option>`;
       })
       .join("");
-    nodeSel.value = "general-large";
+    nodeSel.value = "c5.2xlarge";
   }
 
   wire() {
@@ -285,7 +287,7 @@ export class UI {
       { l: "Running", v: g.runningCount(), cls: "" },
       { l: "Nodes", v: `${ready}/${s.nodes.length}`, cls: "" },
       { l: "Cost", v: `$${g.hourlyCost().toFixed(2)}/hr`, cls: "" },
-      { l: "Spot price", v: `${spot.toFixed(2)}×`, cls: spot >= 1.5 ? "bad" : spot <= 0.8 ? "good" : "" },
+      { l: "spot vs on-dmd", v: `${spot.toFixed(2)}×`, cls: spot <= 0.5 ? "good" : spot >= 0.75 ? "bad" : "" },
       {
         l: s.upgradePending ? `upgrade: ${outdated} left` : "k8s version",
         v: `v1.${s.clusterMinor}`,
@@ -346,7 +348,9 @@ export class UI {
       .map((t) => `<span class="tag taint">⛔ ${t.key}=${t.value}:${t.effect}</span>`)
       .join("");
     const spotTag = node.spot
-      ? `<span class="tag spot">⚡ spot $${(node.cost * s.spotPrice).toFixed(2)}/hr</span>`
+      ? `<span class="tag spot">⚡ spot $${(node.cost * s.spotPrice).toFixed(2)}/hr · −${Math.round(
+          (1 - s.spotPrice) * 100
+        )}%</span>`
       : "";
 
     const cpuBar = this.meter("CPU", used.cpu, node.cpu, meterPods, "cpu");

k8s-scheduler-game/styles.css

@@ -271,7 +271,7 @@ button:focus-visible {
   grid-template-columns: 1fr 340px;
   gap: 16px;
   padding: 16px 22px;
-  align-items: start;
+  align-items: stretch;
   min-height: 0;
 }
 .panel {
@@ -292,11 +292,22 @@ button:focus-visible {
   letter-spacing: 0.3px;
 }
 
+/* The node and queue panels are flex columns whose lists scroll internally,
+   so a long cluster never overflows its row and covers the event log. */
+.nodes,
+.queue {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
 .nodegrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 14px;
   padding: 16px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 /* --------------------------------------------------------------- node card */
@@ -543,10 +554,6 @@ button:focus-visible {
 }
 
 /* --------------------------------------------------------------- queue */
-.queue {
-  position: sticky;
-  top: 16px;
-}
 .hint {
   margin: 0;
   padding: 8px 16px;
@@ -559,7 +566,8 @@ button:focus-visible {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  max-height: calc(100vh - 360px);
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
 }
 .empty-state {