From 93edd39a2b470982efffd7bc159576642698fcda Mon Sep 17 00:00:00 2001
From: William Valentin <william.valentin.info@gmail.com>
Date: Wed, 18 Mar 2026 10:16:50 -0700
Subject: [PATCH] feat: add infrastructure page CSS

---
 cmd/web-ui/static/style.css | 141 ++++++++++++++++++++++++++++++++++++
 1 file changed, 141 insertions(+)

diff --git a/cmd/web-ui/static/style.css b/cmd/web-ui/static/style.css
index 29fae0a..aea1417 100644
--- a/cmd/web-ui/static/style.css
+++ b/cmd/web-ui/static/style.css
@@ -1720,3 +1720,144 @@ tr.expandable:hover .expand-icon::before {
     font-size: 0.73rem;
   }
 }
+
+/* ── Infrastructure page ──────────────────────────────────── */
+.infra-section-title {
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  margin: 0 0 1rem 0;
+}
+
+.infra-section {
+  margin-bottom: 2rem;
+}
+
+/* Service card grid */
+.service-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1.25rem;
+}
+
+.service-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1.125rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  transition: border-color 0.2s;
+}
+
+.service-card:hover {
+  border-color: rgba(34, 211, 238, 0.15);
+}
+
+.service-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.service-card-name {
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--text-bright);
+}
+
+.service-badge {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 0.2rem 0.55rem;
+  border-radius: 999px;
+}
+
+.service-badge.healthy {
+  background: rgba(52, 211, 153, 0.12);
+  color: var(--success);
+  border: 1px solid rgba(52, 211, 153, 0.2);
+}
+
+.service-badge.degraded {
+  background: rgba(251, 191, 36, 0.12);
+  color: var(--warning);
+  border: 1px solid rgba(251, 191, 36, 0.2);
+}
+
+.service-badge.down {
+  background: rgba(248, 113, 113, 0.12);
+  color: var(--error);
+  border: 1px solid rgba(248, 113, 113, 0.2);
+}
+
+.service-role-tag {
+  font-size: 0.65rem;
+  font-family: var(--font-mono);
+  color: var(--text-dim);
+  margin-top: -0.25rem;
+}
+
+.service-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  font-size: 0.78rem;
+}
+
+.service-stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.service-stat-label {
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+}
+
+.service-stat-value {
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+}
+
+.service-stat-value.ok   { color: var(--success); }
+.service-stat-value.warn { color: var(--warning); }
+.service-stat-value.bad  { color: var(--error); }
+
+/* LiteLLM cooldown warning */
+.llm-cooldown-banner {
+  background: rgba(251, 191, 36, 0.08);
+  border: 1px solid rgba(251, 191, 36, 0.2);
+  border-radius: var(--radius);
+  padding: 0.4rem 0.625rem;
+  font-size: 0.72rem;
+  color: var(--warning);
+  font-family: var(--font-mono);
+}
+
+/* LiteLLM model count highlight */
+.llm-model-count {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--text-bright);
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+
+.llm-model-label {
+  font-size: 0.68rem;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}