@agent-native/core 0.86.0 → 0.87.0

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

@@ -1,13 +1,30 @@
-import { ObservabilityDashboard, useT } from "@agent-native/core/client";
+import {
+  agentNativePath,
+  ObservabilityDashboard,
+  useActionMutation,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import { DbAdminPage } from "@agent-native/core/client/db-admin";
 import {
-  IconActivity,
-  IconChevronDown,
-  IconDatabase,
-} from "@tabler/icons-react";
-import { Link, useSearchParams } from "react-router";
-
-import { Button } from "@/components/ui/button";
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@agent-native/toolkit/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,11 +32,50 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@agent-native/toolkit/ui/select";
+import {
+  IconActivity,
+  IconAlertTriangle,
+  IconChevronDown,
+  IconDatabase,
+  IconLoader2,
+  IconPlus,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useEffect, useMemo, useState, type FormEvent } from "react";
+import { Link, useSearchParams } from "react-router";
+
 import { cn } from "@/lib/utils";
 
 type AgentAdminView = "monitoring" | "database";
 
+interface DbAdminConnection {
+  id: string;
+  name: string;
+  appId: string | null;
+  appUrl: string | null;
+  databaseUrlLast4: string | null;
+  hasDatabaseAuthToken: boolean;
+  databaseAuthTokenLast4: string | null;
+}
+
+interface SaveDbAdminConnectionInput {
+  name: string;
+  appId?: string;
+  appUrl?: string;
+  databaseUrl: string;
+  databaseAuthToken?: string;
+}
+
 const AGENT_ADMIN_VIEWS: AgentAdminView[] = ["monitoring", "database"];
 
 function parseView(value: string | null): AgentAdminView {
@@ -32,17 +88,27 @@ export default function AgentsPage() {
   const t = useT();
   const [searchParams, setSearchParams] = useSearchParams();
   const view = parseView(searchParams.get("view"));
+  const selectedConnectionId = searchParams.get("db");
 
   function setView(next: AgentAdminView) {
     const params = new URLSearchParams(searchParams);
     if (next === "monitoring") {
       params.delete("view");
+      params.delete("db");
     } else {
       params.set("view", next);
     }
     setSearchParams(params, { replace: true });
   }
 
+  function setSelectedConnectionId(id: string | null) {
+    const params = new URLSearchParams(searchParams);
+    params.set("view", "database");
+    if (id) params.set("db", id);
+    else params.delete("db");
+    setSearchParams(params, { replace: true });
+  }
+
   return (
     <div className="mx-auto flex h-full w-full max-w-7xl flex-col gap-5 px-4 py-5 lg:px-6">
       <div className="flex flex-wrap items-start justify-between gap-3">
@@ -102,9 +168,10 @@ export default function AgentsPage() {
       </div>
 
       {view === "database" ? (
-        <div className="min-h-[560px] flex-1 overflow-hidden rounded-lg border bg-background">
-          <DbAdminPage />
-        </div>
+        <AnalyticsDbAdminPanel
+          selectedConnectionId={selectedConnectionId}
+          onSelectConnection={setSelectedConnectionId}
+        />
       ) : (
         <div className="min-w-0">
           <div className="mb-4 max-w-3xl text-sm leading-6 text-muted-foreground">
@@ -116,3 +183,330 @@ export default function AgentsPage() {
     </div>
   );
 }
+
+function AnalyticsDbAdminPanel({
+  selectedConnectionId,
+  onSelectConnection,
+}: {
+  selectedConnectionId: string | null;
+  onSelectConnection: (id: string | null) => void;
+}) {
+  const t = useT();
+  const [connectOpen, setConnectOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [form, setForm] = useState<SaveDbAdminConnectionInput>({
+    name: "",
+    appId: "",
+    appUrl: "",
+    databaseUrl: "",
+    databaseAuthToken: "",
+  });
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const {
+    data: connections = [],
+    isLoading,
+    error,
+  } = useActionQuery<DbAdminConnection[]>(
+    "list-db-admin-connections",
+    undefined,
+    { retry: false },
+  );
+  const saveConnection = useActionMutation<
+    DbAdminConnection,
+    SaveDbAdminConnectionInput
+  >("save-db-admin-connection");
+  const deleteConnection = useActionMutation<
+    { deleted: boolean },
+    { id: string }
+  >("delete-db-admin-connection");
+
+  const selectedConnection = useMemo(() => {
+    return (
+      connections.find(
+        (connection) => connection.id === selectedConnectionId,
+      ) ??
+      connections[0] ??
+      null
+    );
+  }, [connections, selectedConnectionId]);
+
+  useEffect(() => {
+    if (!selectedConnection) {
+      if (selectedConnectionId) onSelectConnection(null);
+      return;
+    }
+    if (selectedConnection.id !== selectedConnectionId) {
+      onSelectConnection(selectedConnection.id);
+    }
+  }, [onSelectConnection, selectedConnection, selectedConnectionId]);
+
+  const apiBasePath = selectedConnection
+    ? agentNativePath(
+        `/_agent-native/analytics-db-admin/${encodeURIComponent(
+          selectedConnection.id,
+        )}`,
+      )
+    : null;
+
+  async function handleSaveConnection(event: FormEvent) {
+    event.preventDefault();
+    setFormError(null);
+    try {
+      const saved = await saveConnection.mutateAsync(form);
+      setConnectOpen(false);
+      setForm({
+        name: "",
+        appId: "",
+        appUrl: "",
+        databaseUrl: "",
+        databaseAuthToken: "",
+      });
+      onSelectConnection(saved.id);
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function handleDeleteConnection() {
+    if (!selectedConnection) return;
+    await deleteConnection.mutateAsync({ id: selectedConnection.id });
+    setDeleteOpen(false);
+    const next = connections.find(
+      (connection) => connection.id !== selectedConnection.id,
+    );
+    onSelectConnection(next?.id ?? null);
+  }
+
+  return (
+    <div className="flex min-h-[560px] flex-1 flex-col gap-3">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="min-w-0">
+          <h2 className="text-sm font-semibold">
+            {t("agents.dbConnectionsTitle")}
+          </h2>
+          <p className="mt-1 max-w-2xl text-sm leading-6 text-muted-foreground">
+            {t("agents.dbConnectionsDescription")}
+          </p>
+        </div>
+        <div className="flex min-w-0 flex-wrap items-center gap-2">
+          {connections.length > 0 ? (
+            <Select
+              value={selectedConnection?.id ?? ""}
+              onValueChange={onSelectConnection}
+            >
+              <SelectTrigger className="h-9 w-[260px] max-w-full">
+                <SelectValue placeholder={t("agents.selectConnection")} />
+              </SelectTrigger>
+              <SelectContent>
+                {connections.map((connection) => (
+                  <SelectItem key={connection.id} value={connection.id}>
+                    {connection.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : null}
+          <Button size="sm" onClick={() => setConnectOpen(true)}>
+            <IconPlus className="me-2 h-4 w-4" />
+            {t("agents.connectDatabase")}
+          </Button>
+          {selectedConnection ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              aria-label={t("agents.deleteConnection")}
+              onClick={() => setDeleteOpen(true)}
+            >
+              <IconTrash className="h-4 w-4" />
+            </Button>
+          ) : null}
+        </div>
+      </div>
+
+      {error ? (
+        <div className="flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+          <IconAlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+          <span>{error.message}</span>
+        </div>
+      ) : isLoading ? (
+        <div className="flex min-h-[460px] items-center justify-center rounded-lg border bg-background">
+          <IconLoader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+        </div>
+      ) : selectedConnection && apiBasePath ? (
+        <div className="min-h-[560px] flex-1 overflow-hidden rounded-lg border bg-background">
+          <DbAdminPage
+            apiBasePath={apiBasePath}
+            cacheScope={`analytics-db-admin:${selectedConnection.id}`}
+            title={selectedConnection.name}
+            subtitle={
+              selectedConnection.appId ??
+              selectedConnection.appUrl ??
+              t("agents.connectedDatabase")
+            }
+            codeModeGate={false}
+            syncNavigation={false}
+          />
+        </div>
+      ) : (
+        <div className="flex min-h-[460px] items-center justify-center rounded-lg border bg-background p-8 text-center">
+          <div className="max-w-sm">
+            <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+              <IconDatabase className="h-5 w-5 text-muted-foreground" />
+            </div>
+            <h2 className="text-sm font-semibold">
+              {t("agents.noConnections")}
+            </h2>
+            <p className="mt-1.5 text-sm leading-6 text-muted-foreground">
+              {t("agents.noConnectionsDescription")}
+            </p>
+            <Button
+              className="mt-4"
+              size="sm"
+              onClick={() => setConnectOpen(true)}
+            >
+              <IconPlus className="me-2 h-4 w-4" />
+              {t("agents.connectDatabase")}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      <Dialog open={connectOpen} onOpenChange={setConnectOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t("agents.connectDatabase")}</DialogTitle>
+            <DialogDescription>
+              {t("agents.connectDatabaseDescription")}
+            </DialogDescription>
+          </DialogHeader>
+          <form className="grid gap-4" onSubmit={handleSaveConnection}>
+            <div className="grid gap-2">
+              <Label htmlFor="db-connection-name">
+                {t("agents.connectionName")}
+              </Label>
+              <Input
+                id="db-connection-name"
+                value={form.name}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    name: event.target.value,
+                  }))
+                }
+                required
+              />
+            </div>
+            <div className="grid gap-2 sm:grid-cols-2">
+              <div className="grid gap-2">
+                <Label htmlFor="db-connection-app-id">
+                  {t("agents.connectionAppId")}
+                </Label>
+                <Input
+                  id="db-connection-app-id"
+                  value={form.appId}
+                  onChange={(event) =>
+                    setForm((current) => ({
+                      ...current,
+                      appId: event.target.value,
+                    }))
+                  }
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="db-connection-app-url">
+                  {t("agents.connectionAppUrl")}
+                </Label>
+                <Input
+                  id="db-connection-app-url"
+                  value={form.appUrl}
+                  onChange={(event) =>
+                    setForm((current) => ({
+                      ...current,
+                      appUrl: event.target.value,
+                    }))
+                  }
+                />
+              </div>
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="db-connection-url">
+                {t("agents.connectionDatabaseUrl")}
+              </Label>
+              <Input
+                id="db-connection-url"
+                value={form.databaseUrl}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    databaseUrl: event.target.value,
+                  }))
+                }
+                type="password"
+                autoComplete="off"
+                required
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="db-connection-auth-token">
+                {t("agents.connectionAuthToken")}
+              </Label>
+              <Input
+                id="db-connection-auth-token"
+                value={form.databaseAuthToken}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    databaseAuthToken: event.target.value,
+                  }))
+                }
+                type="password"
+                autoComplete="off"
+              />
+            </div>
+            {formError ? (
+              <p className="text-sm text-destructive">{formError}</p>
+            ) : null}
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setConnectOpen(false)}
+              >
+                {t("sidebar.cancel")}
+              </Button>
+              <Button type="submit" disabled={saveConnection.isPending}>
+                {saveConnection.isPending ? (
+                  <IconLoader2 className="me-2 h-4 w-4 animate-spin" />
+                ) : null}
+                {t("agents.saveConnection")}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("agents.deleteConnectionTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("agents.deleteConnectionDescription", {
+                name: selectedConnection?.name ?? t("agents.connectedDatabase"),
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("sidebar.cancel")}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteConnection}>
+              {t("agents.deleteConnection")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

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

@@ -4,17 +4,6 @@ import {
   useSendToAgentChat,
   useT,
 } from "@agent-native/core/client";
-import {
-  IconBook2,
-  IconPencil,
-  IconPlus,
-  IconTrash,
-  IconSearch,
-  IconExternalLink,
-} from "@tabler/icons-react";
-import { useMemo, useState } from "react";
-
-import { useSetHeaderActions } from "@/components/layout/HeaderActions";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -24,17 +13,17 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
+} from "@agent-native/toolkit/ui/card";
+import { Checkbox } from "@agent-native/toolkit/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -42,15 +31,26 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Textarea } from "@/components/ui/textarea";
+} from "@agent-native/toolkit/ui/dialog";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import {
+  IconBook2,
+  IconPencil,
+  IconPlus,
+  IconTrash,
+  IconSearch,
+  IconExternalLink,
+} from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+
+import { useSetHeaderActions } from "@/components/layout/HeaderActions";
 
 interface DictionaryEntry {
   id: string;

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

@@ -8,27 +8,6 @@ import {
   PromptComposer,
   useT,
 } from "@agent-native/core/client";
-import {
-  IconCheck,
-  IconChevronDown,
-  IconChevronUp,
-  IconExternalLink,
-  IconLoader2,
-  IconCircle,
-  IconAlertCircle,
-  IconUpload,
-  IconPencil,
-  IconTrash,
-  IconSearch,
-  IconPlus,
-  IconKey,
-  IconCopy,
-  IconDotsVertical,
-  IconBrandGithub,
-} from "@tabler/icons-react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
-
 import {
   AlertDialog,
   AlertDialogAction,
@@ -38,29 +17,50 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
+} from "@agent-native/toolkit/ui/card";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@agent-native/toolkit/ui/dropdown-menu";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover";
-import { Skeleton } from "@/components/ui/skeleton";
+} from "@agent-native/toolkit/ui/popover";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import {
+  IconCheck,
+  IconChevronDown,
+  IconChevronUp,
+  IconExternalLink,
+  IconLoader2,
+  IconCircle,
+  IconAlertCircle,
+  IconUpload,
+  IconPencil,
+  IconTrash,
+  IconSearch,
+  IconPlus,
+  IconKey,
+  IconCopy,
+  IconDotsVertical,
+  IconBrandGithub,
+} from "@tabler/icons-react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+
 import { getIdToken } from "@/lib/auth";
 import {
   getOptionalCredentialKeys,

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

@@ -1,9 +1,8 @@
 import { useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
 import { IconFileUnknown } from "@tabler/icons-react";
 import { Link } from "react-router";
 
-import { Button } from "@/components/ui/button";
-
 export default function NotFound() {
   const t = useT();
 

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

@@ -1,9 +1,8 @@
 import { useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
 import { IconBarrierBlock } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router";
 
-import { Button } from "@/components/ui/button";
-
 export default function Placeholder() {
   const t = useT();
   const location = useLocation();

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

@@ -9,6 +9,22 @@ import {
   useT,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@agent-native/toolkit/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@agent-native/toolkit/ui/collapsible";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
 import {
   IconCheck,
   IconChevronDown,
@@ -23,22 +39,6 @@ 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,
-  CardContent,
-  CardDescription,
-  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";