@agent-native/core 0.77.24 → 0.78.1

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

@@ -0,0 +1,437 @@
+import {
+  useActionMutation,
+  useActionQuery,
+  useSession,
+  useT,
+} from "@agent-native/core/client";
+import {
+  IconFilter,
+  IconMail,
+  IconPencil,
+  IconPlus,
+  IconSend,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+
+import {
+  normalizeReportFilterSnapshot,
+  reportFilterSnapshotKey,
+  savedReportFiltersForEdit,
+} from "./report-filters";
+
+type DashboardReportSubscription = {
+  id: string;
+  dashboardId: string;
+  name: string;
+  recipients: string[];
+  filters: Record<string, string>;
+  timeOfDay: string;
+  timezone: string;
+  enabled: boolean;
+  nextRunAt: string | null;
+  lastRunAt: string | null;
+  lastStatus: "success" | "error" | "running" | null;
+  lastError: string | null;
+};
+
+interface EmailReportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dashboardId: string;
+  dashboardName: string;
+  filters: Record<string, string>;
+}
+
+function localTimezone(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch {
+    return "UTC";
+  }
+}
+
+function splitRecipients(value: string): string[] {
+  return value
+    .split(/[\n,]+/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function formatDate(value: string | null, fallback: string): string {
+  if (!value) return fallback;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return fallback;
+  return date.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+export function EmailReportDialog({
+  open,
+  onOpenChange,
+  dashboardId,
+  dashboardName,
+  filters,
+}: EmailReportDialogProps) {
+  const t = useT();
+  const { session } = useSession();
+  const initialized = useRef(false);
+  const defaultEmail = session?.email ?? "";
+  const defaultName = `${dashboardName} daily email`;
+
+  const [selectedId, setSelectedId] = useState<string | undefined>();
+  const [name, setName] = useState(defaultName);
+  const [recipientsText, setRecipientsText] = useState(defaultEmail);
+  const [reportFilters, setReportFilters] = useState<Record<string, string>>(
+    () => normalizeReportFilterSnapshot(filters),
+  );
+  const [timeOfDay, setTimeOfDay] = useState("09:00");
+  const [timezone, setTimezone] = useState(localTimezone());
+  const [enabled, setEnabled] = useState(true);
+
+  const { data, isLoading, refetch } = useActionQuery<
+    DashboardReportSubscription[]
+  >(
+    "list-dashboard-report-subscriptions",
+    dashboardId ? { dashboardId } : undefined,
+    { enabled: open && !!dashboardId },
+  );
+  const saveSubscription = useActionMutation(
+    "save-dashboard-report-subscription",
+  );
+  const deleteSubscription = useActionMutation(
+    "delete-dashboard-report-subscription",
+    { method: "DELETE" },
+  );
+  const sendNow = useActionMutation("send-dashboard-report-now");
+
+  const subscriptions = useMemo(
+    () => (Array.isArray(data) ? data : []),
+    [data],
+  );
+  const selectedSubscription = subscriptions.find(
+    (sub) => sub.id === selectedId,
+  );
+  const currentFilterSnapshot = useMemo(
+    () => normalizeReportFilterSnapshot(filters),
+    [filters],
+  );
+  const currentFilterSnapshotKey = useMemo(
+    () => reportFilterSnapshotKey(currentFilterSnapshot),
+    [currentFilterSnapshot],
+  );
+  const reportFilterKey = useMemo(
+    () => reportFilterSnapshotKey(reportFilters),
+    [reportFilters],
+  );
+  const reportFilterCount = Object.keys(reportFilters).length;
+  const reportFiltersMatchCurrent =
+    reportFilterKey === currentFilterSnapshotKey;
+
+  const loadSubscription = (sub: DashboardReportSubscription) => {
+    setSelectedId(sub.id);
+    setName(sub.name);
+    setRecipientsText(sub.recipients.join("\n"));
+    setReportFilters(savedReportFiltersForEdit(sub.filters));
+    setTimeOfDay(sub.timeOfDay);
+    setTimezone(sub.timezone);
+    setEnabled(sub.enabled);
+  };
+
+  const resetForm = () => {
+    setSelectedId(undefined);
+    setName(defaultName);
+    setRecipientsText(defaultEmail);
+    setReportFilters(currentFilterSnapshot);
+    setTimeOfDay("09:00");
+    setTimezone(localTimezone());
+    setEnabled(true);
+  };
+
+  useEffect(() => {
+    if (!open) {
+      initialized.current = false;
+      return;
+    }
+    if (initialized.current || isLoading) return;
+    if (subscriptions[0]) {
+      loadSubscription(subscriptions[0]);
+    } else {
+      resetForm();
+    }
+    initialized.current = true;
+  }, [open, isLoading, subscriptions, defaultEmail, defaultName]);
+
+  const handleSave = async () => {
+    const recipients = splitRecipients(recipientsText);
+    if (recipients.length === 0) {
+      toast.error(t("sqlDashboard.reportRecipientsRequired"));
+      return;
+    }
+    try {
+      const saved = await saveSubscription.mutateAsync({
+        id: selectedId,
+        dashboardId,
+        name: name.trim() || defaultName,
+        recipients,
+        filters: reportFilters,
+        timeOfDay,
+        timezone,
+        enabled,
+      });
+      loadSubscription(saved as DashboardReportSubscription);
+      await refetch();
+      toast.success(t("sqlDashboard.reportSubscriptionSaved"));
+    } catch (err: any) {
+      toast.error(
+        t("sqlDashboard.reportSubscriptionSaveFailed", {
+          message: err?.message ?? String(err),
+        }),
+      );
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!selectedId) return;
+    try {
+      await deleteSubscription.mutateAsync({ id: selectedId });
+      resetForm();
+      await refetch();
+      toast.success(t("sqlDashboard.reportSubscriptionDeleted"));
+    } catch (err: any) {
+      toast.error(
+        t("sqlDashboard.reportSubscriptionDeleteFailed", {
+          message: err?.message ?? String(err),
+        }),
+      );
+    }
+  };
+
+  const handleSendNow = async () => {
+    if (!selectedId) return;
+    try {
+      await sendNow.mutateAsync({ id: selectedId });
+      await refetch();
+      toast.success(t("sqlDashboard.reportSent"));
+    } catch (err: any) {
+      toast.error(
+        t("sqlDashboard.reportSendFailed", {
+          message: err?.message ?? String(err),
+        }),
+      );
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[560px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{t("sqlDashboard.emailReports")}</DialogTitle>
+          <DialogDescription>
+            {t("sqlDashboard.emailReportsDescription", {
+              name: dashboardName,
+            })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <div className="flex items-center justify-between gap-3">
+              <Label>{t("sqlDashboard.existingReportSubscriptions")}</Label>
+              <Button variant="outline" size="sm" onClick={resetForm}>
+                <IconPlus className="mr-1.5 h-3.5 w-3.5" />
+                {t("sqlDashboard.newSubscription")}
+              </Button>
+            </div>
+            {subscriptions.length === 0 ? (
+              <div className="rounded-md border border-dashed px-3 py-4 text-sm text-muted-foreground">
+                {t("sqlDashboard.noReportSubscriptions")}
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {subscriptions.map((sub) => (
+                  <button
+                    key={sub.id}
+                    type="button"
+                    className={`flex w-full items-center justify-between gap-3 rounded-md border px-3 py-2 text-left transition-colors ${
+                      sub.id === selectedId
+                        ? "border-primary bg-primary/5"
+                        : "hover:bg-muted/60"
+                    }`}
+                    onClick={() => loadSubscription(sub)}
+                  >
+                    <span className="min-w-0">
+                      <span className="block truncate text-sm font-medium">
+                        {sub.name}
+                      </span>
+                      <span className="block truncate text-xs text-muted-foreground">
+                        {sub.recipients.join(", ")}
+                      </span>
+                    </span>
+                    <span className="shrink-0 text-xs text-muted-foreground">
+                      {formatDate(sub.nextRunAt, t("sqlDashboard.never"))}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2 sm:col-span-2">
+              <Label htmlFor="dashboard-report-name">
+                {t("sqlDashboard.reportName")}
+              </Label>
+              <Input
+                id="dashboard-report-name"
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+              />
+            </div>
+
+            <div className="space-y-2 sm:col-span-2">
+              <Label htmlFor="dashboard-report-recipients">
+                {t("sqlDashboard.reportRecipients")}
+              </Label>
+              <Textarea
+                id="dashboard-report-recipients"
+                value={recipientsText}
+                onChange={(event) => setRecipientsText(event.target.value)}
+                placeholder={t("sqlDashboard.reportRecipientsPlaceholder")}
+                className="min-h-[76px]"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="dashboard-report-time">
+                {t("sqlDashboard.reportSendTime")}
+              </Label>
+              <Input
+                id="dashboard-report-time"
+                type="time"
+                value={timeOfDay}
+                onChange={(event) => setTimeOfDay(event.target.value)}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="dashboard-report-timezone">
+                {t("sqlDashboard.reportTimezone")}
+              </Label>
+              <Input
+                id="dashboard-report-timezone"
+                value={timezone}
+                onChange={(event) => setTimezone(event.target.value)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between gap-3 rounded-md border px-3 py-2 sm:col-span-2">
+              <div className="min-w-0">
+                <Label>{t("sqlDashboard.reportEnabled")}</Label>
+                <p className="text-xs text-muted-foreground">
+                  {t("sqlDashboard.reportFilterSnapshot", {
+                    count: reportFilterCount,
+                  })}
+                </p>
+              </div>
+              <div className="flex shrink-0 items-center gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setReportFilters(currentFilterSnapshot)}
+                  disabled={reportFiltersMatchCurrent}
+                >
+                  <IconFilter className="mr-1.5 h-3.5 w-3.5" />
+                  {t("sqlDashboard.reportUseCurrentFilters")}
+                </Button>
+                <Switch checked={enabled} onCheckedChange={setEnabled} />
+              </div>
+            </div>
+
+            {selectedSubscription ? (
+              <div className="grid gap-2 text-xs text-muted-foreground sm:col-span-2 sm:grid-cols-2">
+                <div>
+                  {t("sqlDashboard.reportLastRun")}:{" "}
+                  {formatDate(
+                    selectedSubscription.lastRunAt,
+                    t("sqlDashboard.never"),
+                  )}
+                </div>
+                <div>
+                  {t("sqlDashboard.reportNextRun")}:{" "}
+                  {formatDate(
+                    selectedSubscription.nextRunAt,
+                    t("sqlDashboard.never"),
+                  )}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          {selectedId ? (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleDelete}
+              disabled={deleteSubscription.isPending}
+            >
+              <IconTrash className="mr-1.5 h-3.5 w-3.5" />
+              {t("sidebar.delete")}
+            </Button>
+          ) : null}
+          {selectedId ? (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleSendNow}
+              disabled={sendNow.isPending}
+            >
+              <IconSend className="mr-1.5 h-3.5 w-3.5" />
+              {sendNow.isPending
+                ? t("sqlDashboard.reportSending")
+                : t("sqlDashboard.reportSendNow")}
+            </Button>
+          ) : null}
+          <Button
+            size="sm"
+            onClick={handleSave}
+            disabled={saveSubscription.isPending}
+          >
+            {selectedId ? (
+              <IconPencil className="mr-1.5 h-3.5 w-3.5" />
+            ) : (
+              <IconMail className="mr-1.5 h-3.5 w-3.5" />
+            )}
+            {saveSubscription.isPending
+              ? t("sqlDashboard.saving")
+              : selectedId
+                ? t("sqlDashboard.updateSubscription")
+                : t("sqlDashboard.saveSubscription")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -1,5 +1,5 @@
 import { useT } from "@agent-native/core/client";
-import { useSortable } from "@dnd-kit/sortable";
+import { useDraggable } from "@dnd-kit/core";
 import { CSS } from "@dnd-kit/utilities";
 import {
   IconGripVertical,
@@ -58,6 +58,7 @@ interface SqlChartCardProps {
    *  validation failure so the popover can stay open and surface the error. */
   onSaveSql?: (sql: string) => Promise<void>;
   editable?: boolean;
+  eagerLoad?: boolean;
 }
 
 export function SqlChartCard({
@@ -67,23 +68,18 @@ export function SqlChartCard({
   onEdit,
   onSaveSql,
   editable = true,
+  eagerLoad = false,
 }: SqlChartCardProps) {
   const t = useT();
   const queryClient = useQueryClient();
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: panel.id, disabled: !editable });
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({ id: panel.id, disabled: !editable });
 
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [expanded, setExpanded] = useState(false);
   const [exportCsv, setExportCsv] = useState<(() => void) | null>(null);
   const [shouldLoadData, setShouldLoadData] = useState(
-    panel.chartType === "section",
+    eagerLoad || panel.chartType === "section",
   );
   const cardRef = useRef<HTMLDivElement | null>(null);
 
@@ -112,6 +108,10 @@ export function SqlChartCard({
   }, [panel.id, panel.source, panel.sql, queryClient, resolvedSql]);
 
   useEffect(() => {
+    if (eagerLoad) {
+      setShouldLoadData(true);
+      return;
+    }
     if (panel.chartType === "section") {
       setShouldLoadData(true);
       return;
@@ -138,7 +138,7 @@ export function SqlChartCard({
     );
     observer.observe(node);
     return () => observer.disconnect();
-  }, [panel.chartType, panel.id]);
+  }, [eagerLoad, panel.chartType, panel.id]);
 
   useEffect(() => {
     setExportCsv(null);
@@ -146,7 +146,6 @@ export function SqlChartCard({
 
   const style = {
     transform: CSS.Transform.toString(transform),
-    transition,
     zIndex: isDragging ? 50 : undefined,
     opacity: isDragging ? 0.7 : 1,
   };

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

@@ -212,6 +212,41 @@ export function readDropSlot(value: unknown): DashboardDropSlot | null {
   return null;
 }
 
+function panelIsInRenderedRow(
+  groups: DashboardPanelGroup[],
+  panelId: string,
+): boolean {
+  return groups.some((group) =>
+    group.rows.some((row) => row.panels.some((panel) => panel.id === panelId)),
+  );
+}
+
+export function isDropSlotAvailable(
+  groups: DashboardPanelGroup[],
+  panelId: string,
+  slot: DashboardDropSlot,
+): boolean {
+  if (!panelIsInRenderedRow(groups, panelId)) return false;
+
+  const group = groups.find((item) => item.key === slot.groupKey);
+  if (!group) return false;
+
+  if (slot.type === "row") {
+    return slot.rowIndex >= 0 && slot.rowIndex <= group.rows.length;
+  }
+
+  const row = group.rows[slot.rowIndex];
+  if (!row) return false;
+  if (slot.columnIndex < 0 || slot.columnIndex > row.panels.length) {
+    return false;
+  }
+
+  const rowContainsPanel = row.panels.some((panel) => panel.id === panelId);
+  if (rowContainsPanel) return row.panels.length > 1;
+
+  return row.panels.length < group.columns;
+}
+
 export function movePanelToDropSlot(
   panels: SqlPanel[],
   panelId: string,
@@ -270,6 +305,14 @@ export function movePanelToDropSlot(
     });
   } else {
     let rowIndex = slot.rowIndex;
+    if (
+      sourceGroupKey === slot.groupKey &&
+      sourceRowWasSingle &&
+      sourceRowIndex === rowIndex
+    ) {
+      return panels;
+    }
+
     if (
       sourceGroupKey === slot.groupKey &&
       sourceRowWasSingle &&