@taskforcehq/taskforce 0.3.305 → 0.3.307

package/dist/components/task/TaskForm.js

@@ -14,12 +14,21 @@ import { Markdown } from "../ui/Markdown";
 import { IconMap, resolveColor } from "../../utils/constants";
 import { formatDate } from "../../utils/formatting";
 import { t } from "../../localization";
-import { TaskContextUpload } from "./TaskContextUpload";
-import { summarizeTaskChange, summarizeTaskEvent, } from "../../utils/taskActivity";
+import { getTaskActivityItems } from "../../utils/taskActivity";
 import { ensureAssigneeOptionPresent, getAssigneeKind, getAssigneeLabel, } from "../../utils/assignees";
 import { getTaskReferenceLabel } from "../../utils/taskReferences";
 import { getVisibleTaskFormTaxonomies } from "../../utils/taxonomyFormDefaults.js";
 import { getInitiativeReferenceLabel, getWorkstreamReferenceLabel, } from "../../utils/planningReferences";
+const DeferredEntityActivityTimeline = React.lazy(() => (import("../activity/EntityActivityTimeline").then((module) => ({
+    default: module.EntityActivityTimeline,
+}))));
+const DeferredTaskContextUpload = React.lazy(() => (import("./TaskContextUpload").then((module) => ({
+    default: module.TaskContextUpload,
+}))));
+function ActivityTimelineFallback({ count }) {
+    const placeholderCount = Math.max(2, Math.min(count || 3, 4));
+    return (_jsx("div", { className: `${formStyles.commentThread} ${formStyles.activityLoadingThread}`.trim(), "aria-busy": "true", "aria-live": "polite", "aria-label": "Loading activity", children: Array.from({ length: placeholderCount }, (_, index) => (_jsxs("div", { className: formStyles.activitySkeletonItem, children: [_jsx("div", { className: formStyles.activitySkeletonMeta }), _jsx("div", { className: formStyles.activitySkeletonBody })] }, index))) }));
+}
 function SortableChecklistRow({ id, item, onToggle, onRemove, }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id });
     const style = {
@@ -31,12 +40,6 @@ function SortableChecklistRow({ id, item, onToggle, onRemove, }) {
                     ? "Mark checklist item incomplete"
                     : "Mark checklist item complete", children: item.isCompleted ? _jsx(Check, { size: 14, strokeWidth: 2.1 }) : null }), _jsx("span", { className: `${formStyles.checklistItemText} ${item.isCompleted ? formStyles.checklistItemTextCompleted : ""}`.trim(), children: item.title }), _jsx("button", { type: "button", className: formStyles.checklistRemoveBtn, onClick: onRemove, title: "Remove checklist item", "aria-label": "Remove checklist item", children: _jsx(X, { size: 15, strokeWidth: 1.9 }) })] }));
 }
-function hexToRgba(hex, opacity) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    if (!result)
-        return "";
-    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${opacity})`;
-}
 export function TaskForm(props) {
     const { editingTaskId, error, title, description, category, type, priority, complexity, manualComplexityEnabled = false, assignee, scheduledDate, dueDate, workstreamInput = "", checklistItems, comments, newCommentText, contextFiles, currentWorkspaceId, apiBaseUrl, descriptionFocused, showMarkdownHelp, showChecklist = false, checklistEnabled = true, formTaxonomies, onTaxonomyChange, onOpenSettings, categories, types, priorities, taxonomyDisplayLabels, assigneeOptions, taxonomies, workstreams = [], initiatives = [], copiedId, onTitleChange, onDescriptionChange, onCategoryChange, onTypeChange, onPriorityChange, onComplexityChange, onAssigneeChange, onScheduledDateChange, onDueDateChange, onWorkstreamInputChange = () => { }, onChecklistItemsChange, onNewCommentTextChange, onDescriptionFocusedChange, onShowMarkdownHelpChange, onShowChecklistChange = () => { }, onSubmit, onAddComment, onAddContextFile, onRemoveContextFile, onUpdateContextCaption, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onOpenTaskById, currentTask, commentsEndRef, } = props;
     const currentTaskReferenceLabel = getTaskReferenceLabel(currentTask);
@@ -235,18 +238,7 @@ export function TaskForm(props) {
         initiative.id,
         getInitiativeReferenceLabel(initiative) || initiative.id,
     ])), [initiatives]);
-    const taskActivityItems = React.useMemo(() => {
-        if (Array.isArray(currentTask?.activity) &&
-            currentTask.activity.length > 0) {
-            return currentTask.activity;
-        }
-        return comments.map((comment) => ({
-            id: `comment:${comment.id}`,
-            type: "comment",
-            timestamp: comment.timestamp,
-            comment,
-        }));
-    }, [comments, currentTask?.activity]);
+    const taskActivityItems = React.useMemo(() => getTaskActivityItems({ activity: currentTask?.activity, comments }), [comments, currentTask?.activity]);
     const formatActivityFieldValue = (field, value) => {
         const normalizedValue = String(value || "").trim();
         if (!normalizedValue)
@@ -284,8 +276,53 @@ export function TaskForm(props) {
         formatAiAuthorLabel,
         resolvedAssigneeOptions,
     ]);
+    const resolveActivityActorPresentation = React.useCallback(({ actorId, actorType, actorProfile, fallbackKind, }) => {
+        const actorRef = String(actorId || "").trim();
+        const normalizedActor = actorRef.toLowerCase();
+        const actorFallback = actorFallbackById.get(actorRef);
+        const actorOption = actorOptionByValue.get(actorRef) ||
+            actorOptionByValue.get(normalizedActor);
+        const resolvedActor = actorProfile || actorFallback || actorOption || null;
+        const resolvedKind = actorType === "system"
+            ? "system"
+            : actorType === "ai" || resolvedActor?.kind === "ai"
+                ? "agent"
+                : actorType === "human" || resolvedActor?.kind === "human"
+                    ? "member"
+                    : actorOption?.kind === "agent"
+                        ? "agent"
+                        : actorOption?.kind === "member"
+                            ? "member"
+                            : fallbackKind ||
+                                (normalizedActor === "" ||
+                                    normalizedActor === "user" ||
+                                    normalizedActor === "human"
+                                    ? "member"
+                                    : "agent");
+        const label = resolvedKind === "system"
+            ? "System"
+            : resolveActorLabel(actorRef, resolvedKind === "agent" ? "ai" : "human", resolvedActor?.label || null);
+        const color = resolvedActor?.color;
+        const iconName = String(resolvedActor?.icon ||
+            (resolvedKind === "agent"
+                ? "Bot"
+                : resolvedKind === "member"
+                    ? "User"
+                    : "ClipboardList"));
+        const ActorIcon = IconMap[iconName] ||
+            (resolvedKind === "agent"
+                ? Bot
+                : resolvedKind === "member"
+                    ? User
+                    : ClipboardList);
+        return { kind: resolvedKind, label, color, ActorIcon };
+    }, [
+        actorFallbackById,
+        actorOptionByValue,
+        resolveActorLabel,
+    ]);
     const latestActivityActorLabel = React.useMemo(() => {
-        const latestItem = taskActivityItems[0];
+        const latestItem = taskActivityItems[taskActivityItems.length - 1];
         if (!latestItem)
             return null;
         if (latestItem.type === "comment") {
@@ -347,104 +384,12 @@ export function TaskForm(props) {
         const frame = window.requestAnimationFrame(scrollToLatest);
         return () => window.cancelAnimationFrame(frame);
     }, [activityCount, commentsEndRef, currentTask?.id, editingTaskId]);
-    const activitySidebar = editingTaskId ? (_jsxs("aside", { className: formStyles.activitySidebar, "aria-label": t("taskForm.commentsSectionTitle"), children: [_jsxs("div", { className: formStyles.activitySidebarHeader, children: [_jsx("h2", { className: formStyles.activitySidebarTitle, children: t("taskForm.commentsSectionTitle") }), _jsx("span", { className: formStyles.activitySidebarCount, children: activityCount })] }), _jsxs("div", { className: `${formStyles.commentPanel} ${formStyles.activitySidebarPanel}`.trim(), children: [_jsxs("div", { className: formStyles.commentThread, children: [activityCount === 0 && (_jsx("div", { className: formStyles.emptyComments, children: t("taskForm.noComments") })), taskActivityItems.map((item) => {
-                                if (item.type === "comment") {
-                                    const c = item.comment;
-                                    const authorRef = String(c.author || "").trim();
-                                    const normalizedAuthor = authorRef.toLowerCase();
-                                    const actorFallback = actorFallbackById.get(authorRef);
-                                    const actorOption = actorOptionByValue.get(authorRef) ||
-                                        actorOptionByValue.get(normalizedAuthor);
-                                    const resolvedActor = c.actor || actorFallback || actorOption || null;
-                                    const commentKind = c.actor?.kind === "human"
-                                        ? "member"
-                                        : c.actor?.kind === "ai"
-                                            ? "agent"
-                                            : actorFallback?.kind === "human"
-                                                ? "member"
-                                                : actorFallback?.kind === "ai"
-                                                    ? "agent"
-                                                    : actorOption?.kind ||
-                                                        (normalizedAuthor === "" ||
-                                                            normalizedAuthor === "user" ||
-                                                            normalizedAuthor === "human"
-                                                            ? "member"
-                                                            : "agent");
-                                    const authorLabel = c.actor?.label ||
-                                        actorFallback?.label ||
-                                        actorOption?.label ||
-                                        (authorRef
-                                            ? getAssigneeLabel(authorRef, resolvedAssigneeOptions)
-                                            : "") ||
-                                        (commentKind === "agent"
-                                            ? formatAiAuthorLabel(authorRef || "ai")
-                                            : t("taskForm.you"));
-                                    const authorColor = c.actor?.color || actorFallback?.color || actorOption?.color;
-                                    const iconName = String(resolvedActor?.icon ||
-                                        (commentKind === "agent" ? "Bot" : "User"));
-                                    const CommentActorIcon = IconMap[iconName] || (commentKind === "agent" ? Bot : User);
-                                    return (_jsxs("div", { className: `${formStyles.comment} ${commentKind === "agent" ? formStyles.commentAi : formStyles.commentUser}`, children: [_jsxs("div", { className: formStyles.commentHeader, children: [_jsx("span", { className: formStyles.commentAuthor, style: authorColor ? { color: authorColor } : undefined, children: _jsxs(_Fragment, { children: [_jsx(CommentActorIcon, { size: 12, strokeWidth: 1.5 }), " ", authorLabel] }) }), _jsx("span", { className: formStyles.commentTime, children: formatDate(c.timestamp, {
-                                                            month: "short",
-                                                            day: "numeric",
-                                                            hour: "2-digit",
-                                                            minute: "2-digit",
-                                                        }) })] }), _jsx("div", { className: formStyles.commentText, style: authorColor
-                                                    ? {
-                                                        background: `linear-gradient(135deg, ${hexToRgba(authorColor, 0.18)} 0%, ${hexToRgba(authorColor, 0.1)} 100%)`,
-                                                        borderColor: hexToRgba(authorColor, 0.35),
-                                                    }
-                                                    : undefined, children: _jsx(Markdown, { onTaskIdClick: onOpenTaskById, children: c.text }) })] }, c.id));
-                                }
-                                const event = item.event;
-                                const actorRef = String(event.actor || "").trim();
-                                const normalizedAuthor = actorRef.toLowerCase();
-                                const actorFallback = actorFallbackById.get(actorRef);
-                                const actorOption = actorOptionByValue.get(actorRef) ||
-                                    actorOptionByValue.get(normalizedAuthor);
-                                const resolvedActor = event.actorProfile || actorFallback || actorOption || null;
-                                const eventKind = event.actorType === "ai"
-                                    ? "agent"
-                                    : event.actorType === "human"
-                                        ? "member"
-                                        : "system";
-                                const authorLabel = event.actorProfile?.label ||
-                                    actorFallback?.label ||
-                                    actorOption?.label ||
-                                    (eventKind === "system"
-                                        ? "System"
-                                        : actorRef
-                                            ? getAssigneeLabel(actorRef, resolvedAssigneeOptions)
-                                            : eventKind === "agent"
-                                                ? formatAiAuthorLabel("ai")
-                                                : t("taskForm.you"));
-                                const authorColor = event.actorProfile?.color ||
-                                    actorFallback?.color ||
-                                    actorOption?.color;
-                                const iconName = String(resolvedActor?.icon ||
-                                    (eventKind === "agent"
-                                        ? "Bot"
-                                        : eventKind === "member"
-                                            ? "User"
-                                            : "ClipboardList"));
-                                const EventActorIcon = IconMap[iconName] ||
-                                    (eventKind === "agent"
-                                        ? Bot
-                                        : eventKind === "member"
-                                            ? User
-                                            : ClipboardList);
-                                const changeEntries = Object.entries(event.details?.changes || {});
-                                return (_jsxs("div", { className: `${formStyles.comment} ${formStyles.activityEvent} ${eventKind === "system" ? formStyles.activityEventSystem : ""}`, children: [_jsxs("div", { className: `${formStyles.commentHeader} ${formStyles.activityEventHeader}`, children: [_jsx("span", { className: formStyles.commentAuthor, style: authorColor ? { color: authorColor } : undefined, children: _jsxs(_Fragment, { children: [_jsx(EventActorIcon, { size: 12, strokeWidth: 1.5 }), " ", authorLabel] }) }), _jsx("span", { className: formStyles.commentTime, children: formatDate(event.createdAt, {
-                                                        month: "short",
-                                                        day: "numeric",
-                                                        hour: "2-digit",
-                                                        minute: "2-digit",
-                                                    }) })] }), _jsxs("div", { className: formStyles.activityEventText, children: [_jsx("div", { children: summarizeTaskEvent(event, formatActivityFieldValue) }), changeEntries.length > 1 && (_jsx("div", { className: formStyles.activityEventChanges, children: changeEntries.map(([field, change]) => (_jsx("span", { className: formStyles.activityEventChange, children: summarizeTaskChange(field, change, formatActivityFieldValue) }, field))) }))] })] }, item.id));
-                            }), _jsx("div", { ref: commentsEndRef })] }), _jsxs("div", { className: formStyles.commentInputArea, children: [_jsx("textarea", { className: formStyles.commentInput, placeholder: t("taskForm.commentPlaceholder"), value: newCommentText, onChange: (e) => onNewCommentTextChange(e.target.value), onKeyDown: (e) => {
+    const activitySidebar = editingTaskId ? (_jsxs("aside", { className: formStyles.activitySidebar, "aria-label": t("taskForm.commentsSectionTitle"), children: [_jsxs("div", { className: formStyles.activitySidebarHeader, children: [_jsx("h2", { className: formStyles.activitySidebarTitle, children: t("taskForm.commentsSectionTitle") }), _jsx("span", { className: formStyles.activitySidebarCount, children: activityCount })] }), _jsxs("div", { className: `${formStyles.commentPanel} ${formStyles.activitySidebarPanel}`.trim(), children: [_jsx(React.Suspense, { fallback: _jsx(ActivityTimelineFallback, { count: activityCount }), children: _jsx(DeferredEntityActivityTimeline, { activity: currentTask?.activity, comments: comments, formatFieldValue: formatActivityFieldValue, resolveActorPresentation: resolveActivityActorPresentation, onOpenTaskById: onOpenTaskById, emptyMessage: t("taskForm.noComments"), listClassName: formStyles.commentThread, emptyClassName: formStyles.emptyComments, endRef: commentsEndRef }) }), _jsxs("div", { className: formStyles.commentInputArea, children: [_jsx("textarea", { className: formStyles.commentInput, placeholder: t("taskForm.commentPlaceholder"), value: newCommentText, onChange: (e) => onNewCommentTextChange(e.target.value), onKeyDown: (e) => {
                                     if (e.key === "Enter" && !e.shiftKey) {
                                         e.preventDefault();
                                         onAddComment();
                                     }
-                                }, rows: 1 }), _jsx("button", { type: "button", className: formStyles.sendCommentBtn, onClick: onAddComment, disabled: !newCommentText.trim(), "aria-label": "Send comment", title: "Send comment", children: _jsx(Send, { size: 16 }) })] })] })] })) : null;
+                                }, rows: 4 }), _jsx("button", { type: "button", className: formStyles.sendCommentBtn, onClick: onAddComment, disabled: !newCommentText.trim(), "aria-label": "Send comment", title: "Send comment", children: _jsx(Send, { size: 16 }) })] })] })] })) : null;
     return (_jsxs("form", { ref: formRef, onSubmit: onSubmit, className: `${styles.form} ${styles.appScrollbar} tf-scrollbar`, children: [error && _jsx("div", { className: formStyles.error, children: error }), isReadOnly && (_jsx("div", { className: `${formStyles.formNotice} tf-text-helper`, children: isDeletedReadOnly
                     ? "Deleted tasks are read-only. Restore the task to make changes."
                     : "Archived tasks are read-only. Unarchive the task to make changes." })), _jsxs("fieldset", { disabled: isReadOnly, className: `${formStyles.formFieldsetReset} ${editingTaskId ? formStyles.formLayoutWithSidebar : formStyles.formLayout}`.trim(), children: [_jsxs("div", { className: formStyles.formMainColumn, children: [_jsxs("div", { className: styles.field, children: [_jsxs("div", { className: styles.labelRow, children: [_jsx("label", { className: styles.label, children: "Title" }), assignee && (_jsx("span", { title: `Assigned to: ${currentAssigneeLabel}`, className: [
@@ -565,7 +510,7 @@ export function TaskForm(props) {
                                                                     .map((entry, entryIndex) => ({
                                                                     ...entry,
                                                                     order: entryIndex,
-                                                                }))) }, item.id || `checklist-${index}`))) }) })) : (_jsx("div", { className: `${formStyles.settingsHint} tf-text-helper`, children: "No checklist items yet." }))] }))] }))] }), _jsxs("div", { children: [_jsx(TaskContextUpload, { taskId: editingTaskId, taskReferenceLabel: currentTaskReferenceLabel, workspaceId: currentWorkspaceId, apiBaseUrl: apiBaseUrl, contextFiles: contextFiles, onAddContextFile: onAddContextFile, onRemoveContextFile: onRemoveContextFile, onUpdateContextCaption: onUpdateContextCaption }), _jsx("div", { className: `${formStyles.taskFormLifecycle} ${formStyles.taskFormMetaDivider}`, children: _jsx("div", { className: formStyles.taskFormMetaGrid, children: currentTask && (_jsxs(_Fragment, { children: [_jsxs("div", { className: formStyles.taskFormDateRow, children: [_jsx("span", { className: formStyles.taskFormDateLabel, children: t("taskForm.createdLabel") }), _jsxs("span", { className: formStyles.taskFormMetaStack, children: [_jsx("span", { className: formStyles.taskFormDateValue, children: createdLabel || t("taskForm.emptyValue") }), _jsx("span", { className: formStyles.taskFormMetaActor, children: createdByLabel
+                                                                }))) }, item.id || `checklist-${index}`))) }) })) : (_jsx("div", { className: `${formStyles.settingsHint} tf-text-helper`, children: "No checklist items yet." }))] }))] }))] }), _jsxs("div", { children: [_jsx(React.Suspense, { fallback: null, children: _jsx(DeferredTaskContextUpload, { taskId: editingTaskId, taskReferenceLabel: currentTaskReferenceLabel, workspaceId: currentWorkspaceId, apiBaseUrl: apiBaseUrl, contextFiles: contextFiles, onAddContextFile: onAddContextFile, onRemoveContextFile: onRemoveContextFile, onUpdateContextCaption: onUpdateContextCaption }) }), _jsx("div", { className: `${formStyles.taskFormLifecycle} ${formStyles.taskFormMetaDivider}`, children: _jsx("div", { className: formStyles.taskFormMetaGrid, children: currentTask && (_jsxs(_Fragment, { children: [_jsxs("div", { className: formStyles.taskFormDateRow, children: [_jsx("span", { className: formStyles.taskFormDateLabel, children: t("taskForm.createdLabel") }), _jsxs("span", { className: formStyles.taskFormMetaStack, children: [_jsx("span", { className: formStyles.taskFormDateValue, children: createdLabel || t("taskForm.emptyValue") }), _jsx("span", { className: formStyles.taskFormMetaActor, children: createdByLabel
                                                                             ? `by ${createdByLabel}`
                                                                             : t("taskForm.emptyValue") })] })] }), _jsxs("div", { className: formStyles.taskFormDateRow, children: [_jsx("span", { className: formStyles.taskFormDateLabel, children: t("taskForm.updatedLabel") }), _jsxs("span", { className: formStyles.taskFormMetaStack, children: [_jsx("span", { className: formStyles.taskFormDateValue, children: updatedLabel || t("taskForm.emptyValue") }), _jsx("span", { className: formStyles.taskFormMetaActor, children: updatedByLabel
                                                                             ? `by ${updatedByLabel}`

package/dist/components/task/TaskForm.test.js

@@ -455,7 +455,7 @@ describe("TaskForm Component", () => {
                 ],
             },
         });
-        expect(screen.getByText("ASSIGNED TO: Unassigned -> Planner Bot")).toBeInTheDocument();
+        expect(screen.getByText("Assigned to: Unassigned -> Planner Bot")).toBeInTheDocument();
         expect(screen.queryByText(/ai-profile-1/i)).not.toBeInTheDocument();
     });
     it("renders planning relationship audit activity with reference labels instead of raw ids", () => {
@@ -491,7 +491,7 @@ describe("TaskForm Component", () => {
                 ],
             },
         });
-        expect(screen.getByText("Workstream: none -> WS-12")).toBeInTheDocument();
+        expect(screen.getByText("Workstream changed: none -> WS-12")).toBeInTheDocument();
         expect(screen.queryByText(/workstream-1/i)).not.toBeInTheDocument();
     });
     it("3.13 Update title", async () => {
@@ -504,8 +504,8 @@ describe("TaskForm Component", () => {
     });
     it("keeps scheduled date editable in the task form", () => {
         renderForm({
-            editingTaskId: "parent-1",
-            currentTask: { id: "parent-1", title: "Parent Task" },
+            editingTaskId: "task-1",
+            currentTask: { id: "task-1", title: "Schedulable task" },
         });
         const scheduledLabel = screen.getByText("Scheduled:");
         const scheduledInput = scheduledLabel.nextElementSibling;
@@ -513,7 +513,6 @@ describe("TaskForm Component", () => {
         if (!scheduledInput)
             throw new Error("Scheduled date input missing");
         expect(scheduledInput.disabled).toBe(false);
-        expect(screen.queryByText("Parent tasks cannot be scheduled. Schedule leaf tasks instead.")).not.toBeInTheDocument();
     });
     it("3.14 Context Documents section renders", async () => {
         const user = userEvent.setup();
@@ -682,9 +681,112 @@ describe("TaskForm Component", () => {
                 ],
             },
         });
-        expect(screen.getByText("Status: task -> in-progress")).toBeInTheDocument();
+        expect(screen.getByText("Status changed: Task -> In Progress")).toBeInTheDocument();
         expect(screen.queryByText("System")).not.toBeInTheDocument();
     });
+    it("captures comments alongside audit events and avoids duplicate comment event rows", () => {
+        renderForm({
+            editingTaskId: "123",
+            comments: [
+                {
+                    id: "comment-activity-1",
+                    author: "user",
+                    text: "This comment should stay visible.",
+                    timestamp: "2026-03-22T10:05:00.000Z",
+                },
+            ],
+            currentTask: {
+                id: "task-activity-with-comment",
+                title: "Activity with comment",
+                status: "task",
+                createdAt: "2026-03-22T09:00:00.000Z",
+                activity: [
+                    {
+                        id: "event:status-1",
+                        type: "event",
+                        timestamp: "2026-03-22T10:00:00.000Z",
+                        event: {
+                            id: "status-1",
+                            taskId: "task-activity-with-comment",
+                            workspaceId: "default",
+                            action: "task-status-changed",
+                            actor: "user",
+                            actorType: "human",
+                            createdAt: "2026-03-22T10:00:00.000Z",
+                            details: {
+                                changes: {
+                                    status: { from: "task", to: "in-progress" },
+                                },
+                            },
+                        },
+                    },
+                    {
+                        id: "event:comment-added-1",
+                        type: "event",
+                        timestamp: "2026-03-22T10:05:00.000Z",
+                        event: {
+                            id: "comment-added-1",
+                            taskId: "task-activity-with-comment",
+                            workspaceId: "default",
+                            action: "task-comment-added",
+                            actor: "user",
+                            actorType: "human",
+                            createdAt: "2026-03-22T10:05:00.000Z",
+                        },
+                    },
+                ],
+            },
+        });
+        expect(screen.getByText("This comment should stay visible.")).toBeInTheDocument();
+        expect(screen.getByText("Status changed: Task -> In Progress")).toBeInTheDocument();
+        expect(screen.queryByText("Comment added")).not.toBeInTheDocument();
+    });
+    it("does not repeat the primary activity change in multi-change event details", () => {
+        renderForm({
+            editingTaskId: "123",
+            assigneeOptions: [
+                ...defaultProps.assigneeOptions,
+                {
+                    value: "member-2",
+                    label: "Tiffany Case",
+                    icon: "User",
+                    color: "#22c55e",
+                    kind: "member",
+                },
+            ],
+            currentTask: {
+                id: "task-multi-change",
+                title: "Multi change task",
+                status: "in-progress",
+                createdAt: "2026-03-22T09:00:00.000Z",
+                activity: [
+                    {
+                        id: "event:multi-change-1",
+                        type: "event",
+                        timestamp: "2026-03-22T10:00:00.000Z",
+                        event: {
+                            id: "multi-change-1",
+                            taskId: "task-multi-change",
+                            workspaceId: "default",
+                            action: "task-status-changed",
+                            actor: "user",
+                            actorType: "human",
+                            createdAt: "2026-03-22T10:00:00.000Z",
+                            details: {
+                                changes: {
+                                    status: { from: "task", to: "in-progress" },
+                                    assignee: { from: "unassigned", to: "member-2" },
+                                },
+                            },
+                        },
+                    },
+                ],
+            },
+        });
+        expect(screen.getByText("Status changed: Task -> In Progress")).toBeInTheDocument();
+        expect(screen.getByText("Assigned to: Unassigned -> Tiffany Case")).toBeInTheDocument();
+        expect(screen.queryByText("Status: Task -> In Progress")).not.toBeInTheDocument();
+    });
     it("summarizes description audit events without rendering the full description body", () => {
         renderForm({
             editingTaskId: "123",
@@ -720,7 +822,7 @@ describe("TaskForm Component", () => {
                 ],
             },
         });
-        expect(screen.getByText("DESCRIPTION: added")).toBeInTheDocument();
+        expect(screen.getByText("Description: added")).toBeInTheDocument();
         expect(screen.queryByText(/Line one/)).not.toBeInTheDocument();
         expect(screen.queryByText(/Line two/)).not.toBeInTheDocument();
         expect(screen.queryByText(/Line three/)).not.toBeInTheDocument();
@@ -760,7 +862,7 @@ describe("TaskForm Component", () => {
                 ],
             },
         });
-        expect(screen.getByText("TITLE: updated")).toBeInTheDocument();
+        expect(screen.getByText("Title: updated")).toBeInTheDocument();
         expect(screen.queryByText("Old title")).not.toBeInTheDocument();
         expect(screen.queryByText("New title")).not.toBeInTheDocument();
     });

package/dist/components/task/TaskKanban.d.ts

@@ -53,6 +53,7 @@ interface TaskKanbanProps {
     filterPriorities?: number[];
     filterStatus?: string[];
     filterAssignees?: TaskAssignee[];
+    filtersReady?: boolean;
     scheduleFilteredTaskIds?: string[];
     categories?: CategoryConfig[];
     compressed?: boolean;
@@ -71,5 +72,5 @@ interface TaskKanbanProps {
     workstreams?: WorkstreamItem[];
     initiatives?: InitiativeItem[];
 }
-export declare function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, approaches, assigneeOptions, onUpdateTask, onTaskClick, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks, onAddTaskToColumn, emptyColumnMode, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees, scheduleFilteredTaskIds, categories, compressed, readOnlyMode, recentlyChangedTaskIds, scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy, sortOrder, planningDropTargets, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel, workstreams, initiatives, }: TaskKanbanProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, approaches, assigneeOptions, onUpdateTask, onTaskClick, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks, onAddTaskToColumn, emptyColumnMode, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees, filtersReady, scheduleFilteredTaskIds, categories, compressed, readOnlyMode, recentlyChangedTaskIds, scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy, sortOrder, planningDropTargets, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel, workstreams, initiatives, }: TaskKanbanProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/task/TaskKanban.js

@@ -11,7 +11,7 @@ import { buildScheduleDropResult, buildStatusTransitionUpdates, getGroupedTaskSt
 import * as Icons from 'lucide-react';
 import { IconMap, resolveColor } from '../../utils/constants';
 const EXPIRED_CARD_ID_PREFIX = 'expired::';
-export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, approaches, assigneeOptions = [], onUpdateTask, onTaskClick, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks = [], onAddTaskToColumn, emptyColumnMode = 'show', filterCategories = [], filterTypes = [], filterPriorities = [], filterStatus = [], filterAssignees = [], scheduleFilteredTaskIds, categories = [], compressed = false, readOnlyMode = null, recentlyChangedTaskIds = [], scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy = 'created', sortOrder = 'desc', planningDropTargets = null, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel = true, workstreams = [], initiatives = [], }) {
+export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, approaches, assigneeOptions = [], onUpdateTask, onTaskClick, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks = [], onAddTaskToColumn, emptyColumnMode = 'show', filterCategories = [], filterTypes = [], filterPriorities = [], filterStatus = [], filterAssignees = [], filtersReady = true, scheduleFilteredTaskIds, categories = [], compressed = false, readOnlyMode = null, recentlyChangedTaskIds = [], scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy = 'created', sortOrder = 'desc', planningDropTargets = null, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel = true, workstreams = [], initiatives = [], }) {
     const [activeId, setActiveId] = useState(null);
     const [isHeaderPanning, setIsHeaderPanning] = useState(false);
     const [headerPanEnabled, setHeaderPanEnabled] = useState(false);
@@ -130,20 +130,99 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
         ]);
         return dateToColumn.get(scheduledDate) || '__offweek';
     };
+    const inferredKanbanColumns = useMemo(() => {
+        if (groupBy === 'schedule')
+            return [];
+        const existingValues = new Set(kanbanColumns.map((column) => String(column.value)));
+        const existingLabels = new Set(kanbanColumns.map((column) => column.label));
+        const inferred = [];
+        const buildColumn = (task) => {
+            const rawValue = groupBy === 'status'
+                ? getTaskStatus(task)
+                : task[groupBy];
+            const value = String(rawValue ?? '');
+            if (!value || existingValues.has(value) || existingLabels.has(value))
+                return null;
+            if (groupBy === 'category') {
+                const category = categories.find((entry) => entry.value === value || entry.label === value);
+                return {
+                    value,
+                    label: category?.label || value,
+                    icon: category?.icon || 'Folder',
+                    color: category?.color,
+                };
+            }
+            if (groupBy === 'type') {
+                const type = types?.find((entry) => entry.value === value || entry.label === value);
+                return {
+                    value,
+                    label: type?.label || value,
+                    icon: type?.icon || 'CheckSquare',
+                    color: type?.color,
+                };
+            }
+            if (groupBy === 'priority') {
+                const priority = priorities?.find((entry) => Number(entry.value) === Number(value));
+                return {
+                    value: Number.isFinite(Number(value)) ? Number(value) : value,
+                    label: priority?.label || value,
+                    icon: priority?.icon || 'Flag',
+                    color: priority?.color,
+                };
+            }
+            if (groupBy === 'complexity') {
+                return {
+                    value: Number.isFinite(Number(value)) ? Number(value) : value,
+                    label: value,
+                    icon: 'Gauge',
+                };
+            }
+            if (groupBy === 'status') {
+                return {
+                    value,
+                    label: value,
+                    icon: 'Circle',
+                };
+            }
+            if (groupBy === 'assignee') {
+                const option = assigneeOptions.find((entry) => entry.value === value);
+                return {
+                    value,
+                    label: option?.label || value,
+                    icon: option?.icon === 'HelpCircle' ? 'Circle' : option?.icon,
+                    color: option?.color,
+                };
+            }
+            return {
+                value,
+                label: value,
+            };
+        };
+        for (const task of tasks) {
+            const column = buildColumn(task);
+            if (!column)
+                continue;
+            inferred.push(column);
+            existingValues.add(String(column.value));
+            existingLabels.add(column.label);
+        }
+        return inferred;
+    }, [assigneeOptions, categories, groupBy, kanbanColumns, priorities, tasks, types]);
+    const effectiveKanbanColumns = useMemo(() => [...kanbanColumns, ...inferredKanbanColumns], [inferredKanbanColumns, kanbanColumns]);
     const columnLookup = useMemo(() => {
         const map = new Map();
-        for (const column of kanbanColumns) {
+        for (const column of effectiveKanbanColumns) {
             map.set(String(column.value), column);
             if (!map.has(column.label)) {
                 map.set(column.label, column);
             }
         }
         return map;
-    }, [kanbanColumns]);
+    }, [effectiveKanbanColumns]);
     // Totals for "X / Y" display
     const columnTotals = useMemo(() => {
         const counts = {};
-        kanbanColumns.forEach(col => { counts[String(col.value)] = 0; });
+        effectiveKanbanColumns.forEach(col => { counts[String(col.value)] = 0; });
         const totalsSource = allTasks.length > 0 ? allTasks : tasks;
         totalsSource.forEach(task => {
             let stringValue = '';
@@ -170,12 +249,12 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
             }
         });
         return counts;
-    }, [allTasks, tasks, kanbanColumns, groupBy, columnLookup, todayDateOnly]);
+    }, [allTasks, tasks, effectiveKanbanColumns, groupBy, columnLookup, todayDateOnly]);
     // Group items by the groupBy field
     const groupedTasks = useMemo(() => {
         const groups = {};
         // Initialize all columns
-        kanbanColumns.forEach(col => {
+        effectiveKanbanColumns.forEach(col => {
             groups[String(col.value)] = [];
         });
         // Distribute tasks
@@ -232,7 +311,7 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
             });
         }
         return groups;
-    }, [tasks, allTasks, kanbanColumns, groupBy, columnLookup, scheduleFilteredTaskIdSet, todayDateOnly, sortBy, sortOrder]);
+    }, [tasks, allTasks, effectiveKanbanColumns, groupBy, columnLookup, scheduleFilteredTaskIdSet, todayDateOnly, sortBy, sortOrder]);
     const activeTaskId = activeId ? getTaskIdFromCardId(activeId) : null;
     const activeTaskOverlay = activeTaskId ? tasks.find(t => t.id === activeTaskId) : null;
     // Scroll Syncing Refs and Logic
@@ -248,6 +327,8 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
     const lastReportedScrollLeftRef = useRef(-1);
     // Calculate total width for scroll syncing
     const getIsColumnHidden = (columnValue, title) => {
+        if (!filtersReady)
+            return false;
         if (groupBy === 'category')
             return !filterCategories.includes(String(columnValue));
         if (groupBy === 'type')
@@ -269,7 +350,7 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
         const COL_WIDTH = 320;
         const COL_COLLAPSED = 72;
         let width = 0;
-        kanbanColumns.forEach((col, index) => {
+        effectiveKanbanColumns.forEach((col, index) => {
             const items = groupedTasks[String(col.value)] || [];
             const isExplicitlyHidden = getIsColumnHidden(col.value, col.label);
             const isAutoHidden = groupBy !== 'schedule' && emptyColumnMode === 'hide' && items.length === 0;
@@ -280,7 +361,7 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
             width += GAP;
         });
         return width;
-    }, [kanbanColumns, groupedTasks, emptyColumnMode, groupBy, filterCategories, filterTypes, filterPriorities, filterStatus]);
+    }, [effectiveKanbanColumns, groupedTasks, emptyColumnMode, groupBy, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees, filtersReady]);
     const emitScrollLeft = useCallback((scrollLeft) => {
         if (!onScrollLeftChange)
             return;
@@ -353,7 +434,7 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
         return () => {
             window.removeEventListener('resize', updatePanAvailability);
         };
-    }, [totalWidth, kanbanColumns.length, groupedTasks]);
+    }, [totalWidth, effectiveKanbanColumns.length, groupedTasks]);
     useEffect(() => {
         const handlePointerMove = (event) => {
             const pan = panStateRef.current;
@@ -439,20 +520,12 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
                 void onAssignTaskToWorkstream?.(activeTaskDataId, overWorkstreamDataId);
                 return;
             }
-            if (overType === 'planning-task-unlink' && activeTaskDataId) {
-                void onAssignTaskToWorkstream?.(activeTaskDataId, null);
-                return;
-            }
         }
         if (activeType === 'planning-workstream') {
             if (overType === 'planning-initiative-target' && activeWorkstreamDataId && overInitiativeDataId) {
                 void onAssignWorkstreamToInitiative?.(activeWorkstreamDataId, overInitiativeDataId);
                 return;
             }
-            if (overType === 'planning-workstream-unlink' && activeWorkstreamDataId) {
-                void onAssignWorkstreamToInitiative?.(activeWorkstreamDataId, null);
-                return;
-            }
             return;
         }
         const activeId = String(active.id);
@@ -474,7 +547,7 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
             return;
         // Find the column definition
         const column = columnLookup.get(containerId)
-            || kanbanColumns.find(c => String(c.value) === containerId || c.label === containerId);
+            || effectiveKanbanColumns.find(c => String(c.value) === containerId || c.label === containerId);
         if (column) {
             if (groupBy === 'schedule') {
                 const targetColumn = String(column.value);
@@ -681,12 +754,12 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
     return (_jsxs(DndContext, { sensors: sensors, collisionDetection: customCollisionDetection, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: (event) => {
             lastPlanningOverRef.current = null;
             setActiveId(null);
-        }, children: [planningDropTargets, _jsxs("div", { className: styles.kanbanWrapper, children: [_jsx("div", { ref: topScrollRef, className: `${styles.kanbanTopScroll} tf-scrollbar`, children: _jsx("div", { className: styles.kanbanTopScrollSpacer, style: { width: `${totalWidth}px` } }) }), _jsx("div", { className: styles.kanbanContainer, ref: containerRef, children: kanbanColumns.map((column) => {
+        }, children: [planningDropTargets, _jsxs("div", { className: styles.kanbanWrapper, children: [_jsx("div", { ref: topScrollRef, className: `${styles.kanbanTopScroll} tf-scrollbar`, children: _jsx("div", { className: styles.kanbanTopScrollSpacer, style: { width: `${totalWidth}px` } }) }), _jsx("div", { className: styles.kanbanContainer, ref: containerRef, children: effectiveKanbanColumns.map((column) => {
                             const columnTasks = groupedTasks[String(column.value)] || [];
                             const isExplicitlyHidden = getIsColumnHidden(column.value, column.label);
                             const isAutoHidden = groupBy !== 'schedule' && emptyColumnMode === 'hide' && columnTasks.length === 0;
                             const isScheduleMode = groupBy === 'schedule';
-                            const hasBacklogColumn = isScheduleMode && kanbanColumns.some((entry) => String(entry.value) === 'backlog');
+                            const hasBacklogColumn = isScheduleMode && effectiveKanbanColumns.some((entry) => String(entry.value) === 'backlog');
                             const isBacklog = isScheduleMode && String(column.value) === 'backlog';
                             const isExpired = isScheduleMode && String(column.value) === 'expired';
                             const backlogTasks = groupedTasks.backlog || [];