@taskforcehq/taskforce 0.3.304 → 0.3.306

package/dist/components/task/TaskForm.js

@@ -1,42 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
-import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import * as Icons from 'lucide-react';
-import { HelpCircle, X, Send, Check, ChevronDown, ChevronRight, User, ClipboardList, Plus, Bot, GripVertical } from 'lucide-react';
-import styles from '../../Taskforce.module.css';
-import formStyles from './TaskForm.module.css';
-import { DEFAULT_CATEGORY_LABEL, DEFAULT_CATEGORY_VALUE } from '../../shared/taxonomyDefaults.js';
-import { LevelSelector } from '../ui/LevelSelector';
-import { TaxonomyDropdown } from '../ui/TaxonomyDropdown';
-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 { ensureAssigneeOptionPresent, getAssigneeKind, getAssigneeLabel, } from '../../utils/assignees';
-import { getTaskReferenceLabel } from '../../utils/taskReferences';
-import { getVisibleTaskFormTaxonomies } from '../../utils/taxonomyFormDefaults.js';
-import { getInitiativeReferenceLabel, getWorkstreamReferenceLabel } from '../../utils/planningReferences';
-function SortableChecklistRow({ id, item, onToggle, onRemove }) {
+import React from "react";
+import { DndContext, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import * as Icons from "lucide-react";
+import { HelpCircle, X, Send, Check, ChevronDown, ChevronRight, User, ClipboardList, Plus, Bot, GripVertical, } from "lucide-react";
+import styles from "../../Taskforce.module.css";
+import formStyles from "./TaskForm.module.css";
+import { DEFAULT_CATEGORY_LABEL, DEFAULT_CATEGORY_VALUE, } from "../../shared/taxonomyDefaults.js";
+import { LevelSelector } from "../ui/LevelSelector";
+import { TaxonomyDropdown } from "../ui/TaxonomyDropdown";
+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 { getTaskActivityItems, getTaskEventPrimaryChangeField, summarizeTaskChange, summarizeTaskEvent, } 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";
+function SortableChecklistRow({ id, item, onToggle, onRemove, }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id });
     const style = {
         transform: CSS.Transform.toString(transform),
         transition,
         opacity: isDragging ? 0.88 : 1,
     };
-    return (_jsxs("div", { ref: setNodeRef, style: style, className: `${formStyles.checklistRow} ${isDragging ? formStyles.checklistRowDragging : ''}`.trim(), children: [_jsx("button", { type: "button", className: formStyles.checklistHandleBtn, title: "Reorder checklist item", "aria-label": "Reorder checklist item", ...attributes, ...listeners, children: _jsx(GripVertical, { size: 14 }) }), _jsx("button", { type: "button", className: `${formStyles.checklistCheckboxBtn} ${item.isCompleted ? formStyles.checklistCheckboxBtnChecked : ''}`.trim(), onClick: onToggle, title: item.isCompleted ? 'Mark incomplete' : 'Mark complete', "aria-label": item.isCompleted ? '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 }) })] }));
+    return (_jsxs("div", { ref: setNodeRef, style: style, className: `${formStyles.checklistRow} ${isDragging ? formStyles.checklistRowDragging : ""}`.trim(), children: [_jsx("button", { type: "button", className: formStyles.checklistHandleBtn, title: "Reorder checklist item", "aria-label": "Reorder checklist item", ...attributes, ...listeners, children: _jsx(GripVertical, { size: 14 }) }), _jsx("button", { type: "button", className: `${formStyles.checklistCheckboxBtn} ${item.isCompleted ? formStyles.checklistCheckboxBtnChecked : ""}`.trim(), onClick: onToggle, title: item.isCompleted ? "Mark incomplete" : "Mark complete", "aria-label": item.isCompleted
+                    ? "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 "";
     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, showComments, 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 = () => { }, onShowCommentsChange, onSubmit, onAddComment, onAddContextFile, onRemoveContextFile, onUpdateContextCaption, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onOpenTaskById, currentTask, commentsEndRef, } = 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);
     const visibleTaxonomies = React.useMemo(() => getVisibleTaskFormTaxonomies(taxonomies, formTaxonomies), [taxonomies, formTaxonomies]);
     const categoryOptions = React.useMemo(() => {
@@ -44,40 +46,40 @@ export function TaskForm(props) {
         const defaultOption = {
             value: DEFAULT_CATEGORY_VALUE,
             label: configuredDefault?.label || DEFAULT_CATEGORY_LABEL,
-            icon: configuredDefault?.icon || 'HelpCircle',
-            color: configuredDefault?.color || 'var(--text-secondary)'
+            icon: configuredDefault?.icon || "HelpCircle",
+            color: configuredDefault?.color || "var(--text-secondary)",
         };
         const selectedCategory = categories.find((cat) => cat.value === category);
         const availableCategories = categories.filter((cat) => !cat.disabled || cat.value === selectedCategory?.value);
         const nonDefault = availableCategories
-            .filter(cat => cat.value !== DEFAULT_CATEGORY_VALUE)
-            .map(cat => ({
+            .filter((cat) => cat.value !== DEFAULT_CATEGORY_VALUE)
+            .map((cat) => ({
             value: cat.value,
             label: cat.disabled ? `${cat.label} (Legacy)` : cat.label,
             icon: cat.icon,
-            color: cat.color
+            color: cat.color,
         }));
         return [defaultOption, ...nonDefault];
     }, [categories, category]);
     const typeOptions = React.useMemo(() => {
         const selectedType = types.find((entry) => entry.value === type);
-        const availableTypes = types.filter((entry) => entry.status !== 'retired' || entry.value === selectedType?.value);
+        const availableTypes = types.filter((entry) => entry.status !== "retired" || entry.value === selectedType?.value);
         return availableTypes.map((entry) => ({
             value: entry.value,
-            label: entry.status === 'retired' ? `${entry.label} (Retired)` : entry.label,
-            icon: entry.icon || 'Box',
-            color: entry.color || 'violet-500'
+            label: entry.status === "retired" ? `${entry.label} (Retired)` : entry.label,
+            icon: entry.icon || "Box",
+            color: entry.color || "violet-500",
         }));
     }, [types, type]);
     const formatMetaDate = (value) => {
         if (!value)
             return null;
         const formatted = formatDate(value, {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
         });
         return formatted || null;
     };
@@ -87,29 +89,32 @@ export function TaskForm(props) {
     const todayDateOnly = React.useMemo(() => {
         const now = new Date();
         const y = now.getFullYear();
-        const m = String(now.getMonth() + 1).padStart(2, '0');
-        const d = String(now.getDate()).padStart(2, '0');
+        const m = String(now.getMonth() + 1).padStart(2, "0");
+        const d = String(now.getDate()).padStart(2, "0");
         return `${y}-${m}-${d}`;
     }, []);
     const dueBeforeScheduledWarning = Boolean(dueDate && scheduledDate && dueDate < scheduledDate);
     const overdueWarning = Boolean(dueDate &&
         dueDate < todayDateOnly &&
-        (!currentTask || (currentTask.status !== 'done' && currentTask.status !== 'cancelled')));
-    const completedChecklistCount = checklistItems.filter(item => item.isCompleted).length;
-    const [newChecklistItemText, setNewChecklistItemText] = React.useState('');
+        (!currentTask ||
+            (currentTask.status !== "done" && currentTask.status !== "cancelled")));
+    const completedChecklistCount = checklistItems.filter((item) => item.isCompleted).length;
+    const [newChecklistItemText, setNewChecklistItemText] = React.useState("");
     const [manualWorkstreamEntry, setManualWorkstreamEntry] = React.useState(false);
     const isArchivedReadOnly = Boolean(currentTask?.isArchived);
     const isDeletedReadOnly = Boolean(currentTask?.isDeleted);
-    const workstreamOptions = React.useMemo(() => (workstreams.map((workstream) => {
+    const workstreamOptions = React.useMemo(() => workstreams.map((workstream) => {
         const reference = getWorkstreamReferenceLabel(workstream);
         return {
             value: reference || workstream.id,
-            label: reference ? `${reference} · ${workstream.title}` : workstream.title,
-            icon: 'Folder',
-            color: 'var(--text-secondary)',
+            label: reference
+                ? `${reference} · ${workstream.title}`
+                : workstream.title,
+            icon: "Folder",
+            color: "var(--text-secondary)",
         };
-    })), [workstreams]);
-    const hasMatchingWorkstreamSelection = React.useMemo(() => (workstreamOptions.some((option) => String(option.value) === String(workstreamInput || '').trim())), [workstreamInput, workstreamOptions]);
+    }), [workstreams]);
+    const hasMatchingWorkstreamSelection = React.useMemo(() => workstreamOptions.some((option) => String(option.value) === String(workstreamInput || "").trim()), [workstreamInput, workstreamOptions]);
     React.useEffect(() => {
         if (editingTaskId) {
             if (manualWorkstreamEntry)
@@ -126,7 +131,12 @@ export function TaskForm(props) {
         if (!hasMatchingWorkstreamSelection && !manualWorkstreamEntry) {
             setManualWorkstreamEntry(true);
         }
-    }, [editingTaskId, hasMatchingWorkstreamSelection, manualWorkstreamEntry, workstreamInput]);
+    }, [
+        editingTaskId,
+        hasMatchingWorkstreamSelection,
+        manualWorkstreamEntry,
+        workstreamInput,
+    ]);
     const isReadOnly = isArchivedReadOnly || isDeletedReadOnly;
     const formRef = React.useRef(null);
     const checklistSensors = useSensors(useSensor(PointerSensor, {
@@ -140,8 +150,8 @@ export function TaskForm(props) {
             form.scrollTop = 0;
             const container = form.parentElement;
             if (container) {
-                if (typeof container.scrollTo === 'function') {
-                    container.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+                if (typeof container.scrollTo === "function") {
+                    container.scrollTo({ top: 0, left: 0, behavior: "auto" });
                 }
                 else {
                     container.scrollTop = 0;
@@ -161,7 +171,7 @@ export function TaskForm(props) {
             ...checklistItems,
             {
                 id: `checklist-draft-${now}-${checklistItems.length}`,
-                taskId: editingTaskId || '',
+                taskId: editingTaskId || "",
                 title: text,
                 isCompleted: false,
                 order: checklistItems.length,
@@ -169,7 +179,7 @@ export function TaskForm(props) {
                 updatedAt: now,
             },
         ]);
-        setNewChecklistItemText('');
+        setNewChecklistItemText("");
     };
     const handleChecklistReorder = React.useCallback((event) => {
         const { active, over } = event;
@@ -188,25 +198,27 @@ export function TaskForm(props) {
         onChecklistItemsChange(reordered);
     }, [checklistItems, onChecklistItemsChange]);
     const formatAiAuthorLabel = (author) => {
-        const raw = String(author || '').trim();
+        const raw = String(author || "").trim();
         const cleaned = author
             .trim()
-            .replace(/^ai-profile-/i, '')
-            .replace(/[-_]+/g, ' ')
-            .replace(/\s+/g, ' ');
-        if (!cleaned || cleaned === 'ai' || raw.toLowerCase().startsWith('ai-profile-'))
-            return 'AI Agent';
+            .replace(/^ai-profile-/i, "")
+            .replace(/[-_]+/g, " ")
+            .replace(/\s+/g, " ");
+        if (!cleaned ||
+            cleaned === "ai" ||
+            raw.toLowerCase().startsWith("ai-profile-"))
+            return "AI Agent";
         const label = cleaned
-            .split(' ')
+            .split(" ")
             .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-            .join(' ');
+            .join(" ");
         return `AI Agent - ${label}`;
     };
     const resolvedAssigneeOptions = ensureAssigneeOptionPresent(assigneeOptions, assignee);
     const currentAssigneeKind = getAssigneeKind(assignee);
     const currentAssigneeLabel = getAssigneeLabel(assignee, resolvedAssigneeOptions);
     const actorOptionByValue = React.useMemo(() => new Map(resolvedAssigneeOptions.map((option) => [String(option.value), option])), [resolvedAssigneeOptions]);
-    const currentAssigneeOption = actorOptionByValue.get(String(assignee || 'unassigned'));
+    const currentAssigneeOption = actorOptionByValue.get(String(assignee || "unassigned"));
     const currentAssigneeColor = currentTask?.assigneeActor?.color || currentAssigneeOption?.color;
     const actorFallbackById = React.useMemo(() => {
         const entries = [
@@ -223,28 +235,18 @@ 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();
+        const normalizedValue = String(value || "").trim();
         if (!normalizedValue)
             return undefined;
-        if (field === 'assignee') {
+        if (field === "assignee") {
             return getAssigneeLabel(normalizedValue, resolvedAssigneeOptions);
         }
-        if (field === 'workstreamId') {
+        if (field === "workstreamId") {
             return workstreamLabelById.get(normalizedValue);
         }
-        if (field === 'initiativeId') {
+        if (field === "initiativeId") {
             return initiativeLabelById.get(normalizedValue);
         }
         return undefined;
@@ -252,26 +254,81 @@ export function TaskForm(props) {
     const resolveActorLabel = React.useCallback((actorId, actorType, actorLabel) => {
         if (actorLabel && actorLabel.trim())
             return actorLabel.trim();
-        const raw = String(actorId || '').trim();
+        const raw = String(actorId || "").trim();
         if (!raw)
-            return actorType === 'ai' ? 'AI Agent' : t('taskForm.you');
+            return actorType === "ai" ? "AI Agent" : t("taskForm.you");
         const fallback = actorFallbackById.get(raw);
         if (fallback?.label)
             return fallback.label;
-        const option = actorOptionByValue.get(raw) || actorOptionByValue.get(raw.toLowerCase());
+        const option = actorOptionByValue.get(raw) ||
+            actorOptionByValue.get(raw.toLowerCase());
         if (option?.label)
             return option.label;
-        if (actorType === 'ai')
+        if (actorType === "ai")
             return formatAiAuthorLabel(raw);
         return getAssigneeLabel(raw, resolvedAssigneeOptions) || raw;
-    }, [actorFallbackById, actorOptionByValue, formatAiAuthorLabel, resolvedAssigneeOptions]);
+    }, [
+        actorFallbackById,
+        actorOptionByValue,
+        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') {
+        if (latestItem.type === "comment") {
             const comment = latestItem.comment;
-            return resolveActorLabel(comment.author, comment.actor?.kind === 'ai' ? 'ai' : comment.actor?.kind === 'human' ? 'human' : null, comment.actor?.label || null);
+            return resolveActorLabel(comment.author, comment.actor?.kind === "ai"
+                ? "ai"
+                : comment.actor?.kind === "human"
+                    ? "human"
+                    : null, comment.actor?.label || null);
         }
         const event = latestItem.event;
         return resolveActorLabel(event.actor, event.actorType, event.actorProfile?.label || null);
@@ -281,158 +338,233 @@ export function TaskForm(props) {
         if (!completedAt)
             return null;
         for (const item of taskActivityItems) {
-            if (item.type !== 'event')
+            if (item.type !== "event")
                 continue;
             const event = item.event;
             const nextStatus = event.details?.changes?.status?.to;
-            if (nextStatus === 'done' || nextStatus === 'cancelled') {
+            if (nextStatus === "done" || nextStatus === "cancelled") {
                 return resolveActorLabel(event.actor, event.actorType, event.actorProfile?.label || null);
             }
         }
         return latestActivityActorLabel;
-    }, [currentTask?.completedAt, latestActivityActorLabel, resolveActorLabel, taskActivityItems]);
-    const createdByLabel = currentTask?.createdByActor?.label
-        || resolveActorLabel(currentTask?.createdBy || null, currentTask?.createdByActor?.kind === 'ai' ? 'ai' : currentTask?.createdByActor?.kind === 'human' ? 'human' : null, currentTask?.createdByActor?.label || null);
+    }, [
+        currentTask?.completedAt,
+        latestActivityActorLabel,
+        resolveActorLabel,
+        taskActivityItems,
+    ]);
+    const createdByLabel = currentTask?.createdByActor?.label ||
+        resolveActorLabel(currentTask?.createdBy || null, currentTask?.createdByActor?.kind === "ai"
+            ? "ai"
+            : currentTask?.createdByActor?.kind === "human"
+                ? "human"
+                : null, currentTask?.createdByActor?.label || null);
     const updatedByLabel = latestActivityActorLabel;
     const activityCount = taskActivityItems.length;
+    React.useLayoutEffect(() => {
+        if (!editingTaskId)
+            return;
+        const endNode = commentsEndRef.current;
+        if (!endNode)
+            return;
+        const thread = endNode.parentElement;
+        const scrollToLatest = () => {
+            if (typeof endNode.scrollIntoView === "function") {
+                endNode.scrollIntoView({ block: "end" });
+                return;
+            }
+            if (thread) {
+                thread.scrollTop = thread.scrollHeight;
+            }
+        };
+        scrollToLatest();
+        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 actorPresentation = resolveActivityActorPresentation({
+                                        actorId: c.author,
+                                        actorType: c.actor?.kind === "ai"
+                                            ? "ai"
+                                            : c.actor?.kind === "human"
+                                                ? "human"
+                                                : null,
+                                        actorProfile: c.actor,
+                                    });
+                                    const commentKind = actorPresentation.kind === "agent" ? "agent" : "member";
+                                    const { ActorIcon: CommentActorIcon } = actorPresentation;
+                                    const authorColor = actorPresentation.color;
+                                    const authorLabel = actorPresentation.label;
+                                    const commentAccentStyle = authorColor && hexToRgba(authorColor, 0.35)
+                                        ? {
+                                            background: `linear-gradient(135deg, ${hexToRgba(authorColor, 0.18)} 0%, ${hexToRgba(authorColor, 0.1)} 100%)`,
+                                            borderColor: hexToRgba(authorColor, 0.35),
+                                        }
+                                        : undefined;
+                                    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: commentAccentStyle, children: _jsx(Markdown, { onTaskIdClick: onOpenTaskById, children: c.text }) })] }, c.id));
+                                }
+                                const event = item.event;
+                                const actorPresentation = resolveActivityActorPresentation({
+                                    actorId: event.actor,
+                                    actorType: event.actorType,
+                                    actorProfile: event.actorProfile,
+                                    fallbackKind: "system",
+                                });
+                                const { ActorIcon: EventActorIcon } = actorPresentation;
+                                const authorColor = actorPresentation.color;
+                                const authorLabel = actorPresentation.label;
+                                const eventKind = actorPresentation.kind;
+                                const changeEntries = Object.entries(event.details?.changes || {});
+                                const primaryChangeField = getTaskEventPrimaryChangeField(event);
+                                const displayedChangeEntries = changeEntries.length > 1 && primaryChangeField
+                                    ? changeEntries.filter(([field]) => field !== primaryChangeField)
+                                    : changeEntries.length > 1
+                                        ? changeEntries
+                                        : [];
+                                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) }), displayedChangeEntries.length > 0 && (_jsx("div", { className: formStyles.activityEventChanges, children: displayedChangeEntries.map(([field, change]) => (_jsx("div", { 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) => {
+                                    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;
     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, 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: [
-                                            formStyles.assigneeIndicator,
-                                            currentAssigneeKind === 'agent'
-                                                ? formStyles.assigneeIndicatorAgent
-                                                : currentAssigneeKind === 'member'
-                                                    ? formStyles.assigneeIndicatorUser
-                                                    : formStyles.assigneeIndicatorUnassigned
-                                        ].join(' '), style: currentAssigneeColor ? { color: currentAssigneeColor } : undefined, children: currentAssigneeKind === 'agent'
-                                            ? _jsx(Bot, { size: 20 })
-                                            : currentAssigneeKind === 'member'
-                                                ? _jsx(User, { size: 20 })
-                                                : _jsx(HelpCircle, { size: 20 }) }))] }), _jsx("input", { type: "text", value: title, onChange: (e) => onTitleChange(e.target.value), placeholder: "What needs to be done?", className: styles.input, required: true, maxLength: 255, autoFocus: true })] }), _jsxs("div", { className: styles.field, children: [_jsxs("div", { className: styles.labelRow, children: [_jsx("label", { className: styles.label, children: "Description" }), _jsx("button", { type: "button", className: styles.helpLink, onClick: () => onShowMarkdownHelpChange(!showMarkdownHelp), title: "Markdown Help", tabIndex: -1, children: _jsx(HelpCircle, { size: 14 }) })] }), showMarkdownHelp && (_jsxs("div", { className: formStyles.markdownHelp, children: [_jsxs("div", { className: formStyles.helpHeader, children: [_jsx("span", { children: "Markdown Guide" }), _jsx("button", { onClick: () => onShowMarkdownHelpChange(false), className: formStyles.helpClose, children: _jsx(X, { size: 12 }) })] }), _jsxs("div", { className: formStyles.helpGrid, children: [_jsx("div", { children: _jsx("code", { children: "**bold**" }) }), _jsx("div", { children: _jsx("code", { children: "_italic_" }) }), _jsx("div", { children: _jsx("code", { children: "- list" }) }), _jsx("div", { children: _jsx("code", { children: "1. list" }) }), _jsx("div", { className: formStyles.helpGridItem, children: _jsx("code", { children: "`inline code`" }) }), _jsxs("div", { className: formStyles.helpGridItem, children: [_jsx("code", { children: "```" }), _jsx("br", {}), _jsx("code", { children: "code block" }), _jsx("br", {}), _jsx("code", { children: "```" })] }), _jsx("div", { children: _jsx("code", { children: "[link](url)" }) })] })] })), descriptionFocused || !description ? (_jsx("textarea", { className: `${styles.textarea} ${formStyles.descriptionSurface}`, placeholder: "What needs to be done? (Markdown supported)", value: description, onChange: (e) => onDescriptionChange(e.target.value), onFocus: () => onDescriptionFocusedChange(true), onBlur: () => onDescriptionFocusedChange(false), rows: 9, autoFocus: descriptionFocused })) : (_jsx("div", { className: `${styles.textarea} ${formStyles.descriptionSurface} ${formStyles.markdownPreview} ${formStyles.markdownPreviewContainer}`, onClick: () => onDescriptionFocusedChange(true), children: _jsx(Markdown, { onTaskIdClick: onOpenTaskById, children: description }) }))] }), _jsxs("div", { className: formStyles.compactMetaSection, children: [_jsxs("div", { className: formStyles.compactMetaGrid, children: [_jsxs("div", { className: `${styles.field} ${formStyles.compactMetaField}`, children: [_jsx("label", { id: "category-label", className: styles.label, children: taxonomyDisplayLabels?.category || 'Category' }), _jsx(TaxonomyDropdown, { value: category, options: categoryOptions, onChange: (value) => onCategoryChange(String(value)), required: true, ariaLabelledBy: "category-label" })] }), _jsxs("div", { className: `${styles.field} ${formStyles.compactMetaField}`, children: [_jsx("label", { id: "type-label", className: styles.label, children: taxonomyDisplayLabels?.type || 'Type' }), _jsx(TaxonomyDropdown, { value: type, options: typeOptions, onChange: (value) => onTypeChange(String(value)), ariaLabelledBy: "type-label" })] }), _jsxs("div", { className: `${styles.field} ${formStyles.compactMetaField}`, children: [_jsx("label", { htmlFor: "task-form-scheduled-date", className: styles.label, children: t('taskForm.scheduledLabel') }), _jsx("input", { id: "task-form-scheduled-date", type: "date", value: scheduledDate, onChange: (e) => onScheduledDateChange(e.target.value), className: `${styles.input} ${styles.taskFormDateInput}` })] }), _jsx("div", { className: formStyles.compactMetaSpacer, "aria-hidden": "true" }), _jsxs("div", { className: `${styles.field} ${formStyles.compactMetaField}`, children: [_jsx("label", { id: "assignee-label", className: styles.label, children: "Assigned To" }), _jsx(TaxonomyDropdown, { value: assignee || 'unassigned', options: resolvedAssigneeOptions, onChange: (value) => onAssigneeChange(String(value)), ariaLabelledBy: "assignee-label" })] }), _jsx("div", { className: formStyles.compactMetaField, children: _jsx(LevelSelector, { label: taxonomyDisplayLabels?.priority || 'Priority', options: priorities, value: priority, onChange: onPriorityChange, type: "priority", showSelectedLabel: false }) }), _jsxs("div", { className: `${styles.field} ${formStyles.compactMetaField}`, children: [_jsx("label", { htmlFor: "task-form-due-date", className: styles.label, children: t('taskForm.dueLabel') }), _jsx("input", { id: "task-form-due-date", type: "date", value: dueDate, onChange: (e) => onDueDateChange(e.target.value), className: `${styles.input} ${styles.taskFormDateInput}` }), dueBeforeScheduledWarning && (_jsx("span", { className: `${formStyles.taskFormDateWarning} ${formStyles.compactMetaFieldHint}`, children: t('taskForm.dueBeforeScheduled') })), overdueWarning && (_jsx("span", { className: `${formStyles.taskFormDateError} ${formStyles.compactMetaFieldHint}`, children: t('taskForm.overdue') }))] }), manualComplexityEnabled && (_jsx("div", { className: formStyles.compactMetaField, children: _jsx(LevelSelector, { label: "Complexity", options: [
-                                                { value: 1, label: 'Tiny', color: '#10b981', icon: 'Gauge' },
-                                                { value: 2, label: 'Low', color: '#14b8a6', icon: 'Gauge' },
-                                                { value: 3, label: 'Medium', color: '#3b82f6', icon: 'Gauge' },
-                                                { value: 4, label: 'High', color: '#8b5cf6', icon: 'Gauge' },
-                                                { value: 5, label: 'Epic', color: '#d946ef', icon: 'Gauge' },
-                                            ], value: complexity, onChange: onComplexityChange, type: "general" }) }))] }), !editingTaskId && (_jsxs("div", { className: formStyles.createWorkstreamRow, children: [_jsx("label", { className: styles.label, children: "Attach to workstream" }), _jsxs("div", { className: styles.pathInputGroup, children: [manualWorkstreamEntry ? (_jsx("input", { type: "text", className: styles.input, value: workstreamInput, onChange: (e) => onWorkstreamInputChange(e.target.value), placeholder: "Type a workstream name or reference", "aria-label": "Attach to workstream" })) : (_jsx(TaxonomyDropdown, { value: workstreamInput, options: workstreamOptions, onChange: (value) => onWorkstreamInputChange(String(value)), placeholder: "Select workstream...", ariaLabel: "Attach to workstream", className: formStyles.createWorkstreamDropdown })), _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => {
-                                                    if (manualWorkstreamEntry) {
-                                                        setManualWorkstreamEntry(false);
-                                                        if (!hasMatchingWorkstreamSelection) {
-                                                            onWorkstreamInputChange('');
-                                                        }
-                                                        return;
-                                                    }
-                                                    setManualWorkstreamEntry(true);
-                                                }, "aria-label": manualWorkstreamEntry ? 'Use workstream dropdown' : 'Enter workstream by name', title: manualWorkstreamEntry ? 'Use workstream dropdown' : 'Enter workstream by name', children: _jsx(Plus, { size: 14 }) })] })] }))] }), _jsxs("div", { className: formStyles.sectionBlock, children: [_jsx("div", { className: formStyles.taxonomyFieldsGrid, children: visibleTaxonomies.map(tax => {
-                                    if (tax.id === 'approach' && tax.isSystem)
-                                        return null; // Workflow stays hidden until the dedicated refactor lands.
-                                    const selectedRawValue = formTaxonomies[tax.id];
-                                    const selectedValues = Array.isArray(selectedRawValue)
-                                        ? selectedRawValue.map((value) => String(value))
-                                        : (selectedRawValue !== undefined && selectedRawValue !== null && selectedRawValue !== ''
-                                            ? [String(selectedRawValue)]
-                                            : []);
-                                    const selectableOptions = tax.options.filter((option) => (option.status !== 'retired' || selectedValues.includes(String(option.value))));
-                                    return (_jsxs("div", { className: styles.field, children: [_jsx("label", { className: styles.label, children: tax.label }), tax.description && (_jsx("div", { className: `${formStyles.settingsHint} tf-text-helper`, children: tax.description })), tax.widgetType === 'level' ? (_jsx(LevelSelector, { label: tax.label, options: selectableOptions.map((option) => ({
-                                                    ...option,
-                                                    label: option.status === 'retired' ? `${option.label} (Retired)` : option.label
-                                                })), value: formTaxonomies[tax.id] || '', onChange: (val) => onTaxonomyChange(tax.id, val), type: "general", hideLabel: true })) : (tax.multiSelect ? (_jsx("div", { className: `${styles.dropdownList} ${formStyles.softSectionSurface}`, children: selectableOptions.map((opt) => {
-                                                    const optionValue = String(opt.value);
-                                                    const isSelected = selectedValues.includes(optionValue);
-                                                    return (_jsxs("button", { type: "button", className: `${formStyles.specialistChip} ${isSelected ? formStyles.specialistChipActive : ''}`, onClick: () => {
-                                                            const nextValues = isSelected
-                                                                ? selectedValues.filter((value) => value !== optionValue)
-                                                                : [...selectedValues, optionValue];
-                                                            onTaxonomyChange(tax.id, nextValues);
-                                                        }, title: isSelected ? 'Click to remove' : 'Click to add', children: [isSelected && _jsx(Check, { size: 12 }), opt.status === 'retired' ? `${opt.label} (Retired)` : opt.label] }, optionValue));
-                                                }) })) : (_jsxs("div", { className: styles.fieldIconWrapper, style: {
-                                                    '--field-color': 'var(--text-primary)',
-                                                    '--field-border': 'rgba(255, 255, 255, 0.1)',
-                                                    '--field-bg': 'rgba(255, 255, 255, 0.02)'
-                                                }, children: [(() => {
-                                                        const selectedOption = tax.options.find(o => String(o.value) === String(formTaxonomies[tax.id]));
-                                                        const IconComp = selectedOption?.icon && Icons[selectedOption.icon] ? Icons[selectedOption.icon] : HelpCircle;
-                                                        const color = selectedOption?.color || 'var(--text-secondary)';
-                                                        return (_jsx("div", { className: styles.fieldIcon, style: { color: resolveColor(color) }, children: _jsx(IconComp, { size: 16 }) }));
-                                                    })(), _jsxs("select", { value: formTaxonomies[tax.id] || '', onChange: (e) => onTaxonomyChange(tax.id, e.target.value), className: `${styles.select} ${styles.field_dynamic}`, required: tax.isRequired, children: [_jsxs("option", { value: "", children: ["Select ", tax.label, "..."] }), selectableOptions.map(opt => (_jsx("option", { value: opt.value, children: opt.status === 'retired' ? `${opt.label} (Retired)` : opt.label }, opt.value)))] })] })))] }, tax.id));
-                                }) }), checklistEnabled && (_jsxs("div", { className: styles.specialistSection, children: [_jsxs("div", { className: styles.toggleHeading, onClick: () => onShowChecklistChange(!showChecklist), title: showChecklist ? 'Hide checklist' : 'Show checklist', children: [_jsxs("label", { className: styles.label, children: ["Checklist ", checklistItems.length > 0 && `(${completedChecklistCount}/${checklistItems.length})`] }), showChecklist ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 })] }), showChecklist && (_jsxs("div", { className: `${styles.dropdownList} ${formStyles.stackedList} ${formStyles.stackedListSpaced}`, children: [_jsxs("div", { className: styles.pathInputGroup, children: [_jsx("input", { type: "text", className: styles.input, placeholder: "Add checklist item", value: newChecklistItemText, onChange: (e) => setNewChecklistItemText(e.target.value), onKeyDown: (e) => {
-                                                            if (e.key === 'Enter') {
-                                                                e.preventDefault();
-                                                                handleAddChecklistItem();
-                                                            }
-                                                        } }), _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: handleAddChecklistItem, disabled: !newChecklistItemText.trim(), children: "Add" })] }), checklistItems.length > 0 ? (_jsx(DndContext, { sensors: checklistSensors, collisionDetection: closestCenter, onDragEnd: handleChecklistReorder, children: _jsx(SortableContext, { items: checklistItems.map((item) => item.id), strategy: verticalListSortingStrategy, children: checklistItems.map((item, index) => (_jsx(SortableChecklistRow, { id: item.id || `checklist-${index}`, item: item, onToggle: () => {
-                                                            const now = new Date().toISOString();
-                                                            onChecklistItemsChange(checklistItems.map((entry, entryIndex) => entryIndex === index
-                                                                ? { ...entry, isCompleted: !entry.isCompleted, updatedAt: now }
-                                                                : entry));
-                                                        }, onRemove: () => onChecklistItemsChange(checklistItems
-                                                            .filter((_, entryIndex) => entryIndex !== index)
-                                                            .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 }), editingTaskId && (_jsxs("div", { className: styles.specialistSection, children: [_jsxs("div", { className: styles.toggleHeading, onClick: () => onShowCommentsChange(!showComments), title: showComments ? t('taskForm.hideComments') : t('taskForm.showComments'), children: [_jsxs("label", { className: styles.label, children: [t('taskForm.commentsSectionTitle'), " ", activityCount > 0 && `(${activityCount})`] }), showComments ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 })] }), showComments && (_jsxs("div", { className: formStyles.commentPanel, 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.10)} 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) => {
-                                                            if (e.key === 'Enter' && !e.shiftKey) {
-                                                                e.preventDefault();
-                                                                onAddComment();
+                    ? "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: [
+                                                    formStyles.assigneeIndicator,
+                                                    currentAssigneeKind === "agent"
+                                                        ? formStyles.assigneeIndicatorAgent
+                                                        : currentAssigneeKind === "member"
+                                                            ? formStyles.assigneeIndicatorUser
+                                                            : formStyles.assigneeIndicatorUnassigned,
+                                                ].join(" "), style: currentAssigneeColor
+                                                    ? { color: currentAssigneeColor }
+                                                    : undefined, children: currentAssigneeKind === "agent" ? (_jsx(Bot, { size: 20 })) : currentAssigneeKind === "member" ? (_jsx(User, { size: 20 })) : (_jsx(HelpCircle, { size: 20 })) }))] }), _jsx("input", { type: "text", value: title, onChange: (e) => onTitleChange(e.target.value), placeholder: "What needs to be done?", className: styles.input, required: true, maxLength: 255, autoFocus: true })] }), _jsxs("div", { className: styles.field, children: [_jsxs("div", { className: styles.labelRow, children: [_jsx("label", { className: styles.label, children: "Description" }), _jsx("button", { type: "button", className: styles.helpLink, onClick: () => onShowMarkdownHelpChange(!showMarkdownHelp), title: "Markdown Help", tabIndex: -1, children: _jsx(HelpCircle, { size: 14 }) })] }), showMarkdownHelp && (_jsxs("div", { className: formStyles.markdownHelp, children: [_jsxs("div", { className: formStyles.helpHeader, children: [_jsx("span", { children: "Markdown Guide" }), _jsx("button", { onClick: () => onShowMarkdownHelpChange(false), className: formStyles.helpClose, children: _jsx(X, { size: 12 }) })] }), _jsxs("div", { className: formStyles.helpGrid, children: [_jsx("div", { children: _jsx("code", { children: "**bold**" }) }), _jsx("div", { children: _jsx("code", { children: "_italic_" }) }), _jsx("div", { children: _jsx("code", { children: "- list" }) }), _jsx("div", { children: _jsx("code", { children: "1. list" }) }), _jsx("div", { className: formStyles.helpGridItem, children: _jsx("code", { children: "`inline code`" }) }), _jsxs("div", { className: formStyles.helpGridItem, children: [_jsx("code", { children: "```" }), _jsx("br", {}), _jsx("code", { children: "code block" }), _jsx("br", {}), _jsx("code", { children: "```" })] }), _jsx("div", { children: _jsx("code", { children: "[link](url)" }) })] })] })), descriptionFocused || !description ? (_jsx("textarea", { className: `${styles.textarea} ${formStyles.descriptionSurface}`, placeholder: "What needs to be done? (Markdown supported)", value: description, onChange: (e) => onDescriptionChange(e.target.value), onFocus: () => onDescriptionFocusedChange(true), onBlur: () => onDescriptionFocusedChange(false), rows: 9, autoFocus: descriptionFocused })) : (_jsx("div", { className: `${styles.textarea} ${formStyles.descriptionSurface} ${formStyles.markdownPreview} ${formStyles.markdownPreviewContainer}`, onClick: () => onDescriptionFocusedChange(true), children: _jsx(Markdown, { onTaskIdClick: onOpenTaskById, children: description }) }))] }), _jsxs("div", { className: formStyles.compactMetaSection, children: [_jsxs("div", { className: formStyles.compactMetaGrid, children: [_jsxs("div", { className: `${styles.field} ${formStyles.compactMetaField}`, children: [_jsx("label", { id: "category-label", className: styles.label, children: taxonomyDisplayLabels?.category || "Category" }), _jsx(TaxonomyDropdown, { value: category, options: categoryOptions, onChange: (value) => onCategoryChange(String(value)), required: true, ariaLabelledBy: "category-label" })] }), _jsxs("div", { className: `${styles.field} ${formStyles.compactMetaField}`, children: [_jsx("label", { id: "type-label", className: styles.label, children: taxonomyDisplayLabels?.type || "Type" }), _jsx(TaxonomyDropdown, { value: type, options: typeOptions, onChange: (value) => onTypeChange(String(value)), ariaLabelledBy: "type-label" })] }), _jsxs("div", { className: `${styles.field} ${formStyles.compactMetaField}`, children: [_jsx("label", { htmlFor: "task-form-scheduled-date", className: styles.label, children: t("taskForm.scheduledLabel") }), _jsx("input", { id: "task-form-scheduled-date", type: "date", value: scheduledDate, onChange: (e) => onScheduledDateChange(e.target.value), className: `${styles.input} ${styles.taskFormDateInput}` })] }), _jsxs("div", { className: `${styles.field} ${formStyles.compactMetaField}`, children: [_jsx("label", { id: "assignee-label", className: styles.label, children: "Assigned To" }), _jsx(TaxonomyDropdown, { value: assignee || "unassigned", options: resolvedAssigneeOptions, onChange: (value) => onAssigneeChange(String(value)), ariaLabelledBy: "assignee-label" })] }), _jsx("div", { className: formStyles.compactMetaField, children: _jsx(LevelSelector, { label: taxonomyDisplayLabels?.priority || "Priority", options: priorities, value: priority, onChange: onPriorityChange, type: "priority", showSelectedLabel: false }) }), _jsxs("div", { className: `${styles.field} ${formStyles.compactMetaField}`, children: [_jsx("label", { htmlFor: "task-form-due-date", className: styles.label, children: t("taskForm.dueLabel") }), _jsx("input", { id: "task-form-due-date", type: "date", value: dueDate, onChange: (e) => onDueDateChange(e.target.value), className: `${styles.input} ${styles.taskFormDateInput}` }), dueBeforeScheduledWarning && (_jsx("span", { className: `${formStyles.taskFormDateWarning} ${formStyles.compactMetaFieldHint}`, children: t("taskForm.dueBeforeScheduled") })), overdueWarning && (_jsx("span", { className: `${formStyles.taskFormDateError} ${formStyles.compactMetaFieldHint}`, children: t("taskForm.overdue") }))] }), manualComplexityEnabled && (_jsx("div", { className: formStyles.compactMetaField, children: _jsx(LevelSelector, { label: "Complexity", options: [
+                                                        {
+                                                            value: 1,
+                                                            label: "Tiny",
+                                                            color: "#10b981",
+                                                            icon: "Gauge",
+                                                        },
+                                                        {
+                                                            value: 2,
+                                                            label: "Low",
+                                                            color: "#14b8a6",
+                                                            icon: "Gauge",
+                                                        },
+                                                        {
+                                                            value: 3,
+                                                            label: "Medium",
+                                                            color: "#3b82f6",
+                                                            icon: "Gauge",
+                                                        },
+                                                        {
+                                                            value: 4,
+                                                            label: "High",
+                                                            color: "#8b5cf6",
+                                                            icon: "Gauge",
+                                                        },
+                                                        {
+                                                            value: 5,
+                                                            label: "Epic",
+                                                            color: "#d946ef",
+                                                            icon: "Gauge",
+                                                        },
+                                                    ], value: complexity, onChange: onComplexityChange, type: "general" }) }))] }), !editingTaskId && (_jsxs("div", { className: formStyles.createWorkstreamRow, children: [_jsx("label", { className: styles.label, children: "Attach to workstream" }), _jsxs("div", { className: styles.pathInputGroup, children: [manualWorkstreamEntry ? (_jsx("input", { type: "text", className: styles.input, value: workstreamInput, onChange: (e) => onWorkstreamInputChange(e.target.value), placeholder: "Type a workstream name or reference", "aria-label": "Attach to workstream" })) : (_jsx(TaxonomyDropdown, { value: workstreamInput, options: workstreamOptions, onChange: (value) => onWorkstreamInputChange(String(value)), placeholder: "Select workstream...", ariaLabel: "Attach to workstream", className: formStyles.createWorkstreamDropdown })), _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => {
+                                                            if (manualWorkstreamEntry) {
+                                                                setManualWorkstreamEntry(false);
+                                                                if (!hasMatchingWorkstreamSelection) {
+                                                                    onWorkstreamInputChange("");
+                                                                }
+                                                                return;
                                                             }
-                                                        }, rows: 1 }), _jsx("button", { type: "button", className: formStyles.sendCommentBtn, onClick: onAddComment, disabled: !newCommentText.trim(), children: _jsx(Send, { size: 16 }) })] })] }))] })), _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}` : t('taskForm.emptyValue') })] })] }), _jsxs("div", { className: formStyles.taskFormDateRow, children: [_jsx("span", { className: formStyles.taskFormDateLabel, children: t('taskForm.completedLabel') }), _jsxs("span", { className: formStyles.taskFormMetaStack, children: [_jsx("span", { className: formStyles.taskFormDateValue, children: completedLabel || t('taskForm.emptyValue') }), _jsx("span", { className: formStyles.taskFormMetaActor, children: completedByLabel ? `by ${completedByLabel}` : t('taskForm.emptyValue') })] })] })] })) }) })] }), _jsxs("div", { className: formStyles.keyboardHint, children: ["Press ", _jsx("kbd", { children: navigator.platform.includes('Mac') ? '⌥' : 'Alt' }), " to toggle"] })] })] }));
+                                                            setManualWorkstreamEntry(true);
+                                                        }, "aria-label": manualWorkstreamEntry
+                                                            ? "Use workstream dropdown"
+                                                            : "Enter workstream by name", title: manualWorkstreamEntry
+                                                            ? "Use workstream dropdown"
+                                                            : "Enter workstream by name", children: _jsx(Plus, { size: 14 }) })] })] }))] }), _jsxs("div", { className: formStyles.sectionBlock, children: [_jsx("div", { className: formStyles.taxonomyFieldsGrid, children: visibleTaxonomies.map((tax) => {
+                                            if (tax.id === "approach" && tax.isSystem)
+                                                return null; // Workflow stays hidden until the dedicated refactor lands.
+                                            const selectedRawValue = formTaxonomies[tax.id];
+                                            const selectedValues = Array.isArray(selectedRawValue)
+                                                ? selectedRawValue.map((value) => String(value))
+                                                : selectedRawValue !== undefined &&
+                                                    selectedRawValue !== null &&
+                                                    selectedRawValue !== ""
+                                                    ? [String(selectedRawValue)]
+                                                    : [];
+                                            const selectableOptions = tax.options.filter((option) => option.status !== "retired" ||
+                                                selectedValues.includes(String(option.value)));
+                                            return (_jsxs("div", { className: styles.field, children: [_jsx("label", { className: styles.label, children: tax.label }), tax.description && (_jsx("div", { className: `${formStyles.settingsHint} tf-text-helper`, children: tax.description })), tax.widgetType === "level" ? (_jsx(LevelSelector, { label: tax.label, options: selectableOptions.map((option) => ({
+                                                            ...option,
+                                                            label: option.status === "retired"
+                                                                ? `${option.label} (Retired)`
+                                                                : option.label,
+                                                        })), value: formTaxonomies[tax.id] || "", onChange: (val) => onTaxonomyChange(tax.id, val), type: "general", hideLabel: true })) : tax.multiSelect ? (_jsx("div", { className: `${styles.dropdownList} ${formStyles.softSectionSurface}`, children: selectableOptions.map((opt) => {
+                                                            const optionValue = String(opt.value);
+                                                            const isSelected = selectedValues.includes(optionValue);
+                                                            return (_jsxs("button", { type: "button", className: `${formStyles.specialistChip} ${isSelected ? formStyles.specialistChipActive : ""}`, onClick: () => {
+                                                                    const nextValues = isSelected
+                                                                        ? selectedValues.filter((value) => value !== optionValue)
+                                                                        : [...selectedValues, optionValue];
+                                                                    onTaxonomyChange(tax.id, nextValues);
+                                                                }, title: isSelected ? "Click to remove" : "Click to add", children: [isSelected && _jsx(Check, { size: 12 }), opt.status === "retired"
+                                                                        ? `${opt.label} (Retired)`
+                                                                        : opt.label] }, optionValue));
+                                                        }) })) : (_jsxs("div", { className: styles.fieldIconWrapper, style: {
+                                                            "--field-color": "var(--text-primary)",
+                                                            "--field-border": "rgba(255, 255, 255, 0.1)",
+                                                            "--field-bg": "rgba(255, 255, 255, 0.02)",
+                                                        }, children: [(() => {
+                                                                const selectedOption = tax.options.find((o) => String(o.value) ===
+                                                                    String(formTaxonomies[tax.id]));
+                                                                const IconComp = selectedOption?.icon &&
+                                                                    Icons[selectedOption.icon]
+                                                                    ? Icons[selectedOption.icon]
+                                                                    : HelpCircle;
+                                                                const color = selectedOption?.color || "var(--text-secondary)";
+                                                                return (_jsx("div", { className: styles.fieldIcon, style: { color: resolveColor(color) }, children: _jsx(IconComp, { size: 16 }) }));
+                                                            })(), _jsxs("select", { value: formTaxonomies[tax.id] || "", onChange: (e) => onTaxonomyChange(tax.id, e.target.value), className: `${styles.select} ${styles.field_dynamic}`, required: tax.isRequired, children: [_jsxs("option", { value: "", children: ["Select ", tax.label, "..."] }), selectableOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.status === "retired"
+                                                                            ? `${opt.label} (Retired)`
+                                                                            : opt.label }, opt.value)))] })] }))] }, tax.id));
+                                        }) }), checklistEnabled && (_jsxs("div", { className: styles.specialistSection, children: [_jsxs("div", { className: styles.toggleHeading, onClick: () => onShowChecklistChange(!showChecklist), title: showChecklist ? "Hide checklist" : "Show checklist", children: [_jsxs("label", { className: styles.label, children: ["Checklist", " ", checklistItems.length > 0 &&
+                                                                `(${completedChecklistCount}/${checklistItems.length})`] }), showChecklist ? (_jsx(ChevronDown, { size: 14 })) : (_jsx(ChevronRight, { size: 14 }))] }), showChecklist && (_jsxs("div", { className: `${styles.dropdownList} ${formStyles.stackedList} ${formStyles.stackedListSpaced}`, children: [_jsxs("div", { className: styles.pathInputGroup, children: [_jsx("input", { type: "text", className: styles.input, placeholder: "Add checklist item", value: newChecklistItemText, onChange: (e) => setNewChecklistItemText(e.target.value), onKeyDown: (e) => {
+                                                                    if (e.key === "Enter") {
+                                                                        e.preventDefault();
+                                                                        handleAddChecklistItem();
+                                                                    }
+                                                                } }), _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: handleAddChecklistItem, disabled: !newChecklistItemText.trim(), children: "Add" })] }), checklistItems.length > 0 ? (_jsx(DndContext, { sensors: checklistSensors, collisionDetection: closestCenter, onDragEnd: handleChecklistReorder, children: _jsx(SortableContext, { items: checklistItems.map((item) => item.id), strategy: verticalListSortingStrategy, children: checklistItems.map((item, index) => (_jsx(SortableChecklistRow, { id: item.id || `checklist-${index}`, item: item, onToggle: () => {
+                                                                    const now = new Date().toISOString();
+                                                                    onChecklistItemsChange(checklistItems.map((entry, entryIndex) => entryIndex === index
+                                                                        ? {
+                                                                            ...entry,
+                                                                            isCompleted: !entry.isCompleted,
+                                                                            updatedAt: now,
+                                                                        }
+                                                                        : entry));
+                                                                }, onRemove: () => onChecklistItemsChange(checklistItems
+                                                                    .filter((_, entryIndex) => entryIndex !== index)
+                                                                    .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
+                                                                            ? `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}`
+                                                                            : t("taskForm.emptyValue") })] })] }), _jsxs("div", { className: formStyles.taskFormDateRow, children: [_jsx("span", { className: formStyles.taskFormDateLabel, children: t("taskForm.completedLabel") }), _jsxs("span", { className: formStyles.taskFormMetaStack, children: [_jsx("span", { className: formStyles.taskFormDateValue, children: completedLabel || t("taskForm.emptyValue") }), _jsx("span", { className: formStyles.taskFormMetaActor, children: completedByLabel
+                                                                            ? `by ${completedByLabel}`
+                                                                            : t("taskForm.emptyValue") })] })] })] })) }) })] })] }), activitySidebar, _jsxs("div", { className: formStyles.keyboardHint, children: ["Press ", _jsx("kbd", { children: navigator.platform.includes("Mac") ? "⌥" : "Alt" }), " to toggle"] })] })] }));
 }