@burdenoff/planmagnet-fe-sdk 2026.705.1 → 2026.706.1

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';
@@ -512,6 +512,50 @@ var DELETE_WORK_ITEM = gql`
     planmagnetDeleteWorkItem(id: $id)
   }
 `;
+var ENTITY_COMMENT_FIELDS = gql`
+  fragment EntityCommentFields on EntityComment {
+    id
+    authorId
+    authorType
+    content {
+      text
+    }
+    createdAt
+    edited
+    editedAt
+    status
+    parentCommentId
+    threadRootId
+    threadLevel
+    mentions {
+      mentionedUserId
+    }
+  }
+`;
+var GET_ENTITY_COMMENTS = gql`
+  query GetEntityComments($input: GetCommentsInput!) {
+    getEntityComments(input: $input) {
+      items {
+        ...EntityCommentFields
+      }
+      total
+    }
+  }
+  ${ENTITY_COMMENT_FIELDS}
+`;
+var CREATE_ENTITY_COMMENT = gql`
+  mutation CreateEntityComment($input: CreateEntityCommentInput!) {
+    createEntityComment(input: $input) {
+      ...EntityCommentFields
+    }
+  }
+  ${ENTITY_COMMENT_FIELDS}
+`;
+var DELETE_ENTITY_COMMENT = gql`
+  mutation DeleteEntityComment($input: DeleteCommentInput!) {
+    deleteEntityComment(input: $input)
+  }
+`;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -751,6 +795,18 @@ var DEFAULT_TASK_LABELS = {
   parentLabel: "Parent",
   subtasksLabel: "Sub-tasks",
   addSubtask: "Add sub-task",
+  commentsLabel: "Comments",
+  commentPlaceholder: "Write a comment\u2026",
+  postComment: "Comment",
+  posting: "Posting\u2026",
+  noComments: "No comments yet",
+  you: "You",
+  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",
@@ -2455,7 +2511,281 @@ function TaskToolbar({
   );
 }
 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 [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.
+      variables: {
+        input: {
+          entityType,
+          entityId,
+          take: 200,
+          sortBy: "createdAt",
+          sortOrder: "asc"
+        }
+      },
+      skip: !entityId,
+      errorPolicy: "all"
+    }
+  );
+  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 post = async ({ text, mentionUserIds }, parentCommentId) => {
+    setError(null);
+    try {
+      await createComment({
+        variables: {
+          input: {
+            entityType,
+            entityId,
+            content: { text },
+            contentType: "TEXT",
+            ...parentCommentId ? { parentCommentId } : {},
+            ...mentionUserIds.length ? { mentionUserIds } : {}
+          }
+        }
+      });
+      await refetch();
+      setReplyingTo(null);
+    } catch (err) {
+      setError(L.failedToComment);
+      throw err;
+    }
+  };
+  const handleDelete = async (id) => {
+    setError(null);
+    try {
+      await deleteComment({ variables: { input: { id, soft: true } } });
+      await refetch();
+    } catch {
+      setError(L.failedToDeleteComment);
+    }
+  };
+  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: "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: "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";
 var priorityVariant = {
   NONE: "muted",
   LOW: "muted",
@@ -2477,6 +2807,8 @@ function TaskDetailCore({
   renderLinkIcon,
   onOpenItem,
   onAddSubtask,
+  commentsEntityType,
+  currentActorId,
   className
 }) {
   const client = useApolloClient();
@@ -2661,119 +2993,134 @@ function TaskDetailCore({
       ": ",
       deleteError.message
     ] }),
-    !editing ? /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
-      !hidden.has("type") && /* @__PURE__ */ jsx(Field, { label: L.typeLabel, children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: L.type[item.type] }) }),
-      !hidden.has("status") && /* @__PURE__ */ jsx(Field, { label: L.statusLabel, children: /* @__PURE__ */ jsx("span", { className: "capitalize text-foreground", children: L.status[item.status] }) }),
-      !hidden.has("priority") && /* @__PURE__ */ jsx(Field, { label: L.priorityLabel, children: /* @__PURE__ */ jsx(Badge, { variant: priorityVariant[item.priority], children: L.priority[item.priority] }) }),
-      !hidden.has("assignee") && /* @__PURE__ */ jsx(Field, { label: L.assigneeLabel, children: item.assigneeId ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx(
-          Avatar,
-          {
-            id: item.assigneeId,
-            name: resolveAssignee?.(item.assigneeId)?.name,
-            size: "sm"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-foreground", children: resolveAssignee?.(item.assigneeId)?.name ?? L.assigned })
-      ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: L.unassigned }) }),
-      !hidden.has("dueDate") && /* @__PURE__ */ jsx(Field, { label: L.dueDateLabel, children: /* @__PURE__ */ jsx("span", { className: "text-foreground", children: formatDateFull(item.dueDate) ?? "\u2014" }) }),
-      !hidden.has("storyPoints") && /* @__PURE__ */ jsx(Field, { label: L.storyPointsLabel, children: /* @__PURE__ */ jsx("span", { className: "text-foreground", children: item.storyPoints ?? 0 }) }),
-      !hidden.has("description") && /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
-        /* @__PURE__ */ jsx("dt", { className: labelClass2, children: L.description }),
-        /* @__PURE__ */ jsx("dd", { className: "mt-1 whitespace-pre-wrap text-sm text-foreground", children: item.description || "\u2014" })
-      ] }),
-      !hidden.has("labels") && /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
-        /* @__PURE__ */ jsx("dt", { className: labelClass2, children: L.labelsLabel }),
-        /* @__PURE__ */ jsx("dd", { className: "mt-1 flex flex-wrap gap-1", children: (item.labels ?? []).length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "\u2014" }) : item.labels.map((l) => /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground",
-            children: l
-          },
-          l
-        )) })
-      ] }),
-      links.length > 0 && /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
-        /* @__PURE__ */ jsx("dt", { className: labelClass2, children: L.linkedRecordsLabel }),
-        /* @__PURE__ */ jsx("dd", { className: "mt-1 flex flex-wrap gap-1.5", children: links.map((link) => /* @__PURE__ */ jsx(
-          LinkChip,
-          {
-            link,
-            renderIcon: renderLinkIcon
-          },
-          link.id
-        )) })
-      ] }),
-      parent && /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
-        /* @__PURE__ */ jsx("dt", { className: labelClass2, children: L.parentLabel }),
-        /* @__PURE__ */ jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => onOpenItem?.(parent.id),
-            className: "inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-muted/40 px-2 py-1 text-sm text-foreground hover:bg-muted",
-            children: [
-              /* @__PURE__ */ jsx(StatusIcon, { status: parent.status }),
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: parent.key }),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: parent.title })
-            ]
-          }
-        ) })
-      ] }),
-      (children.length > 0 || onAddSubtask && canEdit) && /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("dt", { className: labelClass2, children: [
-            L.subtasksLabel,
-            children.length > 0 ? ` (${children.length})` : ""
-          ] }),
-          onAddSubtask && canEdit && /* @__PURE__ */ jsxs(
+    !editing ? /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+        !hidden.has("type") && /* @__PURE__ */ jsx(Field, { label: L.typeLabel, children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: L.type[item.type] }) }),
+        !hidden.has("status") && /* @__PURE__ */ jsx(Field, { label: L.statusLabel, children: /* @__PURE__ */ jsx("span", { className: "capitalize text-foreground", children: L.status[item.status] }) }),
+        !hidden.has("priority") && /* @__PURE__ */ jsx(Field, { label: L.priorityLabel, children: /* @__PURE__ */ jsx(Badge, { variant: priorityVariant[item.priority], children: L.priority[item.priority] }) }),
+        !hidden.has("assignee") && /* @__PURE__ */ jsx(Field, { label: L.assigneeLabel, children: item.assigneeId ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              id: item.assigneeId,
+              name: resolveAssignee?.(item.assigneeId)?.name,
+              size: "sm"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-foreground", children: resolveAssignee?.(item.assigneeId)?.name ?? L.assigned })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: L.unassigned }) }),
+        !hidden.has("dueDate") && /* @__PURE__ */ jsx(Field, { label: L.dueDateLabel, children: /* @__PURE__ */ jsx("span", { className: "text-foreground", children: formatDateFull(item.dueDate) ?? "\u2014" }) }),
+        !hidden.has("storyPoints") && /* @__PURE__ */ jsx(Field, { label: L.storyPointsLabel, children: /* @__PURE__ */ jsx("span", { className: "text-foreground", children: item.storyPoints ?? 0 }) }),
+        !hidden.has("description") && /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+          /* @__PURE__ */ jsx("dt", { className: labelClass3, children: L.description }),
+          /* @__PURE__ */ jsx("dd", { className: "mt-1 whitespace-pre-wrap text-sm text-foreground", children: item.description || "\u2014" })
+        ] }),
+        !hidden.has("labels") && /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+          /* @__PURE__ */ jsx("dt", { className: labelClass3, children: L.labelsLabel }),
+          /* @__PURE__ */ jsx("dd", { className: "mt-1 flex flex-wrap gap-1", children: (item.labels ?? []).length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "\u2014" }) : item.labels.map((l) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground",
+              children: l
+            },
+            l
+          )) })
+        ] }),
+        links.length > 0 && /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+          /* @__PURE__ */ jsx("dt", { className: labelClass3, children: L.linkedRecordsLabel }),
+          /* @__PURE__ */ jsx("dd", { className: "mt-1 flex flex-wrap gap-1.5", children: links.map((link) => /* @__PURE__ */ jsx(
+            LinkChip,
+            {
+              link,
+              renderIcon: renderLinkIcon
+            },
+            link.id
+          )) })
+        ] }),
+        parent && /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+          /* @__PURE__ */ jsx("dt", { className: labelClass3, children: L.parentLabel }),
+          /* @__PURE__ */ jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              onClick: () => onAddSubtask({ id: item.id, projectId: item.projectId }),
-              className: "text-xs font-medium text-primary hover:underline",
+              onClick: () => onOpenItem?.(parent.id),
+              className: "inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-muted/40 px-2 py-1 text-sm text-foreground hover:bg-muted",
               children: [
-                "+ ",
-                L.addSubtask
+                /* @__PURE__ */ jsx(StatusIcon, { status: parent.status }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: parent.key }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: parent.title })
               ]
             }
-          )
+          ) })
         ] }),
-        /* @__PURE__ */ jsx("dd", { className: "mt-1 space-y-1", children: children.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "\u2014" }) : children.map((c) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => onOpenItem?.(c.id),
-            className: "flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-sm hover:bg-muted",
-            children: [
-              /* @__PURE__ */ jsx(StatusIcon, { status: c.status }),
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: c.key }),
-              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-foreground", children: c.title })
-            ]
-          },
-          c.id
-        )) })
-      ] }),
-      (item.createdAt || item.updatedAt) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-6 gap-y-1 border-t border-border pt-3 text-xs text-muted-foreground sm:col-span-2", children: [
-        item.createdAt && /* @__PURE__ */ jsxs("span", { children: [
-          L.createdLabel,
-          " ",
-          formatDateFull(item.createdAt)
+        (children.length > 0 || onAddSubtask && canEdit) && /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("dt", { className: labelClass3, children: [
+              L.subtasksLabel,
+              children.length > 0 ? ` (${children.length})` : ""
+            ] }),
+            onAddSubtask && canEdit && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onAddSubtask({
+                  id: item.id,
+                  projectId: item.projectId
+                }),
+                className: "text-xs font-medium text-primary hover:underline",
+                children: [
+                  "+ ",
+                  L.addSubtask
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("dd", { className: "mt-1 space-y-1", children: children.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "\u2014" }) : children.map((c) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onOpenItem?.(c.id),
+              className: "flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-sm hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsx(StatusIcon, { status: c.status }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: c.key }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-foreground", children: c.title })
+              ]
+            },
+            c.id
+          )) })
         ] }),
-        item.updatedAt && /* @__PURE__ */ jsxs("span", { children: [
-          L.updatedLabel,
-          " ",
-          formatDateFull(item.updatedAt)
+        (item.createdAt || item.updatedAt) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-6 gap-y-1 border-t border-border pt-3 text-xs text-muted-foreground sm:col-span-2", children: [
+          item.createdAt && /* @__PURE__ */ jsxs("span", { children: [
+            L.createdLabel,
+            " ",
+            formatDateFull(item.createdAt)
+          ] }),
+          item.updatedAt && /* @__PURE__ */ jsxs("span", { children: [
+            L.updatedLabel,
+            " ",
+            formatDateFull(item.updatedAt)
+          ] })
         ] })
-      ] })
+      ] }),
+      commentsEntityType && /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-4", children: /* @__PURE__ */ jsx(
+        TaskCommentsCore,
+        {
+          entityType: commentsEntityType,
+          entityId: item.id,
+          currentActorId,
+          resolveAssignee,
+          members: assigneeOptions
+        }
+      ) })
     ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSave, className: "space-y-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-title", className: labelClass2, children: L.title }),
+        /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-title", className: labelClass3, children: L.title }),
         /* @__PURE__ */ jsx(
           "input",
           {
             id: "pm-detail-title",
-            className: fieldClass2,
+            className: fieldClass3,
             value: title,
             onChange: (e) => setTitle(e.target.value),
             required: true
@@ -2781,12 +3128,12 @@ function TaskDetailCore({
         )
       ] }),
       !hidden.has("description") && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-desc", className: labelClass2, children: L.description }),
+        /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-desc", className: labelClass3, children: L.description }),
         /* @__PURE__ */ jsx(
           "textarea",
           {
             id: "pm-detail-desc",
-            className: cn(fieldClass2, "min-h-[80px]"),
+            className: cn(fieldClass3, "min-h-[80px]"),
             value: description,
             onChange: (e) => setDescription(e.target.value)
           }
@@ -2794,12 +3141,12 @@ function TaskDetailCore({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
         !hidden.has("type") && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-type", className: labelClass2, children: L.typeLabel }),
+          /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-type", className: labelClass3, children: L.typeLabel }),
           /* @__PURE__ */ jsx(
             "select",
             {
               id: "pm-detail-type",
-              className: cn(fieldClass2, "capitalize"),
+              className: cn(fieldClass3, "capitalize"),
               value: type,
               onChange: (e) => setType(e.target.value),
               children: TASK_TYPES.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: L.type[t] }, t))
@@ -2807,12 +3154,12 @@ function TaskDetailCore({
           )
         ] }),
         !hidden.has("status") && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-status", className: labelClass2, children: L.statusLabel }),
+          /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-status", className: labelClass3, children: L.statusLabel }),
           /* @__PURE__ */ jsx(
             "select",
             {
               id: "pm-detail-status",
-              className: cn(fieldClass2, "capitalize"),
+              className: cn(fieldClass3, "capitalize"),
               value: status,
               onChange: (e) => setStatus(e.target.value),
               children: TASK_STATUSES.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: L.status[s] }, s))
@@ -2820,12 +3167,12 @@ function TaskDetailCore({
           )
         ] }),
         !hidden.has("priority") && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-priority", className: labelClass2, children: L.priorityLabel }),
+          /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-priority", className: labelClass3, children: L.priorityLabel }),
           /* @__PURE__ */ jsx(
             "select",
             {
               id: "pm-detail-priority",
-              className: cn(fieldClass2, "capitalize"),
+              className: cn(fieldClass3, "capitalize"),
               value: priority,
               onChange: (e) => setPriority(e.target.value),
               children: TASK_PRIORITIES.map((p) => /* @__PURE__ */ jsx("option", { value: p, children: L.priority[p] }, p))
@@ -2833,12 +3180,12 @@ function TaskDetailCore({
           )
         ] }),
         !hidden.has("assignee") && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-assignee", className: labelClass2, children: L.assigneeLabel }),
+          /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-assignee", className: labelClass3, children: L.assigneeLabel }),
           assigneeOptions && assigneeOptions.length > 0 ? /* @__PURE__ */ jsxs(
             "select",
             {
               id: "pm-detail-assignee",
-              className: fieldClass2,
+              className: fieldClass3,
               value: assigneeId,
               onChange: (e) => setAssigneeId(e.target.value),
               children: [
@@ -2850,7 +3197,7 @@ function TaskDetailCore({
             "input",
             {
               id: "pm-detail-assignee",
-              className: fieldClass2,
+              className: fieldClass3,
               value: assigneeId,
               onChange: (e) => setAssigneeId(e.target.value),
               placeholder: L.assigneePlaceholder
@@ -2858,27 +3205,27 @@ function TaskDetailCore({
           )
         ] }),
         !hidden.has("dueDate") && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-due", className: labelClass2, children: L.dueDateLabel }),
+          /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-due", className: labelClass3, children: L.dueDateLabel }),
           /* @__PURE__ */ jsx(
             "input",
             {
               id: "pm-detail-due",
               type: "date",
-              className: fieldClass2,
+              className: fieldClass3,
               value: dueDate,
               onChange: (e) => setDueDate(e.target.value)
             }
           )
         ] }),
         !hidden.has("storyPoints") && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-points", className: labelClass2, children: L.storyPointsLabel }),
+          /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-points", className: labelClass3, children: L.storyPointsLabel }),
           /* @__PURE__ */ jsx(
             "input",
             {
               id: "pm-detail-points",
               type: "number",
               min: 0,
-              className: fieldClass2,
+              className: fieldClass3,
               value: storyPoints,
               onChange: (e) => setStoryPoints(e.target.value)
             }
@@ -2886,12 +3233,12 @@ function TaskDetailCore({
         ] })
       ] }),
       !hidden.has("labels") && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-labels", className: labelClass2, children: L.labelsLabel }),
+        /* @__PURE__ */ jsx("label", { htmlFor: "pm-detail-labels", className: labelClass3, children: L.labelsLabel }),
         /* @__PURE__ */ jsx(
           "input",
           {
             id: "pm-detail-labels",
-            className: fieldClass2,
+            className: fieldClass3,
             value: labels,
             onChange: (e) => setLabels(e.target.value),
             placeholder: L.labelsPlaceholder
@@ -2931,7 +3278,7 @@ function TaskDetailCore({
 }
 function Field({ label, children }) {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("dt", { className: labelClass2, children: label }),
+    /* @__PURE__ */ jsx("dt", { className: labelClass3, children: label }),
     /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm", children })
   ] });
 }
@@ -2978,6 +3325,7 @@ function TasksPageCore({
   renderLinkIcon,
   assigneeOptions,
   currentActorId,
+  commentsEntityType,
   labels,
   openItemId,
   header,
@@ -3079,7 +3427,9 @@ function TasksPageCore({
       onUpdated: handleUpdated,
       onDeleted: handleDeleted,
       onOpenItem: handleSelect,
-      onAddSubtask: handleAddSubtask
+      onAddSubtask: handleAddSubtask,
+      commentsEntityType,
+      currentActorId
     }
   ) : null;
   const listPriority = priority === "ALL" ? void 0 : priority;
@@ -3215,6 +3565,6 @@ function TasksPage({
   );
 }
 
-export { Avatar, Badge, CREATE_WORK_ITEM, CREATE_WORK_ITEM_LINK, CreateTask, CreateTaskCore, DEFAULT_BOARD_COLUMNS, DEFAULT_TASK_LABELS, DELETE_WORK_ITEM, DELETE_WORK_ITEM_LINK, Drawer, GET_PROJECTS, GET_WORK_ITEM, LIST_MILESTONES, LIST_WORK_ITEMS, LIST_WORK_ITEM_LINKS, LinkChip, MILESTONE_FIELDS, MOVE_WORK_ITEM, Modal, PRIORITY_META, PROJECT_SUMMARY_FIELDS, PlanMagnetProvider, PriorityIndicator, STATUS_META, StatusIcon, StatusPill, TASK_PRIORITIES, TASK_STATUSES, TASK_TYPES, TaskBoard, TaskBoardCore, TaskCard, TaskDetail, TaskDetailCore, TaskLabelsProvider, TaskList, TaskListCore, TaskTimelineCore, TaskToolbar, TasksPage, TasksPageCore, TypeBadge, UPDATE_WORK_ITEM, WORK_ITEM_FIELDS, WORK_ITEM_LINK_FIELDS, WORK_ITEM_SUMMARY_FIELDS, badgeVariants, cn, config, createPlanMagnetClient, enumLabel, getGraphQLEndpoint, getPlanMagnetClient, getPlanMagnetClientSafe, getPlanMagnetConfig, isPlanMagnetClientReady, mergeTaskLabels, resetPlanMagnetClient, resetPlanMagnetConfig, setPlanMagnetClient, setPlanMagnetConfig, useMilestones, usePlanMagnetContext, usePlanMagnetContextSafe, useTaskLabels, useWorkItemLinks, validateTrustedOrigin, waitForPlanMagnetClient };
+export { Avatar, Badge, CREATE_WORK_ITEM, CREATE_WORK_ITEM_LINK, CreateTask, CreateTaskCore, DEFAULT_BOARD_COLUMNS, DEFAULT_TASK_LABELS, DELETE_WORK_ITEM, DELETE_WORK_ITEM_LINK, Drawer, GET_PROJECTS, GET_WORK_ITEM, LIST_MILESTONES, LIST_WORK_ITEMS, LIST_WORK_ITEM_LINKS, LinkChip, MILESTONE_FIELDS, MOVE_WORK_ITEM, Modal, PRIORITY_META, PROJECT_SUMMARY_FIELDS, PlanMagnetProvider, PriorityIndicator, STATUS_META, StatusIcon, StatusPill, TASK_PRIORITIES, TASK_STATUSES, TASK_TYPES, TaskBoard, TaskBoardCore, TaskCard, TaskCommentsCore, TaskDetail, TaskDetailCore, TaskLabelsProvider, TaskList, TaskListCore, TaskTimelineCore, TaskToolbar, TasksPage, TasksPageCore, TypeBadge, UPDATE_WORK_ITEM, WORK_ITEM_FIELDS, WORK_ITEM_LINK_FIELDS, WORK_ITEM_SUMMARY_FIELDS, badgeVariants, cn, config, createPlanMagnetClient, enumLabel, getGraphQLEndpoint, getPlanMagnetClient, getPlanMagnetClientSafe, getPlanMagnetConfig, isPlanMagnetClientReady, mergeTaskLabels, resetPlanMagnetClient, resetPlanMagnetConfig, setPlanMagnetClient, setPlanMagnetConfig, useMilestones, usePlanMagnetContext, usePlanMagnetContextSafe, useTaskLabels, useWorkItemLinks, validateTrustedOrigin, waitForPlanMagnetClient };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map