adonisjs-server-stats 1.8.0 → 1.10.0

package/dist/src/middleware/request_tracking_middleware.d.ts

@@ -21,6 +21,7 @@ export interface RequestCompleteData {
     statusCode: number;
     duration: number;
     trace?: TraceRecord;
+    httpRequestId?: string;
 }
 export declare function setOnRequestComplete(fn: ((data: RequestCompleteData) => void) | null): void;
 export default class RequestTrackingMiddleware {

package/dist/src/middleware/request_tracking_middleware.js

@@ -112,13 +112,15 @@ export default class RequestTrackingMiddleware {
                 metrics.decrementActiveConnections();
                 metrics.recordRequest(duration, ctx.response.getStatus());
                 if (!skipTracing) {
-                    const traceRecord = traceCollector?.finishTrace(ctx.request.method(), ctx.request.url(true), ctx.response.getStatus());
+                    const reqId = typeof ctx.request.id === 'function' ? String(ctx.request.id()) : undefined;
+                    const traceRecord = traceCollector?.finishTrace(ctx.request.method(), ctx.request.url(true), ctx.response.getStatus(), reqId);
                     onRequestCompleteFn?.({
                         method: ctx.request.method(),
                         url: ctx.request.url(true),
                         statusCode: ctx.response.getStatus(),
                         duration,
                         trace: traceRecord ?? undefined,
+                        httpRequestId: reqId,
                     });
                 }
             }

package/dist/src/provider/server_stats_provider.d.ts

@@ -39,9 +39,9 @@ export default class ServerStatsProvider {
      * Hook into the AdonisJS logger's Pino stream to feed log entries
      * directly into the LogStreamService — no file path needed.
      *
-     * Uses `Symbol.for('pino.stream')` (documented Pino API) to access
-     * the underlying destination stream, then wraps its `write` method
-     * to tee entries into the log collector.
+     * Uses pino's exported `symbols.streamSym` to access the underlying
+     * destination stream, then wraps its `write` method to tee entries
+     * into the log collector.
      */
     private hookPinoLogger;
     ready(): Promise<void>;

package/dist/src/provider/server_stats_provider.js

@@ -244,25 +244,39 @@ export default class ServerStatsProvider {
      * Hook into the AdonisJS logger's Pino stream to feed log entries
      * directly into the LogStreamService — no file path needed.
      *
-     * Uses `Symbol.for('pino.stream')` (documented Pino API) to access
-     * the underlying destination stream, then wraps its `write` method
-     * to tee entries into the log collector.
+     * Uses pino's exported `symbols.streamSym` to access the underlying
+     * destination stream, then wraps its `write` method to tee entries
+     * into the log collector.
      */
     async hookPinoLogger() {
         const logStream = getLogStreamService();
         if (!logStream)
-            return; // logCollector() not in the config
+            return;
         let logger;
         try {
             logger = await this.app.container.make('logger');
         }
         catch {
-            // Logger not available
+            // Logger not available yet
         }
         const pino = logger?.pino;
         if (!pino)
             return;
-        const streamSym = Symbol.for('pino.stream');
+        // Use pino's exported streamSym — NOT Symbol.for('pino.stream').
+        // Pino uses a local Symbol('pino.stream'), not a global registry symbol.
+        let streamSym;
+        try {
+            const pinoMod = await import('pino');
+            streamSym = pinoMod.default?.symbols?.streamSym;
+        }
+        catch {
+            // pino not directly importable — try finding the symbol on the instance
+        }
+        if (!streamSym) {
+            streamSym = Object.getOwnPropertySymbols(pino).find((s) => s.description === 'pino.stream');
+        }
+        if (!streamSym)
+            return;
         const rawStream = pino[streamSym];
         if (!rawStream || typeof rawStream.write !== 'function')
             return;
@@ -341,7 +355,7 @@ export default class ServerStatsProvider {
                     maxEmails: toolbarConfig.maxEmails ?? 100,
                     slowQueryThresholdMs: toolbarConfig.slowQueryThresholdMs ?? 100,
                     persistDebugData: toolbarConfig.persistDebugData ?? false,
-                    tracing: toolbarConfig.tracing ?? false,
+                    tracing: toolbarConfig.tracing ?? true,
                     maxTraces: toolbarConfig.maxTraces ?? 200,
                     dashboard: toolbarConfig.dashboard ?? false,
                     dashboardPath: toolbarConfig.dashboardPath ?? '/__stats',
@@ -614,11 +628,11 @@ export default class ServerStatsProvider {
         const DashboardControllerClass = (await import('../dashboard/dashboard_controller.js')).default;
         this.dashboardController = new DashboardControllerClass(this.dashboardStore, this.app);
         // ── Log piping ────────────────────────────────────────────────
-        // If the log collector is already hooked into Pino (zero-config mode),
-        // piggyback on it instead of creating a separate file poller.
+        // If the Pino stream hook is active, piggyback on it for real-time
+        // log persistence. Otherwise fall back to polling the log file.
         log.info('dashboard: setting up log piping...');
         const existingLogStream = getLogStreamService();
-        if (existingLogStream && !existingLogStream['logPath']) {
+        if (this.pinoHookActive && existingLogStream && !existingLogStream['logPath']) {
             // Stream mode — add a listener for dashboard persistence
             const origOnEntry = existingLogStream['onEntry'];
             existingLogStream['onEntry'] = (entry) => {
@@ -638,7 +652,7 @@ export default class ServerStatsProvider {
         const debugStore = this.debugStore;
         const dashStore = this.dashboardStore;
         let lastQueryId = 0;
-        setOnRequestComplete(({ method, url, statusCode, duration, trace }) => {
+        setOnRequestComplete(({ method, url, statusCode, duration, trace, httpRequestId }) => {
             if (!dashStore.isReady())
                 return;
             // O(K) collection of new queries since last seen ID — avoids
@@ -655,6 +669,7 @@ export default class ServerStatsProvider {
                 duration,
                 queries: newQueries,
                 trace: trace ?? null,
+                httpRequestId: httpRequestId ?? null,
             });
         });
         // ── Transmit streaming for real-time dashboard updates ────────
@@ -783,10 +798,9 @@ export default class ServerStatsProvider {
                 // Silently ignore broadcast errors
             }
         };
-        // If logCollector() is already hooked into Pino (zero-config),
-        // piggyback on its stream instead of creating a file poller.
+        // If the Pino stream hook is active, piggyback on its onEntry chain.
         const existing = getLogStreamService();
-        if (existing) {
+        if (this.pinoHookActive && existing) {
             const internal = existing;
             const origOnEntry = internal.onEntry;
             internal.onEntry = (entry) => {
@@ -961,7 +975,7 @@ export default class ServerStatsProvider {
                 maxEmails: toolbarConfig?.maxEmails ?? 100,
                 maxTraces: toolbarConfig?.maxTraces ?? 200,
                 slowQueryThresholdMs: toolbarConfig?.slowQueryThresholdMs ?? 100,
-                tracing: toolbarConfig?.tracing ?? false,
+                tracing: toolbarConfig?.tracing ?? true,
                 dashboard: toolbarConfig?.dashboard ?? false,
                 dashboardPath: toolbarConfig?.dashboardPath ?? '/__stats',
                 debugEndpoint: toolbarConfig?.debugEndpoint ?? '/admin/api/debug',

package/dist/src/routes/register_routes.js

@@ -95,9 +95,11 @@ export function registerAllRoutes(options) {
             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
-            // Debug panel always reads from ring buffers (source: 'memory')
+            // 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' });
@@ -119,7 +121,10 @@ export function registerAllRoutes(options) {
                 .as('server-stats.debug.routes');
             router
                 .get('/logs', bindApi(async (api, ctx) => {
-                const result = await api.getLogs({ source: 'memory' });
+                // 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');

package/dist/src/styles/components.css

@@ -522,6 +522,87 @@
   word-break: break-word;
 }
 
+/* Expandable log row */
+.ss-log-entry-expandable,
+.ss-dash-log-entry-expandable,
+.ss-dbg-log-entry-expandable {
+  cursor: pointer;
+}
+.ss-log-entry-expandable:hover,
+.ss-dash-log-entry-expandable:hover,
+.ss-dbg-log-entry-expandable:hover {
+  background: var(--ss-surface-alt);
+}
+.ss-log-expand-icon,
+.ss-dash-log-expand-icon,
+.ss-dbg-log-expand-icon {
+  flex-shrink: 0;
+  font-size: 10px;
+  color: var(--ss-dim);
+  width: 14px;
+  text-align: center;
+  transition: transform 0.15s ease;
+  user-select: none;
+}
+.ss-log-expand-icon-open,
+.ss-dash-log-expand-icon-open,
+.ss-dbg-log-expand-icon-open {
+  transform: rotate(90deg);
+}
+.ss-log-detail,
+.ss-dash-log-detail,
+.ss-dbg-log-detail {
+  padding: 6px var(--ss-log-px, 12px) 10px var(--ss-log-px, 12px);
+  border-bottom: 1px solid var(--ss-log-border, var(--ss-input-bg));
+  background: var(--ss-surface-alt);
+  font-size: 11px;
+}
+.ss-log-detail .ss-dash-data-cell,
+.ss-log-detail .ss-dbg-data-cell,
+.ss-dash-log-detail .ss-dash-data-cell,
+.ss-dbg-log-detail .ss-dbg-data-cell {
+  width: 100%;
+  max-width: none;
+}
+.ss-log-detail .ss-dash-data-full,
+.ss-log-detail .ss-dbg-data-full,
+.ss-dash-log-detail .ss-dash-data-full,
+.ss-dbg-log-detail .ss-dbg-data-full {
+  position: relative;
+  margin: 0;
+  padding: 8px 12px;
+  border-radius: 4px;
+  background: var(--ss-bg);
+  border: 1px solid var(--ss-border-dim);
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.ss-log-detail .ss-dash-data-full pre,
+.ss-log-detail .ss-dbg-data-full pre,
+.ss-dash-log-detail .ss-dash-data-full pre,
+.ss-dbg-log-detail .ss-dbg-data-full pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--ss-text-secondary);
+}
+.ss-log-detail .ss-dash-copy-btn,
+.ss-log-detail .ss-dbg-copy-btn,
+.ss-dash-log-detail .ss-dash-copy-btn,
+.ss-dbg-log-detail .ss-dbg-copy-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 2px 8px;
+  font-size: 10px;
+  border: 1px solid var(--ss-border-dim);
+  border-radius: 3px;
+  background: var(--ss-surface-alt);
+}
+
 /* ── 4. Email preview ────────────────────────────────────────── */
 /* Dashboard uses 16px padding, debug uses 12px — override via
  * --ss-email-px on a wrapper. */
@@ -1049,3 +1130,84 @@ tr:hover .ss-dbg-copy-row-btn,
 .ss-dbg-btn-group .ss-dbg-btn:last-child {
   border-radius: 0 4px 4px 0;
 }
+
+/* ── 8. Split pane layout ────────────────────────────────────── */
+.ss-split-container,
+.ss-dash-split-container,
+.ss-dbg-split-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.ss-split-top,
+.ss-dash-split-top,
+.ss-dbg-split-top {
+  flex: 0.6;
+  min-height: 60px;
+  overflow: auto;
+}
+.ss-split-handle,
+.ss-dash-split-handle,
+.ss-dbg-split-handle {
+  height: 6px;
+  background: var(--ss-border-dim);
+  cursor: row-resize;
+  flex-shrink: 0;
+  position: relative;
+  user-select: none;
+  touch-action: none;
+}
+.ss-split-handle:hover,
+.ss-dash-split-handle:hover,
+.ss-dbg-split-handle:hover {
+  background: var(--ss-accent, #6d28d9);
+  opacity: 0.8;
+}
+.ss-split-handle::after,
+.ss-dash-split-handle::after,
+.ss-dbg-split-handle::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 32px;
+  height: 2px;
+  background: var(--ss-muted);
+  border-radius: 1px;
+  opacity: 0.5;
+}
+.ss-split-bottom,
+.ss-dash-split-bottom,
+.ss-dbg-split-bottom {
+  flex: 0.4;
+  min-height: 60px;
+  overflow: auto;
+  border-top: 1px solid var(--ss-border-dim);
+}
+.ss-related-logs-title,
+.ss-dash-related-logs-title,
+.ss-dbg-related-logs-title {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ss-muted);
+  background: var(--ss-surface);
+  border-bottom: 1px solid var(--ss-border-faint);
+}
+.ss-related-logs-count,
+.ss-dash-related-logs-count,
+.ss-dbg-related-logs-count {
+  font-weight: 400;
+  color: var(--ss-dim);
+}

package/dist/src/styles/debug-panel.css

@@ -432,6 +432,15 @@
 }
 
 /* Timeline base → components.css */
+/* Trace detail wrapper: flex column to let split pane fill available height */
+.ss-dbg-tl-detail-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
 /* Debug-specific timeline overrides */
 .ss-dbg-tl-detail-url {
   color: var(--ss-text);

package/dist/src/types.d.ts

@@ -237,7 +237,7 @@ export interface DevToolbarOptions {
      * of all operations (DB queries, events, mail) that occurred
      * during the request.
      *
-     * @default false
+     * @default true
      */
     tracing?: boolean;
     /**

package/dist/vue/{CacheSection-DDvJ7bs2.js → CacheSection-oFAJL3mo.js}

@@ -1,9 +1,9 @@
 import { defineComponent as E, inject as v, ref as h, computed as C, openBlock as a, createElementBlock as l, createElementVNode as e, toDisplayString as c, createCommentVNode as g, createVNode as F, unref as y, Fragment as N, renderList as A, withModifiers as B, createBlock as U } from "vue";
-import { u as H } from "./index-Bj6pm5g3.js";
+import { u as H } from "./index-Dtgysd26.js";
 import { u as M } from "./useResizableTable-BoivAevK.js";
 import { DashboardApi as j, formatCacheSize as q, formatTtl as I } from "adonisjs-server-stats/core";
 import { u as G } from "./useApiClient-BQQ9CF-q.js";
-import { _ as J } from "./JsonViewer.vue_vue_type_script_setup_true_lang-Vsqar1zx.js";
+import { _ as J } from "./JsonViewer.vue_vue_type_script_setup_true_lang-Bid05zpm.js";
 import { _ as O } from "./FilterBar.vue_vue_type_script_setup_true_lang-ClJ37hhT.js";
 const P = {
   key: 0,

package/dist/vue/{ConfigSection-GTCrvsPr.js → ConfigSection-BhfJ4KqL.js}

@@ -1,5 +1,5 @@
 import { defineComponent as re, inject as m, ref as w, computed as x, openBlock as i, createElementBlock as r, createElementVNode as n, normalizeClass as a, createCommentVNode as b, Fragment as _, toDisplayString as u, unref as c, renderList as A, withModifiers as I, normalizeStyle as R } from "vue";
-import { u as ue } from "./index-Bj6pm5g3.js";
+import { u as ue } from "./index-Dtgysd26.js";
 import { isRedactedValue as d, flattenConfig as z, TAB_ICONS as g, countLeaves as ce, collectTopLevelObjectKeys as pe, copyWithFeedback as de, formatFlatValue as ve } from "adonisjs-server-stats/core";
 const fe = { style: { position: "relative", flex: 1 } }, he = ["value"], ge = ["title", "onClick"], ye = ["viewBox", "innerHTML"], be = ["viewBox", "innerHTML"], $e = ["onClick"], we = { key: 0 }, xe = ["title", "onClick"], ke = ["viewBox", "innerHTML"], Ce = ["viewBox", "innerHTML"], _e = ["onClick"], Se = { key: 0 }, Be = { style: { padding: "4px 16px", fontSize: "10px", color: "var(--ss-muted)" } }, Le = ["onClick"], He = ["title"], Te = ["title"], je = ["title", "onClick"], Me = ["viewBox", "innerHTML"], me = ["viewBox", "innerHTML"], Ae = ["onClick"], Ie = ["title", "onClick"], Ee = ["viewBox", "innerHTML"], Ve = ["viewBox", "innerHTML"], Oe = {
   key: 1,

package/dist/vue/{EmailsSection-Ct5vsLCc.js → EmailsSection-BcNyhyHs.js}

@@ -1,6 +1,6 @@
 import { defineComponent as V, inject as h, ref as f, computed as A, openBlock as o, createElementBlock as i, createElementVNode as e, Fragment as c, createTextVNode as u, toDisplayString as n, createCommentVNode as y, normalizeClass as _, createVNode as F, unref as r, renderList as B, createBlock as D } from "vue";
 import { formatTime as R, timeAgo as z } from "adonisjs-server-stats/core";
-import { u as L } from "./index-Bj6pm5g3.js";
+import { u as L } from "./index-Dtgysd26.js";
 import { u as M } from "./useResizableTable-BoivAevK.js";
 import { _ as U } from "./FilterBar.vue_vue_type_script_setup_true_lang-ClJ37hhT.js";
 import { _ as q } from "./PaginationControls.vue_vue_type_script_setup_true_lang-CuN7g_8Z.js";

package/dist/vue/{EventsSection-CRVhtagq.js → EventsSection-r60Q5Lmu.js}

@@ -1,10 +1,10 @@
 import { defineComponent as E, inject as i, ref as p, computed as P, openBlock as s, createElementBlock as l, createVNode as v, unref as a, Fragment as h, createElementVNode as e, renderList as T, toDisplayString as c, createBlock as C, createCommentVNode as D } from "vue";
 import { formatTime as S, timeAgo as V } from "adonisjs-server-stats/core";
-import { u as $ } from "./index-Bj6pm5g3.js";
+import { u as $ } from "./index-Dtgysd26.js";
 import { u as A } from "./useResizableTable-BoivAevK.js";
 import { _ as B } from "./FilterBar.vue_vue_type_script_setup_true_lang-ClJ37hhT.js";
 import { _ as R } from "./PaginationControls.vue_vue_type_script_setup_true_lang-CuN7g_8Z.js";
-import { _ as F } from "./JsonViewer.vue_vue_type_script_setup_true_lang-Vsqar1zx.js";
+import { _ as F } from "./JsonViewer.vue_vue_type_script_setup_true_lang-Bid05zpm.js";
 const L = {
   key: 0,
   class: "ss-dash-empty"

package/dist/vue/{EventsTab-DQ4Nd6AK.js → EventsTab-BBM7olXF.js}

@@ -1,7 +1,7 @@
 import { defineComponent as _, ref as f, computed as v, openBlock as n, createElementBlock as r, createElementVNode as e, withDirectives as g, vModelText as y, toDisplayString as o, Fragment as k, renderList as w, createTextVNode as x, unref as d, createCommentVNode as T, createVNode as C } from "vue";
 import { TAB_ICONS as h, formatTime as A, timeAgo as B } from "adonisjs-server-stats/core";
 import { u as L } from "./useResizableTable-BoivAevK.js";
-import { _ as N } from "./JsonViewer.vue_vue_type_script_setup_true_lang-Vsqar1zx.js";
+import { _ as N } from "./JsonViewer.vue_vue_type_script_setup_true_lang-Bid05zpm.js";
 const V = { class: "ss-dbg-search-bar" }, E = { class: "ss-dbg-summary" }, $ = {
   key: 0,
   class: "ss-dbg-empty"

package/dist/vue/{JobsSection-B_wH2Co7.js → JobsSection-BHL-hkQw.js}

@@ -1,8 +1,8 @@
 import { defineComponent as L, inject as h, ref as p, computed as g, openBlock as o, createElementBlock as d, createElementVNode as s, toDisplayString as n, createCommentVNode as v, createVNode as k, unref as a, withCtx as z, Fragment as _, renderList as x, normalizeClass as w, withModifiers as K, createBlock as M } from "vue";
 import { extractJobs as O, extractJobStats as Q, JOB_STATUS_FILTERS as W, getJobStatusBadgeColor as q, formatDuration as G, formatTime as H, timeAgo as X } from "adonisjs-server-stats/core";
-import { u as Y } from "./index-Bj6pm5g3.js";
+import { u as Y } from "./index-Dtgysd26.js";
 import { u as Z } from "./useResizableTable-BoivAevK.js";
-import { _ as I } from "./JsonViewer.vue_vue_type_script_setup_true_lang-Vsqar1zx.js";
+import { _ as I } from "./JsonViewer.vue_vue_type_script_setup_true_lang-Bid05zpm.js";
 import { _ as j } from "./FilterBar.vue_vue_type_script_setup_true_lang-ClJ37hhT.js";
 import { _ as ss } from "./PaginationControls.vue_vue_type_script_setup_true_lang-CuN7g_8Z.js";
 const ts = {

package/dist/vue/{JobsTab-BCvhOARO.js → JobsTab-WFnxPdN7.js}

@@ -1,7 +1,7 @@
 import { defineComponent as T, ref as j, computed as c, openBlock as l, createElementBlock as o, createElementVNode as s, toDisplayString as a, Fragment as _, renderList as g, unref as i, normalizeClass as m, createVNode as D, createCommentVNode as R } from "vue";
 import { JOB_STATUS_FILTERS as S, getJobStatusCssClass as x, formatDuration as A, formatTime as J, timeAgo as N } from "adonisjs-server-stats/core";
 import { u as F } from "./useResizableTable-BoivAevK.js";
-import { _ as $ } from "./JsonViewer.vue_vue_type_script_setup_true_lang-Vsqar1zx.js";
+import { _ as $ } from "./JsonViewer.vue_vue_type_script_setup_true_lang-Bid05zpm.js";
 const B = { class: "ss-dbg-job-stats-area" }, E = { class: "ss-dbg-job-stats" }, V = { class: "ss-dbg-job-stat" }, w = { class: "ss-dbg-job-stat-value" }, z = { class: "ss-dbg-job-stat" }, I = { class: "ss-dbg-job-stat-value" }, L = { class: "ss-dbg-job-stat" }, q = { class: "ss-dbg-job-stat-value" }, O = { class: "ss-dbg-job-stat" }, P = { class: "ss-dbg-job-stat-value" }, U = { class: "ss-dbg-job-stat" }, W = { class: "ss-dbg-job-stat-value ss-dbg-c-red" }, G = { class: "ss-dbg-log-filters" }, H = ["onClick"], K = {
   key: 0,
   class: "ss-dbg-empty"

package/dist/vue/{JsonViewer.vue_vue_type_script_setup_true_lang-Vsqar1zx.js → JsonViewer.vue_vue_type_script_setup_true_lang-Bid05zpm.js}

@@ -1,14 +1,15 @@
-import { defineComponent as y, ref as x, computed as c, openBlock as r, createElementBlock as o, normalizeClass as l, createElementVNode as s, toDisplayString as v, withModifiers as g, createCommentVNode as k } from "vue";
+import { defineComponent as x, ref as k, computed as i, openBlock as t, createElementBlock as n, normalizeClass as l, toDisplayString as c, createCommentVNode as v, createElementVNode as d, withModifiers as g } from "vue";
 import { compactPreview as p } from "adonisjs-server-stats/core";
-const P = /* @__PURE__ */ y({
+const P = /* @__PURE__ */ x({
   __name: "JsonViewer",
   props: {
     value: {},
     maxLen: {},
-    classPrefix: { default: "ss-dash" }
+    classPrefix: { default: "ss-dash" },
+    defaultExpanded: { type: Boolean, default: !1 }
   },
-  setup(a) {
-    const e = a, t = x(!1), f = c(() => {
+  setup(r) {
+    const e = r, a = k(e.defaultExpanded), f = i(() => {
       if (e.value === null || e.value === void 0) return "-";
       if (typeof e.value == "string")
         try {
@@ -17,7 +18,7 @@ const P = /* @__PURE__ */ y({
           return e.value.length > 100 ? e.value.slice(0, 100) + "..." : e.value;
         }
       return p(e.value, e.maxLen || 100);
-    }), i = c(() => {
+    }), u = i(() => {
       if (e.value === null || e.value === void 0) return "";
       if (typeof e.value == "string")
         try {
@@ -27,38 +28,39 @@ const P = /* @__PURE__ */ y({
         }
       return JSON.stringify(e.value, null, 2);
     });
-    function n() {
-      t.value = !t.value;
+    function o() {
+      a.value = !a.value;
     }
-    function d() {
-      navigator.clipboard?.writeText(i.value);
+    function m() {
+      navigator.clipboard?.writeText(u.value);
     }
-    return (C, u) => a.value === null || a.value === void 0 ? (r(), o("span", {
+    return (C, s) => r.value === null || r.value === void 0 ? (t(), n("span", {
       key: 0,
       class: l(`ss-dim ${e.classPrefix}-c-dim`)
-    }, "-", 2)) : (r(), o("div", {
+    }, "-", 2)) : (t(), n("div", {
       key: 1,
       class: l(`${e.classPrefix}-data-cell`)
     }, [
-      s("span", {
+      a.value ? v("", !0) : (t(), n("span", {
+        key: 0,
         class: l(`${e.classPrefix}-data-preview`),
         role: "button",
         tabindex: 0,
-        onClick: n,
-        onKeydown: u[0] || (u[0] = (m) => m.key === "Enter" && n())
-      }, v(f.value), 35),
-      t.value ? (r(), o("div", {
-        key: 0,
+        onClick: o,
+        onKeydown: s[0] || (s[0] = (y) => y.key === "Enter" && o())
+      }, c(f.value), 35)),
+      a.value ? (t(), n("div", {
+        key: 1,
         class: l(`${e.classPrefix}-data-full`),
-        onClick: n
+        onClick: o
       }, [
-        s("button", {
+        d("button", {
           class: l(`${e.classPrefix}-copy-btn`),
           title: "Copy to clipboard",
-          onClick: g(d, ["stop"])
+          onClick: g(m, ["stop"])
         }, " Copy ", 2),
-        s("pre", null, v(i.value), 1)
-      ], 2)) : k("", !0)
+        d("pre", null, c(u.value), 1)
+      ], 2)) : v("", !0)
     ], 2));
   }
 });