fix(frontend): forward className in Editor noProvider mode and clean up workarounds

The shared Editor dropped `className`/`editorClassName` when rendered with
`noProvider` (it only applied the class on the EditorProvider path). Forward
it to EditorInner and apply it to the editor container in that mode too.

With the prop working, clean up the call sites that relied on the drop:
- ChatMessageEditor: move the message text/placeholder alignment from the
  globals.css workaround to editorClassName; globals.css now only carries the
  antd role-button override that cannot go through the prop.
- VariableControlAdapter: stop forwarding the generation-row container class as
  editorClassName (it is a container/cell-strip style that would strip the
  editor's border and gutter); it stays on the container only.
- GenerationComparisonChatOutput: pad the editor body via editorClassName
  instead of the [&_.agenta-editor-wrapper] container hack.

Author: mmabrouk

web/oss/src/styles/globals.css

@@ -206,28 +206,14 @@ body {
     }
 }
 
-/* Align the message text with the first character of the role label above it,
-   with the same symmetric horizontal inset on the role, the text, and the
-   placeholder. The single inset value lives in --ag-message-inline-pad.
-
-   Notes:
-   - The role label is an antd Button whose default padding is wider than the
-     inset (Tailwind's px-2 on it loses to antd), so it is pinned with !important.
-   - The text is padded here in CSS rather than via an editor prop because
-     ChatMessageEditor renders the Editor with `noProvider`, a mode where
-     `className`/`editorClassName` is currently dropped (known bug, tracked
-     separately). JSON/code editors are excluded; they have a line-number gutter. */
-.agenta-chat-message-editor {
-    --ag-message-inline-pad: 8px;
-}
+/* Align the role label's first character with the message text below it.
+   The message text and placeholder are inset 8px via ChatMessageEditor's
+   editorClassName prop; this rule pins the role label to the same 8px. The role
+   label is an antd Button whose default padding is wider than 8px and ignores
+   Tailwind's px-2, so the override needs !important. Scoped to the message
+   editor via the .agenta-chat-message-editor marker class. */
 .agenta-chat-message-editor .message-user-select {
-    padding-inline: var(--ag-message-inline-pad) !important;
-}
-.agenta-chat-message-editor .editor-input:not(.code-only) {
-    padding-inline: var(--ag-message-inline-pad);
-}
-.agenta-chat-message-editor .editor-placeholder {
-    left: var(--ag-message-inline-pad);
+    padding-inline: 8px !important;
 }
 
 /** Align the input search with the search box **/

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

@@ -150,8 +150,11 @@ const GenerationComparisonChatOutputCell = ({
                                     allowFileUpload: true,
                                 }}
                                 messageProps={{
-                                    className:
-                                        "!p-0 [&_.agenta-editor-wrapper]:!p-3 !mt-0 [&:nth-child(1)]:!mt-0 mt-2",
+                                    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
+                                    // `[&_.agenta-editor-wrapper]:!p-3` container hack.
                                     editorClassName: "!p-3",
                                     headerClassName:
                                         "min-h-[48px] px-2 border-0 border-b border-solid border-[var(--ag-rgba-051729-06)]",

web/packages/agenta-playground-ui/src/components/adapters/VariableControlAdapter.tsx

@@ -549,7 +549,14 @@ const VariableControlAdapter: React.FC<VariableControlAdapterProps> = ({
                     handleChange={handleChange}
                     initialValue={effectiveValue}
                     value={effectiveValue}
-                    editorClassName={className}
+                    // NOTE: the parent's `className` is a container/cell-strip style
+                    // (e.g. `*:!border-none px-3`) and is applied to the container
+                    // below. It must NOT be forwarded to the editor body, where it
+                    // would strip the editor's own border and gutter (see the
+                    // matching note on the code-editor branch above). It was
+                    // previously passed as `editorClassName` but silently dropped by
+                    // the `noProvider` className bug; now that the bug is fixed, the
+                    // forward is removed so it stays a container-only style.
                     placeholder={effectivePlaceholder}
                     disabled={isEffectivelyDisabled}
                     className={clsx(

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

@@ -210,14 +210,21 @@ const ChatMessageEditorInner: React.FC<ChatMessageEditorProps> = ({
             //
             // Kaosiso QA 2026-06-02 (also reproduces in production).
             disableDebounce
-            editorClassName={editorClassName}
+            // Inset the message text and its placeholder by 8px so they line up
+            // with the role label above. Goes through editorClassName (the proper
+            // 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.
+            editorClassName={cn(
+                "[&_.editor-input:not(.code-only)]:px-2 [&_.editor-placeholder]:left-2",
+                editorClassName,
+            )}
             placeholder={placeholder}
             disabled={disabled}
             state={disabled ? "readOnly" : state}
-            // `agenta-chat-message-editor` is the styling hook used in globals.css
-            // to align the message text with the role label (see that file). The
-            // padding can't go through `editorClassName` because ChatMessageEditor
-            // renders the Editor with `noProvider`, where `className` is dropped.
+            // `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",
                 flexLayouts.column,

web/packages/agenta-ui/src/Editor/Editor.tsx

@@ -173,6 +173,7 @@ const EditorInner = forwardRef<HTMLDivElement, EditorProps>(
             disableIndentationPlugin = false,
             useNativeCodeNodes = false,
             diffExtensionConfig,
+            className,
             ...rest
         }: EditorProps,
         ref,
@@ -755,7 +756,17 @@ const EditorInner = forwardRef<HTMLDivElement, EditorProps>(
         }, [codeOnly, editor, effectiveValue, hydrateRichTextFromControlledValue])
 
         return (
-            <div className="editor-container w-full overflow-hidden relative min-h-[inherit]">
+            <div
+                className={clsx(
+                    "editor-container w-full overflow-hidden relative min-h-[inherit]",
+                    // In `noProvider` mode there is no EditorProvider to carry the
+                    // consumer's `className` (it normally lands on
+                    // `.agenta-rich-text-editor`), so apply it to the container here.
+                    // In provider mode EditorInner receives no `className`, so this is
+                    // a no-op and the class still lands on `.agenta-rich-text-editor`.
+                    className,
+                )}
+            >
                 <div
                     ref={ref}
                     className={clsx("editor-inner border rounded-lg min-h-[inherit]", {
@@ -1119,6 +1130,7 @@ const Editor = ({
                 <EditorInner
                     dimensions={dimension}
                     id={id}
+                    className={className}
                     customRender={customRender}
                     initialValue={initialValue}
                     value={value}