@quantumwake/terminal-ux-dashboard-components 0.1.5 → 0.1.8

package/dist/index.js

@@ -8,6 +8,9 @@ import { ResponsiveHeatMap } from '@nivo/heatmap';
 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, PostgreSQL, schemaCompletionSource, keywordCompletionSource } from '@codemirror/lang-sql';
+import { snippetCompletion, completeFromList, autocompletion, acceptCompletion } from '@codemirror/autocomplete';
 
 // src/context/DashboardContext.tsx
 var DashboardContext = createContext(null);
@@ -636,6 +639,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 "";
@@ -645,12 +922,12 @@ var renderCell = (v) => {
 };
 function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, defaultSql = DEFAULT_SQL, autoRun = false }) {
   const { theme, runQuery } = useDashboard();
-  const [sql, setSql] = useState(defaultSql);
+  const [sql$1, setSql] = useState(defaultSql);
   const [result, setResult] = useState(null);
   const [error, setError] = useState(null);
   const [running, setRunning] = useState(false);
   const [columnsOpen, setColumnsOpen] = useState(defaultColumnsOpen);
-  const run = async (text = sql) => {
+  const run = async (text = sql$1) => {
     if (running || !text.trim()) return;
     setRunning(true);
     setError(null);
@@ -669,12 +946,38 @@ function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, default
     setSql(defaultSql);
     void run(defaultSql);
   }, [stateId, autoRun, defaultSql]);
-  const onKeyDown = (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-      e.preventDefault();
-      void run();
-    }
+  const runRef = useRef(() => {
+  });
+  runRef.current = () => {
+    void run();
   };
+  const schemaKey = columns.map((c) => c.name).join(",");
+  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;
+        } },
+        { 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: [
@@ -687,7 +990,7 @@ function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, default
           "button",
           {
             onClick: () => void run(),
-            disabled: running || !sql.trim(),
+            disabled: running || !sql$1.trim(),
             className: `flex items-center gap-1.5 px-3 py-1 border text-xs font-mono transition-colors ${running ? "border-midnight-border opacity-50" : "border-midnight-accent text-midnight-accent hover:bg-midnight-accent/10"}`,
             children: [
               running ? /* @__PURE__ */ jsx(Loader2, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "w-3.5 h-3.5" }),
@@ -698,15 +1001,16 @@ function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, default
         )
       ] }),
       /* @__PURE__ */ jsx(
-        "textarea",
+        CodeMirror,
         {
-          value: sql,
-          onChange: (e) => setSql(e.target.value),
-          onKeyDown,
-          spellCheck: false,
-          rows: 5,
-          className: "w-full bg-midnight-surface border border-midnight-border px-3 py-2 text-sm font-mono outline-none text-midnight-text-body resize-y focus:border-midnight-accent transition-colors",
-          placeholder: "SELECT ... FROM data"
+          value: sql$1,
+          onChange: setSql,
+          extensions,
+          theme: "dark",
+          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"
         }
       ),
       columns.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [