diff --git a/web/oss/src/components/AgentChatSlice/AgentChatPanel.tsx b/web/oss/src/components/AgentChatSlice/AgentChatPanel.tsx
index fb3a82cd8d..33ab045590 100644
--- a/web/oss/src/components/AgentChatSlice/AgentChatPanel.tsx
+++ b/web/oss/src/components/AgentChatSlice/AgentChatPanel.tsx
@@ -5,7 +5,7 @@ import {useChat} from "@ai-sdk/react"
 import {Attachments, Bubble, Sender} from "@ant-design/x"
 import {ArrowDown, Paperclip} from "@phosphor-icons/react"
 import {DefaultChatTransport, type UIMessage} from "ai"
-import {Alert, Button, Modal, Tabs, Tag, Tooltip} from "antd"
+import {Button, Modal, Tabs, Tag, Tooltip} from "antd"
 import type {UploadFile} from "antd"
 import {useAtomValue, useSetAtom, useStore} from "jotai"
 
@@ -14,17 +14,18 @@ import {messageText, sideEffectingToolsInRange} from "./assets/rewind"
 import AgentMessage from "./components/AgentMessage"
 import SessionHistoryMenu from "./components/SessionHistoryMenu"
 import SessionTabLabel from "./components/SessionTabLabel"
+import {useChatScopeKey} from "./state/scope"
 import {
     type AgentChatSession,
-    activeSessionIdAtom,
-    addSessionAtom,
-    closeSessionAtom,
+    activeSessionIdAtomFamily,
+    addSessionAtomFamily,
+    closeSessionAtomFamily,
     persistSessionMessagesAtom,
-    renameSessionAtom,
+    renameSessionAtomFamily,
     sessionFirstUserTextAtomFamily,
     sessionMessagesAtom,
-    sessionsListAtom,
-    setActiveSessionAtom,
+    sessionsListAtomFamily,
+    setActiveSessionAtomFamily,
 } from "./state/sessions"
 
 /** A stream error/abort is already surfaced via `useChat`'s `onError` + the in-chat `error`
@@ -45,6 +46,57 @@ const ignoreStreamRejection = () => {}
  *  - DT4 autoscroll: stick to bottom while streaming; pause when scrolled up; "jump to latest".
  *  - DT5 a11y: the message log is an aria-live region; controls are keyboard-operable.
  */
+
+/** A settled assistant turn with no content at all — no answer, reasoning, tool, file, or
+ * source part. Mirrors AgentMessage's `!hasContent`; used to collapse a run of "no response"
+ * bubbles (e.g. repeated failed runs) down to the first one. */
+const isEmptyAssistantTurn = (m: UIMessage): boolean =>
+    m.role === "assistant" &&
+    !m.parts.some(
+        (p) =>
+            (p.type === "text" && Boolean((p as {text?: string}).text?.trim())) ||
+            (p.type === "reasoning" && Boolean((p as {text?: string}).text?.trim())) ||
+            p.type === "file" ||
+            p.type === "source-url" ||
+            p.type.startsWith("tool-") ||
+            p.type === "dynamic-tool",
+    )
+
+interface ParsedRunError {
+    message: string
+    code?: number
+}
+
+/**
+ * Best-effort human reason from a useChat stream error. The server may hand us a clean string
+ * ("Agent run failed: …") or a JSON envelope (`{status:{code,message,…}}` / `{message}`) — pull
+ * the message out of either and drop the stacktrace / docs-url noise so it reads cleanly inline.
+ */
+const parseAgentRunError = (err: unknown): ParsedRunError => {
+    const raw =
+        err instanceof Error ? err.message : typeof err === "string" ? err : String(err ?? "")
+    const fallback = raw.trim() || "The agent run failed."
+    try {
+        const obj = JSON.parse(raw) as Record<string, unknown>
+        const status = (obj?.status && typeof obj.status === "object" ? obj.status : obj) as Record<
+            string,
+            unknown
+        >
+        const message =
+            typeof status?.message === "string"
+                ? status.message
+                : typeof obj?.message === "string"
+                  ? (obj.message as string)
+                  : null
+        if (message) {
+            return {message, code: typeof status?.code === "number" ? status.code : undefined}
+        }
+    } catch {
+        // raw isn't JSON — it's already the human message.
+    }
+    return {message: fallback}
+}
+
 const AgentConversation = ({entityId, sessionId}: {entityId: string; sessionId: string}) => {
     const store = useStore()
     const persistMessages = useSetAtom(persistSessionMessagesAtom)
@@ -109,6 +161,39 @@ const AgentConversation = ({entityId, sessionId}: {entityId: string; sessionId:
 
     const busy = status === "submitted" || status === "streaming"
 
+    // Surface a stream failure inline: stamp the parsed error onto the failing assistant turn so
+    // it renders as a red error bubble with the real reason (and persists with the session via the
+    // effect below), instead of a transient top banner + a generic "no response". FE-only — it
+    // uses the error useChat already has; the backend doesn't need to attach it to the trace.
+    useEffect(() => {
+        if (!error) return
+        const parsed = parseAgentRunError(error)
+        setMessages((prev) => {
+            const last = prev.length > 0 ? prev[prev.length - 1] : undefined
+            const existing = (last?.metadata as {runError?: {message?: string}} | undefined)
+                ?.runError
+            if (last?.role === "assistant") {
+                if (existing?.message === parsed.message) return prev // already stamped
+                const next = [...prev]
+                next[next.length - 1] = {
+                    ...last,
+                    metadata: {...(last.metadata as object | undefined), runError: parsed},
+                }
+                return next
+            }
+            // No trailing assistant turn (failed before one existed) — add a minimal carrier.
+            return [
+                ...prev,
+                {
+                    id: `run-error-${crypto.randomUUID()}`,
+                    role: "assistant",
+                    parts: [],
+                    metadata: {runError: parsed},
+                } as (typeof prev)[number],
+            ]
+        })
+    }, [error, setMessages])
+
     // Persist the conversation whenever its stream settles (skip mid-stream).
     useEffect(() => {
         if (status === "streaming") return
@@ -219,10 +304,8 @@ const AgentConversation = ({entityId, sessionId}: {entityId: string; sessionId:
 
     return (
         <div className="flex h-full min-h-0 w-full flex-col gap-3">
-            {error && (
-                <Alert type="error" showIcon message="Stream error" description={error.message} />
-            )}
-
+            {/* Stream errors are surfaced inline on the failing turn (red error bubble with the
+                real reason), stamped in the effect above — no separate top-level banner. */}
             <div className="relative flex min-h-0 flex-1 flex-col">
                 <div
                     ref={(el) => {
@@ -247,6 +330,9 @@ const AgentConversation = ({entityId, sessionId}: {entityId: string; sessionId:
                                 isStreaming={busy && index === messages.length - 1}
                                 onRewind={() => handleRewind(message)}
                                 onApprovalResponse={addToolApprovalResponse}
+                                precededByEmptyAssistant={
+                                    index > 0 && isEmptyAssistantTurn(messages[index - 1])
+                                }
                             />
                             {stoppedIds.has(message.id) && (
                                 <div className="flex items-center gap-2 self-start pl-1">
@@ -387,12 +473,13 @@ const TabLabel = ({
 }
 
 const AgentChatPanel = ({entityId}: {entityId: string}) => {
-    const sessions = useAtomValue(sessionsListAtom)
-    const rawActiveId = useAtomValue(activeSessionIdAtom)
-    const addSession = useSetAtom(addSessionAtom)
-    const closeSession = useSetAtom(closeSessionAtom)
-    const renameSession = useSetAtom(renameSessionAtom)
-    const setActiveSession = useSetAtom(setActiveSessionAtom)
+    const scope = useChatScopeKey()
+    const sessions = useAtomValue(sessionsListAtomFamily(scope))
+    const rawActiveId = useAtomValue(activeSessionIdAtomFamily(scope))
+    const addSession = useSetAtom(addSessionAtomFamily(scope))
+    const closeSession = useSetAtom(closeSessionAtomFamily(scope))
+    const renameSession = useSetAtom(renameSessionAtomFamily(scope))
+    const setActiveSession = useSetAtom(setActiveSessionAtomFamily(scope))
 
     // Always keep at least one tab. Re-arms when the list drains without double-firing
     // under StrictMode.
diff --git a/web/oss/src/components/AgentChatSlice/assets/trace.ts b/web/oss/src/components/AgentChatSlice/assets/trace.ts
index abda9430f2..a8811f4573 100644
--- a/web/oss/src/components/AgentChatSlice/assets/trace.ts
+++ b/web/oss/src/components/AgentChatSlice/assets/trace.ts
@@ -33,6 +33,18 @@ export const getMessageTraceId = (message: UIMessage): string | undefined => {
     return tracePart.data.traceId || parseTraceIdFromUrl(tracePart.data.url)
 }
 
+/**
+ * A run failure stamped onto an assistant turn's metadata (FE-side, when the stream errors —
+ * see AgentChatPanel). The backend doesn't always record the error on the trace, but useChat
+ * surfaces it; persisting it here lets the failed turn render the real reason inline (a red
+ * error bubble) instead of a generic "no response", and survives a reload with the session.
+ */
+export const getMessageRunError = (message: UIMessage): string | undefined => {
+    const runError = (message.metadata as {runError?: {message?: string}} | undefined)?.runError
+    const msg = runError?.message
+    return typeof msg === "string" && msg.trim() ? msg : undefined
+}
+
 /** Token/cost fields in `ExecutionMetricsDisplay`'s shape. */
 export interface MessageUsageMetrics {
     promptTokens?: number
diff --git a/web/oss/src/components/AgentChatSlice/assets/transport.ts b/web/oss/src/components/AgentChatSlice/assets/transport.ts
index 238f9f929f..eaae2ecc9e 100644
--- a/web/oss/src/components/AgentChatSlice/assets/transport.ts
+++ b/web/oss/src/components/AgentChatSlice/assets/transport.ts
@@ -99,7 +99,13 @@ async function requestMeta(track: AgentChatTrack, appId?: string | null) {
     // `Accept: text/event-stream` makes the agent `/messages` endpoint serve the v6 SSE
     // stream useChat consumes; without it the endpoint negotiates down to batch JSON
     // (the AI-SDK transport sets no Accept), which useChat can't render.
-    const headers: Record<string, string> = {Accept: "text/event-stream"}
+    // `x-ag-messages-format` declares the request body's message format (AI-SDK / Vercel
+    // UIMessages) so `/messages` picks the right adapter; "vercel" matches the backend's
+    // VERCEL_MESSAGE_PROTOCOL identity (sdk/agents/adapters/vercel/routing.py).
+    const headers: Record<string, string> = {
+        Accept: "text/event-stream",
+        "x-ag-messages-format": "vercel",
+    }
     if (jwt) headers.Authorization = `Bearer ${jwt}`
     const projectId = getDefaultStore().get(projectIdAtom) || undefined
     const api = withQuery(trackApi(track), {
diff --git a/web/oss/src/components/AgentChatSlice/components/AgentMessage.tsx b/web/oss/src/components/AgentChatSlice/components/AgentMessage.tsx
index 3d4950e72a..99c511ac62 100644
--- a/web/oss/src/components/AgentChatSlice/components/AgentMessage.tsx
+++ b/web/oss/src/components/AgentChatSlice/components/AgentMessage.tsx
@@ -21,7 +21,12 @@ import {openTraceDrawerAtom} from "@/oss/components/SharedDrawers/TraceDrawer/st
 
 import {fileKind, filePartName} from "../assets/files"
 import Markdown from "../assets/markdown"
-import {getMessageTraceId, getMessageUsage, type MessageUsageMetrics} from "../assets/trace"
+import {
+    getMessageRunError,
+    getMessageTraceId,
+    getMessageUsage,
+    type MessageUsageMetrics,
+} from "../assets/trace"
 
 import ToolPart from "./ToolPart"
 
@@ -45,6 +50,9 @@ interface AgentMessageProps {
     isStreaming?: boolean
     onRewind: () => void
     onApprovalResponse: (args: {id: string; approved: boolean}) => void
+    /** The previous turn was also an empty (content-less) assistant turn. Used to collapse a
+     * run of "no response" bubbles down to the first one. */
+    precededByEmptyAssistant?: boolean
 }
 
 const isToolPart = (type: string) => type.startsWith("tool-") || type === "dynamic-tool"
@@ -99,6 +107,48 @@ const ReasoningPart = ({text, streaming}: {text: string; streaming: boolean}) =>
     )
 }
 
+/**
+ * Failed-run body: the icon + "The agent run failed" + the reason. The reason is clamped to a few
+ * lines by default so a long message (or a stacktrace that slipped past parsing) can't drown the
+ * chat; when it's long, a "Show more" toggle expands it into a scrollable, whitespace-preserving
+ * block so it stays readable.
+ */
+const RunErrorBody = ({text}: {text: string}) => {
+    const [expanded, setExpanded] = useState(false)
+    const isLong = text.length > 220 || text.includes("\n")
+
+    return (
+        <div className="flex items-start gap-2">
+            <XCircle size={16} weight="fill" className="mt-px shrink-0 text-colorError" />
+            <div className="flex min-w-0 flex-col items-start gap-0.5">
+                <Text className="!text-xs !font-medium !text-colorError">The agent run failed</Text>
+                {expanded ? (
+                    <pre className="m-0 max-h-60 w-full overflow-auto whitespace-pre-wrap break-words rounded border border-solid border-colorErrorBorder bg-[var(--ant-color-error-bg)] p-2 font-mono text-[11px] !text-colorErrorText">
+                        {text}
+                    </pre>
+                ) : (
+                    <Text
+                        className="line-clamp-3 !text-xs break-words !text-colorErrorText"
+                        title={isLong ? text : undefined}
+                    >
+                        {text}
+                    </Text>
+                )}
+                {isLong && (
+                    <button
+                        type="button"
+                        onClick={() => setExpanded((e) => !e)}
+                        aria-expanded={expanded}
+                        className="-ml-1 cursor-pointer rounded border-0 bg-transparent px-1 py-0.5 text-[11px] font-medium text-colorError transition-colors hover:bg-[var(--ant-color-error-bg)]"
+                    >
+                        {expanded ? "Show less" : "Show more"}
+                    </button>
+                )}
+            </div>
+        </div>
+    )
+}
+
 const avatarFor = (isUser: boolean) => (
     <Avatar size="small" icon={isUser ? <User size={16} /> : <Robot size={16} />} />
 )
@@ -114,6 +164,7 @@ const AgentMessage = ({
     isStreaming = false,
     onRewind,
     onApprovalResponse,
+    precededByEmptyAssistant = false,
 }: AgentMessageProps) => {
     const openTraceDrawer = useSetAtom(openTraceDrawerAtom)
     const isUser = message.role === "user"
@@ -123,6 +174,14 @@ const AgentMessage = ({
     // A failed run (e.g. a quota error the runner swallowed into an empty turn) lands as an
     // error on the trace; read it so the bubble can render as a failure.
     const traceError = useAtomValue(traceDataSummaryAtomFamily(traceId ?? null)).error
+    // A failure can reach us two ways: recorded on the trace (backend), or stamped onto the turn
+    // FE-side from the useChat stream error (AgentChatPanel). Prefer whichever is present.
+    const runError = getMessageRunError(message)
+    const errorText = traceError || runError
+    // Surface a settled-turn error even when the model emitted partial output before the
+    // stream died — not only when the turn is answer-less. (`isError` stays answer-less-only
+    // so the *whole* bubble only turns red when there's nothing else to show.)
+    const showError = !isStreaming && !!errorText
     const fullText = message.parts
         .filter((p) => p.type === "text")
         .map((p) => (p as {text: string}).text)
@@ -154,7 +213,12 @@ const AgentMessage = ({
     const noResponse = !isUser && !isStreaming && !hasAnswer
     // A settled no-answer turn whose trace recorded an error → render the bubble itself as a
     // failure (red), with the message inline — not a nested alert box.
-    const isError = noResponse && !!traceError
+    const isError = noResponse && showError
+
+    // #3: collapse a run of empty "no response" turns to just the first. A turn with ANY content
+    // (answer or reasoning) and any error turn (isError, which shows the real failure) always
+    // render; only a truly-empty, non-error turn that follows another empty turn is hidden.
+    if (noResponse && !showError && !hasContent && precededByEmptyAssistant) return null
 
     // Only the message being generated shows the loading state, and only until it has content.
     if (!isUser && isStreaming && !hasContent) {
@@ -261,17 +325,22 @@ const AgentMessage = ({
     )
 
     // Failed run: the whole bubble reads as the error (red), message inline — no nested box.
-    const errorBody = (
-        <div className="flex items-start gap-2">
-            <XCircle size={16} weight="fill" className="mt-px shrink-0 text-colorError" />
-            <div className="flex min-w-0 flex-col gap-0.5">
-                <Text className="!text-xs !font-medium !text-colorError">The agent run failed</Text>
-                <Text className="!text-xs break-words !text-colorErrorText">{traceError}</Text>
-            </div>
-        </div>
-    )
+    // RunErrorBody truncates a long reason so it can't drown the chat (expand to read it all).
+    const errorBody = <RunErrorBody text={errorText || "The agent run failed."} />
 
-    const body = isError ? errorBody : defaultBody
+    // Partial output then failure: show the content AND the error. Answer-less failure: the
+    // whole bubble is the error. Otherwise: just the content.
+    const body =
+        showError && !isError ? (
+            <div className="flex min-w-0 max-w-full flex-col gap-2">
+                {defaultBody}
+                {errorBody}
+            </div>
+        ) : isError ? (
+            errorBody
+        ) : (
+            defaultBody
+        )
 
     // Control toolbar — an X `Actions` row that FLOATS over the bubble's bottom edge. It is
     // absolutely positioned (out of flow), so it adds no height: bubbles sit tight with no
diff --git a/web/oss/src/components/AgentChatSlice/components/SessionHistoryMenu.tsx b/web/oss/src/components/AgentChatSlice/components/SessionHistoryMenu.tsx
index d241a2d94f..6cd4f00032 100644
--- a/web/oss/src/components/AgentChatSlice/components/SessionHistoryMenu.tsx
+++ b/web/oss/src/components/AgentChatSlice/components/SessionHistoryMenu.tsx
@@ -4,12 +4,13 @@ import {ClockCounterClockwise, Trash} from "@phosphor-icons/react"
 import {Button, Empty, Popover, Tag, Tooltip, Typography} from "antd"
 import {useAtomValue, useSetAtom} from "jotai"
 
+import {useChatScopeKey} from "../state/scope"
 import {
-    deleteSessionAtom,
+    deleteSessionAtomFamily,
     firstUserText,
-    openSessionAtom,
-    openSessionIdsAtom,
-    sessionHistoryAtom,
+    openSessionAtomFamily,
+    openSessionIdsAtomFamily,
+    sessionHistoryAtomFamily,
     sessionMessagesAtom,
 } from "../state/sessions"
 
@@ -34,11 +35,12 @@ const timeAgo = (ts?: number): string => {
  * permanently (tab + history + messages).
  */
 const SessionHistoryList = ({onPicked}: {onPicked: () => void}) => {
-    const history = useAtomValue(sessionHistoryAtom)
-    const openIds = useAtomValue(openSessionIdsAtom)
+    const scope = useChatScopeKey()
+    const history = useAtomValue(sessionHistoryAtomFamily(scope))
+    const openIds = useAtomValue(openSessionIdsAtomFamily(scope))
     const allMessages = useAtomValue(sessionMessagesAtom)
-    const openSession = useSetAtom(openSessionAtom)
-    const deleteSession = useSetAtom(deleteSessionAtom)
+    const openSession = useSetAtom(openSessionAtomFamily(scope))
+    const deleteSession = useSetAtom(deleteSessionAtomFamily(scope))
 
     if (history.length === 0) {
         return (
diff --git a/web/oss/src/components/AgentChatSlice/index.tsx b/web/oss/src/components/AgentChatSlice/index.tsx
index dbd23e806a..9df1275149 100644
--- a/web/oss/src/components/AgentChatSlice/index.tsx
+++ b/web/oss/src/components/AgentChatSlice/index.tsx
@@ -11,16 +11,17 @@ import {loadSessionMessages} from "./assets/loadSession"
 import AgentChatConversation from "./components/AgentChatConversation"
 import SessionHistoryMenu from "./components/SessionHistoryMenu"
 import SessionTabLabel from "./components/SessionTabLabel"
+import {useChatScopeKey} from "./state/scope"
 import {
-    activeSessionIdAtom,
-    addSessionAtom,
-    adoptSessionAtom,
-    closeSessionAtom,
-    renameSessionAtom,
+    activeSessionIdAtomFamily,
+    addSessionAtomFamily,
+    adoptSessionAtomFamily,
+    closeSessionAtomFamily,
+    renameSessionAtomFamily,
     sessionLabel,
     sessionMessagesAtom,
-    sessionsListAtom,
-    setActiveSessionAtom,
+    sessionsListAtomFamily,
+    setActiveSessionAtomFamily,
 } from "./state/sessions"
 
 const {Text, Title} = Typography
@@ -49,14 +50,15 @@ const AgentChatSlice = () => {
     const store = useStore()
     const router = useRouter()
 
-    const sessions = useAtomValue(sessionsListAtom)
-    const rawActiveId = useAtomValue(activeSessionIdAtom)
+    const scope = useChatScopeKey()
+    const sessions = useAtomValue(sessionsListAtomFamily(scope))
+    const rawActiveId = useAtomValue(activeSessionIdAtomFamily(scope))
     const allMessages = useAtomValue(sessionMessagesAtom)
-    const addSession = useSetAtom(addSessionAtom)
-    const adoptSession = useSetAtom(adoptSessionAtom)
-    const closeSession = useSetAtom(closeSessionAtom)
-    const renameSession = useSetAtom(renameSessionAtom)
-    const setActiveSession = useSetAtom(setActiveSessionAtom)
+    const addSession = useSetAtom(addSessionAtomFamily(scope))
+    const adoptSession = useSetAtom(adoptSessionAtomFamily(scope))
+    const closeSession = useSetAtom(closeSessionAtomFamily(scope))
+    const renameSession = useSetAtom(renameSessionAtomFamily(scope))
+    const setActiveSession = useSetAtom(setActiveSessionAtomFamily(scope))
 
     // Open-from-observability: a `?session=<id>` deep link (from a trace / session drawer)
     // opens that session as a tab. Hydrate its messages first — from localStorage if this
diff --git a/web/oss/src/components/AgentChatSlice/state/scope.tsx b/web/oss/src/components/AgentChatSlice/state/scope.tsx
new file mode 100644
index 0000000000..4b6ce3dccc
--- /dev/null
+++ b/web/oss/src/components/AgentChatSlice/state/scope.tsx
@@ -0,0 +1,40 @@
+import {createContext, useContext, type ReactNode} from "react"
+
+import {useAtomValue} from "jotai"
+
+import {defaultScopeKeyAtom} from "./sessions"
+
+/**
+ * Scope key for the agent chat session state. Distinct surfaces that mount `AgentChatPanel`
+ * concurrently — the main playground vs the create/edit drawer that overlays it — must use
+ * different scope keys, or they share tabs/history (a drawer would inherit and overwrite the
+ * playground's conversations). The provider lets a surface override the default app scope;
+ * every consumer reads the effective key via `useChatScopeKey()`.
+ */
+const AgentChatScopeContext = createContext<string | null>(null)
+
+export function AgentChatScopeProvider({
+    scopeKey,
+    children,
+}: {
+    scopeKey: string
+    children: ReactNode
+}) {
+    return (
+        <AgentChatScopeContext.Provider value={scopeKey}>{children}</AgentChatScopeContext.Provider>
+    )
+}
+
+/** The effective chat scope key: a surface override when provided, else the app scope. */
+export function useChatScopeKey(): string {
+    const override = useContext(AgentChatScopeContext)
+    const fallback = useAtomValue(defaultScopeKeyAtom)
+    return override ?? fallback
+}
+
+/**
+ * Drawer scope key for an entity. Prefixed so it never collides with an app scope (app keys are
+ * bare UUIDs or `__global__`); a pre-creation drawer with no entity id yet falls back to `new`.
+ */
+export const drawerScopeKey = (entityId: string | null | undefined): string =>
+    `drawer:${entityId || "new"}`
diff --git a/web/oss/src/components/AgentChatSlice/state/sessions.ts b/web/oss/src/components/AgentChatSlice/state/sessions.ts
index 1a2b9ba369..37dbe0c5d9 100644
--- a/web/oss/src/components/AgentChatSlice/state/sessions.ts
+++ b/web/oss/src/components/AgentChatSlice/state/sessions.ts
@@ -10,13 +10,19 @@ import {routerAppIdAtom} from "@/oss/state/app/atoms/fetcher"
  * conversations as top-level dynamic tabs (no side rail); this holds the session history, which
  * tabs are open, the active tab, and each session's persisted messages.
  *
- * Two distinct concerns, both app-scoped (the playground is app-scoped, like
- * `selectedVariantsByAppAtom`):
- *   - HISTORY (`sessionsByAppAtom`): every session ever created for the app. A closed tab stays
+ * Everything is keyed by a **scope key** — a string that isolates one mount surface's sessions
+ * from another's. The main playground uses the app scope (`routerAppId`, or `__global__` off an
+ * app page); the create/edit drawer uses its own `drawer:<entityId>` scope so it never inherits
+ * or overwrites the playground's tabs/history (the drawer mounts OVER the playground, so both
+ * surfaces are live at once and a single global "current scope" would clobber). Consumers read
+ * their scope from `useChatScopeKey()` (see ./scope) and pass it to the families below.
+ *
+ * Two distinct concerns, both scope-keyed:
+ *   - HISTORY (`sessionsByAppAtom`): every session ever created for the scope. A closed tab stays
  *     here so it can be reopened from the history picker; only an explicit delete removes it.
  *   - OPEN TABS (`openIdsByAppAtom`): which history sessions are currently shown as tabs, in tab
  *     order. Closing a tab drops its id here but keeps the session (and its messages).
- * Messages are keyed by the globally-unique session id, so they need no app dimension.
+ * Messages are keyed by the globally-unique session id, so they need no scope dimension.
  *
  * Persistence: everything is `atomWithStorage`, so history, tabs, and conversations survive a
  * reload. NOTE: attachments are stored inline as `data:` URLs (see `assets/files.ts`); a
@@ -31,19 +37,24 @@ export interface AgentChatSession {
     createdAt?: number
 }
 
-const GLOBAL_APP_KEY = "__global__"
+export const GLOBAL_APP_KEY = "__global__"
 
-const appKeyAtom = atom((get) => get(routerAppIdAtom) || GLOBAL_APP_KEY)
+/**
+ * Default scope key when a surface provides no override: the current app (or `__global__` off an
+ * app page). Kept as the bare app id (no prefix) so sessions persisted before scoping was
+ * introduced still resolve under the same storage key.
+ */
+export const defaultScopeKeyAtom = atom((get) => get(routerAppIdAtom) || GLOBAL_APP_KEY)
 
-// One source of truth per concern, keyed by app id. Scoped accessors below derive the
-// current app's slice (mirrors the playground's `selectedVariantsByAppAtom` pattern).
+// One source of truth per concern, keyed by scope key. Scoped accessors below derive a single
+// scope's slice (mirrors the playground's `selectedVariantsByAppAtom` pattern).
 //
 // `getOnInit: true` — read localStorage synchronously on init. Without it the atom starts as
 // the empty default `{}` on every mount and only hydrates afterwards, so the "seed one tab"
 // effect sees an empty list in that window and creates a stray session on every reload/HMR.
 const STORAGE_OPTS = {getOnInit: true} as const
 
-/** Full per-app session history (open AND closed). */
+/** Full per-scope session history (open AND closed). */
 const sessionsByAppAtom = atomWithStorage<Record<string, AgentChatSession[]>>(
     "agenta:agent-chat:sessions",
     {},
@@ -52,9 +63,9 @@ const sessionsByAppAtom = atomWithStorage<Record<string, AgentChatSession[]>>(
 )
 
 /**
- * Which sessions are open as tabs, per app, in tab order.
+ * Which sessions are open as tabs, per scope, in tab order.
  *
- * Migration: before this atom is ever written for an app, the open set defaults to the whole
+ * Migration: before this atom is ever written for a scope, the open set defaults to the whole
  * history — every pre-upgrade session was an open tab (see `currentOpenIds`). Once any tab op
  * writes an explicit list, that list is authoritative.
  */
@@ -72,7 +83,8 @@ const activeByAppAtom = atomWithStorage<Record<string, string>>(
     STORAGE_OPTS,
 )
 
-/** Persisted messages per session id. Written when a conversation's stream settles. */
+/** Persisted messages per session id. Written when a conversation's stream settles. Session ids
+ * are globally unique, so this store has no scope dimension. */
 export const sessionMessagesAtom = atomWithStorage<Record<string, UIMessage[]>>(
     "agenta:agent-chat:messages",
     {},
@@ -80,7 +92,7 @@ export const sessionMessagesAtom = atomWithStorage<Record<string, UIMessage[]>>(
     STORAGE_OPTS,
 )
 
-/** Open tab ids for an app, with the pre-upgrade fallback (everything open). Pure read helper
+/** Open tab ids for a scope, with the pre-upgrade fallback (everything open). Pure read helper
  * for the writers below — never mutates. */
 const currentOpenIds = (get: Getter, key: string): string[] => {
     const explicit = get(openIdsByAppAtom)[key]
@@ -88,133 +100,143 @@ const currentOpenIds = (get: Getter, key: string): string[] => {
     return (get(sessionsByAppAtom)[key] ?? []).map((s) => s.id)
 }
 
-/** All sessions for the current app (history), newest first. Backs the history picker. */
-export const sessionHistoryAtom = atom((get) => {
-    const list = get(sessionsByAppAtom)[get(appKeyAtom)] ?? []
-    // Newest first; pre-upgrade sessions (no createdAt) sort last, preserving their order.
-    return [...list].sort((a, b) => (b.createdAt ?? 0) - (a.createdAt ?? 0))
-})
-
-/** Open tab ids for the current app, in tab order (with the migration fallback). */
-const openIdsAtom = atom((get) => currentOpenIds(get, get(appKeyAtom)))
+/** All sessions for a scope (history), newest first. Backs the history picker. */
+export const sessionHistoryAtomFamily = atomFamily((key: string) =>
+    atom((get) => {
+        const list = get(sessionsByAppAtom)[key] ?? []
+        // Newest first; pre-upgrade sessions (no createdAt) sort last, preserving their order.
+        return [...list].sort((a, b) => (b.createdAt ?? 0) - (a.createdAt ?? 0))
+    }),
+)
 
-/** Sessions shown as tabs, in tab order. */
-export const sessionsListAtom = atom((get) => {
-    const byId = new Map(
-        (get(sessionsByAppAtom)[get(appKeyAtom)] ?? []).map((s) => [s.id, s] as const),
-    )
-    return get(openIdsAtom)
-        .map((id) => byId.get(id))
-        .filter((s): s is AgentChatSession => Boolean(s))
-})
+/** Sessions shown as tabs for a scope, in tab order. */
+export const sessionsListAtomFamily = atomFamily((key: string) =>
+    atom((get) => {
+        const byId = new Map((get(sessionsByAppAtom)[key] ?? []).map((s) => [s.id, s] as const))
+        return currentOpenIds(get, key)
+            .map((id) => byId.get(id))
+            .filter((s): s is AgentChatSession => Boolean(s))
+    }),
+)
 
-/** Active session id for the current app (may be stale if that tab was closed — the UI
- * falls back to the first open tab when this id isn't in the open list). */
-export const activeSessionIdAtom = atom((get) => get(activeByAppAtom)[get(appKeyAtom)] ?? "")
+/** Active session id for a scope (may be stale if that tab was closed — the UI falls back to the
+ * first open tab when this id isn't in the open list). */
+export const activeSessionIdAtomFamily = atomFamily((key: string) =>
+    atom((get) => get(activeByAppAtom)[key] ?? ""),
+)
 
-/** Set of currently-open session ids (used to label the history picker). */
-export const openSessionIdsAtom = atom((get) => new Set(get(openIdsAtom)))
+/** Set of currently-open session ids for a scope (used to label the history picker). */
+export const openSessionIdsAtomFamily = atomFamily((key: string) =>
+    atom((get) => new Set(currentOpenIds(get, key))),
+)
 
 /** Create a session and make it the active open tab. Returns the new id. */
-export const addSessionAtom = atom(null, (get, set) => {
-    const key = get(appKeyAtom)
-    const id = generateId()
-    // Read open ids BEFORE mutating history, else the fallback would re-count the new id.
-    const open = currentOpenIds(get, key)
-    const all = get(sessionsByAppAtom)
-    set(sessionsByAppAtom, {...all, [key]: [...(all[key] ?? []), {id, createdAt: Date.now()}]})
-    set(openIdsByAppAtom, {...get(openIdsByAppAtom), [key]: [...open, id]})
-    set(activeByAppAtom, {...get(activeByAppAtom), [key]: id})
-    return id
-})
+export const addSessionAtomFamily = atomFamily((key: string) =>
+    atom(null, (get, set) => {
+        const id = generateId()
+        // Read open ids BEFORE mutating history, else the fallback would re-count the new id.
+        const open = currentOpenIds(get, key)
+        const all = get(sessionsByAppAtom)
+        set(sessionsByAppAtom, {
+            ...all,
+            [key]: [...(all[key] ?? []), {id, createdAt: Date.now()}],
+        })
+        set(openIdsByAppAtom, {...get(openIdsByAppAtom), [key]: [...open, id]})
+        set(activeByAppAtom, {...get(activeByAppAtom), [key]: id})
+        return id
+    }),
+)
 
 /** Close a tab: drop it from the open list (KEEP the session + messages so it can be reopened
  * from the history picker) and re-point the active tab to a neighbour if it was the one closed. */
-export const closeSessionAtom = atom(null, (get, set, id: string) => {
-    const key = get(appKeyAtom)
-    const open = currentOpenIds(get, key)
-    const nextOpen = open.filter((x) => x !== id)
-    set(openIdsByAppAtom, {...get(openIdsByAppAtom), [key]: nextOpen})
+export const closeSessionAtomFamily = atomFamily((key: string) =>
+    atom(null, (get, set, id: string) => {
+        const open = currentOpenIds(get, key)
+        const nextOpen = open.filter((x) => x !== id)
+        set(openIdsByAppAtom, {...get(openIdsByAppAtom), [key]: nextOpen})
 
-    const active = get(activeByAppAtom)
-    if (active[key] === id) {
-        const closedIdx = open.indexOf(id)
-        const neighbour = nextOpen[Math.min(closedIdx, nextOpen.length - 1)] ?? ""
-        set(activeByAppAtom, {...active, [key]: neighbour})
-    }
-})
+        const active = get(activeByAppAtom)
+        if (active[key] === id) {
+            const closedIdx = open.indexOf(id)
+            const neighbour = nextOpen[Math.min(closedIdx, nextOpen.length - 1)] ?? ""
+            set(activeByAppAtom, {...active, [key]: neighbour})
+        }
+    }),
+)
 
 /** Reopen a session as a tab (or just focus it if already open) and make it active. */
-export const openSessionAtom = atom(null, (get, set, id: string) => {
-    const key = get(appKeyAtom)
-    const open = currentOpenIds(get, key)
-    if (!open.includes(id)) {
-        set(openIdsByAppAtom, {...get(openIdsByAppAtom), [key]: [...open, id]})
-    }
-    set(activeByAppAtom, {...get(activeByAppAtom), [key]: id})
-})
+export const openSessionAtomFamily = atomFamily((key: string) =>
+    atom(null, (get, set, id: string) => {
+        const open = currentOpenIds(get, key)
+        if (!open.includes(id)) {
+            set(openIdsByAppAtom, {...get(openIdsByAppAtom), [key]: [...open, id]})
+        }
+        set(activeByAppAtom, {...get(activeByAppAtom), [key]: id})
+    }),
+)
 
 /**
  * Ensure a session with `id` exists in history, is open, and is active — used when opening a
  * session from a deep link / observability trace. Creates the history entry if it's unknown to
  * this browser (its messages come from `sessionMessagesAtom`, hydrated locally or server-side).
  */
-export const adoptSessionAtom = atom(
-    null,
-    (get, set, {id, title}: {id: string; title?: string}) => {
-        const key = get(appKeyAtom)
+export const adoptSessionAtomFamily = atomFamily((key: string) =>
+    atom(null, (get, set, {id, title}: {id: string; title?: string}) => {
         const all = get(sessionsByAppAtom)
         const list = all[key] ?? []
         if (!list.some((s) => s.id === id)) {
-            set(sessionsByAppAtom, {...all, [key]: [...list, {id, title, createdAt: Date.now()}]})
+            set(sessionsByAppAtom, {
+                ...all,
+                [key]: [...list, {id, title, createdAt: Date.now()}],
+            })
         }
         const open = currentOpenIds(get, key)
         if (!open.includes(id)) {
             set(openIdsByAppAtom, {...get(openIdsByAppAtom), [key]: [...open, id]})
         }
         set(activeByAppAtom, {...get(activeByAppAtom), [key]: id})
-    },
+    }),
 )
 
 /** Permanently delete a session: drop it from history, the open tabs, and its messages. */
-export const deleteSessionAtom = atom(null, (get, set, id: string) => {
-    const key = get(appKeyAtom)
-    const all = get(sessionsByAppAtom)
-    set(sessionsByAppAtom, {...all, [key]: (all[key] ?? []).filter((s) => s.id !== id)})
+export const deleteSessionAtomFamily = atomFamily((key: string) =>
+    atom(null, (get, set, id: string) => {
+        const all = get(sessionsByAppAtom)
+        set(sessionsByAppAtom, {...all, [key]: (all[key] ?? []).filter((s) => s.id !== id)})
 
-    const open = currentOpenIds(get, key)
-    if (open.includes(id)) {
-        set(openIdsByAppAtom, {...get(openIdsByAppAtom), [key]: open.filter((x) => x !== id)})
-    }
+        const open = currentOpenIds(get, key)
+        if (open.includes(id)) {
+            set(openIdsByAppAtom, {...get(openIdsByAppAtom), [key]: open.filter((x) => x !== id)})
+        }
 
-    const active = get(activeByAppAtom)
-    if (active[key] === id) {
-        set(activeByAppAtom, {...active, [key]: open.filter((x) => x !== id)[0] ?? ""})
-    }
+        const active = get(activeByAppAtom)
+        if (active[key] === id) {
+            set(activeByAppAtom, {...active, [key]: open.filter((x) => x !== id)[0] ?? ""})
+        }
 
-    const messages = {...get(sessionMessagesAtom)}
-    if (id in messages) {
-        delete messages[id]
-        set(sessionMessagesAtom, messages)
-    }
-})
+        const messages = {...get(sessionMessagesAtom)}
+        if (id in messages) {
+            delete messages[id]
+            set(sessionMessagesAtom, messages)
+        }
+    }),
+)
 
-export const renameSessionAtom = atom(
-    null,
-    (get, set, {id, title}: {id: string; title: string}) => {
-        const key = get(appKeyAtom)
+export const renameSessionAtomFamily = atomFamily((key: string) =>
+    atom(null, (get, set, {id, title}: {id: string; title: string}) => {
         const all = get(sessionsByAppAtom)
         const list = (all[key] ?? []).map((s) =>
             s.id === id ? {...s, title: title.trim() || undefined} : s,
         )
         set(sessionsByAppAtom, {...all, [key]: list})
-    },
+    }),
 )
 
-export const setActiveSessionAtom = atom(null, (get, set, id: string) => {
-    const key = get(appKeyAtom)
-    set(activeByAppAtom, {...get(activeByAppAtom), [key]: id})
-})
+export const setActiveSessionAtomFamily = atomFamily((key: string) =>
+    atom(null, (get, set, id: string) => {
+        set(activeByAppAtom, {...get(activeByAppAtom), [key]: id})
+    }),
+)
 
 /** Write a session's messages to the persisted store (called when its stream settles). */
 export const persistSessionMessagesAtom = atom(
diff --git a/web/oss/src/components/Playground/Components/Menus/PlaygroundVariantHeaderMenu/index.tsx b/web/oss/src/components/Playground/Components/Menus/PlaygroundVariantHeaderMenu/index.tsx
index 5189f9640f..07873091ed 100644
--- a/web/oss/src/components/Playground/Components/Menus/PlaygroundVariantHeaderMenu/index.tsx
+++ b/web/oss/src/components/Playground/Components/Menus/PlaygroundVariantHeaderMenu/index.tsx
@@ -1,10 +1,11 @@
 import {useCallback, useMemo} from "react"
 
 import {workflowMolecule} from "@agenta/entities/workflow"
-import {playgroundController} from "@agenta/playground"
+import {agentConfigLayoutAtom, AGENT_CONFIG_LAYOUTS} from "@agenta/entity-ui/drill-in"
+import {playgroundController, isAgentModeAtomFamily} from "@agenta/playground"
 import {message} from "@agenta/ui/app-message"
 import {MoreOutlined} from "@ant-design/icons"
-import {ArrowCounterClockwise, Trash} from "@phosphor-icons/react"
+import {ArrowCounterClockwise, Check, Trash} from "@phosphor-icons/react"
 import {Button, Dropdown, MenuProps} from "antd"
 import {useAtomValue, useSetAtom} from "jotai"
 
@@ -19,6 +20,12 @@ const PlaygroundVariantHeaderMenu: React.FC<PlaygroundVariantHeaderMenuProps> =
     const selectedVariants = useAtomValue(playgroundController.selectors.entityIds())
     const removeVariantFromSelection = useSetAtom(playgroundController.actions.removeEntity)
     const isDirty = useAtomValue(workflowMolecule.selectors.isDirty(variantId || ""))
+    // Agent config panels get a layout selector (accordion/tabs/cards) in this menu; the panel
+    // reads the same persisted atom. Detect agent mode by the agent_config schema marker (the same
+    // robust signal the left panel uses), not the backend is_agent flag. Non-agent variants hide it.
+    const isAgent = useAtomValue(isAgentModeAtomFamily(variantId || ""))
+    const layout = useAtomValue(agentConfigLayoutAtom)
+    const setLayout = useSetAtom(agentConfigLayoutAtom)
 
     const closePanelDisabled = useMemo(() => {
         return selectedVariants.length === 1 && selectedVariants.includes(variantId)
@@ -42,6 +49,30 @@ const PlaygroundVariantHeaderMenu: React.FC<PlaygroundVariantHeaderMenuProps> =
 
     const items: MenuProps["items"] = useMemo(
         () => [
+            ...(isAgent
+                ? [
+                      {
+                          key: "view",
+                          type: "group" as const,
+                          label: "View",
+                          children: AGENT_CONFIG_LAYOUTS.map((option) => ({
+                              key: `view-${option.value}`,
+                              label: option.label,
+                              icon:
+                                  layout === option.value ? (
+                                      <Check size={14} />
+                                  ) : (
+                                      <span className="inline-block w-[14px]" />
+                                  ),
+                              onClick: (e: {domEvent: {stopPropagation: () => void}}) => {
+                                  e.domEvent.stopPropagation()
+                                  setLayout(option.value)
+                              },
+                          })),
+                      },
+                      {type: "divider" as const},
+                  ]
+                : []),
             {
                 key: "revert",
                 label: "Revert Changes",
@@ -70,7 +101,16 @@ const PlaygroundVariantHeaderMenu: React.FC<PlaygroundVariantHeaderMenuProps> =
                 },
             },
         ],
-        [handleClosePanel, closePanelDisabled, variantId, handleDiscardDraft, isDirty],
+        [
+            handleClosePanel,
+            closePanelDisabled,
+            variantId,
+            handleDiscardDraft,
+            isDirty,
+            isAgent,
+            layout,
+            setLayout,
+        ],
     )
 
     return (
diff --git a/web/oss/src/components/Playground/Playground.tsx b/web/oss/src/components/Playground/Playground.tsx
index 5a7bb9f29b..4068407090 100644
--- a/web/oss/src/components/Playground/Playground.tsx
+++ b/web/oss/src/components/Playground/Playground.tsx
@@ -88,7 +88,7 @@ const Playground: FC = () => {
 
     return (
         <OSSPlaygroundShell providers={providers}>
-            <div className="flex flex-col w-full h-[calc(100dvh-75px)] overflow-hidden">
+            <div className="flex flex-col w-full h-[calc(100dvh-46px)] overflow-hidden">
                 <PlaygroundOnboarding />
                 <PlaygroundHeader key={`${uri}-header`} />
                 <PlaygroundMainView key={`${uri}-main`} />
diff --git a/web/oss/src/components/PlaygroundRouter/index.tsx b/web/oss/src/components/PlaygroundRouter/index.tsx
index 4abb241beb..e565179863 100644
--- a/web/oss/src/components/PlaygroundRouter/index.tsx
+++ b/web/oss/src/components/PlaygroundRouter/index.tsx
@@ -11,7 +11,7 @@ import {currentWorkflowContextAtom} from "@/oss/state/workflow"
 
 const PlaygroundLoadingShell = () => {
     return (
-        <div className="flex flex-col w-full h-[calc(100dvh-75px)] overflow-hidden">
+        <div className="flex flex-col w-full h-[calc(100dvh-46px)] overflow-hidden">
             <div
                 className={`flex items-center justify-between gap-4 px-2.5 py-2 ${bgColors.active}`}
             >
diff --git a/web/oss/src/components/WorkflowRevisionDrawerWrapper/index.tsx b/web/oss/src/components/WorkflowRevisionDrawerWrapper/index.tsx
index a95cc2d431..9884ad4c28 100644
--- a/web/oss/src/components/WorkflowRevisionDrawerWrapper/index.tsx
+++ b/web/oss/src/components/WorkflowRevisionDrawerWrapper/index.tsx
@@ -70,6 +70,7 @@ import {queryClientAtom} from "jotai-tanstack-query"
 import dynamic from "next/dynamic"
 import {useRouter} from "next/router"
 
+import {AgentChatScopeProvider, drawerScopeKey} from "@/oss/components/AgentChatSlice/state/scope"
 import OSSdrillInUIProvider from "@/oss/components/DrillInView/OSSdrillInUIProvider"
 import SimpleSharedEditor from "@/oss/components/EditorViews/SimpleSharedEditor"
 import {
@@ -99,6 +100,24 @@ const PlaygroundMainView = dynamic(
     {ssr: false},
 )
 
+// Agent generation arm, same surface the full playground injects. Without this the app drawer
+// renders nothing for an agent entity (the generations panel does `AgentGenerationPanel ?? null`),
+// so a freshly-created agent can't be invoked from the create/edit drawer the way chat and
+// completion can. Lazy — pulls in the AI SDK only when an agent workflow is open.
+const AgentChatPanel = dynamic(() => import("@/oss/components/AgentChatSlice/AgentChatPanel"), {
+    ssr: false,
+})
+
+// Drawer agent chat runs in its OWN session scope so it never inherits or overwrites the main
+// playground's tabs/history. The drawer mounts over the playground, so both AgentChatPanels are
+// live at once; a shared (app) scope would have them share conversations. See
+// AgentChatSlice/state/scope.
+const ScopedDrawerAgentChat = (props: {entityId: string}) => (
+    <AgentChatScopeProvider scopeKey={drawerScopeKey(props.entityId)}>
+        <AgentChatPanel {...props} />
+    </AgentChatScopeProvider>
+)
+
 const TestsetDropdown = dynamic(
     () => import("@/oss/components/Playground/Components/TestsetDropdown"),
     {ssr: false},
@@ -175,6 +194,9 @@ const DrawerAppPlayground = memo(({entityId}: {entityId: string}) => {
                 SimpleSharedEditor,
                 SharedGenerationResultUtils,
                 TestcaseEditor: PlaygroundTestcaseEditor,
+                // Agent entities render the agent-chat surface here too, so the create/edit drawer
+                // can invoke an agent the same way it invokes chat/completion.
+                AgentGenerationPanel: ScopedDrawerAgentChat,
             }) as unknown as PlaygroundUIProviders,
         [],
     )
diff --git a/web/packages/agenta-entities/src/workflow/state/store.ts b/web/packages/agenta-entities/src/workflow/state/store.ts
index b4e27e005a..32f3e05ac8 100644
--- a/web/packages/agenta-entities/src/workflow/state/store.ts
+++ b/web/packages/agenta-entities/src/workflow/state/store.ts
@@ -1044,16 +1044,33 @@ export const workflowInspectAtomFamily = atomFamily((revisionId: string) =>
         const revisionQuery = get(workflowQueryAtomFamily(revisionId))
         const serverData = revisionQuery.data ?? null
 
+        // A builtin-agent DRAFT (not yet committed, so it has no server data) still needs inspect.
+        // The agent service publishes `harness_capabilities` (the provider + model catalog) per
+        // SERVICE, not per committed revision — `inspectWorkflow` keys on uri + serviceUrl, never a
+        // revision id. `invocationUrl` already derives the draft's builtin uri/url from the LOCAL
+        // entity (which is why a draft agent can be invoked before creation); mirror that here so the
+        // model picker resolves from inspect pre-creation instead of showing an empty catalog.
+        // Scoped to agents: a non-agent draft keeps its server-only behavior unchanged.
+        const localEntity = serverData ? null : get(workflowBaseEntityAtomFamily(revisionId))
+        const localIsAgent =
+            localEntity?.data?.uri === AGENT_BUILTIN_URI || (localEntity?.flags?.is_agent ?? false)
+        const localData = localIsAgent ? localEntity : null
+
         // Use stored URI, or derive one from builtin service URL pattern
-        const storedUri = serverData?.data?.uri ?? null
-        const storedUrl = serverData?.data?.url ?? null
+        const storedUri = serverData?.data?.uri ?? localData?.data?.uri ?? null
+        const storedUrl = serverData?.data?.url ?? localData?.data?.url ?? null
         const derivedServiceType = storedUri ? null : resolveServiceTypeFromUrl(storedUrl)
         const uri = storedUri ?? (derivedServiceType ? buildWorkflowUri(derivedServiceType) : null)
         // Service URL: prefer stored url, fall back to building from URI
         const serviceUrl = storedUrl ?? buildServiceUrlFromUri(uri)
 
-        // Skip inspect when the revision has no service endpoint (has_url: false)
-        const hasUrl = serverData?.flags?.has_url ?? true
+        // Skip inspect when the revision has no service endpoint (has_url: false). A builtin-agent
+        // DRAFT reports has_url: false (nothing is deployed yet), but its service URL is always
+        // derivable from the builtin uri (same URL `invocationUrl` invokes), so the capability
+        // catalog is still reachable — don't let the deploy-state flag gate it.
+        const hasUrl =
+            serverData?.flags?.has_url ??
+            (localIsAgent ? true : (localData?.flags?.has_url ?? true))
 
         // Skip inspect when the revision already carries all schemas inline.
         // The merge step (workflowEntityAtomFamily) gives server schemas
diff --git a/web/packages/agenta-entity-ui/package.json b/web/packages/agenta-entity-ui/package.json
index fe30c9997a..65d257e1f3 100644
--- a/web/packages/agenta-entity-ui/package.json
+++ b/web/packages/agenta-entity-ui/package.json
@@ -32,6 +32,7 @@
         "@agenta/ui": "workspace:../agenta-ui",
         "@phosphor-icons/react": "^2.1.10",
         "clsx": "^2.1.1",
+        "fflate": "0.4.8",
         "js-yaml": "^4.1.1",
         "lodash": "^4.17.23",
         "lucide-react": "^0.479.0",
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentConfigControl.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentConfigControl.tsx
index e53e86594a..502b1efb6a 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentConfigControl.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentConfigControl.tsx
@@ -1,32 +1,52 @@
 /**
  * AgentConfigControl
  *
- * One composite control for the whole agent config, dispatched from
- * `x-ag-type: "agent_config"` / `x-ag-type-ref: "agent_config"` (see SchemaPropertyRenderer).
- * It reuses the existing controls rather than inventing new ones: the model selector
- * (GroupedChoiceControl), the tool picker (ToolSelectorPopover + ToolItemControl), the MCP
- * server editor (McpServerItemControl), the skill editor (SkillConfigControl), enum selects
- * (harness, sandbox, permission policy), and a textarea (agents_md). The field shape is the
- * `agent_config` catalog type generated
- * from the SDK model (AgentConfigSchema in agenta.sdk.utils.types); the agent service ships a
- * thin `x-ag-type-ref` the playground resolves and reads back (services/oss/src/agent).
+ * The agent playground's left config panel. It renders the whole agent config as a set
+ * of collapsible accordion sections (Model & harness, Instructions, Tools, MCP servers,
+ * Advanced), built on the reusable {@link ConfigAccordionSection} primitive so the same
+ * pattern can roll out to other config surfaces.
+ *
+ * Dispatched from `x-ag-type: "agent_config"` / `x-ag-type-ref: "agent_config"` (see
+ * SchemaPropertyRenderer). It reuses the existing schema controls rather than inventing
+ * new ones: the model selector (GroupedChoiceControl), the tool picker (ToolSelectorPopover
+ * + ToolItemControl), the MCP server editor (McpServerItemControl), enum selects (harness,
+ * sandbox, permission policy), and a textarea (agents_md). The field shape is the
+ * `agent_config` catalog type generated from the SDK model (AgentConfigSchema in
+ * agenta.sdk.utils.types); the agent service ships a thin `x-ag-type-ref` the playground
+ * resolves and reads back (services/oss/src/agent).
+ *
+ * Sections are schema-driven: each renders only when its field exists in the resolved
+ * schema, so the panel tracks the backend contract instead of hard-coding fields.
  */
 import {useCallback, useEffect, useMemo, useState} from "react"
 
 import {vaultSecretsQueryAtom} from "@agenta/entities/secret"
 import type {SchemaProperty} from "@agenta/entities/shared"
 import {harnessCapabilitiesAtomFamily} from "@agenta/entities/workflow"
-import {LabeledField} from "@agenta/ui/components/presentational"
+import {ConfigAccordionSection, LabeledField} from "@agenta/ui/components/presentational"
 import {useDrillInUI} from "@agenta/ui/drill-in"
 import {SelectLLMProviderBase} from "@agenta/ui/select-llm-provider"
 import {cn} from "@agenta/ui/styles"
-import {CaretDown, CaretRight, Plus} from "@phosphor-icons/react"
-import {Button, Segmented, Select, Switch, Typography} from "antd"
+import {
+    CaretRight,
+    Cpu,
+    FileText,
+    GraduationCap,
+    Plugs,
+    Plus,
+    SlidersHorizontal,
+    Trash,
+    Wrench,
+} from "@phosphor-icons/react"
+import {Button, Select, Switch, Tabs, Tag, Tooltip, Typography} from "antd"
 import {useAtomValue} from "jotai"
 
 import {useOptionalDrillIn} from "../components/MoleculeDrillInContext"
 
+import {agentConfigLayoutAtom} from "./agentConfigLayout"
 import {ClaudePermissionsControl} from "./ClaudePermissionsControl"
+import {CodeEditor} from "./CodeEditor"
+import {ConfigItemDrawer, type ConfigItemView} from "./ConfigItemDrawer"
 import {
     allowedConnectionModes,
     buildModelOptionGroups,
@@ -41,13 +61,15 @@ import {
 } from "./connectionUtils"
 import {EnumSelectControl} from "./EnumSelectControl"
 import {GroupedChoiceControl} from "./GroupedChoiceControl"
-import {McpServerItemControl} from "./McpServerItemControl"
+import {HarnessSelectControl} from "./HarnessSelectControl"
+import {JsonObjectEditor} from "./JsonObjectEditor"
+import {MarkdownEditor} from "./MarkdownEditor"
+import {McpServerFormView} from "./McpServerFormView"
 import {SandboxPermissionControl} from "./SandboxPermissionControl"
-import {isPlatformSkill, SkillConfigControl} from "./SkillConfigControl"
-import {TextInputControl} from "./TextInputControl"
-import {ToolItemControl} from "./ToolItemControl"
+import {SkillFormView} from "./SkillFormView"
+import {ToolFormView} from "./ToolFormView"
 import {ToolSelectorPopover, type ToolSelectionMeta} from "./ToolSelectorPopover"
-import {type ToolObj} from "./toolUtils"
+import {parseGatewayFunctionName, type ToolObj} from "./toolUtils"
 
 export interface AgentConfigControlProps {
     schema?: SchemaProperty | null
@@ -88,6 +110,299 @@ function isBuiltinPayloadMatch(tool: unknown, payload: ToolObj): boolean {
     )
 }
 
+/**
+ * Best-effort display label for an enum value, used in collapsed section summaries.
+ * Reads `x-model-metadata` titles and `anyOf`/`oneOf` const titles, falling back to the
+ * raw value so a summary is always shown.
+ */
+function enumLabel(schema: SchemaProperty | undefined, value: unknown): string | null {
+    if (value == null || value === "") return null
+    const v = String(value)
+    const s = schema as Record<string, unknown> | undefined
+    const meta = s?.["x-model-metadata"] as Record<string, {name?: string}> | undefined
+    if (meta?.[v]?.name) return meta[v]!.name as string
+    const variants = (s?.anyOf ?? s?.oneOf) as {const?: unknown; title?: string}[] | undefined
+    const hit = variants?.find((o) => o?.const === value)
+    if (hit?.title) return hit.title
+    return v
+}
+
+const countSummary = (n: number, noun: string): string =>
+    n > 0 ? `${n} ${noun}${n === 1 ? "" : "s"}` : "None"
+
+/** Whether a tool has an editable OpenAI-style `function` (vs a bare builtin `type`). */
+function isFunctionTool(tool: unknown): boolean {
+    if (!tool || typeof tool !== "object") return false
+    const fn = (tool as Record<string, unknown>).function
+    return Boolean(fn && typeof fn === "object")
+}
+
+/** How a config-item row presents itself: avatar, name + description, and type tags. */
+interface ItemDescriptor {
+    /** Primary label (rendered monospace). */
+    name: string
+    /** Secondary description line. */
+    description?: string
+    /** Avatar monogram, used when no `icon` is given. */
+    mono: string
+    /** Avatar background colour. */
+    color: string
+    /** Avatar icon (overrides the monogram). */
+    icon?: React.ReactNode
+    /** Type tags shown on the right of a row (e.g. "built-in", "definition", "gmail"). */
+    tags: string[]
+    /** Type label for the drawer header badge (e.g. "definition", "MCP server"). */
+    typeLabel: string
+    /** antd Tag colour for the header badge. */
+    typeColor?: string
+    /** One-line type description shown as the drawer subtitle. */
+    subtitle: string
+}
+
+/** Two-char monogram, title-cased ("gmail" -> "Gm", "zendesk" -> "Ze"). */
+function monogram(value: string): string {
+    return (value.charAt(0).toUpperCase() + (value.charAt(1) ?? "")).trim() || "?"
+}
+
+/** Deep-clone a config item so drawer edits don't alias the committed config object. */
+function cloneItem(item: unknown): Record<string, unknown> {
+    if (!item || typeof item !== "object") return {}
+    return JSON.parse(JSON.stringify(item)) as Record<string, unknown>
+}
+
+/** Classify a tool into its row avatar / name / description / type tags. */
+function describeTool(tool: unknown): ItemDescriptor {
+    const t = (tool ?? {}) as Record<string, unknown>
+    const fn = t.function as Record<string, unknown> | undefined
+    const fnName = typeof fn?.name === "string" ? (fn.name as string) : undefined
+    const description = typeof fn?.description === "string" ? (fn.description as string) : undefined
+
+    // Third-party / gateway tool: tools__provider__integration__action__connection.
+    const gateway = fnName ? parseGatewayFunctionName(fnName) : null
+    if (gateway) {
+        return {
+            name: gateway.action,
+            description,
+            mono: monogram(gateway.integration),
+            color: "#1c2c3d",
+            tags: [gateway.integration],
+            typeLabel: "third-party",
+            subtitle: `Connected app tool · ${gateway.integration}`,
+        }
+    }
+
+    // Built-in / provider tool: a bare `type` with no editable `function`.
+    if (!fn || typeof fn !== "object") {
+        const typeValue =
+            typeof t.type === "string" && t.type !== "function"
+                ? (t.type as string)
+                : Object.keys(t).find((k) => k !== "type" && k !== "function")
+        return {
+            name: typeValue ?? "Built-in tool",
+            mono: "io",
+            color: "#0d9488",
+            tags: ["built-in"],
+            typeLabel: "built-in",
+            typeColor: "cyan",
+            subtitle: "Provider built-in tool",
+        }
+    }
+
+    // Function definition (custom inline tool).
+    return {
+        name: fnName ?? "Tool",
+        description,
+        mono: "{}",
+        color: "#7c3aed",
+        tags: ["definition"],
+        typeLabel: "definition",
+        typeColor: "purple",
+        subtitle: "Schema-only · executed by your app",
+    }
+}
+
+/** Classify an MCP server into its row avatar / name / description / tags. */
+function describeMcp(server: unknown): ItemDescriptor {
+    const s = (server ?? {}) as Record<string, unknown>
+    const transport = s.transport === "http" ? "http" : "stdio"
+    const name = typeof s.name === "string" && s.name ? (s.name as string) : "MCP server"
+    const detailField = transport === "http" ? s.url : s.command
+    return {
+        name,
+        description: typeof detailField === "string" ? detailField : undefined,
+        mono: "",
+        color: "#2563eb",
+        icon: <Plugs size={15} weight="fill" />,
+        tags: [transport],
+        typeLabel: "MCP server",
+        typeColor: "cyan",
+        subtitle: "Model Context Protocol server",
+    }
+}
+
+/**
+ * A skills entry is either an inline SKILL.md package or an `@ag.embed` reference (which the
+ * backend inlines). Embed refs carry the marker at the top level and must round-trip intact, so
+ * they're edited JSON-only rather than through the structured form.
+ */
+function isEmbedRefSkill(skill: unknown): boolean {
+    return Boolean(
+        skill && typeof skill === "object" && "@ag.embed" in (skill as Record<string, unknown>),
+    )
+}
+
+/** Classify a skill into its row avatar / name / description / type tags. */
+function asObj(value: unknown): Record<string, unknown> | undefined {
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? (value as Record<string, unknown>)
+        : undefined
+}
+
+/** The reserved slug namespace for platform-owned skills (mirrors the backend `_agenta.*`). */
+const PLATFORM_SKILL_SLUG_PREFIX = "_agenta."
+
+/** The slug an `@ag.embed` entry points at (a `workflow` or pinned `workflow_revision` reference). */
+function platformEmbedSlug(skill: Record<string, unknown>): string | undefined {
+    const refs = asObj(asObj(skill["@ag.embed"])?.["@ag.references"])
+    if (!refs) return undefined
+    const slug = asObj(refs.workflow)?.slug ?? asObj(refs.workflow_revision)?.slug
+    return typeof slug === "string" ? slug : undefined
+}
+
+/** A pinned revision's version, when the embed references a `workflow_revision`. */
+function embedRevisionVersion(skill: Record<string, unknown>): string | undefined {
+    const refs = asObj(asObj(skill["@ag.embed"])?.["@ag.references"])
+    const version = asObj(refs?.workflow_revision)?.version
+    return typeof version === "string" ? version : undefined
+}
+
+/**
+ * Whether a skill entry is platform-owned and so read-only for the author. The reliable client-side
+ * signal is the reserved `_agenta.` slug prefix on the embed's referenced workflow (or pinned
+ * revision); a resolved object carrying `flags.is_platform === true` counts too.
+ */
+function isPlatformSkill(skill: unknown): boolean {
+    const s = asObj(skill)
+    if (!s) return false
+    const slug = platformEmbedSlug(s)
+    if (slug && slug.startsWith(PLATFORM_SKILL_SLUG_PREFIX)) return true
+    return asObj(s.flags)?.is_platform === true
+}
+
+function describeSkill(skill: unknown): ItemDescriptor {
+    const s = (skill ?? {}) as Record<string, unknown>
+    if (isPlatformSkill(s)) {
+        const slug = platformEmbedSlug(s)
+        const version = embedRevisionVersion(s)
+        return {
+            name: slug ?? "Platform skill",
+            mono: "sk",
+            color: "#6b7280",
+            tags: version ? ["platform", `v${version}`] : ["platform"],
+            typeLabel: "platform skill",
+            subtitle: "Provided by Agenta — read-only",
+        }
+    }
+    if (isEmbedRefSkill(s)) {
+        return {
+            name: "Skill reference",
+            mono: "sk",
+            color: "#b45309",
+            tags: ["@ag.embed"],
+            typeLabel: "@ag.embed",
+            typeColor: "blue",
+            subtitle: "Referenced skill — inlined by the backend",
+        }
+    }
+    return {
+        name: typeof s.name === "string" && s.name ? (s.name as string) : "Skill",
+        description: typeof s.description === "string" ? (s.description as string) : undefined,
+        mono: "sk",
+        color: "#b45309",
+        tags: ["skill"],
+        typeLabel: "skill",
+        typeColor: "gold",
+        subtitle: "Inline SKILL.md package",
+    }
+}
+
+/** Colored avatar square (icon or monogram) at the start of a config-item row. */
+function ItemAvatar({descriptor}: {descriptor: ItemDescriptor}) {
+    return (
+        <span
+            className="flex h-7 w-7 shrink-0 items-center justify-center rounded text-white"
+            style={{background: descriptor.color, fontSize: 10, fontWeight: 600, lineHeight: 1}}
+        >
+            {descriptor.icon ?? descriptor.mono}
+        </span>
+    )
+}
+
+/**
+ * A config-item row (a tool or MCP server): type avatar, name + description, type tags, and a
+ * chevron. The whole row opens the item drawer; remove appears on hover.
+ */
+function ItemRow({
+    descriptor,
+    onEdit,
+    onRemove,
+    disabled,
+}: {
+    descriptor: ItemDescriptor
+    onEdit: () => void
+    onRemove?: () => void
+    disabled?: boolean
+}) {
+    return (
+        <div
+            role="button"
+            tabIndex={0}
+            onClick={onEdit}
+            onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault()
+                    onEdit()
+                }
+            }}
+            className="group flex cursor-pointer items-center gap-2.5 rounded border border-solid border-[var(--ag-c-EAEFF5,#eaeff5)] px-3 py-2 transition-colors hover:border-[var(--ag-c-97A4B0,#97a4b0)]"
+        >
+            <ItemAvatar descriptor={descriptor} />
+            <div className="min-w-0 flex-1">
+                <div className="truncate font-mono text-xs font-medium">{descriptor.name}</div>
+                {descriptor.description ? (
+                    <Typography.Text
+                        type="secondary"
+                        className="block truncate text-xs leading-tight"
+                    >
+                        {descriptor.description}
+                    </Typography.Text>
+                ) : null}
+            </div>
+            <div className="flex shrink-0 items-center gap-1.5">
+                {descriptor.tags.map((tag) => (
+                    <Tag key={tag} className="m-0 text-[11px]">
+                        {tag}
+                    </Tag>
+                ))}
+                {onRemove && !disabled ? (
+                    <button
+                        type="button"
+                        aria-label="Remove"
+                        onClick={(e) => {
+                            e.stopPropagation()
+                            onRemove()
+                        }}
+                        className="flex cursor-pointer items-center border-0 bg-transparent p-0 text-[var(--ag-c-97A4B0,#97a4b0)] opacity-0 transition-opacity hover:text-[var(--ag-c-FF4D4F,#ff4d4f)] group-hover:opacity-100"
+                    >
+                        <Trash size={14} />
+                    </button>
+                ) : null}
+                <CaretRight size={14} className="text-[var(--ag-c-97A4B0,#97a4b0)]" />
+            </div>
+        </div>
+    )
+}
+
 export function AgentConfigControl({
     schema,
     value,
@@ -96,8 +411,41 @@ export function AgentConfigControl({
     disabled,
     className,
 }: AgentConfigControlProps) {
-    const {EditorProvider, SharedEditor, gatewayTools} = useDrillInUI()
+    const {gatewayTools} = useDrillInUI()
     const config = (value ?? {}) as Record<string, unknown>
+
+    // The item-config drawer (tools / MCP servers). Edits happen on a local `draft`; they only
+    // apply to the config on Save. So creating an item never pollutes the config until confirmed,
+    // and editing an existing item can be cancelled cleanly (Cancel/X discards the draft).
+    const [editing, setEditing] = useState<{
+        kind: "tool" | "mcp" | "skill"
+        mode: "create" | "edit"
+        index: number
+    } | null>(null)
+    const [draft, setDraft] = useState<Record<string, unknown>>({})
+    const [drawerView, setDrawerView] = useState<ConfigItemView>("form")
+    const openCreate = useCallback(
+        (kind: "tool" | "mcp" | "skill", seed: Record<string, unknown>, view: ConfigItemView) => {
+            setDraft(seed)
+            setDrawerView(view)
+            setEditing({kind, mode: "create", index: -1})
+        },
+        [],
+    )
+    const openEdit = useCallback(
+        (kind: "tool" | "mcp" | "skill", index: number, item: unknown, view: ConfigItemView) => {
+            setDraft(cloneItem(item))
+            setDrawerView(view)
+            setEditing({kind, mode: "edit", index})
+        },
+        [],
+    )
+    const closeEditor = useCallback(() => setEditing(null), [])
+
+    // How the config sections are laid out: stacked accordion (default), tabs, or cards.
+    // Layout is a global, persisted preference set from the variant header menu (see
+    // agentConfigLayout); the panel only reads it.
+    const layout = useAtomValue(agentConfigLayoutAtom)
     const props = (schema?.properties ?? {}) as Record<string, SchemaProperty>
 
     // Update a single field of the agent config, leaving the rest intact.
@@ -106,6 +454,18 @@ export function AgentConfigControl({
         [config, onChange],
     )
 
+    // Model + credential connection (the ModelRef). `config.model` is ALWAYS a structured ModelRef
+    // (the harness-filtered picker only ever produces one); a legacy bare string is read for
+    // display. composeModelValue carries through extra keys (e.g. `params`) so a form edit never
+    // silently drops them. The picker is harness-filtered: selecting a model sets BOTH the model id
+    // and its provider, fed by the `/inspect` capability map below.
+    const harnessValue = typeof config.harness === "string" ? config.harness : null
+    // Pi (`pi_core`/`pi_agenta`) never gates tool use (`permissions: false`); a permission
+    // policy is meaningless for it, so the field is hidden for Pi. Only Claude honors it.
+    const isPiHarness = harnessValue === "pi_core" || harnessValue === "pi_agenta"
+    const modelId = useMemo(() => modelIdFromConfig(config.model), [config.model])
+    const connection = useMemo(() => connectionFromConfig(config.model), [config.model])
+
     // Per-harness capability map from the `/inspect` response meta, keyed by the open revision.
     // Null when inspect hasn't resolved or the agent didn't publish it (older agents / standalone),
     // in which case the connectionUtils helpers fall back permissively.
@@ -115,34 +475,25 @@ export function AgentConfigControl({
         useMemo(() => harnessCapabilitiesAtomFamily(revisionId ?? ""), [revisionId]),
     )
 
-    // The project's stored connections (read-only) for the connection picker. The transformed
-    // vault list surfaces custom-provider connections as {type, name, provider}; the resolver
-    // matches a named connection by that name (the slug).
+    // The project's stored connections (read-only) for the connection picker. The transformed vault
+    // list surfaces custom-provider connections as {type, name, provider}; the resolver matches a
+    // named connection by that name (the slug).
     const vaultQuery = useAtomValue(vaultSecretsQueryAtom)
     const vaultSecrets = useMemo(
         () => (Array.isArray(vaultQuery.data) ? (vaultQuery.data as VaultConnectionEntry[]) : []),
         [vaultQuery.data],
     )
 
-    // Model + credential connection (the ModelRef). `config.model` is ALWAYS a structured ModelRef
-    // (the picker only ever produces one); a legacy bare string is read for display. The picker is
-    // harness-filtered: selecting a model sets BOTH the model id and its provider.
-    const harness = typeof config.harness === "string" ? config.harness : null
-    // Pi (`pi_core`/`pi_agenta`) never gates tool use (`permissions: false`); a permission
-    // policy is meaningless for it, so the field is hidden for Pi. Only Claude honors it.
-    const isPiHarness = harness === "pi_core" || harness === "pi_agenta"
-    const modelId = useMemo(() => modelIdFromConfig(config.model), [config.model])
-    const connection = useMemo(() => connectionFromConfig(config.model), [config.model])
     const modeOptions = useMemo(
-        () => allowedConnectionModes(capabilities, harness),
-        [capabilities, harness],
+        () => allowedConnectionModes(capabilities, harnessValue),
+        [capabilities, harnessValue],
     )
 
     // Harness-filtered model options, built straight from inspect meta. Empty when the harness
     // publishes none (older agent / standalone) — fall back to the schema's full catalog picker.
     const modelGroups = useMemo(
-        () => buildModelOptionGroups(capabilities, harness),
-        [capabilities, harness],
+        () => buildModelOptionGroups(capabilities, harnessValue),
+        [capabilities, harnessValue],
     )
     const hasInspectModels = modelGroups.length > 0
 
@@ -162,7 +513,7 @@ export function AgentConfigControl({
                 nextProvider = patch.provider
             } else if (patch.modelId !== undefined) {
                 nextProvider =
-                    providerForModel(capabilities, harness, nextModelId) ?? connection.provider
+                    providerForModel(capabilities, harnessValue, nextModelId) ?? connection.provider
             } else {
                 nextProvider = connection.provider
             }
@@ -173,33 +524,43 @@ export function AgentConfigControl({
                     provider: nextProvider,
                     mode: patch.mode !== undefined ? patch.mode : connection.mode,
                     slug: patch.slug !== undefined ? patch.slug : connection.slug,
-                    // Carry through extra ModelRef keys (params, ...) the form does not edit.
                     existing: config.model,
                 }),
             )
         },
-        [setField, modelId, connection, config.model, capabilities, harness],
+        [setField, modelId, connection, config.model, capabilities, harnessValue],
     )
 
     // On harness switch, clear a model the new harness can't reach (rather than sending an
     // unsupported model). Permissive when the new harness publishes no models.
     useEffect(() => {
-        if (!harness || !modelId) return
-        if (!harnessAllowsModel(capabilities, harness, modelId)) {
-            writeModel({modelId: null, provider: null})
+        if (!harnessValue || !modelId) return
+        if (!harnessAllowsModel(capabilities, harnessValue, modelId)) {
+            // Drop the stale named connection too, not just the model id/provider.
+            writeModel({modelId: null, provider: null, slug: null})
         }
         // Only react to harness/capabilities changes, not every model edit.
-    }, [harness, capabilities])
+    }, [harnessValue, capabilities])
+
+    // Also reset a connection mode the new harness no longer allows. Guarded on a non-empty
+    // option set so a harness that publishes no modes stays permissive (and we never loop).
+    // Slug validity is intentionally NOT normalized here: connectionOptions is vault-secret
+    // async, so an empty set during load would wrongly clear a valid slug.
+    useEffect(() => {
+        if (modeOptions.length > 0 && !modeOptions.includes(connection.mode)) {
+            writeModel({mode: modeOptions[0], slug: null})
+        }
+    }, [connection.mode, modeOptions, writeModel])
 
     // Named connections selectable for the chosen provider under this harness (Agenta-managed).
     const connectionOptions = useMemo(
-        () => namedConnectionOptions(vaultSecrets, capabilities, harness, connection.provider),
-        [vaultSecrets, capabilities, harness, connection.provider],
+        () => namedConnectionOptions(vaultSecrets, capabilities, harnessValue, connection.provider),
+        [vaultSecrets, capabilities, harnessValue, connection.provider],
     )
 
     // Raw-JSON escape hatch for the whole `config.model` value (collapsed by default).
     const [showModelJson, setShowModelJson] = useState(false)
-    const [modelJsonText, setModelJsonText] = useState<string>(() =>
+    const [modelJsonText, setModelJsonText] = useState(() =>
         JSON.stringify(config.model ?? "", null, 2),
     )
     const handleModelJsonChange = useCallback(
@@ -220,6 +581,54 @@ export function AgentConfigControl({
         },
         [config.model],
     )
+    // Keep the open JSON buffer in sync when `config.model` changes from OUTSIDE the editor
+    // (the model picker or the authentication cards). Guard with a structural compare so we
+    // only resync on external changes — when the buffer already represents `config.model`
+    // (the user is typing here) we skip, so we never reformat mid-edit or fight the cursor.
+    useEffect(() => {
+        if (!showModelJson) return
+        let bufferValue: unknown
+        try {
+            bufferValue = modelJsonText ? JSON.parse(modelJsonText) : ""
+        } catch {
+            return // invalid in-progress JSON — leave the user's text untouched
+        }
+        if (JSON.stringify(bufferValue) !== JSON.stringify(config.model ?? "")) {
+            setModelJsonText(JSON.stringify(config.model ?? "", null, 2))
+        }
+    }, [config.model, showModelJson, modelJsonText])
+
+    // Claude permissions (Layer 1, Claude-only): the Claude harness's own permission knobs, kept in
+    // the neutral `harness_kwargs.claude.permissions` bag. Shown in Advanced only for the Claude
+    // harness; writes preserve any other harness_kwargs slices.
+    const harnessKwargs = useMemo(
+        () =>
+            config.harness_kwargs && typeof config.harness_kwargs === "object"
+                ? (config.harness_kwargs as Record<string, unknown>)
+                : {},
+        [config.harness_kwargs],
+    )
+    const claudePermissions = useMemo(() => {
+        const claude =
+            harnessKwargs.claude && typeof harnessKwargs.claude === "object"
+                ? (harnessKwargs.claude as Record<string, unknown>)
+                : undefined
+        const perms = claude?.permissions
+        return perms && typeof perms === "object" ? (perms as Record<string, unknown>) : null
+    }, [harnessKwargs])
+    const setClaudePermissions = useCallback(
+        (next: Record<string, unknown>) => {
+            const claude =
+                harnessKwargs.claude && typeof harnessKwargs.claude === "object"
+                    ? (harnessKwargs.claude as Record<string, unknown>)
+                    : {}
+            setField("harness_kwargs", {
+                ...harnessKwargs,
+                claude: {...claude, permissions: next},
+            })
+        },
+        [harnessKwargs, setField],
+    )
 
     // Tools live as a flat array on the agent config (the same tool-object shape the
     // prompt control uses, so the backend resolver parses them identically).
@@ -243,18 +652,16 @@ export function AgentConfigControl({
                           },
                       }
                     : tool
+            // A custom (inline function) tool starts blank — edit it in a create drawer and only
+            // append on Save, so a half-filled tool never lands in the config. Builtin/gateway
+            // tools arrive complete (and gateway is multi-select), so add those straight away.
+            if (meta?.source === "custom") {
+                openCreate("tool", next as Record<string, unknown>, "form")
+                return
+            }
             setTools([...tools, next])
         },
-        [tools, setTools],
-    )
-
-    const handleToolChange = useCallback(
-        (index: number, next: ToolObj) => {
-            const updated = [...tools]
-            updated[index] = next
-            setTools(updated)
-        },
-        [tools, setTools],
+        [tools, setTools, openCreate],
     )
 
     const handleToolDelete = useCallback(
@@ -297,90 +704,81 @@ export function AgentConfigControl({
         (next: unknown[]) => setField("mcp_servers", next),
         [setField],
     )
-    const handleAddMcpServer = useCallback(
-        () => setMcpServers([...mcpServers, {name: "", transport: "stdio", command: "", args: []}]),
-        [mcpServers, setMcpServers],
-    )
-    const handleMcpServerChange = useCallback(
-        (index: number, next: Record<string, unknown>) => {
-            const updated = [...mcpServers]
-            updated[index] = next
-            setMcpServers(updated)
-        },
-        [mcpServers, setMcpServers],
-    )
+    const handleAddMcpServer = useCallback(() => {
+        openCreate("mcp", {name: "", transport: "stdio", command: "", args: []}, "form")
+    }, [openCreate])
     const handleMcpServerDelete = useCallback(
         (index: number) => setMcpServers(mcpServers.filter((_, i) => i !== index)),
         [mcpServers, setMcpServers],
     )
 
-    // Skills are a sibling of tools/mcp_servers: a flat array on the agent config. Each entry is
-    // either an inline SKILL.md package (name + description + body + optional files/flags) or an
-    // `@ag.embed` reference the backend inlines into that same shape. Both are edited as JSON the
-    // backend resolver parses identically; an embed entry round-trips intact (see SkillConfigControl).
+    // Skills are a sibling of tools/MCP: a flat array on the agent config. Each entry is an inline
+    // SKILL.md package (name + description + body + files + flags) or an `@ag.embed` reference the
+    // backend inlines — the `skill_config` catalog type (SkillConfigSchema in the SDK).
     const skills = useMemo(
         () => (Array.isArray(config.skills) ? (config.skills as unknown[]) : []),
         [config.skills],
     )
     const setSkills = useCallback((next: unknown[]) => setField("skills", next), [setField])
-    const handleAddSkill = useCallback(
-        () => setSkills([...skills, {name: "", description: "", body: ""}]),
-        [skills, setSkills],
-    )
-    const handleSkillChange = useCallback(
-        (index: number, next: Record<string, unknown>) => {
-            const updated = [...skills]
-            updated[index] = next
-            setSkills(updated)
-        },
-        [skills, setSkills],
-    )
+    const handleAddSkill = useCallback(() => {
+        openCreate("skill", {name: "", description: "", body: ""}, "form")
+    }, [openCreate])
     const handleSkillDelete = useCallback(
         (index: number) => setSkills(skills.filter((_, i) => i !== index)),
         [skills, setSkills],
     )
 
-    // Layer 2: the sandbox security boundary (`sandbox_permission`). Applies to every harness.
-    // Stored as a nested object; an unset value stays null until the author changes something.
-    const sandboxPermission = useMemo(
-        () =>
-            config.sandbox_permission && typeof config.sandbox_permission === "object"
-                ? (config.sandbox_permission as Record<string, unknown>)
-                : null,
-        [config.sandbox_permission],
-    )
+    // Apply the drawer's draft to the config: append (create) or replace at index (edit).
+    const commitDraft = useCallback(() => {
+        if (!editing) return
+        if (editing.kind === "tool") {
+            const next = [...tools]
+            if (editing.mode === "create") next.push(draft)
+            else next[editing.index] = draft
+            setTools(next)
+        } else if (editing.kind === "mcp") {
+            const next = [...mcpServers]
+            if (editing.mode === "create") next.push(draft)
+            else next[editing.index] = draft
+            setMcpServers(next)
+        } else {
+            const next = [...skills]
+            if (editing.mode === "create") next.push(draft)
+            else next[editing.index] = draft
+            setSkills(next)
+        }
+        setEditing(null)
+    }, [editing, draft, tools, mcpServers, skills, setTools, setMcpServers, setSkills])
 
-    // Layer 1 (Claude-only): the Claude harness's own permission knobs, persisted into the neutral
-    // `harness_kwargs.claude.permissions` bag. Hidden when the harness is not Claude.
-    const harnessKwargs = useMemo(
-        () =>
-            config.harness_kwargs && typeof config.harness_kwargs === "object"
-                ? (config.harness_kwargs as Record<string, unknown>)
-                : {},
-        [config.harness_kwargs],
-    )
-    const claudePermissions = useMemo(() => {
-        const claude = harnessKwargs.claude
-        const claudeObj =
-            claude && typeof claude === "object" ? (claude as Record<string, unknown>) : undefined
-        const perms = claudeObj?.permissions
-        return perms && typeof perms === "object" ? (perms as Record<string, unknown>) : null
-    }, [harnessKwargs])
-    // Write `harness_kwargs.claude.permissions`, preserving any other harness_kwargs slices.
-    const setClaudePermissions = useCallback(
-        (next: Record<string, unknown>) => {
-            const claude =
-                harnessKwargs.claude && typeof harnessKwargs.claude === "object"
-                    ? (harnessKwargs.claude as Record<string, unknown>)
-                    : {}
-            setField("harness_kwargs", {
-                ...harnessKwargs,
-                claude: {...claude, permissions: next},
-            })
-        },
-        [harnessKwargs, setField],
-    )
-    const [showClaudeAdvanced, setShowClaudeAdvanced] = useState(false)
+    // Block Save until the draft has the minimum it needs to be a valid item (a name). `@ag.embed`
+    // skill references carry no name and are always valid (they round-trip as-is).
+    // JSON-view parse validity from the open drawer's JsonObjectEditor; blocks Save while the
+    // raw JSON is invalid. The editor keeps invalid text local and stops emitting onChange, so
+    // without this Save would silently commit the last valid draft.
+    const [jsonInvalid, setJsonInvalid] = useState(false)
+    // Reset when the open item changes — each editor is keyed/remounts and starts valid.
+    useEffect(() => {
+        setJsonInvalid(false)
+    }, [editing])
+
+    const draftInvalid = useMemo(() => {
+        if (!editing) return true
+        if (editing.kind === "mcp") {
+            // A server needs a launch target too, not just a name: stdio → command, http → url.
+            const name = String(draft.name ?? "").trim()
+            const transport = draft.transport === "http" ? "http" : "stdio"
+            const target =
+                transport === "http"
+                    ? String(draft.url ?? "").trim()
+                    : String(draft.command ?? "").trim()
+            return !name || !target
+        }
+        if (editing.kind === "skill")
+            return !isEmbedRefSkill(draft) && !String(draft.name ?? "").trim()
+        const fn = draft.function as Record<string, unknown> | undefined
+        if (fn && typeof fn === "object") return !String(fn.name ?? "").trim()
+        return false
+    }, [editing, draft])
 
     // ``agents_md`` is the catalog-schema field; ``instructions`` is read as a fallback so an
     // already-stored agent config (the legacy key) still populates the editor.
@@ -389,343 +787,619 @@ export function AgentConfigControl({
         (config.instructions as string | null | undefined) ??
         null
 
-    return (
-        <div className={cn("flex flex-col gap-3", className)}>
-            <TextInputControl
-                schema={props.agents_md}
-                label="Instructions"
-                value={agentsMd}
-                onChange={(v) => setField("agents_md", v)}
-                description={props.agents_md?.description as string | undefined}
-                withTooltip={withTooltip}
-                disabled={disabled}
-                multiline
-            />
-
-            {/* Unified provider + model picker. When the agent's `/inspect` publishes a
-                harness-filtered model list we render from it (selecting a model sets both the model
-                id and its provider). Otherwise we fall back to the schema's full catalog picker. */}
-            {hasInspectModels ? (
-                <LabeledField
-                    label="Model"
-                    description="Filtered to the models this harness can reach. Selecting a model also sets its provider."
-                    withTooltip={withTooltip}
-                >
-                    <SelectLLMProviderBase
-                        showGroup
-                        options={modelGroups}
-                        value={modelId ?? undefined}
-                        onChange={(v) => writeModel({modelId: (v as string) ?? null})}
-                        disabled={disabled}
-                        placeholder="Select a model..."
-                        className="w-full"
-                        size="small"
-                    />
-                </LabeledField>
-            ) : (
-                <GroupedChoiceControl
-                    schema={props.model}
-                    label="Model"
-                    value={modelId}
-                    onChange={(v) => writeModel({modelId: v})}
-                    withTooltip={withTooltip}
-                    disabled={disabled}
-                />
-            )}
+    const modelSummary =
+        [enumLabel(props.harness, config.harness), enumLabel(props.model, modelId)]
+            .filter(Boolean)
+            .join(" · ") || undefined
 
-            {/* Authentication: Agenta-managed (a vault connection) vs self-managed (the harness
-                uses its own login; Agenta injects nothing). Maps to connection.mode. */}
-            <div className="flex flex-col gap-2">
-                <Typography.Text className="text-sm font-medium">Authentication</Typography.Text>
+    const hasInstructions = Boolean(props.agents_md)
+    const hasModelOrHarness = Boolean(props.model || props.harness)
+    const hasTools = Boolean(props.tools)
+    const hasMcp = Boolean(props.mcp_servers)
+    const hasSkills = Boolean(props.skills)
+    const hasClaudePermissions = harnessValue === "claude"
+    const hasAdvanced = Boolean(
+        props.sandbox ||
+        props.permission_policy ||
+        props.sandbox_permission ||
+        hasClaudePermissions,
+    )
 
-                <Segmented<ConnectionMode>
-                    block
-                    size="small"
-                    value={connection.mode}
-                    onChange={(v) => writeModel({mode: v})}
-                    disabled={disabled}
-                    options={modeOptions.map((m) => ({
-                        value: m,
-                        label: m === "agenta" ? "Agenta-managed" : "Self-managed",
-                    }))}
-                />
+    // Shared props for the tool picker, so the in-body popover and the header quick-add trigger
+    // drive the same add flow.
+    const toolSelectorProps = {
+        onAddTool: handleAddTool,
+        onRemoveTool: handleRemoveToolByName,
+        onRemoveBuiltinTool: handleRemoveBuiltinTool,
+        selectedToolNames,
+        selectedTools: tools as ToolObj[],
+        existingToolCount: tools.length,
+        gatewayTools,
+    }
 
-                {connection.mode === "agenta" ? (
-                    <LabeledField
-                        label="Connection"
-                        description="Which stored connection supplies the credential. Project default uses the project's provider key."
-                        withTooltip
-                    >
-                        <Select<string>
-                            value={connection.slug ?? "__default__"}
-                            onChange={(v) =>
-                                writeModel({slug: v === "__default__" ? null : (v ?? null)})
-                            }
-                            options={[
-                                {value: "__default__", label: "Project default"},
-                                ...connectionOptions.map((o) => ({value: o.value, label: o.label})),
-                            ]}
+    // A compact "+" affordance for a section header, so an item can be added without first
+    // expanding the section. Rendered in the header's `extra` slot (which stops propagation, so it
+    // never toggles the section).
+    const headerAddButton = (label: string, onClick: () => void) => (
+        <Tooltip title={label}>
+            <Button type="text" icon={<Plus size={16} />} onClick={onClick} aria-label={label} />
+        </Tooltip>
+    )
+
+    // Each config section as a descriptor, so it can be rendered in any layout (accordion /
+    // tabs / cards) without duplicating the content. Schema-gated, like before.
+    const sections = [
+        hasModelOrHarness && {
+            key: "model-harness",
+            icon: <Cpu size={16} />,
+            title: "Model & harness",
+            summary: modelSummary,
+            defaultOpen: true,
+            content: (
+                <>
+                    {props.harness && (
+                        <HarnessSelectControl
+                            schema={props.harness}
+                            label="Harness"
+                            value={(config.harness as string | null) ?? null}
+                            onChange={(v) => setField("harness", v)}
+                            withTooltip={withTooltip}
                             disabled={disabled}
-                            className="w-full"
-                            size="small"
-                            showSearch
-                            optionFilterProp="label"
-                        />
-                    </LabeledField>
-                ) : (
-                    <Typography.Text type="secondary" className="text-xs">
-                        The harness uses its own login (env var or prior OAuth). Agenta injects
-                        nothing.
-                    </Typography.Text>
-                )}
-
-                <div className="flex items-center gap-2">
-                    <Switch
-                        size="small"
-                        checked={showModelJson}
-                        onChange={handleToggleModelJson}
-                        disabled={disabled}
-                    />
-                    <Typography.Text className="text-xs">Edit as JSON</Typography.Text>
-                </div>
-                {showModelJson &&
-                    (EditorProvider && SharedEditor ? (
-                        <EditorProvider
-                            codeOnly
-                            language="json"
-                            showToolbar={false}
-                            enableTokens={false}
-                            id="agent-model-json-editor"
-                        >
-                            <SharedEditor
-                                initialValue={modelJsonText}
-                                editorProps={{
-                                    codeOnly: true,
-                                    language: "json",
-                                    showLineNumbers: true,
-                                    noProvider: true,
-                                }}
-                                handleChange={handleModelJsonChange}
-                                noProvider
-                                disableDebounce
-                                syncWithInitialValueChanges
-                                editorType="border"
-                                state={disabled ? "readOnly" : "filled"}
-                            />
-                        </EditorProvider>
-                    ) : (
-                        <textarea
-                            className="font-mono text-xs p-2 border rounded min-h-[120px] resize-y w-full"
-                            value={modelJsonText}
-                            onChange={(e) => handleModelJsonChange(e.target.value)}
-                            readOnly={disabled}
                         />
-                    ))}
-            </div>
+                    )}
+                    {props.model && (
+                        <>
+                            {/* Unified provider + model picker. When the agent's `/inspect`
+                                publishes a harness-filtered model list we render from it (selecting
+                                a model sets both the model id and its provider). Otherwise we fall
+                                back to the schema's full catalog picker. */}
+                            {hasInspectModels ? (
+                                <LabeledField
+                                    label="Model"
+                                    description="Filtered to the models this harness can reach. Selecting a model also sets its provider."
+                                    withTooltip={withTooltip}
+                                >
+                                    <SelectLLMProviderBase
+                                        showGroup
+                                        options={modelGroups}
+                                        value={modelId ?? undefined}
+                                        onChange={(v) =>
+                                            writeModel({modelId: (v as string) ?? null})
+                                        }
+                                        disabled={disabled}
+                                        placeholder="Select a model…"
+                                        className="w-full"
+                                    />
+                                </LabeledField>
+                            ) : (
+                                <GroupedChoiceControl
+                                    schema={props.model}
+                                    label="Model"
+                                    value={modelId}
+                                    onChange={(v) => writeModel({modelId: v})}
+                                    withTooltip={withTooltip}
+                                    disabled={disabled}
+                                />
+                            )}
+
+                            {/* Authentication (credential source) + the chosen connection, grouped
+                                as an inset card so the credential fields read as a sub-section, not
+                                peers of Harness/Model. Agenta-managed uses a stored vault
+                                connection; self-managed means the harness brings its own login. */}
+                            <div className="mt-1 flex flex-col gap-2 rounded-lg border border-solid border-[var(--ag-c-EAEFF5,#eaeff5)] p-3">
+                                <Typography.Text className="text-[11px] font-medium uppercase tracking-wide text-[var(--ag-c-97A4B0,#97a4b0)]">
+                                    Authentication
+                                </Typography.Text>
+
+                                {/* Credential source as selectable radio cards (not a segmented
+                                    tab): each option carries an explainer so the choice is
+                                    self-describing. The selected card is marked by the brand-primary
+                                    border + filled radio dot + primary title — token-based so it
+                                    reads in light and dark. */}
+                                {modeOptions.map((m) => {
+                                    const selected = connection.mode === m
+                                    const title = m === "agenta" ? "Agenta-managed" : "Self-managed"
+                                    const desc =
+                                        m === "agenta"
+                                            ? "Agenta supplies the credential from this project's vault — the default provider key, or a named connection you pick below."
+                                            : "The harness signs in itself (an environment variable or a prior OAuth login). Agenta injects no credential."
+                                    return (
+                                        <button
+                                            key={m}
+                                            type="button"
+                                            role="radio"
+                                            aria-checked={selected}
+                                            disabled={disabled}
+                                            onClick={() => writeModel({mode: m})}
+                                            className={cn(
+                                                "flex w-full items-start gap-2.5 rounded-lg border border-solid p-2.5 text-left transition-colors",
+                                                disabled
+                                                    ? "cursor-not-allowed opacity-60"
+                                                    : "cursor-pointer",
+                                                selected
+                                                    ? "border-[var(--ant-color-primary)] bg-[var(--ant-color-fill-secondary)]"
+                                                    : "border-[var(--ant-color-border)] bg-[var(--ant-color-fill-quaternary)] hover:border-[var(--ant-color-text-quaternary)] hover:bg-[var(--ant-color-fill-tertiary)]",
+                                            )}
+                                        >
+                                            <span
+                                                className={cn(
+                                                    "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-solid",
+                                                    selected
+                                                        ? "border-[var(--ant-color-primary)]"
+                                                        : "border-[var(--ant-color-text-tertiary)]",
+                                                )}
+                                            >
+                                                {selected && (
+                                                    <span className="h-2 w-2 rounded-full bg-[var(--ant-color-primary)]" />
+                                                )}
+                                            </span>
+                                            <span className="flex flex-col gap-0.5">
+                                                <Typography.Text
+                                                    className={cn(
+                                                        "text-xs font-medium leading-none",
+                                                        selected &&
+                                                            "!text-[var(--ant-color-primary-text)]",
+                                                    )}
+                                                >
+                                                    {title}
+                                                </Typography.Text>
+                                                <Typography.Text
+                                                    type="secondary"
+                                                    className="text-[11px] leading-snug"
+                                                >
+                                                    {desc}
+                                                </Typography.Text>
+                                            </span>
+                                        </button>
+                                    )
+                                })}
 
-            {/* Tools */}
-            <div className="flex flex-col gap-2">
-                {tools.length > 0 && (
-                    <div className="flex flex-col gap-2">
-                        {tools.map((tool, index) => {
-                            const control = (
-                                <ToolItemControl
+                                {connection.mode === "agenta" && (
+                                    <LabeledField
+                                        label="Connection"
+                                        description="Which stored connection supplies the credential. Project default uses the project's provider key."
+                                        withTooltip
+                                    >
+                                        <Select<string>
+                                            value={connection.slug ?? "__default__"}
+                                            onChange={(v) =>
+                                                writeModel({
+                                                    slug: v === "__default__" ? null : (v ?? null),
+                                                })
+                                            }
+                                            options={[
+                                                {value: "__default__", label: "Project default"},
+                                                ...connectionOptions.map((o) => ({
+                                                    value: o.value,
+                                                    label: o.label,
+                                                })),
+                                            ]}
+                                            disabled={disabled}
+                                            className="w-full"
+                                            showSearch
+                                            optionFilterProp="label"
+                                        />
+                                    </LabeledField>
+                                )}
+
+                                <div className="flex items-center gap-2">
+                                    <Switch
+                                        checked={showModelJson}
+                                        onChange={handleToggleModelJson}
+                                        disabled={disabled}
+                                    />
+                                    <Typography.Text className="text-xs">
+                                        Edit as JSON
+                                    </Typography.Text>
+                                </div>
+                                {showModelJson && (
+                                    <CodeEditor
+                                        value={modelJsonText}
+                                        onChange={handleModelJsonChange}
+                                        language="json"
+                                        disabled={disabled}
+                                    />
+                                )}
+                            </div>
+                        </>
+                    )}
+                </>
+            ),
+        },
+        hasInstructions && {
+            key: "instructions",
+            icon: <FileText size={16} />,
+            title: (
+                <span className="inline-flex items-center gap-2">
+                    Instructions
+                    <Tag className="m-0 font-normal" bordered>
+                        AGENTS.md
+                    </Tag>
+                </span>
+            ),
+            defaultOpen: true,
+            content: (
+                <MarkdownEditor
+                    value={agentsMd ?? ""}
+                    onChange={(v) => setField("agents_md", v)}
+                    placeholder={"# Role\n\nDescribe what the agent does and how it should behave…"}
+                    disabled={disabled}
+                    filename="AGENTS.md"
+                />
+            ),
+        },
+        hasTools && {
+            key: "tools",
+            icon: <Wrench size={16} />,
+            title: "Tools",
+            summary: countSummary(tools.length, "tool"),
+            extra: !disabled ? (
+                <ToolSelectorPopover
+                    {...toolSelectorProps}
+                    trigger={
+                        <Tooltip title="Add tool">
+                            <Button
+                                type="text"
+                                icon={<Plus size={16} />}
+                                disabled={disabled}
+                                aria-label="Add tool"
+                            />
+                        </Tooltip>
+                    }
+                />
+            ) : undefined,
+            defaultOpen: true,
+            content: (
+                <>
+                    {tools.length > 0 && (
+                        <div className="flex flex-col gap-2">
+                            {tools.map((tool, index) => (
+                                <ItemRow
                                     key={`tool-${index}`}
-                                    value={tool}
-                                    onChange={(v) => handleToolChange(index, v)}
-                                    onDelete={disabled ? undefined : () => handleToolDelete(index)}
+                                    descriptor={describeTool(tool)}
+                                    onEdit={() =>
+                                        openEdit(
+                                            "tool",
+                                            index,
+                                            tool,
+                                            isFunctionTool(tool) ? "form" : "json",
+                                        )
+                                    }
+                                    onRemove={() => {
+                                        handleToolDelete(index)
+                                        closeEditor()
+                                    }}
                                     disabled={disabled}
                                 />
-                            )
-                            return EditorProvider ? (
-                                <EditorProvider
-                                    key={`tool-editor-${index}`}
-                                    codeOnly
-                                    language="json"
-                                    showToolbar={false}
-                                    enableTokens={false}
-                                    id={`agent-tool-editor-${index}`}
-                                >
-                                    {control}
-                                </EditorProvider>
-                            ) : (
-                                control
-                            )
-                        })}
-                    </div>
-                )}
-                {!disabled && (
-                    <div>
-                        <ToolSelectorPopover
-                            onAddTool={handleAddTool}
-                            onRemoveTool={handleRemoveToolByName}
-                            onRemoveBuiltinTool={handleRemoveBuiltinTool}
-                            selectedToolNames={selectedToolNames}
-                            selectedTools={tools as ToolObj[]}
-                            existingToolCount={tools.length}
-                            gatewayTools={gatewayTools}
-                        />
-                    </div>
-                )}
-            </div>
-
-            {/* MCP servers */}
-            <div className="flex flex-col gap-2">
-                <Typography.Text className="text-sm font-medium">MCP servers</Typography.Text>
-                {mcpServers.length > 0 && (
-                    <div className="flex flex-col gap-2">
-                        {mcpServers.map((server, index) => {
-                            const control = (
-                                <McpServerItemControl
+                            ))}
+                        </div>
+                    )}
+                    {!disabled && (
+                        <div>
+                            <ToolSelectorPopover {...toolSelectorProps} />
+                        </div>
+                    )}
+                </>
+            ),
+        },
+        hasMcp && {
+            key: "mcp",
+            icon: <Plugs size={16} />,
+            title: "MCP servers",
+            summary: countSummary(mcpServers.length, "server"),
+            extra: !disabled ? headerAddButton("Add MCP server", handleAddMcpServer) : undefined,
+            defaultOpen: mcpServers.length > 0,
+            content: (
+                <>
+                    {mcpServers.length > 0 && (
+                        <div className="flex flex-col gap-2">
+                            {mcpServers.map((server, index) => (
+                                <ItemRow
                                     key={`mcp-${index}`}
-                                    value={server}
-                                    onChange={(v) => handleMcpServerChange(index, v)}
-                                    onDelete={
-                                        disabled ? undefined : () => handleMcpServerDelete(index)
-                                    }
+                                    descriptor={describeMcp(server)}
+                                    onEdit={() => openEdit("mcp", index, server, "form")}
+                                    onRemove={() => {
+                                        handleMcpServerDelete(index)
+                                        closeEditor()
+                                    }}
                                     disabled={disabled}
                                 />
-                            )
-                            return EditorProvider ? (
-                                <EditorProvider
-                                    key={`mcp-editor-${index}`}
-                                    codeOnly
-                                    language="json"
-                                    showToolbar={false}
-                                    enableTokens={false}
-                                    id={`agent-mcp-editor-${index}`}
-                                >
-                                    {control}
-                                </EditorProvider>
-                            ) : (
-                                control
-                            )
-                        })}
-                    </div>
-                )}
-                {!disabled && (
-                    <div>
-                        <Button size="small" icon={<Plus size={14} />} onClick={handleAddMcpServer}>
-                            Add MCP server
-                        </Button>
-                    </div>
-                )}
-            </div>
-
-            {/* Skills */}
-            <div className="flex flex-col gap-2">
-                <Typography.Text className="text-sm font-medium">Skills</Typography.Text>
-                {skills.length > 0 && (
-                    <div className="flex flex-col gap-2">
-                        {skills.map((skill, index) => {
-                            // A platform-owned skill is a default the author cannot remove: no
-                            // delete handler (SkillConfigControl also renders it read-only).
-                            const platform =
-                                skill && typeof skill === "object" && !Array.isArray(skill)
-                                    ? isPlatformSkill(skill as Record<string, unknown>)
-                                    : false
-                            const control = (
-                                <SkillConfigControl
+                            ))}
+                        </div>
+                    )}
+                    {!disabled && (
+                        <div>
+                            <Button icon={<Plus size={14} />} onClick={handleAddMcpServer}>
+                                Add MCP server
+                            </Button>
+                        </div>
+                    )}
+                </>
+            ),
+        },
+        hasSkills && {
+            key: "skills",
+            icon: <GraduationCap size={16} />,
+            title: "Skills",
+            summary: countSummary(skills.length, "skill"),
+            extra: !disabled ? headerAddButton("Add skill", handleAddSkill) : undefined,
+            defaultOpen: skills.length > 0,
+            content: (
+                <>
+                    {skills.length > 0 && (
+                        <div className="flex flex-col gap-2">
+                            {skills.map((skill, index) => (
+                                <ItemRow
                                     key={`skill-${index}`}
-                                    value={skill}
-                                    onChange={(v) => handleSkillChange(index, v)}
-                                    onDelete={
-                                        disabled || platform
-                                            ? undefined
-                                            : () => handleSkillDelete(index)
+                                    descriptor={describeSkill(skill)}
+                                    onEdit={() =>
+                                        openEdit(
+                                            "skill",
+                                            index,
+                                            skill,
+                                            isEmbedRefSkill(skill) ? "json" : "form",
+                                        )
                                     }
-                                    disabled={disabled}
+                                    onRemove={() => {
+                                        handleSkillDelete(index)
+                                        closeEditor()
+                                    }}
+                                    // Platform skills (`_agenta.*`) are read-only: no remove, and
+                                    // the drawer opens disabled (see the skill drawer below).
+                                    disabled={disabled || isPlatformSkill(skill)}
                                 />
-                            )
-                            return EditorProvider ? (
-                                <EditorProvider
-                                    key={`skill-editor-${index}`}
-                                    codeOnly
-                                    language="json"
-                                    showToolbar={false}
-                                    enableTokens={false}
-                                    id={`agent-skill-editor-${index}`}
-                                >
-                                    {control}
-                                </EditorProvider>
-                            ) : (
-                                control
-                            )
-                        })}
-                    </div>
-                )}
-                {!disabled && (
-                    <div>
-                        <Button size="small" icon={<Plus size={14} />} onClick={handleAddSkill}>
-                            Add skill
-                        </Button>
-                    </div>
-                )}
-            </div>
+                            ))}
+                        </div>
+                    )}
+                    {!disabled && (
+                        <div>
+                            <Button icon={<Plus size={14} />} onClick={handleAddSkill}>
+                                Add skill
+                            </Button>
+                        </div>
+                    )}
+                </>
+            ),
+        },
+        hasAdvanced && {
+            key: "advanced",
+            icon: <SlidersHorizontal size={16} />,
+            title: "Advanced",
+            defaultOpen: false,
+            content: (
+                <>
+                    {props.sandbox && (
+                        <EnumSelectControl
+                            schema={props.sandbox}
+                            label="Sandbox"
+                            value={(config.sandbox as string | null) ?? null}
+                            onChange={(v) => setField("sandbox", v)}
+                            withTooltip={withTooltip}
+                            disabled={disabled}
+                        />
+                    )}
+                    {props.permission_policy && !isPiHarness && (
+                        <EnumSelectControl
+                            schema={props.permission_policy}
+                            label="Permission policy"
+                            value={(config.permission_policy as string | null) ?? null}
+                            onChange={(v) => setField("permission_policy", v)}
+                            withTooltip={withTooltip}
+                            disabled={disabled}
+                        />
+                    )}
+                    {props.sandbox_permission ? (
+                        <SandboxPermissionControl
+                            value={
+                                (config.sandbox_permission as Record<string, unknown> | null) ??
+                                null
+                            }
+                            onChange={(v) => setField("sandbox_permission", v)}
+                            disabled={disabled}
+                        />
+                    ) : null}
+                    {hasClaudePermissions ? (
+                        <div className="flex flex-col gap-2 border-0 border-t border-solid border-[var(--ag-c-EAEFF5,#eaeff5)] pt-3">
+                            <Typography.Text className="text-xs font-medium">
+                                Claude permissions
+                            </Typography.Text>
+                            <ClaudePermissionsControl
+                                value={claudePermissions}
+                                onChange={setClaudePermissions}
+                                disabled={disabled}
+                            />
+                        </div>
+                    ) : null}
+                </>
+            ),
+        },
+    ].filter(Boolean) as {
+        key: string
+        icon: React.ReactNode
+        title: React.ReactNode
+        summary?: React.ReactNode
+        extra?: React.ReactNode
+        defaultOpen?: boolean
+        content: React.ReactNode
+    }[]
+
+    return (
+        <div className={cn("flex flex-col", className)}>
+            {sections.length === 0 ? (
+                <Typography.Text type="secondary" className="text-xs">
+                    No agent configuration fields are available for this schema.
+                </Typography.Text>
+            ) : layout === "tabs" ? (
+                <Tabs
+                    items={sections.map((s) => ({
+                        key: s.key,
+                        label: (
+                            <span className="inline-flex items-center gap-1.5">
+                                {s.icon}
+                                {s.title}
+                            </span>
+                        ),
+                        children: <div className="flex flex-col gap-3 pt-1">{s.content}</div>,
+                    }))}
+                />
+            ) : layout === "cards" ? (
+                <div className="flex flex-col gap-3 pt-1">
+                    {sections.map((s) => (
+                        <ConfigAccordionSection
+                            key={s.key}
+                            icon={s.icon}
+                            title={s.title}
+                            summary={s.summary}
+                            extra={s.extra}
+                            collapsible={false}
+                            noDivider
+                            className="rounded border border-solid border-[var(--ag-c-EAEFF5,#eaeff5)] px-3"
+                        >
+                            {s.content}
+                        </ConfigAccordionSection>
+                    ))}
+                </div>
+            ) : (
+                sections.map((s, index) => (
+                    <ConfigAccordionSection
+                        key={s.key}
+                        icon={s.icon}
+                        title={s.title}
+                        summary={s.summary}
+                        extra={s.extra}
+                        defaultOpen={s.defaultOpen}
+                        noDivider={index === sections.length - 1}
+                    >
+                        {s.content}
+                    </ConfigAccordionSection>
+                ))
+            )}
 
-            <EnumSelectControl
-                schema={props.harness}
-                label="Harness"
-                value={(config.harness as string | null) ?? null}
-                onChange={(v) => setField("harness", v)}
-                withTooltip={withTooltip}
-                disabled={disabled}
-            />
-
-            <EnumSelectControl
-                schema={props.sandbox}
-                label="Sandbox"
-                value={(config.sandbox as string | null) ?? null}
-                onChange={(v) => setField("sandbox", v)}
-                withTooltip={withTooltip}
-                disabled={disabled}
-            />
-
-            {/* Permission policy is Claude-only: Pi runs tools without prompting (no gate),
-             * so the field is hidden for Pi rather than offering a setting nothing honors. */}
-            {!isPiHarness && (
-                <EnumSelectControl
-                    schema={props.permission_policy}
-                    label="Permission policy"
-                    value={(config.permission_policy as string | null) ?? null}
-                    onChange={(v) => setField("permission_policy", v)}
-                    withTooltip={withTooltip}
+            {editing && editing.kind === "tool" && (
+                <ConfigItemDrawer
+                    open
+                    mode={editing.mode}
+                    icon={<Wrench size={16} />}
+                    title={
+                        describeTool(draft).name && describeTool(draft).name !== "Tool"
+                            ? describeTool(draft).name
+                            : "New tool"
+                    }
+                    badge={{
+                        text: describeTool(draft).typeLabel,
+                        color: describeTool(draft).typeColor,
+                    }}
+                    subtitle={describeTool(draft).subtitle}
+                    footerNote="Changes apply to this agent configuration"
+                    view={drawerView}
+                    onViewChange={setDrawerView}
+                    onCancel={closeEditor}
+                    onSave={commitDraft}
+                    saveDisabled={draftInvalid || (drawerView === "json" && jsonInvalid)}
+                    jsonOnly={!isFunctionTool(draft)}
                     disabled={disabled}
+                    form={
+                        <ToolFormView
+                            key={`tool-form-${editing.mode}-${editing.index}`}
+                            value={draft}
+                            onChange={(v) => setDraft(v as Record<string, unknown>)}
+                            disabled={disabled}
+                        />
+                    }
+                    json={
+                        <JsonObjectEditor
+                            key={`tool-json-${editing.mode}-${editing.index}`}
+                            value={draft}
+                            onChange={(v) => setDraft(v as Record<string, unknown>)}
+                            onValidityChange={(valid) => setJsonInvalid(!valid)}
+                            disabled={disabled}
+                        />
+                    }
                 />
             )}
 
-            {/* Sandbox permissions (Layer 2): the sandbox security boundary, for every harness. */}
-            <SandboxPermissionControl
-                value={sandboxPermission}
-                onChange={(v) => setField("sandbox_permission", v)}
-                disabled={disabled}
-            />
-
-            {/*
-             * Advanced Claude permissions (Layer 1): Claude-only. Gated on the harness string
-             * directly (no harness-capabilities map is wired into this control yet); nothing here
-             * applies to Pi. Collapsed by default to keep it clearly "advanced".
-             */}
-            {harness === "claude" && (
-                <div className="flex flex-col gap-2">
-                    <button
-                        type="button"
-                        className="flex items-center gap-1 bg-transparent border-0 p-0 cursor-pointer text-left"
-                        onClick={() => setShowClaudeAdvanced((v) => !v)}
-                    >
-                        {showClaudeAdvanced ? <CaretDown size={14} /> : <CaretRight size={14} />}
-                        <Typography.Text className="text-sm font-medium">
-                            Advanced: Claude permissions
-                        </Typography.Text>
-                    </button>
-                    {showClaudeAdvanced && (
-                        <ClaudePermissionsControl
-                            value={claudePermissions}
-                            onChange={setClaudePermissions}
+            {editing && editing.kind === "mcp" && (
+                <ConfigItemDrawer
+                    open
+                    mode={editing.mode}
+                    icon={<Plugs size={16} />}
+                    title={String(draft.name ?? "").trim() || "New MCP server"}
+                    badge={{
+                        text: describeMcp(draft).typeLabel,
+                        color: describeMcp(draft).typeColor,
+                    }}
+                    subtitle={describeMcp(draft).subtitle}
+                    footerNote="Changes apply to this agent configuration"
+                    view={drawerView}
+                    onViewChange={setDrawerView}
+                    onCancel={closeEditor}
+                    onSave={commitDraft}
+                    saveDisabled={draftInvalid || (drawerView === "json" && jsonInvalid)}
+                    disabled={disabled}
+                    form={
+                        <McpServerFormView
+                            key={`mcp-form-${editing.mode}-${editing.index}`}
+                            value={draft}
+                            onChange={(v) => setDraft(v)}
                             disabled={disabled}
                         />
-                    )}
-                </div>
+                    }
+                    json={
+                        <JsonObjectEditor
+                            key={`mcp-json-${editing.mode}-${editing.index}`}
+                            value={draft}
+                            onChange={(v) => setDraft(v as Record<string, unknown>)}
+                            onValidityChange={(valid) => setJsonInvalid(!valid)}
+                            disabled={disabled}
+                        />
+                    }
+                />
+            )}
+
+            {editing && editing.kind === "skill" && (
+                <ConfigItemDrawer
+                    open
+                    mode={editing.mode}
+                    icon={<GraduationCap size={16} />}
+                    title={
+                        isEmbedRefSkill(draft)
+                            ? "Skill reference"
+                            : String(draft.name ?? "").trim() || "New skill"
+                    }
+                    badge={{
+                        text: describeSkill(draft).typeLabel,
+                        color: describeSkill(draft).typeColor,
+                    }}
+                    subtitle={describeSkill(draft).subtitle}
+                    footerNote="Changes apply to this agent configuration"
+                    // Wider than the default 600 — the skill drawer is two-pane (Files + editor).
+                    width={760}
+                    view={drawerView}
+                    onViewChange={setDrawerView}
+                    onCancel={closeEditor}
+                    onSave={commitDraft}
+                    saveDisabled={draftInvalid || (drawerView === "json" && jsonInvalid)}
+                    jsonOnly={isEmbedRefSkill(draft)}
+                    // Platform skills (`_agenta.*`) are read-only — view their JSON but can't edit.
+                    disabled={disabled || isPlatformSkill(draft)}
+                    form={
+                        <SkillFormView
+                            key={`skill-form-${editing.mode}-${editing.index}`}
+                            value={draft}
+                            onChange={(v) => setDraft(v)}
+                            disabled={disabled || isPlatformSkill(draft)}
+                        />
+                    }
+                    json={
+                        <JsonObjectEditor
+                            key={`skill-json-${editing.mode}-${editing.index}`}
+                            value={draft}
+                            onChange={(v) => setDraft(v as Record<string, unknown>)}
+                            onValidityChange={(valid) => setJsonInvalid(!valid)}
+                            disabled={disabled || isPlatformSkill(draft)}
+                        />
+                    }
+                />
             )}
         </div>
     )
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeEditor.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeEditor.tsx
new file mode 100644
index 0000000000..cd61636d72
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeEditor.tsx
@@ -0,0 +1,90 @@
+/**
+ * CodeEditor
+ *
+ * A monospace, syntax-styled editor for free-form code/command string fields (an MCP launch
+ * command, a bundled skill file). It wraps the shared Lexical editor in code-only mode — the same
+ * machinery {@link JsonObjectEditor} uses for JSON — but emits a plain string instead of parsing,
+ * and takes a language so the content is styled correctly.
+ *
+ * Controlled: seeds from `value` and re-syncs when `value` changes from outside, while leaving the
+ * cursor alone during local typing.
+ */
+import {useEffect, useRef, useState} from "react"
+
+import {SharedEditor} from "@agenta/ui/shared-editor"
+
+/** Languages the shared code editor can highlight; `code` is the generic monospace fallback. */
+export type CodeEditorLanguage = "json" | "yaml" | "code" | "python" | "javascript" | "typescript"
+
+export interface CodeEditorProps {
+    value: string
+    onChange: (next: string) => void
+    /** Highlight language. @default "code" */
+    language?: CodeEditorLanguage
+    placeholder?: string
+    disabled?: boolean
+}
+
+/** Best-effort highlight language from a file path's extension, for bundled-file editing. */
+export function codeLanguageFromPath(path: string | undefined): CodeEditorLanguage {
+    const ext = (path ?? "").split(".").pop()?.toLowerCase()
+    switch (ext) {
+        case "py":
+            return "python"
+        case "js":
+        case "mjs":
+        case "cjs":
+            return "javascript"
+        case "ts":
+        case "tsx":
+            return "typescript"
+        case "json":
+            return "json"
+        case "yaml":
+        case "yml":
+            return "yaml"
+        default:
+            return "code"
+    }
+}
+
+export function CodeEditor({
+    value,
+    onChange,
+    language = "code",
+    placeholder,
+    disabled,
+}: CodeEditorProps) {
+    const [text, setText] = useState(value ?? "")
+    const lastExternal = useRef(value ?? "")
+
+    // Re-seed only when the value changes from outside (not on our own edits).
+    useEffect(() => {
+        const next = value ?? ""
+        if (next !== lastExternal.current) {
+            lastExternal.current = next
+            setText(next)
+        }
+    }, [value])
+
+    const handleChange = (next: string) => {
+        setText(next)
+        lastExternal.current = next
+        onChange(next)
+    }
+
+    return (
+        <div className="overflow-hidden rounded border border-solid border-[var(--ag-c-EAEFF5,#eaeff5)]">
+            <SharedEditor
+                editorType="border"
+                initialValue={text}
+                value={text}
+                handleChange={handleChange}
+                disabled={disabled}
+                placeholder={placeholder}
+                editorProps={{codeOnly: true, language}}
+                syncWithInitialValueChanges
+            />
+        </div>
+    )
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ConfigItemDrawer.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ConfigItemDrawer.tsx
new file mode 100644
index 0000000000..62ff2578c2
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ConfigItemDrawer.tsx
@@ -0,0 +1,152 @@
+/**
+ * ConfigItemDrawer
+ *
+ * The shared item-config drawer chrome from the agent playground design (PKG-01): a
+ * right-hand drawer whose header carries the item identity (icon, name, a type badge and a
+ * one-line subtitle) and a Form ↔ JSON view toggle, and whose body switches between a
+ * structured form and a raw JSON editor of the same item.
+ *
+ * Editing happens on a draft the host owns; the drawer commits it via the footer **Save**
+ * (labelled "Create" for a new item) and discards it via **Cancel** / the close button. So an
+ * in-progress edit never touches the config until the user confirms.
+ *
+ * Built on the shared `EnhancedDrawer` (`@agenta/ui/drawer`) so all app drawers migrate
+ * through a single component. This component is pure chrome — the per-item business logic lives
+ * in the `form` content component the host passes (ToolFormView / McpServerFormView /
+ * SkillFormView). That content is mounted lazily: `EnhancedDrawer` does not render its children
+ * until first opened, and `destroyOnClose` unmounts them again on close — so a content
+ * component's hooks/queries never run until the user actually opens the drawer.
+ *
+ * Used for tools and MCP servers today; the chrome is item-agnostic so other config item
+ * types can reuse it.
+ */
+import {type ReactNode} from "react"
+
+import {EnhancedDrawer} from "@agenta/ui/drawer"
+import {Button, Segmented, Tag} from "antd"
+
+export type ConfigItemView = "form" | "json"
+
+export interface ConfigItemDrawerProps {
+    open: boolean
+    /** Whether the drawer is creating a new item or editing an existing one (labels Save). */
+    mode: "create" | "edit"
+    /** Item title shown in the header. */
+    title: ReactNode
+    /** Leading icon shown before the title. */
+    icon?: ReactNode
+    /** Type badge shown next to the title (e.g. "definition", "MCP server"). */
+    badge?: {text: ReactNode; color?: string}
+    /** One-line description of the item type, shown muted under the title. */
+    subtitle?: ReactNode
+    /** Muted note shown on the left of the footer (e.g. the item's scope). */
+    footerNote?: ReactNode
+    /** Current view. */
+    view: ConfigItemView
+    /** Called when the user flips the Form/JSON toggle. */
+    onViewChange: (view: ConfigItemView) => void
+    /** Discard the draft and dismiss the drawer (Cancel / close button). */
+    onCancel: () => void
+    /** Commit the draft to the config. */
+    onSave: () => void
+    /** Disable the Save/Create action (e.g. the draft is missing a required field). */
+    saveDisabled?: boolean
+    /** Form-view body. */
+    form: ReactNode
+    /** JSON-view body. */
+    json: ReactNode
+    /** Hide the Form/JSON toggle and show JSON only (e.g. items with no structured form). */
+    jsonOnly?: boolean
+    /** Drawer width in px. @default 600 */
+    width?: number
+    /** Read-only mode: disables the toggle and the Save action. */
+    disabled?: boolean
+}
+
+export function ConfigItemDrawer({
+    open,
+    mode,
+    title,
+    icon,
+    badge,
+    subtitle,
+    footerNote,
+    view,
+    onViewChange,
+    onCancel,
+    onSave,
+    saveDisabled = false,
+    form,
+    json,
+    jsonOnly = false,
+    width = 600,
+    disabled = false,
+}: ConfigItemDrawerProps) {
+    const effectiveView = jsonOnly ? "json" : view
+
+    return (
+        <EnhancedDrawer
+            open={open}
+            onClose={onCancel}
+            placement="right"
+            width={width}
+            // Explicit Cancel/Save only — an outside click must not silently drop the draft.
+            closeOnLayoutClick={false}
+            // Lazy content: children aren't mounted until first open and are torn down on close,
+            // so the content component's logic only runs while the drawer is open.
+            destroyOnClose
+            title={
+                <div className="flex min-w-0 items-center gap-2">
+                    {icon ? <span className="flex shrink-0 items-center">{icon}</span> : null}
+                    <div className="min-w-0">
+                        <div className="flex min-w-0 items-center gap-2">
+                            <span className="truncate text-sm font-medium">{title}</span>
+                            {badge ? (
+                                <Tag
+                                    color={badge.color}
+                                    className="m-0 shrink-0 text-[11px] font-normal"
+                                >
+                                    {badge.text}
+                                </Tag>
+                            ) : null}
+                        </div>
+                        {subtitle ? (
+                            <div className="truncate text-xs font-normal text-[var(--ag-c-97A4B0,#97a4b0)]">
+                                {subtitle}
+                            </div>
+                        ) : null}
+                    </div>
+                </div>
+            }
+            extra={
+                jsonOnly ? null : (
+                    <Segmented
+                        value={effectiveView}
+                        onChange={(v) => onViewChange(v as ConfigItemView)}
+                        options={[
+                            {label: "Form", value: "form"},
+                            {label: "JSON", value: "json"},
+                        ]}
+                        disabled={disabled}
+                    />
+                )
+            }
+            footer={
+                <div className="flex items-center justify-between gap-3">
+                    <span className="min-w-0 truncate text-xs text-[var(--ag-c-97A4B0,#97a4b0)]">
+                        {footerNote}
+                    </span>
+                    <div className="flex shrink-0 items-center gap-2">
+                        <Button onClick={onCancel}>Cancel</Button>
+                        <Button type="primary" onClick={onSave} disabled={disabled || saveDisabled}>
+                            {mode === "create" ? "Create" : "Save"}
+                        </Button>
+                    </div>
+                </div>
+            }
+            styles={{body: {padding: 16}}}
+        >
+            {effectiveView === "form" ? form : json}
+        </EnhancedDrawer>
+    )
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/HarnessSelectControl.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/HarnessSelectControl.tsx
new file mode 100644
index 0000000000..388b0a2df9
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/HarnessSelectControl.tsx
@@ -0,0 +1,180 @@
+/**
+ * HarnessSelectControl
+ *
+ * Harness picker for the agent config. The agent_config catalog schema ships `harness` as an
+ * enum (`pi_core` / `pi_agenta` / `claude`) PLUS a `oneOf` of `{const, title,
+ * x-ag-harness-slug}` whose `title`s are the canonical display names (`Pi` / `Pi (Agenta)` /
+ * `Claude Code`, from the backend's `HARNESS_IDENTITIES`). This control prefers that schema
+ * `title` for each value's label, and supplies the avatar (brand colour + monogram) FE-side
+ * keyed by harness id. Both fall back to a derived label/avatar for any harness the backend
+ * adds before the FE map catches up. The goal (per the agent playground design) is to make
+ * the harness choice discoverable rather than a bare dropdown of slugs.
+ *
+ * Per-harness *capabilities* (which would drive availability-gating of the MCP/tools
+ * sections) are probed by the backend at run time and are not yet exposed on the schema, so
+ * gating is left to the consumer once a contract exists.
+ */
+import {memo, useMemo} from "react"
+
+import type {SchemaProperty} from "@agenta/entities/shared"
+import {formatEnumLabel} from "@agenta/shared/utils"
+import {LabeledField} from "@agenta/ui/components/presentational"
+import {cn} from "@agenta/ui/styles"
+import {Select, Typography} from "antd"
+
+interface HarnessMeta {
+    label: string
+    /** 1–2 char monogram shown in the avatar. */
+    short: string
+    /** Avatar background colour. */
+    color: string
+}
+
+/**
+ * Avatar identity (brand colour + monogram) per harness id. Labels come from the schema
+ * `oneOf` title when present (see `titlesFromSchema`); these defaults only supply the avatar
+ * and a label fallback. Keyed by the real enum values `pi_core` / `pi_agenta` / `claude`.
+ */
+const HARNESS_META: Record<string, HarnessMeta> = {
+    pi_core: {label: "Pi", short: "Pi", color: "#6b5bd6"},
+    pi_agenta: {label: "Pi (Agenta)", short: "Ag", color: "#1c2c3d"},
+    claude: {label: "Claude Code", short: "CC", color: "#d97757"},
+}
+
+/**
+ * Read the canonical display name per harness value from the schema's `oneOf` of
+ * `{const, title}` entries (the backend ships these from `HARNESS_IDENTITIES`). Returns an
+ * empty map when the schema has no `oneOf`, in which case `HARNESS_META`/derived labels apply.
+ */
+function titlesFromSchema(schema?: SchemaProperty | null): Record<string, string> {
+    const oneOf = (schema as {oneOf?: unknown} | null | undefined)?.oneOf
+    if (!Array.isArray(oneOf)) return {}
+    const titles: Record<string, string> = {}
+    for (const entry of oneOf) {
+        const e = entry as {const?: unknown; title?: unknown}
+        if (e?.const != null && typeof e.title === "string" && e.title) {
+            titles[String(e.const)] = e.title
+        }
+    }
+    return titles
+}
+
+/** Resolve display identity, deriving a sensible fallback for unknown harness ids. */
+function metaFor(value: string): HarnessMeta {
+    const known = HARNESS_META[value]
+    if (known) return known
+    const label = formatEnumLabel(value)
+    const short =
+        label
+            .replace(/[^A-Za-z0-9]/g, "")
+            .slice(0, 2)
+            .toUpperCase() || "?"
+    return {label, short, color: "#586673"}
+}
+
+function HarnessAvatar({meta, size = 22}: {meta: HarnessMeta; size?: number}) {
+    return (
+        <span
+            className="flex shrink-0 items-center justify-center rounded font-semibold text-white"
+            style={{
+                width: size,
+                height: size,
+                background: meta.color,
+                fontSize: size <= 18 ? 9 : 10,
+                lineHeight: 1,
+            }}
+        >
+            {meta.short}
+        </span>
+    )
+}
+
+export interface HarnessSelectControlProps {
+    /** The schema property defining the harness enum. */
+    schema?: SchemaProperty | null
+    /** Display label for the control. */
+    label?: string
+    /** Current value. */
+    value: string | null | undefined
+    /** Change handler. */
+    onChange: (value: string | null) => void
+    /** Optional description for tooltip. */
+    description?: string
+    /** Whether to show the tooltip. */
+    withTooltip?: boolean
+    /** Disable the control. */
+    disabled?: boolean
+    /** Additional CSS classes. */
+    className?: string
+}
+
+/**
+ * A controlled select for choosing the agent harness, with per-harness visual identity.
+ */
+export const HarnessSelectControl = memo(function HarnessSelectControl({
+    schema,
+    label,
+    value,
+    onChange,
+    description,
+    withTooltip = true,
+    disabled = false,
+    className,
+}: HarnessSelectControlProps) {
+    // Canonical labels from the schema `oneOf` titles (`Pi` / `Pi (Agenta)` / `Claude Code`);
+    // the avatar (and any label the schema omits) still comes from `metaFor`.
+    const titles = useMemo(() => titlesFromSchema(schema), [schema])
+    const labelFor = (id: string) => titles[id] ?? metaFor(id).label
+    const metaWithLabel = (id: string): HarnessMeta => ({...metaFor(id), label: labelFor(id)})
+
+    const options = useMemo(() => {
+        const values = Array.isArray(schema?.enum) ? (schema?.enum as unknown[]) : []
+        return values.map((v) => {
+            const id = String(v)
+            return {value: id, label: titles[id] ?? metaFor(id).label}
+        })
+    }, [schema, titles])
+
+    const tooltipText = description ?? (schema?.description as string | undefined) ?? ""
+
+    return (
+        <LabeledField
+            label={label}
+            description={tooltipText}
+            withTooltip={withTooltip && !!label}
+            className={cn(className)}
+        >
+            <Select
+                value={value ?? undefined}
+                onChange={(val) => onChange(val ?? null)}
+                disabled={disabled}
+                placeholder="Select harness"
+                className="w-full"
+                options={options}
+                optionLabelProp="label"
+                showSearch
+                filterOption={(input, option) =>
+                    (option?.label?.toString() ?? "").toLowerCase().includes(input.toLowerCase())
+                }
+                labelRender={(cur) => {
+                    const meta = metaWithLabel(String(cur.value))
+                    return (
+                        <span className="flex items-center gap-2">
+                            <HarnessAvatar meta={meta} size={18} />
+                            <span>{meta.label}</span>
+                        </span>
+                    )
+                }}
+                optionRender={(opt) => {
+                    const meta = metaWithLabel(String(opt.value))
+                    return (
+                        <span className="flex items-center gap-2 py-0.5">
+                            <HarnessAvatar meta={meta} size={22} />
+                            <Typography.Text>{meta.label}</Typography.Text>
+                        </span>
+                    )
+                }}
+            />
+        </LabeledField>
+    )
+})
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/JsonObjectEditor.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/JsonObjectEditor.tsx
new file mode 100644
index 0000000000..f89c4775ba
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/JsonObjectEditor.tsx
@@ -0,0 +1,72 @@
+/**
+ * JsonObjectEditor
+ *
+ * A raw-JSON editor for a single config object (a tool or an MCP server), used as the
+ * JSON view inside {@link ConfigItemDrawer}. Parses on change and only emits valid JSON
+ * objects upstream, surfacing a parse error otherwise. It is meant to be re-mounted each
+ * time the JSON view is shown (key it on the open item), so it has no external-sync logic.
+ */
+import {useState} from "react"
+
+import {SharedEditor} from "@agenta/ui/shared-editor"
+import {Typography} from "antd"
+
+export interface JsonObjectEditorProps {
+    /** Current object value. Serialized to seed the editor on mount. */
+    value: unknown
+    /** Called with the parsed object on each valid edit. */
+    onChange: (next: Record<string, unknown>) => void
+    /** Called whenever the editor's parse validity changes, so the host can gate Save. */
+    onValidityChange?: (valid: boolean) => void
+    /** Disable editing. */
+    disabled?: boolean
+}
+
+export function JsonObjectEditor({
+    value,
+    onChange,
+    onValidityChange,
+    disabled,
+}: JsonObjectEditorProps) {
+    const [text, setText] = useState(() => JSON.stringify(value ?? {}, null, 2))
+    const [error, setError] = useState<string | null>(null)
+
+    const handleChange = (next: string) => {
+        setText(next)
+        try {
+            const parsed = JSON.parse(next)
+            if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+                setError(null)
+                onValidityChange?.(true)
+                onChange(parsed as Record<string, unknown>)
+            } else {
+                setError("Expected a JSON object")
+                onValidityChange?.(false)
+            }
+        } catch {
+            setError("Invalid JSON")
+            onValidityChange?.(false)
+        }
+    }
+
+    return (
+        <div className="flex flex-col gap-1.5">
+            <div className="overflow-hidden rounded border border-solid border-[var(--ag-c-EAEFF5,#eaeff5)]">
+                <SharedEditor
+                    editorType="border"
+                    initialValue={text}
+                    value={text}
+                    handleChange={handleChange}
+                    disabled={disabled}
+                    editorProps={{codeOnly: true, language: "json"}}
+                    syncWithInitialValueChanges
+                />
+            </div>
+            {error ? (
+                <Typography.Text type="danger" className="text-xs">
+                    {error}
+                </Typography.Text>
+            ) : null}
+        </div>
+    )
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
new file mode 100644
index 0000000000..1777c797fc
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
@@ -0,0 +1,145 @@
+/**
+ * MarkdownEditor
+ *
+ * A Markdown-aware editor for Markdown string fields (SKILL.md body, AGENTS.md instructions). It
+ * wraps the shared Lexical editor in rich-text mode — the same editor the config message editors
+ * use — so it carries the same text ↔ markdown-source view toggle. Prompt-variable tokens are
+ * disabled (these are documents, not templated prompts).
+ *
+ * It defaults to the Markdown *source* (plaintext) view; rendering Markdown is an explicit toggle.
+ * The shared MarkdownPlugin only swaps view on a `SET_MARKDOWN_VIEW` command (the storage atom
+ * alone doesn't), so the view is driven by local `markdownView` state via a small synchronizer
+ * mounted inside the composer (after the editor, so the command is registered). The toggle button
+ * just flips that state; it doesn't need composer context.
+ *
+ * The whole subtree mounts under an `EditorProvider` with `noProvider` on the editor, so the editor
+ * and its header (where the toggle sits) share one composer context.
+ *
+ * Controlled: seeds from `value` and re-syncs when `value` changes from outside (e.g. a skill
+ * upload populating the body), while leaving the cursor alone during local typing.
+ */
+import {useEffect, useId, useLayoutEffect, useRef, useState} from "react"
+
+import {EditorProvider, SET_MARKDOWN_VIEW, useLexicalComposerContext} from "@agenta/ui"
+import {SharedEditor} from "@agenta/ui/shared-editor"
+import {MarkdownLogoIcon, TextAa} from "@phosphor-icons/react"
+import {Button, Tag, Tooltip} from "antd"
+
+export interface MarkdownEditorProps {
+    value: string
+    onChange: (next: string) => void
+    placeholder?: string
+    disabled?: boolean
+    /** Optional file-name tag shown on the left of the editor toolbar (e.g. "AGENTS.md"). Fills
+     * the toolbar band the view toggle would otherwise leave empty. */
+    filename?: string
+}
+
+/**
+ * Dispatches `SET_MARKDOWN_VIEW` whenever the desired view changes so the Lexical editor swaps
+ * between rich-text and markdown-source. Mirrors the chat editor's synchronizer: a layout effect
+ * handles updates, and a post-paint `requestAnimationFrame` re-dispatch covers the initial-mount
+ * race where this effect can fire before the descendant MarkdownPlugin registers the command.
+ */
+function MarkdownViewSync({enabled}: {enabled: boolean}) {
+    const [editor] = useLexicalComposerContext()
+
+    useLayoutEffect(() => {
+        editor.dispatchCommand(SET_MARKDOWN_VIEW, enabled)
+    }, [editor, enabled])
+
+    useEffect(() => {
+        const frame = requestAnimationFrame(() => {
+            editor.dispatchCommand(SET_MARKDOWN_VIEW, enabled)
+        })
+        return () => cancelAnimationFrame(frame)
+    }, [editor, enabled])
+
+    return null
+}
+
+export function MarkdownEditor({
+    value,
+    onChange,
+    placeholder,
+    disabled,
+    filename,
+}: MarkdownEditorProps) {
+    // Stable id shared by the provider and the editor so they target one composer. Colons from
+    // useId() are dropped to keep it id/atom-key safe.
+    const reactId = useId()
+    const editorId = `md${reactId.replace(/:/g, "")}`
+
+    const [text, setText] = useState(value ?? "")
+    const lastExternal = useRef(value ?? "")
+    // Default to the Markdown source (plaintext) view — rendering Markdown is an explicit toggle.
+    const [markdownView, setMarkdownView] = useState(true)
+
+    // Re-seed only when the value changes from outside (not on our own edits), so an upload that
+    // sets the body flows in without fighting the cursor during typing.
+    useEffect(() => {
+        const next = value ?? ""
+        if (next !== lastExternal.current) {
+            lastExternal.current = next
+            setText(next)
+        }
+    }, [value])
+
+    const handleChange = (next: string) => {
+        setText(next)
+        lastExternal.current = next
+        onChange(next)
+    }
+
+    return (
+        <EditorProvider
+            id={editorId}
+            codeOnly={false}
+            enableTokens={false}
+            showToolbar={false}
+            disabled={disabled}
+        >
+            <SharedEditor
+                id={editorId}
+                noProvider
+                editorType="border"
+                initialValue={text}
+                value={text}
+                handleChange={handleChange}
+                disabled={disabled}
+                placeholder={placeholder}
+                editorProps={{codeOnly: false, enableTokens: false, noProvider: true}}
+                syncWithInitialValueChanges
+                header={
+                    <div className="flex w-full items-center justify-between gap-2">
+                        {filename ? (
+                            <Tag
+                                bordered
+                                className="m-0 font-mono text-[11px] font-normal text-[var(--ag-c-586673,#586673)]"
+                            >
+                                {filename}
+                            </Tag>
+                        ) : (
+                            <span />
+                        )}
+                        <Tooltip title={markdownView ? "Preview markdown" : "Edit source"}>
+                            <Button
+                                type="text"
+                                icon={
+                                    markdownView ? (
+                                        <MarkdownLogoIcon size={14} />
+                                    ) : (
+                                        <TextAa size={14} />
+                                    )
+                                }
+                                onClick={() => setMarkdownView((v) => !v)}
+                                disabled={disabled}
+                            />
+                        </Tooltip>
+                    </div>
+                }
+            />
+            <MarkdownViewSync enabled={markdownView} />
+        </EditorProvider>
+    )
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/McpServerFormView.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/McpServerFormView.tsx
new file mode 100644
index 0000000000..850ea0940c
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/McpServerFormView.tsx
@@ -0,0 +1,196 @@
+/**
+ * McpServerFormView
+ *
+ * Structured form view for an MCP server, the Form side of {@link ConfigItemDrawer}. Mirrors
+ * the MCPServerConfig shape (sdks/python/agenta/sdk/agents/mcp/models.py): name, transport
+ * (stdio command/args/env, or http url), vault secret-name map, and an optional exposed-tool
+ * allowlist. It edits only those known keys so the object stays valid (the backend model is
+ * `extra="forbid"`).
+ *
+ * Re-mount it per server (key on the open item) so the local key/value text state seeds
+ * cleanly.
+ */
+import {useState} from "react"
+
+import {LabeledField} from "@agenta/ui/components/presentational"
+import {Input, Select} from "antd"
+
+import {CodeEditor} from "./CodeEditor"
+
+type Dict = Record<string, string>
+
+interface McpServer {
+    name?: string
+    transport?: "stdio" | "http"
+    command?: string
+    args?: string[]
+    env?: Dict
+    url?: string
+    secrets?: Dict
+    tools?: string[]
+}
+
+export interface McpServerFormViewProps {
+    value: Record<string, unknown>
+    onChange: (next: Record<string, unknown>) => void
+    disabled?: boolean
+}
+
+/** `KEY=value` per line ↔ a string map. Local text state avoids cursor jumps on edit. */
+function KeyValueLines({
+    value,
+    onChange,
+    placeholder,
+    disabled,
+}: {
+    value: Dict | undefined
+    onChange: (next: Dict) => void
+    placeholder?: string
+    disabled?: boolean
+}) {
+    const [text, setText] = useState(() =>
+        Object.entries(value ?? {})
+            .map(([k, v]) => `${k}=${v}`)
+            .join("\n"),
+    )
+
+    const handle = (next: string) => {
+        setText(next)
+        const obj: Dict = {}
+        next.split("\n").forEach((line) => {
+            const i = line.indexOf("=")
+            if (i > 0) {
+                const k = line.slice(0, i).trim()
+                if (k) obj[k] = line.slice(i + 1).trim()
+            }
+        })
+        onChange(obj)
+    }
+
+    return (
+        <Input.TextArea
+            value={text}
+            onChange={(e) => handle(e.target.value)}
+            placeholder={placeholder}
+            disabled={disabled}
+            autoSize={{minRows: 2, maxRows: 6}}
+            className="font-mono"
+        />
+    )
+}
+
+export function McpServerFormView({value, onChange, disabled}: McpServerFormViewProps) {
+    const server = (value ?? {}) as McpServer
+    const transport = server.transport ?? "stdio"
+
+    const set = (key: keyof McpServer, fieldValue: unknown) => {
+        const next = {...(value ?? {})}
+        if (fieldValue === undefined || fieldValue === null || fieldValue === "") {
+            delete (next as Record<string, unknown>)[key]
+        } else {
+            ;(next as Record<string, unknown>)[key] = fieldValue
+        }
+        onChange(next)
+    }
+
+    return (
+        <div className="flex flex-col gap-3">
+            <LabeledField label="Server name">
+                <Input
+                    value={server.name ?? ""}
+                    onChange={(e) => set("name", e.target.value)}
+                    placeholder="my-mcp-server"
+                    disabled={disabled}
+                />
+            </LabeledField>
+
+            <LabeledField label="Transport">
+                <Select
+                    className="w-full"
+                    value={transport}
+                    onChange={(v) => set("transport", v)}
+                    disabled={disabled}
+                    options={[
+                        {label: "stdio (local command)", value: "stdio"},
+                        {label: "http (remote URL)", value: "http"},
+                    ]}
+                />
+            </LabeledField>
+
+            {transport === "stdio" ? (
+                <>
+                    <LabeledField label="Command">
+                        <CodeEditor
+                            value={server.command ?? ""}
+                            onChange={(v) => set("command", v)}
+                            placeholder="npx"
+                            disabled={disabled}
+                        />
+                    </LabeledField>
+                    <LabeledField label="Arguments">
+                        <Select
+                            mode="tags"
+                            className="w-full"
+                            value={server.args ?? []}
+                            onChange={(v) => set("args", v)}
+                            placeholder="one argument per token"
+                            disabled={disabled}
+                            open={false}
+                            suffixIcon={null}
+                        />
+                    </LabeledField>
+                </>
+            ) : (
+                <LabeledField label="Server URL">
+                    <Input
+                        value={server.url ?? ""}
+                        onChange={(e) => set("url", e.target.value)}
+                        placeholder="https://example.com/mcp"
+                        disabled={disabled}
+                    />
+                </LabeledField>
+            )}
+
+            <LabeledField label="Environment" description="KEY=value per line" withTooltip>
+                <KeyValueLines
+                    value={server.env}
+                    onChange={(env) => set("env", Object.keys(env).length ? env : undefined)}
+                    placeholder={"NODE_ENV=production"}
+                    disabled={disabled}
+                />
+            </LabeledField>
+
+            <LabeledField
+                label="Secrets"
+                description="Map an env var to a vault secret name: ENV_VAR=secret_name"
+                withTooltip
+            >
+                <KeyValueLines
+                    value={server.secrets}
+                    onChange={(secrets) =>
+                        set("secrets", Object.keys(secrets).length ? secrets : undefined)
+                    }
+                    placeholder={"API_KEY=my_api_key"}
+                    disabled={disabled}
+                />
+            </LabeledField>
+
+            <LabeledField
+                label="Exposed tools"
+                description="Optional allowlist — leave empty to expose all of the server's tools"
+                withTooltip
+            >
+                <Select
+                    mode="tags"
+                    className="w-full"
+                    value={server.tools ?? []}
+                    onChange={(v) => set("tools", v.length ? v : undefined)}
+                    placeholder="tool names"
+                    disabled={disabled}
+                    open={false}
+                    suffixIcon={null}
+                />
+            </LabeledField>
+        </div>
+    )
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/McpServerItemControl.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/McpServerItemControl.tsx
index 7eea7e82ba..dd73629e1b 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/McpServerItemControl.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/McpServerItemControl.tsx
@@ -11,7 +11,7 @@
  */
 import {memo, useCallback, useEffect, useRef, useState} from "react"
 
-import {isPlainObject, safeStringify} from "@agenta/shared/utils"
+import {safeStringify} from "@agenta/shared/utils"
 import {useDrillInUI} from "@agenta/ui/drill-in"
 import {MinusCircle} from "@phosphor-icons/react"
 import {Button, Tooltip, Typography} from "antd"
@@ -33,10 +33,15 @@ export interface McpServerItemControlProps {
 function toServerObj(value: unknown): Record<string, unknown> {
     try {
         if (typeof value === "string") {
-            const parsed = value ? JSON.parse(value) : {}
-            return isPlainObject(parsed) ? parsed : {}
+            if (!value) return {}
+            const parsed = JSON.parse(value)
+            if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+                return parsed as Record<string, unknown>
+            }
+            return {}
         }
-        if (isPlainObject(value)) return value
+        if (value && typeof value === "object" && !Array.isArray(value))
+            return value as Record<string, unknown>
     } catch {
         // fall through to empty object
     }
@@ -73,9 +78,11 @@ export const McpServerItemControl = memo(function McpServerItemControl({
             setEditorText(text)
             try {
                 const parsed = text ? JSON.parse(text) : {}
-                if (!isPlainObject(parsed)) return
+                // Only a JSON object is a valid server config; ignore arrays/scalars so we
+                // don't propagate a value toServerObj() would silently collapse back to {}.
+                if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return
                 lastExternalRef.current = safeStringify(parsed)
-                onChange?.(parsed)
+                onChange?.(parsed as Record<string, unknown>)
             } catch {
                 // Keep the invalid text in the editor; don't propagate until it parses.
             }
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SandboxPermissionControl.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SandboxPermissionControl.tsx
index eb6ddd4aa1..c3cb6764f1 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SandboxPermissionControl.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SandboxPermissionControl.tsx
@@ -1,24 +1,22 @@
 /**
  * SandboxPermissionControl
  *
- * Layer 2 of the agent capability config: the sandbox security boundary the agent runs inside
- * (`sandbox_permission` on the agent config). It applies to every harness. The shape mirrors
- * the SDK's `SandboxPermission` (agenta.sdk.agents.dtos):
- *   { network: { mode: "on"|"off"|"allowlist", allowlist: string[] },
- *     filesystem?: "on"|"readonly"|"off",
- *     enforcement: "strict"|"best_effort" }
+ * The `sandbox_permission` field of the agent config (capability config "layer 2"): the sandbox
+ * security boundary the agent runs inside, applied by every harness. Mirrors the SDK shape
+ * (agenta.sdk.agents.dtos `SandboxPermission`):
+ *   { network: { mode: "on" | "off" | "allowlist", allowlist: string[] },
+ *     filesystem?: "on" | "readonly" | "off",
+ *     enforcement: "strict" | "best_effort" }
  *
- * The emitted `agent_config` schema exposes `sandbox_permission` as a nullable object (anyOf),
- * so the generic SchemaPropertyRenderer can only show a "click to expand" drill-in indicator for
- * it. This control renders the four knobs as a real form instead: a network-mode selector, a
- * CIDR allowlist shown only when mode = allowlist, a filesystem selector, and an enforcement
- * toggle. It is non-destructive: an unset value stays `null` (no declared boundary) until the
- * author changes something.
+ * The emitted `agent_config` schema exposes `sandbox_permission` as a nullable object, so the
+ * generic renderer can only offer a drill-in. This renders the four knobs as a real form: a
+ * network-mode selector, a CIDR allowlist (only when mode = allowlist), an optional filesystem
+ * selector, and an enforcement selector. Non-destructive: an unset value stays `null` (no declared
+ * boundary) until the author changes something.
  */
-import {memo, useCallback, useMemo} from "react"
+import {useCallback, useMemo} from "react"
 
 import {LabeledField} from "@agenta/ui/components/presentational"
-import {cn} from "@agenta/ui/styles"
 import {Input, Select, Typography} from "antd"
 
 type NetworkMode = "on" | "off" | "allowlist"
@@ -26,8 +24,8 @@ type FilesystemMode = "on" | "readonly" | "off"
 type Enforcement = "strict" | "best_effort"
 
 interface NetworkEgress {
-    mode: NetworkMode
-    allowlist: string[]
+    mode?: NetworkMode
+    allowlist?: string[]
 }
 
 interface SandboxPermissionValue {
@@ -37,14 +35,9 @@ interface SandboxPermissionValue {
 }
 
 export interface SandboxPermissionControlProps {
-    /** The `sandbox_permission` value (object or null) from the agent config. */
     value?: Record<string, unknown> | null
-    /** Called with the next `sandbox_permission` object (never null once the author touches it). */
     onChange: (value: Record<string, unknown>) => void
-    /** Disable the control */
     disabled?: boolean
-    /** Additional CSS classes */
-    className?: string
 }
 
 const NETWORK_MODE_OPTIONS: {value: NetworkMode; label: string}[] = [
@@ -54,7 +47,7 @@ const NETWORK_MODE_OPTIONS: {value: NetworkMode; label: string}[] = [
 ]
 
 const FILESYSTEM_OPTIONS: {value: FilesystemMode; label: string}[] = [
-    {value: "on", label: "Read/write"},
+    {value: "on", label: "Read / write"},
     {value: "readonly", label: "Read-only"},
     {value: "off", label: "No access"},
 ]
@@ -64,34 +57,27 @@ const ENFORCEMENT_OPTIONS: {value: Enforcement; label: string}[] = [
     {value: "best_effort", label: "Best effort"},
 ]
 
-/** Read the current value with the same defaults the SDK applies, so the form is never blank. */
-function readValue(value: Record<string, unknown> | null | undefined): {
-    networkMode: NetworkMode
-    allowlist: string[]
-    filesystem: FilesystemMode | null
-    enforcement: Enforcement
-} {
+/** Read the value with the SDK's defaults applied, so the form is never blank. */
+function readValue(value: Record<string, unknown> | null | undefined) {
     const v = (value ?? {}) as SandboxPermissionValue
     const network = (v.network ?? {}) as NetworkEgress
     return {
-        networkMode: network.mode ?? "on",
+        networkMode: (network.mode as NetworkMode | undefined) ?? "on",
         allowlist: Array.isArray(network.allowlist) ? network.allowlist : [],
         filesystem: (v.filesystem as FilesystemMode | null | undefined) ?? null,
-        enforcement: v.enforcement ?? "strict",
+        enforcement: (v.enforcement as Enforcement | undefined) ?? "strict",
     }
 }
 
-export const SandboxPermissionControl = memo(function SandboxPermissionControl({
+export function SandboxPermissionControl({
     value,
     onChange,
-    disabled = false,
-    className,
+    disabled,
 }: SandboxPermissionControlProps) {
     const current = useMemo(() => readValue(value), [value])
 
-    // Compose the full `sandbox_permission` object from the current state, overriding one slice.
-    // We always write the network object (with mode + allowlist) and enforcement; filesystem is
-    // only written when set (it is declared, not enforced, and stays omitted otherwise).
+    // Compose the full object from the current state, overriding one slice. Always writes the
+    // network object + enforcement; filesystem is written only when set (declared, not enforced).
     const write = useCallback(
         (patch: {
             networkMode?: NetworkMode
@@ -114,12 +100,12 @@ export const SandboxPermissionControl = memo(function SandboxPermissionControl({
     )
 
     return (
-        <div className={cn("flex flex-col gap-2", className)}>
-            <Typography.Text className="text-sm font-medium">Sandbox permissions</Typography.Text>
+        <div className="flex flex-col gap-3 border-0 border-t border-solid border-[var(--ag-c-EAEFF5,#eaeff5)] pt-3">
+            <Typography.Text className="text-xs font-medium">Sandbox permissions</Typography.Text>
 
             <LabeledField
                 label="Network egress"
-                description="Outbound network access for the sandbox. Declared config; enforced by the runner in a later slice."
+                description="Outbound network access for the sandbox. Declared config; enforced by the runner."
                 withTooltip
             >
                 <Select<NetworkMode>
@@ -128,11 +114,10 @@ export const SandboxPermissionControl = memo(function SandboxPermissionControl({
                     options={NETWORK_MODE_OPTIONS}
                     disabled={disabled}
                     className="w-full"
-                    size="small"
                 />
             </LabeledField>
 
-            {current.networkMode === "allowlist" && (
+            {current.networkMode === "allowlist" ? (
                 <LabeledField
                     label="Allowlist"
                     description="CIDR ranges allowed for outbound egress, one per line (e.g. 10.0.0.0/8)."
@@ -150,11 +135,11 @@ export const SandboxPermissionControl = memo(function SandboxPermissionControl({
                         }
                         disabled={disabled}
                         placeholder={"10.0.0.0/8\n192.168.0.0/16"}
-                        rows={3}
-                        className="resize-y font-mono text-xs"
+                        autoSize={{minRows: 2, maxRows: 6}}
+                        className="font-mono"
                     />
                 </LabeledField>
-            )}
+            ) : null}
 
             <LabeledField
                 label="Filesystem"
@@ -163,19 +148,18 @@ export const SandboxPermissionControl = memo(function SandboxPermissionControl({
             >
                 <Select<FilesystemMode>
                     value={current.filesystem ?? undefined}
-                    onChange={(v) => write({filesystem: v ?? null})}
+                    onChange={(v) => write({filesystem: (v as FilesystemMode | undefined) ?? null})}
                     options={FILESYSTEM_OPTIONS}
                     disabled={disabled}
                     placeholder="Not declared"
                     allowClear
                     className="w-full"
-                    size="small"
                 />
             </LabeledField>
 
             <LabeledField
                 label="Enforcement"
-                description="Strict fails the run when the boundary cannot be applied; best effort continues."
+                description="Strict fails the run when the boundary can't be applied; best effort continues."
                 withTooltip
             >
                 <Select<Enforcement>
@@ -184,9 +168,8 @@ export const SandboxPermissionControl = memo(function SandboxPermissionControl({
                     options={ENFORCEMENT_OPTIONS}
                     disabled={disabled}
                     className="w-full"
-                    size="small"
                 />
             </LabeledField>
         </div>
     )
-})
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SkillFormView.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SkillFormView.tsx
new file mode 100644
index 0000000000..3f648b6675
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SkillFormView.tsx
@@ -0,0 +1,329 @@
+/**
+ * SkillFormView
+ *
+ * Structured form view for one inline skill, the Form side of {@link ConfigItemDrawer}. Mirrors
+ * the inline `SkillConfigSchema` shape (sdk/utils/types.py, `__ag_type__ = "skill_config"`): a
+ * kebab `name`, a `description` (the trigger the model matches), the `body` (SKILL.md Markdown),
+ * the supporting `files[]`, and two behaviour flags.
+ *
+ * Laid out as a folder (matching the design): a left Files sidebar — SKILL.md pinned first, the
+ * bundled files below, and a drop zone — beside a right editor pane for the selected file, with the
+ * skill-level Name/Description and behaviour toggles. Author a skill by dropping/browsing a folder,
+ * `.zip`, or `.skill` (parsed into the fields) or editing inline. `@ag.embed` reference entries are
+ * NOT edited here — the host renders the drawer JSON-only for those so their markers round-trip.
+ */
+import {useState} from "react"
+
+import {LabeledField} from "@agenta/ui/components/presentational"
+import {cn} from "@agenta/ui/styles"
+import {File as FileIcon, Info, Plus, Trash} from "@phosphor-icons/react"
+import {Input, Switch, Tooltip, Typography} from "antd"
+
+import {CodeEditor, codeLanguageFromPath} from "./CodeEditor"
+import {MarkdownEditor} from "./MarkdownEditor"
+import {type ParsedSkill, type SkillFileEntry} from "./skillUpload"
+import {SkillUploadZone} from "./SkillUploadZone"
+
+export interface SkillFormViewProps {
+    value: Record<string, unknown>
+    onChange: (next: Record<string, unknown>) => void
+    disabled?: boolean
+}
+
+/** Which file the right pane is editing: the pinned SKILL.md body, or a `files[]` entry by index. */
+type Selection = "skill" | number
+
+/** A compact label-left / switch-right toggle row (the switch keeps its natural width). */
+function ToggleRow({
+    label,
+    description,
+    checked,
+    onChange,
+    disabled,
+}: {
+    label: string
+    description: string
+    checked: boolean
+    onChange: (value: boolean) => void
+    disabled?: boolean
+}) {
+    return (
+        <div className="flex items-center justify-between gap-3">
+            <div className="flex min-w-0 items-center gap-1">
+                <Typography.Text className="text-xs font-medium">{label}</Typography.Text>
+                <Tooltip title={description}>
+                    <Info size={13} className="shrink-0 text-[var(--ag-c-97A4B0,#97a4b0)]" />
+                </Tooltip>
+            </div>
+            <Switch
+                checked={checked}
+                onChange={onChange}
+                disabled={disabled}
+                className="shrink-0"
+            />
+        </div>
+    )
+}
+
+/** One row in the left Files list. */
+function FileRow({
+    label,
+    active,
+    onSelect,
+    onRemove,
+    disabled,
+}: {
+    label: string
+    active: boolean
+    onSelect: () => void
+    onRemove?: () => void
+    disabled?: boolean
+}) {
+    return (
+        <div
+            role="button"
+            tabIndex={0}
+            onClick={onSelect}
+            onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault()
+                    onSelect()
+                }
+            }}
+            className={cn(
+                "group/file flex cursor-pointer items-center gap-1.5 rounded px-2 py-1",
+                // The list panel is the elevated/item colour; the selected row gets a fill overlay
+                // (distinct in both light and dark, where EAEFF5 and F5F7FA collapse to one value).
+                active
+                    ? "bg-[var(--ant-color-fill-secondary)]"
+                    : "hover:bg-[var(--ant-color-fill-tertiary)]",
+            )}
+        >
+            <FileIcon size={13} className="shrink-0 text-[var(--ag-c-97A4B0,#97a4b0)]" />
+            <span className="min-w-0 flex-1 truncate font-mono text-xs">{label}</span>
+            {onRemove && !disabled ? (
+                <button
+                    type="button"
+                    aria-label="Remove file"
+                    onClick={(e) => {
+                        e.stopPropagation()
+                        onRemove()
+                    }}
+                    className="flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0 text-[var(--ag-c-97A4B0,#97a4b0)] opacity-0 transition-opacity hover:text-[var(--ag-c-FF4D4F,#ff4d4f)] group-hover/file:opacity-100"
+                >
+                    <Trash size={13} />
+                </button>
+            ) : null}
+        </div>
+    )
+}
+
+export function SkillFormView({value, onChange, disabled}: SkillFormViewProps) {
+    const skill = (value ?? {}) as Record<string, unknown>
+    const files: SkillFileEntry[] = Array.isArray(skill.files)
+        ? (skill.files as SkillFileEntry[])
+        : []
+
+    const [selected, setSelected] = useState<Selection>("skill")
+
+    const set = (key: string, fieldValue: unknown) => {
+        const next = {...skill}
+        if (
+            fieldValue === undefined ||
+            fieldValue === null ||
+            fieldValue === "" ||
+            fieldValue === false
+        ) {
+            delete next[key]
+        } else {
+            next[key] = fieldValue
+        }
+        onChange(next)
+    }
+
+    const setFiles = (next: SkillFileEntry[]) => {
+        const updated = {...skill}
+        if (next.length) updated.files = next
+        else delete updated.files
+        onChange(updated)
+    }
+    const updateFile = (index: number, patch: Partial<SkillFileEntry>) =>
+        setFiles(files.map((f, i) => (i === index ? {...f, ...patch} : f)))
+    const addFile = () => {
+        setFiles([...files, {path: "", content: ""}])
+        setSelected(files.length) // the new entry's index
+    }
+    const removeFile = (index: number) => {
+        setFiles(files.filter((_, i) => i !== index))
+        setSelected((cur) => {
+            if (cur === "skill") return cur
+            if (cur === index) return "skill"
+            return cur > index ? cur - 1 : cur
+        })
+    }
+
+    // Merge an uploaded/parsed skill into the draft (only overwrite what the upload provides).
+    const applyParsed = (parsed: ParsedSkill) => {
+        const next = {...skill}
+        if (parsed.name) next.name = parsed.name
+        if (parsed.description) next.description = parsed.description
+        // body/files are always present on a parsed upload; assign unconditionally so a
+        // replacement with an empty body or no bundled files clears the previous draft.
+        next.body = parsed.body
+        if (parsed.files.length) next.files = parsed.files
+        else delete next.files
+        onChange(next)
+        setSelected("skill")
+    }
+
+    // The selected entry: SKILL.md (body) unless a valid file index is active.
+    const activeFile = typeof selected === "number" ? files[selected] : undefined
+    const showSkill = selected === "skill" || !activeFile
+
+    return (
+        <div className="flex h-full gap-3">
+            {/* Left: full-height file list (SKILL.md pinned) with the drop zone pinned to the bottom. */}
+            <div className="flex h-full w-44 shrink-0 flex-col gap-2 border-0 border-r border-solid border-[var(--ag-c-EAEFF5,#eaeff5)] pr-3">
+                <div className="flex shrink-0 items-center justify-between gap-1">
+                    <Typography.Text className="text-xs font-medium">Files</Typography.Text>
+                    {!disabled ? (
+                        <Tooltip title="Add a file">
+                            <button
+                                type="button"
+                                aria-label="Add file"
+                                onClick={addFile}
+                                className="flex cursor-pointer items-center border-0 bg-transparent p-0 text-[var(--ag-c-586673,#586673)] hover:text-[var(--ag-c-1C2C3D,#1c2c3d)]"
+                            >
+                                <Plus size={14} />
+                            </button>
+                        </Tooltip>
+                    ) : null}
+                </div>
+
+                {/* The list grows to fill the column so the drop zone sits at the bottom. Filled
+                    with the elevated/item colour so it reads as one panel, not a lone highlighted row. */}
+                <div className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto rounded-lg bg-[var(--ag-c-EAEFF5,#eaeff5)] p-1">
+                    <FileRow
+                        label="SKILL.md"
+                        active={showSkill}
+                        onSelect={() => setSelected("skill")}
+                        disabled={disabled}
+                    />
+                    {files.map((file, index) => (
+                        <FileRow
+                            key={index}
+                            label={file.path || "untitled"}
+                            active={selected === index}
+                            onSelect={() => setSelected(index)}
+                            onRemove={() => removeFile(index)}
+                            disabled={disabled}
+                        />
+                    ))}
+                </div>
+
+                {!disabled ? (
+                    <div className="shrink-0">
+                        <SkillUploadZone onParsed={applyParsed} disabled={disabled} />
+                    </div>
+                ) : null}
+            </div>
+
+            {/* Right: skill-level fields + the selected file's editor + behaviour toggles. */}
+            <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-3 overflow-y-auto pr-1">
+                <LabeledField label="Name">
+                    <Input
+                        value={(skill.name as string | undefined) ?? ""}
+                        onChange={(e) => set("name", e.target.value)}
+                        placeholder="my-skill"
+                        disabled={disabled}
+                    />
+                </LabeledField>
+
+                <LabeledField
+                    label="Description"
+                    description="The trigger the model matches when deciding to use this skill"
+                    withTooltip
+                >
+                    <Input.TextArea
+                        value={(skill.description as string | undefined) ?? ""}
+                        onChange={(e) => set("description", e.target.value)}
+                        autoSize={{minRows: 2, maxRows: 4}}
+                        placeholder="When the agent should reach for this skill"
+                        disabled={disabled}
+                    />
+                </LabeledField>
+
+                {showSkill ? (
+                    <LabeledField
+                        label="SKILL.md"
+                        description="The Markdown body the harness reads, written after the composed frontmatter"
+                        withTooltip
+                    >
+                        <MarkdownEditor
+                            value={(skill.body as string | undefined) ?? ""}
+                            onChange={(v) => set("body", v)}
+                            placeholder={
+                                "# My skill\n\nStep-by-step instructions the agent follows…"
+                            }
+                            disabled={disabled}
+                            filename="SKILL.md"
+                        />
+                    </LabeledField>
+                ) : (
+                    <div className="flex flex-col gap-2">
+                        <div className="flex items-center gap-2">
+                            <Input
+                                value={activeFile?.path ?? ""}
+                                onChange={(e) =>
+                                    updateFile(selected as number, {path: e.target.value})
+                                }
+                                placeholder="scripts/foo.py"
+                                disabled={disabled}
+                                className="font-mono"
+                            />
+                            <Tooltip title="Mark executable (sandbox policy must also allow it)">
+                                <span className="flex shrink-0 items-center gap-1">
+                                    <Typography.Text type="secondary" className="font-mono text-xs">
+                                        +x
+                                    </Typography.Text>
+                                    <Switch
+                                        checked={Boolean(activeFile?.executable)}
+                                        onChange={(v) =>
+                                            updateFile(selected as number, {
+                                                executable: v || undefined,
+                                            })
+                                        }
+                                        disabled={disabled}
+                                    />
+                                </span>
+                            </Tooltip>
+                        </div>
+                        <CodeEditor
+                            value={activeFile?.content ?? ""}
+                            onChange={(v) => updateFile(selected as number, {content: v})}
+                            language={codeLanguageFromPath(activeFile?.path)}
+                            placeholder="File content"
+                            disabled={disabled}
+                        />
+                    </div>
+                )}
+
+                <ToggleRow
+                    label="Hide from prompt"
+                    description="Don't list this skill in the prompt — invoke only via /skill:name (Pi / Claude)"
+                    checked={Boolean(skill.disable_model_invocation)}
+                    onChange={(v) => set("disable_model_invocation", v)}
+                    disabled={disabled}
+                />
+
+                <ToggleRow
+                    label="Allow executable files"
+                    description="Permit executable bundled files (the sandbox policy must also allow execution)"
+                    checked={Boolean(skill.allow_executable_files)}
+                    onChange={(v) => set("allow_executable_files", v)}
+                    disabled={disabled}
+                />
+            </div>
+        </div>
+    )
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SkillUploadZone.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SkillUploadZone.tsx
new file mode 100644
index 0000000000..58d6eebc18
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SkillUploadZone.tsx
@@ -0,0 +1,94 @@
+/**
+ * SkillUploadZone
+ *
+ * The "drag and drop a skill folder, .zip, or .skill" affordance from the skills design. Reads a
+ * dropped folder (via the entries API), dropped files, or a browsed selection, parses them into a
+ * {@link ParsedSkill}, and hands it back to the host to merge into the skill draft.
+ */
+import {useCallback, useRef, useState} from "react"
+
+import {cn} from "@agenta/ui/styles"
+import {UploadSimple} from "@phosphor-icons/react"
+import {Button, Spin} from "antd"
+
+import {parseSkillFromDataTransfer, parseSkillFromFileList, type ParsedSkill} from "./skillUpload"
+
+export interface SkillUploadZoneProps {
+    onParsed: (skill: ParsedSkill) => void
+    disabled?: boolean
+}
+
+export function SkillUploadZone({onParsed, disabled}: SkillUploadZoneProps) {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const [over, setOver] = useState(false)
+    const [busy, setBusy] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    const run = useCallback(
+        async (parse: () => Promise<ParsedSkill>) => {
+            setBusy(true)
+            setError(null)
+            try {
+                const skill = await parse()
+                onParsed(skill)
+            } catch {
+                setError("Couldn't read that — drop a skill folder, a .zip, or a .skill file.")
+            } finally {
+                setBusy(false)
+            }
+        },
+        [onParsed],
+    )
+
+    return (
+        <div
+            onDragOver={(e) => {
+                if (disabled) return
+                e.preventDefault()
+                setOver(true)
+            }}
+            onDragLeave={() => setOver(false)}
+            onDrop={(e) => {
+                if (disabled) return
+                e.preventDefault()
+                setOver(false)
+                const dt = e.dataTransfer
+                run(() => parseSkillFromDataTransfer(dt))
+            }}
+            className={cn(
+                "flex flex-col items-center justify-center gap-2 rounded border border-dashed px-4 py-5 text-center transition-colors",
+                "border-[var(--ag-c-D6DEE6,#d6dee6)]",
+                over && "border-[var(--ag-c-586673,#586673)] bg-[var(--ag-c-F5F7FA,#f5f7fa)]",
+                disabled && "opacity-60",
+            )}
+        >
+            {busy ? (
+                <Spin size="small" />
+            ) : (
+                <UploadSimple size={20} className="text-[var(--ag-c-586673,#586673)]" />
+            )}
+            <div className="text-xs text-[var(--ag-c-586673,#586673)]">
+                Drag a skill folder, <span className="font-mono">.zip</span>, or{" "}
+                <span className="font-mono">.skill</span> here
+            </div>
+            <Button onClick={() => inputRef.current?.click()} disabled={disabled || busy}>
+                Browse files
+            </Button>
+            {error ? (
+                <div className="text-xs text-[var(--ag-c-FF4D4F,#ff4d4f)]">{error}</div>
+            ) : null}
+            <input
+                ref={inputRef}
+                type="file"
+                multiple
+                accept=".zip,.skill,.md,text/markdown,text/plain"
+                className="hidden"
+                onChange={(e) => {
+                    const list = e.target.files
+                    if (list && list.length) run(() => parseSkillFromFileList(list))
+                    e.target.value = ""
+                }}
+            />
+        </div>
+    )
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolFormView.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolFormView.tsx
new file mode 100644
index 0000000000..c2e116bcd0
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolFormView.tsx
@@ -0,0 +1,149 @@
+/**
+ * ToolFormView
+ *
+ * Structured form view for a function tool, the Form side of {@link ConfigItemDrawer}. Edits
+ * the OpenAI-style `function` shape — name, description, and a JSON-Schema `parameters` block.
+ * Builtin/provider tools (a bare `type` with no editable `function`) have no meaningful form,
+ * so the host renders the drawer JSON-only for those rather than this view.
+ */
+import {LabeledField} from "@agenta/ui/components/presentational"
+import {Code} from "@phosphor-icons/react"
+import {Input, Select} from "antd"
+
+import {JsonObjectEditor} from "./JsonObjectEditor"
+
+export interface ToolFormViewProps {
+    value: Record<string, unknown>
+    onChange: (next: Record<string, unknown>) => void
+    disabled?: boolean
+}
+
+// Per-tool permission (allow / ask / deny). Stored as a TOP-LEVEL `permission` key on the tool
+// object — NOT inside `agenta_metadata`, which `stripAgentaMetadataDeep` strips on every save/run.
+// The SDK reads it via `AliasChoices("permission","permission_mode","permissionMode")`. Unset means
+// the tool inherits the agent's global permission policy.
+type ToolPermission = "allow" | "ask" | "deny"
+
+const PERMISSION_OPTIONS: {value: ToolPermission; label: string}[] = [
+    {value: "allow", label: "Allow"},
+    {value: "ask", label: "Ask"},
+    {value: "deny", label: "Deny"},
+]
+
+function isPermission(value: unknown): value is ToolPermission {
+    return value === "allow" || value === "ask" || value === "deny"
+}
+
+/** Display default from the catalog's `read_only` metadata: true → allow, false → ask (unwritten). */
+function defaultPermissionFromReadOnly(
+    metadata: Record<string, unknown> | undefined,
+): ToolPermission | undefined {
+    const readOnly = metadata?.read_only
+    if (readOnly === true) return "allow"
+    if (readOnly === false) return "ask"
+    return undefined
+}
+
+/** Canonical store is the top-level `permission`; fall back to a legacy `agenta_metadata.permission_mode`. */
+function readPermission(
+    topLevel: unknown,
+    metadata: Record<string, unknown> | undefined,
+): ToolPermission | undefined {
+    if (isPermission(topLevel)) return topLevel
+    if (isPermission(metadata?.permission_mode)) return metadata?.permission_mode
+    return undefined
+}
+
+export function ToolFormView({value, onChange, disabled}: ToolFormViewProps) {
+    const tool = (value ?? {}) as Record<string, unknown>
+    const fn = (tool.function ?? {}) as Record<string, unknown>
+
+    const setFn = (key: string, fieldValue: unknown) => {
+        const nextFn = {...fn}
+        if (fieldValue === undefined || fieldValue === null || fieldValue === "") {
+            delete nextFn[key]
+        } else {
+            nextFn[key] = fieldValue
+        }
+        onChange({...tool, function: nextFn})
+    }
+
+    const metadata = tool.agenta_metadata as Record<string, unknown> | undefined
+    const permission = readPermission(tool.permission, metadata)
+    const permissionDefault = defaultPermissionFromReadOnly(metadata)
+    const setPermission = (next: ToolPermission | null) => {
+        const nextTool = {...tool}
+        // Also drop the legacy `agenta_metadata.permission_mode`; otherwise clearing the
+        // top-level field resolves straight back to the legacy value and "inherit policy"
+        // is unreachable for older tools.
+        const nextMetadata = {
+            ...((nextTool.agenta_metadata as Record<string, unknown> | undefined) ?? {}),
+        }
+        delete nextMetadata.permission_mode
+        if (Object.keys(nextMetadata).length > 0) nextTool.agenta_metadata = nextMetadata
+        else delete nextTool.agenta_metadata
+        if (next) nextTool.permission = next
+        else delete nextTool.permission
+        onChange(nextTool)
+    }
+
+    return (
+        <div className="flex flex-col gap-3">
+            <LabeledField label="Name">
+                <Input
+                    value={(fn.name as string | undefined) ?? ""}
+                    onChange={(e) => setFn("name", e.target.value)}
+                    placeholder="get_weather"
+                    disabled={disabled}
+                />
+            </LabeledField>
+
+            <LabeledField label="Description">
+                <Input.TextArea
+                    value={(fn.description as string | undefined) ?? ""}
+                    onChange={(e) => setFn("description", e.target.value)}
+                    autoSize={{minRows: 2, maxRows: 6}}
+                    placeholder="What the tool does and when to use it"
+                    disabled={disabled}
+                />
+            </LabeledField>
+
+            <LabeledField
+                label="Permission"
+                description="How tool-use is gated: allow auto-approves, ask prompts the user, deny blocks. Leave unset to inherit the agent's permission policy."
+                withTooltip
+            >
+                <Select<ToolPermission>
+                    value={permission ?? undefined}
+                    onChange={(v) => setPermission(v ?? null)}
+                    options={PERMISSION_OPTIONS}
+                    placeholder={
+                        permissionDefault ? `${permissionDefault} (default)` : "Inherit policy"
+                    }
+                    allowClear
+                    className="w-full"
+                    disabled={disabled}
+                />
+            </LabeledField>
+
+            <div className="flex items-start gap-2 rounded border border-solid border-[var(--ag-c-EAEFF5,#eaeff5)] bg-[var(--ag-c-F5F7FA,#f5f7fa)] px-3 py-2 text-xs text-[var(--ag-c-586673,#586673)]">
+                <Code size={14} className="mt-0.5 shrink-0" />
+                <span>
+                    A schema-only tool — the model emits a call and your application executes it.
+                </span>
+            </div>
+
+            <LabeledField
+                label="Input schema (JSON Schema)"
+                description="JSON Schema describing the tool's input arguments"
+                withTooltip
+            >
+                <JsonObjectEditor
+                    value={fn.parameters ?? {}}
+                    onChange={(parameters) => setFn("parameters", parameters)}
+                    disabled={disabled}
+                />
+            </LabeledField>
+        </div>
+    )
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx
index 70bfee0613..205bb21c85 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx
@@ -23,7 +23,7 @@ import {CollapseToggleButton, getCollapseStyle} from "@agenta/ui/components/pres
 import {useDrillInUI} from "@agenta/ui/drill-in"
 import {getProviderIcon} from "@agenta/ui/select-llm-provider"
 import {CopySimple, MinusCircle} from "@phosphor-icons/react"
-import {Button, Select, Tooltip, Typography} from "antd"
+import {Button, Tooltip, Typography} from "antd"
 import clsx from "clsx"
 
 import {TOOL_PROVIDERS_META, TOOL_SPECS, parseGatewayFunctionName, type ToolObj} from "./toolUtils"
@@ -435,98 +435,6 @@ function defaultRenderProviderIcon(providerKey: string): React.ReactNode {
     return <Icon className="w-4 h-4" />
 }
 
-// ============================================================================
-// PER-TOOL PERMISSION (Layer 3: allow / ask / deny)
-// ============================================================================
-
-/**
- * The tool-use permission vocabulary. Stored as a TOP-LEVEL `permission` key on the tool
- * object (not inside `agenta_metadata`, which `stripAgentaMetadataDeep` removes on every
- * save/run path). The SDK tool config/spec deserializes it with no mapping
- * (`AliasChoices("permission", "permission_mode", "permissionMode")`). Unset means the tool
- * inherits the global permission policy.
- */
-type ToolPermission = "allow" | "ask" | "deny"
-
-const PERMISSION_OPTIONS: {value: ToolPermission; label: string}[] = [
-    {value: "allow", label: "Allow"},
-    {value: "ask", label: "Ask"},
-    {value: "deny", label: "Deny"},
-]
-
-/**
- * Default the permission from the tool's `read_only` metadata, when the catalog supplied it:
- * `read_only === true` → allow (no side effect), `read_only === false` → ask, unknown → unset
- * (inherit the global policy). This is a display default only — it is not written back unless
- * the author changes it.
- */
-function defaultPermissionFromReadOnly(
-    metadata: Record<string, unknown> | undefined,
-): ToolPermission | undefined {
-    const readOnly = metadata?.read_only
-    if (readOnly === true) return "allow"
-    if (readOnly === false) return "ask"
-    return undefined
-}
-
-function isPermission(value: unknown): value is ToolPermission {
-    return value === "allow" || value === "ask" || value === "deny"
-}
-
-/**
- * Read the stored permission. Canonical home is the TOP-LEVEL `permission` key (it survives
- * `stripAgentaMetadataDeep`); fall back to any legacy `agenta_metadata.permission_mode` so values
- * written before this change still display.
- */
-function readPermission(
-    topLevel: unknown,
-    metadata: Record<string, unknown> | undefined,
-): ToolPermission | undefined {
-    if (isPermission(topLevel)) return topLevel
-    if (isPermission(metadata?.permission_mode)) return metadata.permission_mode
-    return undefined
-}
-
-interface ToolPermissionControlProps {
-    /** The current top-level `permission` value on the tool (canonical store). */
-    permission: unknown
-    /** The current `agenta_metadata` of the tool (read for the read_only default + legacy mode). */
-    metadata: Record<string, unknown> | undefined
-    /** Called with the chosen permission (or null to clear back to the global policy). */
-    onChange: (permission: ToolPermission | null) => void
-    disabled?: boolean
-}
-
-/** Compact allow/ask/deny selector for one tool. Displays the read_only-derived default unwritten. */
-function ToolPermissionControl({
-    permission,
-    metadata,
-    onChange,
-    disabled,
-}: ToolPermissionControlProps) {
-    const stored = readPermission(permission, metadata)
-    const displayDefault = defaultPermissionFromReadOnly(metadata)
-    return (
-        <div className="flex items-center gap-2 px-1 py-0.5">
-            <Tooltip title="How tool-use is gated: allow auto-approves, ask prompts, deny blocks. Unset inherits the global permission policy.">
-                <Typography.Text type="secondary" className="text-xs">
-                    Permission
-                </Typography.Text>
-            </Tooltip>
-            <Select<ToolPermission>
-                value={stored ?? undefined}
-                onChange={(v) => onChange(v ?? null)}
-                options={PERMISSION_OPTIONS}
-                disabled={disabled}
-                placeholder={displayDefault ? `${displayDefault} (default)` : "Inherit policy"}
-                allowClear
-                size="small"
-                className="w-[160px]"
-            />
-        </div>
-    )
-}
-
 export interface ToolItemControlProps {
     /** Tool value (object or JSON string) */
     value: unknown
@@ -592,16 +500,6 @@ export const ToolItemControl = memo(function ToolItemControl({
         [onChange, agentaMetadata],
     )
 
-    // The current `agenta_metadata` as an object (read for the permission control's read_only
-    // default and any legacy `permission_mode`).
-    const metadataObj = useMemo(
-        () =>
-            agentaMetadata && typeof agentaMetadata === "object" && !Array.isArray(agentaMetadata)
-                ? (agentaMetadata as Record<string, unknown>)
-                : undefined,
-        [agentaMetadata],
-    )
-
     const {
         toolObj,
         editorText,
@@ -609,47 +507,6 @@ export const ToolItemControl = memo(function ToolItemControl({
         onEditorChange,
     } = useToolState(cleanedValue, isReadOnly, handleChange)
 
-    // The current top-level `permission` on the tool (canonical store, survives metadata strip).
-    // Read off the LIVE editor object (`toolObj`), not the `cleanedValue` prop: the JSON editor
-    // mutates `toolObj` inside `useToolState` and only propagates to the parent (and back into
-    // `value`/`cleanedValue`) asynchronously, so the prop lags in-flight edits.
-    const topLevelPermission = useMemo(
-        () =>
-            toolObj && typeof toolObj === "object" && !Array.isArray(toolObj)
-                ? (toolObj as Record<string, unknown>).permission
-                : undefined,
-        [toolObj],
-    )
-
-    // Set (or clear) the TOP-LEVEL `permission` key on this tool, leaving the rest of the tool
-    // definition intact. It lives at the top level (not inside `agenta_metadata`) so it survives
-    // `stripAgentaMetadataDeep` on the save/run path. Clearing removes the key (and any legacy
-    // `agenta_metadata.permission_mode`) so the tool falls back to the global policy.
-    //
-    // Compose off the LIVE editor object (`toolObj`), the same source `handleChange` propagates
-    // through `useToolState`, so a permission change merges with in-flight JSON edits instead of
-    // clobbering them with the stale `cleanedValue` prop.
-    const handlePermissionChange = useCallback(
-        (permission: "allow" | "ask" | "deny" | null) => {
-            if (!onChange) return
-            const base = (toolObj && typeof toolObj === "object" ? toolObj : {}) as Record<
-                string,
-                unknown
-            >
-            const {permission: _dropPermission, ...restBase} = base
-            // Drop any legacy `permission_mode` stored inside `agenta_metadata`; the top-level key
-            // is now canonical.
-            const {permission_mode: _dropLegacy, ...restMeta} = metadataObj ?? {}
-            const withMeta =
-                Object.keys(restMeta).length > 0
-                    ? {...restBase, agenta_metadata: restMeta}
-                    : restBase
-            const merged = permission ? {...withMeta, permission} : withMeta
-            onChange(merged as ToolObj)
-        },
-        [onChange, metadataObj, toolObj],
-    )
-
     const functionName =
         (toolObj as Record<string, unknown>)?.function &&
         typeof (toolObj as Record<string, unknown>).function === "object"
@@ -798,20 +655,12 @@ export const ToolItemControl = memo(function ToolItemControl({
                     containerRef={containerRef}
                 />
                 {!minimized && (
-                    <>
-                        <textarea
-                            className="font-mono text-xs p-2 border rounded min-h-[120px] resize-y w-full"
-                            value={editorText}
-                            onChange={(e) => onEditorChange(e.target.value)}
-                            readOnly={isReadOnly}
-                        />
-                        <ToolPermissionControl
-                            permission={topLevelPermission}
-                            metadata={metadataObj}
-                            onChange={handlePermissionChange}
-                            disabled={isReadOnly}
-                        />
-                    </>
+                    <textarea
+                        className="font-mono text-xs p-2 border rounded min-h-[120px] resize-y w-full"
+                        value={editorText}
+                        onChange={(e) => onEditorChange(e.target.value)}
+                        readOnly={isReadOnly}
+                    />
                 )}
             </div>
         )
@@ -878,14 +727,6 @@ export const ToolItemControl = memo(function ToolItemControl({
                     />
                 }
             />
-            {!minimized && (
-                <ToolPermissionControl
-                    permission={topLevelPermission}
-                    metadata={metadataObj}
-                    onChange={handlePermissionChange}
-                    disabled={isReadOnly}
-                />
-            )}
         </div>
     )
 })
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolSelectorPopover.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolSelectorPopover.tsx
index a029bdf08a..dc6f6503d2 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolSelectorPopover.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolSelectorPopover.tsx
@@ -80,6 +80,9 @@ export interface ToolSelectorPopoverProps {
     existingToolCount?: number
     /** Optional gateway tools bridge (typically from DrillInUIContext) */
     gatewayTools?: GatewayToolsBridge
+    /** Custom trigger element. Defaults to an outlined "Tool" button (e.g. a compact icon button
+     * when hosted in a section header). */
+    trigger?: ReactNode
 }
 
 // ============================================================================
@@ -438,7 +441,7 @@ function BuiltinToolsPane({
                 />
             </div>
 
-            <div className="flex-1 overflow-y-auto p-1">
+            <div className="flex-1 min-h-0 overflow-y-auto p-1">
                 {filteredTools.map((tool) => {
                     const selected = isSelected(tool)
                     return (
@@ -629,7 +632,7 @@ function GatewayActionsPane({
                 <div className="mt-1 text-[10px] text-zinc-400">{total} actions</div>
             </div>
 
-            <div ref={scrollRef} className="flex-1 overflow-y-auto p-1">
+            <div ref={scrollRef} className="flex-1 min-h-0 overflow-y-auto p-1">
                 {isLoading && actions.length === 0 ? (
                     <div className="flex items-center justify-center py-6">
                         <Spin size="small" />
@@ -723,6 +726,7 @@ export const ToolSelectorPopover = memo(function ToolSelectorPopover({
     renderProviderIcon,
     existingToolCount = 0,
     gatewayTools: gatewayToolsProp,
+    trigger,
 }: ToolSelectorPopoverProps) {
     const {showMessage, gatewayTools: gatewayToolsFromContext} = useDrillInUI()
 
@@ -735,25 +739,6 @@ export const ToolSelectorPopover = memo(function ToolSelectorPopover({
     const [leftSearch, setLeftSearch] = useState("")
     const [rightSearch, setRightSearch] = useState("")
     const [activePane, setActivePane] = useState<ActivePane>(null)
-    const [leftPanelHeight, setLeftPanelHeight] = useState<number | null>(null)
-    const leftPanelRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-        const el = leftPanelRef.current
-        if (!el) return
-
-        const updateHeight = () => setLeftPanelHeight(el.offsetHeight)
-        updateHeight()
-
-        if (typeof ResizeObserver !== "undefined") {
-            const observer = new ResizeObserver(() => updateHeight())
-            observer.observe(el)
-            return () => observer.disconnect()
-        }
-
-        window.addEventListener("resize", updateHeight)
-        return () => window.removeEventListener("resize", updateHeight)
-    }, [open, leftSearch, gatewayTools?.enabled, gatewayTools?.connections.length])
 
     useEffect(() => {
         setRightSearch("")
@@ -822,12 +807,9 @@ export const ToolSelectorPopover = memo(function ToolSelectorPopover({
     }, [gatewayTools, resetAndClose])
 
     const content = (
-        <div className="flex min-w-[460px] bg-[var(--ag-c-FFFFFF)] rounded-lg overflow-hidden border border-solid border-[var(--ag-rgba-051729-06)] shadow-sm">
-            <div
-                ref={leftPanelRef}
-                className="w-[232px] border-0 border-r border-solid border-[var(--ag-rgba-051729-06)]"
-            >
-                <div className="px-2 py-2 border-0 border-b border-solid border-[var(--ag-rgba-051729-06)]">
+        <div className="flex h-[360px] min-w-[460px] bg-[var(--ag-c-FFFFFF)] rounded-lg overflow-hidden border border-solid border-[var(--ag-rgba-051729-06)] shadow-sm">
+            <div className="flex w-[232px] flex-col min-h-0 border-0 border-r border-solid border-[var(--ag-rgba-051729-06)]">
+                <div className="shrink-0 px-2 py-2 border-0 border-b border-solid border-[var(--ag-rgba-051729-06)]">
                     <Input
                         variant="borderless"
                         value={leftSearch}
@@ -838,7 +820,7 @@ export const ToolSelectorPopover = memo(function ToolSelectorPopover({
                     />
                 </div>
 
-                <div className="max-h-[360px] overflow-y-auto p-1 flex flex-col gap-1">
+                <div className="flex-1 min-h-0 overflow-y-auto p-1 flex flex-col gap-1">
                     <div>
                         <SectionHeader icon={<Sparkle size={12} />} title="Built-in tools" />
                         <div className="flex flex-col gap-0.5">
@@ -972,10 +954,7 @@ export const ToolSelectorPopover = memo(function ToolSelectorPopover({
                 </div>
             </div>
 
-            <div
-                className="w-[232px] bg-[var(--ag-c-FFFFFF)]"
-                style={leftPanelHeight ? {height: leftPanelHeight} : undefined}
-            >
+            <div className="w-[232px] h-full bg-[var(--ag-c-FFFFFF)]">
                 {activeBuiltinProvider ? (
                     <BuiltinToolsPane
                         provider={activeBuiltinProvider}
@@ -1025,15 +1004,17 @@ export const ToolSelectorPopover = memo(function ToolSelectorPopover({
             popupRender={() => content}
             classNames={{root: "[&_.ant-dropdown-menu]:hidden [&_.ant-dropdown]:p-0"}}
         >
-            <Button
-                variant="outlined"
-                color="default"
-                size="small"
-                icon={<Plus size={14} />}
-                disabled={disabled}
-            >
-                Tool
-            </Button>
+            {trigger ?? (
+                <Button
+                    variant="outlined"
+                    color="default"
+                    size="small"
+                    icon={<Plus size={14} />}
+                    disabled={disabled}
+                >
+                    Tool
+                </Button>
+            )}
         </Dropdown>
     )
 })
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentConfigLayout.ts b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentConfigLayout.ts
new file mode 100644
index 0000000000..90e343d65f
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentConfigLayout.ts
@@ -0,0 +1,23 @@
+/**
+ * Agent config-panel layout preference.
+ *
+ * The agent config panel ({@link AgentConfigControl}) can render its sections as an accordion,
+ * tabs, or cards. The chosen layout is a global, persisted UI preference rather than per-variant
+ * state, so the selector can live in the variant header menu (away from the panel itself) while the
+ * panel reads the same value. Persisted to localStorage so it survives reloads.
+ */
+import {atomWithStorage} from "jotai/utils"
+
+export type AgentConfigLayout = "accordion" | "tabs" | "cards"
+
+/** The selectable layouts, in display order. Shared by the panel and the header-menu selector. */
+export const AGENT_CONFIG_LAYOUTS: {label: string; value: AgentConfigLayout}[] = [
+    {label: "Accordion", value: "accordion"},
+    {label: "Tabs", value: "tabs"},
+    {label: "Cards", value: "cards"},
+]
+
+export const agentConfigLayoutAtom = atomWithStorage<AgentConfigLayout>(
+    "agenta:agent-config-layout",
+    "accordion",
+)
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/index.ts b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/index.ts
index 8fff869d00..2700634954 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/index.ts
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/index.ts
@@ -85,6 +85,26 @@ export type {ClaudePermissionsControlProps} from "./ClaudePermissionsControl"
 export {AgentConfigControl} from "./AgentConfigControl"
 export type {AgentConfigControlProps} from "./AgentConfigControl"
 
+// Agent config redesign (drawer/accordion config view + ported backend-aligned controls).
+export {HarnessSelectControl} from "./HarnessSelectControl"
+export type {HarnessSelectControlProps} from "./HarnessSelectControl"
+export {ConfigItemDrawer} from "./ConfigItemDrawer"
+export type {ConfigItemDrawerProps, ConfigItemView} from "./ConfigItemDrawer"
+export {JsonObjectEditor} from "./JsonObjectEditor"
+export type {JsonObjectEditorProps} from "./JsonObjectEditor"
+export {MarkdownEditor} from "./MarkdownEditor"
+export type {MarkdownEditorProps} from "./MarkdownEditor"
+export {CodeEditor, codeLanguageFromPath} from "./CodeEditor"
+export type {CodeEditorProps, CodeEditorLanguage} from "./CodeEditor"
+export {ToolFormView} from "./ToolFormView"
+export type {ToolFormViewProps} from "./ToolFormView"
+export {McpServerFormView} from "./McpServerFormView"
+export type {McpServerFormViewProps} from "./McpServerFormView"
+export {SkillFormView} from "./SkillFormView"
+export type {SkillFormViewProps} from "./SkillFormView"
+export {agentConfigLayoutAtom, AGENT_CONFIG_LAYOUTS} from "./agentConfigLayout"
+export type {AgentConfigLayout} from "./agentConfigLayout"
+
 // ============================================================================
 // COMPOSITE CONTROLS
 // ============================================================================
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/skillUpload.ts b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/skillUpload.ts
new file mode 100644
index 0000000000..a61af17465
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/skillUpload.ts
@@ -0,0 +1,158 @@
+/**
+ * skillUpload
+ *
+ * Turns an uploaded skill — a folder, a set of loose files, or a `.zip` / `.skill` archive —
+ * into the inline `SkillConfigSchema` shape: `name` + `description` (parsed from the SKILL.md
+ * YAML frontmatter), `body` (the Markdown after the frontmatter), and `files[]` (the supporting
+ * files laid beside SKILL.md, by relative path). Pure helpers, unit-testable without the DOM,
+ * plus a small DataTransfer reader for drag-and-dropped folders.
+ *
+ * Frontmatter mapping note: the schema keeps `name`/`description` as discrete fields (the backend
+ * composes the SKILL.md frontmatter from them), so we parse those OUT of an uploaded SKILL.md and
+ * keep only the body. `version` (present in some early mockups) has no schema home and is dropped.
+ */
+import {strFromU8, unzipSync} from "fflate"
+
+export interface SkillFileEntry {
+    path: string
+    content: string
+    executable?: boolean
+}
+
+export interface ParsedSkill {
+    name?: string
+    description?: string
+    body: string
+    files: SkillFileEntry[]
+}
+
+interface RawFile {
+    path: string
+    bytes: Uint8Array
+}
+
+const SKILL_MD = /(^|\/)SKILL\.md$/i
+const ARCHIVE_EXT = /\.(zip|skill)$/i
+const IGNORED = /(^|\/)(__MACOSX\/|\.DS_Store$|\.git\/)/
+
+/** Parse the SKILL.md YAML frontmatter into `name` / `description`, returning the body without it. */
+export function parseSkillMarkdown(md: string): {
+    name?: string
+    description?: string
+    body: string
+} {
+    const clean = md.replace(/^\uFEFF/, "")
+    const m = clean.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/)
+    if (!m) return {body: clean.trim()}
+    const fm = m[1] ?? ""
+    const body = (m[2] ?? "").replace(/^[\r\n]+/, "")
+    const read = (key: string): string | undefined => {
+        const r = fm.match(new RegExp(`^${key}\\s*:\\s*(.*)$`, "im"))
+        if (!r) return undefined
+        const v = r[1].trim().replace(/^["']|["']$/g, "")
+        return v || undefined
+    }
+    return {name: read("name"), description: read("description"), body}
+}
+
+/** Build a skill object from a flat set of files (archives already expanded). */
+export function buildSkillFromFiles(raw: RawFile[]): ParsedSkill {
+    const files = raw.filter((f) => f.bytes && !f.path.endsWith("/") && !IGNORED.test(f.path))
+    const skillFile = files.find((f) => SKILL_MD.test(f.path))
+    const md = skillFile ? strFromU8(skillFile.bytes) : ""
+    const {name, description, body} = parseSkillMarkdown(md)
+    // Strip the folder SKILL.md lives in, so bundled paths are relative to it.
+    const baseDir = skillFile ? skillFile.path.replace(/SKILL\.md$/i, "") : ""
+    const bundled: SkillFileEntry[] = files
+        .filter((f) => f !== skillFile)
+        .map((f) => {
+            const rel =
+                baseDir && f.path.startsWith(baseDir) ? f.path.slice(baseDir.length) : f.path
+            return {path: rel, content: strFromU8(f.bytes)}
+        })
+        .filter((f) => f.path)
+    return {name, description, body, files: bundled}
+}
+
+/** Expand any `.zip` / `.skill` archives into their entries; pass other files through. */
+function expandArchives(raw: RawFile[]): RawFile[] {
+    const out: RawFile[] = []
+    for (const f of raw) {
+        if (ARCHIVE_EXT.test(f.path)) {
+            try {
+                const entries = unzipSync(f.bytes)
+                for (const [path, bytes] of Object.entries(entries)) {
+                    out.push({path, bytes: bytes as Uint8Array})
+                }
+                continue
+            } catch {
+                // Not a valid archive — fall through and treat it as a normal file.
+            }
+        }
+        out.push(f)
+    }
+    return out
+}
+
+/** Read a FileList / File[] into raw bytes, honoring `webkitRelativePath` for folder picks. */
+async function filesToRaw(list: FileList | File[]): Promise<RawFile[]> {
+    return Promise.all(
+        Array.from(list).map(async (file) => ({
+            path: (file as File & {webkitRelativePath?: string}).webkitRelativePath || file.name,
+            bytes: new Uint8Array(await file.arrayBuffer()),
+        })),
+    )
+}
+
+/** Recursively read one drag-and-drop FileSystemEntry (folder or file) into raw files. */
+async function readEntry(entry: FileSystemEntry, prefix: string, out: RawFile[]): Promise<void> {
+    if (entry.isFile) {
+        const fileEntry = entry as FileSystemFileEntry
+        const file = await new Promise<File>((res, rej) => fileEntry.file(res, rej))
+        out.push({
+            path: prefix + entry.name,
+            bytes: new Uint8Array(await file.arrayBuffer()),
+        })
+        return
+    }
+    const dirReader = (entry as FileSystemDirectoryEntry).createReader()
+    const children = await new Promise<FileSystemEntry[]>((resolve, reject) => {
+        const all: FileSystemEntry[] = []
+        const pump = () =>
+            dirReader.readEntries((batch) => {
+                if (!batch.length) resolve(all)
+                else {
+                    all.push(...batch)
+                    pump()
+                }
+            }, reject)
+        pump()
+    })
+    for (const child of children) {
+        await readEntry(child, `${prefix}${entry.name}/`, out)
+    }
+}
+
+/** Read a drop's DataTransfer (folders via the entries API, else plain files). */
+async function readDataTransfer(dt: DataTransfer): Promise<RawFile[]> {
+    const entries = Array.from(dt.items)
+        .filter((i) => i.kind === "file")
+        .map((i) => i.webkitGetAsEntry?.())
+        .filter((e): e is FileSystemEntry => Boolean(e))
+    if (entries.length) {
+        const out: RawFile[] = []
+        for (const e of entries) await readEntry(e, "", out)
+        return out
+    }
+    return filesToRaw(dt.files)
+}
+
+/** Top-level: a selected FileList → a parsed skill. */
+export async function parseSkillFromFileList(list: FileList | File[]): Promise<ParsedSkill> {
+    return buildSkillFromFiles(expandArchives(await filesToRaw(list)))
+}
+
+/** Top-level: a drop's DataTransfer → a parsed skill. */
+export async function parseSkillFromDataTransfer(dt: DataTransfer): Promise<ParsedSkill> {
+    return buildSkillFromFiles(expandArchives(await readDataTransfer(dt)))
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/index.ts b/web/packages/agenta-entity-ui/src/DrillInView/index.ts
index bb19283a85..5fb61e0d53 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/index.ts
+++ b/web/packages/agenta-entity-ui/src/DrillInView/index.ts
@@ -278,3 +278,7 @@ export type {
     SchemaPropertyRendererProps,
     FieldsDetectionContextValue,
 } from "./SchemaControls"
+
+// Agent config layout preference (read by the variant header menu's View selector).
+export {agentConfigLayoutAtom, AGENT_CONFIG_LAYOUTS} from "./SchemaControls"
+export type {AgentConfigLayout} from "./SchemaControls"
diff --git a/web/packages/agenta-playground-ui/src/components/ExecutionHeader/index.tsx b/web/packages/agenta-playground-ui/src/components/ExecutionHeader/index.tsx
index b34077f22d..0aa7012a7f 100644
--- a/web/packages/agenta-playground-ui/src/components/ExecutionHeader/index.tsx
+++ b/web/packages/agenta-playground-ui/src/components/ExecutionHeader/index.tsx
@@ -167,7 +167,9 @@ const ExecutionHeader = ({
                     </Tooltip>
                 )}
 
-                {renderTestsetActions?.({entityId, resultCount, isRunning})}
+                {/* Testset wiring drives testcase-row runs; the agent lane runs from the panel
+                    composer and has no rows, so the testset connector doesn't apply to agents. */}
+                {!isAgent && renderTestsetActions?.({entityId, resultCount, isRunning})}
 
                 {!isAgent &&
                     (!isRunning ? (
diff --git a/web/packages/agenta-playground/src/state/execution/agentRequest.ts b/web/packages/agenta-playground/src/state/execution/agentRequest.ts
index 6462685587..77db9c2af7 100644
--- a/web/packages/agenta-playground/src/state/execution/agentRequest.ts
+++ b/web/packages/agenta-playground/src/state/execution/agentRequest.ts
@@ -132,6 +132,52 @@ const isUsableSkill = (entry: unknown): boolean => {
     return filled(skill?.name) && filled(skill?.description) && filled(skill?.body)
 }
 
+/**
+ * Whether a function-tool name is a gateway slug (`tools.provider.integration.action.connection`,
+ * `__` or `.` separated). Mirrors the backend's `_parse_gateway_slug` so we leave gateway tools in
+ * the OpenAI `function` shape the backend already coerces, and only rewrite genuine custom tools.
+ */
+const isGatewaySlug = (name: unknown): boolean => {
+    if (typeof name !== "string") return false
+    const parts = name.replace(/__/g, ".").split(".")
+    return parts.length === 5 && parts[0] === "tools"
+}
+
+/**
+ * Normalize a custom in-line function tool to the agent contract's typed `client` config.
+ *
+ * The shared tool form (also used by the prompt playground) stores tools in the OpenAI shape
+ * `{type: "function", function: {name, description, parameters}}`. The agent backend's
+ * `coerce_tool_config` only accepts typed configs (`builtin`/`gateway`/`code`/`client`), so a
+ * custom function tool 500s the run ("Unsupported tool configuration shape"). A schema-only
+ * function tool IS a client tool (the model emits the call, the app executes it), so emit the
+ * `ClientToolConfig` shape: `{type: "client", name, description, input_schema, permission}`.
+ *
+ * Left untouched: already-typed tools (a `type` other than `function`), and gateway-slug function
+ * tools (the backend coerces those from `function.name` directly).
+ */
+const normalizeAgentToolShape = (tool: unknown): unknown => {
+    if (!tool || typeof tool !== "object" || Array.isArray(tool)) return tool
+    const t = tool as Record<string, unknown>
+    if (t.type !== "function") return tool
+    const fn =
+        t.function && typeof t.function === "object"
+            ? (t.function as Record<string, unknown>)
+            : null
+    if (!fn || typeof fn.name !== "string") return tool
+    if (isGatewaySlug(fn.name)) return tool
+
+    const client: Record<string, unknown> = {type: "client", name: fn.name}
+    if (typeof fn.description === "string" && fn.description) client.description = fn.description
+    client.input_schema =
+        fn.parameters && typeof fn.parameters === "object"
+            ? fn.parameters
+            : {type: "object", properties: {}}
+    if (t.permission !== undefined) client.permission = t.permission
+    if (t.needs_approval !== undefined) client.needs_approval = t.needs_approval
+    return client
+}
+
 const pruneBlankEntries = (value: unknown): unknown => {
     if (Array.isArray(value)) return value.map(pruneBlankEntries)
     if (value && typeof value === "object") {
@@ -141,6 +187,10 @@ const pruneBlankEntries = (value: unknown): unknown => {
                 out[key] = val.filter(hasUsableName).map(pruneBlankEntries)
             } else if (key === "skills" && Array.isArray(val)) {
                 out[key] = val.filter(isUsableSkill).map(pruneBlankEntries)
+            } else if (key === "tools" && Array.isArray(val)) {
+                // Rewrite custom function tools to the typed `client` shape the agent backend
+                // accepts; gateway/typed tools pass through unchanged.
+                out[key] = val.map((tool) => pruneBlankEntries(normalizeAgentToolShape(tool)))
             } else {
                 out[key] = pruneBlankEntries(val)
             }
@@ -262,6 +312,11 @@ export async function buildAgentRequest(
     // Accept), which `useChat` can't render — the run succeeds but nothing appears.
     const headers: Record<string, string> = {
         Accept: "text/event-stream",
+        // Declare the request body's message format so the agent `/messages` endpoint can pick
+        // the right adapter. Our payload is AI-SDK (Vercel) UIMessages, so the value matches the
+        // backend's `VERCEL_MESSAGE_PROTOCOL` ("vercel"), the same identity it stamps on the
+        // response (`x-ag-messages-format`). See sdk/agents/adapters/vercel/routing.py.
+        "x-ag-messages-format": "vercel",
         ...(headersFactory ? await headersFactory() : {}),
     }
 
diff --git a/web/packages/agenta-playground/tests/unit/agentRequest.test.ts b/web/packages/agenta-playground/tests/unit/agentRequest.test.ts
index e787018651..5c260f7d9c 100644
--- a/web/packages/agenta-playground/tests/unit/agentRequest.test.ts
+++ b/web/packages/agenta-playground/tests/unit/agentRequest.test.ts
@@ -230,6 +230,12 @@ describe("buildAgentRequest", () => {
         expect(req!.headers.Accept).toBe("text/event-stream")
     })
 
+    it("declares the Vercel message format via x-ag-messages-format", async () => {
+        seed(store, "e", {})
+        const req = await buildAgentRequest("e", [], {sessionId: "s1", store})
+        expect(req!.headers["x-ag-messages-format"]).toBe("vercel")
+    })
+
     it("omits project_id from the query when unauthenticated", async () => {
         store.set(executionHeadersAtom, () => async () => ({}))
         seed(store, "e", {data: {workflow_id: REAL_APP}})
@@ -293,6 +299,52 @@ describe("buildAgentRequest", () => {
         ])
     })
 
+    it("rewrites a custom function tool to the typed client shape; leaves gateway/typed alone", async () => {
+        const gateway = {
+            type: "function",
+            function: {name: "tools__composio__github__create_issue__default"},
+        }
+        const builtinTyped = {type: "builtin", name: "web_search"}
+        seed(store, "e", {
+            config: {
+                tools: [
+                    {
+                        type: "function",
+                        function: {
+                            name: "get_weather",
+                            description: "Get current weather",
+                            parameters: {
+                                type: "object",
+                                properties: {location: {type: "string"}},
+                                required: ["location"],
+                            },
+                        },
+                        permission: "ask",
+                    },
+                    gateway,
+                    builtinTyped,
+                ],
+            },
+        })
+        const req = await buildAgentRequest("e", [], {sessionId: "s1", store})
+        const tools = (req!.requestBody.data as any).parameters.tools
+        // custom function tool → client config
+        expect(tools[0]).toEqual({
+            type: "client",
+            name: "get_weather",
+            description: "Get current weather",
+            input_schema: {
+                type: "object",
+                properties: {location: {type: "string"}},
+                required: ["location"],
+            },
+            permission: "ask",
+        })
+        // gateway-slug function tool + already-typed tool pass through unchanged
+        expect(tools[1]).toEqual(gateway)
+        expect(tools[2]).toEqual(builtinTyped)
+    })
+
     it("drops answer-less assistant turns from the sent history (keeps user + real answers)", async () => {
         seed(store, "e", {})
         const msgs = [
diff --git a/web/packages/agenta-ui/src/components/presentational/index.ts b/web/packages/agenta-ui/src/components/presentational/index.ts
index b5a999e02f..c01137b62c 100644
--- a/web/packages/agenta-ui/src/components/presentational/index.ts
+++ b/web/packages/agenta-ui/src/components/presentational/index.ts
@@ -61,11 +61,13 @@ export {
     SectionLabel,
     ConfigBlock,
     SectionSkeleton,
+    ConfigAccordionSection,
     type SectionCardProps,
     type SectionHeaderRowProps,
     type SectionLabelProps,
     type ConfigBlockProps,
     type SectionSkeletonProps,
+    type ConfigAccordionSectionProps,
 } from "./section"
 
 // ============================================================================
diff --git a/web/packages/agenta-ui/src/components/presentational/section/ConfigAccordionSection.tsx b/web/packages/agenta-ui/src/components/presentational/section/ConfigAccordionSection.tsx
new file mode 100644
index 0000000000..b88557c04f
--- /dev/null
+++ b/web/packages/agenta-ui/src/components/presentational/section/ConfigAccordionSection.tsx
@@ -0,0 +1,179 @@
+/**
+ * ConfigAccordionSection
+ *
+ * A collapsible section used to compose accordion-style configuration panels — the
+ * agent playground config panel today, and other config surfaces as the pattern rolls
+ * out. The header shows an icon + title on the left and a collapsed-state summary +
+ * chevron on the right; the body collapses smoothly via {@link HeightCollapse}.
+ *
+ * Sections can be **availability-gated**: pass `locked` (with an optional `lockedReason`)
+ * when a capability is not supported in the current context (e.g. an MCP section locked
+ * because the selected harness can't host MCP servers). A locked section can't be
+ * expanded and renders a lock affordance instead of the chevron.
+ *
+ * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ *
+ * @example
+ * ```tsx
+ * <ConfigAccordionSection
+ *   icon={<Cpu />}
+ *   title="Model & harness"
+ *   summary="Claude Code · Claude Sonnet 4.5"
+ *   defaultOpen
+ * >
+ *   <HarnessSelect />
+ *   <ModelSelect />
+ * </ConfigAccordionSection>
+ * ```
+ */
+import {type ReactNode, useCallback, useState} from "react"
+
+import {CaretDown, CaretRight, Lock} from "@phosphor-icons/react"
+import {Tooltip, Typography} from "antd"
+
+import {cn} from "../../../utils/styles"
+import {HeightCollapse} from "../../HeightCollapse"
+
+const {Text} = Typography
+
+export interface ConfigAccordionSectionProps {
+    /** Section title shown in the header. */
+    title: ReactNode
+    /** Leading icon shown before the title. */
+    icon?: ReactNode
+    /**
+     * Collapsed-state preview shown on the right of the header (e.g.
+     * "Claude Code · Sonnet 4.5", "3 tools"). Stays visible while expanded so the
+     * header always reflects the current value.
+     */
+    summary?: ReactNode
+    /** Header-right content rendered before the chevron (e.g. an enable toggle). */
+    extra?: ReactNode
+    /** Controlled open state. Provide together with `onOpenChange`. */
+    open?: boolean
+    /** Initial open state when uncontrolled. @default true */
+    defaultOpen?: boolean
+    /** Called when the user toggles the section. */
+    onOpenChange?: (open: boolean) => void
+    /** When true the section can't be expanded and shows a lock affordance. */
+    locked?: boolean
+    /** Explanation shown in a tooltip on the lock affordance. */
+    lockedReason?: ReactNode
+    /** Drop the bottom divider (e.g. for the last section in a panel). */
+    noDivider?: boolean
+    /**
+     * When false the section stays open with no collapse affordance (used by the "cards"
+     * layout). @default true
+     */
+    collapsible?: boolean
+    /** Additional CSS class for the section wrapper. */
+    className?: string
+    /** Section body. */
+    children?: ReactNode
+}
+
+/**
+ * A single collapsible section for accordion-style config panels.
+ */
+export function ConfigAccordionSection({
+    title,
+    icon,
+    summary,
+    extra,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    collapsible = true,
+    locked = false,
+    lockedReason,
+    noDivider = false,
+    className,
+    children,
+}: ConfigAccordionSectionProps) {
+    const isControlled = open !== undefined
+    const [internalOpen, setInternalOpen] = useState(defaultOpen)
+    // Non-collapsible sections (e.g. the "cards" layout) stay open; locked sections stay shut.
+    const isOpen = !locked && (collapsible ? (isControlled ? open : internalOpen) : true)
+    const canToggle = collapsible && !locked
+
+    const toggle = useCallback(() => {
+        if (!canToggle) return
+        const next = !isOpen
+        if (!isControlled) setInternalOpen(next)
+        onOpenChange?.(next)
+    }, [canToggle, isOpen, isControlled, onOpenChange])
+
+    return (
+        <div
+            className={cn(
+                "flex flex-col",
+                !noDivider && "border-0 border-b border-solid border-[var(--ag-c-EAEFF5,#eaeff5)]",
+                className,
+            )}
+        >
+            <div
+                role={canToggle ? "button" : undefined}
+                aria-expanded={collapsible ? isOpen : undefined}
+                aria-disabled={locked || undefined}
+                tabIndex={canToggle ? 0 : undefined}
+                onClick={canToggle ? toggle : undefined}
+                onKeyDown={(e) => {
+                    if (!canToggle) return
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault()
+                        toggle()
+                    }
+                }}
+                className={cn(
+                    "flex items-center justify-between gap-2 py-3 select-none",
+                    locked && "cursor-not-allowed opacity-60",
+                    canToggle && "cursor-pointer",
+                )}
+            >
+                <div className="flex min-w-0 items-center gap-2">
+                    {icon ? (
+                        <span className="flex shrink-0 items-center text-[var(--ag-c-586673,#586673)]">
+                            {icon}
+                        </span>
+                    ) : null}
+                    <Text className="truncate text-sm font-medium">{title}</Text>
+                </div>
+
+                <div className="flex shrink-0 items-center gap-2">
+                    {summary ? (
+                        <Text
+                            type="secondary"
+                            className="max-w-[220px] truncate text-right text-xs"
+                        >
+                            {summary}
+                        </Text>
+                    ) : null}
+                    {extra ? (
+                        <span
+                            onClick={(e) => e.stopPropagation()}
+                            onKeyDown={(e) => e.stopPropagation()}
+                            onKeyUp={(e) => e.stopPropagation()}
+                        >
+                            {extra}
+                        </span>
+                    ) : null}
+                    {locked ? (
+                        <Tooltip title={lockedReason}>
+                            <Lock size={14} className="text-[var(--ag-c-97A4B0,#97a4b0)]" />
+                        </Tooltip>
+                    ) : collapsible ? (
+                        isOpen ? (
+                            <CaretDown size={14} className="text-[var(--ag-c-97A4B0,#97a4b0)]" />
+                        ) : (
+                            <CaretRight size={14} className="text-[var(--ag-c-97A4B0,#97a4b0)]" />
+                        )
+                    ) : null}
+                </div>
+            </div>
+
+            <HeightCollapse open={isOpen}>
+                <div className="flex flex-col gap-3 pb-4">{children}</div>
+            </HeightCollapse>
+        </div>
+    )
+}
diff --git a/web/packages/agenta-ui/src/components/presentational/section/index.tsx b/web/packages/agenta-ui/src/components/presentational/section/index.tsx
index 92346b42eb..eed77ed8e6 100644
--- a/web/packages/agenta-ui/src/components/presentational/section/index.tsx
+++ b/web/packages/agenta-ui/src/components/presentational/section/index.tsx
@@ -168,3 +168,5 @@ export function SectionSkeleton({lines = 4}: SectionSkeletonProps) {
         </SectionCard>
     )
 }
+
+export {ConfigAccordionSection, type ConfigAccordionSectionProps} from "./ConfigAccordionSection"
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 5bb5c50940..b22658a164 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -956,6 +956,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      fflate:
+        specifier: 0.4.8
+        version: 0.4.8
       immer:
         specifier: '>=10.0.0'
         version: 10.2.0