@lunora/studio 1.0.0-alpha.35 → 1.0.0-alpha.350

package/dist/packem_chunks/MetricsPanel.js

@@ -1,1344 +0,0 @@
-import { c } from 'react/compiler-runtime';
-import { useLunora } from '@lunora/react';
-import { useState, useRef, useEffect, useMemo } from 'react';
-import { L as LiveError } from '../packem_shared/live-status-FZ0psC1z.js';
-import { ShardInput } from '../packem_shared/ShardInput-gx_DZXXn.js';
-import { B as Button } from '../packem_shared/button-BhsN2uZH.js';
-import { a as CardContent, C as Card, b as CardHeader, c as CardTitle, d as CardDescription } from '../packem_shared/card-DURq3ElK.js';
-import { T as Table, a as TableHeader, b as TableRow, c as TableHead, d as TableBody, e as TableCell } from '../packem_shared/table-DsCa9Qp9.js';
-import { u as useAdminQuery } from '../packem_shared/use-admin-query-BHPKmPuj.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-BHHJi3Gb.js';
-import { c as CLOUDFLARE_DURABLE_OBJECTS_URL } from '../packem_shared/cf-links-BZfRdxSE.js';
-import { j as formatBytes, f as fireAndForget, c as callOptions, e as errorMessage, a as adminRef } from '../packem_shared/internal-DTsYVn-g.js';
-import { r as recordShard, l as loadRecentShards } from '../packem_shared/shard-history-DyebH1R5.js';
-import { aggregateMetrics, computeLatencyPercentiles, enrichQueryStats, shardsToAggregate } from '../packem_shared/aggregateMetrics-D4nUHEKU.js';
-import { B as Badge } from '../packem_shared/badge-B2PKA1-5.js';
-import { S as SelectValue, a as SelectTrigger, b as SelectItem, c as SelectContent, d as Select } from '../packem_shared/select-UkNYCT3s.js';
-import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
-import { S as Sparkline } from '../packem_shared/sparkline-BnA1kC9X.js';
-
-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 resolveTab = (hasQueryStats, activeTab) => hasQueryStats ? activeTab : "overview";
-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 [activeTab, setActiveTab] = useState("overview");
-  const [history, setHistory] = useState([]);
-  const lastRequestsRef = useRef(null);
-  const lastShardRef = useRef(null);
-  const mountedRef = useRef(true);
-  useEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-  const debouncedShard = useDebounced(shardKey.trim(), 400);
-  const {
-    data,
-    error,
-    liveError
-  } = useAdminQuery(ADMIN_FUNCTIONS.getMetrics, {}, {
-    live: true,
-    shardKey: debouncedShard
-  });
-  const metrics = data ?? null;
-  useEffect(() => {
-    if (data === void 0) {
-      return;
-    }
-    recordShard(debouncedShard);
-    const next = data;
-    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));
-    }
-  }, [data, debouncedShard]);
-  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 effectiveTab = resolveTab(queryStats !== void 0, activeTab);
-  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 ${effectiveTab === "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 ${effectiveTab === "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), effectiveTab === "query-insights" && queryStats !== void 0 && /* @__PURE__ */ jsxDEV(QueryInsights, {
-      queryStats
-    }, void 0, false), effectiveTab === "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), effectiveTab === "overview" && metrics === null && null, effectiveTab === "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 };