fix(comment): dedup edits, preserve drafts, keep bubble open on failure

Four concrete bugs in the comment send flow, plus two UX hardening items.
Layered on top of the liveRects pin-follow-scroll work so anchor math
stays as-is — this change is strictly about the send/edit/close loop.

1. Editing a reopened chip duplicated instead of updating the original.
   existingCommentId was defined on the anchor but never consumed. New
   submitComment action routes by id: with → updateComment (no new row),
   without → addComment. updateComment now returns CommentRow | null so
   callers can detect write failures.

2. addComment / updateComment failures (no snapshot, IPC error, validator
   reject) silently closed the bubble and wiped the user's draft. The
   bubble now checks the return value and stays open on null. The toast
   surfaced by the store is enough context for the user.

3. Mousedown-outside auto-close discarded in-flight text whenever the
   user clicked any surrounding UI — toolbar, sidebar, preview. Replaced
   with explicit Esc / × only, matching chat/dialog norms.

4. React key used selector alone, so two comments on the same element
   shared state across mounts. Now edit:<id> / new:<selector>.

Plus:

- Unsent drafts persist across chip / element switches via a ref-backed
  Map keyed by bubbleKey. Cleared on successful submit; explicit close
  deliberately preserves so users can resume.
- CommentChipBar's Apply button now toasts "onboardingIncomplete" when
  config isn't ready, instead of letting sendPrompt silently early-return.

Author: hqhq1025

apps/desktop/src/renderer/src/components/PreviewPane.tsx

@@ -296,7 +296,7 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
   const commentBubble = useCodesignStore((s) => s.commentBubble);
   const openCommentBubble = useCodesignStore((s) => s.openCommentBubble);
   const closeCommentBubble = useCodesignStore((s) => s.closeCommentBubble);
-  const addComment = useCodesignStore((s) => s.addComment);
+  const submitComment = useCodesignStore((s) => s.submitComment);
   const applyLiveRects = useCodesignStore((s) => s.applyLiveRects);
   const clearLiveRects = useCodesignStore((s) => s.clearLiveRects);
   const liveRects = useCodesignStore((s) => s.liveRects);
@@ -305,6 +305,11 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
   // window.message guard. We re-point this whenever the active design changes
   // or the active iframe element re-mounts.
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  // Unsent bubble drafts, keyed by bubbleKey (edit:<id> | new:<selector>).
+  // Lives across bubble remounts so switching to another chip / element and
+  // coming back restores the text the user had typed. Cleared on successful
+  // submit; explicit close (Esc / ×) deliberately preserves.
+  const bubbleDraftsRef = useRef<Map<string, string>>(new Map());
   const iframesByDesign = useRef<Map<string, HTMLIFrameElement>>(new Map());
   // Bumped every time the active iframe fires onLoad — used to re-trigger
   // the WATCH_SELECTORS effect so we don't race past overlay installation
@@ -551,16 +556,28 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
               const scaled = liveForBubble
                 ? scaleRectForZoom(liveForBubble, previewZoom)
                 : commentBubble.rect;
+              const existingId = commentBubble.existingCommentId;
+              // Keying by comment id (when editing) rather than selector alone
+              // means two comments on the same element each get their own draft
+              // state and don't stomp each other on reopen.
+              const bubbleKey = existingId ? `edit:${existingId}` : `new:${commentBubble.selector}`;
+              // Draft precedence: prior unsent draft for this anchor > DB text
+              // on a reopened chip > empty. This preserves mid-typing context
+              // when the user clicks another chip and comes back.
+              const stashed = bubbleDraftsRef.current.get(bubbleKey);
+              const initialText = stashed ?? commentBubble.initialText;
               return (
                 <CommentBubble
-                  key={commentBubble.selector}
+                  key={bubbleKey}
                   selector={commentBubble.selector}
                   tag={commentBubble.tag}
                   outerHTML={commentBubble.outerHTML}
                   rect={scaled}
-                  {...(commentBubble.initialText !== undefined
-                    ? { initialText: commentBubble.initialText }
-                    : {})}
+                  {...(initialText !== undefined ? { initialText } : {})}
+                  onDraftChange={(text) => {
+                    if (text.length === 0) bubbleDraftsRef.current.delete(bubbleKey);
+                    else bubbleDraftsRef.current.set(bubbleKey, text);
+                  }}
                   onClose={() => {
                     const win = iframeRef.current?.contentWindow;
                     if (win) {
@@ -573,18 +590,26 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
                     closeCommentBubble();
                   }}
                   onSendToClaude={async (text: string) => {
-                    await addComment({
+                    const row = await submitComment({
                       kind: 'edit',
                       selector: commentBubble.selector,
                       tag: commentBubble.tag,
                       outerHTML: commentBubble.outerHTML,
                       rect: commentBubble.rect,
                       text,
                       scope: 'element',
+                      ...(existingId ? { existingCommentId: existingId } : {}),
                       ...(commentBubble.parentOuterHTML
                         ? { parentOuterHTML: commentBubble.parentOuterHTML }
                         : {}),
                     });
+                    // On failure (no snapshot, IPC error, duplicate) keep the
+                    // bubble open so the user's draft survives. A toast has
+                    // already been surfaced by the store layer.
+                    if (!row) return;
+                    // Persisted — wipe the stashed draft so the next open
+                    // starts clean (a reopened chip re-reads from DB).
+                    bubbleDraftsRef.current.delete(bubbleKey);
                     const win = iframeRef.current?.contentWindow;
                     if (win) {
                       try {

apps/desktop/src/renderer/src/components/chat/CommentChipBar.tsx

@@ -19,13 +19,32 @@ export function CommentChipBar() {
   const removeComment = useCodesignStore((s) => s.removeComment);
   const previewZoom = useCodesignStore((s) => s.previewZoom);
   const sendPrompt = useCodesignStore((s) => s.sendPrompt);
+  const pushToast = useCodesignStore((s) => s.pushToast);
+  const config = useCodesignStore((s) => s.config);
   const isGenerating = useCodesignStore(
     (s) => s.isGenerating && s.generatingDesignId === s.currentDesignId,
   );
 
   const pending = comments.filter((c) => c.kind === 'edit' && c.status === 'pending');
   if (pending.length === 0) return null;
 
+  const isReady =
+    config?.hasKey === true && config.provider !== null && config.modelPrimary !== null;
+
+  function handleApply(): void {
+    // sendPrompt silently early-returns on !isReady or during another run.
+    // The button disables during `isGenerating`, but onboarding-incomplete
+    // users would otherwise click Apply to no effect. Surface it explicitly.
+    if (!isReady) {
+      pushToast({
+        variant: 'error',
+        title: t('notifications.onboardingIncomplete'),
+      });
+      return;
+    }
+    void sendPrompt({ prompt: '' });
+  }
+
   return (
     <div className="flex flex-wrap items-center gap-[var(--space-1_5)]">
       <ul
@@ -77,7 +96,7 @@ export function CommentChipBar() {
       <button
         type="button"
         disabled={isGenerating}
-        onClick={() => void sendPrompt({ prompt: '' })}
+        onClick={handleApply}
         className="inline-flex items-center gap-[var(--space-1)] h-[24px] px-[var(--space-2_5)] rounded-full bg-[var(--color-accent)] text-[var(--color-on-accent)] text-[var(--text-2xs)] font-medium hover:bg-[var(--color-accent-hover)] active:scale-[var(--scale-press-down)] disabled:opacity-50 transition-[transform,background-color] duration-[var(--duration-faster)] shrink-0"
         aria-label={t('commentChip.applyAll')}
       >

apps/desktop/src/renderer/src/components/comment/CommentBubble.tsx

@@ -9,6 +9,10 @@ export interface CommentBubbleProps {
   outerHTML: string;
   rect: { top: number; left: number; width: number; height: number };
   initialText?: string;
+  /** Called on every keystroke so the host (PreviewPane) can persist an
+   *  unsent draft keyed by anchor id. Without this, switching to a different
+   *  chip / element silently discarded the current text. */
+  onDraftChange?: (text: string) => void;
   onClose: () => void;
   onSendToClaude: (text: string) => Promise<void> | void;
 }
@@ -30,6 +34,7 @@ export function CommentBubble({
   outerHTML,
   rect,
   initialText,
+  onDraftChange,
   onClose,
   onSendToClaude,
 }: CommentBubbleProps) {
@@ -45,19 +50,17 @@ export function CommentBubble({
   }, []);
 
   useEffect(() => {
+    // Esc + the × button are the only ways to close. The previous mousedown-
+    // outside handler silently discarded the user's draft whenever they
+    // clicked surrounding UI (toolbar, sidebar, preview) — the single most
+    // frustrating failure mode. Explicit close mirrors how chat / dialog UIs
+    // treat in-progress text.
     function onKey(e: KeyboardEvent) {
       if (e.key === 'Escape') onClose();
     }
-    function onDocClick(e: MouseEvent) {
-      if (!rootRef.current) return;
-      if (e.target instanceof Node && rootRef.current.contains(e.target)) return;
-      onClose();
-    }
     document.addEventListener('keydown', onKey);
-    document.addEventListener('mousedown', onDocClick);
     return () => {
       document.removeEventListener('keydown', onKey);
-      document.removeEventListener('mousedown', onDocClick);
     };
   }, [onClose]);
 
@@ -119,7 +122,9 @@ export function CommentBubble({
             ref={textareaRef}
             value={draft}
             onChange={(e) => {
-              setDraft(e.target.value);
+              const next = e.target.value;
+              setDraft(next);
+              onDraftChange?.(next);
               const el = e.currentTarget;
               el.style.height = 'auto';
               el.style.height = `${Math.min(el.scrollHeight, 120)}px`;

apps/desktop/src/renderer/src/store.ts

@@ -294,7 +294,22 @@ interface CodesignState {
     scope?: CommentScope;
     parentOuterHTML?: string;
   }) => Promise<CommentRow | null>;
-  updateComment: (id: string, patch: { text?: string }) => Promise<void>;
+  updateComment: (id: string, patch: { text?: string }) => Promise<CommentRow | null>;
+  /** Single entry point used by CommentBubble. If `existingCommentId` is set,
+   *  routes to updateComment (editing a saved comment); otherwise addComment
+   *  (creating a new one). Returns the resulting row on success, null on
+   *  failure — callers must check before closing UI so drafts aren't lost. */
+  submitComment: (input: {
+    existingCommentId?: string;
+    kind: CommentKind;
+    selector: string;
+    tag: string;
+    outerHTML: string;
+    rect: CommentRect;
+    text: string;
+    scope?: CommentScope;
+    parentOuterHTML?: string;
+  }) => Promise<CommentRow | null>;
   removeComment: (id: string) => Promise<void>;
   /** Replace the live rects map — called from PreviewPane when the sandbox
    *  broadcasts an ELEMENT_RECTS message. Entries are iframe-viewport-relative
@@ -2073,23 +2088,46 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   },
 
   async updateComment(id, patch) {
-    if (!window.codesign) return;
+    if (!window.codesign) return null;
     try {
       const updated = await window.codesign.comments.update(id, patch);
-      if (!updated) return;
+      if (!updated) return null;
       set((s) => ({
         comments: s.comments.map((c) => (c.id === id ? updated : c)),
       }));
+      return updated;
     } catch (err) {
       const msg = err instanceof Error ? err.message : tr('errors.unknown');
       get().pushToast({
         variant: 'error',
         title: tr('notifications.commentUpdateFailed'),
         description: msg,
       });
+      return null;
     }
   },
 
+  async submitComment(input) {
+    // Route by presence of existingCommentId. The anchor on a reopened chip
+    // carries the id, so editing text hits updateComment (no duplicate row);
+    // a fresh click in comment mode falls through to addComment. Both return
+    // the row on success so the bubble can decide whether to close.
+    if (input.existingCommentId) {
+      return get().updateComment(input.existingCommentId, { text: input.text });
+    }
+    const payload: Parameters<CodesignState['addComment']>[0] = {
+      kind: input.kind,
+      selector: input.selector,
+      tag: input.tag,
+      outerHTML: input.outerHTML,
+      rect: input.rect,
+      text: input.text,
+    };
+    if (input.scope) payload.scope = input.scope;
+    if (input.parentOuterHTML) payload.parentOuterHTML = input.parentOuterHTML;
+    return get().addComment(payload);
+  },
+
   async removeComment(id) {
     if (!window.codesign) return;
     try {