@agent-native/core 0.79.27 → 0.80.1

package/corpus/templates/analytics/app/pages/Settings.tsx

@@ -1,14 +1,29 @@
 import {
+  agentNativePath,
   ChangelogSettingsCard,
   LanguagePicker,
   SettingsTabsPage,
   openAgentSettings,
+  useBuilderConnectFlow,
+  useBuilderStatus,
   useT,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
+import {
+  IconCheck,
+  IconChevronDown,
+  IconCloud,
+  IconExternalLink,
+  IconKey,
+  IconLoader2,
+  IconServer,
+} from "@tabler/icons-react";
+import { useState } from "react";
 import { Link } from "react-router";
+import { toast } from "sonner";
 
 import { useAuth } from "@/components/auth/AuthProvider";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -17,14 +32,160 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { useReplayStorageStatus } from "@/hooks/use-replay-storage-status";
+import { cn } from "@/lib/utils";
 
 import changelog from "../../CHANGELOG.md?raw";
 
+const S3_STORAGE_FIELDS = [
+  {
+    key: "S3_ENDPOINT",
+    labelKey: "settings.s3EndpointLabel",
+    placeholder: "https://s3.us-east-1.amazonaws.com",
+    required: true,
+  },
+  {
+    key: "S3_BUCKET",
+    labelKey: "settings.s3BucketLabel",
+    placeholder: "my-replays-bucket",
+    required: true,
+  },
+  {
+    key: "S3_ACCESS_KEY_ID",
+    labelKey: "settings.s3AccessKeyLabel",
+    placeholder: "AKIA...",
+    required: true,
+  },
+  {
+    key: "S3_SECRET_ACCESS_KEY",
+    labelKey: "settings.s3SecretAccessKeyLabel",
+    placeholder: "••••••••",
+    required: true,
+    secret: true,
+  },
+  {
+    key: "S3_REGION",
+    labelKey: "settings.s3RegionLabel",
+    placeholder: "us-east-1",
+  },
+  {
+    key: "S3_PUBLIC_BASE_URL",
+    labelKey: "settings.s3PublicBaseUrlLabel",
+    placeholder: "https://cdn.example.com",
+  },
+] as const;
+
+async function saveS3StorageSettings(
+  values: Record<string, string>,
+): Promise<void> {
+  const vars = S3_STORAGE_FIELDS.map((field) => ({
+    key: field.key,
+    value: (values[field.key] ?? "").trim(),
+  })).filter((entry) => entry.value.length > 0);
+
+  if (vars.length === 0) {
+    throw new Error("Enter at least one storage value.");
+  }
+
+  for (const { key, value } of vars) {
+    const res = await fetch(agentNativePath("/_agent-native/secrets/adhoc"), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        name: key,
+        value,
+        scope: "workspace",
+        description: "Analytics S3-compatible replay storage", // i18n-ignore -- secret metadata description, not visible UI
+      }),
+    });
+
+    if (!res.ok) {
+      const body = (await res.json().catch(() => null)) as {
+        error?: string;
+      } | null;
+      throw new Error(body?.error ?? `Save failed (${res.status})`);
+    }
+  }
+}
+
 export default function Settings() {
   const { auth } = useAuth();
   const t = useT();
 
+  const storageStatus = useReplayStorageStatus();
+  const builderStatus = useBuilderStatus();
+  const builderConnect = useBuilderConnectFlow({
+    popupUrl:
+      builderStatus.status?.cliAuthUrl ?? builderStatus.status?.connectUrl,
+    trackingSource: "analytics_settings",
+    trackingFlow: "replay_storage",
+    onConnected: async () => {
+      await Promise.all([storageStatus.refetch(), builderStatus.refetch()]);
+      toast.success(t("settings.builderConnectedToast"));
+    },
+  });
+
+  const [savingStorage, setSavingStorage] = useState(false);
+  const [s3Values, setS3Values] = useState<Record<string, string>>({});
+  const [s3Expanded, setS3Expanded] = useState(false);
+
+  const storageConfigured = !!storageStatus.data?.configured;
+  const activeProviderName = storageStatus.data?.activeProvider?.name ?? null;
+  const activeProviderId = storageStatus.data?.activeProvider?.id ?? null;
+  const builderConnected = Boolean(
+    builderConnect.configured ||
+    builderStatus.status?.configured ||
+    storageStatus.data?.builderConfigured ||
+    activeProviderId === "builder",
+  );
+  const builderOrgName =
+    builderConnect.orgName ?? builderStatus.status?.orgName ?? null;
+  const builderStatusLoading =
+    storageStatus.isLoading ||
+    builderStatus.loading ||
+    !builderConnect.hasFetchedStatus;
+  const s3Configured = activeProviderId === "s3";
+  const s3Collapsed = builderConnected && !s3Expanded;
+
+  async function handleSaveS3Storage() {
+    const missing = s3Configured
+      ? []
+      : S3_STORAGE_FIELDS.filter(
+          (field) =>
+            "required" in field &&
+            field.required &&
+            !(s3Values[field.key] ?? "").trim(),
+        );
+    if (missing.length > 0) {
+      toast.error(t("settings.storageRequired"));
+      return;
+    }
+
+    setSavingStorage(true);
+    try {
+      await saveS3StorageSettings(s3Values);
+      setS3Values((current) => ({
+        ...current,
+        S3_SECRET_ACCESS_KEY: "",
+      }));
+      await storageStatus.refetch();
+      toast.success(t("settings.storageSaved"));
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : t("settings.storageSaveFailed"),
+      );
+    } finally {
+      setSavingStorage(false);
+    }
+  }
+
   return (
     <SettingsTabsPage
       teamLabel={t("navigation.team")}
@@ -67,6 +228,178 @@ export default function Settings() {
             </CardContent>
           </Card>
 
+          <Card
+            id="replay-storage"
+            className="bg-card border-border/50 scroll-mt-16"
+          >
+            <CardHeader>
+              <CardTitle className="text-base flex items-center gap-2">
+                <IconCloud className="size-4 text-primary" />
+                {t("settings.replayStorage")}
+              </CardTitle>
+              <CardDescription>
+                {t("settings.replayStorageDescription")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div
+                className={cn(
+                  "flex flex-col gap-3 rounded-md border px-3 py-3 sm:flex-row sm:items-center sm:justify-between",
+                  builderConnected
+                    ? "border-primary/35 bg-primary/5"
+                    : "border-border bg-accent/30",
+                )}
+              >
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2 text-sm font-medium">
+                    {builderConnected ? (
+                      <IconCheck className="h-4 w-4 text-primary" />
+                    ) : (
+                      <IconKey className="h-4 w-4 text-muted-foreground" />
+                    )}
+                    {builderStatusLoading
+                      ? t("settings.checkingBuilder")
+                      : builderConnected
+                        ? t("settings.builderConnected")
+                        : t("settings.connectBuilder")}
+                  </div>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    {builderConnected
+                      ? builderOrgName
+                        ? t("settings.builderConnectedFor", {
+                            orgName: builderOrgName,
+                          })
+                        : t("settings.builderConnectedGeneric")
+                      : t("settings.builderIncludes")}
+                  </p>
+                </div>
+                {builderConnected ? (
+                  <Badge variant="secondary" className="shrink-0">
+                    {t("settings.connected")}
+                  </Badge>
+                ) : (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="shrink-0"
+                    onClick={() =>
+                      builderConnect.start({
+                        trackingSource: "analytics_settings_replay_storage",
+                        trackingFlow: "replay_storage",
+                      })
+                    }
+                    disabled={builderConnect.connecting || builderStatusLoading}
+                  >
+                    {builderConnect.connecting ? (
+                      <IconLoader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <IconExternalLink className="h-4 w-4" />
+                    )}
+                    {t("settings.connectBuilder")}
+                  </Button>
+                )}
+              </div>
+
+              <Collapsible
+                open={builderConnected ? !s3Collapsed : true}
+                onOpenChange={(open) => setS3Expanded(open)}
+              >
+                <div className="rounded-md border border-border">
+                  <div className="flex flex-col gap-3 px-3 py-3 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="min-w-0">
+                      <div className="flex flex-wrap items-center gap-2 text-sm font-medium">
+                        <IconServer className="h-4 w-4 text-muted-foreground" />
+                        {t("settings.s3Title")}
+                        <Badge variant="outline" className="text-[10px]">
+                          {t("settings.secondary")}
+                        </Badge>
+                        {s3Configured ? (
+                          <Badge variant="secondary" className="text-[10px]">
+                            {t("settings.active")}
+                          </Badge>
+                        ) : null}
+                      </div>
+                      <p className="mt-0.5 text-xs text-muted-foreground">
+                        {builderConnected
+                          ? t("settings.s3BuilderConnectedDescription")
+                          : storageConfigured && activeProviderName
+                            ? t("settings.s3CurrentProvider", {
+                                providerName: activeProviderName,
+                              })
+                            : t("settings.s3OwnBucketDescription")}
+                      </p>
+                    </div>
+                    {builderConnected ? (
+                      <CollapsibleTrigger asChild>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="shrink-0"
+                        >
+                          {s3Collapsed
+                            ? t("settings.configureS3")
+                            : t("settings.hideS3")}
+                          <IconChevronDown
+                            className={cn(
+                              "h-4 w-4 transition-transform",
+                              !s3Collapsed && "rotate-180",
+                            )}
+                          />
+                        </Button>
+                      </CollapsibleTrigger>
+                    ) : null}
+                  </div>
+
+                  <CollapsibleContent>
+                    <div className="space-y-4 border-t border-border px-3 py-4">
+                      <div className="grid gap-4 sm:grid-cols-2">
+                        {S3_STORAGE_FIELDS.map((field) => (
+                          <div key={field.key} className="space-y-1.5">
+                            <Label htmlFor={field.key}>
+                              {t(field.labelKey)}
+                            </Label>
+                            <Input
+                              id={field.key}
+                              type={
+                                "secret" in field && field.secret
+                                  ? "password"
+                                  : "text"
+                              }
+                              value={s3Values[field.key] ?? ""}
+                              onChange={(event) =>
+                                setS3Values((current) => ({
+                                  ...current,
+                                  [field.key]: event.target.value,
+                                }))
+                              }
+                              placeholder={field.placeholder}
+                              autoComplete="off"
+                              disabled={savingStorage}
+                            />
+                          </div>
+                        ))}
+                      </div>
+
+                      <div className="flex justify-end">
+                        <Button
+                          onClick={handleSaveS3Storage}
+                          disabled={savingStorage || storageStatus.isLoading}
+                        >
+                          {savingStorage && (
+                            <IconLoader2 className="h-4 w-4 animate-spin" />
+                          )}
+                          {t("settings.saveStorage")}
+                        </Button>
+                      </div>
+                    </div>
+                  </CollapsibleContent>
+                </div>
+              </Collapsible>
+            </CardContent>
+          </Card>
+
           <Card className="bg-card border-border/50">
             <CardHeader>
               <CardTitle className="text-base">

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

@@ -229,7 +229,7 @@ function PanelEditorContent({
         `The \`demo\` source is reserved for the built-in Node Exporter demo and does not satisfy REAL_DATA_REQUIRED unless the user explicitly asks to work on that demo dashboard. ` +
         `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 \`.before("panel-id")\`, \`.after("panel-id")\`, or \`.atIndex(n)\` to place the panel. ` +
+        `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'), chartType ('line'|'area'|'bar'|'metric'|'table'|'pie'|'section'), 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}. ` +
@@ -238,6 +238,7 @@ 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. ` +
         `Config is optional: { xKey, yKey, yKeys, yFormatter ('number'|'currency'|'percent'), description, columns, pivot, limit, color, colors, stacked, legend, valueLabels }. ` +
         `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. ` +
         `Every BigQuery panel is dry-run validated on save — if columns/tables are wrong the save returns a 400 with the BQ error and you must fix the SQL and retry. ` +
         `After the mutation saves, verify the returned panelCount, appliedOps, and insertedPanelIds; the UI refreshes automatically.`,

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

@@ -1,4 +1,9 @@
-import { clampDashboardColumns, clampPanelWidth, type SqlPanel } from "./types";
+import {
+  clampDashboardColumns,
+  clampPanelWidth,
+  MAX_DASHBOARD_COLUMNS,
+  type SqlPanel,
+} from "./types";
 
 export type DashboardPanelRow = {
   key: string;
@@ -38,6 +43,19 @@ export type DashboardClientRect = {
   bottom: number;
 };
 
+export type DashboardDropSlotCandidate = {
+  id: string;
+  slot: DashboardDropSlot;
+  rect: DashboardClientRect;
+};
+
+export type DashboardColumnExpansion = {
+  columns: number;
+  sectionPanelId: string | null;
+};
+
+const COLUMN_SLOT_EDGE_PROXIMITY_PX = 48;
+
 function rowKey(panels: SqlPanel[], index: number): string {
   return panels.map((panel) => panel.id).join(":") || `empty-${index}`;
 }
@@ -62,6 +80,77 @@ export function distanceFromPointerToRect(
   return Math.hypot(dx, dy);
 }
 
+function pointerIsInsideRect(
+  pointer: DashboardPointerCoordinates,
+  rect: DashboardClientRect,
+): boolean {
+  return (
+    pointer.x >= rect.left &&
+    pointer.x <= rect.right &&
+    pointer.y >= rect.top &&
+    pointer.y <= rect.bottom
+  );
+}
+
+function pointerIsHorizontallyInsideRect(
+  pointer: DashboardPointerCoordinates,
+  rect: DashboardClientRect,
+): boolean {
+  return pointer.x >= rect.left && pointer.x <= rect.right;
+}
+
+function closestDropSlotCandidate(
+  pointer: DashboardPointerCoordinates,
+  candidates: DashboardDropSlotCandidate[],
+): { candidate: DashboardDropSlotCandidate; distance: number } | null {
+  let closest: DashboardDropSlotCandidate | null = null;
+  let closestDistance = Number.MAX_VALUE;
+
+  for (const candidate of candidates) {
+    const distance = distanceFromPointerToRect(pointer, candidate.rect);
+    if (distance < closestDistance) {
+      closest = candidate;
+      closestDistance = distance;
+    }
+  }
+
+  return closest ? { candidate: closest, distance: closestDistance } : null;
+}
+
+export function preferredDropSlotId(
+  pointer: DashboardPointerCoordinates,
+  candidates: DashboardDropSlotCandidate[],
+): string | null {
+  if (candidates.length === 0) return null;
+
+  const columnSlotsUnderPointerX = candidates.filter(
+    (candidate) =>
+      candidate.slot.type === "column" &&
+      pointerIsHorizontallyInsideRect(pointer, candidate.rect),
+  );
+  const closestColumnSlot = closestDropSlotCandidate(
+    pointer,
+    columnSlotsUnderPointerX,
+  );
+  if (
+    closestColumnSlot &&
+    closestColumnSlot.distance <= COLUMN_SLOT_EDGE_PROXIMITY_PX
+  ) {
+    return closestColumnSlot.candidate.id;
+  }
+
+  const containingSlots = candidates.filter((candidate) =>
+    pointerIsInsideRect(pointer, candidate.rect),
+  );
+  const closestContainingSlot = closestDropSlotCandidate(
+    pointer,
+    containingSlots,
+  );
+  if (closestContainingSlot) return closestContainingSlot.candidate.id;
+
+  return closestDropSlotCandidate(pointer, candidates)?.candidate.id ?? null;
+}
+
 export function rebalanceRowWidths(
   panels: SqlPanel[],
   columns: number,
@@ -276,7 +365,7 @@ export function isDropSlotAvailable(
   const rowContainsPanel = row.panels.some((panel) => panel.id === panelId);
   if (rowContainsPanel) return row.panels.length > 1;
 
-  return row.panels.length < group.columns;
+  return row.panels.length < MAX_DASHBOARD_COLUMNS;
 }
 
 export function availableDropSlotIdsForPanel(
@@ -294,7 +383,9 @@ export function availableDropSlotIdsForPanel(
     for (let rowIndex = 0; rowIndex < group.rows.length; rowIndex++) {
       const row = group.rows[rowIndex];
       const rowContainsPanel = row.panels.some((panel) => panel.id === panelId);
-      if (!rowContainsPanel && row.panels.length >= group.columns) continue;
+      if (!rowContainsPanel && row.panels.length >= MAX_DASHBOARD_COLUMNS) {
+        continue;
+      }
       if (rowContainsPanel && row.panels.length <= 1) continue;
 
       for (
@@ -317,6 +408,29 @@ export function availableDropSlotIdsForPanel(
   return ids;
 }
 
+export function columnExpansionForDropSlot(
+  groups: DashboardPanelGroup[],
+  panelId: string,
+  slot: DashboardDropSlot,
+): DashboardColumnExpansion | null {
+  if (slot.type !== "column") return null;
+
+  const group = groups.find((item) => item.key === slot.groupKey);
+  const row = group?.rows[slot.rowIndex];
+  if (!group || !row) return null;
+
+  const rowContainsPanel = row.panels.some((panel) => panel.id === panelId);
+  const requiredColumns = rowContainsPanel
+    ? row.panels.length
+    : row.panels.length + 1;
+  if (requiredColumns <= group.columns) return null;
+
+  return {
+    columns: clampDashboardColumns(requiredColumns),
+    sectionPanelId: group.section?.id ?? null,
+  };
+}
+
 export function movePanelToDropSlot(
   panels: SqlPanel[],
   panelId: string,
@@ -408,6 +522,10 @@ export function movePanelToDropSlot(
       0,
       movingPanel,
     );
+    targetGroup.columns = Math.max(
+      targetGroup.columns,
+      clampDashboardColumns(targetRow.panels.length),
+    );
   }
 
   return flattenGroups(nextGroups);