@agent-native/core 0.86.0 → 0.86.1

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

@@ -1,13 +1,42 @@
-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,
+  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 {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,10 +45,37 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 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/changelog/2026-07-03-connect-other-app-databases-from-analytics.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-03
+---
+
+Analytics admins can now connect other agent-native app databases from Agents and inspect or repair those target databases without exposing Analytics data to all users.

package/corpus/templates/analytics/server/db/schema.ts

@@ -234,6 +234,33 @@ export const analyticsAlertIncidents = table("analytics_alert_incidents", {
   orgId: text("org_id"),
 });
 
+/**
+ * Admin-only registry of external agent-native app databases that Analytics can
+ * inspect. Secret values live in app_secrets; this table stores metadata and
+ * secret keys scoped to the active organization.
+ */
+export const analyticsDbAdminConnections = table(
+  "analytics_db_admin_connections",
+  {
+    id: text("id").primaryKey(),
+    name: text("name").notNull(),
+    appId: text("app_id"),
+    appUrl: text("app_url"),
+    databaseUrlSecretKey: text("database_url_secret_key").notNull(),
+    databaseAuthTokenSecretKey: text("database_auth_token_secret_key"),
+    createdBy: text("created_by").notNull(),
+    createdAt: text("created_at").notNull().default(now()),
+    updatedAt: text("updated_at").notNull().default(now()),
+    orgId: text("org_id").notNull(),
+  },
+  (connection) => ({
+    orgUpdatedIdx: index("analytics_db_admin_connections_org_updated_idx").on(
+      connection.orgId,
+      connection.updatedAt,
+    ),
+  }),
+);
+
 /**
  * Session replay summaries recorded through the first-party analytics replay
  * endpoint. Raw replay chunks live in session_replay_chunks and are only read