feat: Add code suggestions, inline editing, and refactor DiffViewer

[flex-yj-kim]

Summary

• GitHub-style suggestion blocks with syntax-highlighted diff view (original → suggested)
• Inline annotation editing via toolbar (edit button on inline comments in diff view)
• Expandable two-pane code modal for writing code suggestions
• Inline markdown rendering (bold, italic, `code`) in review comments
• Decompose DiffViewer (615 → 200 lines) into focused components and hooks

Changes

New Components

• AnnotationToolbar — Floating comment input form with suggested code support
• SuggestionBlock / SuggestionDiff — Suggestion display with git-style inline diff
• SuggestionModal — Two-pane code editor modal (original + suggestion side-by-side)
• InlineAnnotation — Annotation comment rendered inside the diff view
• FileHeader — Sticky file header with stats and viewed toggle
• HighlightedCode — Shared highlight.js code element

New Hooks & Utils

• useAnnotationToolbar — Toolbar state, form, edit mode, submission logic
• useTabIndent — Tab-key indentation for code textareas
• patchParser — Extract original lines from unified diff patches
• detectLanguage / formatLineRange / renderInlineMarkdown

Bug Fixes

• Fix suggestedCode.trim() stripping meaningful indentation on submit
• Fix stale closure in useTabIndent consumers

Note

UI styling is based on my own judgment to keep things consistent. If there are preferred styles or design conventions, happy to adjust — feedback is very welcome.

[flex-yj-kim]

[backnotprop]

Excited for this, taking a look soon

[backnotprop]

Code review

Found 2 issues:

1. handleEditAnnotation overwrites annotation fields with undefined when only one field is edited. The callback spreads { ...ann, text, suggestedCode, originalCode } unconditionally, but the callsite at line 141-143 of useAnnotationToolbar.ts sets text or suggestedCode to undefined when the user didn't fill that field. This means editing only a comment will clear any existing suggestedCode, and vice versa.

plannotator/packages/review-editor/App.tsx

Lines 285 to 295 in 8a6e9a6

	// 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
	));
	}, []);

Callsite that passes undefined:

plannotator/packages/review-editor/hooks/useAnnotationToolbar.ts

Lines 140 to 147 in 8a6e9a6

	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 {

2. Missing e.isComposing guard on Cmd/Ctrl+Enter submit in the review-editor AnnotationToolbar. The plan-editor toolbar already has this guard (line 142 of packages/ui/components/AnnotationToolbar.tsx) to prevent CJK IME composition from accidentally triggering submission — tracked in issue CJK input method enter make comment complete trigger #191. The new review-editor toolbar omits it.

plannotator/packages/review-editor/components/AnnotationToolbar.tsx

Lines 74 to 82 in 8a6e9a6

	autoFocus
	onKeyDown={(e) => {
	if (e.key === 'Escape') {
	onDismiss();
	} else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
	onSubmit();
	}
	}}
	/>

Existing guard in plan-editor for reference:

plannotator/packages/ui/components/AnnotationToolbar.tsx

Lines 141 to 143 in 8a6e9a6

	// Protect global comment and any editable field focus from type-to-comment capture.
	if (e.isComposing) return;
	if (isEditableElement(e.target) || isEditableElement(document.activeElement)) return;

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}

[backnotprop]

^ AI generated that. I am reviewing

[backnotprop]

@flex-yj-kim Two suggested fixes below — one bug where editing an annotation silently wipes sibling fields, and one missing IME guard that the plan-editor already has.

[backnotprop]

I can address these soon today as well, plan to release later tonight

[flex-yj-kim]

Thanks for the review! I've been using your plannotator heavily in my daily workflow and it's been exactly what I needed for developing with Claude. Thank you for building such a great tool, and for taking the time to look at this PR.

[backnotprop]

@flex-yj-kim Great work! Do you have socials? I can tag you in next release