@emberai-engg/task-board 0.4.1 → 0.5.0

package/dist/index.js

@@ -1659,7 +1659,8 @@ function MentionTextarea({
   placeholder = "",
   rows = 2,
   className = "",
-  disabled = false
+  disabled = false,
+  autoFocus = false
 }) {
   const { service, features } = useTaskBoardContext();
   const textareaRef = (0, import_react11.useRef)(null);
@@ -1769,7 +1770,8 @@ function MentionTextarea({
         rows,
         className,
         placeholder,
-        disabled
+        disabled,
+        autoFocus
       }
     ),
     mentionQuery !== null && mentionUsers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute bottom-full left-0 mb-1 w-64 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1 max-h-48 overflow-y-auto", children: [
@@ -2593,7 +2595,8 @@ function deriveThreads(comments, attachments) {
       author_name: r.author_name,
       content: r.content,
       created_at: r.created_at,
-      is_internal: !!r.is_internal
+      is_internal: !!r.is_internal,
+      edited: !!r.edited
     }));
     const threadAttachments = (c.attachment_ids || []).map((aid) => attachById.get(aid)).filter((a) => Boolean(a));
     return {
@@ -2607,6 +2610,7 @@ function deriveThreads(comments, attachments) {
       is_internal: !!c.is_internal,
       status: c.thread_status === "complete" ? "complete" : "active",
       rawContent: c.content,
+      edited: !!c.edited,
       anchor: c.anchor || null,
       attachments: threadAttachments,
       replies
@@ -3055,10 +3059,13 @@ function DescriptionSection({
   onChange,
   status,
   onStatusChange,
-  saving
+  saving,
+  anchors,
+  onAnchorClick
 }) {
   const [editing, setEditing] = (0, import_react16.useState)(false);
   const [openHelp, setOpenHelp] = (0, import_react16.useState)(null);
+  const readRef = (0, import_react16.useRef)(null);
   const startEdit = () => setEditing(true);
   const cancel = () => setEditing(false);
   const handleCommit = (md) => {
@@ -3066,6 +3073,52 @@ function DescriptionSection({
     setEditing(false);
   };
   const hasContent = value.trim().length > 0;
+  (0, import_react16.useEffect)(() => {
+    if (editing) return;
+    const root = readRef.current;
+    if (!root) return;
+    root.querySelectorAll("mark.eb-tb-annot").forEach((m) => {
+      const text = m.textContent || "";
+      m.replaceWith(document.createTextNode(text));
+    });
+    root.normalize();
+    if (!anchors || anchors.length === 0) return;
+    for (const anchor of anchors) {
+      const snippet = anchor.snippet?.trim();
+      if (!snippet) continue;
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+      let node = walker.nextNode();
+      while (node) {
+        const txt = node.textContent || "";
+        const idx = txt.indexOf(snippet);
+        if (idx !== -1) {
+          const range = document.createRange();
+          try {
+            range.setStart(node, idx);
+            range.setEnd(node, idx + snippet.length);
+            const mark = document.createElement("mark");
+            mark.className = "eb-tb-annot";
+            mark.dataset.threadId = anchor.threadId;
+            range.surroundContents(mark);
+          } catch {
+          }
+          break;
+        }
+        node = walker.nextNode();
+      }
+    }
+  }, [anchors, value, editing]);
+  const handleReadClick = (e) => {
+    const target = e.target;
+    const mark = target?.closest("mark.eb-tb-annot");
+    if (mark && mark.dataset.threadId && onAnchorClick) {
+      e.preventDefault();
+      e.stopPropagation();
+      onAnchorClick(mark.dataset.threadId);
+      return;
+    }
+    startEdit();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("section", { className: "group", "data-section": sectionKey, children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between gap-3 mb-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { className: "text-[15px] font-semibold text-neutral-900 tracking-tight", children: label }),
@@ -3119,11 +3172,19 @@ function DescriptionSection({
         saving
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      "button",
+      "div",
       {
-        type: "button",
-        onClick: startEdit,
-        className: "w-full text-left rounded-lg border border-transparent hover:border-neutral-200 hover:bg-neutral-50/60 transition-colors px-3.5 py-2.5 -mx-3.5 -my-2.5 cursor-text",
+        ref: readRef,
+        role: "button",
+        tabIndex: 0,
+        onClick: handleReadClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            startEdit();
+          }
+        },
+        className: "w-full text-left rounded-lg border border-transparent hover:border-neutral-200 hover:bg-neutral-50/60 transition-colors px-3.5 py-2.5 -mx-3.5 -my-2.5 cursor-text focus:outline-none focus-visible:ring-2 focus-visible:ring-[#FF5E00]/20",
         children: hasContent ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MarkdownView, { content: value, className: "text-[13px]" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[13px] text-neutral-400 italic", children: placeholder })
       }
     )
@@ -4123,7 +4184,8 @@ function ThreadComposer({
         onChange: setBody,
         rows: 4,
         placeholder: "Write something\u2026 (type @ to mention)",
-        className: "w-full rounded-lg border border-neutral-200 px-3 py-2 text-[12px] text-neutral-800 min-h-[100px] focus:outline-none focus:ring-1 focus:ring-neutral-300 focus:border-neutral-300 resize-none"
+        className: "w-full rounded-lg border border-neutral-200 px-3 py-2 text-[12px] text-neutral-800 min-h-[100px] focus:outline-none focus:ring-1 focus:ring-neutral-300 focus:border-neutral-300 resize-none",
+        autoFocus: true
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -4353,9 +4415,13 @@ var import_react20 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function ThreadDetailView({
   thread,
+  currentUsername,
   onBack,
   onReply,
   onUpdateThread,
+  onEditMessage,
+  onDeleteMessage,
+  onDeleteThread,
   onAnchorClick,
   isInternalUser
 }) {
@@ -4365,10 +4431,29 @@ function ThreadDetailView({
   const [posting, setPosting] = (0, import_react20.useState)(false);
   const [editingTitle, setEditingTitle] = (0, import_react20.useState)(false);
   const [titleDraft, setTitleDraft] = (0, import_react20.useState)(thread.title);
+  const [editingMessageId, setEditingMessageId] = (0, import_react20.useState)(null);
+  const [editDraft, setEditDraft] = (0, import_react20.useState)("");
+  const [savingEdit, setSavingEdit] = (0, import_react20.useState)(false);
+  const [headerMenuOpen, setHeaderMenuOpen] = (0, import_react20.useState)(false);
+  const headerMenuRef = (0, import_react20.useRef)(null);
   const messagesEndRef = (0, import_react20.useRef)(null);
   (0, import_react20.useEffect)(() => {
     setTitleDraft(thread.title);
   }, [thread.title]);
+  (0, import_react20.useEffect)(() => {
+    setEditingMessageId(null);
+    setEditDraft("");
+  }, [thread.id]);
+  (0, import_react20.useEffect)(() => {
+    if (!headerMenuOpen) return;
+    const onClick = (e) => {
+      if (headerMenuRef.current && !headerMenuRef.current.contains(e.target)) {
+        setHeaderMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, [headerMenuOpen]);
   const submit = async () => {
     if (!body.trim()) return;
     setPosting(true);
@@ -4396,7 +4481,40 @@ function ThreadDetailView({
     const next = thread.status === "complete" ? "active" : "complete";
     await onUpdateThread({ thread_status: next });
   };
+  const startEditMessage = (id, content) => {
+    setEditingMessageId(id);
+    setEditDraft(content);
+  };
+  const cancelEditMessage = () => {
+    setEditingMessageId(null);
+    setEditDraft("");
+  };
+  const commitEditMessage = async () => {
+    const id = editingMessageId;
+    const next = editDraft.trim();
+    if (!id || !next) {
+      cancelEditMessage();
+      return;
+    }
+    setSavingEdit(true);
+    try {
+      await onEditMessage(id, next);
+      cancelEditMessage();
+    } finally {
+      setSavingEdit(false);
+    }
+  };
+  const handleDeleteMessage = async (id, isThreadRoot) => {
+    const msg = isThreadRoot ? "Delete this thread and all of its replies? This cannot be undone." : "Delete this message? This cannot be undone.";
+    if (!confirm(msg)) return;
+    if (isThreadRoot) {
+      await onDeleteThread(id);
+    } else {
+      await onDeleteMessage(id);
+    }
+  };
   const isComplete = thread.status === "complete";
+  const isThreadAuthor = thread.author_id === currentUsername;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "shrink-0 bg-white px-4 py-3 border-b border-neutral-100", children: [
       /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
@@ -4411,21 +4529,71 @@ function ThreadDetailView({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: toggleStatus,
-            className: "inline-flex items-center justify-center gap-1.5 text-[12px] font-medium text-neutral-600 hover:text-neutral-900 px-3 h-8 rounded-xl border border-neutral-200 bg-white hover:bg-neutral-50",
-            children: isComplete ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RotateCcwIcon, { size: 12, strokeWidth: 1.5 }),
-              "Reopen"
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CheckCircle2Icon, { size: 12, strokeWidth: 1.5 }),
-              "Mark complete"
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: toggleStatus,
+              className: "inline-flex items-center justify-center gap-1.5 text-[12px] font-medium text-neutral-600 hover:text-neutral-900 px-3 h-8 rounded-xl border border-neutral-200 bg-white hover:bg-neutral-50",
+              children: isComplete ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RotateCcwIcon, { size: 12, strokeWidth: 1.5 }),
+                "Reopen"
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CheckCircle2Icon, { size: 12, strokeWidth: 1.5 }),
+                "Mark complete"
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: headerMenuRef, className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setHeaderMenuOpen((v) => !v),
+                "aria-label": "Thread actions",
+                className: "w-8 h-8 flex items-center justify-center rounded-xl border border-neutral-200 bg-white text-neutral-500 hover:text-neutral-900 hover:border-neutral-300 transition-colors",
+                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MoreVerticalIcon, { size: 14, strokeWidth: 1.5 })
+              }
+            ),
+            headerMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "absolute right-0 top-full mt-1 w-44 bg-white border border-neutral-200 rounded-xl shadow-lg py-1 z-40", children: [
+              isThreadAuthor && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setHeaderMenuOpen(false);
+                    setEditingTitle(true);
+                  },
+                  className: "w-full text-left px-3 py-2 text-[12px] text-neutral-700 hover:bg-neutral-50 flex items-center gap-2.5",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PencilIcon, { size: 14, strokeWidth: 1.5 }),
+                    "Edit title"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: async () => {
+                    setHeaderMenuOpen(false);
+                    if (!confirm(
+                      "Delete this thread and all of its replies? This cannot be undone."
+                    ))
+                      return;
+                    await onDeleteThread(thread.id);
+                  },
+                  className: "w-full text-left px-3 py-2 text-[12px] text-red-600 hover:bg-red-50 flex items-center gap-2.5",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TrashIcon, { size: 14, strokeWidth: 1.5 }),
+                    "Delete thread"
+                  ]
+                }
+              )
             ] })
-          }
-        )
+          ] })
+        ] })
       ] }),
       editingTitle ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "input",
@@ -4467,27 +4635,60 @@ function ThreadDetailView({
       ) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex-1 overflow-y-auto p-3 flex flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      editingMessageId === thread.id ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        ThreadMessageEditor,
+        {
+          authorName: thread.author_name,
+          isInternal: thread.is_internal,
+          value: editDraft,
+          onChange: setEditDraft,
+          onCommit: commitEditMessage,
+          onCancel: cancelEditMessage,
+          saving: savingEdit
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         ThreadMessage,
         {
           authorName: thread.author_name,
           createdAt: thread.created_at,
           content: thread.rawContent,
           isInternal: thread.is_internal,
-          internalLabel
+          edited: thread.edited,
+          isOwn: isThreadAuthor,
+          internalLabel,
+          onEdit: () => startEditMessage(thread.id, thread.rawContent),
+          onDelete: () => handleDeleteMessage(thread.id, true)
         }
       ),
-      thread.replies.map((r) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        ThreadMessage,
-        {
-          authorName: r.author_name,
-          createdAt: r.created_at,
-          content: r.content,
-          isInternal: r.is_internal,
-          internalLabel
-        },
-        r.id
-      )),
+      thread.replies.map(
+        (r) => editingMessageId === r.id ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          ThreadMessageEditor,
+          {
+            authorName: r.author_name,
+            isInternal: r.is_internal,
+            value: editDraft,
+            onChange: setEditDraft,
+            onCommit: commitEditMessage,
+            onCancel: cancelEditMessage,
+            saving: savingEdit
+          },
+          r.id
+        ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          ThreadMessage,
+          {
+            authorName: r.author_name,
+            createdAt: r.created_at,
+            content: r.content,
+            isInternal: r.is_internal,
+            edited: r.edited,
+            isOwn: r.author_id === currentUsername,
+            internalLabel,
+            onEdit: () => startEditMessage(r.id, r.content),
+            onDelete: () => handleDeleteMessage(r.id, false)
+          },
+          r.id
+        )
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: messagesEndRef })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "shrink-0 p-3 border-t border-neutral-100 bg-white", children: [
@@ -4533,10 +4734,27 @@ function ThreadMessage({
   createdAt,
   content,
   isInternal,
-  internalLabel
+  edited = false,
+  isOwn = false,
+  internalLabel,
+  onEdit,
+  onDelete
 }) {
   const initials = getInitials(authorName || "?");
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-2.5", children: [
+  const [menuOpen, setMenuOpen] = (0, import_react20.useState)(false);
+  const menuRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
+    if (!menuOpen) return;
+    const onClick = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, [menuOpen]);
+  const showActions = isOwn && (onEdit || onDelete);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "group flex gap-2.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
@@ -4548,15 +4766,130 @@ function ThreadMessage({
       /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-2 mb-0.5 flex-wrap", children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-[13px] font-medium text-neutral-900", children: authorName }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-[10px] text-neutral-400", children: timeAgo(createdAt) }),
+        edited && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-[10px] text-neutral-400 italic", children: "(edited)" }),
         isInternal && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "text-[10px] text-neutral-500 bg-neutral-100 px-1.5 py-0.5 rounded inline-flex items-center gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LockIcon, { size: 10, strokeWidth: 1.5 }),
           internalLabel
-        ] })
+        ] }),
+        showActions && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          "div",
+          {
+            ref: menuRef,
+            className: "ml-auto relative opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setMenuOpen((v) => !v),
+                  "aria-label": "Message actions",
+                  className: "w-6 h-6 flex items-center justify-center rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MoreVerticalIcon, { size: 12, strokeWidth: 1.5 })
+                }
+              ),
+              menuOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "absolute right-0 top-full mt-1 w-36 bg-white border border-neutral-200 rounded-xl shadow-lg py-1 z-30", children: [
+                onEdit && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setMenuOpen(false);
+                      onEdit();
+                    },
+                    className: "w-full text-left px-3 py-2 text-[12px] text-neutral-700 hover:bg-neutral-50 flex items-center gap-2",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PencilIcon, { size: 12, strokeWidth: 1.5 }),
+                      "Edit"
+                    ]
+                  }
+                ),
+                onDelete && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setMenuOpen(false);
+                      onDelete();
+                    },
+                    className: "w-full text-left px-3 py-2 text-[12px] text-red-600 hover:bg-red-50 flex items-center gap-2",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TrashIcon, { size: 12, strokeWidth: 1.5 }),
+                      "Delete"
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-[12px] text-neutral-700 leading-relaxed whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MentionText, { text: content }) })
     ] })
   ] });
 }
+function ThreadMessageEditor({
+  authorName,
+  isInternal,
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  saving
+}) {
+  const initials = getInitials(authorName || "?");
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        className: `w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0 ${isInternal ? "bg-neutral-200 text-neutral-700" : "bg-[#FF5E00] text-white"}`,
+        children: initials
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex-1 min-w-0 flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        MentionTextarea,
+        {
+          value,
+          onChange,
+          onKeyDown: (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+              e.preventDefault();
+              onCommit();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              onCancel();
+            }
+          },
+          rows: 3,
+          placeholder: "Edit message\u2026",
+          className: "w-full rounded-lg border border-neutral-200 px-3 py-2 text-[12px] text-neutral-800 min-h-[80px] focus:outline-none focus:ring-1 focus:ring-neutral-300 focus:border-neutral-300 resize-none",
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            className: "text-[12px] font-medium text-neutral-500 hover:text-neutral-900 px-2 h-7 rounded hover:bg-neutral-50",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onCommit,
+            disabled: saving || !value.trim(),
+            className: "inline-flex items-center justify-center px-3 h-7 rounded-lg text-[12px] font-medium text-white bg-[#FF5E00] hover:bg-[#E05200] disabled:opacity-50",
+            children: saving ? "Saving..." : "Save"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 
 // src/components/ThreadsPanel.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
@@ -4564,6 +4897,7 @@ function ThreadsPanel({
   threads,
   activity,
   attachments,
+  currentUsername,
   open,
   onToggle,
   openThreadId,
@@ -4576,6 +4910,9 @@ function ThreadsPanel({
   onCreateThread,
   onCreateReply,
   onUpdateThread,
+  onEditMessage,
+  onDeleteMessage,
+  onDeleteThread,
   onUploadAttachment,
   onAddLinkAttachment
 }) {
@@ -4751,9 +5088,13 @@ function ThreadsPanel({
       ThreadDetailView,
       {
         thread: openThread,
+        currentUsername,
         onBack: () => onOpenThread(null),
         onReply: (content, isInternal) => onCreateReply(openThread.id, content, isInternal),
         onUpdateThread: (body) => onUpdateThread(openThread.id, body),
+        onEditMessage,
+        onDeleteMessage,
+        onDeleteThread,
         onAnchorClick,
         isInternalUser
       }
@@ -4990,13 +5331,21 @@ function useHighlightAnchor() {
     return anchor;
   }, [bubble]);
   const focusAnchor = (0, import_react24.useCallback)((anchor) => {
-    const el = document.querySelector(`[data-section="${anchor.section}"]`);
-    if (!el) return;
-    el.scrollIntoView({ behavior: "smooth", block: "center" });
-    el.classList.add("ring-2", "ring-amber-300", "rounded-lg", "transition-all");
-    setTimeout(() => {
-      el.classList.remove("ring-2", "ring-amber-300", "rounded-lg");
-    }, 1500);
+    const sectionEl = document.querySelector(`[data-section="${anchor.section}"]`);
+    if (!sectionEl) return;
+    sectionEl.scrollIntoView({ behavior: "smooth", block: "center" });
+    const markEl = Array.from(sectionEl.querySelectorAll("mark.eb-tb-annot")).find(
+      (m) => (m.textContent || "").includes(anchor.snippet)
+    ) || sectionEl.querySelector("mark.eb-tb-annot");
+    if (markEl) {
+      markEl.classList.add("eb-tb-annot-pulse");
+      setTimeout(() => markEl.classList.remove("eb-tb-annot-pulse"), 1500);
+    } else {
+      sectionEl.classList.add("ring-2", "ring-amber-300", "rounded-lg", "transition-all");
+      setTimeout(() => {
+        sectionEl.classList.remove("ring-2", "ring-amber-300", "rounded-lg");
+      }, 1500);
+    }
   }, []);
   return {
     bubble,
@@ -5252,6 +5601,28 @@ function TaskDetailView({
     } catch {
     }
   };
+  const handleEditMessage = async (messageId, content) => {
+    try {
+      await service.editComment(taskId, messageId, { content });
+      await fetchTask();
+    } catch {
+    }
+  };
+  const handleDeleteMessage = async (messageId) => {
+    try {
+      await service.deleteComment(taskId, messageId);
+      await fetchTask();
+    } catch {
+    }
+  };
+  const handleDeleteThread = async (threadId) => {
+    try {
+      await service.deleteComment(taskId, threadId);
+      setOpenThreadId(null);
+      await fetchTask();
+    } catch {
+    }
+  };
   const project = (0, import_react25.useMemo)(() => {
     if (!task) return null;
     return projects.find((p) => p.slug === task.project_slug) ?? null;
@@ -5260,6 +5631,29 @@ function TaskDetailView({
     () => deriveThreads(comments, attachments.attachments),
     [comments, attachments.attachments]
   );
+  const anchorsBySection = (0, import_react25.useMemo)(() => {
+    const map = {};
+    for (const t of threads) {
+      if (!t.anchor) continue;
+      const key = t.anchor.section;
+      if (!map[key]) map[key] = [];
+      map[key].push({ snippet: t.anchor.snippet, threadId: t.id });
+    }
+    return map;
+  }, [threads]);
+  const openThreadFromAnchor = (0, import_react25.useCallback)(
+    (threadId) => {
+      setOpenThreadId(threadId);
+      if (!panelOpen) {
+        setPanelOpen(true);
+        try {
+          window.localStorage.setItem(PANEL_OPEN_KEY, "true");
+        } catch {
+        }
+      }
+    },
+    [panelOpen]
+  );
   const statusCol = columns.find((c) => c.key === taskStatus);
   const priorityStyle = getPriorityStyle(priority);
   const currentIdx = task ? projectTaskIds.indexOf(task.id) : -1;
@@ -5635,7 +6029,9 @@ function TaskDetailView({
                   onChange: (v) => handleSectionChange(section.key, v),
                   status,
                   onStatusChange: (s) => handleSectionStatusChange(section.key, s),
-                  saving
+                  saving,
+                  anchors: anchorsBySection[section.key],
+                  onAnchorClick: openThreadFromAnchor
                 },
                 section.key
               );
@@ -5670,6 +6066,7 @@ function TaskDetailView({
         threads,
         activity,
         attachments: attachments.attachments,
+        currentUsername: user.username,
         open: panelOpen,
         onToggle: togglePanel,
         openThreadId,
@@ -5682,6 +6079,9 @@ function TaskDetailView({
         onCreateThread: handleCreateThread,
         onCreateReply: handleCreateReply,
         onUpdateThread: handleUpdateThread,
+        onEditMessage: handleEditMessage,
+        onDeleteMessage: handleDeleteMessage,
+        onDeleteThread: handleDeleteThread,
         onUploadAttachment: attachments.uploadFile,
         onAddLinkAttachment: (url, name) => attachments.addLink({ url, name })
       }