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

package/dist/packem_chunks/MetricsPanel.js

@@ -1,47 +1,192 @@
 import { c } from 'react/compiler-runtime';
 import { useLunora } from '@lunora/react';
+import { useNavigate } from '@tanstack/react-router';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { L as LiveError } from '../packem_shared/live-status-FZ0psC1z.js';
 import { ShardInput } from '../packem_shared/ShardInput-CZnpHILL.js';
 import { B as Button } from '../packem_shared/button-BhsN2uZH.js';
 import { C as Card, a as CardContent, c as CardHeader, b as CardTitle, d as CardDescription } from '../packem_shared/card-F2vH_aj2.js';
-import { T as Table, c as TableHead, a as TableHeader, b as TableRow, d as TableBody, e as TableCell } from '../packem_shared/table-DsCa9Qp9.js';
+import { b as TableRow, e as TableCell, T as Table, c as TableHead, a as TableHeader, d as TableBody } from '../packem_shared/table-DsCa9Qp9.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-C1LXrovV.js';
+import { ADMIN_FUNCTIONS } from '../packem_shared/ADMIN_FUNCTIONS-P2UzJscH.js';
 import { c as CLOUDFLARE_DURABLE_OBJECTS_URL } from '../packem_shared/cf-links-SIbyi4Y1.js';
 import { k as formatBytes, f as fireAndForget, c as callOptions, e as errorMessage, a as adminRef } from '../packem_shared/internal-DzHCc2Rq.js';
 import { r as recordShard, l as loadRecentShards } from '../packem_shared/shard-history-AxiJ1WPP.js';
+import { w as writePendingTraceFilter } from '../packem_shared/trace-handoff-CGolF3KS.js';
 import { f as formatLogFields } from '../packem_shared/log-fields-jEH83H2G.js';
 import { B as Badge } from '../packem_shared/badge-B2PKA1-5.js';
+import { S as Sparkline } from '../packem_shared/sparkline-BnA1kC9X.js';
 import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
 import { aggregateMetrics, computeLatencyPercentiles, enrichQueryStats, shardsToAggregate } from '../packem_shared/aggregateMetrics-D4nUHEKU.js';
 import { b as SelectValue, a as SelectTrigger, d as SelectItem, c as SelectContent, S as Select } from '../packem_shared/select-D9OwHEch.js';
-import { S as Sparkline } from '../packem_shared/sparkline-BnA1kC9X.js';
 
-const metricHeadline = (series) => {
-  if (series.kind === "gauge") {
-    return series.last;
+const compareKeys = (a, b) => {
+  if (a < b) {
+    return -1;
+  }
+  return a > b ? 1 : 0;
+};
+const stableStringify = (value) => {
+  if (value === void 0) {
+    return "null";
+  }
+  if (typeof value === "bigint") {
+    throw new TypeError("stableStringify: cannot use a bigint in a stable JSON cache key — pass it as a string, or use stableWireKey");
+  }
+  if (value === null || typeof value !== "object") {
+    return JSON.stringify(value);
+  }
+  if (Array.isArray(value)) {
+    return `[${value.map((item) => stableStringify(item)).join(",")}]`;
+  }
+  const proto = Object.getPrototypeOf(value);
+  if (proto !== null && proto !== Object.prototype) {
+    const name = value.constructor?.name ?? "value";
+    throw new TypeError(`stableStringify: cannot use a ${name} in a stable JSON cache key — only plain objects, arrays, and JSON primitives are supported (wire-typed values key via stableWireKey)`);
+  }
+  const record = value;
+  const keys = Object.keys(record).toSorted(compareKeys);
+  const parts = [];
+  for (const key of keys) {
+    const raw = record[key];
+    if (raw === void 0) {
+      continue;
+    }
+    parts.push(`${JSON.stringify(key)}:${stableStringify(raw)}`);
+  }
+  return `{${parts.join(",")}}`;
+};
+
+const seriesMatchKey = (kind, name, attributes) => `${kind}:${name}:${stableStringify(attributes ?? {})}`;
+const projectByKind = (kind, metric) => {
+  if (kind === "gauge") {
+    return metric.last;
   }
-  if (series.kind === "histogram") {
-    return series.sum / Math.max(1, series.count);
+  if (kind === "histogram") {
+    return metric.sum / Math.max(1, metric.count);
   }
-  return series.sum;
+  return metric.sum;
 };
+const pointValue = (kind, point) => projectByKind(kind, point);
+const metricHeadline = (series) => projectByKind(series.kind, series);
 const formatMetricValue = (value) => Number.isInteger(value) ? value.toLocaleString() : value.toLocaleString(void 0, {
   maximumFractionDigits: 2
 });
 
 const seriesOf = (result) => Array.isArray(result?.series) ? result.series : [];
+const historyByKey = (result) => {
+  const map = /* @__PURE__ */ new Map();
+  if (!Array.isArray(result?.series)) {
+    return map;
+  }
+  for (const entry of result.series) {
+    map.set(seriesMatchKey(entry.kind, entry.name, entry.attributes), entry.points);
+  }
+  return map;
+};
 const KIND_VARIANT = {
   counter: "secondary",
   gauge: "default",
   histogram: "outline"
 };
+const TraceExemplar = (t0) => {
+  const $ = c(18);
+  const {
+    name,
+    onOpenTrace,
+    traceId
+  } = t0;
+  const t = useT();
+  if (traceId === void 0) {
+    let t12;
+    if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t12 = /* @__PURE__ */ jsxDEV("span", {
+        className: "text-muted-foreground",
+        children: "—"
+      }, void 0, false);
+      $[0] = t12;
+    } else {
+      t12 = $[0];
+    }
+    return t12;
+  }
+  let t1;
+  if ($[1] !== traceId) {
+    t1 = traceId.slice(0, 8);
+    $[1] = traceId;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const short = t1;
+  if (onOpenTrace === void 0) {
+    const t22 = `mt-instrument-trace-${name}`;
+    let t32;
+    if ($[3] !== short || $[4] !== t22 || $[5] !== traceId) {
+      t32 = /* @__PURE__ */ jsxDEV("span", {
+        className: "text-muted-foreground",
+        "data-testid": t22,
+        title: traceId,
+        children: short
+      }, void 0, false);
+      $[3] = short;
+      $[4] = t22;
+      $[5] = traceId;
+      $[6] = t32;
+    } else {
+      t32 = $[6];
+    }
+    return t32;
+  }
+  const t2 = `mt-instrument-trace-${name}`;
+  let t3;
+  if ($[7] !== onOpenTrace || $[8] !== traceId) {
+    t3 = () => {
+      onOpenTrace(traceId);
+    };
+    $[7] = onOpenTrace;
+    $[8] = traceId;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== t || $[11] !== traceId) {
+    t4 = t("Open the exemplar trace {trace}", {
+      trace: traceId
+    });
+    $[10] = t;
+    $[11] = traceId;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== short || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
+    t5 = /* @__PURE__ */ jsxDEV("button", {
+      className: "text-primary underline-offset-4 hover:underline",
+      "data-testid": t2,
+      onClick: t3,
+      title: t4,
+      type: "button",
+      children: short
+    }, void 0, false);
+    $[13] = short;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  return t5;
+};
 const InstrumentsTable = (t0) => {
-  const $ = c(79);
+  const $ = c(92);
   const {
+    onOpenTrace,
     shardKey
   } = t0;
   const t = useT();
@@ -67,30 +212,52 @@ const InstrumentsTable = (t0) => {
     data,
     error
   } = useAdminQuery(ADMIN_FUNCTIONS.getMetricSeries, t1, t2);
+  let t3;
+  if ($[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {};
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== shardKey) {
+    t4 = {
+      live: true,
+      shardKey
+    };
+    $[4] = shardKey;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const {
+    data: history
+  } = useAdminQuery(ADMIN_FUNCTIONS.getMetricHistory, t3, t4);
   let T0;
   let T1;
   let T2;
   let T3;
   let t10;
   let t11;
-  let t3;
-  let t4;
+  let t12;
+  let t13;
   let t5;
   let t6;
   let t7;
   let t8;
   let t9;
-  if ($[3] !== data || $[4] !== error || $[5] !== t) {
-    t11 = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
+  if ($[6] !== data || $[7] !== error || $[8] !== history || $[9] !== onOpenTrace || $[10] !== t) {
+    t13 = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
     bb0: {
       const series = seriesOf(data);
       if (error !== null || series.length === 0) {
-        t11 = null;
+        t13 = null;
         break bb0;
       }
-      let t122;
-      if ($[19] !== t) {
-        t122 = (kind) => {
+      const trends = historyByKey(history);
+      let t142;
+      if ($[24] !== t) {
+        t142 = (kind) => {
           if (kind === "counter") {
             return t("Counter");
           }
@@ -99,307 +266,360 @@ const InstrumentsTable = (t0) => {
           }
           return t("Histogram");
         };
-        $[19] = t;
-        $[20] = t122;
+        $[24] = t;
+        $[25] = t142;
       } else {
-        t122 = $[20];
+        t142 = $[25];
       }
-      const kindLabel = t122;
-      t8 = "flex flex-col gap-2";
-      t9 = "mt-instruments";
-      let t132;
-      if ($[21] !== t) {
-        t132 = t("Instruments");
-        $[21] = t;
-        $[22] = t132;
+      const kindLabel = t142;
+      t10 = "flex flex-col gap-2";
+      t11 = "mt-instruments";
+      let t152;
+      if ($[26] !== t) {
+        t152 = t("Instruments");
+        $[26] = t;
+        $[27] = t152;
       } else {
-        t132 = $[22];
+        t152 = $[27];
       }
-      if ($[23] !== t132) {
-        t10 = /* @__PURE__ */ jsxDEV("h3", {
+      if ($[28] !== t152) {
+        t12 = /* @__PURE__ */ jsxDEV("h3", {
           className: "text-sm font-semibold text-foreground",
-          children: t132
+          children: t152
         }, void 0, false);
-        $[23] = t132;
-        $[24] = t10;
+        $[28] = t152;
+        $[29] = t12;
       } else {
-        t10 = $[24];
+        t12 = $[29];
       }
       T3 = Card;
-      t7 = "overflow-hidden py-0";
+      t9 = "overflow-hidden py-0";
       T2 = CardContent;
-      t6 = "px-0";
+      t8 = "px-0";
       T1 = Table;
-      t4 = "mt-instruments-table";
-      let t142;
-      if ($[25] !== t) {
-        t142 = t("name");
-        $[25] = t;
-        $[26] = t142;
-      } else {
-        t142 = $[26];
-      }
-      let t152;
-      if ($[27] !== t142) {
-        t152 = /* @__PURE__ */ jsxDEV(TableHead, {
-          children: t142
-        }, void 0, false);
-        $[27] = t142;
-        $[28] = t152;
-      } else {
-        t152 = $[28];
-      }
+      t6 = "mt-instruments-table";
       let t162;
-      if ($[29] !== t) {
-        t162 = t("kind");
-        $[29] = t;
-        $[30] = t162;
+      if ($[30] !== t) {
+        t162 = t("name");
+        $[30] = t;
+        $[31] = t162;
       } else {
-        t162 = $[30];
+        t162 = $[31];
       }
-      let t17;
-      if ($[31] !== t162) {
-        t17 = /* @__PURE__ */ jsxDEV(TableHead, {
+      let t172;
+      if ($[32] !== t162) {
+        t172 = /* @__PURE__ */ jsxDEV(TableHead, {
           children: t162
         }, void 0, false);
-        $[31] = t162;
-        $[32] = t17;
+        $[32] = t162;
+        $[33] = t172;
       } else {
-        t17 = $[32];
+        t172 = $[33];
       }
-      let t18;
-      if ($[33] !== t) {
-        t18 = t("value");
-        $[33] = t;
-        $[34] = t18;
+      let t182;
+      if ($[34] !== t) {
+        t182 = t("kind");
+        $[34] = t;
+        $[35] = t182;
       } else {
-        t18 = $[34];
+        t182 = $[35];
       }
       let t19;
-      if ($[35] !== t18) {
+      if ($[36] !== t182) {
         t19 = /* @__PURE__ */ jsxDEV(TableHead, {
-          className: "text-right",
-          children: t18
+          children: t182
         }, void 0, false);
-        $[35] = t18;
-        $[36] = t19;
+        $[36] = t182;
+        $[37] = t19;
       } else {
-        t19 = $[36];
+        t19 = $[37];
       }
       let t20;
-      if ($[37] !== t) {
-        t20 = t("count");
-        $[37] = t;
-        $[38] = t20;
+      if ($[38] !== t) {
+        t20 = t("value");
+        $[38] = t;
+        $[39] = t20;
       } else {
-        t20 = $[38];
+        t20 = $[39];
       }
       let t21;
-      if ($[39] !== t20) {
+      if ($[40] !== t20) {
         t21 = /* @__PURE__ */ jsxDEV(TableHead, {
           className: "text-right",
           children: t20
         }, void 0, false);
-        $[39] = t20;
-        $[40] = t21;
+        $[40] = t20;
+        $[41] = t21;
       } else {
-        t21 = $[40];
+        t21 = $[41];
       }
       let t22;
-      if ($[41] !== t) {
-        t22 = t("range");
-        $[41] = t;
-        $[42] = t22;
+      if ($[42] !== t) {
+        t22 = t("count");
+        $[42] = t;
+        $[43] = t22;
       } else {
-        t22 = $[42];
+        t22 = $[43];
       }
       let t23;
-      if ($[43] !== t22) {
+      if ($[44] !== t22) {
         t23 = /* @__PURE__ */ jsxDEV(TableHead, {
           className: "text-right",
           children: t22
         }, void 0, false);
-        $[43] = t22;
-        $[44] = t23;
+        $[44] = t22;
+        $[45] = t23;
       } else {
-        t23 = $[44];
+        t23 = $[45];
       }
       let t24;
-      if ($[45] !== t) {
-        t24 = t("dimensions");
-        $[45] = t;
-        $[46] = t24;
+      if ($[46] !== t) {
+        t24 = t("range");
+        $[46] = t;
+        $[47] = t24;
       } else {
-        t24 = $[46];
+        t24 = $[47];
       }
       let t25;
-      if ($[47] !== t24) {
+      if ($[48] !== t24) {
         t25 = /* @__PURE__ */ jsxDEV(TableHead, {
+          className: "text-right",
           children: t24
         }, void 0, false);
-        $[47] = t24;
-        $[48] = t25;
+        $[48] = t24;
+        $[49] = t25;
+      } else {
+        t25 = $[49];
+      }
+      let t26;
+      if ($[50] !== t) {
+        t26 = t("trend");
+        $[50] = t;
+        $[51] = t26;
+      } else {
+        t26 = $[51];
+      }
+      let t27;
+      if ($[52] !== t26) {
+        t27 = /* @__PURE__ */ jsxDEV(TableHead, {
+          children: t26
+        }, void 0, false);
+        $[52] = t26;
+        $[53] = t27;
+      } else {
+        t27 = $[53];
+      }
+      let t28;
+      if ($[54] !== t) {
+        t28 = t("trace");
+        $[54] = t;
+        $[55] = t28;
+      } else {
+        t28 = $[55];
+      }
+      let t29;
+      if ($[56] !== t28) {
+        t29 = /* @__PURE__ */ jsxDEV(TableHead, {
+          children: t28
+        }, void 0, false);
+        $[56] = t28;
+        $[57] = t29;
       } else {
-        t25 = $[48];
+        t29 = $[57];
       }
-      if ($[49] !== t152 || $[50] !== t17 || $[51] !== t19 || $[52] !== t21 || $[53] !== t23 || $[54] !== t25) {
-        t5 = /* @__PURE__ */ jsxDEV(TableHeader, {
+      let t30;
+      if ($[58] !== t) {
+        t30 = t("dimensions");
+        $[58] = t;
+        $[59] = t30;
+      } else {
+        t30 = $[59];
+      }
+      let t31;
+      if ($[60] !== t30) {
+        t31 = /* @__PURE__ */ jsxDEV(TableHead, {
+          children: t30
+        }, void 0, false);
+        $[60] = t30;
+        $[61] = t31;
+      } else {
+        t31 = $[61];
+      }
+      if ($[62] !== t172 || $[63] !== t19 || $[64] !== t21 || $[65] !== t23 || $[66] !== t25 || $[67] !== t27 || $[68] !== t29 || $[69] !== t31) {
+        t7 = /* @__PURE__ */ jsxDEV(TableHeader, {
           children: /* @__PURE__ */ jsxDEV(TableRow, {
-            children: [t152, t17, t19, t21, t23, t25]
+            children: [t172, t19, t21, t23, t25, t27, t29, t31]
           }, void 0, true)
         }, void 0, false);
-        $[49] = t152;
-        $[50] = t17;
-        $[51] = t19;
-        $[52] = t21;
-        $[53] = t23;
-        $[54] = t25;
-        $[55] = t5;
+        $[62] = t172;
+        $[63] = t19;
+        $[64] = t21;
+        $[65] = t23;
+        $[66] = t25;
+        $[67] = t27;
+        $[68] = t29;
+        $[69] = t31;
+        $[70] = t7;
       } else {
-        t5 = $[55];
+        t7 = $[70];
       }
       T0 = TableBody;
-      let t26;
-      if ($[56] !== kindLabel) {
-        t26 = (s) => {
-          const dimensions = formatLogFields(s.attributes);
-          const key = `${s.kind}:${s.name}:${dimensions}`;
-          return /* @__PURE__ */ jsxDEV(TableRow, {
-            "data-testid": `mt-instrument-${s.name}`,
-            children: [/* @__PURE__ */ jsxDEV(TableCell, {
-              className: "font-mono text-xs",
-              title: s.functionPath,
-              children: s.name
-            }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
-              children: /* @__PURE__ */ jsxDEV(Badge, {
-                variant: KIND_VARIANT[s.kind],
-                children: kindLabel(s.kind)
-              }, void 0, false)
-            }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
-              className: "text-right font-mono tabular-nums",
-              "data-testid": `mt-instrument-value-${s.name}`,
-              children: formatMetricValue(metricHeadline(s))
-            }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
-              className: "text-right tabular-nums text-muted-foreground",
-              children: s.count.toLocaleString()
-            }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
-              className: "text-right font-mono text-xs tabular-nums text-muted-foreground",
-              children: s.min === s.max ? "—" : `${formatMetricValue(s.min)}–${formatMetricValue(s.max)}`
-            }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
-              className: "max-w-64 truncate font-mono text-xs text-muted-foreground",
-              title: dimensions,
-              children: dimensions === "" ? "—" : dimensions
-            }, void 0, false)]
-          }, key, true);
-        };
-        $[56] = kindLabel;
-        $[57] = t26;
-      } else {
-        t26 = $[57];
-      }
-      t3 = series.map(t26);
+      t5 = series.map((s) => {
+        const dimensions = formatLogFields(s.attributes);
+        const key = seriesMatchKey(s.kind, s.name, s.attributes);
+        const points = trends.get(key) ?? [];
+        const trend = points.map((point) => pointValue(s.kind, point));
+        return /* @__PURE__ */ jsxDEV(TableRow, {
+          "data-testid": `mt-instrument-${s.name}`,
+          children: [/* @__PURE__ */ jsxDEV(TableCell, {
+            className: "font-mono text-xs",
+            title: s.functionPath,
+            children: s.name
+          }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+            children: /* @__PURE__ */ jsxDEV(Badge, {
+              variant: KIND_VARIANT[s.kind],
+              children: kindLabel(s.kind)
+            }, void 0, false)
+          }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+            className: "text-right font-mono tabular-nums",
+            "data-testid": `mt-instrument-value-${s.name}`,
+            children: formatMetricValue(metricHeadline(s))
+          }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+            className: "text-right tabular-nums text-muted-foreground",
+            children: s.count.toLocaleString()
+          }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+            className: "text-right font-mono text-xs tabular-nums text-muted-foreground",
+            children: s.min === s.max ? "—" : `${formatMetricValue(s.min)}–${formatMetricValue(s.max)}`
+          }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+            children: trend.length >= 2 ? /* @__PURE__ */ jsxDEV(Sparkline, {
+              ariaLabel: t("{name} trend", {
+                name: s.name
+              }),
+              className: "h-6 w-24 text-foreground",
+              series: trend,
+              testId: `mt-instrument-trend-${s.name}`
+            }, void 0, false) : /* @__PURE__ */ jsxDEV("span", {
+              className: "text-xs text-muted-foreground",
+              children: "—"
+            }, void 0, false)
+          }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+            className: "font-mono text-xs",
+            children: /* @__PURE__ */ jsxDEV(TraceExemplar, {
+              name: s.name,
+              onOpenTrace,
+              traceId: s.exemplarTraceId
+            }, void 0, false)
+          }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+            className: "max-w-64 truncate font-mono text-xs text-muted-foreground",
+            title: dimensions,
+            children: dimensions === "" ? "—" : dimensions
+          }, void 0, false)]
+        }, key, true);
+      });
     }
-    $[3] = data;
-    $[4] = error;
-    $[5] = t;
-    $[6] = T0;
-    $[7] = T1;
-    $[8] = T2;
-    $[9] = T3;
-    $[10] = t10;
-    $[11] = t11;
-    $[12] = t3;
-    $[13] = t4;
-    $[14] = t5;
-    $[15] = t6;
-    $[16] = t7;
-    $[17] = t8;
-    $[18] = t9;
-  } else {
-    T0 = $[6];
-    T1 = $[7];
-    T2 = $[8];
-    T3 = $[9];
-    t10 = $[10];
-    t11 = $[11];
-    t3 = $[12];
-    t4 = $[13];
-    t5 = $[14];
-    t6 = $[15];
-    t7 = $[16];
-    t8 = $[17];
-    t9 = $[18];
+    $[6] = data;
+    $[7] = error;
+    $[8] = history;
+    $[9] = onOpenTrace;
+    $[10] = t;
+    $[11] = T0;
+    $[12] = T1;
+    $[13] = T2;
+    $[14] = T3;
+    $[15] = t10;
+    $[16] = t11;
+    $[17] = t12;
+    $[18] = t13;
+    $[19] = t5;
+    $[20] = t6;
+    $[21] = t7;
+    $[22] = t8;
+    $[23] = t9;
+  } else {
+    T0 = $[11];
+    T1 = $[12];
+    T2 = $[13];
+    T3 = $[14];
+    t10 = $[15];
+    t11 = $[16];
+    t12 = $[17];
+    t13 = $[18];
+    t5 = $[19];
+    t6 = $[20];
+    t7 = $[21];
+    t8 = $[22];
+    t9 = $[23];
+  }
+  if (t13 !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel")) {
+    return t13;
   }
-  if (t11 !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel")) {
-    return t11;
-  }
-  let t12;
-  if ($[58] !== T0 || $[59] !== t3) {
-    t12 = /* @__PURE__ */ jsxDEV(T0, {
-      children: t3
+  let t14;
+  if ($[71] !== T0 || $[72] !== t5) {
+    t14 = /* @__PURE__ */ jsxDEV(T0, {
+      children: t5
     }, void 0, false);
-    $[58] = T0;
-    $[59] = t3;
-    $[60] = t12;
+    $[71] = T0;
+    $[72] = t5;
+    $[73] = t14;
   } else {
-    t12 = $[60];
+    t14 = $[73];
   }
-  let t13;
-  if ($[61] !== T1 || $[62] !== t12 || $[63] !== t4 || $[64] !== t5) {
-    t13 = /* @__PURE__ */ jsxDEV(T1, {
-      "data-testid": t4,
-      children: [t5, t12]
+  let t15;
+  if ($[74] !== T1 || $[75] !== t14 || $[76] !== t6 || $[77] !== t7) {
+    t15 = /* @__PURE__ */ jsxDEV(T1, {
+      "data-testid": t6,
+      children: [t7, t14]
     }, void 0, true);
-    $[61] = T1;
-    $[62] = t12;
-    $[63] = t4;
-    $[64] = t5;
-    $[65] = t13;
+    $[74] = T1;
+    $[75] = t14;
+    $[76] = t6;
+    $[77] = t7;
+    $[78] = t15;
   } else {
-    t13 = $[65];
+    t15 = $[78];
   }
-  let t14;
-  if ($[66] !== T2 || $[67] !== t13 || $[68] !== t6) {
-    t14 = /* @__PURE__ */ jsxDEV(T2, {
-      className: t6,
-      children: t13
+  let t16;
+  if ($[79] !== T2 || $[80] !== t15 || $[81] !== t8) {
+    t16 = /* @__PURE__ */ jsxDEV(T2, {
+      className: t8,
+      children: t15
     }, void 0, false);
-    $[66] = T2;
-    $[67] = t13;
-    $[68] = t6;
-    $[69] = t14;
+    $[79] = T2;
+    $[80] = t15;
+    $[81] = t8;
+    $[82] = t16;
   } else {
-    t14 = $[69];
+    t16 = $[82];
   }
-  let t15;
-  if ($[70] !== T3 || $[71] !== t14 || $[72] !== t7) {
-    t15 = /* @__PURE__ */ jsxDEV(T3, {
-      className: t7,
-      children: t14
+  let t17;
+  if ($[83] !== T3 || $[84] !== t16 || $[85] !== t9) {
+    t17 = /* @__PURE__ */ jsxDEV(T3, {
+      className: t9,
+      children: t16
     }, void 0, false);
-    $[70] = T3;
-    $[71] = t14;
-    $[72] = t7;
-    $[73] = t15;
+    $[83] = T3;
+    $[84] = t16;
+    $[85] = t9;
+    $[86] = t17;
   } else {
-    t15 = $[73];
+    t17 = $[86];
   }
-  let t16;
-  if ($[74] !== t10 || $[75] !== t15 || $[76] !== t8 || $[77] !== t9) {
-    t16 = /* @__PURE__ */ jsxDEV("section", {
-      className: t8,
-      "data-testid": t9,
-      children: [t10, t15]
+  let t18;
+  if ($[87] !== t10 || $[88] !== t11 || $[89] !== t12 || $[90] !== t17) {
+    t18 = /* @__PURE__ */ jsxDEV("section", {
+      className: t10,
+      "data-testid": t11,
+      children: [t12, t17]
     }, void 0, true);
-    $[74] = t10;
-    $[75] = t15;
-    $[76] = t8;
-    $[77] = t9;
-    $[78] = t16;
+    $[87] = t10;
+    $[88] = t11;
+    $[89] = t12;
+    $[90] = t17;
+    $[91] = t18;
   } else {
-    t16 = $[78];
+    t18 = $[91];
   }
-  return t16;
+  return t18;
 };
 
 const performanceLevel = (avgMs) => {
@@ -1413,6 +1633,7 @@ const MetricsPanel = ({
 }) => {
   const client = useLunora();
   const t = useT();
+  const navigate = useNavigate();
   const [shardKey, setShardKey] = useState(initialShardKey ?? "");
   const [activeTab, setActiveTab] = useState("overview");
   const [history, setHistory] = useState([]);
@@ -1426,6 +1647,15 @@ const MetricsPanel = ({
     };
   }, []);
   const debouncedShard = useDebounced(shardKey.trim(), 400);
+  const openTrace = (traceId) => {
+    writePendingTraceFilter({
+      shardKey: debouncedShard,
+      traceId
+    });
+    fireAndForget(navigate({
+      to: "/traces"
+    }));
+  };
   const {
     data,
     error,
@@ -1645,6 +1875,7 @@ const MetricsPanel = ({
         })
       }, void 0, false)]
     }, void 0, true), effectiveTab === "overview" && metrics === null && null, effectiveTab === "overview" && /* @__PURE__ */ jsxDEV(InstrumentsTable, {
+      onOpenTrace: openTrace,
       shardKey: debouncedShard
     }, void 0, false), effectiveTab === "overview" && aggregate !== null && shardResults !== null && /* @__PURE__ */ jsxDEV("div", {
       className: "flex flex-col gap-4",