chore(frontend): document Editor className landing node and trim comment narration

Review follow-ups for #4555:
- Document on EditorProps.className that the class lands on a different
  node per mode (.agenta-rich-text-editor in provider mode, the
  .editor-container div with noProvider), so future noProvider toggles
  do not silently re-style a different box.
- Trim comments that narrated the history of the noProvider bug down to
  the standing constraints.

Author: mmabrouk

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

@@ -151,12 +151,10 @@ const GenerationComparisonChatOutputCell = ({
                                 }}
                                 messageProps={{
                                     className: "!p-0 !mt-0 [&:nth-child(1)]:!mt-0 mt-2",
-                                    // 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.
+                                    // Comparison cells pad the editor body via
+                                    // editorClassName; alignTextWithRole is off so the
+                                    // role-alignment inset does not stack on top of this
+                                    // padding.
                                     editorClassName: "!p-3",
                                     alignTextWithRole: false,
                                     headerClassName:
@@ -204,11 +202,8 @@ const GenerationComparisonChatOutputCell = ({
                         withControls={false}
                         hideUserMessage
                         messageProps={{
-                            // 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.
+                            // Padding via editorClassName only; 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,

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

@@ -550,13 +550,10 @@ const VariableControlAdapter: React.FC<VariableControlAdapterProps> = ({
                     initialValue={effectiveValue}
                     value={effectiveValue}
                     // 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.
+                    // (e.g. `*:!border-none px-3`) applied to the container below. It
+                    // must NOT be forwarded as `editorClassName` — on the editor body
+                    // it strips the editor's own border and gutter (see the matching
+                    // note on the code-editor branch above).
                     placeholder={effectivePlaceholder}
                     disabled={isEffectivelyDisabled}
                     className={clsx(

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

@@ -220,13 +220,12 @@ const ChatMessageEditorInner: React.FC<ChatMessageEditorProps> = ({
             // Kaosiso QA 2026-06-02 (also reproduces in production).
             disableDebounce
             // 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 `.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).
+            // with the role label above. 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, aligned by the
+            // `.agenta-chat-message-editor` rule in globals.css. Both insets are
+            // skipped when alignTextWithRole is false (e.g. the comparison view,
+            // which applies its own editor padding).
             editorClassName={cn(
                 alignTextWithRole &&
                     "[&_.editor-input:not(.code-only)]:px-2 [&_.editor-placeholder]:left-2",

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

@@ -759,11 +759,10 @@ const EditorInner = forwardRef<HTMLDivElement, EditorProps>(
             <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`.
+                    // `noProvider` mode has no EditorProvider to carry the consumer's
+                    // `className`, so it lands here. In provider mode EditorInner
+                    // receives no `className` (the provider applies it on
+                    // `.agenta-rich-text-editor`), so it is never applied twice.
                     className,
                 )}
             >

web/packages/agenta-ui/src/Editor/types.d.ts

@@ -26,6 +26,15 @@ export interface EditorProviderProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export interface EditorProps extends React.HTMLProps<HTMLDivElement> {
+    /**
+     * Lands on a different node per mode: in provider mode on the
+     * `.agenta-rich-text-editor` wrapper (an ancestor of the editor
+     * container), with `noProvider` on the `.editor-container` div itself.
+     * Descendant selectors (`[&_...]`) behave the same in both modes, but
+     * box-level utilities (padding, width, border) style a different element
+     * depending on the mode.
+     */
+    className?: string
     disabled?: boolean
     id?: string
     initialEditorState?: LexicalEditor["_editorState"]