@lunora/studio 0.0.0 → 1.0.0-alpha.2

package/dist/packem_shared/MetricsPanel-E4Gv6wTO.js

@@ -0,0 +1,1625 @@
+'use client';
+import { c } from 'react/compiler-runtime';
+import { useLunora } from '@lunora/react';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { L as LiveError } from './live-status-bPff1O7Y.js';
+import { ShardInput } from './ShardInput-DNCsT1KW.js';
+import { B as Button } from './button-BhsN2uZH.js';
+import { a as CardContent, C as Card, b as CardHeader, c as CardTitle, d as CardDescription } from './card-DURq3ElK.js';
+import { T as Table, a as TableHeader, b as TableRow, c as TableHead, d as TableBody, e as TableCell } from './table-_RzNvy3R.js';
+import { u as useLiveAdmin } from './use-live-admin-D1h1Fzsd.js';
+import { useT } from './createStudioI18n-CgvlmDkN.js';
+import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTION_PREFIX-DmBqMZ-z.js';
+import { c as CLOUDFLARE_DURABLE_OBJECTS_URL } from './cf-links-BZfRdxSE.js';
+import { g as formatBytes, f as fireAndForget, c as callOptions, e as errorMessage, a as adminRef } from './internal-BBZYexre.js';
+import { l as loadRecentShards, r as recordShard } from './shard-history-DyebH1R5.js';
+import { u as useLiveShardSeed } from './use-live-shard-seed-B74RYcOy.js';
+import { aggregateMetrics, computeLatencyPercentiles, enrichQueryStats, shardsToAggregate } from './aggregateMetrics-D4nUHEKU.js';
+import { B as Badge } from './badge-B2PKA1-5.js';
+import { Select as Select$1 } from '@base-ui/react/select';
+import { c as cn } from './utils-B05Dmz_H.js';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { UnfoldMoreIcon, Tick02Icon, ArrowUp01Icon, ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
+import { S as Sparkline } from './sparkline-10dG-_f0.js';
+
+const Select = Select$1.Root;
+function SelectValue(t0) {
+  const $ = c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("flex flex-1 text-start", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /* @__PURE__ */ jsxDEV(Select$1.Value, {
+      "data-slot": "select-value",
+      className: t1,
+      ...props
+    }, void 0, false);
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(Select$1.Trigger, {
+    "data-slot": "select-trigger",
+    "data-size": size,
+    className: cn("flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pe-2 ps-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-md *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    ...props,
+    children: [children, /* @__PURE__ */ jsxDEV(Select$1.Icon, {
+      render: /* @__PURE__ */ jsxDEV(HugeiconsIcon, {
+        icon: UnfoldMoreIcon,
+        strokeWidth: 2,
+        className: "pointer-events-none size-4 text-muted-foreground"
+      }, void 0, false)
+    }, void 0, false)]
+  }, void 0, true);
+}
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(Select$1.Portal, {
+    children: /* @__PURE__ */ jsxDEV(Select$1.Positioner, {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      alignItemWithTrigger,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxDEV(Select$1.Popup, {
+        "data-slot": "select-content",
+        "data-align-trigger": alignItemWithTrigger,
+        className: cn("isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!", className),
+        ...props,
+        children: [/* @__PURE__ */ jsxDEV(SelectScrollUpButton, {}, void 0, false), /* @__PURE__ */ jsxDEV(Select$1.List, {
+          children
+        }, void 0, false), /* @__PURE__ */ jsxDEV(SelectScrollDownButton, {}, void 0, false)]
+      }, void 0, true)
+    }, void 0, false)
+  }, void 0, false);
+}
+function SelectItem(t0) {
+  const $ = c(13);
+  let children;
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+  }
+  let t1;
+  if ($[4] !== className) {
+    t1 = cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-2 pe-8 ps-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== children) {
+    t2 = /* @__PURE__ */ jsxDEV(Select$1.ItemText, {
+      className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
+      children
+    }, void 0, false);
+    $[6] = children;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /* @__PURE__ */ jsxDEV(Select$1.ItemIndicator, {
+      render: /* @__PURE__ */ jsxDEV("span", {
+        className: "pointer-events-none absolute end-2 flex size-4 items-center justify-center"
+      }, void 0, false),
+      children: /* @__PURE__ */ jsxDEV(HugeiconsIcon, {
+        icon: Tick02Icon,
+        strokeWidth: 2,
+        className: "pointer-events-none"
+      }, void 0, false)
+    }, void 0, false);
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
+    t4 = /* @__PURE__ */ jsxDEV(Select$1.Item, {
+      "data-slot": "select-item",
+      className: t1,
+      ...props,
+      children: [t2, t3]
+    }, void 0, true);
+    $[9] = props;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
+}
+function SelectScrollUpButton(t0) {
+  const $ = c(9);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /* @__PURE__ */ jsxDEV(HugeiconsIcon, {
+      icon: ArrowUp01Icon,
+      strokeWidth: 2
+    }, void 0, false);
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== props || $[7] !== t1) {
+    t3 = /* @__PURE__ */ jsxDEV(Select$1.ScrollUpArrow, {
+      "data-slot": "select-scroll-up-button",
+      className: t1,
+      ...props,
+      children: t2
+    }, void 0, false);
+    $[6] = props;
+    $[7] = t1;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
+}
+function SelectScrollDownButton(t0) {
+  const $ = c(9);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /* @__PURE__ */ jsxDEV(HugeiconsIcon, {
+      icon: ArrowDown01Icon,
+      strokeWidth: 2
+    }, void 0, false);
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== props || $[7] !== t1) {
+    t3 = /* @__PURE__ */ jsxDEV(Select$1.ScrollDownArrow, {
+      "data-slot": "select-scroll-down-button",
+      className: t1,
+      ...props,
+      children: t2
+    }, void 0, false);
+    $[6] = props;
+    $[7] = t1;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
+}
+
+const performanceLevel = (avgMs) => {
+  if (avgMs >= 100) {
+    return "critical";
+  }
+  if (avgMs >= 50) {
+    return "warning";
+  }
+  return "good";
+};
+const formatLatency = (ms) => {
+  if (ms < 1) {
+    return `${(ms * 1e3).toFixed(0)}μs`;
+  }
+  if (ms < 1e3) {
+    return `${ms.toFixed(1)}ms`;
+  }
+  return `${(ms / 1e3).toFixed(2)}s`;
+};
+const formatCount = (n) => {
+  if (n >= 1e9) {
+    return `${(n / 1e9).toFixed(1)}B`;
+  }
+  if (n >= 1e6) {
+    return `${(n / 1e6).toFixed(1)}M`;
+  }
+  if (n >= 1e3) {
+    return `${(n / 1e3).toFixed(1)}K`;
+  }
+  return n.toLocaleString();
+};
+const PerformanceBadge = (t0) => {
+  const $ = c(3);
+  const {
+    level
+  } = t0;
+  if (level === "critical") {
+    let t12;
+    if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t12 = /* @__PURE__ */ jsxDEV(Badge, {
+        variant: "destructive",
+        children: "Slow"
+      }, void 0, false);
+      $[0] = t12;
+    } else {
+      t12 = $[0];
+    }
+    return t12;
+  }
+  if (level === "warning") {
+    let t12;
+    if ($[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t12 = /* @__PURE__ */ jsxDEV("span", {
+        className: "inline-flex items-center gap-1 rounded-md border border-transparent bg-warning/10 px-2 py-0.5 text-xs font-medium text-warning",
+        children: "Moderate"
+      }, void 0, false);
+      $[1] = t12;
+    } else {
+      t12 = $[1];
+    }
+    return t12;
+  }
+  let t1;
+  if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /* @__PURE__ */ jsxDEV("span", {
+      className: "inline-flex items-center gap-1 rounded-md border border-transparent bg-success/10 px-2 py-0.5 text-xs font-medium text-success",
+      children: "Fast"
+    }, void 0, false);
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+};
+const QueryInsights = (t0) => {
+  const $ = c(152);
+  const {
+    queryStats
+  } = t0;
+  const t = useT();
+  const [sortField, setSortField] = useState("totalTime");
+  let t1;
+  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /* @__PURE__ */ new Set();
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const [expanded, setExpanded] = useState(t1);
+  let t2;
+  if ($[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = (value) => {
+      if (value !== null) {
+        setSortField(value);
+      }
+    };
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const handleSortChange = t2;
+  let copy;
+  if ($[2] !== queryStats || $[3] !== sortField) {
+    copy = [...queryStats];
+    let t310;
+    if ($[5] !== sortField) {
+      t310 = (a, b) => {
+        switch (sortField) {
+          case "avgTime": {
+            return b.avgDurationMs - a.avgDurationMs;
+          }
+          case "execCount": {
+            return b.execCount - a.execCount;
+          }
+          case "rowsRead": {
+            return b.rowsRead - a.rowsRead;
+          }
+          default: {
+            return b.totalDurationMs - a.totalDurationMs;
+          }
+        }
+      };
+      $[5] = sortField;
+      $[6] = t310;
+    } else {
+      t310 = $[6];
+    }
+    copy.sort(t310);
+    $[2] = queryStats;
+    $[3] = sortField;
+    $[4] = copy;
+  } else {
+    copy = $[4];
+  }
+  const sorted = copy;
+  let t3;
+  if ($[7] !== queryStats) {
+    t3 = queryStats.filter(_temp);
+    $[7] = queryStats;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  const critical = t3.length;
+  let t4;
+  if ($[9] !== queryStats) {
+    t4 = queryStats.filter(_temp2);
+    $[9] = queryStats;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  const moderate = t4.length;
+  let t5;
+  if ($[11] !== queryStats) {
+    t5 = queryStats.filter(_temp3);
+    $[11] = queryStats;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  const fast = t5.length;
+  let t6;
+  if ($[13] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t6 = (key) => {
+      setExpanded((previous) => {
+        const next = new Set(previous);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.add(key);
+        }
+        return next;
+      });
+    };
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  const toggleExpand = t6;
+  if (queryStats.length === 0) {
+    let t72;
+    if ($[14] !== t) {
+      t72 = t("No query insights yet");
+      $[14] = t;
+      $[15] = t72;
+    } else {
+      t72 = $[15];
+    }
+    let t82;
+    if ($[16] !== t72) {
+      t82 = /* @__PURE__ */ jsxDEV("p", {
+        className: "text-lg font-medium",
+        "data-testid": "qi-empty",
+        children: t72
+      }, void 0, false);
+      $[16] = t72;
+      $[17] = t82;
+    } else {
+      t82 = $[17];
+    }
+    let t92;
+    if ($[18] !== t) {
+      t92 = t("Query insights appear once statements are executed against this shard.");
+      $[18] = t;
+      $[19] = t92;
+    } else {
+      t92 = $[19];
+    }
+    let t102;
+    if ($[20] !== t92) {
+      t102 = /* @__PURE__ */ jsxDEV("p", {
+        className: "mt-1 text-sm",
+        children: t92
+      }, void 0, false);
+      $[20] = t92;
+      $[21] = t102;
+    } else {
+      t102 = $[21];
+    }
+    let t112;
+    if ($[22] !== t102 || $[23] !== t82) {
+      t112 = /* @__PURE__ */ jsxDEV(Card, {
+        children: /* @__PURE__ */ jsxDEV(CardContent, {
+          className: "py-12",
+          children: /* @__PURE__ */ jsxDEV("div", {
+            className: "text-center text-muted-foreground",
+            children: [t82, t102]
+          }, void 0, true)
+        }, void 0, false)
+      }, void 0, false);
+      $[22] = t102;
+      $[23] = t82;
+      $[24] = t112;
+    } else {
+      t112 = $[24];
+    }
+    return t112;
+  }
+  let t7;
+  if ($[25] !== t) {
+    t7 = t("Critical queries");
+    $[25] = t;
+    $[26] = t7;
+  } else {
+    t7 = $[26];
+  }
+  let t8;
+  if ($[27] !== t7) {
+    t8 = /* @__PURE__ */ jsxDEV(CardHeader, {
+      className: "pb-2",
+      children: /* @__PURE__ */ jsxDEV(CardTitle, {
+        className: "text-sm font-medium",
+        children: t7
+      }, void 0, false)
+    }, void 0, false);
+    $[27] = t7;
+    $[28] = t8;
+  } else {
+    t8 = $[28];
+  }
+  let t9;
+  if ($[29] !== critical) {
+    t9 = /* @__PURE__ */ jsxDEV("div", {
+      className: "text-2xl font-bold text-destructive",
+      "data-testid": "qi-critical",
+      children: critical
+    }, void 0, false);
+    $[29] = critical;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  let t10;
+  if ($[31] !== t) {
+    t10 = t(">100ms avg execution");
+    $[31] = t;
+    $[32] = t10;
+  } else {
+    t10 = $[32];
+  }
+  let t11;
+  if ($[33] !== t10) {
+    t11 = /* @__PURE__ */ jsxDEV("p", {
+      className: "text-xs text-muted-foreground",
+      children: t10
+    }, void 0, false);
+    $[33] = t10;
+    $[34] = t11;
+  } else {
+    t11 = $[34];
+  }
+  let t12;
+  if ($[35] !== t11 || $[36] !== t9) {
+    t12 = /* @__PURE__ */ jsxDEV(CardContent, {
+      children: [t9, t11]
+    }, void 0, true);
+    $[35] = t11;
+    $[36] = t9;
+    $[37] = t12;
+  } else {
+    t12 = $[37];
+  }
+  let t13;
+  if ($[38] !== t12 || $[39] !== t8) {
+    t13 = /* @__PURE__ */ jsxDEV(Card, {
+      children: [t8, t12]
+    }, void 0, true);
+    $[38] = t12;
+    $[39] = t8;
+    $[40] = t13;
+  } else {
+    t13 = $[40];
+  }
+  let t14;
+  if ($[41] !== t) {
+    t14 = t("Moderate queries");
+    $[41] = t;
+    $[42] = t14;
+  } else {
+    t14 = $[42];
+  }
+  let t15;
+  if ($[43] !== t14) {
+    t15 = /* @__PURE__ */ jsxDEV(CardHeader, {
+      className: "pb-2",
+      children: /* @__PURE__ */ jsxDEV(CardTitle, {
+        className: "text-sm font-medium",
+        children: t14
+      }, void 0, false)
+    }, void 0, false);
+    $[43] = t14;
+    $[44] = t15;
+  } else {
+    t15 = $[44];
+  }
+  let t16;
+  if ($[45] !== moderate) {
+    t16 = /* @__PURE__ */ jsxDEV("div", {
+      className: "text-2xl font-bold text-warning",
+      "data-testid": "qi-moderate",
+      children: moderate
+    }, void 0, false);
+    $[45] = moderate;
+    $[46] = t16;
+  } else {
+    t16 = $[46];
+  }
+  let t17;
+  if ($[47] !== t) {
+    t17 = t("50–100ms avg execution");
+    $[47] = t;
+    $[48] = t17;
+  } else {
+    t17 = $[48];
+  }
+  let t18;
+  if ($[49] !== t17) {
+    t18 = /* @__PURE__ */ jsxDEV("p", {
+      className: "text-xs text-muted-foreground",
+      children: t17
+    }, void 0, false);
+    $[49] = t17;
+    $[50] = t18;
+  } else {
+    t18 = $[50];
+  }
+  let t19;
+  if ($[51] !== t16 || $[52] !== t18) {
+    t19 = /* @__PURE__ */ jsxDEV(CardContent, {
+      children: [t16, t18]
+    }, void 0, true);
+    $[51] = t16;
+    $[52] = t18;
+    $[53] = t19;
+  } else {
+    t19 = $[53];
+  }
+  let t20;
+  if ($[54] !== t15 || $[55] !== t19) {
+    t20 = /* @__PURE__ */ jsxDEV(Card, {
+      children: [t15, t19]
+    }, void 0, true);
+    $[54] = t15;
+    $[55] = t19;
+    $[56] = t20;
+  } else {
+    t20 = $[56];
+  }
+  let t21;
+  if ($[57] !== t) {
+    t21 = t("Fast queries");
+    $[57] = t;
+    $[58] = t21;
+  } else {
+    t21 = $[58];
+  }
+  let t22;
+  if ($[59] !== t21) {
+    t22 = /* @__PURE__ */ jsxDEV(CardHeader, {
+      className: "pb-2",
+      children: /* @__PURE__ */ jsxDEV(CardTitle, {
+        className: "text-sm font-medium",
+        children: t21
+      }, void 0, false)
+    }, void 0, false);
+    $[59] = t21;
+    $[60] = t22;
+  } else {
+    t22 = $[60];
+  }
+  let t23;
+  if ($[61] !== fast) {
+    t23 = /* @__PURE__ */ jsxDEV("div", {
+      className: "text-2xl font-bold text-success",
+      "data-testid": "qi-fast",
+      children: fast
+    }, void 0, false);
+    $[61] = fast;
+    $[62] = t23;
+  } else {
+    t23 = $[62];
+  }
+  let t24;
+  if ($[63] !== t) {
+    t24 = t("<50ms avg execution");
+    $[63] = t;
+    $[64] = t24;
+  } else {
+    t24 = $[64];
+  }
+  let t25;
+  if ($[65] !== t24) {
+    t25 = /* @__PURE__ */ jsxDEV("p", {
+      className: "text-xs text-muted-foreground",
+      children: t24
+    }, void 0, false);
+    $[65] = t24;
+    $[66] = t25;
+  } else {
+    t25 = $[66];
+  }
+  let t26;
+  if ($[67] !== t23 || $[68] !== t25) {
+    t26 = /* @__PURE__ */ jsxDEV(CardContent, {
+      children: [t23, t25]
+    }, void 0, true);
+    $[67] = t23;
+    $[68] = t25;
+    $[69] = t26;
+  } else {
+    t26 = $[69];
+  }
+  let t27;
+  if ($[70] !== t22 || $[71] !== t26) {
+    t27 = /* @__PURE__ */ jsxDEV(Card, {
+      children: [t22, t26]
+    }, void 0, true);
+    $[70] = t22;
+    $[71] = t26;
+    $[72] = t27;
+  } else {
+    t27 = $[72];
+  }
+  let t28;
+  if ($[73] !== t13 || $[74] !== t20 || $[75] !== t27) {
+    t28 = /* @__PURE__ */ jsxDEV("div", {
+      className: "grid gap-4 md:grid-cols-3",
+      children: [t13, t20, t27]
+    }, void 0, true);
+    $[73] = t13;
+    $[74] = t20;
+    $[75] = t27;
+    $[76] = t28;
+  } else {
+    t28 = $[76];
+  }
+  let t29;
+  if ($[77] !== t) {
+    t29 = t("Query leaderboard");
+    $[77] = t;
+    $[78] = t29;
+  } else {
+    t29 = $[78];
+  }
+  let t30;
+  if ($[79] !== t29) {
+    t30 = /* @__PURE__ */ jsxDEV("h3", {
+      className: "text-lg font-semibold",
+      children: t29
+    }, void 0, false);
+    $[79] = t29;
+    $[80] = t30;
+  } else {
+    t30 = $[80];
+  }
+  let t31;
+  if ($[81] !== sortField || $[82] !== t) {
+    t31 = t("Slow queries sorted by {sortField}", {
+      sortField: t(sortField)
+    });
+    $[81] = sortField;
+    $[82] = t;
+    $[83] = t31;
+  } else {
+    t31 = $[83];
+  }
+  let t32;
+  if ($[84] !== t31) {
+    t32 = /* @__PURE__ */ jsxDEV("p", {
+      className: "text-sm text-muted-foreground",
+      children: t31
+    }, void 0, false);
+    $[84] = t31;
+    $[85] = t32;
+  } else {
+    t32 = $[85];
+  }
+  let t33;
+  if ($[86] !== t30 || $[87] !== t32) {
+    t33 = /* @__PURE__ */ jsxDEV("div", {
+      children: [t30, t32]
+    }, void 0, true);
+    $[86] = t30;
+    $[87] = t32;
+    $[88] = t33;
+  } else {
+    t33 = $[88];
+  }
+  let t34;
+  if ($[89] !== t) {
+    t34 = t("Sort by");
+    $[89] = t;
+    $[90] = t34;
+  } else {
+    t34 = $[90];
+  }
+  let t35;
+  if ($[91] !== t34) {
+    t35 = /* @__PURE__ */ jsxDEV("span", {
+      className: "text-sm text-muted-foreground",
+      children: t34
+    }, void 0, false);
+    $[91] = t34;
+    $[92] = t35;
+  } else {
+    t35 = $[92];
+  }
+  let t36;
+  if ($[93] !== t) {
+    t36 = t("Sort queries by");
+    $[93] = t;
+    $[94] = t36;
+  } else {
+    t36 = $[94];
+  }
+  let t37;
+  if ($[95] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t37 = /* @__PURE__ */ jsxDEV(SelectValue, {}, void 0, false);
+    $[95] = t37;
+  } else {
+    t37 = $[95];
+  }
+  let t38;
+  if ($[96] !== t36) {
+    t38 = /* @__PURE__ */ jsxDEV(SelectTrigger, {
+      "aria-label": t36,
+      className: "w-[140px]",
+      "data-testid": "qi-sort",
+      children: t37
+    }, void 0, false);
+    $[96] = t36;
+    $[97] = t38;
+  } else {
+    t38 = $[97];
+  }
+  let t39;
+  if ($[98] !== t) {
+    t39 = t("Total time");
+    $[98] = t;
+    $[99] = t39;
+  } else {
+    t39 = $[99];
+  }
+  let t40;
+  if ($[100] !== t39) {
+    t40 = /* @__PURE__ */ jsxDEV(SelectItem, {
+      value: "totalTime",
+      children: t39
+    }, void 0, false);
+    $[100] = t39;
+    $[101] = t40;
+  } else {
+    t40 = $[101];
+  }
+  let t41;
+  if ($[102] !== t) {
+    t41 = t("Avg time");
+    $[102] = t;
+    $[103] = t41;
+  } else {
+    t41 = $[103];
+  }
+  let t42;
+  if ($[104] !== t41) {
+    t42 = /* @__PURE__ */ jsxDEV(SelectItem, {
+      value: "avgTime",
+      children: t41
+    }, void 0, false);
+    $[104] = t41;
+    $[105] = t42;
+  } else {
+    t42 = $[105];
+  }
+  let t43;
+  if ($[106] !== t) {
+    t43 = t("Execution count");
+    $[106] = t;
+    $[107] = t43;
+  } else {
+    t43 = $[107];
+  }
+  let t44;
+  if ($[108] !== t43) {
+    t44 = /* @__PURE__ */ jsxDEV(SelectItem, {
+      value: "execCount",
+      children: t43
+    }, void 0, false);
+    $[108] = t43;
+    $[109] = t44;
+  } else {
+    t44 = $[109];
+  }
+  let t45;
+  if ($[110] !== t) {
+    t45 = t("Rows read");
+    $[110] = t;
+    $[111] = t45;
+  } else {
+    t45 = $[111];
+  }
+  let t46;
+  if ($[112] !== t45) {
+    t46 = /* @__PURE__ */ jsxDEV(SelectItem, {
+      value: "rowsRead",
+      children: t45
+    }, void 0, false);
+    $[112] = t45;
+    $[113] = t46;
+  } else {
+    t46 = $[113];
+  }
+  let t47;
+  if ($[114] !== t40 || $[115] !== t42 || $[116] !== t44 || $[117] !== t46) {
+    t47 = /* @__PURE__ */ jsxDEV(SelectContent, {
+      children: [t40, t42, t44, t46]
+    }, void 0, true);
+    $[114] = t40;
+    $[115] = t42;
+    $[116] = t44;
+    $[117] = t46;
+    $[118] = t47;
+  } else {
+    t47 = $[118];
+  }
+  let t48;
+  if ($[119] !== sortField || $[120] !== t38 || $[121] !== t47) {
+    t48 = /* @__PURE__ */ jsxDEV(Select, {
+      onValueChange: handleSortChange,
+      value: sortField,
+      children: [t38, t47]
+    }, void 0, true);
+    $[119] = sortField;
+    $[120] = t38;
+    $[121] = t47;
+    $[122] = t48;
+  } else {
+    t48 = $[122];
+  }
+  let t49;
+  if ($[123] !== t35 || $[124] !== t48) {
+    t49 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex items-center gap-2",
+      children: [t35, t48]
+    }, void 0, true);
+    $[123] = t35;
+    $[124] = t48;
+    $[125] = t49;
+  } else {
+    t49 = $[125];
+  }
+  let t50;
+  if ($[126] !== t33 || $[127] !== t49) {
+    t50 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex items-center justify-between",
+      children: [t33, t49]
+    }, void 0, true);
+    $[126] = t33;
+    $[127] = t49;
+    $[128] = t50;
+  } else {
+    t50 = $[128];
+  }
+  let t51;
+  if ($[129] !== t) {
+    t51 = t("Statements");
+    $[129] = t;
+    $[130] = t51;
+  } else {
+    t51 = $[130];
+  }
+  let t52;
+  if ($[131] !== t51) {
+    t52 = /* @__PURE__ */ jsxDEV(CardTitle, {
+      children: t51
+    }, void 0, false);
+    $[131] = t51;
+    $[132] = t52;
+  } else {
+    t52 = $[132];
+  }
+  let t53;
+  if ($[133] !== sorted.length || $[134] !== t) {
+    t53 = t("{count} tracked statements", {
+      count: sorted.length
+    });
+    $[133] = sorted.length;
+    $[134] = t;
+    $[135] = t53;
+  } else {
+    t53 = $[135];
+  }
+  let t54;
+  if ($[136] !== t53) {
+    t54 = /* @__PURE__ */ jsxDEV(CardDescription, {
+      children: t53
+    }, void 0, false);
+    $[136] = t53;
+    $[137] = t54;
+  } else {
+    t54 = $[137];
+  }
+  let t55;
+  if ($[138] !== t52 || $[139] !== t54) {
+    t55 = /* @__PURE__ */ jsxDEV(CardHeader, {
+      children: [t52, t54]
+    }, void 0, true);
+    $[138] = t52;
+    $[139] = t54;
+    $[140] = t55;
+  } else {
+    t55 = $[140];
+  }
+  let t56;
+  if ($[141] !== expanded || $[142] !== sorted || $[143] !== t) {
+    t56 = /* @__PURE__ */ jsxDEV(CardContent, {
+      children: /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-2",
+        children: sorted.map((stat) => {
+          const key_0 = stat.normalizedSql;
+          const isExpanded = expanded.has(key_0);
+          const level = performanceLevel(stat.avgDurationMs);
+          return /* @__PURE__ */ jsxDEV("div", {
+            className: "overflow-hidden rounded-lg border",
+            "data-testid": "qi-row",
+            children: [/* @__PURE__ */ jsxDEV("button", {
+              "aria-expanded": isExpanded,
+              className: "flex w-full items-center justify-between p-3 text-left transition-colors hover:bg-muted/50",
+              onClick: () => {
+                toggleExpand(key_0);
+              },
+              type: "button",
+              children: [/* @__PURE__ */ jsxDEV("div", {
+                className: "flex min-w-0 flex-1 items-center gap-3",
+                children: [/* @__PURE__ */ jsxDEV(PerformanceBadge, {
+                  level
+                }, void 0, false), /* @__PURE__ */ jsxDEV("span", {
+                  className: "max-w-[300px] truncate font-mono text-sm lg:max-w-[500px]",
+                  children: stat.normalizedSql
+                }, void 0, false)]
+              }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+                className: "flex shrink-0 items-center gap-4",
+                children: [/* @__PURE__ */ jsxDEV("div", {
+                  className: "text-right",
+                  children: [/* @__PURE__ */ jsxDEV("div", {
+                    className: "text-sm font-medium",
+                    children: formatLatency(stat.totalDurationMs)
+                  }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+                    className: "text-xs text-muted-foreground",
+                    children: t("total")
+                  }, void 0, false)]
+                }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+                  className: "text-right",
+                  children: [/* @__PURE__ */ jsxDEV("div", {
+                    className: "text-sm font-medium",
+                    children: formatLatency(stat.avgDurationMs)
+                  }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+                    className: "text-xs text-muted-foreground",
+                    children: t("avg")
+                  }, void 0, false)]
+                }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+                  className: "text-right",
+                  children: [/* @__PURE__ */ jsxDEV("div", {
+                    className: "text-sm font-medium",
+                    children: formatCount(stat.execCount)
+                  }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+                    className: "text-xs text-muted-foreground",
+                    children: t("calls")
+                  }, void 0, false)]
+                }, void 0, true)]
+              }, void 0, true)]
+            }, void 0, true), isExpanded && /* @__PURE__ */ jsxDEV("div", {
+              className: "space-y-3 border-t bg-muted/30 p-4",
+              children: [/* @__PURE__ */ jsxDEV("div", {
+                children: [/* @__PURE__ */ jsxDEV("p", {
+                  className: "mb-2 text-sm font-medium",
+                  children: t("Full statement")
+                }, void 0, false), /* @__PURE__ */ jsxDEV("pre", {
+                  className: "overflow-x-auto rounded-md bg-muted p-3 font-mono text-sm whitespace-pre-wrap break-all",
+                  children: stat.normalizedSql
+                }, void 0, false)]
+              }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+                className: "grid grid-cols-2 gap-4 text-sm md:grid-cols-4",
+                children: [/* @__PURE__ */ jsxDEV("div", {
+                  children: [/* @__PURE__ */ jsxDEV("span", {
+                    className: "text-muted-foreground",
+                    children: t("Exec count")
+                  }, void 0, false), /* @__PURE__ */ jsxDEV("span", {
+                    className: "block font-medium tabular-nums",
+                    children: formatCount(stat.execCount)
+                  }, void 0, false)]
+                }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+                  children: [/* @__PURE__ */ jsxDEV("span", {
+                    className: "text-muted-foreground",
+                    children: t("Total time")
+                  }, void 0, false), /* @__PURE__ */ jsxDEV("span", {
+                    className: "block font-medium tabular-nums",
+                    children: formatLatency(stat.totalDurationMs)
+                  }, void 0, false)]
+                }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+                  children: [/* @__PURE__ */ jsxDEV("span", {
+                    className: "text-muted-foreground",
+                    children: t("Rows read")
+                  }, void 0, false), /* @__PURE__ */ jsxDEV("span", {
+                    className: "block font-medium tabular-nums",
+                    children: formatCount(stat.rowsRead)
+                  }, void 0, false)]
+                }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+                  children: [/* @__PURE__ */ jsxDEV("span", {
+                    className: "text-muted-foreground",
+                    children: t("Rows written")
+                  }, void 0, false), /* @__PURE__ */ jsxDEV("span", {
+                    className: "block font-medium tabular-nums",
+                    children: formatCount(stat.rowsWritten)
+                  }, void 0, false)]
+                }, void 0, true)]
+              }, void 0, true)]
+            }, void 0, true)]
+          }, key_0, true);
+        })
+      }, void 0, false)
+    }, void 0, false);
+    $[141] = expanded;
+    $[142] = sorted;
+    $[143] = t;
+    $[144] = t56;
+  } else {
+    t56 = $[144];
+  }
+  let t57;
+  if ($[145] !== t55 || $[146] !== t56) {
+    t57 = /* @__PURE__ */ jsxDEV(Card, {
+      children: [t55, t56]
+    }, void 0, true);
+    $[145] = t55;
+    $[146] = t56;
+    $[147] = t57;
+  } else {
+    t57 = $[147];
+  }
+  let t58;
+  if ($[148] !== t28 || $[149] !== t50 || $[150] !== t57) {
+    t58 = /* @__PURE__ */ jsxDEV("div", {
+      className: "space-y-4",
+      "data-testid": "qi-root",
+      children: [t28, t50, t57]
+    }, void 0, true);
+    $[148] = t28;
+    $[149] = t50;
+    $[150] = t57;
+    $[151] = t58;
+  } else {
+    t58 = $[151];
+  }
+  return t58;
+};
+function _temp(q) {
+  return performanceLevel(q.avgDurationMs) === "critical";
+}
+function _temp2(q_0) {
+  return performanceLevel(q_0.avgDurationMs) === "warning";
+}
+function _temp3(q_1) {
+  return performanceLevel(q_1.avgDurationMs) === "good";
+}
+
+const GET_METRICS = adminRef(ADMIN_FUNCTIONS.getMetrics);
+const formatDuration = (ms) => {
+  const totalSeconds = Math.floor(ms / 1e3);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  if (hours > 0) {
+    return `${hours.toString()}h ${minutes.toString()}m`;
+  }
+  if (minutes > 0) {
+    return `${minutes.toString()}m ${seconds.toString()}s`;
+  }
+  return `${seconds.toString()}s`;
+};
+const hitRate = (hits, misses) => {
+  const total = hits + misses;
+  return total === 0 ? "—" : `${(hits / total * 100).toFixed(1)}%`;
+};
+const StatCard = (t0) => {
+  const $ = c(16);
+  const {
+    chart,
+    footer,
+    label,
+    testId,
+    value
+  } = t0;
+  let t1;
+  if ($[0] !== label) {
+    t1 = /* @__PURE__ */ jsxDEV("span", {
+      className: "font-mono text-[11px] tracking-wide text-muted-foreground uppercase",
+      children: label
+    }, void 0, false);
+    $[0] = label;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== testId || $[3] !== value) {
+    t2 = /* @__PURE__ */ jsxDEV("span", {
+      className: "truncate text-2xl font-semibold tabular-nums text-foreground",
+      "data-testid": testId,
+      children: value
+    }, void 0, false);
+    $[2] = testId;
+    $[3] = value;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== chart || $[6] !== t2) {
+    t3 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex items-center justify-between gap-3",
+      children: [t2, chart]
+    }, void 0, true);
+    $[5] = chart;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== t1 || $[9] !== t3) {
+    t4 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-col gap-2.5 p-4",
+      children: [t1, t3]
+    }, void 0, true);
+    $[8] = t1;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== footer) {
+    t5 = footer != null && /* @__PURE__ */ jsxDEV("div", {
+      className: "border-t border-border bg-muted/50 px-4 py-2.5 text-[11px] text-muted-foreground",
+      children: footer
+    }, void 0, false);
+    $[11] = footer;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== t4 || $[14] !== t5) {
+    t6 = /* @__PURE__ */ jsxDEV(Card, {
+      className: "justify-between gap-0 py-0",
+      children: [t4, t5]
+    }, void 0, true);
+    $[13] = t4;
+    $[14] = t5;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  return t6;
+};
+const MetricsPanel = ({
+  initialShardKey
+}) => {
+  const client = useLunora();
+  const t = useT();
+  const [shardKey, setShardKey] = useState(initialShardKey ?? "");
+  const [metrics, setMetrics] = useState(null);
+  const [error, setError] = useState(null);
+  const [activeTab, setActiveTab] = useState("overview");
+  const [liveError, setLiveError] = useState(void 0);
+  const [history, setHistory] = useState([]);
+  const mountedRef = useRef(true);
+  const lastRequestsRef = useRef(null);
+  const lastShardRef = useRef(null);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const applySample = (next) => {
+    setError(null);
+    setLiveError(void 0);
+    setMetrics(next);
+    const previous = lastRequestsRef.current;
+    const shardChanged = lastShardRef.current !== null && lastShardRef.current !== next.shard;
+    lastShardRef.current = next.shard;
+    lastRequestsRef.current = next.requests;
+    if (shardChanged) {
+      setHistory([]);
+      return;
+    }
+    if (previous !== null && next.requests >= previous) {
+      setHistory((prior) => [...prior, next.requests - previous].slice(-30));
+    }
+  };
+  const refresh = async (shard) => {
+    try {
+      const next_0 = await client.query(GET_METRICS, {}, callOptions(shard));
+      recordShard(shard);
+      if (mountedRef.current) {
+        applySample(next_0);
+      }
+    } catch (error_) {
+      if (mountedRef.current) {
+        setMetrics(null);
+        setError(errorMessage(error_));
+      }
+      throw error_;
+    }
+  };
+  const committedShard = useLiveShardSeed(shardKey, refresh);
+  useLiveAdmin(ADMIN_FUNCTIONS.getMetrics, {}, committedShard ?? "", (next_1) => {
+    if (mountedRef.current) {
+      applySample(next_1);
+    }
+  }, committedShard !== void 0, (message) => {
+    if (mountedRef.current) {
+      setLiveError(message);
+    }
+  });
+  const [shardResults, setShardResults] = useState(null);
+  const [aggregating, setAggregating] = useState(false);
+  const aggregateAll = async () => {
+    setAggregating(true);
+    const shards = shardsToAggregate(shardKey, loadRecentShards());
+    try {
+      const results = await Promise.all(shards.map(async (shard) => {
+        try {
+          const snapshot = await client.query(GET_METRICS, {}, callOptions(shard));
+          return {
+            error: null,
+            metrics: snapshot,
+            shard: shard === "" ? snapshot.shard : shard
+          };
+        } catch (error_) {
+          return {
+            error: errorMessage(error_),
+            metrics: null,
+            shard: shard === "" ? "__root__" : shard
+          };
+        }
+      }));
+      if (mountedRef.current) {
+        setShardResults(results);
+      }
+    } finally {
+      if (mountedRef.current) {
+        setAggregating(false);
+      }
+    }
+  };
+  const aggregate = shardResults === null ? null : aggregateMetrics(shardResults);
+  const errorRate = metrics === null || metrics.requests === 0 ? "—" : `${(metrics.errors / metrics.requests * 100).toFixed(1)}%`;
+  const currentDelta = history.length > 0 ? history.at(-1) : 0;
+  const latencyPercentiles = metrics ? computeLatencyPercentiles(metrics) : {
+    p90: 0,
+    p95: 0
+  };
+  const formatMs = (ms) => {
+    if (ms <= 0) {
+      return "—";
+    }
+    if (ms < 1) {
+      return `${(ms * 1e3).toFixed(0)}μs`;
+    }
+    if (ms < 1e3) {
+      return `${ms.toFixed(1)}ms`;
+    }
+    return `${(ms / 1e3).toFixed(2)}s`;
+  };
+  const queryStats = useMemo(() => {
+    if (!metrics || !("queryStats" in metrics)) {
+      return void 0;
+    }
+    const snapQs = metrics.queryStats;
+    if (!snapQs || !Array.isArray(snapQs)) {
+      return void 0;
+    }
+    return enrichQueryStats(snapQs);
+  }, [metrics]);
+  const runAggregate = () => {
+    fireAndForget(aggregateAll());
+  };
+  const clearAggregate = () => {
+    setShardResults(null);
+  };
+  const switchToOverview = () => {
+    setActiveTab("overview");
+  };
+  const switchToQueryInsights = () => {
+    setActiveTab("query-insights");
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex flex-col gap-4",
+    "data-testid": "lunora-metrics",
+    children: [/* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-wrap items-center gap-2",
+      children: [/* @__PURE__ */ jsxDEV(ShardInput, {
+        onChange: setShardKey,
+        testId: "mt-shard-input",
+        value: shardKey
+      }, void 0, false), /* @__PURE__ */ jsxDEV(LiveError, {
+        message: liveError,
+        prefix: "mt"
+      }, void 0, false), /* @__PURE__ */ jsxDEV(Button, {
+        "data-testid": "mt-aggregate",
+        disabled: aggregating,
+        onClick: runAggregate,
+        size: "sm",
+        type: "button",
+        variant: "secondary",
+        children: aggregating ? t("Aggregating…") : t("All shards")
+      }, void 0, false), shardResults !== null && /* @__PURE__ */ jsxDEV(Button, {
+        "data-testid": "mt-aggregate-clear",
+        onClick: clearAggregate,
+        size: "sm",
+        type: "button",
+        variant: "ghost",
+        children: t("Hide")
+      }, void 0, false), /* @__PURE__ */ jsxDEV("a", {
+        className: "text-sm text-primary underline-offset-4 hover:underline",
+        "data-testid": "mt-cf-link",
+        href: CLOUDFLARE_DURABLE_OBJECTS_URL,
+        rel: "noreferrer",
+        target: "_blank",
+        children: t("Open in Cloudflare")
+      }, void 0, false)]
+    }, void 0, true), error !== null && /* @__PURE__ */ jsxDEV("p", {
+      className: "text-sm text-destructive",
+      "data-testid": "mt-error",
+      role: "alert",
+      children: error
+    }, void 0, false), queryStats !== void 0 && /* @__PURE__ */ jsxDEV("div", {
+      className: "flex gap-2 border-b",
+      "data-testid": "mt-tabs",
+      children: [/* @__PURE__ */ jsxDEV("button", {
+        className: `pb-2 text-sm font-medium transition-colors ${activeTab === "overview" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+        "data-testid": "mt-tab-overview",
+        onClick: switchToOverview,
+        type: "button",
+        children: t("Overview")
+      }, void 0, false), /* @__PURE__ */ jsxDEV("button", {
+        className: `pb-2 text-sm font-medium transition-colors ${activeTab === "query-insights" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+        "data-testid": "mt-tab-query-insights",
+        onClick: switchToQueryInsights,
+        type: "button",
+        children: [t("Query insights"), queryStats.length > 0 && /* @__PURE__ */ jsxDEV("span", {
+          className: "ml-1.5 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs text-primary",
+          children: queryStats.length
+        }, void 0, false)]
+      }, void 0, true)]
+    }, void 0, true), activeTab === "query-insights" && queryStats !== void 0 && /* @__PURE__ */ jsxDEV(QueryInsights, {
+      queryStats
+    }, void 0, false), activeTab === "overview" && metrics !== null && /* @__PURE__ */ jsxDEV("dl", {
+      className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+      "data-testid": "mt-stats",
+      children: [/* @__PURE__ */ jsxDEV(StatCard, {
+        chart: history.length >= 2 ? /* @__PURE__ */ jsxDEV(Sparkline, {
+          ariaLabel: t("Requests per interval over time"),
+          className: "h-7 w-24 text-foreground",
+          series: history,
+          testId: "mt-sparkline"
+        }, void 0, false) : void 0,
+        footer: history.length >= 2 ? /* @__PURE__ */ jsxDEV(Fragment, {
+          children: [/* @__PURE__ */ jsxDEV("span", {
+            className: "font-semibold text-foreground",
+            children: `+${currentDelta.toLocaleString()}`
+          }, void 0, false), " ", t("last interval")]
+        }, void 0, true) : /* @__PURE__ */ jsxDEV("span", {
+          "data-testid": "mt-sparkline-empty",
+          children: t("collecting samples…")
+        }, void 0, false),
+        label: t("Requests"),
+        testId: "mt-requests",
+        value: metrics.requests
+      }, void 0, false), /* @__PURE__ */ jsxDEV(StatCard, {
+        footer: t("{rate} error rate", {
+          rate: errorRate
+        }),
+        label: t("Errors"),
+        testId: "mt-errors",
+        value: /* @__PURE__ */ jsxDEV(Fragment, {
+          children: [metrics.errors, " (", errorRate, ")"]
+        }, void 0, true)
+      }, void 0, false), /* @__PURE__ */ jsxDEV(StatCard, {
+        footer: latencyPercentiles.p90 > 0 ? `P90 ${formatMs(latencyPercentiles.p90)}` : void 0,
+        label: t("P95 latency"),
+        testId: "mt-p95",
+        value: latencyPercentiles.p95 > 0 ? formatMs(latencyPercentiles.p95) : "—"
+      }, void 0, false), /* @__PURE__ */ jsxDEV(StatCard, {
+        footer: metrics.cache === null ? void 0 : `${metrics.cache.entries.toLocaleString()} ${t("cache entries")}`,
+        label: t("Database size"),
+        testId: "mt-db-size",
+        value: formatBytes(metrics.databaseSize)
+      }, void 0, false), /* @__PURE__ */ jsxDEV(StatCard, {
+        label: t("Shard"),
+        testId: "mt-shard",
+        value: metrics.shard
+      }, void 0, false), /* @__PURE__ */ jsxDEV(StatCard, {
+        label: t("Uptime"),
+        testId: "mt-uptime",
+        value: formatDuration(metrics.uptimeMs)
+      }, void 0, false), /* @__PURE__ */ jsxDEV(StatCard, {
+        label: t("Cache hit rate"),
+        testId: "mt-cache",
+        value: metrics.cache === null ? t("no cache configured") : t("{rate} ({count} entries)", {
+          count: metrics.cache.entries,
+          rate: hitRate(metrics.cache.hits, metrics.cache.misses)
+        })
+      }, void 0, false)]
+    }, void 0, true), activeTab === "overview" && metrics === null && null, activeTab === "overview" && aggregate !== null && shardResults !== null && /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-col gap-4",
+      "data-testid": "mt-aggregate-view",
+      children: [/* @__PURE__ */ jsxDEV("dl", {
+        className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3",
+        "data-testid": "mt-aggregate-stats",
+        children: [/* @__PURE__ */ jsxDEV(StatCard, {
+          label: t("Shards"),
+          testId: "mt-agg-shards",
+          value: aggregate.failed > 0 ? t("{reachable} reachable, {failed} unreachable", {
+            failed: aggregate.failed,
+            reachable: aggregate.reachable
+          }) : t("{reachable} reachable", {
+            reachable: aggregate.reachable
+          })
+        }, void 0, false), /* @__PURE__ */ jsxDEV(StatCard, {
+          label: t("Total requests"),
+          testId: "mt-agg-requests",
+          value: aggregate.totalRequests
+        }, void 0, false), /* @__PURE__ */ jsxDEV(StatCard, {
+          label: t("Total errors"),
+          testId: "mt-agg-errors",
+          value: aggregate.totalErrors
+        }, void 0, false), /* @__PURE__ */ jsxDEV(StatCard, {
+          label: t("Total database size"),
+          testId: "mt-agg-db-size",
+          value: formatBytes(aggregate.totalDatabaseSize)
+        }, void 0, false), /* @__PURE__ */ jsxDEV(StatCard, {
+          label: t("Combined cache hit rate"),
+          testId: "mt-agg-cache",
+          value: aggregate.hitRate === null ? t("no cache configured") : `${(aggregate.hitRate * 100).toFixed(1)}%`
+        }, void 0, false)]
+      }, void 0, true), /* @__PURE__ */ jsxDEV(Card, {
+        className: "overflow-hidden py-0",
+        children: /* @__PURE__ */ jsxDEV(CardContent, {
+          className: "px-0",
+          children: /* @__PURE__ */ jsxDEV(Table, {
+            "data-testid": "mt-agg-table",
+            children: [/* @__PURE__ */ jsxDEV(TableHeader, {
+              children: /* @__PURE__ */ jsxDEV(TableRow, {
+                children: [/* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("shard")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("requests")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("errors")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("db size")
+                }, void 0, false)]
+              }, void 0, true)
+            }, void 0, false), /* @__PURE__ */ jsxDEV(TableBody, {
+              children: shardResults.map((result) => /* @__PURE__ */ jsxDEV(TableRow, {
+                "data-testid": `mt-agg-row-${result.shard}`,
+                children: [/* @__PURE__ */ jsxDEV(TableCell, {
+                  children: result.shard
+                }, void 0, false), result.metrics === null ? /* @__PURE__ */ jsxDEV(TableCell, {
+                  className: "text-destructive",
+                  colSpan: 3,
+                  children: result.error ?? t("unreachable")
+                }, void 0, false) : /* @__PURE__ */ jsxDEV(Fragment, {
+                  children: [/* @__PURE__ */ jsxDEV(TableCell, {
+                    className: "tabular-nums",
+                    children: result.metrics.requests
+                  }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                    className: "tabular-nums",
+                    children: result.metrics.errors
+                  }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                    className: "tabular-nums",
+                    children: formatBytes(result.metrics.databaseSize)
+                  }, void 0, false)]
+                }, void 0, true)]
+              }, result.shard, true))
+            }, void 0, false)]
+          }, void 0, true)
+        }, void 0, false)
+      }, void 0, false)]
+    }, void 0, true)]
+  }, void 0, true);
+};
+
+export { MetricsPanel };