New Admin Dashboard UI

bin/SHA256SUMS

@@ -1,4 +1,4 @@
 118e09f98944ac59593af603c04a1d5f0e7cafb6549b5a562300bc31d9c769da  control-api
 48c9b99fa88be751d9badfba8b7d80f894e326a743a90e85478f1d2251ce4ab6  validator-agent
 8877cf7c6d2bdd58faf70865be602b3db5f18508f4607c8942bc8899ce0fb1e6  prober
-73bdf0ccda4912f25710a09bd37eaa0620f1b6e5002cb50e6b8b057cecb17f97  admin-dashboard
+8d18a72276cdb1a7c14c919c9243446f467bdf9aa99f26d856aa954546031731  admin-dashboard

internal/dashboard/static/dashboard.css

@@ -1,40 +1,92 @@
 /* Cloud IP Validator — admin dashboard design system.
    Self-contained, no framework: tokens + a small set of components
    (sidebar shell, panels, tables, pills, forms, buttons, alerts).
-   Fonts are vendored separately — see vendor/fonts.css. */
+   Fonts are vendored separately — see vendor/fonts.css.
+
+   Palette: cool signal-blue accent on a blue-grey neutral ground (was a
+   warm teal/green), semantic status colors kept independent of the
+   accent. Radius: a sharp 2/3/4/6px scale (was 6/10/16px + pill) — status
+   badges are square tags, not pills. Typography: --font-display
+   (IBM Plex Mono, already vendored) carries headings/nav/labels/table
+   heads — an operations-console register — while --font-ui (Manrope)
+   stays on body copy and form microcopy for readability at length.
+   Both a light and a dark palette are defined; the dark one activates
+   automatically from the OS/browser color-scheme (no in-app toggle). */
 
 :root {
-  --bg: #F4F7F6;
+  --bg: #EEF1F5;
   --surface: #FFFFFF;
-  --surface-alt: #ECF2F1;
-  --border: #E1E8E7;
-  --border-soft: #EAF0EF;
-  --text: #12201F;
-  --text-muted: #5E6F6D;
-  --text-faint: #8B9997;
+  --surface-alt: #E4E9F0;
+  --border: #CBD3DE;
+  --border-soft: #DCE2EA;
+  --text: #12161F;
+  --text-muted: #566073;
+  --text-faint: #8992A3;
 
-  --accent: #146C74;
-  --accent-strong: #0F565C;
-  --accent-soft: #E1F0EF;
+  --accent: #2F5FE0;
+  --accent-strong: #1F45B0;
+  --accent-soft: #E1E9FC;
   --accent-contrast: #FFFFFF;
 
-  --success: #1D8A5C; --success-soft: #E3F6EC;
-  --warning: #B4790F; --warning-soft: #FBF0DD;
-  --danger:  #C13A2E; --danger-soft:  #FCE8E6;
-  --info:    #3A6EA5; --info-soft:    #E7EFF8;
-  --neutral: #5B6B6C; --neutral-soft: #EDF1F0;
-  --cancel:  #7A5AC0; --cancel-soft:  #F1ECFB;
+  --success: #157F45; --success-soft: #DFF3E7;
+  --warning: #9A6400; --warning-soft: #F8EDD4; --warning-border: #E8CE97;
+  --danger:  #B4291D; --danger-soft:  #FADEDA; --danger-border:  #E7B3AC;
+  --info:    #0E6FA8; --info-soft:    #DDEEF8;
+  --neutral: #5B6576; --neutral-soft: #E4E8EE;
+  --cancel:  #6D4FC4; --cancel-soft:  #ECE7FA;
 
-  --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 16px;
-  --radius-pill: 999px;
+  --overlay: rgba(10, 14, 20, .32);
 
-  --shadow-sm: 0 1px 2px rgba(18, 32, 31, .05), 0 1px 1px rgba(18, 32, 31, .04);
-  --shadow-md: 0 8px 24px rgba(18, 32, 31, .08);
+  --radius-xs: 2px;
+  --radius-sm: 3px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+
+  --shadow-sm: 0 1px 2px rgba(12, 18, 30, .06), 0 1px 1px rgba(12, 18, 30, .05);
+  --shadow-md: 0 10px 28px rgba(12, 18, 30, .16);
 
   --font-ui: "Manrope", -apple-system, "Segoe UI", sans-serif;
   --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
+  /* Same physical face as --font-mono today (only Plex Mono is vendored)
+     but a distinct token: it marks the "console chrome" role (headings,
+     nav, labels, table heads) versus --font-mono's "raw data" role
+     (addresses, counters), so the two can diverge later without a
+     find-and-replace. */
+  --font-display: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
+
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0A0D13;
+    --surface: #10141C;
+    --surface-alt: #161B25;
+    --border: #262E3B;
+    --border-soft: #1D2430;
+    --text: #E7ECF5;
+    --text-muted: #8D97AC;
+    --text-faint: #626D82;
+
+    --accent: #5C8CFF;
+    --accent-strong: #82A6FF;
+    --accent-soft: #182140;
+    --accent-contrast: #071022;
+
+    --success: #3DDC8A; --success-soft: #10261C;
+    --warning: #F0B429; --warning-soft: #2B2210; --warning-border: #4A3B14;
+    --danger:  #FF6B5E; --danger-soft:  #2C1613; --danger-border:  #5A2620;
+    --info:    #5AC0FF; --info-soft:    #10222E;
+    --neutral: #A3ACBE; --neutral-soft: #1B212B;
+    --cancel:  #B79CFF; --cancel-soft:  #221B3A;
+
+    --overlay: rgba(0, 0, 0, .55);
+
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
+    --shadow-md: 0 16px 40px rgba(0, 0, 0, .5);
+
+    color-scheme: dark;
+  }
 }
 
 * { box-sizing: border-box; }
@@ -53,12 +105,17 @@ a { color: inherit; }
 .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
 
 h1, h2, h3 { text-wrap: balance; }
-h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 4px; }
+h1 {
+  font-family: var(--font-display);
+  font-size: 19px; font-weight: 500; letter-spacing: -.005em;
+  margin: 0 0 4px;
+}
 h2.section-title {
-  font-size: 12.5px;
-  font-weight: 700;
+  font-family: var(--font-display);
+  font-size: 12px;
+  font-weight: 500;
   text-transform: uppercase;
-  letter-spacing: .05em;
+  letter-spacing: .07em;
   color: var(--text-muted);
   margin: 26px 0 10px;
 }
@@ -66,60 +123,70 @@ section:first-of-type h2.section-title,
 main > h2.section-title:first-child { margin-top: 0; }
 
 /* ---------- shell layout ---------- */
-.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
+.shell { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
 .sidebar {
-  background: var(--surface-alt);
-  border-right: 1px solid var(--border-soft);
-  padding: 20px 14px;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  padding: 18px 12px;
   display: flex;
   flex-direction: column;
-  gap: 22px;
+  gap: 20px;
 }
-.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
+.brand { display: flex; align-items: center; gap: 9px; padding: 0 6px 12px; border-bottom: 1px solid var(--border-soft); }
+.brand-chrome { display: flex; gap: 4px; }
+.brand-chrome i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
 .brand-mark {
-  width: 30px; height: 30px;
-  border-radius: var(--radius-sm);
-  background: linear-gradient(155deg, var(--accent), var(--accent-strong));
+  width: 26px; height: 26px;
+  border-radius: var(--radius-xs);
+  background: var(--accent);
+  color: var(--accent-contrast);
   display: grid; place-items: center; flex-shrink: 0;
 }
-.brand-mark svg { width: 16px; height: 16px; }
-.brand-name { font-weight: 800; font-size: 14.5px; letter-spacing: -0.01em; line-height: 1.2; }
-.brand-name small { display: block; font-weight: 500; font-size: 11px; color: var(--text-muted); }
+.brand-mark svg { width: 15px; height: 15px; }
+.brand-name {
+  font-family: var(--font-display);
+  font-weight: 500; font-size: 13px; letter-spacing: -.005em; line-height: 1.2;
+}
+.brand-name small { display: block; font-weight: 400; font-size: 10.5px; color: var(--text-faint); letter-spacing: .02em; }
 
-nav.nav-groups { display: flex; flex-direction: column; gap: 2px; }
+nav.nav-groups { display: flex; flex-direction: column; gap: 1px; }
 .nav-link {
-  display: flex; align-items: center; gap: 10px;
-  padding: 8px 10px;
-  border-radius: var(--radius-sm);
+  display: flex; align-items: center; gap: 9px;
+  padding: 7px 9px;
+  border-radius: var(--radius-xs);
+  border-left: 2px solid transparent;
   text-decoration: none;
   color: var(--text-muted);
-  font-weight: 600;
-  font-size: 13.5px;
-  transition: background .12s ease, color .12s ease;
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: 12.5px;
+  transition: background .12s ease, color .12s ease, border-color .12s ease;
 }
-.nav-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }
-.nav-link:hover { background: var(--border-soft); color: var(--text); }
-.nav-link.active { background: var(--accent-soft); color: var(--accent-strong); }
+.nav-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }
+.nav-link:hover { background: var(--surface-alt); color: var(--text); }
+.nav-link.active { background: var(--accent-soft); color: var(--accent); border-left-color: var(--accent); }
 .nav-link.active svg { opacity: 1; }
+.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
 
 .sidebar-foot {
   margin-top: auto;
-  padding: 10px;
-  border-radius: var(--radius-md);
-  background: var(--surface);
+  padding: 9px 10px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-alt);
   border: 1px solid var(--border-soft);
-  font-size: 12px;
+  font-family: var(--font-display);
+  font-size: 11px;
   color: var(--text-muted);
-  display: flex; align-items: center; gap: 8px;
+  display: flex; align-items: center; gap: 7px;
 }
 .pulse-dot {
-  width: 7px; height: 7px; border-radius: 50%;
+  width: 6px; height: 6px; border-radius: 1px;
   background: var(--success);
   box-shadow: 0 0 0 3px var(--success-soft);
   flex-shrink: 0;
 }
 
-.main { padding: 22px 28px 60px; max-width: 1180px; }
+.main { padding: 22px 26px 60px; max-width: 1180px; }
 .topbar {
   display: flex; align-items: baseline; justify-content: space-between;
   margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
@@ -127,28 +194,33 @@ nav.nav-groups { display: flex; flex-direction: column; gap: 2px; }
 .topbar .sub { color: var(--text-muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
 
 /* ---------- stat cards ---------- */
-.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 4px; }
-.stat-card {
-  background: var(--surface);
-  border: 1px solid var(--border-soft);
-  border-radius: var(--radius-md);
-  padding: 12px 14px;
-  box-shadow: var(--shadow-sm);
+.stat-grid {
+  display: grid; grid-template-columns: repeat(6, 1fr);
+  gap: 1px; background: var(--border);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  margin-bottom: 18px;
 }
+.stat-card { background: var(--surface); padding: 12px 14px; }
 .stat-card .value {
   font-family: var(--font-mono);
   font-size: 22px; font-weight: 500;
   display: block;
   font-variant-numeric: tabular-nums;
 }
-.stat-card .label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
-.stat-card.accented .value { color: var(--accent-strong); }
+.stat-card .label {
+  font-family: var(--font-display);
+  font-size: 10.5px; color: var(--text-muted); font-weight: 500;
+  text-transform: uppercase; letter-spacing: .06em;
+}
+.stat-card.accented .value { color: var(--accent); }
 
 /* ---------- panels ---------- */
 .panel {
   background: var(--surface);
-  border: 1px solid var(--border-soft);
-  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
 }
@@ -158,14 +230,19 @@ nav.nav-groups { display: flex; flex-direction: column; gap: 2px; }
 /* ---------- forms ---------- */
 .field-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
 .field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 220px; }
-.field label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
+.field label {
+  font-family: var(--font-display);
+  font-size: 10.5px; font-weight: 500;
+  text-transform: uppercase; letter-spacing: .05em;
+  color: var(--text-muted);
+}
 .form-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
 
-input[type="text"], input[type="search"], textarea, select {
+input[type="text"], input[type="number"], input[type="search"], textarea, select {
   font-family: var(--font-ui);
   font-size: 13.5px;
   padding: 8px 11px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-xs);
   border: 1px solid var(--border);
   background: var(--bg);
   color: var(--text);
@@ -181,11 +258,11 @@ input:focus, textarea:focus, select:focus {
 
 .btn {
   display: inline-flex; align-items: center; gap: 6px;
-  font-family: var(--font-ui);
-  font-weight: 700;
-  font-size: 13px;
-  padding: 8px 14px;
-  border-radius: var(--radius-sm);
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: 12.5px;
+  padding: 8px 13px;
+  border-radius: var(--radius-xs);
   border: 1px solid transparent;
   cursor: pointer;
   transition: transform .08s ease, background .12s ease, border-color .12s ease;
@@ -193,45 +270,51 @@ input:focus, textarea:focus, select:focus {
   line-height: 1.3;
 }
 .btn:active { transform: translateY(1px); }
+.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .btn-primary { background: var(--accent); color: var(--accent-contrast); }
 .btn-primary:hover { background: var(--accent-strong); }
 .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
-.btn-ghost:hover { border-color: var(--text-muted); }
+.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
 .btn-danger-ghost { background: transparent; border-color: var(--border); color: var(--danger); }
 .btn-danger-ghost:hover { background: var(--danger-soft); border-color: var(--danger); }
-.btn-sm { padding: 5px 10px; font-size: 12px; }
+.btn-sm { padding: 5px 9px; font-size: 11.5px; }
 .btn-block { width: 100%; justify-content: center; }
 
 /* ---------- tables ---------- */
 table { width: 100%; border-collapse: collapse; }
 thead th {
   text-align: left;
-  font-size: 11px;
+  font-family: var(--font-display);
+  font-size: 10px;
   text-transform: uppercase;
-  letter-spacing: .04em;
+  letter-spacing: .06em;
   color: var(--text-faint);
-  font-weight: 700;
-  padding: 10px 18px;
-  border-bottom: 1px solid var(--border-soft);
+  font-weight: 500;
+  padding: 9px 18px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface-alt);
 }
 tbody td { padding: 10px 18px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
 tbody tr:last-child td { border-bottom: none; }
-tbody tr:hover { background: var(--bg); }
+tbody tr:hover { background: var(--surface-alt); }
 td.addr { font-family: var(--font-mono); font-size: 13px; }
 td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); }
 .table-scroll { overflow-x: auto; }
 .actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
 
-/* ---------- pills (state/result badges) ---------- */
+/* ---------- status tags (square, not pill) ---------- */
 .pill {
-  display: inline-flex; align-items: center; gap: 5px;
-  padding: 3px 10px 3px 8px;
-  border-radius: var(--radius-pill);
-  font-size: 11.5px;
-  font-weight: 700;
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 9px 3px 7px;
+  border-radius: var(--radius-xs);
+  font-family: var(--font-display);
+  font-size: 10.5px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: .02em;
   white-space: nowrap;
 }
-.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.pill::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: currentColor; flex-shrink: 0; }
 .pill-neutral { background: var(--neutral-soft); color: var(--neutral); }
 .pill-info    { background: var(--info-soft);    color: var(--info); }
 .pill-success { background: var(--success-soft); color: var(--success); }
@@ -248,8 +331,8 @@ td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; colo
   font-weight: 500;
   border: 1px solid transparent;
 }
-.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: #f0d9a8; }
-.alert-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: #f0c2bc; }
+.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
+.alert-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-border); }
 .alert strong { color: var(--text); font-weight: 700; }
 #error-banner:empty { display: none; }
 #error-banner .alert { margin-bottom: 16px; }
@@ -258,7 +341,7 @@ td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; colo
 .breakdown b { color: var(--text); font-family: var(--font-mono); font-weight: 500; }
 
 .muted { color: var(--text-faint); font-size: 12px; }
-code.inline { font-family: var(--font-mono); background: var(--bg); border: 1px solid var(--border-soft); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
+code.inline { font-family: var(--font-mono); background: var(--surface-alt); border: 1px solid var(--border-soft); padding: 1px 6px; border-radius: var(--radius-xs); font-size: 12px; }
 
 .inline-form { display: flex; gap: 6px; align-items: center; }
 .inline-form input, .inline-form textarea { margin: 0; }
@@ -281,17 +364,18 @@ code.inline { font-family: var(--font-mono); background: var(--bg); border: 1px
   #nav-toggle:checked ~ .shell::after {
     content: "";
     position: fixed; inset: 0; z-index: 39;
-    background: rgba(18, 32, 31, .28);
+    background: var(--overlay);
   }
   .topbar-mobile {
     display: flex; align-items: center; gap: 10px;
-    padding: 14px 16px;
-    border-bottom: 1px solid var(--border-soft);
+    padding: 13px 16px;
+    border-bottom: 1px solid var(--border);
     background: var(--surface);
     position: sticky; top: 0; z-index: 30;
   }
+  .topbar-mobile strong { font-family: var(--font-display); font-weight: 500; font-size: 13px; }
   label.burger {
-    width: 34px; height: 34px; border-radius: var(--radius-sm);
+    width: 32px; height: 32px; border-radius: var(--radius-xs);
     border: 1px solid var(--border);
     display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
   }
@@ -308,10 +392,11 @@ code.inline { font-family: var(--font-mono); background: var(--bg); border: 1px
   tbody td[data-label]::before {
     content: attr(data-label);
     display: block;
-    font-size: 10.5px;
-    font-weight: 700;
+    font-family: var(--font-display);
+    font-size: 10px;
+    font-weight: 500;
     text-transform: uppercase;
-    letter-spacing: .04em;
+    letter-spacing: .05em;
     color: var(--text-faint);
   }
   .actions { justify-content: flex-start; margin-top: 6px; }

internal/dashboard/templates/layout.html

@@ -21,8 +21,9 @@
 {{define "sidebar_nav"}}
 <aside class="sidebar">
 <div class="brand">
+<span class="brand-chrome"><i></i><i></i><i></i></span>
 <span class="brand-mark">
-<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v6M12 16v6M2 12h6M16 12h6"/><circle cx="12" cy="12" r="3"/></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v6M12 16v6M2 12h6M16 12h6"/><circle cx="12" cy="12" r="3"/></svg>
 </span>
 <span class="brand-name">Cloud IP Validator<small>admin</small></span>
 </div>