[feat] Put the Advanced drawer on a section rail

web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx

@@ -1217,12 +1217,11 @@ export const AgentTemplateControl = memo(function AgentTemplateControl({
             <SectionDrawer
                 open={openSection === "advanced"}
                 title="Advanced"
-                icon={<SlidersHorizontal size={16} />}
                 onCancel={cancelSection}
                 onSave={saveSection}
                 disabled={disabled || !sectionDirty}
                 dirty={sectionDirty}
-                width={880}
+                width={mh.advancedDrawerWidth}
             >
                 <ChangedPathsProvider changes={drawerChangedPaths}>
                     <ModelHarnessSectionBody

web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SectionDrawer.tsx

@@ -4,7 +4,7 @@
  * Right-hand drawer chrome for a whole config SECTION (Model & harness, Advanced) — as opposed to
  * the per-item `ConfigItemDrawer`. The accordion header opens it; the body is whatever the host
  * passes as children. The host owns the draft model (snapshot the config on open, restore on
- * Cancel), so this is pure chrome: header (icon + title), a scrollable body, and Cancel/Save.
+ * Cancel), so this is pure chrome: header (title), a scrollable body, and Cancel/Save.
  *
  * Built on the shared `EnhancedDrawer`.
  */
@@ -24,7 +24,6 @@ export interface SectionDrawerProps {
     // When true, closing via scrim/X asks for confirmation instead of discarding silently.
     dirty?: boolean
     width?: number
-    footerNote?: ReactNode
     children: ReactNode
 }
 
@@ -37,7 +36,6 @@ export function SectionDrawer({
     disabled = false,
     dirty = false,
     width = 720,
-    footerNote = "Draft — applies on save",
     children,
 }: SectionDrawerProps) {
     const [confirmOpen, setConfirmOpen] = useState(false)
@@ -65,23 +63,19 @@ export function SectionDrawer({
                     </div>
                 }
                 footer={
-                    <div className="flex items-center justify-between gap-3">
-                        <span className="min-w-0 truncate text-xs text-[var(--ag-zinc-5)]">
-                            {footerNote}
-                        </span>
-                        <div className="flex shrink-0 items-center gap-2">
-                            <Button variant="outline" onClick={onCancel}>
-                                Cancel
-                            </Button>
-                            <Button onClick={onSave} disabled={disabled}>
-                                Save
-                            </Button>
-                        </div>
+                    <div className="flex items-center justify-end gap-2">
+                        <Button variant="outline" onClick={onCancel}>
+                            Cancel
+                        </Button>
+                        <Button onClick={onSave} disabled={disabled}>
+                            Save
+                        </Button>
                     </div>
                 }
                 // The body itself doesn't scroll — the content (a full-height flex row) gives each
                 // panel its own overflow, so the left and right panels scroll independently.
-                styles={{body: {padding: 16, overflow: "hidden"}}}
+                // Tighter at the sides; the vertical 16 is what the rail's `bleed` negates.
+                styles={{body: {padding: "16px 12px", overflow: "hidden"}}}
             >
                 {children}
             </EnhancedDrawer>

web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/BuildKitSection.tsx

@@ -7,11 +7,9 @@
  */
 import type {ReactNode} from "react"
 
-import {ConfigAccordionSection, Tag} from "@agenta/ui/components/presentational"
+import {Tag} from "@agenta/ui/components/presentational"
 import {Switch, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@agenta/ui/ui"
-import {Warning, Wrench} from "@phosphor-icons/react"
-
-import {RailField} from "../../../drawers/shared/RailField"
+import {Warning} from "@phosphor-icons/react"
 
 import type {ItemDescriptor} from "./itemDescriptors"
 import {ItemRow} from "./ItemRow"
@@ -47,8 +45,6 @@ export interface BuildKitSectionProps {
     onSetAllTools: (next: boolean) => void
     /** Sandbox permission overlay, rendered read-only as `key → value` rows. */
     permissions?: Record<string, unknown> | null
-    /** Collapsed in the app (it is background information); stories open it. @default false */
-    defaultOpen?: boolean
 }
 
 /** The build-kit block. Switchable tools get a switch each; the rest, and permissions, are read-only. */
@@ -60,7 +56,6 @@ export function BuildKitSection({
     onToggleTool,
     onSetAllTools,
     permissions,
-    defaultOpen = false,
 }: BuildKitSectionProps) {
     // Per-tool switches only mean anything while the kit as a whole is on.
     const toolsDisabled = Boolean(disabled) || !enabled
@@ -70,57 +65,46 @@ export function BuildKitSection({
     // Nothing to switch means no bulk action — the button would be a dead control.
     const hasSwitchableTools = tools.some((tool) => tool.toggle)
     return (
-        <ConfigAccordionSection
-            size="compact"
-            defaultOpen={defaultOpen}
-            icon={<Wrench size={15} />}
-            title="Playground build kit"
-            summary={
-                <span className="inline-flex items-center gap-1.5">
-                    <span className="h-1.5 w-1.5 rounded-full bg-[var(--ag-colorWarning)]" />
-                    Removed on commit
+        <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-2">
+                    <span className="min-w-0 flex-1 text-xs font-medium">Playground build kit</span>
+                    <Switch
+                        size="sm"
+                        checked={enabled}
+                        onCheckedChange={onEnabledChange}
+                        disabled={disabled}
+                        aria-label="Enable the playground build kit"
+                    />
+                </div>
+                <span className="text-xs leading-snug text-colorTextDescription">
+                    Tools and permissions the assistant builds with here. None of it reaches the
+                    published agent.
                 </span>
-            }
-            extra={
-                <Switch
-                    checked={enabled}
-                    onCheckedChange={onEnabledChange}
-                    disabled={disabled}
-                    aria-label="Enable the playground build kit"
-                />
-            }
-        >
-            <span className="text-xs leading-snug text-colorTextDescription">
-                These playground-only tools and permissions help the assistant build and revise this
-                agent. None of this is part of the published agent.
-            </span>
+            </div>
             {!enabled ? (
                 <div className="rounded border border-solid border-[var(--ant-color-info-border)] bg-[var(--ant-color-info-bg)] px-2.5 py-2 text-xs leading-snug text-[var(--ant-color-info-text)]">
                     The assistant can no longer create files, run code, or edit the agent here.
                 </div>
             ) : null}
             {tools.length > 0 ? (
-                <RailField
-                    wide
-                    label={
-                        <span className="flex flex-col items-start gap-1">
-                            <span>Tools</span>
-                            <span className="text-[11px] leading-tight text-colorTextDescription">
-                                {enabledCount} of {tools.length} enabled
-                            </span>
-                            {hasSwitchableTools ? (
-                                <button
-                                    type="button"
-                                    disabled={toolsDisabled}
-                                    onClick={() => onSetAllTools(!allEnabled)}
-                                    className="cursor-pointer border-0 bg-transparent p-0 text-[11px] underline underline-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                                >
-                                    {allEnabled ? "Disable all" : "Enable all"}
-                                </button>
-                            ) : null}
+                <div className="flex flex-col gap-1.5">
+                    <div className="flex items-baseline gap-2 text-xs text-colorTextDescription">
+                        <span>Tools</span>
+                        <span className="min-w-0 flex-1 text-[11px]">
+                            {enabledCount} of {tools.length} enabled
                         </span>
-                    }
-                >
+                        {hasSwitchableTools ? (
+                            <button
+                                type="button"
+                                disabled={toolsDisabled}
+                                onClick={() => onSetAllTools(!allEnabled)}
+                                className="cursor-pointer border-0 bg-transparent p-0 text-[11px] text-inherit underline underline-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                            >
+                                {allEnabled ? "Disable all" : "Enable all"}
+                            </button>
+                        ) : null}
+                    </div>
                     {tools.map(({key, descriptor, toggle}) => (
                         <ItemRow
                             key={`build-kit-tool-${key}`}
@@ -141,10 +125,11 @@ export function BuildKitSection({
                             }
                         />
                     ))}
-                </RailField>
+                </div>
             ) : null}
             {permissions && Object.keys(permissions).length > 0 ? (
-                <RailField wide label="Sandbox permissions">
+                <div className="flex flex-col gap-1.5">
+                    <span className="text-xs text-colorTextDescription">Sandbox permissions</span>
                     <div className="flex flex-col gap-1.5 opacity-70">
                         {Object.entries(permissions).map(([key, value]) => (
                             <div
@@ -162,9 +147,9 @@ export function BuildKitSection({
                             </div>
                         ))}
                     </div>
-                </RailField>
+                </div>
             ) : null}
-        </ConfigAccordionSection>
+        </div>
     )
 }
 

web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ItemRow.tsx

@@ -156,7 +156,7 @@ export function ItemRow({
                 <ItemAvatar descriptor={descriptor} />
                 <div className="min-w-0 flex-1">
                     <div
-                        className={`truncate text-[13px] font-medium ${
+                        className={`truncate text-[13px] font-normal ${
                             descriptor.monoName === false ? "" : "font-mono"
                         }`}
                     >

web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/useBuildKit.tsx

@@ -7,6 +7,7 @@
  * revision) plus the user's build-kit state — the master on/off and the platform ops switched off
  * individually — and returns:
  *   - `hasBuildKitOverlay`: whether to render the build-kit block / extend the Advanced section,
+ *   - `buildKitEnabled`: the master on/off, for callers that flag the panel while it is live,
  *   - `buildKitSection`: the drawer block (one tool list — platform tools with a switch each, the
  *     Agenta-owned embeds locked on — plus sandbox permissions) under the master enable switch,
  *   - `permissionOverrideHint`: the inline warning to show above SandboxPermissionControl when the
@@ -186,6 +187,8 @@ export function useBuildKit({
 
     return {
         hasBuildKitOverlay,
+        // The master on/off, so the Advanced rail can flag the panel while the overlay is live.
+        buildKitEnabled,
         buildKitSection,
         permissionOverrideHint,
     }