revert(frontend): restore the playground divider and drop the narrow-panel collapse

Keeps only the sticky-header fix from the previous commit: config panel
headers still span the panel edge to edge across the reserved scrollbar
gutter.

Restored: the 12px gutter divider with its persistent grip, the 20%
minimum config width, and the full labels on section rows, list rows and
the Deploy/Commit buttons.

Author: mmabrouk

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

@@ -367,10 +367,7 @@ const PlaygroundMainView = ({
                     <SplitterPanel
                         defaultSize={configDefaultSize}
                         size={configCollapsed ? 0 : undefined}
-                        // 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%"}
+                        min="20%"
                         max={configMaxSize}
                         className="!h-full"
                         collapsible={splitCollapsible}
@@ -380,13 +377,10 @@ 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(
-                                "@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,
-                                },
-                            )}
+                            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,
+                            })}
                         >
                             <section
                                 ref={setConfigPanelRef}

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

@@ -203,10 +203,8 @@ 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)]">
-                        <span className="ag-config-title-long">Configuration</span>
-                        <span className="ag-config-title-short">Config</span>
+                        Configuration
                     </span>
                 ) : (
                     <>
@@ -269,7 +267,7 @@ const PlaygroundVariantConfigHeader = ({
                     </>
                 )}
             </div>
-            <div className="ag-config-actions flex items-center justify-end gap-2 shrink-0 grow min-w-0">
+            <div className="flex items-center justify-end gap-2 shrink-0 grow min-w-0">
                 {extraActions}
                 {hasPresets && onLoadPreset && (
                     <Button size="small" onClick={onLoadPreset}>

web/oss/src/styles/globals.css

@@ -155,38 +155,23 @@ body {
     opacity: 0.4 !important;
 }
 
-/* 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. */
+/* 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. */
 .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: 1px !important;
+    width: 2px !important;
     height: auto !important;
     border-radius: 0 !important;
     transform: translateX(-50%) !important;
-    background: transparent !important;
-    transition: background 150ms ease;
+    background: var(--ag-colorBorderSecondary) !important;
 }
 .playground-splitter-agent .ant-splitter-bar-dragger::after {
     content: "" !important;
@@ -195,16 +180,22 @@ body {
     bottom: auto !important;
     left: 50% !important;
     right: auto !important;
-    width: 3px !important;
-    height: 28px !important;
+    width: 4px !important;
+    height: 24px !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,
-        background 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). */
 .playground-splitter-agent
     .ant-splitter-bar-dragger:hover:not(.ant-splitter-bar-dragger-active)::before,
 .playground-splitter-agent .ant-splitter-bar-dragger-active::before {
@@ -213,10 +204,18 @@ 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 {
-    opacity: 1 !important;
-}
-.playground-splitter-agent .ant-splitter-bar-dragger-active::after {
+    height: 36px !important;
     background: var(--ag-colorPrimary) !important;
+    opacity: 0.7 !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;
 }
 
 /* ── Agent Playground surface classes ──────────────────────────────────────────────────────────
@@ -951,45 +950,3 @@ body {
     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="ag-row-secondary block truncate text-xs leading-tight"
+                        className="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="ag-row-secondary m-0 text-[11px]">
+                    <Tag key={tag} className="m-0 text-[11px]">
                         {tag}
                     </Tag>
                 ))}
@@ -283,10 +283,7 @@ export function InstructionsFileRow({
                     <span className="truncate font-mono text-[13px] font-medium leading-tight">
                         {filename}
                     </span>
-                    <Typography.Text
-                        type="secondary"
-                        className="ag-row-secondary shrink-0 text-[11px]"
-                    >
+                    <Typography.Text type="secondary" className="shrink-0 text-[11px]">
                         {meta}
                     </Typography.Text>
                     {status ? <StatusTag status={status} /> : null}

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

@@ -271,9 +271,7 @@ export function ConfigAccordionSection({
                     ) : null}
                     <Text
                         className={cn(
-                            // `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",
+                            "min-w-0 truncate font-medium",
                             size === "compact" ? "text-xs" : "text-sm",
                         )}
                     >