adonisjs-server-stats 1.10.0 → 1.11.0

package/dist/src/routes/register_routes.d.ts

@@ -6,97 +6,19 @@ import type { AdonisRouter } from './router_types.js';
 import type { HttpContext } from '@adonisjs/core/http';
 /**
  * Options for the unified route registration function.
- *
- * Brings together stats, debug, and dashboard route registration
- * into a single call with all required dependencies declared upfront.
  */
 export interface RegisterRoutesOptions {
-    /** The AdonisJS router instance. */
     router: AdonisRouter;
-    /**
-     * The unified API controller that serves all data resource endpoints
-     * (queries, events, emails, traces, routes, logs).
-     *
-     * Pass `null` during early boot — routes will return 503 until the
-     * controller is wired up.
-     */
     getApiController: () => ApiController | null;
-    /**
-     * Lazy getter for the stats bar controller.
-     *
-     * The controller is created during `ready()`, but routes are
-     * registered during `boot()`, so a lazy getter is required.
-     */
     getStatsController: () => ServerStatsController | null;
-    /**
-     * Lazy getter for the debug controller.
-     *
-     * Handles non-data debug endpoints: `/config` and `/diagnostics`.
-     */
     getDebugController: () => DebugController | null;
-    /**
-     * Lazy getter for the dashboard controller.
-     *
-     * Handles dashboard-specific endpoints that are **not** data
-     * resources: page rendering, overview, requests, cache, jobs,
-     * config, saved filters, grouped queries, and query explain.
-     */
     getDashboardController: () => DashboardController | null;
-    /**
-     * Stats polling endpoint path (e.g. `'/admin/api/server-stats'`).
-     *
-     * Set to `false` to skip registering the stats endpoint entirely.
-     */
     statsEndpoint?: string | false;
-    /**
-     * Base path for debug panel API routes (e.g. `'/admin/api/debug'`).
-     *
-     * When omitted, debug routes are **not** registered.
-     */
     debugEndpoint?: string;
-    /**
-     * Base path for the full-page dashboard (e.g. `'/__stats'`).
-     *
-     * When omitted, dashboard routes are **not** registered.
-     */
     dashboardPath?: string;
-    /**
-     * Optional access-control callback applied to **all** registered
-     * routes as middleware. When it returns `false`, the request
-     * receives a 403 Forbidden response.
-     */
     shouldShow?: (ctx: HttpContext) => boolean;
 }
 /**
  * Register all server-stats routes in a single call.
- *
- * This is the unified replacement for the three separate registrars:
- *
- * - `registerStatsRoutes`     — stats bar polling endpoint
- * - `registerDebugRoutes`     — debug panel API endpoints
- * - `registerDashboardRoutes` — full-page dashboard endpoints
- *
- * **Data resource** endpoints (queries, events, emails, traces, routes,
- * logs) are routed through the unified {@link ApiController} so that
- * both the debug panel and the dashboard read from the same handler.
- *
- * **Non-data** endpoints (stats polling, config, diagnostics, overview,
- * requests, cache, jobs, saved filters, grouped queries, query explain,
- * and the dashboard HTML page) continue to use their original controllers.
- *
- * @example
- * ```ts
- * registerAllRoutes({
- *   router,
- *   getApiController: () => apiController,
- *   getStatsController: () => statsController,
- *   getDebugController: () => debugController,
- *   getDashboardController: () => dashboardController,
- *   statsEndpoint: '/admin/api/server-stats',
- *   debugEndpoint: '/admin/api/debug',
- *   dashboardPath: '/__stats',
- *   shouldShow: (ctx) => ctx.auth?.user?.role === 'admin',
- * })
- * ```
  */
 export declare function registerAllRoutes(options: RegisterRoutesOptions): void;

package/dist/src/routes/register_routes.js

@@ -1,361 +1,31 @@
 import { createAccessMiddleware } from './access_middleware.js';
-// ---------------------------------------------------------------------------
-// Registration
-// ---------------------------------------------------------------------------
+import { registerDashboardRoutes } from './dashboard_routes.js';
+import { registerDebugRoutes } from './debug_routes.js';
+import { registerStatsRoute } from './stats_routes.js';
 /**
  * Register all server-stats routes in a single call.
- *
- * This is the unified replacement for the three separate registrars:
- *
- * - `registerStatsRoutes`     — stats bar polling endpoint
- * - `registerDebugRoutes`     — debug panel API endpoints
- * - `registerDashboardRoutes` — full-page dashboard endpoints
- *
- * **Data resource** endpoints (queries, events, emails, traces, routes,
- * logs) are routed through the unified {@link ApiController} so that
- * both the debug panel and the dashboard read from the same handler.
- *
- * **Non-data** endpoints (stats polling, config, diagnostics, overview,
- * requests, cache, jobs, saved filters, grouped queries, query explain,
- * and the dashboard HTML page) continue to use their original controllers.
- *
- * @example
- * ```ts
- * registerAllRoutes({
- *   router,
- *   getApiController: () => apiController,
- *   getStatsController: () => statsController,
- *   getDebugController: () => debugController,
- *   getDashboardController: () => dashboardController,
- *   statsEndpoint: '/admin/api/server-stats',
- *   debugEndpoint: '/admin/api/debug',
- *   dashboardPath: '/__stats',
- *   shouldShow: (ctx) => ctx.auth?.user?.role === 'admin',
- * })
- * ```
  */
 export function registerAllRoutes(options) {
-    const { router, getApiController, getStatsController, getDebugController, getDashboardController, statsEndpoint, debugEndpoint, dashboardPath, shouldShow, } = options;
-    const middleware = shouldShow ? [createAccessMiddleware(shouldShow)] : [];
-    // =========================================================================
-    // Stats polling endpoint
-    // =========================================================================
-    if (typeof statsEndpoint === 'string') {
-        router
-            .get(statsEndpoint, async (ctx) => {
-            const controller = getStatsController();
-            if (!controller) {
-                return ctx.response.serviceUnavailable({
-                    error: 'Stats engine is starting up, please retry',
-                });
-            }
-            return controller.index(ctx);
-        })
-            .as('server-stats.api')
-            .use(middleware);
+    const middleware = options.shouldShow ? [createAccessMiddleware(options.shouldShow)] : [];
+    if (typeof options.statsEndpoint === 'string') {
+        registerStatsRoute(options.router, options.statsEndpoint, options.getStatsController, middleware);
     }
-    // =========================================================================
-    // Debug panel API routes
-    // =========================================================================
-    if (debugEndpoint) {
-        const base = debugEndpoint.replace(/\/+$/, '');
-        /**
-         * Bind a debug controller method with lazy initialization and
-         * 503 fallback when the controller is not yet ready.
-         */
-        const bindDebug = (method) => {
-            return async (ctx) => {
-                const controller = getDebugController();
-                if (!controller) {
-                    return ctx.response.serviceUnavailable({
-                        error: 'Debug toolbar is starting up, please retry',
-                    });
-                }
-                return controller[method].call(controller, ctx);
-            };
-        };
-        /**
-         * Wrap an ApiController method as an HTTP handler with lazy
-         * initialization and 503 fallback.
-         */
-        const bindApi = (fn) => {
-            return async (ctx) => {
-                const api = getApiController();
-                if (!api) {
-                    return ctx.response.serviceUnavailable({
-                        error: 'Debug toolbar is starting up, please retry',
-                    });
-                }
-                return fn(api, ctx);
-            };
-        };
-        router
-            .group(() => {
-            // Non-data endpoints — stay with DebugController
-            router.get('/config', bindDebug('config')).as('server-stats.debug.config');
-            router.get('/diagnostics', bindDebug('diagnostics')).as('server-stats.debug.diagnostics');
-            // Data endpoints — unified through ApiController
-            // Queries, events, and traces read from ring buffers (source: 'memory')
-            // because SQLite column names (snake_case) differ from the
-            // camelCase QueryRecord/EventRecord/etc. shapes the frontend expects.
-            // Logs and emails use 'auto' (SQLite when available) since the
-            // frontend resolvers handle both snake_case and camelCase fields.
-            router
-                .get('/queries', bindApi(async (api, ctx) => {
-                const queries = await api.getQueries({ source: 'memory' });
-                const summary = api.getQuerySummary();
-                return ctx.response.json({ queries: queries.data, summary });
-            }))
-                .as('server-stats.debug.queries');
-            router
-                .get('/events', bindApi(async (api, ctx) => {
-                const result = await api.getEvents({ source: 'memory' });
-                return ctx.response.json({ events: result.data, total: result.meta.total });
-            }))
-                .as('server-stats.debug.events');
-            router
-                .get('/routes', bindApi((api, ctx) => {
-                const result = api.getRoutes();
-                return ctx.response.json({ routes: result.data, total: result.meta.total });
-            }))
-                .as('server-stats.debug.routes');
-            router
-                .get('/logs', bindApi(async (api, ctx) => {
-                // Request up to 200 entries so the debug panel frontend
-                // (which caps at `.slice(0, 200)`) always has enough
-                // recent logs instead of the default 50-row page.
-                const result = await api.getLogs({ source: 'auto', perPage: 200 });
-                return ctx.response.json(result.data);
-            }))
-                .as('server-stats.debug.logs');
-            router
-                .get('/emails', bindApi(async (api, ctx) => {
-                const result = await api.getEmails({});
-                return ctx.response.json({ emails: result.data, total: result.meta.total });
-            }))
-                .as('server-stats.debug.emails');
-            router
-                .get('/emails/:id/preview', bindApi(async (api, ctx) => {
-                const id = Number(ctx.params.id);
-                const html = await api.getEmailPreview(id);
-                if (!html) {
-                    return ctx.response.notFound({ error: 'Email not found' });
-                }
-                return ctx.response.header('Content-Type', 'text/html; charset=utf-8').send(html);
-            }))
-                .as('server-stats.debug.emailPreview');
-            router
-                .get('/traces', bindApi(async (api, ctx) => {
-                const result = await api.getTraces({ source: 'memory' });
-                return ctx.response.json({ traces: result.data, total: result.meta.total });
-            }))
-                .as('server-stats.debug.traces');
-            router
-                .get('/traces/:id', bindApi(async (api, ctx) => {
-                const id = Number(ctx.params.id);
-                const trace = await api.getTraceDetail(id, 'memory');
-                if (!trace) {
-                    return ctx.response.notFound({ error: 'Trace not found' });
-                }
-                return ctx.response.json(trace);
-            }))
-                .as('server-stats.debug.traceDetail');
-        })
-            .prefix(base)
-            .use(middleware);
+    if (options.debugEndpoint) {
+        registerDebugRoutes({
+            router: options.router,
+            debugEndpoint: options.debugEndpoint,
+            getDebugController: options.getDebugController,
+            getApiController: options.getApiController,
+            middleware,
+        });
     }
-    // =========================================================================
-    // Dashboard routes
-    // =========================================================================
-    if (dashboardPath) {
-        const base = dashboardPath.replace(/\/+$/, '');
-        /**
-         * Bind a dashboard controller method with lazy initialization
-         * and 503 fallback.
-         */
-        const bindDash = (method) => {
-            return async (ctx) => {
-                const controller = getDashboardController();
-                if (!controller) {
-                    return ctx.response.serviceUnavailable({
-                        error: 'Dashboard is starting up, please retry',
-                    });
-                }
-                return controller[method].call(controller, ctx);
-            };
-        };
-        /**
-         * Wrap an ApiController method as a dashboard HTTP handler with
-         * lazy initialization and 503 fallback.
-         */
-        const bindApi = (fn) => {
-            return async (ctx) => {
-                const api = getApiController();
-                if (!api) {
-                    return ctx.response.serviceUnavailable({
-                        error: 'Dashboard is starting up, please retry',
-                    });
-                }
-                return fn(api, ctx);
-            };
-        };
-        router
-            .group(() => {
-            // ── Page ────────────────────────────────────────────────────
-            router.get('/', bindDash('page')).as('server-stats.dashboard');
-            // ── Overview (dashboard-only) ───────────────────────────────
-            router.get('/api/overview', bindDash('overview')).as('server-stats.overview');
-            router
-                .get('/api/overview/chart', bindDash('overviewChart'))
-                .as('server-stats.overview.chart');
-            // ── Requests (dashboard-only) ───────────────────────────────
-            router.get('/api/requests', bindDash('requests')).as('server-stats.requests');
-            router.get('/api/requests/:id', bindDash('requestDetail')).as('server-stats.requests.show');
-            // ── Queries — unified data via ApiController ────────────────
-            router
-                .get('/api/queries', bindApi(async (api, ctx) => {
-                const qs = ctx.request.qs();
-                const result = await api.getQueries({
-                    page: Number(qs.page) || 1,
-                    perPage: Number(qs.perPage) || 25,
-                    search: qs.search || undefined,
-                    filters: {
-                        durationMin: qs.duration_min ? Number(qs.duration_min) : undefined,
-                        model: qs.model || undefined,
-                        method: qs.method || undefined,
-                        connection: qs.connection || undefined,
-                    },
-                });
-                return ctx.response.json(result);
-            }))
-                .as('server-stats.queries');
-            // Grouped queries and explain stay on DashboardController
-            router
-                .get('/api/queries/grouped', bindDash('queriesGrouped'))
-                .as('server-stats.queries.grouped');
-            router
-                .get('/api/queries/:id/explain', bindDash('queryExplain'))
-                .as('server-stats.queries.explain');
-            // ── Events — unified data via ApiController ─────────────────
-            router
-                .get('/api/events', bindApi(async (api, ctx) => {
-                const qs = ctx.request.qs();
-                const result = await api.getEvents({
-                    page: Number(qs.page) || 1,
-                    perPage: Number(qs.perPage) || 25,
-                    search: qs.search || undefined,
-                    filters: {
-                        eventName: qs.event_name || undefined,
-                    },
-                });
-                return ctx.response.json(result);
-            }))
-                .as('server-stats.events');
-            // ── Routes — unified data via ApiController ─────────────────
-            router
-                .get('/api/routes', bindApi((api, ctx) => {
-                const qs = ctx.request.qs();
-                const result = api.getRoutes(qs.search || undefined);
-                return ctx.response.json(result);
-            }))
-                .as('server-stats.routes');
-            // ── Logs — unified data via ApiController ───────────────────
-            router
-                .get('/api/logs', bindApi(async (api, ctx) => {
-                const qs = ctx.request.qs();
-                const result = await api.getLogs({
-                    page: Number(qs.page) || 1,
-                    perPage: Number(qs.perPage) || 50,
-                    search: qs.message || qs.search || undefined,
-                    filters: {
-                        level: qs.level || undefined,
-                        requestId: qs.request_id || qs.requestId || undefined,
-                    },
-                });
-                return ctx.response.json(result);
-            }))
-                .as('server-stats.logs');
-            // ── Emails — unified data via ApiController ─────────────────
-            router
-                .get('/api/emails', bindApi(async (api, ctx) => {
-                const qs = ctx.request.qs();
-                const result = await api.getEmails({
-                    page: Number(qs.page) || 1,
-                    perPage: Number(qs.perPage) || 25,
-                    search: qs.search || undefined,
-                    filters: {
-                        from: qs.from || undefined,
-                        to: qs.to || undefined,
-                        subject: qs.subject || undefined,
-                        status: qs.status || undefined,
-                        mailer: qs.mailer || undefined,
-                    },
-                });
-                return ctx.response.json(result);
-            }))
-                .as('server-stats.emails');
-            router
-                .get('/api/emails/:id/preview', bindApi(async (api, ctx) => {
-                const id = Number(ctx.params.id);
-                const html = await api.getEmailPreview(id);
-                if (!html) {
-                    return ctx.response.notFound({ error: 'Email not found' });
-                }
-                return ctx.response.header('Content-Type', 'text/html; charset=utf-8').send(html);
-            }))
-                .as('server-stats.emails.preview');
-            // ── Traces — unified data via ApiController ─────────────────
-            router
-                .get('/api/traces', bindApi(async (api, ctx) => {
-                const qs = ctx.request.qs();
-                const result = await api.getTraces({
-                    page: Number(qs.page) || 1,
-                    perPage: Number(qs.perPage) || 25,
-                    search: qs.search || undefined,
-                    filters: {
-                        method: qs.method ? qs.method.toUpperCase() : undefined,
-                        url: qs.url || undefined,
-                        statusMin: qs.status_min ? Number(qs.status_min) : undefined,
-                        statusMax: qs.status_max ? Number(qs.status_max) : undefined,
-                    },
-                });
-                return ctx.response.json(result);
-            }))
-                .as('server-stats.traces');
-            router
-                .get('/api/traces/:id', bindApi(async (api, ctx) => {
-                const id = Number(ctx.params.id);
-                const trace = await api.getTraceDetail(id);
-                if (!trace) {
-                    return ctx.response.notFound({ error: 'Trace not found' });
-                }
-                return ctx.response.json(trace);
-            }))
-                .as('server-stats.traces.show');
-            // ── Cache (dashboard-only) ──────────────────────────────────
-            router.get('/api/cache', bindDash('cacheStats')).as('server-stats.cache');
-            router
-                .get('/api/cache/:key', bindDash('cacheKey'))
-                .as('server-stats.cache.show')
-                .where('key', /.*/);
-            router
-                .delete('/api/cache/:key', bindDash('cacheKeyDelete'))
-                .as('server-stats.cache.delete')
-                .where('key', /.*/);
-            // ── Jobs / Queue (dashboard-only) ───────────────────────────
-            router.get('/api/jobs', bindDash('jobs')).as('server-stats.jobs');
-            router.get('/api/jobs/:id', bindDash('jobDetail')).as('server-stats.jobs.show');
-            router.post('/api/jobs/:id/retry', bindDash('jobRetry')).as('server-stats.jobs.retry');
-            // ── Config (dashboard-only) ─────────────────────────────────
-            router.get('/api/config', bindDash('config')).as('server-stats.config');
-            // ── Saved Filters (dashboard-only) ──────────────────────────
-            router.get('/api/filters', bindDash('savedFilters')).as('server-stats.filters');
-            router.post('/api/filters', bindDash('createSavedFilter')).as('server-stats.filters.create');
-            router
-                .delete('/api/filters/:id', bindDash('deleteSavedFilter'))
-                .as('server-stats.filters.delete');
-        })
-            .prefix(base)
-            .use(middleware);
+    if (options.dashboardPath) {
+        registerDashboardRoutes({
+            router: options.router,
+            dashboardPath: options.dashboardPath,
+            getDashboardController: options.getDashboardController,
+            getApiController: options.getApiController,
+            middleware,
+        });
     }
 }

package/dist/src/routes/stats_routes.d.ts

@@ -0,0 +1,5 @@
+import type ServerStatsController from '../controller/server_stats_controller.js';
+import type { AdonisRouter } from './router_types.js';
+import type { HttpContext } from '@adonisjs/core/http';
+/** Register the stats polling endpoint. */
+export declare function registerStatsRoute(router: AdonisRouter, endpoint: string, getController: () => ServerStatsController | null, middleware: Array<(ctx: HttpContext, next: () => Promise<void>) => Promise<void>>): void;

package/dist/src/routes/stats_routes.js

@@ -0,0 +1,14 @@
+/** Register the stats polling endpoint. */
+export function registerStatsRoute(router, endpoint, getController, middleware) {
+    router
+        .get(endpoint, async (ctx) => {
+        const controller = getController();
+        if (!controller)
+            return ctx.response.serviceUnavailable({
+                error: 'Stats engine is starting up, please retry',
+            });
+        return controller.index(ctx);
+    })
+        .as('server-stats.api')
+        .use(middleware);
+}

package/dist/src/styles/components.css

@@ -309,6 +309,102 @@
   color: var(--ss-border);
 }
 
+/* ── Filter / Search Bar ─────────────────────────────────────── */
+/* Padding can be overridden via --ss-filter-px (debug: 12px, dashboard: 16px). */
+.ss-filter-bar,
+.ss-dash-filter-bar,
+.ss-dash-search-bar,
+.ss-dbg-filter-bar,
+.ss-dbg-search-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px var(--ss-filter-px, 12px);
+  border-bottom: 1px solid var(--ss-border-dim);
+  background: var(--ss-surface-alt);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+.ss-search-wrapper,
+.ss-dash-search-wrapper,
+.ss-dbg-search-wrapper {
+  position: relative;
+  flex: 1;
+  min-width: 180px;
+}
+.ss-search-icon,
+.ss-dash-search-icon,
+.ss-dbg-search-icon {
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  color: var(--ss-dim);
+  pointer-events: none;
+}
+.ss-search,
+.ss-dash-search,
+.ss-dbg-search {
+  flex: 1;
+  width: 100%;
+  padding: var(--ss-search-py, 4px) var(--ss-search-px, 8px);
+  padding-left: 28px;
+  padding-right: 24px;
+  font-size: 11px;
+  color: var(--ss-text);
+  background: var(--ss-input-bg);
+  border: 1px solid var(--ss-border);
+  border-radius: 4px;
+  outline: none;
+}
+.ss-search:focus,
+.ss-dash-search:focus,
+.ss-dbg-search:focus {
+  border-color: var(--ss-accent);
+}
+.ss-search::placeholder,
+.ss-dash-search::placeholder,
+.ss-dbg-search::placeholder {
+  color: var(--ss-dim);
+}
+.ss-search-clear,
+.ss-dash-search-clear,
+.ss-dbg-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-search-clear:hover,
+.ss-dash-search-clear:hover,
+.ss-dbg-search-clear:hover {
+  color: var(--ss-text);
+}
+.ss-filter-controls,
+.ss-dash-filter-controls,
+.ss-dbg-filter-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+.ss-summary,
+.ss-dash-summary,
+.ss-dbg-summary {
+  font-size: 11px;
+  color: var(--ss-muted);
+  white-space: nowrap;
+}
+
 /* ═══════════════════════════════════════════════════════════════
  * Phase 4: Full Component Unification
  * ═══════════════════════════════════════════════════════════════ */
@@ -1211,3 +1307,70 @@ tr:hover .ss-dbg-copy-row-btn,
   font-weight: 400;
   color: var(--ss-dim);
 }
+
+/* ── Cache stats bar ─────────────────────────────────────────── */
+/* Shared between Dashboard CacheSection and DebugPanel CacheTab.
+ * Gap/padding differ slightly — override via --ss-cache-stats-gap
+ * and --ss-cache-stats-px / --ss-cache-stats-py. */
+.ss-cache-stats,
+.ss-dash-cache-stats,
+.ss-dbg-cache-stats {
+  display: flex;
+  gap: var(--ss-cache-stats-gap, 16px);
+  padding: var(--ss-cache-stats-py, 8px) var(--ss-cache-stats-px, 12px);
+  border-bottom: 1px solid var(--ss-border-dim);
+  background: var(--ss-surface-alt);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+.ss-cache-stat,
+.ss-dash-cache-stat,
+.ss-dbg-cache-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.ss-cache-stat-label,
+.ss-dash-cache-stat-label,
+.ss-dbg-cache-stat-label {
+  color: var(--ss-muted);
+}
+.ss-cache-stat-value,
+.ss-dash-cache-stat-value,
+.ss-dbg-cache-stat-value {
+  color: var(--ss-text);
+  font-weight: 600;
+}
+
+/* ── Job stats bar ──────────────────────────────────────────── */
+/* Shared between Dashboard JobsSection and DebugPanel JobsTab.
+ * Gap/padding differ slightly — override via --ss-job-stats-gap
+ * and --ss-job-stats-px / --ss-job-stats-py. */
+.ss-job-stats,
+.ss-dash-job-stats,
+.ss-dbg-job-stats {
+  display: flex;
+  gap: var(--ss-job-stats-gap, 16px);
+  padding: var(--ss-job-stats-py, 8px) var(--ss-job-stats-px, 12px);
+  background: var(--ss-surface-alt);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+.ss-job-stat,
+.ss-dash-job-stat,
+.ss-dbg-job-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.ss-job-stat-label,
+.ss-dash-job-stat-label,
+.ss-dbg-job-stat-label {
+  color: var(--ss-muted);
+}
+.ss-job-stat-value,
+.ss-dash-job-stat-value,
+.ss-dbg-job-stat-value {
+  color: var(--ss-text);
+  font-weight: 600;
+}