@agent-native/core-corpus 0.201.1-nightly-20261005213104 → 0.201.1

package/corpus/README.md

@@ -32,4 +32,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core-corpus/corpu
 
 ## Generated Counts
 
-- template files: 11150
+- template files: 11159

package/corpus/templates/analytics/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable user-facing changes to Agent-Native Analytics are documented here. Open it any
 time from the command menu (Cmd+K → "What's new") or from Settings.
 
+## 2026-10-05
+
+### Improved
+
+- Custom date controls stay beside the range selector, and dashboards can save a shared default view.
+
 ## 2026-10-02
 
 ### Improved

package/corpus/templates/analytics/actions/save-dashboard-view.ts

@@ -14,6 +14,10 @@ export default defineAction({
     dashboardId: z.string().min(1).describe("The dashboard ID"),
     id: z.string().optional().describe("Existing view ID when updating"),
     name: z.string().min(1).describe("View name"),
+    isDefault: z
+      .boolean()
+      .optional()
+      .describe("Whether this view becomes the dashboard's default view"),
     filters: z
       .record(z.string(), z.string())
       .optional()
@@ -25,7 +29,12 @@ export default defineAction({
     const orgId = getRequestOrgId() || null;
     const view = await saveDashboardView(
       args.dashboardId,
-      { id: args.id, name: args.name, filters: args.filters ?? {} },
+      {
+        id: args.id,
+        name: args.name,
+        filters: args.filters ?? {},
+        isDefault: args.isDefault,
+      },
       { email, orgId },
     );
     return { success: true, view };

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

@@ -37,6 +37,7 @@ import {
   BarChart,
   CartesianGrid,
   Cell,
+  ComposedChart,
   Legend,
   Line,
   LineChart,
@@ -93,13 +94,23 @@ export function limitChartRows(
 ): Record<string, unknown>[] {
   if (
     rows.length <= MAX_CHART_POINTS ||
-    !["line", "area", "bar", "pie", "heatmap", "funnel", "callout"].includes(
-      chartType,
-    )
+    ![
+      "line",
+      "area",
+      "bar",
+      "combo",
+      "pie",
+      "heatmap",
+      "funnel",
+      "callout",
+    ].includes(chartType)
   ) {
     return rows;
   }
-  return chartType !== "line" && chartType !== "area" && chartType !== "heatmap"
+  return chartType !== "line" &&
+    chartType !== "area" &&
+    chartType !== "combo" &&
+    chartType !== "heatmap"
     ? rows.slice(0, MAX_CHART_POINTS)
     : rows.slice(-MAX_CHART_POINTS);
 }
@@ -946,12 +957,14 @@ function chartTypeReservesLegend(panel: SqlPanel): boolean {
     panel.chartType === "line" ||
     panel.chartType === "area" ||
     panel.chartType === "bar" ||
+    panel.chartType === "combo" ||
     panel.chartType === "pie";
   if (!chartUsesFrame) return false;
   return (
     panel.chartType === "line" ||
     panel.chartType === "area" ||
     panel.chartType === "bar" ||
+    panel.chartType === "combo" ||
     usesPrometheusPresentation(panel)
   );
 }
@@ -1463,6 +1476,20 @@ export function SqlChart({
     );
   }
 
+  if (chartType === "combo") {
+    return withConfigWarning(
+      <ComboRenderer
+        rows={chartRows}
+        xKey={xKey}
+        yKeys={yKeys}
+        colors={colors}
+        yFormatter={yFormatter}
+        barKeys={panel.config?.barKeys ?? []}
+        panel={panel}
+      />,
+    );
+  }
+
   if (chartType === "funnel") {
     return withConfigWarning(
       <FunnelRenderer rows={chartRows} panel={panel} colors={colors} />,
@@ -2223,6 +2250,111 @@ function BarRenderer({
   );
 }
 
+function ComboRenderer({
+  rows,
+  xKey,
+  yKeys,
+  colors,
+  yFormatter,
+  barKeys,
+  panel,
+}: {
+  rows: Record<string, unknown>[];
+  xKey: string;
+  yKeys: string[];
+  colors: string[];
+  yFormatter?: "number" | "currency" | "percent";
+  barKeys: string[];
+  panel: SqlPanel;
+}) {
+  const xLabelFormatter = (value: any) =>
+    formatXLabel(String(value ?? ""), panel);
+  const xTooltipLabelFormatter = (value: any) =>
+    formatSqlChartTooltipLabel(String(value ?? ""), panel, xKey);
+  const seriesNameFormatter = (name: string) =>
+    formatSeriesLabelForPanel(panel, name);
+  const { hiddenKeys, toggleSeries, filterSeries } = useSeriesVisibility(yKeys);
+  const dualAxis = resolveDualAxis(yKeys, panel.config, seriesNameFormatter);
+  const valueFormatter = seriesValueFormatter(
+    yKeys,
+    dualAxis,
+    seriesNameFormatter,
+    yFormatter,
+  );
+  const barKeySet = new Set(barKeys);
+
+  return (
+    <ChartFrame
+      panel={panel}
+      legendKeys={yKeys}
+      colors={colors}
+      hiddenKeys={hiddenKeys}
+      onToggleLegendKey={toggleSeries}
+      onFilterLegendKey={filterSeries}
+      showCustomLegend
+    >
+      <ChartResponsiveContainer>
+        <ComposedChart data={rows}>
+          <XAxis
+            dataKey={xKey}
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={xLabelFormatter}
+          />
+          {renderChartYAxes(dualAxis, yFormatter)}
+          <CartesianGrid
+            strokeDasharray="3 3"
+            stroke="hsl(var(--border))"
+            vertical={false}
+          />
+          <Tooltip
+            {...CHART_TOOLTIP_PROPS}
+            cursor={BAR_TOOLTIP_CURSOR_PROPS}
+            labelFormatter={xTooltipLabelFormatter}
+            content={
+              <ChartTooltip
+                labelFormatter={xTooltipLabelFormatter}
+                seriesNameFormatter={seriesNameFormatter}
+                valueFormatter={valueFormatter}
+              />
+            }
+            itemSorter={(item) => -(Number(item.value) || 0)}
+          />
+          {yKeys.map((key, i) =>
+            barKeySet.has(key) ? (
+              <Bar
+                key={key}
+                dataKey={key}
+                name={seriesNameFormatter(key)}
+                yAxisId={seriesAxisId(dualAxis, key)}
+                fill={colors[i % colors.length]}
+                radius={[4, 4, 0, 0]}
+                hide={hiddenKeys.has(key)}
+                isAnimationActive={false}
+              />
+            ) : (
+              <Line
+                key={key}
+                type="monotone"
+                dataKey={key}
+                name={seriesNameFormatter(key)}
+                yAxisId={seriesAxisId(dualAxis, key)}
+                stroke={colors[i % colors.length]}
+                strokeWidth={2}
+                dot={false}
+                hide={hiddenKeys.has(key)}
+                isAnimationActive={false}
+              />
+            ),
+          )}
+        </ComposedChart>
+      </ChartResponsiveContainer>
+    </ChartFrame>
+  );
+}
+
 function TimeSeriesRenderer({
   rows,
   xKey,

package/corpus/templates/analytics/app/hooks/use-dashboard-views.ts

@@ -7,6 +7,7 @@ export interface DashboardView {
   id: string;
   name: string;
   filters: Record<string, string>;
+  isDefault?: boolean;
   createdBy?: string;
   createdAt?: string;
 }
@@ -48,6 +49,7 @@ export function useDashboardViews(dashboardId: string | undefined) {
         id: view.id,
         name: view.name,
         filters: view.filters,
+        isDefault: view.isDefault,
       });
     },
     onSettled: () => {
@@ -74,6 +76,8 @@ export function useDashboardViews(dashboardId: string | undefined) {
   return {
     views,
     isLoading: viewsQuery.isLoading,
+    isSuccess: viewsQuery.isSuccess,
+    isSettled: viewsQuery.isSuccess || viewsQuery.isError,
     error: viewsQuery.error,
     refetch: viewsQuery.refetch,
     saveView,

package/corpus/templates/analytics/app/i18n/en-US.ts

@@ -795,10 +795,14 @@ export default {
     filters: "Filters",
     autoApplied: "auto-applied",
     saveView: "Save view",
+    saveViewFailed: "Couldn't save view",
+    saveViewFailedWithMessage: "Couldn't save view: {{message}}",
     clearAll: "Clear all",
     collapseFilters: "Collapse filters",
     expandFilters: "Expand filters",
     filterSeries: "Filter",
+    chartTimeRangeOverride: "Override time range for this chart",
+    chartTimeRangeInherit: "Dashboard range",
     hide: "Hide",
     show: "Show",
     saveAsView: "Save as View",
@@ -858,6 +862,8 @@ export default {
     savedViews: "Saved views",
     views: "Views",
     noSavedViews: "No saved views yet.",
+    defaultView: "Default",
+    setAsDefault: "Set as default for this dashboard",
     deleteView: "Delete {{name}}",
     saveCurrentView: "Save current view",
     viewNameEnterprisePlaceholder: "View name (e.g. 'Enterprise only')",
@@ -1218,6 +1224,7 @@ export default {
     chartTypeLine: "Line",
     chartTypeArea: "Area",
     chartTypeBar: "Bar",
+    chartTypeCombo: "Combo (bar + line)",
     chartTypePie: "Pie",
     chartTypeMetric: "Metric",
     chartTypeTable: "Table",

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/DashboardFilterBar.tsx

@@ -4,10 +4,12 @@ import {
   IconDeviceFloppy,
   IconFilterOff,
 } from "@tabler/icons-react";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useId, useMemo, useState } from "react";
 import { useSearchParams } from "react-router";
+import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Collapsible,
   CollapsibleContent,
@@ -33,15 +35,14 @@ import { cn } from "@/lib/utils";
 
 import { DateRangeInput } from "../_shared/components/DateRangeInput";
 import {
+  FILTER_PARAM_PREFIX,
   isDateRangePresetFilter,
   resolveDefault,
   resolveFilterVars,
 } from "./filter-vars";
 import type { DashboardFilter } from "./types";
 
-export { resolveFilterVars } from "./filter-vars";
-
-export const FILTER_PARAM_PREFIX = "f_";
+export { FILTER_PARAM_PREFIX, resolveFilterVars } from "./filter-vars";
 
 /** Check if any filter param in the URL differs from the defaults */
 function hasActiveFilters(
@@ -95,7 +96,11 @@ export function extractFilterParams(
 
 interface DashboardFilterBarProps {
   filters: DashboardFilter[];
-  onSaveView?: (name: string, filters: Record<string, string>) => void;
+  onSaveView?: (
+    name: string,
+    filters: Record<string, string>,
+    isDefault: boolean,
+  ) => void | Promise<void>;
 }
 
 export function DashboardFilterBar({
@@ -106,6 +111,9 @@ export function DashboardFilterBar({
   const [searchParams, setSearchParams] = useSearchParams();
   const [saveDialogOpen, setSaveDialogOpen] = useState(false);
   const [viewName, setViewName] = useState("");
+  const [setAsDefault, setSetAsDefault] = useState(false);
+  const [savingView, setSavingView] = useState(false);
+  const defaultCheckboxId = useId();
   const [filtersOpen, setFiltersOpen] = useState(true);
   const uniqueFilters = useMemo(() => {
     const seen = new Set<string>();
@@ -160,13 +168,36 @@ export function DashboardFilterBar({
     });
   }, [setSearchParams]);
 
-  const handleSaveView = useCallback(() => {
-    if (!viewName.trim() || !onSaveView) return;
-    const currentFilters = extractFilterParams(uniqueFilters, searchParams);
-    onSaveView(viewName.trim(), currentFilters);
-    setViewName("");
-    setSaveDialogOpen(false);
-  }, [viewName, onSaveView, uniqueFilters, searchParams]);
+  const handleSaveView = useCallback(async () => {
+    if (!viewName.trim() || !onSaveView || savingView) return;
+    setSavingView(true);
+    try {
+      const currentFilters = extractFilterParams(uniqueFilters, searchParams);
+      await onSaveView(viewName.trim(), currentFilters, setAsDefault);
+      setViewName("");
+      setSetAsDefault(false);
+      setSaveDialogOpen(false);
+    } catch (error) {
+      toast.error(
+        t("sqlDashboard.saveViewFailedWithMessage", {
+          message:
+            error instanceof Error
+              ? error.message
+              : t("sqlDashboard.saveViewFailed"),
+        }),
+      );
+    } finally {
+      setSavingView(false);
+    }
+  }, [
+    viewName,
+    onSaveView,
+    savingView,
+    uniqueFilters,
+    searchParams,
+    setAsDefault,
+    t,
+  ]);
 
   const vars = useMemo(
     () => resolveFilterVars(uniqueFilters, getParam),
@@ -248,7 +279,16 @@ export function DashboardFilterBar({
         </div>
       </Collapsible>
 
-      <Dialog open={saveDialogOpen} onOpenChange={setSaveDialogOpen}>
+      <Dialog
+        open={saveDialogOpen}
+        onOpenChange={(open) => {
+          setSaveDialogOpen(open);
+          if (!open) {
+            setViewName("");
+            setSetAsDefault(false);
+          }
+        }}
+      >
         <DialogContent className="sm:max-w-[400px]">
           <DialogHeader>
             <DialogTitle>{t("sqlDashboard.saveAsView")}</DialogTitle>
@@ -258,24 +298,40 @@ export function DashboardFilterBar({
               placeholder={t("sqlDashboard.viewNameRecentPlaceholder")}
               value={viewName}
               onChange={(e) => setViewName(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSaveView()}
+              onKeyDown={(e) => e.key === "Enter" && void handleSaveView()}
               autoFocus
             />
+            <label
+              htmlFor={defaultCheckboxId}
+              className="mt-3 flex cursor-pointer items-center gap-2 text-sm"
+            >
+              <Checkbox
+                id={defaultCheckboxId}
+                checked={setAsDefault}
+                onCheckedChange={(checked) => setSetAsDefault(checked === true)}
+              />
+              <span>{t("sqlDashboard.setAsDefault")}</span>
+            </label>
           </div>
           <DialogFooter>
             <Button
               variant="outline"
               size="sm"
-              onClick={() => setSaveDialogOpen(false)}
+              onClick={() => {
+                setSaveDialogOpen(false);
+                setViewName("");
+                setSetAsDefault(false);
+              }}
+              disabled={savingView}
             >
               {t("sidebar.cancel")}
             </Button>
             <Button
               size="sm"
-              onClick={handleSaveView}
-              disabled={!viewName.trim()}
+              onClick={() => void handleSaveView()}
+              disabled={!viewName.trim() || savingView}
             >
-              {t("explorer.save")}
+              {savingView ? t("sqlDashboard.saving") : t("explorer.save")}
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -332,7 +388,7 @@ function FilterControl({
     const supportsCustomRange = isDateRangePresetFilter(filter);
     const startKey = filter.id + "Start";
     const endKey = filter.id + "End";
-    return (
+    const selectControl = (
       <div className="flex flex-col gap-1">
         <label className="text-xs text-muted-foreground font-medium">
           {filter.label}
@@ -371,17 +427,24 @@ function FilterControl({
               )}
           </SelectContent>
         </Select>
-        {supportsCustomRange && current === "custom" && (
+      </div>
+    );
+    if (supportsCustomRange && current === "custom") {
+      return (
+        <div className="flex min-w-0 flex-wrap items-end gap-3">
+          {selectControl}
           <DateRangeInput
             label={t("sqlDashboard.customRange")}
             startDate={vars[startKey] || ""}
             endDate={vars[endKey] || ""}
             onStartChange={(v) => setValue({ [startKey]: v })}
             onEndChange={(v) => setValue({ [endKey]: v })}
+            className="shrink-0"
           />
-        )}
-      </div>
-    );
+        </div>
+      );
+    }
+    return selectControl;
   }
 
   if (filter.type === "toggle") {

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/PanelEditorDialog.tsx

@@ -54,6 +54,7 @@ const CHART_TYPES: { value: ChartType; labelKey: string }[] = [
   { value: "line", labelKey: "panelEditor.chartTypeLine" },
   { value: "area", labelKey: "panelEditor.chartTypeArea" },
   { value: "bar", labelKey: "panelEditor.chartTypeBar" },
+  { value: "combo", labelKey: "panelEditor.chartTypeCombo" },
   { value: "pie", labelKey: "panelEditor.chartTypePie" },
   { value: "metric", labelKey: "panelEditor.chartTypeMetric" },
   { value: "table", labelKey: "panelEditor.chartTypeTable" },
@@ -388,7 +389,7 @@ function PanelEditorContent({
         `Inspect the dashboard's declared filters and use their exact ids in first-party SQL. The seeded dashboard uses \`{{timeRange}}\`, with \`{{timeRangeStart}}\` and \`{{timeRangeEnd}}\` for the custom range. ` +
         `Use the \`mutate-dashboard\` action with one structured operation like {op:"insertPanel",panel:{id:"new-panel",title:"New Panel",source:"first-party",chartType:"metric",width:1,config:{timeScope:"dashboard"},sql:"SELECT COUNT(*) AS value FROM analytics_events WHERE ${firstPartyTimeFilter}"},position:"bottom"}. The width must be a JSON integer from 1 to 6, never a string. ` + // i18n-ignore i18n-copy-ignore: Internal agent context is not displayed as UI copy.
         `For placement, use position, index, beforePanelId, afterPanelId, nextToPanelId, rowNumber, or rowPosition. Prefer nextToPanelId or rowNumber for visible row placement requests; they keep the chart in the intended rendered row and expand/rebalance that row when needed. ` +
-        `Panel shape: { id (unique slug), title, sql, source ('bigquery'|'ga4'|'amplitude'|'first-party'|'demo'|'prometheus'|'program'), chartType ('line'|'area'|'bar'|'metric'|'table'|'pie'|'funnel'|'heatmap'|'callout'|'section'|'extension'), width (legacy integer 1..6; set to 1 unless editing existing data), tab? (use 'Group / Tab' for grouped tabs), columns? (section panels only - 1..6 max panels per row for panels following this section), config? }. ` +
+        `Panel shape: { id (unique slug), title, sql, source ('bigquery'|'ga4'|'amplitude'|'first-party'|'demo'|'prometheus'|'program'), chartType ('line'|'area'|'bar'|'combo'|'metric'|'table'|'pie'|'funnel'|'heatmap'|'callout'|'section'|'extension'), width (legacy integer 1..6; set to 1 unless editing existing data), tab? (use 'Group / Tab' for grouped tabs), columns? (section panels only - 1..6 max panels per row for panels following this section), config? }. ` +
         `Visible layout auto-fits by row: one panel in a row spans the row, two split it, three split it into thirds, up to the section column limit. ` +
         `For amplitude panels, sql is a JSON descriptor: {"event":"event name","groupBy":"property","days":30}. ` +
         `For first-party panels, sql is read-only SQL over analytics_events only; use source 'first-party' and do not call db-query for this datasource. ` +
@@ -396,8 +397,8 @@ function PanelEditorContent({
         `For prometheus panels, sql is a JSON descriptor: {"promql":"rate(http_requests_total[5m])","mode":"range","range":"1h","step":"30s"}. mode defaults to "range"; range defaults to "1h"; step is auto if omitted. Returned rows have shape {timestamp, series, value} — set config.xKey="timestamp", config.yKey="value", and a single series in config.yKeys for clean charting. ` +
         `For program panels (arbitrary provider data joins/cohorts not expressible in the other sources), first save-data-program (or reuse an existing one via list-data-programs), then set sql to a JSON descriptor: {"programId":"<id>","params":{...}}. See the data-programs skill for the emit(rows, schema) contract and the Risk Meeting worked example. ` +
         `Native dashboard panels and Data Programs come first. Add an extension panel only when the user explicitly asks for a genuinely bespoke, one-off Custom Block for this dashboard and native panels cannot represent it faithfully. For a reusable/native capability call connect-builder instead. New agent-authored Custom Blocks use config.extensionId plus config.customBlock={authoredBy:"agent",intent:"one-off",scope:"dashboard",nativeGapReason:"custom-visualization"|"custom-interaction"|"custom-layout"|"other"}; never put prompt/customer text in that metadata. Use config.extensionSlotId only when the user explicitly asks for a personal/per-viewer slot; slot installs are per-user and automated report identities may have no install. ` +
-        `Config is optional: { xKey, yKey, yKeys, yFormatter ('number'|'currency'|'percent'), rightYKeys, rightYFormatter, seriesLabels (exact series key -> display label), description, columns, pivot, limit, color, colors, stacked, legend, valueLabels }. For funnel panels, use config.xKey for the stage label, config.yKey for the non-negative count/value, and keep the SQL ORDER BY in the intended funnel order. ` +
-        `For line/area/bar series that share an x-axis but not a unit (a count next to a rate), put the smaller-unit series on a second y-axis with config.rightYKeys (a subset of yKeys) and an optional config.rightYFormatter — do not build an extension for a dual-axis chart. Use heatmap, callout, and section panels when their native contracts fit; do not create a Custom Block for a supported native panel. ` +
+        `Config is optional: { xKey, yKey, yKeys, yFormatter ('number'|'currency'|'percent'), rightYKeys, rightYFormatter, barKeys, seriesLabels (exact series key -> display label), description, columns, pivot, limit, color, colors, stacked, legend, valueLabels }. For funnel panels, use config.xKey for the stage label, config.yKey for the non-negative count/value, and keep the SQL ORDER BY in the intended funnel order. ` +
+        `For line/area/bar series that share an x-axis but not a unit (a count next to a rate), put the smaller-unit series on a second y-axis with config.rightYKeys (a subset of yKeys) and an optional config.rightYFormatter — do not build an extension for a dual-axis chart. Use chartType 'combo' to render some yKeys as bars and the rest as lines on one chart: set config.barKeys to the subset of yKeys that should render as bars; any yKey not in barKeys renders as a line. Use heatmap, callout, and section panels when their native contracts fit; do not create a Custom Block for a supported native panel. ` +
         `Chart legends render automatically; set config.legend=false only when the user explicitly asks to hide the legend. ` +
         `Use \`get-sql-dashboard.layout.groups[].rows[].rowNumber/panelIds\` to identify and verify visible rows. ` +
         `Consult the data dictionary first via \`list-data-dictionary --search <topic>\`, then use AGENTS.md, .agents/skills, and connected data-source instructions before writing SQL. ` +

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

@@ -46,6 +46,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   Tooltip,
   TooltipContent,
@@ -57,9 +64,11 @@ import { cn } from "@/lib/utils";
 
 import { serializePanelSql } from "./panel-sql";
 import { timeRangeDays } from "./pivot";
-import type { SqlPanel } from "./types";
+import type { DashboardFilter, SqlPanel } from "./types";
 import { ViewSqlPopover } from "./ViewSqlPopover";
 
+const INHERIT_TIME_RANGE = "__inherit__";
+
 interface SqlChartCardProps {
   panel: SqlPanel;
   resolvedSql?: string;
@@ -75,6 +84,9 @@ interface SqlChartCardProps {
   extensionContext?: Record<string, unknown> | null;
   dashboardId?: string;
   filters?: Record<string, string>;
+  timeRangeFilter?: DashboardFilter;
+  timeRangeOverride?: string | null;
+  onTimeRangeOverrideChange?: (value: string | null) => void;
 }
 
 const PanelDragHandle = memo(function PanelDragHandle({
@@ -134,6 +146,9 @@ export function SqlChartCard({
   extensionContext,
   dashboardId,
   filters,
+  timeRangeFilter,
+  timeRangeOverride,
+  onTimeRangeOverrideChange,
 }: SqlChartCardProps) {
   const t = useT();
   const timeRange = timeRangeDays(filters?.timeRange);
@@ -605,6 +620,45 @@ export function SqlChartCard({
           <CardTitle className="text-sm font-medium flex-1 truncate">
             {panel.title}
           </CardTitle>
+          {timeRangeFilter?.options?.length ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Select
+                  value={timeRangeOverride ?? INHERIT_TIME_RANGE}
+                  onValueChange={(value) =>
+                    onTimeRangeOverrideChange?.(
+                      value === INHERIT_TIME_RANGE ? null : value,
+                    )
+                  }
+                >
+                  <SelectTrigger
+                    size="sm"
+                    className="h-6 w-[100px] text-xs"
+                    aria-label={t("sqlDashboard.chartTimeRangeOverride")}
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent align="end">
+                    <SelectItem value={INHERIT_TIME_RANGE} className="text-xs">
+                      {t("sqlDashboard.chartTimeRangeInherit")}
+                    </SelectItem>
+                    {timeRangeFilter.options.map((opt) => (
+                      <SelectItem
+                        key={opt.value}
+                        value={opt.value}
+                        className="text-xs"
+                      >
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </TooltipTrigger>
+              <TooltipContent>
+                {t("sqlDashboard.chartTimeRangeOverride")}
+              </TooltipContent>
+            </Tooltip>
+          ) : null}
           <div className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
             {!editable || onSaveSql ? (
               <ViewSqlPopover