@hienlh/ppm 0.23.14 → 0.23.15

package/src/web/components/design/comments/comment-composer.tsx

@@ -1,45 +1,42 @@
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
-import { Loader2, Trash2 } from "@/lib/icons";
+import { Loader2 } from "@/lib/icons";
 import { Button } from "@/components/ui/button";
 import { DesignResponsiveDialog } from "../dialogs/design-responsive-dialog";
 import { COMMENT_LIMITS } from "../../../../shared/design-comment-types";
 
 /**
- * Writing a comment on an element, editing one, or adding a note to "Send to AI" for a
- * single element. The element's text and markup are shown as plain text: both come from the
+ * Writing a comment on an element, or adding a note to "Send to AI" for a single element.
+ * An existing comment opens as its thread instead (`comment-thread-view.tsx`). The element's text and markup are shown as plain text: both come from the
  * page and are never rendered as HTML.
  */
 
 export interface ComposerTarget {
-  mode: "create" | "edit" | "send";
+  mode: "create" | "send";
   tag: string;
   /** The element's text as the page reported it (or as the comment stored it). */
   text: string;
   /** The page's markup for the element, shown for orientation only. */
   markup?: string;
-  initialBody?: string;
 }
 
 const TITLES: Record<ComposerTarget["mode"], (tag: string) => string> = {
   create: (tag) => `Comment on <${tag}>`,
-  edit: () => "Comment",
   send: (tag) => `Send <${tag}> to AI`,
 };
 
-export function CommentComposer({ target, onClose, onSubmit, onDelete }: {
+export function CommentComposer({ target, onClose, onSubmit }: {
   target: ComposerTarget | null;
   onClose: () => void;
   /** Resolves when done; a rejection keeps the dialog open with the text intact. */
   onSubmit: (body: string) => Promise<void>;
-  onDelete?: () => Promise<void>;
 }) {
   const [body, setBody] = useState("");
   const [busy, setBusy] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
-    setBody(target?.initialBody ?? "");
+    setBody("");
     setBusy(false);
     if (target) requestAnimationFrame(() => inputRef.current?.focus());
   }, [target]);
@@ -66,11 +63,6 @@ export function CommentComposer({ target, onClose, onSubmit, onDelete }: {
       title={TITLES[target.mode](target.tag)}
       description={sending ? "Add a note if you like. You will see the whole message before it goes into the chat." : undefined}
       footer={<>
-        {target.mode === "edit" && onDelete && (
-          <Button variant="outline" className="text-destructive md:mr-auto" disabled={busy} onClick={() => run(onDelete)}>
-            <Trash2 className="size-4" /> Delete
-          </Button>
-        )}
         <Button variant="outline" onClick={onClose} disabled={busy}>Cancel</Button>
         <Button disabled={!canSubmit} onClick={() => run(() => onSubmit(body))}>
           {busy && <Loader2 className="size-4 animate-spin" />} {sending ? "Preview message" : "Save"}

package/src/web/components/design/comments/comment-pins-overlay.tsx

@@ -1,4 +1,4 @@
-import { CheckCircle, Send, Trash2 } from "@/lib/icons";
+import { CheckCircle, MessageSquare, Send, Trash2 } from "@/lib/icons";
 import {
   ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger,
 } from "@/components/ui/adaptive-context-menu";
@@ -12,12 +12,16 @@ import type { DesignComment } from "../../../../shared/design-comment-types";
  * Numbered pins over the canvas, one per open comment whose element is on screen, at the
  * element's top-right corner. Each is a 44px target (the dot inside is smaller) with the
  * adaptive context menu: right-click on desktop, long-press on touch; a tap opens the
- * comment. A pin that was found again by its text after an edit gets a dashed ring, so a
+ * thread. A pin that was found again by its text after an edit gets a dashed ring, so a
  * re-anchor is visible rather than silent.
+ *
+ * Pins follow `anchor`, i.e. the element in the live file. A reviewer's own pin position in
+ * the version their link shows is `pinnedAnchor`, which the canvas never sends or changes.
  */
 
 export interface PinActions {
   onOpen: (c: DesignComment) => void;
+  onReply: (c: DesignComment) => void;
   onResolve: (c: DesignComment) => void;
   onSend: (c: DesignComment) => void;
   onDelete: (c: DesignComment) => void;
@@ -43,7 +47,7 @@ export function CommentPinsOverlay({ open, pins, fit, stage, actions }: {
               <button
                 type="button"
                 onClick={() => actions.onOpen(c)}
-                aria-label={`Comment ${i + 1}: ${c.body}`}
+                aria-label={`Comment ${i + 1}${c.author?.kind === "guest" ? ` by ${c.author.name}` : ""}: ${c.body}`}
                 title={c.body}
                 className="pointer-events-auto absolute flex size-11 -translate-x-1/2 -translate-y-1/2 select-none items-center justify-center"
                 style={{ left: at.left, top: at.top }}
@@ -58,6 +62,7 @@ export function CommentPinsOverlay({ open, pins, fit, stage, actions }: {
             </ContextMenuTrigger>
             <ContextMenuContent>
               <ContextMenuItem onClick={() => actions.onResolve(c)}><CheckCircle className="size-4" /> Resolve</ContextMenuItem>
+              <ContextMenuItem onClick={() => actions.onReply(c)}><MessageSquare className="size-4" /> Reply</ContextMenuItem>
               <ContextMenuItem onClick={() => actions.onSend(c)}><Send className="size-4" /> Send to AI</ContextMenuItem>
               <ContextMenuSeparator />
               <ContextMenuItem variant="destructive" onClick={() => actions.onDelete(c)}><Trash2 className="size-4" /> Delete</ContextMenuItem>

package/src/web/components/design/comments/comment-thread-replies.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { Pencil, Trash2 } from "@/lib/icons";
+import { formatRelativeDate } from "@/lib/format-date";
+import type { DesignCommentOwnerView } from "../../../../shared/design-comment-thread-types";
+import { CommentAuthorLabel, isReviewer } from "./comment-author-label";
+import { CommentThreadTextBox } from "./comment-thread-text-box";
+
+/**
+ * A thread's replies, oldest first, and the box to add one. The owner may edit only their
+ * own replies — a reviewer's words are theirs — but may delete any reply. Every action is an
+ * inline button, visible on touch as well as with a mouse, so the thread needs no second
+ * menu or sheet stacked on the one it is shown in.
+ */
+
+export interface ThreadReplyActions {
+  onReply: (body: string) => Promise<void>;
+  onEditReply: (replyId: string, body: string) => Promise<void>;
+  onDeleteReply: (replyId: string) => Promise<void>;
+}
+
+const actionButton = "flex min-h-11 items-center gap-1 rounded-md px-2 text-xs text-text-subtle hover:bg-surface-elevated md:min-h-7";
+
+export function CommentThreadReplies({ thread, actions, focusReply }: {
+  thread: DesignCommentOwnerView;
+  actions: ThreadReplyActions;
+  focusReply?: boolean;
+}) {
+  const [editing, setEditing] = useState<string | null>(null);
+  const remove = (replyId: string) => {
+    actions.onDeleteReply(replyId).catch((e) => toast.error("Could not delete the reply", { description: (e as Error).message }));
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      {thread.replies.length > 0 && (
+        <ol className="flex flex-col gap-3 border-l-2 border-border pl-3" aria-label="Replies">
+          {thread.replies.map((r) => (
+            <li key={r.id} className="flex flex-col gap-1" data-reply-id={r.id}>
+              <div className="flex min-w-0 items-baseline gap-1 text-xs text-text-2">
+                <CommentAuthorLabel author={r.author} />
+                <span className="shrink-0 text-text-subtle">· {formatRelativeDate(r.createdAt)}</span>
+              </div>
+              {editing === r.id ? (
+                <CommentThreadTextBox
+                  label="Edit your reply"
+                  initial={r.body}
+                  placeholder="Your reply"
+                  submitLabel="Save"
+                  autoFocus
+                  onCancel={() => setEditing(null)}
+                  onSubmit={async (body) => { await actions.onEditReply(r.id, body); setEditing(null); }}
+                />
+              ) : (
+                <p className="whitespace-pre-wrap break-words text-sm">{r.body}</p>
+              )}
+              {editing !== r.id && (
+                <div className="flex gap-2">
+                  {!isReviewer(r.author) && (
+                    <button type="button" className={actionButton} onClick={() => setEditing(r.id)}>
+                      <Pencil className="size-3.5" /> Edit
+                    </button>
+                  )}
+                  <button type="button" className={`${actionButton} hover:text-destructive`} onClick={() => remove(r.id)}>
+                    <Trash2 className="size-3.5" /> Delete
+                  </button>
+                </div>
+              )}
+            </li>
+          ))}
+        </ol>
+      )}
+      <CommentThreadTextBox
+        label="Reply"
+        placeholder={isReviewer(thread.author) ? `Reply to ${thread.author.name}` : "Reply"}
+        submitLabel="Reply"
+        autoFocus={focusReply}
+        onSubmit={actions.onReply}
+      />
+    </div>
+  );
+}

package/src/web/components/design/comments/comment-thread-text-box.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Loader2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { COMMENT_LIMITS } from "../../../../shared/design-comment-types";
+
+/**
+ * The one text box a thread uses for everything typed into it: a reply, a reply being
+ * edited, or the owner's own comment being edited. Submitting keeps the text when the server
+ * refuses, so nothing typed is lost to an error; Ctrl/Cmd+Enter submits.
+ */
+export function CommentThreadTextBox({ initial = "", placeholder, submitLabel, onSubmit, onCancel, autoFocus, label }: {
+  initial?: string;
+  placeholder: string;
+  submitLabel: string;
+  /** Resolves when saved; a rejection keeps the text. */
+  onSubmit: (body: string) => Promise<void>;
+  onCancel?: () => void;
+  autoFocus?: boolean;
+  label: string;
+}) {
+  const [body, setBody] = useState(initial);
+  const [busy, setBusy] = useState(false);
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => { setBody(initial); }, [initial]);
+  useEffect(() => { if (autoFocus) requestAnimationFrame(() => ref.current?.focus()); }, [autoFocus]);
+
+  const canSubmit = !busy && body.trim().length > 0 && body.length <= COMMENT_LIMITS.body;
+  const submit = async () => {
+    if (!canSubmit) return;
+    setBusy(true);
+    try {
+      await onSubmit(body);
+      setBody("");
+    } catch (e) {
+      toast.error("That did not work", { description: (e as Error).message });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <textarea
+        ref={ref}
+        aria-label={label}
+        value={body}
+        onChange={(e) => setBody(e.target.value)}
+        onKeyDown={(e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void submit(); }}
+        maxLength={COMMENT_LIMITS.body}
+        rows={2}
+        placeholder={placeholder}
+        className="w-full resize-y rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+      />
+      <div className="flex items-center justify-end gap-2">
+        {body.length > COMMENT_LIMITS.body * 0.9 && (
+          <span className="mr-auto text-xs text-text-subtle">{body.length}/{COMMENT_LIMITS.body}</span>
+        )}
+        {onCancel && (
+          <Button variant="outline" size="sm" className="min-h-11 md:min-h-8" disabled={busy} onClick={onCancel}>Cancel</Button>
+        )}
+        <Button size="sm" className="min-h-11 md:min-h-8" disabled={!canSubmit} onClick={() => void submit()}>
+          {busy && <Loader2 className="size-4 animate-spin" />} {submitLabel}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/web/components/design/comments/comment-thread-view.tsx

@@ -0,0 +1,115 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { ArrowLeft, CheckCircle, Pencil, RotateCcw, Send, Trash2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { formatRelativeDate } from "@/lib/format-date";
+import type { DesignCommentOwnerView } from "../../../../shared/design-comment-thread-types";
+import { PIN_STATUS_LABEL, type PinStatus } from "./use-comment-pins";
+import { CommentAuthorLabel, isReviewer } from "./comment-author-label";
+import { CommentThreadReplies, type ThreadReplyActions } from "./comment-thread-replies";
+import { CommentThreadTextBox } from "./comment-thread-text-box";
+
+/**
+ * One thread, in the comments panel's place (beside the canvas on desktop, in its bottom
+ * sheet on a phone): the comment, who wrote it and through which link, its replies, a reply
+ * box, and the thread's actions at the bottom, in the thumb zone. The owner edits only their
+ * own comment. A reviewer's thread can also take every thread from the same link with it,
+ * which asks once more first.
+ */
+
+export interface ThreadActions extends ThreadReplyActions {
+  onBack: () => void;
+  onEditBody: (body: string) => Promise<void>;
+  onResolve: (resolved: boolean) => void;
+  onSend: () => void;
+  onDelete: () => void;
+  onDeleteLinkThreads: (linkId: string) => Promise<void>;
+}
+
+export function CommentThreadView({ thread, number, status, actions, focusReply }: {
+  thread: DesignCommentOwnerView;
+  /** The pin's number while the thread is open, null once resolved. */
+  number: number | null;
+  status: PinStatus | null;
+  actions: ThreadActions;
+  focusReply?: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [confirmLink, setConfirmLink] = useState(false);
+  const author = thread.author;
+  const label = status ? PIN_STATUS_LABEL[status] : undefined;
+  const deleteLinkThreads = (linkId: string) => {
+    actions.onDeleteLinkThreads(linkId)
+      .then(actions.onBack)
+      .catch((e) => toast.error("Could not delete those threads", { description: (e as Error).message }));
+  };
+
+  return (
+    <div className="flex h-full min-h-0 flex-col" data-testid="comment-thread" data-thread-id={thread.id}>
+      <div className="flex h-11 shrink-0 items-center gap-1 border-b border-border px-1 md:h-9">
+        <button type="button" onClick={actions.onBack} aria-label="Back to comments"
+          className="flex min-h-11 items-center gap-1 rounded-md px-2 text-xs font-semibold text-text-subtle hover:bg-surface-elevated md:min-h-7">
+          <ArrowLeft className="size-4" /> Comments
+        </button>
+        <span className="flex-1" />
+        {number !== null && (
+          <span className="mr-2 flex size-5 items-center justify-center rounded-full bg-primary text-[11px] font-semibold text-primary-foreground">{number}</span>
+        )}
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+        <div className="flex min-w-0 items-baseline gap-1 text-xs text-text-2">
+          <CommentAuthorLabel author={author} />
+          <span className="shrink-0 text-text-subtle">· {formatRelativeDate(thread.createdAt)}</span>
+        </div>
+        <div className="mt-0.5 truncate text-xs text-text-subtle">
+          &lt;{thread.anchor.tag}&gt; in {thread.file}
+          {label && <> · <span className={status === "detached" ? "text-warning" : undefined}>{label}</span></>}
+          {thread.resolvedAt && " · Resolved"}
+          {thread.sentAt && " · Sent"}
+        </div>
+        {editing ? (
+          <div className="mt-2">
+            <CommentThreadTextBox label="Edit your comment" initial={thread.body} placeholder="What should change here?" submitLabel="Save"
+              autoFocus onCancel={() => setEditing(false)}
+              onSubmit={async (body) => { await actions.onEditBody(body); setEditing(false); }} />
+          </div>
+        ) : (
+          <p className="mt-2 whitespace-pre-wrap break-words text-sm leading-relaxed">{thread.body}</p>
+        )}
+        {!editing && !isReviewer(author) && (
+          <button type="button" onClick={() => setEditing(true)}
+            className="mt-1 flex min-h-11 items-center gap-1 rounded-md px-2 text-xs text-text-subtle hover:bg-surface-elevated md:min-h-7">
+            <Pencil className="size-3.5" /> Edit
+          </button>
+        )}
+        <div className="mt-4">
+          <CommentThreadReplies thread={thread} actions={actions} focusReply={focusReply} />
+        </div>
+      </div>
+      <div className="flex shrink-0 flex-col gap-2 border-t border-border p-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
+        {isReviewer(author) && (confirmLink ? (
+          <div className="flex flex-wrap items-center gap-2 text-xs">
+            <span className="flex-1">Delete every thread from “{author.linkLabel}”, replies included?</span>
+            <Button variant="outline" size="sm" className="min-h-11 md:min-h-8" onClick={() => setConfirmLink(false)}>Keep</Button>
+            <Button variant="destructive" size="sm" className="min-h-11 md:min-h-8" onClick={() => deleteLinkThreads(author.linkId)}>Delete all</Button>
+          </div>
+        ) : (
+          <button type="button" onClick={() => setConfirmLink(true)}
+            className="min-h-11 self-start rounded-md px-2 text-xs text-text-subtle hover:text-destructive md:min-h-7">
+            Delete all threads from “{author.linkLabel}”…
+          </button>
+        ))}
+        {/* The side panel is narrow on desktop, so the primary action takes a row of its own there. */}
+        <div className="flex flex-wrap gap-2">
+          <Button variant="outline" className="min-h-11 flex-1 text-destructive md:min-h-9" onClick={actions.onDelete}>
+            <Trash2 className="size-4" /> Delete
+          </Button>
+          <Button variant="outline" className="min-h-11 flex-1 md:min-h-9" onClick={() => actions.onResolve(!thread.resolvedAt)}>
+            {thread.resolvedAt ? <><RotateCcw className="size-4" /> Reopen</> : <><CheckCircle className="size-4" /> Resolve</>}
+          </Button>
+          <Button className="min-h-11 flex-1 md:min-h-9 md:basis-full" onClick={actions.onSend}><Send className="size-4" /> Send to AI</Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/web/components/design/comments/comments-panel.tsx

@@ -1,23 +1,30 @@
 import { useState } from "react";
-import { CheckCircle, ChevronDown, ChevronRight, Loader2, MessageSquarePlus, RotateCcw, Send, Trash2, X } from "@/lib/icons";
+import { CheckCircle, ChevronDown, ChevronRight, Loader2, MessageSquare, MessageSquarePlus, RotateCcw, Send, Trash2, X } from "@/lib/icons";
 import { Button } from "@/components/ui/button";
 import {
   ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger,
 } from "@/components/ui/adaptive-context-menu";
 import { formatRelativeDate } from "@/lib/format-date";
 import type { DesignCommentsState } from "./use-design-comments";
-import type { PinStatus } from "./use-comment-pins";
-import type { DesignComment } from "../../../../shared/design-comment-types";
+import { PIN_STATUS_LABEL, type PinStatus } from "./use-comment-pins";
+import type { DesignCommentOwnerView } from "../../../../shared/design-comment-thread-types";
+import { CommentAuthorLabel } from "./comment-author-label";
+import { CommentThreadView, type ThreadActions } from "./comment-thread-view";
 
 /**
  * The design's comments as a list: open ones numbered like their pins, resolved ones
  * folded below, and the one action that gathers them all for the AI. Rows use the adaptive
- * context menu; a tap opens the comment. A comment whose element could not be found is
- * marked Detached rather than hidden — it still says what the user wanted changed.
+ * context menu; a tap opens the thread, which then takes the list's place. Each row says who
+ * wrote it — "You", or a reviewer's name and the link they came through — and how many
+ * replies it has. A comment whose element could not be found is marked Detached rather than
+ * hidden — it still says what the user wanted changed.
  */
 
+type DesignComment = DesignCommentOwnerView;
+
 export interface CommentsPanelActions {
   onOpen: (c: DesignComment) => void;
+  onReply: (c: DesignComment) => void;
   onResolve: (c: DesignComment, resolved: boolean) => void;
   onSend: (c: DesignComment) => void;
   onDelete: (c: DesignComment) => void;
@@ -25,15 +32,14 @@ export interface CommentsPanelActions {
   onClose: () => void;
 }
 
-const STATUS_LABEL: Partial<Record<PinStatus, string>> = { detached: "Detached", moved: "Moved", elsewhere: "On another page" };
-
 function Row({ c, number, status, actions }: {
   c: DesignComment;
   number: number | null;
   status: PinStatus | null;
   actions: CommentsPanelActions;
 }) {
-  const label = status ? STATUS_LABEL[status] : undefined;
+  const label = status ? PIN_STATUS_LABEL[status] : undefined;
+  const replies = c.replies.length;
   return (
     <ContextMenu>
       <ContextMenuTrigger asChild>
@@ -45,7 +51,11 @@ function Row({ c, number, status, actions }: {
             {number ?? <CheckCircle className="size-4" />}
           </span>
           <span className="min-w-0 flex-1">
-            <span className="line-clamp-2 text-sm">{c.body}</span>
+            <span className="flex min-w-0 text-xs text-text-2">
+              <CommentAuthorLabel author={c.author} />
+              {replies > 0 && <span className="shrink-0 text-text-subtle">&nbsp;· {replies === 1 ? "1 reply" : `${replies} replies`}</span>}
+            </span>
+            <span className="line-clamp-2 break-words text-sm">{c.body}</span>
             <span className="block truncate text-xs text-text-subtle">
               &lt;{c.anchor.tag}&gt; · {status === "elsewhere" ? c.file : formatRelativeDate(c.createdAt)}
               {label && <> · <span className={status === "detached" ? "text-warning" : undefined}>{label}</span></>}
@@ -58,6 +68,7 @@ function Row({ c, number, status, actions }: {
         {c.resolvedAt
           ? <ContextMenuItem onClick={() => actions.onResolve(c, false)}><RotateCcw className="size-4" /> Reopen</ContextMenuItem>
           : <ContextMenuItem onClick={() => actions.onResolve(c, true)}><CheckCircle className="size-4" /> Resolve</ContextMenuItem>}
+        <ContextMenuItem onClick={() => actions.onReply(c)}><MessageSquare className="size-4" /> Reply</ContextMenuItem>
         <ContextMenuItem onClick={() => actions.onSend(c)}><Send className="size-4" /> Send to AI</ContextMenuItem>
         <ContextMenuSeparator />
         <ContextMenuItem variant="destructive" onClick={() => actions.onDelete(c)}><Trash2 className="size-4" /> Delete</ContextMenuItem>
@@ -66,13 +77,25 @@ function Row({ c, number, status, actions }: {
   );
 }
 
-export function CommentsPanel({ state, statusOf, actions }: {
+export function CommentsPanel({ state, statusOf, actions, thread }: {
   state: DesignCommentsState;
   statusOf: (id: string) => PinStatus;
   actions: CommentsPanelActions;
+  /** The thread shown instead of the list, with its actions. */
+  thread?: { id: string; focusReply: boolean; actions: ThreadActions } | null;
 }) {
   const [showResolved, setShowResolved] = useState(false);
   const { open, resolved, comments, error } = state;
+  const shown = thread ? comments?.find((c) => c.id === thread.id) : undefined;
+  if (thread && shown) {
+    const index = open.indexOf(shown);
+    return (
+      <div className="h-full min-h-0 bg-panel">
+        <CommentThreadView key={shown.id} thread={shown} number={index < 0 ? null : index + 1}
+          status={index < 0 ? null : statusOf(shown.id)} actions={thread.actions} focusReply={thread.focusReply} />
+      </div>
+    );
+  }
   return (
     <div className="flex h-full min-h-0 flex-col bg-panel">
       <div className="flex h-9 shrink-0 items-center gap-2 border-b border-border px-2">

package/src/web/components/design/comments/comments-send-preview.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Send } from "@/lib/icons";
 import { DesignResponsiveDialog } from "../dialogs/design-responsive-dialog";
@@ -5,8 +6,8 @@ import { DesignResponsiveDialog } from "../dialogs/design-responsive-dialog";
 /**
  * The whole message "Send to AI" is about to put in the design chat, shown before it goes
  * anywhere. Element context inside it came from the design's files, which an agent wrote,
- * so the user reads what the next agent will read. Confirming only fills the composer;
- * sending is still the user's own press.
+ * so the user reads what the next agent will read — and may edit it, since the words are
+ * theirs to send. Confirming only fills the composer; sending is still the user's own press.
  */
 
 export interface SendPreview {
@@ -19,24 +20,35 @@ export interface SendPreview {
 export function CommentsSendPreview({ preview, onCancel, onConfirm }: {
   preview: SendPreview | null;
   onCancel: () => void;
-  onConfirm: () => void;
+  /** Called with the text as the user left it. */
+  onConfirm: (text: string) => void;
 }) {
+  const [draft, setDraft] = useState("");
+  // A new preview replaces whatever was typed into the last one.
+  useEffect(() => { setDraft(preview?.text ?? ""); }, [preview]);
+  const edited = !!preview && draft !== preview.text;
+
   return (
     <DesignResponsiveDialog
       open={!!preview}
       onClose={onCancel}
       title="Put this in the design chat?"
-      description="This is the full message. It lands in the chat's composer as an attachment; nothing is sent until you send it there."
+      description="This is the full message, and you can edit it. It lands in the chat's composer as an attachment; nothing is sent until you send it there."
       className="md:max-w-2xl"
       footer={<>
+        {edited && <Button variant="ghost" onClick={() => setDraft(preview.text)}>Reset</Button>}
         <Button variant="outline" onClick={onCancel}>Cancel</Button>
-        <Button onClick={onConfirm}><Send className="size-4" /> Put in chat</Button>
+        <Button onClick={() => onConfirm(draft)} disabled={!draft.trim()}><Send className="size-4" /> Put in chat</Button>
       </>}
     >
       {preview && (
-        <pre className="whitespace-pre-wrap break-words rounded-md border border-border bg-surface-elevated p-3 font-mono text-xs leading-relaxed">
-          {preview.text}
-        </pre>
+        <textarea
+          aria-label="Message to put in the design chat"
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          spellCheck={false}
+          className="block h-[55vh] min-h-40 w-full resize-y rounded-md border border-border bg-surface-elevated p-3 font-mono text-xs leading-relaxed outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        />
       )}
     </DesignResponsiveDialog>
   );

package/src/web/components/design/comments/design-comments-layer.tsx

@@ -30,6 +30,7 @@ export function DesignCommentsOverlay({ feature, fit, stage, isMobile, selection
         stage={stage}
         actions={{
           onOpen: feature.openComment,
+          onReply: feature.replyToComment,
           onResolve: (c) => feature.resolveComment(c, true),
           onSend: feature.sendComment,
           onDelete: feature.deleteComment,
@@ -48,7 +49,6 @@ export function DesignCommentsOverlay({ feature, fit, stage, isMobile, selection
         target={feature.composerTarget}
         onClose={feature.closeComposer}
         onSubmit={feature.submitComposer}
-        onDelete={feature.deleteFromComposer}
       />
       <CommentsSendPreview preview={feature.preview} onCancel={feature.cancelPreview} onConfirm={feature.confirmPreview} />
     </>
@@ -60,8 +60,10 @@ export function DesignCommentsSidePanel({ feature }: { feature: DesignCommentsFe
     <CommentsPanel
       state={feature.state}
       statusOf={feature.pins.statusOf}
+      thread={feature.thread}
       actions={{
         onOpen: feature.openComment,
+        onReply: feature.replyToComment,
         onResolve: feature.resolveComment,
         onSend: feature.sendComment,
         onDelete: feature.deleteComment,

package/src/web/components/design/comments/use-comment-pins.ts

@@ -25,6 +25,9 @@ import type { CommentPatch } from "@/lib/design/api-design-comments";
 /** `elsewhere`: the comment is on another page of the design than the one on screen. */
 export type PinStatus = "pinned" | "moved" | "detached" | "pending" | "elsewhere";
 
+/** How a status reads beside a comment; pinned and pending say nothing. */
+export const PIN_STATUS_LABEL: Partial<Record<PinStatus, string>> = { detached: "Detached", moved: "Moved", elsewhere: "On another page" };
+
 export interface CommentPins {
   rects: ReadonlyMap<string, PinRect>;
   statusOf: (id: string) => PinStatus;