diff --git a/src/components/settings/ai/ai-consent-card.tsx b/src/components/settings/ai/ai-consent-card.tsx
index 0741df1cc..2dab317fc 100644
--- a/src/components/settings/ai/ai-consent-card.tsx
+++ b/src/components/settings/ai/ai-consent-card.tsx
@@ -34,6 +34,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Loader2, ShieldCheck, ShieldOff } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { SettingsCardActions } from "@/components/settings/_card-actions";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { Skeleton } from "@/components/ui/skeleton";
 import { QueryErrorRow } from "@/components/ui/query-error-row";
 import { apiFetchRaw } from "@/lib/api/api-fetch";
@@ -124,24 +127,29 @@ export function AiConsentCard({
   // below it once the receipt arrived.
   if (isLoading) {
     return (
-      <section className="space-y-3" data-slot="ai-consent">
-        <div className="space-y-1">
-          <Skeleton className="h-5 w-40" />
-          <Skeleton className="h-4 w-56" />
-        </div>
-        <Skeleton className="h-8 w-32" />
-      </section>
+      <SettingsCard as="section" data-slot="ai-consent">
+        <SettingsCardHeader
+          icon={ShieldCheck}
+          title={t("settings.ai.consent.title")}
+          description={<Skeleton className="h-4 w-56" />}
+        />
+        <Skeleton className="ml-auto h-8 w-32" />
+      </SettingsCard>
     );
   }
 
   if (isError) {
     return (
-      <section className="space-y-3" data-slot="ai-consent">
+      <SettingsCard as="section" data-slot="ai-consent">
+        <SettingsCardHeader
+          icon={ShieldCheck}
+          title={t("settings.ai.consent.title")}
+        />
         <QueryErrorRow
           slot="ai-consent-load-error"
           onRetry={() => void refetch()}
         />
-      </section>
+      </SettingsCard>
     );
   }
 
@@ -150,100 +158,106 @@ export function AiConsentCard({
   const activeReceipt = data && data.revokedAt === null ? data : null;
 
   return (
-    <section className="space-y-3" data-slot="ai-consent">
-      <div className="space-y-1">
-        <p className="flex items-center gap-2 text-sm font-medium">
-          {activeReceipt ? (
-            <ShieldCheck className="size-4" aria-hidden />
-          ) : (
-            <ShieldOff className="text-muted-foreground size-4" aria-hidden />
-          )}
-          {t("settings.ai.consent.title")}
-        </p>
-        <p className="text-muted-foreground text-xs">
-          {activeReceipt
-            ? t("settings.ai.consent.activeSince", {
-                date: formatDateTime(activeReceipt.signedAt),
-              })
-            : t("settings.ai.consent.withdrawn")}
-        </p>
-      </div>
+    <>
+      <SettingsCard as="section" data-slot="ai-consent">
+        <SettingsCardHeader
+          icon={activeReceipt ? ShieldCheck : ShieldOff}
+          title={t("settings.ai.consent.title")}
+          description={
+            activeReceipt
+              ? t("settings.ai.consent.activeSince", {
+                  date: formatDateTime(activeReceipt.signedAt),
+                })
+              : t("settings.ai.consent.withdrawn")
+          }
+        />
 
-      {activeReceipt ? (
-        confirming ? (
-          <div className="flex flex-wrap items-center gap-2">
-            <p className="text-muted-foreground w-full text-xs">
-              {t("settings.ai.consent.confirmBody")}
-            </p>
-            <Button
-              type="button"
-              variant="destructive"
-              size="sm"
-              data-slot="ai-consent-withdraw-confirm"
-              onClick={() => revoke.mutate()}
-              disabled={revoke.isPending}
-            >
-              {revoke.isPending ? (
-                <Loader2 className="size-4 animate-spin motion-reduce:animate-none" />
-              ) : null}
-              {t("settings.ai.consent.confirmWithdraw")}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() => setConfirming(false)}
-              disabled={revoke.isPending}
-            >
-              {t("common.cancel")}
-            </Button>
-          </div>
-        ) : (
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            data-slot="ai-consent-withdraw"
-            onClick={() => setConfirming(true)}
-          >
-            {t("settings.ai.consent.withdraw")}
-          </Button>
-        )
-      ) : (
-        <div className="space-y-2">
+        {activeReceipt && confirming ? (
+          <p className="text-muted-foreground text-xs">
+            {t("settings.ai.consent.confirmBody")}
+          </p>
+        ) : null}
+        {!activeReceipt ? (
           <p className="text-muted-foreground text-xs">
             {t("settings.ai.consent.regrantHint")}
           </p>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            data-slot="ai-consent-grant"
-            onClick={() => grant.mutate()}
-            disabled={grant.isPending}
-          >
-            {grant.isPending ? (
-              <Loader2 className="size-4 animate-spin motion-reduce:animate-none" />
-            ) : null}
-            {t("settings.ai.consent.grant")}
-          </Button>
-        </div>
-      )}
+        ) : null}
 
-      {revoke.isError ? (
-        <p className="text-destructive text-xs" role="alert">
-          {t("settings.ai.consent.error")}
-        </p>
-      ) : null}
+        {revoke.isError ? (
+          <p className="text-destructive text-xs" role="alert">
+            {t("settings.ai.consent.error")}
+          </p>
+        ) : null}
 
-      {grant.isError ? (
-        <p className="text-destructive text-xs" role="alert">
-          {t("settings.ai.consent.grantError")}
-        </p>
-      ) : null}
+        {grant.isError ? (
+          <p className="text-destructive text-xs" role="alert">
+            {t("settings.ai.consent.grantError")}
+          </p>
+        ) : null}
+
+        {/* One action row, last in the card; while confirming, Cancel sits
+            before the destructive confirm (design standards §12). */}
+        <SettingsCardActions>
+          {activeReceipt ? (
+            confirming ? (
+              <>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="min-h-11 sm:min-h-9"
+                  onClick={() => setConfirming(false)}
+                  disabled={revoke.isPending}
+                >
+                  {t("common.cancel")}
+                </Button>
+                <Button
+                  type="button"
+                  variant="destructive"
+                  size="sm"
+                  className="min-h-11 sm:min-h-9"
+                  data-slot="ai-consent-withdraw-confirm"
+                  onClick={() => revoke.mutate()}
+                  disabled={revoke.isPending}
+                >
+                  {revoke.isPending ? (
+                    <Loader2 className="size-4 animate-spin motion-reduce:animate-none" />
+                  ) : null}
+                  {t("settings.ai.consent.confirmWithdraw")}
+                </Button>
+              </>
+            ) : (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="min-h-11 sm:min-h-9"
+                data-slot="ai-consent-withdraw"
+                onClick={() => setConfirming(true)}
+              >
+                {t("settings.ai.consent.withdraw")}
+              </Button>
+            )
+          ) : (
+            <Button
+              type="button"
+              size="sm"
+              className="min-h-11 sm:min-h-9"
+              data-slot="ai-consent-grant"
+              onClick={() => grant.mutate()}
+              disabled={grant.isPending}
+            >
+              {grant.isPending ? (
+                <Loader2 className="size-4 animate-spin motion-reduce:animate-none" />
+              ) : null}
+              {t("settings.ai.consent.grant")}
+            </Button>
+          )}
+        </SettingsCardActions>
+      </SettingsCard>
 
       <DocumentReadingConsentRow isAuthenticated={isAuthenticated} />
-    </section>
+    </>
   );
 }
 
@@ -298,62 +312,65 @@ function DocumentReadingConsentRow({
   if (!active) return null;
 
   return (
-    <div
-      data-slot="ai-consent-document-reading"
-      className="border-border space-y-2 border-t pt-3"
-    >
-      <p className="text-sm font-medium">
-        {t("settings.ai.consent.documentReading.title")}
-      </p>
-      <p className="text-muted-foreground text-xs">
-        {t("settings.ai.consent.documentReading.activeSince", {
+    <SettingsCard as="section" data-slot="ai-consent-document-reading">
+      <SettingsCardHeader
+        icon={ShieldCheck}
+        title={t("settings.ai.consent.documentReading.title")}
+        description={t("settings.ai.consent.documentReading.activeSince", {
           date: formatDateTime(active.signedAt),
         })}
-      </p>
+      />
       {confirming ? (
-        <div className="flex flex-wrap items-center gap-2">
-          <p className="text-muted-foreground w-full text-xs">
-            {t("settings.ai.consent.documentReading.confirmBody")}
-          </p>
-          <Button
-            type="button"
-            variant="destructive"
-            size="sm"
-            data-slot="ai-consent-document-reading-withdraw-confirm"
-            onClick={() => revoke.mutate()}
-            disabled={revoke.isPending}
-          >
-            {revoke.isPending ? (
-              <Loader2 className="size-4 animate-spin motion-reduce:animate-none" />
-            ) : null}
-            {t("settings.ai.consent.confirmWithdraw")}
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => setConfirming(false)}
-            disabled={revoke.isPending}
-          >
-            {t("common.cancel")}
-          </Button>
-        </div>
-      ) : (
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          data-slot="ai-consent-document-reading-withdraw"
-          onClick={() => setConfirming(true)}
-        >
-          {t("settings.ai.consent.withdraw")}
-        </Button>
-      )}
+        <p className="text-muted-foreground text-xs">
+          {t("settings.ai.consent.documentReading.confirmBody")}
+        </p>
+      ) : null}
       {revoke.isError ? (
         <p className="text-destructive text-xs" role="alert">
           {t("settings.ai.consent.error")}
         </p>
       ) : null}
-    </div>
+      <SettingsCardActions>
+        {confirming ? (
+          <>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="min-h-11 sm:min-h-9"
+              onClick={() => setConfirming(false)}
+              disabled={revoke.isPending}
+            >
+              {t("common.cancel")}
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              size="sm"
+              className="min-h-11 sm:min-h-9"
+              data-slot="ai-consent-document-reading-withdraw-confirm"
+              onClick={() => revoke.mutate()}
+              disabled={revoke.isPending}
+            >
+              {revoke.isPending ? (
+                <Loader2 className="size-4 animate-spin motion-reduce:animate-none" />
+              ) : null}
+              {t("settings.ai.consent.confirmWithdraw")}
+            </Button>
+          </>
+        ) : (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="min-h-11 sm:min-h-9"
+            data-slot="ai-consent-document-reading-withdraw"
+            onClick={() => setConfirming(true)}
+          >
+            {t("settings.ai.consent.withdraw")}
+          </Button>
+        )}
+      </SettingsCardActions>
+    </SettingsCard>
   );
 }
diff --git a/src/components/settings/ai/ai-insights-card.tsx b/src/components/settings/ai/ai-insights-card.tsx
index 9daea5ea4..f032d5f27 100644
--- a/src/components/settings/ai/ai-insights-card.tsx
+++ b/src/components/settings/ai/ai-insights-card.tsx
@@ -19,6 +19,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Sparkles } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
 import { MedicalDisclaimer } from "@/components/common/medical-disclaimer";
 import { Label } from "@/components/ui/label";
 import { NativeSelect } from "@/components/ui/native-select";
@@ -26,7 +27,6 @@ import { QueryErrorCard } from "@/components/ui/query-error-card";
 import { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { apiFetchRaw } from "@/lib/api/api-fetch";
-import { formatDateTime } from "@/lib/format";
 import { useTranslations } from "@/lib/i18n/context";
 import {
   aiInputDependentKeys,
@@ -72,6 +72,7 @@ export function AiInsightsCard({
   // card paints an honest error instead of a misleading form.
   const {
     data: insightsSettings,
+    isPending: settingsPending,
     isError: settingsError,
     refetch: refetchSettings,
   } = useQuery({
@@ -87,6 +88,7 @@ export function AiInsightsCard({
 
   const {
     data: userProvider,
+    isPending: providerPending,
     isError: providerError,
     refetch: refetchProvider,
   } = useQuery({
@@ -102,6 +104,7 @@ export function AiInsightsCard({
 
   const {
     data: chainData,
+    isPending: chainPending,
     isError: chainError,
     refetch: refetchChain,
   } = useQuery({
@@ -116,6 +119,12 @@ export function AiInsightsCard({
   });
 
   const hasReadError = settingsError || providerError || chainError;
+  // The cards below the provider card size themselves from these reads (the
+  // chain rows, the provider form). Painting them before the reads land
+  // moved every card under the cursor once they did, so the page holds one
+  // placeholder in the provider card until all three have settled.
+  const readsPending =
+    isAuthenticated && (settingsPending || providerPending || chainPending);
   function retryReads() {
     void refetchSettings();
     void refetchProvider();
@@ -177,94 +186,95 @@ export function AiInsightsCard({
     router.replace(`${pathname}?${params.toString()}`);
   }
 
+  // v1.42 — one card per concern. The page used to be a single "AI provider"
+  // card (repeating the page title) holding seven grey panels, three of them
+  // with their own primary Save, each left-aligned mid-card. Every concern is
+  // its own Settings card now, each with one action row at its foot
+  // (design standards §12/§13).
   return (
-    <SettingsCard>
-      {/* The card used to render an icon-only header row (Sparkles +
-          status badges, no title), which left the tile unanchored next
-          to its titled siblings. It now follows the shared
-          `SettingsCardHeader` contract: icon column, title + description
-          in the content column, status badges top-right — and the body
-          starts on the card edge like every other Settings card. */}
-      <SettingsCardHeader
-        icon={Sparkles}
-        title={t("settings.ai.providerCardTitle")}
-        description={t("settings.kiInsightsDescription")}
-        status={
-          <ProviderStatusBadges
-            settings={insightsSettings}
-            activeProvider={chainData?.activeProvider ?? null}
-          />
-        }
-      />
-
-      <div className="space-y-4">
+    <div className="space-y-6">
+      <SettingsCard data-slot="ai-provider-card">
+        <SettingsCardHeader
+          icon={Sparkles}
+          title={t("settings.ai.activeProviderHeading")}
+          description={t("settings.ai.providerCardDescription")}
+          status={
+            <ProviderStatusBadges
+              settings={insightsSettings}
+              activeProvider={chainData?.activeProvider ?? null}
+            />
+          }
+        />
         {hasReadError ? (
           <QueryErrorCard onRetry={retryReads} />
+        ) : readsPending ? (
+          <Skeleton className="h-40 w-full rounded-lg" />
         ) : (
           <>
             <ActiveProviderSelect
               value={selectedProvider}
               onChange={pickProvider}
             />
-
             <ProviderConfigCard
               provider={selectedProvider}
               insightsSettings={insightsSettings}
               userProvider={userProvider}
             />
-
-            <FallbackChainCard
-              chain={chainData?.configuredChain ?? []}
-              selected={selectedProvider}
-              onSelect={pickProvider}
-            />
-
-            {/* v1.22 (#89) — per-user response timeout (mainly for slow
-            local/self-hosted backends). */}
-            <ResponseTimeoutCard userProvider={userProvider} />
-
-            {/* Read uploaded vault documents automatically with AI (opt-in). */}
-            <AutoReadCard />
-
-            {/* Use the operator's shared central Codex connection (opt-in; only
-            renders when the operator has connected it). */}
-            <CentralCodexSwitch settings={insightsSettings} />
-
-            {/* The standing consent and the one control that withdraws it. It
-            sits last because it governs everything above rather than
-            configuring any single provider. */}
-            <AiConsentCard isAuthenticated={isAuthenticated} />
-
-            <RuntimeActionsRow
-              provider={selectedProvider}
-              userProvider={userProvider}
-              canRegenerate={
-                insightsSettings?.codexStatus === "connected" ||
-                insightsSettings?.hasAdminKey ||
-                Boolean(userProvider?.provider)
-              }
-              privacyMode={insightsSettings?.privacyMode ?? "aggregated"}
-              lastInsightAt={insightsSettings?.lastInsightAt ?? null}
-              onRegenerated={() =>
-                queryClient.invalidateQueries({
-                  queryKey: queryKeys.insightsRoot(),
-                })
-              }
-              onPrivacyChanged={() =>
-                queryClient.invalidateQueries({
-                  queryKey: queryKeys.insightsRoot(),
-                })
-              }
-            />
-
-            {/* v1.25 — the data-posture statement lives where the provider key is
-            configured: self-hosted, data stays on this instance, BYOK / local
-            model, no third-party analytics. One calm line, not a banner. */}
-            <MedicalDisclaimer variant="dataPosture" />
           </>
         )}
-      </div>
-    </SettingsCard>
+      </SettingsCard>
+
+      {hasReadError || readsPending ? null : (
+        <>
+          <FallbackChainCard
+            chain={chainData?.configuredChain ?? []}
+            selected={selectedProvider}
+            onSelect={pickProvider}
+          />
+
+          {/* v1.22 (#89) — per-user response timeout (mainly for slow
+              local/self-hosted backends). */}
+          <ResponseTimeoutCard userProvider={userProvider} />
+
+          {/* Read uploaded vault documents automatically with AI (opt-in). */}
+          <AutoReadCard />
+
+          {/* Use the operator's shared central Codex connection (opt-in; only
+              renders when the operator has connected it). */}
+          <CentralCodexSwitch settings={insightsSettings} />
+
+          {/* The standing consent and the one control that withdraws it. It
+              sits after the provider cards because it governs all of them. */}
+          <AiConsentCard isAuthenticated={isAuthenticated} />
+
+          <RuntimeActionsRow
+            provider={selectedProvider}
+            userProvider={userProvider}
+            canRegenerate={
+              insightsSettings?.codexStatus === "connected" ||
+              insightsSettings?.hasAdminKey ||
+              Boolean(userProvider?.provider)
+            }
+            privacyMode={insightsSettings?.privacyMode ?? "aggregated"}
+            lastInsightAt={insightsSettings?.lastInsightAt ?? null}
+            onRegenerated={() =>
+              queryClient.invalidateQueries({
+                queryKey: queryKeys.insightsRoot(),
+              })
+            }
+            onPrivacyChanged={() =>
+              queryClient.invalidateQueries({
+                queryKey: queryKeys.insightsRoot(),
+              })
+            }
+            // v1.25 — the data-posture statement lives where the provider
+            // key is configured: self-hosted, data stays on this instance,
+            // BYOK / local model, no third-party analytics.
+            footnote={<MedicalDisclaimer variant="dataPosture" />}
+          />
+        </>
+      )}
+    </div>
   );
 }
 
@@ -295,12 +305,6 @@ function ProviderStatusBadges({
           {t("settings.ai.connectionExpiredBadge")}
         </Badge>
       )}
-      {settings?.lastInsightAt && (
-        <Badge variant="outline" className="text-xs">
-          {t("settings.lastGeneratedAt")}:{" "}
-          {formatDateTime(settings.lastInsightAt)}
-        </Badge>
-      )}
     </div>
   );
 }
@@ -324,13 +328,7 @@ function ActiveProviderSelect({
 }) {
   const { t } = useTranslations();
   return (
-    <div className="bg-muted/50 rounded-lg p-4">
-      <p className="text-sm font-medium">
-        {t("settings.ai.activeProviderHeading")}
-      </p>
-      <p className="text-muted-foreground mb-3 text-xs">
-        {t("settings.ai.activeProviderBody")}
-      </p>
+    <div className="space-y-1.5">
       <Label htmlFor="ai-active-provider-select">
         {t("settings.ai.activeProviderLabel")}
       </Label>
@@ -342,7 +340,7 @@ function ActiveProviderSelect({
           const next = e.target.value;
           if (isProviderType(next)) onChange(next);
         }}
-        className="mt-1 sm:max-w-md"
+        className="sm:max-w-md"
       >
         {PROVIDER_TYPES.map((p) => (
           <option key={p} value={p}>
@@ -371,12 +369,8 @@ function ProviderConfigCard({
   insightsSettings: InsightsSettings | null | undefined;
   userProvider: UserAIProvider | null | undefined;
 }) {
-  const { t } = useTranslations();
   return (
-    <div className="bg-muted/50 space-y-4 rounded-lg p-4">
-      <p className="text-sm font-medium">
-        {t("settings.ai.providerConfigTitle")}
-      </p>
+    <div className="space-y-4" data-slot="ai-provider-config">
       {provider === "codex" && (
         <CodexProviderForm settings={insightsSettings} />
       )}
diff --git a/src/components/settings/ai/anthropic-provider-form.tsx b/src/components/settings/ai/anthropic-provider-form.tsx
index 122635e67..33ded234f 100644
--- a/src/components/settings/ai/anthropic-provider-form.tsx
+++ b/src/components/settings/ai/anthropic-provider-form.tsx
@@ -9,6 +9,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Loader2, Save } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { SettingsCardActions } from "@/components/settings/_card-actions";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { NativeSelect } from "@/components/ui/native-select";
@@ -161,7 +162,13 @@ export function AnthropicProviderForm({
         </div>
       )}
 
-      <div>
+      {msg && (
+        <p className={`text-xs ${ok ? "text-success" : "text-destructive"}`}>
+          {msg}
+        </p>
+      )}
+
+      <SettingsCardActions>
         <Button
           type="submit"
           size="sm"
@@ -176,13 +183,7 @@ export function AnthropicProviderForm({
           )}
           {t("settings.ai.saveCta")}
         </Button>
-      </div>
-
-      {msg && (
-        <p className={`text-xs ${ok ? "text-success" : "text-destructive"}`}>
-          {msg}
-        </p>
-      )}
+      </SettingsCardActions>
     </form>
   );
 }
diff --git a/src/components/settings/ai/auto-read-card.tsx b/src/components/settings/ai/auto-read-card.tsx
index 76b862265..ae4662570 100644
--- a/src/components/settings/ai/auto-read-card.tsx
+++ b/src/components/settings/ai/auto-read-card.tsx
@@ -16,9 +16,12 @@
 
 import { useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ShieldAlert } from "lucide-react";
+import { ScanText, ShieldAlert } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { SettingsCardActions } from "@/components/settings/_card-actions";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { Switch } from "@/components/ui/switch";
 import { apiGet, apiPatch } from "@/lib/api/api-fetch";
 import { useAiCapability } from "@/hooks/use-ai-capability";
@@ -86,27 +89,21 @@ export function AutoReadCard() {
   const checked = enabled || pendingEnable;
 
   return (
-    <div
-      data-slot="documents-auto-read-card"
-      className="bg-muted/50 space-y-4 rounded-lg p-4"
-    >
-      <div className="flex items-start justify-between gap-3">
-        <div>
-          <p className="text-sm font-medium">
-            {t("settings.ai.autoRead.title")}
-          </p>
-          <p className="text-muted-foreground text-xs">
-            {t("settings.ai.autoRead.subLabel")}
-          </p>
-        </div>
-        <Switch
-          checked={checked}
-          disabled={busy || (operatorOff && !enabled)}
-          onCheckedChange={onSwitch}
-          aria-label={t("settings.ai.autoRead.title")}
-          data-testid="documents-auto-read-enable"
-        />
-      </div>
+    <SettingsCard data-slot="documents-auto-read-card">
+      <SettingsCardHeader
+        icon={ScanText}
+        title={t("settings.ai.autoRead.title")}
+        description={t("settings.ai.autoRead.subLabel")}
+        status={
+          <Switch
+            checked={checked}
+            disabled={busy || (operatorOff && !enabled)}
+            onCheckedChange={onSwitch}
+            aria-label={t("settings.ai.autoRead.title")}
+            data-testid="documents-auto-read-enable"
+          />
+        }
+      />
 
       {operatorOff ? (
         <p
@@ -130,7 +127,17 @@ export function AutoReadCard() {
             />
             <p className="min-w-0">{t("settings.ai.autoRead.honesty")}</p>
           </div>
-          <div className="flex flex-wrap gap-2">
+          <SettingsCardActions>
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              className="min-h-11 sm:min-h-9"
+              disabled={save.isPending}
+              onClick={() => setPendingEnable(false)}
+            >
+              {t("settings.ai.autoRead.cancel")}
+            </Button>
             <Button
               type="button"
               size="sm"
@@ -141,17 +148,7 @@ export function AutoReadCard() {
             >
               {t("settings.ai.autoRead.confirm")}
             </Button>
-            <Button
-              type="button"
-              size="sm"
-              variant="ghost"
-              className="min-h-11 sm:min-h-9"
-              disabled={save.isPending}
-              onClick={() => setPendingEnable(false)}
-            >
-              {t("settings.ai.autoRead.cancel")}
-            </Button>
-          </div>
+          </SettingsCardActions>
         </div>
       ) : null}
 
@@ -160,6 +157,6 @@ export function AutoReadCard() {
           {t("settings.ai.errorGeneric")}
         </p>
       ) : null}
-    </div>
+    </SettingsCard>
   );
 }
diff --git a/src/components/settings/ai/central-codex-switch.tsx b/src/components/settings/ai/central-codex-switch.tsx
index 010366b03..980de0bac 100644
--- a/src/components/settings/ai/central-codex-switch.tsx
+++ b/src/components/settings/ai/central-codex-switch.tsx
@@ -17,9 +17,12 @@
 
 import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { ShieldAlert } from "lucide-react";
+import { Share2, ShieldAlert } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { SettingsCardActions } from "@/components/settings/_card-actions";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { Switch } from "@/components/ui/switch";
 import { apiPatch } from "@/lib/api/api-fetch";
 import { useTranslations } from "@/lib/i18n/context";
@@ -74,27 +77,21 @@ export function CentralCodexSwitch({
   const checked = enabled || pendingEnable;
 
   return (
-    <div
-      data-slot="central-codex-switch-card"
-      className="bg-muted/50 space-y-4 rounded-lg p-4"
-    >
-      <div className="flex items-start justify-between gap-3">
-        <div>
-          <p className="text-sm font-medium">
-            {t("settings.ai.centralCodex.title")}
-          </p>
-          <p className="text-muted-foreground text-xs">
-            {t("settings.ai.centralCodex.subLabel")}
-          </p>
-        </div>
-        <Switch
-          checked={checked}
-          disabled={busy}
-          onCheckedChange={onSwitch}
-          aria-label={t("settings.ai.centralCodex.title")}
-          data-testid="use-central-codex-enable"
-        />
-      </div>
+    <SettingsCard data-slot="central-codex-switch-card">
+      <SettingsCardHeader
+        icon={Share2}
+        title={t("settings.ai.centralCodex.title")}
+        description={t("settings.ai.centralCodex.subLabel")}
+        status={
+          <Switch
+            checked={checked}
+            disabled={busy}
+            onCheckedChange={onSwitch}
+            aria-label={t("settings.ai.centralCodex.title")}
+            data-testid="use-central-codex-enable"
+          />
+        }
+      />
 
       {pendingEnable ? (
         <div
@@ -109,7 +106,17 @@ export function CentralCodexSwitch({
             />
             <p className="min-w-0">{t("settings.ai.centralCodex.honesty")}</p>
           </div>
-          <div className="flex flex-wrap gap-2">
+          <SettingsCardActions>
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              className="min-h-11 sm:min-h-9"
+              disabled={save.isPending}
+              onClick={() => setPendingEnable(false)}
+            >
+              {t("settings.ai.centralCodex.cancel")}
+            </Button>
             <Button
               type="button"
               size="sm"
@@ -120,17 +127,7 @@ export function CentralCodexSwitch({
             >
               {t("settings.ai.centralCodex.confirm")}
             </Button>
-            <Button
-              type="button"
-              size="sm"
-              variant="ghost"
-              className="min-h-11 sm:min-h-9"
-              disabled={save.isPending}
-              onClick={() => setPendingEnable(false)}
-            >
-              {t("settings.ai.centralCodex.cancel")}
-            </Button>
-          </div>
+          </SettingsCardActions>
         </div>
       ) : null}
 
@@ -139,6 +136,6 @@ export function CentralCodexSwitch({
           {t("settings.ai.errorGeneric")}
         </p>
       ) : null}
-    </div>
+    </SettingsCard>
   );
 }
diff --git a/src/components/settings/ai/codex-provider-form.tsx b/src/components/settings/ai/codex-provider-form.tsx
index 2aafecff3..eaf4098d2 100644
--- a/src/components/settings/ai/codex-provider-form.tsx
+++ b/src/components/settings/ai/codex-provider-form.tsx
@@ -10,6 +10,7 @@ import { Loader2, Sparkles, Trash2 } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { SettingsCardActions } from "@/components/settings/_card-actions";
 import { ConfirmButton } from "@/components/ui/confirm-button";
 import { apiFetchRaw } from "@/lib/api/api-fetch";
 import { formatDateTime } from "@/lib/format";
@@ -270,19 +271,21 @@ export function CodexProviderForm({
           </div>
         </div>
       ) : (
-        <Button
-          variant="outline"
-          onClick={handleConnect}
-          disabled={devicePolling}
-          className="min-h-11 w-full sm:min-h-9 sm:w-auto"
-        >
-          {devicePolling ? (
-            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
-          ) : (
-            <Sparkles className="h-4 w-4" />
-          )}
-          {t("settings.ai.codex.connectButton")}
-        </Button>
+        <SettingsCardActions>
+          <Button
+            variant="outline"
+            onClick={handleConnect}
+            disabled={devicePolling}
+            className="min-h-11 sm:min-h-9"
+          >
+            {devicePolling ? (
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
+            ) : (
+              <Sparkles className="h-4 w-4" />
+            )}
+            {t("settings.ai.codex.connectButton")}
+          </Button>
+        </SettingsCardActions>
       )}
 
       {msg && (
diff --git a/src/components/settings/ai/compat-provider-form.tsx b/src/components/settings/ai/compat-provider-form.tsx
index 3e621cf2f..8717457f8 100644
--- a/src/components/settings/ai/compat-provider-form.tsx
+++ b/src/components/settings/ai/compat-provider-form.tsx
@@ -12,6 +12,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Loader2, Save } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { SettingsCardActions } from "@/components/settings/_card-actions";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { PasswordInput } from "@/components/ui/password-input";
@@ -144,7 +145,13 @@ export function CompatProviderForm({
         onChange={setReasoning}
       />
 
-      <div>
+      {msg && (
+        <p className={`text-xs ${ok ? "text-success" : "text-destructive"}`}>
+          {msg}
+        </p>
+      )}
+
+      <SettingsCardActions>
         <Button
           type="submit"
           size="sm"
@@ -159,13 +166,7 @@ export function CompatProviderForm({
           )}
           {t("settings.ai.saveCta")}
         </Button>
-      </div>
-
-      {msg && (
-        <p className={`text-xs ${ok ? "text-success" : "text-destructive"}`}>
-          {msg}
-        </p>
-      )}
+      </SettingsCardActions>
     </form>
   );
 }
diff --git a/src/components/settings/ai/fallback-chain-card.tsx b/src/components/settings/ai/fallback-chain-card.tsx
index 80977ecfb..0b4d64e41 100644
--- a/src/components/settings/ai/fallback-chain-card.tsx
+++ b/src/components/settings/ai/fallback-chain-card.tsx
@@ -10,6 +10,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   ArrowDown,
   ArrowUp,
+  ListOrdered,
   Loader2,
   PlusCircle,
   RotateCcw,
@@ -29,6 +30,9 @@ import {
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { SettingsCardActions } from "@/components/settings/_card-actions";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { NativeSelect } from "@/components/ui/native-select";
 import { Switch } from "@/components/ui/switch";
 import { apiPut } from "@/lib/api/api-fetch";
@@ -148,25 +152,19 @@ export function FallbackChainCard({
   }
 
   return (
-    <div
-      data-testid="ai-fallback-chain"
-      className="bg-muted/50 space-y-3 rounded-lg p-4"
-    >
-      <div>
-        <p className="text-sm font-medium">
-          {t("settings.ai.providerChain.title")}
-        </p>
-        <p className="text-muted-foreground text-xs">
-          {t("settings.ai.providerChain.description")}
-        </p>
-      </div>
+    <SettingsCard data-testid="ai-fallback-chain">
+      <SettingsCardHeader
+        icon={ListOrdered}
+        title={t("settings.ai.providerChain.title")}
+        description={t("settings.ai.providerChain.description")}
+      />
 
       <ul className="space-y-2">
         {entries.map((entry, idx) => (
           <li
             key={entry.providerType}
             data-chain-row={entry.providerType}
-            className={`bg-card border-border flex flex-wrap items-center gap-2 rounded-md border p-2 ${
+            className={`bg-card border-border flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md border p-2 ${
               entry.providerType === selected
                 ? "border-primary/40 ring-primary/30 ring-1"
                 : ""
@@ -175,53 +173,58 @@ export function FallbackChainCard({
             <span className="text-muted-foreground w-5 text-center text-xs tabular-nums">
               {idx + 1}.
             </span>
+            {/* The name keeps its own line on a phone and the controls wrap
+                under it, right-aligned; squeezed beside five controls it
+                broke a three-word name over three lines. */}
             <button
               type="button"
               onClick={() => onSelect(entry.providerType)}
-              className="flex-1 text-left text-sm font-medium hover:underline"
+              className="min-w-0 flex-1 basis-[calc(100%-2rem)] text-left text-sm font-medium hover:underline sm:basis-0"
             >
               {t(`settings.ai.providerChain.types.${entry.providerType}`)}
             </button>
-            <Switch
-              checked={entry.enabled}
-              onCheckedChange={() => toggle(idx)}
-              aria-label={t(
-                `settings.ai.providerChain.types.${entry.providerType}`,
-              )}
-            />
-            <Button
-              type="button"
-              size="sm"
-              variant="outline"
-              aria-label={t("settings.ai.providerChain.moveUp")}
-              disabled={idx === 0}
-              onClick={() => move(idx, -1)}
-              className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
-            >
-              <ArrowUp className="h-4 w-4" />
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              variant="outline"
-              aria-label={t("settings.ai.providerChain.moveDown")}
-              disabled={idx === entries.length - 1}
-              onClick={() => move(idx, 1)}
-              className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
-            >
-              <ArrowDown className="h-4 w-4" />
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              variant="outline"
-              aria-label={t("settings.ai.providerChain.removeFromChain")}
-              className="text-destructive min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
-              onClick={() => remove(idx)}
-              disabled={entries.length <= 1}
-            >
-              <X className="h-4 w-4" />
-            </Button>
+            <div className="ml-auto flex shrink-0 items-center gap-2">
+              <Switch
+                checked={entry.enabled}
+                onCheckedChange={() => toggle(idx)}
+                aria-label={t(
+                  `settings.ai.providerChain.types.${entry.providerType}`,
+                )}
+              />
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                aria-label={t("settings.ai.providerChain.moveUp")}
+                disabled={idx === 0}
+                onClick={() => move(idx, -1)}
+                className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
+              >
+                <ArrowUp className="h-4 w-4" />
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                aria-label={t("settings.ai.providerChain.moveDown")}
+                disabled={idx === entries.length - 1}
+                onClick={() => move(idx, 1)}
+                className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
+              >
+                <ArrowDown className="h-4 w-4" />
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                aria-label={t("settings.ai.providerChain.removeFromChain")}
+                className="text-destructive min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
+                onClick={() => remove(idx)}
+                disabled={entries.length <= 1}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
           </li>
         ))}
       </ul>
@@ -234,20 +237,14 @@ export function FallbackChainCard({
             {t("settings.ai.providerChain.addNoneAvailable")}
           </p>
         )}
-        <Button
-          size="sm"
-          className="min-h-11 sm:min-h-9"
-          onClick={() => saveMutation.mutate(entries)}
-          disabled={saveMutation.isPending || entries.length === 0}
-          data-testid="ai-fallback-chain-save"
-        >
-          {saveMutation.isPending ? (
-            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
-          ) : (
-            <Save className="h-4 w-4" />
-          )}
-          {t("settings.ai.providerChain.saveOrder")}
-        </Button>
+      </div>
+
+      {msg && (
+        <p className={`text-xs ${ok ? "text-success" : "text-destructive"}`}>
+          {msg}
+        </p>
+      )}
+      <SettingsCardActions>
         <AlertDialog>
           <AlertDialogTrigger asChild>
             <Button size="sm" variant="outline" className="min-h-11 sm:min-h-9">
@@ -272,14 +269,22 @@ export function FallbackChainCard({
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialog>
-      </div>
-
-      {msg && (
-        <p className={`text-xs ${ok ? "text-success" : "text-destructive"}`}>
-          {msg}
-        </p>
-      )}
-    </div>
+        <Button
+          size="sm"
+          className="min-h-11 sm:min-h-9"
+          onClick={() => saveMutation.mutate(entries)}
+          disabled={saveMutation.isPending || entries.length === 0}
+          data-testid="ai-fallback-chain-save"
+        >
+          {saveMutation.isPending ? (
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
+          ) : (
+            <Save className="h-4 w-4" />
+          )}
+          {t("settings.ai.providerChain.saveOrder")}
+        </Button>
+      </SettingsCardActions>
+    </SettingsCard>
   );
 }
 
diff --git a/src/components/settings/ai/local-provider-form.tsx b/src/components/settings/ai/local-provider-form.tsx
index 58d255a2e..9a2abd63b 100644
--- a/src/components/settings/ai/local-provider-form.tsx
+++ b/src/components/settings/ai/local-provider-form.tsx
@@ -9,6 +9,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Loader2, Save } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { SettingsCardActions } from "@/components/settings/_card-actions";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { NativeSelect } from "@/components/ui/native-select";
@@ -180,7 +181,13 @@ export function LocalProviderForm({
         onChange={setReasoning}
       />
 
-      <div>
+      {msg && (
+        <p className={`text-xs ${ok ? "text-success" : "text-destructive"}`}>
+          {msg}
+        </p>
+      )}
+
+      <SettingsCardActions>
         <Button
           type="submit"
           size="sm"
@@ -195,13 +202,7 @@ export function LocalProviderForm({
           )}
           {t("settings.ai.saveCta")}
         </Button>
-      </div>
-
-      {msg && (
-        <p className={`text-xs ${ok ? "text-success" : "text-destructive"}`}>
-          {msg}
-        </p>
-      )}
+      </SettingsCardActions>
     </form>
   );
 }
diff --git a/src/components/settings/ai/openai-provider-form.tsx b/src/components/settings/ai/openai-provider-form.tsx
index 84c5f63de..b598f9514 100644
--- a/src/components/settings/ai/openai-provider-form.tsx
+++ b/src/components/settings/ai/openai-provider-form.tsx
@@ -12,6 +12,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Loader2, Save } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { SettingsCardActions } from "@/components/settings/_card-actions";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { NativeSelect } from "@/components/ui/native-select";
@@ -198,7 +199,13 @@ export function OpenAIProviderForm({
         )}
       </div>
 
-      <div className="flex flex-wrap gap-2">
+      {msg && (
+        <p className={`text-xs ${ok ? "text-success" : "text-destructive"}`}>
+          {msg}
+        </p>
+      )}
+
+      <SettingsCardActions>
         <Button
           type="submit"
           size="sm"
@@ -213,13 +220,7 @@ export function OpenAIProviderForm({
           )}
           {t("settings.ai.saveCta")}
         </Button>
-      </div>
-
-      {msg && (
-        <p className={`text-xs ${ok ? "text-success" : "text-destructive"}`}>
-          {msg}
-        </p>
-      )}
+      </SettingsCardActions>
     </form>
   );
 }
diff --git a/src/components/settings/ai/response-timeout-card.tsx b/src/components/settings/ai/response-timeout-card.tsx
index 628e9c0e4..8af2bcadd 100644
--- a/src/components/settings/ai/response-timeout-card.tsx
+++ b/src/components/settings/ai/response-timeout-card.tsx
@@ -13,9 +13,12 @@
 
 import { useRef, useState, type FormEvent } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Loader2, Save } from "lucide-react";
+import { Loader2, Save, Timer } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { SettingsCardActions } from "@/components/settings/_card-actions";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { AI_BUDGETS } from "@/lib/ai/ai-budgets";
@@ -100,20 +103,12 @@ export function ResponseTimeoutCard({
   }
 
   return (
-    <form
-      className="bg-muted/50 space-y-3 rounded-lg p-4"
-      onSubmit={submit}
-      noValidate
-    >
-      <div>
-        <p className="text-sm font-medium">
-          {t("settings.ai.responseTimeoutHeading")}
-        </p>
-        <p className="text-muted-foreground text-xs">
-          {t("settings.ai.responseTimeoutBody", RESPONSE_TIMEOUT_COPY_PARAMS)}
-        </p>
-      </div>
-      <div>
+    <SettingsCard as="form" onSubmit={submit} noValidate>
+      <SettingsCardHeader
+        icon={Timer}
+        title={t("settings.ai.responseTimeoutHeading")}
+      />
+      <div className="flex flex-col gap-1.5">
         <Label htmlFor="ai-response-timeout">
           {t("settings.ai.responseTimeoutLabel")}
         </Label>
@@ -129,10 +124,24 @@ export function ResponseTimeoutCard({
             "settings.ai.responseTimeoutPlaceholder",
             RESPONSE_TIMEOUT_COPY_PARAMS,
           )}
-          className="mt-1 sm:max-w-xs"
+          aria-describedby="ai-response-timeout-hint"
+          className="sm:max-w-xs"
         />
+        {/* The explainer is several sentences, so it rides under the field it
+            explains rather than in the one-sentence header slot. */}
+        <p
+          id="ai-response-timeout-hint"
+          className="text-muted-foreground text-xs"
+        >
+          {t("settings.ai.responseTimeoutBody", RESPONSE_TIMEOUT_COPY_PARAMS)}
+        </p>
       </div>
-      <div>
+      {msg && (
+        <p className={`text-xs ${ok ? "text-success" : "text-destructive"}`}>
+          {msg}
+        </p>
+      )}
+      <SettingsCardActions>
         <Button
           type="submit"
           size="sm"
@@ -147,12 +156,7 @@ export function ResponseTimeoutCard({
           )}
           {t("settings.ai.saveCta")}
         </Button>
-      </div>
-      {msg && (
-        <p className={`text-xs ${ok ? "text-success" : "text-destructive"}`}>
-          {msg}
-        </p>
-      )}
-    </form>
+      </SettingsCardActions>
+    </SettingsCard>
   );
 }
diff --git a/src/components/settings/ai/runtime-actions-row.tsx b/src/components/settings/ai/runtime-actions-row.tsx
index c0a1ebcce..e91f09034 100644
--- a/src/components/settings/ai/runtime-actions-row.tsx
+++ b/src/components/settings/ai/runtime-actions-row.tsx
@@ -4,13 +4,15 @@
  * Runtime actions — Test active provider, regenerate insights, raw-mode toggle.
  * ──────────────────────────────────────────────────────────────── */
 
-import { useState } from "react";
-import { Loader2, RefreshCw, Sparkles } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { Activity, Loader2, RefreshCw, Sparkles } from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardActions } from "@/components/settings/_card-actions";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { apiFetchRaw, apiPut } from "@/lib/api/api-fetch";
 import { formatDateTime } from "@/lib/format";
 import { useAiCapability } from "@/hooks/use-ai-capability";
@@ -30,6 +32,7 @@ export function RuntimeActionsRow({
   lastInsightAt,
   onRegenerated,
   onPrivacyChanged,
+  footnote,
 }: {
   provider: ProviderType;
   userProvider: UserAIProvider | null | undefined;
@@ -38,6 +41,8 @@ export function RuntimeActionsRow({
   lastInsightAt: string | null;
   onRegenerated: () => void;
   onPrivacyChanged: () => void;
+  /** A closing statement rendered above the action row (the data posture). */
+  footnote?: ReactNode;
 }) {
   const { t } = useTranslations();
   // "Regenerate" writes the daily briefing, so it is offered only while the
@@ -215,9 +220,14 @@ export function RuntimeActionsRow({
     // §12 — the action row is the LAST thing in the block. The raw-data
     // setting and every status line (last-generated, test / regenerate
     // result) sit ABOVE it, never under it.
-    <div className="space-y-3">
+    <SettingsCard data-slot="ai-runtime-card">
+      <SettingsCardHeader
+        icon={Activity}
+        title={t("settings.ai.runtimeTitle")}
+        description={lastInsightLine ?? undefined}
+      />
       {showRegenerate && (
-        <div className="bg-muted/50 rounded-lg p-3">
+        <div>
           <div className="flex items-center justify-between gap-4">
             <div className="pr-2">
               <p className="text-sm font-medium">{t("settings.rawData")}</p>
@@ -241,9 +251,6 @@ export function RuntimeActionsRow({
         </div>
       )}
 
-      {lastInsightLine && (
-        <p className="text-muted-foreground text-xs">{lastInsightLine}</p>
-      )}
       {testMsg && (
         <p
           className={`text-xs ${testOk ? "text-success" : "text-destructive"}`}
@@ -259,7 +266,9 @@ export function RuntimeActionsRow({
         </p>
       )}
 
-      <SettingsCardActions align="start">
+      {footnote}
+
+      <SettingsCardActions>
         <Button
           type="button"
           size="sm"
@@ -293,6 +302,6 @@ export function RuntimeActionsRow({
           </Button>
         )}
       </SettingsCardActions>
-    </div>
+    </SettingsCard>
   );
 }