diff --git a/apps/web/components/task/plan-comments.tsx b/apps/web/components/task/plan-comments.tsx
new file mode 100644
index 0000000000..60c02885a5
--- /dev/null
+++ b/apps/web/components/task/plan-comments.tsx
@@ -0,0 +1,5 @@
+export type PlanComment = {
+ id: string;
+ selectedText: string;
+ comment: string;
+};
diff --git a/apps/web/components/task/plan-selection-popover.tsx b/apps/web/components/task/plan-selection-popover.tsx
new file mode 100644
index 0000000000..737bb1d841
--- /dev/null
+++ b/apps/web/components/task/plan-selection-popover.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { IconPlus } from '@tabler/icons-react';
+import { Button } from '@kandev/ui/button';
+import { Textarea } from '@kandev/ui/textarea';
+import { cn } from '@/lib/utils';
+
+type SelectionPosition = {
+ x: number;
+ y: number;
+};
+
+type PlanSelectionPopoverProps = {
+ selectedText: string;
+ position: SelectionPosition;
+ onAdd: (comment: string, selectedText: string) => void;
+ onClose: () => void;
+ editingComment?: string; // Pre-fill if editing existing comment
+};
+
+export function PlanSelectionPopover({
+ selectedText,
+ position,
+ onAdd,
+ onClose,
+ editingComment,
+}: PlanSelectionPopoverProps) {
+ const [comment, setComment] = useState(editingComment || '');
+ const textareaRef = useRef
(null);
+ const popoverRef = useRef(null);
+
+ // Focus textarea on mount
+ useEffect(() => {
+ textareaRef.current?.focus();
+ }, []);
+
+ // Close on click outside
+ useEffect(() => {
+ const handleClickOutside = (e: MouseEvent) => {
+ if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+ onClose();
+ }
+ };
+ // Delay adding listener to avoid immediate close from selection click
+ const timer = setTimeout(() => {
+ document.addEventListener('mousedown', handleClickOutside);
+ }, 100);
+ return () => {
+ clearTimeout(timer);
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [onClose]);
+
+ // Close on Escape
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ onClose();
+ }
+ };
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }, [onClose]);
+
+ const handleSubmit = useCallback(() => {
+ if (!comment.trim()) return;
+ onAdd(comment.trim(), selectedText);
+ onClose();
+ }, [comment, onAdd, selectedText, onClose]);
+
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault();
+ handleSubmit();
+ }
+ },
+ [handleSubmit]
+ );
+
+ const isDisabled = !comment.trim();
+
+ // Truncate text for preview
+ const previewText = selectedText.length > 80
+ ? selectedText.slice(0, 80).trim() + '…'
+ : selectedText;
+
+ // Calculate position - flip above if would overflow bottom
+ const popoverHeight = 200; // approximate height of popover
+ const gap = 10;
+ const wouldOverflowBottom = position.y + gap + popoverHeight > window.innerHeight;
+ const top = wouldOverflowBottom
+ ? position.y - popoverHeight - gap // Position above selection
+ : position.y + gap; // Position below selection
+
+ return (
+
+ {/* Text preview */}
+
+ “{previewText}”
+
+
+ {/* Comment input */}
+