@agent-native/core 0.91.2 → 0.92.0

package/corpus/core/src/client/settings/SettingsPanel.tsx

@@ -52,7 +52,12 @@ import { AgentsSection } from "./AgentsSection.js";
 import { AutomationsSection } from "./AutomationsSection.js";
 import { DemoModeSection } from "./DemoModeSection.js";
 import { SecretsSection } from "./SecretsSection.js";
-import { SettingsSection } from "./SettingsSection.js";
+import {
+  SettingsSection,
+  SettingsSurfaceProvider,
+  useSettingsSurface,
+  type SettingsSurface,
+} from "./SettingsSection.js";
 import type {
   SettingsSearchEntry,
   SettingsTabItem,
@@ -102,6 +107,45 @@ const CONTROL_STYLE = {
   lineHeight: 1,
 } satisfies React.CSSProperties;
 
+const CONTROL_STYLE_PAGE = {
+  fontSize: 14,
+  lineHeight: 1.2,
+} satisfies React.CSSProperties;
+
+// Surface-aware class helpers so section bodies (shared with the compact
+// sidebar) read as roomy, shadcn-style forms on the full settings page while
+// staying dense in the sidebar.
+function fieldLabelClass(isPage: boolean): string {
+  return cn("font-medium text-foreground", isPage ? "text-sm" : "text-[12px]");
+}
+
+function textInputClass(isPage: boolean): string {
+  return cn(
+    "flex w-full rounded-md border border-border bg-background text-foreground outline-none transition-colors hover:bg-accent/40 focus:ring-1 focus:ring-accent placeholder:text-muted-foreground/50",
+    isPage ? "h-10 px-3 text-sm" : "h-9 px-3 text-[12px]",
+  );
+}
+
+function pillButtonClass(
+  isPage: boolean,
+  tone: "solid" | "outline" | "ghost" = "outline",
+): string {
+  const base = cn(
+    "inline-flex items-center justify-center gap-1 rounded-md font-medium transition-colors disabled:opacity-40",
+    isPage ? "px-3 py-1.5 text-sm" : "px-2.5 py-1 text-[10px]",
+  );
+  if (tone === "solid") {
+    return cn(base, "bg-accent text-foreground hover:bg-accent/80");
+  }
+  if (tone === "ghost") {
+    return cn(
+      base,
+      "text-muted-foreground hover:bg-accent/40 hover:text-foreground",
+    );
+  }
+  return cn(base, "border border-border text-foreground hover:bg-accent/40");
+}
+
 function SettingsSelect({
   label,
   labelAdornment,
@@ -115,25 +159,30 @@ function SettingsSelect({
   options: SettingsSelectOption[];
   onValueChange: (value: string) => void;
 }) {
+  const isPage = useSettingsSurface() === "page";
+  const controlStyle = isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE;
   const selected = options.find((option) => option.value === value);
 
   return (
     <div className="space-y-1.5">
       <div className="flex items-center justify-between">
-        <p className="text-[12px] font-medium text-foreground">{label}</p>
+        <p className={fieldLabelClass(isPage)}>{label}</p>
         {labelAdornment}
       </div>
       <SelectPrimitive.Root value={value} onValueChange={onValueChange}>
         <SelectPrimitive.Trigger
-          className="flex h-9 w-full items-center justify-between rounded-md border border-border bg-background px-3 text-start text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground"
+          className={cn(
+            "flex w-full items-center justify-between rounded-md border border-border bg-background px-3 text-start text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground",
+            isPage ? "h-10 text-sm" : "h-9 text-[12px]",
+          )}
           aria-label={label}
-          style={CONTROL_STYLE}
+          style={controlStyle}
         >
           <SelectPrimitive.Value>
             {selected?.label ?? value}
           </SelectPrimitive.Value>
           <SelectPrimitive.Icon asChild>
-            <IconChevronDown size={14} className="text-muted-foreground" />
+            <IconChevronDown size={16} className="text-muted-foreground" />
           </SelectPrimitive.Icon>
         </SelectPrimitive.Trigger>
         <SelectPrimitive.Portal>
@@ -147,8 +196,11 @@ function SettingsSelect({
                 <SelectPrimitive.Item
                   key={option.value}
                   value={option.value}
-                  className="relative flex w-full cursor-pointer select-none items-start gap-2 rounded-md px-8 py-2.5 text-[12px] outline-none data-[highlighted]:bg-accent/60 data-[state=checked]:bg-accent/40"
-                  style={CONTROL_STYLE}
+                  className={cn(
+                    "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-md px-8 outline-none data-[highlighted]:bg-accent/60 data-[state=checked]:bg-accent/40",
+                    isPage ? "py-2.5 text-sm" : "py-2.5 text-[12px]",
+                  )}
+                  style={controlStyle}
                 >
                   <span className="absolute start-2 top-2.5 flex h-4 w-4 items-center justify-center text-muted-foreground">
                     <SelectPrimitive.ItemIndicator>
@@ -160,7 +212,12 @@ function SettingsSelect({
                       <span className="text-foreground">{option.label}</span>
                     </SelectPrimitive.ItemText>
                     {option.description ? (
-                      <span className="mt-0.5 text-[11px] leading-relaxed text-muted-foreground">
+                      <span
+                        className={cn(
+                          "mt-0.5 leading-relaxed text-muted-foreground",
+                          isPage ? "text-xs" : "text-[11px]",
+                        )}
+                      >
                         {option.description}
                       </span>
                     ) : null}
@@ -354,29 +411,40 @@ function UseBuilderCard({
   subtitle?: string;
   dim?: boolean;
 }) {
+  const isPage = useSettingsSurface() === "page";
   const effectiveConnected = connected || builderFlow.configured;
   const effectiveOrgName = builderFlow.orgName ?? orgName;
   const bgClass = dim ? "" : "bg-accent/30";
+  const titleCls = isPage ? "text-sm" : "text-[11px]";
+  const bodyCls = isPage ? "text-xs" : "text-[10px]";
 
   if (effectiveConnected) {
     return (
-      <div className={`rounded-md border border-border px-2.5 py-2 ${bgClass}`}>
+      <div
+        className={cn(
+          "rounded-md border border-border",
+          isPage ? "px-3.5 py-3" : "px-2.5 py-2",
+          bgClass,
+        )}
+      >
         <div className="flex items-center justify-between">
-          <div className="text-[11px] font-medium text-foreground">
+          <div className={cn("font-medium text-foreground", titleCls)}>
             Builder.io
           </div>
-          <span className="flex items-center gap-1 text-[10px] text-green-500">
-            <IconCheck size={10} />
+          <span
+            className={cn("flex items-center gap-1 text-green-500", bodyCls)}
+          >
+            <IconCheck size={isPage ? 14 : 10} />
             Connected
           </span>
         </div>
         {effectiveOrgName && (
-          <p className="text-[10px] text-muted-foreground mt-0.5">
+          <p className={cn("text-muted-foreground mt-0.5", bodyCls)}>
             {effectiveOrgName}
           </p>
         )}
         {envManaged ? (
-          <p className="text-[10px] text-muted-foreground mt-1">
+          <p className={cn("text-muted-foreground mt-1", bodyCls)}>
             {credentialSource === "env"
               ? "Deployment fallback is available. Connect your own account to override it."
               : "Using your connected Builder account. Deployment fallback is still available."}
@@ -391,14 +459,14 @@ function UseBuilderCard({
                   builderFlow.start({ trackingSource, trackingFlow })
                 }
                 disabled={builderFlow.connecting}
-                className="inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] no-underline text-muted-foreground hover:text-foreground hover:bg-accent/40 disabled:opacity-60"
+                className={cn(pillButtonClass(isPage, "ghost"), "no-underline")}
               >
                 {builderFlow.connecting
                   ? "Connecting..."
                   : credentialSource === "env"
                     ? "Connect account"
                     : "Reconnect"}
-                <IconExternalLink size={10} />
+                <IconExternalLink size={isPage ? 14 : 10} />
               </button>
             )}
             {credentialSource !== "env" ? <DisconnectBuilderButton /> : null}
@@ -415,35 +483,53 @@ function UseBuilderCard({
       type="button"
       onClick={() => builderFlow.start({ trackingSource, trackingFlow })}
       disabled={builderFlow.connecting}
-      className={`block w-full rounded-md border border-border px-3 py-3 text-start no-underline bg-gradient-to-br from-teal-500/10 via-transparent to-transparent hover:border-foreground/30 transition-colors disabled:cursor-wait disabled:opacity-70`}
+      className={cn(
+        "block w-full rounded-md border border-border text-start no-underline bg-gradient-to-br from-teal-500/10 via-transparent to-transparent hover:border-foreground/30 transition-colors disabled:cursor-wait disabled:opacity-70",
+        isPage ? "px-4 py-3.5" : "px-3 py-3",
+      )}
     >
       <div className="flex items-start gap-2.5">
-        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-foreground text-background">
-          <BuilderBMark className="h-3.5 w-3.5" />
+        <div
+          className={cn(
+            "flex shrink-0 items-center justify-center rounded-md bg-foreground text-background",
+            isPage ? "h-8 w-8" : "h-7 w-7",
+          )}
+        >
+          <BuilderBMark className={isPage ? "h-4 w-4" : "h-3.5 w-3.5"} />
         </div>
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5 flex-wrap">
-            <span className="text-[12px] font-semibold text-foreground">
+            <span
+              className={cn(
+                "font-semibold text-foreground",
+                isPage ? "text-sm" : "text-[12px]",
+              )}
+            >
               {builderFlow.connecting ? "Connecting Builder.io..." : label}
             </span>
             {builderFlow.connecting && (
               <IconLoader2
-                size={12}
+                size={isPage ? 14 : 12}
                 className="shrink-0 animate-spin text-muted-foreground"
               />
             )}
           </div>
-          <p className="text-[10.5px] text-muted-foreground mt-0.5 leading-snug">
+          <p
+            className={cn(
+              "text-muted-foreground mt-0.5 leading-snug",
+              isPage ? "text-xs" : "text-[10.5px]",
+            )}
+          >
             {subtitle}
           </p>
           {builderFlow.error && (
-            <p className="mt-1 text-[10px] text-destructive">
+            <p className={cn("mt-1 text-destructive", bodyCls)}>
               {builderFlow.error}
             </p>
           )}
         </div>
         <IconExternalLink
-          size={12}
+          size={isPage ? 14 : 12}
           className="shrink-0 text-muted-foreground mt-0.5"
         />
       </div>
@@ -469,23 +555,32 @@ function ManualSetupCard({
   /** Optional "Connected via X" badge shown in the header row. */
   sourceBadge?: string;
 }) {
+  const isPage = useSettingsSurface() === "page";
+  const titleCls = isPage ? "text-sm" : "text-[11px]";
+  const bodyCls = isPage ? "text-xs" : "text-[10px]";
   return (
     <div
-      className={`rounded-md border border-border px-2.5 py-2 ${dim ? "" : "bg-accent/30"}`}
+      className={cn(
+        "rounded-md border border-border",
+        isPage ? "px-3.5 py-3" : "px-2.5 py-2",
+        dim ? "" : "bg-accent/30",
+      )}
     >
       <div className="flex items-center justify-between mb-1">
-        <div className="text-[11px] font-medium text-foreground">
+        <div className={cn("font-medium text-foreground", titleCls)}>
           Set up manually
         </div>
         {sourceBadge ? (
-          <span className="flex items-center gap-1 text-[10px] text-green-500">
-            <IconCheck size={10} />
+          <span
+            className={cn("flex items-center gap-1 text-green-500", bodyCls)}
+          >
+            <IconCheck size={isPage ? 14 : 10} />
             {sourceBadge}
           </span>
         ) : null}
       </div>
       {hint && (
-        <p className="text-[10px] text-muted-foreground mb-1.5">{hint}</p>
+        <p className={cn("text-muted-foreground mb-1.5", bodyCls)}>{hint}</p>
       )}
       {children}
       {docsUrl && (
@@ -493,10 +588,13 @@ function ManualSetupCard({
           href={docsUrl}
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex items-center gap-1 mt-1.5 rounded border border-border px-2.5 py-1 text-[10px] font-medium no-underline text-muted-foreground hover:text-foreground hover:bg-accent/40"
+          className={cn(
+            pillButtonClass(isPage, "outline"),
+            "mt-1.5 no-underline",
+          )}
         >
           {docsLabel}
-          <IconExternalLink size={10} />
+          <IconExternalLink size={isPage ? 14 : 10} />
         </a>
       )}
     </div>
@@ -617,6 +715,7 @@ function LLMSectionInner({
   open?: boolean;
   onToggle?: () => void;
 }) {
+  const isPage = useSettingsSurface() === "page";
   const [envKeys, setEnvKeys] = useState<
     Array<{ key: string; configured: boolean }>
   >([]);
@@ -926,9 +1025,7 @@ function LLMSectionInner({
                 {/* Free-form input so OpenRouter/Ollama custom model IDs can
                 be typed — the registry's supportedModels is only suggestions. */}
                 <div className="space-y-1.5">
-                  <p className="text-[12px] font-medium text-foreground">
-                    Model
-                  </p>
+                  <p className={fieldLabelClass(isPage)}>Model</p>
                   <input
                     type="text"
                     list={`model-suggestions-${selectedEngine}`}
@@ -939,8 +1036,8 @@ function LLMSectionInner({
                     }
                     spellCheck={false}
                     autoComplete="off"
-                    className="flex h-9 w-full rounded-md border border-border bg-background px-3 text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 focus:ring-1 focus:ring-accent placeholder:text-muted-foreground/50"
-                    style={CONTROL_STYLE}
+                    className={textInputClass(isPage)}
+                    style={isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE}
                   />
                   {modelOptions.length > 0 && (
                     <datalist id={`model-suggestions-${selectedEngine}`}>
@@ -1049,8 +1146,13 @@ function LLMSectionInner({
                 )}
 
                 {envVar && envConfigured ? (
-                  <div className="flex items-center gap-1.5 text-[10px] text-green-500">
-                    <IconCheck size={10} />
+                  <div
+                    className={cn(
+                      "flex items-center gap-1.5 text-green-500",
+                      isPage ? "text-xs" : "text-[10px]",
+                    )}
+                  >
+                    <IconCheck size={isPage ? 14 : 10} />
                     {envVar} configured
                   </div>
                 ) : envVar ? (
@@ -1063,17 +1165,21 @@ function LLMSectionInner({
                         if (e.key === "Enter") handleSave();
                       }}
                       placeholder={PROVIDER_ENV_PLACEHOLDERS[envVar] ?? "..."}
-                      className="flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent"
+                      className={cn(textInputClass(isPage), "flex-1")}
+                      style={isPage ? CONTROL_STYLE_PAGE : undefined}
                     />
                     <button
                       onClick={handleSave}
                       disabled={!providerSettingsChanged || saving}
-                      className="rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40"
+                      className={pillButtonClass(isPage, "solid")}
                     >
                       {saving ? (
-                        <IconLoader2 size={10} className="animate-spin" />
+                        <IconLoader2
+                          size={isPage ? 14 : 10}
+                          className="animate-spin"
+                        />
                       ) : saved ? (
-                        <IconCheck size={10} />
+                        <IconCheck size={isPage ? 14 : 10} />
                       ) : (
                         "Save"
                       )}
@@ -1085,11 +1191,14 @@ function LLMSectionInner({
                   <button
                     onClick={handleTest}
                     disabled={testing}
-                    className="rounded border border-border px-2.5 py-1 text-[10px] font-medium text-foreground hover:bg-accent/40 disabled:opacity-40"
+                    className={pillButtonClass(isPage, "outline")}
                   >
                     {testing ? (
                       <span className="flex items-center gap-1">
-                        <IconLoader2 size={10} className="animate-spin" />
+                        <IconLoader2
+                          size={isPage ? 14 : 10}
+                          className="animate-spin"
+                        />
                         Testing…
                       </span>
                     ) : (
@@ -1099,7 +1208,7 @@ function LLMSectionInner({
                   {engineChanged && (
                     <button
                       onClick={handleApply}
-                      className="rounded bg-accent px-2.5 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80"
+                      className={pillButtonClass(isPage, "solid")}
                     >
                       Apply
                     </button>
@@ -1109,7 +1218,10 @@ function LLMSectionInner({
                       <TooltipTrigger asChild>
                         <button
                           onClick={handleDisconnect}
-                          className="ms-auto rounded border border-border px-2.5 py-1 text-[10px] font-medium text-muted-foreground hover:bg-destructive/10 hover:text-destructive hover:border-destructive/40"
+                          className={cn(
+                            pillButtonClass(isPage, "outline"),
+                            "ms-auto text-muted-foreground hover:bg-destructive/10 hover:text-destructive hover:border-destructive/40",
+                          )}
                         >
                           Disconnect
                         </button>
@@ -1122,23 +1234,43 @@ function LLMSectionInner({
                   )}
                 </div>
                 {testResult && testResult.ok && (
-                  <p className="flex items-center gap-1 text-[10px] text-green-500">
-                    <IconCheck size={10} />
+                  <p
+                    className={cn(
+                      "flex items-center gap-1 text-green-500",
+                      isPage ? "text-xs" : "text-[10px]",
+                    )}
+                  >
+                    <IconCheck size={isPage ? 14 : 10} />
                     Test passed — {testResult.latencyMs}ms
                   </p>
                 )}
                 {testResult && testResult.ok === false && (
-                  <p className="text-[10px] text-destructive">
+                  <p
+                    className={cn(
+                      "text-destructive",
+                      isPage ? "text-xs" : "text-[10px]",
+                    )}
+                  >
                     Test failed: {testResult.error}
                   </p>
                 )}
                 {disconnectError && (
-                  <p className="text-[10px] text-destructive">
+                  <p
+                    className={cn(
+                      "text-destructive",
+                      isPage ? "text-xs" : "text-[10px]",
+                    )}
+                  >
                     Disconnect failed: {disconnectError}
                   </p>
                 )}
                 {applyNote && (
-                  <p className="text-[10px] text-muted-foreground">
+                  <p
+                    className={cn(
+                      "text-muted-foreground",
+                      isPage ? "text-xs" : "text-[10px]",
+                    )}
+                  >
                     Changes take effect on next conversation
                   </p>
                 )}
@@ -2404,6 +2536,7 @@ interface SettingsPanelContentProps extends SettingsPanelProps {
   sections?: readonly SettingsSectionId[];
   showCapabilityStrip?: boolean;
   className?: string;
+  surface?: SettingsSurface;
 }
 
 function SettingsPanelContent({
@@ -2416,6 +2549,7 @@ function SettingsPanelContent({
   sections = ALL_SETTINGS_SECTIONS,
   showCapabilityStrip = true,
   className,
+  surface = "sidebar",
 }: SettingsPanelContentProps) {
   const { status: builder, loading: builderLoading } = useBuilderStatus();
   const connected = builder?.configured ?? false;
@@ -2500,225 +2634,300 @@ function SettingsPanelContent({
     return () => window.removeEventListener("hashchange", handleHash);
   }, [openSettingsSection, shouldShowSection]);
 
+  const isPage = surface === "page";
+
   return (
-    <div
-      className={cn("flex-1 min-h-0 overflow-y-auto p-3 space-y-2", className)}
-      style={{ overflowY: "auto" }}
-    >
-      {/* Agent capability mode (App vs Code) + app link */}
-      {(showDevToggle || devAppUrl) && (
-        <div className="space-y-2 pb-2 border-b border-border mb-2">
-          {showDevToggle && (
-            <SettingsSelect
-              label="Agent mode"
-              labelAdornment={
-                devAppUrl ? (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <a
-                        href={devAppUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        aria-label="Open app in new tab"
-                        className="flex items-center text-muted-foreground hover:text-foreground"
-                      >
-                        <IconExternalLink size={14} />
-                      </a>
-                    </TooltipTrigger>
-                    <TooltipContent>Open app in new tab</TooltipContent>
-                  </Tooltip>
-                ) : undefined
-              }
-              value={isDevMode ? "development" : "production"}
-              options={agentModeOptions}
-              onValueChange={(next) => {
-                const nextIsDev = next === "development";
-                if (nextIsDev !== isDevMode) onToggleDevMode();
-              }}
-            />
-          )}
-        </div>
-      )}
+    <SettingsSurfaceProvider surface={surface}>
+      <div
+        className={cn(
+          isPage ? "space-y-3" : "flex-1 min-h-0 overflow-y-auto p-3 space-y-2",
+          className,
+        )}
+        style={isPage ? undefined : { overflowY: "auto" }}
+      >
+        {/* Agent capability mode (App vs Code) + app link */}
+        {(showDevToggle || devAppUrl) && (
+          <div className="space-y-2 pb-2 border-b border-border mb-2">
+            {showDevToggle && (
+              <SettingsSelect
+                label="Agent mode"
+                labelAdornment={
+                  devAppUrl ? (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <a
+                          href={devAppUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          aria-label="Open app in new tab"
+                          className="flex items-center text-muted-foreground hover:text-foreground"
+                        >
+                          <IconExternalLink size={14} />
+                        </a>
+                      </TooltipTrigger>
+                      <TooltipContent>Open app in new tab</TooltipContent>
+                    </Tooltip>
+                  ) : undefined
+                }
+                value={isDevMode ? "development" : "production"}
+                options={agentModeOptions}
+                onValueChange={(next) => {
+                  const nextIsDev = next === "development";
+                  if (nextIsDev !== isDevMode) onToggleDevMode();
+                }}
+              />
+            )}
+          </div>
+        )}
 
-      {showCapabilityStrip && (
-        <CapabilityStatusStrip
-          isDevMode={isDevMode}
-          builderConnected={connected}
-          builderLoading={builderLoading}
-          builderBranchesAvailable={builderBranchesAvailable}
-          onOpenLlm={() => openSettingsSection("llm", true)}
-        />
-      )}
+        {showCapabilityStrip && (
+          <CapabilityStatusStrip
+            isDevMode={isDevMode}
+            builderConnected={connected}
+            builderLoading={builderLoading}
+            builderBranchesAvailable={builderBranchesAvailable}
+            onOpenLlm={() => openSettingsSection("llm", true)}
+          />
+        )}
 
-      {/* Account */}
-      {shouldShowSection("account") && (
-        <AccountSectionInner
-          open={openSection === "account"}
-          onToggle={() => toggle("account")}
-        />
-      )}
+        {/* Account */}
+        {shouldShowSection("account") && (
+          <AccountSectionInner
+            open={openSection === "account"}
+            onToggle={() => toggle("account")}
+          />
+        )}
 
-      {/* LLM */}
-      {shouldShowSection("llm") && (
-        <LLMSectionInner
-          builderFlow={builderFlow}
-          builderLoading={builderLoading}
-          connectUrl={connectUrl}
-          connected={connected}
-          orgName={orgName}
-          envManaged={envManaged}
-          credentialSource={credentialSource}
-          open={openSection === "llm"}
-          onToggle={() => toggle("llm")}
-        />
-      )}
+        {/* LLM */}
+        {shouldShowSection("llm") && (
+          <LLMSectionInner
+            builderFlow={builderFlow}
+            builderLoading={builderLoading}
+            connectUrl={connectUrl}
+            connected={connected}
+            orgName={orgName}
+            envManaged={envManaged}
+            credentialSource={credentialSource}
+            open={openSection === "llm"}
+            onToggle={() => toggle("llm")}
+          />
+        )}
 
-      {/* App default model */}
-      {shouldShowSection("app-models") && (
-        <AppModelDefaultsSectionInner
-          open={openSection === "app-models"}
-          onToggle={() => toggle("app-models")}
-        />
-      )}
+        {/* App default model */}
+        {shouldShowSection("app-models") && (
+          <AppModelDefaultsSectionInner
+            open={openSection === "app-models"}
+            onToggle={() => toggle("app-models")}
+          />
+        )}
 
-      {/* Agent limits */}
-      {shouldShowSection("limits") && (
-        <AgentLimitsSectionInner
-          open={openSection === "limits"}
-          onToggle={() => toggle("limits")}
-        />
-      )}
+        {/* Agent limits */}
+        {shouldShowSection("limits") && (
+          <AgentLimitsSectionInner
+            open={openSection === "limits"}
+            onToggle={() => toggle("limits")}
+          />
+        )}
 
-      {/* Voice transcription */}
-      {shouldShowSection("voice") && (
-        <SettingsSection
-          id={settingsSectionDomId("voice")}
-          icon={<IconMicrophone size={14} />}
-          title="Voice Transcription"
-          subtitle="How the composer microphone turns your voice into text."
-          open={openSection === "voice"}
-          onToggle={() => toggle("voice")}
-        >
-          <VoiceTranscriptionSection />
-        </SettingsSection>
-      )}
+        {/* Voice transcription */}
+        {shouldShowSection("voice") && (
+          <SettingsSection
+            id={settingsSectionDomId("voice")}
+            icon={<IconMicrophone size={14} />}
+            title="Voice Transcription"
+            subtitle="How the composer microphone turns your voice into text."
+            open={openSection === "voice"}
+            onToggle={() => toggle("voice")}
+          >
+            <VoiceTranscriptionSection />
+          </SettingsSection>
+        )}
 
-      {/* Demo mode */}
-      {shouldShowSection("demo-mode") && (
-        <SettingsSection
-          id={settingsSectionDomId("demo-mode")}
-          icon={<IconEyeOff size={14} />}
-          title="Demo mode"
-          subtitle="Replace names, emails, and numbers with realistic fake data everywhere — in the UI and what the agent sees. IDs and structure are preserved so the app keeps working."
-          open={openSection === "demo-mode"}
-          onToggle={() => toggle("demo-mode")}
-        >
-          <DemoModeSection />
-        </SettingsSection>
-      )}
+        {/* Demo mode */}
+        {shouldShowSection("demo-mode") && (
+          <SettingsSection
+            id={settingsSectionDomId("demo-mode")}
+            icon={<IconEyeOff size={14} />}
+            title="Demo mode"
+            subtitle="Replace names, emails, and numbers with realistic fake data everywhere — in the UI and what the agent sees. IDs and structure are preserved so the app keeps working."
+            open={openSection === "demo-mode"}
+            onToggle={() => toggle("demo-mode")}
+          >
+            <DemoModeSection />
+          </SettingsSection>
+        )}
 
-      {/* Automations */}
-      {shouldShowSection("automations") && (
-        <SettingsSection
-          id={settingsSectionDomId("automations")}
-          icon={<IconBolt size={14} />}
-          title="Automations"
-          subtitle="Event-triggered and scheduled automations."
-          open={openSection === "automations"}
-          onToggle={() => toggle("automations")}
-        >
-          <AutomationsSection />
-        </SettingsSection>
-      )}
+        {/* Automations */}
+        {shouldShowSection("automations") && (
+          <SettingsSection
+            id={settingsSectionDomId("automations")}
+            icon={<IconBolt size={14} />}
+            title="Automations"
+            subtitle="Event-triggered and scheduled automations."
+            open={openSection === "automations"}
+            onToggle={() => toggle("automations")}
+          >
+            <AutomationsSection />
+          </SettingsSection>
+        )}
 
-      {/* API Keys & Connections */}
-      {shouldShowSection("secrets") && (
-        <SettingsSection
-          id={settingsSectionDomId("secrets")}
-          icon={<IconKey size={14} />}
-          title="API Keys & Connections"
-          subtitle="Service credentials and automation keys."
-          open={openSection === "secrets"}
-          onToggle={() => toggle("secrets")}
-        >
-          <SecretsSection focusKey={focusSecretKey} />
-        </SettingsSection>
-      )}
+        {/* API Keys & Connections */}
+        {shouldShowSection("secrets") && (
+          <SettingsSection
+            id={settingsSectionDomId("secrets")}
+            icon={<IconKey size={14} />}
+            title="API Keys & Connections"
+            subtitle="Service credentials and automation keys."
+            open={openSection === "secrets"}
+            onToggle={() => toggle("secrets")}
+          >
+            <SecretsSection focusKey={focusSecretKey} />
+          </SettingsSection>
+        )}
 
-      {/* Hosting */}
-      {shouldShowSection("hosting") && (
-        <SettingsSection
-          id={settingsSectionDomId("hosting")}
-          icon={<IconCloud size={14} />}
-          title="Hosting"
-          subtitle="Deploy your app to the cloud."
-          connected={connected}
-          open={openSection === "hosting"}
-          onToggle={() => toggle("hosting")}
-        >
-          <div className="space-y-2">
-            <UseBuilderCard
-              builderFlow={builderFlow}
-              connectUrl={connectUrl}
-              connected={connected}
-              orgName={orgName}
-              envManaged={envManaged}
-              credentialSource={credentialSource}
-              trackingSource="hosting_settings"
-              trackingFlow="hosting"
-            />
-            <ManualSetupCard
-              hint="Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target."
-              docsUrl="https://www.builder.io/c/docs/agent-native-deployment"
-              dim={connected}
-            />
-          </div>
-        </SettingsSection>
-      )}
+        {/* Hosting */}
+        {shouldShowSection("hosting") && (
+          <SettingsSection
+            id={settingsSectionDomId("hosting")}
+            icon={<IconCloud size={14} />}
+            title="Hosting"
+            subtitle="Deploy your app to the cloud."
+            connected={connected}
+            open={openSection === "hosting"}
+            onToggle={() => toggle("hosting")}
+          >
+            <div className="space-y-2">
+              <UseBuilderCard
+                builderFlow={builderFlow}
+                connectUrl={connectUrl}
+                connected={connected}
+                orgName={orgName}
+                envManaged={envManaged}
+                credentialSource={credentialSource}
+                trackingSource="hosting_settings"
+                trackingFlow="hosting"
+              />
+              <ManualSetupCard
+                hint="Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target."
+                docsUrl="https://www.builder.io/c/docs/agent-native-deployment"
+                dim={connected}
+              />
+            </div>
+          </SettingsSection>
+        )}
 
-      {/* Database */}
-      {shouldShowSection("database") && (
-        <SettingsSection
-          id={settingsSectionDomId("database")}
-          icon={<IconDatabase size={14} />}
-          title="Database"
-          subtitle="Connect a cloud database for persistent storage."
-          connected={connected}
-          open={openSection === "database"}
-          onToggle={() => toggle("database")}
-        >
-          <div className="space-y-2">
-            <UseBuilderCard
-              builderFlow={builderFlow}
-              connectUrl={connectUrl}
-              connected={connected}
-              orgName={orgName}
-              envManaged={envManaged}
-              credentialSource={credentialSource}
-              trackingSource="database_settings"
-              trackingFlow="database"
-            />
-            <ManualSetupCard
-              hint="Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, any Postgres/SQLite database, or local PGlite with pglite:./data/pglite."
-              docsUrl="https://www.builder.io/c/docs/agent-native-database"
-              dim={connected}
-            />
-          </div>
-        </SettingsSection>
-      )}
+        {/* Database */}
+        {shouldShowSection("database") && (
+          <SettingsSection
+            id={settingsSectionDomId("database")}
+            icon={<IconDatabase size={14} />}
+            title="Database"
+            subtitle="Connect a cloud database for persistent storage."
+            connected={connected}
+            open={openSection === "database"}
+            onToggle={() => toggle("database")}
+          >
+            <div className="space-y-2">
+              <UseBuilderCard
+                builderFlow={builderFlow}
+                connectUrl={connectUrl}
+                connected={connected}
+                orgName={orgName}
+                envManaged={envManaged}
+                credentialSource={credentialSource}
+                trackingSource="database_settings"
+                trackingFlow="database"
+              />
+              <ManualSetupCard
+                hint="Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, any Postgres/SQLite database, or local PGlite with pglite:./data/pglite."
+                docsUrl="https://www.builder.io/c/docs/agent-native-database"
+                dim={connected}
+              />
+            </div>
+          </SettingsSection>
+        )}
 
-      {/* File uploads */}
-      {shouldShowSection("uploads") && (
-        <SettingsSection
-          id={settingsSectionDomId("uploads")}
-          icon={<IconUpload size={14} />}
-          title="File uploads"
-          subtitle="Where user-uploaded files (avatars, chat attachments) are stored."
-          connected={connected}
-          open={openSection === "uploads"}
-          onToggle={() => toggle("uploads")}
-        >
-          <div className="space-y-2">
+        {/* File uploads */}
+        {shouldShowSection("uploads") && (
+          <SettingsSection
+            id={settingsSectionDomId("uploads")}
+            icon={<IconUpload size={14} />}
+            title="File uploads"
+            subtitle="Where user-uploaded files (avatars, chat attachments) are stored."
+            connected={connected}
+            open={openSection === "uploads"}
+            onToggle={() => toggle("uploads")}
+          >
+            <div className="space-y-2">
+              <UseBuilderCard
+                builderFlow={builderFlow}
+                connectUrl={connectUrl}
+                connected={connected}
+                orgName={orgName}
+                envManaged={envManaged}
+                credentialSource={credentialSource}
+                trackingSource="file_upload_settings"
+                trackingFlow="file_upload"
+              />
+              <ManualSetupCard
+                hint="Without a provider, files are stored as base64 in your database. Fine for dev, not recommended for production."
+                docsUrl="https://www.builder.io/c/docs/agent-native-file-uploads"
+                dim={connected}
+              />
+            </div>
+          </SettingsSection>
+        )}
+
+        {/* Authentication */}
+        {shouldShowSection("auth") && (
+          <SettingsSection
+            id={settingsSectionDomId("auth")}
+            icon={<IconShield size={14} />}
+            title="Authentication"
+            subtitle="Set up user authentication and access control."
+            connected={connected}
+            open={openSection === "auth"}
+            onToggle={() => toggle("auth")}
+          >
+            <div className="space-y-2">
+              <UseBuilderCard
+                builderFlow={builderFlow}
+                connectUrl={connectUrl}
+                connected={connected}
+                orgName={orgName}
+                envManaged={envManaged}
+                credentialSource={credentialSource}
+                trackingSource="auth_settings"
+                trackingFlow="auth"
+              />
+              <ManualSetupCard
+                hint="Configure Better Auth with BETTER_AUTH_SECRET and optional Google/GitHub OAuth providers."
+                docsUrl="https://www.builder.io/c/docs/agent-native-authentication"
+                dim={connected}
+              />
+            </div>
+          </SettingsSection>
+        )}
+
+        {/* Email */}
+        {shouldShowSection("email") && (
+          <EmailSectionInner
+            open={openSection === "email"}
+            onToggle={() => toggle("email")}
+          />
+        )}
+
+        {/* Browser Automation */}
+        {shouldShowSection("browser") && (
+          <SettingsSection
+            id={settingsSectionDomId("browser")}
+            icon={<IconBrowser size={14} />}
+            title="Browser Automation"
+            subtitle="Let agents control a real browser for web tasks."
+            connected={connected}
+            open={openSection === "browser"}
+            onToggle={() => toggle("browser")}
+          >
             <UseBuilderCard
               builderFlow={builderFlow}
               connectUrl={connectUrl}
@@ -2726,30 +2935,22 @@ function SettingsPanelContent({
               orgName={orgName}
               envManaged={envManaged}
               credentialSource={credentialSource}
-              trackingSource="file_upload_settings"
-              trackingFlow="file_upload"
-            />
-            <ManualSetupCard
-              hint="Without a provider, files are stored as base64 in your database. Fine for dev, not recommended for production."
-              docsUrl="https://www.builder.io/c/docs/agent-native-file-uploads"
-              dim={connected}
+              trackingSource="browser_settings"
+              trackingFlow="browser_automation"
             />
-          </div>
-        </SettingsSection>
-      )}
+          </SettingsSection>
+        )}
 
-      {/* Authentication */}
-      {shouldShowSection("auth") && (
-        <SettingsSection
-          id={settingsSectionDomId("auth")}
-          icon={<IconShield size={14} />}
-          title="Authentication"
-          subtitle="Set up user authentication and access control."
-          connected={connected}
-          open={openSection === "auth"}
-          onToggle={() => toggle("auth")}
-        >
-          <div className="space-y-2">
+        {builderBranchesAvailable && shouldShowSection("background") && (
+          <SettingsSection
+            id={settingsSectionDomId("background")}
+            icon={<IconGitBranch size={14} />}
+            title="Background Agent"
+            subtitle="Make code changes from production mode via Builder."
+            connected={connected}
+            open={openSection === "background"}
+            onToggle={() => toggle("background")}
+          >
             <UseBuilderCard
               builderFlow={builderFlow}
               connectUrl={connectUrl}
@@ -2757,117 +2958,57 @@ function SettingsPanelContent({
               orgName={orgName}
               envManaged={envManaged}
               credentialSource={credentialSource}
-              trackingSource="auth_settings"
-              trackingFlow="auth"
-            />
-            <ManualSetupCard
-              hint="Configure Better Auth with BETTER_AUTH_SECRET and optional Google/GitHub OAuth providers."
-              docsUrl="https://www.builder.io/c/docs/agent-native-authentication"
-              dim={connected}
+              trackingSource="background_agent_settings"
+              trackingFlow="background_agent"
             />
-          </div>
-        </SettingsSection>
-      )}
-
-      {/* Email */}
-      {shouldShowSection("email") && (
-        <EmailSectionInner
-          open={openSection === "email"}
-          onToggle={() => toggle("email")}
-        />
-      )}
-
-      {/* Browser Automation */}
-      {shouldShowSection("browser") && (
-        <SettingsSection
-          id={settingsSectionDomId("browser")}
-          icon={<IconBrowser size={14} />}
-          title="Browser Automation"
-          subtitle="Let agents control a real browser for web tasks."
-          connected={connected}
-          open={openSection === "browser"}
-          onToggle={() => toggle("browser")}
-        >
-          <UseBuilderCard
-            builderFlow={builderFlow}
-            connectUrl={connectUrl}
-            connected={connected}
-            orgName={orgName}
-            envManaged={envManaged}
-            credentialSource={credentialSource}
-            trackingSource="browser_settings"
-            trackingFlow="browser_automation"
-          />
-        </SettingsSection>
-      )}
-
-      {builderBranchesAvailable && shouldShowSection("background") && (
-        <SettingsSection
-          id={settingsSectionDomId("background")}
-          icon={<IconGitBranch size={14} />}
-          title="Background Agent"
-          subtitle="Make code changes from production mode via Builder."
-          connected={connected}
-          open={openSection === "background"}
-          onToggle={() => toggle("background")}
-        >
-          <UseBuilderCard
-            builderFlow={builderFlow}
-            connectUrl={connectUrl}
-            connected={connected}
-            orgName={orgName}
-            envManaged={envManaged}
-            credentialSource={credentialSource}
-            trackingSource="background_agent_settings"
-            trackingFlow="background_agent"
-          />
-        </SettingsSection>
-      )}
+          </SettingsSection>
+        )}
 
-      {/* Integrations */}
-      {shouldShowSection("integrations") && (
-        <SettingsSection
-          id={settingsSectionDomId("integrations")}
-          icon={<IconPlugConnected size={14} />}
-          title="Integrations"
-          subtitle="Connect messaging platforms and external services."
-          open={openSection === "integrations"}
-          onToggle={() => toggle("integrations")}
-        >
-          <Suspense fallback={null}>
-            <IntegrationsPanel />
-          </Suspense>
-        </SettingsSection>
-      )}
+        {/* Integrations */}
+        {shouldShowSection("integrations") && (
+          <SettingsSection
+            id={settingsSectionDomId("integrations")}
+            icon={<IconPlugConnected size={14} />}
+            title="Integrations"
+            subtitle="Connect messaging platforms and external services."
+            open={openSection === "integrations"}
+            onToggle={() => toggle("integrations")}
+          >
+            <Suspense fallback={null}>
+              <IntegrationsPanel />
+            </Suspense>
+          </SettingsSection>
+        )}
 
-      {/* Usage & spend */}
-      {shouldShowSection("usage") && (
-        <SettingsSection
-          id={settingsSectionDomId("usage")}
-          icon={<IconCoin size={14} />}
-          title="Usage"
-          subtitle="Track token consumption and estimated cost — broken down by chat, automations, and background jobs."
-          open={openSection === "usage"}
-          onToggle={() => toggle("usage")}
-        >
-          <UsageSection />
-        </SettingsSection>
-      )}
+        {/* Usage & spend */}
+        {shouldShowSection("usage") && (
+          <SettingsSection
+            id={settingsSectionDomId("usage")}
+            icon={<IconCoin size={14} />}
+            title="Usage"
+            subtitle="Track token consumption and estimated cost — broken down by chat, automations, and background jobs."
+            open={openSection === "usage"}
+            onToggle={() => toggle("usage")}
+          >
+            <UsageSection />
+          </SettingsSection>
+        )}
 
-      {/* A2A Agents */}
-      {shouldShowSection("a2a") && (
-        <SettingsSection
-          id={settingsSectionDomId("a2a")}
-          icon={<IconTopologyRing2 size={14} />}
-          title="Connected Agents (A2A)"
-          subtitle="Manage remote agents connected via the A2A protocol."
-          open={openSection === "a2a"}
-          onToggle={() => toggle("a2a")}
-        >
-          <AgentsSection />
-        </SettingsSection>
-      )}
-    </div>
+        {/* A2A Agents */}
+        {shouldShowSection("a2a") && (
+          <SettingsSection
+            id={settingsSectionDomId("a2a")}
+            icon={<IconTopologyRing2 size={14} />}
+            title="Connected Agents (A2A)"
+            subtitle="Manage remote agents connected via the A2A protocol."
+            open={openSection === "a2a"}
+            onToggle={() => toggle("a2a")}
+          >
+            <AgentsSection />
+          </SettingsSection>
+        )}
+      </div>
+    </SettingsSurfaceProvider>
   );
 }
 
@@ -2899,9 +3040,10 @@ export function useAgentSettingsTabs(): SettingsTabItem[] {
         content: (
           <SettingsPanelContent
             {...baseProps}
+            surface="page"
             sections={AGENT_SETTINGS_SECTIONS}
             showCapabilityStrip={false}
-            className="mx-auto w-full max-w-3xl p-0"
+            className="mx-auto w-full max-w-2xl"
           />
         ),
       },
@@ -2914,9 +3056,10 @@ export function useAgentSettingsTabs(): SettingsTabItem[] {
         content: (
           <SettingsPanelContent
             {...baseProps}
+            surface="page"
             sections={CONNECTION_SETTINGS_SECTIONS}
             showCapabilityStrip={false}
-            className="mx-auto w-full max-w-3xl p-0"
+            className="mx-auto w-full max-w-2xl"
           />
         ),
       },
@@ -2929,9 +3072,10 @@ export function useAgentSettingsTabs(): SettingsTabItem[] {
         content: (
           <SettingsPanelContent
             {...baseProps}
+            surface="page"
             sections={WORKSPACE_SETTINGS_SECTIONS}
             showCapabilityStrip={false}
-            className="mx-auto w-full max-w-3xl p-0"
+            className="mx-auto w-full max-w-2xl"
           />
         ),
       },