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

package/dist/index.cjs

@@ -38,6 +38,7 @@ function useCapabilities() {
     canDelete: !!c.deleteDashboard,
     canAnalyze: !!c.analyzeDataset,
     canRefine: !!c.refineDashboard,
+    canNew: !!c.newDashboard,
     canAddPanel: !!c.addPanel,
     canEditPanels: !!c.removePanel
   };
@@ -648,18 +649,19 @@ var renderCell = (v) => {
   if (typeof v === "boolean") return v ? "true" : "false";
   return String(v);
 };
-function SqlConsole({ columns = [], stateId }) {
+function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, defaultSql = DEFAULT_SQL, autoRun = false }) {
   const { theme, runQuery } = useDashboard();
-  const [sql, setSql] = react.useState(DEFAULT_SQL);
+  const [sql, setSql] = react.useState(defaultSql);
   const [result, setResult] = react.useState(null);
   const [error, setError] = react.useState(null);
   const [running, setRunning] = react.useState(false);
-  const run = async () => {
-    if (running || !sql.trim()) return;
+  const [columnsOpen, setColumnsOpen] = react.useState(defaultColumnsOpen);
+  const run = async (text = sql) => {
+    if (running || !text.trim()) return;
     setRunning(true);
     setError(null);
     try {
-      const data = await runQuery(sql, stateId);
+      const data = await runQuery(text, stateId);
       setResult({ columns: data.columns || [], rows: data.rows || [] });
     } catch (err) {
       setResult(null);
@@ -668,6 +670,11 @@ function SqlConsole({ columns = [], stateId }) {
       setRunning(false);
     }
   };
+  react.useEffect(() => {
+    if (!autoRun || !stateId) return;
+    setSql(defaultSql);
+    void run(defaultSql);
+  }, [stateId, autoRun, defaultSql]);
   const onKeyDown = (e) => {
     if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
       e.preventDefault();
@@ -708,19 +715,34 @@ function SqlConsole({ columns = [], stateId }) {
           placeholder: "SELECT ... FROM data"
         }
       ),
-      columns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-1", children: columns.map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          title: `Insert ${c.name}`,
-          onClick: () => setSql((s) => `${s}${s.endsWith(" ") || s.endsWith("\n") || !s ? "" : " "}${c.name}`),
-          className: "px-1.5 py-0.5 border border-midnight-border text-[11px] font-mono text-midnight-text-muted hover:bg-midnight-raised transition-colors",
-          children: [
-            c.name,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-50 ml-1", children: c.type })
-          ]
-        },
-        c.name
-      )) })
+      columns.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => setColumnsOpen((o) => !o),
+            className: "flex items-center gap-1 text-[11px] font-mono text-midnight-text-muted hover:text-midnight-text-body transition-colors",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `w-3 h-3 transition-transform ${columnsOpen ? "" : "-rotate-90"}` }),
+              "Columns (",
+              columns.length,
+              ")"
+            ]
+          }
+        ),
+        columnsOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5 flex flex-wrap gap-1", children: columns.map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            title: `Insert ${c.name}`,
+            onClick: () => setSql((s) => `${s}${s.endsWith(" ") || s.endsWith("\n") || !s ? "" : " "}${c.name}`),
+            className: "px-1.5 py-0.5 border border-midnight-border text-[11px] font-mono text-midnight-text-muted hover:bg-midnight-raised transition-colors",
+            children: [
+              c.name,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-50 ml-1", children: c.type })
+            ]
+          },
+          c.name
+        )) })
+      ] })
     ] }),
     (result || error) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex items-center gap-4 px-3 py-1.5 border-b ${theme.border} text-xs font-mono shrink-0 ${error ? "text-red-400" : "text-midnight-text-muted"}`, children: error ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-3.5 h-3.5" }),
@@ -1611,6 +1633,11 @@ function ModeTab({ active, onClick, icon: Icon, label }) {
     }
   );
 }
+var MODE_TABS = [
+  { mode: "dashboard", icon: lucideReact.Sparkles, label: "Dashboard" },
+  { mode: "builder", icon: lucideReact.BarChart3, label: "Chart Builder" },
+  { mode: "sql", icon: lucideReact.Terminal, label: "SQL" }
+];
 function DataExplorer({
   records,
   columns,
@@ -1622,12 +1649,15 @@ function DataExplorer({
   savedDashboards = [],
   loading = false,
   analyzing = false,
+  defaultMode = "dashboard",
+  tabs = ["dashboard", "builder", "sql"],
   onSelectState,
   onRefreshStates
 }) {
-  const { theme, addPanel, saveDashboard, listDashboards, searchDashboards, loadDashboard, deleteDashboard, analyzeDataset, refineDashboard } = useDashboard();
+  const { theme, newDashboard, addPanel, saveDashboard, listDashboards, searchDashboards, loadDashboard, deleteDashboard, analyzeDataset, refineDashboard } = useDashboard();
   const caps = useCapabilities();
-  const [mode, setMode] = react.useState("dashboard");
+  const visibleTabs = MODE_TABS.filter((t) => tabs.includes(t.mode));
+  const [mode, setMode] = react.useState(tabs.includes(defaultMode) ? defaultMode : tabs[0] ?? "sql");
   const [fullscreen, setFullscreen] = react.useState(false);
   const [showSaved, setShowSaved] = react.useState(false);
   const [saveName, setSaveName] = react.useState("");
@@ -1692,9 +1722,22 @@ function DataExplorer({
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mb-3 shrink-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ModeTab, { active: mode === "dashboard", onClick: () => setMode("dashboard"), icon: lucideReact.Sparkles, label: "Dashboard" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ModeTab, { active: mode === "builder", onClick: () => setMode("builder"), icon: lucideReact.BarChart3, label: "Chart Builder" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ModeTab, { active: mode === "sql", onClick: () => setMode("sql"), icon: lucideReact.Terminal, label: "SQL" }),
+        visibleTabs.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ModeTab, { active: mode === t.mode, onClick: () => setMode(t.mode), icon: t.icon, label: t.label }, t.mode)),
+        caps.canNew && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => {
+              newDashboard?.();
+              setMode("builder");
+            },
+            title: "Start a new dashboard",
+            className: "flex items-center gap-1 px-2 py-1 text-xs font-mono border border-midnight-border text-midnight-text-muted hover:bg-midnight-raised hover:text-midnight-accent transition-colors",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3.5 h-3.5" }),
+              " New Dashboard"
+            ]
+          }
+        ),
         showPersistence && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
           caps.canSave && showSaveInput && /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -1763,14 +1806,39 @@ function DataExplorer({
           )
         ] }, d.id))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `border ${theme.border} bg-midnight-surface flex-1 flex flex-col min-h-0`, children: mode === "sql" ? /* @__PURE__ */ jsxRuntime.jsx(SqlConsole, { columns, stateId: activeStateId ?? void 0 }) : mode === "builder" ? /* @__PURE__ */ jsxRuntime.jsx(ChartBuilder, { records, columns, stateId: activeStateId ?? void 0, onSave: addPanel }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `border ${theme.border} bg-midnight-surface flex-1 flex flex-col min-h-0`, children: mode === "sql" ? /* @__PURE__ */ jsxRuntime.jsx(SqlConsole, { columns, stateId: activeStateId ?? void 0 }) : mode === "builder" ? /* @__PURE__ */ jsxRuntime.jsx(
+        ChartBuilder,
+        {
+          records,
+          columns,
+          stateId: activeStateId ?? void 0,
+          onSave: addPanel ? (panel) => {
+            addPanel(panel);
+            setMode("dashboard");
+          } : void 0
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: dashboard ? /* @__PURE__ */ jsxRuntime.jsx(DashboardRenderer, { dashboard, records, columns }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-4 text-midnight-text-muted", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-8 h-8" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: caps.canAnalyze ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             "Click ",
             /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Auto-Analyze" }),
             " to generate an AI dashboard"
-          ] }) : "No dashboard to display" })
+          ] }) : caps.canNew ? "Start a new dashboard, then add charts from the Chart Builder" : "No dashboard to display" }),
+          caps.canNew && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => {
+                newDashboard?.();
+                setMode("builder");
+              },
+              className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono border border-midnight-accent text-midnight-accent hover:bg-midnight-accent/10 transition-colors",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4" }),
+                " Create Dashboard"
+              ]
+            }
+          )
         ] }) }),
         dashboard && caps.canRefine && refineDashboard && /* @__PURE__ */ jsxRuntime.jsx(ChatInput, { onSend: refineDashboard, loading: analyzing, theme })
       ] }) })