@agent-native/core 0.80.0 → 0.80.1

package/corpus/templates/analytics/app/pages/sessions/SessionsPage.tsx

@@ -1,16 +1,25 @@
 import { CodeSurface } from "@agent-native/core/blocks";
-import { useActionQuery, useT } from "@agent-native/core/client";
+import {
+  useActionQuery,
+  useBuilderConnectFlow,
+  useBuilderStatus,
+  useT,
+} from "@agent-native/core/client";
 import {
   IconChevronDown,
+  IconCheck,
+  IconCloud,
   IconCode,
   IconExternalLink,
   IconFilter,
+  IconLoader2,
   IconPlayerPlay,
   IconRefresh,
   IconSearch,
+  IconServer,
 } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
-import { useNavigate, useSearchParams } from "react-router";
+import { Link, useNavigate, useSearchParams } from "react-router";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -24,6 +33,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useReplayStorageStatus } from "@/hooks/use-replay-storage-status";
 import { cn } from "@/lib/utils";
 
 type ReplayRange = "24h" | "7d" | "30d" | "90d" | "all";
@@ -294,46 +304,137 @@ export default function SessionsPage() {
 
 function EmptySessionsState() {
   const t = useT();
+  const storageStatus = useReplayStorageStatus();
+  const showStorageHint =
+    !storageStatus.isLoading && !storageStatus.data?.configured;
   return (
-    <div className="grid min-h-[380px] gap-6 p-6 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:p-8">
-      <div className="flex flex-col justify-center gap-3">
-        <div className="flex h-10 w-10 items-center justify-center rounded-md border bg-muted/40">
-          <IconPlayerPlay className="h-5 w-5 text-primary" />
+    <div className="p-6 lg:p-8">
+      {showStorageHint ? <ReplayStorageHint /> : null}
+      <div className="grid min-h-[380px] gap-6 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+        <div className="flex flex-col justify-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-md border bg-muted/40">
+            <IconPlayerPlay className="h-5 w-5 text-primary" />
+          </div>
+          <div className="space-y-2">
+            <h2 className="text-lg font-semibold">
+              {t("sessions.noSessions")}
+            </h2>
+            <p className="max-w-xl text-sm text-muted-foreground">
+              {t("sessions.noSessionsDescription")}
+            </p>
+          </div>
         </div>
-        <div className="space-y-2">
-          <h2 className="text-lg font-semibold">{t("sessions.noSessions")}</h2>
-          <p className="max-w-xl text-sm text-muted-foreground">
-            {t("sessions.noSessionsDescription")}
-          </p>
+        <div className="analytics-session-snippet overflow-hidden rounded-md border bg-muted/30">
+          <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
+            <div className="flex min-w-0 items-center gap-2 text-sm font-medium">
+              <IconCode className="h-4 w-4 text-muted-foreground" />
+              <span className="truncate">
+                {t("sessions.installSnippetTitle")}
+              </span>
+            </div>
+            <Button
+              asChild
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-xs"
+            >
+              <a
+                href={SESSION_REPLAY_DOCS_URL}
+                target="_blank"
+                rel="noreferrer"
+              >
+                {t("common.docs")}
+                <IconExternalLink className="h-3.5 w-3.5" />
+              </a>
+            </Button>
+          </div>
+          <CodeSurface
+            code={SESSION_REPLAY_SNIPPET}
+            language="typescript"
+            maxLines={null}
+            showLanguageLabel={false}
+            className="mt-0"
+          />
         </div>
       </div>
-      <div className="analytics-session-snippet overflow-hidden rounded-md border bg-muted/30">
-        <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
-          <div className="flex min-w-0 items-center gap-2 text-sm font-medium">
-            <IconCode className="h-4 w-4 text-muted-foreground" />
-            <span className="truncate">
-              {t("sessions.installSnippetTitle")}
-            </span>
+    </div>
+  );
+}
+
+function ReplayStorageHint() {
+  const t = useT();
+  const storageStatus = useReplayStorageStatus();
+  const builderStatus = useBuilderStatus();
+  const builderConnect = useBuilderConnectFlow({
+    popupUrl:
+      builderStatus.status?.cliAuthUrl ?? builderStatus.status?.connectUrl,
+    trackingSource: "analytics_sessions_storage_hint",
+    trackingFlow: "replay_storage",
+    onConnected: async () => {
+      await Promise.all([storageStatus.refetch(), builderStatus.refetch()]);
+    },
+  });
+
+  const builderConnected = Boolean(
+    builderConnect.configured ||
+    builderStatus.status?.configured ||
+    storageStatus.data?.builderConfigured,
+  );
+  const builderStatusLoading =
+    storageStatus.isLoading ||
+    builderStatus.loading ||
+    !builderConnect.hasFetchedStatus;
+
+  return (
+    <div className="mb-6 flex flex-col gap-4 rounded-md border border-primary/30 bg-primary/5 p-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex min-w-0 items-start gap-3">
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-background text-primary">
+          <IconCloud className="h-5 w-5" />
+        </div>
+        <div className="min-w-0">
+          <div className="text-sm font-medium">
+            {t("sessions.storageSetupTitle")}
           </div>
-          <Button
-            asChild
-            variant="ghost"
-            size="sm"
-            className="h-7 px-2 text-xs"
-          >
-            <a href={SESSION_REPLAY_DOCS_URL} target="_blank" rel="noreferrer">
-              {t("common.docs")}
-              <IconExternalLink className="h-3.5 w-3.5" />
-            </a>
-          </Button>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            {t("sessions.storageSetupDescription")}
+          </p>
         </div>
-        <CodeSurface
-          code={SESSION_REPLAY_SNIPPET}
-          language="typescript"
-          maxLines={null}
-          showLanguageLabel={false}
-          className="mt-0"
-        />
+      </div>
+      <div className="flex shrink-0 flex-wrap items-center gap-3">
+        <Button
+          type="button"
+          size="sm"
+          className="shrink-0"
+          onClick={() =>
+            builderConnect.start({
+              trackingSource: "analytics_sessions_storage_hint",
+              trackingFlow: "replay_storage",
+            })
+          }
+          disabled={
+            builderConnect.connecting ||
+            builderStatusLoading ||
+            builderConnected
+          }
+        >
+          {builderConnect.connecting ? (
+            <IconLoader2 className="h-4 w-4 animate-spin" />
+          ) : builderConnected ? (
+            <IconCheck className="h-4 w-4" />
+          ) : (
+            <IconExternalLink className="h-4 w-4" />
+          )}
+          {builderConnected
+            ? t("sessions.storageConnected")
+            : t("sessions.connectBuilder")}
+        </Button>
+        <Link
+          to="/settings#replay-storage"
+          className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground underline underline-offset-2 hover:text-foreground"
+        >
+          <IconServer className="h-3.5 w-3.5" />
+          {t("sessions.configureS3")}
+        </Link>
       </div>
     </div>
   );

package/corpus/templates/analytics/changelog/2026-06-29-analytics-agents-can-now-place-new-charts-into-requested-das.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Analytics agents can now place new charts into requested dashboard rows.

package/corpus/templates/analytics/changelog/2026-06-29-analytics-queries-now-report-failed-source-query-errors-inst.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Analytics queries now report failed source-query errors instead of falling back to a vague no-data message.

package/corpus/templates/analytics/changelog/2026-06-29-charts-can-now-be-dropped-between-full-dashboard-rows-to-cre.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Charts can now be dropped between full dashboard rows to create wider rows.

package/corpus/templates/analytics/changelog/2026-06-29-dashboard-email-reports-include-the-full-dashboard-image-wit.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Dashboard email reports include the full dashboard image without an extra image border.

package/corpus/templates/analytics/changelog/2026-06-29-main-surface-border-reaches-the-top.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+The main dashboard surface border now reaches the top edge and keeps its rounded corners.

package/corpus/templates/analytics/changelog/2026-06-29-session-replay-now-records-playable-sessions-in-production-a.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Session replay now records playable sessions in production and shows them to your whole workspace

package/corpus/templates/analytics/changelog/2026-06-29-set-up-session-replay-storage-from-settings-connect-builder-.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-29
+---
+
+Set up session replay storage from settings: connect Builder.io or add S3-compatible storage

package/corpus/templates/analytics/scripts/cleanup-empty-session-recordings.ts

@@ -0,0 +1,102 @@
+#!/usr/bin/env tsx
+
+/**
+ * One-time maintenance for session replay rows created before the capture fix.
+ *
+ * Two jobs:
+ *  1. Delete empty "shell" recordings — rows that were created on ingest but
+ *     never stored any replay data (chunk_count = 0, event_count = 0, and no
+ *     session_replay_chunks rows). These exist because, before the ingest
+ *     credential-scope fix, blob storage failed in production (no resolvable
+ *     upload provider) and left unplayable husks behind. They are always
+ *     filtered out of /sessions, so this is pure DB hygiene.
+ *  2. Backfill visibility "private" -> "org" for org-scoped recordings, so
+ *     existing recordings follow the same org-visible model new ingests now use
+ *     (teammates in the org can see them, not only the key owner).
+ *
+ * SAFE BY DEFAULT: dry-run unless you pass --apply. This connects to whatever
+ * DATABASE_URL the app is configured with, so double-check the target before
+ * using --apply against production.
+ *
+ *   pnpm --filter analytics exec tsx scripts/cleanup-empty-session-recordings.ts            # dry run
+ *   pnpm --filter analytics exec tsx scripts/cleanup-empty-session-recordings.ts --apply    # mutate
+ */
+
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+
+import { and, eq, isNotNull, sql } from "drizzle-orm";
+
+import { getDb, schema } from "../server/db/index";
+import migrations from "../server/plugins/db";
+
+const apply = process.argv.includes("--apply");
+
+const emptyShellCondition = and(
+  eq(schema.sessionRecordings.chunkCount, 0),
+  eq(schema.sessionRecordings.eventCount, 0),
+  sql`not exists (
+    select 1 from ${schema.sessionReplayChunks}
+    where ${schema.sessionReplayChunks.recordingId} = ${schema.sessionRecordings.id}
+  )`,
+);
+
+const orgPrivateCondition = and(
+  isNotNull(schema.sessionRecordings.orgId),
+  eq(schema.sessionRecordings.visibility, "private"),
+);
+
+async function countWhere(condition: unknown): Promise<number> {
+  const db = getDb() as any;
+  const rows = await db
+    .select({ n: sql<number>`count(*)::int` })
+    .from(schema.sessionRecordings)
+    .where(condition);
+  return Number(rows[0]?.n ?? 0);
+}
+
+async function main() {
+  await migrations({});
+  const db = getDb() as any;
+
+  const emptyShells = await countWhere(emptyShellCondition);
+  const orgPrivate = await countWhere(orgPrivateCondition);
+
+  console.log(`[cleanup] mode: ${apply ? "APPLY (mutating)" : "dry-run"}`);
+  console.log(`[cleanup] empty shell recordings to delete: ${emptyShells}`);
+  console.log(
+    `[cleanup] org-scoped recordings to make org-visible: ${orgPrivate}`,
+  );
+
+  if (!apply) {
+    console.log("[cleanup] dry-run only — re-run with --apply to mutate.");
+    return;
+  }
+
+  // Backfill visibility first so we don't widen rows we're about to delete.
+  await db
+    .update(schema.sessionRecordings)
+    .set({ visibility: "org" })
+    .where(orgPrivateCondition);
+  console.log(
+    `[cleanup] backfilled ${orgPrivate} recordings to visibility=org`,
+  );
+
+  await db.delete(schema.sessionRecordings).where(emptyShellCondition);
+  console.log(`[cleanup] deleted ${emptyShells} empty shell recordings`);
+}
+
+function isDirectRun(): boolean {
+  const entrypoint = process.argv[1];
+  return Boolean(
+    entrypoint &&
+    import.meta.url === pathToFileURL(path.resolve(entrypoint)).href,
+  );
+}
+
+if (isDirectRun()) {
+  main().catch((error) => {
+    console.error(error);
+    process.exit(1);
+  });
+}

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

@@ -39,17 +39,17 @@ const DATE_FILTER_TYPES: ReadonlySet<FilterType> = new Set([
 const DEFAULT_SERVERLESS_CHROMIUM_PACK_URL =
   "https://github.com/Sparticuz/chromium/releases/download/v149.0.0/chromium-v149.0.0-pack.x64.tar";
 const DASHBOARD_REPORT_SCREENSHOT_PARAM = "reportScreenshot";
-const DASHBOARD_REPORT_PANEL_LIMIT_PARAM = "reportPanelLimit";
 const DASHBOARD_REPORT_SETTINGS_PARAM = "reportSettings";
 const DASHBOARD_REPORT_CID = "dashboard-report-snapshot";
-const COMPACT_REPORT_PANEL_LIMIT = 12;
 const LOCAL_SCREENSHOT_TIMEOUT_MS = 90_000;
 const SERVERLESS_SCREENSHOT_TIMEOUT_MS = 25_000;
 const SERVERLESS_SECOND_READY_TIMEOUT_MS = 10_000;
+const MAX_SCREENSHOT_VIEWPORT_HEIGHT = 30_000;
+const SCREENSHOT_VIEWPORT_PADDING = 64;
 
 type DashboardScreenshotAttempt = {
-  label: "full" | "compact";
-  panelLimit?: number;
+  label: "full" | "full-lightweight";
+  viewport: { width: number; height: number };
 };
 
 function daysAgo(n: number): string {
@@ -119,7 +119,6 @@ function buildDashboardPath(
   options?: {
     reportScreenshot?: boolean;
     reportSettings?: boolean;
-    panelLimit?: number;
   },
 ): string {
   const url = new URL(
@@ -135,12 +134,6 @@ function buildDashboardPath(
   if (options?.reportSettings) {
     url.searchParams.set(DASHBOARD_REPORT_SETTINGS_PARAM, "1");
   }
-  if (options?.panelLimit && options.panelLimit > 0) {
-    url.searchParams.set(
-      DASHBOARD_REPORT_PANEL_LIMIT_PARAM,
-      String(Math.floor(options.panelLimit)),
-    );
-  }
   return `${url.pathname}${url.search}`;
 }
 
@@ -150,7 +143,6 @@ function buildDashboardUrl(
   options?: {
     reportScreenshot?: boolean;
     reportSettings?: boolean;
-    panelLimit?: number;
   },
 ): string {
   const path = buildDashboardPath(dashboardId, filters, options);
@@ -319,6 +311,44 @@ async function scrollDashboardForLazyRendering(page: any): Promise<void> {
   })()`);
 }
 
+async function fitViewportToDashboardCapture(
+  page: any,
+  capture: any,
+  minViewport: { width: number; height: number },
+): Promise<void> {
+  const box = await capture.boundingBox();
+  if (!box) return;
+
+  const size = {
+    width: Math.max(
+      minViewport.width,
+      Math.min(1800, Math.ceil(box.width + SCREENSHOT_VIEWPORT_PADDING)),
+    ),
+    height: Math.max(
+      minViewport.height,
+      Math.min(
+        MAX_SCREENSHOT_VIEWPORT_HEIGHT,
+        Math.ceil(box.height + SCREENSHOT_VIEWPORT_PADDING),
+      ),
+    ),
+  };
+  await page.setViewportSize(size);
+  await page.waitForTimeout(250);
+
+  const resizedBox = await capture.boundingBox();
+  if (!resizedBox) return;
+  const resizedHeight = Math.ceil(
+    resizedBox.height + SCREENSHOT_VIEWPORT_PADDING,
+  );
+  if (resizedHeight > size.height) {
+    await page.setViewportSize({
+      width: size.width,
+      height: Math.min(MAX_SCREENSHOT_VIEWPORT_HEIGHT, resizedHeight),
+    });
+    await page.waitForTimeout(250);
+  }
+}
+
 async function captureDashboardPng(
   sub: DashboardReportSubscription,
   snapshot: ReportSnapshot,
@@ -329,7 +359,6 @@ async function captureDashboardPng(
     snapshot.filters,
     {
       reportScreenshot: true,
-      panelLimit: attempt.panelLimit,
     },
   );
   const token = signEmbedSessionToken({
@@ -347,7 +376,7 @@ async function captureDashboardPng(
   try {
     const timeout = screenshotTimeoutMs();
     const page = await browser.newPage({
-      viewport: { width: 1440, height: 1800 },
+      viewport: attempt.viewport,
       deviceScaleFactor: 1,
     });
     page.setDefaultTimeout(timeout);
@@ -371,13 +400,7 @@ async function captureDashboardPng(
         : timeout,
     );
 
-    const box = await capture.boundingBox();
-    if (box) {
-      await page.setViewportSize({
-        width: Math.max(1200, Math.min(1800, Math.ceil(box.width + 64))),
-        height: Math.max(1000, Math.min(7000, Math.ceil(box.height + 64))),
-      });
-    }
+    await fitViewportToDashboardCapture(page, capture, attempt.viewport);
     await capture.scrollIntoViewIfNeeded();
     const image = await capture.screenshot({
       type: "png",
@@ -401,12 +424,12 @@ async function captureDashboardPngWithFallback(
   snapshot: ReportSnapshot,
 ): Promise<{
   png: Buffer | null;
-  mode: "full" | "compact" | "none";
+  mode: "full" | "full-lightweight" | "none";
   error?: string;
 }> {
   const attempts: DashboardScreenshotAttempt[] = [
-    { label: "full" },
-    { label: "compact", panelLimit: COMPACT_REPORT_PANEL_LIMIT },
+    { label: "full", viewport: { width: 1440, height: 1800 } },
+    { label: "full-lightweight", viewport: { width: 1200, height: 1400 } },
   ];
   let lastError: string | undefined;
 
@@ -446,7 +469,7 @@ function renderReportEmailHtml(
   const date = escapeHtml(reportDate(snapshot));
   const screenshotBlock = options.screenshotAttached
     ? `<a href="${dashboardUrl}" style="display:block;text-decoration:none;">
-      <img src="cid:${DASHBOARD_REPORT_CID}" alt="${title}" width="100%" style="display:block;width:100%;max-width:1280px;height:auto;border:1px solid #e5e7eb;border-radius:8px;" />
+      <img src="cid:${DASHBOARD_REPORT_CID}" alt="${title}" width="100%" style="display:block;width:100%;max-width:1280px;height:auto;border:0;outline:0;border-radius:0;" />
     </a>`
     : `<div style="margin:18px 0;padding:14px 16px;border:1px solid #e5e7eb;border-radius:8px;background:#f9fafb;color:#374151;font-size:14px;line-height:1.5;">
       The dashboard image was unavailable for this run. Open the live dashboard to view the latest report.
@@ -502,7 +525,7 @@ export async function sendDashboardReportSubscription(
   dashboardUrl: string;
   recipientCount: number;
   screenshotAttached: boolean;
-  screenshotMode: "full" | "compact" | "none";
+  screenshotMode: "full" | "full-lightweight" | "none";
   screenshotError?: string;
 }> {
   const snapshot = await collectReportSnapshot(sub);