@agent-native/core 0.98.0 → 0.98.1

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

@@ -45,10 +45,20 @@ import {
 export type SessionIssueMatch = { issueId: string; status: string };
 
 /** Deep-link from a session error to the Monitoring → Errors issue detail. */
-function issueDetailPath(issueId: string): string {
+export function issueDetailPath(issueId: string): string {
   return `/monitoring?view=errors&issue=${encodeURIComponent(issueId)}`;
 }
 
+/** Search Monitoring for all captured issues resembling an unmatched line. */
+export function issueSearchPath(message: string): string {
+  const params = new URLSearchParams({
+    view: "errors",
+    status: "all",
+    q: message,
+  });
+  return `/monitoring?${params.toString()}`;
+}
+
 /** Pause row auto-follow for a while after the user scrolls the list. */
 const MANUAL_SCROLL_FOLLOW_PAUSE_MS = 4000;
 const DEVTOOLS_ROW_HEIGHT = 34;
@@ -65,14 +75,13 @@ const DEVTOOLS_MAX_HEIGHT = 620;
 export function buildDevToolsRowOffsets(
   entryCount: number,
   expandedIndex: number,
+  expandedHeight = DEVTOOLS_EXPANDED_ESTIMATE,
 ): number[] {
   const offsets = new Array<number>(entryCount + 1);
   offsets[0] = 0;
   for (let index = 0; index < entryCount; index += 1) {
     const height =
-      index === expandedIndex
-        ? DEVTOOLS_EXPANDED_ESTIMATE
-        : DEVTOOLS_ROW_HEIGHT;
+      index === expandedIndex ? expandedHeight : DEVTOOLS_ROW_HEIGHT;
     offsets[index + 1] = offsets[index] + height;
   }
   return offsets;
@@ -86,6 +95,7 @@ export function SessionDevToolsPanel({
   onHeightChange,
   onSeek,
   issueMatches,
+  issueMatching = false,
 }: {
   diagnostics: ReplayDevToolsDiagnostics;
   currentTime: number;
@@ -95,6 +105,8 @@ export function SessionDevToolsPanel({
   onSeek: (ms: number) => void;
   /** Resolved error issues by console entry id, for cross-linking to Errors. */
   issueMatches?: ReadonlyMap<string, SessionIssueMatch>;
+  /** Prevent an unmatched fallback from flashing while issue lookup is active. */
+  issueMatching?: boolean;
 }) {
   const t = useT();
   const [tab, setTab] = useState<"console" | "network">("console");
@@ -265,6 +277,7 @@ export function SessionDevToolsPanel({
                 active={entry.id === activeConsoleId}
                 selected={expanded}
                 issueMatch={issueMatches?.get(entry.id) ?? null}
+                issueMatching={issueMatching}
                 onSelect={() =>
                   setSelectedConsoleId((current) =>
                     current === entry.id ? null : entry.id,
@@ -414,6 +427,12 @@ function VirtualizedDevToolsList<T extends { id: string }>({
   const lastManualScrollAtRef = useRef(0);
   const [scrollTop, setScrollTop] = useState(0);
   const [viewportHeight, setViewportHeight] = useState(0);
+  const [expandedRowHeight, setExpandedRowHeight] = useState(
+    DEVTOOLS_EXPANDED_ESTIMATE,
+  );
+  const [expandedElement, setExpandedElement] = useState<HTMLDivElement | null>(
+    null,
+  );
 
   const activeIndex = activeEntryId
     ? entries.findIndex((entry) => entry.id === activeEntryId)
@@ -423,12 +442,31 @@ function VirtualizedDevToolsList<T extends { id: string }>({
     : -1;
 
   const rowOffsets = useMemo(
-    () => buildDevToolsRowOffsets(entries.length, expandedIndex),
-    [entries.length, expandedIndex],
+    () =>
+      buildDevToolsRowOffsets(entries.length, expandedIndex, expandedRowHeight),
+    [entries.length, expandedIndex, expandedRowHeight],
   );
 
   const totalHeight = rowOffsets[entries.length] ?? 0;
 
+  useEffect(() => {
+    setExpandedRowHeight(DEVTOOLS_EXPANDED_ESTIMATE);
+  }, [expandedEntryId]);
+
+  useEffect(() => {
+    if (!expandedElement) return;
+    const update = () => {
+      const measured = Math.ceil(
+        expandedElement.getBoundingClientRect().height,
+      );
+      if (measured > 0) setExpandedRowHeight(measured);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(expandedElement);
+    return () => observer.disconnect();
+  }, [expandedElement]);
+
   useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
@@ -510,18 +548,11 @@ function VirtualizedDevToolsList<T extends { id: string }>({
           const index = startIndex + offset;
           const expanded = entry.id === expandedEntryId;
           const top = rowOffsets[index] ?? 0;
-          const height =
-            (rowOffsets[index + 1] ?? top + DEVTOOLS_ROW_HEIGHT) - top;
           return (
-            <div
-              key={entry.id}
-              className="absolute inset-x-0"
-              style={{
-                minHeight: height,
-                top,
-              }}
-            >
-              {renderRow(entry, expanded)}
+            <div key={entry.id} className="absolute inset-x-0" style={{ top }}>
+              <div ref={expanded ? setExpandedElement : undefined}>
+                {renderRow(entry, expanded)}
+              </div>
             </div>
           );
         })}
@@ -647,11 +678,27 @@ function ViewIssueLink({
   );
 }
 
+function SearchIssuesLink({ message }: { message: string }) {
+  const et = useErrorsT();
+  return (
+    <Link
+      to={issueSearchPath(message)}
+      title={et.searchIssuesTooltip}
+      onClick={(event) => event.stopPropagation()}
+      className="inline-flex shrink-0 items-center gap-1 rounded border px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <IconSearch className="h-3 w-3" />
+      {et.searchIssues}
+    </Link>
+  );
+}
+
 function ConsoleRow({
   entry,
   active,
   selected,
   issueMatch,
+  issueMatching,
   onSelect,
   onSeek,
 }: {
@@ -659,6 +706,7 @@ function ConsoleRow({
   active: boolean;
   selected: boolean;
   issueMatch: SessionIssueMatch | null;
+  issueMatching: boolean;
   onSelect: () => void;
   onSeek: (ms: number) => void;
 }) {
@@ -723,6 +771,9 @@ function ConsoleRow({
           />
         </button>
         {issueMatch ? <ViewIssueLink issueId={issueMatch.issueId} /> : null}
+        {!issueMatch && !issueMatching && bucket === "error" ? (
+          <SearchIssuesLink message={entry.message} />
+        ) : null}
         <JumpToButton offsetMs={entry.offsetMs} onSeek={onSeek} />
       </div>
       {selected ? (
@@ -757,6 +808,10 @@ function ConsoleRow({
             <div className="pt-1">
               <ViewIssueLink issueId={issueMatch.issueId} />
             </div>
+          ) : !issueMatching && bucket === "error" ? (
+            <div className="pt-1">
+              <SearchIssuesLink message={entry.message} />
+            </div>
           ) : null}
         </div>
       ) : null}

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

@@ -1,13 +1,14 @@
 import { CodeSurface } from "@agent-native/core/blocks";
 import {
+  agentNativePath,
   useActionQuery,
   useBuilderConnectFlow,
   useBuilderStatus,
   useT,
 } from "@agent-native/core/client";
 import {
-  IconChevronDown,
   IconCheck,
+  IconChevronDown,
   IconCloud,
   IconCode,
   IconExternalLink,
@@ -17,14 +18,28 @@ import {
   IconRefresh,
   IconSearch,
   IconServer,
+  IconSettings,
 } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router";
+import { toast } from "sonner";
 
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } 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 {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -33,6 +48,11 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useReplayStorageStatus } from "@/hooks/use-replay-storage-status";
 import { cn } from "@/lib/utils";
 
@@ -41,6 +61,73 @@ type ReplayRange = "24h" | "7d" | "30d" | "90d" | "all";
 const SESSION_REPLAY_DOCS_URL =
   "https://www.agent-native.com/docs/tracking#session-replay";
 
+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);
+
+  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})`);
+    }
+  }
+}
+
 type SessionRecordingSummary = {
   id: string;
   clientRecordingId: string;
@@ -85,7 +172,6 @@ export default function SessionsPage() {
   const t = useT();
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [filtersOpen, setFiltersOpen] = useState(false);
   const range = readRange(searchParams.get("range"));
   const app = searchParams.get("app") ?? "";
   const query = searchParams.get("q") ?? "";
@@ -119,12 +205,12 @@ export default function SessionsPage() {
     <div className="analytics-sessions-page mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 py-5">
       <Card>
         <CardContent className="p-3">
-          <div className="analytics-sessions-filter-grid grid gap-2">
+          <div className="analytics-sessions-filter-bar flex flex-wrap items-center gap-2">
             <div className="analytics-sessions-filter-label flex items-center gap-2 px-1 text-sm font-medium">
               <IconFilter className="h-4 w-4 text-muted-foreground" />
-              {t("sessions.segmentFilters")}
+              {t("sessions.filters")}
             </div>
-            <div className="relative">
+            <div className="analytics-sessions-filter-search relative min-w-0">
               <IconSearch className="pointer-events-none absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
               <Input
                 value={query}
@@ -133,37 +219,75 @@ export default function SessionsPage() {
                 className="h-9 ps-9"
               />
             </div>
-            <Select
-              value={range}
-              onValueChange={(value) => updateFilter("range", value)}
-            >
-              <SelectTrigger className="h-9" aria-label={t("sessions.range")}>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {RANGE_OPTIONS.map((value) => (
-                  <SelectItem key={value} value={value}>
-                    {rangeLabel(value, t)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="h-9 justify-between gap-2"
-              onClick={() => setFiltersOpen((value) => !value)}
-              aria-expanded={filtersOpen}
-            >
-              {t("sessions.filters")}
-              <IconChevronDown
-                className={cn(
-                  "h-4 w-4 transition-transform",
-                  filtersOpen && "rotate-180",
-                )}
-              />
-            </Button>
+            <Popover>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      className="h-9 w-9 shrink-0"
+                      aria-label={t("sessions.filters")}
+                    >
+                      <IconSettings className="h-4 w-4" />
+                    </Button>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <TooltipContent>{t("sessions.filters")}</TooltipContent>
+              </Tooltip>
+              <PopoverContent align="end" className="w-72 p-3">
+                <div className="grid gap-3">
+                  <div className="text-sm font-medium">
+                    {t("sessions.filters")}
+                  </div>
+                  <div className="grid gap-1.5">
+                    <div className="text-xs font-medium text-muted-foreground">
+                      {t("sessions.range")}
+                    </div>
+                    <Select
+                      value={range}
+                      onValueChange={(value) => updateFilter("range", value)}
+                    >
+                      <SelectTrigger
+                        className="h-9"
+                        aria-label={t("sessions.range")}
+                      >
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {RANGE_OPTIONS.map((value) => (
+                          <SelectItem key={value} value={value}>
+                            {rangeLabel(value, t)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="grid gap-1.5 border-t pt-3">
+                    <div className="text-xs font-medium text-muted-foreground">
+                      {t("sessions.userFilters")}
+                    </div>
+                    <Input
+                      value={app}
+                      onChange={(event) =>
+                        updateFilter("app", event.target.value)
+                      }
+                      placeholder={t("sessions.appPlaceholder")}
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="grid gap-1.5">
+                    <div className="text-xs font-medium text-muted-foreground">
+                      {t("sessions.eventFilters")}
+                    </div>
+                    <div className="flex h-9 items-center rounded-md border bg-muted/20 px-3 text-sm text-muted-foreground">
+                      {t("sessions.anyActivity")}
+                    </div>
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
             <Button
               type="button"
               variant="ghost"
@@ -178,29 +302,6 @@ export default function SessionsPage() {
               />
             </Button>
           </div>
-          {filtersOpen ? (
-            <div className="analytics-sessions-filter-extra mt-3 grid gap-3 border-t pt-3">
-              <div className="rounded-md border bg-muted/20 p-3">
-                <div className="mb-2 text-[11px] font-semibold uppercase text-muted-foreground">
-                  {t("sessions.userFilters")}
-                </div>
-                <Input
-                  value={app}
-                  onChange={(event) => updateFilter("app", event.target.value)}
-                  placeholder={t("sessions.appPlaceholder")}
-                  className="h-9"
-                />
-              </div>
-              <div className="rounded-md border bg-muted/20 p-3">
-                <div className="mb-2 text-[11px] font-semibold uppercase text-muted-foreground">
-                  {t("sessions.eventFilters")}
-                </div>
-                <div className="flex h-9 items-center rounded-md border bg-background px-3 text-sm text-muted-foreground">
-                  {t("sessions.anyActivity")}
-                </div>
-              </div>
-            </div>
-          ) : null}
         </CardContent>
       </Card>
 
@@ -363,7 +464,7 @@ function EmptySessionsState() {
   );
 }
 
-function ReplayStorageHint() {
+export function ReplayStorageHint() {
   const t = useT();
   const storageStatus = useReplayStorageStatus();
   const builderStatus = useBuilderStatus();
@@ -386,59 +487,147 @@ function ReplayStorageHint() {
     storageStatus.isLoading ||
     builderStatus.loading ||
     !builderConnect.hasFetchedStatus;
+  const [s3Expanded, setS3Expanded] = useState(false);
+  const [s3Values, setS3Values] = useState<Record<string, string>>({});
+  const [savingStorage, setSavingStorage] = useState(false);
+
+  async function handleSaveS3Storage() {
+    const missing = 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 (
-    <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")}
+    <Collapsible open={s3Expanded} onOpenChange={setS3Expanded}>
+      <div className="mb-6 rounded-md border border-primary/30 bg-primary/5 p-4">
+        <div className="flex flex-col gap-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>
+              <p className="mt-0.5 text-xs text-muted-foreground">
+                {t("sessions.storageSetupDescription")}
+              </p>
+            </div>
+          </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>
+            <CollapsibleTrigger asChild>
+              <Button type="button" variant="ghost" size="sm">
+                <IconServer className="h-3.5 w-3.5" />
+                {t("sessions.configureS3")}
+                <Badge variant="outline" className="text-[10px]">
+                  {t("settings.secondary")}
+                </Badge>
+                <IconChevronDown
+                  className={cn(
+                    "h-4 w-4 transition-transform",
+                    s3Expanded && "rotate-180",
+                  )}
+                />
+              </Button>
+            </CollapsibleTrigger>
           </div>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            {t("sessions.storageSetupDescription")}
-          </p>
         </div>
+        <CollapsibleContent>
+          <div className="mt-4 border-t border-primary/20 pt-4">
+            <p className="mb-4 text-xs text-muted-foreground">
+              {t("settings.s3OwnBucketDescription")}
+            </p>
+            <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={`replay-${field.key}`}>
+                    {t(field.labelKey)}
+                  </Label>
+                  <Input
+                    id={`replay-${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="mt-4 flex justify-end">
+              <Button
+                onClick={handleSaveS3Storage}
+                disabled={savingStorage || storageStatus.isLoading}
+              >
+                {savingStorage ? (
+                  <IconLoader2 className="h-4 w-4 animate-spin" />
+                ) : null}
+                {t("settings.saveStorage")}
+              </Button>
+            </div>
+          </div>
+        </CollapsibleContent>
       </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>
+    </Collapsible>
   );
 }