fix(frontend): make the playground panels meet the divider and shrink cleanly

The config and chat panels were separated by a 12px dark channel, and
neither header reached it. The config panel's sticky headers also
stopped short of the panel edge once the scrollbar gutter was reserved.

- The Build/Chat divider is a hairline in the shell's frame colour, so
  both panels butt against it. The grab zone stays 11px wide and the
  grip only appears on hover or drag.
- Sticky headers stretch across the reserved scrollbar gutter, so they
  span the panel edge to edge. The gutter width is measured, since it is
  zero on overlay-scrollbar systems.
- The chat panel gets the same quiet scrollbar as the config panel.
- Below 320px the config panel drops what it can spare: Configuration
  becomes Config, Deploy and Commit become icon buttons, section rows
  keep their icon and summary, and list rows keep their name. It can now
  be dragged down to 240px.

Author: mmabrouk

web/oss/src/components/Playground/Components/MainLayout/index.tsx

@@ -22,6 +22,7 @@ import {chatPanelMaximizedAtom} from "@/oss/components/AgentChatSlice/state/pane
 // Direct file import — the SessionInspector barrel would statically pull the (dynamic,
 // open-on-demand) inspector drawer back into this chunk.
 import PanelSessionInspectorButton from "@/oss/components/SessionInspector/PanelSessionInspectorButton"
+import {useScrollbarGutterVar} from "@/oss/hooks/useScrollbarGutterVar"
 import {routerAppIdAtom} from "@/oss/state/app/selectors/app"
 import {playgroundEarlyAgentStateAtom} from "@/oss/state/workflow"
 
@@ -268,9 +269,10 @@ const PlaygroundMainView = ({
     const animateSplit = justToggled || holdAnimate
 
     const variantRefs = useRef<(HTMLDivElement | null)[]>([])
-    const {setConfigPanelRef, setGenerationPanelRef} = usePlaygroundScrollSync({
+    const {configPanelRef, setConfigPanelRef, setGenerationPanelRef} = usePlaygroundScrollSync({
         enabled: isComparisonView,
     })
+    useScrollbarGutterVar(configPanelRef)
 
     const handleAddRunnable = useCallback(async () => {
         const selection = await openEntitySelector({
@@ -365,7 +367,10 @@ const PlaygroundMainView = ({
                     <SplitterPanel
                         defaultSize={configDefaultSize}
                         size={configCollapsed ? 0 : undefined}
-                        min="20%"
+                        // Agent config collapses to icon + summary rows below 320px (see the
+                        // `config` container query in globals.css), so it can go much narrower
+                        // than the percentage floor the prompt playground needs.
+                        min={isAgentConfig ? 240 : "20%"}
                         max={configMaxSize}
                         className="!h-full"
                         collapsible={splitCollapsible}
@@ -375,16 +380,19 @@ const PlaygroundMainView = ({
                             The notice lives OUTSIDE the scroller, so it sits at the pane's bottom
                             edge regardless of content height or scroll position. */}
                         <div
-                            className={clsx("flex h-full min-h-0 w-full flex-col", {
-                                // Config = the raised authoring surface (covers the notice too).
-                                "ag-panel-raised": isAgentConfig,
-                            })}
+                            className={clsx(
+                                "@container/config flex h-full min-h-0 w-full flex-col",
+                                {
+                                    // Config = the raised authoring surface (covers the notice too).
+                                    "ag-panel-raised": isAgentConfig,
+                                },
+                            )}
                         >
                             <section
                                 ref={setConfigPanelRef}
                                 className={clsx([
                                     {
-                                        "ag-scroll-quiet grow w-full min-h-0 overflow-y-auto":
+                                        "ag-scroll-quiet ag-scroll-bleed grow w-full min-h-0 overflow-y-auto":
                                             !isComparisonView,
                                         "grow w-full min-h-0 overflow-x-auto flex [&::-webkit-scrollbar]:w-0":
                                             isComparisonView,
@@ -457,7 +465,7 @@ const PlaygroundMainView = ({
                             className={clsx([
                                 "playground-generation",
                                 {
-                                    "grow w-full h-full overflow-y-auto overflow-x-hidden":
+                                    "ag-scroll-quiet grow w-full h-full overflow-y-auto overflow-x-hidden":
                                         !isComparisonView,
                                     "grow w-full h-full overflow-auto [&::-webkit-scrollbar]:w-0":
                                         isComparisonView,

web/oss/src/components/Playground/Components/PlaygroundVariantConfig/assets/PlaygroundVariantConfigHeader.tsx

@@ -203,8 +203,10 @@ const PlaygroundVariantConfigHeader = ({
                     // agent name), so this bar reads as the config panel's "Configuration" header.
                     // Also the neutral header while agent-ness is unknown, so the prompt chrome below
                     // never flashes on load for an agent.
+                    // "Configuration" shortens to "Config" once the panel is too narrow for it.
                     <span className="text-[13px] font-semibold text-[var(--ant-color-text)]">
-                        Configuration
+                        <span className="ag-config-title-long">Configuration</span>
+                        <span className="ag-config-title-short">Config</span>
                     </span>
                 ) : (
                     <>
@@ -267,7 +269,7 @@ const PlaygroundVariantConfigHeader = ({
                     </>
                 )}
             </div>
-            <div className="flex items-center justify-end gap-2 shrink-0 grow min-w-0">
+            <div className="ag-config-actions flex items-center justify-end gap-2 shrink-0 grow min-w-0">
                 {extraActions}
                 {hasPresets && onLoadPreset && (
                     <Button size="small" onClick={onLoadPreset}>

web/oss/src/hooks/useScrollbarGutterVar.ts

@@ -0,0 +1,27 @@
+import {useEffect} from "react"
+
+/**
+ * Publishes a scroll container's reserved scrollbar gutter as `--ag-scroll-gutter` on the
+ * element itself. The width is platform-dependent (0 on overlay-scrollbar systems), so it
+ * has to be measured rather than assumed. Pairs with the `.ag-scroll-bleed` rule, which
+ * lets full-width rows stretch across the gutter instead of stopping short of it.
+ */
+export const useScrollbarGutterVar = (element: HTMLElement | null) => {
+    useEffect(() => {
+        if (!element) return
+
+        const sync = () => {
+            const gutter = element.offsetWidth - element.clientWidth
+            element.style.setProperty("--ag-scroll-gutter", `${gutter}px`)
+        }
+
+        sync()
+
+        const observer = new ResizeObserver(sync)
+        observer.observe(element)
+
+        return () => observer.disconnect()
+    }, [element])
+}
+
+export default useScrollbarGutterVar

web/oss/src/styles/globals.css

@@ -155,23 +155,38 @@ body {
     opacity: 0.4 !important;
 }
 
-/* Agent playground: the collapse pill is disabled (Build/Chat switch lives in the header), so the
-   drag handle is the ONLY resize affordance and must be discoverable on its own. Render a persistent
-   centered grip on the divider — neutral at rest, then an accent TINT + taller on hover/drag — so it
-   reads as a draggable handle without turning into a loud bar. Geometry is fully specified so it
-   doesn't depend on antd's default pseudo-element placement. */
+/* Agent playground: the divider between Config and Chat is a hairline in the app's frame colour,
+   so both panels butt straight against it and their headers read as one row. The bar itself stays
+   1px; the dragger overhangs it to give a comfortable grab zone without widening the seam. */
+.playground-splitter-agent > .ant-splitter-bar {
+    background: var(--ag-shell-line) !important;
+    flex-basis: 1px !important;
+    width: 1px !important;
+    overflow: visible !important;
+}
+.playground-splitter-agent .ant-splitter-bar-dragger {
+    position: absolute !important;
+    left: 50% !important;
+    right: auto !important;
+    width: 11px !important;
+    transform: translateX(-50%) !important;
+    background: transparent !important;
+}
+/* Rest: the seam is just the bar. Hover and drag brighten it and float a short grip on it, so the
+   resize affordance shows up exactly when the pointer is there and stays invisible otherwise. */
 .playground-splitter-agent .ant-splitter-bar-dragger::before {
     content: "" !important;
     position: absolute !important;
     top: 0 !important;
     bottom: 0 !important;
     left: 50% !important;
     right: auto !important;
-    width: 2px !important;
+    width: 1px !important;
     height: auto !important;
     border-radius: 0 !important;
     transform: translateX(-50%) !important;
-    background: var(--ag-colorBorderSecondary) !important;
+    background: transparent !important;
+    transition: background 150ms ease;
 }
 .playground-splitter-agent .ant-splitter-bar-dragger::after {
     content: "" !important;
@@ -180,22 +195,16 @@ body {
     bottom: auto !important;
     left: 50% !important;
     right: auto !important;
-    width: 4px !important;
-    height: 24px !important;
+    width: 3px !important;
+    height: 28px !important;
     border-radius: 9999px !important;
     transform: translate(-50%, -50%) !important;
     background: var(--ag-colorTextTertiary) !important;
+    opacity: 0 !important;
     transition:
-        background 150ms ease,
         opacity 150ms ease,
-        height 150ms ease;
-}
-/* Hover + active: the full-height DIVIDER only strengthens to a neutral border tone — a long line in
-   the accent colour reads as too loud. The small GRIP takes the accent (`colorPrimary`), softened to a
-   TINT via opacity so it stays a clear-but-quiet handle in both themes (the tinted-primary border
-   token blended into the dark divider; the full colour was too strong). `:not(-active)` mirrors the
-   base `.playground-splitter` hover rule's specificity so we win the tie by source order — otherwise
-   that base rule would swap the divider to a faint fill on hover (the fade). */
+        background 150ms ease;
+}
 .playground-splitter-agent
     .ant-splitter-bar-dragger:hover:not(.ant-splitter-bar-dragger-active)::before,
 .playground-splitter-agent .ant-splitter-bar-dragger-active::before {
@@ -204,18 +213,10 @@ body {
 .playground-splitter-agent
     .ant-splitter-bar-dragger:hover:not(.ant-splitter-bar-dragger-active)::after,
 .playground-splitter-agent .ant-splitter-bar-dragger-active::after {
-    height: 36px !important;
-    background: var(--ag-colorPrimary) !important;
-    opacity: 0.7 !important;
+    opacity: 1 !important;
 }
-/* Agent playground: the divider is the GUTTER between the raised Config panel and the recessed
-   Chat canvas — a real ~12px channel (not a hairline) that says "two workspaces". Widen the bar and
-   tint it the near-black/soft-grey gutter tone; the grip pseudo-elements above still read as the
-   handle. */
-.playground-splitter-agent > .ant-splitter-bar {
-    background: var(--ag-surface-gutter) !important;
-    flex-basis: 12px !important;
-    width: 12px !important;
+.playground-splitter-agent .ant-splitter-bar-dragger-active::after {
+    background: var(--ag-colorPrimary) !important;
 }
 
 /* ── Agent Playground surface classes ──────────────────────────────────────────────────────────
@@ -936,3 +937,59 @@ body {
 .ag-scroll-quiet::-webkit-scrollbar-thumb:hover {
     background-color: var(--ag-scroll-thumb-hover);
 }
+
+/* Full-bleed rows inside a quiet scroller. Sticky headers must span the panel edge to edge,
+   but the reserved gutter cuts them short, so let the scroller's children stretch across it
+   and have the thumb overlay them. The gutter width is measured (it is platform-dependent,
+   and zero on overlay-scrollbar systems) and published as --ag-scroll-gutter by
+   useScrollbarGutterVar. */
+.ag-scroll-bleed {
+    overflow-x: hidden;
+}
+
+.ag-scroll-bleed > * {
+    width: calc(100% + var(--ag-scroll-gutter, 0px));
+    margin-inline-end: calc(-1 * var(--ag-scroll-gutter, 0px));
+}
+
+/* Narrow agent config panel. The `config` container is declared on the config pane
+   (`@container/config` in MainLayout), so these rules only fire for the panel and never for
+   the same components elsewhere. Below 320px the panel drops every label it can spare and
+   keeps the icons and the values, so it stays readable while the user drags it small. */
+.ag-config-title-short {
+    display: none;
+}
+
+@container config (max-width: 320px) {
+    .ag-config-title-long {
+        display: none;
+    }
+
+    .ag-config-title-short {
+        display: inline;
+    }
+
+    /* Section rows keep the leading icon and the right-hand summary (the harness and model
+       stay visible); only the title drops out. */
+    .ag-section-title {
+        display: none;
+    }
+
+    /* Deploy and Commit become icon buttons. antd renders the label as a bare text node next
+       to the icon span, so zeroing the button's font size is the only way to drop the text
+       without changing every call site. The accessible name stays in the DOM. */
+    .ag-config-actions .ant-btn {
+        gap: 0;
+        font-size: 0;
+    }
+
+    .ag-config-actions .ant-btn .ant-btn-icon {
+        font-size: 14px;
+    }
+
+    /* List rows (tools, MCP servers) drop their second line and their transport tag, so the
+       name itself survives instead of truncating to two characters. */
+    .ag-row-secondary {
+        display: none;
+    }
+}

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

@@ -125,7 +125,7 @@ export function ItemRow({
                 {descriptor.description ? (
                     <Typography.Text
                         type="secondary"
-                        className="block truncate text-xs leading-tight"
+                        className="ag-row-secondary block truncate text-xs leading-tight"
                     >
                         {descriptor.description}
                     </Typography.Text>
@@ -134,7 +134,7 @@ export function ItemRow({
             <div className="flex shrink-0 items-center gap-1.5">
                 {status ? <StatusTag status={status} /> : null}
                 {descriptor.tags.map((tag) => (
-                    <Tag key={tag} className="m-0 text-[11px]">
+                    <Tag key={tag} className="ag-row-secondary m-0 text-[11px]">
                         {tag}
                     </Tag>
                 ))}
@@ -283,7 +283,10 @@ export function InstructionsFileRow({
                     <span className="truncate font-mono text-[13px] font-medium leading-tight">
                         {filename}
                     </span>
-                    <Typography.Text type="secondary" className="shrink-0 text-[11px]">
+                    <Typography.Text
+                        type="secondary"
+                        className="ag-row-secondary shrink-0 text-[11px]"
+                    >
                         {meta}
                     </Typography.Text>
                     {status ? <StatusTag status={status} /> : null}

web/packages/agenta-ui/src/components/presentational/section/ConfigAccordionSection.tsx

@@ -271,7 +271,9 @@ export function ConfigAccordionSection({
                     ) : null}
                     <Text
                         className={cn(
-                            "min-w-0 truncate font-medium",
+                            // `ag-section-title` is a hook for narrow layouts that drop the title
+                            // and keep the icon + summary (see the `config` container query).
+                            "ag-section-title min-w-0 truncate font-medium",
                             size === "compact" ? "text-xs" : "text-sm",
                         )}
                     >