@lunora/studio 1.0.0-alpha.59 → 1.0.0-alpha.60

package/dist/packem_chunks/traces-panel.js

@@ -1,747 +1 @@
-import { c } from 'react/compiler-runtime';
-import { useState, useEffect } from 'react';
-import { f as formatLogFields } from '../packem_shared/log-fields-jEH83H2G.js';
-import { E as ErrorAlert } from '../packem_shared/error-alert-D9uIFJUS.js';
-import { L as LiveError } from '../packem_shared/live-status-FZ0psC1z.js';
-import { ShardInput } from '../packem_shared/ShardInput-CZnpHILL.js';
-import { B as Badge } from '../packem_shared/badge-B2PKA1-5.js';
-import { E as EmptyState } from '../packem_shared/empty-state-DY_oe0k6.js';
-import { I as Input } from '../packem_shared/input-XH4r1Pt1.js';
-import { u as useAdminQuery } from '../packem_shared/use-admin-query-C7JNuQp-.js';
-import useDebounced from '../packem_shared/useDebounced-Dxncpg6z.js';
-import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
-import { ADMIN_FUNCTIONS } from '../packem_shared/ADMIN_FUNCTIONS-P2UzJscH.js';
-import { i as formatTimestamp } from '../packem_shared/internal-DzHCc2Rq.js';
-import { r as recordShard } from '../packem_shared/shard-history-AxiJ1WPP.js';
-import { p as peekPendingTraceFilter, c as clearPendingTraceFilter } from '../packem_shared/trace-handoff-CGolF3KS.js';
-import { c as cn } from '../packem_shared/utils-B05Dmz_H.js';
-import { jsxDEV } from 'react/jsx-dev-runtime';
-
-const MIN_BAR_PERCENT = 0.5;
-const clampPercent = (value) => Math.min(100, Math.max(0, value));
-const spanBar = (span, traceDurationMs) => {
-  if (!Number.isFinite(traceDurationMs) || traceDurationMs <= 0) {
-    return {
-      leftPercent: 0,
-      widthPercent: 100
-    };
-  }
-  const leftPercent = clampPercent(span.offsetMs / traceDurationMs * 100);
-  const rawWidth = span.durationMs / traceDurationMs * 100;
-  const widthPercent = Math.max(MIN_BAR_PERCENT, Math.min(clampPercent(rawWidth), 100 - leftPercent));
-  return {
-    leftPercent,
-    widthPercent
-  };
-};
-const filterTraces = (traces, search) => {
-  const needle = search.trim().toLowerCase();
-  if (needle === "") {
-    return [...traces];
-  }
-  return traces.filter((trace) => trace.rootName.toLowerCase().includes(needle) || trace.functionPath.toLowerCase().includes(needle) || trace.traceId.toLowerCase().includes(needle));
-};
-const formatSpanDuration = (durationMs) => {
-  if (!Number.isFinite(durationMs)) {
-    return "—";
-  }
-  return durationMs > 0 && durationMs < 1 ? `${durationMs.toFixed(2)}ms` : `${String(Math.round(durationMs))}ms`;
-};
-
-const INDENT_PER_DEPTH = 14;
-const tracesOf = (result) => Array.isArray(result?.traces) ? result.traces : [];
-const SpanRow = (t0) => {
-  const $ = c(50);
-  const {
-    span,
-    traceDurationMs
-  } = t0;
-  const t = useT();
-  let t1;
-  if ($[0] !== span || $[1] !== traceDurationMs) {
-    t1 = spanBar(span, traceDurationMs);
-    $[0] = span;
-    $[1] = traceDurationMs;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  const {
-    leftPercent,
-    widthPercent
-  } = t1;
-  let t2;
-  if ($[3] !== span.attributes) {
-    t2 = formatLogFields(span.attributes);
-    $[3] = span.attributes;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  const attributes = t2;
-  const t3 = span.depth * INDENT_PER_DEPTH;
-  let t4;
-  if ($[5] !== t3) {
-    t4 = {
-      paddingLeft: t3
-    };
-    $[5] = t3;
-    $[6] = t4;
-  } else {
-    t4 = $[6];
-  }
-  const nameStyle = t4;
-  const t5 = `${String(leftPercent)}%`;
-  const t6 = `${String(widthPercent)}%`;
-  let t7;
-  if ($[7] !== t5 || $[8] !== t6) {
-    t7 = {
-      left: t5,
-      width: t6
-    };
-    $[7] = t5;
-    $[8] = t6;
-    $[9] = t7;
-  } else {
-    t7 = $[9];
-  }
-  const barStyle = t7;
-  const t8 = span.depth;
-  let t9;
-  if ($[10] !== span.ok || $[11] !== t) {
-    t9 = span.ok ? null : /* @__PURE__ */ jsxDEV("span", {
-      "aria-label": t("Errored span"),
-      className: "mr-1 text-destructive",
-      "data-testid": "tr-span-error",
-      role: "img",
-      children: "●"
-    }, void 0, false);
-    $[10] = span.ok;
-    $[11] = t;
-    $[12] = t9;
-  } else {
-    t9 = $[12];
-  }
-  let t10;
-  if ($[13] !== nameStyle || $[14] !== span.name || $[15] !== t9) {
-    t10 = /* @__PURE__ */ jsxDEV("span", {
-      className: "w-56 shrink-0 truncate",
-      role: "gridcell",
-      style: nameStyle,
-      title: span.name,
-      children: [t9, span.name]
-    }, void 0, true);
-    $[13] = nameStyle;
-    $[14] = span.name;
-    $[15] = t9;
-    $[16] = t10;
-  } else {
-    t10 = $[16];
-  }
-  let t11;
-  if ($[17] !== span.durationMs || $[18] !== span.offsetMs || $[19] !== t) {
-    t11 = t("starts {offset} in, runs {duration}", {
-      duration: formatSpanDuration(span.durationMs),
-      offset: formatSpanDuration(span.offsetMs)
-    });
-    $[17] = span.durationMs;
-    $[18] = span.offsetMs;
-    $[19] = t;
-    $[20] = t11;
-  } else {
-    t11 = $[20];
-  }
-  const t12 = span.ok ? "bg-primary/70" : "bg-destructive";
-  let t13;
-  if ($[21] !== t12) {
-    t13 = cn("absolute inset-y-0 rounded-sm", t12);
-    $[21] = t12;
-    $[22] = t13;
-  } else {
-    t13 = $[22];
-  }
-  let t14;
-  if ($[23] !== barStyle || $[24] !== leftPercent || $[25] !== t13 || $[26] !== widthPercent) {
-    t14 = /* @__PURE__ */ jsxDEV("span", {
-      className: t13,
-      "data-left": leftPercent,
-      "data-testid": "tr-span-bar",
-      "data-width": widthPercent,
-      style: barStyle
-    }, void 0, false);
-    $[23] = barStyle;
-    $[24] = leftPercent;
-    $[25] = t13;
-    $[26] = widthPercent;
-    $[27] = t14;
-  } else {
-    t14 = $[27];
-  }
-  let t15;
-  if ($[28] !== t11 || $[29] !== t14) {
-    t15 = /* @__PURE__ */ jsxDEV("span", {
-      "aria-label": t11,
-      className: "relative h-3 flex-1 overflow-hidden rounded-sm bg-muted",
-      role: "gridcell",
-      children: t14
-    }, void 0, false);
-    $[28] = t11;
-    $[29] = t14;
-    $[30] = t15;
-  } else {
-    t15 = $[30];
-  }
-  let t16;
-  if ($[31] !== span.durationMs) {
-    t16 = formatSpanDuration(span.durationMs);
-    $[31] = span.durationMs;
-    $[32] = t16;
-  } else {
-    t16 = $[32];
-  }
-  let t17;
-  if ($[33] !== t16) {
-    t17 = /* @__PURE__ */ jsxDEV("span", {
-      className: "w-16 shrink-0 text-right tabular-nums text-muted-foreground",
-      role: "gridcell",
-      children: t16
-    }, void 0, false);
-    $[33] = t16;
-    $[34] = t17;
-  } else {
-    t17 = $[34];
-  }
-  let t18;
-  if ($[35] !== span.error) {
-    t18 = span.error === void 0 ? null : /* @__PURE__ */ jsxDEV("span", {
-      className: "text-destructive",
-      "data-testid": "tr-span-error-message",
-      title: span.error.message,
-      children: `${span.error.type}: ${span.error.message}`
-    }, void 0, false);
-    $[35] = span.error;
-    $[36] = t18;
-  } else {
-    t18 = $[36];
-  }
-  let t19;
-  if ($[37] !== t18) {
-    t19 = /* @__PURE__ */ jsxDEV("span", {
-      className: "w-64 shrink-0 truncate text-muted-foreground",
-      role: "gridcell",
-      children: t18
-    }, void 0, false);
-    $[37] = t18;
-    $[38] = t19;
-  } else {
-    t19 = $[38];
-  }
-  let t20;
-  if ($[39] !== attributes) {
-    t20 = attributes === "" ? null : /* @__PURE__ */ jsxDEV("span", {
-      "data-testid": "tr-span-attributes",
-      title: attributes,
-      children: attributes
-    }, void 0, false);
-    $[39] = attributes;
-    $[40] = t20;
-  } else {
-    t20 = $[40];
-  }
-  let t21;
-  if ($[41] !== t20) {
-    t21 = /* @__PURE__ */ jsxDEV("span", {
-      className: "w-64 shrink-0 truncate text-muted-foreground",
-      role: "gridcell",
-      children: t20
-    }, void 0, false);
-    $[41] = t20;
-    $[42] = t21;
-  } else {
-    t21 = $[42];
-  }
-  let t22;
-  if ($[43] !== span.depth || $[44] !== t10 || $[45] !== t15 || $[46] !== t17 || $[47] !== t19 || $[48] !== t21) {
-    t22 = /* @__PURE__ */ jsxDEV("div", {
-      className: "flex items-center gap-2 border-b border-border px-3 py-1.5 font-mono text-xs last:border-b-0 hover:bg-muted/50",
-      "data-depth": t8,
-      "data-testid": "tr-span-row",
-      role: "row",
-      children: [t10, t15, t17, t19, t21]
-    }, void 0, true);
-    $[43] = span.depth;
-    $[44] = t10;
-    $[45] = t15;
-    $[46] = t17;
-    $[47] = t19;
-    $[48] = t21;
-    $[49] = t22;
-  } else {
-    t22 = $[49];
-  }
-  return t22;
-};
-const TraceRow = (t0) => {
-  const $ = c(50);
-  const {
-    expanded,
-    onToggle,
-    trace
-  } = t0;
-  const t = useT();
-  let t1;
-  if ($[0] !== onToggle || $[1] !== trace.traceId) {
-    t1 = () => {
-      onToggle(trace.traceId);
-    };
-    $[0] = onToggle;
-    $[1] = trace.traceId;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  const onClick = t1;
-  const t2 = `tr-row-${trace.traceId}`;
-  const t3 = `tr-waterfall-${trace.traceId}`;
-  const t4 = `tr-toggle-${trace.traceId}`;
-  const t5 = expanded ? "▾" : "▸";
-  let t6;
-  if ($[3] !== t5) {
-    t6 = /* @__PURE__ */ jsxDEV("span", {
-      "aria-hidden": "true",
-      className: "w-3 shrink-0 text-xs text-muted-foreground",
-      children: t5
-    }, void 0, false);
-    $[3] = t5;
-    $[4] = t6;
-  } else {
-    t6 = $[4];
-  }
-  let t7;
-  if ($[5] !== trace.rootName) {
-    t7 = /* @__PURE__ */ jsxDEV("span", {
-      className: "w-56 shrink-0 truncate text-sm font-medium",
-      title: trace.rootName,
-      children: trace.rootName
-    }, void 0, false);
-    $[5] = trace.rootName;
-    $[6] = t7;
-  } else {
-    t7 = $[6];
-  }
-  let t8;
-  if ($[7] !== trace.functionPath) {
-    t8 = /* @__PURE__ */ jsxDEV("span", {
-      className: "w-48 shrink-0 truncate font-mono text-xs text-muted-foreground",
-      title: trace.functionPath,
-      children: trace.functionPath
-    }, void 0, false);
-    $[7] = trace.functionPath;
-    $[8] = t8;
-  } else {
-    t8 = $[8];
-  }
-  let t9;
-  if ($[9] !== trace.durationMs) {
-    t9 = formatSpanDuration(trace.durationMs);
-    $[9] = trace.durationMs;
-    $[10] = t9;
-  } else {
-    t9 = $[10];
-  }
-  let t10;
-  if ($[11] !== t9) {
-    t10 = /* @__PURE__ */ jsxDEV("span", {
-      className: "w-20 shrink-0 text-right font-mono text-xs tabular-nums text-muted-foreground",
-      children: t9
-    }, void 0, false);
-    $[11] = t9;
-    $[12] = t10;
-  } else {
-    t10 = $[12];
-  }
-  let t11;
-  if ($[13] !== t || $[14] !== trace.spans.length) {
-    t11 = t("{count} spans", {
-      count: trace.spans.length
-    });
-    $[13] = t;
-    $[14] = trace.spans.length;
-    $[15] = t11;
-  } else {
-    t11 = $[15];
-  }
-  let t12;
-  if ($[16] !== t11) {
-    t12 = /* @__PURE__ */ jsxDEV("span", {
-      className: "w-20 shrink-0 text-right font-mono text-xs tabular-nums text-muted-foreground",
-      children: t11
-    }, void 0, false);
-    $[16] = t11;
-    $[17] = t12;
-  } else {
-    t12 = $[17];
-  }
-  const t13 = trace.ok ? "secondary" : "destructive";
-  let t14;
-  if ($[18] !== t || $[19] !== trace.ok) {
-    t14 = trace.ok ? t("ok") : t("error");
-    $[18] = t;
-    $[19] = trace.ok;
-    $[20] = t14;
-  } else {
-    t14 = $[20];
-  }
-  let t15;
-  if ($[21] !== t13 || $[22] !== t14) {
-    t15 = /* @__PURE__ */ jsxDEV("span", {
-      className: "shrink-0",
-      children: /* @__PURE__ */ jsxDEV(Badge, {
-        variant: t13,
-        children: t14
-      }, void 0, false)
-    }, void 0, false);
-    $[21] = t13;
-    $[22] = t14;
-    $[23] = t15;
-  } else {
-    t15 = $[23];
-  }
-  let t16;
-  if ($[24] !== trace.startTs) {
-    t16 = formatTimestamp(trace.startTs);
-    $[24] = trace.startTs;
-    $[25] = t16;
-  } else {
-    t16 = $[25];
-  }
-  let t17;
-  if ($[26] !== t16) {
-    t17 = /* @__PURE__ */ jsxDEV("span", {
-      className: "flex-1 truncate text-right font-mono text-xs tabular-nums text-muted-foreground",
-      children: t16
-    }, void 0, false);
-    $[26] = t16;
-    $[27] = t17;
-  } else {
-    t17 = $[27];
-  }
-  let t18;
-  if ($[28] !== expanded || $[29] !== onClick || $[30] !== t10 || $[31] !== t12 || $[32] !== t15 || $[33] !== t17 || $[34] !== t3 || $[35] !== t4 || $[36] !== t6 || $[37] !== t7 || $[38] !== t8) {
-    t18 = /* @__PURE__ */ jsxDEV("button", {
-      "aria-controls": t3,
-      "aria-expanded": expanded,
-      className: "flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-muted/50",
-      "data-testid": t4,
-      onClick,
-      type: "button",
-      children: [t6, t7, t8, t10, t12, t15, t17]
-    }, void 0, true);
-    $[28] = expanded;
-    $[29] = onClick;
-    $[30] = t10;
-    $[31] = t12;
-    $[32] = t15;
-    $[33] = t17;
-    $[34] = t3;
-    $[35] = t4;
-    $[36] = t6;
-    $[37] = t7;
-    $[38] = t8;
-    $[39] = t18;
-  } else {
-    t18 = $[39];
-  }
-  let t19;
-  if ($[40] !== expanded || $[41] !== t || $[42] !== trace.durationMs || $[43] !== trace.spans || $[44] !== trace.traceId) {
-    t19 = expanded && /* @__PURE__ */ jsxDEV("div", {
-      "aria-label": t("Trace waterfall"),
-      className: "bg-muted/20",
-      "data-testid": `tr-waterfall-${trace.traceId}`,
-      id: `tr-waterfall-${trace.traceId}`,
-      role: "grid",
-      children: trace.spans.map((span) => /* @__PURE__ */ jsxDEV(SpanRow, {
-        span,
-        traceDurationMs: trace.durationMs
-      }, span.spanId, false))
-    }, void 0, false);
-    $[40] = expanded;
-    $[41] = t;
-    $[42] = trace.durationMs;
-    $[43] = trace.spans;
-    $[44] = trace.traceId;
-    $[45] = t19;
-  } else {
-    t19 = $[45];
-  }
-  let t20;
-  if ($[46] !== t18 || $[47] !== t19 || $[48] !== t2) {
-    t20 = /* @__PURE__ */ jsxDEV("div", {
-      className: "border-b border-border last:border-b-0",
-      "data-testid": t2,
-      children: [t18, t19]
-    }, void 0, true);
-    $[46] = t18;
-    $[47] = t19;
-    $[48] = t2;
-    $[49] = t20;
-  } else {
-    t20 = $[49];
-  }
-  return t20;
-};
-const TracesPanel = (t0) => {
-  const $ = c(44);
-  const {
-    initialShardKey
-  } = t0;
-  const t = useT();
-  const [pending] = useState(peekPendingTraceFilter);
-  const [shardKey, setShardKey] = useState(pending?.shardKey !== void 0 && pending.shardKey !== "" ? pending.shardKey : initialShardKey ?? "");
-  const [search, setSearch] = useState(pending?.traceId ?? "");
-  const [expanded, setExpanded] = useState(_temp);
-  let t1;
-  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t1 = [];
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  useEffect(_temp2, t1);
-  let t2;
-  if ($[1] !== shardKey) {
-    t2 = shardKey.trim();
-    $[1] = shardKey;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  const debouncedShard = useDebounced(t2, 400);
-  let t3;
-  if ($[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t3 = {};
-    $[3] = t3;
-  } else {
-    t3 = $[3];
-  }
-  let t4;
-  if ($[4] !== debouncedShard) {
-    t4 = {
-      live: true,
-      shardKey: debouncedShard
-    };
-    $[4] = debouncedShard;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  const {
-    data,
-    error,
-    errorSource,
-    isLoading,
-    liveError
-  } = useAdminQuery(ADMIN_FUNCTIONS.getTraces, t3, t4);
-  let t5;
-  let t6;
-  if ($[6] !== data || $[7] !== debouncedShard) {
-    t5 = () => {
-      if (data !== void 0) {
-        recordShard(debouncedShard);
-      }
-    };
-    t6 = [data, debouncedShard];
-    $[6] = data;
-    $[7] = debouncedShard;
-    $[8] = t5;
-    $[9] = t6;
-  } else {
-    t5 = $[8];
-    t6 = $[9];
-  }
-  useEffect(t5, t6);
-  let t7;
-  if ($[10] !== data || $[11] !== error || $[12] !== errorSource || $[13] !== expanded || $[14] !== isLoading || $[15] !== liveError || $[16] !== search || $[17] !== shardKey || $[18] !== t) {
-    const traces = tracesOf(data);
-    const total = data?.total ?? traces.length;
-    const truncated = total > traces.length;
-    const filtered = filterTraces(traces, search);
-    let t8;
-    if ($[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t8 = (event) => {
-        setSearch(event.target.value);
-      };
-      $[20] = t8;
-    } else {
-      t8 = $[20];
-    }
-    const onSearchChange = t8;
-    let t9;
-    if ($[21] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t9 = (traceId) => {
-        setExpanded((previous) => {
-          const next = new Set(previous);
-          if (next.has(traceId)) {
-            next.delete(traceId);
-          } else {
-            next.add(traceId);
-          }
-          return next;
-        });
-      };
-      $[21] = t9;
-    } else {
-      t9 = $[21];
-    }
-    const onToggle = t9;
-    const showEmpty = error === null && filtered.length === 0 && !isLoading;
-    let t10;
-    if ($[22] !== shardKey) {
-      t10 = /* @__PURE__ */ jsxDEV(ShardInput, {
-        onChange: setShardKey,
-        testId: "tr-shard-input",
-        value: shardKey
-      }, void 0, false);
-      $[22] = shardKey;
-      $[23] = t10;
-    } else {
-      t10 = $[23];
-    }
-    let t11;
-    if ($[24] !== t) {
-      t11 = t("Search traces");
-      $[24] = t;
-      $[25] = t11;
-    } else {
-      t11 = $[25];
-    }
-    let t12;
-    if ($[26] !== t) {
-      t12 = t("search trace or function");
-      $[26] = t;
-      $[27] = t12;
-    } else {
-      t12 = $[27];
-    }
-    let t13;
-    if ($[28] !== search || $[29] !== t11 || $[30] !== t12) {
-      t13 = /* @__PURE__ */ jsxDEV(Input, {
-        "aria-label": t11,
-        className: "h-8 w-56",
-        "data-testid": "tr-search",
-        onChange: onSearchChange,
-        placeholder: t12,
-        value: search
-      }, void 0, false);
-      $[28] = search;
-      $[29] = t11;
-      $[30] = t12;
-      $[31] = t13;
-    } else {
-      t13 = $[31];
-    }
-    let t14;
-    if ($[32] !== liveError) {
-      t14 = /* @__PURE__ */ jsxDEV(LiveError, {
-        message: liveError,
-        prefix: "tr"
-      }, void 0, false);
-      $[32] = liveError;
-      $[33] = t14;
-    } else {
-      t14 = $[33];
-    }
-    let t15;
-    if ($[34] !== t10 || $[35] !== t13 || $[36] !== t14) {
-      t15 = /* @__PURE__ */ jsxDEV("div", {
-        className: "flex flex-wrap items-center gap-2",
-        children: [t10, t13, t14]
-      }, void 0, true);
-      $[34] = t10;
-      $[35] = t13;
-      $[36] = t14;
-      $[37] = t15;
-    } else {
-      t15 = $[37];
-    }
-    let t16;
-    if ($[38] !== error || $[39] !== errorSource) {
-      t16 = error !== null && /* @__PURE__ */ jsxDEV(ErrorAlert, {
-        error: errorSource,
-        testId: "tr-error"
-      }, void 0, false);
-      $[38] = error;
-      $[39] = errorSource;
-      $[40] = t16;
-    } else {
-      t16 = $[40];
-    }
-    let t17;
-    if ($[41] !== showEmpty || $[42] !== t) {
-      t17 = showEmpty && /* @__PURE__ */ jsxDEV(EmptyState, {
-        description: t("Traces recorded with ctx.trace show up here as your app handles traffic. The span buffer resets when the shard hibernates."),
-        icon: /* @__PURE__ */ jsxDEV("svg", {
-          "aria-hidden": "true",
-          fill: "none",
-          stroke: "currentColor",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 1.6,
-          viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsxDEV("path", {
-            d: "M4 6h10M7 12h13M10 18h7"
-          }, void 0, false)
-        }, void 0, false),
-        testId: "tr-empty",
-        title: t("No traces")
-      }, void 0, false);
-      $[41] = showEmpty;
-      $[42] = t;
-      $[43] = t17;
-    } else {
-      t17 = $[43];
-    }
-    t7 = /* @__PURE__ */ jsxDEV("div", {
-      className: "flex flex-col gap-4",
-      "data-testid": "lunora-traces-panel",
-      children: [t15, t16, t17, error === null && truncated && /* @__PURE__ */ jsxDEV("p", {
-        className: "text-xs text-muted-foreground",
-        "data-testid": "tr-truncated",
-        children: t("Showing the {shown} most recent of {total} traces in the buffer.", {
-          shown: traces.length,
-          total
-        })
-      }, void 0, false), error === null && filtered.length > 0 && /* @__PURE__ */ jsxDEV("div", {
-        "aria-label": t("Recent traces"),
-        className: "overflow-hidden rounded-xl border border-border shadow-xs",
-        "data-testid": "tr-list",
-        children: filtered.map((trace) => /* @__PURE__ */ jsxDEV(TraceRow, {
-          expanded: expanded.has(trace.traceId),
-          onToggle,
-          trace
-        }, trace.traceId, false))
-      }, void 0, false)]
-    }, void 0, true);
-    $[10] = data;
-    $[11] = error;
-    $[12] = errorSource;
-    $[13] = expanded;
-    $[14] = isLoading;
-    $[15] = liveError;
-    $[16] = search;
-    $[17] = shardKey;
-    $[18] = t;
-    $[19] = t7;
-  } else {
-    t7 = $[19];
-  }
-  return t7;
-};
-function _temp() {
-  return /* @__PURE__ */ new Set();
-}
-function _temp2() {
-  clearPendingTraceFilter();
-}
-
-export { TracesPanel };
+import{c as z}from"react/compiler-runtime";import{useState as Q,useEffect as J}from"react";import{f as Y}from"../packem_shared/log-fields-CoL3hsIQ.js";import{E as Z}from"../packem_shared/error-alert-B59DnrDI.js";import{L as ee}from"../packem_shared/live-status-CGW2JHf_.js";import{ShardInput as te}from"../packem_shared/ShardInput-BVn2iCU0.js";import{g as re}from"../packem_shared/badge-BbuuAio7.js";import{E as ae}from"../packem_shared/empty-state-Cg7t_8qu.js";import{u as se}from"../packem_shared/input-JHu63lTv.js";import{K as ne}from"../packem_shared/use-admin-query-Di3fLE8H.js";import oe from"../packem_shared/useDebounced-Ihdiid_k.js";import{useT as G}from"../packem_shared/DEFAULT_LOCALE-BZ4NojpD.js";import{ADMIN_FUNCTIONS as le}from"../packem_shared/ADMIN_FUNCTIONS-BYNSbBVE.js";import{i as ie}from"../packem_shared/internal-AtZ4bTal.js";import{r as de}from"../packem_shared/shard-history-DMEW5VBE.js";import{p as ce,c as me}from"../packem_shared/trace-handoff-Dw7mwjxu.js";import{c as ue}from"../packem_shared/utils-bhneXptQ.js";import{jsx as s,jsxs as B}from"react/jsx-runtime";const V=o=>Math.min(100,Math.max(0,o)),he=(o,e)=>{if(!Number.isFinite(e)||e<=0)return{leftPercent:0,widthPercent:100};const t=V(o.offsetMs/e*100),a=o.durationMs/e*100,r=Math.max(.5,Math.min(V(a),100-t));return{leftPercent:t,widthPercent:r}},fe=(o,e)=>{const t=e.trim().toLowerCase();return t===""?[...o]:o.filter(a=>a.rootName.toLowerCase().includes(t)||a.functionPath.toLowerCase().includes(t)||a.traceId.toLowerCase().includes(t))},U=o=>Number.isFinite(o)?o>0&&o<1?`${o.toFixed(2)}ms`:`${String(Math.round(o))}ms`:"—",pe=14,ge=o=>Array.isArray(o?.traces)?o.traces:[],xe=o=>{const e=z(50),{span:t,traceDurationMs:a}=o,r=G();let n;e[0]!==t||e[1]!==a?(n=he(t,a),e[0]=t,e[1]=a,e[2]=n):n=e[2];const{leftPercent:S,widthPercent:x}=n;let P;e[3]!==t.attributes?(P=Y(t.attributes),e[3]=t.attributes,e[4]=P):P=e[4];const M=P,L=t.depth*pe;let y;e[5]!==L?(y={paddingLeft:L},e[5]=L,e[6]=y):y=e[6];const b=y,c=`${String(S)}%`,w=`${String(x)}%`;let p;e[7]!==c||e[8]!==w?(p={left:c,width:w},e[7]=c,e[8]=w,e[9]=p):p=e[9];const l=p,f=t.depth;let i;e[10]!==t.ok||e[11]!==r?(i=t.ok?null:s("span",{"aria-label":r("Errored span"),className:"mr-1 text-destructive","data-testid":"tr-span-error",role:"img",children:"●"}),e[10]=t.ok,e[11]=r,e[12]=i):i=e[12];let v;e[13]!==b||e[14]!==t.name||e[15]!==i?(v=B("span",{className:"w-56 shrink-0 truncate",role:"gridcell",style:b,title:t.name,children:[i,t.name]}),e[13]=b,e[14]=t.name,e[15]=i,e[16]=v):v=e[16];let d;e[17]!==t.durationMs||e[18]!==t.offsetMs||e[19]!==r?(d=r("starts {offset} in, runs {duration}",{duration:U(t.durationMs),offset:U(t.offsetMs)}),e[17]=t.durationMs,e[18]=t.offsetMs,e[19]=r,e[20]=d):d=e[20];const N=t.ok?"bg-primary/70":"bg-destructive";let m;e[21]!==N?(m=ue("absolute inset-y-0 rounded-sm",N),e[21]=N,e[22]=m):m=e[22];let u;e[23]!==l||e[24]!==S||e[25]!==m||e[26]!==x?(u=s("span",{className:m,"data-left":S,"data-testid":"tr-span-bar","data-width":x,style:l}),e[23]=l,e[24]=S,e[25]=m,e[26]=x,e[27]=u):u=e[27];let h;e[28]!==d||e[29]!==u?(h=s("span",{"aria-label":d,className:"relative h-3 flex-1 overflow-hidden rounded-sm bg-muted",role:"gridcell",children:u}),e[28]=d,e[29]=u,e[30]=h):h=e[30];let g;e[31]!==t.durationMs?(g=U(t.durationMs),e[31]=t.durationMs,e[32]=g):g=e[32];let k;e[33]!==g?(k=s("span",{className:"w-16 shrink-0 text-right tabular-nums text-muted-foreground",role:"gridcell",children:g}),e[33]=g,e[34]=k):k=e[34];let I;e[35]!==t.error?(I=t.error===void 0?null:s("span",{className:"text-destructive","data-testid":"tr-span-error-message",title:t.error.message,children:`${t.error.type}: ${t.error.message}`}),e[35]=t.error,e[36]=I):I=e[36];let T;e[37]!==I?(T=s("span",{className:"w-64 shrink-0 truncate text-muted-foreground",role:"gridcell",children:I}),e[37]=I,e[38]=T):T=e[38];let C;e[39]!==M?(C=M===""?null:s("span",{"data-testid":"tr-span-attributes",title:M,children:M}),e[39]=M,e[40]=C):C=e[40];let $;e[41]!==C?($=s("span",{className:"w-64 shrink-0 truncate text-muted-foreground",role:"gridcell",children:C}),e[41]=C,e[42]=$):$=e[42];let F;return e[43]!==t.depth||e[44]!==v||e[45]!==h||e[46]!==k||e[47]!==T||e[48]!==$?(F=B("div",{className:"flex items-center gap-2 border-b border-border px-3 py-1.5 font-mono text-xs last:border-b-0 hover:bg-muted/50","data-depth":f,"data-testid":"tr-span-row",role:"row",children:[v,h,k,T,$]}),e[43]=t.depth,e[44]=v,e[45]=h,e[46]=k,e[47]=T,e[48]=$,e[49]=F):F=e[49],F},be=o=>{const e=z(50),{expanded:t,onToggle:a,trace:r}=o,n=G();let S;e[0]!==a||e[1]!==r.traceId?(S=()=>{a(r.traceId)},e[0]=a,e[1]=r.traceId,e[2]=S):S=e[2];const x=S,P=`tr-row-${r.traceId}`,M=`tr-waterfall-${r.traceId}`,L=`tr-toggle-${r.traceId}`,y=t?"▾":"▸";let b;e[3]!==y?(b=s("span",{"aria-hidden":"true",className:"w-3 shrink-0 text-xs text-muted-foreground",children:y}),e[3]=y,e[4]=b):b=e[4];let c;e[5]!==r.rootName?(c=s("span",{className:"w-56 shrink-0 truncate text-sm font-medium",title:r.rootName,children:r.rootName}),e[5]=r.rootName,e[6]=c):c=e[6];let w;e[7]!==r.functionPath?(w=s("span",{className:"w-48 shrink-0 truncate font-mono text-xs text-muted-foreground",title:r.functionPath,children:r.functionPath}),e[7]=r.functionPath,e[8]=w):w=e[8];let p;e[9]!==r.durationMs?(p=U(r.durationMs),e[9]=r.durationMs,e[10]=p):p=e[10];let l;e[11]!==p?(l=s("span",{className:"w-20 shrink-0 text-right font-mono text-xs tabular-nums text-muted-foreground",children:p}),e[11]=p,e[12]=l):l=e[12];let f;e[13]!==n||e[14]!==r.spans.length?(f=n("{count} spans",{count:r.spans.length}),e[13]=n,e[14]=r.spans.length,e[15]=f):f=e[15];let i;e[16]!==f?(i=s("span",{className:"w-20 shrink-0 text-right font-mono text-xs tabular-nums text-muted-foreground",children:f}),e[16]=f,e[17]=i):i=e[17];const v=r.ok?"secondary":"destructive";let d;e[18]!==n||e[19]!==r.ok?(d=r.ok?n("ok"):n("error"),e[18]=n,e[19]=r.ok,e[20]=d):d=e[20];let N;e[21]!==v||e[22]!==d?(N=s("span",{className:"shrink-0",children:s(re,{variant:v,children:d})}),e[21]=v,e[22]=d,e[23]=N):N=e[23];let m;e[24]!==r.startTs?(m=ie(r.startTs),e[24]=r.startTs,e[25]=m):m=e[25];let u;e[26]!==m?(u=s("span",{className:"flex-1 truncate text-right font-mono text-xs tabular-nums text-muted-foreground",children:m}),e[26]=m,e[27]=u):u=e[27];let h;e[28]!==t||e[29]!==x||e[30]!==l||e[31]!==i||e[32]!==N||e[33]!==u||e[34]!==M||e[35]!==L||e[36]!==b||e[37]!==c||e[38]!==w?(h=B("button",{"aria-controls":M,"aria-expanded":t,className:"flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-muted/50","data-testid":L,onClick:x,type:"button",children:[b,c,w,l,i,N,u]}),e[28]=t,e[29]=x,e[30]=l,e[31]=i,e[32]=N,e[33]=u,e[34]=M,e[35]=L,e[36]=b,e[37]=c,e[38]=w,e[39]=h):h=e[39];let g;e[40]!==t||e[41]!==n||e[42]!==r.durationMs||e[43]!==r.spans||e[44]!==r.traceId?(g=t&&s("div",{"aria-label":n("Trace waterfall"),className:"bg-muted/20","data-testid":`tr-waterfall-${r.traceId}`,id:`tr-waterfall-${r.traceId}`,role:"grid",children:r.spans.map(I=>s(xe,{span:I,traceDurationMs:r.durationMs},I.spanId))}),e[40]=t,e[41]=n,e[42]=r.durationMs,e[43]=r.spans,e[44]=r.traceId,e[45]=g):g=e[45];let k;return e[46]!==h||e[47]!==g||e[48]!==P?(k=B("div",{className:"border-b border-border last:border-b-0","data-testid":P,children:[h,g]}),e[46]=h,e[47]=g,e[48]=P,e[49]=k):k=e[49],k},Be=o=>{const e=z(44),{initialShardKey:t}=o,a=G(),[r]=Q(ce),[n,S]=Q(r?.shardKey!==void 0&&r.shardKey!==""?r.shardKey:t??""),[x,P]=Q(r?.traceId??""),[M,L]=Q(we);let y;e[0]===Symbol.for("react.memo_cache_sentinel")?(y=[],e[0]=y):y=e[0],J(Ne,y);let b;e[1]!==n?(b=n.trim(),e[1]=n,e[2]=b):b=e[2];const c=oe(b,400);let w;e[3]===Symbol.for("react.memo_cache_sentinel")?(w={},e[3]=w):w=e[3];let p;e[4]!==c?(p={live:!0,shardKey:c},e[4]=c,e[5]=p):p=e[5];const{data:l,error:f,errorSource:i,isLoading:v,liveError:d}=ne(le.getTraces,w,p);let N,m;e[6]!==l||e[7]!==c?(N=()=>{l!==void 0&&de(c)},m=[l,c],e[6]=l,e[7]=c,e[8]=N,e[9]=m):(N=e[8],m=e[9]),J(N,m);let u;if(e[10]!==l||e[11]!==f||e[12]!==i||e[13]!==M||e[14]!==v||e[15]!==d||e[16]!==x||e[17]!==n||e[18]!==a){const h=ge(l),g=l?.total??h.length,k=g>h.length,I=fe(h,x);let T;e[20]===Symbol.for("react.memo_cache_sentinel")?(T=_=>{P(_.target.value)},e[20]=T):T=e[20];const C=T;let $;e[21]===Symbol.for("react.memo_cache_sentinel")?($=_=>{L(X=>{const H=new Set(X);return H.has(_)?H.delete(_):H.add(_),H})},e[21]=$):$=e[21];const F=$,W=f===null&&I.length===0&&!v;let K;e[22]!==n?(K=s(te,{onChange:S,testId:"tr-shard-input",value:n}),e[22]=n,e[23]=K):K=e[23];let A;e[24]!==a?(A=a("Search traces"),e[24]=a,e[25]=A):A=e[25];let D;e[26]!==a?(D=a("search trace or function"),e[26]=a,e[27]=D):D=e[27];let j;e[28]!==x||e[29]!==A||e[30]!==D?(j=s(se,{"aria-label":A,className:"h-8 w-56","data-testid":"tr-search",onChange:C,placeholder:D,value:x}),e[28]=x,e[29]=A,e[30]=D,e[31]=j):j=e[31];let E;e[32]!==d?(E=s(ee,{message:d,prefix:"tr"}),e[32]=d,e[33]=E):E=e[33];let R;e[34]!==K||e[35]!==j||e[36]!==E?(R=B("div",{className:"flex flex-wrap items-center gap-2",children:[K,j,E]}),e[34]=K,e[35]=j,e[36]=E,e[37]=R):R=e[37];let O;e[38]!==f||e[39]!==i?(O=f!==null&&s(Z,{error:i,testId:"tr-error"}),e[38]=f,e[39]=i,e[40]=O):O=e[40];let q;e[41]!==W||e[42]!==a?(q=W&&s(ae,{description:a("Traces recorded with ctx.trace show up here as your app handles traffic. The span buffer resets when the shard hibernates."),icon:s("svg",{"aria-hidden":"true",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.6,viewBox:"0 0 24 24",children:s("path",{d:"M4 6h10M7 12h13M10 18h7"})}),testId:"tr-empty",title:a("No traces")}),e[41]=W,e[42]=a,e[43]=q):q=e[43],u=B("div",{className:"flex flex-col gap-4","data-testid":"lunora-traces-panel",children:[R,O,q,f===null&&k&&s("p",{className:"text-xs text-muted-foreground","data-testid":"tr-truncated",children:a("Showing the {shown} most recent of {total} traces in the buffer.",{shown:h.length,total:g})}),f===null&&I.length>0&&s("div",{"aria-label":a("Recent traces"),className:"overflow-hidden rounded-xl border border-border shadow-xs","data-testid":"tr-list",children:I.map(_=>s(be,{expanded:M.has(_.traceId),onToggle:F,trace:_},_.traceId))})]}),e[10]=l,e[11]=f,e[12]=i,e[13]=M,e[14]=v,e[15]=d,e[16]=x,e[17]=n,e[18]=a,e[19]=u}else u=e[19];return u};function we(){return new Set}function Ne(){me()}export{Be as TracesPanel};