@agent-native/core 0.147.0 → 0.148.1

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

@@ -4,12 +4,8 @@ import {
 } from "@agent-native/core/client/api-path";
 import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import {
-  IconBrandSlack,
-  IconExternalLink,
-  IconLoader2,
-  IconTrash,
-} from "@tabler/icons-react";
+import { SettingsGroup, SettingsRow } from "@agent-native/core/client/settings";
+import { IconBrandSlack, IconLoader2, IconTrash } from "@tabler/icons-react";
 import { useState } from "react";
 import { toast } from "sonner";
 
@@ -24,13 +20,6 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 
 interface SlackInstallation {
   id: string;
@@ -188,103 +177,72 @@ export function SlackSection() {
 
   return (
     <>
-      <Card id="slack" className="scroll-mt-16">
-        <CardHeader>
-          <CardTitle className="text-base flex items-center gap-2">
-            <IconBrandSlack className="size-4 text-primary" />
-            {t("settings.slackTitle")}
-          </CardTitle>
-          <CardDescription>{t("settings.slackDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex flex-col gap-3 rounded-md border border-border bg-accent/30 px-3 py-3 sm:flex-row sm:items-center sm:justify-between">
-            <div className="min-w-0">
-              <div className="flex items-center gap-2 text-sm font-medium">
-                <IconBrandSlack className="h-4 w-4 text-muted-foreground" />
-                {slackStatus.isLoading
-                  ? t("settings.checkingSlack")
-                  : connected
-                    ? t("settings.slackConnected", {
-                        count: installations.length,
-                      })
-                    : oauthConfigured
-                      ? t("common.notConnected")
-                      : t("settings.slackOauthNeeded")}
-              </div>
-              <p className="mt-0.5 text-xs text-muted-foreground">
-                {t("settings.slackPreviewDescription")}
-              </p>
-            </div>
+      <SettingsGroup
+        id="slack"
+        title={t("settings.slackTitle")}
+        description={t("settings.slackDescription")}
+      >
+        <SettingsRow
+          label={
+            slackStatus.isLoading
+              ? t("settings.checkingSlack")
+              : connected
+                ? t("settings.slackConnected", {
+                    count: installations.length,
+                  })
+                : oauthConfigured
+                  ? t("common.notConnected")
+                  : t("settings.slackOauthNeeded")
+          }
+          description={
+            !oauthConfigured
+              ? t("settings.slackClientMissing")
+              : !signingConfigured
+                ? t("settings.slackSigningMissing")
+                : t("settings.slackPreviewDescription")
+          }
+          icon={<IconBrandSlack className="text-primary" />}
+          control={
             <Button
               type="button"
-              variant="outline"
+              variant="default"
               size="sm"
-              className="shrink-0"
               onClick={handleConnect}
               disabled={connecting || slackStatus.isLoading || !oauthConfigured}
             >
-              {connecting ? (
-                <IconLoader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <IconExternalLink className="h-4 w-4" />
-              )}
+              {connecting ? <IconLoader2 className="animate-spin" /> : null}
               {t("settings.connectSlack")}
             </Button>
-          </div>
-
-          {!oauthConfigured ? (
-            <div className="rounded-md border border-border p-3 text-xs text-muted-foreground">
-              {t("settings.slackClientMissing")}
-            </div>
-          ) : null}
-
-          {!signingConfigured ? (
-            <div className="rounded-md border border-border p-3 text-xs text-muted-foreground">
-              {t("settings.slackSigningMissing")}
-            </div>
-          ) : null}
+          }
+        />
 
-          {installations.length > 0 ? (
-            <div className="space-y-2">
-              {installations.map((installation) => (
-                <div
-                  key={installation.id}
-                  className="flex items-center justify-between gap-3 rounded-md border border-border px-3 py-2"
-                >
-                  <div className="min-w-0">
-                    <div className="truncate text-sm font-medium">
-                      {installation.teamName || installation.teamId}
-                    </div>
-                    <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
-                      <span>{installation.status}</span>
-                      {installation.enterpriseName ? (
-                        <span>{installation.enterpriseName}</span>
-                      ) : null}
-                      <span>
-                        {t("settings.connectedBy", {
-                          email: installation.ownerEmail,
-                        })}
-                      </span>
-                    </div>
-                  </div>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="shrink-0"
-                    aria-label={t("settings.disconnectSlackLabel", {
-                      team: installation.teamName || installation.teamId,
-                    })}
-                    onClick={() => setDisconnectTarget(installation)}
-                  >
-                    <IconTrash className="h-4 w-4" />
-                  </Button>
-                </div>
-              ))}
-            </div>
-          ) : null}
-        </CardContent>
-      </Card>
+        {installations.map((installation) => (
+          <SettingsRow
+            key={installation.id}
+            label={installation.teamName || installation.teamId}
+            description={[
+              installation.status,
+              installation.enterpriseName,
+              t("settings.connectedBy", { email: installation.ownerEmail }),
+            ]
+              .filter(Boolean)
+              .join(" · ")}
+            control={
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                aria-label={t("settings.disconnectSlackLabel", {
+                  team: installation.teamName || installation.teamId,
+                })}
+                onClick={() => setDisconnectTarget(installation)}
+              >
+                <IconTrash />
+              </Button>
+            }
+          />
+        ))}
+      </SettingsGroup>
 
       <AlertDialog
         open={!!disconnectTarget}

package/corpus/templates/clips/app/components/settings/video-storage-section.tsx

@@ -1,27 +1,11 @@
 import { agentNativePath } from "@agent-native/core/client/api-path";
 import { useT } from "@agent-native/core/client/i18n";
-import {
-  IconCheck,
-  IconChevronDown,
-  IconCloud,
-  IconExternalLink,
-  IconKey,
-  IconLoader2,
-  IconServer,
-  IconTrash,
-} from "@tabler/icons-react";
+import { SettingsGroup, SettingsRow } from "@agent-native/core/client/settings";
+import { IconCheck, IconLoader2, IconTrash } from "@tabler/icons-react";
 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,
@@ -31,7 +15,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import type { SecretStatus } from "@/hooks/use-secret-status";
 import type { useVideoStorageStatus } from "@/hooks/use-video-storage-status";
-import { cn } from "@/lib/utils";
 
 import type { BuilderConnection } from "./types";
 
@@ -232,212 +215,152 @@ export function VideoStorageSection({
   }
 
   return (
-    <Card id="video-storage" className="scroll-mt-16">
-      <CardHeader>
-        <CardTitle className="text-base flex items-center gap-2">
-          <IconCloud className="size-4 text-primary" />
-          {t("settings.videoStorage")}
-        </CardTitle>
-        <CardDescription>
-          {t("settings.videoStorageDescription")}
-        </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-primary/35 bg-primary/5"
-              : "border-border bg-accent/30",
-          )}
-        >
-          <div className="min-w-0">
-            <div className="flex items-center gap-2 text-sm font-medium">
+    <SettingsGroup id="video-storage" title={t("settings.videoStorage")}>
+      <Collapsible open={expanded} onOpenChange={setExpanded}>
+        <SettingsRow
+          label="Builder.io"
+          description={
+            builder.loading
+              ? t("settings.checkingBuilder")
+              : s3Configured && storageConfigured && activeProviderName
+                ? t("settings.s3CurrentProvider", {
+                    providerName: activeProviderName,
+                  })
+                : builder.connected
+                  ? builder.orgName
+                    ? t("settings.builderConnectedFor", {
+                        orgName: builder.orgName,
+                      })
+                    : t("settings.builderConnectedGeneric")
+                  : t("settings.builderIncludes")
+          }
+          control={
+            <div className="flex flex-wrap items-center justify-end gap-2">
               {builder.connected ? (
-                <IconCheck className="h-4 w-4 text-primary" />
+                <span className="inline-flex items-center gap-1.5 text-sm font-medium text-primary">
+                  <IconCheck className="h-4 w-4" />
+                  {t("common.connected")}
+                </span>
               ) : (
-                <IconKey className="h-4 w-4 text-muted-foreground" />
-              )}
-              {builder.loading
-                ? t("settings.checkingBuilder")
-                : builder.connected
-                  ? t("settings.builderConnected")
-                  : t("settings.connectBuilder")}
-            </div>
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              {builder.connected
-                ? builder.orgName
-                  ? t("settings.builderConnectedFor", {
-                      orgName: builder.orgName,
+                <Button
+                  type="button"
+                  variant="default"
+                  size="sm"
+                  onClick={() =>
+                    builder.start({
+                      trackingSource: "clips_settings_video_storage",
+                      trackingFlow: "video_storage",
                     })
-                  : t("settings.builderConnectedGeneric")
-                : t("settings.builderIncludes")}
-            </p>
-          </div>
-          {builder.connected ? (
-            <Badge variant="secondary" className="shrink-0">
-              {t("common.connected")}
-            </Badge>
-          ) : (
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="shrink-0"
-              onClick={() =>
-                builder.start({
-                  trackingSource: "clips_settings_video_storage",
-                  trackingFlow: "video_storage",
-                })
-              }
-              disabled={builder.connecting || builder.loading}
-            >
-              {builder.connecting ? (
-                <IconLoader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <IconExternalLink className="h-4 w-4" />
-              )}
-              {t("settings.connectBuilder")}
-            </Button>
-          )}
-        </div>
-
-        <Collapsible open={expanded} onOpenChange={setExpanded}>
-          <div className="rounded-md border border-border">
-            <div className="flex flex-col gap-3 px-3 py-3 sm:flex-row sm:items-center sm:justify-between">
-              <div className="min-w-0">
-                <div className="flex flex-wrap items-center gap-2 text-sm font-medium">
-                  <IconServer className="h-4 w-4 text-muted-foreground" />
-                  {t("settings.s3Title")}
-                  <Badge variant="outline" className="text-[10px]">
-                    {t("settings.secondary")}
-                  </Badge>
-                  {s3Configured ? (
-                    <Badge variant="secondary" className="text-[10px]">
-                      {t("settings.active")}
-                    </Badge>
+                  }
+                  disabled={builder.connecting || builder.loading}
+                >
+                  {builder.connecting ? (
+                    <IconLoader2 className="h-4 w-4 animate-spin" />
                   ) : null}
-                </div>
-                <p className="mt-0.5 text-xs text-muted-foreground">
-                  {builder.connected
-                    ? t("settings.s3BuilderConnectedDescription")
-                    : storageConfigured && activeProviderName
-                      ? t("settings.s3CurrentProvider", {
-                          providerName: activeProviderName,
-                        })
-                      : t("settings.s3OwnBucketDescription")}
-                </p>
-              </div>
+                  {t("settings.connectBuilder")}
+                </Button>
+              )}
               <CollapsibleTrigger asChild>
+                <Button type="button" variant="outline" size="sm">
+                  {expanded
+                    ? t("settings.hideS3")
+                    : s3Configured
+                      ? t("settings.providerManage")
+                      : t("settings.configureS3")}
+                </Button>
+              </CollapsibleTrigger>
+            </div>
+          }
+        />
+
+        <CollapsibleContent>
+          <div className="space-y-4 border-t border-border px-5 py-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              {S3_STORAGE_FIELDS.map((field) => {
+                const configured = Boolean(secrets.configured[field.key]);
+                const last4 = secrets.last4[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}>{t(field.labelKey)}</Label>
+                      {configured ? (
+                        <span className="flex items-center gap-1 text-[10px] font-medium text-primary">
+                          <IconCheck className="h-3 w-3" />
+                          {last4 ? `••••${last4}` : t("settings.keySet")}
+                        </span>
+                      ) : null}
+                    </div>
+                    <Input
+                      id={field.key}
+                      type={
+                        "secret" in field && field.secret ? "password" : "text"
+                      }
+                      value={values[field.key] ?? ""}
+                      onChange={(event) => {
+                        setValues((current) => ({
+                          ...current,
+                          [field.key]: event.target.value,
+                        }));
+                        if (errors[field.key]) {
+                          setErrors((current) => {
+                            const next = { ...current };
+                            delete next[field.key];
+                            return next;
+                          });
+                        }
+                      }}
+                      placeholder={
+                        configured
+                          ? t("settings.replaceKey")
+                          : field.placeholder
+                      }
+                      autoComplete="off"
+                      disabled={saving}
+                      className={
+                        errors[field.key] ? "border-destructive" : undefined
+                      }
+                    />
+                    {errors[field.key] ? (
+                      <p className="text-[11px] text-destructive">
+                        {errors[field.key]}
+                      </p>
+                    ) : null}
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="flex items-center justify-end gap-2">
+              {S3_STORAGE_FIELDS.some(
+                (field) => secrets.configured[field.key],
+              ) ? (
                 <Button
                   type="button"
                   variant="ghost"
                   size="sm"
-                  className="shrink-0"
+                  onClick={handleClearAll}
+                  disabled={clearing || saving}
+                  className="text-muted-foreground hover:text-destructive"
                 >
-                  {expanded ? t("settings.hideS3") : t("settings.configureS3")}
-                  <IconChevronDown
-                    className={cn(
-                      "h-4 w-4 transition-transform",
-                      expanded && "rotate-180",
-                    )}
-                  />
+                  {clearing ? (
+                    <IconLoader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <IconTrash className="h-4 w-4" />
+                  )}
+                  {t("settings.clearAllS3")}
                 </Button>
-              </CollapsibleTrigger>
+              ) : null}
+              <Button
+                onClick={handleSave}
+                disabled={saving || storageStatus.isLoading}
+              >
+                {saving && <IconLoader2 className="h-4 w-4 animate-spin" />}
+                {t("settings.saveStorage")}
+              </Button>
             </div>
-
-            <CollapsibleContent>
-              <div className="space-y-4 border-t border-border px-3 py-4">
-                <div className="grid gap-4 sm:grid-cols-2">
-                  {S3_STORAGE_FIELDS.map((field) => {
-                    const configured = Boolean(secrets.configured[field.key]);
-                    const last4 = secrets.last4[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}>{t(field.labelKey)}</Label>
-                          {configured ? (
-                            <span className="flex items-center gap-1 text-[10px] font-medium text-primary">
-                              <IconCheck className="h-3 w-3" />
-                              {last4 ? `••••${last4}` : t("settings.keySet")}
-                            </span>
-                          ) : null}
-                        </div>
-                        <Input
-                          id={field.key}
-                          type={
-                            "secret" in field && field.secret
-                              ? "password"
-                              : "text"
-                          }
-                          value={values[field.key] ?? ""}
-                          onChange={(event) => {
-                            setValues((current) => ({
-                              ...current,
-                              [field.key]: event.target.value,
-                            }));
-                            if (errors[field.key]) {
-                              setErrors((current) => {
-                                const next = { ...current };
-                                delete next[field.key];
-                                return next;
-                              });
-                            }
-                          }}
-                          placeholder={
-                            configured
-                              ? t("settings.replaceKey")
-                              : field.placeholder
-                          }
-                          autoComplete="off"
-                          disabled={saving}
-                          className={
-                            errors[field.key] ? "border-destructive" : undefined
-                          }
-                        />
-                        {errors[field.key] ? (
-                          <p className="text-[11px] text-destructive">
-                            {errors[field.key]}
-                          </p>
-                        ) : null}
-                      </div>
-                    );
-                  })}
-                </div>
-
-                <div className="flex items-center justify-end gap-2">
-                  {S3_STORAGE_FIELDS.some(
-                    (field) => secrets.configured[field.key],
-                  ) ? (
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={handleClearAll}
-                      disabled={clearing || saving}
-                      className="text-muted-foreground hover:text-destructive"
-                    >
-                      {clearing ? (
-                        <IconLoader2 className="h-4 w-4 animate-spin" />
-                      ) : (
-                        <IconTrash className="h-4 w-4" />
-                      )}
-                      {t("settings.clearAllS3")}
-                    </Button>
-                  ) : null}
-                  <Button
-                    onClick={handleSave}
-                    disabled={saving || storageStatus.isLoading}
-                  >
-                    {saving && <IconLoader2 className="h-4 w-4 animate-spin" />}
-                    {t("settings.saveStorage")}
-                  </Button>
-                </div>
-              </div>
-            </CollapsibleContent>
           </div>
-        </Collapsible>
-      </CardContent>
-    </Card>
+        </CollapsibleContent>
+      </Collapsible>
+    </SettingsGroup>
   );
 }

package/corpus/templates/clips/app/i18n/en-US.ts

@@ -675,11 +675,11 @@ All notable user-facing changes to Clips are documented here. Open it any time f
       "Builder.io is the primary storage path for Clips uploads. S3 is available when you need to bring your own bucket.",
     checkingBuilder: "Checking Builder.io",
     builderConnected: "Builder.io connected",
-    connectBuilder: "Use Builder.io (free)",
+    connectBuilder: "Use Builder.io",
     builderConnectedFor: "Using Builder.io for {{orgName}}.",
     builderConnectedGeneric: "New clips use the connected Builder.io provider.",
     builderIncludes:
-      "Includes object storage, uploads, and managed transcription for new clips.",
+      "Builder.io's free tier includes object storage, uploads, and managed transcription for new clips.",
     s3Title: "S3-compatible storage",
     secondary: "Secondary",
     active: "Active",
@@ -705,8 +705,7 @@ All notable user-facing changes to Clips are documented here. Open it any time f
       "Bucket name must be 3–63 lowercase letters, numbers, or hyphens",
     s3RegionInvalid: 'Must be a valid region (e.g. us-east-1) or "auto"',
     apiSetup: "AI setup",
-    apiSetupDescription:
-      "Connect AI with Builder.io free credits or your own LLM keys.",
+    apiSetupDescription: "Choose how Clips connects to AI.",
     builderEasySetup: "Builder.io free credits",
     builderAiAvailable:
       "Included AI credits and managed transcription are available for Clips.",
@@ -714,8 +713,13 @@ All notable user-facing changes to Clips are documented here. Open it any time f
       "Use Builder.io first for included AI credits, object storage, uploads, and managed transcription.",
     providerKeyTitle: "Bring your own provider key",
     providerKeyDescription:
-      "Add Anthropic, OpenAI, Gemini, Groq, or OpenRouter keys for provider-billed usage.",
+      "Choose Anthropic, OpenAI, OpenRouter, Gemini, Groq, Mistral, Cohere, or Ollama for provider-billed usage.",
     providerKeysSet: "{{count}} set",
+    providerActionTitle: "AI provider",
+    providerActionDescription:
+      "Builder.io includes a free tier, or use custom keys.",
+    providerManage: "Manage",
+    providerCustomKeys: "Custom keys",
     checkingProviderKeys: "Checking provider keys…",
     keySet: "Set",
     keyCleared: "Storage credentials cleared",
@@ -725,8 +729,7 @@ All notable user-facing changes to Clips are documented here. Open it any time f
     apiKeySaved: "API key saved",
     apiKeyFailed: "Failed to save key",
     slackTitle: "Agent-Native Clips for Slack",
-    slackDescription:
-      "Share a public clip, paste the link in Slack, and it plays inline — no extra steps for viewers. Connect each workspace once.",
+    slackDescription: "Preview public Clips links inline in Slack.",
     checkingSlack: "Checking Slack",
     slackConnected_one: "{{count}} workspace connected",
     slackConnected_other: "{{count}} workspaces connected",
@@ -1145,7 +1148,7 @@ All notable user-facing changes to Clips are documented here. Open it any time f
       "Didn't hear back from Builder in 5 minutes. Check the popup and try again.",
     builderConnected: "Builder.io connected",
     waitingForBuilder: "Waiting for Builder...",
-    connectBuilder: "Use Builder.io (free)",
+    connectBuilder: "Use Builder.io",
     free: "Free",
     configureS3: "configure S3-compatible storage",
     whyPrompt: "Why am I seeing this?",

package/corpus/templates/clips/desktop/src/app.tsx

@@ -7689,7 +7689,7 @@ function Setup({
                 className="secondary"
                 onClick={connectBuilder}
               >
-                Use Builder.io (free)
+                Use Builder.io
               </button>
             ) : null}
           </div>