From 697e0e1bb804540cd6432a568e0cf9a5073c8b74 Mon Sep 17 00:00:00 2001
From: Arda Erzin <ardaerzin@gmail.com>
Date: Sun, 28 Jun 2026 17:10:29 +0200
Subject: [PATCH 01/12] feat(agent): link prompt, table controls, and md-file
 drop in the markdown editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three improvements to the toolbar'd markdown editor used by the Instructions and
Skill drawers.

- Link button now opens a popover asking for the URL (seeded with the existing
  link when the caret is on one) with Add/Update + Remove, instead of blindly
  applying the literal "https://".
- Table controls: a size-picker popover inserts a table (rows×cols hover grid);
  when the caret is inside a table the same control becomes a menu for insert/
  delete row and column + delete table. The Lexical engine already registered
  TablePlugin + the markdown table transformers — this just exposes them.
- The editor now accepts a dropped Markdown file (.md/.markdown/.mdx/.txt or any
  text/* file): it reads the file text and replaces the content, with a drop
  overlay. Intercepts only file drags in the capture phase, so Lexical's own
  internal text drag/drop is untouched.
---
 .../SchemaControls/MarkdownEditor.tsx         | 102 ++++++-
 .../agenta-ui/src/Editor/MarkdownToolbar.tsx  | 267 ++++++++++++++++--
 2 files changed, 335 insertions(+), 34 deletions(-)

diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
index d0b78e3262..ececa5e168 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
@@ -18,7 +18,16 @@
  * Controlled value: seeds from `value` and re-syncs when `value` changes from outside (e.g. a skill
  * upload populating the body), while leaving the cursor alone during local typing.
  */
-import {type CSSProperties, useEffect, useId, useLayoutEffect, useRef, useState} from "react"
+import {
+    type CSSProperties,
+    type DragEvent,
+    useCallback,
+    useEffect,
+    useId,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react"
 
 import {
     EditorProvider,
@@ -135,6 +144,50 @@ export function MarkdownEditor({
         onChange(next)
     }
 
+    // Markdown-file drop: dropping a .md/.markdown/.txt (or any text/* file) onto the editor
+    // replaces its content with the file's text. We intercept in the capture phase and only for
+    // file drags, so Lexical's own internal text drag/drop keeps working.
+    const [dragOver, setDragOver] = useState(false)
+    const dropEnabled = editable && !disabled
+    const isFileDrag = (e: DragEvent) => Array.from(e.dataTransfer.types).includes("Files")
+    const isMarkdownFile = (file: File) =>
+        /\.(md|markdown|mdx|txt)$/i.test(file.name) ||
+        file.type.startsWith("text/") ||
+        file.type === "application/json" ||
+        file.type === ""
+
+    const handleDragOver = useCallback(
+        (e: DragEvent) => {
+            if (!dropEnabled || !isFileDrag(e)) return
+            e.preventDefault()
+            e.stopPropagation()
+            e.dataTransfer.dropEffect = "copy"
+            setDragOver(true)
+        },
+        [dropEnabled],
+    )
+
+    const handleDragLeave = useCallback((e: DragEvent) => {
+        // Ignore leaves into child nodes; only clear when the pointer exits the wrapper.
+        if (e.currentTarget.contains(e.relatedTarget as Node | null)) return
+        setDragOver(false)
+    }, [])
+
+    const handleDrop = useCallback(
+        (e: DragEvent) => {
+            if (!dropEnabled || !isFileDrag(e)) return
+            e.preventDefault()
+            e.stopPropagation()
+            setDragOver(false)
+            const file = Array.from(e.dataTransfer.files).find(isMarkdownFile)
+            if (!file) return
+            void file.text().then((content) => handleChange(content))
+        },
+        // handleChange is stable enough for this usage (reads current onChange via closure).
+
+        [dropEnabled],
+    )
+
     const viewToggle = canToggleView ? (
         <button
             type="button"
@@ -202,6 +255,25 @@ export function MarkdownEditor({
         />
     )
 
+    const body = showToolbar ? (
+        <div
+            className={cn(
+                "flex flex-col overflow-hidden",
+                bordered && "rounded-md border border-solid border-[var(--ag-c-BDC7D1,#bdc7d1)]",
+            )}
+            style={boundStyle}
+        >
+            {toolbar}
+            <div className="min-h-0 flex-1 overflow-y-auto">{editorEl}</div>
+        </div>
+    ) : boundStyle ? (
+        <div className="overflow-y-auto" style={boundStyle}>
+            {editorEl}
+        </div>
+    ) : (
+        editorEl
+    )
+
     return (
         <EditorProvider
             id={editorId}
@@ -210,24 +282,24 @@ export function MarkdownEditor({
             showToolbar={false}
             disabled={editorDisabled}
         >
-            {showToolbar ? (
+            {dropEnabled ? (
                 <div
-                    className={cn(
-                        "flex flex-col overflow-hidden",
-                        bordered &&
-                            "rounded-md border border-solid border-[var(--ag-c-BDC7D1,#bdc7d1)]",
-                    )}
-                    style={boundStyle}
+                    className="relative"
+                    onDragOverCapture={handleDragOver}
+                    onDragLeaveCapture={handleDragLeave}
+                    onDropCapture={handleDrop}
                 >
-                    {toolbar}
-                    <div className="min-h-0 flex-1 overflow-y-auto">{editorEl}</div>
-                </div>
-            ) : boundStyle ? (
-                <div className="overflow-y-auto" style={boundStyle}>
-                    {editorEl}
+                    {body}
+                    {dragOver ? (
+                        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-md border-2 border-dashed border-[var(--ant-color-primary)] bg-[var(--ant-color-primary-bg,rgba(22,119,255,0.08))]">
+                            <span className="rounded-md bg-[var(--ant-color-bg-elevated,#fff)] px-3 py-1.5 text-xs font-medium text-[var(--ag-c-586673,#586673)] shadow-sm">
+                                Drop a Markdown file to replace the content
+                            </span>
+                        </div>
+                    ) : null}
                 </div>
             ) : (
-                editorEl
+                body
             )}
             <MarkdownViewSync enabled={markdownView} />
         </EditorProvider>
diff --git a/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx b/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
index 22a227de43..bc7f1661b8 100644
--- a/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
+++ b/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
@@ -2,9 +2,14 @@
  * MarkdownToolbar
  *
  * A formatting toolbar for the rich-text Lexical editor: heading, bold, italic, lists, link, inline
- * code, and quote. It reads the editor from composer context, so it must render inside an
+ * code, quote, and tables. It reads the editor from composer context, so it must render inside an
  * `EditorProvider` (e.g. mounted by `MarkdownEditor` above the editor). Formatting applies to the
  * rich-text (rendered) view; pass `disabled` while the editor shows raw Markdown source.
+ *
+ * The link button opens a small popover that asks for the URL (and removes the link when one is
+ * already under the caret) instead of blindly applying a placeholder. The table button opens a
+ * size picker to insert a table; when the caret is inside a table, a second menu exposes row/column
+ * insert + delete operations (mirroring the Lexical playground's table controls).
  */
 import {type ReactNode, useCallback, useEffect, useState} from "react"
 
@@ -18,7 +23,17 @@ import {
     $isQuoteNode,
 } from "@lexical/rich-text"
 import {$setBlocksType} from "@lexical/selection"
+import {
+    $deleteTableColumnAtSelection,
+    $deleteTableRowAtSelection,
+    $getTableCellNodeFromLexicalNode,
+    $getTableNodeFromLexicalNodeOrThrow,
+    $insertTableColumnAtSelection,
+    $insertTableRowAtSelection,
+    INSERT_TABLE_COMMAND,
+} from "@lexical/table"
 import {$getNearestNodeOfType} from "@lexical/utils"
+import {Button, Dropdown, Input, type MenuProps, Popover} from "antd"
 import {
     $getSelection,
     $isRangeSelection,
@@ -28,6 +43,7 @@ import {
 } from "lexical"
 import {
     Bold,
+    ChevronDown,
     Code,
     Heading2,
     Italic,
@@ -35,6 +51,8 @@ import {
     List,
     ListOrdered,
     Quote,
+    Table as TableIcon,
+    Unlink,
 } from "lucide-react"
 
 export interface MarkdownToolbarProps {
@@ -42,6 +60,57 @@ export interface MarkdownToolbarProps {
     disabled?: boolean
 }
 
+const BTN_BASE =
+    "flex h-7 w-7 items-center justify-center rounded border-0 bg-transparent transition-colors"
+const btnClass = (disabled: boolean, isActive: boolean) =>
+    [
+        BTN_BASE,
+        disabled
+            ? "cursor-not-allowed text-[var(--ag-c-97A4B0,#97a4b0)] opacity-50"
+            : "cursor-pointer text-[var(--ag-c-586673,#586673)] hover:bg-[var(--ag-c-EAEFF5,#eaeff5)]",
+        isActive ? "bg-[var(--ag-c-EAEFF5,#eaeff5)] !text-[var(--ag-c-1677FF,#1677ff)]" : "",
+    ].join(" ")
+
+/** A compact rows×cols grid the user hovers to pick a table size, like Notion / the Lexical demo. */
+function TableSizePicker({onPick}: {onPick: (rows: number, cols: number) => void}) {
+    const MAX = 6
+    const [hover, setHover] = useState({rows: 0, cols: 0})
+    return (
+        <div className="flex flex-col gap-1.5">
+            <div
+                className="grid w-fit gap-0.5"
+                style={{gridTemplateColumns: `repeat(${MAX}, 1fr)`}}
+                onMouseLeave={() => setHover({rows: 0, cols: 0})}
+            >
+                {Array.from({length: MAX * MAX}, (_, i) => {
+                    const r = Math.floor(i / MAX) + 1
+                    const c = (i % MAX) + 1
+                    const on = r <= hover.rows && c <= hover.cols
+                    return (
+                        <button
+                            key={i}
+                            type="button"
+                            aria-label={`${r} by ${c}`}
+                            onMouseEnter={() => setHover({rows: r, cols: c})}
+                            onMouseDown={(e) => e.preventDefault()}
+                            onClick={() => onPick(r, c)}
+                            className={[
+                                "h-4 w-4 rounded-[2px] border border-solid transition-colors",
+                                on
+                                    ? "border-[var(--ant-color-primary)] bg-[var(--ant-color-primary-bg,var(--ag-c-EAEFF5,#eaeff5))]"
+                                    : "border-[var(--ag-c-EAEFF5,#eaeff5)] bg-transparent",
+                            ].join(" ")}
+                        />
+                    )
+                })}
+            </div>
+            <span className="text-center text-[11px] text-[var(--ag-c-97A4B0,#97a4b0)]">
+                {hover.rows > 0 ? `${hover.rows} × ${hover.cols}` : "Insert table"}
+            </span>
+        </div>
+    )
+}
+
 export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
     const [editor] = useLexicalComposerContext()
     const [active, setActive] = useState({
@@ -53,7 +122,13 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
         bullet: false,
         ordered: false,
         link: false,
+        insideTable: false,
     })
+    // The URL under the caret (empty when not on a link), seeded into the link popover.
+    const [linkUrl, setLinkUrl] = useState("")
+    const [linkOpen, setLinkOpen] = useState(false)
+    const [linkDraft, setLinkDraft] = useState("")
+    const [tableOpen, setTableOpen] = useState(false)
 
     useEffect(() => {
         return editor.registerUpdateListener(({editorState}) => {
@@ -65,6 +140,12 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
                 const listNode = $getNearestNodeOfType(anchorNode, ListNode)
                 const listType = listNode ? listNode.getListType() : null
                 const parent = anchorNode.getParent()
+                const linkNode = $isLinkNode(anchorNode)
+                    ? anchorNode
+                    : $isLinkNode(parent)
+                      ? parent
+                      : null
+                setLinkUrl(linkNode ? linkNode.getURL() : "")
                 setActive({
                     bold: selection.hasFormat("bold"),
                     italic: selection.hasFormat("italic"),
@@ -73,7 +154,8 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
                     quote: $isQuoteNode(block),
                     bullet: listType === "bullet",
                     ordered: listType === "number",
-                    link: $isLinkNode(anchorNode) || $isLinkNode(parent),
+                    link: Boolean(linkNode),
+                    insideTable: $getTableCellNodeFromLexicalNode(anchorNode) !== null,
                 })
             })
         })
@@ -94,6 +176,73 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
         [editor],
     )
 
+    // Apply / clear the link on the current selection. The editor keeps its last RangeSelection
+    // while focus sits in the popover input, so the command still targets the selected text.
+    const applyLink = useCallback(() => {
+        const url = linkDraft.trim()
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, url || null)
+        setLinkOpen(false)
+    }, [editor, linkDraft])
+
+    const removeLink = useCallback(() => {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
+        setLinkOpen(false)
+    }, [editor])
+
+    const insertTable = useCallback(
+        (rows: number, cols: number) => {
+            editor.dispatchCommand(INSERT_TABLE_COMMAND, {
+                rows: String(rows),
+                columns: String(cols),
+                includeHeaders: true,
+            })
+            setTableOpen(false)
+        },
+        [editor],
+    )
+
+    const runTableOp = useCallback((op: () => void) => editor.update(op), [editor])
+
+    const tableMenu: MenuProps = {
+        onClick: ({key, domEvent}) => {
+            domEvent.preventDefault()
+            switch (key) {
+                case "row-above":
+                    return runTableOp(() => $insertTableRowAtSelection(false))
+                case "row-below":
+                    return runTableOp(() => $insertTableRowAtSelection(true))
+                case "col-left":
+                    return runTableOp(() => $insertTableColumnAtSelection(false))
+                case "col-right":
+                    return runTableOp(() => $insertTableColumnAtSelection(true))
+                case "del-row":
+                    return runTableOp(() => $deleteTableRowAtSelection())
+                case "del-col":
+                    return runTableOp(() => $deleteTableColumnAtSelection())
+                case "del-table":
+                    return runTableOp(() => {
+                        const sel = $getSelection()
+                        if (!$isRangeSelection(sel)) return
+                        const cell = $getTableCellNodeFromLexicalNode(sel.anchor.getNode())
+                        if (!cell) return
+                        $getTableNodeFromLexicalNodeOrThrow(cell).remove()
+                    })
+                default:
+                    return undefined
+            }
+        },
+        items: [
+            {key: "row-above", label: "Insert row above"},
+            {key: "row-below", label: "Insert row below"},
+            {key: "col-left", label: "Insert column left"},
+            {key: "col-right", label: "Insert column right"},
+            {type: "divider"},
+            {key: "del-row", label: "Delete row"},
+            {key: "del-col", label: "Delete column"},
+            {key: "del-table", label: "Delete table", danger: true},
+        ],
+    }
+
     const button = (
         key: string,
         label: string,
@@ -112,20 +261,16 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
             // text instead of being lost when the button steals focus.
             onMouseDown={(e) => e.preventDefault()}
             onClick={onClick}
-            className={[
-                "flex h-7 w-7 items-center justify-center rounded border-0 bg-transparent transition-colors",
-                disabled
-                    ? "cursor-not-allowed text-[var(--ag-c-97A4B0,#97a4b0)] opacity-50"
-                    : "cursor-pointer text-[var(--ag-c-586673,#586673)] hover:bg-[var(--ag-c-EAEFF5,#eaeff5)]",
-                isActive
-                    ? "bg-[var(--ag-c-EAEFF5,#eaeff5)] !text-[var(--ag-c-1677FF,#1677ff)]"
-                    : "",
-            ].join(" ")}
+            className={btnClass(disabled, isActive)}
         >
             {icon}
         </button>
     )
 
+    const divider = (
+        <span className="mx-0.5 h-4 w-px shrink-0 bg-[var(--ag-c-EAEFF5,#eaeff5)]" aria-hidden />
+    )
+
     return (
         <div className="flex items-center gap-0.5">
             {button(
@@ -137,6 +282,7 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
             )}
             {button("b", "Bold", <Bold size={15} />, () => formatText("bold"), active.bold)}
             {button("i", "Italic", <Italic size={15} />, () => formatText("italic"), active.italic)}
+            {divider}
             {button(
                 "ul",
                 "Bulleted list",
@@ -151,14 +297,6 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
                 () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
                 active.ordered,
             )}
-            {button(
-                "link",
-                "Link",
-                <LinkIcon size={15} />,
-                // Toggle: on an existing link, dispatch null to remove it; otherwise seed a new link.
-                () => editor.dispatchCommand(TOGGLE_LINK_COMMAND, active.link ? null : "https://"),
-                active.link,
-            )}
             {button("code", "Code", <Code size={15} />, () => formatText("code"), active.code)}
             {button(
                 "quote",
@@ -167,6 +305,97 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
                 () => setBlock(() => $createQuoteNode()),
                 active.quote,
             )}
+            {divider}
+
+            {/* Link — popover asks for the URL (and removes an existing link). */}
+            <Popover
+                open={disabled ? false : linkOpen}
+                onOpenChange={(next) => {
+                    setLinkOpen(next)
+                    if (next) setLinkDraft(linkUrl)
+                }}
+                trigger="click"
+                placement="bottom"
+                destroyTooltipOnHide
+                content={
+                    <div className="flex w-60 flex-col gap-2">
+                        <Input
+                            autoFocus
+                            value={linkDraft}
+                            placeholder="https://example.com"
+                            onChange={(e) => setLinkDraft(e.target.value)}
+                            onPressEnter={applyLink}
+                        />
+                        <div className="flex items-center justify-between gap-2">
+                            {active.link ? (
+                                <Button
+                                    type="text"
+                                    size="small"
+                                    danger
+                                    icon={<Unlink size={13} />}
+                                    onClick={removeLink}
+                                >
+                                    Remove
+                                </Button>
+                            ) : (
+                                <span />
+                            )}
+                            <Button type="primary" size="small" onClick={applyLink}>
+                                {active.link ? "Update" : "Add link"}
+                            </Button>
+                        </div>
+                    </div>
+                }
+            >
+                <button
+                    type="button"
+                    title="Link"
+                    aria-label="Link"
+                    aria-pressed={active.link}
+                    disabled={disabled}
+                    onMouseDown={(e) => e.preventDefault()}
+                    className={btnClass(disabled, active.link)}
+                >
+                    <LinkIcon size={15} />
+                </button>
+            </Popover>
+
+            {/* Table — one control: inside a table it opens the row/column ops menu; otherwise a
+                size picker to insert one. The chevron signals the menu when the caret is in a table. */}
+            {active.insideTable && !disabled ? (
+                <Dropdown menu={tableMenu} trigger={["click"]} placement="bottomLeft">
+                    <button
+                        type="button"
+                        title="Table options"
+                        aria-label="Table options"
+                        onMouseDown={(e) => e.preventDefault()}
+                        className={`${btnClass(false, false)} !w-auto gap-0.5 px-1`}
+                    >
+                        <TableIcon size={15} />
+                        <ChevronDown size={12} />
+                    </button>
+                </Dropdown>
+            ) : (
+                <Popover
+                    open={disabled ? false : tableOpen}
+                    onOpenChange={setTableOpen}
+                    trigger="click"
+                    placement="bottom"
+                    destroyTooltipOnHide
+                    content={<TableSizePicker onPick={insertTable} />}
+                >
+                    <button
+                        type="button"
+                        title="Insert table"
+                        aria-label="Insert table"
+                        disabled={disabled}
+                        onMouseDown={(e) => e.preventDefault()}
+                        className={btnClass(disabled, false)}
+                    >
+                        <TableIcon size={15} />
+                    </button>
+                </Popover>
+            )}
         </div>
     )
 }

From 10267f43e12985f1c91717a301d8a72992f7ed30 Mon Sep 17 00:00:00 2001
From: Arda Erzin <ardaerzin@gmail.com>
Date: Sun, 28 Jun 2026 17:19:15 +0200
Subject: [PATCH 02/12] feat(agent): comfortable markdown rendering for the
 document editors

Apply the "comfortable" prose direction to how Markdown documents (AGENTS.md /
SKILL.md) render, in both the live editor and the read-only preview.

The shared Lexical editor theme rendered document headings far too large
(h1 24px / 600 weight), gave fenced code blocks no block styling, and left
tables/blockquotes inconsistent. Rather than change that theme globally (the
prompt and chat editors share it), scope the new prose styles to the document
editors via a `md-prose` wrapper class:

- editor-theme.css: a `.md-prose` block with a calmer heading scale (17/14/13,
  500 weight), bordered/rounded code blocks, an accent-rule italic blockquote,
  and roomier line-height. Uses antd semantic tokens so it adapts to dark mode.
- MarkdownEditor: tag its rendered containers with `md-prose` (covers both the
  edit and preview panes, which both render through this editor).
- MarkdownPreview: bring its marked/DOMPurify MD_CLASS in line with the same
  scale, plus table styling it previously lacked.
---
 web/oss/src/styles/editor-theme.css           | 71 +++++++++++++++++++
 .../SchemaControls/MarkdownEditor.tsx         |  8 ++-
 .../agenta-ui/src/MarkdownPreview.tsx         | 28 +++++---
 3 files changed, 95 insertions(+), 12 deletions(-)

diff --git a/web/oss/src/styles/editor-theme.css b/web/oss/src/styles/editor-theme.css
index e3c6b494b5..6369340f5d 100644
--- a/web/oss/src/styles/editor-theme.css
+++ b/web/oss/src/styles/editor-theme.css
@@ -776,3 +776,74 @@ pre::-webkit-scrollbar-thumb {
 .dark .editor-tokenAttr {
     color: #79c0ff;
 }
+
+/* ------------------------------------------------------------------------- *
+ * Document prose ("Option B — comfortable")
+ *
+ * Scoped to the Markdown document editors (Instructions / Skill) via the
+ * `md-prose` wrapper, so the shared editor theme used by the prompt and chat
+ * editors stays as-is. Uses antd semantic tokens (`--ant-color-*`) so it adapts
+ * to dark mode automatically; placed last so equal-specificity rules win over
+ * the `.dark` overrides above. Covers both the edit and read-only preview panes
+ * (both render through this Lexical editor).
+ * ------------------------------------------------------------------------- */
+.md-prose .editor-paragraph {
+    margin-bottom: 10px;
+    line-height: 1.6;
+}
+.md-prose .editor-heading-h1,
+.md-prose .editor-heading-h2,
+.md-prose .editor-heading-h3,
+.md-prose .editor-heading-h4,
+.md-prose .editor-heading-h5,
+.md-prose .editor-heading-h6 {
+    color: var(--ant-color-text);
+    font-weight: 500;
+    line-height: 1.3;
+    margin-top: 18px;
+    margin-bottom: 8px;
+}
+.md-prose .editor-heading-h1 {
+    font-size: 17px;
+}
+.md-prose .editor-heading-h2 {
+    font-size: 14px;
+}
+.md-prose .editor-heading-h3,
+.md-prose .editor-heading-h4,
+.md-prose .editor-heading-h5,
+.md-prose .editor-heading-h6 {
+    font-size: 13px;
+    color: var(--ant-color-text-secondary);
+}
+.md-prose .editor-quote {
+    font-size: 13px;
+    font-style: italic;
+    color: var(--ant-color-text-secondary);
+    border-left: 3px solid var(--ant-color-border);
+    margin-left: 2px;
+    padding-left: 14px;
+}
+.md-prose .editor-text-code {
+    background-color: var(--ant-color-fill-tertiary);
+    border: 0.5px solid var(--ant-color-border-secondary);
+    border-radius: 4px;
+    padding: 1px 5px;
+    font-size: 86%;
+}
+.md-prose .editor-code {
+    display: block;
+    background-color: var(--ant-color-fill-quaternary);
+    border: 0.5px solid var(--ant-color-border-secondary);
+    border-radius: 8px;
+    padding: 12px 14px;
+    margin: 10px 0;
+    font-family: Menlo, Consolas, Monaco, monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    overflow-x: auto;
+}
+.md-prose .editor-link {
+    color: var(--ant-color-primary);
+    text-decoration: underline;
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
index ececa5e168..cc226d0e30 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
@@ -255,6 +255,8 @@ export function MarkdownEditor({
         />
     )
 
+    // `md-prose` scopes the document prose styles (Option B) defined in editor-theme.css to these
+    // Markdown editors only, so the shared prompt/chat editor theme is untouched.
     const body = showToolbar ? (
         <div
             className={cn(
@@ -264,14 +266,14 @@ export function MarkdownEditor({
             style={boundStyle}
         >
             {toolbar}
-            <div className="min-h-0 flex-1 overflow-y-auto">{editorEl}</div>
+            <div className="md-prose min-h-0 flex-1 overflow-y-auto">{editorEl}</div>
         </div>
     ) : boundStyle ? (
-        <div className="overflow-y-auto" style={boundStyle}>
+        <div className="md-prose overflow-y-auto" style={boundStyle}>
             {editorEl}
         </div>
     ) : (
-        editorEl
+        <div className="md-prose">{editorEl}</div>
     )
 
     return (
diff --git a/web/packages/agenta-ui/src/MarkdownPreview.tsx b/web/packages/agenta-ui/src/MarkdownPreview.tsx
index 698fee4d66..7022610149 100644
--- a/web/packages/agenta-ui/src/MarkdownPreview.tsx
+++ b/web/packages/agenta-ui/src/MarkdownPreview.tsx
@@ -15,17 +15,27 @@ export interface MarkdownPreviewProps {
     className?: string
 }
 
-// Compact prose styling for rendered Markdown elements.
+// "Option B — comfortable" prose styling for rendered Markdown, kept in sync with the document
+// editor's `.md-prose` rules in editor-theme.css. Uses antd semantic tokens so it adapts to dark
+// mode. (This renderer is for inline summaries/previews; the drawer's edit + preview panes render
+// through the Lexical editor and pick up the `.md-prose` CSS instead.)
 const MD_CLASS = [
-    "text-xs leading-relaxed",
+    "text-[13px] leading-[1.6] text-[var(--ant-color-text)]",
     "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
-    "[&_h1]:text-sm [&_h1]:font-medium [&_h2]:text-xs [&_h2]:font-medium [&_h3]:text-xs [&_h3]:font-medium",
-    "[&_p]:my-1",
-    "[&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:my-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:my-0.5",
-    "[&_a]:text-[var(--ag-c-1677FF)] [&_a]:underline",
-    "[&_code]:font-mono [&_code]:text-[0.9em]",
-    "[&_blockquote]:border-l-2 [&_blockquote]:border-solid [&_blockquote]:border-[var(--ag-c-EAEFF5)] [&_blockquote]:pl-2 [&_blockquote]:text-[var(--ag-c-97A4B0)]",
-    "[&_pre]:overflow-x-auto",
+    "[&_h1]:text-[17px] [&_h1]:font-medium [&_h1]:mt-[18px] [&_h1]:mb-2 [&_h1]:leading-tight",
+    "[&_h2]:text-[14px] [&_h2]:font-medium [&_h2]:mt-4 [&_h2]:mb-1.5",
+    "[&_h3]:text-[13px] [&_h3]:font-medium [&_h3]:mt-3.5 [&_h3]:mb-1 [&_h3]:text-[var(--ant-color-text-secondary)]",
+    "[&_h4]:text-[13px] [&_h4]:font-medium [&_h4]:text-[var(--ant-color-text-secondary)]",
+    "[&_p]:my-2",
+    "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-1",
+    "[&_a]:text-[var(--ant-color-primary)] [&_a]:underline",
+    "[&_code]:font-mono [&_code]:text-[0.86em] [&_code]:bg-[var(--ant-color-fill-tertiary)] [&_code]:border [&_code]:border-solid [&_code]:border-[var(--ant-color-border-secondary)] [&_code]:rounded [&_code]:px-1.5 [&_code]:py-px",
+    "[&_pre]:my-2.5 [&_pre]:bg-[var(--ant-color-fill-quaternary)] [&_pre]:border [&_pre]:border-solid [&_pre]:border-[var(--ant-color-border-secondary)] [&_pre]:rounded-lg [&_pre]:p-3 [&_pre]:overflow-x-auto",
+    "[&_pre_code]:border-0 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-[12px]",
+    "[&_blockquote]:my-2.5 [&_blockquote]:border-0 [&_blockquote]:border-l-[3px] [&_blockquote]:border-solid [&_blockquote]:border-[var(--ant-color-border)] [&_blockquote]:pl-3.5 [&_blockquote]:italic [&_blockquote]:text-[var(--ant-color-text-secondary)]",
+    "[&_table]:my-2.5 [&_table]:w-full [&_table]:border-collapse [&_table]:text-xs",
+    "[&_th]:border-0 [&_th]:border-b [&_th]:border-solid [&_th]:border-[var(--ant-color-border)] [&_th]:bg-[var(--ant-color-fill-tertiary)] [&_th]:px-2.5 [&_th]:py-1.5 [&_th]:text-left [&_th]:font-medium",
+    "[&_td]:border-0 [&_td]:border-b [&_td]:border-solid [&_td]:border-[var(--ant-color-border-secondary)] [&_td]:px-2.5 [&_td]:py-1.5",
 ].join(" ")
 
 export function MarkdownPreview({content, className}: MarkdownPreviewProps) {

From afc8a125a769a6e615d71faea1a9aa7745f39ad3 Mon Sep 17 00:00:00 2001
From: Arda Erzin <ardaerzin@gmail.com>
Date: Sun, 28 Jun 2026 17:32:34 +0200
Subject: [PATCH 03/12] fix(agent): markdown toolbar block types +
 dark-mode/list/code styling

Follow-up to live testing of the document editor.

- Headings: replace the single H2 button with a block-type menu (Normal text,
  Heading 1-3, Quote, Code block) that reflects the caret's current block. The
  editor only ever offered one heading level before. "Code block" inserts a real
  fenced block (the standard @lexical/code CodeNode, already registered in rich
  mode) instead of the inline-code button, which had made multi-line "code" read
  as a stack of inline chips.
- Headings now render with a clearer hierarchy (20/16/14, 600 weight) so they
  stand apart from body text.
- Lists: the shared theme gave ol and ul different left margins and tall items,
  so the two indented inconsistently. Normalize both to one padding + tight rows
  under .md-prose.
- Table size-picker: its grid cells used a fixed light hex that vanished in dark
  mode. Switch to antd semantic tokens so the cells are visible in both themes.
- Code block wraps (pre-wrap) and keeps its bordered/rounded surface.
---
 web/oss/src/styles/editor-theme.css           | 27 +++++-
 .../agenta-ui/src/Editor/MarkdownToolbar.tsx  | 97 ++++++++++++++-----
 .../agenta-ui/src/MarkdownPreview.tsx         |  8 +-
 3 files changed, 101 insertions(+), 31 deletions(-)

diff --git a/web/oss/src/styles/editor-theme.css b/web/oss/src/styles/editor-theme.css
index 6369340f5d..f9b47b41e9 100644
--- a/web/oss/src/styles/editor-theme.css
+++ b/web/oss/src/styles/editor-theme.css
@@ -798,24 +798,41 @@ pre::-webkit-scrollbar-thumb {
 .md-prose .editor-heading-h5,
 .md-prose .editor-heading-h6 {
     color: var(--ant-color-text);
-    font-weight: 500;
+    font-weight: 600;
     line-height: 1.3;
     margin-top: 18px;
-    margin-bottom: 8px;
+    margin-bottom: 6px;
 }
 .md-prose .editor-heading-h1 {
-    font-size: 17px;
+    font-size: 20px;
 }
 .md-prose .editor-heading-h2 {
+    font-size: 16px;
+}
+.md-prose .editor-heading-h3 {
     font-size: 14px;
 }
-.md-prose .editor-heading-h3,
 .md-prose .editor-heading-h4,
 .md-prose .editor-heading-h5,
 .md-prose .editor-heading-h6 {
     font-size: 13px;
     color: var(--ant-color-text-secondary);
 }
+
+/* Lists — the shared theme gives ol/ul different left margins and 8px-tall items, so the
+   two list kinds indent inconsistently. Normalize both to one padding and tight items. */
+.md-prose .editor-list-ol,
+.md-prose .editor-list-ul {
+    margin: 8px 0;
+    padding-left: 22px;
+}
+.md-prose .editor-list-item {
+    margin: 3px 0;
+}
+.md-prose .editor-nested-list-item {
+    margin: 0;
+    list-style-type: none;
+}
 .md-prose .editor-quote {
     font-size: 13px;
     font-style: italic;
@@ -841,6 +858,8 @@ pre::-webkit-scrollbar-thumb {
     font-family: Menlo, Consolas, Monaco, monospace;
     font-size: 12px;
     line-height: 1.6;
+    white-space: pre-wrap;
+    tab-size: 2;
     overflow-x: auto;
 }
 .md-prose .editor-link {
diff --git a/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx b/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
index bc7f1661b8..4e0a4358bf 100644
--- a/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
+++ b/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
@@ -13,6 +13,7 @@
  */
 import {type ReactNode, useCallback, useEffect, useState} from "react"
 
+import {$createCodeNode, $isCodeNode} from "@lexical/code"
 import {$isLinkNode, TOGGLE_LINK_COMMAND} from "@lexical/link"
 import {INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode} from "@lexical/list"
 import {useLexicalComposerContext} from "@lexical/react/LexicalComposerContext"
@@ -35,6 +36,7 @@ import {
 import {$getNearestNodeOfType} from "@lexical/utils"
 import {Button, Dropdown, Input, type MenuProps, Popover} from "antd"
 import {
+    $createParagraphNode,
     $getSelection,
     $isRangeSelection,
     type ElementNode,
@@ -45,16 +47,23 @@ import {
     Bold,
     ChevronDown,
     Code,
-    Heading2,
     Italic,
     Link as LinkIcon,
     List,
     ListOrdered,
-    Quote,
     Table as TableIcon,
     Unlink,
 } from "lucide-react"
 
+const BLOCK_TYPES = [
+    {key: "paragraph", label: "Normal text"},
+    {key: "h1", label: "Heading 1"},
+    {key: "h2", label: "Heading 2"},
+    {key: "h3", label: "Heading 3"},
+    {key: "quote", label: "Quote"},
+    {key: "code", label: "Code block"},
+] as const
+
 export interface MarkdownToolbarProps {
     /** Disable the buttons (e.g. while the editor shows raw Markdown source or is read-only). */
     disabled?: boolean
@@ -97,8 +106,8 @@ function TableSizePicker({onPick}: {onPick: (rows: number, cols: number) => void
                             className={[
                                 "h-4 w-4 rounded-[2px] border border-solid transition-colors",
                                 on
-                                    ? "border-[var(--ant-color-primary)] bg-[var(--ant-color-primary-bg,var(--ag-c-EAEFF5,#eaeff5))]"
-                                    : "border-[var(--ag-c-EAEFF5,#eaeff5)] bg-transparent",
+                                    ? "border-[var(--ant-color-primary)] bg-[var(--ant-color-primary)]"
+                                    : "border-[var(--ant-color-border)] bg-[var(--ant-color-fill-quaternary)]",
                             ].join(" ")}
                         />
                     )
@@ -117,13 +126,13 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
         bold: false,
         italic: false,
         code: false,
-        heading: false,
-        quote: false,
         bullet: false,
         ordered: false,
         link: false,
         insideTable: false,
     })
+    // The current block type (paragraph / h1-h3 / quote / code), shown in the block-type menu.
+    const [blockType, setBlockType] = useState<string>("paragraph")
     // The URL under the caret (empty when not on a link), seeded into the link popover.
     const [linkUrl, setLinkUrl] = useState("")
     const [linkOpen, setLinkOpen] = useState(false)
@@ -146,12 +155,19 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
                       ? parent
                       : null
                 setLinkUrl(linkNode ? linkNode.getURL() : "")
+                setBlockType(
+                    block && $isHeadingNode(block)
+                        ? block.getTag()
+                        : block && $isQuoteNode(block)
+                          ? "quote"
+                          : block && $isCodeNode(block)
+                            ? "code"
+                            : "paragraph",
+                )
                 setActive({
                     bold: selection.hasFormat("bold"),
                     italic: selection.hasFormat("italic"),
                     code: selection.hasFormat("code"),
-                    heading: $isHeadingNode(block),
-                    quote: $isQuoteNode(block),
                     bullet: listType === "bullet",
                     ordered: listType === "number",
                     link: Boolean(linkNode),
@@ -176,6 +192,19 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
         [editor],
     )
 
+    // Convert the current block to the chosen type. Headings/quote/code all go through
+    // `$setBlocksType`; the markdown serializer maps them back to `#`, `>` and fenced blocks.
+    const formatBlock = useCallback(
+        (key: string) => {
+            if (key === "quote") setBlock(() => $createQuoteNode())
+            else if (key === "code") setBlock(() => $createCodeNode())
+            else if (key === "h1" || key === "h2" || key === "h3")
+                setBlock(() => $createHeadingNode(key))
+            else setBlock(() => $createParagraphNode())
+        },
+        [setBlock],
+    )
+
     // Apply / clear the link on the current selection. The editor keeps its last RangeSelection
     // while focus sits in the popover input, so the command still targets the selected text.
     const applyLink = useCallback(() => {
@@ -271,17 +300,47 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
         <span className="mx-0.5 h-4 w-px shrink-0 bg-[var(--ag-c-EAEFF5,#eaeff5)]" aria-hidden />
     )
 
+    const blockLabel = BLOCK_TYPES.find((b) => b.key === blockType)?.label ?? "Normal text"
+
     return (
         <div className="flex items-center gap-0.5">
-            {button(
-                "h",
-                "Heading",
-                <Heading2 size={15} />,
-                () => setBlock(() => $createHeadingNode("h2")),
-                active.heading,
-            )}
+            {/* Block type — paragraph / headings / quote / code block. */}
+            <Dropdown
+                disabled={disabled}
+                trigger={["click"]}
+                placement="bottomLeft"
+                menu={{
+                    selectable: true,
+                    selectedKeys: [blockType],
+                    items: BLOCK_TYPES.map((b) => ({key: b.key, label: b.label})),
+                    onClick: ({key, domEvent}) => {
+                        domEvent.preventDefault()
+                        formatBlock(key)
+                    },
+                }}
+            >
+                <button
+                    type="button"
+                    title="Text style"
+                    aria-label="Text style"
+                    disabled={disabled}
+                    onMouseDown={(e) => e.preventDefault()}
+                    className={`${btnClass(disabled, false)} !w-auto min-w-[88px] justify-between gap-1 px-2 text-xs`}
+                >
+                    <span className="truncate">{blockLabel}</span>
+                    <ChevronDown size={13} className="shrink-0" />
+                </button>
+            </Dropdown>
+            {divider}
             {button("b", "Bold", <Bold size={15} />, () => formatText("bold"), active.bold)}
             {button("i", "Italic", <Italic size={15} />, () => formatText("italic"), active.italic)}
+            {button(
+                "code",
+                "Inline code",
+                <Code size={15} />,
+                () => formatText("code"),
+                active.code,
+            )}
             {divider}
             {button(
                 "ul",
@@ -297,14 +356,6 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
                 () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
                 active.ordered,
             )}
-            {button("code", "Code", <Code size={15} />, () => formatText("code"), active.code)}
-            {button(
-                "quote",
-                "Quote",
-                <Quote size={15} />,
-                () => setBlock(() => $createQuoteNode()),
-                active.quote,
-            )}
             {divider}
 
             {/* Link — popover asks for the URL (and removes an existing link). */}
diff --git a/web/packages/agenta-ui/src/MarkdownPreview.tsx b/web/packages/agenta-ui/src/MarkdownPreview.tsx
index 7022610149..ffafcd5fe5 100644
--- a/web/packages/agenta-ui/src/MarkdownPreview.tsx
+++ b/web/packages/agenta-ui/src/MarkdownPreview.tsx
@@ -22,10 +22,10 @@ export interface MarkdownPreviewProps {
 const MD_CLASS = [
     "text-[13px] leading-[1.6] text-[var(--ant-color-text)]",
     "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
-    "[&_h1]:text-[17px] [&_h1]:font-medium [&_h1]:mt-[18px] [&_h1]:mb-2 [&_h1]:leading-tight",
-    "[&_h2]:text-[14px] [&_h2]:font-medium [&_h2]:mt-4 [&_h2]:mb-1.5",
-    "[&_h3]:text-[13px] [&_h3]:font-medium [&_h3]:mt-3.5 [&_h3]:mb-1 [&_h3]:text-[var(--ant-color-text-secondary)]",
-    "[&_h4]:text-[13px] [&_h4]:font-medium [&_h4]:text-[var(--ant-color-text-secondary)]",
+    "[&_h1]:text-[20px] [&_h1]:font-semibold [&_h1]:mt-[18px] [&_h1]:mb-1.5 [&_h1]:leading-tight",
+    "[&_h2]:text-[16px] [&_h2]:font-semibold [&_h2]:mt-4 [&_h2]:mb-1.5",
+    "[&_h3]:text-[14px] [&_h3]:font-semibold [&_h3]:mt-3.5 [&_h3]:mb-1",
+    "[&_h4]:text-[13px] [&_h4]:font-semibold [&_h4]:text-[var(--ant-color-text-secondary)]",
     "[&_p]:my-2",
     "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-1",
     "[&_a]:text-[var(--ant-color-primary)] [&_a]:underline",

From 987ab8b980c2d4d85594d6cc7e9c5c1a931bf87b Mon Sep 17 00:00:00 2001
From: Arda Erzin <ardaerzin@gmail.com>
Date: Sun, 28 Jun 2026 18:00:54 +0200
Subject: [PATCH 04/12] fix(agent): real multi-line code blocks + language
 selection + highlighting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "Code block" option turned a multi-line selection into one code node per
line via $setBlocksType — which rendered as a stack of inline-code chips with no
block background, not a single block. Mirror the Lexical playground: on a range
selection, insert one code node and write the text back with insertRawText so
line breaks become code lines (collapsed selection still uses $setBlocksType).

Also wire up code highlighting, which the rich editor never enabled:

- MarkdownEditor registers `registerCodeHighlighting` (the CodeNode/
  CodeHighlightNode types were registered but the highlighter was never turned
  on, so blocks rendered as plain monospace). Token colors come from the
  existing `editor-token*` theme classes (light + dark).
- The toolbar shows a searchable language picker (`getCodeLanguageOptions`) when
  the caret is inside a code block, writing `CodeNode.setLanguage` so Prism
  highlights the right grammar.
---
 .../SchemaControls/MarkdownEditor.tsx         | 13 ++++
 .../agenta-ui/src/Editor/MarkdownToolbar.tsx  | 64 +++++++++++++++++--
 2 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
index cc226d0e30..0ec7418e13 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
@@ -37,6 +37,7 @@ import {
 } from "@agenta/ui"
 import {SharedEditor} from "@agenta/ui/shared-editor"
 import {cn} from "@agenta/ui/styles"
+import {registerCodeHighlighting} from "@lexical/code"
 import {Tag} from "antd"
 
 type MarkdownView = "source" | "rendered"
@@ -92,6 +93,17 @@ function MarkdownViewSync({enabled}: {enabled: boolean}) {
     return null
 }
 
+/**
+ * Enables Prism syntax highlighting for code blocks in the rich view. The shared editor registers
+ * the CodeNode/CodeHighlightNode types but never turns on the highlighter, so fenced blocks render
+ * as plain monospace until this runs. The token colors come from the `editor-token*` theme classes.
+ */
+function CodeHighlightSync() {
+    const [editor] = useLexicalComposerContext()
+    useEffect(() => registerCodeHighlighting(editor), [editor])
+    return null
+}
+
 export function MarkdownEditor({
     value,
     onChange,
@@ -304,6 +316,7 @@ export function MarkdownEditor({
                 body
             )}
             <MarkdownViewSync enabled={markdownView} />
+            <CodeHighlightSync />
         </EditorProvider>
     )
 }
diff --git a/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx b/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
index 4e0a4358bf..2882a58722 100644
--- a/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
+++ b/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
@@ -11,9 +11,9 @@
  * size picker to insert a table; when the caret is inside a table, a second menu exposes row/column
  * insert + delete operations (mirroring the Lexical playground's table controls).
  */
-import {type ReactNode, useCallback, useEffect, useState} from "react"
+import {type ReactNode, useCallback, useEffect, useMemo, useState} from "react"
 
-import {$createCodeNode, $isCodeNode} from "@lexical/code"
+import {$createCodeNode, $isCodeNode, getCodeLanguageOptions} from "@lexical/code"
 import {$isLinkNode, TOGGLE_LINK_COMMAND} from "@lexical/link"
 import {INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode} from "@lexical/list"
 import {useLexicalComposerContext} from "@lexical/react/LexicalComposerContext"
@@ -34,7 +34,7 @@ import {
     INSERT_TABLE_COMMAND,
 } from "@lexical/table"
 import {$getNearestNodeOfType} from "@lexical/utils"
-import {Button, Dropdown, Input, type MenuProps, Popover} from "antd"
+import {Button, Dropdown, Input, type MenuProps, Popover, Select} from "antd"
 import {
     $createParagraphNode,
     $getSelection,
@@ -133,6 +133,12 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
     })
     // The current block type (paragraph / h1-h3 / quote / code), shown in the block-type menu.
     const [blockType, setBlockType] = useState<string>("paragraph")
+    // The active code block's language (only meaningful when blockType === "code").
+    const [codeLanguage, setCodeLanguage] = useState<string>("")
+    const languageOptions = useMemo(
+        () => getCodeLanguageOptions().map(([value, label]) => ({value, label})),
+        [],
+    )
     // The URL under the caret (empty when not on a link), seeded into the link popover.
     const [linkUrl, setLinkUrl] = useState("")
     const [linkOpen, setLinkOpen] = useState(false)
@@ -164,6 +170,7 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
                             ? "code"
                             : "paragraph",
                 )
+                setCodeLanguage(block && $isCodeNode(block) ? (block.getLanguage() ?? "") : "")
                 setActive({
                     bold: selection.hasFormat("bold"),
                     italic: selection.hasFormat("italic"),
@@ -192,17 +199,47 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
         [editor],
     )
 
-    // Convert the current block to the chosen type. Headings/quote/code all go through
+    // Convert the current block to the chosen type. Headings/quote/paragraph go through
     // `$setBlocksType`; the markdown serializer maps them back to `#`, `>` and fenced blocks.
+    // Code is special: with a multi-line selection, `$setBlocksType` makes one code node per line
+    // (the stacked-chips bug), so mirror the Lexical playground — insert one code node and write
+    // the text back with its line breaks preserved as code lines.
     const formatBlock = useCallback(
         (key: string) => {
+            if (key === "code") {
+                editor.update(() => {
+                    const selection = $getSelection()
+                    if (!$isRangeSelection(selection)) return
+                    if (selection.isCollapsed()) {
+                        $setBlocksType(selection, () => $createCodeNode())
+                    } else {
+                        const text = selection.getTextContent()
+                        selection.insertNodes([$createCodeNode()])
+                        const next = $getSelection()
+                        if ($isRangeSelection(next)) next.insertRawText(text)
+                    }
+                })
+                return
+            }
             if (key === "quote") setBlock(() => $createQuoteNode())
-            else if (key === "code") setBlock(() => $createCodeNode())
             else if (key === "h1" || key === "h2" || key === "h3")
                 setBlock(() => $createHeadingNode(key))
             else setBlock(() => $createParagraphNode())
         },
-        [setBlock],
+        [editor, setBlock],
+    )
+
+    // Set the language on the code block under the caret (drives Prism highlighting).
+    const setCodeBlockLanguage = useCallback(
+        (lang: string) => {
+            editor.update(() => {
+                const selection = $getSelection()
+                if (!$isRangeSelection(selection)) return
+                const block = selection.anchor.getNode().getTopLevelElement()
+                if (block && $isCodeNode(block)) block.setLanguage(lang)
+            })
+        },
+        [editor],
     )
 
     // Apply / clear the link on the current selection. The editor keeps its last RangeSelection
@@ -331,6 +368,21 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
                     <ChevronDown size={13} className="shrink-0" />
                 </button>
             </Dropdown>
+
+            {/* Language picker — only when the caret is inside a code block; drives highlighting. */}
+            {blockType === "code" && !disabled ? (
+                <Select
+                    showSearch
+                    value={codeLanguage || undefined}
+                    placeholder="Language"
+                    options={languageOptions}
+                    onChange={setCodeBlockLanguage}
+                    optionFilterProp="label"
+                    popupMatchSelectWidth={false}
+                    className="min-w-[120px]"
+                    variant="filled"
+                />
+            ) : null}
             {divider}
             {button("b", "Bold", <Bold size={15} />, () => formatText("bold"), active.bold)}
             {button("i", "Italic", <Italic size={15} />, () => formatText("italic"), active.italic)}

From b5b04c107d1a7f1603dee8077392005272d715b1 Mon Sep 17 00:00:00 2001
From: Arda Erzin <ardaerzin@gmail.com>
Date: Sun, 28 Jun 2026 18:30:33 +0200
Subject: [PATCH 05/12] fix(agent): code block padding loses to a
 higher-specificity shared rule

`.editor-inner:not(.code-editor) .editor-code` (0-3-0) was overriding the
document code-block padding/fill from `.md-prose .editor-code` (0-2-0), so blocks
rendered with 8px padding instead of the intended 12px/14px. Scope the rule to
the rendered input (`.editor-input:not(.markdown-view)`) to reach 0-4-0 and win,
without touching the markdown-source view. Verified live: a created code block
now computes padding 12px 14px with the bordered/rounded surface.
---
 web/oss/src/styles/editor-theme.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/oss/src/styles/editor-theme.css b/web/oss/src/styles/editor-theme.css
index f9b47b41e9..7cde43f893 100644
--- a/web/oss/src/styles/editor-theme.css
+++ b/web/oss/src/styles/editor-theme.css
@@ -848,7 +848,10 @@ pre::-webkit-scrollbar-thumb {
     padding: 1px 5px;
     font-size: 86%;
 }
-.md-prose .editor-code {
+/* The shared `.editor-inner:not(.code-editor) .editor-code` rule (specificity 0-3-0) sets an 8px
+   padding + light fill and would beat a plain `.md-prose .editor-code` (0-2-0). Scope this to the
+   rendered input (`:not(.markdown-view)`, so source view is untouched) to reach 0-4-0 and win. */
+.md-prose .editor-input:not(.markdown-view) .editor-code {
     display: block;
     background-color: var(--ant-color-fill-quaternary);
     border: 0.5px solid var(--ant-color-border-secondary);

From c62dab0ac5be2084dceac797438691a9c8adcdf1 Mon Sep 17 00:00:00 2001
From: Arda Erzin <ardaerzin@gmail.com>
Date: Sun, 28 Jun 2026 18:43:56 +0200
Subject: [PATCH 06/12] feat(agent): code is always a block; language picker
 lives on the block

Two changes from live testing of the document editor.

- Drop the inline-code (`</>`) toolbar button. It applied per-line inline-code
  formatting, which read as a stack of chips and was the thing being mistaken for
  a code block. Code now means one thing: the block-type menu's "Code block".
- Move the language picker out of the toolbar onto the code block itself. A new
  CodeBlockLanguageMenu renders a floating language Select pinned to the top-right
  of the code block the caret is in (fixed-position portal, recomputed on editor
  update + scroll/resize), driving CodeNode.setLanguage for Prism highlighting.
  The block gets 40px top padding to seat it.

Verified live in the running app: toolbar no longer shows an inline-code button;
selecting lines + "Code block" yields one styled block with the language picker
seated on its top-right, aligned to the block and tracking scroll.
---
 web/oss/src/styles/editor-theme.css           |   4 +-
 .../SchemaControls/CodeBlockLanguageMenu.tsx  | 109 ++++++++++++++++++
 .../SchemaControls/MarkdownEditor.tsx         |   3 +
 .../agenta-ui/src/Editor/MarkdownToolbar.tsx  |  50 +-------
 4 files changed, 118 insertions(+), 48 deletions(-)
 create mode 100644 web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx

diff --git a/web/oss/src/styles/editor-theme.css b/web/oss/src/styles/editor-theme.css
index 7cde43f893..7b741c8e5a 100644
--- a/web/oss/src/styles/editor-theme.css
+++ b/web/oss/src/styles/editor-theme.css
@@ -853,10 +853,12 @@ pre::-webkit-scrollbar-thumb {
    rendered input (`:not(.markdown-view)`, so source view is untouched) to reach 0-4-0 and win. */
 .md-prose .editor-input:not(.markdown-view) .editor-code {
     display: block;
+    position: relative;
     background-color: var(--ant-color-fill-quaternary);
     border: 0.5px solid var(--ant-color-border-secondary);
     border-radius: 8px;
-    padding: 12px 14px;
+    /* Extra top padding leaves room for the floating language picker pinned to the block's top. */
+    padding: 40px 14px 12px;
     margin: 10px 0;
     font-family: Menlo, Consolas, Monaco, monospace;
     font-size: 12px;
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
new file mode 100644
index 0000000000..5abd50aed3
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
@@ -0,0 +1,109 @@
+/**
+ * CodeBlockLanguageMenu
+ *
+ * Renders a language picker pinned to the top-right of the code block the caret is in, instead of
+ * in the toolbar — so the language reads as part of the block (and there can be several blocks with
+ * different languages). It mounts inside the editor's `EditorProvider`. The picker drives
+ * `CodeNode.setLanguage`, which Prism highlighting (registered in MarkdownEditor) reads.
+ *
+ * Positioning: a fixed-position portal anchored to the block's viewport rect, recomputed on every
+ * editor update plus scroll/resize. While focus sits in the open dropdown (no range selection) the
+ * menu stays put — it only hides when the caret moves into a non-code block.
+ */
+import {useCallback, useEffect, useMemo, useState} from "react"
+
+import {useLexicalComposerContext} from "@agenta/ui"
+import {$isCodeNode, getCodeLanguageOptions} from "@lexical/code"
+import {Select} from "antd"
+import {$getNodeByKey, $getSelection, $isRangeSelection} from "lexical"
+import {createPortal} from "react-dom"
+
+interface MenuPos {
+    key: string
+    lang: string
+    top: number
+    right: number
+}
+
+export function CodeBlockLanguageMenu() {
+    const [editor] = useLexicalComposerContext()
+    const options = useMemo(
+        () => getCodeLanguageOptions().map(([value, label]) => ({value, label})),
+        [],
+    )
+    const [pos, setPos] = useState<MenuPos | null>(null)
+
+    const recompute = useCallback(() => {
+        editor.getEditorState().read(() => {
+            const selection = $getSelection()
+            // No range selection means focus left the editor (e.g. into the open dropdown) — keep
+            // the menu where it is rather than flickering it away mid-interaction.
+            if (!$isRangeSelection(selection)) return
+            const block = selection.anchor.getNode().getTopLevelElement()
+            if (!block || !$isCodeNode(block)) {
+                setPos(null)
+                return
+            }
+            const el = editor.getElementByKey(block.getKey())
+            if (!el) {
+                setPos(null)
+                return
+            }
+            const rect = el.getBoundingClientRect()
+            setPos({
+                key: block.getKey(),
+                lang: block.getLanguage() ?? "",
+                top: rect.top,
+                right: window.innerWidth - rect.right,
+            })
+        })
+    }, [editor])
+
+    useEffect(() => editor.registerUpdateListener(() => recompute()), [editor, recompute])
+
+    useEffect(() => {
+        const onMove = () => recompute()
+        // capture: the editor scrolls in an inner container, not the window
+        window.addEventListener("scroll", onMove, true)
+        window.addEventListener("resize", onMove)
+        return () => {
+            window.removeEventListener("scroll", onMove, true)
+            window.removeEventListener("resize", onMove)
+        }
+    }, [recompute])
+
+    const setLanguage = useCallback(
+        (lang: string) => {
+            editor.update(() => {
+                if (!pos) return
+                const node = $getNodeByKey(pos.key)
+                if ($isCodeNode(node)) node.setLanguage(lang)
+            })
+        },
+        [editor, pos],
+    )
+
+    if (!pos) return null
+
+    return createPortal(
+        <div
+            className="fixed z-[1100]"
+            style={{top: pos.top + 6, right: pos.right + 8}}
+            // Don't let interactions here reach the editor.
+            onMouseDown={(e) => e.stopPropagation()}
+        >
+            <Select
+                showSearch
+                value={pos.lang || undefined}
+                placeholder="Plain text"
+                options={options}
+                onChange={setLanguage}
+                optionFilterProp="label"
+                popupMatchSelectWidth={false}
+                variant="filled"
+                className="min-w-[112px]"
+            />
+        </div>,
+        document.body,
+    )
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
index 0ec7418e13..bb301ccb2f 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
@@ -40,6 +40,8 @@ import {cn} from "@agenta/ui/styles"
 import {registerCodeHighlighting} from "@lexical/code"
 import {Tag} from "antd"
 
+import {CodeBlockLanguageMenu} from "./CodeBlockLanguageMenu"
+
 type MarkdownView = "source" | "rendered"
 
 export interface MarkdownEditorProps {
@@ -317,6 +319,7 @@ export function MarkdownEditor({
             )}
             <MarkdownViewSync enabled={markdownView} />
             <CodeHighlightSync />
+            {!editorDisabled ? <CodeBlockLanguageMenu /> : null}
         </EditorProvider>
     )
 }
diff --git a/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx b/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
index 2882a58722..6dbc0d3498 100644
--- a/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
+++ b/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
@@ -11,9 +11,9 @@
  * size picker to insert a table; when the caret is inside a table, a second menu exposes row/column
  * insert + delete operations (mirroring the Lexical playground's table controls).
  */
-import {type ReactNode, useCallback, useEffect, useMemo, useState} from "react"
+import {type ReactNode, useCallback, useEffect, useState} from "react"
 
-import {$createCodeNode, $isCodeNode, getCodeLanguageOptions} from "@lexical/code"
+import {$createCodeNode, $isCodeNode} from "@lexical/code"
 import {$isLinkNode, TOGGLE_LINK_COMMAND} from "@lexical/link"
 import {INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode} from "@lexical/list"
 import {useLexicalComposerContext} from "@lexical/react/LexicalComposerContext"
@@ -34,7 +34,7 @@ import {
     INSERT_TABLE_COMMAND,
 } from "@lexical/table"
 import {$getNearestNodeOfType} from "@lexical/utils"
-import {Button, Dropdown, Input, type MenuProps, Popover, Select} from "antd"
+import {Button, Dropdown, Input, type MenuProps, Popover} from "antd"
 import {
     $createParagraphNode,
     $getSelection,
@@ -46,7 +46,6 @@ import {
 import {
     Bold,
     ChevronDown,
-    Code,
     Italic,
     Link as LinkIcon,
     List,
@@ -125,7 +124,6 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
     const [active, setActive] = useState({
         bold: false,
         italic: false,
-        code: false,
         bullet: false,
         ordered: false,
         link: false,
@@ -133,12 +131,6 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
     })
     // The current block type (paragraph / h1-h3 / quote / code), shown in the block-type menu.
     const [blockType, setBlockType] = useState<string>("paragraph")
-    // The active code block's language (only meaningful when blockType === "code").
-    const [codeLanguage, setCodeLanguage] = useState<string>("")
-    const languageOptions = useMemo(
-        () => getCodeLanguageOptions().map(([value, label]) => ({value, label})),
-        [],
-    )
     // The URL under the caret (empty when not on a link), seeded into the link popover.
     const [linkUrl, setLinkUrl] = useState("")
     const [linkOpen, setLinkOpen] = useState(false)
@@ -170,11 +162,9 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
                             ? "code"
                             : "paragraph",
                 )
-                setCodeLanguage(block && $isCodeNode(block) ? (block.getLanguage() ?? "") : "")
                 setActive({
                     bold: selection.hasFormat("bold"),
                     italic: selection.hasFormat("italic"),
-                    code: selection.hasFormat("code"),
                     bullet: listType === "bullet",
                     ordered: listType === "number",
                     link: Boolean(linkNode),
@@ -229,19 +219,6 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
         [editor, setBlock],
     )
 
-    // Set the language on the code block under the caret (drives Prism highlighting).
-    const setCodeBlockLanguage = useCallback(
-        (lang: string) => {
-            editor.update(() => {
-                const selection = $getSelection()
-                if (!$isRangeSelection(selection)) return
-                const block = selection.anchor.getNode().getTopLevelElement()
-                if (block && $isCodeNode(block)) block.setLanguage(lang)
-            })
-        },
-        [editor],
-    )
-
     // Apply / clear the link on the current selection. The editor keeps its last RangeSelection
     // while focus sits in the popover input, so the command still targets the selected text.
     const applyLink = useCallback(() => {
@@ -369,30 +346,9 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
                 </button>
             </Dropdown>
 
-            {/* Language picker — only when the caret is inside a code block; drives highlighting. */}
-            {blockType === "code" && !disabled ? (
-                <Select
-                    showSearch
-                    value={codeLanguage || undefined}
-                    placeholder="Language"
-                    options={languageOptions}
-                    onChange={setCodeBlockLanguage}
-                    optionFilterProp="label"
-                    popupMatchSelectWidth={false}
-                    className="min-w-[120px]"
-                    variant="filled"
-                />
-            ) : null}
             {divider}
             {button("b", "Bold", <Bold size={15} />, () => formatText("bold"), active.bold)}
             {button("i", "Italic", <Italic size={15} />, () => formatText("italic"), active.italic)}
-            {button(
-                "code",
-                "Inline code",
-                <Code size={15} />,
-                () => formatText("code"),
-                active.code,
-            )}
             {divider}
             {button(
                 "ul",

From 420912c3b09e087c4d09bd009d595201cd0f8543 Mon Sep 17 00:00:00 2001
From: Arda Erzin <ardaerzin@gmail.com>
Date: Sun, 28 Jun 2026 18:54:31 +0200
Subject: [PATCH 07/12] fix(agent): stop the built-in language label
 overlapping the picker; polish it

The code block carried two language indicators that overlapped: the editor's
built-in uppercase `::after` label (globals.css, `attr(data-highlight-language)`)
and the new interactive picker. Hide the built-in label on document code blocks
(0-6-1 selector to beat globals' 0-5-1) so only the picker shows.

Polish the picker: borderless + compact (24px control, 11px text, sans), and
render the friendly language name ("JavaScript") for the selected value instead
of the raw id.

Verified live in the running app: two code blocks in one editor render
independently; the picker seats on the active block's top-right with no overlap;
the built-in `::after` label computes to `none`.
---
 web/oss/src/styles/editor-theme.css           |  9 +++++++++
 .../SchemaControls/CodeBlockLanguageMenu.tsx  | 20 ++++++++++++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/web/oss/src/styles/editor-theme.css b/web/oss/src/styles/editor-theme.css
index 7b741c8e5a..59d88c19f5 100644
--- a/web/oss/src/styles/editor-theme.css
+++ b/web/oss/src/styles/editor-theme.css
@@ -851,6 +851,15 @@ pre::-webkit-scrollbar-thumb {
 /* The shared `.editor-inner:not(.code-editor) .editor-code` rule (specificity 0-3-0) sets an 8px
    padding + light fill and would beat a plain `.md-prose .editor-code` (0-2-0). Scope this to the
    rendered input (`:not(.markdown-view)`, so source view is untouched) to reach 0-4-0 and win. */
+/* Hide the editor's built-in uppercase language label (globals.css renders it via
+   `::after content: attr(data-highlight-language)`, specificity 0-5-1) on document code blocks —
+   the CodeBlockLanguageMenu supplies an interactive picker in its place. Needs 0-6-1 to win. */
+.md-prose
+    .editor-inner:not(.code-editor)
+    .editor-input:not(.markdown-view)
+    .editor-code::after {
+    content: none;
+}
 .md-prose .editor-input:not(.markdown-view) .editor-code {
     display: block;
     position: relative;
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
index 5abd50aed3..f8da8aa7df 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
@@ -13,7 +13,7 @@
 import {useCallback, useEffect, useMemo, useState} from "react"
 
 import {useLexicalComposerContext} from "@agenta/ui"
-import {$isCodeNode, getCodeLanguageOptions} from "@lexical/code"
+import {$isCodeNode, getCodeLanguageOptions, getLanguageFriendlyName} from "@lexical/code"
 import {Select} from "antd"
 import {$getNodeByKey, $getSelection, $isRangeSelection} from "lexical"
 import {createPortal} from "react-dom"
@@ -87,8 +87,14 @@ export function CodeBlockLanguageMenu() {
 
     return createPortal(
         <div
-            className="fixed z-[1100]"
-            style={{top: pos.top + 6, right: pos.right + 8}}
+            className={[
+                "fixed z-[1100] rounded-md bg-[var(--ant-color-bg-elevated)]",
+                "[&_.ant-select-selector]:!h-6 [&_.ant-select-selector]:!px-2",
+                "[&_.ant-select-selection-item]:!text-[11px] [&_.ant-select-selection-item]:!leading-6",
+                "[&_.ant-select-selection-placeholder]:!text-[11px] [&_.ant-select-selection-placeholder]:!leading-6",
+                "[&_.ant-select-selection-search-input]:!h-6",
+            ].join(" ")}
+            style={{top: pos.top + 7, right: pos.right + 8}}
             // Don't let interactions here reach the editor.
             onMouseDown={(e) => e.stopPropagation()}
         >
@@ -100,8 +106,12 @@ export function CodeBlockLanguageMenu() {
                 onChange={setLanguage}
                 optionFilterProp="label"
                 popupMatchSelectWidth={false}
-                variant="filled"
-                className="min-w-[112px]"
+                variant="borderless"
+                className="min-w-[96px] font-sans"
+                // Show the friendly name ("JavaScript") for the selected value, not the raw id.
+                labelRender={({value}) =>
+                    value ? getLanguageFriendlyName(String(value)) : "Plain text"
+                }
             />
         </div>,
         document.body,

From 17d68e45d58a292c445ac701940916b087b32aac Mon Sep 17 00:00:00 2001
From: Arda Erzin <ardaerzin@gmail.com>
Date: Sun, 28 Jun 2026 18:58:34 +0200
Subject: [PATCH 08/12] fix(agent): show the language picker on every code
 block, not just the focused one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each code block reserves a 40px top strip for the language picker, but the picker
only rendered on the block the caret was in — so other blocks showed an empty gap.
Render a picker for every code block in the document (iterating the root's
CodeNodes rather than the selection), clipped to the editor's scroll viewport so
blocks scrolled out of view don't float a picker over the toolbar. Read-only
panes get the picker too (disabled), so previews also fill the strip.

Verified live: with two code blocks and the caret in a heading (neither focused),
both blocks render their picker aligned to their own top-right.
---
 .../SchemaControls/CodeBlockLanguageMenu.tsx  | 135 +++++++++---------
 .../SchemaControls/MarkdownEditor.tsx         |   2 +-
 2 files changed, 72 insertions(+), 65 deletions(-)

diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
index f8da8aa7df..f1af1d94ac 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
@@ -1,67 +1,69 @@
 /**
  * CodeBlockLanguageMenu
  *
- * Renders a language picker pinned to the top-right of the code block the caret is in, instead of
- * in the toolbar — so the language reads as part of the block (and there can be several blocks with
- * different languages). It mounts inside the editor's `EditorProvider`. The picker drives
- * `CodeNode.setLanguage`, which Prism highlighting (registered in MarkdownEditor) reads.
+ * Renders a language picker pinned to the top-right of EVERY code block in the editor (not only the
+ * focused one), so each block's reserved top strip always carries its language instead of leaving a
+ * dead gap. It mounts inside the editor's `EditorProvider`. The picker drives `CodeNode.setLanguage`,
+ * which the Prism highlighter (registered in MarkdownEditor) reads.
  *
- * Positioning: a fixed-position portal anchored to the block's viewport rect, recomputed on every
- * editor update plus scroll/resize. While focus sits in the open dropdown (no range selection) the
- * menu stays put — it only hides when the caret moves into a non-code block.
+ * Positioning: fixed-position portals anchored to each block's viewport rect, recomputed on every
+ * editor update plus scroll/resize. Pickers whose block has scrolled out of the editor's scroll
+ * viewport are dropped so they don't float over the toolbar or neighbouring UI.
  */
 import {useCallback, useEffect, useMemo, useState} from "react"
 
 import {useLexicalComposerContext} from "@agenta/ui"
 import {$isCodeNode, getCodeLanguageOptions, getLanguageFriendlyName} from "@lexical/code"
 import {Select} from "antd"
-import {$getNodeByKey, $getSelection, $isRangeSelection} from "lexical"
+import {$getNodeByKey, $getRoot} from "lexical"
 import {createPortal} from "react-dom"
 
-interface MenuPos {
+interface BlockMenu {
     key: string
     lang: string
     top: number
     right: number
 }
 
-export function CodeBlockLanguageMenu() {
+export function CodeBlockLanguageMenu({editable = true}: {editable?: boolean}) {
     const [editor] = useLexicalComposerContext()
     const options = useMemo(
         () => getCodeLanguageOptions().map(([value, label]) => ({value, label})),
         [],
     )
-    const [pos, setPos] = useState<MenuPos | null>(null)
+    const [menus, setMenus] = useState<BlockMenu[]>([])
 
     const recompute = useCallback(() => {
+        const rootEl = editor.getRootElement()
+        // `.md-prose` is the editor's scrolling viewport (see MarkdownEditor) — clip pickers to it.
+        const viewport = rootEl?.closest<HTMLElement>(".md-prose")?.getBoundingClientRect()
         editor.getEditorState().read(() => {
-            const selection = $getSelection()
-            // No range selection means focus left the editor (e.g. into the open dropdown) — keep
-            // the menu where it is rather than flickering it away mid-interaction.
-            if (!$isRangeSelection(selection)) return
-            const block = selection.anchor.getNode().getTopLevelElement()
-            if (!block || !$isCodeNode(block)) {
-                setPos(null)
-                return
-            }
-            const el = editor.getElementByKey(block.getKey())
-            if (!el) {
-                setPos(null)
-                return
+            const next: BlockMenu[] = []
+            for (const child of $getRoot().getChildren()) {
+                if (!$isCodeNode(child)) continue
+                const el = editor.getElementByKey(child.getKey())
+                if (!el) continue
+                const rect = el.getBoundingClientRect()
+                // Skip blocks whose top edge isn't within the visible viewport.
+                if (viewport && (rect.top < viewport.top - 4 || rect.top > viewport.bottom - 10)) {
+                    continue
+                }
+                next.push({
+                    key: child.getKey(),
+                    lang: child.getLanguage() ?? "",
+                    top: rect.top,
+                    right: window.innerWidth - rect.right,
+                })
             }
-            const rect = el.getBoundingClientRect()
-            setPos({
-                key: block.getKey(),
-                lang: block.getLanguage() ?? "",
-                top: rect.top,
-                right: window.innerWidth - rect.right,
-            })
+            setMenus(next)
         })
     }, [editor])
 
     useEffect(() => editor.registerUpdateListener(() => recompute()), [editor, recompute])
 
     useEffect(() => {
+        // Recompute after mount so existing blocks get pickers without an edit.
+        recompute()
         const onMove = () => recompute()
         // capture: the editor scrolls in an inner container, not the window
         window.addEventListener("scroll", onMove, true)
@@ -73,47 +75,52 @@ export function CodeBlockLanguageMenu() {
     }, [recompute])
 
     const setLanguage = useCallback(
-        (lang: string) => {
+        (key: string, lang: string) => {
             editor.update(() => {
-                if (!pos) return
-                const node = $getNodeByKey(pos.key)
+                const node = $getNodeByKey(key)
                 if ($isCodeNode(node)) node.setLanguage(lang)
             })
         },
-        [editor, pos],
+        [editor],
     )
 
-    if (!pos) return null
+    if (!menus.length) return null
 
     return createPortal(
-        <div
-            className={[
-                "fixed z-[1100] rounded-md bg-[var(--ant-color-bg-elevated)]",
-                "[&_.ant-select-selector]:!h-6 [&_.ant-select-selector]:!px-2",
-                "[&_.ant-select-selection-item]:!text-[11px] [&_.ant-select-selection-item]:!leading-6",
-                "[&_.ant-select-selection-placeholder]:!text-[11px] [&_.ant-select-selection-placeholder]:!leading-6",
-                "[&_.ant-select-selection-search-input]:!h-6",
-            ].join(" ")}
-            style={{top: pos.top + 7, right: pos.right + 8}}
-            // Don't let interactions here reach the editor.
-            onMouseDown={(e) => e.stopPropagation()}
-        >
-            <Select
-                showSearch
-                value={pos.lang || undefined}
-                placeholder="Plain text"
-                options={options}
-                onChange={setLanguage}
-                optionFilterProp="label"
-                popupMatchSelectWidth={false}
-                variant="borderless"
-                className="min-w-[96px] font-sans"
-                // Show the friendly name ("JavaScript") for the selected value, not the raw id.
-                labelRender={({value}) =>
-                    value ? getLanguageFriendlyName(String(value)) : "Plain text"
-                }
-            />
-        </div>,
+        <>
+            {menus.map((m) => (
+                <div
+                    key={m.key}
+                    className={[
+                        "fixed z-[1100] rounded-md bg-[var(--ant-color-bg-elevated)]",
+                        "[&_.ant-select-selector]:!h-6 [&_.ant-select-selector]:!px-2",
+                        "[&_.ant-select-selection-item]:!text-[11px] [&_.ant-select-selection-item]:!leading-6",
+                        "[&_.ant-select-selection-placeholder]:!text-[11px] [&_.ant-select-selection-placeholder]:!leading-6",
+                        "[&_.ant-select-selection-search-input]:!h-6",
+                    ].join(" ")}
+                    style={{top: m.top + 7, right: m.right + 8}}
+                    // Don't let interactions here reach the editor.
+                    onMouseDown={(e) => e.stopPropagation()}
+                >
+                    <Select
+                        showSearch
+                        disabled={!editable}
+                        value={m.lang || undefined}
+                        placeholder="Plain text"
+                        options={options}
+                        onChange={(lang) => setLanguage(m.key, lang)}
+                        optionFilterProp="label"
+                        popupMatchSelectWidth={false}
+                        variant="borderless"
+                        className="min-w-[96px] font-sans"
+                        // Show the friendly name ("JavaScript") for the selected value, not the raw id.
+                        labelRender={({value}) =>
+                            value ? getLanguageFriendlyName(String(value)) : "Plain text"
+                        }
+                    />
+                </div>
+            ))}
+        </>,
         document.body,
     )
 }
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
index bb301ccb2f..5cf2042ba6 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
@@ -319,7 +319,7 @@ export function MarkdownEditor({
             )}
             <MarkdownViewSync enabled={markdownView} />
             <CodeHighlightSync />
-            {!editorDisabled ? <CodeBlockLanguageMenu /> : null}
+            <CodeBlockLanguageMenu editable={!editorDisabled} />
         </EditorProvider>
     )
 }

From 4be2b600e5b236577ce361e36de642daa46ff10c Mon Sep 17 00:00:00 2001
From: Arda Erzin <ardaerzin@gmail.com>
Date: Sun, 28 Jun 2026 19:10:44 +0200
Subject: [PATCH 09/12] fix(agent): align the Triggers empty state with the
 other config sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Triggers showed a plain sentence ("No triggers yet. Add an app trigger or a
schedule…") while Tools/MCP/Skills use "No X yet — <add link>". Match it:
"No triggers yet — add a trigger", where the link opens the existing add menu
(App trigger / Scheduled trigger), so the "app trigger or a schedule" intent is
kept in the menu rather than the copy.

To guarantee parity, extract the shared `AddTextLink` (was local to
AgentTemplateControl) into its own module and use it in both. AddTriggerDropdown
gains an optional `trigger` so the empty-state link reuses the header's menu.

Verified live: the Triggers link is byte-identical in class to the Skills link
and opens the same add menu.
---
 .../SchemaControls/AddTextLink.tsx            | 22 ++++++++++
 .../SchemaControls/AgentTemplateControl.tsx   | 35 +--------------
 .../TriggerManagementSection.tsx              | 44 +++++++++++++------
 3 files changed, 54 insertions(+), 47 deletions(-)
 create mode 100644 web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AddTextLink.tsx

diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AddTextLink.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AddTextLink.tsx
new file mode 100644
index 0000000000..fb3dc2284c
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AddTextLink.tsx
@@ -0,0 +1,22 @@
+import {type ButtonHTMLAttributes, forwardRef} from "react"
+
+/**
+ * The inline "add a …" accent text-link used by every config-section empty state ("No tools yet —
+ * add a tool"). forwardRef + prop spread so it can be the trigger of a Popover/Dropdown (which
+ * inject `onClick` and a positioning ref).
+ */
+export const AddTextLink = forwardRef<
+    HTMLButtonElement,
+    {label: string} & ButtonHTMLAttributes<HTMLButtonElement>
+>(function AddTextLink({label, type = "button", ...rest}, ref) {
+    return (
+        <button
+            ref={ref}
+            type={type}
+            {...rest}
+            className="cursor-pointer border-0 bg-transparent p-0 text-xs font-medium text-[var(--ag-c-1677FF,#1677ff)] hover:underline"
+        >
+            {label}
+        </button>
+    )
+})
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx
index fb7982ce5d..4fe789f956 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx
@@ -21,15 +21,7 @@
  * Sections are schema-driven: each renders only when its field exists in the resolved
  * schema, so the panel tracks the backend contract instead of hard-coding fields.
  */
-import {
-    type ButtonHTMLAttributes,
-    forwardRef,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from "react"
+import {useCallback, useEffect, useMemo, useRef, useState} from "react"
 
 import {vaultSecretsQueryAtom} from "@agenta/entities/secret"
 import type {SchemaProperty} from "@agenta/entities/shared"
@@ -63,6 +55,7 @@ import {useAtomValue} from "jotai"
 
 import {useOptionalDrillIn} from "../components/MoleculeDrillInContext"
 
+import {AddTextLink} from "./AddTextLink"
 import {agentTemplateLayoutAtom} from "./agentTemplateLayout"
 import {ClaudePermissionsControl} from "./ClaudePermissionsControl"
 import {CodeEditor} from "./CodeEditor"
@@ -492,30 +485,6 @@ function ItemRow({
     )
 }
 
-/**
- * A text-only "add" link for a section's empty state — no border/background/padding, just inline
- * link text inside a muted sentence (the section header keeps the compact `+` for quick-add).
- *
- * forwardRef + props spread so it can be a popover trigger (ToolSelectorPopover): the popover
- * clones the trigger to attach its positioning ref + onClick. Without the ref it can't anchor and
- * the popover renders at the top-left and immediately closes.
- */
-const AddTextLink = forwardRef<
-    HTMLButtonElement,
-    {label: string} & ButtonHTMLAttributes<HTMLButtonElement>
->(function AddTextLink({label, type = "button", ...rest}, ref) {
-    return (
-        <button
-            ref={ref}
-            type={type}
-            {...rest}
-            className="cursor-pointer border-0 bg-transparent p-0 text-xs font-medium text-[var(--ag-c-1677FF,#1677ff)] hover:underline"
-        >
-            {label}
-        </button>
-    )
-})
-
 /**
  * An instructions markdown file row. Avatar + filename + a 2-line preview of the (markdown-stripped)
  * content, clamped with an ellipsis. The whole row opens the editor drawer for the full content —
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/TriggerManagementSection.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/TriggerManagementSection.tsx
index 1d4e0e1867..c515dc2487 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/TriggerManagementSection.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/TriggerManagementSection.tsx
@@ -15,7 +15,7 @@
  *  2. Default-bind — opening a create drawer from this section pre-binds the new trigger
  *     to the current agent via `defaultReferences` (see the trigger drawer atoms).
  */
-import {useCallback, useMemo} from "react"
+import {type ReactNode, useCallback, useMemo} from "react"
 
 import {
     describeCron,
@@ -61,6 +61,8 @@ import TriggerDeliveriesDrawer from "../../gatewayTrigger/drawers/TriggerDeliver
 import TriggerScheduleDrawer from "../../gatewayTrigger/drawers/TriggerScheduleDrawer"
 import TriggerSubscriptionDrawer from "../../gatewayTrigger/drawers/TriggerSubscriptionDrawer"
 
+import {AddTextLink} from "./AddTextLink"
+
 export interface TriggerManagementSectionProps {
     /** The open agent's revision id (the drill-in entityId). */
     entityId: string | null
@@ -492,10 +494,15 @@ export function TriggerManagementSection({entityId, disabled}: TriggerManagement
     return (
         <div className="flex flex-col gap-2">
             {count === 0 ? (
-                <Typography.Text type="secondary" className="text-xs">
-                    No triggers yet. Add an app trigger or a schedule to run this agent
-                    automatically.
-                </Typography.Text>
+                !disabled ? (
+                    <span className="text-xs text-[var(--ag-c-97A4B0,#97a4b0)]">
+                        No triggers yet —{" "}
+                        <AddTriggerDropdown
+                            entityId={entityId}
+                            trigger={<AddTextLink label="add a trigger" />}
+                        />
+                    </span>
+                ) : null
             ) : (
                 <div className="flex flex-col gap-2">
                     {scopedSchedules.map((record) => {
@@ -574,7 +581,14 @@ export function TriggerManagementSection({entityId, disabled}: TriggerManagement
  * the current agent). Kept separate from the section body because the accordion renders
  * `extra` outside the section content.
  */
-export function AddTriggerDropdown({entityId}: {entityId: string | null}) {
+export function AddTriggerDropdown({
+    entityId,
+    trigger,
+}: {
+    entityId: string | null
+    /** Custom trigger element (e.g. an inline text-link for an empty state). Defaults to a `+`. */
+    trigger?: ReactNode
+}) {
     const {defaultReferences, defaultBoundLabel} = useAgentTriggers(entityId)
     const openCatalog = useSetAtom(triggerCatalogDrawerOpenAtom)
     const openScheduleDrawer = useSetAtom(triggerScheduleDrawerAtom)
@@ -614,14 +628,16 @@ export function AddTriggerDropdown({entityId}: {entityId: string | null}) {
 
     return (
         <Dropdown trigger={["click"]} menu={{items}} styles={{root: {width: 200}}}>
-            <Tooltip title="Add trigger">
-                <Button
-                    type="text"
-                    icon={<Plus size={16} />}
-                    aria-label="Add trigger"
-                    onClick={(e) => e.stopPropagation()}
-                />
-            </Tooltip>
+            {trigger ?? (
+                <Tooltip title="Add trigger">
+                    <Button
+                        type="text"
+                        icon={<Plus size={16} />}
+                        aria-label="Add trigger"
+                        onClick={(e) => e.stopPropagation()}
+                    />
+                </Tooltip>
+            )}
         </Dropdown>
     )
 }

From 65d5a8088034381b4639140f17a1e40fd1eb500e Mon Sep 17 00:00:00 2001
From: Arda Erzin <ardaerzin@gmail.com>
Date: Sun, 28 Jun 2026 19:35:03 +0200
Subject: [PATCH 10/12] feat(agent): per-depth markers for nested lists,
 matching the Lexical playground
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nested numbered lists rendered every level as decimal (1., 1.), so depth was
invisible. Lexical already DOM-nests indented items (the wrapper li carries
`editor-nested-list-item`, which is marker-less), and the markdown round-trip
preserves nesting at a 4-space indent (LIST_INDENT_SIZE). So this is purely a
marker-styling gap: add depth-cycling `list-style-type` via descendant selectors
like the playground — ordered 1 → A → a → I → i, unordered • → ◦ → ▪ — scoped to
the rendered document view, plus the matching rules in MarkdownPreview.

Verified live: a nested ordered item computes upper-alpha ("A.") under the
decimal parent, with the wrapper li marker-less.
---
 web/oss/src/styles/editor-theme.css           | 43 +++++++++++++++++++
 .../agenta-ui/src/MarkdownPreview.tsx         |  2 +
 2 files changed, 45 insertions(+)

diff --git a/web/oss/src/styles/editor-theme.css b/web/oss/src/styles/editor-theme.css
index 59d88c19f5..e5da6e4368 100644
--- a/web/oss/src/styles/editor-theme.css
+++ b/web/oss/src/styles/editor-theme.css
@@ -833,6 +833,49 @@ pre::-webkit-scrollbar-thumb {
     margin: 0;
     list-style-type: none;
 }
+/* Per-depth markers for nested lists, matching the Lexical playground: ordered cycles
+   1 → A → a → I → i, unordered • → ◦ → ▪. Lexical DOM-nests indented items (the wrapper li
+   carries `editor-nested-list-item`, which is marker-less above), so descendant `ol ol` /
+   `ul ul` selectors pick the right style per level. Scoped to the rendered document view. */
+.md-prose .editor-input:not(.markdown-view) ol.editor-list-ol {
+    list-style-type: decimal;
+}
+.md-prose .editor-input:not(.markdown-view) ol.editor-list-ol ol.editor-list-ol {
+    list-style-type: upper-alpha;
+}
+.md-prose .editor-input:not(.markdown-view) ol.editor-list-ol ol.editor-list-ol ol.editor-list-ol {
+    list-style-type: lower-alpha;
+}
+.md-prose
+    .editor-input:not(.markdown-view)
+    ol.editor-list-ol
+    ol.editor-list-ol
+    ol.editor-list-ol
+    ol.editor-list-ol {
+    list-style-type: upper-roman;
+}
+.md-prose
+    .editor-input:not(.markdown-view)
+    ol.editor-list-ol
+    ol.editor-list-ol
+    ol.editor-list-ol
+    ol.editor-list-ol
+    ol.editor-list-ol {
+    list-style-type: lower-roman;
+}
+.md-prose .editor-input:not(.markdown-view) ul.editor-list-ul {
+    list-style-type: disc;
+}
+.md-prose .editor-input:not(.markdown-view) ul.editor-list-ul ul.editor-list-ul {
+    list-style-type: circle;
+}
+.md-prose
+    .editor-input:not(.markdown-view)
+    ul.editor-list-ul
+    ul.editor-list-ul
+    ul.editor-list-ul {
+    list-style-type: square;
+}
 .md-prose .editor-quote {
     font-size: 13px;
     font-style: italic;
diff --git a/web/packages/agenta-ui/src/MarkdownPreview.tsx b/web/packages/agenta-ui/src/MarkdownPreview.tsx
index ffafcd5fe5..72834798db 100644
--- a/web/packages/agenta-ui/src/MarkdownPreview.tsx
+++ b/web/packages/agenta-ui/src/MarkdownPreview.tsx
@@ -28,6 +28,8 @@ const MD_CLASS = [
     "[&_h4]:text-[13px] [&_h4]:font-semibold [&_h4]:text-[var(--ant-color-text-secondary)]",
     "[&_p]:my-2",
     "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-1",
+    // Per-depth list markers, matching the editor + the Lexical playground (1 → A → a, • → ◦ → ▪).
+    "[&_ol_ol]:list-[upper-alpha] [&_ol_ol_ol]:list-[lower-alpha] [&_ul_ul]:list-[circle] [&_ul_ul_ul]:list-[square]",
     "[&_a]:text-[var(--ant-color-primary)] [&_a]:underline",
     "[&_code]:font-mono [&_code]:text-[0.86em] [&_code]:bg-[var(--ant-color-fill-tertiary)] [&_code]:border [&_code]:border-solid [&_code]:border-[var(--ant-color-border-secondary)] [&_code]:rounded [&_code]:px-1.5 [&_code]:py-px",
     "[&_pre]:my-2.5 [&_pre]:bg-[var(--ant-color-fill-quaternary)] [&_pre]:border [&_pre]:border-solid [&_pre]:border-[var(--ant-color-border-secondary)] [&_pre]:rounded-lg [&_pre]:p-3 [&_pre]:overflow-x-auto",

From 43d8be0c11df7c178c36c3301f61b53852090328 Mon Sep 17 00:00:00 2001
From: Arda Erzin <ardaerzin@gmail.com>
Date: Sun, 28 Jun 2026 19:43:40 +0200
Subject: [PATCH 11/12] =?UTF-8?q?fix(agent):=20code-block=20language=20pic?=
 =?UTF-8?q?ker=20=E2=80=94=20cold-load=20visibility=20+=20wrong=20font?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- On a cold open the drawer is still animating and the markdown still hydrating,
  so the first rect read is stale and the picker only appeared once a later
  event (e.g. a hover) nudged a recompute. Re-run recompute across the next
  frame + a few timeouts so it settles on the real position without interaction.
- The picker portals to <body>, outside the antd theme container, so antd's
  inner `.ant-select-selection-item` fell back to a serif (Times). Set the app
  font (`var(--ant-font-family)`) on the wrapper and force the inner item /
  placeholder / search input to inherit it. Verified live: now renders Inter.
---
 .../SchemaControls/CodeBlockLanguageMenu.tsx  | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
index f1af1d94ac..d2019226bc 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
@@ -62,13 +62,20 @@ export function CodeBlockLanguageMenu({editable = true}: {editable?: boolean}) {
     useEffect(() => editor.registerUpdateListener(() => recompute()), [editor, recompute])
 
     useEffect(() => {
-        // Recompute after mount so existing blocks get pickers without an edit.
+        // Recompute after mount so existing blocks get pickers without an edit. On a cold open the
+        // drawer is still sliding in and the markdown is still hydrating, so the first rects are
+        // stale (the picker would otherwise only appear once some later event nudged a recompute —
+        // e.g. a hover). Re-run across the next frames + a few timeouts to settle on the real rects.
         recompute()
+        const raf = requestAnimationFrame(recompute)
+        const timers = [60, 180, 360].map((t) => window.setTimeout(recompute, t))
         const onMove = () => recompute()
         // capture: the editor scrolls in an inner container, not the window
         window.addEventListener("scroll", onMove, true)
         window.addEventListener("resize", onMove)
         return () => {
+            cancelAnimationFrame(raf)
+            timers.forEach(clearTimeout)
             window.removeEventListener("scroll", onMove, true)
             window.removeEventListener("resize", onMove)
         }
@@ -97,8 +104,17 @@ export function CodeBlockLanguageMenu({editable = true}: {editable?: boolean}) {
                         "[&_.ant-select-selection-item]:!text-[11px] [&_.ant-select-selection-item]:!leading-6",
                         "[&_.ant-select-selection-placeholder]:!text-[11px] [&_.ant-select-selection-placeholder]:!leading-6",
                         "[&_.ant-select-selection-search-input]:!h-6",
+                        // Portaled to <body>, antd sets a serif fallback font on the inner item; make
+                        // it inherit the app font set on the wrapper below.
+                        "[&_.ant-select-selection-item]:!font-[inherit]",
+                        "[&_.ant-select-selection-placeholder]:!font-[inherit]",
+                        "[&_.ant-select-selection-search-input]:!font-[inherit]",
                     ].join(" ")}
-                    style={{top: m.top + 7, right: m.right + 8}}
+                    style={{
+                        top: m.top + 7,
+                        right: m.right + 8,
+                        fontFamily: "var(--ant-font-family)",
+                    }}
                     // Don't let interactions here reach the editor.
                     onMouseDown={(e) => e.stopPropagation()}
                 >
@@ -112,7 +128,7 @@ export function CodeBlockLanguageMenu({editable = true}: {editable?: boolean}) {
                         optionFilterProp="label"
                         popupMatchSelectWidth={false}
                         variant="borderless"
-                        className="min-w-[96px] font-sans"
+                        className="min-w-[96px]"
                         // Show the friendly name ("JavaScript") for the selected value, not the raw id.
                         labelRender={({value}) =>
                             value ? getLanguageFriendlyName(String(value)) : "Plain text"

From db5c498d63e48245e5bdbd6971ae47b49b9356b9 Mon Sep 17 00:00:00 2001
From: Arda Erzin <ardaerzin@gmail.com>
Date: Sun, 28 Jun 2026 20:07:02 +0200
Subject: [PATCH 12/12] fix(agent): stabilize markdown editor onChange + sync
 preview list markers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CR #4915:

- The file-drop handler was memoized on `[dropEnabled]` with an eslint-disable,
  so it could call a stale `onChange`. That's reachable: SkillFormView passes a
  fresh inline `onChange={(v) => set("body", v)}` every render. Make `handleChange`
  a `useCallback([onChange])`, hoist the pure drop predicates to module scope, and
  add `handleChange` to the drop deps — the disable is gone and exhaustive-deps is
  clean.
- MarkdownPreview only carried ordered nesting to lower-alpha while the editor CSS
  continues to upper-roman / lower-roman, so depth 4-5 lists rendered differently
  in the preview. Add the missing two levels.
---
 .../SchemaControls/MarkdownEditor.tsx         | 34 +++++++++++--------
 .../agenta-ui/src/MarkdownPreview.tsx         |  2 +-
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
index 5cf2042ba6..6e2d8ce9f4 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
@@ -42,6 +42,15 @@ import {Tag} from "antd"
 
 import {CodeBlockLanguageMenu} from "./CodeBlockLanguageMenu"
 
+// Pure drop predicates — no component state, so they live at module scope (stable identity, no
+// need to thread them through the drag/drop callback deps).
+const isFileDrag = (e: DragEvent) => Array.from(e.dataTransfer.types).includes("Files")
+const isMarkdownFile = (file: File) =>
+    /\.(md|markdown|mdx|txt)$/i.test(file.name) ||
+    file.type.startsWith("text/") ||
+    file.type === "application/json" ||
+    file.type === ""
+
 type MarkdownView = "source" | "rendered"
 
 export interface MarkdownEditorProps {
@@ -152,23 +161,22 @@ export function MarkdownEditor({
         }
     }, [value])
 
-    const handleChange = (next: string) => {
-        setText(next)
-        lastExternal.current = next
-        onChange(next)
-    }
+    // Stable so the memoized drop handler below never captures a stale `onChange` — some consumers
+    // (e.g. SkillFormView) pass a fresh inline `onChange` every render.
+    const handleChange = useCallback(
+        (next: string) => {
+            setText(next)
+            lastExternal.current = next
+            onChange(next)
+        },
+        [onChange],
+    )
 
     // Markdown-file drop: dropping a .md/.markdown/.txt (or any text/* file) onto the editor
     // replaces its content with the file's text. We intercept in the capture phase and only for
     // file drags, so Lexical's own internal text drag/drop keeps working.
     const [dragOver, setDragOver] = useState(false)
     const dropEnabled = editable && !disabled
-    const isFileDrag = (e: DragEvent) => Array.from(e.dataTransfer.types).includes("Files")
-    const isMarkdownFile = (file: File) =>
-        /\.(md|markdown|mdx|txt)$/i.test(file.name) ||
-        file.type.startsWith("text/") ||
-        file.type === "application/json" ||
-        file.type === ""
 
     const handleDragOver = useCallback(
         (e: DragEvent) => {
@@ -197,9 +205,7 @@ export function MarkdownEditor({
             if (!file) return
             void file.text().then((content) => handleChange(content))
         },
-        // handleChange is stable enough for this usage (reads current onChange via closure).
-
-        [dropEnabled],
+        [dropEnabled, handleChange],
     )
 
     const viewToggle = canToggleView ? (
diff --git a/web/packages/agenta-ui/src/MarkdownPreview.tsx b/web/packages/agenta-ui/src/MarkdownPreview.tsx
index 72834798db..a4db2e2e52 100644
--- a/web/packages/agenta-ui/src/MarkdownPreview.tsx
+++ b/web/packages/agenta-ui/src/MarkdownPreview.tsx
@@ -29,7 +29,7 @@ const MD_CLASS = [
     "[&_p]:my-2",
     "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-1",
     // Per-depth list markers, matching the editor + the Lexical playground (1 → A → a, • → ◦ → ▪).
-    "[&_ol_ol]:list-[upper-alpha] [&_ol_ol_ol]:list-[lower-alpha] [&_ul_ul]:list-[circle] [&_ul_ul_ul]:list-[square]",
+    "[&_ol_ol]:list-[upper-alpha] [&_ol_ol_ol]:list-[lower-alpha] [&_ol_ol_ol_ol]:list-[upper-roman] [&_ol_ol_ol_ol_ol]:list-[lower-roman] [&_ul_ul]:list-[circle] [&_ul_ul_ul]:list-[square]",
     "[&_a]:text-[var(--ant-color-primary)] [&_a]:underline",
     "[&_code]:font-mono [&_code]:text-[0.86em] [&_code]:bg-[var(--ant-color-fill-tertiary)] [&_code]:border [&_code]:border-solid [&_code]:border-[var(--ant-color-border-secondary)] [&_code]:rounded [&_code]:px-1.5 [&_code]:py-px",
     "[&_pre]:my-2.5 [&_pre]:bg-[var(--ant-color-fill-quaternary)] [&_pre]:border [&_pre]:border-solid [&_pre]:border-[var(--ant-color-border-secondary)] [&_pre]:rounded-lg [&_pre]:p-3 [&_pre]:overflow-x-auto",