adonisjs-server-stats 1.5.4 → 1.6.2

package/dist/src/{edge/client → styles}/debug-panel.css

@@ -38,7 +38,6 @@
   --ss-reqid-fg: #6d28d9;
   --ss-reqid-hover-bg: #2e2644;
   --ss-reqid-hover-fg: #a78bfa;
-
   position: fixed;
   inset-inline: 0;
   bottom: 28px;
@@ -51,6 +50,7 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   color: var(--ss-text);
   box-shadow: 0 -8px 24px var(--ss-shadow);
+  overflow-x: hidden;
 }
 
 /* ── Theme: Light (auto via system preference) ────────────────── */
@@ -92,6 +92,15 @@
   }
 }
 
+/* ── Reset: inherit font-family on form elements ─────────────── */
+.ss-dbg-panel button,
+.ss-dbg-panel input,
+.ss-dbg-panel select,
+.ss-dbg-panel textarea,
+.ss-dbg-panel pre {
+  font-family: inherit;
+}
+
 /* ── Theme: Light (manual override) ───────────────────────────── */
 .ss-dbg-panel[data-ss-theme='light'] {
   --ss-bg: #fafafa;
@@ -152,8 +161,7 @@
   flex: 1;
   min-width: 0;
   padding-left: 8px;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  /* scrollbar hiding → utilities.css */
   mask-image: linear-gradient(
     to right,
     transparent 0,
@@ -169,9 +177,6 @@
     transparent 100%
   );
 }
-.ss-dbg-tabs-scroll::-webkit-scrollbar {
-  display: none;
-}
 .ss-dbg-tab {
   display: inline-flex;
   align-items: center;
@@ -188,7 +193,6 @@
   transition:
     color 0.15s,
     border-color 0.15s;
-  font-family: inherit;
   text-transform: uppercase;
   white-space: nowrap;
   flex-shrink: 0;
@@ -225,7 +229,6 @@
   cursor: pointer;
   border: none;
   background: none;
-  font-family: inherit;
 }
 .ss-dbg-close:hover {
   color: var(--ss-text-bright);
@@ -234,18 +237,16 @@
 /* Tab content */
 .ss-dbg-content {
   flex: 1;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   padding: 0;
 }
 .ss-dbg-pane {
   display: none;
   height: 100%;
-  overflow: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.ss-dbg-pane::-webkit-scrollbar {
-  display: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* scrollbar hiding → utilities.css */
 }
 .ss-dbg-pane.ss-dbg-active {
   display: block;
@@ -264,7 +265,6 @@
   flex: 1;
   padding: 4px 8px;
   font-size: 11px;
-  font-family: inherit;
   color: var(--ss-text);
   background: var(--ss-input-bg);
   border: 1px solid var(--ss-border);
@@ -286,7 +286,6 @@
 .ss-dbg-btn-clear {
   padding: 3px 8px;
   font-size: 10px;
-  font-family: inherit;
   color: var(--ss-muted);
   background: var(--ss-border-dim);
   border: 1px solid var(--ss-border-strong);
@@ -299,35 +298,7 @@
   border-color: var(--ss-dim);
 }
 
-/* Table */
-.ss-dbg-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 11px;
-}
-.ss-dbg-table th {
-  position: sticky;
-  top: 0;
-  padding: 6px 10px;
-  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;
-}
-.ss-dbg-table td {
-  padding: 5px 10px;
-  border-bottom: 1px solid var(--ss-border-faint);
-  vertical-align: top;
-  max-width: 0;
-}
-.ss-dbg-table tr:hover td {
-  background: var(--ss-hover);
-}
+/* Table base / column resize → components.css */
 
 /* Query-specific styles */
 .ss-dbg-sql {
@@ -336,55 +307,19 @@
   word-break: break-all;
   cursor: pointer;
   max-width: 500px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  /* truncation → utilities.css */
 }
 .ss-dbg-sql.ss-dbg-expanded {
   white-space: pre-wrap;
   max-width: none;
 }
-.ss-dbg-duration {
-  font-variant-numeric: tabular-nums;
-}
-.ss-dbg-slow {
-  color: var(--ss-amber-fg);
-}
-.ss-dbg-very-slow {
-  color: var(--ss-red-fg);
-}
+/* Duration → components.css */
 .ss-dbg-dup {
   color: var(--ss-purple-fg);
   font-size: 10px;
 }
 
-/* Method badges */
-.ss-dbg-method {
-  display: inline-block;
-  padding: 1px 5px;
-  border-radius: 3px;
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-}
-.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);
-}
+/* Method badges → components.css */
 
 /* Route highlight */
 .ss-dbg-current-route td {
@@ -394,25 +329,40 @@
 /* Event list */
 .ss-dbg-event-name {
   color: var(--ss-sql-color);
+  /* truncation → utilities.css */
 }
 .ss-dbg-event-data {
   color: var(--ss-muted);
   font-size: 10px;
   position: relative;
+  /* truncation → utilities.css */
 }
 .ss-dbg-event-time {
   color: var(--ss-dim);
   font-size: 10px;
-  font-variant-numeric: tabular-nums;
+  /* tabular-nums → utilities.css */
+  white-space: nowrap;
 }
 .ss-dbg-data-preview {
   cursor: pointer;
   color: var(--ss-text-secondary);
   border-bottom: 1px dashed var(--ss-dim);
+  /* truncation → utilities.css */
+  display: block;
 }
 .ss-dbg-data-preview:hover {
   color: var(--ss-text);
 }
+/* Data cell wrapper used by JsonViewer */
+.ss-dbg-data-cell {
+  /* truncation → utilities.css */
+}
+/* When expanded data is shown, allow the cell to wrap */
+.ss-dbg-event-data:has(.ss-dbg-data-full),
+.ss-dbg-data-cell:has(.ss-dbg-data-full) {
+  white-space: normal;
+  overflow: visible;
+}
 .ss-dbg-data-full {
   margin: 4px 0 0;
   padding: 8px;
@@ -421,34 +371,14 @@
   border-radius: 4px;
   color: var(--ss-text-secondary);
   font-size: 10px;
-  font-family: inherit;
   white-space: pre-wrap;
   word-break: break-all;
   max-height: 200px;
   overflow: auto;
   cursor: pointer;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.ss-dbg-data-full::-webkit-scrollbar {
-  display: none;
-}
-.ss-dbg-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;
-}
-.ss-dbg-copy-btn:hover {
-  color: var(--ss-text-secondary);
-  border-color: var(--ss-border-strong);
+  /* scrollbar hiding → utilities.css */
 }
+/* Copy button → components.css */
 
 /* Logs */
 .ss-dbg-log-filters {
@@ -458,10 +388,12 @@
   border-bottom: 1px solid var(--ss-border-dim);
   background: var(--ss-surface-alt);
 }
-.ss-dbg-log-filter {
+/* Filter buttons share a common style (log, job, config tabs) */
+.ss-dbg-log-filter,
+.ss-dbg-job-filter,
+.ss-dbg-config-tab {
   padding: 3px 10px;
   font-size: 10px;
-  font-family: inherit;
   border: 1px solid var(--ss-border);
   border-radius: 4px;
   cursor: pointer;
@@ -469,363 +401,51 @@
   color: var(--ss-muted);
   text-transform: uppercase;
 }
-.ss-dbg-log-filter:hover {
+.ss-dbg-log-filter:hover,
+.ss-dbg-job-filter:hover,
+.ss-dbg-config-tab:hover {
   border-color: var(--ss-dim);
   color: var(--ss-text-secondary);
 }
-.ss-dbg-log-filter.ss-dbg-active {
+.ss-dbg-log-filter.ss-dbg-active,
+.ss-dbg-job-filter.ss-dbg-active,
+.ss-dbg-config-tab.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 var(--ss-input-bg);
-  display: flex;
-  gap: 8px;
-  align-items: baseline;
-}
-.ss-dbg-log-level {
-  font-size: 10px;
-  font-weight: 600;
-  width: 42px;
-  text-align: center;
-  flex-shrink: 0;
-  padding: 1px 0;
-  border-radius: 3px;
-}
-.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: 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-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;
-}
+/* Log entry / level / time / reqid / msg → components.css */
 .ss-dbg-reqid-input {
   max-width: 200px;
   margin-left: auto;
 }
-.ss-dbg-log-msg {
-  color: var(--ss-text);
-  word-break: break-word;
-}
-
-/* Empty state */
-.ss-dbg-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 120px;
-  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: 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 {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--ss-bg);
-  z-index: 30;
-}
-.ss-dbg-email-preview-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 10px 12px;
-  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: var(--ss-text-secondary);
-  line-height: 1.6;
-  overflow: hidden;
-}
-.ss-dbg-email-preview-meta strong {
-  color: var(--ss-text);
-  font-weight: 600;
-}
-.ss-dbg-email-iframe {
-  flex: 1;
-  border: none;
-  background: #fff;
-}
+/* Empty state → components.css */
 
-/* Email row */
-.ss-dbg-email-row {
-  cursor: pointer;
-}
-.ss-dbg-email-row:hover td {
-  background: var(--ss-hover-accent) !important;
-}
+/* Badge → components.css */
 
-/* Email status badges */
-.ss-dbg-email-status {
-  display: inline-block;
-  padding: 1px 6px;
-  border-radius: 3px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-.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);
-}
+/* Email preview / row / status → components.css */
 
 /* Filterable cell */
 .ss-dbg-filterable:hover {
   background: var(--ss-hover-accent);
 }
 
-/* Timeline */
-.ss-dbg-tl-detail-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--ss-border-dim);
-  background: var(--ss-surface-alt);
-  flex-shrink: 0;
+/* Timeline base → components.css */
+/* Debug-specific timeline overrides */
+.ss-dbg-tl-detail-url {
+  color: var(--ss-text);
+  font-size: 11px;
+  /* truncation → utilities.css */
+  min-width: 0;
 }
 #ss-dbg-tl-waterfall {
   padding: 8px 12px;
   overflow: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-#ss-dbg-tl-waterfall::-webkit-scrollbar {
-  display: none;
-}
-
-.ss-dbg-tl-row {
-  display: flex;
-  align-items: center;
-  height: 24px;
-  font-size: 11px;
-  border-bottom: 1px solid var(--ss-input-bg);
-}
-.ss-dbg-tl-row:hover {
-  background: var(--ss-hover);
-}
-.ss-dbg-tl-label {
-  width: 280px;
-  min-width: 280px;
-  padding-right: 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--ss-text-secondary);
-  font-size: 10px;
-}
-.ss-dbg-tl-track {
-  flex: 1;
-  position: relative;
-  height: 16px;
-}
-.ss-dbg-tl-bar {
-  position: absolute;
-  height: 12px;
-  top: 2px;
-  border-radius: 2px;
-  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;
-}
-.ss-dbg-tl-bar-view {
-  background: #0e7490;
-}
-.ss-dbg-tl-bar-mail {
-  background: #059669;
-}
-.ss-dbg-tl-bar-event {
-  background: #b45309;
-}
-.ss-dbg-tl-bar-custom {
-  background: #525252;
-}
-
-.ss-dbg-tl-dur {
-  font-size: 10px;
-  color: var(--ss-dim);
-  margin-left: 4px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.ss-dbg-tl-legend {
-  display: flex;
-  gap: 12px;
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--ss-border-dim);
-  background: var(--ss-surface-alt);
-  font-size: 10px;
-  color: var(--ss-muted);
-}
-.ss-dbg-tl-legend-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-.ss-dbg-tl-legend-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 2px;
-  flex-shrink: 0;
-}
-
-.ss-dbg-tl-warnings {
-  margin-top: 12px;
-  padding: 8px 12px;
-  border-top: 1px solid var(--ss-border-dim);
-}
-.ss-dbg-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-dbg-tl-warning {
-  font-size: 11px;
-  color: var(--ss-amber-fg);
-  padding: 2px 0;
+  /* scrollbar hiding → utilities.css */
 }
 
-.ss-dbg-tl-meta {
-  font-size: 10px;
-  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: 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);
-}
+/* Status code badges → components.css */
 
 /* Dashboard deep link button in tab bar */
 .ss-dbg-dashboard-link {
@@ -911,8 +531,9 @@
   white-space: nowrap;
 }
 .ss-dbg-mini-stat-value {
-  font-variant-numeric: tabular-nums;
+  /* tabular-nums → utilities.css */
   font-weight: 600;
+  color: var(--ss-text);
 }
 .ss-dbg-mini-stat-value.ss-dbg-stat-green {
   color: var(--ss-green-fg);
@@ -944,7 +565,7 @@
 .ss-dbg-cache-stat-value {
   color: var(--ss-text);
   font-weight: 600;
-  font-variant-numeric: tabular-nums;
+  /* tabular-nums → utilities.css */
 }
 
 /* Cache detail overlay */
@@ -962,16 +583,11 @@
   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;
+  /* scrollbar hiding → utilities.css */
 }
 
 /* Jobs tab */
@@ -996,28 +612,10 @@
 .ss-dbg-job-stat-value {
   color: var(--ss-text);
   font-weight: 600;
-  font-variant-numeric: tabular-nums;
+  /* tabular-nums → utilities.css */
 }
 
-.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-filter → consolidated above with log-filter & config-tab */
 
 .ss-dbg-job-status-completed {
   background: var(--ss-green-bg);
@@ -1043,7 +641,6 @@
 .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);
@@ -1060,159 +657,46 @@
   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-tab → consolidated above with log-filter & job-filter */
+/* Config sections/toggle/key/val/match/leaf/redacted/copy-row/inner-table → components.css */
+/* Btn / btn-group → components.css */
 
-.ss-dbg-config-sections {
-  padding: 0;
-}
-.ss-dbg-config-section {
-  border-bottom: 1px solid var(--ss-border-faint);
+/* Debug-specific: config toolbar, env table, search wrap */
+.ss-dbg-config-table-wrap {
+  overflow: auto;
+  /* scrollbar hiding → utilities.css */
 }
-.ss-dbg-config-section-header {
+.ss-dbg-config-toolbar {
   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;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--ss-border-faint);
 }
-
-.ss-dbg-config-leaf {
-  cursor: default;
+.ss-dbg-config-env-table {
+  table-layout: fixed;
 }
-.ss-dbg-config-leaf:hover {
-  background: transparent;
+.ss-dbg-env-key {
+  width: 200px;
+  min-width: 200px;
+  /* truncation → utilities.css */
 }
-
-.ss-dbg-config-table-wrap {
-  overflow: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+.ss-dbg-env-val {
+  /* truncation → utilities.css */
+  max-width: 0;
 }
-.ss-dbg-config-table-wrap::-webkit-scrollbar {
-  display: none;
+.ss-dbg-config-search-wrap {
+  position: relative;
+  flex: 1;
+  min-width: 120px;
+  max-width: 280px;
 }
 
-/* Wrench button in stats bar */
+/* Debug-specific btn overrides */
 .ss-dbg-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 6px;
-  font-size: 12px;
-  color: var(--ss-muted);
-  cursor: pointer;
-  border: none;
-  background: none;
-  font-family: inherit;
-  border-radius: 4px;
-  flex-shrink: 0;
-}
-.ss-dbg-btn:hover {
-  color: var(--ss-text);
-  background: var(--ss-hover);
-}
-.ss-dbg-btn.ss-dbg-active {
-  color: var(--ss-accent);
+  --ss-btn-py: 2px;
+  --ss-btn-px: 6px;
+  --ss-btn-font: 12px;
 }
 
 /* Theme toggle button */
@@ -1236,28 +720,28 @@
   background: var(--ss-hover-accent);
 }
 
-/* Utility classes for JS-rendered inline content */
-.ss-dbg-c-dim {
-  color: var(--ss-dim);
-}
-.ss-dbg-c-muted {
+/* Utility color classes → components.css */
+
+/* ── Internals section title ──────────────────────────────────── */
+.ss-dbg-internals-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
   color: var(--ss-muted);
+  margin: 20px 0 8px;
+  padding: 0 10px 6px;
+  border-bottom: 1px solid var(--ss-border);
 }
-.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-internals-title:first-child {
+  margin-top: 4px;
 }
-.ss-dbg-c-border {
-  color: var(--ss-border);
+
+/* Info cards → components.css */
+/* Status indicator dot → components.css */
+
+/* Progress bar → components.css */
+/* Debug panel override: constrain bar-track width */
+.ss-dbg-bar-track {
+  max-width: 120px;
 }