@agent-native/core 0.131.9 → 0.132.1

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

@@ -57,6 +57,10 @@ const CHART_TYPES: { value: ChartType; labelKey: string }[] = [
   { value: "pie", labelKey: "panelEditor.chartTypePie" },
   { value: "metric", labelKey: "panelEditor.chartTypeMetric" },
   { value: "table", labelKey: "panelEditor.chartTypeTable" },
+  { value: "funnel", labelKey: "panelEditor.chartTypeFunnel" },
+  { value: "heatmap", labelKey: "panelEditor.chartTypeHeatmap" },
+  { value: "callout", labelKey: "panelEditor.chartTypeCallout" },
+  { value: "section", labelKey: "panelEditor.chartTypeSection" },
   { value: "extension", labelKey: "panelEditor.chartTypeExtension" },
 ];
 
@@ -290,6 +294,7 @@ function PanelEditorContent({
 
   const isEdit = !!panel;
   const isExtensionPanel = form.chartType === "extension";
+  const isSectionPanel = form.chartType === "section";
   const isProgramSource = form.source === "program";
   const { programId, paramsText: initialParamsText } = useMemo(
     () =>
@@ -332,10 +337,13 @@ function PanelEditorContent({
   const canSave = isExtensionPanel
     ? form.title.trim().length > 0 &&
       (form.extensionMode === "slot" || form.extensionId.trim().length > 0)
-    : isProgramSource
-      ? form.title.trim().length > 0 && selectedProgramId.trim().length > 0
-      : form.title.trim().length > 0 && form.sql.trim().length > 0;
-  const canFormat = !isExtensionPanel && canFormatPanelSql(form.source);
+    : isSectionPanel
+      ? form.title.trim().length > 0
+      : isProgramSource
+        ? form.title.trim().length > 0 && selectedProgramId.trim().length > 0
+        : form.title.trim().length > 0 && form.sql.trim().length > 0;
+  const canFormat =
+    !isExtensionPanel && !isSectionPanel && canFormatPanelSql(form.source);
 
   const handleSubmit = async () => {
     if (!canSave || saving) return;
@@ -343,7 +351,7 @@ function PanelEditorContent({
     setError(null);
     try {
       let sqlForSave = form.sql;
-      if (isProgramSource) {
+      if (isProgramSource && !isSectionPanel) {
         try {
           sqlForSave = serializeProgramDescriptor(
             selectedProgramId,
@@ -388,7 +396,7 @@ function PanelEditorContent({
         `If no source can answer, report the exact unavailable/error result instead of saving a panel with guessed schema or metrics. ` +
         `Use the \`mutate-dashboard\` action with code like \`dashboard.insertPanel({"id":"new-panel","title":"New Panel","source":"first-party","chartType":"metric","width":1,"sql":"SELECT COUNT(*) AS value FROM analytics_events"}).atBottom();\` ` +
         `to append, or \`.nextTo("panel-id")\`, \`.atRow(2)\`, \`.atRowStart(2)\`, \`.before("panel-id")\`, \`.after("panel-id")\`, or \`.atIndex(n)\` to place the panel. Prefer \`.nextTo("panel-id")\` or \`.atRow(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'|'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'|'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 +404,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, description, columns, pivot, limit, color, colors, stacked, legend, valueLabels }. ` +
-        `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. ` +
+        `Config is optional: { xKey, yKey, yKeys, yFormatter ('number'|'currency'|'percent'), rightYKeys, rightYFormatter, 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. ` +
         `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. ` +
@@ -455,7 +463,7 @@ function PanelEditorContent({
           </Select>
         </div>
 
-        {!isExtensionPanel ? (
+        {!isExtensionPanel && !isSectionPanel ? (
           <div className="grid gap-1.5">
             <Label htmlFor="panel-source">{t("panelEditor.source")}</Label>
             <Select
@@ -600,7 +608,7 @@ function PanelEditorContent({
             </div>
           )}
         </div>
-      ) : isProgramSource ? (
+      ) : isSectionPanel ? null : isProgramSource ? (
         <div className="grid gap-4">
           <div className="grid gap-1.5">
             <Label htmlFor="panel-program">

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

@@ -178,6 +178,15 @@ type DashboardTabGroup = {
   tabs: Array<{ value: string; label: string }>;
 };
 
+function sameFilterMap(
+  a: Record<string, string> | undefined,
+  b: Record<string, string>,
+): boolean {
+  const aKeys = Object.keys(a ?? {});
+  if (aKeys.length !== Object.keys(b).length) return false;
+  return aKeys.every((key) => a![key] === b[key]);
+}
+
 function groupDashboardTabs(tabs: string[]): {
   groups: DashboardTabGroup[];
   hasNestedTabs: boolean;
@@ -1013,6 +1022,10 @@ function SqlDashboardPageContent({
           currentFilters[k] = v;
         }
       });
+      // Opening a dashboard restores the saved filters into the URL, so
+      // without this the mere act of loading a page writes the value back —
+      // one round-trip plus a sync event that invalidates every mounted query.
+      if (sameFilterMap(savedFilters?.filters, currentFilters)) return;
       saveFilterPref({ filters: currentFilters });
     }, 1500);
     return () => clearTimeout(saveTimer.current);
@@ -1021,6 +1034,7 @@ function SqlDashboardPageContent({
     loaded,
     dashboard?.filters,
     dashboardId,
+    savedFilters,
     saveFilterPref,
     reportScreenshot,
   ]);

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

@@ -15,6 +15,7 @@ export type ChartType =
   | "table"
   | "pie"
   | "section"
+  | "funnel"
   | "heatmap"
   | "callout"
   | "extension";

package/corpus/templates/analytics/app/routes/chart.tsx

@@ -16,6 +16,9 @@ const VALID_CHART_TYPES = new Set([
   "metric",
   "table",
   "pie",
+  "funnel",
+  "heatmap",
+  "callout",
 ]);
 // Embed URLs accept external sources plus the restricted first-party analytics
 // source. They intentionally do not expose arbitrary app database querying.

package/corpus/templates/analytics/changelog/2026-07-30-analytics-dashboards-now-expose-native-funnel-heatmap-callou.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-30
+---
+
+Analytics dashboards now expose native funnel, heatmap, callout, and section panels.

package/corpus/templates/analytics/changelog/2026-07-30-analytics-now-ships-reusable-native-v2-dashboard-manifests-w.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-30
+---
+
+Analytics now ships reusable native v2 dashboard manifests with an admin provisioning action for real Data Program bindings.

package/corpus/templates/analytics/server/lib/dashboard-report-render.ts

@@ -13,6 +13,7 @@ import type {
   SqlPanel,
   TableColumnConfig,
 } from "../../app/pages/adhoc/sql-dashboard/types";
+import { resolveDashboardFunnelRows } from "../../shared/dashboard-funnel";
 import { DASHBOARD_REPORT_ACTION_TIMEOUT_MS } from "../../shared/dashboard-report-timeouts.js";
 import {
   MAX_CONCURRENT_FIRST_PARTY_SQL_QUERIES,
@@ -25,6 +26,7 @@ import {
 import { resolveAnalyticsPanelSource } from "./dashboard-panel-source-resolver";
 import {
   renderReportChartSvg,
+  renderFunnelChartSvg,
   REPORT_CHART_FONT_FAMILY,
   type ReportChartSeries,
   type ReportChartType,
@@ -534,6 +536,7 @@ const REPORT_CHART_TYPES: Record<string, ReportChartType> = {
   line: "line",
   area: "area",
   pie: "pie",
+  funnel: "funnel",
   "stacked-bar": "bar",
   "stacked-area": "area",
 };
@@ -923,7 +926,7 @@ async function renderChartBlock(args: {
   panel: SqlPanel;
   rows: Array<Record<string, unknown>>;
   forcedYKeys?: string[];
-  chartType: ReportChartType;
+  chartType: Exclude<ReportChartType, "funnel">;
   index: number;
   description: string;
 }): Promise<PanelBlock> {
@@ -997,6 +1000,72 @@ async function renderChartBlock(args: {
   }
 }
 
+async function renderFunnelChartBlock(args: {
+  panel: SqlPanel;
+  rows: Array<Record<string, unknown>>;
+  index: number;
+  description: string;
+}): Promise<PanelBlock> {
+  const { panel, rows, index, description } = args;
+  const funnel = resolveDashboardFunnelRows(
+    rows,
+    panel.config?.xKey,
+    panel.config?.yKey,
+  );
+  if (funnel.items.length === 0) {
+    const table = renderTableHtml(panel, rows);
+    return {
+      panelId: panel.id,
+      html: panelCardHtml(
+        panel,
+        `${table.html}${noteHtml("No funnel stages were returned, so the rows are shown as a table.")}`,
+      ),
+      text: `${panel.title}\n${table.text}`,
+    };
+  }
+
+  const subtitle = description;
+  const alt = `funnel chart of ${funnel.items.map((item) => item.label).join(", ")}`;
+  try {
+    const svg = renderFunnelChartSvg({
+      title: "",
+      subtitle,
+      rows: funnel.items,
+      width: CHART_WIDTH,
+      height: CHART_HEIGHT,
+      formatter: panel.config?.yFormatter,
+      colors: panel.config?.colors,
+    });
+    const png = await rasterizeChartPng(svg, CHART_WIDTH * CHART_RASTER_SCALE);
+    const slug =
+      panel.id.replace(/[^A-Za-z0-9_-]/g, "-").slice(0, 40) || "panel";
+    const contentId = `dashboard-report-panel-${index}-${slug}`;
+    return {
+      panelId: panel.id,
+      html: panelCardHtml(
+        panel,
+        `<img src="cid:${contentId}" alt="${escapeHtml(alt)}" width="${CHART_WIDTH}" style="display:block;width:100%;max-width:${CHART_WIDTH}px;height:auto;border:0;" />`,
+      ),
+      text: `${panel.title}: chart attached${subtitle ? ` (${subtitle})` : ""}`,
+      attachment: {
+        filename: `${slug}.png`,
+        content: png,
+        contentType: "image/png",
+        contentId,
+        disposition: "inline",
+      },
+    };
+  } catch (error) {
+    return failureBlock(
+      panel,
+      "Chart rendering failed",
+      error instanceof Error
+        ? error.message
+        : "The funnel image could not be rendered.",
+    );
+  }
+}
+
 function enforceAttachmentBudget(blocks: PanelBlock[]): void {
   const totalBytes = () =>
     blocks.reduce(
@@ -1093,6 +1162,17 @@ export async function renderReportEmail(args: {
     const chartType: ReportChartType | undefined =
       REPORT_CHART_TYPES[panel.chartType];
     if (chartType) {
+      if (chartType === "funnel") {
+        const block = await renderFunnelChartBlock({
+          panel,
+          rows,
+          index: chartIndex++,
+          description,
+        });
+        if (truncatedNote) block.html += truncatedNote;
+        blocks.push(block);
+        continue;
+      }
       const block = await renderChartBlock({
         panel,
         rows,