feat: add markdown composer backend foundation

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

src/renderer/components/ChatPane.tsx

@@ -16,6 +16,7 @@ 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,
@@ -694,6 +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 toolSelection = useMemo(() => resolveSessionToolingSelection(session), [session]);
   const mcpServers = toolingSettings.mcpServers;
@@ -729,7 +731,7 @@ export function ChatPane({
   }, [session.id]);
 
   async function handleSubmit() {
-    const text = input.trim();
+    const text = prepareChatMessageContent(input);
     if (!text || isComposerDisabled) return;
     setInput('');
     await onSend(text);
@@ -1042,11 +1044,11 @@ export function ChatPane({
             />
             <button
               className={`absolute bottom-2 right-2 flex size-8 items-center justify-center rounded-lg transition ${
-                input.trim() && !isComposerDisabled
+                canSubmitInput
                   ? 'bg-indigo-600 text-white hover:bg-indigo-500'
                   : 'bg-zinc-800 text-zinc-600'
               }`}
-              disabled={isComposerDisabled || !input.trim()}
+              disabled={!canSubmitInput}
               onClick={() => void handleSubmit()}
               type="button"
             >

src/renderer/components/MarkdownContent.tsx

@@ -1,113 +1,5 @@
-import { useState, type ReactNode } from 'react';
 import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { Check, Clipboard } from 'lucide-react';
-
-function extractText(node: unknown): string {
-  if (!node || typeof node !== 'object') return '';
-  const n = node as Record<string, unknown>;
-  if (n.type === 'text') return String(n.value ?? '');
-  if (Array.isArray(n.children)) {
-    return (n.children as unknown[]).map(extractText).join('');
-  }
-  return '';
-}
-
-function CodeBlock({ language, children }: { language: string; children: string }) {
-  const [copied, setCopied] = useState(false);
-
-  function handleCopy() {
-    void navigator.clipboard.writeText(children);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }
-
-  return (
-    <div className="group relative my-3 overflow-hidden rounded-lg border border-zinc-800 bg-[#0d0d10]">
-      <div className="flex items-center justify-between border-b border-zinc-800/80 px-4 py-1.5">
-        <span className="select-none text-[11px] text-zinc-500">
-          {language || 'text'}
-        </span>
-        <button
-          className="flex items-center gap-1 text-[11px] text-zinc-500 transition hover:text-zinc-300"
-          onClick={handleCopy}
-          type="button"
-        >
-          {copied ? (
-            <>
-              <Check className="size-3" />
-              Copied!
-            </>
-          ) : (
-            <>
-              <Clipboard className="size-3" />
-              Copy
-            </>
-          )}
-        </button>
-      </div>
-      <pre className="overflow-x-auto p-4">
-        <code className="font-mono text-[13px] leading-relaxed text-zinc-300">
-          {children}
-        </code>
-      </pre>
-    </div>
-  );
-}
-
-const markdownComponents: Record<string, (props: Record<string, unknown>) => ReactNode> = {
-  pre({ children, node }: Record<string, unknown>) {
-    const codeChild = (node as Record<string, unknown[]>)?.children?.[0] as
-      | Record<string, unknown>
-      | undefined;
-
-    if (codeChild && (codeChild as Record<string, string>).tagName === 'code') {
-      const classNames = ((codeChild.properties as Record<string, string[]>)?.className ??
-        []) as string[];
-      const hasLanguage = classNames.some((c) => c.startsWith('language-'));
-
-      if (!hasLanguage) {
-        const text = extractText(codeChild).replace(/\n$/, '');
-        return <CodeBlock language="">{text}</CodeBlock>;
-      }
-    }
-
-    return <>{children as ReactNode}</>;
-  },
-
-  code({ className, children, ...rest }: Record<string, unknown>) {
-    const match = /language-(\w+)/.exec(String(className ?? ''));
-    if (match) {
-      return (
-        <CodeBlock language={match[1]}>
-          {String(children).replace(/\n$/, '')}
-        </CodeBlock>
-      );
-    }
-
-    return (
-      <code
-        className="rounded bg-zinc-800 px-1.5 py-0.5 font-mono text-[0.875em] text-zinc-200"
-        {...rest}
-      >
-        {children as ReactNode}
-      </code>
-    );
-  },
-
-  a({ href, children }: Record<string, unknown>) {
-    return (
-      <a
-        className="text-indigo-400 underline underline-offset-2 transition hover:text-indigo-300"
-        href={String(href)}
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        {children as ReactNode}
-      </a>
-    );
-  },
-};
+import { chatMarkdownComponents, chatMarkdownRemarkPlugins } from '@renderer/lib/chatMarkdown';
 
 interface MarkdownContentProps {
   content: string;
@@ -117,8 +9,8 @@ export function MarkdownContent({ content }: MarkdownContentProps) {
   return (
     <div className="markdown-content">
       <ReactMarkdown
-        components={markdownComponents}
-        remarkPlugins={[remarkGfm]}
+        components={chatMarkdownComponents}
+        remarkPlugins={chatMarkdownRemarkPlugins}
       >
         {content}
       </ReactMarkdown>