feat(analytics): persisted auto-refresh interval for SQL dashboards

templates/analytics/app/components/dashboard/SqlChart.tsx

@@ -279,12 +279,15 @@ interface SqlChartProps {
   resolvedSql?: string;
   className?: string;
   onExportCsvChange?: (handler: (() => void) | null) => void;
+  /** Auto-refresh interval in ms forwarded from the dashboard config. */
+  refreshInterval?: number;
 }
 
 export function SqlChart({
   panel,
   resolvedSql,
   onExportCsvChange,
+  refreshInterval,
 }: SqlChartProps) {
   // Section panels are pure layout — no query, no chart. Render a header with
   // optional description and skip the SQL pipeline entirely.
@@ -305,6 +308,7 @@ export function SqlChart({
     ["sql-chart", panel.id, sql, panel.source],
     sql,
     panel.source,
+    refreshInterval ? { refetchInterval: refreshInterval } : undefined,
   );
 
   const rawRows = result?.rows ?? [];

templates/analytics/app/lib/sql-query.ts

@@ -58,6 +58,6 @@ export function useSqlQuery(
     queryFn: () => executeSqlQuery(sql, source),
     enabled: options?.enabled ?? true,
     refetchInterval: options?.refetchInterval,
-    staleTime: 5 * 60 * 1000,
+    staleTime: options?.refetchInterval ? 0 : 5 * 60 * 1000,
   });
 }

templates/analytics/app/pages/adhoc/sql-dashboard/SqlChartCard.tsx

@@ -53,6 +53,8 @@ interface SqlChartCardProps {
   /** Persist a SQL-only edit from the inline View SQL popover. Should throw on
    *  validation failure so the popover can stay open and surface the error. */
   onSaveSql?: (sql: string) => Promise<void>;
+  /** Auto-refresh interval in ms forwarded from the dashboard config. */
+  refreshInterval?: number;
 }
 
 export function SqlChartCard({
@@ -63,6 +65,7 @@ export function SqlChartCard({
   gridColumns,
   onEdit,
   onSaveSql,
+  refreshInterval,
 }: SqlChartCardProps) {
   const {
     attributes,
@@ -283,6 +286,7 @@ export function SqlChartCard({
             panel={panel}
             resolvedSql={resolvedSql}
             onExportCsvChange={handleExportCsvChange}
+            refreshInterval={refreshInterval}
           />
         </CardContent>
       </Card>

templates/analytics/app/pages/adhoc/sql-dashboard/index.tsx

@@ -37,8 +37,16 @@ import {
   IconDots,
   IconPencil,
   IconPlus,
+  IconRefresh,
   IconTrash,
 } from "@tabler/icons-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -137,6 +145,7 @@ async function fetchDashboard(id: string): Promise<FetchedDashboard | null> {
       filters: data.filters,
       variables: data.variables,
       columns: typeof data.columns === "number" ? data.columns : undefined,
+      refreshInterval: typeof data.refreshInterval === "number" ? data.refreshInterval : undefined,
       panels: data.panels ?? [],
     },
     archivedAt: typeof data.archivedAt === "string" ? data.archivedAt : null,
@@ -1005,13 +1014,44 @@ export default function SqlDashboardPage() {
         </Tabs>
       )}
 
-      {/* Filters */}
-      {dashboard.filters && dashboard.filters.length > 0 && (
-        <DashboardFilterBar
-          filters={dashboard.filters}
-          onSaveView={handleSaveView}
-        />
-      )}
+      {/* Filters + refresh interval */}
+      <div className="flex items-center gap-2 flex-wrap">
+        {dashboard.filters && dashboard.filters.length > 0 && (
+          <DashboardFilterBar
+            filters={dashboard.filters}
+            onSaveView={handleSaveView}
+          />
+        )}
+        <div className="flex items-center gap-1.5 ml-auto">
+          <IconRefresh className="h-3.5 w-3.5 text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">Refresh</span>
+          <Select
+            value={
+              dashboard.refreshInterval
+                ? String(dashboard.refreshInterval)
+                : "off"
+            }
+            onValueChange={(v) => {
+              const ms = v === "off" ? undefined : Number(v);
+              persist({ ...dashboard, refreshInterval: ms });
+            }}
+          >
+            <SelectTrigger className="h-7 text-xs w-[64px] px-2">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="off">Off</SelectItem>
+              <SelectItem value="500">0.5 s ⚠</SelectItem>
+              <SelectItem value="5000">5 s</SelectItem>
+              <SelectItem value="30000">30 s</SelectItem>
+              <SelectItem value="60000">1 min</SelectItem>
+              <SelectItem value="300000">5 min</SelectItem>
+              <SelectItem value="900000">15 min</SelectItem>
+              <SelectItem value="1800000">30 min</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
 
       {/* Panels grid */}
       {dashboard.panels.length === 0 ? (
@@ -1090,6 +1130,7 @@ export default function SqlDashboardPage() {
                         panel={resolved}
                         resolvedSql={interpolate(panel.sql, vars)}
                         gridColumns={group.columns}
+                        refreshInterval={dashboard?.refreshInterval}
                         onRemove={() => removePanel(panel.id)}
                         onToggleWidth={() =>
                           toggleWidth(panel.id, group.columns)

templates/analytics/app/pages/adhoc/sql-dashboard/types.ts

@@ -116,6 +116,9 @@ export interface SqlDashboardConfig {
    * not only at narrow viewports). Defaults to 2.
    */
   columns?: number;
+  /** Auto-refresh interval in milliseconds. When set, all panels refetch at
+   *  this cadence. Omit (or set to 0) to disable. */
+  refreshInterval?: number;
   panels: SqlPanel[];
 }