@hienlh/ppm 0.23.13 → 0.23.15

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;

package/src/web/components/design/comments/use-design-comments-feature.ts

@@ -12,10 +12,12 @@ import { anchorFromPicked, useElementPicker } from "./use-element-picker";
 import { useCommentPins } from "./use-comment-pins";
 import type { ComposerTarget } from "./comment-composer";
 import type { SendPreview } from "./comments-send-preview";
+import type { ThreadActions } from "./comment-thread-view";
 
 /**
  * Pinned comments for one design tab: the list, the picker, the pins, and the flows that
- * join them — comment on an element, open a comment, and "Send to AI".
+ * join them — comment on an element, open a thread (in the panel, in place of the list),
+ * reply to it, and "Send to AI".
  *
  * Sending never sends. It builds the message, shows it whole in the preview, and only on
  * confirmation puts it in the design chat's composer, where the user sends it (or not).
@@ -23,9 +25,7 @@ import type { SendPreview } from "./comments-send-preview";
  * composer the user can actually see and focus.
  */
 
-type Composer =
-  | { mode: "create" | "send"; el: PickedElement }
-  | { mode: "edit"; comment: DesignComment };
+type Composer = { mode: "create" | "send"; el: PickedElement };
 
 /** Two frames: the pane switch has to be rendered before the composer can take focus. */
 const afterPaint = () => new Promise<void>((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
@@ -38,6 +38,7 @@ export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: Des
   const [composer, setComposer] = useState<Composer | null>(null);
   const [preview, setPreview] = useState<SendPreview | null>(null);
   const [panelOpen, setPanelOpen] = useState(false);
+  const [thread, setThread] = useState<{ id: string; focusReply: boolean } | null>(null);
   const picker = useElementPicker(bridge, (el) => setComposer({ mode: "create", el }));
   const pins = useCommentPins(bridge, state.open, state.update);
   const onPanelOpen = useRef(opts.onPanelOpen);
@@ -45,16 +46,18 @@ export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: Des
 
   const togglePanel = useCallback(() => {
     if (!panelOpen) onPanelOpen.current();
+    else setThread(null);
     setPanelOpen(!panelOpen);
   }, [panelOpen]);
-  const closePanel = useCallback(() => setPanelOpen(false), []);
+  const closePanel = useCallback(() => { setPanelOpen(false); setThread(null); }, []);
+  const openThread = useCallback((c: Pick<DesignComment, "id">, focusReply = false) => {
+    setThread({ id: c.id, focusReply });
+    if (!panelOpen) onPanelOpen.current();
+    setPanelOpen(true);
+  }, [panelOpen]);
 
   const composerTarget = useMemo<ComposerTarget | null>(() => {
     if (!composer) return null;
-    if (composer.mode === "edit") {
-      const c = composer.comment;
-      return { mode: "edit", tag: c.anchor.tag, text: c.anchor.quote.exact, initialBody: c.body };
-    }
     return { mode: composer.mode, tag: composer.el.tag, text: composer.el.text, markup: composer.el.outerHtml };
   }, [composer]);
 
@@ -64,8 +67,6 @@ export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: Des
       await state.add(anchorFromPicked(composer.el), body);
       picker.clear();
       toast.success("Comment added");
-    } else if (composer.mode === "edit") {
-      await state.update(composer.comment.id, { body });
     } else {
       const anchor = anchorFromPicked(composer.el);
       // The snippet comes from the server, out of the source file, never from the page.
@@ -76,12 +77,6 @@ export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: Des
     setComposer(null);
   }, [composer, state, picker, projectName, slug]);
 
-  const deleteFromComposer = useCallback(async () => {
-    if (composer?.mode !== "edit") return;
-    await state.remove(composer.comment.id);
-    setComposer(null);
-  }, [composer, state]);
-
   const sendComments = useCallback((list: readonly DesignComment[]) => {
     if (list.length === 0) return;
     setPreview({
@@ -91,9 +86,9 @@ export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: Des
     });
   }, [slug]);
 
-  const confirmPreview = useCallback(async () => {
+  const confirmPreview = useCallback(async (text: string) => {
     const p = preview;
-    if (!p) return;
+    if (!p || !text.trim()) return;
     setPreview(null);
     if (isMobile) {
       // Sheets are portalled, so they would stay over the chat pane.
@@ -101,21 +96,41 @@ export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: Des
       showDesignChat(tabId);
       await afterPaint();
     }
-    deliverToDesignChat(tabId, p.text, p.label);
+    deliverToDesignChat(tabId, text, p.label);
     const results = await Promise.allSettled(p.ids.map((id) => state.update(id, { sent: true })));
     if (results.some((r) => r.status === "rejected")) toast.warning("The message is in the chat, but some comments could not be marked as sent");
   }, [preview, isMobile, tabId, state]);
 
+  const resolveComment = (c: Pick<DesignComment, "id">, resolved = true) => {
+    state.update(c.id, { resolved }).catch(failed("Could not update the comment"));
+  };
+  const deleteComment = (c: Pick<DesignComment, "id">) => {
+    state.remove(c.id).then(() => setThread((t) => (t?.id === c.id ? null : t))).catch(failed("Could not delete the comment"));
+  };
+  const threadActions = (id: string): ThreadActions => ({
+    onBack: () => setThread(null),
+    onEditBody: async (body) => { await state.update(id, { body }); },
+    onResolve: (resolved) => resolveComment({ id }, resolved),
+    onSend: () => { const c = state.comments?.find((x) => x.id === id); if (c) sendComments([c]); },
+    onDelete: () => deleteComment({ id }),
+    onDeleteLinkThreads: (linkId) => state.removeLinkThreads(linkId),
+    onReply: async (body) => { await state.reply(id, body); },
+    onEditReply: async (replyId, body) => { await state.editReply(id, replyId, body); },
+    onDeleteReply: (replyId) => state.removeReply(id, replyId),
+  });
+
   return {
     state, picker, pins, panelOpen, togglePanel, closePanel,
-    composerTarget, closeComposer: () => setComposer(null), submitComposer, deleteFromComposer,
-    preview, cancelPreview: () => setPreview(null), confirmPreview: () => { void confirmPreview().catch(failed("Could not put the message in the chat")); },
+    thread: thread ? { ...thread, actions: threadActions(thread.id) } : null,
+    composerTarget, closeComposer: () => setComposer(null), submitComposer,
+    preview, cancelPreview: () => setPreview(null), confirmPreview: (text: string) => { void confirmPreview(text).catch(failed("Could not put the message in the chat")); },
     openCount: state.open.length,
     commentOnSelected: () => { if (picker.selected) setComposer({ mode: "create", el: picker.selected }); },
     sendSelected: () => { if (picker.selected) setComposer({ mode: "send", el: picker.selected }); },
-    openComment: (c: DesignComment) => setComposer({ mode: "edit", comment: c }),
-    resolveComment: (c: DesignComment, resolved = true) => { state.update(c.id, { resolved }).catch(failed("Could not update the comment")); },
-    deleteComment: (c: DesignComment) => { state.remove(c.id).catch(failed("Could not delete the comment")); },
+    openComment: (c: Pick<DesignComment, "id">) => openThread(c),
+    replyToComment: (c: Pick<DesignComment, "id">) => openThread(c, true),
+    resolveComment,
+    deleteComment,
     sendComment: (c: DesignComment) => sendComments([c]),
     sendAllOpen: () => sendComments(state.open),
   };