adonisjs-server-stats 1.2.1 → 1.3.0

package/dist/src/edge/client/debug-panel.css

@@ -1,21 +1,134 @@
 /* Scoped CSS for the debug panel overlay.
  * All classes use the `.ss-dbg-` prefix to avoid conflicts.
+ * Theme via CSS custom properties scoped to .ss-dbg-panel.
  */
 
+/* ── Theme: Dark (default) ────────────────────────────────────── */
 .ss-dbg-panel {
+  --ss-bg: #0f0f0f;
+  --ss-surface: #171717;
+  --ss-surface-alt: #141414;
+  --ss-input-bg: #1a1a1a;
+  --ss-text: #d4d4d4;
+  --ss-text-bright: #e5e5e5;
+  --ss-text-secondary: #a3a3a3;
+  --ss-muted: #737373;
+  --ss-dim: #525252;
+  --ss-accent: #34d399;
+  --ss-accent-dim: #064e3b;
+  --ss-border: #333;
+  --ss-border-dim: #262626;
+  --ss-border-faint: #1f1f1f;
+  --ss-border-strong: #404040;
+  --ss-hover: rgba(38,38,38,0.4);
+  --ss-hover-accent: rgba(52,211,153,0.08);
+  --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-reqid-bg: #1e1b2e;
+  --ss-reqid-fg: #6d28d9;
+  --ss-reqid-hover-bg: #2e2644;
+  --ss-reqid-hover-fg: #a78bfa;
+
   position: fixed;
   inset-inline: 0;
   bottom: 28px;
-  z-index: 49;
+  z-index: 147;
   height: 50vh;
   display: none;
   flex-direction: column;
-  background: #0f0f0f;
-  border-top: 1px solid #333;
+  background: var(--ss-bg);
+  border-top: 1px solid var(--ss-border);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  color: #d4d4d4;
-  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.4);
+  color: var(--ss-text);
+  box-shadow: 0 -8px 24px var(--ss-shadow);
+}
+
+/* ── Theme: Light (auto via system preference) ────────────────── */
+@media (prefers-color-scheme: light) {
+  .ss-dbg-panel:not([data-ss-theme="dark"]) {
+    --ss-bg: #fafafa;
+    --ss-surface: #ffffff;
+    --ss-surface-alt: #f5f5f5;
+    --ss-input-bg: #ffffff;
+    --ss-text: #171717;
+    --ss-text-bright: #0f0f0f;
+    --ss-text-secondary: #525252;
+    --ss-muted: #6b7280;
+    --ss-dim: #9ca3af;
+    --ss-accent: #059669;
+    --ss-accent-dim: #d1fae5;
+    --ss-border: #e5e5e5;
+    --ss-border-dim: #e5e5e5;
+    --ss-border-faint: #f0f0f0;
+    --ss-border-strong: #d4d4d4;
+    --ss-hover: rgba(0,0,0,0.03);
+    --ss-hover-accent: rgba(5,150,105,0.06);
+    --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-reqid-bg: #ede9fe;
+    --ss-reqid-fg: #7c3aed;
+    --ss-reqid-hover-bg: #ddd6fe;
+    --ss-reqid-hover-fg: #6d28d9;
+  }
+}
+
+/* ── Theme: Light (manual override) ───────────────────────────── */
+.ss-dbg-panel[data-ss-theme="light"] {
+  --ss-bg: #fafafa;
+  --ss-surface: #ffffff;
+  --ss-surface-alt: #f5f5f5;
+  --ss-input-bg: #ffffff;
+  --ss-text: #171717;
+  --ss-text-bright: #0f0f0f;
+  --ss-text-secondary: #525252;
+  --ss-muted: #6b7280;
+  --ss-dim: #9ca3af;
+  --ss-accent: #059669;
+  --ss-accent-dim: #d1fae5;
+  --ss-border: #e5e5e5;
+  --ss-border-dim: #e5e5e5;
+  --ss-border-faint: #f0f0f0;
+  --ss-border-strong: #d4d4d4;
+  --ss-hover: rgba(0,0,0,0.03);
+  --ss-hover-accent: rgba(5,150,105,0.06);
+  --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-reqid-bg: #ede9fe;
+  --ss-reqid-fg: #7c3aed;
+  --ss-reqid-hover-bg: #ddd6fe;
+  --ss-reqid-hover-fg: #6d28d9;
 }
+
 .ss-dbg-panel.ss-dbg-open { display: flex; }
 
 /* Tab bar */
@@ -23,17 +136,35 @@
   display: flex;
   align-items: center;
   gap: 0;
-  border-bottom: 1px solid #333;
-  background: #171717;
+  border-bottom: 1px solid var(--ss-border);
+  background: var(--ss-surface);
   flex-shrink: 0;
-  padding: 0 8px;
+  padding: 0;
+  min-height: 0;
 }
+.ss-dbg-tabs-scroll {
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1;
+  min-width: 0;
+  padding-left: 8px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  mask-image: linear-gradient(to right, transparent 0, black 0, black calc(100% - 24px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, transparent 0, black 0, black calc(100% - 24px), transparent 100%);
+}
+.ss-dbg-tabs-scroll::-webkit-scrollbar { display: none; }
 .ss-dbg-tab {
-  padding: 8px 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 8px 14px;
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.03em;
-  color: #737373;
+  color: var(--ss-muted);
   cursor: pointer;
   border: none;
   background: none;
@@ -41,28 +172,42 @@
   transition: color 0.15s, border-color 0.15s;
   font-family: inherit;
   text-transform: uppercase;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ss-dbg-tab-icon {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
-.ss-dbg-tab:hover { color: #a3a3a3; }
+.ss-dbg-tab:hover { color: var(--ss-text-secondary); }
 .ss-dbg-tab.ss-dbg-active {
-  color: #34d399;
-  border-bottom-color: #34d399;
+  color: var(--ss-accent);
+  border-bottom-color: var(--ss-accent);
 }
 .ss-dbg-tabs-right {
-  margin-left: auto;
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-shrink: 0;
+  padding: 0 8px 0 12px;
+  border-left: 1px solid var(--ss-border-dim);
 }
 .ss-dbg-close {
   padding: 4px 8px;
   font-size: 14px;
-  color: #737373;
+  color: var(--ss-muted);
   cursor: pointer;
   border: none;
   background: none;
   font-family: inherit;
 }
-.ss-dbg-close:hover { color: #e5e5e5; }
+.ss-dbg-close:hover { color: var(--ss-text-bright); }
 
 /* Tab content */
 .ss-dbg-content {
@@ -86,25 +231,25 @@
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  border-bottom: 1px solid #262626;
-  background: #141414;
+  border-bottom: 1px solid var(--ss-border-dim);
+  background: var(--ss-surface-alt);
 }
 .ss-dbg-search {
   flex: 1;
   padding: 4px 8px;
   font-size: 11px;
   font-family: inherit;
-  color: #d4d4d4;
-  background: #1a1a1a;
-  border: 1px solid #333;
+  color: var(--ss-text);
+  background: var(--ss-input-bg);
+  border: 1px solid var(--ss-border);
   border-radius: 4px;
   outline: none;
 }
-.ss-dbg-search:focus { border-color: #34d399; }
-.ss-dbg-search::placeholder { color: #525252; }
+.ss-dbg-search:focus { border-color: var(--ss-accent); }
+.ss-dbg-search::placeholder { color: var(--ss-dim); }
 .ss-dbg-summary {
   font-size: 11px;
-  color: #737373;
+  color: var(--ss-muted);
   white-space: nowrap;
   padding: 0 4px;
 }
@@ -112,14 +257,14 @@
   padding: 3px 8px;
   font-size: 10px;
   font-family: inherit;
-  color: #737373;
-  background: #262626;
-  border: 1px solid #404040;
+  color: var(--ss-muted);
+  background: var(--ss-border-dim);
+  border: 1px solid var(--ss-border-strong);
   border-radius: 4px;
   cursor: pointer;
   text-transform: uppercase;
 }
-.ss-dbg-btn-clear:hover { color: #d4d4d4; border-color: #525252; }
+.ss-dbg-btn-clear:hover { color: var(--ss-text); border-color: var(--ss-dim); }
 
 /* Table */
 .ss-dbg-table {
@@ -136,23 +281,23 @@
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: #737373;
-  background: #171717;
-  border-bottom: 1px solid #333;
+  color: var(--ss-muted);
+  background: var(--ss-surface);
+  border-bottom: 1px solid var(--ss-border);
   white-space: nowrap;
 }
 .ss-dbg-table td {
   padding: 5px 10px;
-  border-bottom: 1px solid #1f1f1f;
+  border-bottom: 1px solid var(--ss-border-faint);
   vertical-align: top;
   max-width: 0;
 }
-.ss-dbg-table tr:hover td { background: rgba(38, 38, 38, 0.4); }
+.ss-dbg-table tr:hover td { background: var(--ss-hover); }
 
 /* Query-specific styles */
 .ss-dbg-sql {
   font-size: 11px;
-  color: #93c5fd;
+  color: var(--ss-sql-color);
   word-break: break-all;
   cursor: pointer;
   max-width: 500px;
@@ -165,9 +310,9 @@
   max-width: none;
 }
 .ss-dbg-duration { font-variant-numeric: tabular-nums; }
-.ss-dbg-slow { color: #fbbf24; }
-.ss-dbg-very-slow { color: #f87171; }
-.ss-dbg-dup { color: #c084fc; font-size: 10px; }
+.ss-dbg-slow { color: var(--ss-amber-fg); }
+.ss-dbg-very-slow { color: var(--ss-red-fg); }
+.ss-dbg-dup { color: var(--ss-purple-fg); font-size: 10px; }
 
 /* Method badges */
 .ss-dbg-method {
@@ -179,31 +324,31 @@
   letter-spacing: 0.03em;
   text-transform: uppercase;
 }
-.ss-dbg-method-get { background: #064e3b; color: #34d399; }
-.ss-dbg-method-post { background: #1e3a5f; color: #60a5fa; }
-.ss-dbg-method-put, .ss-dbg-method-patch { background: #422006; color: #fbbf24; }
-.ss-dbg-method-delete { background: #450a0a; color: #f87171; }
+.ss-dbg-method-get { background: var(--ss-green-bg); color: var(--ss-green-fg); }
+.ss-dbg-method-post { background: var(--ss-blue-bg); color: var(--ss-blue-fg); }
+.ss-dbg-method-put, .ss-dbg-method-patch { background: var(--ss-amber-bg); color: var(--ss-amber-fg); }
+.ss-dbg-method-delete { background: var(--ss-red-bg); color: var(--ss-red-fg); }
 
 /* Route highlight */
-.ss-dbg-current-route td { background: rgba(52, 211, 153, 0.08) !important; }
+.ss-dbg-current-route td { background: var(--ss-hover-accent) !important; }
 
 /* Event list */
-.ss-dbg-event-name { color: #93c5fd; }
-.ss-dbg-event-data { color: #737373; font-size: 10px; position: relative; }
-.ss-dbg-event-time { color: #525252; font-size: 10px; font-variant-numeric: tabular-nums; }
+.ss-dbg-event-name { color: var(--ss-sql-color); }
+.ss-dbg-event-data { color: var(--ss-muted); font-size: 10px; position: relative; }
+.ss-dbg-event-time { color: var(--ss-dim); font-size: 10px; font-variant-numeric: tabular-nums; }
 .ss-dbg-data-preview {
   cursor: pointer;
-  color: #a3a3a3;
-  border-bottom: 1px dashed #525252;
+  color: var(--ss-text-secondary);
+  border-bottom: 1px dashed var(--ss-dim);
 }
-.ss-dbg-data-preview:hover { color: #d4d4d4; }
+.ss-dbg-data-preview:hover { color: var(--ss-text); }
 .ss-dbg-data-full {
   margin: 4px 0 0;
   padding: 8px;
-  background: #1a1a1a;
-  border: 1px solid #333;
+  background: var(--ss-input-bg);
+  border: 1px solid var(--ss-border);
   border-radius: 4px;
-  color: #a3a3a3;
+  color: var(--ss-text-secondary);
   font-size: 10px;
   font-family: inherit;
   white-space: pre-wrap;
@@ -219,7 +364,7 @@
   margin-left: 6px;
   padding: 1px 5px;
   font-size: 11px;
-  color: #525252;
+  color: var(--ss-dim);
   background: none;
   border: 1px solid transparent;
   border-radius: 3px;
@@ -227,34 +372,34 @@
   font-family: inherit;
   vertical-align: middle;
 }
-.ss-dbg-copy-btn:hover { color: #a3a3a3; border-color: #404040; }
+.ss-dbg-copy-btn:hover { color: var(--ss-text-secondary); border-color: var(--ss-border-strong); }
 
 /* Logs */
 .ss-dbg-log-filters {
   display: flex;
   gap: 4px;
   padding: 8px 12px;
-  border-bottom: 1px solid #262626;
-  background: #141414;
+  border-bottom: 1px solid var(--ss-border-dim);
+  background: var(--ss-surface-alt);
 }
 .ss-dbg-log-filter {
   padding: 3px 10px;
   font-size: 10px;
   font-family: inherit;
-  border: 1px solid #333;
+  border: 1px solid var(--ss-border);
   border-radius: 4px;
   cursor: pointer;
   background: none;
-  color: #737373;
+  color: var(--ss-muted);
   text-transform: uppercase;
 }
-.ss-dbg-log-filter:hover { border-color: #525252; color: #a3a3a3; }
-.ss-dbg-log-filter.ss-dbg-active { border-color: #34d399; color: #34d399; }
+.ss-dbg-log-filter:hover { border-color: var(--ss-dim); color: var(--ss-text-secondary); }
+.ss-dbg-log-filter.ss-dbg-active { border-color: var(--ss-accent); color: var(--ss-accent); }
 
 .ss-dbg-log-entry {
   padding: 4px 12px;
   font-size: 11px;
-  border-bottom: 1px solid #1a1a1a;
+  border-bottom: 1px solid var(--ss-input-bg);
   display: flex;
   gap: 8px;
   align-items: baseline;
@@ -268,16 +413,16 @@
   padding: 1px 0;
   border-radius: 3px;
 }
-.ss-dbg-log-level-info { background: #064e3b; color: #34d399; }
-.ss-dbg-log-level-warn { background: #422006; color: #fbbf24; }
-.ss-dbg-log-level-error, .ss-dbg-log-level-fatal { background: #450a0a; color: #f87171; }
-.ss-dbg-log-level-debug { background: #1e1e1e; color: #737373; }
-.ss-dbg-log-level-trace { background: #1e1e1e; color: #525252; }
-.ss-dbg-log-time { color: #525252; font-size: 10px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
+.ss-dbg-log-level-info { background: var(--ss-green-bg); color: var(--ss-green-fg); }
+.ss-dbg-log-level-warn { background: var(--ss-amber-bg); color: var(--ss-amber-fg); }
+.ss-dbg-log-level-error, .ss-dbg-log-level-fatal { background: var(--ss-red-bg); color: var(--ss-red-fg); }
+.ss-dbg-log-level-debug { background: var(--ss-surface-alt); color: var(--ss-muted); }
+.ss-dbg-log-level-trace { background: var(--ss-surface-alt); color: var(--ss-dim); }
+.ss-dbg-log-time { color: var(--ss-dim); font-size: 10px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
 .ss-dbg-log-reqid {
   font-size: 10px;
-  color: #6d28d9;
-  background: #1e1b2e;
+  color: var(--ss-reqid-fg);
+  background: var(--ss-reqid-bg);
   padding: 1px 5px;
   border-radius: 3px;
   cursor: pointer;
@@ -285,10 +430,10 @@
   font-family: inherit;
   letter-spacing: 0.02em;
 }
-.ss-dbg-log-reqid:hover { color: #a78bfa; background: #2e2644; }
-.ss-dbg-log-reqid-empty { font-size: 10px; color: #333; flex-shrink: 0; width: 58px; text-align: center; }
+.ss-dbg-log-reqid:hover { color: var(--ss-reqid-hover-fg); background: var(--ss-reqid-hover-bg); }
+.ss-dbg-log-reqid-empty { font-size: 10px; color: var(--ss-border); flex-shrink: 0; width: 58px; text-align: center; }
 .ss-dbg-reqid-input { max-width: 200px; margin-left: auto; }
-.ss-dbg-log-msg { color: #d4d4d4; word-break: break-word; }
+.ss-dbg-log-msg { color: var(--ss-text); word-break: break-word; }
 
 /* Empty state */
 .ss-dbg-empty {
@@ -297,18 +442,18 @@
   justify-content: center;
   height: 100%;
   min-height: 120px;
-  color: #525252;
+  color: var(--ss-dim);
   font-size: 12px;
 }
 
 /* Badge format */
 .ss-dbg-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
-.ss-dbg-badge-green { background: #064e3b; color: #34d399; }
-.ss-dbg-badge-amber { background: #422006; color: #fbbf24; }
-.ss-dbg-badge-red { background: #450a0a; color: #f87171; }
-.ss-dbg-badge-blue { background: #1e3a5f; color: #60a5fa; }
-.ss-dbg-badge-purple { background: #2e1065; color: #c084fc; }
-.ss-dbg-badge-muted { background: #262626; color: #737373; }
+.ss-dbg-badge-green { background: var(--ss-green-bg); color: var(--ss-green-fg); }
+.ss-dbg-badge-amber { background: var(--ss-amber-bg); color: var(--ss-amber-fg); }
+.ss-dbg-badge-red { background: var(--ss-red-bg); color: var(--ss-red-fg); }
+.ss-dbg-badge-blue { background: var(--ss-blue-bg); color: var(--ss-blue-fg); }
+.ss-dbg-badge-purple { background: var(--ss-purple-bg); color: var(--ss-purple-fg); }
+.ss-dbg-badge-muted { background: var(--ss-border-dim); color: var(--ss-muted); }
 
 /* Email preview overlay */
 .ss-dbg-email-preview {
@@ -316,8 +461,8 @@
   inset: 0;
   display: flex;
   flex-direction: column;
-  background: #0f0f0f;
-  z-index: 10;
+  background: var(--ss-bg);
+  z-index: 30;
 }
 .ss-dbg-email-preview-header {
   display: flex;
@@ -325,17 +470,17 @@
   justify-content: space-between;
   gap: 12px;
   padding: 10px 12px;
-  border-bottom: 1px solid #262626;
-  background: #141414;
+  border-bottom: 1px solid var(--ss-border-dim);
+  background: var(--ss-surface-alt);
   flex-shrink: 0;
 }
 .ss-dbg-email-preview-meta {
   font-size: 11px;
-  color: #a3a3a3;
+  color: var(--ss-text-secondary);
   line-height: 1.6;
   overflow: hidden;
 }
-.ss-dbg-email-preview-meta strong { color: #d4d4d4; font-weight: 600; }
+.ss-dbg-email-preview-meta strong { color: var(--ss-text); font-weight: 600; }
 .ss-dbg-email-iframe {
   flex: 1;
   border: none;
@@ -344,7 +489,7 @@
 
 /* Email row */
 .ss-dbg-email-row { cursor: pointer; }
-.ss-dbg-email-row:hover td { background: rgba(52, 211, 153, 0.06) !important; }
+.ss-dbg-email-row:hover td { background: var(--ss-hover-accent) !important; }
 
 /* Email status badges */
 .ss-dbg-email-status {
@@ -355,13 +500,13 @@
   font-weight: 600;
   text-transform: uppercase;
 }
-.ss-dbg-email-status-sent { background: #064e3b; color: #34d399; }
-.ss-dbg-email-status-sending { background: #422006; color: #fbbf24; }
-.ss-dbg-email-status-queued { background: #1e3a5f; color: #60a5fa; }
-.ss-dbg-email-status-failed { background: #450a0a; color: #f87171; }
+.ss-dbg-email-status-sent { background: var(--ss-green-bg); color: var(--ss-green-fg); }
+.ss-dbg-email-status-sending { background: var(--ss-amber-bg); color: var(--ss-amber-fg); }
+.ss-dbg-email-status-queued { background: var(--ss-blue-bg); color: var(--ss-blue-fg); }
+.ss-dbg-email-status-failed { background: var(--ss-red-bg); color: var(--ss-red-fg); }
 
 /* Filterable cell */
-.ss-dbg-filterable:hover { background: rgba(52, 211, 153, 0.08); }
+.ss-dbg-filterable:hover { background: var(--ss-hover-accent); }
 
 /* Timeline */
 .ss-dbg-tl-detail-header {
@@ -369,8 +514,8 @@
   align-items: center;
   gap: 12px;
   padding: 8px 12px;
-  border-bottom: 1px solid #262626;
-  background: #141414;
+  border-bottom: 1px solid var(--ss-border-dim);
+  background: var(--ss-surface-alt);
   flex-shrink: 0;
 }
 #ss-dbg-tl-waterfall {
@@ -386,9 +531,9 @@
   align-items: center;
   height: 24px;
   font-size: 11px;
-  border-bottom: 1px solid #1a1a1a;
+  border-bottom: 1px solid var(--ss-input-bg);
 }
-.ss-dbg-tl-row:hover { background: rgba(38, 38, 38, 0.4); }
+.ss-dbg-tl-row:hover { background: var(--ss-hover); }
 .ss-dbg-tl-label {
   width: 280px;
   min-width: 280px;
@@ -396,7 +541,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #a3a3a3;
+  color: var(--ss-text-secondary);
   font-size: 10px;
 }
 .ss-dbg-tl-track {
@@ -412,6 +557,7 @@
   min-width: 2px;
   cursor: default;
 }
+/* Timeline bar colors are semantic category indicators — kept as fixed values */
 .ss-dbg-tl-bar-request { background: #1e3a5f; }
 .ss-dbg-tl-bar-middleware { background: #1e3a5f; opacity: 0.7; }
 .ss-dbg-tl-bar-db { background: #6d28d9; }
@@ -422,7 +568,7 @@
 
 .ss-dbg-tl-dur {
   font-size: 10px;
-  color: #525252;
+  color: var(--ss-dim);
   margin-left: 4px;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
@@ -432,10 +578,10 @@
   display: flex;
   gap: 12px;
   padding: 6px 12px;
-  border-bottom: 1px solid #262626;
-  background: #141414;
+  border-bottom: 1px solid var(--ss-border-dim);
+  background: var(--ss-surface-alt);
   font-size: 10px;
-  color: #737373;
+  color: var(--ss-muted);
 }
 .ss-dbg-tl-legend-item {
   display: flex;
@@ -452,34 +598,279 @@
 .ss-dbg-tl-warnings {
   margin-top: 12px;
   padding: 8px 12px;
-  border-top: 1px solid #262626;
+  border-top: 1px solid var(--ss-border-dim);
 }
 .ss-dbg-tl-warnings-title {
   font-size: 10px;
   font-weight: 600;
-  color: #fbbf24;
+  color: var(--ss-amber-fg);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 4px;
 }
 .ss-dbg-tl-warning {
   font-size: 11px;
-  color: #fbbf24;
+  color: var(--ss-amber-fg);
   padding: 2px 0;
 }
 
 .ss-dbg-tl-meta {
   font-size: 10px;
-  color: #525252;
+  color: var(--ss-dim);
   margin-left: 8px;
 }
 
 /* Status code badges */
 .ss-dbg-status { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; }
-.ss-dbg-status-2xx { background: #064e3b; color: #34d399; }
-.ss-dbg-status-3xx { background: #1e3a5f; color: #60a5fa; }
-.ss-dbg-status-4xx { background: #422006; color: #fbbf24; }
-.ss-dbg-status-5xx { background: #450a0a; color: #f87171; }
+.ss-dbg-status-2xx { background: var(--ss-green-bg); color: var(--ss-green-fg); }
+.ss-dbg-status-3xx { background: var(--ss-blue-bg); color: var(--ss-blue-fg); }
+.ss-dbg-status-4xx { background: var(--ss-amber-bg); color: var(--ss-amber-fg); }
+.ss-dbg-status-5xx { background: var(--ss-red-bg); color: var(--ss-red-fg); }
+
+/* Dashboard deep link button in tab bar */
+.ss-dbg-dashboard-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px;
+  color: var(--ss-muted);
+  border-radius: 4px;
+  text-decoration: none;
+  transition: color 0.15s, background 0.15s;
+}
+.ss-dbg-dashboard-link:hover { color: var(--ss-accent); background: var(--ss-hover-accent); }
+
+/* Row-level deep link icon (visible on hover) */
+.ss-dbg-deeplink {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  color: var(--ss-border-strong);
+  text-decoration: none;
+  border-radius: 3px;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s;
+  vertical-align: middle;
+  margin-left: 4px;
+  flex-shrink: 0;
+}
+.ss-dbg-table tr:hover .ss-dbg-deeplink,
+.ss-dbg-email-row:hover .ss-dbg-deeplink { opacity: 1; }
+.ss-dbg-deeplink:hover { color: var(--ss-accent); background: var(--ss-hover-accent); }
+.ss-dbg-deeplink svg { width: 12px; height: 12px; }
+
+/* Connection mode indicator */
+.ss-dbg-conn-mode {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 1px 6px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+.ss-dbg-conn-polling {
+  background: var(--ss-border-dim);
+  color: var(--ss-muted);
+}
+.ss-dbg-conn-live {
+  background: var(--ss-green-bg);
+  color: var(--ss-green-fg);
+}
+
+/* Mini stats bar */
+.ss-dbg-mini-stats {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 10px;
+  color: var(--ss-muted);
+  padding: 0 4px;
+}
+.ss-dbg-mini-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  white-space: nowrap;
+}
+.ss-dbg-mini-stat-value {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+.ss-dbg-mini-stat-value.ss-dbg-stat-green { color: var(--ss-green-fg); }
+.ss-dbg-mini-stat-value.ss-dbg-stat-amber { color: var(--ss-amber-fg); }
+.ss-dbg-mini-stat-value.ss-dbg-stat-red { color: var(--ss-red-fg); }
+
+/* Cache tab */
+.ss-dbg-cache-stats {
+  display: flex;
+  gap: 16px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--ss-border-dim);
+  background: var(--ss-surface-alt);
+  font-size: 11px;
+}
+.ss-dbg-cache-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.ss-dbg-cache-stat-label { color: var(--ss-muted); }
+.ss-dbg-cache-stat-value { color: var(--ss-text); font-weight: 600; font-variant-numeric: tabular-nums; }
+
+/* Cache detail overlay */
+.ss-dbg-cache-detail {
+  padding: 12px;
+}
+.ss-dbg-cache-detail strong { color: var(--ss-text); }
+.ss-dbg-cache-detail pre {
+  margin: 8px 0 0;
+  padding: 8px;
+  background: var(--ss-input-bg);
+  border: 1px solid var(--ss-border);
+  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;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.ss-dbg-cache-detail pre::-webkit-scrollbar { display: none; }
+
+/* Jobs tab */
+.ss-dbg-job-stats-area {
+  border-bottom: 1px solid var(--ss-border-dim);
+}
+.ss-dbg-job-stats {
+  display: flex;
+  gap: 16px;
+  padding: 8px 12px;
+  background: var(--ss-surface-alt);
+  font-size: 11px;
+}
+.ss-dbg-job-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.ss-dbg-job-stat-label { color: var(--ss-muted); }
+.ss-dbg-job-stat-value { color: var(--ss-text); font-weight: 600; font-variant-numeric: tabular-nums; }
+
+.ss-dbg-job-filter {
+  padding: 3px 10px;
+  font-size: 10px;
+  font-family: inherit;
+  border: 1px solid var(--ss-border);
+  border-radius: 4px;
+  cursor: pointer;
+  background: none;
+  color: var(--ss-muted);
+  text-transform: uppercase;
+}
+.ss-dbg-job-filter:hover { border-color: var(--ss-dim); color: var(--ss-text-secondary); }
+.ss-dbg-job-filter.ss-dbg-active { border-color: var(--ss-accent); color: var(--ss-accent); }
+
+.ss-dbg-job-status-completed { background: var(--ss-green-bg); color: var(--ss-green-fg); }
+.ss-dbg-job-status-failed { background: var(--ss-red-bg); color: var(--ss-red-fg); }
+.ss-dbg-job-status-active { background: var(--ss-blue-bg); color: var(--ss-blue-fg); }
+.ss-dbg-job-status-waiting { background: var(--ss-amber-bg); color: var(--ss-amber-fg); }
+.ss-dbg-job-status-delayed { background: var(--ss-purple-bg); color: var(--ss-purple-fg); }
+
+.ss-dbg-retry-btn {
+  padding: 2px 8px;
+  font-size: 10px;
+  font-family: inherit;
+  color: var(--ss-muted);
+  background: var(--ss-border-dim);
+  border: 1px solid var(--ss-border-strong);
+  border-radius: 4px;
+  cursor: pointer;
+  text-transform: uppercase;
+}
+.ss-dbg-retry-btn:hover { color: var(--ss-text); border-color: var(--ss-dim); }
+.ss-dbg-retry-btn:disabled { opacity: 0.5; cursor: default; }
+
+/* Config tab */
+.ss-dbg-config-tab {
+  padding: 3px 10px;
+  font-size: 10px;
+  font-family: inherit;
+  border: 1px solid var(--ss-border);
+  border-radius: 4px;
+  cursor: pointer;
+  background: none;
+  color: var(--ss-muted);
+  text-transform: uppercase;
+}
+.ss-dbg-config-tab:hover { border-color: var(--ss-dim); color: var(--ss-text-secondary); }
+.ss-dbg-config-tab.ss-dbg-active { border-color: var(--ss-accent); color: var(--ss-accent); }
+
+.ss-dbg-config-sections { padding: 0; }
+.ss-dbg-config-section { border-bottom: 1px solid var(--ss-border-faint); }
+.ss-dbg-config-section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 11px;
+}
+.ss-dbg-config-section-header:hover { background: var(--ss-hover); }
+.ss-dbg-config-toggle { color: var(--ss-dim); font-size: 9px; width: 12px; text-align: center; flex-shrink: 0; }
+.ss-dbg-config-key { color: var(--ss-sql-color); }
+.ss-dbg-config-count { color: var(--ss-dim); font-size: 10px; margin-left: auto; }
+.ss-dbg-config-val { color: var(--ss-text-secondary); }
+.ss-dbg-config-val-true { color: var(--ss-accent); }
+.ss-dbg-config-val-false { color: var(--ss-red-fg); }
+.ss-dbg-config-val-number { color: var(--ss-amber-fg); }
+.ss-dbg-config-val-array { color: var(--ss-purple-fg); }
+.ss-dbg-config-val-null { color: var(--ss-dim); }
+.ss-dbg-config-redacted { color: var(--ss-dim); font-style: italic; }
+.ss-dbg-redacted-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-style: italic;
+  color: var(--ss-dim);
+}
+.ss-dbg-redacted-real {
+  font-style: normal;
+  color: var(--ss-text-secondary);
+  font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  word-break: break-all;
+}
+.ss-dbg-redacted-reveal,
+.ss-dbg-redacted-copy {
+  background: none;
+  border: 1px solid var(--ss-border);
+  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-dbg-redacted-reveal:hover,
+.ss-dbg-redacted-copy:hover {
+  color: var(--ss-text);
+  border-color: var(--ss-dim);
+}
+.ss-dbg-config-match { background: var(--ss-amber-bg); color: var(--ss-amber-fg); border-radius: 2px; padding: 0 1px; }
+
+.ss-dbg-config-leaf { cursor: default; }
+.ss-dbg-config-leaf:hover { background: transparent; }
+
+.ss-dbg-config-table-wrap { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; }
+.ss-dbg-config-table-wrap::-webkit-scrollbar { display: none; }
 
 /* Wrench button in stats bar */
 .ss-dbg-btn {
@@ -488,7 +879,7 @@
   gap: 4px;
   padding: 2px 6px;
   font-size: 12px;
-  color: #737373;
+  color: var(--ss-muted);
   cursor: pointer;
   border: none;
   background: none;
@@ -496,5 +887,34 @@
   border-radius: 4px;
   flex-shrink: 0;
 }
-.ss-dbg-btn:hover { color: #d4d4d4; background: rgba(38, 38, 38, 0.6); }
-.ss-dbg-btn.ss-dbg-active { color: #34d399; }
+.ss-dbg-btn:hover { color: var(--ss-text); background: var(--ss-hover); }
+.ss-dbg-btn.ss-dbg-active { color: var(--ss-accent); }
+
+/* Theme toggle button */
+.ss-dbg-theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px;
+  color: var(--ss-muted);
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 14px;
+  border-radius: 4px;
+  transition: color 0.15s, background 0.15s;
+}
+.ss-dbg-theme-toggle:hover {
+  color: var(--ss-accent);
+  background: var(--ss-hover-accent);
+}
+
+/* Utility classes for JS-rendered inline content */
+.ss-dbg-c-dim { color: var(--ss-dim); }
+.ss-dbg-c-muted { color: var(--ss-muted); }
+.ss-dbg-c-secondary { color: var(--ss-text-secondary); }
+.ss-dbg-c-text { color: var(--ss-text); }
+.ss-dbg-c-sql { color: var(--ss-sql-color); }
+.ss-dbg-c-amber { color: var(--ss-amber-fg); }
+.ss-dbg-c-red { color: var(--ss-red-fg); }
+.ss-dbg-c-border { color: var(--ss-border); }