@agent-native/core 0.134.1 → 0.135.0

package/corpus/templates/clips/app/routes/_app.settings._index.tsx

@@ -1,67 +1,26 @@
-import {
-  agentNativePath,
-  appApiPath,
-} from "@agent-native/core/client/api-path";
+import { agentNativePath } from "@agent-native/core/client/api-path";
 import { ChangelogSettingsCard } from "@agent-native/core/client/changelog";
-import { useActionQuery } from "@agent-native/core/client/hooks";
 import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
 import { useOrg, useSwitchOrg } from "@agent-native/core/client/org";
 import {
   AccountSettingsCard,
-  useBuilderConnectFlow,
-  useBuilderStatus,
+  SettingsGroup,
+  SettingsRow,
   SettingsTabsPage,
   useAgentSettingsTabs,
+  useBuilderConnectFlow,
+  useBuilderStatus,
   type SettingsSearchEntry,
 } from "@agent-native/core/client/settings";
-import {
-  BUILDER_CREDITS_UPGRADE_URL,
-  type BuilderCreditsStatus,
-} from "@shared/builder-credits";
-import {
-  IconBrain,
-  IconBolt,
-  IconBrandSlack,
-  IconCheck,
-  IconChevronDown,
-  IconCloud,
-  IconExternalLink,
-  IconKey,
-  IconLoader2,
-  IconServer,
-  IconTrash,
-  IconUsersGroup,
-} from "@tabler/icons-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import type { ClipsDefaultVisibility } from "@shared/clips-ai-prefs";
+import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 
 import { PageHeader } from "@/components/library/page-header";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
+import { AiSetupSection } from "@/components/settings/ai-setup-section";
+import { SlackSection } from "@/components/settings/slack-section";
+import { VideoStorageSection } from "@/components/settings/video-storage-section";
 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 {
   Select,
   SelectContent,
@@ -71,9 +30,9 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { OrganizationIdentityCard } from "@/components/workspace/organization-identity-card";
+import { useSecretStatus } from "@/hooks/use-secret-status";
 import { useVideoStorageStatus } from "@/hooks/use-video-storage-status";
 import enMessages from "@/i18n/en-US";
-import { cn } from "@/lib/utils";
 
 export function meta() {
   return [{ title: enMessages.settings.pageTitle }];
@@ -81,112 +40,12 @@ export function meta() {
 
 const SPEEDS = ["1", "1.2", "1.5", "1.75", "2"];
 
-const BUILDER_CREDITS_FEATURE_LABELS = [
-  "builderCredits.featureBackupTranscription",
-  "builderCredits.featureCleanup",
-  "builderCredits.featureSummaries",
-  "builderCredits.featureTitles",
-] as const;
-
-const S3_STORAGE_FIELDS = [
-  {
-    key: "S3_ENDPOINT",
-    labelKey: "settings.s3EndpointLabel",
-    placeholder: "https://s3.us-east-1.amazonaws.com",
-    required: true,
-  },
-  {
-    key: "S3_BUCKET",
-    labelKey: "settings.s3BucketLabel",
-    placeholder: "my-clips-bucket",
-    required: true,
-  },
-  {
-    key: "S3_ACCESS_KEY_ID",
-    labelKey: "settings.s3AccessKeyLabel",
-    placeholder: "AKIA...",
-    required: true,
-  },
-  {
-    key: "S3_SECRET_ACCESS_KEY",
-    labelKey: "settings.s3SecretAccessKeyLabel",
-    placeholder: "••••••••",
-    required: true,
-    secret: true,
-  },
-  {
-    key: "S3_REGION",
-    labelKey: "settings.s3RegionLabel",
-    placeholder: "us-east-1",
-  },
-  {
-    key: "S3_PUBLIC_BASE_URL",
-    labelKey: "settings.s3PublicBaseUrlLabel",
-    placeholder: "https://cdn.example.com",
-  },
-] 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;
-
 interface ClipsUserSettings {
   defaultPlaybackSpeed?: string;
   emailNotifications?: boolean;
   transcriptCleanupEnabled?: boolean;
   includeFullVideoInAi?: boolean;
-}
-
-interface SlackInstallation {
-  id: string;
-  teamId: string;
-  teamName: string | null;
-  enterpriseName: string | null;
-  apiAppId: string | null;
-  ownerEmail: string;
-  orgId: string | null;
-  status: string;
-  updatedAt: string;
-}
-
-interface SlackInstallationsResponse {
-  oauthConfigured: boolean;
-  signingConfigured: boolean;
-  scopes: string[];
-  installations: SlackInstallation[];
+  defaultRecordingVisibility?: ClipsDefaultVisibility;
 }
 
 async function loadSettings(): Promise<ClipsUserSettings> {
@@ -215,182 +74,6 @@ async function saveSettings(value: ClipsUserSettings): Promise<void> {
   }
 }
 
-function absoluteAppUrl(url: string): string {
-  const withBase = url.startsWith("/api/") ? appApiPath(url) : url;
-  return new URL(withBase, window.location.origin).toString();
-}
-
-async function waitForPopupClose(popup: Window): Promise<void> {
-  await new Promise<void>((resolve) => {
-    let settled = false;
-    const finish = () => {
-      if (settled) return;
-      settled = true;
-      window.clearInterval(interval);
-      window.clearTimeout(timeout);
-      window.removeEventListener("focus", onFocus);
-      resolve();
-    };
-    const interval = window.setInterval(() => {
-      if (popup.closed) finish();
-    }, 500);
-    const onFocus = () => {
-      if (popup.closed) finish();
-    };
-    window.addEventListener("focus", onFocus);
-    const timeout = window.setTimeout(finish, 5 * 60 * 1000);
-  });
-}
-
-async function startSlackOAuth(): Promise<void> {
-  const res = await fetch(
-    agentNativePath("/_agent-native/actions/connect-slack?returnUrl=/settings"),
-  );
-  const text = await res.text();
-  let data: {
-    url?: string;
-    error?: string;
-    result?: { url?: string };
-  } = {};
-  try {
-    data = JSON.parse(text);
-  } catch {
-    // Keep the fallback below.
-  }
-  if (!res.ok) throw new Error(data.error || `Failed (${res.status})`);
-  const url = data.result?.url ?? data.url;
-  if (!url) throw new Error("No Slack OAuth URL returned");
-  const popup = window.open(
-    absoluteAppUrl(url),
-    "clips-slack-oauth",
-    "width=600,height=760",
-  );
-  if (!popup) {
-    throw new Error(
-      "Popup blocked — please allow popups for this site and try again.",
-    );
-  }
-  await waitForPopupClose(popup);
-}
-
-async function requestDisconnectSlack(id: string): Promise<void> {
-  const res = await fetch(
-    agentNativePath("/_agent-native/actions/disconnect-slack"),
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ id }),
-    },
-  );
-  if (!res.ok) {
-    const body = (await res.json().catch(() => null)) as {
-      error?: string;
-    } | null;
-    throw new Error(body?.error ?? `Disconnect failed (${res.status})`);
-  }
-}
-
-async function saveS3StorageSettings(
-  values: Record<string, string>,
-): Promise<void> {
-  const vars = S3_STORAGE_FIELDS.map((field) => ({
-    key: field.key,
-    value: (values[field.key] ?? "").trim(),
-  })).filter((entry) => entry.value.length > 0);
-
-  if (vars.length === 0) {
-    throw new Error("Enter at least one storage value.");
-  }
-
-  for (const { key, value } of vars) {
-    const res = await fetch(agentNativePath("/_agent-native/secrets/adhoc"), {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        name: key,
-        value,
-        scope: "workspace",
-        description: "Clips S3-compatible storage", // i18n-ignore -- secret metadata description, not visible UI
-      }),
-    });
-
-    if (!res.ok) {
-      const body = (await res.json().catch(() => null)) as {
-        error?: string;
-      } | null;
-      throw new Error(body?.error ?? `Save failed (${res.status})`);
-    }
-  }
-}
-
-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) {
-    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 }),
-    },
-  );
-
-  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) {
-    const body = (await res.json().catch(() => null)) as {
-      error?: string;
-    } | null;
-    throw new Error(body?.error ?? `Save failed (${res.status})`);
-  }
-}
-
 export default function SettingsIndexRoute() {
   const t = useT();
   const agentSettingsTabs = useAgentSettingsTabs();
@@ -416,6 +99,7 @@ export default function SettingsIndexRoute() {
   const { data: org } = useOrg();
   const switchOrg = useSwitchOrg();
   const storageStatus = useVideoStorageStatus();
+  const secrets = useSecretStatus();
   const builderStatus = useBuilderStatus();
   const builderConnect = useBuilderConnectFlow({
     popupUrl:
@@ -427,83 +111,14 @@ export default function SettingsIndexRoute() {
       toast.success(t("settings.builderConnectedToast"));
     },
   });
-  const slackStatus = useActionQuery<SlackInstallationsResponse>(
-    "list-slack-installations",
-    undefined,
-    { retry: false },
-  );
-  const builderCreditStatus = useActionQuery<BuilderCreditsStatus>(
-    "get-builder-credit-status",
-    undefined,
-    { retry: false },
-  );
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
-  const [savingStorage, setSavingStorage] = useState(false);
-  const [connectingSlack, setConnectingSlack] = useState(false);
-  const [disconnectingSlack, setDisconnectingSlack] = useState(false);
-  const [disconnectSlackTarget, setDisconnectSlackTarget] =
-    useState<SlackInstallation | null>(null);
   const [defaultSpeed, setDefaultSpeed] = useState("1.2");
   const [emailNotifications, setEmailNotifications] = useState(true);
+  const [defaultVisibility, setDefaultVisibility] =
+    useState<ClipsDefaultVisibility>("private");
   const [transcriptCleanupEnabled, setTranscriptCleanupEnabled] =
     useState(true);
-  const [s3Values, setS3Values] = useState<Record<string, string>>({});
-  const [s3Errors, setS3Errors] = useState<Record<string, string>>({});
-  const [clearingS3, setClearingS3] = useState(false);
-  const [s3Expanded, setS3Expanded] = useState(false);
-  const [apiKeysExpanded, setApiKeysExpanded] = useState(false);
-  const [apiKeyValues, setApiKeyValues] = useState<Record<string, string>>({});
-  const [apiKeyStatus, setApiKeyStatus] = useState<Record<string, boolean>>({});
-  const [secretLast4, setSecretLast4] = useState<Record<string, string>>({});
-  const [apiKeyStatusLoading, setApiKeyStatusLoading] = useState(true);
-  const [savingApiKey, setSavingApiKey] = useState<string | null>(null);
-
-  const refreshApiKeyStatus = useCallback(async () => {
-    setApiKeyStatusLoading(true);
-    try {
-      const [envRes, secretsRes, adhocRes] = await Promise.all([
-        fetch(agentNativePath("/_agent-native/env-status")),
-        fetch(agentNativePath("/_agent-native/secrets")),
-        fetch(agentNativePath("/_agent-native/secrets/adhoc")),
-      ]);
-      const envData = envRes.ok
-        ? ((await envRes.json()) as Array<{
-            key: string;
-            configured?: boolean;
-          }>)
-        : [];
-      const secretsData = secretsRes.ok
-        ? ((await secretsRes.json()) as Array<{
-            key: string;
-            status?: string;
-          }>)
-        : [];
-      const adhocData = adhocRes.ok
-        ? ((await adhocRes.json()) as Array<{
-            name: string;
-            last4?: string;
-          }>)
-        : [];
-      const next = Object.fromEntries(
-        envData.map((entry) => [entry.key, Boolean(entry.configured)]),
-      );
-      for (const entry of secretsData) {
-        next[entry.key] = entry.status === "set";
-      }
-      const nextLast4: Record<string, string> = {};
-      for (const entry of adhocData) {
-        next[entry.name] = true;
-        if (entry.last4) nextLast4[entry.name] = entry.last4;
-      }
-      setSecretLast4(nextLast4);
-      setApiKeyStatus(next);
-    } catch {
-      setApiKeyStatus({});
-    } finally {
-      setApiKeyStatusLoading(false);
-    }
-  }, []);
 
   useEffect(() => {
     let cancelled = false;
@@ -511,6 +126,7 @@ export default function SettingsIndexRoute() {
       if (cancelled) return;
       setDefaultSpeed(v.defaultPlaybackSpeed ?? "1.2");
       setEmailNotifications(v.emailNotifications ?? true);
+      setDefaultVisibility(v.defaultRecordingVisibility ?? "private");
       setTranscriptCleanupEnabled(v.transcriptCleanupEnabled !== false);
       setLoading(false);
     });
@@ -519,12 +135,27 @@ export default function SettingsIndexRoute() {
     };
   }, []);
 
-  useEffect(() => {
-    void refreshApiKeyStatus();
-  }, [refreshApiKeyStatus]);
-
   const orgs = org?.orgs ?? [];
 
+  const builder = useMemo(
+    () => ({
+      connected: Boolean(
+        builderConnect.configured ||
+        builderStatus.status?.configured ||
+        storageStatus.data?.builderConfigured ||
+        storageStatus.data?.activeProvider?.id === "builder",
+      ),
+      loading:
+        storageStatus.isLoading ||
+        builderStatus.loading ||
+        !builderConnect.hasFetchedStatus,
+      connecting: builderConnect.connecting,
+      orgName: builderConnect.orgName ?? builderStatus.status?.orgName ?? null,
+      start: builderConnect.start,
+    }),
+    [builderConnect, builderStatus, storageStatus],
+  );
+
   async function handleUploadWorkspaceChange(organizationId: string) {
     if (!organizationId || organizationId === org?.orgId) return;
     try {
@@ -546,6 +177,7 @@ export default function SettingsIndexRoute() {
         defaultPlaybackSpeed: defaultSpeed,
         emailNotifications,
         transcriptCleanupEnabled,
+        defaultRecordingVisibility: defaultVisibility,
       });
       toast.success(t("settings.saved"));
     } catch (err) {
@@ -557,229 +189,10 @@ export default function SettingsIndexRoute() {
     }
   }
 
-  function validateS3Values(
-    values: Record<string, string>,
-  ): Record<string, string> {
-    const errors: Record<string, string> = {};
-    const urlFields = ["S3_ENDPOINT", "S3_PUBLIC_BASE_URL"];
-    for (const key of urlFields) {
-      const val = (values[key] ?? "").trim();
-      if (!val) continue;
-      try {
-        const parsed = new URL(val);
-        if (parsed.protocol !== "https:" && parsed.protocol !== "http:") {
-          errors[key] = t("settings.s3UrlInvalid");
-        }
-      } catch {
-        errors[key] = t("settings.s3UrlInvalid");
-      }
-    }
-    const bucket = (values["S3_BUCKET"] ?? "").trim();
-    if (bucket && !/^[a-z0-9][a-z0-9\-.]{1,61}[a-z0-9]$/.test(bucket)) {
-      errors["S3_BUCKET"] = t("settings.s3BucketInvalid");
-    }
-    return errors;
-  }
-
-  async function handleSaveS3Storage() {
-    const validationErrors = validateS3Values(s3Values);
-    if (Object.keys(validationErrors).length > 0) {
-      setS3Errors(validationErrors);
-      return;
-    }
-    const s3Configured = storageStatus.data?.activeProvider?.id === "s3";
-    const missing = s3Configured
-      ? []
-      : S3_STORAGE_FIELDS.filter(
-          (field) =>
-            "required" in field &&
-            field.required &&
-            !(s3Values[field.key] ?? "").trim(),
-        );
-    if (missing.length > 0) {
-      toast.error(t("settings.storageRequired"));
-      return;
-    }
-
-    setSavingStorage(true);
-    try {
-      await saveS3StorageSettings(s3Values);
-      setS3Values((current) => ({
-        ...current,
-        S3_SECRET_ACCESS_KEY: "",
-      }));
-      await Promise.all([storageStatus.refetch(), refreshApiKeyStatus()]);
-      toast.success(t("settings.storageSaved"));
-    } catch (err) {
-      toast.error(
-        err instanceof Error ? err.message : t("settings.saveFailed"),
-      );
-    } finally {
-      setSavingStorage(false);
-    }
-  }
-
-  async function handleClearAllS3() {
-    setClearingS3(true);
-    try {
-      const results = await Promise.all(
-        S3_STORAGE_FIELDS.filter((field) => apiKeyStatus[field.key]).map(
-          async (field) => {
-            const res = await fetch(
-              agentNativePath(
-                `/_agent-native/secrets/adhoc/${encodeURIComponent(field.key)}`,
-              ),
-              { method: "DELETE" },
-            );
-            if (!res.ok) {
-              const body = (await res.json().catch(() => null)) as {
-                error?: string;
-              } | null;
-              throw new Error(
-                body?.error ?? `Failed to clear ${field.key} (${res.status})`,
-              );
-            }
-            const body = (await res.json().catch(() => null)) as {
-              removed?: boolean;
-            } | null;
-            return { key: field.key, removed: body?.removed !== false };
-          },
-        ),
-      );
-      const failed = results.filter((r) => !r.removed).map((r) => r.key);
-      if (failed.length > 0) {
-        throw new Error(
-          `Could not remove: ${failed.join(", ")}. You may not have permission.`,
-        );
-      }
-      setS3Values({});
-      await Promise.all([refreshApiKeyStatus(), storageStatus.refetch()]);
-      toast.success(t("settings.keyCleared"));
-    } catch (err) {
-      toast.error(
-        err instanceof Error ? err.message : t("settings.saveFailed"),
-      );
-    } finally {
-      setClearingS3(false);
-    }
-  }
-
-  async function handleSaveApiKey(key: string) {
-    const value = (apiKeyValues[key] ?? "").trim();
-    if (!value) {
-      toast.error(t("settings.pasteProviderKey"));
-      return;
-    }
-
-    setSavingApiKey(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);
-      }
-      setApiKeyValues((current) => ({ ...current, [key]: "" }));
-      setApiKeyStatus((current) => ({ ...current, [key]: true }));
-      window.dispatchEvent(new CustomEvent("agent-engine:configured-changed"));
-      await refreshApiKeyStatus();
-      toast.success(t("settings.apiKeySaved"));
-    } catch (err) {
-      toast.error(
-        err instanceof Error ? err.message : t("settings.apiKeyFailed"),
-      );
-    } finally {
-      setSavingApiKey(null);
-    }
-  }
-
-  function openAiProviderSetup() {
-    setApiKeysExpanded(true);
-    window.requestAnimationFrame(() => {
-      const section = document.getElementById("ai-provider-keys");
-      section?.scrollIntoView({ behavior: "smooth", block: "start" });
-      const firstEmptyField =
-        AI_PROVIDER_FIELDS.find((field) => !apiKeyStatus[field.key]) ??
-        AI_PROVIDER_FIELDS[0];
-      window.setTimeout(() => {
-        document.getElementById(firstEmptyField.key)?.focus();
-      }, 150);
-    });
-  }
-
-  async function handleConnectSlack() {
-    const beforeCount = slackInstallations.length;
-    setConnectingSlack(true);
-    try {
-      await startSlackOAuth();
-      const refreshed = await slackStatus.refetch();
-      const afterCount = refreshed.data?.installations?.length ?? beforeCount;
-      if (afterCount > beforeCount) {
-        toast.success(t("settings.slackConnectedToast"));
-      } else {
-        toast.message(t("settings.slackCheckedToast"));
-      }
-    } catch (err) {
-      toast.error(
-        err instanceof Error ? err.message : t("settings.slackConnectFailed"),
-      );
-    } finally {
-      setConnectingSlack(false);
-    }
-  }
-
-  async function handleDisconnectSlack() {
-    const target = disconnectSlackTarget;
-    if (!target) return;
-    setDisconnectingSlack(true);
-    try {
-      await requestDisconnectSlack(target.id);
-      setDisconnectSlackTarget(null);
-      await slackStatus.refetch();
-      toast.success(t("settings.slackDisconnectedToast"));
-    } catch (err) {
-      toast.error(
-        err instanceof Error
-          ? err.message
-          : t("settings.slackDisconnectFailed"),
-      );
-    } finally {
-      setDisconnectingSlack(false);
-    }
-  }
-
-  const storageConfigured = !!storageStatus.data?.configured;
-  const activeProviderName = storageStatus.data?.activeProvider?.name ?? null;
-  const activeProviderId = storageStatus.data?.activeProvider?.id ?? null;
-  const builderConnected = Boolean(
-    builderConnect.configured ||
-    builderStatus.status?.configured ||
-    storageStatus.data?.builderConfigured ||
-    activeProviderId === "builder",
-  );
-  const builderOrgName =
-    builderConnect.orgName ?? builderStatus.status?.orgName ?? null;
-  const builderStatusLoading =
-    storageStatus.isLoading ||
-    builderStatus.loading ||
-    !builderConnect.hasFetchedStatus;
-  const s3Configured = activeProviderId === "s3";
-  const s3Collapsed = !s3Expanded;
-  const configuredApiKeyCount = AI_PROVIDER_FIELDS.filter(
-    (field) => apiKeyStatus[field.key],
-  ).length;
-  const slackInstallations = slackStatus.data?.installations ?? [];
-  const slackOauthConfigured = slackStatus.data?.oauthConfigured ?? false;
-  const slackSigningConfigured = slackStatus.data?.signingConfigured ?? false;
-  const slackConnected = slackInstallations.length > 0;
   const localizedChangelog = t("settings.changelogMarkdown");
-  const builderCreditsPaused = builderCreditStatus.data?.exhausted === true;
-  const builderCreditsUpgradeUrl =
-    builderCreditStatus.data?.upgradeUrl ?? BUILDER_CREDITS_UPGRADE_URL;
 
+  // Hashes match the row ids below, so a search hit still scrolls to the
+  // individual setting now that the one-control cards are rows in a group.
   const generalSearchEntries = useMemo<SettingsSearchEntry[]>(
     () => [
       {
@@ -826,6 +239,12 @@ export default function SettingsIndexRoute() {
         keywords: "transcript cleanup captions",
         hash: "transcript",
       },
+      {
+        id: "clips-sharing",
+        label: t("settings.sharing"),
+        keywords: "sharing visibility private public organization default",
+        hash: "sharing",
+      },
       {
         id: "clips-notifications",
         label: t("settings.notifications"),
@@ -855,646 +274,25 @@ export default function SettingsIndexRoute() {
                 {t("settings.intro")}
               </p>
 
-              <Card id="language" className="scroll-mt-16">
-                <CardHeader>
-                  <CardTitle className="text-base">
-                    {t("settings.languageTitle")}
-                  </CardTitle>
-                  <CardDescription>
-                    {t("settings.languageDescription")}
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="max-w-xs space-y-1.5">
-                  <Label>{t("settings.languageLabel")}</Label>
-                  <LanguagePicker label={t("settings.languageLabel")} />
-                </CardContent>
-              </Card>
-
-              {orgs.length > 0 ? (
-                <Card id="upload-workspace" className="scroll-mt-16">
-                  <CardHeader>
-                    <CardTitle className="flex items-center gap-2 text-base">
-                      <IconUsersGroup className="size-4 text-primary" />
-                      {t("settings.uploadWorkspaceTitle")}
-                    </CardTitle>
-                    <CardDescription>
-                      {t("settings.uploadWorkspaceDescription")}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="max-w-md space-y-1.5">
-                    <Label htmlFor="upload-workspace-select">
-                      {t("settings.uploadWorkspaceLabel")}
-                    </Label>
-                    <Select
-                      value={org?.orgId ?? undefined}
-                      onValueChange={handleUploadWorkspaceChange}
-                      disabled={switchOrg.isPending || orgs.length < 2}
-                    >
-                      <SelectTrigger id="upload-workspace-select">
-                        <SelectValue
-                          placeholder={t("settings.uploadWorkspacePlaceholder")}
-                        />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {orgs.map((workspace) => (
-                          <SelectItem
-                            key={workspace.orgId}
-                            value={workspace.orgId}
-                          >
-                            {workspace.orgName}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <p className="text-xs text-muted-foreground">
-                      {switchOrg.isPending
-                        ? t("settings.uploadWorkspaceSaving")
-                        : t("settings.uploadWorkspaceHint")}
-                    </p>
-                  </CardContent>
-                </Card>
-              ) : null}
-
-              <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",
-                      builderConnected
-                        ? "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">
-                        {builderConnected ? (
-                          <IconCheck className="h-4 w-4 text-primary" />
-                        ) : (
-                          <IconKey className="h-4 w-4 text-muted-foreground" />
-                        )}
-                        {builderStatusLoading
-                          ? t("settings.checkingBuilder")
-                          : builderConnected
-                            ? t("settings.builderConnected")
-                            : t("settings.connectBuilder")}
-                      </div>
-                      <p className="mt-0.5 text-xs text-muted-foreground">
-                        {builderConnected
-                          ? builderOrgName
-                            ? t("settings.builderConnectedFor", {
-                                orgName: builderOrgName,
-                              })
-                            : t("settings.builderConnectedGeneric")
-                          : t("settings.builderIncludes")}
-                      </p>
+              <SettingsGroup
+                id="preferences"
+                title={t("settings.preferencesTitle")}
+              >
+                <SettingsRow
+                  id="language"
+                  label={t("settings.languageLabel")}
+                  description={t("settings.languageDescription")}
+                  control={
+                    <div className="w-56">
+                      <LanguagePicker label={t("settings.languageLabel")} />
                     </div>
-                    {builderConnected ? (
-                      <Badge variant="secondary" className="shrink-0">
-                        {t("common.connected")}
-                      </Badge>
-                    ) : (
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        className="shrink-0"
-                        onClick={() =>
-                          builderConnect.start({
-                            trackingSource: "clips_settings_video_storage",
-                            trackingFlow: "video_storage",
-                          })
-                        }
-                        disabled={
-                          builderConnect.connecting || builderStatusLoading
-                        }
-                      >
-                        {builderConnect.connecting ? (
-                          <IconLoader2 className="h-4 w-4 animate-spin" />
-                        ) : (
-                          <IconExternalLink className="h-4 w-4" />
-                        )}
-                        {t("settings.connectBuilder")}
-                      </Button>
-                    )}
-                  </div>
-
-                  <Collapsible
-                    open={!s3Collapsed}
-                    onOpenChange={(open) => setS3Expanded(open)}
-                  >
-                    <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>
-                            ) : null}
-                          </div>
-                          <p className="mt-0.5 text-xs text-muted-foreground">
-                            {builderConnected
-                              ? t("settings.s3BuilderConnectedDescription")
-                              : storageConfigured && activeProviderName
-                                ? t("settings.s3CurrentProvider", {
-                                    providerName: activeProviderName,
-                                  })
-                                : t("settings.s3OwnBucketDescription")}
-                          </p>
-                        </div>
-                        <CollapsibleTrigger asChild>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="sm"
-                            className="shrink-0"
-                          >
-                            {s3Collapsed
-                              ? t("settings.configureS3")
-                              : t("settings.hideS3")}
-                            <IconChevronDown
-                              className={cn(
-                                "h-4 w-4 transition-transform",
-                                !s3Collapsed && "rotate-180",
-                              )}
-                            />
-                          </Button>
-                        </CollapsibleTrigger>
-                      </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(
-                                apiKeyStatus[field.key],
-                              );
-                              const last4 = secretLast4[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={s3Values[field.key] ?? ""}
-                                    onChange={(event) => {
-                                      setS3Values((current) => ({
-                                        ...current,
-                                        [field.key]: event.target.value,
-                                      }));
-                                      if (s3Errors[field.key]) {
-                                        setS3Errors((current) => {
-                                          const next = { ...current };
-                                          delete next[field.key];
-                                          return next;
-                                        });
-                                      }
-                                    }}
-                                    placeholder={
-                                      configured
-                                        ? t("settings.replaceKey")
-                                        : field.placeholder
-                                    }
-                                    autoComplete="off"
-                                    disabled={savingStorage}
-                                    className={
-                                      s3Errors[field.key]
-                                        ? "border-destructive"
-                                        : undefined
-                                    }
-                                  />
-                                  {s3Errors[field.key] ? (
-                                    <p className="text-[11px] text-destructive">
-                                      {s3Errors[field.key]}
-                                    </p>
-                                  ) : null}
-                                </div>
-                              );
-                            })}
-                          </div>
-
-                          <div className="flex items-center justify-end gap-2">
-                            {S3_STORAGE_FIELDS.some(
-                              (field) => apiKeyStatus[field.key],
-                            ) ? (
-                              <Button
-                                type="button"
-                                variant="ghost"
-                                size="sm"
-                                onClick={handleClearAllS3}
-                                disabled={clearingS3 || savingStorage}
-                                className="text-muted-foreground hover:text-destructive"
-                              >
-                                {clearingS3 ? (
-                                  <IconLoader2 className="h-4 w-4 animate-spin" />
-                                ) : (
-                                  <IconTrash className="h-4 w-4" />
-                                )}
-                                {t("settings.clearAllS3")}
-                              </Button>
-                            ) : null}
-                            <Button
-                              onClick={handleSaveS3Storage}
-                              disabled={
-                                savingStorage || storageStatus.isLoading
-                              }
-                            >
-                              {savingStorage && (
-                                <IconLoader2 className="h-4 w-4 animate-spin" />
-                              )}
-                              {t("settings.saveStorage")}
-                            </Button>
-                          </div>
-                        </div>
-                      </CollapsibleContent>
-                    </div>
-                  </Collapsible>
-                </CardContent>
-              </Card>
-
-              <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")
-                          : slackConnected
-                            ? t("settings.slackConnected", {
-                                count: slackInstallations.length,
-                              })
-                            : slackOauthConfigured
-                              ? t("common.notConnected")
-                              : t("settings.slackOauthNeeded")}
-                      </div>
-                      <p className="mt-0.5 text-xs text-muted-foreground">
-                        {t("settings.slackPreviewDescription")}
-                      </p>
-                    </div>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      className="shrink-0"
-                      onClick={handleConnectSlack}
-                      disabled={
-                        connectingSlack ||
-                        slackStatus.isLoading ||
-                        !slackOauthConfigured
-                      }
-                    >
-                      {connectingSlack ? (
-                        <IconLoader2 className="h-4 w-4 animate-spin" />
-                      ) : (
-                        <IconExternalLink className="h-4 w-4" />
-                      )}
-                      {t("settings.connectSlack")}
-                    </Button>
-                  </div>
-
-                  {!slackOauthConfigured ? (
-                    <div className="rounded-md border border-border p-3 text-xs text-muted-foreground">
-                      {t("settings.slackClientMissing")}
-                    </div>
-                  ) : null}
-
-                  {!slackSigningConfigured ? (
-                    <div className="rounded-md border border-border p-3 text-xs text-muted-foreground">
-                      {t("settings.slackSigningMissing")}
-                    </div>
-                  ) : null}
-
-                  {slackInstallations.length > 0 ? (
-                    <div className="space-y-2">
-                      {slackInstallations.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={() =>
-                              setDisconnectSlackTarget(installation)
-                            }
-                          >
-                            <IconTrash className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      ))}
-                    </div>
-                  ) : null}
-                </CardContent>
-              </Card>
-
-              <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",
-                      builderConnected
-                        ? "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">
-                        {builderConnected ? (
-                          <IconCheck className="h-4 w-4 text-primary" />
-                        ) : (
-                          <IconKey className="h-4 w-4 text-muted-foreground" />
-                        )}
-                        {builderStatusLoading
-                          ? t("settings.checkingBuilder")
-                          : builderConnected
-                            ? t("settings.builderAiAvailable")
-                            : t("settings.builderEasySetup")}
-                      </div>
-                      <p className="mt-0.5 text-xs text-muted-foreground">
-                        {builderConnected
-                          ? t("settings.apiSetupDescription")
-                          : t("settings.builderAiDescription")}
-                      </p>
-                    </div>
-                    {!builderConnected ? (
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        className="shrink-0"
-                        onClick={() =>
-                          builderConnect.start({
-                            trackingSource: "clips_settings_ai_setup",
-                            trackingFlow: "connect_llm",
-                          })
-                        }
-                        disabled={
-                          builderConnect.connecting || builderStatusLoading
-                        }
-                      >
-                        {builderConnect.connecting ? (
-                          <IconLoader2 className="h-4 w-4 animate-spin" />
-                        ) : (
-                          <IconExternalLink className="h-4 w-4" />
-                        )}
-                        {t("settings.connectBuilder")}
-                      </Button>
-                    ) : null}
-                  </div>
-
-                  {builderCreditsPaused ? (
-                    <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-white/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={builderCreditsUpgradeUrl}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                            >
-                              <IconExternalLink className="h-4 w-4" />
-                              {t("builderCredits.upgrade")}
-                            </a>
-                          </Button>
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            className="h-8 border-amber-300/80 bg-white/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={openAiProviderSetup}
-                          >
-                            {t("builderCredits.openAiSetup")}
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  ) : null}
-
-                  <Collapsible
-                    open={apiKeysExpanded}
-                    onOpenChange={setApiKeysExpanded}
-                  >
-                    <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")}
-                              {configuredApiKeyCount > 0 ? (
-                                <Badge
-                                  variant="secondary"
-                                  className="text-[10px]"
-                                >
-                                  {t("settings.providerKeysSet", {
-                                    count: configuredApiKeyCount,
-                                  })}
-                                </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",
-                              apiKeysExpanded && "rotate-180",
-                            )}
-                          />
-                        </button>
-                      </CollapsibleTrigger>
-                      <CollapsibleContent>
-                        <div className="space-y-3 border-t border-border px-3 py-4">
-                          {apiKeyStatusLoading ? (
-                            <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(
-                                apiKeyStatus[field.key],
-                              );
-                              const savingThisKey = savingApiKey === 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={apiKeyValues[field.key] ?? ""}
-                                      onChange={(event) =>
-                                        setApiKeyValues((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 ||
-                                        !(apiKeyValues[field.key] ?? "").trim()
-                                      }
-                                    >
-                                      {savingThisKey ? (
-                                        <IconLoader2 className="h-4 w-4 animate-spin" />
-                                      ) : (
-                                        t("common.save")
-                                      )}
-                                    </Button>
-                                  </div>
-                                </div>
-                              );
-                            })}
-                          </div>
-                        </div>
-                      </CollapsibleContent>
-                    </div>
-                  </Collapsible>
-                </CardContent>
-              </Card>
-
-              <Card id="playback" className="scroll-mt-16">
-                <CardHeader>
-                  <CardTitle className="text-base">
-                    {t("settings.playback")}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-1.5">
-                    <Label htmlFor="speed">
-                      {t("settings.defaultPlaybackSpeed")}
-                    </Label>
+                  }
+                />
+                <SettingsRow
+                  id="playback"
+                  label={t("settings.defaultPlaybackSpeed")}
+                  description={t("settings.playbackDescription")}
+                  control={
                     <Select
                       value={defaultSpeed}
                       onValueChange={setDefaultSpeed}
@@ -1511,67 +309,121 @@ export default function SettingsIndexRoute() {
                         ))}
                       </SelectContent>
                     </Select>
-                    <p className="text-xs text-muted-foreground">
-                      {t("settings.playbackDescription")}
-                    </p>
-                  </div>
-                </CardContent>
-              </Card>
-
-              <Card id="transcript" className="scroll-mt-16">
-                <CardHeader>
-                  <CardTitle className="text-base">
-                    {t("settings.transcript")}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex items-center justify-between gap-4">
-                    <div>
-                      <Label
-                        htmlFor="transcript-cleanup"
-                        className="cursor-pointer"
-                      >
-                        {t("settings.transcriptCleanup")}
-                      </Label>
-                      <p className="text-xs text-muted-foreground mt-0.5">
-                        {t("settings.transcriptCleanupDescription")}
-                      </p>
-                    </div>
+                  }
+                />
+                <SettingsRow
+                  id="sharing"
+                  label={t("settings.defaultVisibility")}
+                  description={t("settings.defaultVisibilityDescription")}
+                  control={
+                    <Select
+                      value={defaultVisibility}
+                      onValueChange={(value) =>
+                        setDefaultVisibility(value as ClipsDefaultVisibility)
+                      }
+                      disabled={loading}
+                    >
+                      <SelectTrigger id="default-visibility" className="w-56">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="private">
+                          {t("settings.visibilityPrivate")}
+                        </SelectItem>
+                        <SelectItem value="org">
+                          {t("settings.visibilityOrg")}
+                        </SelectItem>
+                        <SelectItem value="public">
+                          {t("settings.visibilityPublic")}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  }
+                />
+                <SettingsRow
+                  id="transcript"
+                  label={t("settings.transcriptCleanup")}
+                  description={t("settings.transcriptCleanupDescription")}
+                  control={
                     <Switch
                       id="transcript-cleanup"
+                      aria-label={t("settings.transcriptCleanup")}
                       checked={transcriptCleanupEnabled}
                       onCheckedChange={setTranscriptCleanupEnabled}
                       disabled={loading}
                     />
-                  </div>
-                </CardContent>
-              </Card>
-
-              <Card id="notifications" className="scroll-mt-16">
-                <CardHeader>
-                  <CardTitle className="text-base">
-                    {t("settings.notifications")}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <Label htmlFor="email-notif" className="cursor-pointer">
-                        {t("settings.emailNotifications")}
-                      </Label>
-                      <p className="text-xs text-muted-foreground mt-0.5">
-                        {t("settings.emailNotificationsDescription")}
-                      </p>
-                    </div>
+                  }
+                />
+                <SettingsRow
+                  id="notifications"
+                  label={t("settings.emailNotifications")}
+                  description={t("settings.emailNotificationsDescription")}
+                  control={
                     <Switch
                       id="email-notif"
+                      aria-label={t("settings.emailNotifications")}
                       checked={emailNotifications}
                       onCheckedChange={setEmailNotifications}
                       disabled={loading}
                     />
-                  </div>
-                </CardContent>
-              </Card>
+                  }
+                />
+              </SettingsGroup>
+
+              {orgs.length > 0 ? (
+                <SettingsGroup
+                  title={t("settings.uploadWorkspaceTitle")}
+                  description={t("settings.uploadWorkspaceDescription")}
+                >
+                  <SettingsRow
+                    id="upload-workspace"
+                    label={t("settings.uploadWorkspaceLabel")}
+                    description={
+                      switchOrg.isPending
+                        ? t("settings.uploadWorkspaceSaving")
+                        : t("settings.uploadWorkspaceHint")
+                    }
+                    control={
+                      <Select
+                        value={org?.orgId ?? undefined}
+                        onValueChange={handleUploadWorkspaceChange}
+                        disabled={switchOrg.isPending || orgs.length < 2}
+                      >
+                        <SelectTrigger
+                          id="upload-workspace-select"
+                          className="w-64"
+                        >
+                          <SelectValue
+                            placeholder={t(
+                              "settings.uploadWorkspacePlaceholder",
+                            )}
+                          />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {orgs.map((workspace) => (
+                            <SelectItem
+                              key={workspace.orgId}
+                              value={workspace.orgId}
+                            >
+                              {workspace.orgName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    }
+                  />
+                </SettingsGroup>
+              ) : null}
+
+              <VideoStorageSection
+                builder={builder}
+                secrets={secrets}
+                storageStatus={storageStatus}
+              />
+
+              <AiSetupSection builder={builder} secrets={secrets} />
+
+              <SlackSection />
 
               <div className="flex justify-end">
                 <Button
@@ -1597,44 +449,6 @@ export default function SettingsIndexRoute() {
           </div>
         }
       />
-      <AlertDialog
-        open={!!disconnectSlackTarget}
-        onOpenChange={(open) => {
-          if (!open && !disconnectingSlack) setDisconnectSlackTarget(null);
-        }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {t("settings.disconnectSlackTitle")}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {t("settings.disconnectSlackDescription", {
-                team:
-                  disconnectSlackTarget?.teamName ||
-                  disconnectSlackTarget?.teamId ||
-                  t("settings.thisWorkspace"),
-              })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={disconnectingSlack}>
-              {t("common.cancel")}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={(event) => {
-                event.preventDefault();
-                void handleDisconnectSlack();
-              }}
-              disabled={disconnectingSlack}
-            >
-              {disconnectingSlack
-                ? t("common.disconnecting")
-                : t("common.disconnect")}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
     </>
   );
 }