@agent-native/core 0.146.8 → 0.148.0

package/corpus/templates/clips/app/components/settings/ai-setup-section.tsx

@@ -1,15 +1,19 @@
-import { agentNativePath } from "@agent-native/core/client/api-path";
 import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import {
+  AGENT_PROVIDER_CATALOG,
+  AgentProviderSetupForm,
+  SettingsGroup,
+  SettingsRow,
+  type AgentProviderId,
+} from "@agent-native/core/client/settings";
 import {
   BUILDER_CREDITS_UPGRADE_URL,
   type BuilderCreditsStatus,
 } from "@shared/builder-credits";
 import {
   IconBolt,
-  IconBrain,
   IconCheck,
-  IconChevronDown,
   IconExternalLink,
   IconKey,
   IconLoader2,
@@ -17,142 +21,16 @@ import {
 import { useState } from "react";
 import { toast } from "sonner";
 
-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 type { SecretStatus } from "@/hooks/use-secret-status";
-import { cn } from "@/lib/utils";
 
 import type { BuilderConnection } from "./types";
 
-const BUILDER_CREDITS_FEATURE_LABELS = [
-  "builderCredits.featureBackupTranscription",
-  "builderCredits.featureCleanup",
-  "builderCredits.featureSummaries",
-  "builderCredits.featureTitles",
-] as const;
-
-const AI_PROVIDER_FIELDS = [
-  {
-    key: "ANTHROPIC_API_KEY",
-    label: "Anthropic",
-    placeholder: "sk-ant-...",
-    storage: "agent-engine",
-    engine: "anthropic",
-  },
-  {
-    key: "OPENAI_API_KEY",
-    label: "OpenAI",
-    placeholder: "sk-...",
-    storage: "agent-engine",
-    engine: "ai-sdk:openai",
-  },
-  {
-    key: "GEMINI_API_KEY",
-    label: "Gemini",
-    placeholder: "AI...",
-    storage: "secret",
-  },
-  {
-    key: "GROQ_API_KEY",
-    label: "Groq",
-    placeholder: "gsk_...",
-    storage: "secret",
-    engine: "ai-sdk:groq",
-  },
-  {
-    key: "OPENROUTER_API_KEY",
-    label: "OpenRouter",
-    placeholder: "sk-or-...",
-    storage: "agent-engine",
-    engine: "ai-sdk:openrouter",
-  },
-] as const;
-
-async function saveAgentEngineApiKey(
-  key: string,
-  value: string,
-): Promise<void> {
-  const res = await fetch(
-    agentNativePath("/_agent-native/agent-engine/api-key"),
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ key, value, scope: "user" }),
-    },
-  );
-
-  if (!res.ok) {
-    // coercion-ok: an error body may not be JSON; the failure is still raised with the status code.
-    const body = (await res.json().catch(() => null)) as {
-      error?: string;
-    } | null;
-    throw new Error(body?.error ?? `Save failed (${res.status})`);
-  }
-}
-
-async function applyAgentEngine(engine: string): Promise<void> {
-  const res = await fetch(
-    agentNativePath("/_agent-native/actions/manage-agent-engine"),
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ action: "set", engine }),
-    },
-  );
-
-  // coercion-ok: an error body may not be JSON; the failure is still raised with the status code.
-  const body = (await res.json().catch(() => null)) as {
-    error?: string;
-    result?: unknown;
-  } | null;
-  if (!res.ok) {
-    throw new Error(body?.error ?? `Engine switch failed (${res.status})`);
-  }
-  const result = body?.result ?? body;
-  const text =
-    typeof result === "string"
-      ? result.trim()
-      : result && typeof result === "object"
-        ? JSON.stringify(result)
-        : "";
-  if (/^(Error|Warning):/i.test(text)) {
-    throw new Error(text);
-  }
-}
-
-async function saveRegisteredSecret(key: string, value: string): Promise<void> {
-  const res = await fetch(
-    agentNativePath(`/_agent-native/secrets/${encodeURIComponent(key)}`),
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ value }),
-    },
-  );
-
-  if (!res.ok) {
-    // coercion-ok: an error body may not be JSON; the failure is still raised with the status code.
-    const body = (await res.json().catch(() => null)) as {
-      error?: string;
-    } | null;
-    throw new Error(body?.error ?? `Save failed (${res.status})`);
-  }
-}
-
 export interface AiSetupSectionProps {
   builder: BuilderConnection;
   secrets: SecretStatus;
@@ -166,276 +44,115 @@ export function AiSetupSection({ builder, secrets }: AiSetupSectionProps) {
     { retry: false },
   );
   const [expanded, setExpanded] = useState(false);
-  const [values, setValues] = useState<Record<string, string>>({});
-  const [savingKey, setSavingKey] = useState<string | null>(null);
-
-  const configuredCount = AI_PROVIDER_FIELDS.filter(
-    (field) => secrets.configured[field.key],
-  ).length;
+  const configuredProviders = new Set<AgentProviderId>(
+    AGENT_PROVIDER_CATALOG.filter(
+      (provider) =>
+        (provider.key && secrets.configured[provider.key]) ||
+        (provider.endpointKey && secrets.configured[provider.endpointKey]),
+    ).map((provider) => provider.id),
+  );
+  const configuredCount = configuredProviders.size;
   const creditsPaused = creditStatus.data?.exhausted === true;
   const upgradeUrl =
     creditStatus.data?.upgradeUrl ?? BUILDER_CREDITS_UPGRADE_URL;
 
-  async function handleSaveApiKey(key: string) {
-    const value = (values[key] ?? "").trim();
-    if (!value) {
-      toast.error(t("settings.pasteProviderKey"));
-      return;
-    }
-
-    setSavingKey(key);
-    try {
-      const field = AI_PROVIDER_FIELDS.find((item) => item.key === key);
-      if (field?.storage === "secret") {
-        await saveRegisteredSecret(key, value);
-      } else {
-        await saveAgentEngineApiKey(key, value);
-      }
-      if (field && "engine" in field) {
-        await applyAgentEngine(field.engine);
-      }
-      setValues((current) => ({ ...current, [key]: "" }));
-      window.dispatchEvent(new CustomEvent("agent-engine:configured-changed"));
-      await secrets.refresh();
-      toast.success(t("settings.apiKeySaved"));
-    } catch (err) {
-      toast.error(
-        err instanceof Error ? err.message : t("settings.apiKeyFailed"),
-      );
-    } finally {
-      setSavingKey(null);
-    }
-  }
-
   function openProviderSetup() {
     setExpanded(true);
     window.requestAnimationFrame(() => {
       document
         .getElementById("ai-provider-keys")
         ?.scrollIntoView({ behavior: "smooth", block: "start" });
-      const firstEmptyField =
-        AI_PROVIDER_FIELDS.find((field) => !secrets.configured[field.key]) ??
-        AI_PROVIDER_FIELDS[0];
-      window.setTimeout(() => {
-        document.getElementById(firstEmptyField.key)?.focus();
-      }, 150);
     });
   }
 
   return (
-    <Card id="ai-providers" className="scroll-mt-16">
-      <CardHeader>
-        <CardTitle className="text-base flex items-center gap-2">
-          <IconBrain className="size-4 text-primary" />
-          {t("settings.apiSetup")}
-        </CardTitle>
-        <CardDescription>{t("settings.apiSetupDescription")}</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div
-          className={cn(
-            "flex flex-col gap-3 rounded-md border px-3 py-3 sm:flex-row sm:items-center sm:justify-between",
-            builder.connected
-              ? "border-border bg-muted/20"
-              : "border-border bg-accent/30",
-          )}
-        >
-          <div className="min-w-0">
-            <div className="flex items-center gap-2 text-sm font-medium">
-              {builder.connected ? (
-                <IconCheck className="h-4 w-4 text-primary" />
-              ) : (
-                <IconKey className="h-4 w-4 text-muted-foreground" />
-              )}
-              {builder.loading
-                ? t("settings.checkingBuilder")
-                : builder.connected
-                  ? t("settings.builderAiAvailable")
-                  : t("settings.builderEasySetup")}
-            </div>
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              {builder.connected
-                ? t("settings.apiSetupDescription")
-                : t("settings.builderAiDescription")}
-            </p>
+    <SettingsGroup id="ai-providers" title={t("settings.apiSetup")}>
+      {creditsPaused ? (
+        <div className="flex items-center justify-between gap-3 px-5 py-3 text-amber-950 dark:text-amber-100">
+          <div className="flex items-center gap-2 text-sm font-medium">
+            <IconBolt className="h-4 w-4 text-amber-700 dark:text-amber-200" />
+            {t("builderCredits.pausedTitle")}
           </div>
-          {!builder.connected ? (
+          <div className="flex shrink-0 gap-2">
+            <Button asChild size="sm" className="h-8">
+              <a href={upgradeUrl} target="_blank" rel="noopener noreferrer">
+                <IconExternalLink className="h-4 w-4" />
+                {t("builderCredits.upgrade")}
+              </a>
+            </Button>
             <Button
               type="button"
               variant="outline"
               size="sm"
-              className="shrink-0"
-              onClick={() =>
-                builder.start({
-                  trackingSource: "clips_settings_ai_setup",
-                  trackingFlow: "connect_llm",
-                })
-              }
-              disabled={builder.connecting || builder.loading}
+              className="h-8 border-amber-300/80 bg-background/70 text-amber-950 hover:bg-amber-100 dark:border-amber-400/40 dark:bg-amber-950/30 dark:text-amber-100 dark:hover:bg-amber-900/40"
+              onClick={openProviderSetup}
             >
-              {builder.connecting ? (
-                <IconLoader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <IconExternalLink className="h-4 w-4" />
-              )}
-              {t("settings.connectBuilder")}
+              {t("builderCredits.openAiSetup")}
             </Button>
-          ) : null}
+          </div>
         </div>
-
-        {creditsPaused ? (
-          <div className="rounded-md border border-amber-300/70 bg-amber-50/80 p-3 text-amber-950 shadow-sm dark:border-amber-400/30 dark:bg-amber-950/25 dark:text-amber-100">
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-              <div className="min-w-0 flex-1">
-                <div className="flex items-center gap-2 text-sm font-semibold">
-                  <span className="rounded-md bg-amber-100 p-1 dark:bg-amber-400/15">
-                    <IconBolt className="h-4 w-4 text-amber-700 dark:text-amber-200" />
-                  </span>
-                  {t("builderCredits.pausedTitle")}
-                </div>
-                <p className="mt-1.5 text-xs leading-relaxed text-amber-900/80 dark:text-amber-100/80">
-                  {t("builderCredits.settingsDescription")}
-                </p>
-                <div className="mt-2 flex flex-wrap gap-1.5">
-                  {BUILDER_CREDITS_FEATURE_LABELS.map((key) => (
-                    <span
-                      key={key}
-                      className="rounded-full border border-amber-300/70 bg-background/70 px-2 py-0.5 text-[11px] font-medium text-amber-900 dark:border-amber-400/30 dark:bg-amber-950/30 dark:text-amber-100"
-                    >
-                      {t(key)}
-                    </span>
-                  ))}
-                </div>
-              </div>
-              <div className="flex shrink-0 flex-wrap gap-2">
-                <Button asChild size="sm" className="h-8">
-                  <a
-                    href={upgradeUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <IconExternalLink className="h-4 w-4" />
-                    {t("builderCredits.upgrade")}
-                  </a>
-                </Button>
+      ) : null}
+
+      <Collapsible open={expanded} onOpenChange={setExpanded}>
+        <SettingsRow
+          label={t("settings.providerActionTitle")}
+          description={t("settings.providerActionDescription")}
+          control={
+            <div className="flex flex-wrap items-center justify-end gap-2">
+              {builder.connected ? (
+                <span className="inline-flex items-center gap-1.5 text-sm font-medium text-primary">
+                  <IconCheck className="h-4 w-4" />
+                  Builder.io
+                </span>
+              ) : (
                 <Button
                   type="button"
-                  variant="outline"
+                  variant="default"
                   size="sm"
-                  className="h-8 border-amber-300/80 bg-background/70 text-amber-950 hover:bg-amber-100 dark:border-amber-400/40 dark:bg-amber-950/30 dark:text-amber-100 dark:hover:bg-amber-900/40"
-                  onClick={openProviderSetup}
+                  onClick={() =>
+                    builder.start({
+                      trackingSource: "clips_settings_ai_setup",
+                      trackingFlow: "connect_llm",
+                    })
+                  }
+                  disabled={builder.connecting || builder.loading}
                 >
-                  {t("builderCredits.openAiSetup")}
+                  {builder.connecting ? (
+                    <IconLoader2 className="h-4 w-4 animate-spin" />
+                  ) : null}
+                  {t("settings.connectBuilder")}
                 </Button>
-              </div>
+              )}
+              <CollapsibleTrigger asChild>
+                <Button type="button" variant="outline" size="sm">
+                  {configuredCount > 0
+                    ? t("settings.providerManage")
+                    : t("settings.providerCustomKeys")}
+                </Button>
+              </CollapsibleTrigger>
             </div>
-          </div>
-        ) : null}
-
-        <Collapsible open={expanded} onOpenChange={setExpanded}>
-          <div className="rounded-md border border-border">
-            <CollapsibleTrigger asChild>
-              <button
-                id="ai-provider-keys"
-                type="button"
-                className="flex w-full items-center justify-between gap-3 px-3 py-3 text-start"
-              >
-                <div className="min-w-0">
-                  <div className="flex items-center gap-2 text-sm font-medium">
-                    <IconKey className="h-4 w-4 text-muted-foreground" />
-                    {t("settings.providerKeyTitle")}
-                    {configuredCount > 0 ? (
-                      <Badge variant="secondary" className="text-[10px]">
-                        {t("settings.providerKeysSet", {
-                          count: configuredCount,
-                        })}
-                      </Badge>
-                    ) : null}
-                  </div>
-                  <p className="mt-0.5 text-xs text-muted-foreground">
-                    {t("settings.providerKeyDescription")}
-                  </p>
-                </div>
-                <IconChevronDown
-                  className={cn(
-                    "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
-                    expanded && "rotate-180",
-                  )}
-                />
-              </button>
-            </CollapsibleTrigger>
-            <CollapsibleContent>
-              <div className="space-y-3 border-t border-border px-3 py-4">
-                {secrets.loading ? (
-                  <div className="text-xs text-muted-foreground">
-                    {t("settings.checkingProviderKeys")}
-                  </div>
-                ) : null}
-                <div className="grid gap-3 sm:grid-cols-2">
-                  {AI_PROVIDER_FIELDS.map((field) => {
-                    const configured = Boolean(secrets.configured[field.key]);
-                    const savingThisKey = savingKey === field.key;
-                    return (
-                      <div key={field.key} className="space-y-1.5">
-                        <div className="flex items-center justify-between gap-2">
-                          <Label htmlFor={field.key}>{field.label}</Label>
-                          {configured ? (
-                            <span className="flex items-center gap-1 text-[10px] font-medium text-primary">
-                              <IconCheck className="h-3 w-3" />
-                              {t("settings.keySet")}
-                            </span>
-                          ) : null}
-                        </div>
-                        <div className="flex gap-2">
-                          <Input
-                            id={field.key}
-                            type="password"
-                            value={values[field.key] ?? ""}
-                            onChange={(event) =>
-                              setValues((current) => ({
-                                ...current,
-                                [field.key]: event.target.value,
-                              }))
-                            }
-                            onKeyDown={(event) => {
-                              if (event.key === "Enter") {
-                                void handleSaveApiKey(field.key);
-                              }
-                            }}
-                            placeholder={
-                              configured
-                                ? t("settings.replaceKey")
-                                : field.placeholder
-                            }
-                            autoComplete="off"
-                            disabled={savingThisKey}
-                          />
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            className="shrink-0"
-                            onClick={() => handleSaveApiKey(field.key)}
-                            disabled={
-                              savingThisKey || !(values[field.key] ?? "").trim()
-                            }
-                          >
-                            {savingThisKey ? (
-                              <IconLoader2 className="h-4 w-4 animate-spin" />
-                            ) : (
-                              t("common.save")
-                            )}
-                          </Button>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
+          }
+        />
+        <CollapsibleContent>
+          <div className="space-y-3 border-t border-border px-5 py-4">
+            {secrets.loading ? (
+              <div className="text-xs text-muted-foreground">
+                {t("settings.checkingProviderKeys")}
               </div>
-            </CollapsibleContent>
+            ) : null}
+            <AgentProviderSetupForm
+              initialProvider="openrouter"
+              configuredProviders={configuredProviders}
+              layout="page"
+              showTitle={false}
+              onConnected={() => {
+                void secrets.refresh();
+                toast.success(t("settings.apiKeySaved"));
+              }}
+            />
           </div>
-        </Collapsible>
-      </CardContent>
-    </Card>
+        </CollapsibleContent>
+      </Collapsible>
+    </SettingsGroup>
   );
 }