2 files changed, 108 insertions, 6 deletions

diff --git a/renderer/src/components/DocumentPane.tsx b/renderer/src/components/DocumentPane.tsx
index 95d7d03..cf777b1 100644
--- a/renderer/src/components/DocumentPane.tsx
+++ b/renderer/src/components/DocumentPane.tsx
@@ -1,6 +1,12 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { EditorState } from "@codemirror/state";
+import { EditorView, keymap, lineNumbers, highlightActiveLine } from "@codemirror/view";
+import { markdown } from "@codemirror/lang-markdown";
+import { languages } from "@codemirror/language-data";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { oneDark } from "@codemirror/theme-one-dark";
 import type { Phase } from "../types";
 
 interface DocumentPaneProps {
@@ -11,6 +17,90 @@ interface DocumentPaneProps {
   showOnboarding?: boolean;
 }
 
+function MarkdownEditor({
+  content,
+  onChange,
+  disabled,
+}: {
+  content: string;
+  onChange: (content: string) => void;
+  disabled: boolean;
+}) {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+
+    const updateListener = EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        onChange(update.state.doc.toString());
+      }
+    });
+
+    const state = EditorState.create({
+      doc: content,
+      extensions: [
+        lineNumbers(),
+        highlightActiveLine(),
+        history(),
+        keymap.of([...defaultKeymap, ...historyKeymap]),
+        markdown({ codeLanguages: languages }),
+        oneDark,
+        updateListener,
+        EditorView.editable.of(!disabled),
+        EditorView.theme({
+          "&": {
+            height: "100%",
+            fontSize: "14px",
+          },
+          ".cm-scroller": {
+            overflow: "auto",
+            fontFamily: '"SF Mono", Monaco, "Cascadia Code", monospace',
+          },
+          ".cm-content": {
+            padding: "16px 0",
+          },
+          ".cm-line": {
+            padding: "0 16px",
+          },
+        }),
+      ],
+    });
+
+    const view = new EditorView({
+      state,
+      parent: editorRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [disabled]);
+
+  // Update content when it changes externally
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+
+    const currentContent = view.state.doc.toString();
+    if (content !== currentContent) {
+      view.dispatch({
+        changes: {
+          from: 0,
+          to: currentContent.length,
+          insert: content,
+        },
+      });
+    }
+  }, [content]);
+
+  return <div ref={editorRef} className="codemirror-editor" />;
+}
+
 export function DocumentPane({
   content,
   onChange,
@@ -115,12 +205,10 @@ export function DocumentPane({
       </div>
 
       {isEditing ? (
-        <textarea
-          className="document-content editing"
-          value={content}
-          onChange={(e) => onChange(e.target.value)}
+        <MarkdownEditor
+          content={content}
+          onChange={onChange}
           disabled={disabled}
-          placeholder={`${filename} will appear here...`}
         />
       ) : (
         <div
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index 384ebc5..f115734 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -152,6 +152,20 @@ body {
   color: var(--text-primary);
 }
 
+.codemirror-editor {
+  flex: 1;
+  overflow: hidden;
+}
+
+.codemirror-editor .cm-editor {
+  height: 100%;
+}
+
+.codemirror-editor .cm-gutters {
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+}
+
 .document-content.rendered {
   line-height: 1.7;
 }