@lunora/studio 0.0.0 → 1.0.0-alpha.10

package/dist/packem_shared/InsightsPanel-CvXMoZuv.js

@@ -0,0 +1,461 @@
+import { c } from 'react/compiler-runtime';
+import { useLunora } from '@lunora/react';
+import { useNavigate } from '@tanstack/react-router';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { ShardInput } from './ShardInput-gx_DZXXn.js';
+import { B as Button } from './button-BhsN2uZH.js';
+import { u as useAdminQuery } from './use-admin-query-4JQW2rr1.js';
+import useDebounced from './useDebounced-Dxncpg6z.js';
+import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
+import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTIONS-DjXgvJb6.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 { 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';
+
+const hasIndexMetadata = (metadata) => {
+  const {
+    suggestedIndex,
+    table
+  } = metadata;
+  if (typeof table !== "string" || table.length === 0) {
+    return false;
+  }
+  if (typeof suggestedIndex !== "object" || suggestedIndex === null || !Array.isArray(suggestedIndex["fields"]) || suggestedIndex["fields"].length === 0) {
+    return false;
+  }
+  return true;
+};
+const composeCreateIndex = (table, indexName, fields) => {
+  const quotedTable = `"${table}"`;
+  const quotedIndex = `"${indexName}"`;
+  const quotedColumns = fields.map((f) => `"${f}"`).join(", ");
+  return `CREATE INDEX IF NOT EXISTS ${quotedIndex} ON ${quotedTable} (${quotedColumns});`;
+};
+
+const ApplyIndexButton = (t0) => {
+  const $ = c(19);
+  const {
+    fields,
+    indexName,
+    table,
+    testId
+  } = t0;
+  const t = useT();
+  const [applied, setApplied] = useState(false);
+  let t1;
+  if ($[0] !== fields || $[1] !== indexName || $[2] !== table) {
+    t1 = () => {
+      const clipboard = "navigator" in globalThis ? globalThis.navigator.clipboard : void 0;
+      if (clipboard === void 0) {
+        return;
+      }
+      const sql = composeCreateIndex(table, indexName, fields);
+      fireAndForget(clipboard.writeText(sql));
+      setApplied(true);
+    };
+    $[0] = fields;
+    $[1] = indexName;
+    $[2] = table;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const onConfirm = t1;
+  if (applied) {
+    const t22 = `${testId}-applied`;
+    let t32;
+    if ($[4] !== t) {
+      t32 = t("CREATE INDEX SQL copied to clipboard.");
+      $[4] = t;
+      $[5] = t32;
+    } else {
+      t32 = $[5];
+    }
+    let t42;
+    if ($[6] !== t22 || $[7] !== t32) {
+      t42 = /* @__PURE__ */ jsxDEV("span", {
+        className: "text-xs text-muted-foreground",
+        "data-testid": t22,
+        children: t32
+      }, void 0, false);
+      $[6] = t22;
+      $[7] = t32;
+      $[8] = t42;
+    } else {
+      t42 = $[8];
+    }
+    return t42;
+  }
+  let t2;
+  if ($[9] !== t) {
+    t2 = t("Apply?");
+    $[9] = t;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== t || $[12] !== table) {
+    t3 = t("Apply index on {table}", {
+      table
+    });
+    $[11] = t;
+    $[12] = table;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  let t4;
+  if ($[14] !== onConfirm || $[15] !== t2 || $[16] !== t3 || $[17] !== testId) {
+    t4 = /* @__PURE__ */ jsxDEV(ConfirmButton, {
+      confirmLabel: t2,
+      onConfirm,
+      testId,
+      children: t3
+    }, void 0, false);
+    $[14] = onConfirm;
+    $[15] = t2;
+    $[16] = t3;
+    $[17] = testId;
+    $[18] = t4;
+  } else {
+    t4 = $[18];
+  }
+  return t4;
+};
+
+const reconcileIndexHits = (declaredIndexes, indexHits) => {
+  const readsByKey = /* @__PURE__ */ new Map();
+  for (const hit of indexHits) {
+    const key = `${hit.table} ${hit.index}`;
+    readsByKey.set(key, (readsByKey.get(key) ?? 0) + hit.reads);
+  }
+  return declaredIndexes.map((declared) => {
+    return {
+      index: declared.index,
+      reads: readsByKey.get(`${declared.table} ${declared.index}`) ?? 0,
+      table: declared.table
+    };
+  });
+};
+const aggregateTableScans = (functions) => {
+  const scansByTable = /* @__PURE__ */ new Map();
+  for (const callStat of functions) {
+    for (const attribution of callStat.scannedTables ?? []) {
+      scansByTable.set(attribution.table, (scansByTable.get(attribution.table) ?? 0) + attribution.scans);
+    }
+  }
+  return [...scansByTable].map(([table, scans]) => {
+    return {
+      scans,
+      table
+    };
+  });
+};
+const declaredIndexesFor = (table, indexes) => indexes.map((index) => {
+  return {
+    index: index.name,
+    table
+  };
+});
+const deriveRuntimeAdvisories = (inputs) => {
+  const inDoIndexHits = reconcileIndexHits(inputs.declaredIndexes ?? [], inputs.indexHits ?? []);
+  const inDoTableScans = aggregateTableScans(inputs.functions ?? []);
+  const inDoShardTraffic = inputs.shardTraffic ?? [];
+  const analytics = inputs.analyticsMetrics;
+  const indexHits = analytics && analytics.indexHits.length > 0 ? analytics.indexHits : inDoIndexHits;
+  const tableScans = analytics && analytics.tableScans.length > 0 ? analytics.tableScans : inDoTableScans;
+  const shardTraffic = analytics && analytics.shardTraffic.length > 0 ? analytics.shardTraffic : inDoShardTraffic;
+  const findings = runAdvisor({
+    indexHits,
+    schema: {
+      tables: []
+    },
+    shardTraffic,
+    tableScans
+  }, {
+    lints: RUNTIME_LINTS,
+    source: "runtime"
+  });
+  const suppress = inputs.suppressHotScanTables;
+  const visible = suppress === void 0 ? findings : findings.filter((finding) => !(finding.metadata["kind"] === "hot_scan" && typeof finding.metadata["table"] === "string" && suppress.has(finding.metadata["table"])));
+  return visible.map((finding) => advisoryRow(finding));
+};
+
+const LIST_TABLES = adminRef(ADMIN_FUNCTIONS.listTables);
+const LIST_TABLE_INDEXES = adminRef(ADMIN_FUNCTIONS.listTableIndexes);
+const percent = (rate) => `${(rate * 100).toFixed(1)}%`;
+const seconds = (ms) => `${(ms / 1e3).toFixed(2)}s`;
+const tableList = (tables) => {
+  if (tables.length <= 1) {
+    return tables[0] ?? "";
+  }
+  const last = tables[tables.length - 1] ?? "";
+  return `${tables.slice(0, -1).join(", ")} and ${last}`;
+};
+const insightTitle = (t, insight) => ({
+  "high-error-rate": t("High error rate"),
+  "high-evictions": t("High cache eviction rate"),
+  "high-write-contention": t("High write contention"),
+  "low-cache-hit-rate": t("Low cache hit rate"),
+  "missing-index": t("Missing index"),
+  "slow-function": t("Slow function")
+})[insight.kind];
+const insightDetail = (t, insight) => ({
+  "high-error-rate": t("{rate} of calls failed.", {
+    rate: percent(insight.value)
+  }),
+  "high-evictions": t("{count} entries evicted recently.", {
+    count: insight.value
+  }),
+  "high-write-contention": t("{rate} of calls hit a write conflict — consider sharding to cut contention.", {
+    rate: percent(insight.value)
+  }),
+  "low-cache-hit-rate": t("{rate} hit rate over recent traffic.", {
+    rate: percent(insight.value)
+  }),
+  "missing-index": t("Slowest call took {duration} — it full-scanned {tables} with no index.", {
+    duration: seconds(insight.value),
+    tables: tableList(insight.tables ?? [])
+  }),
+  "slow-function": t("Slowest call took {duration}.", {
+    duration: seconds(insight.value)
+  })
+})[insight.kind];
+const AddIndexButton = (t0) => {
+  const $ = c(10);
+  const {
+    onJump,
+    table
+  } = t0;
+  const t = useT();
+  let t1;
+  if ($[0] !== onJump || $[1] !== table) {
+    t1 = () => {
+      onJump(table);
+    };
+    $[0] = onJump;
+    $[1] = table;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const onClick = t1;
+  const t2 = `in-add-index-${table}`;
+  let t3;
+  if ($[3] !== t || $[4] !== table) {
+    t3 = t("Add index on {table}", {
+      table
+    });
+    $[3] = t;
+    $[4] = table;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== onClick || $[7] !== t2 || $[8] !== t3) {
+    t4 = /* @__PURE__ */ jsxDEV(Button, {
+      "data-testid": t2,
+      onClick,
+      size: "sm",
+      type: "button",
+      variant: "outline",
+      children: t3
+    }, void 0, false);
+    $[6] = onClick;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+};
+const InsightsPanel = ({
+  initialShardKey,
+  loadShardTraffic
+}) => {
+  const client = useLunora();
+  const navigate = useNavigate();
+  const t = useT();
+  const [shardKey, setShardKey] = useState(initialShardKey ?? "");
+  const [declaredIndexes, setDeclaredIndexes] = useState(null);
+  const [shardTraffic, setShardTraffic] = 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 loadShardTrafficFeed = async (tableNames, shard) => {
+    const seedTable = tableNames[0];
+    if (seedTable === void 0 || seedTable === "") {
+      if (latestEnumeratedShard.current === shard) {
+        setShardTraffic(null);
+      }
+      return;
+    }
+    try {
+      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)) {
+          byShard.set(entry.shardKey, {
+            requests: entry.requests,
+            shardKey: entry.shardKey
+          });
+        }
+      }
+      setShardTraffic([...byShard.values()]);
+    } catch {
+      if (latestEnumeratedShard.current === shard) {
+        setShardTraffic(null);
+      }
+    }
+  };
+  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") {
+        metricsQuery.refetch();
+        functionsQuery.refetch();
+        advisoriesQuery.refetch();
+        fireAndForget(enumerateShard(debouncedShard));
+      }
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisible);
+    };
+  }, [advisoriesQuery, debouncedShard, enumerateShard, functionsQuery, metricsQuery]);
+  const jumpToSchemaIndex = useCallback((table) => {
+    fireAndForget(navigate({
+      search: {
+        table
+      },
+      to: "/schema"
+    }));
+  }, [navigate]);
+  const insights = deriveInsights(metrics, functions);
+  const missingIndexTables = new Set(insights.filter((insight) => insight.kind === "missing-index").flatMap((insight) => insight.tables ?? []));
+  const runtimeRows = deriveRuntimeAdvisories({
+    declaredIndexes: declaredIndexes ?? [],
+    functions,
+    indexHits,
+    shardTraffic,
+    suppressHotScanTables: missingIndexTables
+  });
+  const rows = useMemo(() => {
+    const insightRows = insights.map((insight) => {
+      const tables = insight.kind === "missing-index" ? insight.tables ?? [] : [];
+      return {
+        action: tables.length > 0 ? tables.map((table) => /* @__PURE__ */ jsxDEV(AddIndexButton, {
+          onJump: jumpToSchemaIndex,
+          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"]);
+    const staticRows = (advisories ?? []).map((finding) => {
+      const base = advisoryRow(finding);
+      if (indexAdvisoryLints.has(finding.name) && hasIndexMetadata(finding.metadata)) {
+        const {
+          table,
+          suggestedIndex
+        } = finding.metadata;
+        const testId = `in-apply-index-${table}-${suggestedIndex.name}`;
+        return {
+          ...base,
+          action: /* @__PURE__ */ jsxDEV(ApplyIndexButton, {
+            fields: suggestedIndex.fields,
+            indexName: suggestedIndex.name,
+            table,
+            testId
+          }, void 0, false)
+        };
+      }
+      return base;
+    });
+    return [...staticRows, ...runtimeRows, ...insightRows];
+  }, [advisories, insights, jumpToSchemaIndex, runtimeRows, t]);
+  const toolbar = /* @__PURE__ */ jsxDEV(ShardInput, {
+    onChange: setShardKey,
+    testId: "in-shard-input",
+    value: shardKey
+  }, void 0, false);
+  return /* @__PURE__ */ jsxDEV(AdvisorView, {
+    error,
+    rows,
+    testId: "lunora-insights",
+    toolbar
+  }, void 0, false);
+};
+
+export { InsightsPanel };