feat: replace textarea with Lexical WYSIWYG markdown composer

Replace the plain <textarea> in ChatPane with a full WYSIWYG
markdown composer built on Lexical 0.42.0.

Composer features:
- Rich text editing with inline formatting (bold, italic, code)
- Block-level elements: headings, bullet/numbered lists, code blocks,
  blockquotes, links via markdown shortcuts (e.g. ## , - , \\\)
- Formatting toolbar with active-state indicators
- Markdown paste auto-import when the editor is empty
- Enter to send, Shift+Enter for newline (matches prior behavior)
- Disabled state syncs with session busy/config states
- Serializes to markdown on submit via the backend helpers

Files:
- New: MarkdownComposer.tsx (Lexical editor, toolbar, internal plugins)
- Modified: ChatPane.tsx (swap textarea for MarkdownComposer, simplify state)
- Modified: styles.css (add markdown composer theme classes)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/renderer/components/ChatPane.tsx

@@ -1,7 +1,8 @@
-import { type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { AlertCircle, ArrowUp, Bot, Check, ChevronDown, Circle, GitBranch, Loader2, RotateCcw, Server, ShieldAlert, ShieldCheck, Sparkles, User, X } from 'lucide-react';
 
 import { MarkdownContent } from '@renderer/components/MarkdownContent';
+import { MarkdownComposer, type MarkdownComposerHandle } from '@renderer/components/MarkdownComposer';
 import { getAssistantMessagePhase } from '@renderer/lib/messagePhase';
 import { ProviderIcon } from '@renderer/components/ProviderIcons';
 import type { ApprovalDecision, PendingApprovalRecord } from '@shared/domain/approval';
@@ -16,7 +17,6 @@ import {
 import { reasoningEffortOptions, type PatternDefinition, type ReasoningEffort } from '@shared/domain/pattern';
 import { isScratchpadProject, type ProjectRecord } from '@shared/domain/project';
 import { resolveSessionToolingSelection, type SessionRecord } from '@shared/domain/session';
-import { hasMeaningfulChatMessageContent, prepareChatMessageContent } from '@shared/utils/chatMessage';
 import {
   listApprovalToolDefinitions,
   type ApprovalToolDefinition,
@@ -677,13 +677,13 @@ export function ChatPane({
   onUpdateSessionTooling,
   onUpdateSessionApprovalSettings,
 }: ChatPaneProps) {
-  const [input, setInput] = useState('');
+  const [hasComposerContent, setHasComposerContent] = useState(false);
   const [configError, setConfigError] = useState<string>();
   const [approvalError, setApprovalError] = useState<string>();
   const [isResolvingApproval, setIsResolvingApproval] = useState(false);
   const [isUpdatingScratchpadConfig, setIsUpdatingScratchpadConfig] = useState(false);
   const transcriptRef = useRef<HTMLDivElement>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const composerRef = useRef<MarkdownComposerHandle>(null);
 
   const isSessionBusy = session.status === 'running';
   const pendingApproval = session.pendingApproval?.status === 'pending' ? session.pendingApproval : undefined;
@@ -695,7 +695,7 @@ export function ChatPane({
   const supportedEfforts = getSupportedReasoningEfforts(selectedModel);
   const scratchpadReasoningEffort = resolveReasoningEffort(selectedModel, primaryAgent?.reasoningEffort);
   const isComposerDisabled = isSessionBusy || isUpdatingScratchpadConfig;
-  const canSubmitInput = hasMeaningfulChatMessageContent(input) && !isComposerDisabled;
+  const canSubmitInput = hasComposerContent && !isComposerDisabled;
 
   const toolSelection = useMemo(() => resolveSessionToolingSelection(session), [session]);
   const mcpServers = toolingSettings.mcpServers;
@@ -730,11 +730,8 @@ export function ChatPane({
     setIsUpdatingScratchpadConfig(false);
   }, [session.id]);
 
-  async function handleSubmit() {
-    const text = prepareChatMessageContent(input);
-    if (!text || isComposerDisabled) return;
-    setInput('');
-    await onSend(text);
+  function handleComposerSubmit(content: string) {
+    void onSend(content);
   }
 
   async function handleScratchpadConfigChange(config: {
@@ -779,13 +776,6 @@ export function ChatPane({
     }
   }
 
-  function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault();
-      void handleSubmit();
-    }
-  }
-
   return (
     <div className="flex h-full flex-col">
       {/* Header — extra top padding clears the title bar overlay zone */}
@@ -1024,11 +1014,11 @@ export function ChatPane({
           )}
 
           <div className="relative rounded-xl border border-zinc-700 bg-zinc-900 transition-colors focus-within:border-indigo-500/50">
-            <textarea
-              className="auto-resize-textarea block w-full resize-none bg-transparent px-4 py-3 pr-12 text-[14px] text-zinc-100 placeholder-zinc-600 outline-none"
+            <MarkdownComposer
+              ref={composerRef}
               disabled={isComposerDisabled}
-              onChange={(event) => setInput(event.target.value)}
-              onKeyDown={handleKeyDown}
+              onContentChange={setHasComposerContent}
+              onSubmit={handleComposerSubmit}
               placeholder={
                 pendingApproval
                   ? 'Awaiting approval...'
@@ -1038,9 +1028,6 @@ export function ChatPane({
                       ? 'Saving scratchpad settings...'
                       : 'Message...'
               }
-              ref={textareaRef}
-              rows={1}
-              value={input}
             />
             <button
               className={`absolute bottom-2 right-2 flex size-8 items-center justify-center rounded-lg transition ${
@@ -1049,7 +1036,7 @@ export function ChatPane({
                   : 'bg-zinc-800 text-zinc-600'
               }`}
               disabled={!canSubmitInput}
-              onClick={() => void handleSubmit()}
+              onClick={() => composerRef.current?.submit()}
               type="button"
             >
               {isSessionBusy ? (

src/renderer/components/MarkdownComposer.tsx

@@ -0,0 +1,406 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  $convertFromMarkdownString,
+  $convertToMarkdownString,
+} from '@lexical/markdown';
+import { $isCodeNode, $createCodeNode } from '@lexical/code';
+import {
+  $isListNode,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+} from '@lexical/list';
+import { $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  $getSelection,
+  $isRangeSelection,
+  CLEAR_EDITOR_COMMAND,
+  COMMAND_PRIORITY_HIGH,
+  FORMAT_TEXT_COMMAND,
+  KEY_ENTER_COMMAND,
+  PASTE_COMMAND,
+  type EditorThemeClasses,
+  type LexicalEditor,
+} from 'lexical';
+import { Bold, Braces, Code, Italic, List, ListOrdered } from 'lucide-react';
+
+import {
+  inspectMarkdownPaste,
+  markdownEditorNamespace,
+  markdownEditorNodes,
+  markdownEditorTransformers,
+} from '@renderer/lib/markdownEditor';
+import { prepareChatMessageContent } from '@shared/utils/chatMessage';
+
+/* ── Lexical theme ────────────────────────────────────── */
+
+const editorTheme: EditorThemeClasses = {
+  paragraph: 'mc-p',
+  heading: { h1: 'mc-h1', h2: 'mc-h2', h3: 'mc-h3' },
+  text: {
+    bold: 'mc-bold',
+    italic: 'mc-italic',
+    code: 'mc-inline-code',
+    strikethrough: 'mc-strikethrough',
+    underline: 'mc-underline',
+  },
+  list: {
+    ul: 'mc-ul',
+    ol: 'mc-ol',
+    listitem: 'mc-li',
+    nested: { listitem: 'mc-nested-li' },
+  },
+  quote: 'mc-blockquote',
+  code: 'mc-code-block',
+  link: 'mc-link',
+};
+
+/* ── Public API ───────────────────────────────────────── */
+
+export interface MarkdownComposerHandle {
+  submit(): void;
+  focus(): void;
+}
+
+export interface MarkdownComposerProps {
+  disabled: boolean;
+  placeholder: string;
+  onSubmit: (markdown: string) => void;
+  onContentChange: (hasContent: boolean) => void;
+}
+
+/* ── Internal plugins ─────────────────────────────────── */
+
+/** Captures the editor instance into a ref for the imperative handle. */
+function EditorRefPlugin({ editorRef }: { editorRef: React.MutableRefObject<LexicalEditor | null> }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    editorRef.current = editor;
+  }, [editor, editorRef]);
+  return null;
+}
+
+/** Syncs the React `disabled` prop to the Lexical editable state. */
+function EditablePlugin({ disabled }: { disabled: boolean }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    editor.setEditable(!disabled);
+  }, [editor, disabled]);
+  return null;
+}
+
+/** Reports whether the editor has meaningful content. */
+function ContentTrackingPlugin({ onContentChange }: { onContentChange: (hasContent: boolean) => void }) {
+  const [editor] = useLexicalComposerContext();
+  const lastHasContent = useRef(false);
+
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const hasContent = $getRoot().getTextContent().trim().length > 0;
+        if (hasContent !== lastHasContent.current) {
+          lastHasContent.current = hasContent;
+          onContentChange(hasContent);
+        }
+      });
+    });
+  }, [editor, onContentChange]);
+
+  return null;
+}
+
+/** Enter sends, Shift+Enter inserts a newline. */
+function SubmitOnEnterPlugin({
+  disabled,
+  submitRef,
+}: {
+  disabled: boolean;
+  submitRef: React.RefObject<() => void>;
+}) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (event) => {
+        if (event && !event.shiftKey) {
+          event.preventDefault();
+          if (!disabled) submitRef.current();
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_HIGH,
+    );
+  }, [editor, disabled, submitRef]);
+
+  return null;
+}
+
+/** Auto-imports pasted markdown into rich structure when the editor is empty. */
+function MarkdownPastePlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand(
+      PASTE_COMMAND,
+      (event) => {
+        if (!(event instanceof ClipboardEvent)) return false;
+
+        const text = event.clipboardData?.getData('text/plain');
+        if (!text) return false;
+
+        const inspection = inspectMarkdownPaste(text);
+        if (!inspection.shouldImportMarkdown) return false;
+
+        // Only auto-import when the editor is empty so we never clobber existing content
+        const isEmpty = editor
+          .getEditorState()
+          .read(() => $getRoot().getTextContent().trim().length === 0);
+
+        if (!isEmpty) return false;
+
+        event.preventDefault();
+        editor.update(() => {
+          $convertFromMarkdownString(inspection.normalizedText, [...markdownEditorTransformers]);
+          $getRoot().selectEnd();
+        });
+
+        return true;
+      },
+      COMMAND_PRIORITY_HIGH,
+    );
+  }, [editor]);
+
+  return null;
+}
+
+/* ── Toolbar ──────────────────────────────────────────── */
+
+interface ToolbarState {
+  isBold: boolean;
+  isItalic: boolean;
+  isCode: boolean;
+  blockType: string;
+}
+
+function getSelectionBlockType(): string {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) return 'paragraph';
+
+  const anchorNode = selection.anchor.getNode();
+  if (anchorNode.getKey() === 'root') return 'paragraph';
+
+  const topElement = anchorNode.getTopLevelElementOrThrow();
+  if ($isHeadingNode(topElement)) return topElement.getTag();
+  if ($isListNode(topElement)) return topElement.getListType() === 'number' ? 'ol' : 'ul';
+  if ($isCodeNode(topElement)) return 'code';
+  if ($isQuoteNode(topElement)) return 'quote';
+  return 'paragraph';
+}
+
+function ToolbarPlugin({ disabled }: { disabled: boolean }) {
+  const [editor] = useLexicalComposerContext();
+  const [state, setState] = useState<ToolbarState>({
+    isBold: false,
+    isItalic: false,
+    isCode: false,
+    blockType: 'paragraph',
+  });
+
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) return;
+        setState({
+          isBold: selection.hasFormat('bold'),
+          isItalic: selection.hasFormat('italic'),
+          isCode: selection.hasFormat('code'),
+          blockType: getSelectionBlockType(),
+        });
+      });
+    });
+  }, [editor]);
+
+  const preventFocus = useCallback((e: React.MouseEvent) => e.preventDefault(), []);
+
+  const formatBold = useCallback(() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold'), [editor]);
+  const formatItalic = useCallback(() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic'), [editor]);
+  const formatInlineCode = useCallback(() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code'), [editor]);
+
+  const toggleBulletList = useCallback(() => {
+    if (state.blockType === 'ul') {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    }
+  }, [editor, state.blockType]);
+
+  const toggleNumberedList = useCallback(() => {
+    if (state.blockType === 'ol') {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    }
+  }, [editor, state.blockType]);
+
+  const toggleCodeBlock = useCallback(() => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return;
+
+      const anchorNode = selection.anchor.getNode();
+      if (anchorNode.getKey() === 'root') return;
+
+      const topElement = anchorNode.getTopLevelElementOrThrow();
+
+      if ($isCodeNode(topElement)) {
+        const p = $createParagraphNode();
+        const text = topElement.getTextContent();
+        if (text) p.append($createTextNode(text));
+        topElement.replace(p);
+        p.selectEnd();
+      } else {
+        const code = $createCodeNode();
+        const text = topElement.getTextContent();
+        if (text) code.append($createTextNode(text));
+        topElement.replace(code);
+        code.selectEnd();
+      }
+    });
+  }, [editor]);
+
+  return (
+    <div className="flex items-center gap-0.5 border-b border-zinc-700/50 px-2 py-1">
+      <ToolbarButton active={state.isBold} disabled={disabled} icon={<Bold className="size-3.5" />} onClick={formatBold} onMouseDown={preventFocus} title="Bold (Ctrl+B)" />
+      <ToolbarButton active={state.isItalic} disabled={disabled} icon={<Italic className="size-3.5" />} onClick={formatItalic} onMouseDown={preventFocus} title="Italic (Ctrl+I)" />
+      <ToolbarButton active={state.isCode} disabled={disabled} icon={<Code className="size-3.5" />} onClick={formatInlineCode} onMouseDown={preventFocus} title="Inline Code" />
+      <div className="mx-1 h-4 w-px bg-zinc-700/50" />
+      <ToolbarButton active={state.blockType === 'ul'} disabled={disabled} icon={<List className="size-3.5" />} onClick={toggleBulletList} onMouseDown={preventFocus} title="Bullet List" />
+      <ToolbarButton active={state.blockType === 'ol'} disabled={disabled} icon={<ListOrdered className="size-3.5" />} onClick={toggleNumberedList} onMouseDown={preventFocus} title="Numbered List" />
+      <ToolbarButton active={state.blockType === 'code'} disabled={disabled} icon={<Braces className="size-3.5" />} onClick={toggleCodeBlock} onMouseDown={preventFocus} title="Code Block" />
+    </div>
+  );
+}
+
+function ToolbarButton({
+  active,
+  disabled,
+  icon,
+  onClick,
+  onMouseDown,
+  title,
+}: {
+  active: boolean;
+  disabled: boolean;
+  icon: React.ReactNode;
+  onClick: () => void;
+  onMouseDown: (e: React.MouseEvent) => void;
+  title: string;
+}) {
+  return (
+    <button
+      className={`flex size-7 items-center justify-center rounded transition ${
+        active
+          ? 'bg-indigo-600/30 text-indigo-300'
+          : 'text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300'
+      } ${disabled ? 'pointer-events-none opacity-50' : ''}`}
+      disabled={disabled}
+      onClick={onClick}
+      onMouseDown={onMouseDown}
+      tabIndex={-1}
+      title={title}
+      type="button"
+    >
+      {icon}
+    </button>
+  );
+}
+
+/* ── MarkdownComposer ─────────────────────────────────── */
+
+export const MarkdownComposer = forwardRef<MarkdownComposerHandle, MarkdownComposerProps>(
+  function MarkdownComposer({ disabled, placeholder, onSubmit, onContentChange }, ref) {
+    const editorRef = useRef<LexicalEditor | null>(null);
+    const submitRef = useRef(() => {});
+
+    // Keep the submit function up to date without re-registering the command
+    submitRef.current = () => {
+      const editor = editorRef.current;
+      if (!editor) return;
+
+      let content: string | undefined;
+      editor.getEditorState().read(() => {
+        const markdown = $convertToMarkdownString([...markdownEditorTransformers]);
+        content = prepareChatMessageContent(markdown) ?? undefined;
+      });
+
+      if (content) {
+        editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+        onSubmit(content);
+      }
+    };
+
+    useImperativeHandle(ref, () => ({
+      submit: () => submitRef.current(),
+      focus: () => editorRef.current?.focus(),
+    }));
+
+    const initialConfig = {
+      namespace: markdownEditorNamespace,
+      nodes: [...markdownEditorNodes],
+      onError: (error: Error) => console.error('[MarkdownComposer]', error),
+      theme: editorTheme,
+    };
+
+    return (
+      <LexicalComposer initialConfig={initialConfig}>
+        <EditorRefPlugin editorRef={editorRef} />
+        <EditablePlugin disabled={disabled} />
+        <ToolbarPlugin disabled={disabled} />
+
+        <div className="markdown-composer-content">
+          <RichTextPlugin
+            contentEditable={
+              <ContentEditable className="markdown-composer-editable" />
+            }
+            placeholder={
+              <div className="markdown-composer-placeholder">{placeholder}</div>
+            }
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+        </div>
+
+        <HistoryPlugin />
+        <ListPlugin />
+        <LinkPlugin />
+        <MarkdownShortcutPlugin transformers={[...markdownEditorTransformers]} />
+        <ClearEditorPlugin />
+        <ContentTrackingPlugin onContentChange={onContentChange} />
+        <SubmitOnEnterPlugin disabled={disabled} submitRef={submitRef} />
+        <MarkdownPastePlugin />
+      </LexicalComposer>
+    );
+  },
+);

src/renderer/styles.css

@@ -140,6 +140,112 @@ textarea {
   max-height: 200px;
 }
 
+/* ── Markdown composer (Lexical) ────────────────────────── */
+
+.markdown-composer-content {
+  position: relative;
+}
+
+.markdown-composer-editable {
+  min-height: 40px;
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 8px 48px 8px 16px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #f4f4f5;
+  outline: none;
+  cursor: text;
+}
+
+.markdown-composer-editable[contenteditable="false"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.markdown-composer-placeholder {
+  position: absolute;
+  top: 8px;
+  left: 16px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #52525b;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Paragraphs */
+.mc-p {
+  margin: 0;
+}
+
+/* Headings */
+.mc-h1, .mc-h2, .mc-h3 {
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.4;
+}
+.mc-h1 { font-size: 1.1em; }
+.mc-h2 { font-size: 1.05em; }
+.mc-h3 { font-size: 1em; }
+
+/* Inline formatting */
+.mc-bold { font-weight: 600; }
+.mc-italic { font-style: italic; }
+.mc-strikethrough { text-decoration: line-through; }
+.mc-underline { text-decoration: underline; }
+.mc-inline-code {
+  background: rgba(63, 63, 70, 0.6);
+  border-radius: 3px;
+  padding: 1px 4px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 0.9em;
+}
+
+/* Lists */
+.mc-ul {
+  list-style-type: disc;
+  padding-left: 1.5em;
+  margin: 2px 0;
+}
+.mc-ol {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+  margin: 2px 0;
+}
+.mc-li {
+  margin: 1px 0;
+}
+
+/* Blockquote */
+.mc-blockquote {
+  border-left: 3px solid #3f3f46;
+  padding-left: 0.75em;
+  color: #a1a1aa;
+  margin: 2px 0;
+}
+
+/* Code block */
+.mc-code-block {
+  background: rgba(24, 24, 27, 0.8);
+  border: 1px solid #27272a;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 0.9em;
+  white-space: pre-wrap;
+  tab-size: 2;
+  margin: 4px 0;
+  overflow-x: auto;
+}
+
+/* Link */
+.mc-link {
+  color: #818cf8;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
 /* React Flow dark theme overrides */
 .react-flow__node {
   font-family: inherit;