@agent-native/core 0.141.7 → 0.144.0

package/corpus/templates/analytics/actions/navigate.ts

@@ -6,11 +6,10 @@ import {
 } from "@agent-native/core/server";
 import { z } from "zod";
 
-import { listDashboardSummaries } from "../server/lib/dashboards-store";
-
-function normalizeDashboardName(value: string): string {
-  return value.trim().replace(/\s+/g, " ").toLowerCase();
-}
+import {
+  listDashboardSummaries,
+  normalizeDashboardName,
+} from "../server/lib/dashboards-store";
 
 async function resolveDashboardIdByName(name: string): Promise<string> {
   const email = getRequestUserEmail();

package/corpus/templates/analytics/actions/provider-api-register.ts

@@ -0,0 +1,50 @@
+import { getDbExec } from "@agent-native/core/db";
+import {
+  createCustomProviderRegistrationAction,
+  CustomProviderRegistrationSchema,
+} from "@agent-native/core/provider-api/actions/custom-provider-registration";
+import { getCredentialContext } from "@agent-native/core/server/request-context";
+import { z } from "zod";
+
+async function resolveCallerOrgRole(orgId: string, email: string) {
+  try {
+    const { rows } = await getDbExec().execute({
+      sql: `SELECT role FROM org_members WHERE org_id = ? AND LOWER(email) = ? LIMIT 1`,
+      args: [orgId, email.toLowerCase()],
+    });
+    const role = (rows[0] as { role?: unknown } | undefined)?.role;
+    return typeof role === "string" && role ? role : null;
+  } catch {
+    return null;
+  }
+}
+
+const schema = CustomProviderRegistrationSchema.superRefine((value, ctx) => {
+  if (value.operation === "upsert" && value.baseUrl) {
+    try {
+      const url = new URL(value.baseUrl);
+      if (url.protocol !== "https:") {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["baseUrl"],
+          message: "baseUrl must use public HTTPS.",
+        });
+      }
+    } catch {
+      // The shared schema reports malformed URLs.
+    }
+  }
+});
+
+const action = createCustomProviderRegistrationAction({
+  schema,
+  getContext: getCredentialContext,
+  resolveOrgRole: resolveCallerOrgRole,
+  description:
+    "Register or update an Analytics custom API provider. Stores credential key names only, never secret values. Requires a public HTTPS base URL and owner/admin organization access.",
+});
+
+// The shared factory owns registration, validation, and mutation authorization;
+// this wrapper only adds Analytics' transport contract and base URL policy.
+// Static action registry marker: createCustomProviderRegistrationAction returns defineAction.
+export default { ...action, http: { method: "POST" as const } };

package/corpus/templates/analytics/actions/query-agent-native-analytics.ts

@@ -1,4 +1,9 @@
-import { defineAction } from "@agent-native/core";
+import {
+  ACTION_CHAT_UI_DATA_TABLE_RENDERER,
+  dataTableWidgetResultSchema,
+  defineAction,
+} from "@agent-native/core";
+import { createDataTableWidgetResult } from "@agent-native/core/data-widgets";
 import {
   getRequestOrgId,
   getRequestUserEmail,
@@ -13,6 +18,34 @@ function resolveScope() {
   return { userEmail, orgId: getRequestOrgId() || null };
 }
 
+function toDataTableResult(result: {
+  rows: Record<string, unknown>[];
+  schema: { name: string; type: string }[];
+}) {
+  const numericTypes = new Set([
+    "number",
+    "integer",
+    "float",
+    "double",
+    "decimal",
+    "numeric",
+  ]);
+
+  return createDataTableWidgetResult({
+    widgetId: "analytics.query.v1",
+    title: "Analytics query result",
+    table: {
+      title: "Analytics query result",
+      columns: result.schema.map(({ name, type }) => ({
+        key: name,
+        label: name,
+        ...(numericTypes.has(type.toLowerCase()) ? { align: "right" } : {}),
+      })),
+      rows: result.rows,
+    },
+  });
+}
+
 export default defineAction({
   description:
     "Query the built-in first-party Analytics source: events recorded through this app's analytics collector endpoint (/track), compact daily rollups updated transactionally with new ingest, identifiable user-day rollups, and session replay summaries recorded through /api/analytics/replay. This source does not require an external provider connection. Use it for questions about app/site traffic, product events, template/app usage, conversions, session recordings, LLM/agent observability, model cost, token volume, latency, and other first-party data collected by this analytics app. Use source-specific actions such as BigQuery, GA4, Mixpanel, PostHog, or Amplitude when the user asks for those sources or the relevant data lives there. SQL may read analytics_events, analytics_event_daily_rollups, analytics_user_days, and session_recordings; session_replay_chunks is intentionally unavailable, and reads are automatically scoped to the current user/org. Prefer analytics_event_daily_rollups for event counts and analytics_user_days for active-user or retention questions. On the Builder.io production organization after the explicit BigQuery cutover, event and rollup reads use partitioned BigQuery tables/views while session_recordings remains in the SQL store; cross-backend joins are not supported. Before a large or historical query, call get-first-party-analytics-health and use a configured external backend when it recommends one: BigQuery supports warehouse SQL and historical analysis, while Amplitude supports product analytics, funnels, and retention. Connecting a backend does not automatically reroute /track events or copy existing Neon events; the migration action performs that explicit prepare, backfill, and cutover sequence. Aggregate, project only needed columns, use bounded recent drill-downs, and add a LIMIT for raw or high-cardinality reads; do not issue an unbounded raw-event scan or paginate a large cohort. An explicit all-time or lifetime request remains all-time, so do not invent a default lower time bound. Safe scoped results are cached for up to five minutes for this agent action. analytics_events columns include event_name, timestamp, event_date, user_id, anonymous_id, user_key, session_id, app, template, signed_in, url, path, hostname, referrer, properties, and context. analytics_event_daily_rollups columns include tenant_key, owner_email, org_id, event_date, event_name, app, template, and event_count. analytics_user_days columns include tenant_key, owner_email, org_id, event_date, and user_key. LLM observability events use event_name = '$ai_generation'; useful properties include $ai_trace_id/run_id, $ai_session_id/thread_id, $ai_model/model, $ai_provider/provider, $ai_input_tokens/input_tokens, $ai_output_tokens/output_tokens, cache_read_tokens, cache_write_tokens, cost_cents_x100, $ai_total_cost_usd/cost_usd, duration_ms/$ai_latency, status, tool_calls, successful_tools, failed_tools, tools, tools_truncated, delegated, delegation_protocol, caller_app, delegation_task_id, a2a_task_id, parent_run_id, parent_turn_id, and error_message/$ai_error. Agent Teams child runs use delegation_protocol = 'agent-team' and retain their own run_id while linking to the launching run through parent_run_id. The bounded tools array contains names, relative start times, durations, statuses, and coarse error classes only, never args or results; failed runs and interrupted tools remain queryable. session_recordings columns include id, session_id, user_id, anonymous_id, user_key, started_at, ended_at, duration_ms, chunk_count, event_count, page_count, error_count, rage_click_count, app, template, status, first_url, last_url, path, hostname, referrer, and metadata.",
@@ -23,15 +56,12 @@ export default defineAction({
         "Read-only SQL over analytics_events, analytics_event_daily_rollups, analytics_user_days, and session_recordings. Use literal values, not bind placeholders. Prefer the daily rollups for counts, active-user, and retention questions. On the Builder.io production organization after the explicit BigQuery cutover, event and rollup reads use partitioned BigQuery tables/views while session_recordings remains in the SQL store; cross-backend joins are not supported. Before a large or historical query, call get-first-party-analytics-health and use a configured external backend when recommended: BigQuery for warehouse SQL and complete history, or Amplitude for product analytics, funnels, and retention. Connecting one does not automatically reroute /track events or backfill existing Neon data; the migration action performs that explicit prepare, backfill, and cutover sequence. Aggregate or project only needed columns and add a LIMIT for raw or high-cardinality reads; do not issue an unbounded raw-event scan or paginate a large cohort. An explicit all-time or lifetime request remains all-time, so do not invent a default lower time bound. Example: SELECT event_date, event_name, SUM(event_count) AS events FROM analytics_event_daily_rollups WHERE event_date >= '2026-05-01' AND event_date < '2026-06-01' GROUP BY event_date, event_name ORDER BY event_date, events DESC",
       ),
   }),
-  outputSchema: z.object({
-    rows: z.array(z.record(z.string(), z.unknown())),
-    schema: z.array(
-      z.object({
-        name: z.string(),
-        type: z.string(),
-      }),
-    ),
-  }),
+  outputSchema: dataTableWidgetResultSchema,
+  chatUI: {
+    renderer: ACTION_CHAT_UI_DATA_TABLE_RENDERER,
+    title: "Analytics query result",
+    description: "Render query rows as a native table with CSV download.",
+  },
   readOnly: true,
   // No raw HTTP or connector-catalog route: SQL would land in query strings,
   // logs, or a caller that lacks this app's schema and data dictionary. This
@@ -40,6 +70,9 @@ export default defineAction({
   http: false,
   publicAgent: { expose: true, readOnly: true, requiresAuth: true },
   run: async (args) => {
-    return queryFirstPartyAnalytics(args.sql, resolveScope(), { cache: true });
+    const result = await queryFirstPartyAnalytics(args.sql, resolveScope(), {
+      cache: true,
+    });
+    return toDataTableResult(result);
   },
 });

package/corpus/templates/analytics/actions/test-custom-api-connection.ts

@@ -0,0 +1,106 @@
+import { defineAction } from "@agent-native/core";
+import { extractItemsArray } from "@agent-native/core/provider-api/staging";
+import { z } from "zod";
+
+import { getAnalyticsProviderApiRuntime } from "../server/lib/provider-api";
+
+const secretKey = /pass(word)?|secret|token|api[-_]?key|authorization/i;
+const Input = z.object({
+  provider: z.string().min(1),
+  path: z.string().min(1),
+  query: z.record(z.string(), z.unknown()).optional(),
+  itemsPath: z.string().min(1).optional(),
+});
+
+function redact(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map(redact);
+  if (!value || typeof value !== "object") return value;
+  return Object.fromEntries(
+    Object.entries(value).map(([key, entry]) => [
+      key,
+      secretKey.test(key) ? "[redacted]" : redact(entry),
+    ]),
+  );
+}
+
+export default defineAction({
+  description:
+    "Test an Analytics custom API connection with a bounded authenticated GET and return a safe row preview.",
+  schema: Input,
+  agentTool: false,
+  http: { method: "POST" },
+  readOnly: true,
+  run: async ({ provider, path, query, itemsPath }) => {
+    try {
+      const result = (await getAnalyticsProviderApiRuntime().executeRequest({
+        provider,
+        method: "GET",
+        path,
+        ...(query ? { query } : {}),
+        auth: "default",
+        maxBytes: 1_000_000,
+        timeoutMs: 10_000,
+      })) as {
+        response?: {
+          ok?: boolean;
+          status?: number;
+          statusText?: string;
+          json?: unknown;
+          truncated?: boolean;
+        };
+      };
+      const response = result.response;
+      const status = response?.status ?? 0;
+      const statusText = response?.statusText ?? "";
+      if (!response?.ok) {
+        return {
+          ok: false,
+          status,
+          statusText,
+          rowCount: 0,
+          columns: [],
+          sampleRows: [],
+          itemsPath: itemsPath ?? null,
+          truncated: false,
+          error: `Custom API request failed with HTTP ${status}${statusText ? ` ${statusText}` : ""}.`,
+        };
+      }
+      const rows = extractItemsArray(response.json, itemsPath ?? "auto");
+      const sampleRows = rows.slice(0, 5).map((row) => redact(row));
+      const columns = Array.from(
+        new Set(
+          rows.flatMap((row) =>
+            row && typeof row === "object" && !Array.isArray(row)
+              ? Object.keys(row)
+              : [],
+          ),
+        ),
+      );
+      return {
+        ok: true,
+        status,
+        statusText,
+        rowCount: rows.length,
+        columns,
+        sampleRows,
+        itemsPath: itemsPath ?? "auto",
+        truncated: Boolean(response.truncated),
+      };
+    } catch (error) {
+      return {
+        ok: false,
+        status: 0,
+        statusText: "",
+        rowCount: 0,
+        columns: [],
+        sampleRows: [],
+        itemsPath: itemsPath ?? null,
+        truncated: false,
+        error:
+          error instanceof Error
+            ? `Custom API connection failed: ${error.message}`
+            : "Custom API connection failed.",
+      };
+    }
+  },
+});

package/corpus/templates/analytics/app/components/CustomApiCard.tsx

@@ -0,0 +1,430 @@
+import { useSendToAgentChat } from "@agent-native/core/client/agent-chat";
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { useOrgRole } from "@agent-native/core/client/org";
+import {
+  IconChevronDown,
+  IconChevronUp,
+  IconExternalLink,
+} from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+type AuthType = "none" | "bearer" | "basic" | "api-key-header";
+type TestResult = {
+  ok?: boolean;
+  status?: number;
+  error?: string;
+  rowCount?: number;
+  columns?: string[];
+  sampleRows?: unknown[];
+};
+
+type ActionMutationName = Parameters<typeof useActionMutation>[0];
+
+const mutationName = (name: string): ActionMutationName => name;
+
+export function CustomApiCard() {
+  const t = useT();
+  const { canManageOrg, org } = useOrgRole();
+  const scope = org?.orgId && canManageOrg ? "org" : "user";
+  const { send, isGenerating, codeRequiredDialog } = useSendToAgentChat();
+  const register = useActionMutation(mutationName("provider-api-register"));
+  const test = useActionMutation(mutationName("test-custom-api-connection"));
+  const [open, setOpen] = useState(false);
+  const [registered, setRegistered] = useState(false);
+  const [registeredProviderId, setRegisteredProviderId] = useState<
+    string | null
+  >(null);
+  const [result, setResult] = useState<TestResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [authType, setAuthType] = useState<AuthType>("none");
+  const [values, setValues] = useState({
+    label: "",
+    baseUrl: "",
+    path: "",
+    query: "",
+    itemsPath: "",
+    credentialKey: "",
+    usernameKey: "",
+    passwordKey: "",
+    headerName: "",
+    docsUrl: "",
+  });
+  function resetConnectionState() {
+    setRegistered(false);
+    setRegisteredProviderId(null);
+    setResult(null);
+  }
+  const set =
+    (key: keyof typeof values) =>
+    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      setValues((current) => ({ ...current, [key]: event.target.value }));
+      setError(null);
+      if (key === "path" || key === "query" || key === "itemsPath") {
+        setResult(null);
+      } else {
+        resetConnectionState();
+      }
+    };
+  const parsedQuery = useMemo(() => {
+    if (!values.query.trim()) return undefined;
+    try {
+      const value: unknown = JSON.parse(values.query);
+      if (!value || typeof value !== "object" || Array.isArray(value)) {
+        return null;
+      }
+      return value as Record<string, unknown>;
+    } catch {
+      return null;
+    }
+  }, [values.query]);
+
+  function providerId(label: string): string {
+    return (
+      label
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, 64) || "custom-api"
+    );
+  }
+
+  function auth() {
+    if (authType === "none") return { type: "none" as const };
+    if (authType === "basic")
+      return {
+        type: "basic" as const,
+        usernameKey: values.usernameKey.trim(),
+        passwordKey: values.passwordKey.trim(),
+      };
+    if (authType === "api-key-header")
+      return {
+        type: "api-key-header" as const,
+        credentialKey: values.credentialKey.trim(),
+        headerName: values.headerName.trim(),
+      };
+    return {
+      type: "bearer" as const,
+      credentialKey: values.credentialKey.trim(),
+    };
+  }
+
+  async function handleRegister() {
+    setError(null);
+    const id = providerId(values.label);
+    try {
+      await register.mutateAsync({
+        operation: "upsert",
+        scope,
+        id,
+        label: values.label.trim(),
+        baseUrl: values.baseUrl.trim(),
+        auth: auth(),
+        docsUrls: values.docsUrl.trim() ? [values.docsUrl.trim()] : undefined,
+      });
+      setRegistered(true);
+      setRegisteredProviderId(id);
+      setResult(null);
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause.message
+          : t("dataSources.customApi.registerError"),
+      );
+    }
+  }
+
+  async function handleTest() {
+    setError(null);
+    if (parsedQuery === null) {
+      setError(t("dataSources.customApi.invalidQuery"));
+      return;
+    }
+    const provider = registeredProviderId ?? providerId(values.label);
+    try {
+      const response = await test.mutateAsync({
+        provider,
+        path: values.path.trim(),
+        query: parsedQuery,
+        itemsPath: values.itemsPath.trim() || undefined,
+      });
+      const nextResult = response as TestResult;
+      setResult(nextResult);
+      if (!nextResult.ok) {
+        setError(nextResult.error || t("dataSources.customApi.testError"));
+      }
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause.message
+          : t("dataSources.customApi.testError"),
+      );
+    }
+  }
+
+  function saveAsProgram() {
+    const details = {
+      provider: registeredProviderId ?? providerId(values.label),
+      path: values.path.trim(),
+      itemsPath: values.itemsPath.trim() || undefined,
+      query: parsedQuery,
+    };
+    send({
+      submit: true,
+      openSidebar: true,
+      message: `${t("dataSources.customApi.agentPrompt")}\n\n${JSON.stringify(details)}`,
+      context:
+        "The endpoint above passed a bounded read-only GET test. Save it as a manual-refresh Analytics Data Program using providerFetch and emit(rows, schema). Do not ask for or include raw credential values; the provider registration already references the user's scoped secret key.",
+    });
+  }
+
+  const needsKey = authType !== "none";
+  const credentialLink =
+    values.credentialKey.trim() ||
+    (authType === "basic" ? values.usernameKey.trim() : "");
+  return (
+    <Card>
+      <CardHeader className="p-0">
+        <button
+          type="button"
+          className="flex w-full items-center justify-between gap-3 p-6 text-left"
+          aria-expanded={open}
+          onClick={() => setOpen((current) => !current)}
+        >
+          <div>
+            <CardTitle>{t("dataSources.customApi.title")}</CardTitle>
+            <CardDescription>
+              {t("dataSources.customApi.description")}
+            </CardDescription>
+          </div>
+          {open ? (
+            <IconChevronUp aria-hidden="true" />
+          ) : (
+            <IconChevronDown aria-hidden="true" />
+          )}
+        </button>
+      </CardHeader>
+      {open && (
+        <CardContent className="space-y-4">
+          <div className="grid gap-4 sm:grid-cols-2">
+            {(["label", "baseUrl", "path"] as const).map((key) => (
+              <div className="space-y-2" key={key}>
+                <Label htmlFor={`custom-api-${key}`}>
+                  {t(`dataSources.customApi.fields.${key}`)}
+                </Label>
+                <Input
+                  id={`custom-api-${key}`}
+                  value={values[key]}
+                  onChange={set(key)}
+                  placeholder={t(`dataSources.customApi.placeholders.${key}`)}
+                  type={key === "baseUrl" ? "url" : "text"}
+                />
+              </div>
+            ))}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="custom-api-query">
+              {t("dataSources.customApi.fields.query")}
+            </Label>
+            <Textarea
+              id="custom-api-query"
+              value={values.query}
+              onChange={set("query")}
+              placeholder={t("dataSources.customApi.placeholders.query")}
+              rows={3}
+            />
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="custom-api-items-path">
+                {t("dataSources.customApi.fields.itemsPath")}
+              </Label>
+              <Input
+                id="custom-api-items-path"
+                value={values.itemsPath}
+                onChange={set("itemsPath")}
+                placeholder={t("dataSources.customApi.placeholders.itemsPath")}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="custom-api-docs">
+                {t("dataSources.customApi.fields.docsUrl")}
+              </Label>
+              <Input
+                id="custom-api-docs"
+                type="url"
+                value={values.docsUrl}
+                onChange={set("docsUrl")}
+                placeholder={t("dataSources.customApi.placeholders.docsUrl")}
+              />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="custom-api-auth">
+              {t("dataSources.customApi.fields.authType")}
+            </Label>
+            <Select
+              value={authType}
+              onValueChange={(value) => {
+                setAuthType(value as AuthType);
+                setError(null);
+                resetConnectionState();
+              }}
+            >
+              <SelectTrigger id="custom-api-auth">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">
+                  {t("dataSources.customApi.authNone")}
+                </SelectItem>
+                <SelectItem value="bearer">
+                  {t("dataSources.customApi.authBearer")}
+                </SelectItem>
+                <SelectItem value="basic">
+                  {t("dataSources.customApi.authBasic")}
+                </SelectItem>
+                <SelectItem value="api-key-header">
+                  {t("dataSources.customApi.authApiKey")}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          {needsKey && (
+            <div className="grid gap-4 sm:grid-cols-2">
+              {authType === "basic" ? (
+                <>
+                  <div className="space-y-2">
+                    <Label htmlFor="custom-api-username-key">
+                      {t("dataSources.customApi.fields.usernameKey")}
+                    </Label>
+                    <Input
+                      id="custom-api-username-key"
+                      value={values.usernameKey}
+                      onChange={set("usernameKey")}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="custom-api-password-key">
+                      {t("dataSources.customApi.fields.passwordKey")}
+                    </Label>
+                    <Input
+                      id="custom-api-password-key"
+                      value={values.passwordKey}
+                      onChange={set("passwordKey")}
+                    />
+                  </div>
+                </>
+              ) : (
+                <div className="space-y-2">
+                  <Label htmlFor="custom-api-credential-key">
+                    {t("dataSources.customApi.fields.credentialKey")}
+                  </Label>
+                  <Input
+                    id="custom-api-credential-key"
+                    value={values.credentialKey}
+                    onChange={set("credentialKey")}
+                  />
+                </div>
+              )}
+              {authType === "api-key-header" && (
+                <div className="space-y-2">
+                  <Label htmlFor="custom-api-header-name">
+                    {t("dataSources.customApi.fields.headerName")}
+                  </Label>
+                  <Input
+                    id="custom-api-header-name"
+                    value={values.headerName}
+                    onChange={set("headerName")}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+          {needsKey && credentialLink && (
+            <p className="text-sm text-muted-foreground">
+              {t("dataSources.customApi.keyHint")}{" "}
+              <a
+                className="inline-flex items-center gap-1 underline"
+                href={`/settings/integrations/secrets/${encodeURIComponent(credentialLink)}`}
+              >
+                {credentialLink}
+                <IconExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
+              </a>
+            </p>
+          )}
+          {error && (
+            <p role="alert" className="text-sm text-destructive">
+              {error}
+            </p>
+          )}
+          <div className="flex flex-wrap gap-2">
+            <Button
+              onClick={handleRegister}
+              disabled={register.isPending || !values.label || !values.baseUrl}
+            >
+              {t("dataSources.customApi.register")}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={handleTest}
+              disabled={!registered || test.isPending || !values.path}
+            >
+              {t("dataSources.customApi.test")}
+            </Button>
+          </div>
+          {result && (
+            <div className="space-y-2">
+              <div className="flex flex-wrap gap-2">
+                <Badge>
+                  {t("dataSources.customApi.connectionResult")}:{" "}
+                  {result.status ?? t("dataSources.customApi.unknown")}
+                </Badge>
+                <Badge>
+                  {t("dataSources.customApi.rowCount")}:{" "}
+                  {result.rowCount ?? result.sampleRows?.length ?? 0}
+                </Badge>
+              </div>
+              {result.columns?.length ? (
+                <p className="text-sm text-muted-foreground">
+                  {t("dataSources.customApi.columns")}:{" "}
+                  {result.columns.join(", ")}
+                </p>
+              ) : null}
+              <pre className="max-h-56 overflow-auto rounded-md bg-muted p-3 text-xs">
+                {JSON.stringify((result.sampleRows ?? []).slice(0, 5), null, 2)}
+              </pre>
+              {result.ok && (
+                <Button onClick={saveAsProgram} disabled={isGenerating}>
+                  {t("dataSources.customApi.handoffButton")}
+                </Button>
+              )}
+            </div>
+          )}
+          {codeRequiredDialog}
+        </CardContent>
+      )}
+    </Card>
+  );
+}