From a332291310036eae97246617f1e2cb1126b00c03 Mon Sep 17 00:00:00 2001
From: Juan Pablo Vega <jp@agenta.ai>
Date: Mon, 15 Jun 2026 22:01:26 +0200
Subject: [PATCH 1/3] feat(frontend): collapse playground tool spec cards by
 default

Tool spec cards rendered expanded and, when collapsed, still showed a 3-line
JSON peek. Default them to collapsed and size the collapsed height to the
header only (title + optional description), so no JSON shows until expanded.
Collapsed height is dynamic since not every tool has a description.
---
 .../SchemaControls/PromptSchemaControl.tsx    |   4 +-
 .../SchemaControls/ToolItemControl.tsx        | 138 ++++++++----------
 .../components/ChatMessageList.tsx            | 100 +++++++------
 3 files changed, 121 insertions(+), 121 deletions(-)

diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/PromptSchemaControl.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/PromptSchemaControl.tsx
index e93a523e70..130f580648 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/PromptSchemaControl.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/PromptSchemaControl.tsx
@@ -494,7 +494,7 @@ export const PromptSchemaControl = memo(function PromptSchemaControl({
     }
 
     return (
-        <div className={cn("flex flex-col gap-3", className)}>
+        <div className={cn("flex flex-col gap-2", className)}>
             {/* Messages list */}
             <ChatMessageList
                 messages={messages}
@@ -541,6 +541,8 @@ export const PromptSchemaControl = memo(function PromptSchemaControl({
                                 showToolbar={false}
                                 enableTokens={false}
                                 id={`tool-editor-${index}`}
+                                // Drop the wrapper's min-h-[70px] so it hugs collapsed cards.
+                                className="!min-h-0"
                             >
                                 {toolControl}
                             </EditorProvider>
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 205bb21c85..7d1e3f4b3c 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx
@@ -19,7 +19,7 @@
 import {memo, useCallback, useEffect, useMemo, useRef, useState} from "react"
 
 import {safeStringify} from "@agenta/shared/utils"
-import {CollapseToggleButton, getCollapseStyle} from "@agenta/ui/components/presentational"
+import {CollapseToggleButton} from "@agenta/ui/components/presentational"
 import {useDrillInUI} from "@agenta/ui/drill-in"
 import {getProviderIcon} from "@agenta/ui/select-llm-provider"
 import {CopySimple, MinusCircle} from "@phosphor-icons/react"
@@ -256,7 +256,6 @@ interface ToolHeaderProps {
     builtinToolLabel?: string
     builtinIcon?: React.ReactNode
     gatewayHeader?: React.ReactNode
-    containerRef?: React.RefObject<HTMLElement | null>
 }
 
 function GatewayToolHeaderIdentity({
@@ -344,11 +343,10 @@ const ToolHeader = memo(function ToolHeader({
     builtinToolLabel,
     builtinIcon,
     gatewayHeader,
-    containerRef,
 }: ToolHeaderProps) {
     return (
         <div className="w-full flex items-start justify-between py-1">
-            <div className="grow min-w-0">
+            <div className="grow min-w-0 pl-2">
                 {gatewayHeader ? (
                     gatewayHeader
                 ) : isBuiltinTool ? (
@@ -391,31 +389,33 @@ const ToolHeader = memo(function ToolHeader({
                 )}
             </div>
 
-            <div className="flex items-center gap-1 invisible group-hover/tool:visible shrink-0">
-                {!isReadOnly && onDuplicate && (
-                    <Tooltip title="Duplicate">
-                        <Button
-                            icon={<CopySimple size={14} />}
-                            type="text"
-                            onClick={onDuplicate}
-                            size="small"
-                        />
-                    </Tooltip>
-                )}
-                {!isReadOnly && onDelete && (
-                    <Tooltip title="Remove">
-                        <Button
-                            icon={<MinusCircle size={14} />}
-                            type="text"
-                            onClick={onDelete}
-                            size="small"
-                        />
-                    </Tooltip>
-                )}
+            <div className="flex items-center gap-1 shrink-0">
+                <div className="flex items-center gap-1 invisible group-hover/tool:visible">
+                    {!isReadOnly && onDuplicate && (
+                        <Tooltip title="Duplicate">
+                            <Button
+                                icon={<CopySimple size={14} />}
+                                type="text"
+                                onClick={onDuplicate}
+                                size="small"
+                            />
+                        </Tooltip>
+                    )}
+                    {!isReadOnly && onDelete && (
+                        <Tooltip title="Remove">
+                            <Button
+                                icon={<MinusCircle size={14} />}
+                                type="text"
+                                onClick={onDelete}
+                                size="small"
+                            />
+                        </Tooltip>
+                    )}
+                </div>
                 <CollapseToggleButton
                     collapsed={minimized}
                     onToggle={onToggleMinimize}
-                    contentRef={containerRef}
+                    className="!transition-opacity !duration-0 !delay-200 group-hover/tool:!delay-0 opacity-50 group-hover/tool:opacity-100"
                 />
             </div>
         </div>
@@ -467,16 +467,8 @@ export const ToolItemControl = memo(function ToolItemControl({
     const effectiveRenderProviderIcon = renderProviderIcon ?? defaultRenderProviderIcon
 
     const isReadOnly = disabled
-    const [minimized, setMinimized] = useState(() => {
-        if (value && typeof value === "object" && !Array.isArray(value)) {
-            const obj = value as Record<string, unknown>
-            if (obj.agenta_metadata && typeof obj.agenta_metadata === "object") {
-                const meta = obj.agenta_metadata as Record<string, unknown>
-                return meta.source === "gateway" || meta.source === "builtin"
-            }
-        }
-        return false
-    })
+    // Default collapsed: tool cards open to just their title + description.
+    const [minimized, setMinimized] = useState(true)
     const containerRef = useRef<HTMLDivElement>(null)
 
     // Strip agenta_metadata if present (re-attach on change)
@@ -652,7 +644,6 @@ export const ToolItemControl = memo(function ToolItemControl({
                     builtinToolLabel={toolLabel}
                     builtinIcon={providerIcon}
                     gatewayHeader={gatewayHeader}
-                    containerRef={containerRef}
                 />
                 {!minimized && (
                     <textarea
@@ -666,10 +657,34 @@ export const ToolItemControl = memo(function ToolItemControl({
         )
     }
 
+    const toolFunction = (toolObj as Record<string, unknown>)?.function as
+        | Record<string, string>
+        | undefined
+    const header = (
+        <ToolHeader
+            name={toolFunction ? (toolFunction.name ?? "") : ""}
+            desc={toolFunction ? (toolFunction.description ?? "") : ""}
+            isReadOnly={isReadOnly}
+            minimized={minimized}
+            onToggleMinimize={() => setMinimized((v) => !v)}
+            onDelete={onDelete}
+            onDuplicate={onDuplicate}
+            isBuiltinTool={isBuiltinTool}
+            builtinProviderLabel={providerLabel}
+            builtinToolLabel={toolLabel}
+            builtinIcon={providerIcon}
+            gatewayHeader={gatewayHeader}
+            containerRef={containerRef}
+        />
+    )
+
+    // Collapsed = header only. Keep a SINGLE SharedEditor in both states (same
+    // border, padding and chrome — no fork, no pixel shift) and just hide the
+    // editor body when minimized. Header drives the height naturally, so it
+    // works for every header variant (title, title+desc, builtin icon row).
     return (
         <div
             ref={containerRef}
-            style={getCollapseStyle(minimized)}
             className={clsx("group/tool flex flex-col", "w-full max-w-full", className)}
         >
             <SharedEditor
@@ -689,43 +704,18 @@ export const ToolItemControl = memo(function ToolItemControl({
                 disableDebounce
                 syncWithInitialValueChanges
                 editorType="border"
-                className={clsx("group/tool")}
+                className={clsx(
+                    "group/tool",
+                    // Symmetric padding (codeOnly forces pt-0); zero the editor body's
+                    // own bottom margin/padding so open & closed end the same 11px below.
+                    "!pt-[11px] !pb-[11px] [&_.agenta-editor-wrapper]:!mb-0 [&_.editor-code]:!pb-0",
+                    // Indent the JSON body to align with the pl-2 header (cancel the
+                    // codeOnly -ml-[12px] pull, then add the 8px message-matched indent).
+                    "[&_.agenta-editor-wrapper]:!pl-[20px]",
+                    minimized && "[&_.agenta-editor-wrapper]:!hidden",
+                )}
                 state={isReadOnly ? "readOnly" : "filled"}
-                header={
-                    <ToolHeader
-                        name={
-                            (toolObj as Record<string, unknown>)?.function
-                                ? ((
-                                      (toolObj as Record<string, unknown>).function as Record<
-                                          string,
-                                          string
-                                      >
-                                  )?.name ?? "")
-                                : ""
-                        }
-                        desc={
-                            (toolObj as Record<string, unknown>)?.function
-                                ? ((
-                                      (toolObj as Record<string, unknown>).function as Record<
-                                          string,
-                                          string
-                                      >
-                                  )?.description ?? "")
-                                : ""
-                        }
-                        isReadOnly={isReadOnly}
-                        minimized={minimized}
-                        onToggleMinimize={() => setMinimized((v) => !v)}
-                        onDelete={onDelete}
-                        onDuplicate={onDuplicate}
-                        isBuiltinTool={isBuiltinTool}
-                        builtinProviderLabel={providerLabel}
-                        builtinToolLabel={toolLabel}
-                        builtinIcon={providerIcon}
-                        gatewayHeader={gatewayHeader}
-                        containerRef={containerRef}
-                    />
-                }
+                header={header}
             />
         </div>
     )
diff --git a/web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx b/web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx
index 78fe345545..b7b23ed7ac 100644
--- a/web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx
+++ b/web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx
@@ -14,7 +14,7 @@ import {Copy, MinusCircle, Plus} from "@phosphor-icons/react"
 import {Button, Tooltip} from "antd"
 import {useAtom} from "jotai"
 
-import {CollapseToggleButton, getCollapseStyle} from "../../components/presentational/buttons"
+import {CollapseToggleButton} from "../../components/presentational/buttons"
 import {ViewModeDropdown} from "../../drill-in/core/ViewModeDropdown"
 import {messageViewModeAtom} from "../../drill-in/state/messageViewModeAtom"
 import {getViewOptions, toMessageViewMode, type ViewMode} from "../../drill-in/utils/getViewOptions"
@@ -163,9 +163,16 @@ const ChatMessageItem: React.FC<{
 
     return (
         <div
-            className={cn(flexLayouts.column)}
+            className={cn(
+                flexLayouts.column,
+                // Collapsed = role row + one line of content, clipped vertically so
+                // formatting (indentation, markdown, JSON) is preserved instead of
+                // collapsed to a single run-on line. Height is a clean line-height
+                // multiple so it never bleeds a half-line.
+                isMinimized &&
+                    "[&_.agenta-editor-wrapper]:!max-h-[1lh] [&_.agenta-editor-wrapper]:overflow-hidden",
+            )}
             ref={containerRef}
-            style={getCollapseStyle(isMinimized, 72)}
         >
             <ChatMessageEditor
                 id={editorId}
@@ -194,54 +201,55 @@ const ChatMessageItem: React.FC<{
                     ) : undefined
                 }
                 headerRight={
-                    <div
-                        className={cn(
-                            flexLayouts.rowCenter,
-                            gapClasses.xs,
-                            "invisible group-hover/item:visible",
-                        )}
-                    >
-                        <ViewModeDropdown<ChatViewMode>
-                            value={chatViewMode}
-                            options={viewOptions}
-                            onChange={setViewMode}
-                        />
-                        {allowFileUpload && !disabled && (
-                            <AttachmentButton
-                                onAddImage={(url) => onAddImage(index, url)}
-                                onAddFile={(data, name, format) =>
-                                    onAddFile(index, data, name, format)
-                                }
-                                disabled={disabled}
+                    <div className={cn(flexLayouts.rowCenter, gapClasses.xs)}>
+                        <div
+                            className={cn(
+                                flexLayouts.rowCenter,
+                                gapClasses.xs,
+                                "invisible group-hover/item:visible",
+                            )}
+                        >
+                            <ViewModeDropdown<ChatViewMode>
+                                value={chatViewMode}
+                                options={viewOptions}
+                                onChange={setViewMode}
                             />
-                        )}
-                        {showCopyButton && (
-                            <Tooltip title="Copy">
-                                <Button
-                                    type="text"
-                                    size="small"
-                                    icon={<Copy size={14} />}
-                                    onClick={() => {
-                                        navigator.clipboard.writeText(textContent)
-                                    }}
-                                />
-                            </Tooltip>
-                        )}
-                        {(showRemoveButton ?? showControls) && !disabled && (
-                            <Tooltip title="Remove">
-                                <Button
-                                    type="text"
-                                    size="small"
-                                    icon={<MinusCircle size={14} />}
-                                    onClick={() => onRemove(index)}
+                            {allowFileUpload && !disabled && (
+                                <AttachmentButton
+                                    onAddImage={(url) => onAddImage(index, url)}
+                                    onAddFile={(data, name, format) =>
+                                        onAddFile(index, data, name, format)
+                                    }
+                                    disabled={disabled}
                                 />
-                            </Tooltip>
-                        )}
+                            )}
+                            {showCopyButton && (
+                                <Tooltip title="Copy">
+                                    <Button
+                                        type="text"
+                                        size="small"
+                                        icon={<Copy size={14} />}
+                                        onClick={() => {
+                                            navigator.clipboard.writeText(textContent)
+                                        }}
+                                    />
+                                </Tooltip>
+                            )}
+                            {(showRemoveButton ?? showControls) && !disabled && (
+                                <Tooltip title="Remove">
+                                    <Button
+                                        type="text"
+                                        size="small"
+                                        icon={<MinusCircle size={14} />}
+                                        onClick={() => onRemove(index)}
+                                    />
+                                </Tooltip>
+                            )}
+                        </div>
                         <CollapseToggleButton
                             collapsed={isMinimized}
                             onToggle={() => onToggleMinimize(index)}
-                            contentRef={containerRef}
-                            collapsedMaxHeight={48}
+                            className="!transition-opacity !duration-0 !delay-200 group-hover/item:!delay-0 opacity-50 group-hover/item:opacity-100"
                         />
                     </div>
                 }

From 2996486d9f8141ec5e5fe5f230c893e8ce3580d6 Mon Sep 17 00:00:00 2001
From: Juan Pablo Vega <jp@agenta.ai>
Date: Wed, 17 Jun 2026 16:10:46 +0200
Subject: [PATCH 2/3] fix(frontend): address review on collapse behavior

- Remove stray containerRef prop on ToolHeader (TS error).
- Collapsed chat messages: cancel editor min-h-[70px] and hide the
  attachments footer + tool header so a minimized message is one line.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../DrillInView/SchemaControls/ToolItemControl.tsx   |  6 +-----
 .../src/ChatMessage/components/ChatMessageList.tsx   | 12 +++++-------
 2 files changed, 6 insertions(+), 12 deletions(-)

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 7d1e3f4b3c..2b57e8eec1 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx
@@ -674,14 +674,10 @@ export const ToolItemControl = memo(function ToolItemControl({
             builtinToolLabel={toolLabel}
             builtinIcon={providerIcon}
             gatewayHeader={gatewayHeader}
-            containerRef={containerRef}
         />
     )
 
-    // Collapsed = header only. Keep a SINGLE SharedEditor in both states (same
-    // border, padding and chrome — no fork, no pixel shift) and just hide the
-    // editor body when minimized. Header drives the height naturally, so it
-    // works for every header variant (title, title+desc, builtin icon row).
+    // Single SharedEditor in both states; just hide the editor body when minimized.
     return (
         <div
             ref={containerRef}
diff --git a/web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx b/web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx
index b7b23ed7ac..bb18e6f59f 100644
--- a/web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx
+++ b/web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx
@@ -165,12 +165,10 @@ const ChatMessageItem: React.FC<{
         <div
             className={cn(
                 flexLayouts.column,
-                // Collapsed = role row + one line of content, clipped vertically so
-                // formatting (indentation, markdown, JSON) is preserved instead of
-                // collapsed to a single run-on line. Height is a clean line-height
-                // multiple so it never bleeds a half-line.
+                // Collapsed = role row + one clipped line; !min-h-0 cancels the
+                // editor wrapper's min-h-[70px] so it hugs that single line.
                 isMinimized &&
-                    "[&_.agenta-editor-wrapper]:!max-h-[1lh] [&_.agenta-editor-wrapper]:overflow-hidden",
+                    "[&_.agenta-editor-wrapper]:!max-h-[1lh] [&_.agenta-editor-wrapper]:overflow-hidden [&_.agenta-rich-text-editor]:!min-h-0",
             )}
             ref={containerRef}
         >
@@ -196,7 +194,7 @@ const ChatMessageItem: React.FC<{
                     handleCreateSnippetFromPaste({pastedText, maxPasteChars, overBy})
                 }
                 headerBottom={
-                    isToolResponse && (msg.name || msg.tool_call_id) ? (
+                    !isMinimized && isToolResponse && (msg.name || msg.tool_call_id) ? (
                         <ToolMessageHeader name={msg.name} toolCallId={msg.tool_call_id} />
                     ) : undefined
                 }
@@ -254,7 +252,7 @@ const ChatMessageItem: React.FC<{
                     </div>
                 }
                 footer={
-                    hasAttachmentsFlag ? (
+                    !isMinimized && hasAttachmentsFlag ? (
                         <MessageAttachments
                             content={msg.content!}
                             onRemove={(attachmentIndex) =>

From e41e0a3231149e702c4c2bec1832b910858a9198 Mon Sep 17 00:00:00 2001
From: Juan Pablo Vega <jp@agenta.ai>
Date: Wed, 17 Jun 2026 16:31:29 +0200
Subject: [PATCH 3/3] fix(frontend): restore animated chat-message collapse

Revert the CSS-class max-h-[1lh] clip back to getCollapseStyle inline
height animation (the established --editor-h contract); keep the
hover-reveal header actions.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ChatMessage/components/ChatMessageList.tsx    | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx b/web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx
index bb18e6f59f..25b044e221 100644
--- a/web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx
+++ b/web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx
@@ -14,7 +14,7 @@ import {Copy, MinusCircle, Plus} from "@phosphor-icons/react"
 import {Button, Tooltip} from "antd"
 import {useAtom} from "jotai"
 
-import {CollapseToggleButton} from "../../components/presentational/buttons"
+import {CollapseToggleButton, getCollapseStyle} from "../../components/presentational/buttons"
 import {ViewModeDropdown} from "../../drill-in/core/ViewModeDropdown"
 import {messageViewModeAtom} from "../../drill-in/state/messageViewModeAtom"
 import {getViewOptions, toMessageViewMode, type ViewMode} from "../../drill-in/utils/getViewOptions"
@@ -163,14 +163,9 @@ const ChatMessageItem: React.FC<{
 
     return (
         <div
-            className={cn(
-                flexLayouts.column,
-                // Collapsed = role row + one clipped line; !min-h-0 cancels the
-                // editor wrapper's min-h-[70px] so it hugs that single line.
-                isMinimized &&
-                    "[&_.agenta-editor-wrapper]:!max-h-[1lh] [&_.agenta-editor-wrapper]:overflow-hidden [&_.agenta-rich-text-editor]:!min-h-0",
-            )}
+            className={cn(flexLayouts.column)}
             ref={containerRef}
+            style={getCollapseStyle(isMinimized, 72)}
         >
             <ChatMessageEditor
                 id={editorId}
@@ -194,7 +189,7 @@ const ChatMessageItem: React.FC<{
                     handleCreateSnippetFromPaste({pastedText, maxPasteChars, overBy})
                 }
                 headerBottom={
-                    !isMinimized && isToolResponse && (msg.name || msg.tool_call_id) ? (
+                    isToolResponse && (msg.name || msg.tool_call_id) ? (
                         <ToolMessageHeader name={msg.name} toolCallId={msg.tool_call_id} />
                     ) : undefined
                 }
@@ -252,7 +247,7 @@ const ChatMessageItem: React.FC<{
                     </div>
                 }
                 footer={
-                    !isMinimized && hasAttachmentsFlag ? (
+                    hasAttachmentsFlag ? (
                         <MessageAttachments
                             content={msg.content!}
                             onRemove={(attachmentIndex) =>