@taskforcehq/taskforce 0.3.170 → 0.3.300

package/dist/components/task/TaskForm.js

@@ -1,45 +1,74 @@
 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, Settings, Minus, Bot } 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 { TypeMeta, resolveColor } from '../../utils/constants';
+import { IconMap, resolveColor } from '../../utils/constants';
 import { formatDate } from '../../utils/formatting';
 import { t } from '../../localization';
 import { TaskContextUpload } from './TaskContextUpload';
-import { TaskCard } from './TaskCard';
-import { sortChildTasksForDisplay } from '../../utils/taskRelations';
-import { appendChecklistLine, parseChecklistLines, removeChecklistLine, setChecklistLineCompleted } from '../../utils/checklistMarkdown';
+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 { 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 }) })] }));
+}
+function hexToRgba(hex, opacity) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result)
+        return '';
+    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${opacity})`;
+}
 export function TaskForm(props) {
-    const { editingTaskId, error, title, description, category, type, priority, complexity, manualComplexityEnabled = false, approach, assignee, scheduledDate, dueDate, selectedSpecialists, comments, newCommentText, contextFiles, contextLinkBrowsePath, descriptionFocused, showMarkdownHelp, showSpecialists, showChecklist = false, checklistEnabled = true, showTaskRelationships = false, showComments, showChildTasks = false, formTaxonomies, onTaxonomyChange, onParentTaskIdInputChange, onAddChildTaskIdInputChange, onOpenSettings, categories, types, priorities, approaches, availableSpecialists, taxonomies, copiedId, onTitleChange, onDescriptionChange, onCategoryChange, onTypeChange, onPriorityChange, onComplexityChange, onApproachChange, onAssigneeChange, onScheduledDateChange, onDueDateChange, onSelectedSpecialistsChange, onNewCommentTextChange, onDescriptionFocusedChange, onShowMarkdownHelpChange, onShowSpecialistsChange, onShowChecklistChange = () => { }, onShowTaskRelationshipsChange, onShowCommentsChange, onShowChildTasksChange, onSubmit, onAddComment, onAddContextFile, onBrowseContextLinkPath, onRemoveContextFile, onUpdateContextCaption, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onArchiveTask, onUnarchive, onSetParentForCurrentTask, onAddChildToCurrentTask, onCreateChildForCurrentTask, onUnlinkChildTask, onReorderChildTasks, onOpenTaskById, currentTask, currentTaskParent, currentTaskChildren = [], parentTaskIdInput = '', addChildTaskIdInput = '', commentsEndRef, } = props;
-    const visibleCategories = categories.filter(c => !c.disabled);
+    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 = [], 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 currentTaskReferenceLabel = getTaskReferenceLabel(currentTask);
+    const visibleTaxonomies = React.useMemo(() => getVisibleTaskFormTaxonomies(taxonomies, formTaxonomies), [taxonomies, formTaxonomies]);
     const categoryOptions = React.useMemo(() => {
-        const defaultOption = { value: 'default', label: 'Default', icon: 'HelpCircle', color: 'var(--text-secondary)' };
-        const nonDefault = visibleCategories
-            .filter(cat => cat.value !== 'default')
+        const configuredDefault = categories.find((cat) => cat.value === DEFAULT_CATEGORY_VALUE);
+        const defaultOption = {
+            value: DEFAULT_CATEGORY_VALUE,
+            label: configuredDefault?.label || DEFAULT_CATEGORY_LABEL,
+            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 => ({
             value: cat.value,
-            label: cat.label,
+            label: cat.disabled ? `${cat.label} (Legacy)` : cat.label,
             icon: cat.icon,
             color: cat.color
         }));
         return [defaultOption, ...nonDefault];
-    }, [visibleCategories]);
-    const approachOptions = React.useMemo(() => {
-        const defaultOption = { value: 'default', label: 'Default', icon: 'HelpCircle', color: 'var(--text-secondary)' };
-        const nonDefault = approaches
-            .filter(opt => opt.value !== 'default')
-            .map(opt => ({
-            value: opt.value,
-            label: opt.label,
-            icon: opt.icon,
-            color: opt.color
+    }, [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);
+        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'
         }));
-        return [defaultOption, ...nonDefault];
-    }, [approaches]);
+    }, [types, type]);
     const formatMetaDate = (value) => {
         if (!value)
             return null;
@@ -66,45 +95,106 @@ export function TaskForm(props) {
     const overdueWarning = Boolean(dueDate &&
         dueDate < todayDateOnly &&
         (!currentTask || (currentTask.status !== 'done' && currentTask.status !== 'cancelled')));
-    const isParentTask = Boolean(currentTask && currentTaskChildren.length > 0);
-    const sortedChildTasks = sortChildTasksForDisplay(currentTaskChildren);
-    const [draggingChildId, setDraggingChildId] = React.useState(null);
-    const [dragOverChildId, setDragOverChildId] = React.useState(null);
-    const draggedChildIdRef = React.useRef(null);
-    const completedChildCount = sortedChildTasks.filter((task) => Boolean(task.isArchived) || task.status === 'done' || task.status === 'cancelled').length;
-    const checklistItems = React.useMemo(() => parseChecklistLines(description || ''), [description]);
-    const completedChecklistCount = checklistItems.filter(item => item.completed).length;
-    const childProgressPercent = sortedChildTasks.length > 0
-        ? Math.round((completedChildCount / sortedChildTasks.length) * 100)
-        : 0;
+    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 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 checklistSensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: { distance: 6 },
+    }));
+    React.useLayoutEffect(() => {
+        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 handleAddChecklistItem = () => {
         const text = newChecklistItemText.trim();
         if (!text)
             return;
-        onDescriptionChange(appendChecklistLine(description || '', text));
+        const now = new Date().toISOString();
+        onChecklistItemsChange([
+            ...checklistItems,
+            {
+                id: `checklist-draft-${now}-${checklistItems.length}`,
+                taskId: editingTaskId || '',
+                title: text,
+                isCompleted: false,
+                order: checklistItems.length,
+                createdAt: now,
+                updatedAt: now,
+            },
+        ]);
         setNewChecklistItemText('');
     };
-    const handleDropReorder = (draggedId, targetId) => {
-        if (!editingTaskId || draggedId === targetId)
+    const handleChecklistReorder = React.useCallback((event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
             return;
-        const orderedIds = sortedChildTasks.map(child => child.id);
-        const fromIndex = orderedIds.indexOf(draggedId);
-        const toIndex = orderedIds.indexOf(targetId);
-        if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex)
+        const oldIndex = checklistItems.findIndex((item) => item.id === active.id);
+        const newIndex = checklistItems.findIndex((item) => item.id === over.id);
+        if (oldIndex < 0 || newIndex < 0)
             return;
-        const nextOrder = [...orderedIds];
-        const [moved] = nextOrder.splice(fromIndex, 1);
-        nextOrder.splice(toIndex, 0, moved);
-        onReorderChildTasks?.(editingTaskId, nextOrder);
-    };
+        const now = new Date().toISOString();
+        const reordered = arrayMove(checklistItems, oldIndex, newIndex).map((item, index) => ({
+            ...item,
+            order: index,
+            updatedAt: now,
+        }));
+        onChecklistItemsChange(reordered);
+    }, [checklistItems, onChecklistItemsChange]);
     const formatAiAuthorLabel = (author) => {
+        const raw = String(author || '').trim();
         const cleaned = author
             .trim()
+            .replace(/^ai-profile-/i, '')
             .replace(/[-_]+/g, ' ')
             .replace(/\s+/g, ' ');
-        if (!cleaned || cleaned === 'ai')
+        if (!cleaned || cleaned === 'ai' || raw.toLowerCase().startsWith('ai-profile-'))
             return 'AI Agent';
         const label = cleaned
             .split(' ')
@@ -112,130 +202,219 @@ export function TaskForm(props) {
             .join(' ');
         return `AI Agent - ${label}`;
     };
-    return (_jsxs("form", { onSubmit: onSubmit, className: styles.form, children: [error && _jsx("div", { className: styles.error, children: error }), isArchivedReadOnly && (_jsx("div", { className: styles.settingsHint, style: { marginBottom: '10px' }, children: "Archived tasks are read-only. Unarchive the task to make changes." })), _jsxs("fieldset", { disabled: isArchivedReadOnly, style: { border: 'none', margin: 0, padding: 0, minInlineSize: 0 }, children: [_jsxs("div", { className: styles.field, children: [_jsxs("div", { className: styles.labelRow, children: [_jsx("label", { className: styles.label, children: "Title" }), assignee && (_jsx("span", { title: assignee === 'agent'
-                                            ? 'Assigned to: AI'
-                                            : assignee === 'user'
-                                                ? 'Assigned to: User'
-                                                : 'Assigned to: Unassigned', style: {
-                                            color: assignee === 'agent'
-                                                ? 'var(--color-violet-500, #8b5cf6)'
-                                                : assignee === 'user'
-                                                    ? 'var(--color-green-500, #22c55e)'
-                                                    : '#b45309',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '4px',
-                                            fontSize: '11px',
-                                            fontWeight: 600,
-                                        }, children: assignee === 'agent'
+    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,
+            currentTask?.createdByActor,
+        ].filter(Boolean);
+        return new Map(entries.map((actor) => [String(actor.id), actor]));
+    }, [currentTask?.assigneeActor, currentTask?.createdByActor]);
+    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 formatActivityFieldValue = (field, value) => {
+        if (field !== 'assignee')
+            return undefined;
+        return getAssigneeLabel(String(value || '').trim(), resolvedAssigneeOptions);
+    };
+    const resolveActorLabel = React.useCallback((actorId, actorType, actorLabel) => {
+        if (actorLabel && actorLabel.trim())
+            return actorLabel.trim();
+        const raw = String(actorId || '').trim();
+        if (!raw)
+            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());
+        if (option?.label)
+            return option.label;
+        if (actorType === 'ai')
+            return formatAiAuthorLabel(raw);
+        return getAssigneeLabel(raw, resolvedAssigneeOptions) || raw;
+    }, [actorFallbackById, actorOptionByValue, formatAiAuthorLabel, resolvedAssigneeOptions]);
+    const latestActivityActorLabel = React.useMemo(() => {
+        const latestItem = taskActivityItems[0];
+        if (!latestItem)
+            return null;
+        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);
+        }
+        const event = latestItem.event;
+        return resolveActorLabel(event.actor, event.actorType, event.actorProfile?.label || null);
+    }, [resolveActorLabel, taskActivityItems]);
+    const completedByLabel = React.useMemo(() => {
+        const completedAt = currentTask?.completedAt;
+        if (!completedAt)
+            return null;
+        for (const item of taskActivityItems) {
+            if (item.type !== 'event')
+                continue;
+            const event = item.event;
+            const nextStatus = event.details?.changes?.status?.to;
+            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);
+    const updatedByLabel = latestActivityActorLabel;
+    const activityCount = taskActivityItems.length;
+    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 })
-                                            : assignee === 'user'
+                                            : 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: styles.markdownHelp, children: [_jsxs("div", { className: styles.helpHeader, children: [_jsx("span", { children: "Markdown Guide" }), _jsx("button", { onClick: () => onShowMarkdownHelpChange(false), className: styles.helpClose, children: _jsx(X, { size: 12 }) })] }), _jsxs("div", { className: styles.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", { children: _jsx("code", { children: "- [ ] checklist item" }) }), _jsx("div", { children: _jsx("code", { children: "- [x] completed item" }) }), _jsx("div", { className: styles.helpGridItem, children: _jsx("code", { children: "`inline code`" }) }), _jsxs("div", { className: styles.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)" }) })] }), _jsx("div", { className: styles.settingsHint, style: { marginTop: '8px' }, children: "Checklist checkboxes are clickable in preview mode." })] })), descriptionFocused || !description ? (_jsx("textarea", { className: styles.textarea, 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} ${styles.markdownPreview} ${styles.markdownPreviewContainer}`, onClick: () => onDescriptionFocusedChange(true), children: _jsx(Markdown, { onChecklistToggle: (lineIndex, completed) => {
-                                        onDescriptionChange(setChecklistLineCompleted(description || '', lineIndex, completed));
-                                    }, onTaskIdClick: onOpenTaskById, children: description }) }))] }), _jsxs("div", { className: styles.topRow, children: [_jsxs("div", { className: styles.field, children: [_jsxs("div", { className: styles.labelRow, children: [_jsx("label", { id: "category-label", className: styles.label, children: "Category" }), _jsx("button", { type: "button", className: styles.manageLink, onClick: () => onOpenSettings?.('categories'), title: "Manage Categories", tabIndex: -1, children: _jsx(Settings, { size: 14 }) })] }), _jsx(TaxonomyDropdown, { value: category, options: categoryOptions, onChange: (value) => onCategoryChange(String(value)), required: true, ariaLabelledBy: "category-label" })] }), _jsxs("div", { className: styles.field, children: [_jsxs("div", { className: styles.labelRow, children: [_jsx("label", { id: "type-label", className: styles.label, children: "Type" }), _jsx("button", { type: "button", className: styles.manageLink, onClick: () => onOpenSettings?.('types'), title: "Manage Types", tabIndex: -1, children: _jsx(Settings, { size: 14 }) })] }), _jsx(TaxonomyDropdown, { value: type, options: types.map(t => ({
-                                            value: t.value,
-                                            label: t.label,
-                                            icon: TypeMeta[t.value]?.icon || 'Box',
-                                            color: TypeMeta[t.value]?.color || 'violet-500'
-                                        })), onChange: (value) => onTypeChange(String(value)), ariaLabelledBy: "type-label" })] }), _jsxs("div", { className: styles.field, children: [_jsx("label", { id: "approach-label", className: styles.label, children: "Approach" }), _jsx(TaxonomyDropdown, { value: approach || "default", options: approachOptions, onChange: (value) => onApproachChange(String(value)), ariaLabelledBy: "approach-label" })] }), _jsxs("div", { className: styles.field, children: [_jsx("label", { id: "assignee-label", className: styles.label, children: "Assigned To" }), _jsx(TaxonomyDropdown, { value: assignee || 'agent', options: [
-                                            { value: 'unassigned', label: 'Unassigned', icon: 'HelpCircle', color: 'var(--text-secondary)' },
-                                            { value: 'agent', label: 'AI', icon: 'Bot', color: '#8b5cf6' },
-                                            { value: 'user', label: 'User', icon: 'User', color: '#22c55e' },
-                                        ], onChange: (value) => onAssigneeChange(String(value)), ariaLabelledBy: "assignee-label" })] }), _jsx(LevelSelector, { label: "Priority", options: priorities, value: priority, onChange: onPriorityChange, type: "priority" }), manualComplexityEnabled && (_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" }))] }), _jsx("div", { className: styles.taxonomyFieldsGrid, children: taxonomies.map(tax => {
-                            if (tax.id === 'approach' && tax.isSystem)
-                                return null; // Approach is handled separately for now
-                            return (_jsxs("div", { className: styles.field, children: [_jsx("label", { className: styles.label, children: tax.label }), tax.widgetType === 'level' ? (_jsx(LevelSelector, { label: tax.label, options: tax.options, value: formTaxonomies[tax.id] || '', onChange: (val) => onTaxonomyChange(tax.id, val), type: "general", hideLabel: true })) : (_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 => o.value === 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, "..."] }), tax.options.map(opt => (_jsx("option", { value: opt.value, children: 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, style: { marginTop: '8px', flexDirection: 'column', gap: 6 }, 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 ? (checklistItems.map((item) => (_jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => {
-                                                    onDescriptionChange(setChecklistLineCompleted(description || '', item.lineIndex, !item.completed));
-                                                }, title: item.completed ? 'Mark incomplete' : 'Mark complete', style: { minWidth: 28, padding: '4px 8px' }, children: item.completed ? _jsx(Check, { size: 12 }) : _jsx(Minus, { size: 12 }) }), _jsx("span", { style: {
-                                                    flex: 1,
-                                                    minWidth: 0,
-                                                    color: item.completed ? 'var(--text-muted)' : 'var(--text-primary)',
-                                                    textDecoration: item.completed ? 'line-through' : 'none'
-                                                }, children: item.text }), _jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.deleteBtn}`, onClick: () => onDescriptionChange(removeChecklistLine(description || '', item.lineIndex)), title: "Remove checklist item", children: _jsx(X, { size: 12 }) })] }, `checklist-${item.lineIndex}`)))) : (_jsx("div", { className: styles.settingsHint, children: "No checklist items yet." }))] }))] })), availableSpecialists.length > 0 && (_jsxs("div", { className: styles.specialistSection, children: [_jsxs("div", { className: styles.toggleHeading, onClick: () => onShowSpecialistsChange(!showSpecialists), title: showSpecialists ? "Hide unassigned specialists" : "Show all specialists", children: [_jsxs("label", { className: styles.label, children: ["Specialists ", selectedSpecialists.length > 0 && `(${selectedSpecialists.length})`] }), showSpecialists ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 })] }), showSpecialists && (_jsxs("div", { className: styles.dropdownList, style: {
-                                    padding: '8px 4px',
-                                    background: 'rgba(0,0,0,0.1)',
-                                    borderRadius: '8px',
-                                    marginTop: '4px'
-                                }, children: [selectedSpecialists.map((val) => {
-                                        const p = availableSpecialists.find(s => s.value === val);
-                                        if (!p)
-                                            return null;
-                                        return (_jsxs("button", { type: "button", className: `${styles.specialistChip} ${styles.specialistChipActive}`, onClick: () => {
-                                                onSelectedSpecialistsChange(selectedSpecialists.filter(v => v !== p.value));
-                                            }, title: "Click to unassign", children: [_jsx(Check, { size: 12 }), p.label] }, p.value));
-                                    }), availableSpecialists
-                                        .filter(p => !selectedSpecialists.includes(p.value))
-                                        .map((p) => (_jsx("button", { type: "button", className: styles.specialistChip, onClick: () => {
-                                            onSelectedSpecialistsChange([...selectedSpecialists, p.value]);
-                                        }, title: "Click to assign", children: p.label }, p.value))), availableSpecialists.filter(p => !selectedSpecialists.includes(p.value)).length === 0 && (_jsx("div", { style: {
-                                            fontSize: '11px',
-                                            color: 'var(--text-muted)',
-                                            fontStyle: 'italic',
-                                            padding: '4px 8px'
-                                        }, children: "All available specialists have been assigned." }))] }))] })), _jsxs("div", { className: styles.specialistSection, children: [_jsxs("div", { className: styles.toggleHeading, onClick: () => onShowTaskRelationshipsChange?.(!showTaskRelationships), title: showTaskRelationships ? "Hide Parent Task" : "Show Parent Task", children: [_jsx("label", { className: styles.label, children: "Parent Task" }), showTaskRelationships ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 })] }), showTaskRelationships && (_jsx(_Fragment, { children: currentTaskParent ? (_jsx("div", { className: styles.dropdownList, style: { marginTop: '8px', flexDirection: 'column', gap: 6 }, children: _jsxs("div", { className: styles.childCardRow, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsx(TaskCard, { task: currentTaskParent, compressed: true, showParentRelationship: false, isArchived: Boolean(currentTaskParent.isArchived), copiedId: copiedId, taxonomies: taxonomies, priorities: priorities, approaches: approaches, categories: categories, onClick: () => onOpenTaskById?.(currentTaskParent.id), onCopyId: onCopyId, onToggleInProgress: onToggleInProgress, onToggleReview: onToggleReview, onToggleComplete: onToggleComplete, onToggleCancel: onToggleCancel, onArchiveTask: onArchiveTask, onUnarchive: onUnarchive }) }), _jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.deleteBtn} ${styles.childCardRemoveBtn}`, onClick: () => {
-                                                    onParentTaskIdInputChange?.('');
-                                                    onSetParentForCurrentTask?.(null);
-                                                }, title: "Remove parent", "aria-label": `Remove parent ${currentTaskParent.id}`, children: _jsx(X, { size: 12 }) })] }) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.pathInputGroup, style: { marginTop: '8px' }, children: [_jsx("input", { type: "text", className: styles.input, placeholder: "Paste parent task ID", value: parentTaskIdInput, onChange: (e) => onParentTaskIdInputChange?.(e.target.value) }), editingTaskId && (_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => onSetParentForCurrentTask?.(), children: "Set Parent" }))] }), !editingTaskId && (_jsx("div", { className: styles.settingsHint, style: { marginTop: '8px' }, children: "Parent link is applied when the task is created." }))] })) }))] }), _jsxs("div", { className: styles.specialistSection, children: [_jsxs("div", { className: styles.toggleHeading, onClick: () => onShowChildTasksChange?.(!showChildTasks), title: showChildTasks ? "Hide Child Tasks" : "Show Child Tasks", children: [_jsxs("label", { className: styles.label, children: ["Child Tasks ", currentTaskChildren.length > 0 && `(${currentTaskChildren.length})`] }), showChildTasks ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 })] }), showChildTasks && (_jsx(_Fragment, { children: !editingTaskId ? (_jsx("div", { className: styles.settingsHint, style: { marginTop: '8px' }, children: "Save this task first, then you can add child tasks." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.pathInputGroup, style: { marginTop: '8px' }, children: [_jsx("input", { type: "text", className: styles.input, placeholder: "Paste child task ID", value: addChildTaskIdInput, onChange: (e) => onAddChildTaskIdInputChange?.(e.target.value) }), _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => onAddChildToCurrentTask?.(), disabled: !addChildTaskIdInput.trim(), children: "Add Child" }), _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => onCreateChildForCurrentTask?.(), children: "New Child" })] }), sortedChildTasks.length > 0 && (_jsxs("div", { className: styles.taskChildrenSummaryBadges, style: { marginTop: '8px' }, children: [_jsx("div", { className: styles.taskChildrenProgressBar, title: `${completedChildCount} of ${sortedChildTasks.length} child tasks are done/cancelled (${childProgressPercent}%)`, children: _jsx("div", { className: styles.taskChildrenProgressBarFill, style: { width: `${childProgressPercent}%` } }) }), _jsx("div", { className: styles.taskChildrenProgressText, children: `${completedChildCount}/${sortedChildTasks.length} • ${childProgressPercent}%` })] })), sortedChildTasks.length > 0 && (_jsx("div", { className: styles.dropdownList, style: { marginTop: '8px', flexDirection: 'column', gap: 6 }, children: sortedChildTasks.map((child) => (_jsxs("div", { className: `${styles.childCardRow} ${draggingChildId === child.id ? styles.childCardRowDragging : ''} ${dragOverChildId === child.id && draggingChildId && draggingChildId !== child.id ? styles.childCardRowDropTarget : ''}`, draggable: true, onDragStart: (e) => {
-                                                    draggedChildIdRef.current = child.id;
-                                                    setDraggingChildId(child.id);
-                                                    e.dataTransfer.effectAllowed = 'move';
-                                                    e.dataTransfer.setData('text/plain', child.id);
-                                                }, onDragOver: (e) => {
-                                                    const activeDragId = draggedChildIdRef.current || draggingChildId;
-                                                    if (!activeDragId || activeDragId === child.id)
+                                                : _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;
-                                                    e.preventDefault();
-                                                    e.dataTransfer.dropEffect = 'move';
-                                                    if (dragOverChildId !== child.id)
-                                                        setDragOverChildId(child.id);
-                                                }, onDragLeave: () => {
-                                                    if (dragOverChildId === child.id)
-                                                        setDragOverChildId(null);
-                                                }, onDrop: (e) => {
-                                                    e.preventDefault();
-                                                    const draggedId = e.dataTransfer.getData('text/plain') || draggedChildIdRef.current || draggingChildId;
-                                                    if (draggedId)
-                                                        handleDropReorder(draggedId, child.id);
-                                                    setDragOverChildId(null);
-                                                    setDraggingChildId(null);
-                                                    draggedChildIdRef.current = null;
-                                                }, onDragEnd: () => {
-                                                    setDragOverChildId(null);
-                                                    setDraggingChildId(null);
-                                                    draggedChildIdRef.current = null;
-                                                }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsx(TaskCard, { task: child, compressed: true, showParentRelationship: false, isArchived: Boolean(child.isArchived), copiedId: copiedId, taxonomies: taxonomies, priorities: priorities, approaches: approaches, categories: categories, onClick: () => onOpenTaskById?.(child.id), onCopyId: onCopyId, onToggleInProgress: onToggleInProgress, onToggleReview: onToggleReview, onToggleComplete: onToggleComplete, onToggleCancel: onToggleCancel, onArchiveTask: onArchiveTask, onUnarchive: onUnarchive }) }), _jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.deleteBtn} ${styles.childCardRemoveBtn}`, onClick: () => onUnlinkChildTask?.(child.id), title: "Remove child", "aria-label": `Remove child ${child.id}`, children: _jsx(X, { size: 12 }) })] }, child.id))) }))] })) }))] }), _jsx(TaskContextUpload, { taskId: editingTaskId, contextFiles: contextFiles, browsedPath: contextLinkBrowsePath, onBrowseLinkPath: onBrowseContextLinkPath, 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'), " ", comments.length > 0 && `(${comments.length})`] }), showComments ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 })] }), showComments && (_jsxs("div", { className: styles.commentPanel, children: [_jsxs("div", { className: styles.commentThread, children: [comments.length === 0 && (_jsx("div", { className: styles.emptyComments, children: t('taskForm.noComments') })), comments.map(c => {
-                                                const normalizedAuthor = String(c.author || '').trim().toLowerCase();
-                                                const isAi = normalizedAuthor !== '' && normalizedAuthor !== 'user' && normalizedAuthor !== 'human';
-                                                const authorLabel = isAi ? formatAiAuthorLabel(normalizedAuthor) : t('taskForm.you');
-                                                return (_jsxs("div", { className: `${styles.comment} ${isAi ? styles.commentAi : styles.commentUser}`, children: [_jsxs("div", { className: styles.commentHeader, children: [_jsx("span", { className: styles.commentAuthor, children: isAi ? _jsxs(_Fragment, { children: [_jsx(Bot, { size: 12, strokeWidth: 1.5 }), " ", authorLabel] }) : _jsxs(_Fragment, { children: [_jsx(User, { size: 12, strokeWidth: 1.5 }), " ", t('taskForm.you')] }) }), _jsx("span", { className: styles.commentTime, children: formatDate(c.timestamp, {
-                                                                        month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'
-                                                                    }) })] }), _jsx("div", { className: styles.commentText, children: _jsx(Markdown, { onTaskIdClick: onOpenTaskById, children: c.text }) })] }, c.id));
-                                            }), _jsx("div", { ref: commentsEndRef })] }), _jsxs("div", { className: styles.commentInputArea, children: [_jsx("textarea", { className: styles.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: styles.sendCommentBtn, onClick: onAddComment, disabled: !newCommentText.trim(), children: _jsx(Send, { size: 16 }) })] })] }))] })), _jsx("div", { className: styles.taskFormLifecycle, children: _jsxs("div", { className: styles.taskFormDateStack, children: [_jsxs("div", { className: styles.taskFormDateRow, children: [_jsx("span", { className: styles.taskFormDateLabel, children: t('taskForm.scheduledLabel') }), _jsx("input", { type: "date", value: scheduledDate, onChange: (e) => onScheduledDateChange(e.target.value), className: `${styles.input} ${styles.taskFormDateInput}`, disabled: isParentTask })] }), isParentTask && (_jsxs("div", { className: styles.taskFormDateRow, children: [_jsx("span", { className: styles.taskFormDateLabel }), _jsx("span", { style: { color: 'var(--text-muted)', fontSize: '11px', fontWeight: 500 }, children: t('taskForm.parentCannotSchedule') })] })), _jsxs("div", { className: styles.taskFormDateRow, children: [_jsx("span", { className: styles.taskFormDateLabel, children: t('taskForm.dueLabel') }), _jsx("input", { type: "date", value: dueDate, onChange: (e) => onDueDateChange(e.target.value), className: `${styles.input} ${styles.taskFormDateInput}` })] }), dueBeforeScheduledWarning && (_jsxs("div", { className: styles.taskFormDateRow, children: [_jsx("span", { className: styles.taskFormDateLabel }), _jsx("span", { style: { color: 'var(--color-warning-500, #f59e0b)', fontSize: '11px', fontWeight: 600 }, children: t('taskForm.dueBeforeScheduled') })] })), overdueWarning && (_jsxs("div", { className: styles.taskFormDateRow, children: [_jsx("span", { className: styles.taskFormDateLabel }), _jsx("span", { style: { color: 'var(--color-error, #ef4444)', fontSize: '11px', fontWeight: 600 }, children: t('taskForm.overdue') })] })), currentTask && (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.taskFormDateRow, children: [_jsx("span", { className: styles.taskFormDateLabel, children: t('taskForm.createdLabel') }), _jsx("span", { className: styles.taskFormDateValue, children: createdLabel || t('taskForm.emptyValue') })] }), _jsxs("div", { className: styles.taskFormDateRow, children: [_jsx("span", { className: styles.taskFormDateLabel, children: t('taskForm.updatedLabel') }), _jsx("span", { className: styles.taskFormDateValue, children: updatedLabel || t('taskForm.emptyValue') })] }), _jsxs("div", { className: styles.taskFormDateRow, children: [_jsx("span", { className: styles.taskFormDateLabel, children: t('taskForm.completedLabel') }), _jsx("span", { className: styles.taskFormDateValue, children: completedLabel || t('taskForm.emptyValue') })] })] }))] }) }), _jsxs("div", { className: styles.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: [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();
+                                                            }
+                                                        }, rows: 1 }), _jsx("button", { type: "button", className: formStyles.sendCommentBtn, onClick: onAddComment, disabled: !newCommentText.trim(), children: _jsx(Send, { size: 16 }) })] })] }))] })), _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') })] })] })] })) }) })] }), _jsxs("div", { className: formStyles.keyboardHint, children: ["Press ", _jsx("kbd", { children: navigator.platform.includes('Mac') ? '⌥' : 'Alt' }), " to toggle"] })] })] }));
 }