@agent-native/core 0.91.2 → 0.92.1

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

@@ -23,6 +23,7 @@ import {
   IconGauge,
   IconUserCircle,
   IconApps,
+  IconUsersGroup,
 } from "@tabler/icons-react";
 import React, {
   Suspense,
@@ -43,6 +44,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "../components/ui/tooltip.js";
+import { TeamPage } from "../org/TeamPage.js";
 import { callAction } from "../use-action.js";
 import { uploadAvatar, useAvatarUrl } from "../use-avatar.js";
 import { useDevMode } from "../use-dev-mode.js";
@@ -52,7 +54,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 +109,55 @@ 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]");
+}
+
+// Secondary label / row-title size (e.g. "This app", provider names).
+function subTextClass(isPage: boolean): string {
+  return isPage ? "text-sm" : "text-[11px]";
+}
+
+// Helper / hint / status note size.
+function noteTextClass(isPage: boolean): string {
+  return isPage ? "text-xs" : "text-[10px]";
+}
+
+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 +171,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 +208,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 +224,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 +423,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 +471,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 +495,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 +567,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 +600,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 +727,7 @@ function LLMSectionInner({
   open?: boolean;
   onToggle?: () => void;
 }) {
+  const isPage = useSettingsSurface() === "page";
   const [envKeys, setEnvKeys] = useState<
     Array<{ key: string; configured: boolean }>
   >([]);
@@ -926,9 +1037,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 +1048,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 +1158,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 +1177,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 +1203,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 +1220,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 +1230,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 +1246,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>
                 )}
@@ -1185,6 +1329,7 @@ function AppModelDefaultsSectionInner({
   open?: boolean;
   onToggle?: () => void;
 }) {
+  const isPage = useSettingsSurface() === "page";
   const [settings, setSettings] = useState<AppModelDefaultsResponse | null>(
     null,
   );
@@ -1339,19 +1484,39 @@ function AppModelDefaultsSectionInner({
         <SettingsSkeleton lines={2} />
       ) : settings ? (
         <div className="space-y-2">
-          <div className="rounded-md border border-border bg-accent/20 px-2.5 py-2">
+          <div
+            className={cn(
+              "rounded-md border border-border bg-accent/20",
+              isPage ? "px-3.5 py-3" : "px-2.5 py-2",
+            )}
+          >
             <div className="mb-2 flex items-center justify-between gap-2">
               <div className="min-w-0">
-                <p className="truncate text-[11px] font-medium text-foreground">
+                <p
+                  className={cn(
+                    "truncate font-medium text-foreground",
+                    subTextClass(isPage),
+                  )}
+                >
                   {friendlyAppName(settings.appId) || "This app"}
                 </p>
-                <p className="mt-0.5 text-[10px] text-muted-foreground">
+                <p
+                  className={cn(
+                    "mt-0.5 text-muted-foreground",
+                    noteTextClass(isPage),
+                  )}
+                >
                   {hasAppDefault
                     ? `Applies to ${scopeLabel}.`
                     : "Using the global LLM default."}
                 </p>
               </div>
-              <span className="shrink-0 rounded-full bg-background px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+              <span
+                className={cn(
+                  "shrink-0 rounded-full bg-background px-2 py-0.5 font-medium text-muted-foreground",
+                  noteTextClass(isPage),
+                )}
+              >
                 {settings.source}
               </span>
             </div>
@@ -1372,7 +1537,7 @@ function AppModelDefaultsSectionInner({
               />
 
               <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={`app-model-suggestions-${selectedEngine}`}
@@ -1388,8 +1553,8 @@ function AppModelDefaultsSectionInner({
                   placeholder={selectedEngineInfo?.defaultModel ?? "model-id"}
                   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 disabled:opacity-60"
-                  style={CONTROL_STYLE}
+                  className={cn(textInputClass(isPage), "disabled:opacity-60")}
+                  style={isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE}
                 />
                 {modelOptions.length > 0 && (
                   <datalist id={`app-model-suggestions-${selectedEngine}`}>
@@ -1409,12 +1574,15 @@ function AppModelDefaultsSectionInner({
                   type="button"
                   onClick={save}
                   disabled={!hasPendingChange || saving}
-                  className="inline-flex h-8 items-center gap-1 rounded bg-accent px-2.5 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"
                   )}
@@ -1423,7 +1591,7 @@ function AppModelDefaultsSectionInner({
                   type="button"
                   onClick={reset}
                   disabled={!settings.canUpdate || !hasAppDefault || saving}
-                  className="h-8 rounded border border-border px-2.5 text-[10px] font-medium text-muted-foreground hover:bg-accent/40 hover:text-foreground disabled:opacity-40"
+                  className={pillButtonClass(isPage, "outline")}
                 >
                   Reset
                 </button>
@@ -1431,29 +1599,46 @@ function AppModelDefaultsSectionInner({
             </div>
 
             {!settings.canUpdate && (
-              <p className="mt-2 text-[10px] text-muted-foreground">
+              <p
+                className={cn(
+                  "mt-2 text-muted-foreground",
+                  noteTextClass(isPage),
+                )}
+              >
                 Only organization owners and admins can change app model
                 defaults.
               </p>
             )}
             {selectedEngineInfo?.packageInstalled === false ? (
-              <p className="mt-2 text-[10px] text-muted-foreground">
+              <p
+                className={cn(
+                  "mt-2 text-muted-foreground",
+                  noteTextClass(isPage),
+                )}
+              >
                 This app does not include the optional runtime packages for this
                 provider.
               </p>
             ) : selectedEngineInfo && !selectedEngineInfo.configured ? (
-              <p className="mt-2 text-[10px] text-muted-foreground">
+              <p
+                className={cn(
+                  "mt-2 text-muted-foreground",
+                  noteTextClass(isPage),
+                )}
+              >
                 Credentials for this provider were not detected; runtime will
                 fall back if the model cannot be used.
               </p>
             ) : null}
             {error && (
-              <p className="mt-2 text-[10px] text-destructive">{error}</p>
+              <p className={cn("mt-2 text-destructive", noteTextClass(isPage))}>
+                {error}
+              </p>
             )}
           </div>
         </div>
       ) : (
-        <p className="text-[10px] text-muted-foreground">
+        <p className={cn("text-muted-foreground", noteTextClass(isPage))}>
           App model defaults are unavailable.
         </p>
       )}
@@ -1470,6 +1655,10 @@ function EmailSectionInner({
   open?: boolean;
   onToggle?: () => void;
 }) {
+  const isPage = useSettingsSurface() === "page";
+  const emailInputCls = cn(textInputClass(isPage), "flex-1");
+  const emailBtnCls = pillButtonClass(isPage, "solid");
+  const emailIconSize = isPage ? 14 : 10;
   const [envKeys, setEnvKeys] = useState<
     Array<{ key: string; configured: boolean }>
   >([]);
@@ -1558,7 +1747,12 @@ function EmailSectionInner({
       ) : (
         <div className="space-y-2">
           <label className="block space-y-1">
-            <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
+            <span
+              className={cn(
+                "uppercase tracking-wide text-muted-foreground",
+                noteTextClass(isPage),
+              )}
+            >
               Provider
             </span>
             <select
@@ -1566,7 +1760,8 @@ function EmailSectionInner({
               onChange={(e) =>
                 setEmailProvider(e.target.value as "resend" | "sendgrid")
               }
-              className="w-full rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none focus:ring-1 focus:ring-accent"
+              className={cn(textInputClass(isPage), "w-full")}
+              style={isPage ? CONTROL_STYLE_PAGE : undefined}
             >
               <option value="resend">Resend</option>
               <option value="sendgrid">SendGrid</option>
@@ -1580,8 +1775,13 @@ function EmailSectionInner({
               docsLabel="Get a Resend key"
             >
               {resendConfigured ? (
-                <div className="mb-1 flex items-center gap-1.5 text-[10px] text-green-500">
-                  <IconCheck size={10} />
+                <div
+                  className={cn(
+                    "mb-1 flex items-center gap-1.5 text-green-500",
+                    noteTextClass(isPage),
+                  )}
+                >
+                  <IconCheck size={emailIconSize} />
                   RESEND_API_KEY configured
                 </div>
               ) : (
@@ -1594,12 +1794,12 @@ function EmailSectionInner({
                       if (e.key === "Enter") saveResend();
                     }}
                     placeholder="re_..."
-                    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={emailInputCls}
                   />
                   <button
                     onClick={saveResend}
                     disabled={!resendKey.trim() || saving}
-                    className="rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40"
+                    className={emailBtnCls}
                   >
                     {saving ? (
                       <IconLoader2 size={10} className="animate-spin" />
@@ -1612,8 +1812,13 @@ function EmailSectionInner({
                 </div>
               )}
               {fromConfigured ? (
-                <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",
+                    noteTextClass(isPage),
+                  )}
+                >
+                  <IconCheck size={emailIconSize} />
                   EMAIL_FROM configured
                 </div>
               ) : (
@@ -1626,13 +1831,13 @@ function EmailSectionInner({
                       if (e.key === "Enter") saveResend();
                     }}
                     placeholder="From address - e.g. Acme <hi@acme.com>"
-                    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={emailInputCls}
                   />
                   {!resendConfigured ? null : (
                     <button
                       onClick={saveResend}
                       disabled={!fromAddr.trim() || saving}
-                      className="rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40"
+                      className={emailBtnCls}
                     >
                       {saving ? (
                         <IconLoader2 size={10} className="animate-spin" />
@@ -1653,8 +1858,13 @@ function EmailSectionInner({
               docsLabel="Get a SendGrid key"
             >
               {sendgridConfigured ? (
-                <div className="mb-1 flex items-center gap-1.5 text-[10px] text-green-500">
-                  <IconCheck size={10} />
+                <div
+                  className={cn(
+                    "mb-1 flex items-center gap-1.5 text-green-500",
+                    noteTextClass(isPage),
+                  )}
+                >
+                  <IconCheck size={emailIconSize} />
                   SENDGRID_API_KEY configured
                 </div>
               ) : (
@@ -1667,12 +1877,12 @@ function EmailSectionInner({
                       if (e.key === "Enter") saveSendgrid();
                     }}
                     placeholder="SG...."
-                    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={emailInputCls}
                   />
                   <button
                     onClick={saveSendgrid}
                     disabled={!sendgridKey.trim() || saving}
-                    className="rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40"
+                    className={emailBtnCls}
                   >
                     {saving ? (
                       <IconLoader2 size={10} className="animate-spin" />
@@ -1685,8 +1895,13 @@ function EmailSectionInner({
                 </div>
               )}
               {fromConfigured ? (
-                <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",
+                    noteTextClass(isPage),
+                  )}
+                >
+                  <IconCheck size={emailIconSize} />
                   EMAIL_FROM configured
                 </div>
               ) : (
@@ -1699,13 +1914,13 @@ function EmailSectionInner({
                       if (e.key === "Enter") saveSendgrid();
                     }}
                     placeholder="From address - e.g. Acme <hi@acme.com>"
-                    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={emailInputCls}
                   />
                   {!sendgridConfigured ? null : (
                     <button
                       onClick={saveSendgrid}
                       disabled={!fromAddr.trim() || saving}
-                      className="rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40"
+                      className={emailBtnCls}
                     >
                       {saving ? (
                         <IconLoader2 size={10} className="animate-spin" />
@@ -1747,6 +1962,7 @@ function AgentLimitsSectionInner({
   open?: boolean;
   onToggle?: () => void;
 }) {
+  const isPage = useSettingsSurface() === "page";
   const [settings, setSettings] = useState<AgentLoopSettingsResponse | null>(
     null,
   );
@@ -1882,18 +2098,38 @@ function AgentLimitsSectionInner({
         <SettingsSkeleton lines={2} />
       ) : settings ? (
         <div className="space-y-2">
-          <div className="rounded-md border border-border px-2.5 py-2 bg-accent/20">
+          <div
+            className={cn(
+              "rounded-md border border-border bg-accent/20",
+              isPage ? "px-3.5 py-3" : "px-2.5 py-2",
+            )}
+          >
             <div className="flex items-center justify-between gap-2">
               <div>
-                <p className="text-[11px] font-medium text-foreground">
+                <p
+                  className={cn(
+                    "font-medium text-foreground",
+                    subTextClass(isPage),
+                  )}
+                >
                   Max iterations
                 </p>
-                <p className="mt-0.5 text-[10px] text-muted-foreground">
+                <p
+                  className={cn(
+                    "mt-0.5 text-muted-foreground",
+                    noteTextClass(isPage),
+                  )}
+                >
                   Applies to {scopeLabel}. Default is{" "}
                   {settings.defaultMaxIterations.toLocaleString()}.
                 </p>
               </div>
-              <span className="rounded-full bg-background px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+              <span
+                className={cn(
+                  "rounded-full bg-background px-2 py-0.5 font-medium text-muted-foreground",
+                  noteTextClass(isPage),
+                )}
+              >
                 {settings.source}
               </span>
             </div>
@@ -1911,18 +2147,25 @@ function AgentLimitsSectionInner({
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && hasPendingChange) void save();
                 }}
-                className="h-8 min-w-0 flex-1 rounded border border-border bg-background px-2 text-[11px] text-foreground outline-none focus:ring-1 focus:ring-accent disabled:opacity-60"
+                className={cn(
+                  textInputClass(isPage),
+                  "min-w-0 flex-1 disabled:opacity-60",
+                )}
+                style={isPage ? CONTROL_STYLE_PAGE : undefined}
               />
               <button
                 type="button"
                 onClick={save}
                 disabled={!hasPendingChange || saving}
-                className="inline-flex h-8 items-center gap-1 rounded bg-accent px-2.5 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"
                 )}
@@ -1935,23 +2178,30 @@ function AgentLimitsSectionInner({
                   saving ||
                   settings.maxIterations === settings.defaultMaxIterations
                 }
-                className="h-8 rounded border border-border px-2.5 text-[10px] font-medium text-muted-foreground hover:bg-accent/40 hover:text-foreground disabled:opacity-40"
+                className={pillButtonClass(isPage, "outline")}
               >
                 Reset
               </button>
             </div>
             {!settings.canUpdate && (
-              <p className="mt-2 text-[10px] text-muted-foreground">
+              <p
+                className={cn(
+                  "mt-2 text-muted-foreground",
+                  noteTextClass(isPage),
+                )}
+              >
                 Only organization owners and admins can change this limit.
               </p>
             )}
             {error && (
-              <p className="mt-2 text-[10px] text-destructive">{error}</p>
+              <p className={cn("mt-2 text-destructive", noteTextClass(isPage))}>
+                {error}
+              </p>
             )}
           </div>
         </div>
       ) : (
-        <p className="text-[10px] text-muted-foreground">
+        <p className={cn("text-muted-foreground", noteTextClass(isPage))}>
           Agent limit settings are unavailable.
         </p>
       )}
@@ -2306,6 +2556,7 @@ function AccountSectionInner({
   open: boolean;
   onToggle: () => void;
 }) {
+  const isPage = useSettingsSurface() === "page";
   const { session, isLoading } = useSession();
   const email = session?.email;
   const avatarUrl = useAvatarUrl(email);
@@ -2349,7 +2600,12 @@ function AccountSectionInner({
       onToggle={onToggle}
     >
       <div className="flex items-center gap-3">
-        <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-accent text-[13px] font-semibold text-muted-foreground">
+        <div
+          className={cn(
+            "flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-accent font-semibold text-muted-foreground",
+            isPage ? "h-14 w-14 text-[15px]" : "h-12 w-12 text-[13px]",
+          )}
+        >
           {avatarUrl ? (
             <img
               src={avatarUrl}
@@ -2361,21 +2617,36 @@ function AccountSectionInner({
           )}
         </div>
         <div className="min-w-0 flex-1">
-          <p className="truncate text-[12px] font-medium text-foreground">
+          <p
+            className={cn(
+              "truncate font-medium text-foreground",
+              isPage ? "text-sm" : "text-[12px]",
+            )}
+          >
             {isLoading ? "Loading..." : displayName}
           </p>
           {email && (
-            <p className="truncate text-[11px] text-muted-foreground">
+            <p
+              className={cn(
+                "truncate text-muted-foreground",
+                subTextClass(isPage),
+              )}
+            >
               {email}
             </p>
           )}
           {status === "saved" && (
-            <p className="mt-1 text-[11px] text-green-600 dark:text-green-400">
+            <p
+              className={cn(
+                "mt-1 text-green-600 dark:text-green-400",
+                subTextClass(isPage),
+              )}
+            >
               Photo updated
             </p>
           )}
           {status === "error" && (
-            <p className="mt-1 text-[11px] text-destructive">
+            <p className={cn("mt-1 text-destructive", subTextClass(isPage))}>
               Could not update photo
             </p>
           )}
@@ -2391,7 +2662,10 @@ function AccountSectionInner({
           type="button"
           disabled={!email || uploading}
           onClick={() => fileInputRef.current?.click()}
-          className="inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-border bg-background px-3 text-[12px] font-medium text-foreground transition-colors hover:bg-accent/50 disabled:cursor-not-allowed disabled:opacity-50"
+          className={cn(
+            pillButtonClass(isPage, "outline"),
+            "shrink-0 justify-center",
+          )}
         >
           {uploading ? "Uploading..." : "Change photo"}
         </button>
@@ -2404,6 +2678,7 @@ interface SettingsPanelContentProps extends SettingsPanelProps {
   sections?: readonly SettingsSectionId[];
   showCapabilityStrip?: boolean;
   className?: string;
+  surface?: SettingsSurface;
 }
 
 function SettingsPanelContent({
@@ -2416,6 +2691,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 +2776,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 +3077,22 @@ function SettingsPanelContent({
               orgName={orgName}
               envManaged={envManaged}
               credentialSource={credentialSource}
-              trackingSource="file_upload_settings"
-              trackingFlow="file_upload"
+              trackingSource="browser_settings"
+              trackingFlow="browser_automation"
             />
-            <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>
-      )}
+          </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 +3100,57 @@ function SettingsPanelContent({
               orgName={orgName}
               envManaged={envManaged}
               credentialSource={credentialSource}
-              trackingSource="auth_settings"
-              trackingFlow="auth"
+              trackingSource="background_agent_settings"
+              trackingFlow="background_agent"
             />
-            <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}
-            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 +3182,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,12 +3198,24 @@ 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"
           />
         ),
       },
+      {
+        id: "organization",
+        label: "Organization",
+        icon: IconUsersGroup,
+        keywords: "organization org team members invites collaborators",
+        content: (
+          <div className="mx-auto w-full max-w-2xl">
+            <TeamPage showTitle={false} />
+          </div>
+        ),
+      },
       {
         id: "workspace",
         label: "Workspace",
@@ -2929,9 +3225,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"
           />
         ),
       },