move reviewer name into comment popup, style inline author as pill

- Name input is now inside the CommentPopup (not a browser prompt)
- Persists in localStorage, pre-fills on subsequent comments
- Inline author shown as a colored pill badge distinct from comment text
- Remove getReviewerName prompt() function

Made-with: Cursor

Author: ofershap

ui/src/App.tsx

@@ -28,10 +28,13 @@ function CommentPopup({
   onCancel,
 }: {
   position: { top: number; left: number };
-  onSave: (text: string) => void;
+  onSave: (text: string, author: string) => void;
   onCancel: () => void;
 }) {
   const [text, setText] = useState("");
+  const [name, setName] = useState(
+    () => localStorage.getItem("cpr-reviewer") ?? "",
+  );
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const popupRef = useRef<HTMLDivElement>(null);
 
@@ -48,6 +51,13 @@ function CommentPopup({
     }
   }, [position]);
 
+  function submit() {
+    if (!text.trim()) return;
+    const author = name.trim();
+    if (author) localStorage.setItem("cpr-reviewer", author);
+    onSave(text.trim(), author);
+  }
+
   return (
     <>
       <div className="comment-backdrop" onClick={onCancel} />
@@ -56,16 +66,23 @@ function CommentPopup({
         className="comment-popup"
         style={{ top: position.top, left: position.left }}
       >
+        <input
+          className="comment-popup-name"
+          placeholder="Your name (optional)"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") onCancel();
+          }}
+        />
         <textarea
           ref={textareaRef}
           className="comment-popup-textarea"
           placeholder="Leave a comment..."
           value={text}
           onChange={(e) => setText(e.target.value)}
           onKeyDown={(e) => {
-            if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && text.trim()) {
-              onSave(text.trim());
-            }
+            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) submit();
             if (e.key === "Escape") onCancel();
           }}
           rows={2}
@@ -75,7 +92,7 @@ function CommentPopup({
           <button
             className="comment-popup-submit"
             disabled={!text.trim()}
-            onClick={() => text.trim() && onSave(text.trim())}
+            onClick={submit}
           >
             Comment
           </button>
@@ -241,12 +258,13 @@ function PlanViewer({
   }, [highlightedText]);
 
   const handleCommentSave = useCallback(
-    (text: string) => {
+    (text: string, author: string) => {
       if (!commentTarget) return;
       onAnnotationCreate({
         type: "COMMENT",
         originalText: commentTarget.text.slice(0, 120),
         text,
+        ...(author ? { author } : {}),
       });
       setCommentTarget(null);
     },
@@ -742,27 +760,11 @@ export default function App() {
       });
   }
 
-  function getReviewerName(): string {
-    let name = localStorage.getItem("cpr-reviewer") ?? "";
-    if (!name) {
-      const input = prompt("Your name (shown on review notes):");
-      name = input?.trim() ?? "";
-      if (name) localStorage.setItem("cpr-reviewer", name);
-    }
-    return name;
-  }
-
   const addAnnotation = useCallback(
     (ann: Omit<Annotation, "id" | "createdAt">) => {
-      const author = getReviewerName();
       setAnnotations((prev) => [
         ...prev,
-        {
-          ...ann,
-          id: crypto.randomUUID(),
-          createdAt: Date.now(),
-          ...(author ? { author } : {}),
-        },
+        { ...ann, id: crypto.randomUUID(), createdAt: Date.now() },
       ]);
     },
     [],
@@ -775,7 +777,13 @@ export default function App() {
   const addGlobalComment = useCallback(() => {
     const text = prompt("Add a global note for the team:");
     if (text?.trim()) {
-      addAnnotation({ type: "GLOBAL_COMMENT", originalText: "", text });
+      const author = localStorage.getItem("cpr-reviewer") ?? "";
+      addAnnotation({
+        type: "GLOBAL_COMMENT",
+        originalText: "",
+        text,
+        ...(author ? { author } : {}),
+      });
     }
   }, [addAnnotation]);
 

ui/src/app.css

@@ -448,9 +448,15 @@ mark.ann-insert {
 }
 
 .ann-author {
+  display: inline-block;
   font-weight: 600;
-  color: var(--text);
-  font-size: 12px;
+  color: var(--blue);
+  font-size: 11px;
+  background: color-mix(in srgb, var(--blue) 12%, transparent);
+  padding: 1px 6px;
+  border-radius: 3px;
+  margin-right: 4px;
+  vertical-align: baseline;
 }
 
 mark.sidebar-highlight {
@@ -489,6 +495,23 @@ mark.sidebar-highlight {
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
 }
 
+.comment-popup-name {
+  width: 100%;
+  background: var(--surface2);
+  border: none;
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+  padding: 8px 12px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+
+.comment-popup-name::placeholder {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
 .comment-popup-textarea {
   width: 100%;
   min-height: 56px;