@lunora/studio 1.0.0-alpha.4 → 1.0.0-alpha.41

package/dist/{packem_shared/InsightsPanel-CWS_C-xW.js → packem_chunks/InsightsPanel.js}

@@ -1,18 +1,19 @@
 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-gx_DZXXn.js';
-import { B as Button } from './button-BhsN2uZH.js';
-import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
-import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTIONS-DmBqMZ-z.js';
-import { f as fireAndForget, c as callOptions, e as errorMessage, 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-Cuk3dnH0.js';
-import { a as advisoryRow, A as AdvisorView } from './advisor-view-CGcfMiPq.js';
-import { ConfirmButton } from './ConfirmButton-C2eVi2Qv.js';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { ShardInput } from '../packem_shared/ShardInput-gx_DZXXn.js';
+import { B as Button } from '../packem_shared/button-BhsN2uZH.js';
+import { u as useAdminQuery } from '../packem_shared/use-admin-query-CfHYWx5n.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 { f as fireAndForget, c as callOptions, a as adminRef } from '../packem_shared/internal-CYcbqMjX.js';
+import { r as recordShard } from '../packem_shared/shard-history-DyebH1R5.js';
+import { a as advisoryRow, A as AdvisorView } from '../packem_shared/advisor-view-BX8OhG0w.js';
+import { ConfirmButton } from '../packem_shared/ConfirmButton-C2eVi2Qv.js';
 import { jsxDEV } from 'react/jsx-dev-runtime';
-import { deriveInsights } from './DEFAULT_INSIGHT_THRESHOLDS-DjF0h-gA.js';
+import { deriveInsights } from '../packem_shared/DEFAULT_INSIGHT_THRESHOLDS-DjF0h-gA.js';
 import { runAdvisor, RUNTIME_LINTS } from '@lunora/advisor';
 
 const hasIndexMetadata = (metadata) => {
@@ -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)
         };
@@ -414,6 +452,7 @@ const InsightsPanel = ({
   }, void 0, false);
   return /* @__PURE__ */ jsxDEV(AdvisorView, {
     error,
+    errorSource: error === null ? void 0 : metricsQuery.errorSource,
     rows,
     testId: "lunora-insights",
     toolbar

package/dist/{packem_shared/LogsPanel-CTW8CFcM.js → packem_chunks/LogsPanel.js}

@@ -1,21 +1,20 @@
 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-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-Dq6g3daN.js';
-import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
-import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTIONS-DmBqMZ-z.js';
-import { C as CLOUDFLARE_OBSERVABILITY_URL } from './cf-links-2cktDedA.js';
-import { c as callOptions, e as errorMessage, a as adminRef } from './internal-rXJEAhXS.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-Cuk3dnH0.js';
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { E as ErrorAlert } from '../packem_shared/error-alert-CXjqyGw9.js';
+import { L as LiveError } from '../packem_shared/live-status-FZ0psC1z.js';
+import { ShardInput } from '../packem_shared/ShardInput-gx_DZXXn.js';
+import { B as Badge } from '../packem_shared/badge-B2PKA1-5.js';
+import { E as EmptyState } from '../packem_shared/empty-state-DY_oe0k6.js';
+import { I as Input } from '../packem_shared/input-XH4r1Pt1.js';
+import { u as useAdminQuery } from '../packem_shared/use-admin-query-CfHYWx5n.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 { a as CLOUDFLARE_OBSERVABILITY_URL } from '../packem_shared/cf-links-BZfRdxSE.js';
+import { r as recordShard } from '../packem_shared/shard-history-DyebH1R5.js';
+import { c as cn } from '../packem_shared/utils-B05Dmz_H.js';
+import { f as flooredRectObserver } from '../packem_shared/virtual-rect-CVMUskSm.js';
 import { jsxDEV } from 'react/jsx-dev-runtime';
 
 const SCROLL_HEIGHT = 400;
@@ -316,8 +315,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 +485,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 +497,37 @@ 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,
+    errorSource,
+    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 +543,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,
@@ -755,11 +745,9 @@ const LogsPanel = ({
           children: t("error")
         }, void 0, false)]
       }, void 0, true)]
-    }, void 0, true), readout === "error" && /* @__PURE__ */ jsxDEV("p", {
-      className: "text-sm text-destructive",
-      "data-testid": "lg-error",
-      role: "alert",
-      children: error
+    }, void 0, true), readout === "error" && /* @__PURE__ */ jsxDEV(ErrorAlert, {
+      error: errorSource,
+      testId: "lg-error"
     }, void 0, false), readout === "empty" && /* @__PURE__ */ jsxDEV(EmptyState, {
       description: t("Function and request logs for this shard show up here as your app handles traffic."),
       icon: /* @__PURE__ */ jsxDEV("svg", {

package/dist/{packem_shared/MailPanel-BwkvfIHF.js → packem_chunks/MailPanel.js}

@@ -1,19 +1,19 @@
-'use client';
 import { useLunora } from '@lunora/react';
-import { useState, useEffect, 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';
-import { I as Input } from './input-XH4r1Pt1.js';
-import { c } from 'react/compiler-runtime';
-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 { useState, useMemo } from 'react';
+import { E as ErrorAlert } from '../packem_shared/error-alert-CXjqyGw9.js';
+import { B as Badge } from '../packem_shared/badge-B2PKA1-5.js';
+import { B as Button } from '../packem_shared/button-BhsN2uZH.js';
+import { E as EmptyState } from '../packem_shared/empty-state-DY_oe0k6.js';
+import { I as Input } from '../packem_shared/input-XH4r1Pt1.js';
+import { S as ScrollArea } from '../packem_shared/scroll-area-DLhcy-ml.js';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
-import { useAutoRefresh } from './DEFAULT_AUTO_REFRESH_MS-Vxwaxx51.js';
-import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
-import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTIONS-DmBqMZ-z.js';
-import { f as fireAndForget, b as formatTimestamp, c as callOptions, e as errorMessage, g as copyToClipboard, a as adminRef } from './internal-rXJEAhXS.js';
+import { c as cn } from '../packem_shared/utils-B05Dmz_H.js';
+import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
+import { u as useAdminQuery } from '../packem_shared/use-admin-query-CfHYWx5n.js';
+import { useAutoRefresh } from '../packem_shared/DEFAULT_AUTO_REFRESH_MS-Vxwaxx51.js';
+import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
+import { ADMIN_FUNCTIONS } from '../packem_shared/ADMIN_FUNCTIONS-BHHJi3Gb.js';
+import { i as formatTimestamp, f as fireAndForget, g as copyToClipboard, c as callOptions, e as errorMessage, a as adminRef } from '../packem_shared/internal-CYcbqMjX.js';
 
 function Separator({
   className,
@@ -28,93 +28,6 @@ function Separator({
   }, void 0, false);
 }
 
-function ScrollArea(t0) {
-  const $ = c(14);
-  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", className);
-    $[4] = className;
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  let t2;
-  if ($[6] !== children) {
-    t2 = /* @__PURE__ */ jsxDEV(ScrollArea$1.Viewport, {
-      "data-slot": "scroll-area-viewport",
-      className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
-      children
-    }, void 0, false);
-    $[6] = children;
-    $[7] = t2;
-  } else {
-    t2 = $[7];
-  }
-  let t3;
-  let t4;
-  if ($[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t3 = /* @__PURE__ */ jsxDEV(ScrollBar, {}, void 0, false);
-    t4 = /* @__PURE__ */ jsxDEV(ScrollArea$1.Corner, {}, void 0, false);
-    $[8] = t3;
-    $[9] = t4;
-  } else {
-    t3 = $[8];
-    t4 = $[9];
-  }
-  let t5;
-  if ($[10] !== props || $[11] !== t1 || $[12] !== t2) {
-    t5 = /* @__PURE__ */ jsxDEV(ScrollArea$1.Root, {
-      "data-slot": "scroll-area",
-      className: t1,
-      ...props,
-      children: [t2, t3, t4]
-    }, void 0, true);
-    $[10] = props;
-    $[11] = t1;
-    $[12] = t2;
-    $[13] = t5;
-  } else {
-    t5 = $[13];
-  }
-  return t5;
-}
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxDEV(ScrollArea$1.Scrollbar, {
-    "data-slot": "scroll-area-scrollbar",
-    "data-orientation": orientation,
-    orientation,
-    className: cn("flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-s data-vertical:border-s-transparent", className),
-    ...props,
-    children: /* @__PURE__ */ jsxDEV(ScrollArea$1.Thumb, {
-      "data-slot": "scroll-area-thumb",
-      className: "relative flex-1 rounded-md bg-border"
-    }, void 0, false)
-  }, 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 +57,44 @@ const MailPanel = ({
 }) => {
   const client = useLunora();
   const t = useT();
-  const [entries, setEntries] = useState([]);
-  const [error, setError] = useState(null);
+  const {
+    data,
+    error: readError,
+    errorSource: readErrorSource,
+    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 errorSource = readError === null ? actionError : readErrorSource;
   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 +113,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) => {
@@ -271,12 +179,10 @@ const MailPanel = ({
           count: entries.length
         })
       }, void 0, false)]
-    }, void 0, true), error !== null && /* @__PURE__ */ jsxDEV("p", {
-      className: "text-sm text-destructive",
-      "data-testid": "mail-error",
-      role: "alert",
-      children: error
-    }, void 0, false), error === null && entries.length === 0 && /* @__PURE__ */ jsxDEV(EmptyState, {
+    }, void 0, true), error !== null && /* @__PURE__ */ jsxDEV(ErrorAlert, {
+      error: errorSource,
+      testId: "mail-error"
+    }, 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",