adonisjs-server-stats 1.5.4 → 1.6.2

package/dist/src/{edge/client → styles}/dashboard.css

@@ -1,193 +1,8 @@
 /* Full-page dashboard styles for adonisjs-server-stats.
  * All classes use the `.ss-dash-` prefix to avoid conflicts.
- * Two themes via CSS custom properties + @media (prefers-color-scheme).
+ * Theme tokens are loaded from tokens.css (prepended at runtime).
  */
 
-/* ── Theme: Dark (default) ─────────────────────────────────────── */
-:root {
-  --ss-bg: #0f0f0f;
-  --ss-surface: #171717;
-  --ss-surface-alt: #141414;
-  --ss-text: #e5e5e5;
-  --ss-text-secondary: #b5b5b5;
-  --ss-accent: #34d399;
-  --ss-accent-dim: #064e3b;
-  --ss-border: #333;
-  --ss-border-dim: #262626;
-  --ss-border-faint: #1f1f1f;
-  --ss-muted: #9ca3af;
-  --ss-dim: #6b7280;
-  --ss-hover: rgba(38, 38, 38, 0.4);
-  --ss-hover-accent: rgba(52, 211, 153, 0.08);
-  --ss-input-bg: #1a1a1a;
-  --ss-shadow: rgb(0 0 0 / 0.4);
-  /* Status colors */
-  --ss-green-bg: #064e3b;
-  --ss-green-fg: #34d399;
-  --ss-blue-bg: #1e3a5f;
-  --ss-blue-fg: #60a5fa;
-  --ss-amber-bg: #422006;
-  --ss-amber-fg: #fbbf24;
-  --ss-red-bg: #450a0a;
-  --ss-red-fg: #f87171;
-  --ss-purple-bg: #2e1065;
-  --ss-purple-fg: #c084fc;
-  --ss-sql-color: #93c5fd;
-  --ss-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --ss-text-primary: var(--ss-text);
-  --ss-reqid-bg: #1e1b2e;
-  --ss-reqid-fg: #6d28d9;
-  --ss-reqid-hover-bg: #2e2644;
-  --ss-reqid-hover-fg: #a78bfa;
-}
-
-/* ── Theme: Dark (explicit toggle override) ───────────────────── */
-[data-theme='dark'] {
-  --ss-bg: #0f0f0f;
-  --ss-surface: #171717;
-  --ss-surface-alt: #141414;
-  --ss-text: #e5e5e5;
-  --ss-text-secondary: #b5b5b5;
-  --ss-accent: #34d399;
-  --ss-accent-dim: #064e3b;
-  --ss-border: #333;
-  --ss-border-dim: #262626;
-  --ss-border-faint: #1f1f1f;
-  --ss-muted: #9ca3af;
-  --ss-dim: #6b7280;
-  --ss-hover: rgba(38, 38, 38, 0.4);
-  --ss-hover-accent: rgba(52, 211, 153, 0.08);
-  --ss-input-bg: #1a1a1a;
-  --ss-shadow: rgb(0 0 0 / 0.4);
-  --ss-green-bg: #064e3b;
-  --ss-green-fg: #34d399;
-  --ss-blue-bg: #1e3a5f;
-  --ss-blue-fg: #60a5fa;
-  --ss-amber-bg: #422006;
-  --ss-amber-fg: #fbbf24;
-  --ss-red-bg: #450a0a;
-  --ss-red-fg: #f87171;
-  --ss-purple-bg: #2e1065;
-  --ss-purple-fg: #c084fc;
-  --ss-sql-color: #93c5fd;
-  --ss-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --ss-text-primary: var(--ss-text);
-  --ss-reqid-bg: #1e1b2e;
-  --ss-reqid-fg: #6d28d9;
-  --ss-reqid-hover-bg: #2e2644;
-  --ss-reqid-hover-fg: #a78bfa;
-}
-
-/* ── Theme: Light ──────────────────────────────────────────────── */
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme='dark']) {
-    --ss-bg: #fafafa;
-    --ss-surface: #ffffff;
-    --ss-surface-alt: #f5f5f5;
-    --ss-text: #171717;
-    --ss-text-secondary: #525252;
-    --ss-accent: #059669;
-    --ss-accent-dim: #d1fae5;
-    --ss-border: #e5e5e5;
-    --ss-border-dim: #e5e5e5;
-    --ss-border-faint: #f0f0f0;
-    --ss-muted: #6b7280;
-    --ss-dim: #9ca3af;
-    --ss-hover: rgba(0, 0, 0, 0.03);
-    --ss-hover-accent: rgba(5, 150, 105, 0.06);
-    --ss-input-bg: #ffffff;
-    --ss-shadow: rgb(0 0 0 / 0.08);
-    --ss-green-bg: #d1fae5;
-    --ss-green-fg: #059669;
-    --ss-blue-bg: #dbeafe;
-    --ss-blue-fg: #2563eb;
-    --ss-amber-bg: #fef3c7;
-    --ss-amber-fg: #b45309;
-    --ss-red-bg: #fee2e2;
-    --ss-red-fg: #dc2626;
-    --ss-purple-bg: #ede9fe;
-    --ss-purple-fg: #7c3aed;
-    --ss-sql-color: #2563eb;
-    --ss-text-primary: var(--ss-text);
-    --ss-reqid-bg: #ede9fe;
-    --ss-reqid-fg: #7c3aed;
-    --ss-reqid-hover-bg: #ddd6fe;
-    --ss-reqid-hover-fg: #6d28d9;
-  }
-}
-
-/* ── Theme: Light (explicit toggle override) ──────────────────── */
-[data-theme='light'] {
-  --ss-bg: #fafafa;
-  --ss-surface: #ffffff;
-  --ss-surface-alt: #f5f5f5;
-  --ss-text: #171717;
-  --ss-text-secondary: #525252;
-  --ss-accent: #059669;
-  --ss-accent-dim: #d1fae5;
-  --ss-border: #e5e5e5;
-  --ss-border-dim: #e5e5e5;
-  --ss-border-faint: #f0f0f0;
-  --ss-muted: #6b7280;
-  --ss-dim: #9ca3af;
-  --ss-hover: rgba(0, 0, 0, 0.03);
-  --ss-hover-accent: rgba(5, 150, 105, 0.06);
-  --ss-input-bg: #ffffff;
-  --ss-shadow: rgb(0 0 0 / 0.08);
-  --ss-green-bg: #d1fae5;
-  --ss-green-fg: #059669;
-  --ss-blue-bg: #dbeafe;
-  --ss-blue-fg: #2563eb;
-  --ss-amber-bg: #fef3c7;
-  --ss-amber-fg: #b45309;
-  --ss-red-bg: #fee2e2;
-  --ss-red-fg: #dc2626;
-  --ss-purple-bg: #ede9fe;
-  --ss-purple-fg: #7c3aed;
-  --ss-sql-color: #2563eb;
-  --ss-text-primary: var(--ss-text);
-  --ss-reqid-bg: #ede9fe;
-  --ss-reqid-fg: #7c3aed;
-  --ss-reqid-hover-bg: #ddd6fe;
-  --ss-reqid-hover-fg: #6d28d9;
-}
-
-/* ── Theme override via data attribute ─────────────────────────── */
-[data-theme='light'] {
-  --ss-bg: #fafafa;
-  --ss-surface: #ffffff;
-  --ss-surface-alt: #f5f5f5;
-  --ss-text: #171717;
-  --ss-text-secondary: #525252;
-  --ss-accent: #059669;
-  --ss-accent-dim: #d1fae5;
-  --ss-border: #e5e5e5;
-  --ss-border-dim: #e5e5e5;
-  --ss-border-faint: #f0f0f0;
-  --ss-muted: #6b7280;
-  --ss-dim: #9ca3af;
-  --ss-hover: rgba(0, 0, 0, 0.03);
-  --ss-hover-accent: rgba(5, 150, 105, 0.06);
-  --ss-input-bg: #ffffff;
-  --ss-shadow: rgb(0 0 0 / 0.08);
-  --ss-green-bg: #d1fae5;
-  --ss-green-fg: #059669;
-  --ss-blue-bg: #dbeafe;
-  --ss-blue-fg: #2563eb;
-  --ss-amber-bg: #fef3c7;
-  --ss-amber-fg: #b45309;
-  --ss-red-bg: #fee2e2;
-  --ss-red-fg: #dc2626;
-  --ss-purple-bg: #ede9fe;
-  --ss-purple-fg: #7c3aed;
-  --ss-sql-color: #2563eb;
-  --ss-text-primary: var(--ss-text);
-  --ss-reqid-bg: #ede9fe;
-  --ss-reqid-fg: #7c3aed;
-  --ss-reqid-hover-bg: #ddd6fe;
-  --ss-reqid-hover-fg: #6d28d9;
-}
-
 /* ── Reset & base ──────────────────────────────────────────────── */
 *,
 *::before,
@@ -197,6 +12,14 @@
   padding: 0;
 }
 
+button,
+input,
+select,
+textarea,
+pre {
+  font-family: inherit;
+}
+
 html,
 body {
   height: 100%;
@@ -299,7 +122,6 @@ body {
   cursor: pointer;
   border: none;
   background: none;
-  font-family: inherit;
   border-radius: 4px;
 }
 .ss-dash-theme-btn:hover,
@@ -335,11 +157,7 @@ body {
   transition:
     width 0.2s ease,
     min-width 0.2s ease;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.ss-dash-sidebar::-webkit-scrollbar {
-  display: none;
+  /* scrollbar hiding → utilities.css */
 }
 
 .ss-dash-sidebar.ss-dash-collapsed {
@@ -365,7 +183,6 @@ body {
   background: none;
   width: 100%;
   text-align: left;
-  font-family: inherit;
   transition:
     color 0.15s,
     background 0.15s;
@@ -419,13 +236,17 @@ body {
 
 .ss-dash-nav-badge {
   margin-left: auto;
-  font-size: 9px;
-  padding: 1px 6px;
-  border-radius: 8px;
-  background: var(--ss-border-dim);
-  color: var(--ss-muted);
+  font-size: 10px;
+  min-width: 18px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+  border-radius: 9px;
+  background: var(--ss-red-fg);
+  color: #fff;
+  padding: 0 5px;
   font-weight: 600;
-  font-variant-numeric: tabular-nums;
+  /* tabular-nums → utilities.css */
 }
 .ss-dash-nav-badge.ss-dash-badge-accent {
   background: var(--ss-accent-dim);
@@ -454,7 +275,6 @@ body {
   color: var(--ss-dim);
   border: none;
   background: none;
-  font-family: inherit;
   font-size: 14px;
   border-top: 1px solid var(--ss-border-dim);
   flex-shrink: 0;
@@ -501,8 +321,9 @@ body {
   flex: 1;
   min-width: 200px;
   padding: 5px 10px;
+  padding-left: 28px;
+  padding-right: 24px;
   font-size: 11px;
-  font-family: inherit;
   color: var(--ss-text);
   background: var(--ss-input-bg);
   border: 1px solid var(--ss-border);
@@ -516,30 +337,79 @@ body {
   color: var(--ss-dim);
 }
 
+.ss-dash-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--ss-border-dim);
+  background: var(--ss-surface-alt);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.ss-dash-search-wrapper {
+  position: relative;
+  flex: 1;
+  min-width: 180px;
+  max-width: 400px;
+}
+
+.ss-dash-search-icon {
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  color: var(--ss-dim);
+  pointer-events: none;
+}
+
+.ss-dash-search-clear {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--ss-dim);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 2px 4px;
+  line-height: 1;
+}
+.ss-dash-search-clear:hover {
+  color: var(--ss-text);
+}
+
+.ss-dash-filter-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+
 .ss-dash-summary {
-  font-size: 11px;
-  color: var(--ss-muted);
+  font-size: 12px;
+  color: var(--ss-dim);
   white-space: nowrap;
-  padding: 0 4px;
 }
 
 /* ── Buttons ───────────────────────────────────────────────────── */
+/* Base btn / btn-group → components.css */
+/* Dashboard override: bordered style with uppercase */
 .ss-dash-btn {
-  padding: 4px 10px;
-  font-size: 10px;
-  font-family: inherit;
-  color: var(--ss-muted);
-  background: var(--ss-surface);
-  border: 1px solid var(--ss-border);
-  border-radius: 4px;
-  cursor: pointer;
-  text-transform: uppercase;
+  --ss-btn-py: 4px;
+  --ss-btn-px: 10px;
+  --ss-btn-border: 1px solid var(--ss-border);
+  --ss-btn-bg: var(--ss-surface);
+  --ss-btn-case: uppercase;
   letter-spacing: 0.03em;
   font-weight: 500;
   white-space: nowrap;
 }
 .ss-dash-btn:hover {
-  color: var(--ss-text);
   border-color: var(--ss-dim);
 }
 .ss-dash-btn.ss-dash-active {
@@ -548,59 +418,48 @@ body {
   background: var(--ss-accent-dim);
 }
 
-.ss-dash-btn-group {
-  display: flex;
-  gap: 0;
-}
-.ss-dash-btn-group .ss-dash-btn {
-  border-radius: 0;
-  margin-left: -1px;
+.ss-dash-filter-btn {
+  padding: 3px 10px;
+  font-size: 11px;
+  border-radius: 4px;
+  border: 1px solid var(--ss-border);
+  background: var(--ss-surface);
+  color: var(--ss-dim);
+  cursor: pointer;
 }
-.ss-dash-btn-group .ss-dash-btn:first-child {
-  border-radius: 4px 0 0 4px;
-  margin-left: 0;
+.ss-dash-filter-btn.ss-dash-active {
+  background: var(--ss-accent);
+  color: #fff;
+  border-color: var(--ss-accent);
 }
-.ss-dash-btn-group .ss-dash-btn:last-child {
-  border-radius: 0 4px 4px 0;
+
+.ss-dash-level-filters {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
 }
 
 /* ── Tables ────────────────────────────────────────────────────── */
 .ss-dash-table-wrap {
+  --ss-table-cell-px: 12px;
+  --ss-table-cell-py: 7px;
+  --ss-table-td-py: 6px;
   flex: 1;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: visible;
+  margin: 0 -2px;
+  padding: 0 2px;
   scrollbar-width: thin;
   scrollbar-color: var(--ss-border) transparent;
 }
-
-.ss-dash-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 11px;
-}
+/* Table base → components.css */
+/* Column resize → components.css */
 .ss-dash-table th {
-  position: sticky;
-  top: 0;
-  padding: 7px 12px;
-  text-align: left;
-  font-weight: 600;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--ss-muted);
-  background: var(--ss-surface);
-  border-bottom: 1px solid var(--ss-border);
-  white-space: nowrap;
   z-index: 2;
 }
 .ss-dash-table td {
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--ss-border-faint);
-  vertical-align: top;
   max-width: 0;
 }
-.ss-dash-table tr:hover td {
-  background: var(--ss-hover);
-}
 .ss-dash-table tr.ss-dash-explain-row:hover td {
   background: var(--ss-surface-alt);
 }
@@ -611,36 +470,40 @@ body {
   background: var(--ss-hover-accent);
 }
 
-/* ── Method badges ─────────────────────────────────────────────── */
-.ss-dash-method {
-  display: inline-block;
-  padding: 1px 5px;
-  border-radius: 3px;
+.ss-dash-sortable {
+  cursor: pointer;
+  user-select: none;
+}
+.ss-dash-sortable:hover {
+  color: var(--ss-accent);
+}
+
+.ss-dash-sort-arrow {
   font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
+  color: var(--ss-accent);
+  margin-left: 2px;
+}
+
+.ss-dash-data-cell {
+  position: relative;
+  max-width: 300px;
 }
-.ss-dash-method-get,
+
+/* ── Method badges ─────────────────────────────────────────────── */
+/* Base + GET/POST/PUT/PATCH/DELETE → components.css */
+/* Dashboard-only SQL method variants */
 .ss-dash-method-select {
   background: var(--ss-green-bg);
   color: var(--ss-green-fg);
 }
-.ss-dash-method-post,
 .ss-dash-method-insert {
   background: var(--ss-blue-bg);
   color: var(--ss-blue-fg);
 }
-.ss-dash-method-put,
-.ss-dash-method-patch,
 .ss-dash-method-update {
   background: var(--ss-amber-bg);
   color: var(--ss-amber-fg);
 }
-.ss-dash-method-delete {
-  background: var(--ss-red-bg);
-  color: var(--ss-red-fg);
-}
 .ss-dash-method-head,
 .ss-dash-method-options,
 .ss-dash-method-raw {
@@ -648,74 +511,15 @@ body {
   color: var(--ss-dim);
 }
 
-/* ── Status badges ─────────────────────────────────────────────── */
-.ss-dash-status {
-  font-size: 10px;
-  font-weight: 600;
-  padding: 1px 5px;
-  border-radius: 3px;
-}
-.ss-dash-status-2xx {
-  background: var(--ss-green-bg);
-  color: var(--ss-green-fg);
-}
-.ss-dash-status-3xx {
-  background: var(--ss-blue-bg);
-  color: var(--ss-blue-fg);
-}
-.ss-dash-status-4xx {
-  background: var(--ss-amber-bg);
-  color: var(--ss-amber-fg);
-}
-.ss-dash-status-5xx {
-  background: var(--ss-red-bg);
-  color: var(--ss-red-fg);
-}
+/* Status badges → components.css */
+/* Badge generic → components.css */
 
-/* ── Badge generic ─────────────────────────────────────────────── */
-.ss-dash-badge {
-  display: inline-block;
-  padding: 1px 6px;
-  border-radius: 3px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-.ss-dash-badge-green {
-  background: var(--ss-green-bg);
-  color: var(--ss-green-fg);
-}
-.ss-dash-badge-amber {
-  background: var(--ss-amber-bg);
-  color: var(--ss-amber-fg);
-}
-.ss-dash-badge-red {
-  background: var(--ss-red-bg);
-  color: var(--ss-red-fg);
-}
-.ss-dash-badge-blue {
-  background: var(--ss-blue-bg);
-  color: var(--ss-blue-fg);
-}
-.ss-dash-badge-purple {
-  background: var(--ss-purple-bg);
-  color: var(--ss-purple-fg);
-}
+/* Dashboard badge-muted override (uses --ss-surface instead of --ss-border-dim) */
 .ss-dash-badge-muted {
   background: var(--ss-surface);
-  color: var(--ss-muted);
 }
 
-/* ── Duration ──────────────────────────────────────────────────── */
-.ss-dash-duration {
-  font-variant-numeric: tabular-nums;
-}
-.ss-dash-slow {
-  color: var(--ss-amber-fg);
-}
-.ss-dash-very-slow {
-  color: var(--ss-red-fg);
-}
+/* Duration → components.css */
 
 /* ── SQL ───────────────────────────────────────────────────────── */
 .ss-dash-sql {
@@ -724,9 +528,7 @@ body {
   word-break: break-all;
   cursor: pointer;
   max-width: 600px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  /* truncation → utilities.css */
   display: inline-block;
 }
 .ss-dash-sql.ss-dash-expanded {
@@ -763,7 +565,6 @@ body {
   border-radius: 4px;
   color: var(--ss-text-secondary);
   font-size: 10px;
-  font-family: inherit;
   white-space: pre-wrap;
   word-break: break-all;
   max-height: 300px;
@@ -772,32 +573,15 @@ body {
   scrollbar-width: thin;
 }
 
-.ss-dash-copy-btn {
-  margin-left: 6px;
-  padding: 1px 5px;
-  font-size: 11px;
-  color: var(--ss-dim);
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 3px;
-  cursor: pointer;
-  font-family: inherit;
-  vertical-align: middle;
-}
+/* Copy button → components.css */
+/* Dashboard copy-btn hover override (uses --ss-border instead of --ss-border-strong) */
 .ss-dash-copy-btn:hover {
-  color: var(--ss-text-secondary);
   border-color: var(--ss-border);
 }
 
-/* ── Empty state ───────────────────────────────────────────────── */
+/* Empty state → components.css */
+/* Dashboard empty override (adds flex: 1) */
 .ss-dash-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 120px;
-  color: var(--ss-dim);
-  font-size: 12px;
   flex: 1;
 }
 
@@ -813,11 +597,17 @@ body {
 .ss-dash-event-time {
   color: var(--ss-dim);
   font-size: 10px;
-  font-variant-numeric: tabular-nums;
+  /* tabular-nums → utilities.css */
 }
 
 /* ── Logs ──────────────────────────────────────────────────────── */
+/* Log entry / level / time / reqid / msg → components.css */
+/* Dashboard overrides: wider padding, border-faint separator, surface bg for debug/trace */
 .ss-dash-log-filters {
+  --ss-log-px: 16px;
+  --ss-log-border: var(--ss-border-faint);
+  --ss-log-debug-bg: var(--ss-surface);
+  --ss-log-trace-bg: var(--ss-surface);
   display: flex;
   gap: 4px;
   padding: 8px 16px;
@@ -828,10 +618,16 @@ body {
   align-items: center;
 }
 
+/* When log filters are inside the shared FilterBar, strip redundant chrome */
+.ss-dash-filter-controls .ss-dash-log-filters {
+  padding: 0;
+  border-bottom: none;
+  background: none;
+}
+
 .ss-dash-log-filter {
   padding: 3px 10px;
   font-size: 10px;
-  font-family: inherit;
   border: 1px solid var(--ss-border);
   border-radius: 4px;
   cursor: pointer;
@@ -849,87 +645,18 @@ body {
 }
 
 .ss-dash-log-entries {
+  --ss-log-px: 16px;
+  --ss-log-border: var(--ss-border-faint);
+  --ss-log-debug-bg: var(--ss-surface);
+  --ss-log-trace-bg: var(--ss-surface);
   flex: 1;
   overflow: auto;
   scrollbar-width: thin;
 }
-
-.ss-dash-log-entry {
-  padding: 4px 16px;
-  font-size: 11px;
-  border-bottom: 1px solid var(--ss-border-faint);
-  display: flex;
-  gap: 8px;
-  align-items: baseline;
-}
 .ss-dash-log-entry:hover {
   background: var(--ss-hover);
 }
 
-.ss-dash-log-level {
-  font-size: 10px;
-  font-weight: 600;
-  width: 42px;
-  text-align: center;
-  flex-shrink: 0;
-  padding: 1px 0;
-  border-radius: 3px;
-}
-.ss-dash-log-level-info {
-  background: var(--ss-green-bg);
-  color: var(--ss-green-fg);
-}
-.ss-dash-log-level-warn {
-  background: var(--ss-amber-bg);
-  color: var(--ss-amber-fg);
-}
-.ss-dash-log-level-error,
-.ss-dash-log-level-fatal {
-  background: var(--ss-red-bg);
-  color: var(--ss-red-fg);
-}
-.ss-dash-log-level-debug {
-  background: var(--ss-surface);
-  color: var(--ss-muted);
-}
-.ss-dash-log-level-trace {
-  background: var(--ss-surface);
-  color: var(--ss-dim);
-}
-
-.ss-dash-log-time {
-  color: var(--ss-dim);
-  font-size: 10px;
-  font-variant-numeric: tabular-nums;
-  flex-shrink: 0;
-}
-.ss-dash-log-reqid {
-  font-size: 10px;
-  color: var(--ss-reqid-fg);
-  background: var(--ss-reqid-bg);
-  padding: 1px 5px;
-  border-radius: 3px;
-  cursor: pointer;
-  flex-shrink: 0;
-  font-family: inherit;
-  letter-spacing: 0.02em;
-}
-.ss-dash-log-reqid:hover {
-  color: var(--ss-reqid-hover-fg);
-  background: var(--ss-reqid-hover-bg);
-}
-.ss-dash-log-reqid-empty {
-  font-size: 10px;
-  color: var(--ss-border);
-  flex-shrink: 0;
-  width: 58px;
-  text-align: center;
-}
-.ss-dash-log-msg {
-  color: var(--ss-text);
-  word-break: break-word;
-}
-
 /* ── Structured log search ─────────────────────────────────────── */
 .ss-dash-structured-search {
   display: flex;
@@ -946,7 +673,6 @@ body {
 .ss-dash-filter-input {
   padding: 4px 8px;
   font-size: 11px;
-  font-family: inherit;
   color: var(--ss-text);
   background: var(--ss-input-bg);
   border: 1px solid var(--ss-border);
@@ -982,7 +708,6 @@ body {
   background: var(--ss-accent-dim);
   color: var(--ss-accent);
   border-radius: 4px;
-  font-family: inherit;
 }
 .ss-dash-filter-chip-remove {
   cursor: pointer;
@@ -991,7 +716,6 @@ body {
   color: var(--ss-accent);
   background: none;
   border: none;
-  font-family: inherit;
   padding: 0;
 }
 .ss-dash-filter-chip-remove:hover {
@@ -1009,7 +733,6 @@ body {
 .ss-dash-saved-select {
   padding: 4px 8px;
   font-size: 10px;
-  font-family: inherit;
   color: var(--ss-text);
   background: var(--ss-input-bg);
   border: 1px solid var(--ss-border);
@@ -1019,200 +742,71 @@ body {
 }
 
 /* ── Email preview ─────────────────────────────────────────────── */
+/* Base email preview / row / status → components.css */
+/* Dashboard override: 16px header padding */
 .ss-dash-email-preview {
+  --ss-email-px: 16px;
+}
+.ss-dash-email-preview-close {
   position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--ss-bg);
-  z-index: 30;
+  top: 8px;
+  right: 8px;
+  background: none;
+  border: none;
+  color: var(--ss-dim);
+  cursor: pointer;
+  font-size: 18px;
+  padding: 4px 8px;
+  border-radius: 4px;
 }
-.ss-dash-email-preview-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--ss-border-dim);
-  background: var(--ss-surface-alt);
-  flex-shrink: 0;
-}
-.ss-dash-email-preview-meta {
-  font-size: 11px;
-  color: var(--ss-text-secondary);
-  line-height: 1.6;
-  overflow: hidden;
-}
-.ss-dash-email-preview-meta strong {
+.ss-dash-email-preview-close:hover {
+  background: var(--ss-surface);
   color: var(--ss-text);
-  font-weight: 600;
-}
-.ss-dash-email-iframe {
-  flex: 1;
-  border: none;
-  background: #fff;
-}
-
-.ss-dash-email-row {
-  cursor: pointer;
-}
-.ss-dash-email-row:hover td {
-  background: var(--ss-hover-accent) !important;
-}
-
-/* Email status badges reuse .ss-dash-badge base */
-.ss-dash-email-status-sent {
-  background: var(--ss-green-bg);
-  color: var(--ss-green-fg);
-}
-.ss-dash-email-status-sending {
-  background: var(--ss-amber-bg);
-  color: var(--ss-amber-fg);
-}
-.ss-dash-email-status-queued {
-  background: var(--ss-blue-bg);
-  color: var(--ss-blue-fg);
-}
-.ss-dash-email-status-failed {
-  background: var(--ss-red-bg);
-  color: var(--ss-red-fg);
 }
 
 /* ── Timeline / Waterfall ──────────────────────────────────────── */
+/* Base timeline → components.css */
+/* Dashboard overrides: wider dimensions, faint border, extra bar style */
 .ss-dash-tl-detail-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--ss-border-dim);
-  background: var(--ss-surface-alt);
-  flex-shrink: 0;
+  --ss-tl-detail-gap: 12px;
+  --ss-tl-detail-py: 8px;
+  --ss-tl-detail-px: 16px;
 }
 
 .ss-dash-tl-waterfall {
+  --ss-tl-label-w: 320px;
+  --ss-tl-row-h: 26px;
+  --ss-tl-bar-h: 14px;
+  --ss-tl-track-h: 18px;
+  --ss-tl-row-border: var(--ss-border-faint);
+  --ss-tl-dur-ml: 6px;
+  --ss-tl-legend-gap: 14px;
+  --ss-tl-legend-py: 6px;
+  --ss-tl-legend-px: 16px;
+  --ss-tl-legend-dot-size: 8px;
+  --ss-tl-warnings-px: 16px;
+  --ss-tl-bar-custom-bg: var(--ss-dim);
   padding: 8px 16px;
   overflow: auto;
   flex: 1;
   scrollbar-width: thin;
 }
 
-.ss-dash-tl-row {
-  display: flex;
-  align-items: center;
-  height: 26px;
-  font-size: 11px;
-  border-bottom: 1px solid var(--ss-border-faint);
-}
-.ss-dash-tl-row:hover {
-  background: var(--ss-hover);
-}
-
-.ss-dash-tl-label {
-  width: 320px;
-  min-width: 320px;
-  padding-right: 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--ss-text-secondary);
-  font-size: 10px;
-}
-
-.ss-dash-tl-track {
-  flex: 1;
-  position: relative;
-  height: 18px;
-}
-
-.ss-dash-tl-bar {
-  position: absolute;
-  height: 14px;
-  top: 2px;
-  border-radius: 2px;
-  min-width: 2px;
-  cursor: default;
-}
+/* Dashboard-specific: request bar has a border */
 .ss-dash-tl-bar-request {
   background: var(--ss-blue-bg);
   border: 1px solid var(--ss-blue-fg);
 }
-.ss-dash-tl-bar-middleware {
-  background: var(--ss-blue-bg);
-  opacity: 0.7;
-}
-.ss-dash-tl-bar-db {
-  background: #6d28d9;
-}
-.ss-dash-tl-bar-view {
-  background: #0e7490;
-}
-.ss-dash-tl-bar-mail {
-  background: #059669;
-}
-.ss-dash-tl-bar-event {
-  background: #b45309;
-}
-.ss-dash-tl-bar-custom {
-  background: var(--ss-dim);
-}
 
 .ss-dash-tl-dur {
-  font-size: 10px;
-  color: var(--ss-dim);
-  margin-left: 6px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
   min-width: 60px;
   text-align: right;
 }
 
 .ss-dash-tl-legend {
-  display: flex;
-  gap: 14px;
-  padding: 6px 16px;
-  border-bottom: 1px solid var(--ss-border-dim);
-  background: var(--ss-surface-alt);
-  font-size: 10px;
-  color: var(--ss-muted);
-  flex-shrink: 0;
-}
-.ss-dash-tl-legend-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-.ss-dash-tl-legend-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 2px;
   flex-shrink: 0;
 }
 
-.ss-dash-tl-warnings {
-  margin-top: 12px;
-  padding: 8px 16px;
-  border-top: 1px solid var(--ss-border-dim);
-}
-.ss-dash-tl-warnings-title {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--ss-amber-fg);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 4px;
-}
-.ss-dash-tl-warning {
-  font-size: 11px;
-  color: var(--ss-amber-fg);
-  padding: 2px 0;
-}
-
-.ss-dash-tl-meta {
-  font-size: 10px;
-  color: var(--ss-dim);
-  margin-left: 8px;
-}
-
 /* ── EXPLAIN panel ─────────────────────────────────────────────── */
 .ss-dash-explain-row td {
   white-space: normal;
@@ -1230,7 +824,6 @@ body {
 .ss-dash-explain-btn {
   padding: 2px 8px;
   font-size: 9px;
-  font-family: inherit;
   color: var(--ss-purple-fg);
   background: var(--ss-purple-bg);
   border: none;
@@ -1338,7 +931,7 @@ body {
   font-size: 22px;
   font-weight: 700;
   color: var(--ss-text);
-  font-variant-numeric: tabular-nums;
+  /* tabular-nums → utilities.css */
   line-height: 1.2;
 }
 .ss-dash-card-value.ss-dash-accent {
@@ -1396,6 +989,11 @@ body {
   letter-spacing: 0.04em;
 }
 
+.ss-dash-chart-area {
+  position: relative;
+  min-height: 160px;
+}
+
 .ss-dash-chart {
   width: 100%;
   height: 220px;
@@ -1410,6 +1008,9 @@ body {
     r 0.15s ease,
     opacity 0.15s ease;
 }
+.ss-dash-chart-svg .ss-dash-chart-dot-err {
+  fill: var(--ss-red-fg);
+}
 .ss-dash-chart-svg .ss-dash-chart-hover-zone {
   cursor: crosshair;
 }
@@ -1492,9 +1093,7 @@ body {
   border-bottom: none;
 }
 .ss-dash-secondary-list li > span:first-child {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  /* truncation → utilities.css */
   min-width: 0;
 }
 .ss-dash-secondary-list li:last-child {
@@ -1502,7 +1101,7 @@ body {
 }
 .ss-dash-secondary-list-value {
   color: var(--ss-text-secondary);
-  font-variant-numeric: tabular-nums;
+  /* tabular-nums → utilities.css */
   flex-shrink: 0;
   white-space: nowrap;
 }
@@ -1519,10 +1118,21 @@ body {
   flex-shrink: 0;
 }
 
+.ss-dash-pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.ss-dash-page-ellipsis {
+  padding: 4px 6px;
+  color: var(--ss-dim);
+  font-size: 12px;
+}
+
 .ss-dash-page-btn {
   padding: 3px 10px;
   font-size: 10px;
-  font-family: inherit;
   color: var(--ss-muted);
   background: none;
   border: 1px solid var(--ss-border);
@@ -1549,6 +1159,34 @@ body {
 }
 
 /* ── Config viewer ─────────────────────────────────────────────── */
+/* Config section/toggle/key/val/match/redacted/copy-row/inner-table → components.css */
+/* Dashboard-specific: toolbar, tabs, env table, wider config sections */
+.ss-dash-config-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--ss-border-dim);
+}
+.ss-dash-config-tab {
+  padding: 4px 12px;
+  font-size: 11px;
+  border: 1px solid var(--ss-border-dim);
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  color: var(--ss-muted);
+  white-space: nowrap;
+}
+.ss-dash-config-tab:hover {
+  border-color: var(--ss-dim);
+  color: var(--ss-text-secondary);
+}
+.ss-dash-config-tab.ss-dash-active {
+  border-color: var(--ss-accent);
+  color: var(--ss-accent);
+}
+
 .ss-dash-config-table-wrap {
   flex: 1;
   overflow: auto;
@@ -1562,163 +1200,54 @@ body {
 .ss-dash-env-key {
   width: 280px;
   min-width: 280px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  /* truncation → utilities.css */
 }
 .ss-dash-env-val {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  /* truncation → utilities.css */
   max-width: 0;
 }
 
+/* Dashboard config overrides: larger header, wider padding, border-dim */
 .ss-dash-config-key {
-  color: var(--ss-sql-color);
   font-weight: 500;
   font-size: 11px;
 }
 .ss-dash-config-val {
-  color: var(--ss-text-secondary);
   font-size: 11px;
 }
-.ss-dash-config-redacted {
-  color: var(--ss-dim);
-  font-style: italic;
-}
-.ss-dash-redacted-wrap {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-style: italic;
-  color: var(--ss-dim);
-}
-.ss-dash-redacted-real {
-  font-style: normal;
-  color: var(--ss-text-secondary);
-  font-family: var(--ss-font-mono);
-  font-size: 11px;
-  word-break: break-all;
-}
-.ss-dash-redacted-reveal,
-.ss-dash-redacted-copy {
-  background: none;
-  border: 1px solid var(--ss-border-dim);
-  border-radius: 3px;
-  padding: 2px 4px;
-  cursor: pointer;
-  color: var(--ss-dim);
-  display: inline-flex;
-  align-items: center;
-  line-height: 1;
-  transition:
-    color 0.15s,
-    border-color 0.15s;
-}
-.ss-dash-redacted-reveal:hover,
-.ss-dash-redacted-copy:hover {
-  color: var(--ss-text-primary);
-  border-color: var(--ss-border);
-}
-
 .ss-dash-config-sections {
+  --ss-config-section-border: var(--ss-border-dim);
+  --ss-config-header-gap: 8px;
+  --ss-config-header-py: 9px;
+  --ss-config-header-px: 16px;
+  --ss-config-header-font: 12px;
+  --ss-config-toggle-color: var(--ss-muted);
   flex: 1;
   overflow: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--ss-border) transparent;
 }
-
-.ss-dash-config-section {
-  border-bottom: 1px solid var(--ss-border-dim);
-}
-
 .ss-dash-config-section-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 9px 16px;
-  cursor: pointer;
   user-select: none;
-  font-size: 12px;
   font-weight: 600;
   transition: background 0.1s;
 }
-.ss-dash-config-section-header:hover {
-  background: var(--ss-hover);
-}
 .ss-dash-config-section-header.ss-dash-config-leaf {
-  cursor: default;
   font-weight: 400;
 }
-
-.ss-dash-config-toggle {
-  color: var(--ss-muted);
-  font-size: 10px;
-  flex-shrink: 0;
-  width: 12px;
-  text-align: center;
-}
-
 .ss-dash-config-count {
-  margin-left: auto;
-  font-size: 10px;
-  color: var(--ss-dim);
   font-weight: 400;
 }
-
-.ss-dash-config-section-body {
-  padding: 0 0 4px 0;
-  background: var(--ss-surface-alt);
-}
-
-.ss-dash-config-inner-table {
-  font-size: 11px;
-  table-layout: fixed;
-}
-.ss-dash-config-inner-table th {
-  background: var(--ss-surface-alt);
-}
-.ss-dash-config-inner-table td {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.ss-dash-config-inner-table td:hover {
-  white-space: normal;
-  word-break: break-all;
-}
-
-.ss-dash-config-match {
-  background: var(--ss-amber-bg);
-  color: var(--ss-amber-fg);
-  border-radius: 2px;
-  padding: 0 1px;
-}
-
-.ss-dash-copy-row-btn {
-  padding: 2px 6px;
-  font-size: 12px;
-  color: var(--ss-dim);
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 3px;
-  cursor: pointer;
-  font-family: inherit;
-  line-height: 1;
-  opacity: 0;
-  transition: opacity 0.1s;
-}
-tr:hover .ss-dash-copy-row-btn {
-  opacity: 1;
+/* Dashboard redacted border override (uses border-dim instead of border) */
+.ss-dash-redacted-reveal,
+.ss-dash-redacted-copy {
+  border-color: var(--ss-border-dim);
 }
-.ss-dash-copy-row-btn:hover {
-  color: var(--ss-text);
+.ss-dash-redacted-reveal:hover,
+.ss-dash-redacted-copy:hover {
+  color: var(--ss-text-primary);
   border-color: var(--ss-border);
 }
-.ss-dash-copy-row-btn.ss-dash-copy-row-ok {
-  color: var(--ss-green-fg);
-  opacity: 1;
-}
 
 /* ── Cache ─────────────────────────────────────────────────────── */
 .ss-dash-cache-stats {
@@ -1740,7 +1269,8 @@ tr:hover .ss-dash-copy-row-btn {
 }
 .ss-dash-cache-stat-value {
   font-weight: 600;
-  font-variant-numeric: tabular-nums;
+  /* tabular-nums → utilities.css */
+  color: var(--ss-text);
 }
 
 .ss-dash-cache-detail {
@@ -1773,13 +1303,13 @@ tr:hover .ss-dash-copy-row-btn {
 }
 .ss-dash-job-stat-value {
   font-weight: 600;
-  font-variant-numeric: tabular-nums;
+  /* tabular-nums → utilities.css */
+  color: var(--ss-text);
 }
 
 .ss-dash-retry-btn {
   padding: 2px 8px;
   font-size: 9px;
-  font-family: inherit;
   color: var(--ss-amber-fg);
   background: var(--ss-amber-bg);
   border: none;
@@ -1869,12 +1399,15 @@ tr:hover .ss-dash-copy-row-btn {
   color: var(--ss-accent);
 }
 .ss-dash-widget-row-link > span:first-child {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  /* truncation → utilities.css */
   min-width: 0;
 }
 
+/* ── Utility: dim text ────────────────────────────────────────── */
+.ss-dim {
+  color: var(--ss-dim);
+}
+
 .ss-dash-widget-stat {
   display: flex;
   justify-content: space-between;
@@ -1890,5 +1423,35 @@ tr:hover .ss-dash-copy-row-btn {
 }
 .ss-dash-widget-stat-value {
   font-weight: 600;
-  font-variant-numeric: tabular-nums;
+  /* tabular-nums → utilities.css */
+  color: var(--ss-text);
+}
+
+/* Utility color classes → components.css */
+
+/* ── Section title (reused by internals + Vue) ────────────────── */
+.ss-dash-internals-title,
+.ss-dash-section-title {
+  margin: 20px 0 6px;
+  padding: 0 12px 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ss-muted);
+  border-bottom: 1px solid var(--ss-border);
+}
+.ss-dash-internals-title:first-child,
+.ss-dash-section-title:first-child {
+  margin-top: 4px;
+}
+
+/* Info cards → components.css */
+/* Status indicator dot → components.css */
+/* Progress bar → components.css */
+
+/* ── Tooltip trigger ─────────────────────────────────────────── */
+.ss-tooltip-trigger {
+  display: inline-flex;
+  align-items: center;
 }