@emberai-engg/task-board 0.4.1 → 0.5.0

package/dist/index.mjs

@@ -1525,7 +1525,8 @@ function MentionTextarea({
   placeholder = "",
   rows = 2,
   className = "",
-  disabled = false
+  disabled = false,
+  autoFocus = false
 }) {
   const { service, features } = useTaskBoardContext();
   const textareaRef = useRef6(null);
@@ -1635,7 +1636,8 @@ function MentionTextarea({
         rows,
         className,
         placeholder,
-        disabled
+        disabled,
+        autoFocus
       }
     ),
     mentionQuery !== null && mentionUsers.length > 0 && /* @__PURE__ */ jsxs11("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: [
@@ -2427,7 +2429,7 @@ function TaskBoard({
 }
 
 // src/components/TaskDetailView.tsx
-import { useCallback as useCallback11, useEffect as useEffect17, useMemo as useMemo3, useRef as useRef15, useState as useState19 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect18, useMemo as useMemo3, useRef as useRef16, useState as useState19 } from "react";
 
 // src/utils/threads.ts
 function deriveThreads(comments, attachments) {
@@ -2459,7 +2461,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 {
@@ -2473,6 +2476,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
@@ -2496,7 +2500,7 @@ function timeAgo(dateStr) {
 }
 
 // src/components/DescriptionSection.tsx
-import { useState as useState10 } from "react";
+import { useEffect as useEffect10, useRef as useRef10, useState as useState10 } from "react";
 
 // src/components/MarkdownView.tsx
 import React10 from "react";
@@ -2921,10 +2925,13 @@ function DescriptionSection({
   onChange,
   status,
   onStatusChange,
-  saving
+  saving,
+  anchors,
+  onAnchorClick
 }) {
   const [editing, setEditing] = useState10(false);
   const [openHelp, setOpenHelp] = useState10(null);
+  const readRef = useRef10(null);
   const startEdit = () => setEditing(true);
   const cancel = () => setEditing(false);
   const handleCommit = (md) => {
@@ -2932,6 +2939,52 @@ function DescriptionSection({
     setEditing(false);
   };
   const hasContent = value.trim().length > 0;
+  useEffect10(() => {
+    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__ */ jsxs16("section", { className: "group", "data-section": sectionKey, children: [
     /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between gap-3 mb-3", children: [
       /* @__PURE__ */ jsx18("h2", { className: "text-[15px] font-semibold text-neutral-900 tracking-tight", children: label }),
@@ -2985,11 +3038,19 @@ function DescriptionSection({
         saving
       }
     ) : /* @__PURE__ */ jsx18(
-      "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__ */ jsx18(MarkdownView, { content: value, className: "text-[13px]" }) : /* @__PURE__ */ jsx18("p", { className: "text-[13px] text-neutral-400 italic", children: placeholder })
       }
     )
@@ -2997,7 +3058,7 @@ function DescriptionSection({
 }
 
 // src/components/OutstandingQuestionsSection.tsx
-import { useEffect as useEffect10, useRef as useRef10, useState as useState11 } from "react";
+import { useEffect as useEffect11, useRef as useRef11, useState as useState11 } from "react";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function timeAgo2(dateStr) {
   const d = parseDate(dateStr);
@@ -3024,9 +3085,9 @@ function OutstandingQuestionsSection({
   const [adding, setAdding] = useState11(false);
   const [newText, setNewText] = useState11("");
   const [posting, setPosting] = useState11(false);
-  const filterRef = useRef10(null);
-  const newRef = useRef10(null);
-  useEffect10(() => {
+  const filterRef = useRef11(null);
+  const newRef = useRef11(null);
+  useEffect11(() => {
     if (!filterMenuOpen) return;
     const onClick = (e) => {
       if (filterRef.current && !filterRef.current.contains(e.target)) {
@@ -3318,7 +3379,7 @@ function QuestionItem({
 }
 
 // src/components/AttachmentsSection.tsx
-import { useEffect as useEffect11, useRef as useRef11, useState as useState12 } from "react";
+import { useEffect as useEffect12, useRef as useRef12, useState as useState12 } from "react";
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function formatBytes(bytes) {
   if (!bytes && bytes !== 0) return "";
@@ -3348,10 +3409,10 @@ function AttachmentsSection({
   const [linkTitle, setLinkTitle] = useState12("");
   const [busy, setBusy] = useState12(false);
   const [error, setError] = useState12("");
-  const fileInputRef = useRef11(null);
-  const imageInputRef = useRef11(null);
-  const menuRef = useRef11(null);
-  useEffect11(() => {
+  const fileInputRef = useRef12(null);
+  const imageInputRef = useRef12(null);
+  const menuRef = useRef12(null);
+  useEffect12(() => {
     if (!menuOpen) return;
     const onClick = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -3690,7 +3751,7 @@ function AttachmentsSection({
 }
 
 // src/components/ThreadsPanel.tsx
-import { useEffect as useEffect13, useRef as useRef14, useState as useState15 } from "react";
+import { useEffect as useEffect14, useRef as useRef15, useState as useState15 } from "react";
 
 // src/components/ActivityList.tsx
 import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -3884,7 +3945,7 @@ function ThreadCard({ thread, onOpen, onAnchorClick, shimmer }) {
 }
 
 // src/components/ThreadComposer.tsx
-import { useRef as useRef12, useState as useState13 } from "react";
+import { useRef as useRef13, useState as useState13 } from "react";
 import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 function ThreadComposer({
   attachments,
@@ -3989,7 +4050,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__ */ jsx24(
@@ -4049,8 +4111,8 @@ function ComposerAttachments({
   const [linkOpen, setLinkOpen] = useState13(false);
   const [linkUrl, setLinkUrl] = useState13("");
   const [linkName, setLinkName] = useState13("");
-  const imageRef = useRef12(null);
-  const fileRef = useRef12(null);
+  const imageRef = useRef13(null);
+  const fileRef = useRef13(null);
   const selected = attachmentIds.map((id) => attachments.find((a) => a.id === id)).filter((a) => Boolean(a));
   const upload = async (file) => {
     setBusy(true);
@@ -4215,13 +4277,17 @@ function ComposerAttachments({
 }
 
 // src/components/ThreadDetailView.tsx
-import { useEffect as useEffect12, useRef as useRef13, useState as useState14 } from "react";
+import { useEffect as useEffect13, useRef as useRef14, useState as useState14 } from "react";
 import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 function ThreadDetailView({
   thread,
+  currentUsername,
   onBack,
   onReply,
   onUpdateThread,
+  onEditMessage,
+  onDeleteMessage,
+  onDeleteThread,
   onAnchorClick,
   isInternalUser
 }) {
@@ -4231,10 +4297,29 @@ function ThreadDetailView({
   const [posting, setPosting] = useState14(false);
   const [editingTitle, setEditingTitle] = useState14(false);
   const [titleDraft, setTitleDraft] = useState14(thread.title);
-  const messagesEndRef = useRef13(null);
-  useEffect12(() => {
+  const [editingMessageId, setEditingMessageId] = useState14(null);
+  const [editDraft, setEditDraft] = useState14("");
+  const [savingEdit, setSavingEdit] = useState14(false);
+  const [headerMenuOpen, setHeaderMenuOpen] = useState14(false);
+  const headerMenuRef = useRef14(null);
+  const messagesEndRef = useRef14(null);
+  useEffect13(() => {
     setTitleDraft(thread.title);
   }, [thread.title]);
+  useEffect13(() => {
+    setEditingMessageId(null);
+    setEditDraft("");
+  }, [thread.id]);
+  useEffect13(() => {
+    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);
@@ -4262,7 +4347,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__ */ jsxs23(Fragment7, { children: [
     /* @__PURE__ */ jsxs23("div", { className: "shrink-0 bg-white px-4 py-3 border-b border-neutral-100", children: [
       /* @__PURE__ */ jsxs23("div", { className: "flex items-start justify-between gap-4", children: [
@@ -4277,21 +4395,71 @@ function ThreadDetailView({
             ]
           }
         ),
-        /* @__PURE__ */ jsx25(
-          "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__ */ jsxs23(Fragment7, { children: [
-              /* @__PURE__ */ jsx25(RotateCcwIcon, { size: 12, strokeWidth: 1.5 }),
-              "Reopen"
-            ] }) : /* @__PURE__ */ jsxs23(Fragment7, { children: [
-              /* @__PURE__ */ jsx25(CheckCircle2Icon, { size: 12, strokeWidth: 1.5 }),
-              "Mark complete"
+        /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+          /* @__PURE__ */ jsx25(
+            "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__ */ jsxs23(Fragment7, { children: [
+                /* @__PURE__ */ jsx25(RotateCcwIcon, { size: 12, strokeWidth: 1.5 }),
+                "Reopen"
+              ] }) : /* @__PURE__ */ jsxs23(Fragment7, { children: [
+                /* @__PURE__ */ jsx25(CheckCircle2Icon, { size: 12, strokeWidth: 1.5 }),
+                "Mark complete"
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs23("div", { ref: headerMenuRef, className: "relative", children: [
+            /* @__PURE__ */ jsx25(
+              "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__ */ jsx25(MoreVerticalIcon, { size: 14, strokeWidth: 1.5 })
+              }
+            ),
+            headerMenuOpen && /* @__PURE__ */ jsxs23("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__ */ jsxs23(
+                "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__ */ jsx25(PencilIcon, { size: 14, strokeWidth: 1.5 }),
+                    "Edit title"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs23(
+                "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__ */ jsx25(TrashIcon, { size: 14, strokeWidth: 1.5 }),
+                    "Delete thread"
+                  ]
+                }
+              )
             ] })
-          }
-        )
+          ] })
+        ] })
       ] }),
       editingTitle ? /* @__PURE__ */ jsx25(
         "input",
@@ -4333,27 +4501,60 @@ function ThreadDetailView({
       ) })
     ] }),
     /* @__PURE__ */ jsxs23("div", { className: "flex-1 overflow-y-auto p-3 flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx25(
+      editingMessageId === thread.id ? /* @__PURE__ */ jsx25(
+        ThreadMessageEditor,
+        {
+          authorName: thread.author_name,
+          isInternal: thread.is_internal,
+          value: editDraft,
+          onChange: setEditDraft,
+          onCommit: commitEditMessage,
+          onCancel: cancelEditMessage,
+          saving: savingEdit
+        }
+      ) : /* @__PURE__ */ jsx25(
         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__ */ jsx25(
-        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__ */ jsx25(
+          ThreadMessageEditor,
+          {
+            authorName: r.author_name,
+            isInternal: r.is_internal,
+            value: editDraft,
+            onChange: setEditDraft,
+            onCommit: commitEditMessage,
+            onCancel: cancelEditMessage,
+            saving: savingEdit
+          },
+          r.id
+        ) : /* @__PURE__ */ jsx25(
+          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__ */ jsx25("div", { ref: messagesEndRef })
     ] }),
     /* @__PURE__ */ jsxs23("div", { className: "shrink-0 p-3 border-t border-neutral-100 bg-white", children: [
@@ -4399,10 +4600,27 @@ function ThreadMessage({
   createdAt,
   content,
   isInternal,
-  internalLabel
+  edited = false,
+  isOwn = false,
+  internalLabel,
+  onEdit,
+  onDelete
 }) {
   const initials = getInitials(authorName || "?");
-  return /* @__PURE__ */ jsxs23("div", { className: "flex gap-2.5", children: [
+  const [menuOpen, setMenuOpen] = useState14(false);
+  const menuRef = useRef14(null);
+  useEffect13(() => {
+    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__ */ jsxs23("div", { className: "group flex gap-2.5", children: [
     /* @__PURE__ */ jsx25(
       "div",
       {
@@ -4414,15 +4632,130 @@ function ThreadMessage({
       /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 mb-0.5 flex-wrap", children: [
         /* @__PURE__ */ jsx25("span", { className: "text-[13px] font-medium text-neutral-900", children: authorName }),
         /* @__PURE__ */ jsx25("span", { className: "text-[10px] text-neutral-400", children: timeAgo(createdAt) }),
+        edited && /* @__PURE__ */ jsx25("span", { className: "text-[10px] text-neutral-400 italic", children: "(edited)" }),
         isInternal && /* @__PURE__ */ jsxs23("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__ */ jsx25(LockIcon, { size: 10, strokeWidth: 1.5 }),
           internalLabel
-        ] })
+        ] }),
+        showActions && /* @__PURE__ */ jsxs23(
+          "div",
+          {
+            ref: menuRef,
+            className: "ml-auto relative opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity",
+            children: [
+              /* @__PURE__ */ jsx25(
+                "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__ */ jsx25(MoreVerticalIcon, { size: 12, strokeWidth: 1.5 })
+                }
+              ),
+              menuOpen && /* @__PURE__ */ jsxs23("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__ */ jsxs23(
+                  "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__ */ jsx25(PencilIcon, { size: 12, strokeWidth: 1.5 }),
+                      "Edit"
+                    ]
+                  }
+                ),
+                onDelete && /* @__PURE__ */ jsxs23(
+                  "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__ */ jsx25(TrashIcon, { size: 12, strokeWidth: 1.5 }),
+                      "Delete"
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx25("div", { className: "text-[12px] text-neutral-700 leading-relaxed whitespace-pre-wrap", children: /* @__PURE__ */ jsx25(MentionText, { text: content }) })
     ] })
   ] });
 }
+function ThreadMessageEditor({
+  authorName,
+  isInternal,
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  saving
+}) {
+  const initials = getInitials(authorName || "?");
+  return /* @__PURE__ */ jsxs23("div", { className: "flex gap-2.5", children: [
+    /* @__PURE__ */ jsx25(
+      "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__ */ jsxs23("div", { className: "flex-1 min-w-0 flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx25(
+        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__ */ jsxs23("div", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsx25(
+          "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__ */ jsx25(
+          "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
 import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -4430,6 +4763,7 @@ function ThreadsPanel({
   threads,
   activity,
   attachments,
+  currentUsername,
   open,
   onToggle,
   openThreadId,
@@ -4442,6 +4776,9 @@ function ThreadsPanel({
   onCreateThread,
   onCreateReply,
   onUpdateThread,
+  onEditMessage,
+  onDeleteMessage,
+  onDeleteThread,
   onUploadAttachment,
   onAddLinkAttachment
 }) {
@@ -4449,15 +4786,15 @@ function ThreadsPanel({
   const [composerOpen, setComposerOpen] = useState15(false);
   const [filter, setFilter] = useState15("active");
   const [filterMenuOpen, setFilterMenuOpen] = useState15(false);
-  const filterRef = useRef14(null);
-  useEffect13(() => {
+  const filterRef = useRef15(null);
+  useEffect14(() => {
     if (pendingAnchor) {
       setComposerOpen(true);
       setTab("threads");
       onOpenThread(null);
     }
   }, [pendingAnchor, onOpenThread]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!filterMenuOpen) return;
     const onClick = (e) => {
       if (filterRef.current && !filterRef.current.contains(e.target)) {
@@ -4469,7 +4806,7 @@ function ThreadsPanel({
   }, [filterMenuOpen]);
   const filteredThreads = threads.filter((t) => t.status === filter);
   const openThread = openThreadId ? threads.find((t) => t.id === openThreadId) : null;
-  useEffect13(() => {
+  useEffect14(() => {
     if (openThreadId && !threads.some((t) => t.id === openThreadId)) {
       onOpenThread(null);
     }
@@ -4617,9 +4954,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
       }
@@ -4661,7 +5002,7 @@ function HighlightBubble({ bubble, onComment }) {
 }
 
 // src/hooks/useTaskQuestions.ts
-import { useCallback as useCallback8, useEffect as useEffect14, useState as useState16 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect15, useState as useState16 } from "react";
 function useTaskQuestions(taskId, initial) {
   const { service } = useTaskBoardContext();
   const [questions, setQuestions] = useState16(initial ?? []);
@@ -4676,7 +5017,7 @@ function useTaskQuestions(taskId, initial) {
       setLoading(false);
     }
   }, [service, taskId]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (initial !== void 0) return;
     if (!taskId) return;
     refresh();
@@ -4744,7 +5085,7 @@ function useTaskQuestions(taskId, initial) {
 }
 
 // src/hooks/useTaskAttachments.ts
-import { useCallback as useCallback9, useEffect as useEffect15, useState as useState17 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect16, useState as useState17 } from "react";
 function useTaskAttachments(taskId, initial) {
   const { service } = useTaskBoardContext();
   const [attachments, setAttachments] = useState17(initial ?? []);
@@ -4759,7 +5100,7 @@ function useTaskAttachments(taskId, initial) {
       setLoading(false);
     }
   }, [service, taskId]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (initial !== void 0) return;
     if (!taskId) return;
     refresh();
@@ -4794,11 +5135,11 @@ function useTaskAttachments(taskId, initial) {
 }
 
 // src/hooks/useHighlightAnchor.ts
-import { useCallback as useCallback10, useEffect as useEffect16, useState as useState18 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect17, useState as useState18 } from "react";
 function useHighlightAnchor() {
   const [bubble, setBubble] = useState18(null);
   const [pendingAnchor, setPendingAnchor] = useState18(null);
-  useEffect16(() => {
+  useEffect17(() => {
     const onMouseUp = () => {
       const sel = window.getSelection();
       if (!sel || sel.rangeCount === 0 || sel.isCollapsed) {
@@ -4856,13 +5197,21 @@ function useHighlightAnchor() {
     return anchor;
   }, [bubble]);
   const focusAnchor = useCallback10((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,
@@ -4908,10 +5257,10 @@ function TaskDetailView({
   const [pendingTags, setPendingTags] = useState19([]);
   const [showOtherTagInput, setShowOtherTagInput] = useState19(false);
   const [linkCopied, setLinkCopied] = useState19(false);
-  const statusRef = useRef15(null);
-  const priorityRef = useRef15(null);
-  const moreRef = useRef15(null);
-  const tagsRef = useRef15(null);
+  const statusRef = useRef16(null);
+  const priorityRef = useRef16(null);
+  const moreRef = useRef16(null);
+  const tagsRef = useRef16(null);
   const [projectTaskIds, setProjectTaskIds] = useState19([]);
   const [openThreadId, setOpenThreadId] = useState19(null);
   const [shimmeringThreadIds, setShimmeringThreadIds] = useState19(/* @__PURE__ */ new Set());
@@ -4955,10 +5304,10 @@ function TaskDetailView({
       setLoading(false);
     }
   }, [service, taskId]);
-  useEffect17(() => {
+  useEffect18(() => {
     fetchTask();
   }, [fetchTask]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!task || !onNavigateToTask) return;
     let cancelled = false;
     (async () => {
@@ -4980,7 +5329,7 @@ function TaskDetailView({
       cancelled = true;
     };
   }, [task, columns, service, onNavigateToTask]);
-  useEffect17(() => {
+  useEffect18(() => {
     const onClick = (e) => {
       const target = e.target;
       if (statusOpen && statusRef.current && !statusRef.current.contains(target)) setStatusOpen(false);
@@ -4994,7 +5343,7 @@ function TaskDetailView({
   const questions = useTaskQuestions(taskId, initialQuestions);
   const attachments = useTaskAttachments(taskId, initialAttachments);
   const highlight = useHighlightAnchor();
-  useEffect17(() => {
+  useEffect18(() => {
     if (highlight.pendingAnchor && !panelOpen) {
       setPanelOpen(true);
       try {
@@ -5118,6 +5467,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 = useMemo3(() => {
     if (!task) return null;
     return projects.find((p) => p.slug === task.project_slug) ?? null;
@@ -5126,6 +5497,29 @@ function TaskDetailView({
     () => deriveThreads(comments, attachments.attachments),
     [comments, attachments.attachments]
   );
+  const anchorsBySection = useMemo3(() => {
+    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 = useCallback11(
+    (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;
@@ -5501,7 +5895,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
               );
@@ -5536,6 +5932,7 @@ function TaskDetailView({
         threads,
         activity,
         attachments: attachments.attachments,
+        currentUsername: user.username,
         open: panelOpen,
         onToggle: togglePanel,
         openThreadId,
@@ -5548,6 +5945,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 })
       }