@lunora/studio 1.0.0-alpha.3 → 1.0.0-alpha.30

package/dist/{packem_shared/sql-editor-panel-BFRpzj6r.js → packem_chunks/SqlEditorPanel.js}

@@ -1,257 +1,17 @@
 import { c } from 'react/compiler-runtime';
 import { useLunora } from '@lunora/react';
-import { useState, useEffect, useRef, useId } from 'react';
-import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
-import { h as formatCell, f as fireAndForget, c as callOptions, a as adminRef, e as errorMessage } from './internal-rXJEAhXS.js';
-import { X as XAxis, B as Bar, T as Tooltip, E as EvilBarChart } from './bar-chart-CzJAgqkp.js';
+import { useState, useRef, useEffect, useId } from 'react';
+import { u as usePersistedList, n as newId, A as Alert, S as SqlResultChart } from '../packem_shared/browser-storage-d03UsV7v.js';
+import { ShardInput } from '../packem_shared/ShardInput-gx_DZXXn.js';
+import { c as TableHead, a as TableHeader, b as TableRow, e as TableCell, d as TableBody, T as Table } from '../packem_shared/table-DsCa9Qp9.js';
+import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
+import { ADMIN_FUNCTIONS } from '../packem_shared/ADMIN_FUNCTIONS-CdaxLGkE.js';
+import { f as fireAndForget, c as callOptions, a as adminRef, e as errorMessage } from '../packem_shared/internal-FcNZ3beb.js';
+import { r as recordShard } from '../packem_shared/shard-history-DyebH1R5.js';
+import { C as CellValue } from '../packem_shared/data-grid-Dsg6nRjo.js';
+import { E as ExportMenu } from '../packem_shared/grid-features-D7nNzBYm.js';
+import { c as cn } from '../packem_shared/utils-B05Dmz_H.js';
 import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
-import { ShardInput } from './ShardInput-gx_DZXXn.js';
-import { cva } from 'class-variance-authority';
-import { c as cn } from './utils-B05Dmz_H.js';
-import { c as TableHead, a as TableHeader, b as TableRow, e as TableCell, d as TableBody, T as Table } from './table-_RzNvy3R.js';
-import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTIONS-DmBqMZ-z.js';
-import { r as recordShard } from './shard-history-DyebH1R5.js';
-import { C as CellValue } from './data-grid-B5CaV3wS.js';
-import { E as ExportMenu } from './grid-features-CzUfqgsM.js';
-
-const MAX_BARS = 50;
-const RESULT_CHART_CONFIG = {
-  value: {
-    colors: {
-      dark: ["var(--chart-1)"],
-      light: ["var(--chart-1)"]
-    },
-    label: "value"
-  }
-};
-const pickColumns = (result) => {
-  const value = result.columns.find((column) => result.rows.length > 0 && result.rows.every((row) => typeof row[column] === "number")) ?? null;
-  const label = result.columns.find((column) => column !== value) ?? null;
-  return {
-    label,
-    value
-  };
-};
-const SqlResultChart = (t0) => {
-  const $ = c(15);
-  const {
-    result
-  } = t0;
-  const t = useT();
-  let t1;
-  if ($[0] !== result) {
-    t1 = pickColumns(result);
-    $[0] = result;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const {
-    label,
-    value
-  } = t1;
-  let t2;
-  if ($[2] !== label || $[3] !== result || $[4] !== value) {
-    t2 = value === null ? [] : result.rows.slice(0, MAX_BARS).map((row, index) => ({
-      label: label === null ? `#${(index + 1).toString()}` : formatCell(row[label]),
-      value: Number(row[value]) || 0
-    }));
-    $[2] = label;
-    $[3] = result;
-    $[4] = value;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  const data = t2;
-  if (value === null) {
-    let t32;
-    if ($[6] !== t) {
-      t32 = t("No numeric column to chart.");
-      $[6] = t;
-      $[7] = t32;
-    } else {
-      t32 = $[7];
-    }
-    let t42;
-    if ($[8] !== t32) {
-      t42 = /* @__PURE__ */ jsxDEV("p", {
-        className: "p-4 text-sm text-muted-foreground",
-        "data-testid": "sql-chart-empty",
-        children: t32
-      }, void 0, false);
-      $[8] = t32;
-      $[9] = t42;
-    } else {
-      t42 = $[9];
-    }
-    return t42;
-  }
-  let t3;
-  let t4;
-  let t5;
-  if ($[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t3 = /* @__PURE__ */ jsxDEV(XAxis, {
-      dataKey: "label"
-    }, void 0, false);
-    t4 = /* @__PURE__ */ jsxDEV(Bar, {
-      dataKey: "value"
-    }, void 0, false);
-    t5 = /* @__PURE__ */ jsxDEV(Tooltip, {}, void 0, false);
-    $[10] = t3;
-    $[11] = t4;
-    $[12] = t5;
-  } else {
-    t3 = $[10];
-    t4 = $[11];
-    t5 = $[12];
-  }
-  let t6;
-  if ($[13] !== data) {
-    t6 = /* @__PURE__ */ jsxDEV("div", {
-      className: "h-80 w-full p-3",
-      "data-testid": "sql-chart",
-      children: /* @__PURE__ */ jsxDEV(EvilBarChart, {
-        className: "h-full w-full",
-        config: RESULT_CHART_CONFIG,
-        data,
-        children: [t3, t4, t5]
-      }, void 0, true)
-    }, void 0, false);
-    $[13] = data;
-    $[14] = t6;
-  } else {
-    t6 = $[14];
-  }
-  return t6;
-};
-
-const alertVariants = cva("flex items-start gap-2 rounded-md border px-3 py-2 text-sm [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0", {
-  defaultVariants: {
-    variant: "default"
-  },
-  variants: {
-    variant: {
-      default: "border-border bg-muted/40 text-foreground",
-      destructive: "border-destructive/40 bg-destructive/5 text-destructive",
-      warning: "border-amber-500/40 bg-amber-500/5 text-amber-700 dark:text-amber-400"
-    }
-  }
-});
-const Alert = (t0) => {
-  const $ = c(10);
-  const {
-    children,
-    className,
-    icon,
-    testId,
-    variant
-  } = t0;
-  let t1;
-  if ($[0] !== className || $[1] !== variant) {
-    t1 = cn(alertVariants({
-      variant
-    }), className);
-    $[0] = className;
-    $[1] = variant;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== children) {
-    t2 = /* @__PURE__ */ jsxDEV("div", {
-      className: "min-w-0 flex-1",
-      children
-    }, void 0, false);
-    $[3] = children;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  let t3;
-  if ($[5] !== icon || $[6] !== t1 || $[7] !== t2 || $[8] !== testId) {
-    t3 = /* @__PURE__ */ jsxDEV("div", {
-      className: t1,
-      "data-testid": testId,
-      role: "alert",
-      children: [icon, t2]
-    }, void 0, true);
-    $[5] = icon;
-    $[6] = t1;
-    $[7] = t2;
-    $[8] = testId;
-    $[9] = t3;
-  } else {
-    t3 = $[9];
-  }
-  return t3;
-};
-
-const store = () => {
-  try {
-    return globalThis.localStorage;
-  } catch {
-    return void 0;
-  }
-};
-const loadJsonArray = function(key) {
-  try {
-    const raw = store()?.getItem(key) ?? void 0;
-    const parsed = raw === void 0 ? [] : JSON.parse(raw);
-    return Array.isArray(parsed) ? parsed : [];
-  } catch {
-    return [];
-  }
-};
-const saveJson = (key, value) => {
-  const storage = store();
-  if (storage === void 0) {
-    return;
-  }
-  try {
-    storage.setItem(key, JSON.stringify(value));
-  } catch {
-  }
-};
-const usePersistedList = function(key) {
-  const $ = c(8);
-  let t0;
-  if ($[0] !== key) {
-    t0 = () => loadJsonArray(key);
-    $[0] = key;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  const [value, setValue] = useState(t0);
-  let t1;
-  let t2;
-  if ($[2] !== key || $[3] !== value) {
-    t1 = () => {
-      saveJson(key, value);
-    };
-    t2 = [key, value];
-    $[2] = key;
-    $[3] = value;
-    $[4] = t1;
-    $[5] = t2;
-  } else {
-    t1 = $[4];
-    t2 = $[5];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[6] !== value) {
-    t3 = [value, setValue];
-    $[6] = value;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  return t3;
-};
-const newId = (prefix) => globalThis.crypto?.randomUUID?.() ?? `${prefix}-${globalThis.performance.now().toString(36)}`;
 
 const SQL_KEYWORDS = ["ORDER BY", "GROUP BY", "LEFT JOIN", "RIGHT JOIN", "INNER JOIN", "OUTER JOIN", "CROSS JOIN", "EXPLAIN QUERY PLAN", "SELECT", "DISTINCT", "FROM", "WHERE", "HAVING", "LIMIT", "OFFSET", "JOIN", "ON", "AND", "OR", "AS", "ASC", "DESC", "WITH", "UNION", "EXPLAIN"];
 const SQL_NEWLINE_CLAUSES = ["FROM", "WHERE", "ORDER BY", "GROUP BY", "HAVING", "LIMIT", "OFFSET", "UNION", "JOIN", "LEFT JOIN", "RIGHT JOIN", "INNER JOIN", "OUTER JOIN", "CROSS JOIN"];
@@ -2559,4 +2319,4 @@ function _temp(column) {
   }, column, false);
 }
 
-export { Alert as A, SqlEditorPanel as S, SqlResultChart as a, newId as n, usePersistedList as u };
+export { SqlEditorPanel };

package/dist/{packem_shared/TableEditor-ChfUOZec.js → packem_chunks/TableEditor.js}

@@ -2,74 +2,14 @@ import { c } from 'react/compiler-runtime';
 import { useLunora } from '@lunora/react';
 import { useNavigate, useRouter, useSearch } from '@tanstack/react-router';
 import { useRef, useState, useEffect } from 'react';
-import { T as TIER_META } from './storage-tier-CL98eOvn.js';
-import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
-import { f as fireAndForget } from './internal-rXJEAhXS.js';
-import { DataBrowser } from './DataBrowser-CtBe1So9.js';
-import { GlobalDataBrowser } from './GlobalDataBrowser-BTEmGrph.js';
+import { T as TIER_META } from '../packem_shared/storage-tier-CL98eOvn.js';
+import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
+import { s as searchToDataView, d as dataViewToSearch } from '../packem_shared/data-view-params-Cd6yRVbv.js';
+import { f as fireAndForget } from '../packem_shared/internal-FcNZ3beb.js';
+import { DataBrowser } from '../packem_shared/DataBrowser-ANTHLWWh.js';
+import { GlobalDataBrowser } from '../packem_shared/GlobalDataBrowser-CjgTG_wa.js';
 import { jsxDEV } from 'react/jsx-dev-runtime';
 
-const VALID_OPERATORS = /* @__PURE__ */ new Set(["contains", "eq", "gt", "gte", "lt", "lte", "ne"]);
-const isFilterClause = (entry) => {
-  if (entry === null || typeof entry !== "object") {
-    return false;
-  }
-  const candidate = entry;
-  return typeof candidate.column === "string" && typeof candidate.operator === "string" && VALID_OPERATORS.has(candidate.operator);
-};
-const parseFilters = (raw) => {
-  if (typeof raw !== "string" || raw === "") {
-    return [];
-  }
-  try {
-    const parsed = JSON.parse(raw);
-    return Array.isArray(parsed) ? parsed.filter(isFilterClause) : [];
-  } catch {
-    return [];
-  }
-};
-const parseOrder = (raw) => {
-  if (typeof raw !== "string" || raw === "") {
-    return void 0;
-  }
-  const separator = raw.lastIndexOf(":");
-  if (separator <= 0) {
-    return void 0;
-  }
-  const column = raw.slice(0, separator);
-  const direction = raw.slice(separator + 1);
-  if (direction !== "asc" && direction !== "desc") {
-    return void 0;
-  }
-  return {
-    column,
-    direction
-  };
-};
-const searchToDataView = (search) => {
-  const filters = parseFilters(search["filters"]);
-  const orderBy = parseOrder(search["order"]);
-  return {
-    filters: filters.length > 0 ? filters : void 0,
-    orderBy,
-    search: typeof search["search"] === "string" && search["search"] !== "" ? search["search"] : void 0,
-    shard: typeof search["shard"] === "string" && search["shard"] !== "" ? search["shard"] : void 0,
-    table: typeof search["table"] === "string" && search["table"] !== "" ? search["table"] : void 0,
-    tier: search["schema"] === "global" ? "global" : "shard"
-  };
-};
-const dataViewToSearch = (view) => {
-  const filters = view.filters ?? [];
-  return {
-    filters: filters.length > 0 ? JSON.stringify(filters) : void 0,
-    order: view.orderBy === void 0 ? void 0 : `${view.orderBy.column}:${view.orderBy.direction}`,
-    schema: view.tier === "global" ? "global" : void 0,
-    search: view.search !== void 0 && view.search !== "" ? view.search : void 0,
-    shard: view.shard !== void 0 && view.shard !== "" ? view.shard : void 0,
-    table: view.table !== void 0 && view.table !== "" ? view.table : void 0
-  };
-};
-
 const STORAGE_KEY = "lunora-studio-saved-queries";
 const MAX_SAVED = 50;
 const store = () => {
@@ -260,14 +200,16 @@ const TableEditor = ({
       to: "/data"
     }));
   };
-  const onSelectTable = (table_0) => {
+  const onSelectTable = (table_0, options) => {
     if (!onDataRoute()) {
       return;
     }
     fireAndForget(navigate({
       search: (previous_1) => {
         return {
-          ...previous_1,
+          schema: previous_1["schema"],
+          search: options?.search,
+          shard: previous_1["shard"],
           table: table_0
         };
       },

package/dist/packem_chunks/analytics-panel.js

@@ -0,0 +1,261 @@
+import { c } from 'react/compiler-runtime';
+import { createAnalyticsSqlClient } from '@lunora/bindings/analytics';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { C as Card } from '../packem_shared/card-DURq3ElK.js';
+import { E as EmptyState } from '../packem_shared/empty-state-DY_oe0k6.js';
+import { T as Table, a as TableHeader, b as TableRow, d as TableBody, e as TableCell, c as TableHead } from '../packem_shared/table-DsCa9Qp9.js';
+import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
+import { e as errorMessage, f as fireAndForget, d as formatCell } from '../packem_shared/internal-FcNZ3beb.js';
+import { jsxDEV } from 'react/jsx-dev-runtime';
+
+const DEFAULT_DATASET = "ANALYTICS";
+const PANEL_QUERIES = [{
+  key: "volume",
+  sql: (dataset) => `SELECT blob2 AS fn, count() AS calls FROM ${dataset} WHERE blob1 = 'function_call' GROUP BY fn ORDER BY calls DESC LIMIT 25`,
+  title: "Request volume per function"
+}, {
+  key: "latency",
+  sql: (dataset) => `SELECT blob2 AS fn, quantileWeighted(0.50)(double1, _sample_interval) AS p50, quantileWeighted(0.95)(double1, _sample_interval) AS p95 FROM ${dataset} WHERE blob1 = 'function_call' GROUP BY fn ORDER BY p95 DESC LIMIT 25`,
+  title: "Latency p50 / p95 per function"
+}, {
+  key: "hotShards",
+  sql: (dataset) => `SELECT blob3 AS shard, count() AS calls FROM ${dataset} WHERE blob1 = 'function_call' GROUP BY shard ORDER BY calls DESC LIMIT 25`,
+  title: "Hot shards"
+}];
+const INITIAL_PANEL_STATE = {
+  error: null,
+  loading: true,
+  result: null
+};
+const PanelResult = (t0) => {
+  const $ = c(27);
+  const {
+    state,
+    title
+  } = t0;
+  const t = useT();
+  const {
+    error,
+    loading,
+    result
+  } = state;
+  const t1 = `analytics-panel-${title}`;
+  let t2;
+  if ($[0] !== t || $[1] !== title) {
+    t2 = t(title);
+    $[0] = t;
+    $[1] = title;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== t2) {
+    t3 = /* @__PURE__ */ jsxDEV("header", {
+      className: "border-b border-border px-4 py-3",
+      children: /* @__PURE__ */ jsxDEV("span", {
+        className: "font-mono text-[11px] tracking-wide text-muted-foreground uppercase",
+        children: t2
+      }, void 0, false)
+    }, void 0, false);
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== loading || $[6] !== t) {
+    t4 = loading && /* @__PURE__ */ jsxDEV("p", {
+      className: "px-4 py-8 text-center text-sm text-muted-foreground",
+      "data-testid": "analytics-loading",
+      children: t("Loading…")
+    }, void 0, false);
+    $[5] = loading;
+    $[6] = t;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== error || $[9] !== loading) {
+    t5 = !loading && error !== null && /* @__PURE__ */ jsxDEV("p", {
+      className: "px-4 py-8 text-center text-sm text-destructive",
+      "data-testid": "analytics-error",
+      role: "alert",
+      children: error
+    }, void 0, false);
+    $[8] = error;
+    $[9] = loading;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== error || $[12] !== loading || $[13] !== result || $[14] !== t) {
+    t6 = !loading && error === null && result !== null && result.rows.length === 0 && /* @__PURE__ */ jsxDEV("p", {
+      className: "px-4 py-8 text-center text-sm text-muted-foreground",
+      "data-testid": "analytics-empty-rows",
+      children: t("No data points yet.")
+    }, void 0, false);
+    $[11] = error;
+    $[12] = loading;
+    $[13] = result;
+    $[14] = t;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== error || $[17] !== loading || $[18] !== result) {
+    t7 = !loading && error === null && result !== null && result.rows.length > 0 && /* @__PURE__ */ jsxDEV(Table, {
+      children: [/* @__PURE__ */ jsxDEV(TableHeader, {
+        children: /* @__PURE__ */ jsxDEV(TableRow, {
+          children: result.columns.map(_temp)
+        }, void 0, false)
+      }, void 0, false), /* @__PURE__ */ jsxDEV(TableBody, {
+        children: result.rows.map((row, rowIndex) => /* @__PURE__ */ jsxDEV(TableRow, {
+          children: result.columns.map((column_0) => /* @__PURE__ */ jsxDEV(TableCell, {
+            className: "font-mono text-xs",
+            children: formatCell(row[column_0.name])
+          }, column_0.name, false))
+        }, rowIndex, false))
+      }, void 0, false)]
+    }, void 0, true);
+    $[16] = error;
+    $[17] = loading;
+    $[18] = result;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] !== t1 || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7) {
+    t8 = /* @__PURE__ */ jsxDEV(Card, {
+      className: "gap-0 py-0",
+      "data-testid": t1,
+      children: [t3, t4, t5, t6, t7]
+    }, void 0, true);
+    $[20] = t1;
+    $[21] = t3;
+    $[22] = t4;
+    $[23] = t5;
+    $[24] = t6;
+    $[25] = t7;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  return t8;
+};
+const AnalyticsPanel = ({
+  config,
+  dataset = DEFAULT_DATASET,
+  runQuery
+} = {}) => {
+  const t = useT();
+  const [states, setStates] = useState({});
+  const run = useMemo(() => {
+    if (runQuery !== void 0) {
+      return runQuery;
+    }
+    if (config === void 0) {
+      return null;
+    }
+    const client = createAnalyticsSqlClient({
+      accountId: config.accountId,
+      apiToken: config.apiToken
+    });
+    return (sql) => client.query(sql);
+  }, [config, runQuery]);
+  const load = useCallback(async (token) => {
+    if (run === null) {
+      return;
+    }
+    for (const panel of PANEL_QUERIES) {
+      if (token.cancelled) {
+        return;
+      }
+      setStates((current) => {
+        return {
+          ...current,
+          [panel.key]: {
+            error: null,
+            loading: true,
+            result: null
+          }
+        };
+      });
+      try {
+        const result = await run(panel.sql(dataset));
+        if (!token.cancelled) {
+          setStates((current_1) => {
+            return {
+              ...current_1,
+              [panel.key]: {
+                error: null,
+                loading: false,
+                result
+              }
+            };
+          });
+        }
+      } catch (error_) {
+        if (!token.cancelled) {
+          setStates((current_0) => {
+            return {
+              ...current_0,
+              [panel.key]: {
+                error: errorMessage(error_),
+                loading: false,
+                result: null
+              }
+            };
+          });
+        }
+      }
+    }
+  }, [run, dataset]);
+  useEffect(() => {
+    const token_0 = {
+      cancelled: false
+    };
+    fireAndForget(load(token_0));
+    return () => {
+      token_0.cancelled = true;
+    };
+  }, [load]);
+  if (run === null) {
+    return /* @__PURE__ */ jsxDEV(EmptyState, {
+      description: t("Set CLOUDFLARE_ACCOUNT_ID and CLOUDFLARE_API_TOKEN (Analytics Read) in your .dev.vars to enable usage panels."),
+      icon: /* @__PURE__ */ jsxDEV("svg", {
+        "aria-hidden": "true",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.6,
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsxDEV("path", {
+          d: "M5 20V10m6.5 10V4M18 20v-7M3 20h18"
+        }, void 0, false)
+      }, void 0, false),
+      testId: "analytics-not-configured",
+      title: t("Analytics is not configured.")
+    }, void 0, false);
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex flex-col gap-4",
+    "data-testid": "lunora-analytics-panel",
+    children: PANEL_QUERIES.map((panel_0) => /* @__PURE__ */ jsxDEV(PanelResult, {
+      state: states[panel_0.key] ?? INITIAL_PANEL_STATE,
+      title: panel_0.title
+    }, panel_0.key, false))
+  }, void 0, false);
+};
+function _temp(column) {
+  return /* @__PURE__ */ jsxDEV(TableHead, {
+    children: column.name
+  }, column.name, false);
+}
+
+export { AnalyticsPanel };