fix(frontend): stop role-alignment inset stacking with comparison cell padding

The comparison view renders messages with their own editor padding (!p-3
cells). The role-alignment inset added by ChatMessageEditor stacked on top of
that, over-padding the message text, and the assistant output cell also
double-padded (the [&_.agenta-editor-wrapper]:!p-3 hack plus editorClassName).

Add an alignTextWithRole prop (default true) to ChatMessageEditor; the
comparison view passes false so the inset and role pin are skipped there.
Remove the leftover wrapper-padding hack so the comparison cells pad the editor
once, via editorClassName.

Author: mmabrouk

web/packages/agenta-playground-ui/src/components/ExecutionItemComparisonView/GenerationComparisonChatOutput/index.tsx

@@ -151,11 +151,14 @@ const GenerationComparisonChatOutputCell = ({
                                 }}
                                 messageProps={{
                                     className: "!p-0 !mt-0 [&:nth-child(1)]:!mt-0 mt-2",
-                                    // Editor body padding now goes through the
-                                    // editorClassName prop (works after the noProvider
-                                    // className fix), replacing the previous
+                                    // Comparison cells set their own editor padding via
+                                    // editorClassName (works after the noProvider className
+                                    // fix), replacing the previous
                                     // `[&_.agenta-editor-wrapper]:!p-3` container hack.
+                                    // alignTextWithRole is off so the role-alignment inset
+                                    // does not stack on top of this padding.
                                     editorClassName: "!p-3",
+                                    alignTextWithRole: false,
                                     headerClassName:
                                         "min-h-[48px] px-2 border-0 border-b border-solid border-[var(--ag-rgba-051729-06)]",
                                     footerClassName: "px-2",
@@ -201,9 +204,14 @@ const GenerationComparisonChatOutputCell = ({
                         withControls={false}
                         hideUserMessage
                         messageProps={{
-                            className:
-                                "!p-0 [&_.agenta-editor-wrapper]:!p-3 !mt-0 [&:nth-child(1)]:!mt-0 mt-2",
+                            // Padding via editorClassName only (the
+                            // [&_.agenta-editor-wrapper]:!p-3 hack is removed so it does
+                            // not double up now that editorClassName works), and
+                            // alignTextWithRole off so the role-alignment inset does not
+                            // stack on top.
+                            className: "!p-0 !mt-0 [&:nth-child(1)]:!mt-0 mt-2",
                             editorClassName: "!p-3",
+                            alignTextWithRole: false,
                             headerClassName:
                                 "min-h-[48px] border-0 border-b border-solid border-[var(--ag-rgba-051729-06)]",
                             footerClassName: "px-2 !m-0",

web/packages/agenta-ui/src/ChatMessage/components/ChatMessageEditor.tsx

@@ -74,6 +74,14 @@ export interface ChatMessageEditorProps {
      * up via an internal synchronizer mounted inside the EditorProvider.
      */
     markdownView?: boolean
+    /**
+     * Inset the message text + placeholder so they line up with the role label
+     * above (the default tight message layout). Set to false for surfaces that
+     * apply their own editor padding (e.g. the comparison view's `!p-3` cells),
+     * where the alignment inset would stack on top and over-pad the text.
+     * @default true
+     */
+    alignTextWithRole?: boolean
 }
 
 /**
@@ -134,6 +142,7 @@ const ChatMessageEditorInner: React.FC<ChatMessageEditorProps> = ({
     onFocusChange,
     maxPasteChars = DEFAULT_MAX_TEXT_PASTE_CHARS,
     onPasteLimitExceeded,
+    alignTextWithRole = true,
     ...props
 }) => {
     const selectOptions = useMemo(
@@ -215,18 +224,20 @@ const ChatMessageEditorInner: React.FC<ChatMessageEditorProps> = ({
             // prop) now that the noProvider className bug is fixed. Code editors
             // (JSON/tool) keep their own gutter, so they are excluded via
             // `:not(.code-only)`. The role label is an antd button outside the
-            // editor and is aligned via the scoped rule in globals.css.
+            // editor and is aligned via the `.agenta-chat-message-editor` rule in
+            // globals.css. Both are skipped when alignTextWithRole is false (e.g.
+            // the comparison view, which applies its own editor padding).
             editorClassName={cn(
-                "[&_.editor-input:not(.code-only)]:px-2 [&_.editor-placeholder]:left-2",
+                alignTextWithRole &&
+                    "[&_.editor-input:not(.code-only)]:px-2 [&_.editor-placeholder]:left-2",
                 editorClassName,
             )}
             placeholder={placeholder}
             disabled={disabled}
             state={disabled ? "readOnly" : state}
-            // `agenta-chat-message-editor` scopes the role-label alignment rule in
-            // globals.css (the role is an antd button, not part of the editor).
             className={cn(
-                "agenta-chat-message-editor relative",
+                alignTextWithRole && "agenta-chat-message-editor",
+                "relative",
                 flexLayouts.column,
                 gapClasses.xs,
                 "rounded-md",