From 8a6e9a649e5a009bdbd788f9b228df71bfa97f35 Mon Sep 17 00:00:00 2001
From: flex-yj-kim <yj.kim@flex.team>
Date: Mon, 2 Mar 2026 00:24:21 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Add=20code=20suggestions,=20inl?=
 =?UTF-8?q?ine=20editing,=20and=20refactor=20DiffViewer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- GitHub-style suggestion blocks with syntax-highlighted diff view
- Inline annotation editing via toolbar (edit button on inline comments)
- Expandable two-pane code modal for writing suggestions
- Inline markdown rendering (bold, italic, code) in review comments
- Original code extraction from unified diff patches
- Decompose DiffViewer (615→200 lines) into focused components:
  FileHeader, InlineAnnotation, SuggestionBlock, SuggestionDiff,
  SuggestionModal, AnnotationToolbar, HighlightedCode
- Extract hooks: useAnnotationToolbar, useTabIndent
- Extract utils: detectLanguage, formatLineRange, patchParser,
  renderInlineMarkdown
- Fix suggestedCode trim stripping meaningful indentation
- Fix stale closure in useTabIndent consumers
---
 bun.lock                                      |   8 +-
 packages/review-editor/App.tsx                |  19 +-
 .../components/AnnotationToolbar.tsx          | 140 ++++++++
 .../review-editor/components/DiffViewer.tsx   | 320 ++++--------------
 .../review-editor/components/FileHeader.tsx   |  77 +++++
 .../components/HighlightedCode.tsx            |  19 ++
 .../components/InlineAnnotation.tsx           |  67 ++++
 .../review-editor/components/ReviewPanel.tsx  |  38 ++-
 .../components/SuggestionBlock.tsx            |  27 ++
 .../components/SuggestionDiff.tsx             |  26 ++
 .../components/SuggestionModal.tsx            | 129 +++++++
 .../hooks/useAnnotationToolbar.ts             | 221 ++++++++++++
 packages/review-editor/hooks/useTabIndent.ts  |  21 ++
 packages/review-editor/index.css              | 218 +++++++++++-
 packages/review-editor/package.json           |   1 +
 .../review-editor/utils/detectLanguage.ts     |  14 +
 .../review-editor/utils/formatLineRange.ts    |   6 +
 packages/review-editor/utils/patchParser.ts   |  58 ++++
 .../utils/renderInlineMarkdown.tsx            |  68 ++++
 packages/ui/types.ts                          |   2 +
 20 files changed, 1210 insertions(+), 269 deletions(-)
 create mode 100644 packages/review-editor/components/AnnotationToolbar.tsx
 create mode 100644 packages/review-editor/components/FileHeader.tsx
 create mode 100644 packages/review-editor/components/HighlightedCode.tsx
 create mode 100644 packages/review-editor/components/InlineAnnotation.tsx
 create mode 100644 packages/review-editor/components/SuggestionBlock.tsx
 create mode 100644 packages/review-editor/components/SuggestionDiff.tsx
 create mode 100644 packages/review-editor/components/SuggestionModal.tsx
 create mode 100644 packages/review-editor/hooks/useAnnotationToolbar.ts
 create mode 100644 packages/review-editor/hooks/useTabIndent.ts
 create mode 100644 packages/review-editor/utils/detectLanguage.ts
 create mode 100644 packages/review-editor/utils/formatLineRange.ts
 create mode 100644 packages/review-editor/utils/patchParser.ts
 create mode 100644 packages/review-editor/utils/renderInlineMarkdown.tsx

diff --git a/bun.lock b/bun.lock
index b3aa583..abad462 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "plannotator",
@@ -53,7 +54,7 @@
     },
     "apps/opencode-plugin": {
       "name": "@plannotator/opencode",
-      "version": "0.9.2",
+      "version": "0.9.3",
       "dependencies": {
         "@opencode-ai/plugin": "^1.1.10",
       },
@@ -74,7 +75,7 @@
     },
     "apps/pi-extension": {
       "name": "@plannotator/pi-extension",
-      "version": "0.9.2",
+      "version": "0.9.3",
       "peerDependencies": {
         "@mariozechner/pi-coding-agent": ">=0.53.0",
       },
@@ -134,6 +135,7 @@
       "dependencies": {
         "@pierre/diffs": "^1.0.4",
         "@plannotator/ui": "workspace:*",
+        "highlight.js": "^11.11.1",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
         "tailwindcss": "^4.1.18",
@@ -141,7 +143,7 @@
     },
     "packages/server": {
       "name": "@plannotator/server",
-      "version": "0.9.2",
+      "version": "0.9.3",
       "dependencies": {
         "@plannotator/shared": "workspace:*",
       },
diff --git a/packages/review-editor/App.tsx b/packages/review-editor/App.tsx
index 326df76..b114fcb 100644
--- a/packages/review-editor/App.tsx
+++ b/packages/review-editor/App.tsx
@@ -8,7 +8,7 @@ import { storage } from '@plannotator/ui/utils/storage';
 import { CompletionOverlay } from '@plannotator/ui/components/CompletionOverlay';
 import { getIdentity } from '@plannotator/ui/utils/identity';
 import { getAgentSwitchSettings, getEffectiveAgentName } from '@plannotator/ui/utils/agentSwitch';
-import { CodeAnnotation, CodeAnnotationType, SelectedLineRange, DiffAnnotationMetadata } from '@plannotator/ui/types';
+import { CodeAnnotation, CodeAnnotationType, SelectedLineRange } from '@plannotator/ui/types';
 import { useResizablePanel } from '@plannotator/ui/hooks/useResizablePanel';
 import { ResizeHandle } from '@plannotator/ui/components/ResizeHandle';
 import { DiffViewer } from './components/DiffViewer';
@@ -255,7 +255,8 @@ const ReviewApp: React.FC = () => {
   const handleAddAnnotation = useCallback((
     type: CodeAnnotationType,
     text?: string,
-    suggestedCode?: string
+    suggestedCode?: string,
+    originalCode?: string
   ) => {
     if (!pendingSelection || !files[activeFileIndex]) return;
 
@@ -272,6 +273,7 @@ const ReviewApp: React.FC = () => {
       side: pendingSelection.side === 'additions' ? 'new' : 'old',
       text,
       suggestedCode,
+      originalCode,
       createdAt: Date.now(),
       author: identity,
     };
@@ -280,6 +282,18 @@ const ReviewApp: React.FC = () => {
     setPendingSelection(null);
   }, [pendingSelection, files, activeFileIndex, identity]);
 
+  // Edit annotation
+  const handleEditAnnotation = useCallback((
+    id: string,
+    text?: string,
+    suggestedCode?: string,
+    originalCode?: string
+  ) => {
+    setAnnotations(prev => prev.map(ann =>
+      ann.id === id ? { ...ann, text, suggestedCode, originalCode } : ann
+    ));
+  }, []);
+
   // Delete annotation
   const handleDeleteAnnotation = useCallback((id: string) => {
     setAnnotations(prev => prev.filter(a => a.id !== id));
@@ -755,6 +769,7 @@ const ReviewApp: React.FC = () => {
                 pendingSelection={pendingSelection}
                 onLineSelection={handleLineSelection}
                 onAddAnnotation={handleAddAnnotation}
+                onEditAnnotation={handleEditAnnotation}
                 onSelectAnnotation={handleSelectAnnotation}
                 onDeleteAnnotation={handleDeleteAnnotation}
                 isViewed={viewedFiles.has(activeFile.path)}
diff --git a/packages/review-editor/components/AnnotationToolbar.tsx b/packages/review-editor/components/AnnotationToolbar.tsx
new file mode 100644
index 0000000..f5950d4
--- /dev/null
+++ b/packages/review-editor/components/AnnotationToolbar.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import { ToolbarState } from '../hooks/useAnnotationToolbar';
+import { useTabIndent } from '../hooks/useTabIndent';
+import { formatLineRange } from '../utils/formatLineRange';
+
+interface AnnotationToolbarProps {
+  toolbarState: ToolbarState;
+  toolbarRef: React.RefObject<HTMLDivElement>;
+  commentText: string;
+  setCommentText: (text: string) => void;
+  suggestedCode: string;
+  setSuggestedCode: React.Dispatch<React.SetStateAction<string>>;
+  showSuggestedCode: boolean;
+  setShowSuggestedCode: (show: boolean) => void;
+  isEditing?: boolean;
+  setShowCodeModal: (show: boolean) => void;
+  onSubmit: () => void;
+  onDismiss: () => void;
+  onCancel: () => void;
+}
+
+/** Floating comment input form that appears after line selection */
+export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
+  toolbarState,
+  toolbarRef,
+  commentText,
+  setCommentText,
+  suggestedCode,
+  setSuggestedCode,
+  showSuggestedCode,
+  setShowSuggestedCode,
+  isEditing = false,
+  setShowCodeModal,
+  onSubmit,
+  onDismiss,
+  onCancel,
+}) => {
+  const handleTabIndent = useTabIndent(setSuggestedCode);
+
+  return (
+    <div
+      ref={toolbarRef}
+      className="review-toolbar"
+      style={{
+        position: 'fixed',
+        top: Math.min(toolbarState.position.top, window.innerHeight - 200),
+        left: Math.max(150, Math.min(toolbarState.position.left, window.innerWidth - 150)),
+        transform: 'translateX(-50%)',
+        zIndex: 1000,
+      }}
+    >
+      <div className="w-80">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs text-muted-foreground">
+            {isEditing ? 'Edit annotation' : formatLineRange(toolbarState.range.start, toolbarState.range.end)}
+          </span>
+          <button
+            onClick={onCancel}
+            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+            title="Cancel"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <textarea
+          value={commentText}
+          onChange={(e) => setCommentText(e.target.value)}
+          placeholder="Leave feedback..."
+          className="w-full px-3 py-2 bg-muted rounded-lg text-xs resize-none focus:outline-none focus:ring-1 focus:ring-primary/50"
+          rows={3}
+          autoFocus
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') {
+              onDismiss();
+            } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+              onSubmit();
+            }
+          }}
+        />
+
+        {/* Optional suggested code section */}
+        {showSuggestedCode ? (
+          <div className="mt-2">
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[10px] text-muted-foreground">Suggested code</span>
+              <button
+                onClick={() => setShowCodeModal(true)}
+                className="p-0.5 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                title="Expand editor"
+              >
+                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
+                </svg>
+              </button>
+            </div>
+            <textarea
+              value={suggestedCode}
+              onChange={(e) => setSuggestedCode(e.target.value)}
+              placeholder="Enter code suggestion..."
+              className="suggested-code-input"
+              rows={4}
+              autoFocus
+              spellCheck={false}
+              onKeyDown={(e) => {
+                if (e.key === 'Tab') {
+                  handleTabIndent(e);
+                } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                  onSubmit();
+                }
+              }}
+            />
+          </div>
+        ) : (
+          <button
+            onClick={() => setShowSuggestedCode(true)}
+            className="mt-2 text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
+          >
+            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+            </svg>
+            Add suggested code
+          </button>
+        )}
+
+        <div className="flex justify-end gap-2 mt-3">
+          <button
+            onClick={onSubmit}
+            disabled={!commentText.trim() && !suggestedCode.trim()}
+            className="review-toolbar-btn primary disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isEditing ? 'Update' : 'Add Comment'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/review-editor/components/DiffViewer.tsx b/packages/review-editor/components/DiffViewer.tsx
index bb255ec..753e55a 100644
--- a/packages/review-editor/components/DiffViewer.tsx
+++ b/packages/review-editor/components/DiffViewer.tsx
@@ -1,8 +1,13 @@
-import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import React, { useMemo, useRef, useEffect, useCallback } from 'react';
 import { PatchDiff } from '@pierre/diffs/react';
 import { CodeAnnotation, CodeAnnotationType, SelectedLineRange, DiffAnnotationMetadata } from '@plannotator/ui/types';
-import { useDismissOnOutsideAndEscape } from '@plannotator/ui/hooks/useDismissOnOutsideAndEscape';
 import { useTheme } from '@plannotator/ui/components/ThemeProvider';
+import { detectLanguage } from '../utils/detectLanguage';
+import { useAnnotationToolbar } from '../hooks/useAnnotationToolbar';
+import { FileHeader } from './FileHeader';
+import { InlineAnnotation } from './InlineAnnotation';
+import { AnnotationToolbar } from './AnnotationToolbar';
+import { SuggestionModal } from './SuggestionModal';
 
 interface DiffViewerProps {
   patch: string;
@@ -12,18 +17,14 @@ interface DiffViewerProps {
   selectedAnnotationId: string | null;
   pendingSelection: SelectedLineRange | null;
   onLineSelection: (range: SelectedLineRange | null) => void;
-  onAddAnnotation: (type: CodeAnnotationType, text?: string, suggestedCode?: string) => void;
+  onAddAnnotation: (type: CodeAnnotationType, text?: string, suggestedCode?: string, originalCode?: string) => void;
+  onEditAnnotation: (id: string, text?: string, suggestedCode?: string, originalCode?: string) => void;
   onSelectAnnotation: (id: string | null) => void;
   onDeleteAnnotation: (id: string) => void;
   isViewed?: boolean;
   onToggleViewed?: () => void;
 }
 
-interface ToolbarState {
-  position: { top: number; left: number };
-  range: SelectedLineRange;
-}
-
 export const DiffViewer: React.FC<DiffViewerProps> = ({
   patch,
   filePath,
@@ -33,6 +34,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   pendingSelection,
   onLineSelection,
   onAddAnnotation,
+  onEditAnnotation,
   onSelectAnnotation,
   onDeleteAnnotation,
   isViewed = false,
@@ -40,25 +42,15 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
 }) => {
   const { theme } = useTheme();
   const containerRef = useRef<HTMLDivElement>(null);
-  const toolbarRef = useRef<HTMLDivElement>(null);
-  const [toolbarState, setToolbarState] = useState<ToolbarState | null>(null);
-  const [commentText, setCommentText] = useState('');
-  const [suggestedCode, setSuggestedCode] = useState('');
-  const [showSuggestedCode, setShowSuggestedCode] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const lastMousePosition = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
 
-  // Track mouse position continuously for toolbar placement
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    lastMousePosition.current = { x: e.clientX, y: e.clientY };
-  }, []);
+  const toolbar = useAnnotationToolbar({ patch, filePath, onLineSelection, onAddAnnotation, onEditAnnotation });
 
   // Clear pending selection when file changes
   const prevFilePathRef = useRef(filePath);
   useEffect(() => {
     if (prevFilePathRef.current !== filePath) {
       prevFilePathRef.current = filePath;
-      onLineSelection(null); // Clear selection when switching files
+      onLineSelection(null);
     }
   }, [filePath, onLineSelection]);
 
@@ -66,7 +58,6 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   useEffect(() => {
     if (!selectedAnnotationId || !containerRef.current) return;
 
-    // Small delay to allow render after file switch
     const timeoutId = setTimeout(() => {
       const annotationEl = containerRef.current?.querySelector(
         `[data-annotation-id="${selectedAnnotationId}"]`
@@ -80,115 +71,43 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   }, [selectedAnnotationId]);
 
   // Map annotations to @pierre/diffs format
-  // Place annotation under the last line of the range (GitHub-style)
   const lineAnnotations = useMemo(() => {
     return annotations.map(ann => ({
-      side: ann.side === 'new' ? 'additions' : 'deletions' as const,
+      side: ann.side === 'new' ? 'additions' as const : 'deletions' as const,
       lineNumber: ann.lineEnd,
       metadata: {
         annotationId: ann.id,
         type: ann.type,
         text: ann.text,
         suggestedCode: ann.suggestedCode,
+        originalCode: ann.originalCode,
         author: ann.author,
       } as DiffAnnotationMetadata,
     }));
   }, [annotations]);
 
-  // Handle line selection end
-  const handleLineSelectionEnd = useCallback((range: SelectedLineRange | null) => {
-    if (!range || !containerRef.current) {
-      setToolbarState(null);
-      onLineSelection(null);
-      return;
-    }
-
-    // Position toolbar near where user clicked/released
-    const mousePos = lastMousePosition.current;
-
-    setToolbarState({
-      position: {
-        top: mousePos.y + 10, // Just below the click
-        left: mousePos.x,
-      },
-      range,
-    });
-    onLineSelection(range);
-  }, [onLineSelection]);
-
-  // Handle annotation submission
-  const handleSubmitAnnotation = useCallback(() => {
-    if (!toolbarState || !commentText.trim()) return;
-
-    onAddAnnotation(
-      'comment',
-      commentText,
-      suggestedCode.trim() || undefined
-    );
-
-    // Reset state
-    setToolbarState(null);
-    setCommentText('');
-    setSuggestedCode('');
-    setShowSuggestedCode(false);
-  }, [toolbarState, commentText, suggestedCode, onAddAnnotation]);
-
-  // Handle cancel
-  const handleCancel = useCallback(() => {
-    setToolbarState(null);
-    setCommentText('');
-    setSuggestedCode('');
-    setShowSuggestedCode(false);
-    onLineSelection(null);
-  }, [onLineSelection]);
+  // Handle edit: find annotation and start editing in toolbar
+  const handleEdit = useCallback((id: string) => {
+    const ann = annotations.find(a => a.id === id);
+    if (ann) toolbar.startEdit(ann);
+  }, [annotations, toolbar.startEdit]);
 
-  useDismissOnOutsideAndEscape({
-    enabled: !!toolbarState,
-    ref: toolbarRef,
-    onDismiss: handleCancel,
-  });
-
-  // Render annotation in diff - returns React element
+  // Render annotation in diff
   const renderAnnotation = useCallback((annotation: { side: string; lineNumber: number; metadata?: DiffAnnotationMetadata }) => {
     if (!annotation.metadata) return null;
 
-    const meta = annotation.metadata;
-
     return (
-      <div
-        className="review-comment"
-        data-annotation-id={meta.annotationId}
-        onClick={() => onSelectAnnotation(meta.annotationId)}
-      >
-        <div className="review-comment-header">
-          {meta.author && <span className="text-xs text-muted-foreground">{meta.author}</span>}
-          <button
-            className="review-comment-delete"
-            onClick={(e) => {
-              e.stopPropagation();
-              onDeleteAnnotation(meta.annotationId);
-            }}
-            title="Delete"
-          >
-            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-        {meta.text && (
-          <div className="review-comment-body">{meta.text}</div>
-        )}
-        {meta.suggestedCode && (
-          <div className="mt-2">
-            <div className="text-[10px] text-muted-foreground mb-1">Suggested:</div>
-            <pre className="export-code-block text-xs">{meta.suggestedCode}</pre>
-          </div>
-        )}
-      </div>
+      <InlineAnnotation
+        metadata={annotation.metadata}
+        language={detectLanguage(filePath)}
+        onSelect={onSelectAnnotation}
+        onEdit={handleEdit}
+        onDelete={onDeleteAnnotation}
+      />
     );
-  }, [onSelectAnnotation, onDeleteAnnotation]);
+  }, [filePath, onSelectAnnotation, handleEdit, onDeleteAnnotation]);
 
-  // Render hover utility (+ button) - returns React element
+  // Render hover utility (+ button)
   const renderHoverUtility = useCallback((getHoveredLine: () => { lineNumber: number; side: 'deletions' | 'additions' } | undefined) => {
     const line = getHoveredLine();
     if (!line) return null;
@@ -198,7 +117,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
         className="hover-add-comment"
         onClick={(e) => {
           e.stopPropagation();
-          handleLineSelectionEnd({
+          toolbar.handleLineSelectionEnd({
             start: line.lineNumber,
             end: line.lineNumber,
             side: line.side,
@@ -208,7 +127,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
         +
       </button>
     );
-  }, [handleLineSelectionEnd]);
+  }, [toolbar.handleLineSelectionEnd]);
 
   // Determine theme for @pierre/diffs
   const pierreTheme = useMemo(() => {
@@ -219,69 +138,17 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   }, [theme]);
 
   return (
-    <div ref={containerRef} className="h-full overflow-auto relative" onMouseMove={handleMouseMove}>
-      {/* File header */}
-      <div className="sticky top-0 z-10 px-4 py-2 bg-card/95 backdrop-blur border-b border-border flex items-center justify-between">
-        <span className="font-mono text-sm text-foreground">{filePath}</span>
-        <div className="flex items-center gap-2">
-          {onToggleViewed && (
-            <button
-              onClick={onToggleViewed}
-              className={`text-xs px-2 py-1 rounded transition-colors flex items-center gap-1 ${
-                isViewed
-                  ? 'bg-success/15 text-success'
-                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
-              }`}
-              title={isViewed ? "Mark as not viewed" : "Mark as viewed"}
-            >
-              {isViewed ? (
-                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              ) : (
-                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <circle cx="12" cy="12" r="9" />
-                </svg>
-              )}
-              Viewed
-            </button>
-          )}
-          <button
-            onClick={async () => {
-              try {
-                await navigator.clipboard.writeText(patch);
-                setCopied(true);
-                setTimeout(() => setCopied(false), 2000);
-              } catch (err) {
-                console.error('Failed to copy:', err);
-              }
-            }}
-            className="text-xs text-muted-foreground hover:text-foreground px-2 py-1 rounded hover:bg-muted transition-colors flex items-center gap-1"
-            title="Copy this file's diff"
-          >
-            {copied ? (
-              <>
-                <svg className="w-3.5 h-3.5 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-                </svg>
-                Copied!
-              </>
-            ) : (
-              <>
-                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                </svg>
-                Copy Diff
-              </>
-            )}
-          </button>
-        </div>
-      </div>
+    <div ref={containerRef} className="h-full overflow-auto relative" onMouseMove={toolbar.handleMouseMove}>
+      <FileHeader
+        filePath={filePath}
+        patch={patch}
+        isViewed={isViewed}
+        onToggleViewed={onToggleViewed}
+      />
 
-      {/* Diff content */}
       <div className="p-4">
         <PatchDiff
-          key={filePath} // Force remount on file change to reset internal state
+          key={filePath}
           patch={patch}
           options={{
             theme: pierreTheme,
@@ -290,7 +157,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
             diffIndicators: 'bars',
             enableLineSelection: true,
             enableHoverUtility: true,
-            onLineSelectionEnd: handleLineSelectionEnd,
+            onLineSelectionEnd: toolbar.handleLineSelectionEnd,
           }}
           lineAnnotations={lineAnnotations}
           selectedLines={pendingSelection || undefined}
@@ -299,86 +166,35 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
         />
       </div>
 
-      {/* Annotation toolbar - single-step comment input */}
-      {toolbarState && (
-        <div
-          ref={toolbarRef}
-          className="review-toolbar"
-          style={{
-            position: 'fixed',
-            top: Math.min(toolbarState.position.top, window.innerHeight - 200),
-            left: Math.max(150, Math.min(toolbarState.position.left, window.innerWidth - 150)),
-            transform: 'translateX(-50%)',
-            zIndex: 1000,
-          }}
-        >
-          <div className="w-80">
-            <div className="flex items-center justify-between mb-2">
-              <span className="text-xs text-muted-foreground">
-                {toolbarState.range.start === toolbarState.range.end
-                  ? `Line ${toolbarState.range.start}`
-                  : `Lines ${Math.min(toolbarState.range.start, toolbarState.range.end)}-${Math.max(toolbarState.range.start, toolbarState.range.end)}`}
-              </span>
-              <button
-                onClick={handleCancel}
-                className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
-                title="Cancel"
-              >
-                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-
-            <textarea
-              value={commentText}
-              onChange={(e) => setCommentText(e.target.value)}
-              placeholder="Leave feedback..."
-              className="w-full px-3 py-2 bg-muted rounded-lg text-xs resize-none focus:outline-none focus:ring-1 focus:ring-primary/50"
-              rows={3}
-              autoFocus
-              onKeyDown={(e) => {
-                if (e.key === 'Escape') {
-                  handleCancel();
-                } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                  handleSubmitAnnotation();
-                }
-              }}
-            />
-
-            {/* Optional suggested code section */}
-            {showSuggestedCode ? (
-              <textarea
-                value={suggestedCode}
-                onChange={(e) => setSuggestedCode(e.target.value)}
-                placeholder="Suggested code..."
-                className="w-full px-3 py-2 mt-2 bg-muted rounded-lg text-xs font-mono resize-none focus:outline-none focus:ring-1 focus:ring-primary/50"
-                rows={3}
-                autoFocus
-              />
-            ) : (
-              <button
-                onClick={() => setShowSuggestedCode(true)}
-                className="mt-2 text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
-              >
-                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
-                </svg>
-                Add suggested code
-              </button>
-            )}
+      {toolbar.toolbarState && (
+        <AnnotationToolbar
+          toolbarState={toolbar.toolbarState}
+          toolbarRef={toolbar.toolbarRef}
+          commentText={toolbar.commentText}
+          setCommentText={toolbar.setCommentText}
+          suggestedCode={toolbar.suggestedCode}
+          setSuggestedCode={toolbar.setSuggestedCode}
+          showSuggestedCode={toolbar.showSuggestedCode}
+          setShowSuggestedCode={toolbar.setShowSuggestedCode}
+          setShowCodeModal={toolbar.setShowCodeModal}
+          isEditing={!!toolbar.editingAnnotationId}
+          onSubmit={toolbar.handleSubmitAnnotation}
+          onDismiss={toolbar.handleDismiss}
+          onCancel={toolbar.handleCancel}
+        />
+      )}
 
-            <div className="flex justify-end gap-2 mt-3">
-              <button
-                onClick={handleSubmitAnnotation}
-                disabled={!commentText.trim()}
-                className="review-toolbar-btn primary disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Add Comment
-              </button>
-            </div>
-          </div>
-        </div>
+      {toolbar.showCodeModal && (
+        <SuggestionModal
+          filePath={filePath}
+          toolbarState={toolbar.toolbarState}
+          selectedOriginalCode={toolbar.selectedOriginalCode}
+          suggestedCode={toolbar.suggestedCode}
+          setSuggestedCode={toolbar.setSuggestedCode}
+          modalLayout={toolbar.modalLayout}
+          setModalLayout={toolbar.setModalLayout}
+          onClose={() => toolbar.setShowCodeModal(false)}
+        />
       )}
     </div>
   );
diff --git a/packages/review-editor/components/FileHeader.tsx b/packages/review-editor/components/FileHeader.tsx
new file mode 100644
index 0000000..1491813
--- /dev/null
+++ b/packages/review-editor/components/FileHeader.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+
+interface FileHeaderProps {
+  filePath: string;
+  patch: string;
+  isViewed?: boolean;
+  onToggleViewed?: () => void;
+}
+
+/** Sticky file header with file path, Viewed toggle, and Copy Diff button */
+export const FileHeader: React.FC<FileHeaderProps> = ({
+  filePath,
+  patch,
+  isViewed = false,
+  onToggleViewed,
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <div className="sticky top-0 z-10 px-4 py-2 bg-card/95 backdrop-blur border-b border-border flex items-center justify-between">
+      <span className="font-mono text-sm text-foreground">{filePath}</span>
+      <div className="flex items-center gap-2">
+        {onToggleViewed && (
+          <button
+            onClick={onToggleViewed}
+            className={`text-xs px-2 py-1 rounded transition-colors flex items-center gap-1 ${
+              isViewed
+                ? 'bg-success/15 text-success'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+            }`}
+            title={isViewed ? "Mark as not viewed" : "Mark as viewed"}
+          >
+            {isViewed ? (
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            ) : (
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <circle cx="12" cy="12" r="9" />
+              </svg>
+            )}
+            Viewed
+          </button>
+        )}
+        <button
+          onClick={async () => {
+            try {
+              await navigator.clipboard.writeText(patch);
+              setCopied(true);
+              setTimeout(() => setCopied(false), 2000);
+            } catch (err) {
+              console.error('Failed to copy:', err);
+            }
+          }}
+          className="text-xs text-muted-foreground hover:text-foreground px-2 py-1 rounded hover:bg-muted transition-colors flex items-center gap-1"
+          title="Copy this file's diff"
+        >
+          {copied ? (
+            <>
+              <svg className="w-3.5 h-3.5 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              Copied!
+            </>
+          ) : (
+            <>
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+              Copy Diff
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/review-editor/components/HighlightedCode.tsx b/packages/review-editor/components/HighlightedCode.tsx
new file mode 100644
index 0000000..28c5b51
--- /dev/null
+++ b/packages/review-editor/components/HighlightedCode.tsx
@@ -0,0 +1,19 @@
+import React, { useRef, useEffect } from 'react';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github-dark.css';
+
+/** Renders a single highlighted code element using highlight.js */
+export const HighlightedCode: React.FC<{ code: string; language?: string }> = ({ code, language }) => {
+  const codeRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (codeRef.current) {
+      codeRef.current.removeAttribute('data-highlighted');
+      codeRef.current.className = language ? `language-${language}` : '';
+      codeRef.current.textContent = code;
+      hljs.highlightElement(codeRef.current);
+    }
+  }, [code, language]);
+
+  return <code ref={codeRef}>{code}</code>;
+};
diff --git a/packages/review-editor/components/InlineAnnotation.tsx b/packages/review-editor/components/InlineAnnotation.tsx
new file mode 100644
index 0000000..152331b
--- /dev/null
+++ b/packages/review-editor/components/InlineAnnotation.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { DiffAnnotationMetadata } from '@plannotator/ui/types';
+import { SuggestionBlock } from './SuggestionBlock';
+import { renderInlineMarkdown } from '../utils/renderInlineMarkdown';
+
+interface InlineAnnotationProps {
+  metadata: DiffAnnotationMetadata;
+  language?: string;
+  onSelect: (id: string) => void;
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+}
+
+/** Renders a single annotation comment inside the diff view */
+export const InlineAnnotation: React.FC<InlineAnnotationProps> = ({
+  metadata,
+  language,
+  onSelect,
+  onEdit,
+  onDelete,
+}) => {
+  return (
+    <div
+      className="review-comment"
+      data-annotation-id={metadata.annotationId}
+      onClick={() => onSelect(metadata.annotationId)}
+    >
+      <div className="review-comment-header">
+        {metadata.author && <span className="text-xs text-muted-foreground">{metadata.author}</span>}
+        <div className="review-comment-actions">
+          <button
+            className="review-comment-action"
+            onClick={(e) => {
+              e.stopPropagation();
+              onEdit(metadata.annotationId);
+            }}
+            title="Edit"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            </svg>
+          </button>
+          <button
+            className="review-comment-action destructive"
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete(metadata.annotationId);
+            }}
+            title="Delete"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+      {metadata.text && (
+        <div className="review-comment-body">{renderInlineMarkdown(metadata.text)}</div>
+      )}
+      {metadata.suggestedCode && (
+        <div className="mt-2">
+          <SuggestionBlock code={metadata.suggestedCode} originalCode={metadata.originalCode} language={language} />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/review-editor/components/ReviewPanel.tsx b/packages/review-editor/components/ReviewPanel.tsx
index 1bbfcf9..a7128f5 100644
--- a/packages/review-editor/components/ReviewPanel.tsx
+++ b/packages/review-editor/components/ReviewPanel.tsx
@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import { CodeAnnotation } from '@plannotator/ui/types';
 import { isCurrentUser } from '@plannotator/ui/utils/identity';
+import { HighlightedCode } from './HighlightedCode';
+import { detectLanguage } from '../utils/detectLanguage';
+import { renderInlineMarkdown } from '../utils/renderInlineMarkdown';
 
 interface DiffFile {
   path: string;
@@ -20,6 +23,32 @@ interface ReviewPanelProps {
   width?: number;
 }
 
+const SuggestionPreview: React.FC<{ code: string; originalCode?: string; language?: string }> = ({ code, originalCode, language }) => {
+  const diffStats = originalCode ? {
+    removed: originalCode.split('\n').length,
+    added: code.split('\n').length,
+  } : null;
+
+  return (
+    <div className="suggestion-block compact">
+      <div className="suggestion-block-header">
+        <svg className="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16m-7 6h7" />
+        </svg>
+        Suggestion
+        {diffStats && (
+          <span className="ml-auto text-[9px] font-mono">
+            <span style={{ color: 'var(--success)' }}>+{diffStats.added}</span>
+            {' '}
+            <span style={{ color: 'var(--destructive)' }}>-{diffStats.removed}</span>
+          </span>
+        )}
+      </div>
+      <pre className="suggestion-block-code"><HighlightedCode code={code} language={language} /></pre>
+    </div>
+  );
+};
+
 function formatTimestamp(ts: number): string {
   const now = Date.now();
   const diff = now - ts;
@@ -36,7 +65,6 @@ function formatTimestamp(ts: number): string {
   return new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
 }
 
-
 export const ReviewPanel: React.FC<ReviewPanelProps> = ({
   isOpen,
   onToggle,
@@ -148,14 +176,14 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
 
                           {/* Content */}
                           {annotation.text && (
-                            <div className="text-xs text-foreground/80 line-clamp-2">
-                              {annotation.text}
+                            <div className="text-xs text-foreground/80 line-clamp-2 review-comment-markdown">
+                              {renderInlineMarkdown(annotation.text)}
                             </div>
                           )}
 
                           {annotation.suggestedCode && (
-                            <div className="mt-1 text-[10px] font-mono text-muted-foreground bg-muted/50 px-2 py-1 rounded truncate">
-                              {annotation.suggestedCode.split('\n')[0]}...
+                            <div className="mt-1.5">
+                              <SuggestionPreview code={annotation.suggestedCode} originalCode={annotation.originalCode} language={detectLanguage(annotation.filePath)} />
                             </div>
                           )}
 
diff --git a/packages/review-editor/components/SuggestionBlock.tsx b/packages/review-editor/components/SuggestionBlock.tsx
new file mode 100644
index 0000000..bf7d7b3
--- /dev/null
+++ b/packages/review-editor/components/SuggestionBlock.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { HighlightedCode } from './HighlightedCode';
+import { SuggestionDiff } from './SuggestionDiff';
+
+/** Suggestion display with header + diff or highlighted code */
+export const SuggestionBlock: React.FC<{
+  code: string;
+  originalCode?: string;
+  language?: string;
+  compact?: boolean;
+}> = ({ code, originalCode, language, compact }) => {
+  return (
+    <div className={`suggestion-block${compact ? ' compact' : ''}`}>
+      <div className="suggestion-block-header">
+        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16m-7 6h7" />
+        </svg>
+        Suggestion
+      </div>
+      {originalCode ? (
+        <SuggestionDiff original={originalCode} suggested={code} />
+      ) : (
+        <pre className="suggestion-block-code"><HighlightedCode code={code} language={language} /></pre>
+      )}
+    </div>
+  );
+};
diff --git a/packages/review-editor/components/SuggestionDiff.tsx b/packages/review-editor/components/SuggestionDiff.tsx
new file mode 100644
index 0000000..849f4ec
--- /dev/null
+++ b/packages/review-editor/components/SuggestionDiff.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+/** Renders original vs suggested code as inline diff lines (git-style) */
+export const SuggestionDiff: React.FC<{ original: string; suggested: string }> = ({ original, suggested }) => {
+  const oldLines = original.split('\n');
+  const newLines = suggested.split('\n');
+
+  return (
+    <div className="suggestion-diff">
+      <div className="suggestion-diff-inner">
+        {oldLines.map((line, i) => (
+          <div key={`del-${i}`} className="suggestion-diff-line removed">
+            <span className="suggestion-diff-indicator">{'\u2212'}</span>
+            <span className="suggestion-diff-content">{line || ' '}</span>
+          </div>
+        ))}
+        {newLines.map((line, i) => (
+          <div key={`add-${i}`} className="suggestion-diff-line added">
+            <span className="suggestion-diff-indicator">+</span>
+            <span className="suggestion-diff-content">{line || ' '}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/review-editor/components/SuggestionModal.tsx b/packages/review-editor/components/SuggestionModal.tsx
new file mode 100644
index 0000000..a2aa86c
--- /dev/null
+++ b/packages/review-editor/components/SuggestionModal.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import { HighlightedCode } from './HighlightedCode';
+import { ToolbarState } from '../hooks/useAnnotationToolbar';
+import { useTabIndent } from '../hooks/useTabIndent';
+import { detectLanguage } from '../utils/detectLanguage';
+
+interface SuggestionModalProps {
+  filePath: string;
+  toolbarState: ToolbarState | null;
+  selectedOriginalCode: string;
+  suggestedCode: string;
+  setSuggestedCode: React.Dispatch<React.SetStateAction<string>>;
+  modalLayout: 'horizontal' | 'vertical';
+  setModalLayout: (layout: 'horizontal' | 'vertical') => void;
+  onClose: () => void;
+}
+
+/** Expanded two-pane code editor modal for writing suggestions */
+export const SuggestionModal: React.FC<SuggestionModalProps> = ({
+  filePath,
+  toolbarState,
+  selectedOriginalCode,
+  suggestedCode,
+  setSuggestedCode,
+  modalLayout,
+  setModalLayout,
+  onClose,
+}) => {
+  const language = detectLanguage(filePath);
+  const handleTabIndent = useTabIndent(setSuggestedCode);
+
+  return (
+    <div className="fixed inset-0 z-[2000] flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+      <div className="relative w-[960px] max-w-[95vw] max-h-[85vh] flex flex-col bg-popover border border-border rounded-xl shadow-2xl">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+          <div className="flex items-center gap-2">
+            <span className="text-xs font-medium text-foreground">Suggest Changes</span>
+            {language && (
+              <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                {language}
+              </span>
+            )}
+            {toolbarState && (
+              <span className="text-[10px] font-mono text-muted-foreground">
+                L{Math.min(toolbarState.range.start, toolbarState.range.end)}
+                {toolbarState.range.start !== toolbarState.range.end &&
+                  `-${Math.max(toolbarState.range.start, toolbarState.range.end)}`}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-1">
+            {/* Layout toggle */}
+            <button
+              onClick={() => setModalLayout(modalLayout === 'horizontal' ? 'vertical' : 'horizontal')}
+              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              title={modalLayout === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'}
+            >
+              {modalLayout === 'horizontal' ? (
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 4h16v7H4zM4 13h16v7H4z" />
+                </svg>
+              ) : (
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 4h7v16H4zM13 4h7v16h-7z" />
+                </svg>
+              )}
+            </button>
+            <button
+              onClick={onClose}
+              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Two-pane layout */}
+        <div className={`flex flex-1 min-h-0 ${modalLayout === 'vertical' ? 'flex-col' : ''}`}>
+          {/* Original code (read-only) */}
+          <div className={`flex-1 flex flex-col min-w-0 min-h-0 ${modalLayout === 'vertical' ? 'border-b border-border' : 'border-r border-border'}`}>
+            <div className="px-3 py-1.5 border-b border-border/50 bg-muted/30">
+              <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Original</span>
+            </div>
+            <pre className="flex-1 overflow-auto p-3 m-0 text-xs leading-relaxed suggestion-modal-original">
+              <HighlightedCode code={selectedOriginalCode || '(no lines selected)'} language={language} />
+            </pre>
+          </div>
+
+          {/* Suggested code input */}
+          <div className="flex-1 flex flex-col min-w-0 min-h-0">
+            <div className="px-3 py-1.5 border-b border-border/50 bg-muted/30">
+              <span className="text-[10px] font-medium text-success uppercase tracking-wider">Suggestion</span>
+            </div>
+            <textarea
+              value={suggestedCode}
+              onChange={(e) => setSuggestedCode(e.target.value)}
+              placeholder={selectedOriginalCode || 'Enter code suggestion...'}
+              className="suggested-code-input flex-1 rounded-none border-0 min-h-[300px]"
+              autoFocus
+              spellCheck={false}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  onClose();
+                } else if (e.key === 'Tab') {
+                  handleTabIndent(e);
+                }
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-4 py-3 border-t border-border">
+          <span className="text-[10px] text-muted-foreground">Tip: Edit the suggestion based on the original code on the left</span>
+          <button
+            onClick={onClose}
+            className="review-toolbar-btn primary"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/review-editor/hooks/useAnnotationToolbar.ts b/packages/review-editor/hooks/useAnnotationToolbar.ts
new file mode 100644
index 0000000..72ef8fa
--- /dev/null
+++ b/packages/review-editor/hooks/useAnnotationToolbar.ts
@@ -0,0 +1,221 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { CodeAnnotation, SelectedLineRange, CodeAnnotationType } from '@plannotator/ui/types';
+import { useDismissOnOutsideAndEscape } from '@plannotator/ui/hooks/useDismissOnOutsideAndEscape';
+import { extractLinesFromPatch } from '../utils/patchParser';
+
+export interface ToolbarState {
+  position: { top: number; left: number };
+  range: SelectedLineRange;
+}
+
+interface UseAnnotationToolbarArgs {
+  patch: string;
+  filePath: string;
+  onLineSelection: (range: SelectedLineRange | null) => void;
+  onAddAnnotation: (type: CodeAnnotationType, text?: string, suggestedCode?: string, originalCode?: string) => void;
+  onEditAnnotation: (id: string, text?: string, suggestedCode?: string, originalCode?: string) => void;
+}
+
+// Per-range draft storage (survives component remounts, e.g. file switches)
+interface Draft {
+  commentText: string;
+  suggestedCode: string;
+  showSuggestedCode: boolean;
+}
+
+const draftStore = new Map<string, Draft>();
+
+function draftKey(filePath: string, range: SelectedLineRange): string {
+  const start = Math.min(range.start, range.end);
+  const end = Math.max(range.start, range.end);
+  return `${filePath}:${range.side}:${start}-${end}`;
+}
+
+export function useAnnotationToolbar({ patch, filePath, onLineSelection, onAddAnnotation, onEditAnnotation }: UseAnnotationToolbarArgs) {
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const lastMousePosition = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+
+  const [toolbarState, setToolbarState] = useState<ToolbarState | null>(null);
+  const [commentText, setCommentText] = useState('');
+  const [suggestedCode, setSuggestedCode] = useState('');
+  const [showSuggestedCode, setShowSuggestedCode] = useState(false);
+  const [selectedOriginalCode, setSelectedOriginalCode] = useState('');
+  const [showCodeModal, setShowCodeModal] = useState(false);
+  const [modalLayout, setModalLayout] = useState<'horizontal' | 'vertical'>('horizontal');
+  const [editingAnnotationId, setEditingAnnotationId] = useState<string | null>(null);
+
+  // Refs to avoid stale closures in saveDraft
+  const formRef = useRef({ commentText, suggestedCode, showSuggestedCode });
+  formRef.current = { commentText, suggestedCode, showSuggestedCode };
+  const toolbarStateRef = useRef(toolbarState);
+  toolbarStateRef.current = toolbarState;
+  const editingRef = useRef(editingAnnotationId);
+  editingRef.current = editingAnnotationId;
+
+  const saveDraft = useCallback(() => {
+    const range = toolbarStateRef.current?.range;
+    if (!range || editingRef.current) return;
+    const form = formRef.current;
+    const key = draftKey(filePath, range);
+    if (form.commentText.trim() || form.suggestedCode.trim()) {
+      draftStore.set(key, { ...form });
+    } else {
+      draftStore.delete(key);
+    }
+  }, [filePath]);
+
+  const clearDraft = useCallback(() => {
+    const range = toolbarStateRef.current?.range;
+    if (!range) return;
+    draftStore.delete(draftKey(filePath, range));
+  }, [filePath]);
+
+  // Save draft on unmount (e.g. file switch)
+  useEffect(() => {
+    return () => saveDraft();
+  }, [saveDraft]);
+
+  const resetForm = useCallback(() => {
+    setToolbarState(null);
+    setCommentText('');
+    setSuggestedCode('');
+    setSelectedOriginalCode('');
+    setShowSuggestedCode(false);
+    setShowCodeModal(false);
+    setEditingAnnotationId(null);
+  }, []);
+
+  // Track mouse position continuously for toolbar placement
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    lastMousePosition.current = { x: e.clientX, y: e.clientY };
+  }, []);
+
+  // Handle line selection end
+  const handleLineSelectionEnd = useCallback((range: SelectedLineRange | null) => {
+    if (!range) {
+      setToolbarState(null);
+      onLineSelection(null);
+      return;
+    }
+
+    // Save current draft before switching
+    saveDraft();
+    setEditingAnnotationId(null);
+
+    // Restore draft for new range or start fresh
+    const draft = draftStore.get(draftKey(filePath, range));
+    if (draft) {
+      setCommentText(draft.commentText);
+      setSuggestedCode(draft.suggestedCode);
+      setShowSuggestedCode(draft.showSuggestedCode);
+    } else {
+      setCommentText('');
+      setSuggestedCode('');
+      setShowSuggestedCode(false);
+    }
+
+    const mousePos = lastMousePosition.current;
+    setToolbarState({
+      position: {
+        top: mousePos.y + 10,
+        left: mousePos.x,
+      },
+      range,
+    });
+
+    // Pre-extract original code from selected lines
+    const side = range.side === 'additions' ? 'new' : 'old';
+    const start = Math.min(range.start, range.end);
+    const end = Math.max(range.start, range.end);
+    setSelectedOriginalCode(extractLinesFromPatch(patch, start, end, side as 'old' | 'new'));
+
+    onLineSelection(range);
+  }, [patch, filePath, onLineSelection, saveDraft]);
+
+  // Handle annotation submission (create or update)
+  const handleSubmitAnnotation = useCallback(() => {
+    const hasComment = commentText.trim().length > 0;
+    const hasCode = suggestedCode.trim().length > 0;
+    if (!toolbarState || (!hasComment && !hasCode)) return;
+
+    const text = hasComment ? commentText.trim() : undefined;
+    const code = hasCode ? suggestedCode : undefined;
+    const original = hasCode && selectedOriginalCode ? selectedOriginalCode : undefined;
+
+    if (editingAnnotationId) {
+      onEditAnnotation(editingAnnotationId, text, code, original);
+    } else {
+      onAddAnnotation('comment', text, code, original);
+    }
+
+    clearDraft();
+    resetForm();
+  }, [toolbarState, commentText, suggestedCode, selectedOriginalCode, editingAnnotationId, onAddAnnotation, onEditAnnotation, clearDraft, resetForm]);
+
+  // Start editing an existing annotation
+  const startEdit = useCallback((annotation: CodeAnnotation) => {
+    setEditingAnnotationId(annotation.id);
+    setCommentText(annotation.text || '');
+    setSuggestedCode(annotation.suggestedCode || '');
+    setSelectedOriginalCode(annotation.originalCode || '');
+    setShowSuggestedCode(!!annotation.suggestedCode);
+    setShowCodeModal(false);
+
+    // Position toolbar near the annotation using last known mouse position
+    const mousePos = lastMousePosition.current;
+    setToolbarState({
+      position: { top: mousePos.y + 10, left: mousePos.x },
+      range: {
+        start: annotation.lineStart,
+        end: annotation.lineEnd,
+        side: annotation.side === 'new' ? 'additions' : 'deletions',
+      },
+    });
+  }, []);
+
+  // Dismiss: save draft and hide toolbar
+  const handleDismiss = useCallback(() => {
+    saveDraft();
+    setToolbarState(null);
+    onLineSelection(null);
+  }, [onLineSelection, saveDraft]);
+
+  // Cancel: explicit discard via X button -- clears draft and form
+  const handleCancel = useCallback(() => {
+    clearDraft();
+    resetForm();
+    onLineSelection(null);
+  }, [onLineSelection, clearDraft, resetForm]);
+
+  useDismissOnOutsideAndEscape({
+    enabled: !!toolbarState && !showCodeModal,
+    ref: toolbarRef,
+    onDismiss: handleDismiss,
+  });
+
+  return {
+    // State
+    toolbarState,
+    commentText,
+    setCommentText,
+    suggestedCode,
+    setSuggestedCode,
+    showSuggestedCode,
+    setShowSuggestedCode,
+    selectedOriginalCode,
+    showCodeModal,
+    setShowCodeModal,
+    modalLayout,
+    setModalLayout,
+    editingAnnotationId,
+    // Refs
+    toolbarRef,
+    // Handlers
+    handleMouseMove,
+    handleLineSelectionEnd,
+    handleSubmitAnnotation,
+    handleDismiss,
+    handleCancel,
+    startEdit,
+  };
+}
diff --git a/packages/review-editor/hooks/useTabIndent.ts b/packages/review-editor/hooks/useTabIndent.ts
new file mode 100644
index 0000000..99138fd
--- /dev/null
+++ b/packages/review-editor/hooks/useTabIndent.ts
@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+
+/**
+ * Returns an onKeyDown handler that inserts two spaces on Tab press in a textarea.
+ * Pass the state setter for the textarea value.
+ */
+export function useTabIndent(setValue: (updater: (prev: string) => string) => void) {
+  return useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key !== 'Tab') return;
+
+    e.preventDefault();
+    const target = e.target as HTMLTextAreaElement;
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+
+    setValue((prev) => prev.substring(0, start) + '  ' + prev.substring(end));
+    requestAnimationFrame(() => {
+      target.selectionStart = target.selectionEnd = start + 2;
+    });
+  }, [setValue]);
+}
diff --git a/packages/review-editor/index.css b/packages/review-editor/index.css
index 658e7c5..8c52841 100644
--- a/packages/review-editor/index.css
+++ b/packages/review-editor/index.css
@@ -204,22 +204,33 @@ diffs-container {
   color: var(--muted-foreground);
 }
 
-.review-comment-delete {
+.review-comment-actions {
   margin-left: auto;
+  display: flex;
+  gap: 0.125rem;
+  opacity: 0;
+  transition: opacity 150ms;
+}
+
+.review-comment:hover .review-comment-actions {
+  opacity: 1;
+}
+
+.review-comment-action {
   padding: 0.25rem;
   border-radius: 0.25rem;
   color: var(--muted-foreground);
-  opacity: 0;
-  transition: opacity 150ms, color 150ms, background 150ms;
+  transition: color 150ms, background 150ms;
 }
 
-.review-comment:hover .review-comment-delete {
-  opacity: 1;
+.review-comment-action:hover {
+  color: var(--foreground);
+  background: var(--muted);
 }
 
-.review-comment-delete:hover {
+.review-comment-action.destructive:hover {
   color: var(--destructive);
-  background: var(--destructive) / 0.1;
+  background: oklch(0.65 0.20 25 / 0.1);
 }
 
 .review-comment-body {
@@ -227,6 +238,40 @@ diffs-container {
   line-height: 1.5;
 }
 
+/* Inline markdown in review comments */
+.review-comment-body .inline-code,
+.review-comment-markdown .inline-code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  background: var(--muted);
+  padding: 0.1em 0.35em;
+  border-radius: 0.25rem;
+}
+
+.review-comment-body .inline-code-block,
+.review-comment-markdown .inline-code-block {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  background: oklch(0.13 0.015 260);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 0.5rem 0.75rem;
+  margin: 0.375rem 0;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.review-comment-body .inline-code-block code,
+.review-comment-markdown .inline-code-block code {
+  font-family: var(--font-mono);
+}
+
+.light .review-comment-body .inline-code-block,
+.light .review-comment-markdown .inline-code-block {
+  background: oklch(0.96 0.005 260);
+}
+
 /* Line selection highlight */
 .line-selected {
   background: oklch(0.75 0.18 280 / 0.15) !important;
@@ -351,6 +396,165 @@ diffs-container {
   word-break: break-word;
 }
 
+/* Suggested code input - code editor style */
+.suggested-code-input {
+  width: 100%;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  line-height: 1.6;
+  color: var(--foreground);
+  background: oklch(0.13 0.015 260);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 0.625rem 0.75rem;
+  resize: vertical;
+  tab-size: 2;
+  white-space: pre;
+  overflow-wrap: normal;
+  overflow-x: auto;
+}
+
+.suggested-code-input::placeholder {
+  color: var(--muted-foreground);
+  opacity: 0.5;
+}
+
+.suggested-code-input:focus {
+  outline: none;
+  border-color: var(--success);
+  box-shadow: 0 0 0 1px oklch(0.72 0.17 150 / 0.3);
+}
+
+.light .suggested-code-input {
+  background: oklch(0.96 0.005 260);
+}
+
+/* GitHub-style suggestion block */
+.suggestion-block {
+  border: 1px solid oklch(0.72 0.17 150 / 0.3);
+  border-left: 3px solid var(--success);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.suggestion-block-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--success);
+  background: oklch(0.72 0.17 150 / 0.08);
+  border-bottom: 1px solid oklch(0.72 0.17 150 / 0.15);
+}
+
+.suggestion-block-code {
+  margin: 0;
+  font-size: 0.6875rem;
+  line-height: 1.6;
+  background: oklch(0.13 0.015 260);
+  padding: 0.5rem 0.75rem;
+  overflow-x: auto;
+}
+
+.suggestion-block-code code {
+  font-family: var(--font-mono);
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+.suggestion-block.compact .suggestion-block-code {
+  max-height: 3rem;
+  overflow: hidden;
+}
+
+.light .suggestion-block-code {
+  background: oklch(0.97 0.005 260);
+}
+
+.light .suggestion-block {
+  border-color: oklch(0.45 0.20 150 / 0.3);
+  border-left-color: var(--success);
+}
+
+.light .suggestion-block-header {
+  background: oklch(0.45 0.20 150 / 0.06);
+  border-bottom-color: oklch(0.45 0.20 150 / 0.12);
+}
+
+/* Suggestion modal original code pane */
+.suggestion-modal-original {
+  font-family: var(--font-mono);
+  background: oklch(0.13 0.015 260);
+}
+
+.suggestion-modal-original code {
+  font-family: var(--font-mono);
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+.light .suggestion-modal-original {
+  background: oklch(0.97 0.005 260);
+}
+
+/* Suggestion diff (original vs suggested) */
+.suggestion-diff {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.suggestion-diff-inner {
+  width: fit-content;
+  min-width: 100%;
+}
+
+.suggestion-diff-line {
+  display: flex;
+  padding: 0 0.625rem;
+  min-height: 1.25rem;
+}
+
+.suggestion-diff-line.removed {
+  background: oklch(0.65 0.20 25 / 0.15);
+}
+
+.suggestion-diff-line.added {
+  background: oklch(0.72 0.17 150 / 0.15);
+}
+
+.suggestion-diff-indicator {
+  flex-shrink: 0;
+  width: 1rem;
+  text-align: center;
+  user-select: none;
+}
+
+.suggestion-diff-line.removed .suggestion-diff-indicator {
+  color: oklch(0.65 0.20 25);
+}
+
+.suggestion-diff-line.added .suggestion-diff-indicator {
+  color: oklch(0.72 0.17 150);
+}
+
+.suggestion-diff-content {
+  white-space: pre;
+}
+
+.light .suggestion-diff-line.removed {
+  background: oklch(0.65 0.20 25 / 0.1);
+}
+
+.light .suggestion-diff-line.added {
+  background: oklch(0.45 0.20 150 / 0.1);
+}
+
 /* Toast animations */
 @keyframes fade-in {
   from { opacity: 0; }
diff --git a/packages/review-editor/package.json b/packages/review-editor/package.json
index 3c08431..535e6f2 100644
--- a/packages/review-editor/package.json
+++ b/packages/review-editor/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "@plannotator/ui": "workspace:*",
     "@pierre/diffs": "^1.0.4",
+    "highlight.js": "^11.11.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "tailwindcss": "^4.1.18"
diff --git a/packages/review-editor/utils/detectLanguage.ts b/packages/review-editor/utils/detectLanguage.ts
new file mode 100644
index 0000000..a0ad37e
--- /dev/null
+++ b/packages/review-editor/utils/detectLanguage.ts
@@ -0,0 +1,14 @@
+/** Map file extension to highlight.js language name */
+export function detectLanguage(filePath: string): string | undefined {
+  const ext = filePath.split('.').pop()?.toLowerCase();
+  const map: Record<string, string> = {
+    ts: 'typescript', tsx: 'typescript', js: 'javascript', jsx: 'javascript',
+    py: 'python', rb: 'ruby', rs: 'rust', go: 'go', java: 'java',
+    kt: 'kotlin', swift: 'swift', cs: 'csharp', cpp: 'cpp', c: 'c', h: 'c',
+    css: 'css', scss: 'scss', less: 'less', html: 'html', xml: 'xml',
+    json: 'json', yaml: 'yaml', yml: 'yaml', md: 'markdown',
+    sql: 'sql', sh: 'bash', bash: 'bash', zsh: 'bash',
+    dockerfile: 'dockerfile', toml: 'toml', lua: 'lua', php: 'php',
+  };
+  return ext ? map[ext] : undefined;
+}
diff --git a/packages/review-editor/utils/formatLineRange.ts b/packages/review-editor/utils/formatLineRange.ts
new file mode 100644
index 0000000..fc61cc9
--- /dev/null
+++ b/packages/review-editor/utils/formatLineRange.ts
@@ -0,0 +1,6 @@
+/** Formats a line range as "Line 5" (single) or "Lines 5-12" (multi-line) */
+export function formatLineRange(start: number, end: number): string {
+  const lo = Math.min(start, end);
+  const hi = Math.max(start, end);
+  return lo === hi ? `Line ${lo}` : `Lines ${lo}-${hi}`;
+}
diff --git a/packages/review-editor/utils/patchParser.ts b/packages/review-editor/utils/patchParser.ts
new file mode 100644
index 0000000..9b3b64d
--- /dev/null
+++ b/packages/review-editor/utils/patchParser.ts
@@ -0,0 +1,58 @@
+/**
+ * Extract line content from a unified diff patch by line number range and side.
+ */
+export function extractLinesFromPatch(
+  patch: string,
+  lineStart: number,
+  lineEnd: number,
+  side: 'old' | 'new'
+): string {
+  const lines = patch.split('\n');
+  const result: string[] = [];
+
+  let oldLine = 0;
+  let newLine = 0;
+
+  for (const line of lines) {
+    // Parse hunk header: @@ -oldStart,oldCount +newStart,newCount @@
+    const hunkMatch = line.match(/^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+    if (hunkMatch) {
+      oldLine = parseInt(hunkMatch[1], 10) - 1;
+      newLine = parseInt(hunkMatch[2], 10) - 1;
+      continue;
+    }
+
+    // Skip diff headers
+    if (line.startsWith('diff ') || line.startsWith('index ') ||
+        line.startsWith('--- ') || line.startsWith('+++ ')) {
+      continue;
+    }
+
+    const prefix = line[0];
+    const content = line.substring(1);
+
+    if (prefix === ' ') {
+      // Context line — exists on both sides
+      oldLine++;
+      newLine++;
+      const lineNum = side === 'old' ? oldLine : newLine;
+      if (lineNum >= lineStart && lineNum <= lineEnd) {
+        result.push(content);
+      }
+    } else if (prefix === '-') {
+      // Deletion — old side only
+      oldLine++;
+      if (side === 'old' && oldLine >= lineStart && oldLine <= lineEnd) {
+        result.push(content);
+      }
+    } else if (prefix === '+') {
+      // Addition — new side only
+      newLine++;
+      if (side === 'new' && newLine >= lineStart && newLine <= lineEnd) {
+        result.push(content);
+      }
+    }
+  }
+
+  return result.join('\n');
+}
diff --git a/packages/review-editor/utils/renderInlineMarkdown.tsx b/packages/review-editor/utils/renderInlineMarkdown.tsx
new file mode 100644
index 0000000..201fce3
--- /dev/null
+++ b/packages/review-editor/utils/renderInlineMarkdown.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+/**
+ * Renders simple inline markdown: `code`, **bold**, *italic*, and
+ * fenced code blocks (```...```). Enough for review comments.
+ */
+export function renderInlineMarkdown(text: string): React.ReactNode[] {
+  const nodes: React.ReactNode[] = [];
+  let key = 0;
+
+  // Split by fenced code blocks first
+  const parts = text.split(/(```[\s\S]*?```)/g);
+
+  for (const part of parts) {
+    if (part.startsWith('```') && part.endsWith('```')) {
+      const inner = part.slice(3, -3);
+      // Strip optional language identifier on first line
+      const newlineIdx = inner.indexOf('\n');
+      const code = newlineIdx >= 0 ? inner.slice(newlineIdx + 1) : inner;
+      nodes.push(
+        <pre key={key++} className="inline-code-block">
+          <code>{code.trim()}</code>
+        </pre>
+      );
+    } else {
+      // Process inline markdown
+      nodes.push(...renderInline(part, key));
+      key++;
+    }
+  }
+
+  return nodes;
+}
+
+function renderInline(text: string, startKey: number): React.ReactNode[] {
+  const nodes: React.ReactNode[] = [];
+  let key = startKey;
+
+  // Match inline patterns: `code`, **bold**, *italic*
+  const regex = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*)/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = regex.exec(text)) !== null) {
+    // Text before match
+    if (match.index > lastIndex) {
+      nodes.push(text.slice(lastIndex, match.index));
+    }
+
+    const token = match[0];
+    if (token.startsWith('`')) {
+      nodes.push(<code key={key++} className="inline-code">{token.slice(1, -1)}</code>);
+    } else if (token.startsWith('**')) {
+      nodes.push(<strong key={key++}>{token.slice(2, -2)}</strong>);
+    } else if (token.startsWith('*')) {
+      nodes.push(<em key={key++}>{token.slice(1, -1)}</em>);
+    }
+
+    lastIndex = match.index + token.length;
+  }
+
+  // Remaining text
+  if (lastIndex < text.length) {
+    nodes.push(text.slice(lastIndex));
+  }
+
+  return nodes;
+}
diff --git a/packages/ui/types.ts b/packages/ui/types.ts
index 2875922..d8ec777 100644
--- a/packages/ui/types.ts
+++ b/packages/ui/types.ts
@@ -66,6 +66,7 @@ export interface CodeAnnotation {
   side: 'old' | 'new'; // Maps to 'deletions' | 'additions' in @pierre/diffs
   text?: string;
   suggestedCode?: string;
+  originalCode?: string; // Original selected lines for suggestion diff
   createdAt: number;
   author?: string;
 }
@@ -76,6 +77,7 @@ export interface DiffAnnotationMetadata {
   type: CodeAnnotationType;
   text?: string;
   suggestedCode?: string;
+  originalCode?: string;
   author?: string;
 }
 

From fdbbe98c74b60b722fb637cf53c8ca3db6a4d0a3 Mon Sep 17 00:00:00 2001
From: flex-yj-kim <yj.kim@flex.team>
Date: Mon, 2 Mar 2026 11:40:49 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20Fix=20annotation=20edit=20fi?=
 =?UTF-8?q?eld=20overwrite=20and=20add=20IME=20composition=20guard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Conditionally spread only defined fields in handleEditAnnotation
  to prevent undefined values from wiping sibling fields
- Add !e.nativeEvent.isComposing guard to Cmd/Ctrl+Enter handlers
  in comment and suggested-code textareas for CJK input support
---
 packages/review-editor/App.tsx                          | 7 ++++++-
 packages/review-editor/components/AnnotationToolbar.tsx | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/review-editor/App.tsx b/packages/review-editor/App.tsx
index b114fcb..79fbb91 100644
--- a/packages/review-editor/App.tsx
+++ b/packages/review-editor/App.tsx
@@ -290,7 +290,12 @@ const ReviewApp: React.FC = () => {
     originalCode?: string
   ) => {
     setAnnotations(prev => prev.map(ann =>
-      ann.id === id ? { ...ann, text, suggestedCode, originalCode } : ann
+      ann.id === id ? {
+        ...ann,
+        ...(text !== undefined && { text }),
+        ...(suggestedCode !== undefined && { suggestedCode }),
+        ...(originalCode !== undefined && { originalCode }),
+      } : ann
     ));
   }, []);
 
diff --git a/packages/review-editor/components/AnnotationToolbar.tsx b/packages/review-editor/components/AnnotationToolbar.tsx
index f5950d4..0c2a41c 100644
--- a/packages/review-editor/components/AnnotationToolbar.tsx
+++ b/packages/review-editor/components/AnnotationToolbar.tsx
@@ -75,7 +75,7 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
           onKeyDown={(e) => {
             if (e.key === 'Escape') {
               onDismiss();
-            } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+            } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !e.nativeEvent.isComposing) {
               onSubmit();
             }
           }}
@@ -107,7 +107,7 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
               onKeyDown={(e) => {
                 if (e.key === 'Tab') {
                   handleTabIndent(e);
-                } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !e.nativeEvent.isComposing) {
                   onSubmit();
                 }
               }}