@burdenoff/planmagnet-fe-sdk 2026.705.2 → 2026.706.2

package/dist/index.d.ts

@@ -881,22 +881,25 @@ interface TaskCommentsCoreProps {
     entityId: string;
     /** The current actor — enables "You" + delete on own comments. */
     currentActorId?: string;
-    /** Resolve an author id → display name (reuse the member directory). */
+    /** Resolve an author/mention id → display name (reuse the member directory). */
     resolveAssignee?: ResolveAssignee;
+    /** Member directory for @-mention autocomplete. Omit to disable mentions. */
+    members?: AssigneeOption[];
     /** Hide the composer + delete affordances (pure read-only). */
     readonly?: boolean;
     /** Extra classes on the root container. */
     className?: string;
 }
 /**
- * TaskCommentsCore — a comment thread on a work item, backed by the SHARED
- * wspace-conversations-svc `EntityComment` (the platform's canonical comment
- * owner) rather than a per-product comment table. BYO-Apollo, semantic-token
+ * TaskCommentsCore — a threaded comment thread on a work item, backed by the
+ * SHARED wspace-conversations-svc `EntityComment` (the platform's canonical
+ * comment owner) rather than a per-product comment table. Supports 1-level
+ * replies (grouped by thread root) and @-mentions. BYO-Apollo, semantic-token
  * only, farm-free. RBAC is enforced server-side (create/read are editor-level,
  * a workspace Member gets editor on `entity-comment`); the composer fails open
- * and shows a graceful error if the server denies it.
+ * and surfaces a graceful error if the server denies it.
  */
-declare function TaskCommentsCore({ entityType, entityId, currentActorId, resolveAssignee, readonly, className, }: TaskCommentsCoreProps): react.JSX.Element;
+declare function TaskCommentsCore({ entityType, entityId, currentActorId, resolveAssignee, members, readonly, className, }: TaskCommentsCoreProps): react.JSX.Element;
 
 /**
  * TaskLabels — every user-facing string the SDK renders, so a host (e.g.
@@ -969,6 +972,9 @@ interface TaskLabels {
     editedTag: string;
     failedToComment: string;
     failedToDeleteComment: string;
+    reply: string;
+    replyPlaceholder: string;
+    repliesCount: string;
     create: string;
     creating: string;
     cancel: string;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useMemo, useEffect, useContext, useState, useCallback } from 'react';
+import { createContext, useMemo, useEffect, useContext, useState, useCallback, useRef } from 'react';
 import { ApolloProvider, useQuery, useApolloClient, useMutation } from '@apollo/client/react';
 import { createHttpLink, ApolloClient, from, InMemoryCache } from '@apollo/client/core';
 import { setContext } from '@apollo/client/link/context';
@@ -524,6 +524,12 @@ var ENTITY_COMMENT_FIELDS = gql`
     edited
     editedAt
     status
+    parentCommentId
+    threadRootId
+    threadLevel
+    mentions {
+      mentionedUserId
+    }
   }
 `;
 var GET_ENTITY_COMMENTS = gql`
@@ -798,6 +804,9 @@ var DEFAULT_TASK_LABELS = {
   editedTag: "(edited)",
   failedToComment: "Failed to post comment",
   failedToDeleteComment: "Failed to delete comment",
+  reply: "Reply",
+  replyPlaceholder: "Write a reply\u2026",
+  repliesCount: "{n} replies",
   create: "Create task",
   creating: "Creating\u2026",
   cancel: "Cancel",
@@ -2501,22 +2510,131 @@ function TaskToolbar({
     }
   );
 }
-var labelClass2 = "text-xs font-medium uppercase tracking-wide text-muted-foreground";
 var fieldClass2 = "w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring";
+function CommentComposer({
+  placeholder,
+  submitLabel,
+  pendingLabel,
+  members,
+  autoFocus,
+  onSubmit
+}) {
+  const [text, setText] = useState("");
+  const [pending, setPending] = useState(false);
+  const [mentioned, setMentioned] = useState([]);
+  const [query, setQuery] = useState(null);
+  const taRef = useRef(null);
+  const suggestions = useMemo(() => {
+    if (query == null || !members || members.length === 0) return [];
+    const q = query.toLowerCase();
+    return members.filter((m) => m.name.toLowerCase().includes(q)).slice(0, 6);
+  }, [query, members]);
+  const detectMention = (value) => {
+    const caret = taRef.current?.selectionStart ?? value.length;
+    const m = /(?:^|\s)@([\p{L}\p{N} ._-]*)$/u.exec(value.slice(0, caret));
+    setQuery(m ? m[1] : null);
+  };
+  const onChange = (value) => {
+    setText(value);
+    detectMention(value);
+  };
+  const pickMention = (member) => {
+    const el = taRef.current;
+    const caret = el?.selectionStart ?? text.length;
+    const before = text.slice(0, caret);
+    const after = text.slice(caret);
+    const replaced = before.replace(
+      /@([\p{L}\p{N} ._-]*)$/u,
+      `@${member.name} `
+    );
+    setText(replaced + after);
+    setQuery(null);
+    setMentioned(
+      (prev) => prev.some((p) => p.id === member.id) ? prev : [...prev, member]
+    );
+    requestAnimationFrame(() => el?.focus());
+  };
+  const submit = async (e) => {
+    e.preventDefault();
+    const body = text.trim();
+    if (!body || pending) return;
+    const ids = mentioned.filter((m) => body.includes(`@${m.name}`)).map((m) => m.id);
+    setPending(true);
+    try {
+      await onSubmit({ text: body, mentionUserIds: ids });
+      setText("");
+      setMentioned([]);
+      setQuery(null);
+    } finally {
+      setPending(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "relative space-y-2", children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: taRef,
+        className: cn(fieldClass2, "min-h-[60px]"),
+        rows: 2,
+        value: text,
+        autoFocus,
+        onChange: (e) => onChange(e.target.value),
+        onKeyUp: (e) => detectMention(e.target.value),
+        onClick: (e) => detectMention(e.target.value),
+        placeholder,
+        "aria-label": placeholder
+      }
+    ),
+    suggestions.length > 0 && /* @__PURE__ */ jsx("ul", { className: "absolute left-0 top-full z-20 mt-1 max-h-48 w-56 overflow-auto rounded-md border border-border bg-popover p-1 shadow-md", children: suggestions.map((m) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onMouseDown: (e) => {
+          e.preventDefault();
+          pickMention(m);
+        },
+        className: "flex w-full items-center rounded px-2 py-1 text-left text-sm text-foreground hover:bg-muted",
+        children: [
+          "@",
+          m.name
+        ]
+      }
+    ) }, m.id)) }),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: pending || !text.trim(),
+        className: cn(
+          "rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground",
+          (pending || !text.trim()) && "cursor-not-allowed opacity-50"
+        ),
+        children: pending ? pendingLabel : submitLabel
+      }
+    ) })
+  ] });
+}
+var labelClass2 = "text-xs font-medium uppercase tracking-wide text-muted-foreground";
+var escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 function TaskCommentsCore({
   entityType,
   entityId,
   currentActorId,
   resolveAssignee,
+  members,
   readonly,
   className
 }) {
   const L = useTaskLabels();
-  const [text, setText] = useState("");
   const [error, setError] = useState(null);
+  const [replyingTo, setReplyingTo] = useState(null);
   const { data, loading, refetch } = useQuery(
     GET_ENTITY_COMMENTS,
     {
+      // No parentCommentId → the service returns EVERY comment (all levels)
+      // flat; we build the thread tree client-side via threadRootId. `take` is
+      // capped at 100 by the conversations service (a higher value is rejected
+      // with a validation error), which is ample for a single work item.
       variables: {
         input: {
           entityType,
@@ -2530,16 +2648,30 @@ function TaskCommentsCore({
       errorPolicy: "all"
     }
   );
-  const comments = data?.getEntityComments?.items ?? [];
-  const [createComment, { loading: posting }] = useMutation(CREATE_ENTITY_COMMENT);
+  const all = data?.getEntityComments?.items ?? [];
+  const { topLevel, repliesByRoot } = useMemo(() => {
+    const top = [];
+    const map = /* @__PURE__ */ new Map();
+    for (const c of all) {
+      if (!c.parentCommentId) {
+        top.push(c);
+      } else {
+        const root = c.threadRootId ?? c.parentCommentId;
+        const arr = map.get(root);
+        if (arr) arr.push(c);
+        else map.set(root, [c]);
+      }
+    }
+    return { topLevel: top, repliesByRoot: map };
+  }, [all]);
+  const [createComment] = useMutation(
+    CREATE_ENTITY_COMMENT
+  );
   const [deleteComment] = useMutation(
     DELETE_ENTITY_COMMENT
   );
   const authorName = (id) => id === currentActorId ? L.you : resolveAssignee?.(id)?.name ?? void 0;
-  const handlePost = async (e) => {
-    e.preventDefault();
-    const body = text.trim();
-    if (!body) return;
+  const post = async ({ text, mentionUserIds }, parentCommentId) => {
     setError(null);
     try {
       await createComment({
@@ -2547,15 +2679,18 @@ function TaskCommentsCore({
           input: {
             entityType,
             entityId,
-            content: { text: body },
-            contentType: "TEXT"
+            content: { text },
+            contentType: "TEXT",
+            ...parentCommentId ? { parentCommentId } : {},
+            ...mentionUserIds.length ? { mentionUserIds } : {}
           }
         }
       });
-      setText("");
       await refetch();
-    } catch {
+      setReplyingTo(null);
+    } catch (err) {
       setError(L.failedToComment);
+      throw err;
     }
   };
   const handleDelete = async (id) => {
@@ -2567,60 +2702,89 @@ function TaskCommentsCore({
       setError(L.failedToDeleteComment);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: labelClass2, children: [
-      L.commentsLabel,
-      comments.length > 0 ? ` (${comments.length})` : ""
-    ] }),
-    /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: comments.length === 0 && !loading ? /* @__PURE__ */ jsx("li", { className: "text-sm text-muted-foreground", children: L.noComments }) : comments.map((c) => /* @__PURE__ */ jsxs("li", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx(Avatar, { id: c.authorId, name: authorName(c.authorId), size: "sm" }),
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: authorName(c.authorId) ?? c.authorId.slice(0, 8) }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatDateFull(c.createdAt) }),
-          c.edited && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: L.editedTag }),
-          !readonly && c.authorId === currentActorId && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => handleDelete(c.id),
-              "aria-label": L.del,
-              title: L.del,
-              className: "ml-auto rounded p-1 text-muted-foreground hover:text-destructive",
-              children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground", children: c.content?.text })
-      ] })
-    ] }, c.id)) }),
-    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }),
-    !readonly && /* @__PURE__ */ jsxs("form", { onSubmit: handlePost, className: "space-y-2", children: [
-      /* @__PURE__ */ jsx(
-        "textarea",
+  const renderBody = (c) => {
+    const text = c.content?.text ?? "";
+    const names = (c.mentions ?? []).map((m) => resolveAssignee?.(m.mentionedUserId)?.name).filter((n) => Boolean(n));
+    if (names.length === 0) return text;
+    const tokens = new Set(names.map((n) => `@${n}`));
+    const re = new RegExp(`(@(?:${names.map(escapeRe).join("|")}))`, "g");
+    return text.split(re).map(
+      (part, i) => tokens.has(part) ? /* @__PURE__ */ jsx(
+        "span",
         {
-          className: cn(fieldClass2, "min-h-[60px]"),
-          rows: 2,
-          value: text,
-          onChange: (e) => setText(e.target.value),
-          placeholder: L.commentPlaceholder,
-          "aria-label": L.commentsLabel
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+          className: "rounded bg-primary/10 px-0.5 font-medium text-primary",
+          children: part
+        },
+        i
+      ) : /* @__PURE__ */ jsx("span", { children: part }, i)
+    );
+  };
+  const commentBlock = (c, isReply) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ jsx(Avatar, { id: c.authorId, name: authorName(c.authorId), size: "sm" }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: authorName(c.authorId) ?? c.authorId.slice(0, 8) }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatDateFull(c.createdAt) }),
+        c.edited && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: L.editedTag }),
+        !readonly && c.authorId === currentActorId && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleDelete(c.id),
+            "aria-label": L.del,
+            title: L.del,
+            className: "ml-auto rounded p-1 text-muted-foreground hover:text-destructive",
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground", children: renderBody(c) }),
+      !isReply && !readonly && /* @__PURE__ */ jsx(
         "button",
         {
-          type: "submit",
-          disabled: posting || !text.trim(),
-          className: cn(
-            "rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground",
-            (posting || !text.trim()) && "cursor-not-allowed opacity-50"
-          ),
-          children: posting ? L.posting : L.postComment
+          type: "button",
+          onClick: () => setReplyingTo((prev) => prev === c.id ? null : c.id),
+          className: "mt-1 text-xs font-medium text-muted-foreground hover:text-foreground",
+          children: L.reply
         }
-      ) })
+      )
     ] })
   ] });
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: labelClass2, children: [
+      L.commentsLabel,
+      all.length > 0 ? ` (${all.length})` : ""
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "space-y-4", children: topLevel.length === 0 && !loading ? /* @__PURE__ */ jsx("li", { className: "text-sm text-muted-foreground", children: L.noComments }) : topLevel.map((c) => {
+      const replies = repliesByRoot.get(c.id) ?? [];
+      return /* @__PURE__ */ jsxs("li", { className: "space-y-2", children: [
+        commentBlock(c, false),
+        replies.length > 0 && /* @__PURE__ */ jsx("ul", { className: "ml-8 space-y-2 border-l border-border pl-3", children: replies.map((r) => /* @__PURE__ */ jsx("li", { children: commentBlock(r, true) }, r.id)) }),
+        !readonly && replyingTo === c.id && /* @__PURE__ */ jsx("div", { className: "ml-8", children: /* @__PURE__ */ jsx(
+          CommentComposer,
+          {
+            placeholder: L.replyPlaceholder,
+            submitLabel: L.reply,
+            pendingLabel: L.posting,
+            members,
+            autoFocus: true,
+            onSubmit: (p) => post(p, c.id)
+          }
+        ) })
+      ] }, c.id);
+    }) }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }),
+    !readonly && /* @__PURE__ */ jsx(
+      CommentComposer,
+      {
+        placeholder: L.commentPlaceholder,
+        submitLabel: L.postComment,
+        pendingLabel: L.posting,
+        members,
+        onSubmit: (p) => post(p)
+      }
+    )
+  ] });
 }
 var fieldClass3 = "w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring";
 var labelClass3 = "text-xs font-medium uppercase tracking-wide text-muted-foreground";
@@ -2947,7 +3111,8 @@ function TaskDetailCore({
           entityType: commentsEntityType,
           entityId: item.id,
           currentActorId,
-          resolveAssignee
+          resolveAssignee,
+          members: assigneeOptions
         }
       ) })
     ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSave, className: "space-y-4", children: [