@quantumwake/terminal-ux-dashboard-components 0.1.7 → 0.1.10

package/dist/index.d.cts

@@ -30,6 +30,7 @@ interface DashboardCapabilities {
     newDashboard?: () => void;
     addPanel?: (panel: PanelInput) => void;
     removePanel?: (panelId: string) => void;
+    persistPanelData?: (panelId: string, rows: QueryResult['rows'], refreshedAt: string) => void;
 }
 interface DashboardContextValue extends DashboardCapabilities {
     theme: DashboardTheme;
@@ -52,6 +53,7 @@ declare function useCapabilities(): {
     canNew: boolean;
     canAddPanel: boolean;
     canEditPanels: boolean;
+    canRefresh: boolean;
 };
 
 type ChartType = 'bar' | 'grouped-bar' | 'pie' | 'line' | 'scatter' | 'heatmap';
@@ -358,6 +360,8 @@ interface PanelConfig {
     text?: string;
     label?: string;
     column?: string;
+    data?: Row[];
+    refreshedAt?: string;
     [key: string]: unknown;
 }
 interface DashboardPanel$1 {
@@ -404,13 +408,6 @@ interface ChartBuilderProps {
     stateId?: string;
     onSave?: (panel: ChartPanel) => void;
 }
-/**
- * ChartBuilder — visual chart authoring over a state's dataset. Generates DuckDB
- * SQL from the visual config (SQL engine mode, exact over the full dataset) or
- * aggregates the loaded sample client-side (Direct mode). The host injects
- * runQuery + theme via <DashboardProvider>; an optional onSave persists the
- * assembled panel (absent ⇒ the save affordance is hidden / read-only).
- */
 declare function ChartBuilder({ records, columns, stateId, onSave }: ChartBuilderProps): react.JSX.Element;
 
 /** A dataset column descriptor: name + DuckDB-ish type tag. */

package/dist/index.d.ts

@@ -30,6 +30,7 @@ interface DashboardCapabilities {
     newDashboard?: () => void;
     addPanel?: (panel: PanelInput) => void;
     removePanel?: (panelId: string) => void;
+    persistPanelData?: (panelId: string, rows: QueryResult['rows'], refreshedAt: string) => void;
 }
 interface DashboardContextValue extends DashboardCapabilities {
     theme: DashboardTheme;
@@ -52,6 +53,7 @@ declare function useCapabilities(): {
     canNew: boolean;
     canAddPanel: boolean;
     canEditPanels: boolean;
+    canRefresh: boolean;
 };
 
 type ChartType = 'bar' | 'grouped-bar' | 'pie' | 'line' | 'scatter' | 'heatmap';
@@ -358,6 +360,8 @@ interface PanelConfig {
     text?: string;
     label?: string;
     column?: string;
+    data?: Row[];
+    refreshedAt?: string;
     [key: string]: unknown;
 }
 interface DashboardPanel$1 {
@@ -404,13 +408,6 @@ interface ChartBuilderProps {
     stateId?: string;
     onSave?: (panel: ChartPanel) => void;
 }
-/**
- * ChartBuilder — visual chart authoring over a state's dataset. Generates DuckDB
- * SQL from the visual config (SQL engine mode, exact over the full dataset) or
- * aggregates the loaded sample client-side (Direct mode). The host injects
- * runQuery + theme via <DashboardProvider>; an optional onSave persists the
- * assembled panel (absent ⇒ the save affordance is hidden / read-only).
- */
 declare function ChartBuilder({ records, columns, stateId, onSave }: ChartBuilderProps): react.JSX.Element;
 
 /** A dataset column descriptor: name + DuckDB-ish type tag. */

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useState, useEffect, useRef, Suspense } from 'react';
+import { createContext, useContext, useMemo, useState, useEffect, useRef, Suspense, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ResponsiveBar } from '@nivo/bar';
 import { ResponsivePie } from '@nivo/pie';
@@ -9,7 +9,8 @@ import PivotTableUI from 'react-pivottable/PivotTableUI';
 import 'react-pivottable/pivottable.css';
 import { Loader2, Play, ChevronDown, AlertCircle, Rows3, BarChart3, PieChart, TrendingUp, ScatterChart, LayoutGrid, Code, Sparkles, X, Terminal, RefreshCw, Minimize2, Maximize2, Plus, Save, FolderOpen, Trash2, Filter, Database, Send, GripVertical } from 'lucide-react';
 import CodeMirror, { EditorView, Prec, keymap } from '@uiw/react-codemirror';
-import { sql } from '@codemirror/lang-sql';
+import { sql, PostgreSQL, schemaCompletionSource, keywordCompletionSource } from '@codemirror/lang-sql';
+import { snippetCompletion, completeFromList, autocompletion, acceptCompletion } from '@codemirror/autocomplete';
 
 // src/context/DashboardContext.tsx
 var DashboardContext = createContext(null);
@@ -36,7 +37,9 @@ function useCapabilities() {
     canRefine: !!c.refineDashboard,
     canNew: !!c.newDashboard,
     canAddPanel: !!c.addPanel,
-    canEditPanels: !!c.removePanel
+    canEditPanels: !!c.removePanel,
+    // Studio can recompute + persist a panel's precomputed result.
+    canRefresh: !!c.persistPanelData
   };
 }
 
@@ -638,6 +641,280 @@ function ChartStyleControls({ style, onChange }) {
     ] })
   ] });
 }
+var AGGREGATES = [
+  "count",
+  "count_if",
+  "sum",
+  "avg",
+  "min",
+  "max",
+  "median",
+  "mode",
+  "stddev",
+  "stddev_pop",
+  "stddev_samp",
+  "var_pop",
+  "var_samp",
+  "variance",
+  "quantile",
+  "quantile_cont",
+  "quantile_disc",
+  "approx_count_distinct",
+  "approx_quantile",
+  "arg_max",
+  "arg_min",
+  "first",
+  "last",
+  "product",
+  "bool_and",
+  "bool_or",
+  "bit_and",
+  "bit_or",
+  "bit_xor",
+  "string_agg",
+  "list",
+  "array_agg",
+  "histogram",
+  "corr",
+  "covar_pop",
+  "covar_samp",
+  "kurtosis",
+  "skewness",
+  "entropy",
+  "row_number",
+  "rank",
+  "dense_rank",
+  "percent_rank",
+  "cume_dist",
+  "ntile",
+  "lag",
+  "lead",
+  "first_value",
+  "last_value",
+  "nth_value"
+];
+var SCALARS = [
+  // string
+  "length",
+  "len",
+  "lower",
+  "upper",
+  "trim",
+  "ltrim",
+  "rtrim",
+  "substring",
+  "substr",
+  "concat",
+  "concat_ws",
+  "replace",
+  "reverse",
+  "repeat",
+  "lpad",
+  "rpad",
+  "left",
+  "right",
+  "contains",
+  "starts_with",
+  "ends_with",
+  "position",
+  "split_part",
+  "string_split",
+  "regexp_matches",
+  "regexp_replace",
+  "regexp_extract",
+  "regexp_full_match",
+  "regexp_split_to_array",
+  "format",
+  "printf",
+  "md5",
+  "sha256",
+  "levenshtein",
+  "jaccard",
+  "ascii",
+  "chr",
+  // date / time
+  "now",
+  "current_date",
+  "current_timestamp",
+  "today",
+  "date_trunc",
+  "date_part",
+  "date_diff",
+  "date_add",
+  "date_sub",
+  "age",
+  "strftime",
+  "strptime",
+  "epoch",
+  "epoch_ms",
+  "extract",
+  "make_date",
+  "make_time",
+  "make_timestamp",
+  "last_day",
+  "dayname",
+  "monthname",
+  "year",
+  "month",
+  "day",
+  "hour",
+  "minute",
+  "second",
+  "dayofweek",
+  "dayofyear",
+  "week",
+  "quarter",
+  "time_bucket",
+  // math
+  "abs",
+  "ceil",
+  "ceiling",
+  "floor",
+  "round",
+  "trunc",
+  "sign",
+  "mod",
+  "pow",
+  "power",
+  "sqrt",
+  "cbrt",
+  "exp",
+  "ln",
+  "log",
+  "log2",
+  "log10",
+  "greatest",
+  "least",
+  "gcd",
+  "lcm",
+  "factorial",
+  "random",
+  "pi",
+  "degrees",
+  "radians",
+  "sin",
+  "cos",
+  "tan",
+  "asin",
+  "acos",
+  "atan",
+  "atan2",
+  // conditional / null / cast
+  "coalesce",
+  "ifnull",
+  "nullif",
+  "nvl",
+  "if",
+  "try_cast",
+  "cast",
+  "typeof",
+  // list / struct / map / json
+  "list_value",
+  "list_aggregate",
+  "list_distinct",
+  "list_sort",
+  "list_reverse",
+  "list_slice",
+  "list_concat",
+  "list_contains",
+  "list_position",
+  "list_extract",
+  "list_transform",
+  "list_filter",
+  "unnest",
+  "array_length",
+  "array_to_string",
+  "struct_pack",
+  "struct_extract",
+  "map",
+  "map_keys",
+  "map_values",
+  "json_extract",
+  "json_extract_string",
+  "to_json",
+  "from_json",
+  "json_array_length",
+  "json_keys",
+  "generate_series",
+  "range"
+];
+var TYPES = [
+  "BOOLEAN",
+  "TINYINT",
+  "SMALLINT",
+  "INTEGER",
+  "BIGINT",
+  "HUGEINT",
+  "UTINYINT",
+  "USMALLINT",
+  "UINTEGER",
+  "UBIGINT",
+  "FLOAT",
+  "REAL",
+  "DOUBLE",
+  "DECIMAL",
+  "NUMERIC",
+  "VARCHAR",
+  "CHAR",
+  "TEXT",
+  "BLOB",
+  "BIT",
+  "DATE",
+  "TIME",
+  "TIMESTAMP",
+  "TIMESTAMPTZ",
+  "INTERVAL",
+  "UUID",
+  "JSON",
+  "LIST",
+  "ARRAY",
+  "STRUCT",
+  "MAP",
+  "UNION",
+  "ENUM"
+];
+var EXTRA_KEYWORDS = [
+  "QUALIFY",
+  "EXCLUDE",
+  "PIVOT",
+  "UNPIVOT",
+  "ASOF",
+  "POSITIONAL",
+  "SEMI",
+  "ANTI",
+  "SUMMARIZE",
+  "DISTINCT ON",
+  "GROUP BY ALL",
+  "ORDER BY ALL",
+  "USING SAMPLE"
+];
+function opts(labels, type, boost = 0) {
+  return labels.map((label) => ({ label, type, boost }));
+}
+var SNIPPETS = [
+  snippetCompletion("SELECT ${col}, count(*) AS n\nFROM data\nGROUP BY ${col}\nORDER BY n DESC", {
+    label: "group by count",
+    type: "snippet",
+    detail: "aggregate by column"
+  }),
+  snippetCompletion("SELECT *\nFROM data\nORDER BY ${col} DESC\nLIMIT 10", {
+    label: "top N",
+    type: "snippet",
+    detail: "order + limit"
+  }),
+  snippetCompletion("SELECT DISTINCT ${col}\nFROM data", {
+    label: "select distinct",
+    type: "snippet"
+  })
+];
+var duckdbCompletionSource = completeFromList([
+  ...opts(AGGREGATES, "function", 1),
+  // boost aggregates slightly — common in analysis
+  ...opts(SCALARS, "function"),
+  ...opts(TYPES, "type"),
+  ...opts(EXTRA_KEYWORDS, "keyword"),
+  ...SNIPPETS
+]);
 var DEFAULT_SQL = "SELECT *\nFROM data\nLIMIT 100";
 var renderCell = (v) => {
   if (v == null) return "";
@@ -677,18 +954,32 @@ function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, default
     void run();
   };
   const schemaKey = columns.map((c) => c.name).join(",");
-  const extensions = useMemo(
-    () => [
-      sql({ schema: { data: columns.map((c) => c.name) }, upperCaseKeywords: true }),
+  const extensions = useMemo(() => {
+    const sqlConfig = {
+      dialect: PostgreSQL,
+      schema: { data: columns.map((c) => c.name) },
+      defaultTable: "data",
+      upperCaseKeywords: true
+    };
+    return [
+      sql(sqlConfig),
+      autocompletion({
+        override: [
+          schemaCompletionSource(sqlConfig),
+          keywordCompletionSource(PostgreSQL, true),
+          duckdbCompletionSource
+        ]
+      }),
       EditorView.lineWrapping,
-      Prec.highest(keymap.of([{ key: "Mod-Enter", run: () => {
-        runRef.current();
-        return true;
-      } }]))
-    ],
-    [schemaKey]
-    // eslint-disable-line react-hooks/exhaustive-deps
-  );
+      Prec.highest(keymap.of([
+        { key: "Mod-Enter", run: () => {
+          runRef.current();
+          return true;
+        } },
+        { key: "Tab", run: acceptCompletion }
+      ]))
+    ];
+  }, [schemaKey]);
   const resultColumns = result?.columns || [];
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxs("div", { className: `border-b ${theme.border} bg-midnight-elevated p-3 shrink-0`, children: [
@@ -718,7 +1009,7 @@ function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, default
           onChange: setSql,
           extensions,
           theme: "dark",
-          basicSetup: { lineNumbers: false, foldGutter: false, highlightActiveLine: false },
+          basicSetup: { lineNumbers: false, foldGutter: false, highlightActiveLine: false, autocompletion: false },
           height: "120px",
           placeholder: "SELECT ... FROM data",
           className: "border border-midnight-border text-sm overflow-hidden focus-within:border-midnight-accent"
@@ -1050,6 +1341,7 @@ var ChartPreview = ({
       return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "Select a chart type" });
   }
 };
+var MAX_PRECOMPUTE_ROWS = 5e3;
 function ChartBuilder({ records, columns, stateId, onSave }) {
   const { theme, runQuery } = useDashboard();
   const runQueryRef = useRef(runQuery);
@@ -1178,6 +1470,10 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
       config.chartType = chartType;
       if (filters.length) config.filters = filters;
       if (yFields.length) config.yFields = yFields.map((f) => ({ name: f.name, agg: f.agg }));
+      if (sqlRows && sqlRows.length <= MAX_PRECOMPUTE_ROWS) {
+        config.data = sqlRows;
+        config.refreshedAt = (/* @__PURE__ */ new Date()).toISOString();
+      }
     }
     config.style = style;
     onSave({
@@ -1382,70 +1678,129 @@ function ViewLoading() {
   return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "Loading..." });
 }
 function SqlPanel({ panel }) {
-  const { runQuery } = useDashboard();
+  const { runQuery, persistPanelData } = useDashboard();
+  const { canRefresh } = useCapabilities();
   const runQueryRef = useRef(runQuery);
   runQueryRef.current = runQuery;
   const config = panel.config || {};
   const chartType = config.chartType || panel.type;
-  const [rows, setRows] = useState(null);
+  const precomputed = config.data;
+  const [rows, setRows] = useState(precomputed ?? null);
   const [error, setError] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(!precomputed && canRefresh);
+  const [refreshing, setRefreshing] = useState(false);
   useEffect(() => {
+    if (precomputed) {
+      setRows(precomputed);
+      setLoading(false);
+      return;
+    }
+    if (!canRefresh) {
+      setLoading(false);
+      return;
+    }
     let cancelled = false;
     setLoading(true);
     setError(null);
-    const sql = config.sql || "";
-    runQueryRef.current(sql).then(
+    runQueryRef.current(config.sql || "").then(
       (res) => {
-        if (cancelled) return;
-        setLoading(false);
-        setRows(res?.rows || []);
+        if (!cancelled) {
+          setLoading(false);
+          setRows(res?.rows || []);
+        }
       },
       (err) => {
-        if (cancelled) return;
-        setLoading(false);
-        setRows(null);
-        setError(err instanceof Error ? err.message : String(err) || "Query failed");
+        if (!cancelled) {
+          setLoading(false);
+          setRows(null);
+          setError(err instanceof Error ? err.message : String(err) || "Query failed");
+        }
       }
     );
     return () => {
       cancelled = true;
     };
-  }, [config.sql]);
+  }, [config.sql, canRefresh]);
+  const refresh = useCallback(async () => {
+    setRefreshing(true);
+    setError(null);
+    try {
+      const res = await runQueryRef.current(config.sql || "");
+      const r = res?.rows || [];
+      setRows(r);
+      persistPanelData?.(panel.id, r, (/* @__PURE__ */ new Date()).toISOString());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err) || "Query failed");
+    } finally {
+      setRefreshing(false);
+    }
+  }, [config.sql, panel.id, persistPanelData]);
+  const refreshBtn = canRefresh ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: refresh,
+      disabled: refreshing,
+      title: config.refreshedAt ? `Last computed ${new Date(config.refreshedAt).toLocaleString()} \u2014 click to refresh` : "Compute & save this chart\u2019s data",
+      className: "absolute top-1 right-1 z-10 p-1 bg-midnight-elevated/80 border border-midnight-border text-midnight-text-muted hover:text-midnight-accent transition-colors",
+      children: /* @__PURE__ */ jsx(RefreshCw, { className: `w-3 h-3 ${refreshing ? "animate-spin" : ""}` })
+    }
+  ) : null;
   if (loading && !rows) {
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "Running\u2026" });
   }
+  if (!rows && !error && !canRefresh) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-1 px-2 text-center text-xs text-midnight-text-muted", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx("span", { children: "Chart data not available" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-midnight-text-subdued", children: "Download the dataset to view this chart." })
+    ] });
+  }
   if (error) {
-    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-red-400 px-2 text-center", children: error });
+    return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center h-full px-2 text-center text-xs text-red-400", children: [
+      refreshBtn,
+      error
+    ] });
   }
   if (!rows) return null;
+  let chart;
   if (chartType === "metric") {
     const first = rows[0];
     const v = first ? Object.values(first)[0] : 0;
-    return /* @__PURE__ */ jsx(MetricView, { value: Number(v) || 0, config: { column: config.column || "", agg: config.agg, label: config.label } });
-  }
-  const shaped = shapeChartData(chartType, rows, { yFields: config.yFields || [] });
-  switch (chartType) {
-    case "bar":
-      return /* @__PURE__ */ jsx(BarView, { data: shaped, groupColumn: config.group || "", valueColumn: config.value || "", style: config.style });
-    case "grouped-bar": {
-      const gb = shaped;
-      return /* @__PURE__ */ jsx(GroupedBarChart, { data: gb.data, keys: gb.keys, yFields: config.yFields || [], style: config.style });
+    chart = /* @__PURE__ */ jsx(MetricView, { value: Number(v) || 0, config: { column: config.column || "", agg: config.agg, label: config.label } });
+  } else {
+    const shaped = shapeChartData(chartType, rows, { yFields: config.yFields || [] });
+    switch (chartType) {
+      case "bar":
+        chart = /* @__PURE__ */ jsx(BarView, { data: shaped, groupColumn: config.group || "", valueColumn: config.value || "", style: config.style });
+        break;
+      case "grouped-bar": {
+        const gb = shaped;
+        chart = /* @__PURE__ */ jsx(GroupedBarChart, { data: gb.data, keys: gb.keys, yFields: config.yFields || [], style: config.style });
+        break;
+      }
+      case "pie":
+        chart = /* @__PURE__ */ jsx(PieView, { data: shaped, groupColumn: config.group || "", style: config.style });
+        break;
+      case "line":
+        chart = /* @__PURE__ */ jsx(LineView, { data: shaped, xColumn: config.x || "", yColumn: config.y || "", style: config.style });
+        break;
+      case "scatter":
+        chart = /* @__PURE__ */ jsx(ScatterView, { data: shaped, xColumn: config.x || "", yColumn: config.y || "", style: config.style });
+        break;
+      case "heatmap":
+        chart = shaped.length ? /* @__PURE__ */ jsx(HeatmapView, { data: shaped, rowColumn: config.row || "", colColumn: config.col || "", rowOrder: config.rowOrder, colOrder: config.colOrder, marginAgg: config.marginAgg, showTotals: config.showTotals, style: config.style }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "No data" });
+        break;
+      default:
+        chart = /* @__PURE__ */ jsxs("div", { className: "p-4 text-xs text-midnight-text-muted", children: [
+          "Unsupported SQL chart: ",
+          chartType
+        ] });
     }
-    case "pie":
-      return /* @__PURE__ */ jsx(PieView, { data: shaped, groupColumn: config.group || "", style: config.style });
-    case "line":
-      return /* @__PURE__ */ jsx(LineView, { data: shaped, xColumn: config.x || "", yColumn: config.y || "", style: config.style });
-    case "scatter":
-      return /* @__PURE__ */ jsx(ScatterView, { data: shaped, xColumn: config.x || "", yColumn: config.y || "", style: config.style });
-    case "heatmap":
-      return shaped.length ? /* @__PURE__ */ jsx(HeatmapView, { data: shaped, rowColumn: config.row || "", colColumn: config.col || "", rowOrder: config.rowOrder, colOrder: config.colOrder, marginAgg: config.marginAgg, showTotals: config.showTotals, style: config.style }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "No data" });
-    default:
-      return /* @__PURE__ */ jsxs("div", { className: "p-4 text-xs text-midnight-text-muted", children: [
-        "Unsupported SQL chart: ",
-        chartType
-      ] });
   }
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full", children: [
+    refreshBtn,
+    chart
+  ] });
 }
 function PanelContent({ panel, records, columns }) {
   const { type } = panel;