diff --git a/packages/ui/components/AnnotationToolbar.tsx b/packages/ui/components/AnnotationToolbar.tsx
index 12c470d..7fbbb67 100644
--- a/packages/ui/components/AnnotationToolbar.tsx
+++ b/packages/ui/components/AnnotationToolbar.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
-import { AnnotationType, type ImageAttachment } from "../types";
+import { AnnotationType } from "../types";
 import { createPortal } from "react-dom";
-import { AttachmentsButton } from "./AttachmentsButton";
 import { useDismissOnOutsideAndEscape } from "../hooks/useDismissOnOutsideAndEscape";
 
 type PositionMode = 'center-above' | 'top-right';
@@ -16,22 +15,19 @@ const isEditableElement = (node: EventTarget | Element | null): boolean => {
 interface AnnotationToolbarProps {
   element: HTMLElement;
   positionMode: PositionMode;
-  onAnnotate: (type: AnnotationType, text?: string, images?: ImageAttachment[]) => void;
+  onAnnotate: (type: AnnotationType) => void;
   onClose: () => void;
+  /** Called when user wants to write a comment (opens CommentPopover in parent) */
+  onRequestComment?: (initialChar?: string) => void;
   /** Text to copy (for text selection, pass source.text) */
   copyText?: string;
-  /** Close toolbar when element scrolls out of viewport (only in menu step) */
+  /** Close toolbar when element scrolls out of viewport */
   closeOnScrollOut?: boolean;
   /** Exit animation state */
   isExiting?: boolean;
   /** Hover callbacks for code block behavior */
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
-  onLockChange?: (locked: boolean) => void;
-  /** Start in input step instead of menu (for comment mode) */
-  initialStep?: 'menu' | 'input';
-  /** Pre-set annotation type when starting in input step */
-  initialType?: AnnotationType;
 }
 
 export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
@@ -39,26 +35,18 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
   positionMode,
   onAnnotate,
   onClose,
+  onRequestComment,
   copyText,
   closeOnScrollOut = false,
   isExiting = false,
   onMouseEnter,
   onMouseLeave,
-  onLockChange,
-  initialStep = 'menu',
-  initialType,
 }) => {
-  const [step, setStep] = useState<"menu" | "input">(initialStep);
-  const [activeType, setActiveType] = useState<AnnotationType | null>(initialType ?? null);
-  const [inputValue, setInputValue] = useState("");
-  const [images, setImages] = useState<ImageAttachment[]>([]);
   const [position, setPosition] = useState<{ top: number; left?: number; right?: number } | null>(null);
   const [copied, setCopied] = useState(false);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
   const toolbarRef = useRef<HTMLDivElement>(null);
 
   const handleCopy = async () => {
-    // Use provided copyText, or fall back to code element / element text
     let textToCopy = copyText;
     if (!textToCopy) {
       const codeEl = element.querySelector('code');
@@ -69,43 +57,17 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
     setTimeout(() => setCopied(false), 1500);
   };
 
-  // Focus input when entering input step (including on mount with initialStep='input')
+  // Reset copied state when element changes
   useEffect(() => {
-    if (step === "input") {
-      // Use setTimeout to ensure DOM is fully ready (portals can have timing issues)
-      const timeoutId = setTimeout(() => {
-        const input = inputRef.current;
-        if (input) {
-          input.focus();
-          // Move cursor to end (for type-to-comment with pre-populated char)
-          input.selectionStart = input.selectionEnd = input.value.length;
-        }
-      }, 0);
-      return () => clearTimeout(timeoutId);
-    }
-  }, [step, element]); // Also re-run when element changes (new selection)
-
-  // Reset state when element changes
-  useEffect(() => {
-    setStep(initialStep);
-    setActiveType(initialType ?? null);
-    setInputValue("");
-    setImages([]);
     setCopied(false);
-  }, [element, initialStep, initialType]);
-
-  // Notify parent when locked (in input mode)
-  useEffect(() => {
-    onLockChange?.(step === "input");
-  }, [step, onLockChange]);
+  }, [element]);
 
   // Update position on scroll/resize
   useEffect(() => {
     const updatePosition = () => {
       const rect = element.getBoundingClientRect();
 
-      // Close if scrolled out of viewport (only in menu step if enabled)
-      if (closeOnScrollOut && step === "menu" && (rect.bottom < 0 || rect.top > window.innerHeight)) {
+      if (closeOnScrollOut && (rect.bottom < 0 || rect.top > window.innerHeight)) {
         onClose();
         return;
       }
@@ -131,34 +93,24 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
       window.removeEventListener("scroll", updatePosition, true);
       window.removeEventListener("resize", updatePosition);
     };
-  }, [element, positionMode, closeOnScrollOut, step, onClose]);
+  }, [element, positionMode, closeOnScrollOut, onClose]);
 
-  // Type-to-comment: start typing in menu step → auto-transition to comment input
+  // Type-to-comment: typing opens CommentPopover via parent
   useEffect(() => {
-    if (step !== "menu") return;
-
     const handleKeyDown = (e: KeyboardEvent) => {
-      // 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;
-      // Escape closes the toolbar
       if (e.key === "Escape") { onClose(); return; }
-      // Ignore if modifier keys are held (except shift for capitals)
       if (e.ctrlKey || e.metaKey || e.altKey) return;
-      // Ignore special keys
       if (e.key === "Tab" || e.key === "Enter") return;
-      // Only trigger on printable characters (single char keys)
       if (e.key.length !== 1) return;
 
-      // Transition to comment mode with the typed character
-      setActiveType(AnnotationType.COMMENT);
-      setInputValue(e.key);
-      setStep("input");
+      onRequestComment?.(e.key);
     };
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [step, onClose]);
+  }, [onClose, onRequestComment]);
 
   useDismissOnOutsideAndEscape({
     enabled: true,
@@ -172,15 +124,7 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
     if (type === AnnotationType.DELETION) {
       onAnnotate(type);
     } else {
-      setActiveType(type);
-      setStep("input");
-    }
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (activeType && (inputValue.trim() || images.length > 0)) {
-      onAnnotate(activeType, inputValue || undefined, images.length > 0 ? images : undefined);
+      onRequestComment?.();
     }
   };
 
@@ -216,77 +160,34 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
           to { opacity: 0; transform: translateY(8px)${translateX}; }
         }
       `}</style>
-      {step === "menu" ? (
-        <div className="flex items-center p-1 gap-0.5">
-          <ToolbarButton
-            onClick={handleCopy}
-            icon={copied ? <CheckIcon /> : <CopyIcon />}
-            label={copied ? "Copied!" : "Copy"}
-            className={copied ? "text-success" : "text-muted-foreground hover:bg-muted hover:text-foreground"}
-          />
-          <div className="w-px h-5 bg-border mx-0.5" />
-          <ToolbarButton
-            onClick={() => handleTypeSelect(AnnotationType.DELETION)}
-            icon={<TrashIcon />}
-            label="Delete"
-            className="text-destructive hover:bg-destructive/10"
-          />
-          <ToolbarButton
-            onClick={() => handleTypeSelect(AnnotationType.COMMENT)}
-            icon={<CommentIcon />}
-            label="Comment"
-            className="text-accent hover:bg-accent/10"
-          />
-          <div className="w-px h-5 bg-border mx-0.5" />
-          <ToolbarButton
-            onClick={onClose}
-            icon={<CloseIcon />}
-            label="Cancel"
-            className="text-muted-foreground hover:bg-muted"
-          />
-        </div>
-      ) : (
-        <form onSubmit={handleSubmit} className="flex items-start gap-1.5 p-1.5 pl-3">
-          <textarea
-            ref={inputRef}
-            rows={1}
-            className="bg-transparent text-sm min-w-44 max-w-80 max-h-32 placeholder:text-muted-foreground resize-none px-2 py-1.5 focus:outline-none focus:bg-muted/30"
-            style={{ fieldSizing: "content" } as React.CSSProperties}
-            placeholder="Add a comment..."
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Escape") setStep("menu");
-              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
-                e.preventDefault();
-                if (inputValue.trim() || images.length > 0) {
-                  onAnnotate(activeType!, inputValue || undefined, images.length > 0 ? images : undefined);
-                }
-              }
-            }}
-          />
-          <AttachmentsButton
-            images={images}
-            onAdd={(img) => setImages((prev) => [...prev, img])}
-            onRemove={(path) => setImages((prev) => prev.filter((i) => i.path !== path))}
-            variant="inline"
-          />
-          <button
-            type="submit"
-            disabled={!inputValue.trim() && images.length === 0}
-            className="px-[15px] py-1 text-xs font-medium rounded bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50 transition-opacity self-stretch"
-          >
-            Save
-          </button>
-          <button
-            type="button"
-            onClick={() => setStep("menu")}
-            className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-          >
-            <CloseIcon small />
-          </button>
-        </form>
-      )}
+      <div className="flex items-center p-1 gap-0.5">
+        <ToolbarButton
+          onClick={handleCopy}
+          icon={copied ? <CheckIcon /> : <CopyIcon />}
+          label={copied ? "Copied!" : "Copy"}
+          className={copied ? "text-success" : "text-muted-foreground hover:bg-muted hover:text-foreground"}
+        />
+        <div className="w-px h-5 bg-border mx-0.5" />
+        <ToolbarButton
+          onClick={() => handleTypeSelect(AnnotationType.DELETION)}
+          icon={<TrashIcon />}
+          label="Delete"
+          className="text-destructive hover:bg-destructive/10"
+        />
+        <ToolbarButton
+          onClick={() => handleTypeSelect(AnnotationType.COMMENT)}
+          icon={<CommentIcon />}
+          label="Comment"
+          className="text-accent hover:bg-accent/10"
+        />
+        <div className="w-px h-5 bg-border mx-0.5" />
+        <ToolbarButton
+          onClick={onClose}
+          icon={<CloseIcon />}
+          label="Cancel"
+          className="text-muted-foreground hover:bg-muted"
+        />
+      </div>
     </div>,
     document.body
   );
@@ -317,8 +218,8 @@ const CommentIcon = () => (
   </svg>
 );
 
-const CloseIcon: React.FC<{ small?: boolean }> = ({ small }) => (
-  <svg className={small ? "w-3.5 h-3.5" : "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+const CloseIcon = () => (
+  <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>
 );
diff --git a/packages/ui/components/CommentPopover.tsx b/packages/ui/components/CommentPopover.tsx
new file mode 100644
index 0000000..aa861cf
--- /dev/null
+++ b/packages/ui/components/CommentPopover.tsx
@@ -0,0 +1,325 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import type { ImageAttachment } from '../types';
+import { AttachmentsButton } from './AttachmentsButton';
+
+interface CommentPopoverProps {
+  /** Element to anchor the popover near (re-reads position on scroll) */
+  anchorEl: HTMLElement;
+  /** Truncated selected text shown in header, or empty for global */
+  contextText: string;
+  /** Whether this is a global comment */
+  isGlobal: boolean;
+  /** Pre-filled text (for type-to-comment) */
+  initialText?: string;
+  /** Called on submit with comment text and optional images */
+  onSubmit: (text: string, images?: ImageAttachment[]) => void;
+  /** Called when popover is closed/cancelled */
+  onClose: () => void;
+}
+
+const POPOVER_WIDTH = 384;
+const GAP = 8;
+
+function computePosition(anchorRect: DOMRect): { top: number; left: number; flipAbove: boolean } {
+  const spaceBelow = window.innerHeight - anchorRect.bottom;
+  const flipAbove = spaceBelow < 280;
+
+  const top = flipAbove
+    ? anchorRect.top - GAP
+    : anchorRect.bottom + GAP;
+
+  let left = anchorRect.left + anchorRect.width / 2 - POPOVER_WIDTH / 2;
+  left = Math.max(16, Math.min(left, window.innerWidth - POPOVER_WIDTH - 16));
+
+  return { top, left, flipAbove };
+}
+
+export const CommentPopover: React.FC<CommentPopoverProps> = ({
+  anchorEl,
+  contextText,
+  isGlobal,
+  initialText = '',
+  onSubmit,
+  onClose,
+}) => {
+  const [mode, setMode] = useState<'popover' | 'dialog'>('popover');
+  const [text, setText] = useState(initialText);
+  const [images, setImages] = useState<ImageAttachment[]>([]);
+  const [position, setPosition] = useState<{ top: number; left: number; flipAbove: boolean } | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  // Track anchor position on scroll/resize (popover mode only)
+  useEffect(() => {
+    if (mode !== 'popover') return;
+
+    const update = () => {
+      setPosition(computePosition(anchorEl.getBoundingClientRect()));
+    };
+
+    update();
+    window.addEventListener('scroll', update, true);
+    window.addEventListener('resize', update);
+    return () => {
+      window.removeEventListener('scroll', update, true);
+      window.removeEventListener('resize', update);
+    };
+  }, [anchorEl, mode]);
+
+  // Focus textarea on mount and mode changes
+  useEffect(() => {
+    const id = setTimeout(() => {
+      const el = textareaRef.current;
+      if (el) {
+        el.focus();
+        el.selectionStart = el.selectionEnd = el.value.length;
+      }
+    }, 0);
+    return () => clearTimeout(id);
+  }, [mode]);
+
+  // Click-outside for popover mode
+  useEffect(() => {
+    if (mode !== 'popover') return;
+
+    const handlePointerDown = (e: PointerEvent) => {
+      const target = e.target as Node | null;
+      if (!target) return;
+      if (popoverRef.current?.contains(target)) return;
+      // Don't close if clicking inside an AttachmentsButton portal (z-index 90+)
+      const el = target as HTMLElement;
+      if (el.closest?.('[class*="z-[90]"], [class*="z-[100]"]')) return;
+      onClose();
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    return () => document.removeEventListener('pointerdown', handlePointerDown, true);
+  }, [mode, onClose]);
+
+  const handleSubmit = useCallback(() => {
+    if (text.trim() || images.length > 0) {
+      onSubmit(text, images.length > 0 ? images : undefined);
+    }
+  }, [text, images, onSubmit]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      if (mode === 'dialog') {
+        setMode('popover');
+      } else {
+        onClose();
+      }
+      return;
+    }
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  const headerLabel = isGlobal
+    ? 'Global Comment'
+    : contextText
+      ? `"${contextText.length > 50 ? contextText.slice(0, 50) + '...' : contextText}"`
+      : 'Comment';
+
+  const canSubmit = text.trim().length > 0 || images.length > 0;
+  const isMac = navigator.platform?.includes('Mac') ?? navigator.userAgent?.includes('Mac');
+  const shortcutHint = isMac ? '\u2318\u21B5' : 'Ctrl+\u21B5';
+
+  if (mode === 'dialog') {
+    return createPortal(
+      <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+        {/* Backdrop */}
+        <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" />
+
+        {/* Dialog card */}
+        <div
+          ref={popoverRef}
+          className="relative w-full max-w-xl bg-popover border border-border rounded-xl shadow-2xl flex flex-col"
+          style={{
+            animation: 'comment-dialog-in 0.15s ease-out',
+          }}
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          <style>{`
+            @keyframes comment-dialog-in {
+              from { opacity: 0; transform: scale(0.95); }
+              to { opacity: 1; transform: scale(1); }
+            }
+          `}</style>
+
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border/50">
+            <span className="text-xs text-muted-foreground truncate max-w-[400px]">
+              {headerLabel}
+            </span>
+            <div className="flex items-center gap-1">
+              <button
+                onClick={() => setMode('popover')}
+                className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                title="Collapse"
+              >
+                <CollapseIcon />
+              </button>
+              <button
+                onClick={onClose}
+                className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                title="Close"
+              >
+                <CloseIcon />
+              </button>
+            </div>
+          </div>
+
+          {/* Textarea */}
+          <div className="px-4 py-3 flex-1">
+            <textarea
+              ref={textareaRef}
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={isGlobal ? 'Add a global comment...' : 'Add a comment...'}
+              className="w-full bg-transparent text-sm placeholder:text-muted-foreground resize-none focus:outline-none min-h-48 max-h-96 px-1 py-0.5"
+              style={{ fieldSizing: 'content' } as React.CSSProperties}
+            />
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-between px-4 py-3 border-t border-border/50">
+            <div className="flex items-center gap-2">
+              <AttachmentsButton
+                images={images}
+                onAdd={(img) => setImages((prev) => [...prev, img])}
+                onRemove={(path) => setImages((prev) => prev.filter((i) => i.path !== path))}
+                variant="inline"
+              />
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="text-[10px] text-muted-foreground">{shortcutHint}</span>
+              <button
+                onClick={handleSubmit}
+                disabled={!canSubmit}
+                className="px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+              >
+                {isGlobal ? 'Add' : 'Save'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>,
+      document.body
+    );
+  }
+
+  // Popover mode
+  if (!position) return null;
+
+  return createPortal(
+    <div
+      ref={popoverRef}
+      className="fixed z-[100] bg-popover border border-border rounded-xl shadow-2xl w-96 flex flex-col"
+      style={{
+        top: position.top,
+        left: position.left,
+        ...(position.flipAbove ? { transform: 'translateY(-100%)' } : {}),
+        animation: position.flipAbove
+          ? 'comment-popover-in-above 0.15s ease-out'
+          : 'comment-popover-in 0.15s ease-out',
+      }}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <style>{`
+        @keyframes comment-popover-in {
+          from { opacity: 0; transform: translateY(-8px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes comment-popover-in-above {
+          from { opacity: 0; transform: translateY(-100%) translateY(8px); }
+          to { opacity: 1; transform: translateY(-100%); }
+        }
+      `}</style>
+
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border/50">
+        <span className="text-xs text-muted-foreground truncate max-w-[260px]">
+          {headerLabel}
+        </span>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => setMode('dialog')}
+            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+            title="Expand"
+          >
+            <ExpandIcon />
+          </button>
+          <button
+            onClick={onClose}
+            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+            title="Close"
+          >
+            <CloseIcon />
+          </button>
+        </div>
+      </div>
+
+      {/* Textarea */}
+      <div className="px-3 py-2">
+        <textarea
+          ref={textareaRef}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={isGlobal ? 'Add a global comment...' : 'Add a comment...'}
+          className="w-full bg-transparent text-sm placeholder:text-muted-foreground resize-none focus:outline-none max-h-64 min-h-[4.5rem] px-1 py-0.5"
+          style={{ fieldSizing: 'content' } as React.CSSProperties}
+        />
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between px-3 py-2 border-t border-border/50">
+        <div className="flex items-center gap-2">
+          <AttachmentsButton
+            images={images}
+            onAdd={(img) => setImages((prev) => [...prev, img])}
+            onRemove={(path) => setImages((prev) => prev.filter((i) => i.path !== path))}
+            variant="inline"
+          />
+        </div>
+        <div className="flex items-center gap-3">
+          <span className="text-[10px] text-muted-foreground">{shortcutHint}</span>
+          <button
+            onClick={handleSubmit}
+            disabled={!canSubmit}
+            className="px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+          >
+            {isGlobal ? 'Add' : 'Save'}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+// Icons
+
+const ExpandIcon = () => (
+  <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="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
+  </svg>
+);
+
+const CollapseIcon = () => (
+  <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 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />
+  </svg>
+);
+
+const CloseIcon = () => (
+  <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>
+);
diff --git a/packages/ui/components/Viewer.tsx b/packages/ui/components/Viewer.tsx
index 878523e..c732f33 100644
--- a/packages/ui/components/Viewer.tsx
+++ b/packages/ui/components/Viewer.tsx
@@ -5,6 +5,7 @@ import 'highlight.js/styles/github-dark.css';
 import { Block, Annotation, AnnotationType, EditorMode, type ImageAttachment } from '../types';
 import { Frontmatter } from '../utils/parser';
 import { AnnotationToolbar } from './AnnotationToolbar';
+import { CommentPopover } from './CommentPopover';
 import { TaterSpriteSitting } from './TaterSpriteSitting';
 import { AttachmentsButton } from './AttachmentsButton';
 import { MermaidBlock } from './MermaidBlock';
@@ -100,9 +101,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
   linkedDocInfo,
 }, ref) => {
   const [copied, setCopied] = useState(false);
-  const [showGlobalCommentInput, setShowGlobalCommentInput] = useState(false);
-  const [globalCommentValue, setGlobalCommentValue] = useState('');
-  const globalCommentInputRef = useRef<HTMLTextAreaElement>(null);
+  const globalCommentButtonRef = useRef<HTMLButtonElement>(null);
 
   const handleCopyPlan = async () => {
     try {
@@ -113,32 +112,6 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
       console.error('Failed to copy:', e);
     }
   };
-
-  const handleAddGlobalComment = () => {
-    if (!globalCommentValue.trim()) return;
-
-    const newAnnotation: Annotation = {
-      id: `global-${Date.now()}`,
-      blockId: '',
-      startOffset: 0,
-      endOffset: 0,
-      type: AnnotationType.GLOBAL_COMMENT,
-      text: globalCommentValue.trim(),
-      originalText: '',
-      createdA: Date.now(),
-      author: getIdentity(),
-    };
-
-    onAddAnnotation(newAnnotation);
-    setGlobalCommentValue('');
-    setShowGlobalCommentInput(false);
-  };
-
-  useEffect(() => {
-    if (showGlobalCommentInput) {
-      globalCommentInputRef.current?.focus();
-    }
-  }, [showGlobalCommentInput]);
   const containerRef = useRef<HTMLDivElement>(null);
   const highlighterRef = useRef<Highlighter | null>(null);
   const modeRef = useRef<EditorMode>(mode);
@@ -148,12 +121,17 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     element: HTMLElement;
     source: any;
     selectionText: string;
-    initialStep?: 'menu' | 'input';
-    initialType?: AnnotationType;
   } | null>(null);
   const [hoveredCodeBlock, setHoveredCodeBlock] = useState<{ block: Block; element: HTMLElement } | null>(null);
   const [isCodeBlockToolbarExiting, setIsCodeBlockToolbarExiting] = useState(false);
-  const [isCodeBlockToolbarLocked, setIsCodeBlockToolbarLocked] = useState(false);
+  const [commentPopover, setCommentPopover] = useState<{
+    anchorEl: HTMLElement;
+    contextText: string;
+    initialText?: string;
+    isGlobal: boolean;
+    source?: any;
+    codeBlock?: { block: Block; element: HTMLElement };
+  } | null>(null);
   const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const stickySentinelRef = useRef<HTMLDivElement>(null);
   const [isStuck, setIsStuck] = useState(false);
@@ -506,26 +484,25 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
         const source = sources[0];
         const doms = highlighter.getDoms(source.id);
         if (doms?.length > 0) {
-          // Clean up previous pending highlight if exists
+          // Clean up previous pending highlight and dismiss open popover
           if (pendingSourceRef.current) {
             highlighter.remove(pendingSourceRef.current.id);
             pendingSourceRef.current = null;
           }
+          setCommentPopover(null);
 
           if (modeRef.current === 'redline') {
             // Auto-delete in redline mode
             createAnnotationFromSource(highlighter, source, AnnotationType.DELETION);
             window.getSelection()?.removeAllRanges();
           } else if (modeRef.current === 'comment') {
-            // Comment mode - show input directly
-            const selectionText = source.text;
+            // Comment mode - open CommentPopover directly
             pendingSourceRef.current = source;
-            setToolbarState({
-              element: doms[0] as HTMLElement,
+            setCommentPopover({
+              anchorEl: doms[0] as HTMLElement,
+              contextText: source.text.slice(0, 80),
+              isGlobal: false,
               source,
-              selectionText,
-              initialStep: 'input',
-              initialType: AnnotationType.COMMENT,
             });
           } else {
             // Selection mode - show toolbar menu
@@ -565,11 +542,11 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     });
   }, [annotations]);
 
-  const handleAnnotate = (type: AnnotationType, text?: string, images?: ImageAttachment[]) => {
+  const handleAnnotate = (type: AnnotationType) => {
     const highlighter = highlighterRef.current;
     if (!toolbarState || !highlighter) return;
 
-    createAnnotationFromSource(highlighter, toolbarState.source, type, text, images);
+    createAnnotationFromSource(highlighter, toolbarState.source, type);
     pendingSourceRef.current = null;
     setToolbarState(null);
     window.getSelection()?.removeAllRanges();
@@ -584,64 +561,151 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     window.getSelection()?.removeAllRanges();
   };
 
-  const handleCodeBlockAnnotate = (type: AnnotationType, text?: string, images?: ImageAttachment[]) => {
+  const handleCodeBlockAnnotate = (type: AnnotationType) => {
     const highlighter = highlighterRef.current;
     if (!hoveredCodeBlock || !highlighter) return;
 
-    // Find the code element inside the pre
     const codeEl = hoveredCodeBlock.element.querySelector('code');
     if (!codeEl) return;
 
-    // Use highlighter.fromRange which triggers CREATE event internally
-    // We need to handle this synchronously, so we'll create the annotation directly
     const id = `codeblock-${Date.now()}`;
     const codeText = codeEl.textContent || '';
 
-    // Instead of using surroundContents (which breaks with syntax-highlighted code),
-    // we replace the innerHTML entirely with a mark wrapper containing the plain text
     const wrapper = document.createElement('mark');
     wrapper.className = 'annotation-highlight';
     wrapper.dataset.bindId = id;
     wrapper.textContent = codeText;
 
-    // Add the appropriate class
     if (type === AnnotationType.DELETION) {
       wrapper.classList.add('deletion');
-    } else if (type === AnnotationType.COMMENT) {
-      wrapper.classList.add('comment');
     }
 
-    // Replace code element's content with the wrapper
     codeEl.innerHTML = '';
     codeEl.appendChild(wrapper);
 
-    // Create the annotation
     const newAnnotation: Annotation = {
       id,
       blockId: hoveredCodeBlock.block.id,
       startOffset: 0,
       endOffset: codeText.length,
       type,
-      text,
       originalText: codeText,
       createdA: Date.now(),
       author: getIdentity(),
-      images,
     };
 
     onAddAnnotationRef.current(newAnnotation);
-
-    // Clear selection
     window.getSelection()?.removeAllRanges();
     setHoveredCodeBlock(null);
-    setIsCodeBlockToolbarLocked(false);
   };
 
   const handleCodeBlockToolbarClose = () => {
     setHoveredCodeBlock(null);
-    setIsCodeBlockToolbarLocked(false);
   };
 
+  // CommentPopover handlers
+
+  const handleRequestComment = (initialChar?: string) => {
+    if (!toolbarState) return;
+    setCommentPopover({
+      anchorEl: toolbarState.element,
+      contextText: toolbarState.selectionText.slice(0, 80),
+      initialText: initialChar,
+      isGlobal: false,
+      source: toolbarState.source,
+    });
+    // Close toolbar but keep pendingSourceRef
+    setToolbarState(null);
+  };
+
+  const handleCodeBlockRequestComment = (initialChar?: string) => {
+    if (!hoveredCodeBlock) return;
+    const codeText = hoveredCodeBlock.element.querySelector('code')?.textContent || '';
+    setCommentPopover({
+      anchorEl: hoveredCodeBlock.element,
+      contextText: codeText.slice(0, 80),
+      initialText: initialChar,
+      isGlobal: false,
+      codeBlock: hoveredCodeBlock,
+    });
+    setHoveredCodeBlock(null);
+  };
+
+  const handleCommentSubmit = (text: string, images?: ImageAttachment[]) => {
+    if (!commentPopover) return;
+
+    if (commentPopover.isGlobal) {
+      const newAnnotation: Annotation = {
+        id: `global-${Date.now()}`,
+        blockId: '',
+        startOffset: 0,
+        endOffset: 0,
+        type: AnnotationType.GLOBAL_COMMENT,
+        text: text.trim(),
+        originalText: '',
+        createdA: Date.now(),
+        author: getIdentity(),
+        images,
+      };
+      onAddAnnotation(newAnnotation);
+    } else if (commentPopover.source && highlighterRef.current) {
+      createAnnotationFromSource(
+        highlighterRef.current,
+        commentPopover.source,
+        AnnotationType.COMMENT,
+        text,
+        images
+      );
+      pendingSourceRef.current = null;
+      window.getSelection()?.removeAllRanges();
+    } else if (commentPopover.codeBlock && highlighterRef.current) {
+      // Code block annotation path
+      const { block, element } = commentPopover.codeBlock;
+      const codeEl = element.querySelector('code');
+      if (codeEl) {
+        const id = `codeblock-${Date.now()}`;
+        const codeText = codeEl.textContent || '';
+
+        const wrapper = document.createElement('mark');
+        wrapper.className = 'annotation-highlight comment';
+        wrapper.dataset.bindId = id;
+        wrapper.textContent = codeText;
+
+        codeEl.innerHTML = '';
+        codeEl.appendChild(wrapper);
+
+        const newAnnotation: Annotation = {
+          id,
+          blockId: block.id,
+          startOffset: 0,
+          endOffset: codeText.length,
+          type: AnnotationType.COMMENT,
+          text,
+          originalText: codeText,
+          createdA: Date.now(),
+          author: getIdentity(),
+          images,
+        };
+
+        onAddAnnotationRef.current(newAnnotation);
+        window.getSelection()?.removeAllRanges();
+      }
+    }
+
+    setCommentPopover(null);
+  };
+
+  const handleCommentClose = useCallback(() => {
+    setCommentPopover((prev) => {
+      if (prev?.source && highlighterRef.current) {
+        highlighterRef.current.remove(prev.source.id);
+        pendingSourceRef.current = null;
+      }
+      return null;
+    });
+    window.getSelection()?.removeAllRanges();
+  }, []);
+
   return (
     <div className="relative z-50 w-full max-w-[832px] 2xl:max-w-5xl">
       {taterMode && <TaterSpriteSitting />}
@@ -722,69 +786,24 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
             />
           )}
 
-          {/* Global comment button/input */}
-          {showGlobalCommentInput ? (
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                handleAddGlobalComment();
-              }}
-              className="flex items-start gap-1.5 bg-muted/80 rounded-md p-1"
-            >
-              <textarea
-                ref={globalCommentInputRef}
-                rows={1}
-                className="bg-transparent text-xs min-w-40 md:min-w-56 max-w-80 max-h-32 placeholder:text-muted-foreground resize-none px-2 py-1.5 focus:outline-none"
-                style={{ fieldSizing: 'content' } as React.CSSProperties}
-                placeholder="Add a global comment..."
-                value={globalCommentValue}
-                onChange={(e) => setGlobalCommentValue(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Escape') {
-                    setShowGlobalCommentInput(false);
-                    setGlobalCommentValue('');
-                  }
-                  // Enter to submit, Shift+Enter for newline
-                  if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
-                    e.preventDefault();
-                    if (globalCommentValue.trim()) {
-                      handleAddGlobalComment();
-                    }
-                  }
-                }}
-              />
-              <button
-                type="submit"
-                disabled={!globalCommentValue.trim()}
-                className="self-start px-2 py-1.5 text-xs font-medium rounded bg-secondary text-secondary-foreground hover:opacity-90 disabled:opacity-50 transition-all"
-              >
-                Add
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  setShowGlobalCommentInput(false);
-                  setGlobalCommentValue('');
-                }}
-                className="self-start p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-              >
-                <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>
-            </form>
-          ) : (
-            <button
-              onClick={() => setShowGlobalCommentInput(true)}
-              className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground bg-muted/50 hover:bg-muted rounded-md transition-colors"
-              title="Add global comment"
-            >
-              <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="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
-              </svg>
-              <span className="hidden md:inline">Global comment</span>
-            </button>
-          )}
+          {/* Global comment button */}
+          <button
+            ref={globalCommentButtonRef}
+            onClick={() => {
+              setCommentPopover({
+                anchorEl: globalCommentButtonRef.current!,
+                contextText: '',
+                isGlobal: true,
+              });
+            }}
+            className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground bg-muted/50 hover:bg-muted rounded-md transition-colors"
+            title="Add global comment"
+          >
+            <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="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
+            </svg>
+            <span className="hidden md:inline">Global comment</span>
+          </button>
 
           {/* Copy plan/file button */}
           <button
@@ -855,10 +874,9 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
             positionMode="center-above"
             onAnnotate={handleAnnotate}
             onClose={handleToolbarClose}
+            onRequestComment={handleRequestComment}
             copyText={toolbarState.selectionText}
             closeOnScrollOut
-            initialStep={toolbarState.initialStep}
-            initialType={toolbarState.initialType}
           />
         )}
 
@@ -869,6 +887,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
             positionMode="top-right"
             onAnnotate={handleCodeBlockAnnotate}
             onClose={handleCodeBlockToolbarClose}
+            onRequestComment={handleCodeBlockRequestComment}
             isExiting={isCodeBlockToolbarExiting}
             onMouseEnter={() => {
               if (hoverTimeoutRef.current) {
@@ -878,8 +897,6 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
               setIsCodeBlockToolbarExiting(false);
             }}
             onMouseLeave={() => {
-              // Don't close if toolbar is locked (in input mode)
-              if (isCodeBlockToolbarLocked) return;
               hoverTimeoutRef.current = setTimeout(() => {
                 setIsCodeBlockToolbarExiting(true);
                 setTimeout(() => {
@@ -888,7 +905,18 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
                 }, 150);
               }, 100);
             }}
-            onLockChange={setIsCodeBlockToolbarLocked}
+          />
+        )}
+
+        {/* Comment popover */}
+        {commentPopover && (
+          <CommentPopover
+            anchorEl={commentPopover.anchorEl}
+            contextText={commentPopover.contextText}
+            isGlobal={commentPopover.isGlobal}
+            initialText={commentPopover.initialText}
+            onSubmit={handleCommentSubmit}
+            onClose={handleCommentClose}
           />
         )}
       </article>