@agent-native/core 0.97.0 → 0.98.1

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

@@ -1,32 +1,18 @@
 import {
-  agentNativePath,
   ChangelogSettingsCard,
   LanguagePicker,
   SettingsTabsPage,
   useAgentSettingsTabs,
-  useBuilderConnectFlow,
-  useBuilderStatus,
+  useSession,
   useT,
   type SettingsSearchEntry,
   type SettingsTabItem,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
-import {
-  IconBell,
-  IconCheck,
-  IconChevronDown,
-  IconCloud,
-  IconExternalLink,
-  IconKey,
-  IconLoader2,
-  IconServer,
-} from "@tabler/icons-react";
-import { useMemo, useState } from "react";
+import { IconBell } from "@tabler/icons-react";
+import { useMemo } 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,
@@ -35,161 +21,22 @@ 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";
+import { useReplayStorageStatus } from "../hooks/use-replay-storage-status";
+import { ReplayStorageHint } from "./sessions/SessionsPage";
 import { AlertRulesSettingsCard } from "./settings/AlertRulesSettingsCard";
 
-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();
+  // Settings is also reachable directly from the full-page agent surface.
+  // Read the session from the framework's owning AppProviders boundary rather
+  // than the template-local compatibility context, which may be remounted
+  // independently during that route transition.
+  const { session: auth } = useSession();
   const t = useT();
   const agentSettingsTabs = useAgentSettingsTabs();
-
-  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);
-    }
-  }
+  const replayStorageStatus = useReplayStorageStatus();
 
   const extraTabs = useMemo<SettingsTabItem[]>(
     () => [
@@ -223,18 +70,22 @@ export default function Settings() {
         keywords: "data sources api keys manage credentials",
         hash: "credentials",
       },
-      {
-        id: "analytics-replay-storage",
-        label: t("settings.replayStorage"),
-        keywords: "storage s3 builder replay bucket cloud",
-        hash: "replay-storage",
-      },
       {
         id: "analytics-dashboard-templates",
         label: t("settings.dashboardTemplates"),
         keywords: "templates catalog dashboards",
         hash: "dashboard-templates",
       },
+      ...(replayStorageStatus.data?.configured
+        ? [
+            {
+              id: "analytics-replay-storage",
+              label: t("sessions.storageSetupTitle"),
+              keywords: "session replay recording storage s3 bucket builder",
+              hash: "replay-storage",
+            },
+          ]
+        : []),
       {
         id: "analytics-language",
         label: t("settings.languageTitle"),
@@ -248,7 +99,7 @@ export default function Settings() {
         hash: "about",
       },
     ],
-    [t],
+    [replayStorageStatus.data?.configured, t],
   );
 
   return (
@@ -298,178 +149,6 @@ 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
             id="dashboard-templates"
             className="bg-card border-border/50 scroll-mt-16"
@@ -491,6 +170,25 @@ export default function Settings() {
             </CardContent>
           </Card>
 
+          {replayStorageStatus.data?.configured ? (
+            <Card
+              id="replay-storage"
+              className="bg-card border-border/50 scroll-mt-16"
+            >
+              <CardHeader>
+                <CardTitle className="text-base">
+                  {t("sessions.storageSetupTitle")}
+                </CardTitle>
+                <CardDescription>
+                  {t("sessions.storageSetupDescription")}
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ReplayStorageHint />
+              </CardContent>
+            </Card>
+          ) : null}
+
           <Card id="language" className="bg-card border-border/50 scroll-mt-16">
             <CardHeader>
               <CardTitle className="text-base">

package/corpus/templates/analytics/app/pages/adhoc/explorer/components/SqlPreview.tsx

@@ -1,6 +1,6 @@
 import { useT } from "@agent-native/core/client";
 import { IconChevronRight, IconCopy, IconCheck } from "@tabler/icons-react";
-import { useState } from "react";
+import { useId, useState } from "react";
 
 import { SqlHighlight } from "@/components/SqlHighlight";
 import { Button } from "@/components/ui/button";
@@ -12,6 +12,7 @@ interface SqlPreviewProps {
 
 export function SqlPreview({ sql }: SqlPreviewProps) {
   const t = useT();
+  const contentId = useId();
   const [expanded, setExpanded] = useState(false);
   const [copied, setCopied] = useState(false);
 
@@ -25,7 +26,10 @@ export function SqlPreview({ sql }: SqlPreviewProps) {
     <div className="border rounded-lg">
       <button
         className="flex items-center gap-2 w-full px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        type="button"
         onClick={() => setExpanded(!expanded)}
+        aria-expanded={expanded}
+        aria-controls={contentId}
       >
         <IconChevronRight
           className={cn(
@@ -35,26 +39,38 @@ export function SqlPreview({ sql }: SqlPreviewProps) {
         />
         {t("explorer.sqlQuery")}
       </button>
-      {expanded && (
-        <div className="relative border-t">
-          <SqlHighlight
-            sql={sql}
-            preClassName="p-3 overflow-auto max-h-[300px] bg-muted/50 rounded-b-lg"
-          />
-          <Button
-            variant="ghost"
-            size="icon"
-            className="absolute top-2 right-2 h-6 w-6"
-            onClick={handleCopy}
-          >
-            {copied ? (
-              <IconCheck className="h-3 w-3" />
-            ) : (
-              <IconCopy className="h-3 w-3" />
-            )}
-          </Button>
+      <div
+        id={contentId}
+        aria-hidden={!expanded}
+        inert={!expanded}
+        className={cn(
+          "grid transition-[grid-template-rows,opacity] duration-150 ease-out motion-reduce:transition-none",
+          expanded
+            ? "grid-rows-[1fr] opacity-100"
+            : "pointer-events-none grid-rows-[0fr] opacity-0",
+        )}
+      >
+        <div className="min-h-0 overflow-hidden">
+          <div className="relative border-t">
+            <SqlHighlight
+              sql={sql}
+              preClassName="p-3 overflow-auto max-h-[300px] bg-muted/50 rounded-b-lg"
+            />
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute top-2 right-2 h-6 w-6"
+              onClick={handleCopy}
+            >
+              {copied ? (
+                <IconCheck className="h-3 w-3" />
+              ) : (
+                <IconCopy className="h-3 w-3" />
+              )}
+            </Button>
+          </div>
         </div>
-      )}
+      </div>
     </div>
   );
 }

package/corpus/templates/analytics/app/pages/adhoc/explorer/index.tsx

@@ -9,6 +9,7 @@ import {
 import { useMemo, useState, useEffect } from "react";
 import { useSearchParams } from "react-router";
 
+import { ResourceLoadError } from "@/components/ResourceLoadError";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -54,6 +55,8 @@ export default function ExplorerPage() {
     setConfig,
     currentId,
     savedConfigs,
+    savedConfigsError,
+    retrySavedConfigs,
     loadConfig,
     saveConfig,
     deleteConfig,
@@ -158,27 +161,38 @@ export default function ExplorerPage() {
                   {t("explorer.saveAs")}
                 </DropdownMenuItem>
               )}
-              {savedConfigs.length > 0 && <DropdownMenuSeparator />}
-              {savedConfigs.map((sc) => (
-                <DropdownMenuItem
-                  key={sc.id}
-                  className="flex items-center justify-between"
-                  onClick={() => loadConfig(sc.id)}
-                >
-                  <span className="truncate">{sc.name}</span>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-5 w-5 shrink-0 ml-2"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setDeleteConfirm({ id: sc.id, name: sc.name });
-                    }}
+              {(savedConfigsError || savedConfigs.length > 0) && (
+                <DropdownMenuSeparator />
+              )}
+              {savedConfigsError ? (
+                <ResourceLoadError
+                  inline
+                  message={t("commandPalette.loadFailed")}
+                  retryLabel={t("sidebar.retry")}
+                  onRetry={() => void retrySavedConfigs()}
+                />
+              ) : (
+                savedConfigs.map((sc) => (
+                  <DropdownMenuItem
+                    key={sc.id}
+                    className="flex items-center justify-between"
+                    onClick={() => loadConfig(sc.id)}
                   >
-                    <IconTrash className="h-3 w-3 text-destructive" />
-                  </Button>
-                </DropdownMenuItem>
-              ))}
+                    <span className="truncate">{sc.name}</span>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-5 w-5 shrink-0 ml-2"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setDeleteConfirm({ id: sc.id, name: sc.name });
+                      }}
+                    >
+                      <IconTrash className="h-3 w-3 text-destructive" />
+                    </Button>
+                  </DropdownMenuItem>
+                ))
+              )}
             </DropdownMenuContent>
           </DropdownMenu>