@quantumwake/terminal-ux-dashboard-components 0.1.12 → 0.1.13

package/dist/index.cjs

@@ -142,8 +142,10 @@ var buildChartSQL = ({
     }
     case "scatter": {
       if (!x || !y) return null;
-      const w = where ? `${where} AND ${qIdent(x)} IS NOT NULL AND ${qIdent(y)} IS NOT NULL` : ` WHERE ${qIdent(x)} IS NOT NULL AND ${qIdent(y)} IS NOT NULL`;
-      return `SELECT ${qIdent(x)} AS x, ${qIdent(y)} AS y FROM ${TABLE}${w} LIMIT ${MAX_POINTS}`;
+      const nx = `TRY_CAST(${qIdent(x)} AS DOUBLE)`, ny = `TRY_CAST(${qIdent(y)} AS DOUBLE)`;
+      const extra = `${nx} IS NOT NULL AND ${ny} IS NOT NULL`;
+      const w = where ? `${where} AND ${extra}` : ` WHERE ${extra}`;
+      return `SELECT ${nx} AS x, ${ny} AS y FROM ${TABLE}${w} LIMIT ${MAX_POINTS}`;
     }
     case "heatmap": {
       if (!x || !y) return null;
@@ -175,7 +177,10 @@ var shapeChartData = (chartType, rows, { yFields = [] } = {}) => {
     case "line":
       return [{ id: "series", data: rows.map((r) => ({ x: String(r.x), y: Number(r.y) || 0 })) }];
     case "scatter":
-      return [{ id: "points", data: rows.map((r) => ({ x: Number(r.x) || 0, y: Number(r.y) || 0 })) }];
+      return [{
+        id: "points",
+        data: rows.map((r) => ({ x: Number(r.x), y: Number(r.y) })).filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y))
+      }];
     case "heatmap": {
       const rowKeys = [];
       const colKeys = [];
@@ -217,10 +222,24 @@ var DEFAULT_CHART_STYLE = {
   xLegendOffset: 46,
   yLegendPosition: "middle",
   yLegendOffset: -50,
+  // Custom axis title text + visibility.
+  xAxisLabel: "",
+  yAxisLabel: "",
+  showXLegend: true,
+  showYLegend: true,
+  // Axis title emphasis.
+  legendBold: false,
+  legendHighlight: "",
+  // Tick overflow handling.
+  xTickRotation: -35,
+  tickTruncate: 0,
   // Series legend placement (charts that have one: pie, grouped bar).
   legendAnchor: "right",
-  // Panel title alignment (rendered by DashboardRenderer's panel header).
-  titleAlign: "left"
+  // Panel title (rendered by DashboardRenderer's panel header).
+  titleAlign: "left",
+  titleBold: false,
+  titleBackground: "",
+  titleColor: ""
 };
 var LEGEND_ANCHORS = ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"];
 var withStyleDefaults = (style) => ({
@@ -234,7 +253,17 @@ var buildNivoTheme = (style) => {
     text: { fill: s.textColor, fontSize: s.fontSize },
     axis: {
       ticks: { text: { fill: s.textColor, fontSize: s.fontSize } },
-      legend: { text: { fill: s.legendColor, fontSize: s.fontSize + 2 } }
+      legend: {
+        text: {
+          fill: s.legendColor,
+          fontSize: s.fontSize + 2,
+          fontWeight: s.legendBold ? 700 : 400,
+          // A highlight is drawn as a text outline (halo) — the clean,
+          // SVG-native way to make an axis title stand out.
+          outlineWidth: s.legendHighlight ? 3 : 0,
+          outlineColor: s.legendHighlight || "transparent"
+        }
+      }
     },
     grid: { line: { stroke: s.gridColor } },
     crosshair: { line: { stroke: s.textColor, strokeDasharray: "6 6" } },
@@ -263,14 +292,25 @@ var legendConfig = (style) => {
   const ty = s.legendAnchor.includes("top") ? 10 : -10;
   return { ...base, translateX: tx, translateY: ty };
 };
-var axisLegend = (style, axis, legendText) => {
+var truncate = (v, n) => {
+  const str = String(v);
+  return n > 0 && str.length > n ? `${str.slice(0, n)}\u2026` : str;
+};
+var axisLegend = (style, axis, columnName, opts2 = {}) => {
   const s = withStyleDefaults(style);
   const isX = axis === "x";
-  return {
-    legend: legendText,
-    legendPosition: isX ? s.xLegendPosition : s.yLegendPosition,
-    legendOffset: isX ? s.xLegendOffset : s.yLegendOffset
-  };
+  const show = isX ? s.showXLegend : s.showYLegend;
+  const label = (isX ? s.xAxisLabel : s.yAxisLabel) || columnName;
+  const out = {};
+  if (show && label) {
+    out.legend = label;
+    out.legendPosition = isX ? s.xLegendPosition : s.yLegendPosition;
+    out.legendOffset = isX ? s.xLegendOffset : s.yLegendOffset;
+  }
+  if (isX) out.tickRotation = s.xTickRotation;
+  if (opts2.numeric) out.format = (v) => Number(v).toLocaleString();
+  else if (s.tickTruncate > 0) out.format = (v) => truncate(v, s.tickTruncate);
+  return out;
 };
 
 // src/dataShape.ts
@@ -334,8 +374,8 @@ function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: pre
       padding: 0.3,
       colors: ["rgba(74, 222, 128, 0.8)"],
       borderColor: { from: "color", modifiers: [["darker", 1.6]] },
-      axisBottom: { tickSize: 5, tickPadding: 5, tickRotation: -35 },
-      axisLeft: { tickSize: 5, tickPadding: 5, format: (v) => Number(v).toLocaleString() },
+      axisBottom: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "x", groupColumn) },
+      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", valueColumn, { numeric: true }) },
       labelSkipWidth: 12,
       labelSkipHeight: 12,
       labelTextColor: { from: "color", modifiers: [["darker", 3]] },
@@ -408,8 +448,8 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
       pointBorderWidth: 2,
       pointBorderColor: { from: "serieColor" },
       enableGridX: false,
-      axisBottom: { tickSize: 5, tickPadding: 5, tickRotation: -35, ...axisLegend(style, "x", xColumn) },
-      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", yColumn) },
+      axisBottom: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "x", xColumn) },
+      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", yColumn, { numeric: true }) },
       useMesh: true,
       theme: buildNivoTheme(style)
     }
@@ -418,7 +458,7 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
 function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
   const computed = react.useMemo(() => {
     if (presetData || !records) return [];
-    const points = records.filter((r) => r[xColumn] != null && r[yColumn] != null).map((r) => ({ x: Number(r[xColumn]) || 0, y: Number(r[yColumn]) || 0 })).slice(0, 1e3);
+    const points = records.map((r) => ({ x: Number(r[xColumn]), y: Number(r[yColumn]) })).filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y)).slice(0, 1e3);
     return [{ id: `${xColumn} vs ${yColumn}`, data: points }];
   }, [records, xColumn, yColumn, presetData]);
   const data = presetData || computed;
@@ -431,8 +471,8 @@ function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
       yScale: { type: "linear", min: "auto", max: "auto" },
       colors: ["rgba(167, 139, 250, 0.7)"],
       nodeSize: 6,
-      axisBottom: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "x", xColumn) },
-      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", yColumn) },
+      axisBottom: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "x", xColumn, { numeric: true }) },
+      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", yColumn, { numeric: true }) },
       useMesh: true,
       theme: buildNivoTheme(style)
     }
@@ -531,8 +571,8 @@ function HeatmapView({
     {
       data,
       margin,
-      axisTop: { tickSize: 5, tickPadding: 5, tickRotation: -35, legend: colColumn, legendPosition: s.xLegendPosition, legendOffset: -50 },
-      axisLeft: { tickSize: 5, tickPadding: 5, legend: rowColumn, legendPosition: s.yLegendPosition, legendOffset: -80 },
+      axisTop: { tickSize: 5, tickPadding: 5, tickRotation: s.xTickRotation, legend: s.showXLegend ? s.xAxisLabel || colColumn : "", legendPosition: s.xLegendPosition, legendOffset: -50 },
+      axisLeft: { tickSize: 5, tickPadding: 5, legend: s.showYLegend ? s.yAxisLabel || rowColumn : "", legendPosition: s.yLegendPosition, legendOffset: -80 },
       axisRight: showTotals ? { tickSize: 5, tickPadding: 5, format: (id) => fmtNum(rowTotals[id]), legend: `${marginAgg} \u25B8`, legendOffset: 60 } : null,
       axisBottom: showTotals ? { tickSize: 5, tickPadding: 5, tickRotation: -35, format: (id) => fmtNum(colTotals[id]) } : null,
       colors: { type: "sequential", scheme: "blue_green", minValue: 0 },
@@ -609,6 +649,37 @@ function NumberControl({ value, onChange, min, max }) {
     }
   );
 }
+function TextControl({ value, onChange, placeholder }) {
+  const { theme } = useDashboard();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "text",
+      value,
+      placeholder,
+      onChange: (e) => onChange(e.target.value),
+      className: `w-28 px-2 py-1 text-xs ${theme.font} bg-midnight-surface border ${theme.border} text-midnight-text-body outline-none focus:border-midnight-accent`
+    }
+  );
+}
+function Toggle({ value, onChange }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "checkbox",
+      checked: value,
+      onChange: (e) => onChange(e.target.checked),
+      className: "w-4 h-4 accent-midnight-accent cursor-pointer"
+    }
+  );
+}
+function OptionalColor({ value, onChange, fallback = "#a78bfa" }) {
+  const on = !!value;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Toggle, { value: on, onChange: (v) => onChange(v ? fallback : "") }),
+    on && /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value, onChange })
+  ] });
+}
 function Choice({ value, options, onChange }) {
   const { theme } = useDashboard();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-28", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -632,19 +703,32 @@ function ChartStyleControls({ style, onChange }) {
     /* @__PURE__ */ jsxRuntime.jsxs(Group, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Background", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.background, onChange: (v) => set("background", v) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Text color", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.textColor, onChange: (v) => set("textColor", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Title color", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.legendColor, onChange: (v) => set("legendColor", v) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Grid color", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.gridColor, onChange: (v) => set("gridColor", v) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Font size", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.fontSize, min: 6, max: 24, onChange: (v) => set("fontSize", v) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Group, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X axis title", children: /* @__PURE__ */ jsxRuntime.jsx(TextControl, { value: s.xAxisLabel, placeholder: "(column)", onChange: (v) => set("xAxisLabel", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Show X title", children: /* @__PURE__ */ jsxRuntime.jsx(Toggle, { value: s.showXLegend, onChange: (v) => set("showXLegend", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y axis title", children: /* @__PURE__ */ jsxRuntime.jsx(TextControl, { value: s.yAxisLabel, placeholder: "(column)", onChange: (v) => set("yAxisLabel", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Show Y title", children: /* @__PURE__ */ jsxRuntime.jsx(Toggle, { value: s.showYLegend, onChange: (v) => set("showYLegend", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Title color", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.legendColor, onChange: (v) => set("legendColor", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Title bold", children: /* @__PURE__ */ jsxRuntime.jsx(Toggle, { value: s.legendBold, onChange: (v) => set("legendBold", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Title highlight", children: /* @__PURE__ */ jsxRuntime.jsx(OptionalColor, { value: s.legendHighlight, onChange: (v) => set("legendHighlight", v) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X title pos", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.xLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("xLegendPosition", v) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X title offset", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.xLegendOffset, onChange: (v) => set("xLegendOffset", v) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y title pos", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.yLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("yLegendPosition", v) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y title offset", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.yLegendOffset, onChange: (v) => set("yLegendOffset", v) }) })
     ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Group, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X tick angle", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.xTickRotation, min: -90, max: 90, onChange: (v) => set("xTickRotation", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Truncate ticks", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.tickTruncate, min: 0, max: 40, onChange: (v) => set("tickTruncate", v) }) })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Group, { last: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Legend", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.legendAnchor, options: ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"], onChange: (v) => set("legendAnchor", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Title align", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.titleAlign, options: ["left", "center", "right"], onChange: (v) => set("titleAlign", v) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Series legend", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.legendAnchor, options: ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"], onChange: (v) => set("legendAnchor", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Panel title align", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.titleAlign, options: ["left", "center", "right"], onChange: (v) => set("titleAlign", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Panel title bold", children: /* @__PURE__ */ jsxRuntime.jsx(Toggle, { value: s.titleBold, onChange: (v) => set("titleBold", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Panel title color", children: /* @__PURE__ */ jsxRuntime.jsx(OptionalColor, { value: s.titleColor, onChange: (v) => set("titleColor", v), fallback: "#e2e8f0" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Panel title bg", children: /* @__PURE__ */ jsxRuntime.jsx(OptionalColor, { value: s.titleBackground, onChange: (v) => set("titleBackground", v), fallback: "#1e293b" }) })
     ] })
   ] });
 }
@@ -1369,6 +1453,7 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
   const [showTotals, setShowTotals] = react.useState(false);
   const [style, setStyle] = react.useState(DEFAULT_CHART_STYLE);
   const [showStyle, setShowStyle] = react.useState(false);
+  const [showFields, setShowFields] = react.useState(false);
   const [sqlRows, setSqlRows] = react.useState(null);
   const [sqlLoading, setSqlLoading] = react.useState(false);
   const [sqlError, setSqlError] = react.useState(null);
@@ -1654,8 +1739,23 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-4 border-t border-midnight-border", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Available Fields" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs font-mono px-1 py-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => setShowFields((s) => !s),
+            className: "flex items-center gap-1 text-xs uppercase text-midnight-text-muted font-mono hover:text-midnight-text-body transition-colors",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `w-3 h-3 transition-transform ${showFields ? "" : "-rotate-90"}` }),
+              "Available Fields",
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-midnight-text-muted/60 normal-case", children: [
+                "(",
+                columns.length,
+                ")"
+              ] })
+            ]
+          }
+        ),
+        showFields && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 mt-2", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs font-mono px-1 py-0.5", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-midnight-text-body", children: col.name }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-midnight-text-muted", children: col.type })
         ] }, col.name)) })
@@ -1685,6 +1785,15 @@ function ViewLoading() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "Loading..." });
 }
 var SQL_CHART_TYPES = /* @__PURE__ */ new Set(["bar", "grouped-bar", "pie", "line", "scatter", "heatmap"]);
+var SQL_DATA_TYPES = /* @__PURE__ */ new Set(["table", "metric"]);
+var TABLE_PREVIEW_ROWS = 200;
+function tableSql(config) {
+  const cols = config.columns?.length ? config.columns.map(qIdent).join(", ") : "*";
+  return `SELECT ${cols} FROM data LIMIT ${TABLE_PREVIEW_ROWS}`;
+}
+function metricSql(config) {
+  return `SELECT ${aggExpr(config.agg, config.column)} AS v FROM data`;
+}
 function panelToChartConfig(chartType, config) {
   const cfg = { chartType, xFields: [], yFields: [], filters: config.filters || [] };
   switch (chartType) {
@@ -1709,11 +1818,23 @@ function panelToChartConfig(chartType, config) {
   }
   return cfg;
 }
-function panelSql(chartType, config) {
+function panelSql(type, config) {
   if (config.sql) return config.sql;
-  if (SQL_CHART_TYPES.has(chartType)) return buildChartSQL(panelToChartConfig(chartType, config)) || "";
+  if (type === "table") return tableSql(config);
+  if (type === "metric") return metricSql(config);
+  if (SQL_CHART_TYPES.has(type)) return buildChartSQL(panelToChartConfig(type, config)) || "";
   return "";
 }
+function DataTable({ rows, columns }) {
+  const colNames = columns?.length ? columns : rows[0] ? Object.keys(rows[0]) : [];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto h-full text-xs", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 bg-midnight-elevated", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: colNames.map((n) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-left text-midnight-text-muted font-mono border-b border-midnight-border", children: n }, n)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((r, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-dashed border-midnight-border hover:bg-midnight-raised", children: colNames.map((n) => {
+      const cellValue = r[n];
+      return /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-1 text-midnight-text-body truncate max-w-[200px]", children: cellValue == null ? "" : typeof cellValue === "object" ? JSON.stringify(cellValue) : String(cellValue) }, n);
+    }) }, i)) })
+  ] }) });
+}
 function SqlPanel({ panel }) {
   const { runQuery, persistPanelData } = useDashboard();
   const { canRefresh } = useCapabilities();
@@ -1805,6 +1926,8 @@ function SqlPanel({ panel }) {
     const first = rows[0];
     const v = first ? Object.values(first)[0] : 0;
     chart = /* @__PURE__ */ jsxRuntime.jsx(MetricView, { value: Number(v) || 0, config: { column: config.column || "", agg: config.agg, label: config.label } });
+  } else if (chartType === "table") {
+    chart = /* @__PURE__ */ jsxRuntime.jsx(DataTable, { rows, columns: config.columns });
   } else {
     const shaped = shapeChartData(chartType, rows, { yFields: config.yFields || [] });
     switch (chartType) {
@@ -1844,7 +1967,7 @@ function PanelContent({ panel, records, columns }) {
   const { type } = panel;
   const config = panel.config || {};
   const effType = config.chartType || type;
-  if (config.sql || SQL_CHART_TYPES.has(effType)) {
+  if (config.sql || SQL_CHART_TYPES.has(effType) || SQL_DATA_TYPES.has(effType)) {
     return /* @__PURE__ */ jsxRuntime.jsx(SqlPanel, { panel });
   }
   if (!records?.length && type !== "insight") {
@@ -1867,17 +1990,8 @@ function PanelContent({ panel, records, columns }) {
       return /* @__PURE__ */ jsxRuntime.jsx(MetricView, { records, config: { column: config.column || "", agg: config.agg, label: config.label } });
     case "insight":
       return /* @__PURE__ */ jsxRuntime.jsx(InsightView, { config: { text: config.text } });
-    case "table": {
-      const cols = config.columns ? config.columns.map((c) => ({ name: c })) : columns;
-      const colNames = cols?.map((c) => c.name) || (records && records[0] ? Object.keys(records[0]) : []);
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto h-full text-xs", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 bg-midnight-elevated", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: colNames.map((n) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-left text-midnight-text-muted font-mono border-b border-midnight-border", children: n }, n)) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: (records || []).slice(0, 50).map((r, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-dashed border-midnight-border hover:bg-midnight-raised", children: colNames.map((n) => {
-          const cellValue = r[n];
-          return /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-1 text-midnight-text-body truncate max-w-[200px]", children: cellValue == null ? "" : typeof cellValue === "object" ? JSON.stringify(cellValue) : String(cellValue) }, n);
-        }) }, i)) })
-      ] }) });
-    }
+    case "table":
+      return /* @__PURE__ */ jsxRuntime.jsx(DataTable, { rows: (records || []).slice(0, 50), columns: config.columns || columns?.map((c) => c.name) });
     default:
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-xs text-midnight-text-muted", children: [
         "Unknown panel type: ",
@@ -1908,7 +2022,19 @@ function DashboardRenderer({ dashboard, records, columns }) {
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between px-3 py-1.5 border-b ${theme.border} bg-midnight-elevated`, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-xs font-mono text-midnight-text-body truncate", style: { textAlign: panel.config?.style?.titleAlign || "left" }, children: panel.title || panel.type }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "flex-1 text-xs font-mono text-midnight-text-body truncate px-1",
+                  style: {
+                    textAlign: panel.config?.style?.titleAlign || "left",
+                    fontWeight: panel.config?.style?.titleBold ? 700 : void 0,
+                    background: panel.config?.style?.titleBackground || void 0,
+                    color: panel.config?.style?.titleColor || void 0
+                  },
+                  children: panel.title || panel.type
+                }
+              ),
               canEditPanels && removePanel && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {