@lunora/studio 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist/packem_shared/{InsightsPanel-DaZPnSgt.js → InsightsPanel-y_Q-xdPY.js}

@@ -1,16 +1,17 @@
 import { c } from 'react/compiler-runtime';
 import { useLunora } from '@lunora/react';
 import { useNavigate } from '@tanstack/react-router';
-import { useState, useEffect, useMemo } from 'react';
-import { ShardInput } from './ShardInput-DNCsT1KW.js';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { ShardInput } from './ShardInput-gx_DZXXn.js';
 import { B as Button } from './button-BhsN2uZH.js';
-import { useT } from './createStudioI18n-CgvlmDkN.js';
-import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTION_PREFIX-DmBqMZ-z.js';
-import { f as fireAndForget, c as callOptions, e as errorMessage, a as adminRef } from './internal-BBZYexre.js';
+import { u as useAdminQuery } from './use-admin-query-BkbdNFNz.js';
+import useDebounced from './useDebounced-Dxncpg6z.js';
+import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
+import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTIONS-CdaxLGkE.js';
+import { f as fireAndForget, c as callOptions, a as adminRef } from './internal-rXJEAhXS.js';
 import { r as recordShard } from './shard-history-DyebH1R5.js';
-import { u as useLiveShardSeed } from './use-live-shard-seed-B74RYcOy.js';
-import { a as advisoryRow, A as AdvisorView } from './advisor-view-DBlzJi6C.js';
-import { ConfirmButton } from './ConfirmButton-WQVUoGFb.js';
+import { a as advisoryRow, A as AdvisorView } from './advisor-view-CGcfMiPq.js';
+import { ConfirmButton } from './ConfirmButton-C2eVi2Qv.js';
 import { jsxDEV } from 'react/jsx-dev-runtime';
 import { deriveInsights } from './DEFAULT_INSIGHT_THRESHOLDS-DjF0h-gA.js';
 import { runAdvisor, RUNTIME_LINTS } from '@lunora/advisor';
@@ -185,9 +186,6 @@ const deriveRuntimeAdvisories = (inputs) => {
   return visible.map((finding) => advisoryRow(finding));
 };
 
-const GET_ADVISORIES = adminRef(ADMIN_FUNCTIONS.getAdvisories);
-const GET_FUNCTION_STATS = adminRef(ADMIN_FUNCTIONS.getFunctionStats);
-const GET_METRICS = adminRef(ADMIN_FUNCTIONS.getMetrics);
 const LIST_TABLES = adminRef(ADMIN_FUNCTIONS.listTables);
 const LIST_TABLE_INDEXES = adminRef(ADMIN_FUNCTIONS.listTableIndexes);
 const percent = (rate) => `${(rate * 100).toFixed(1)}%`;
@@ -286,46 +284,41 @@ const InsightsPanel = ({
   const navigate = useNavigate();
   const t = useT();
   const [shardKey, setShardKey] = useState(initialShardKey ?? "");
-  const [metrics, setMetrics] = useState(null);
-  const [functions, setFunctions] = useState(null);
-  const [advisories, setAdvisories] = useState(null);
-  const [indexHits, setIndexHits] = useState(null);
   const [declaredIndexes, setDeclaredIndexes] = useState(null);
   const [shardTraffic, setShardTraffic] = useState(null);
-  const [error, setError] = useState(null);
+  const debouncedShard = useDebounced(shardKey.trim(), 400);
+  const latestEnumeratedShard = useRef("");
+  const metricsQuery = useAdminQuery(ADMIN_FUNCTIONS.getMetrics, {}, {
+    live: true,
+    shardKey: debouncedShard
+  });
+  const functionsQuery = useAdminQuery(ADMIN_FUNCTIONS.getFunctionStats, {}, {
+    live: true,
+    shardKey: debouncedShard
+  });
+  const advisoriesQuery = useAdminQuery(ADMIN_FUNCTIONS.getAdvisories, {}, {
+    live: true,
+    shardKey: debouncedShard
+  });
+  const metrics = metricsQuery.data ?? null;
+  const functions = functionsQuery.data?.functions ?? null;
+  const advisories = advisoriesQuery.data?.advisories ?? null;
+  const indexHits = metricsQuery.data?.indexHits ?? null;
+  const error = metricsQuery.error !== null && functionsQuery.error !== null ? metricsQuery.error : null;
   const fanShardTraffic = loadShardTraffic ?? ((table) => client.shardTraffic(table));
-  const refresh = async (shard) => {
-    const [snapshot, stats, advisorySnapshot] = await Promise.allSettled([client.query(GET_METRICS, {}, callOptions(shard)), client.query(GET_FUNCTION_STATS, {}, callOptions(shard)), client.query(GET_ADVISORIES, {}, callOptions(shard))]);
-    if (snapshot.status === "rejected" && stats.status === "rejected") {
-      setError(errorMessage(snapshot.reason));
-    } else {
-      setError(null);
-      recordShard(shard);
-    }
-    setMetrics(snapshot.status === "fulfilled" ? snapshot.value : null);
-    setFunctions(stats.status === "fulfilled" ? stats.value.functions : null);
-    setAdvisories(advisorySnapshot.status === "fulfilled" ? advisorySnapshot.value.advisories : null);
-    setIndexHits(snapshot.status === "fulfilled" ? snapshot.value.indexHits ?? null : null);
-    let tableNames = [];
-    try {
-      const tables = await client.query(LIST_TABLES, {}, callOptions(shard));
-      tableNames = tables.map((table_0) => table_0.name);
-      const indexResults = await Promise.allSettled(tables.map(async (table_1) => [table_1.name, await client.query(LIST_TABLE_INDEXES, {
-        table: table_1.name
-      }, callOptions(shard))]));
-      const declared = [];
-      for (const result of indexResults) {
-        if (result.status === "fulfilled") {
-          const [name, payload] = result.value;
-          declared.push(...declaredIndexesFor(name, payload.indexes));
-        }
+  const loadShardTrafficFeed = async (tableNames, shard) => {
+    const seedTable = tableNames[0];
+    if (seedTable === void 0 || seedTable === "") {
+      if (latestEnumeratedShard.current === shard) {
+        setShardTraffic(null);
       }
-      setDeclaredIndexes(declared);
-    } catch {
-      setDeclaredIndexes(null);
+      return;
     }
     try {
-      const traffic = await fanShardTraffic(tableNames[0] ?? "");
+      const traffic = await fanShardTraffic(seedTable);
+      if (latestEnumeratedShard.current !== shard) {
+        return;
+      }
       const byShard = /* @__PURE__ */ new Map();
       for (const entry of traffic.shards) {
         if (!byShard.has(entry.shardKey)) {
@@ -337,31 +330,76 @@ const InsightsPanel = ({
       }
       setShardTraffic([...byShard.values()]);
     } catch {
-      setShardTraffic(null);
+      if (latestEnumeratedShard.current === shard) {
+        setShardTraffic(null);
+      }
     }
   };
-  useLiveShardSeed(shardKey, refresh);
+  const enumerateShard = useCallback(
+    async (shard) => {
+      latestEnumeratedShard.current = shard;
+      let tableNames = [];
+      try {
+        const tables = await client.query(LIST_TABLES, {}, callOptions(shard));
+        if (latestEnumeratedShard.current !== shard) {
+          return;
+        }
+        recordShard(shard);
+        tableNames = tables.map((table) => table.name);
+        const indexResults = await Promise.allSettled(tables.map(async (table) => [table.name, await client.query(LIST_TABLE_INDEXES, {
+          table: table.name
+        }, callOptions(shard))]));
+        if (latestEnumeratedShard.current !== shard) {
+          return;
+        }
+        const declared = [];
+        for (const result of indexResults) {
+          if (result.status === "fulfilled") {
+            const [name, payload] = result.value;
+            declared.push(...declaredIndexesFor(name, payload.indexes));
+          }
+        }
+        setDeclaredIndexes(declared);
+      } catch {
+        if (latestEnumeratedShard.current === shard) {
+          setDeclaredIndexes(null);
+        }
+      }
+      await loadShardTrafficFeed(tableNames, shard);
+    },
+    // `fanShardTraffic`/`loadShardTrafficFeed` are render-fresh closures; the
+    // enumeration only needs to re-run on a shard change (or a manual visibility
+    // refresh), so they're intentionally excluded from the cache key.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [client]
+  );
+  useEffect(() => {
+    fireAndForget(enumerateShard(debouncedShard));
+  }, [debouncedShard, enumerateShard]);
   useEffect(() => {
     const onVisible = () => {
       if (document.visibilityState === "visible") {
-        fireAndForget(refresh(shardKey));
+        metricsQuery.refetch();
+        functionsQuery.refetch();
+        advisoriesQuery.refetch();
+        fireAndForget(enumerateShard(debouncedShard));
       }
     };
     document.addEventListener("visibilitychange", onVisible);
     return () => {
       document.removeEventListener("visibilitychange", onVisible);
     };
-  }, [refresh, shardKey]);
-  const jumpToSchemaIndex = (table_2) => {
+  }, [advisoriesQuery, debouncedShard, enumerateShard, functionsQuery, metricsQuery]);
+  const jumpToSchemaIndex = useCallback((table) => {
     fireAndForget(navigate({
       search: {
-        table: table_2
+        table
       },
       to: "/schema"
     }));
-  };
+  }, [navigate]);
   const insights = deriveInsights(metrics, functions);
-  const missingIndexTables = new Set(insights.filter((insight) => insight.kind === "missing-index").flatMap((insight_0) => insight_0.tables ?? []));
+  const missingIndexTables = new Set(insights.filter((insight) => insight.kind === "missing-index").flatMap((insight) => insight.tables ?? []));
   const runtimeRows = deriveRuntimeAdvisories({
     declaredIndexes: declaredIndexes ?? [],
     functions,
@@ -370,18 +408,18 @@ const InsightsPanel = ({
     suppressHotScanTables: missingIndexTables
   });
   const rows = useMemo(() => {
-    const insightRows = insights.map((insight_1) => {
-      const tables_0 = insight_1.kind === "missing-index" ? insight_1.tables ?? [] : [];
+    const insightRows = insights.map((insight) => {
+      const tables = insight.kind === "missing-index" ? insight.tables ?? [] : [];
       return {
-        action: tables_0.length > 0 ? tables_0.map((table_3) => /* @__PURE__ */ jsxDEV(AddIndexButton, {
+        action: tables.length > 0 ? tables.map((table) => /* @__PURE__ */ jsxDEV(AddIndexButton, {
           onJump: jumpToSchemaIndex,
-          table: table_3
-        }, table_3, false)) : void 0,
-        description: insight_1.message === void 0 ? insightDetail(t, insight_1) : `${insightDetail(t, insight_1)} — ${insight_1.message}`,
-        entity: insight_1.fn,
-        issueType: insightTitle(t, insight_1),
-        key: `${insight_1.kind}:${insight_1.fn ?? ""}`,
-        level: insight_1.severity
+          table
+        }, table, false)) : void 0,
+        description: insight.message === void 0 ? insightDetail(t, insight) : `${insightDetail(t, insight)} — ${insight.message}`,
+        entity: insight.fn,
+        issueType: insightTitle(t, insight),
+        key: `${insight.kind}:${insight.fn ?? ""}`,
+        level: insight.severity
       };
     });
     const indexAdvisoryLints = /* @__PURE__ */ new Set(["unindexed_foreign_key", "unindexed_relation_target"]);
@@ -389,16 +427,16 @@ const InsightsPanel = ({
       const base = advisoryRow(finding);
       if (indexAdvisoryLints.has(finding.name) && hasIndexMetadata(finding.metadata)) {
         const {
-          table: table_4,
+          table,
           suggestedIndex
         } = finding.metadata;
-        const testId = `in-apply-index-${table_4}-${suggestedIndex.name}`;
+        const testId = `in-apply-index-${table}-${suggestedIndex.name}`;
         return {
           ...base,
           action: /* @__PURE__ */ jsxDEV(ApplyIndexButton, {
             fields: suggestedIndex.fields,
             indexName: suggestedIndex.name,
-            table: table_4,
+            table,
             testId
           }, void 0, false)
         };

package/dist/packem_shared/{LogsPanel-CWdqAGpQ.js → LogsPanel-C7crgYoS.js}

@@ -1,21 +1,19 @@
 import { c } from 'react/compiler-runtime';
-import { useLunora } from '@lunora/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useState, useMemo, useRef } from 'react';
-import { L as LiveError } from './live-status-bPff1O7Y.js';
-import { ShardInput } from './ShardInput-DNCsT1KW.js';
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { L as LiveError } from './live-status-FZ0psC1z.js';
+import { ShardInput } from './ShardInput-gx_DZXXn.js';
 import { B as Badge } from './badge-B2PKA1-5.js';
 import { E as EmptyState } from './empty-state-DY_oe0k6.js';
 import { I as Input } from './input-XH4r1Pt1.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 { a as CLOUDFLARE_OBSERVABILITY_URL } from './cf-links-BZfRdxSE.js';
-import { c as callOptions, e as errorMessage, a as adminRef } from './internal-BBZYexre.js';
+import { u as useAdminQuery } from './use-admin-query-BkbdNFNz.js';
+import useDebounced from './useDebounced-Dxncpg6z.js';
+import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
+import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTIONS-CdaxLGkE.js';
+import { C as CLOUDFLARE_OBSERVABILITY_URL } from './cf-links-2cktDedA.js';
 import { r as recordShard } from './shard-history-DyebH1R5.js';
 import { c as cn } from './utils-B05Dmz_H.js';
 import { f as flooredRectObserver } from './virtual-rect-CVMUskSm.js';
-import { u as useLiveShardSeed } from './use-live-shard-seed-B74RYcOy.js';
 import { jsxDEV } from 'react/jsx-dev-runtime';
 
 const SCROLL_HEIGHT = 400;
@@ -316,8 +314,6 @@ const RequestRow = (t0) => {
   }
   return t17;
 };
-const GET_LOGS = adminRef(ADMIN_FUNCTIONS.getLogs);
-const GET_REQUEST_LOG = adminRef(ADMIN_FUNCTIONS.getRequestLog);
 const entriesOf = (result) => {
   const {
     entries
@@ -488,13 +484,9 @@ const SummaryBucketRow = (t0) => {
 const LogsPanel = ({
   initialShardKey
 }) => {
-  const client = useLunora();
   const t = useT();
   const [view, setView] = useState("requests");
   const [shardKey, setShardKey] = useState(initialShardKey ?? "");
-  const [entries, setEntries] = useState([]);
-  const [requests, setRequests] = useState([]);
-  const [error, setError] = useState(null);
   const [search, setSearch] = useState("");
   const [levelFilter, setLevelFilter] = useState(() => /* @__PURE__ */ new Set());
   const [pathFilter, setPathFilter] = useState("");
@@ -504,43 +496,36 @@ const LogsPanel = ({
   const [userIdFilter, setUserIdFilter] = useState("");
   const [tableFilter, setTableFilter] = useState("");
   const [outcomeFilter, setOutcomeFilter] = useState("all");
-  const [liveError, setLiveError] = useState(void 0);
+  const debouncedShard = useDebounced(shardKey.trim(), 400);
   const requestQuery = buildRequestQuery({
     functionPathPrefix: pathPrefix,
     outcome: outcomeFilter,
     tableTouched: tableFilter,
     userId: userIdFilter
   });
-  const refresh = async (shard) => {
-    setError(null);
-    try {
-      if (view === "requests") {
-        const result = await client.query(GET_REQUEST_LOG, requestQuery, callOptions(shard));
-        recordShard(shard);
-        setRequests(entriesOf(result));
-      } else {
-        const result_0 = await client.query(GET_LOGS, {}, callOptions(shard));
-        recordShard(shard);
-        setEntries(entriesOf(result_0));
-      }
-    } catch (error_) {
-      setEntries([]);
-      setRequests([]);
-      setError(errorMessage(error_));
-      throw error_;
+  const requestsQuery = useAdminQuery(ADMIN_FUNCTIONS.getRequestLog, requestQuery, {
+    enabled: view === "requests",
+    live: true,
+    shardKey: debouncedShard
+  });
+  const errorsQuery = useAdminQuery(ADMIN_FUNCTIONS.getLogs, {}, {
+    enabled: view === "errors",
+    live: true,
+    shardKey: debouncedShard
+  });
+  const activeQuery = view === "requests" ? requestsQuery : errorsQuery;
+  const {
+    error,
+    isLoading: activeLoading,
+    liveError
+  } = activeQuery;
+  const entries = entriesOf(errorsQuery.data);
+  const requests = entriesOf(requestsQuery.data);
+  useEffect(() => {
+    if (activeQuery.data !== void 0) {
+      recordShard(debouncedShard);
     }
-  };
-  const committedShard = useLiveShardSeed(shardKey, refresh, [view, requestQuery]);
-  useLiveAdmin(ADMIN_FUNCTIONS.getRequestLog, requestQuery, committedShard ?? "", (result_1) => {
-    setError(null);
-    setLiveError(void 0);
-    setRequests(entriesOf(result_1));
-  }, view === "requests" && committedShard !== void 0, setLiveError);
-  useLiveAdmin(ADMIN_FUNCTIONS.getLogs, {}, committedShard ?? "", (result_2) => {
-    setError(null);
-    setLiveError(void 0);
-    setEntries(entriesOf(result_2));
-  }, view === "errors" && committedShard !== void 0, setLiveError);
+  }, [activeQuery.data, debouncedShard]);
   const filtered = filterLogs(entries, {
     levels: levelFilter,
     now: Date.now(),
@@ -556,10 +541,13 @@ const LogsPanel = ({
       return "error";
     }
     if (activeCount === 0) {
+      if (activeLoading) {
+        return summaryVisible ? "summary" : "list";
+      }
       return "empty";
     }
     return summaryVisible ? "summary" : "list";
-  }, [activeCount, error, summaryVisible]);
+  }, [activeCount, activeLoading, error, summaryVisible]);
   const scrollRef = useRef(null);
   const virtualizer = useVirtualizer({
     count: activeCount,

package/dist/packem_shared/{MailPanel-D_EGtDnS.js → MailPanel-PILidruz.js}

@@ -1,6 +1,6 @@
 'use client';
 import { useLunora } from '@lunora/react';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import { B as Badge } from './badge-B2PKA1-5.js';
 import { B as Button } from './button-BhsN2uZH.js';
 import { E as EmptyState } from './empty-state-DY_oe0k6.js';
@@ -10,10 +10,11 @@ import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
 import { c as cn } from './utils-B05Dmz_H.js';
 import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
+import { u as useAdminQuery } from './use-admin-query-BkbdNFNz.js';
 import { useAutoRefresh } from './DEFAULT_AUTO_REFRESH_MS-Vxwaxx51.js';
-import { useT } from './createStudioI18n-CgvlmDkN.js';
-import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTION_PREFIX-DmBqMZ-z.js';
-import { f as fireAndForget, d as formatTimestamp, c as callOptions, e as errorMessage, b as copyToClipboard, a as adminRef } from './internal-BBZYexre.js';
+import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
+import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTIONS-CdaxLGkE.js';
+import { b as formatTimestamp, f as fireAndForget, g as copyToClipboard, c as callOptions, e as errorMessage, a as adminRef } from './internal-rXJEAhXS.js';
 
 function Separator({
   className,
@@ -114,7 +115,6 @@ function ScrollBar({
   }, void 0, false);
 }
 
-const GET_CAPTURED_MAIL = adminRef(ADMIN_FUNCTIONS.getCapturedMail);
 const CLEAR_CAPTURED_MAIL = adminRef(ADMIN_FUNCTIONS.clearCapturedMail);
 const SEND_TEST_MAIL = adminRef(ADMIN_FUNCTIONS.sendTestMail);
 const LINK_PATTERN = /https?:\/\/[^\s"'<>)]+/i;
@@ -144,49 +144,42 @@ const MailPanel = ({
 }) => {
   const client = useLunora();
   const t = useT();
-  const [entries, setEntries] = useState([]);
-  const [error, setError] = useState(null);
+  const {
+    data,
+    error: readError,
+    isLoading,
+    refetch
+  } = useAdminQuery(ADMIN_FUNCTIONS.getCapturedMail, {
+    limit
+  });
+  const [actionError, setActionError] = useState(null);
   const [selectedId, setSelectedId] = useState(null);
   const [tab, setTab] = useState("html");
   const [filter, setFilter] = useState("");
-  const refresh = async () => {
-    setError(null);
-    try {
-      const next = await client.query(GET_CAPTURED_MAIL, {
-        limit
-      }, callOptions(""));
-      setEntries(next.entries);
-    } catch (error_) {
-      setEntries([]);
-      setError(errorMessage(error_));
-    }
-  };
+  const entries = useMemo(() => data?.entries ?? [], [data]);
+  const error = readError ?? actionError;
   const clearInbox = async () => {
-    setError(null);
+    setActionError(null);
     try {
       await client.query(CLEAR_CAPTURED_MAIL, {}, callOptions(""));
       setSelectedId(null);
-      await refresh();
-    } catch (error__0) {
-      setError(errorMessage(error__0));
+      refetch();
+    } catch (error_) {
+      setActionError(errorMessage(error_));
     }
   };
   const sendTest = async () => {
-    setError(null);
+    setActionError(null);
     try {
       await client.query(SEND_TEST_MAIL, {}, callOptions(""));
-      await refresh();
-    } catch (error__1) {
-      setError(errorMessage(error__1));
+      refetch();
+    } catch (error__0) {
+      setActionError(errorMessage(error__0));
     }
   };
-  useEffect(() => {
-    fireAndForget(refresh());
-  }, [refresh]);
-  const reload = () => {
-    fireAndForget(refresh());
-  };
-  useAutoRefresh(reload, true);
+  useAutoRefresh(() => {
+    refetch();
+  }, true);
   const onClear = () => {
     fireAndForget(clearInbox());
   };
@@ -205,9 +198,9 @@ const MailPanel = ({
     }
   };
   const onSelectTab = (event_1) => {
-    const next_0 = event_1.currentTarget.dataset["tab"];
-    if (next_0 === "headers" || next_0 === "html" || next_0 === "text") {
-      setTab(next_0);
+    const next = event_1.currentTarget.dataset["tab"];
+    if (next === "headers" || next === "html" || next === "text") {
+      setTab(next);
     }
   };
   const tabTitle = (value) => {
@@ -276,7 +269,7 @@ const MailPanel = ({
       "data-testid": "mail-error",
       role: "alert",
       children: error
-    }, void 0, false), error === null && entries.length === 0 && /* @__PURE__ */ jsxDEV(EmptyState, {
+    }, void 0, false), error === null && !isLoading && entries.length === 0 && /* @__PURE__ */ jsxDEV(EmptyState, {
       description: t("Email your app sends in dev is captured here — nothing is delivered."),
       icon: /* @__PURE__ */ jsxDEV("svg", {
         "aria-hidden": "true",

package/dist/packem_shared/{MetricsPanel-E4Gv6wTO.js → MetricsPanel-DioILzgf.js}

@@ -2,18 +2,18 @@
 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 { L as LiveError } from './live-status-FZ0psC1z.js';
+import { ShardInput } from './ShardInput-gx_DZXXn.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 { u as useAdminQuery } from './use-admin-query-BkbdNFNz.js';
+import useDebounced from './useDebounced-Dxncpg6z.js';
+import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
+import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTIONS-CdaxLGkE.js';
+import { c as CLOUDFLARE_DURABLE_OBJECTS_URL } from './cf-links-2cktDedA.js';
+import { d as formatBytes, f as fireAndForget, c as callOptions, e as errorMessage, a as adminRef } from './internal-rXJEAhXS.js';
+import { r as recordShard, l as loadRecentShards } from './shard-history-DyebH1R5.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';
@@ -1205,6 +1205,7 @@ const formatDuration = (ms) => {
   }
   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)}%`;
@@ -1297,24 +1298,33 @@ const MetricsPanel = ({
   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);
+  const mountedRef = useRef(true);
   useEffect(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
     };
   }, []);
-  const applySample = (next) => {
-    setError(null);
-    setLiveError(void 0);
-    setMetrics(next);
+  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;
@@ -1326,32 +1336,7 @@ const MetricsPanel = ({
     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);
-    }
-  });
+  }, [data, debouncedShard]);
   const [shardResults, setShardResults] = useState(null);
   const [aggregating, setAggregating] = useState(false);
   const aggregateAll = async () => {
@@ -1412,6 +1397,7 @@ const MetricsPanel = ({
     }
     return enrichQueryStats(snapQs);
   }, [metrics]);
+  const effectiveTab = resolveTab(queryStats !== void 0, activeTab);
   const runAggregate = () => {
     fireAndForget(aggregateAll());
   };
@@ -1468,13 +1454,13 @@ const MetricsPanel = ({
       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"}`,
+        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 ${activeTab === "query-insights" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+        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",
@@ -1483,9 +1469,9 @@ const MetricsPanel = ({
           children: queryStats.length
         }, void 0, false)]
       }, void 0, true)]
-    }, void 0, true), activeTab === "query-insights" && queryStats !== void 0 && /* @__PURE__ */ jsxDEV(QueryInsights, {
+    }, void 0, true), effectiveTab === "query-insights" && queryStats !== void 0 && /* @__PURE__ */ jsxDEV(QueryInsights, {
       queryStats
-    }, void 0, false), activeTab === "overview" && metrics !== null && /* @__PURE__ */ jsxDEV("dl", {
+    }, 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, {
@@ -1542,7 +1528,7 @@ const MetricsPanel = ({
           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", {
+    }, 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", {