@prismiq/react 0.1.0 → 0.2.0

package/dist/{chunk-MOAEEF5P.js → chunk-JBJ5LEAG.js}

@@ -1,7 +1,7 @@
-import { ScatterChart, PieChart, AreaChart, LineChart, BarChart, MetricCard } from './chunk-2H5WTH4K.js';
-import { Dropdown, DropdownItem, Icon, DropdownSeparator, Button, Skeleton, EmptyState, Dialog, Input, Checkbox, DialogFooter, useAnalytics, useCrossFilterOptional, useDebouncedLayoutSave, AutoSaveIndicator, ResultsTable, CrossFilterProvider, QueryBuilder, SavedQueryPicker, useSchema, Select, CollapsibleSection, ColorPaletteSelector, FilterBuilder, TableSelector, JoinBuilder, TimeSeriesConfig, CalculatedFieldBuilder } from './chunk-UPYINBZU.js';
+import { ScatterChart, PieChart, AreaChart, LineChart, BarChart, MetricCard } from './chunk-FQ23KG6G.js';
+import { Dropdown, DropdownItem, Icon, DropdownSeparator, Button, Skeleton, EmptyState, Dialog, Input, Checkbox, DialogFooter, useAnalytics, useCrossFilterOptional, useDebouncedLayoutSave, AutoSaveIndicator, ResultsTable, CrossFilterProvider, useLLMStatus, Tooltip, QueryBuilder, SavedQueryPicker, SchemaExplorer, CustomSQLEditor, ChatPanel, useSchema, Select, CollapsibleSection, ColorPaletteSelector, FilterBuilder, TableSelector, JoinBuilder, TimeSeriesConfig, CalculatedFieldBuilder } from './chunk-GELI7MDZ.js';
 import { useTheme } from './chunk-T6STUE7E.js';
-import { formatRelativeTime, createDateFormatters, pivotQueryResult, parseMarkdownSafe, parseColumnRef } from './chunk-EX74SI67.js';
+import { formatRelativeTime, createDateFormatters, pivotQueryResult, parseMarkdownSafe, parseColumnRef } from './chunk-LBE6GIBC.js';
 import { createContext, forwardRef, useState, useEffect, useCallback, useRef, useMemo, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { WidthProvider, Responsive } from 'react-grid-layout/legacy';
@@ -169,6 +169,7 @@ function DashboardProvider({
   const clientRef = useRef(client);
   clientRef.current = client;
   const loadedDashboardRef = useRef(null);
+  const abortControllerRef = useRef(null);
   const setDashboardData = useCallback((data) => {
     setDashboard(data);
     const defaults = data.filters.filter((f) => f.default_value !== void 0).map((f) => ({
@@ -179,7 +180,8 @@ function DashboardProvider({
     if (!lazyLoadingEnabledRef.current) {
       const initialLoadingState = {};
       data.widgets.forEach((widget) => {
-        if (widget.query) {
+        const isSqlMode = widget.config?.data_source_mode === "sql" && widget.config?.raw_sql;
+        if (widget.query || isSqlMode) {
           initialLoadingState[widget.id] = true;
         }
       });
@@ -187,8 +189,9 @@ function DashboardProvider({
     }
   }, []);
   const executeWidgetQuery = useCallback(
-    async (widget, currentDashboard, currentFilters, currentCrossFilters, bypassCache = false) => {
-      if (!widget.query) {
+    async (widget, currentDashboard, currentFilters, currentCrossFilters, bypassCache = false, signal) => {
+      const isSqlMode = widget.config?.data_source_mode === "sql" && widget.config?.raw_sql;
+      if (!widget.query && !isSqlMode) {
         return;
       }
       setWidgetLoading((prev) => ({ ...prev, [widget.id]: true }));
@@ -201,22 +204,32 @@ function DashboardProvider({
         return next;
       });
       try {
-        let query = applyFiltersToQuery(
-          widget.query,
-          currentDashboard,
-          currentFilters
-        );
-        query = applyCrossFiltersToQuery(query, currentCrossFilters, widget.id);
-        const result = await client.executeQuery(query, bypassCache);
+        let result;
+        if (isSqlMode) {
+          result = await client.executeSQL(widget.config.raw_sql);
+        } else {
+          let query = applyFiltersToQuery(
+            widget.query,
+            currentDashboard,
+            currentFilters
+          );
+          query = applyCrossFiltersToQuery(query, currentCrossFilters, widget.id);
+          result = await client.executeQuery(query, bypassCache, signal);
+        }
+        if (signal?.aborted) return;
         setWidgetResults((prev) => ({ ...prev, [widget.id]: result }));
         const refreshTime = result.cached_at ?? Date.now() / 1e3;
         setWidgetRefreshTimes((prev) => ({ ...prev, [widget.id]: refreshTime }));
       } catch (err) {
+        if (err instanceof Error && err.name === "AbortError") {
+          return;
+        }
         setWidgetErrors((prev) => ({
           ...prev,
           [widget.id]: err instanceof Error ? err : new Error("Query failed")
         }));
       } finally {
+        if (signal?.aborted) return;
         setWidgetLoading((prev) => ({ ...prev, [widget.id]: false }));
         if (bypassCache) {
           setRefreshingWidgets((prev) => {
@@ -230,9 +243,12 @@ function DashboardProvider({
     [client]
   );
   const executeWidgetsInBatches = useCallback(
-    async (widgets, currentDashboard, currentFilters, currentCrossFilters, bypassCache = false, currentBatchSize = batchSize) => {
-      const widgetsWithQueries = widgets.filter((w) => w.query !== null);
+    async (widgets, currentDashboard, currentFilters, currentCrossFilters, bypassCache = false, currentBatchSize = batchSize, signal) => {
+      const widgetsWithQueries = widgets.filter(
+        (w) => w.query !== null || w.config?.data_source_mode === "sql" && w.config?.raw_sql
+      );
       for (let i = 0; i < widgetsWithQueries.length; i += currentBatchSize) {
+        if (signal?.aborted) return;
         const batch = widgetsWithQueries.slice(i, i + currentBatchSize);
         await Promise.all(
           batch.map(
@@ -241,7 +257,8 @@ function DashboardProvider({
               currentDashboard,
               currentFilters,
               currentCrossFilters,
-              bypassCache
+              bypassCache,
+              signal
             )
           )
         );
@@ -253,16 +270,19 @@ function DashboardProvider({
     async (currentDashboard, currentFilters, currentCrossFilters) => {
       const requestId = Math.random().toString(36).substring(2, 11);
       requestIdRef.current = requestId;
+      const signal = abortControllerRef.current?.signal;
       await executeWidgetsInBatches(
         currentDashboard.widgets,
         currentDashboard,
         currentFilters,
         currentCrossFilters,
-        false
+        false,
         // Don't bypass cache on initial load
+        batchSize,
+        signal
       );
     },
-    [executeWidgetsInBatches]
+    [executeWidgetsInBatches, batchSize]
   );
   const refreshDashboard = useCallback(async () => {
     if (!dashboard) return;
@@ -425,16 +445,19 @@ function DashboardProvider({
   useEffect(() => {
     if (!lazyLoadingEnabled || !dashboard || isLoading) return;
     const widgetsToLoad = dashboard.widgets.filter(
-      (w) => visibleWidgets.has(w.id) && w.query !== null && !widgetResults[w.id] && !widgetLoading[w.id]
+      (w) => visibleWidgets.has(w.id) && (w.query !== null || w.config?.data_source_mode === "sql" && w.config?.raw_sql) && !widgetResults[w.id] && !widgetLoading[w.id]
     );
     if (widgetsToLoad.length > 0) {
+      const signal = abortControllerRef.current?.signal;
       executeWidgetsInBatches(
         widgetsToLoad,
         dashboard,
         filterValues,
         crossFilters,
-        false
+        false,
         // Don't bypass cache
+        batchSize,
+        signal
       );
     }
   }, [
@@ -446,7 +469,8 @@ function DashboardProvider({
     widgetLoading,
     filterValues,
     crossFilters,
-    executeWidgetsInBatches
+    executeWidgetsInBatches,
+    batchSize
   ]);
   const filterValuesKey = JSON.stringify(filterValues);
   const prevFilterValuesRef = useRef(filterValuesKey);
@@ -455,16 +479,21 @@ function DashboardProvider({
     if (prevFilterValuesRef.current === filterValuesKey) return;
     prevFilterValuesRef.current = filterValuesKey;
     const widgetsToRefresh = dashboard.widgets.filter(
-      (w) => everVisibleWidgets.has(w.id) && w.query !== null && widgetResults[w.id]
+      (w) => everVisibleWidgets.has(w.id) && (w.query !== null || w.config?.data_source_mode === "sql" && w.config?.raw_sql) && widgetResults[w.id]
       // Only re-execute if previously loaded
     );
     if (widgetsToRefresh.length > 0) {
+      abortControllerRef.current?.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
       executeWidgetsInBatches(
         widgetsToRefresh,
         dashboard,
         filterValues,
         crossFilters,
-        false
+        false,
+        batchSize,
+        controller.signal
       );
     }
   }, [
@@ -476,8 +505,16 @@ function DashboardProvider({
     widgetResults,
     filterValues,
     crossFilters,
-    executeWidgetsInBatches
+    executeWidgetsInBatches,
+    batchSize
   ]);
+  useEffect(() => {
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    return () => {
+      controller.abort();
+    };
+  }, [dashboardId]);
   const contextValue = useMemo(
     () => ({
       dashboard,
@@ -1450,6 +1487,9 @@ function WidgetContent({
   if (widget.type === "text") {
     return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx(TextContent, { config: widget.config }) });
   }
+  if (!result && !error && widget.query) {
+    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx(LoadingState, {}) });
+  }
   if (!result || result.row_count === 0) {
     return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx(EmptyState2, {}) });
   }
@@ -1586,10 +1626,22 @@ function WidgetContent({
         const dimensionColumns = result.columns.filter(
           (col) => col !== widget.config.pivot_column && col !== widget.config.value_column
         );
+        let pivotColumnFormat;
+        if (widget.config.dateFormats?.[widget.config.pivot_column]) {
+          pivotColumnFormat = widget.config.dateFormats[widget.config.pivot_column];
+        } else if (widget.query) {
+          const pivotCol = widget.query.columns.find(
+            (c) => c.alias === widget.config.pivot_column || c.column === widget.config.pivot_column
+          );
+          if (pivotCol?.date_format) {
+            pivotColumnFormat = pivotCol.date_format;
+          }
+        }
         tableResult = pivotQueryResult(result, {
           pivotColumn: widget.config.pivot_column,
           valueColumn: widget.config.value_column,
-          dimensionColumns
+          dimensionColumns,
+          pivotColumnFormat
         });
       }
       const tableContainerStyle = {
@@ -2995,7 +3047,9 @@ function WidgetTypeSelector({
     borderRadius: theme.radius.sm,
     border: `2px solid ${isSelected ? theme.colors.primary : theme.colors.border}`,
     cursor: "pointer",
-    transition: "all 0.15s ease"
+    transition: "all 0.15s ease",
+    minWidth: 0
+    // Allow grid item to shrink below content width
   });
   const iconStyle = (isSelected) => ({
     width: "28px",
@@ -3022,9 +3076,7 @@ function WidgetTypeSelector({
   const descStyle = {
     fontSize: theme.fontSizes.xs,
     color: theme.colors.textMuted,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
+    whiteSpace: "nowrap"
   };
   return /* @__PURE__ */ jsxs("div", { className: `prismiq-widget-type-selector ${className}`, style: containerStyle, children: [
     /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Widget Type" }),
@@ -3074,6 +3126,7 @@ function WidgetPreview({
   title,
   config,
   query,
+  rawSql,
   result,
   isLoading = false,
   error,
@@ -3128,13 +3181,14 @@ function WidgetPreview({
   };
   const previewWidget = createPreviewWidget(type, title, config, query);
   const needsQuery = type !== "text";
-  const showEmptyState = needsQuery && !query && !isLoading;
-  return /* @__PURE__ */ jsxs("div", { className: `prismiq-widget-preview ${className}`, style: containerStyle, children: [
+  const hasDataSource = !!query || !!rawSql;
+  const showEmptyState = needsQuery && !hasDataSource && !isLoading;
+  return /* @__PURE__ */ jsxs("div", { className: `prismiq-widget-preview ${className}`, style: containerStyle, "data-testid": "widget-preview", children: [
     /* @__PURE__ */ jsxs("div", { style: headerStyle, children: [
       /* @__PURE__ */ jsx("h3", { style: titleStyle, children: title || "Widget Preview" }),
       /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Preview" })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: contentStyle, children: showEmptyState ? /* @__PURE__ */ jsxs("div", { style: emptyStateStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: contentStyle, children: showEmptyState ? /* @__PURE__ */ jsxs("div", { style: emptyStateStyle, "data-testid": "widget-preview-empty", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -3191,19 +3245,26 @@ function MetricConfig({
   onChange
 }) {
   const { theme } = useTheme();
+  const { getDisplayName } = useSchema();
   const initialTable = query?.tables[0]?.name ?? "";
   const initialAggregation = query?.columns[0]?.aggregation ?? "count";
-  const initialColumn = query?.columns[0]?.column ?? "*";
+  const rawInitialColumn = query?.columns[0]?.column ?? "*";
+  const needsColumnForInitial = AGGREGATIONS.find((a) => a.value === initialAggregation)?.needsColumn ?? false;
+  const initialColumn = rawInitialColumn === "*" && needsColumnForInitial ? "" : rawInitialColumn;
+  const initialFilters = (query?.filters ?? []).map((f) => ({
+    ...f,
+    table_id: "t1"
+  }));
   const [selectedTable, setSelectedTable] = useState(initialTable);
   const [aggregation, setAggregation] = useState(initialAggregation);
   const [selectedColumn, setSelectedColumn] = useState(initialColumn);
-  const [filters, setFilters] = useState(query?.filters ?? []);
+  const [filters, setFilters] = useState(initialFilters);
   const tableOptions = useMemo(() => {
     return schema.tables.map((t) => ({
       value: t.name,
-      label: t.name
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables]);
+  }, [schema.tables, getDisplayName]);
   const currentTable = useMemo(() => {
     return schema.tables.find((t) => t.name === selectedTable);
   }, [schema.tables, selectedTable]);
@@ -3218,8 +3279,12 @@ function MetricConfig({
   const needsColumn = useMemo(() => {
     return AGGREGATIONS.find((a) => a.value === aggregation)?.needsColumn ?? false;
   }, [aggregation]);
+  const isValidAggregation = useMemo(() => {
+    return AGGREGATIONS.some((a) => a.value === aggregation);
+  }, [aggregation]);
   useEffect(() => {
     if (!selectedTable) return;
+    if (!isValidAggregation) return;
     const tableId = "t1";
     const tables = [{ id: tableId, name: selectedTable }];
     const column = needsColumn ? selectedColumn : "*";
@@ -3237,7 +3302,7 @@ function MetricConfig({
       filters: filters.length > 0 ? filters : void 0
     };
     onChange(queryDef);
-  }, [selectedTable, aggregation, selectedColumn, needsColumn, filters, onChange]);
+  }, [selectedTable, aggregation, selectedColumn, needsColumn, isValidAggregation, filters, onChange]);
   const handleTableChange = useCallback((value) => {
     setSelectedTable(value);
     setSelectedColumn("");
@@ -3362,17 +3427,23 @@ function ChartConfig({
   onChange
 }) {
   const { theme } = useTheme();
+  const { getDisplayName } = useSchema();
   const initialTables = query?.tables ?? [];
   const groupByCol = query?.columns.find((c) => c.aggregation === "none");
   const initialGroupBy = groupByCol?.column ?? query?.group_by?.[0]?.column ?? "";
   const initialGroupByTableId = groupByCol?.table_id ?? query?.tables?.[0]?.id ?? "t1";
   const initialDateTrunc = groupByCol?.date_trunc ?? "";
-  const initialMeasures = query?.columns.filter((c) => c.aggregation !== "none").map((c) => ({
-    // Store as table-qualified ref so parseColumnRef can resolve it correctly
-    column: c.table_id ? `${c.table_id}.${c.column}` : c.column,
-    aggregation: c.aggregation,
-    table_id: c.table_id
-  })) ?? [];
+  const initialMeasures = query?.columns.filter((c) => c.aggregation !== "none").map((c) => {
+    const isStarWithNonCount = (c.column === "*" || c.column.endsWith(".*")) && c.aggregation !== "count";
+    const column = isStarWithNonCount ? "" : c.table_id ? `${c.table_id}.${c.column}` : c.column;
+    return {
+      column,
+      aggregation: c.aggregation,
+      table_id: c.table_id,
+      // Preserve original alias to maintain compatibility with widget config
+      alias: c.alias
+    };
+  }) ?? [];
   const initialJoins = query?.joins ?? [];
   const [tables, setTables] = useState(initialTables);
   const [joins, setJoins] = useState(initialJoins);
@@ -3393,9 +3464,9 @@ function ChartConfig({
   const tableOptions = useMemo(() => {
     return schema.tables.map((t) => ({
       value: t.name,
-      label: t.name
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables]);
+  }, [schema.tables, getDisplayName]);
   const currentTable = useMemo(() => {
     return schema.tables.find((t) => t.name === selectedTable);
   }, [schema.tables, selectedTable]);
@@ -3465,7 +3536,7 @@ function ChartConfig({
         const parsedMeasures = [];
         const invalidColumns = [];
         validMeasures.forEach((m, i) => {
-          const measureAlias = validMeasures.length > 1 ? `value_${i + 1}` : "value";
+          const measureAlias = m.alias ?? (validMeasures.length > 1 ? `value_${i + 1}` : "value");
           if (m.aggregation === "count" && (!m.column || m.column.endsWith(".*") || m.column === "*")) {
             parsedMeasures.push({
               table_id: m.table_id ?? tables[0]?.id ?? "t1",
@@ -3529,6 +3600,9 @@ function ChartConfig({
     setJoins(
       (prev) => prev.filter((j) => tableIds.has(j.from_table_id) && tableIds.has(j.to_table_id))
     );
+    setFilters(
+      (prev) => prev.filter((f) => tableIds.has(f.table_id))
+    );
     if (!tableIds.has(groupByTableId)) {
       setGroupByColumn("");
       setGroupByTableId(newTables[0]?.id ?? "t1");
@@ -3783,25 +3857,31 @@ function PieConfig({
   onChange
 }) {
   const { theme } = useTheme();
+  const { getDisplayName } = useSchema();
   const initialTable = query?.tables[0]?.name ?? "";
   const labelCol = query?.columns.find((c) => c.aggregation === "none");
   const initialLabel = labelCol?.column ?? "";
   const initialDateTrunc = labelCol?.date_trunc ?? "";
   const measureCol = query?.columns.find((c) => c.aggregation !== "none");
-  const initialValueColumn = measureCol?.column ?? "";
+  const rawInitialValueColumn = measureCol?.column ?? "";
   const initialAggregation = measureCol?.aggregation ?? "sum";
+  const initialValueColumn = rawInitialValueColumn === "*" && initialAggregation !== "count" ? "" : rawInitialValueColumn;
+  const initialFilters = (query?.filters ?? []).map((f) => ({
+    ...f,
+    table_id: "t1"
+  }));
   const [selectedTable, setSelectedTable] = useState(initialTable);
   const [labelColumn, setLabelColumn] = useState(initialLabel);
   const [dateTrunc, setDateTrunc] = useState(initialDateTrunc);
   const [valueColumn, setValueColumn] = useState(initialValueColumn);
   const [aggregation, setAggregation] = useState(initialAggregation);
-  const [filters, setFilters] = useState(query?.filters ?? []);
+  const [filters, setFilters] = useState(initialFilters);
   const tableOptions = useMemo(() => {
     return schema.tables.map((t) => ({
       value: t.name,
-      label: t.name
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables]);
+  }, [schema.tables, getDisplayName]);
   const currentTable = useMemo(() => {
     return schema.tables.find((t) => t.name === selectedTable);
   }, [schema.tables, selectedTable]);
@@ -3826,8 +3906,12 @@ function PieConfig({
       label: `${c.name} (${c.data_type})`
     }));
   }, [currentTable]);
+  const isValidAggregation = useMemo(() => {
+    return AGGREGATIONS3.some((a) => a.value === aggregation);
+  }, [aggregation]);
   useEffect(() => {
     if (!selectedTable || !labelColumn) return;
+    if (!isValidAggregation) return;
     const needsValueColumn = aggregation !== "count";
     if (needsValueColumn && !valueColumn) return;
     const tableId = "t1";
@@ -3857,7 +3941,7 @@ function PieConfig({
       order_by: [{ table_id: tableId, column: labelColumn, direction: "ASC" }]
     };
     onChange(queryDef);
-  }, [selectedTable, labelColumn, dateTrunc, valueColumn, aggregation, filters, onChange]);
+  }, [selectedTable, labelColumn, dateTrunc, valueColumn, aggregation, isValidAggregation, filters, onChange]);
   const handleTableChange = useCallback((value) => {
     setSelectedTable(value);
     setLabelColumn("");
@@ -3978,18 +4062,23 @@ function TableConfig({
   onChange
 }) {
   const { theme } = useTheme();
+  const { getDisplayName } = useSchema();
   const initialTable = query?.tables[0]?.name ?? "";
   const initialColumns = query?.columns.map((c) => c.column) ?? [];
+  const initialFilters = (query?.filters ?? []).map((f) => ({
+    ...f,
+    table_id: "t1"
+  }));
   const [selectedTable, setSelectedTable] = useState(initialTable);
   const [selectedColumns, setSelectedColumns] = useState(initialColumns);
-  const [filters, setFilters] = useState(query?.filters ?? []);
+  const [filters, setFilters] = useState(initialFilters);
   const [limit, setLimit] = useState(query?.limit ?? 100);
   const tableOptions = useMemo(() => {
     return schema.tables.map((t) => ({
       value: t.name,
-      label: t.name
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables]);
+  }, [schema.tables, getDisplayName]);
   const currentTable = useMemo(() => {
     return schema.tables.find((t) => t.name === selectedTable);
   }, [schema.tables, selectedTable]);
@@ -5291,6 +5380,7 @@ function WidgetEditorPage({
 }) {
   const { theme } = useTheme();
   const { client } = useAnalytics();
+  const { enabled: llmEnabled, isLoading: llmStatusLoading } = useLLMStatus();
   const isNew = widget === null;
   const [type, setType] = useState(widget?.type ?? "bar_chart");
   const [title, setTitle] = useState(widget?.title ?? "New Widget");
@@ -5302,8 +5392,10 @@ function WidgetEditorPage({
   const [position, setPosition] = useState(
     widget?.position ?? { x: 0, y: 0, w: 6, h: 4, minW: 2, minH: 2 }
   );
+  const [rawSql, setRawSql] = useState(widget?.config?.raw_sql ?? "");
+  const [schemaOpen, setSchemaOpen] = useState(true);
   const [dataSourceMode, setDataSourceMode] = useState(
-    isNew ? "guided" : widget?.dataSourceMode ?? "guided"
+    isNew ? "guided" : widget?.config?.data_source_mode ?? "guided"
   );
   const [previewResult, setPreviewResult] = useState(null);
   const [previewLoading, setPreviewLoading] = useState(false);
@@ -5326,6 +5418,24 @@ function WidgetEditorPage({
     []
   );
   const refreshPreview = useCallback(async () => {
+    if (dataSourceMode === "sql") {
+      if (!rawSql.trim() || !client) {
+        setPreviewResult(null);
+        return;
+      }
+      setPreviewLoading(true);
+      setPreviewError(null);
+      try {
+        const result = await client.executeSQL(rawSql);
+        setPreviewResult(result);
+      } catch (err) {
+        setPreviewError(err instanceof Error ? err : new Error("SQL execution failed"));
+        setPreviewResult(null);
+      } finally {
+        setPreviewLoading(false);
+      }
+      return;
+    }
     if (!query || !client) {
       setPreviewResult(null);
       return;
@@ -5341,15 +5451,38 @@ function WidgetEditorPage({
     } finally {
       setPreviewLoading(false);
     }
-  }, [query, client]);
+  }, [query, rawSql, dataSourceMode, client]);
   useEffect(() => {
+    if (dataSourceMode === "sql") {
+      return;
+    }
     if (query) {
       void refreshPreview();
     } else {
       setPreviewResult(null);
       setPreviewError(null);
     }
-  }, [query, refreshPreview]);
+  }, [query, dataSourceMode, refreshPreview]);
+  const queryHasAdvancedFeatures = useCallback((q) => {
+    if (!q) return false;
+    if (q.tables && q.tables.length > 1 && q.joins && q.joins.length > 0) return true;
+    if (q.calculated_fields && q.calculated_fields.length > 0) return true;
+    if (q.group_by && q.group_by.length > 0) return true;
+    if (q.order_by && q.order_by.length > 0) return true;
+    if (q.limit != null) return true;
+    if (q.offset != null) return true;
+    if (q.time_series) return true;
+    return false;
+  }, []);
+  const handleModeSwitch = useCallback((newMode) => {
+    if (newMode === "guided" && (dataSourceMode === "advanced" || dataSourceMode === "saved") && queryHasAdvancedFeatures(query)) {
+      const confirmed = window.confirm(
+        "This query uses advanced features (e.g. joins, calculated fields, grouping, sorting, pagination, time series) that Guided mode may not fully represent. The query will be preserved but some settings may not be editable in Guided mode.\n\nSwitch to Guided mode?"
+      );
+      if (!confirmed) return;
+    }
+    setDataSourceMode(newMode);
+  }, [dataSourceMode, query, queryHasAdvancedFeatures]);
   const handleSavedQuerySelect = useCallback((savedQuery) => {
     setQuery(savedQuery.query);
   }, []);
@@ -5361,19 +5494,25 @@ function WidgetEditorPage({
     setPreviewResult(null);
     setPreviewError(null);
   }, []);
+  const handleApplySql = useCallback((sql) => {
+    setRawSql(sql);
+  }, []);
   const handleSave = useCallback(() => {
+    const savedConfig = { ...config, data_source_mode: dataSourceMode };
+    if (dataSourceMode === "sql") {
+      savedConfig.raw_sql = rawSql.trim() || void 0;
+    }
     const savedWidget = {
       id: widget?.id ?? generateId(),
       type,
       title,
-      config,
-      query,
+      config: savedConfig,
+      query: dataSourceMode === "sql" ? null : query,
       position,
-      hyperlink,
-      dataSourceMode
+      hyperlink
     };
     onSave(savedWidget);
-  }, [widget, type, title, config, query, position, hyperlink, dataSourceMode, onSave]);
+  }, [widget, type, title, config, query, rawSql, position, hyperlink, dataSourceMode, onSave]);
   const columnSelectOptions = useMemo(() => {
     if (!schema) return [];
     return schema.tables.flatMap(
@@ -5396,7 +5535,8 @@ function WidgetEditorPage({
     justifyContent: "space-between",
     padding: `${theme.spacing.md} ${theme.spacing.lg}`,
     borderBottom: `1px solid ${theme.colors.border}`,
-    backgroundColor: theme.colors.surface
+    backgroundColor: theme.colors.surface,
+    flexShrink: 0
   };
   const headerLeftStyle = {
     display: "flex",
@@ -5427,38 +5567,28 @@ function WidgetEditorPage({
   };
   const bodyStyle = {
     flex: 1,
-    display: "flex",
-    minHeight: 0
+    overflow: "auto",
+    display: "grid",
+    gridTemplateColumns: "360px 1fr"
   };
   const leftPanelStyle = {
-    width: "320px",
-    flexShrink: 0,
     borderRight: `1px solid ${theme.colors.border}`,
-    overflow: "auto",
     padding: theme.spacing.md,
+    paddingBottom: theme.spacing.xl,
     display: "flex",
     flexDirection: "column",
     gap: theme.spacing.lg
   };
   const mainPanelStyle = {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    minHeight: 0
+    minWidth: 0
   };
   const previewPanelStyle = {
-    height: "300px",
-    flexShrink: 0,
-    padding: theme.spacing.md,
-    borderBottom: `1px solid ${theme.colors.border}`
-  };
-  const dataSourcePanelStyle = {
-    flex: "1 1 auto",
-    display: "flex",
-    flexDirection: "column",
-    minHeight: 0,
+    height: "440px",
+    padding: theme.spacing.lg,
+    borderBottom: `1px solid ${theme.colors.border}`,
     overflow: "hidden"
   };
+  const dataSourcePanelStyle = {};
   const dataSourceHeaderStyle = {
     display: "flex",
     alignItems: "center",
@@ -5478,15 +5608,12 @@ function WidgetEditorPage({
     transition: "all 0.15s ease"
   });
   const dataSourceContentStyle = {
-    flex: "1 1 auto",
-    overflow: "auto",
     padding: theme.spacing.md,
-    paddingBottom: "100px",
-    // Extra space to ensure filter buttons are visible
-    minHeight: "250px"
+    paddingBottom: "200px"
+    // Extra padding to create scroll room for filters
   };
   const sectionStyle = {
-    marginBottom: theme.spacing.md
+    // Note: Parent has flex gap for spacing between sections
   };
   const sectionTitleStyle = {
     fontSize: theme.fontSizes.xs,
@@ -5871,6 +5998,7 @@ function WidgetEditorPage({
             title,
             config,
             query,
+            rawSql: dataSourceMode === "sql" ? rawSql : void 0,
             result: previewResult,
             isLoading: previewLoading,
             error: previewError
@@ -5880,30 +6008,57 @@ function WidgetEditorPage({
           /* @__PURE__ */ jsxs("div", { style: dataSourceHeaderStyle, children: [
             /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes.sm, fontWeight: 500, marginRight: "auto" }, children: "Data Source" }),
             /* @__PURE__ */ jsx(
-              "button",
+              Tooltip,
               {
-                type: "button",
-                style: tabStyle(dataSourceMode === "guided"),
-                onClick: () => setDataSourceMode("guided"),
-                children: "Guided"
+                content: "Quick setup: pick columns from dropdowns to build your chart",
+                position: "bottom",
+                style: { whiteSpace: "normal" },
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": "data-source-mode-guided",
+                    style: tabStyle(dataSourceMode === "guided"),
+                    onClick: () => handleModeSwitch("guided"),
+                    children: "Guided"
+                  }
+                )
               }
             ),
             /* @__PURE__ */ jsx(
-              "button",
+              Tooltip,
               {
-                type: "button",
-                style: tabStyle(dataSourceMode === "advanced"),
-                onClick: () => setDataSourceMode("advanced"),
-                children: "Advanced"
+                content: "Full control: combine tables, add filters, and create custom calculations",
+                position: "bottom",
+                style: { whiteSpace: "normal" },
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": "data-source-mode-advanced",
+                    style: tabStyle(dataSourceMode === "advanced"),
+                    onClick: () => handleModeSwitch("advanced"),
+                    children: "Advanced"
+                  }
+                )
               }
             ),
             /* @__PURE__ */ jsx(
-              "button",
+              Tooltip,
               {
-                type: "button",
-                style: tabStyle(dataSourceMode === "saved"),
-                onClick: () => setDataSourceMode("saved"),
-                children: "Saved Query"
+                content: "Write raw SQL queries directly, with optional AI assistance",
+                position: "bottom",
+                style: { whiteSpace: "normal" },
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": "data-source-mode-sql",
+                    style: tabStyle(dataSourceMode === "sql"),
+                    onClick: () => handleModeSwitch("sql"),
+                    children: "SQL"
+                  }
+                )
               }
             )
           ] }),
@@ -5936,7 +6091,100 @@ function WidgetEditorPage({
                 onSelect: handleSavedQuerySelect,
                 showSave: false
               }
-            )
+            ),
+            dataSourceMode === "sql" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 0, height: "100%", minHeight: "400px" }, children: [
+              /* @__PURE__ */ jsx("div", { "data-testid": "schema-panel", style: {
+                width: schemaOpen ? "220px" : "36px",
+                flexShrink: 0,
+                transition: "width 0.2s ease",
+                borderRight: `1px solid ${theme.colors.border}`,
+                display: "flex",
+                flexDirection: "column",
+                overflow: "hidden"
+              }, children: schemaOpen ? /* @__PURE__ */ jsx(
+                SchemaExplorer,
+                {
+                  searchable: true,
+                  collapsible: true,
+                  onColumnSelect: (table, col) => {
+                    const ref = `"${table.name}"."${col.name}"`;
+                    setRawSql((prev) => prev ? `${prev} ${ref}` : ref);
+                  },
+                  headerAction: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setSchemaOpen(false),
+                      title: "Collapse schema panel",
+                      "data-testid": "schema-toggle-open",
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: "22px",
+                        height: "22px",
+                        backgroundColor: "transparent",
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: theme.radius.sm,
+                        cursor: "pointer",
+                        color: theme.colors.textMuted,
+                        flexShrink: 0
+                      },
+                      children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 12 })
+                    }
+                  ),
+                  style: { flex: 1, border: "none", borderRadius: 0 }
+                }
+              ) : /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSchemaOpen(true),
+                  title: "Show schema browser",
+                  "data-testid": "schema-toggle-collapsed",
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: "6px",
+                    paddingTop: theme.spacing.sm,
+                    width: "100%",
+                    height: "100%",
+                    backgroundColor: theme.colors.surface,
+                    border: "none",
+                    cursor: "pointer",
+                    color: theme.colors.textMuted,
+                    fontFamily: theme.fonts.sans
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "table", size: 16 }),
+                    /* @__PURE__ */ jsx("span", { style: {
+                      writingMode: "vertical-rl",
+                      fontSize: "11px",
+                      fontWeight: 500,
+                      letterSpacing: "0.04em"
+                    }, children: "Schema" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, "data-testid": "sql-editor", children: /* @__PURE__ */ jsx(
+                CustomSQLEditor,
+                {
+                  initialSql: rawSql,
+                  onSqlChange: setRawSql,
+                  onExecute: () => void refreshPreview(),
+                  showResults: false,
+                  placeholder: "Write your SQL query here..."
+                }
+              ) }),
+              !llmStatusLoading && llmEnabled && /* @__PURE__ */ jsx("div", { style: { width: "340px", flexShrink: 0 }, "data-testid": "chat-panel", children: /* @__PURE__ */ jsx(
+                ChatPanel,
+                {
+                  currentSql: rawSql || null,
+                  onApplySql: handleApplySql
+                }
+              ) })
+            ] })
           ] })
         ] })
       ] })
@@ -6018,7 +6266,9 @@ function DashboardEditor({
   clientRef.current = client;
   const loadedDashboardRef = useRef(null);
   const executeWidgetQueries = useCallback(async (widgets, currentClient) => {
-    const widgetsWithQueries = widgets.filter((w) => w.query);
+    const widgetsWithQueries = widgets.filter(
+      (w) => w.query || w.config?.data_source_mode === "sql" && w.config?.raw_sql
+    );
     if (widgetsWithQueries.length === 0) return;
     for (let i = 0; i < widgetsWithQueries.length; i += batchSize) {
       const batch = widgetsWithQueries.slice(i, i + batchSize);
@@ -6032,7 +6282,8 @@ function DashboardEditor({
       await Promise.all(
         batch.map(async (widget) => {
           try {
-            const result = await currentClient.executeQuery(widget.query);
+            const isSqlMode = widget.config?.data_source_mode === "sql" && widget.config?.raw_sql;
+            const result = isSqlMode ? await currentClient.executeSQL(widget.config.raw_sql) : await currentClient.executeQuery(widget.query);
             setWidgetResults((prev) => ({ ...prev, [widget.id]: result }));
             setWidgetRefreshTimes((prev) => ({ ...prev, [widget.id]: Math.floor(Date.now() / 1e3) }));
           } catch (err) {
@@ -6109,11 +6360,12 @@ function DashboardEditor({
   const refreshWidget = useCallback(
     async (widgetId, widgetOverride) => {
       const widget = widgetOverride ?? dashboard.widgets.find((w) => w.id === widgetId);
-      if (!widget?.query || !client) return;
+      const isSqlMode = widget?.config?.data_source_mode === "sql" && widget?.config?.raw_sql;
+      if (!widget?.query && !isSqlMode || !client) return;
       setWidgetLoading((prev) => ({ ...prev, [widgetId]: true }));
       setRefreshingWidgets((prev) => new Set(prev).add(widgetId));
       try {
-        const result = await client.executeQuery(widget.query, true);
+        const result = isSqlMode ? await client.executeSQL(widget.config.raw_sql) : await client.executeQuery(widget.query, true);
         setWidgetResults((prev) => ({ ...prev, [widgetId]: result }));
         setWidgetRefreshTimes((prev) => ({ ...prev, [widgetId]: Math.floor(Date.now() / 1e3) }));
         setWidgetErrors((prev) => {
@@ -7506,5 +7758,5 @@ var DashboardDialog = forwardRef(
 );
 
 export { Dashboard, DashboardCard, DashboardContext, DashboardDialog, DashboardEditor, DashboardLayout, DashboardList, DashboardProvider, DateRangeFilter, EditableDashboardLayout, EditorToolbar, FilterBar, LazyWidget, MultiSelectFilter, SelectFilter, TextFilter, Widget, WidgetContainer, WidgetContent, WidgetEditor, WidgetEditorPage, WidgetHeader, WidgetPalette, WidgetPlaceholder, WidgetPreview, WidgetTypeSelector, useAutoRefresh, useDashboard, useDashboardFilters, useFullscreen, useWidget, useWidgetVisibility };
-//# sourceMappingURL=chunk-MOAEEF5P.js.map
-//# sourceMappingURL=chunk-MOAEEF5P.js.map
+//# sourceMappingURL=chunk-JBJ5LEAG.js.map
+//# sourceMappingURL=chunk-JBJ5LEAG.js.map