@agent-native/core 0.114.13 → 0.114.16

package/corpus/core/src/client/integrations/IntegrationsPanel.tsx

@@ -14,7 +14,6 @@ import {
 } from "@tabler/icons-react";
 import React, { useState, useCallback, useEffect } from "react";
 
-import { AgentAskPopover } from "../AgentAskPopover.js";
 import { agentNativePath } from "../api-path.js";
 import {
   Tooltip,
@@ -135,7 +134,8 @@ const PLATFORMS: PlatformInfo[] = [
       "Builder.io discovers each agent's skills via A2A",
       "Chat with one agent that can trigger actions across all your apps",
     ],
-    docsUrl: "https://www.builder.io",
+    docsUrl:
+      "https://www.builder.io?utm_source=agent-native&utm_medium=product&utm_campaign=integrations&utm_content=integrations_panel",
   },
 ];
 
@@ -512,14 +512,6 @@ export function IntegrationsPanel() {
         <div className="text-[10px] font-medium text-muted-foreground mb-1.5">
           {t("integrations.addChatIntegration")}
         </div>
-        <AgentAskPopover
-          label={t("integrations.addSomething")}
-          title={t("integrations.addSomethingTitle")}
-          placeholder={t("integrations.addSomethingPlaceholder")}
-          prompt=""
-          context="The user wants to add a chat or workspace integration that is not in the current directory. Research the provider's official OAuth or MCP setup, explain any app registration or allowlist requirements, and add a reusable integration preset when it is supported. Never ask the user to paste credentials into a prompt."
-          className="mb-2 h-7 w-full justify-center border-dashed px-2 text-[10px]"
-        />
         <AddIntegrationPicker
           connectedIds={connectedIds}
           onSelect={(p) => {
@@ -554,14 +546,6 @@ export function IntegrationsPanel() {
             </TooltipTrigger>
             <TooltipContent>{t("integrations.addIntegration")}</TooltipContent>
           </Tooltip>
-          <AgentAskPopover
-            label={t("integrations.addSomething")}
-            title={t("integrations.addSomethingTitle")}
-            placeholder={t("integrations.addSomethingPlaceholder")}
-            prompt=""
-            context="The user wants to add a chat or workspace integration that is not in the current directory. Research the provider's official OAuth or MCP setup, explain any app registration or allowlist requirements, and add a reusable integration preset when it is supported. Never ask the user to paste credentials into a prompt."
-            className="h-7 px-2 text-[10px]"
-          />
         </div>
       </div>
 

package/corpus/core/src/client/resources/McpIntegrationDialog.tsx

@@ -7,7 +7,6 @@ import {
 } from "@tabler/icons-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
-import { AgentAskPopover } from "../AgentAskPopover.js";
 import { agentNativePath } from "../api-path.js";
 import { openAgentSettings } from "../CommandMenu.js";
 import {
@@ -62,6 +61,40 @@ interface TestResult {
   message: string;
 }
 
+function IntegrationLogo({ name, logoUrl }: { name: string; logoUrl: string }) {
+  const [loaded, setLoaded] = useState(false);
+  const [loadFailed, setLoadFailed] = useState(false);
+
+  useEffect(() => {
+    setLoaded(false);
+    setLoadFailed(false);
+  }, [logoUrl]);
+
+  return (
+    <div className="relative flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-background text-[11px] font-semibold text-muted-foreground">
+      <span aria-hidden="true" hidden={loaded}>
+        {name.slice(0, 1)}
+      </span>
+      <img
+        src={logoUrl}
+        alt=""
+        loading="lazy"
+        decoding="async"
+        className="absolute inset-1 h-6 w-6 object-contain"
+        hidden={loadFailed}
+        onLoad={() => {
+          setLoadFailed(false);
+          setLoaded(true);
+        }}
+        onError={() => {
+          setLoadFailed(true);
+          setLoaded(false);
+        }}
+      />
+    </div>
+  );
+}
+
 function parseHeaderLines(text: string): Record<string, string> | undefined {
   const out: Record<string, string> = {};
   for (const line of text.split(/\r?\n/)) {
@@ -412,7 +445,9 @@ export function McpIntegrationDialog({
             <DialogHeader className="shrink-0 px-7 pb-5 pe-14 pt-6">
               <DialogTitle>{t("mcpIntegrations.title")}</DialogTitle>
               <DialogDescription>
-                {t("mcpIntegrations.description")}
+                {t("mcpIntegrations.description", {
+                  count: defaultIntegrations.length,
+                })}
               </DialogDescription>
             </DialogHeader>
             <div className="flex shrink-0 flex-col gap-3 px-7 pb-5 sm:flex-row">
@@ -435,14 +470,6 @@ export function McpIntegrationDialog({
               >
                 {t("mcpIntegrations.addYourOwn")}
               </button>
-              <AgentAskPopover
-                label={t("mcpIntegrations.addSomething")}
-                title={t("mcpIntegrations.addSomethingTitle")}
-                placeholder={t("mcpIntegrations.addSomethingPlaceholder")}
-                prompt=""
-                context="The user wants to add an MCP or provider integration that is not in the current directory. Research the provider's official remote MCP endpoint and OAuth, client-registration, or allowlist requirements. Prefer Streamable HTTP endpoints over legacy SSE, reuse an existing provider OAuth connector when appropriate, and never ask the user to paste credentials into a prompt. If this should become a reusable preset, update the integration catalog, official docs link, bundled logo, localization, and tests."
-                className="h-9 whitespace-nowrap border-dashed px-3 text-[12px] font-medium"
-              />
             </div>
             <div className="min-h-0 flex-1 overflow-y-auto px-7 pb-7">
               {error && (
@@ -467,27 +494,16 @@ export function McpIntegrationDialog({
                       className="flex min-h-[128px] flex-col rounded-md border border-border bg-card p-4 transition-colors hover:border-border/80 hover:bg-accent/20"
                     >
                       <div className="flex items-center gap-3">
-                        <div className="relative flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-background text-[11px] font-semibold text-muted-foreground">
-                          <span aria-hidden="true">
-                            {integration.name.slice(0, 1)}
-                          </span>
-                          <img
-                            src={integration.logoUrl}
-                            alt=""
-                            loading="lazy"
-                            decoding="async"
-                            className="absolute inset-1 h-6 w-6 object-contain"
-                            onError={(event) => {
-                              event.currentTarget.hidden = true;
-                            }}
-                          />
-                        </div>
+                        <IntegrationLogo
+                          name={integration.name}
+                          logoUrl={integration.logoUrl}
+                        />
                         <div className="min-w-0">
                           <h3 className="truncate text-[13px] font-semibold text-foreground">
                             {integration.name}
                           </h3>
                           {integration.availability !== "ready" && (
-                            <span className="mt-0.5 inline-flex rounded-full border border-amber-500/20 bg-amber-500/5 px-1.5 py-0.5 text-[9px] font-medium text-amber-700 dark:text-amber-300">
+                            <span className="mt-0.5 inline-flex rounded-full border border-border/70 bg-muted/40 px-1.5 py-0.5 text-[9px] font-medium text-muted-foreground">
                               {integration.availability === "beta"
                                 ? t("mcpIntegrations.status.beta")
                                 : integration.availability ===
@@ -508,11 +524,6 @@ export function McpIntegrationDialog({
                       <p className="mt-1 line-clamp-2 flex-1 text-[12px] leading-relaxed text-muted-foreground">
                         {t(integration.descriptionKey)}
                       </p>
-                      {integration.setupNoteKey && (
-                        <p className="mt-2 line-clamp-3 text-[10px] leading-relaxed text-amber-700 dark:text-amber-300">
-                          {t(integration.setupNoteKey)}
-                        </p>
-                      )}
                       <div className="mt-3 flex items-center gap-2">
                         {connected ? (
                           <button
@@ -637,7 +648,7 @@ export function McpIntegrationDialog({
               <div className="space-y-3">
                 {renderScopeSelector()}
                 {selected?.setupNoteKey && (
-                  <div className="rounded-md border border-amber-500/20 bg-amber-500/5 px-3 py-2 text-[11px] leading-relaxed text-amber-700 dark:text-amber-300">
+                  <div className="rounded-md border border-border bg-muted/40 px-3 py-2 text-[11px] leading-relaxed text-muted-foreground">
                     {t(selected.setupNoteKey)}
                   </div>
                 )}

package/corpus/core/src/client/resources/mcp-integration-catalog.ts

@@ -189,7 +189,8 @@ export const DEFAULT_MCP_INTEGRATIONS: DefaultMcpIntegration[] = [
     availability: "ready",
     verification: "preflight-only",
     logoUrl: mcpIntegrationLogo("supabase"),
-    docsUrl: "https://www.builder.io/c/docs/fusion-connect-to-supabase",
+    docsUrl:
+      "https://www.builder.io/c/docs/fusion-connect-to-supabase?utm_source=agent-native&utm_medium=product&utm_campaign=integrations&utm_content=fusion_connect_supabase",
     keywords: ["database", "auth", "postgres", "storage"],
   },
   {
@@ -206,7 +207,8 @@ export const DEFAULT_MCP_INTEGRATIONS: DefaultMcpIntegration[] = [
     availability: "ready",
     verification: "preflight-only",
     logoUrl: mcpIntegrationLogo("neon"),
-    docsUrl: "https://www.builder.io/c/docs/fusion-connect-to-neon",
+    docsUrl:
+      "https://www.builder.io/c/docs/fusion-connect-to-neon?utm_source=agent-native&utm_medium=product&utm_campaign=integrations&utm_content=fusion_connect_neon",
     keywords: ["database", "postgres", "serverless", "backend"],
   },
   {

package/corpus/core/src/client/settings/BackgroundAgentSection.tsx

@@ -6,6 +6,7 @@ import {
 } from "@tabler/icons-react";
 import { useState } from "react";
 
+import { withBuilderUtmTrackingParams } from "../../shared/builder-link-tracking.js";
 import { trackEvent } from "../analytics.js";
 import { agentNativePath } from "../api-path.js";
 import { SettingsSection } from "./SettingsSection.js";
@@ -170,7 +171,10 @@ export function BackgroundAgentSection() {
                 Branch created
               </div>
               <a
-                href={result.url}
+                href={withBuilderUtmTrackingParams(result.url, {
+                  campaign: "product",
+                  content: "background_agent_branch",
+                })}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="flex items-center gap-1 text-[10px] text-foreground hover:underline"

package/corpus/core/src/client/settings/SettingsPanel.tsx

@@ -2857,7 +2857,7 @@ function SettingsPanelContent({
               />
               <ManualSetupCard
                 hint="Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target."
-                docsUrl="https://www.builder.io/c/docs/agent-native-deployment"
+                docsUrl="https://www.builder.io/c/docs/agent-native-deployment?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=deployment_settings"
                 dim={connected}
               />
             </div>
@@ -2888,7 +2888,7 @@ function SettingsPanelContent({
               />
               <ManualSetupCard
                 hint="Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, any Postgres/SQLite database, or local PGlite with pglite:./data/pglite."
-                docsUrl="https://www.builder.io/c/docs/agent-native-database"
+                docsUrl="https://www.builder.io/c/docs/agent-native-database?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=database_settings"
                 dim={connected}
               />
             </div>
@@ -2919,7 +2919,7 @@ function SettingsPanelContent({
               />
               <ManualSetupCard
                 hint="Without a provider, files are stored as base64 in your database. Fine for dev, not recommended for production."
-                docsUrl="https://www.builder.io/c/docs/agent-native-file-uploads"
+                docsUrl="https://www.builder.io/c/docs/agent-native-file-uploads?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=file_upload_settings"
                 dim={connected}
               />
             </div>
@@ -2950,7 +2950,7 @@ function SettingsPanelContent({
               />
               <ManualSetupCard
                 hint="Configure Better Auth with BETTER_AUTH_SECRET and optional Google/GitHub OAuth providers."
-                docsUrl="https://www.builder.io/c/docs/agent-native-authentication"
+                docsUrl="https://www.builder.io/c/docs/agent-native-authentication?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=authentication_settings"
                 dim={connected}
               />
             </div>

package/corpus/core/src/client/settings/useBuilderStatus.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 
+import { applyBuilderUtmTrackingParams } from "../../shared/builder-link-tracking.js";
 import { trackEvent } from "../analytics.js";
 import { agentNativePath } from "../api-path.js";
 import { getCallbackOrigin } from "../frame.js";
@@ -343,6 +344,8 @@ export function withBuilderConnectTrackingParams(
       parsed.searchParams.set("redirect_url", parsedRedirect.toString());
     }
 
+    applyBuilderUtmTrackingParams(parsed.searchParams, { content: source });
+
     return parsed.toString();
   } catch {
     return url;

package/corpus/core/src/localization/default-messages.ts

@@ -725,9 +725,6 @@ const messages = {
     chatIntegrations: "Chat Integrations",
     chatIntegrationsDescription: "Talk to this agent from other platforms",
     addIntegration: "Add integration",
-    addSomething: "Add something not listed",
-    addSomethingTitle: "Add another integration",
-    addSomethingPlaceholder: "Which integration should we add?",
     dispatchEntrypoint:
       "For a central Slack or Telegram entrypoint that can route work across multiple apps, use the",
     sharedMessaging:
@@ -737,12 +734,9 @@ const messages = {
     menuLabel: "Integrations",
     menuDescription: "Connect MCP tools to the agent",
     title: "Connect integrations",
-    description: "Choose a default MCP integration or add a custom server.",
+    description: "Browse {{count}} MCP integrations or add a custom server.",
     searchPlaceholder: "Search integrations",
     addYourOwn: "Add your own",
-    addSomething: "Add something not listed",
-    addSomethingTitle: "Add another integration",
-    addSomethingPlaceholder: "Which MCP or provider should we add?",
     noMatches: "No integrations match that search.",
     connected: "Connected",
     configure: "Configure",

package/corpus/core/src/server/builder-browser.ts

@@ -8,6 +8,7 @@ import {
 import type { H3Event } from "h3";
 import { getHeader } from "h3";
 
+import { applyBuilderUtmTrackingParams } from "../shared/builder-link-tracking.js";
 import {
   getAuthSecret,
   resolveSignupTrackingIdentity,
@@ -920,6 +921,9 @@ export function buildBuilderCliAuthUrl(
   );
   url.searchParams.set("framework", "agent-native");
   applyBuilderConnectTrackingParams(url.searchParams, tracking);
+  applyBuilderUtmTrackingParams(url.searchParams, {
+    content: cleanTrackingParam(tracking.agentNativeConnectSource) ?? null,
+  });
   return url.toString();
 }
 

package/corpus/core/src/server/builder-design-systems.ts

@@ -1,3 +1,4 @@
+import { withBuilderUtmTrackingParams } from "../shared/builder-link-tracking.js";
 import { FeatureNotConfiguredError } from "./credential-provider.js";
 import {
   getBuilderProxyOrigin,
@@ -356,11 +357,15 @@ function nonEmptyFiles(
 
 export function builderDesignSystemUrl(designSystemId?: string | null): string {
   const host = trimTrailingSlash(getBuilderAppHost());
-  return designSystemId
+  const url = designSystemId
     ? `${host}/app/design-system-intelligence/${encodeURIComponent(
         designSystemId,
       )}`
     : `${host}/app/design-system-intelligence`;
+  return withBuilderUtmTrackingParams(url, {
+    campaign: "product",
+    content: "design_system_intelligence",
+  });
 }
 
 export function localBuilderDesignSystemId(

package/corpus/core/src/server/fusion-app.ts

@@ -24,6 +24,7 @@
  * respond with newline-delimited JSON over chunked HTTP.
  */
 
+import { withBuilderUtmTrackingParams } from "../shared/builder-link-tracking.js";
 import { getBuilderApiHost, getBuilderAppHost } from "./builder-browser.js";
 
 export interface FusionBranchRef {
@@ -86,7 +87,10 @@ function fusionUrl(
 /** The Builder visual-editor URL for a fusion branch. */
 export function getFusionBranchEditorUrl(ref: FusionBranchRef): string {
   const host = getBuilderAppHost().replace(/\/+$/, "");
-  return `${host}/app/projects/${encodeURIComponent(ref.projectId)}/${encodeURIComponent(ref.branchName)}`;
+  return withBuilderUtmTrackingParams(
+    `${host}/app/projects/${encodeURIComponent(ref.projectId)}/${encodeURIComponent(ref.branchName)}`,
+    { campaign: "product", content: "fusion_editor" },
+  );
 }
 
 /** Public URL for a reserved fusion hosting slug. */

package/corpus/core/src/shared/builder-link-tracking.ts

@@ -0,0 +1,41 @@
+export const BUILDER_UTM_SOURCE = "agent-native";
+export const BUILDER_UTM_MEDIUM = "product";
+export const BUILDER_UTM_CAMPAIGN = "onboarding";
+
+export function applyBuilderUtmTrackingParams(
+  params: URLSearchParams,
+  options: {
+    medium?: string;
+    campaign?: string;
+    content?: string | null;
+  } = {},
+): void {
+  params.set("utm_source", BUILDER_UTM_SOURCE);
+  params.set("utm_medium", options.medium ?? BUILDER_UTM_MEDIUM);
+  params.set("utm_campaign", options.campaign ?? BUILDER_UTM_CAMPAIGN);
+  if (options.content) params.set("utm_content", options.content);
+}
+
+export function withBuilderUtmTrackingParams(
+  url: string,
+  options: {
+    medium?: string;
+    campaign?: string;
+    content?: string | null;
+  } = {},
+): string {
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return url;
+  }
+  if (
+    parsed.hostname !== "builder.io" &&
+    parsed.hostname !== "www.builder.io"
+  ) {
+    return url;
+  }
+  applyBuilderUtmTrackingParams(parsed.searchParams, options);
+  return parsed.toString();
+}

package/corpus/core/src/shared/index.ts

@@ -7,6 +7,7 @@ export {
 export { agentEnv, type EnvVar } from "./agent-env.js";
 export { extractOAuthStateAppId } from "./oauth-state.js";
 export { truncate } from "./truncate.js";
+export { withBuilderUtmTrackingParams } from "./builder-link-tracking.js";
 export {
   llmConnectionTrackingProperties,
   normalizeLlmConnection,

package/corpus/templates/analytics/AGENTS.md

@@ -230,7 +230,16 @@ membership id when its native update status reports `update-available`.
   filters; do not hand-wire custom email routes around that action surface.
   Report PNGs are Playwright captures of the real dashboard route in
   `reportScreenshot=1` mode, authenticated by a short-lived embed-session token
-  and embedded inline in email with a CID image. Netlify builds emit a scheduled
+  and embedded inline in email as ordered CID images. Complete dashboards are
+  captured sequentially in bounded panel windows; every window must match the
+  panel ids snapshotted at the start, and a failed or mismatched window
+  invalidates the entire image set so the scheduler can retry instead of
+  sending a partial report. Capture is capped at 10 windows and 14 MiB of raw
+  PNG data, and subscriptions are capped at five distinct recipients; use a
+  mailing-list address for larger audiences. The serverless capture deadline
+  reserves 90 seconds of the 300-second worker budget for cleanup and delivery.
+  The ten-minute retry delay is an eligibility floor; the \*/15 sweep runs the
+  retry on its first tick after that floor. Netlify builds emit a scheduled
   trigger plus a background worker from
   `scripts/emit-netlify-dashboard-report-cron.ts`, using a per-deploy internal
   token and disabling the in-process interval scheduler on Netlify to avoid

package/corpus/templates/analytics/actions/save-dashboard-report-subscription.ts

@@ -5,7 +5,10 @@ import {
 } from "@agent-native/core/server";
 import { z } from "zod";
 
-import { saveDashboardReportSubscription } from "../server/lib/dashboard-report-subscriptions";
+import {
+  MAX_DASHBOARD_REPORT_RECIPIENTS,
+  saveDashboardReportSubscription,
+} from "../server/lib/dashboard-report-subscriptions";
 
 export default defineAction({
   description:
@@ -14,7 +17,12 @@ export default defineAction({
     id: z.string().optional().describe("Existing subscription ID to update"),
     dashboardId: z.string().describe("Dashboard ID to email"),
     name: z.string().optional().describe("Human-readable subscription name"),
-    recipients: z.array(z.string().email()).min(1).describe("Email recipients"),
+    recipients: z
+      .array(z.string().email())
+      .min(1)
+      .describe(
+        `Email recipients (maximum ${MAX_DASHBOARD_REPORT_RECIPIENTS}; use a mailing-list address for larger audiences)`,
+      ),
     filters: z
       .record(z.string(), z.string())
       .optional()

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

@@ -87,7 +87,7 @@ const DEFAULT_COLORS = [
 ];
 
 const CHART_TOOLTIP_WRAPPER_STYLE: CSSProperties = {
-  zIndex: 9999,
+  zIndex: 280,
   pointerEvents: "none",
 };
 
@@ -117,6 +117,7 @@ const CHART_LEGEND_PROPS = {
 } as const;
 
 const CHART_RESIZE_DEBOUNCE_MS = 50;
+const LEGEND_ACTION_CLOSE_DELAY_MS = 600;
 
 type ChartSize = {
   width: number;
@@ -586,7 +587,7 @@ export function SeriesLegend({
     closeTimeoutRef.current = setTimeout(() => {
       setOpenKey(null);
       closeTimeoutRef.current = null;
-    }, 200);
+    }, LEGEND_ACTION_CLOSE_DELAY_MS);
   }, [clearCloseTimeout]);
 
   useEffect(() => () => clearCloseTimeout(), [clearCloseTimeout]);
@@ -674,7 +675,7 @@ export function SeriesLegend({
                 <PopoverContent
                   side="top"
                   align="center"
-                  sideOffset={8}
+                  sideOffset={0}
                   collisionPadding={12}
                   className="w-auto max-w-[calc(100vw-1.5rem)] rounded-lg p-1 shadow-lg"
                   onPointerEnter={clearCloseTimeout}
@@ -943,7 +944,7 @@ export function ChartTooltip({
     <div
       ref={boxRef}
       role="tooltip"
-      className="fixed z-[9999] min-w-40 max-w-[280px] rounded-md border border-border bg-card px-3 py-2 text-xs text-foreground shadow-lg pointer-events-none"
+      className="fixed z-[280] min-w-40 max-w-[280px] rounded-md border border-border bg-card px-3 py-2 text-xs text-foreground shadow-lg pointer-events-none"
     >
       {labelText && (
         <div className="mb-1.5 truncate font-medium text-foreground">

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

@@ -148,6 +148,11 @@ import { dashboardExtensionSlotId } from "./extension-slot";
 import { interpolate } from "./interpolate";
 import { serializePanelSql } from "./panel-sql";
 import { AddPanelPopover, PanelEditorDialog } from "./PanelEditorDialog";
+import {
+  listReportablePanelIds,
+  parseReportPanelWindow,
+  windowReportPanels,
+} from "./report-panel-window";
 import { SqlChartCard } from "./SqlChartCard";
 import {
   clampDashboardColumns,
@@ -188,31 +193,6 @@ function groupDashboardTabs(tabs: string[]): {
   return { groups, hasNestedTabs };
 }
 
-function parseReportPanelLimit(raw: string | null): number | null {
-  if (!raw) return null;
-  const parsed = Number.parseInt(raw, 10);
-  if (!Number.isFinite(parsed) || parsed <= 0) return null;
-  return Math.min(50, parsed);
-}
-
-function limitReportPanels(panels: SqlPanel[], limit: number | null) {
-  if (!limit) return panels;
-  const limited: SqlPanel[] = [];
-  let chartCount = 0;
-
-  for (const panel of panels) {
-    if (panel.chartType === "section") {
-      if (chartCount < limit) limited.push(panel);
-      continue;
-    }
-    if (chartCount >= limit) continue;
-    chartCount++;
-    limited.push(panel);
-  }
-
-  return limited;
-}
-
 function DashboardDropLine({
   slot,
   activeSlot,
@@ -504,8 +484,11 @@ export default function SqlDashboardPage() {
   const dashboardId = searchParams.get("id") || routeId;
   const reportScreenshot = searchParams.get("reportScreenshot") === "1";
   const reportSettingsRequested = searchParams.get("reportSettings") === "1";
-  const reportPanelLimit = reportScreenshot
-    ? parseReportPanelLimit(searchParams.get("reportPanelLimit"))
+  const reportPanelWindow = reportScreenshot
+    ? parseReportPanelWindow(
+        searchParams.get("reportPanelOffset"),
+        searchParams.get("reportPanelLimit"),
+      )
     : null;
 
   const [dashboard, setDashboard] = useState<SqlDashboardConfig | null>(null);
@@ -1180,9 +1163,9 @@ export default function SqlDashboardPage() {
         ? requestedTab
         : tabs[0]
       : null;
-  // Report captures need the complete dashboard in one image. The report
-  // URL intentionally has no `tab` parameter, so do not apply the normal
-  // first-tab selection while rendering the screenshot surface.
+  // Report captures cover the complete dashboard across ordered windows. The
+  // report URL intentionally has no `tab` parameter, so do not apply the
+  // normal first-tab selection while rendering the screenshot surface.
   const activeTab = reportScreenshot ? null : selectedTab;
   const groupedTabs = useMemo(() => groupDashboardTabs(tabs), [tabs]);
   const activeTabGroup = activeTab
@@ -1221,8 +1204,8 @@ export default function SqlDashboardPage() {
     const tabPanels = activeTab
       ? dashboard.panels.filter((p) => !p.tab || p.tab === activeTab)
       : dashboard.panels;
-    return limitReportPanels(tabPanels, reportPanelLimit);
-  }, [dashboard, activeTab, reportPanelLimit]);
+    return windowReportPanels(tabPanels, reportPanelWindow);
+  }, [dashboard, activeTab, reportPanelWindow]);
 
   // Group panels into "section blocks": each section starts a new block whose
   // grid uses the section's `columns` (falling back to the dashboard default).
@@ -1713,6 +1696,11 @@ export default function SqlDashboardPage() {
       className="space-y-4"
       data-dashboard-report-capture
       data-dashboard-report-ready={loaded && dashboard ? "true" : "false"}
+      data-dashboard-report-panel-ids={
+        reportScreenshot
+          ? JSON.stringify(listReportablePanelIds(visiblePanels))
+          : undefined
+      }
     >
       {hiddenAt ? (
         <div className="flex flex-wrap items-center gap-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-200">

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/report-panel-window.ts

@@ -0,0 +1,62 @@
+import type { SqlPanel } from "./types";
+
+export const REPORT_PANEL_CHUNK_SIZE = 8;
+
+export function listReportablePanelIds(panels: SqlPanel[]): string[] {
+  return panels
+    .filter((panel) => panel.chartType !== "section")
+    .map((panel) => panel.id);
+}
+
+export function parseReportPanelWindow(
+  offsetRaw: string | null,
+  limitRaw: string | null,
+): { offset: number; limit: number } | null {
+  if (!offsetRaw || !limitRaw) return null;
+  const offset = Number.parseInt(offsetRaw, 10);
+  const limit = Number.parseInt(limitRaw, 10);
+  if (!Number.isFinite(offset) || offset < 0) return null;
+  if (!Number.isFinite(limit) || limit <= 0) return null;
+  return { offset, limit: Math.min(REPORT_PANEL_CHUNK_SIZE, limit) };
+}
+
+export function countReportablePanels(panels: SqlPanel[]): number {
+  return listReportablePanelIds(panels).length;
+}
+
+/**
+ * A report chunk is indexed by chart panels, not section headers. When a
+ * chunk starts inside a section, repeat that section header so each image is
+ * readable on its own while preserving the dashboard's panel order.
+ */
+export function windowReportPanels(
+  panels: SqlPanel[],
+  window: { offset: number; limit: number } | null,
+): SqlPanel[] {
+  if (!window) return panels;
+
+  const end = window.offset + window.limit;
+  let chartIndex = 0;
+  let activeSection: SqlPanel | null = null;
+  let includedFirstChart = false;
+  const selected: SqlPanel[] = [];
+
+  for (const panel of panels) {
+    if (panel.chartType === "section") {
+      activeSection = panel;
+      if (includedFirstChart && chartIndex < end) selected.push(panel);
+      continue;
+    }
+
+    const include = chartIndex >= window.offset && chartIndex < end;
+    if (include) {
+      if (!includedFirstChart && activeSection) selected.push(activeSection);
+      selected.push(panel);
+      includedFirstChart = true;
+    }
+    chartIndex++;
+    if (chartIndex >= end) break;
+  }
+
+  return selected;
+}

package/corpus/templates/analytics/changelog/2026-07-21-chart-series-controls-stay-open-while-moving-from-the-legend.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-21
+---
+
+Chart series controls stay open while moving from the legend