@taskforcehq/taskforce 0.3.326 → 0.3.328

package/dist/components/task/TaskForm.js

@@ -4,7 +4,7 @@ import { DndContext, PointerSensor, closestCenter, useSensor, useSensors, } from
 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 { HelpCircle, X, Send, Check, User, ClipboardList, Bot, GripVertical, Plus, ArrowDown, FileInput, } 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";
@@ -15,10 +15,19 @@ import { IconMap, resolveColor } from "../../utils/constants";
 import { formatDate } from "../../utils/formatting";
 import { t } from "../../localization";
 import { getTaskActivityItems } from "../../utils/taskActivity";
-import { ensureAssigneeOptionPresent, getAssigneeKind, getAssigneeLabel, } from "../../utils/assignees";
+import { ensureAssigneeOptionPresent, getAssigneeLabel, } from "../../utils/assignees";
 import { getTaskReferenceLabel } from "../../utils/taskReferences";
+import { getImageReferenceLabel, } from "../../utils/imageReferences";
+import { uploadContextAttachment } from "../../utils/contextAttachmentUpload";
+import { dispatchTaskforceContextAssetsMutated } from "../../utils/contextAssetEvents";
+import { AssigneeIdentity } from "../ui/AssigneeIdentity";
 import { getVisibleTaskFormTaxonomies } from "../../utils/taxonomyFormDefaults.js";
 import { getInitiativeReferenceLabel, getWorkstreamReferenceLabel, } from "../../utils/planningReferences";
+import { TaskWorkflowAssignmentField } from "./TaskWorkflowAssignmentField.js";
+import { DisclosureSectionHeader } from "../ui/DisclosureSectionHeader";
+import { UNVERIFIED_COMMENT_IMPORT_DESCRIPTION, UNVERIFIED_COMMENT_IMPORT_LABEL, isUnverifiedCommentImportActor, } from "../../shared/commentProvenance";
+const TASK_FORM_DROPDOWN_PANEL_MIN_WIDTH = 280;
+const ACTIVITY_NEAR_BOTTOM_THRESHOLD = 48;
 const DeferredEntityActivityTimeline = React.lazy(() => (import("../activity/EntityActivityTimeline").then((module) => ({
     default: module.EntityActivityTimeline,
 }))));
@@ -41,8 +50,61 @@ function SortableChecklistRow({ id, item, onToggle, onRemove, }) {
                     : "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 }) })] }));
 }
 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 { editingTaskId, initialActivityEntryId, title, description, category, type, priority, complexity, manualComplexityEnabled = false, assignee, scheduledDate, dueDate, checklistItems, comments, newCommentText, contextFiles, currentWorkspaceId, descriptionImageDraftId, currentActorId, apiBaseUrl, runtimeMode = 'local', showImageReviews = false, descriptionFocused, showMarkdownHelp, checklistEnabled = true, formTaxonomies, onTaxonomyChange, onOpenSettings, categories, types, priorities, taxonomyDisplayLabels, assigneeOptions, taxonomies, workstreams = [], initiatives = [], copiedId, onTitleChange, onTitleDraftChange, onDescriptionChange, onDescriptionDraftChange, onCategoryChange, onTypeChange, onPriorityChange, onComplexityChange, onAssigneeChange, onScheduledDateChange, onDueDateChange, onChecklistItemsChange, onNewCommentTextChange, onDescriptionFocusedChange, onShowMarkdownHelpChange, onSubmit, onAddComment, onDescriptionImageUploadStart, onAddContextFile, onRemoveContextFile, onUpdateContextCaption, onSetCardCover, cardCoverDisabled, onOpenContextImage, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, taskReferences, currentTask, commentsEndRef, } = props;
+    const emitTitleDraftChange = onTitleDraftChange || onTitleChange;
+    const emitDescriptionDraftChange = onDescriptionDraftChange || onDescriptionChange;
     const currentTaskReferenceLabel = getTaskReferenceLabel(currentTask);
+    const titleInputRef = React.useRef(null);
+    const descriptionTextareaRef = React.useRef(null);
+    const latestDescriptionRef = React.useRef(description);
+    const textDraftOwnerRef = React.useRef(editingTaskId);
+    const descriptionImageOwnerKey = `${String(currentWorkspaceId || "").trim()}\u0000${editingTaskId || ""}`;
+    const descriptionImageOwnerRef = React.useRef(descriptionImageOwnerKey);
+    const descriptionImageGenerationRef = React.useRef(0);
+    if (descriptionImageOwnerRef.current !== descriptionImageOwnerKey) {
+        descriptionImageOwnerRef.current = descriptionImageOwnerKey;
+        descriptionImageGenerationRef.current += 1;
+    }
+    const [descriptionImageUploading, setDescriptionImageUploading] = React.useState(false);
+    const descriptionImageUploadRef = React.useRef(null);
+    const [descriptionImageError, setDescriptionImageError] = React.useState(null);
+    React.useLayoutEffect(() => {
+        const taskChanged = textDraftOwnerRef.current !== editingTaskId;
+        if (titleInputRef.current && (taskChanged || document.activeElement !== titleInputRef.current)) {
+            titleInputRef.current.value = title;
+        }
+        if (descriptionTextareaRef.current
+            && (taskChanged || document.activeElement !== descriptionTextareaRef.current)) {
+            descriptionTextareaRef.current.value = description;
+            latestDescriptionRef.current = description;
+        }
+        textDraftOwnerRef.current = editingTaskId;
+    }, [description, editingTaskId, title]);
+    React.useEffect(() => {
+        descriptionImageUploadRef.current = null;
+        setDescriptionImageUploading(false);
+        setDescriptionImageError(null);
+        return () => {
+            descriptionImageGenerationRef.current += 1;
+        };
+    }, [descriptionImageOwnerKey]);
+    const imageReferences = React.useMemo(() => {
+        if (!onOpenContextImage)
+            return undefined;
+        const attachmentsByReference = new Map();
+        contextFiles.forEach((item) => {
+            if (typeof item === "string")
+                return;
+            const referenceLabel = getImageReferenceLabel(item);
+            if (!referenceLabel)
+                return;
+            attachmentsByReference.set(referenceLabel.toLowerCase(), item);
+        });
+        return {
+            resolve: (token) => attachmentsByReference.get(token.toLowerCase()) || null,
+            activate: onOpenContextImage,
+        };
+    }, [contextFiles, onOpenContextImage]);
     const visibleTaxonomies = React.useMemo(() => getVisibleTaskFormTaxonomies(taxonomies, formTaxonomies), [taxonomies, formTaxonomies]);
     const categoryOptions = React.useMemo(() => {
         const configuredDefault = categories.find((cat) => cat.value === DEFAULT_CATEGORY_VALUE);
@@ -103,45 +165,25 @@ export function TaskForm(props) {
             (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 [showChecklist, setShowChecklist] = React.useState(true);
+    const [showChecklistComposer, setShowChecklistComposer] = React.useState(false);
+    const checklistAddInputRef = React.useRef(null);
+    const checklistAddTriggerRef = React.useRef(null);
     const isArchivedReadOnly = Boolean(currentTask?.isArchived);
     const isDeletedReadOnly = Boolean(currentTask?.isDeleted);
-    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)",
-        };
-    }), [workstreams]);
-    const hasMatchingWorkstreamSelection = React.useMemo(() => workstreamOptions.some((option) => String(option.value) === String(workstreamInput || "").trim()), [workstreamInput, workstreamOptions]);
-    React.useEffect(() => {
-        if (editingTaskId) {
-            if (manualWorkstreamEntry)
-                setManualWorkstreamEntry(false);
-            return;
-        }
-        if (!workstreamInput.trim()) {
-            return;
-        }
-        if (hasMatchingWorkstreamSelection && manualWorkstreamEntry) {
-            setManualWorkstreamEntry(false);
-            return;
-        }
-        if (!hasMatchingWorkstreamSelection && !manualWorkstreamEntry) {
-            setManualWorkstreamEntry(true);
-        }
-    }, [
-        editingTaskId,
-        hasMatchingWorkstreamSelection,
-        manualWorkstreamEntry,
-        workstreamInput,
-    ]);
     const isReadOnly = isArchivedReadOnly || isDeletedReadOnly;
     const formRef = React.useRef(null);
+    const activityThreadRef = React.useRef(null);
+    const activityTargetEntryRef = React.useRef(null);
+    const handledActivityTargetKeyRef = React.useRef(null);
+    const activityResizeObserverRef = React.useRef(null);
+    const activityGeometryHandlerRef = React.useRef(null);
+    const activityScrollSnapshotRef = React.useRef(null);
+    const activityFollowingLatestRef = React.useRef(true);
+    const [hasNewActivity, setHasNewActivity] = React.useState(false);
+    const formScrollPositionsRef = React.useRef(new Map());
+    const activeFormScrollTaskIdRef = React.useRef(undefined);
+    const latestFormScrollTopRef = React.useRef(0);
     const checklistSensors = useSensors(useSensor(PointerSensor, {
         activationConstraint: { distance: 6 },
     }));
@@ -149,22 +191,40 @@ export function TaskForm(props) {
         const form = formRef.current;
         if (!form)
             return;
-        const resetScroll = () => {
-            form.scrollTop = 0;
-            const container = form.parentElement;
-            if (container) {
-                if (typeof container.scrollTo === "function") {
-                    container.scrollTo({ top: 0, left: 0, behavior: "auto" });
-                }
-                else {
-                    container.scrollTop = 0;
-                }
-            }
-        };
-        resetScroll();
-        const frame = window.requestAnimationFrame(resetScroll);
-        return () => window.cancelAnimationFrame(frame);
-    }, [editingTaskId, currentTask?.id]);
+        const previousTaskId = activeFormScrollTaskIdRef.current;
+        if (previousTaskId === editingTaskId)
+            return;
+        if (previousTaskId !== undefined) {
+            formScrollPositionsRef.current.set(previousTaskId, latestFormScrollTopRef.current);
+        }
+        const nextScrollTop = formScrollPositionsRef.current.get(editingTaskId) ?? 0;
+        form.scrollTop = nextScrollTop;
+        latestFormScrollTopRef.current = nextScrollTop;
+        activeFormScrollTaskIdRef.current = editingTaskId;
+    }, [editingTaskId]);
+    React.useLayoutEffect(() => {
+        setShowChecklist(true);
+    }, [editingTaskId]);
+    React.useEffect(() => {
+        if (!showChecklistComposer)
+            return;
+        checklistAddInputRef.current?.focus();
+    }, [showChecklistComposer]);
+    React.useEffect(() => {
+        setShowChecklistComposer(false);
+        setNewChecklistItemText("");
+    }, [editingTaskId]);
+    React.useEffect(() => {
+        if (showChecklist)
+            return;
+        setShowChecklistComposer(false);
+        setNewChecklistItemText("");
+    }, [showChecklist]);
+    const handleFormScroll = React.useCallback((event) => {
+        const nextScrollTop = event.currentTarget.scrollTop;
+        latestFormScrollTopRef.current = nextScrollTop;
+        formScrollPositionsRef.current.set(editingTaskId, nextScrollTop);
+    }, [editingTaskId]);
     const handleAddChecklistItem = () => {
         const text = newChecklistItemText.trim();
         if (!text)
@@ -183,6 +243,141 @@ export function TaskForm(props) {
             },
         ]);
         setNewChecklistItemText("");
+        setShowChecklistComposer(false);
+        window.requestAnimationFrame(() => checklistAddTriggerRef.current?.focus());
+    };
+    const openChecklistComposer = () => {
+        if (showChecklistComposer) {
+            checklistAddInputRef.current?.focus();
+            return;
+        }
+        if (!showChecklist)
+            setShowChecklist(true);
+        setShowChecklistComposer(true);
+    };
+    const closeChecklistComposer = (restoreFocus = true) => {
+        setShowChecklistComposer(false);
+        setNewChecklistItemText("");
+        if (restoreFocus) {
+            window.requestAnimationFrame(() => checklistAddTriggerRef.current?.focus());
+        }
+    };
+    const performDescriptionImageUpload = async (files, selectionStart, selectionEnd) => {
+        const uploadGeneration = descriptionImageGenerationRef.current;
+        const uploadOwnerId = editingTaskId;
+        const uploadIsCurrent = () => descriptionImageGenerationRef.current === uploadGeneration &&
+            descriptionImageOwnerRef.current === descriptionImageOwnerKey;
+        setDescriptionImageError(null);
+        const uploadedReferences = [];
+        let failedCount = 0;
+        let lastUploadError = null;
+        for (const file of files) {
+            if (file.size > 10 * 1024 * 1024) {
+                failedCount += 1;
+                lastUploadError = "Images must be 10 MB or smaller.";
+                continue;
+            }
+            try {
+                const attachment = await uploadContextAttachment(file, {
+                    ownerType: "task",
+                    ownerId: uploadOwnerId,
+                    workspaceId: currentWorkspaceId,
+                    ...(!uploadOwnerId && descriptionImageDraftId
+                        ? {
+                            draftUploadId: descriptionImageDraftId,
+                            uploadPurpose: "task-description-draft",
+                        }
+                        : {}),
+                });
+                if (!uploadIsCurrent())
+                    return;
+                const referenceLabel = getImageReferenceLabel(attachment);
+                if (!referenceLabel) {
+                    throw new Error("The uploaded image did not receive an image reference.");
+                }
+                onAddContextFile(attachment);
+                dispatchTaskforceContextAssetsMutated({
+                    workspaceId: String(currentWorkspaceId || "").trim() || "default",
+                    ownerType: "task",
+                    ownerId: uploadOwnerId,
+                    taskId: uploadOwnerId,
+                    reason: "upload",
+                });
+                uploadedReferences.push(referenceLabel);
+            }
+            catch (error) {
+                failedCount += 1;
+                lastUploadError =
+                    error instanceof Error ? error.message : "The image could not be added.";
+            }
+        }
+        if (!uploadIsCurrent())
+            return;
+        if (uploadedReferences.length > 0) {
+            const currentDescription = latestDescriptionRef.current;
+            const safeStart = Math.min(selectionStart, currentDescription.length);
+            const safeEnd = Math.min(Math.max(selectionEnd, safeStart), currentDescription.length);
+            const before = currentDescription.slice(0, safeStart);
+            const after = currentDescription.slice(safeEnd);
+            const leadingBreak = before && !/\s$/.test(before) ? "\n" : "";
+            const trailingBreak = after && !/^\s/.test(after) ? "\n" : "";
+            const insertedText = `${leadingBreak}${uploadedReferences.join("\n")}${trailingBreak}`;
+            const nextDescription = `${before}${insertedText}${after}`;
+            const nextCaret = before.length + insertedText.length;
+            latestDescriptionRef.current = nextDescription;
+            if (descriptionTextareaRef.current) {
+                descriptionTextareaRef.current.value = nextDescription;
+            }
+            emitDescriptionDraftChange(nextDescription);
+            onDescriptionChange(nextDescription);
+            window.requestAnimationFrame(() => {
+                descriptionTextareaRef.current?.focus();
+                descriptionTextareaRef.current?.setSelectionRange(nextCaret, nextCaret);
+            });
+        }
+        if (failedCount > 0) {
+            const failureMessage = uploadedReferences.length > 0
+                ? `${failedCount} image${failedCount === 1 ? "" : "s"} could not be added.`
+                : lastUploadError || (files.length === 1
+                    ? "The image could not be added."
+                    : "The images could not be added.");
+            setDescriptionImageError(failureMessage);
+        }
+    };
+    const addDescriptionImages = (files, selectionStart, selectionEnd) => {
+        if (files.length === 0 || descriptionImageUploadRef.current) {
+            return descriptionImageUploadRef.current || Promise.resolve();
+        }
+        setDescriptionImageUploading(true);
+        const upload = performDescriptionImageUpload(files, selectionStart, selectionEnd);
+        descriptionImageUploadRef.current = upload;
+        onDescriptionImageUploadStart?.(upload);
+        void upload.then(() => {
+            if (descriptionImageUploadRef.current !== upload)
+                return;
+            descriptionImageUploadRef.current = null;
+            setDescriptionImageUploading(false);
+        }, () => {
+            if (descriptionImageUploadRef.current !== upload)
+                return;
+            descriptionImageUploadRef.current = null;
+            setDescriptionImageUploading(false);
+        });
+        return upload;
+    };
+    const getDescriptionClipboardImages = (dataTransfer) => Array.from(dataTransfer.items)
+        .filter((item) => item.kind === "file" &&
+        /^(?:image\/(?:png|jpeg|webp))$/i.test(item.type))
+        .map((item) => item.getAsFile())
+        .filter((file) => Boolean(file));
+    const getDescriptionDroppedImages = (dataTransfer) => Array.from(dataTransfer.files).filter((file) => /^(?:image\/(?:png|jpeg|webp))$/i.test(file.type));
+    const descriptionDragHasSupportedImage = (dataTransfer) => Array.from(dataTransfer.items || []).some((item) => item.kind === "file" &&
+        /^(?:image\/(?:png|jpeg|webp))$/i.test(item.type)) || getDescriptionDroppedImages(dataTransfer).length > 0;
+    const handleDescriptionDragOver = (event) => {
+        if (!descriptionDragHasSupportedImage(event.dataTransfer))
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
     };
     const handleChecklistReorder = React.useCallback((event) => {
         const { active, over } = event;
@@ -218,11 +413,7 @@ export function TaskForm(props) {
         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 currentAssigneeColor = currentTask?.assigneeActor?.color || currentAssigneeOption?.color;
     const actorFallbackById = React.useMemo(() => {
         const entries = [
             currentTask?.assigneeActor,
@@ -278,6 +469,14 @@ export function TaskForm(props) {
     ]);
     const resolveActivityActorPresentation = React.useCallback(({ actorId, actorType, actorProfile, fallbackKind, }) => {
         const actorRef = String(actorId || "").trim();
+        if (isUnverifiedCommentImportActor(actorRef)) {
+            return {
+                kind: "system",
+                label: UNVERIFIED_COMMENT_IMPORT_LABEL,
+                ActorIcon: FileInput,
+                description: UNVERIFIED_COMMENT_IMPORT_DESCRIPTION,
+            };
+        }
         const normalizedActor = actorRef.toLowerCase();
         const actorFallback = actorFallbackById.get(actorRef);
         const actorOption = actorOptionByValue.get(actorRef) ||
@@ -315,7 +514,16 @@ export function TaskForm(props) {
                 : resolvedKind === "member"
                     ? User
                     : ClipboardList);
-        return { kind: resolvedKind, label, color, ActorIcon };
+        return {
+            kind: resolvedKind,
+            label,
+            color,
+            ActorIcon,
+            isCurrentActorHint: resolvedKind === "member" &&
+                (normalizedActor === "" ||
+                    normalizedActor === "user" ||
+                    normalizedActor === "human"),
+        };
     }, [
         actorFallbackById,
         actorOptionByValue,
@@ -364,157 +572,319 @@ export function TaskForm(props) {
                 : null, currentTask?.createdByActor?.label || null);
     const updatedByLabel = latestActivityActorLabel;
     const activityCount = taskActivityItems.length;
+    const commentCount = taskActivityItems.filter((item) => item.type === "comment").length;
+    const firstActivityItemId = taskActivityItems[0]?.id || null;
+    const lastActivityItemId = taskActivityItems[activityCount - 1]?.id || null;
+    const normalizedActivityTargetId = String(initialActivityEntryId || "").trim();
+    const activityTargetKey = editingTaskId && normalizedActivityTargetId
+        ? `${editingTaskId}\u0000${normalizedActivityTargetId}`
+        : null;
+    const captureActivityScrollSnapshot = React.useCallback((thread) => ({
+        taskId: editingTaskId,
+        count: activityCount,
+        firstItemId: firstActivityItemId,
+        lastItemId: lastActivityItemId,
+        scrollHeight: thread.scrollHeight,
+        scrollTop: thread.scrollTop,
+    }), [
+        activityCount,
+        editingTaskId,
+        firstActivityItemId,
+        lastActivityItemId,
+    ]);
+    const scrollActivityToLatest = React.useCallback(() => {
+        const thread = activityThreadRef.current;
+        if (!thread)
+            return;
+        thread.scrollTop = thread.scrollHeight;
+        activityFollowingLatestRef.current = true;
+        setHasNewActivity(false);
+        activityScrollSnapshotRef.current = captureActivityScrollSnapshot(thread);
+    }, [captureActivityScrollSnapshot]);
+    const scrollActivityToTarget = React.useCallback(() => {
+        const thread = activityThreadRef.current;
+        const target = activityTargetEntryRef.current;
+        if (!thread
+            || !target
+            || !activityTargetKey
+            || handledActivityTargetKeyRef.current === activityTargetKey) {
+            return false;
+        }
+        target.scrollIntoView?.({ block: "center", inline: "nearest" });
+        target.focus({ preventScroll: true });
+        activityFollowingLatestRef.current = false;
+        setHasNewActivity(false);
+        handledActivityTargetKeyRef.current = activityTargetKey;
+        activityScrollSnapshotRef.current = captureActivityScrollSnapshot(thread);
+        return true;
+    }, [activityTargetKey, captureActivityScrollSnapshot]);
+    const setActivityTargetEntry = React.useCallback((entry) => {
+        activityTargetEntryRef.current = entry;
+        if (entry)
+            scrollActivityToTarget();
+    }, [scrollActivityToTarget]);
+    const handleActivityScroll = React.useCallback((event) => {
+        activityGeometryHandlerRef.current?.(event.currentTarget);
+    }, []);
+    const updateActivityGeometry = React.useCallback((thread) => {
+        const distanceFromBottom = thread.scrollHeight - thread.scrollTop - thread.clientHeight;
+        const isNearBottom = distanceFromBottom <= ACTIVITY_NEAR_BOTTOM_THRESHOLD;
+        activityFollowingLatestRef.current = isNearBottom;
+        if (isNearBottom)
+            setHasNewActivity(false);
+        activityScrollSnapshotRef.current = captureActivityScrollSnapshot(thread);
+    }, [captureActivityScrollSnapshot]);
+    React.useLayoutEffect(() => {
+        activityGeometryHandlerRef.current = updateActivityGeometry;
+    }, [updateActivityGeometry]);
+    const setActivityThread = React.useCallback((thread) => {
+        activityResizeObserverRef.current?.disconnect();
+        activityResizeObserverRef.current = null;
+        activityThreadRef.current = thread;
+        if (!thread)
+            return;
+        if (activityTargetKey
+            && handledActivityTargetKeyRef.current !== activityTargetKey) {
+            activityFollowingLatestRef.current = false;
+        }
+        else {
+            thread.scrollTop = thread.scrollHeight;
+            activityFollowingLatestRef.current = true;
+        }
+        setHasNewActivity(false);
+        if (typeof ResizeObserver !== "undefined") {
+            const observer = new ResizeObserver(() => {
+                const currentThread = activityThreadRef.current;
+                if (currentThread) {
+                    activityGeometryHandlerRef.current?.(currentThread);
+                }
+            });
+            observer.observe(thread);
+            activityResizeObserverRef.current = observer;
+        }
+    }, [activityTargetKey, editingTaskId]);
+    React.useLayoutEffect(() => {
+        handledActivityTargetKeyRef.current = null;
+    }, [activityTargetKey]);
     React.useLayoutEffect(() => {
         if (!editingTaskId)
             return;
-        const endNode = commentsEndRef.current;
-        if (!endNode)
+        const thread = activityThreadRef.current;
+        if (!thread)
             return;
-        const thread = endNode.parentElement;
-        const scrollToLatest = () => {
-            if (typeof endNode.scrollIntoView === "function") {
-                endNode.scrollIntoView({ block: "end" });
-                return;
+        const previous = activityScrollSnapshotRef.current;
+        const taskChanged = previous?.taskId !== editingTaskId;
+        const activityIncreased = Boolean(previous && activityCount > previous.count);
+        const historyPrepended = Boolean(previous &&
+            activityIncreased &&
+            previous.lastItemId === lastActivityItemId &&
+            previous.firstItemId !== firstActivityItemId);
+        if (activityTargetKey && scrollActivityToTarget()) {
+            activityScrollSnapshotRef.current = captureActivityScrollSnapshot(thread);
+            return;
+        }
+        if (taskChanged || activityFollowingLatestRef.current) {
+            scrollActivityToLatest();
+        }
+        else if (historyPrepended && previous) {
+            thread.scrollTop =
+                previous.scrollTop + (thread.scrollHeight - previous.scrollHeight);
+        }
+        else if (activityIncreased) {
+            setHasNewActivity(true);
+        }
+        activityScrollSnapshotRef.current = captureActivityScrollSnapshot(thread);
+        const frame = window.requestAnimationFrame(() => {
+            if (taskChanged || activityFollowingLatestRef.current) {
+                scrollActivityToLatest();
             }
-            if (thread) {
-                thread.scrollTop = thread.scrollHeight;
+            else {
+                activityScrollSnapshotRef.current = captureActivityScrollSnapshot(thread);
             }
-        };
-        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: [_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) => {
+    }, [
+        activityCount,
+        activityTargetKey,
+        captureActivityScrollSnapshot,
+        editingTaskId,
+        firstActivityItemId,
+        lastActivityItemId,
+        scrollActivityToLatest,
+        scrollActivityToTarget,
+    ]);
+    const submitComment = React.useCallback(() => {
+        scrollActivityToLatest();
+        onAddComment();
+    }, [onAddComment, scrollActivityToLatest]);
+    const activitySidebar = (_jsxs("aside", { className: formStyles.activitySidebar, "aria-label": t("taskForm.commentsSectionTitle"), children: [_jsx("div", { className: formStyles.activitySidebarHeader, children: _jsxs("h2", { className: formStyles.activitySidebarTitle, children: [t("taskForm.commentsSectionTitle"), " (", commentCount, ")"] }) }), _jsxs("div", { className: `${formStyles.commentPanel} ${formStyles.activitySidebarPanel} tf-surface-panel`.trim(), children: [_jsxs("div", { className: formStyles.activityTimelineRegion, children: [_jsx(React.Suspense, { fallback: _jsx(ActivityTimelineFallback, { count: activityCount }), children: _jsx(DeferredEntityActivityTimeline, { activity: currentTask?.activity, comments: comments, formatFieldValue: formatActivityFieldValue, resolveActorPresentation: resolveActivityActorPresentation, currentActorId: currentActorId, taskReferences: taskReferences, emptyMessage: t(editingTaskId ? "taskForm.noComments" : "taskForm.noActivity"), listClassName: formStyles.commentThread, emptyClassName: formStyles.emptyComments, listRef: setActivityThread, endRef: commentsEndRef, onScroll: handleActivityScroll, targetEntryId: normalizedActivityTargetId, targetEntryRef: setActivityTargetEntry }) }), hasNewActivity ? (_jsx("div", { className: formStyles.newActivityNotice, role: "status", "aria-live": "polite", children: _jsxs("button", { type: "button", className: formStyles.newActivityButton, onClick: scrollActivityToLatest, "aria-label": t("taskForm.newActivityAriaLabel"), children: [_jsx(ArrowDown, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: t("taskForm.newActivity") })] }) })) : null] }), _jsxs("div", { className: formStyles.commentInputArea, children: [_jsx("textarea", { className: `${formStyles.commentInput} tf-field-shell`, placeholder: editingTaskId ? t("taskForm.commentPlaceholder") : "Comments become available after saving", value: newCommentText, onChange: (e) => onNewCommentTextChange(e.target.value), disabled: !editingTaskId || isReadOnly, onKeyDown: (e) => {
                                     if (e.key === "Enter" && !e.shiftKey) {
                                         e.preventDefault();
-                                        onAddComment();
+                                        submitComment();
                                     }
-                                }, 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
+                                }, rows: 3 }), _jsx("button", { type: "button", className: `${formStyles.sendCommentBtn} tf-control-icon`, onClick: submitComment, disabled: !editingTaskId || isReadOnly || !newCommentText.trim(), "aria-label": "Send comment", title: "Send comment", children: _jsx(Send, { size: 16, "aria-hidden": "true" }) })] })] })] }));
+    return (_jsxs("form", { ref: formRef, onSubmit: onSubmit, onScroll: handleFormScroll, className: `${styles.form} ${styles.appScrollbar} tf-scrollbar`, children: [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: [
-                                                    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;
-                                                            }
-                                                            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"
+                    : "Archived tasks are read-only. Unarchive the task to make changes." })), _jsxs("div", { className: formStyles.formLayoutWithSidebar, children: [_jsx("fieldset", { disabled: isReadOnly, className: formStyles.formFieldsetReset, children: _jsxs("div", { className: formStyles.formMainColumn, children: [_jsxs("div", { className: styles.field, children: [_jsx("label", { className: styles.label, children: "Title" }), _jsx("input", { ref: titleInputRef, type: "text", defaultValue: title, onChange: (event) => {
+                                                const nextTitle = event.target.value;
+                                                emitTitleDraftChange(nextTitle);
+                                            }, onBlur: (event) => {
+                                                if (event.currentTarget.value !== title) {
+                                                    onTitleChange(event.currentTarget.value);
+                                                }
+                                            }, placeholder: "What needs to be done?", className: styles.input, required: true, maxLength: 255, autoFocus: true })] }), _jsxs("div", { className: `${styles.field} ${formStyles.descriptionField}`, 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", { ref: descriptionTextareaRef, className: `${styles.textarea} ${formStyles.descriptionSurface}`, placeholder: "What needs to be done? (Markdown supported)", defaultValue: description, onChange: (event) => {
+                                                const nextDescription = event.target.value;
+                                                latestDescriptionRef.current = nextDescription;
+                                                emitDescriptionDraftChange(nextDescription);
+                                            }, onFocus: () => onDescriptionFocusedChange(true), onBlur: (event) => {
+                                                if (event.currentTarget.value !== description) {
+                                                    onDescriptionChange(event.currentTarget.value);
+                                                }
+                                                onDescriptionFocusedChange(false);
+                                            }, onPaste: (event) => {
+                                                const imageFiles = getDescriptionClipboardImages(event.clipboardData);
+                                                if (imageFiles.length === 0)
+                                                    return;
+                                                event.preventDefault();
+                                                const target = event.currentTarget;
+                                                void addDescriptionImages(imageFiles, target.selectionStart, target.selectionEnd);
+                                            }, onDragOver: handleDescriptionDragOver, onDrop: (event) => {
+                                                const imageFiles = getDescriptionDroppedImages(event.dataTransfer);
+                                                if (imageFiles.length === 0)
+                                                    return;
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                const target = event.currentTarget;
+                                                void addDescriptionImages(imageFiles, target.selectionStart, target.selectionEnd);
+                                            }, rows: 9, autoFocus: descriptionFocused })) : (_jsx("div", { className: `${styles.textarea} ${formStyles.descriptionSurface} ${formStyles.markdownPreview} ${formStyles.markdownPreviewContainer}`, onClick: () => onDescriptionFocusedChange(true), onDragOver: handleDescriptionDragOver, onDrop: (event) => {
+                                                const imageFiles = getDescriptionDroppedImages(event.dataTransfer);
+                                                if (imageFiles.length === 0)
+                                                    return;
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                onDescriptionFocusedChange(true);
+                                                void addDescriptionImages(imageFiles, description.length, description.length);
+                                            }, children: _jsx(Markdown, { variant: "detail", taskReferences: taskReferences, imageReferences: imageReferences, children: description }) })), descriptionImageUploading && (_jsx("div", { className: formStyles.descriptionImageStatus, role: "status", children: "Adding image to Context\u2026" })), descriptionImageError && (_jsx("div", { className: formStyles.descriptionImageError, role: "alert", children: descriptionImageError }))] }), _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", portalPanel: true, panelMinWidth: TASK_FORM_DROPDOWN_PANEL_MIN_WIDTH, panelAlign: "start" })] }), _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", portalPanel: true, panelMinWidth: TASK_FORM_DROPDOWN_PANEL_MIN_WIDTH, panelAlign: "start" })] }), _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", portalPanel: true, panelMinWidth: TASK_FORM_DROPDOWN_PANEL_MIN_WIDTH, panelAlign: "start", searchable: true, searchPlaceholder: "Search assignees...", noResultsText: "No assignees found.", renderOptionContent: (option) => {
+                                                                const assigneeOption = actorOptionByValue.get(String(option.value));
+                                                                return assigneeOption
+                                                                    ? _jsx(AssigneeIdentity, { option: assigneeOption })
+                                                                    : option.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 && (_jsx(TaskWorkflowAssignmentField, { taskId: editingTaskId, workspaceId: currentWorkspaceId, taskStatus: currentTask?.status, taskUpdatedAt: currentTask?.updatedAt, comments: comments, assigneeOptions: resolvedAssigneeOptions, currentActorId: currentActorId, apiBaseUrl: apiBaseUrl, runtimeMode: runtimeMode, disabled: Boolean(currentTask?.isArchived || currentTask?.isDeleted), onActivatePendingWorkflow: currentTask && onSetStatus
+                                                ? () => onSetStatus(currentTask, "in-progress", { allowSameStatus: true })
+                                                : undefined, onActiveOwnerChange: onAssigneeChange }))] }), _jsxs("div", { className: formStyles.sectionBlock, children: [visibleTaxonomies.length > 0 && (_jsx("div", { className: formStyles.taxonomyFieldsGrid, children: visibleTaxonomies.map((tax) => {
+                                                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 }, 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,
+                                                                            : 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} ${visibleTaxonomies.length === 0
+                                                ? formStyles.specialistSectionWithoutTaxonomies
+                                                : ""}`.trim(), children: [_jsx(DisclosureSectionHeader, { label: `Checklist${checklistItems.length > 0
+                                                        ? ` (${completedChecklistCount}/${checklistItems.length})`
+                                                        : ""}`, expanded: showChecklist, expandedTitle: "Hide checklist", collapsedTitle: "Show checklist", onToggle: () => {
+                                                        const nextExpanded = !showChecklist;
+                                                        setShowChecklist(nextExpanded);
+                                                        if (!nextExpanded)
+                                                            closeChecklistComposer(false);
+                                                    }, actions: (_jsx("div", { className: styles.contextMenuControl, children: _jsx("button", { ref: checklistAddTriggerRef, type: "button", className: "tf-control-icon", "aria-label": "Add checklist item", title: "Add checklist item", "aria-expanded": showChecklistComposer, onClick: openChecklistComposer, children: _jsx(Plus, { size: 14, "aria-hidden": "true" }) }) })) }), showChecklist &&
+                                                    (showChecklistComposer || checklistItems.length > 0) && (_jsxs("div", { className: `${styles.dropdownList} ${formStyles.stackedList} ${formStyles.stackedListSpaced}`, children: [showChecklistComposer && (_jsxs("div", { className: `${styles.pathInputGroup} ${formStyles.checklistInputGroup}`, children: [_jsx("input", { ref: checklistAddInputRef, 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();
+                                                                            e.stopPropagation();
+                                                                            handleAddChecklistItem();
+                                                                        }
+                                                                        if (e.key === "Escape") {
+                                                                            e.preventDefault();
+                                                                            e.stopPropagation();
+                                                                            closeChecklistComposer();
                                                                         }
-                                                                        : 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(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}`
-                                                                            : 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"] })] })] }));
+                                                                    } }), _jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", onClick: handleAddChecklistItem, disabled: !newChecklistItemText.trim(), "aria-label": "Confirm checklist item", title: "Add checklist item", children: _jsx(Check, { size: 14, "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", onClick: () => closeChecklistComposer(), "aria-label": "Cancel checklist item", title: "Cancel", children: _jsx(X, { size: 14, "aria-hidden": "true" }) })] })), 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}`))) }) }))] }))] }))] }), _jsxs("div", { children: [_jsx(React.Suspense, { fallback: null, children: _jsx(DeferredTaskContextUpload, { taskId: editingTaskId, taskReferenceLabel: currentTaskReferenceLabel, workspaceId: currentWorkspaceId, apiBaseUrl: apiBaseUrl, showImageReviews: showImageReviews && Boolean(currentTask), contextFiles: contextFiles, onAddContextFile: onAddContextFile, onRemoveContextFile: onRemoveContextFile, onUpdateContextCaption: onUpdateContextCaption, cardCoverAssetId: currentTask?.cardCoverAssetId, onSetCardCover: onSetCardCover, cardCoverDisabled: cardCoverDisabled }) }), _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] })] }));
 }