@agent-native/core 0.84.67 → 0.85.0

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

@@ -43,6 +43,7 @@ import { useReplayStorageStatus } from "@/hooks/use-replay-storage-status";
 import { cn } from "@/lib/utils";
 
 import changelog from "../../CHANGELOG.md?raw";
+import { AlertRulesSettingsCard } from "./settings/AlertRulesSettingsCard";
 
 const S3_STORAGE_FIELDS = [
   {
@@ -418,6 +419,8 @@ export default function Settings() {
             </CardContent>
           </Card>
 
+          <AlertRulesSettingsCard />
+
           <Card className="bg-card border-border/50">
             <CardHeader>
               <CardTitle className="text-base">

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

@@ -5,9 +5,8 @@ import {
   useT,
 } from "@agent-native/core/client";
 import {
+  IconChevronLeft,
   IconFilter,
-  IconMail,
-  IconPencil,
   IconPlus,
   IconSend,
   IconTrash,
@@ -50,6 +49,8 @@ type DashboardReportSubscription = {
   lastError: string | null;
 };
 
+type DialogView = "list" | "form";
+
 interface EmailReportDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -98,6 +99,7 @@ export function EmailReportDialog({
   const defaultEmail = session?.email ?? "";
   const defaultName = `${dashboardName} daily email`;
 
+  const [view, setView] = useState<DialogView>("form");
   const [selectedId, setSelectedId] = useState<string | undefined>();
   const [name, setName] = useState(defaultName);
   const [recipientsText, setRecipientsText] = useState(defaultEmail);
@@ -155,6 +157,7 @@ export function EmailReportDialog({
     setTimeOfDay(sub.timeOfDay);
     setTimezone(sub.timezone);
     setEnabled(sub.enabled);
+    setView("form");
   };
 
   const resetForm = () => {
@@ -167,6 +170,16 @@ export function EmailReportDialog({
     setEnabled(true);
   };
 
+  const startNewSubscription = () => {
+    resetForm();
+    setView("form");
+  };
+
+  const returnToList = () => {
+    resetForm();
+    setView("list");
+  };
+
   useEffect(() => {
     if (!open) {
       initialized.current = false;
@@ -174,9 +187,11 @@ export function EmailReportDialog({
     }
     if (initialized.current || isLoading) return;
     if (subscriptions[0]) {
-      loadSubscription(subscriptions[0]);
+      resetForm();
+      setView("list");
     } else {
       resetForm();
+      setView("form");
     }
     initialized.current = true;
   }, [open, isLoading, subscriptions, defaultEmail, defaultName]);
@@ -213,8 +228,12 @@ export function EmailReportDialog({
   const handleDelete = async () => {
     if (!selectedId) return;
     try {
+      const hasRemainingSubscriptions = subscriptions.some(
+        (sub) => sub.id !== selectedId,
+      );
       await deleteSubscription.mutateAsync({ id: selectedId });
       resetForm();
+      setView(hasRemainingSubscriptions ? "list" : "form");
       await refetch();
       toast.success(t("sqlDashboard.reportSubscriptionDeleted"));
     } catch (err: any) {
@@ -241,6 +260,9 @@ export function EmailReportDialog({
     }
   };
 
+  const isListView = subscriptions.length > 0 && view === "list";
+  const isFormView = !isListView;
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[560px] max-h-[90vh] overflow-y-auto">
@@ -253,30 +275,26 @@ export function EmailReportDialog({
           </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 className="space-y-5">
+          {isListView ? (
+            <div className="space-y-3">
+              <div className="flex items-center justify-between gap-3">
+                <Label>{t("sqlDashboard.existingReportSubscriptions")}</Label>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={startNewSubscription}
+                >
+                  <IconPlus className="mr-1.5 h-3.5 w-3.5" />
+                  {t("sqlDashboard.newSubscription")}
+                </Button>
               </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"
-                    }`}
+                    className="flex w-full items-center justify-between gap-3 rounded-md border px-3 py-2 text-left transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                     onClick={() => loadSubscription(sub)}
                   >
                     <span className="min-w-0">
@@ -293,144 +311,164 @@ export function EmailReportDialog({
                   </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>
+          ) : null}
 
-            <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>
+          {isFormView ? (
+            <>
+              <div className="flex items-center justify-between gap-3">
+                {subscriptions.length > 0 ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="-ml-2 px-2"
+                    onClick={returnToList}
+                  >
+                    <IconChevronLeft className="mr-1.5 h-3.5 w-3.5" />
+                    {t("sqlDashboard.existingReportSubscriptions")}
+                  </Button>
+                ) : null}
+                <p className="text-sm font-medium">
+                  {selectedId
+                    ? t("sqlDashboard.updateSubscription")
+                    : t("sqlDashboard.newSubscription")}
+                </p>
+              </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="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">
-              <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="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="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>
+                <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>
 
-            {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 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>
-                  {t("sqlDashboard.reportNextRun")}:{" "}
-                  {formatDate(
-                    selectedSubscription.nextRunAt,
-                    t("sqlDashboard.never"),
-                  )}
+
+                <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>
-            ) : null}
-          </div>
+            </>
+          ) : null}
         </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 ? (
+        {isFormView ? (
+          <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
-              variant="outline"
               size="sm"
-              onClick={handleSendNow}
-              disabled={sendNow.isPending}
+              onClick={handleSave}
+              disabled={saveSubscription.isPending}
             >
-              <IconSend className="mr-1.5 h-3.5 w-3.5" />
-              {sendNow.isPending
-                ? t("sqlDashboard.reportSending")
-                : t("sqlDashboard.reportSendNow")}
+              {saveSubscription.isPending
+                ? t("sqlDashboard.saving")
+                : selectedId
+                  ? t("sqlDashboard.updateSubscription")
+                  : t("sqlDashboard.saveSubscription")}
             </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>
+          </DialogFooter>
+        ) : null}
       </DialogContent>
     </Dialog>
   );

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

@@ -27,17 +27,20 @@ import {
 } from "@dnd-kit/core";
 import {
   IconArchive,
+  IconBuilding,
   IconClock,
   IconDotsVertical,
   IconEye,
   IconEyeOff,
   IconGripVertical,
   IconInfoCircle,
+  IconLock,
   IconMail,
   IconPencil,
   IconPlus,
   IconTrash,
   IconUser,
+  IconWorld,
   IconX,
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -1422,24 +1425,14 @@ export default function SqlDashboardPage() {
                   </span>
                 )}
                 {dashboardVisibility ? (
-                  <span
-                    className={`flex items-center gap-1.5 font-medium ${
-                      dashboardVisibility === "public"
-                        ? "text-green-600"
-                        : dashboardVisibility === "org"
-                          ? "text-blue-600"
-                          : "text-yellow-600"
-                    }`}
-                  >
-                    <span
-                      className={`h-1.5 w-1.5 rounded-full ${
-                        dashboardVisibility === "public"
-                          ? "bg-green-500"
-                          : dashboardVisibility === "org"
-                            ? "bg-blue-500"
-                            : "bg-yellow-500"
-                      }`}
-                    />
+                  <span className="flex items-center gap-1.5">
+                    {dashboardVisibility === "public" ? (
+                      <IconWorld className="h-3 w-3" />
+                    ) : dashboardVisibility === "org" ? (
+                      <IconBuilding className="h-3 w-3" />
+                    ) : (
+                      <IconLock className="h-3 w-3" />
+                    )}
                     {dashboardVisibility === "public"
                       ? t("sqlDashboard.public")
                       : dashboardVisibility === "org"

package/corpus/templates/analytics/app/pages/analyses/AnalysisDetail.tsx

@@ -11,7 +11,10 @@ import {
   IconTrash,
   IconClock,
   IconArrowLeft,
+  IconBuilding,
   IconDatabase,
+  IconLock,
+  IconWorld,
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect } from "react";
@@ -288,24 +291,14 @@ export default function AnalysisDetail() {
             {analysis.author && (
               <span>{t("analyses.byAuthor", { author: analysis.author })}</span>
             )}
-            <span
-              className={`flex items-center gap-1.5 font-medium ${
-                analysis.visibility === "public"
-                  ? "text-green-600"
-                  : analysis.visibility === "org"
-                    ? "text-blue-600"
-                    : "text-yellow-600"
-              }`}
-            >
-              <span
-                className={`h-1.5 w-1.5 rounded-full ${
-                  analysis.visibility === "public"
-                    ? "bg-green-500"
-                    : analysis.visibility === "org"
-                      ? "bg-blue-500"
-                      : "bg-yellow-500"
-                }`}
-              />
+            <span className="flex items-center gap-1.5">
+              {analysis.visibility === "public" ? (
+                <IconWorld className="h-3 w-3" />
+              ) : analysis.visibility === "org" ? (
+                <IconBuilding className="h-3 w-3" />
+              ) : (
+                <IconLock className="h-3 w-3" />
+              )}
               {analysis.visibility === "public"
                 ? t("analyses.public")
                 : analysis.visibility === "org"

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

@@ -21,6 +21,7 @@ import {
   IconPlayerSkipForward,
   IconPlayerTrackNext,
   IconRoute,
+  IconTerminal2,
   IconTimelineEvent,
 } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
@@ -51,6 +52,9 @@ import {
 import { getIdToken } from "@/lib/auth";
 import { cn } from "@/lib/utils";
 
+import { extractReplayDiagnostics } from "./session-replay-devtools";
+import { SessionDevToolsPanel } from "./SessionDevToolsPanel";
+
 type SessionRecordingSummary = {
   id: string;
   clientRecordingId: string;
@@ -393,6 +397,7 @@ function ReplayPlayer({
   const [totalTime, setTotalTime] = useState(0);
   const [speed, setSpeed] = useState(DEFAULT_SPEED);
   const [skipInactive, setSkipInactive] = useState(true);
+  const [devToolsOpen, setDevToolsOpen] = useState(false);
   const [streamedDims, setStreamedDims] = useState<{
     width: number;
     height: number;
@@ -414,6 +419,9 @@ function ReplayPlayer({
     () => currentUrlAt(events, currentTime),
     [events, currentTime],
   );
+  const diagnostics = useMemo(() => extractReplayDiagnostics(events), [events]);
+  const devToolsIssueCount =
+    diagnostics.consoleErrorCount + diagnostics.networkFailedCount;
 
   useEffect(() => {
     const el = stageAreaRef.current;
@@ -494,7 +502,14 @@ function ReplayPlayer({
         showWarning: false,
         showDebug: false,
         triggerFocus: false,
-        mouseTail: false,
+        // Subtle FullStory-style trail behind the visitor cursor. The canvas
+        // is resized alongside the iframe in applyReplayFrameDimensions.
+        mouseTail: {
+          strokeStyle: "rgba(59, 130, 246, 0.35)",
+          lineWidth: 2,
+          duration: 600,
+          lineCap: "round",
+        },
         insertStyleRules: [
           "[data-radix-popper-content-wrapper], .Toastify, [class*='toast'], [class*='Toast'] { display: none !important; }",
         ],
@@ -793,6 +808,31 @@ function ReplayPlayer({
                   : t("sessions.skipInactiveOff")}
               </TooltipContent>
             </Tooltip>
+
+            <button
+              type="button"
+              className={cn(
+                "inline-flex h-8 items-center gap-1.5 rounded-md border px-2 text-xs font-medium transition-colors hover:bg-muted",
+                devToolsOpen && "border-primary/40 bg-primary/10 text-primary",
+              )}
+              onClick={() => setDevToolsOpen((value) => !value)}
+              aria-pressed={devToolsOpen}
+              aria-expanded={devToolsOpen}
+            >
+              <IconTerminal2 className="h-4 w-4" />
+              {t("sessions.devtools")}
+              {devToolsIssueCount > 0 ? (
+                <span
+                  className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 font-mono text-[10px] font-semibold leading-none text-white"
+                  aria-label={t("sessions.devtoolsIssueCount", {
+                    count: String(devToolsIssueCount),
+                  })}
+                >
+                  {devToolsIssueCount > 99 ? "99+" : devToolsIssueCount}
+                </span>
+              ) : null}
+            </button>
+
             <span className="ms-auto hidden text-xs text-muted-foreground lg:inline">
               {t("sessions.replayEventCount", {
                 events: String(response.eventCount),
@@ -801,6 +841,14 @@ function ReplayPlayer({
             </span>
           </div>
 
+          {devToolsOpen ? (
+            <SessionDevToolsPanel
+              diagnostics={diagnostics}
+              currentTime={currentTime}
+              onSeek={(ms) => seek(ms, true)}
+            />
+          ) : null}
+
           {response.unavailableChunks > 0 ? (
             <div className="border-t px-4 py-2 text-xs text-muted-foreground">
               {t("sessions.unavailableChunks", {