@taskforcehq/taskforce 0.3.168

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import type { TaskItem, CategoryConfig, Comment, ScreenshotItem, TaskAssignee } from '../../types';
+import type { TaxonomyDefinition } from '../../types';
+interface TaskFormProps {
+    editingTaskId: string | null;
+    error: string;
+    title: string;
+    description: string;
+    category: string;
+    type: string;
+    priority: number | string;
+    complexity: number | string;
+    manualComplexityEnabled?: boolean;
+    approach: string;
+    assignee: TaskAssignee;
+    scheduledDate: string;
+    dueDate: string;
+    selectedSpecialists: string[];
+    comments: Comment[];
+    newCommentText: string;
+    contextFiles: Array<string | ScreenshotItem>;
+    contextLinkBrowsePath?: string;
+    formTaxonomies: Record<string, string | number | string[] | number[]>;
+    descriptionFocused: boolean;
+    showMarkdownHelp: boolean;
+    showSpecialists: boolean;
+    showChecklist?: boolean;
+    checklistEnabled?: boolean;
+    showTaskRelationships?: boolean;
+    showComments: boolean;
+    showChildTasks?: boolean;
+    categories: CategoryConfig[];
+    types: {
+        value: string;
+        label: string;
+    }[];
+    priorities: Array<{
+        value: number;
+        label: string;
+        color?: string;
+        icon?: string;
+    }>;
+    approaches: Array<{
+        value: string;
+        label: string;
+        color?: string;
+        icon?: string;
+    }>;
+    availableSpecialists: {
+        value: string;
+        label: string;
+    }[];
+    taxonomies: TaxonomyDefinition[];
+    copiedId: string | null;
+    onTitleChange: (value: string) => void;
+    onDescriptionChange: (value: string) => void;
+    onCategoryChange: (value: string) => void;
+    onTypeChange: (value: string) => void;
+    onPriorityChange: (value: number | string) => void;
+    onComplexityChange: (value: number | string) => void;
+    onApproachChange: (value: string) => void;
+    onAssigneeChange: (value: TaskAssignee) => void;
+    onScheduledDateChange: (value: string) => void;
+    onDueDateChange: (value: string) => void;
+    onSelectedSpecialistsChange: (value: string[]) => void;
+    onNewCommentTextChange: (value: string) => void;
+    onTaxonomyChange: (id: string, value: string | number | string[] | number[]) => void;
+    onParentTaskIdInputChange?: (value: string) => void;
+    onAddChildTaskIdInputChange?: (value: string) => void;
+    onDescriptionFocusedChange: (value: boolean) => void;
+    onShowMarkdownHelpChange: (value: boolean) => void;
+    onShowSpecialistsChange: (value: boolean) => void;
+    onShowChecklistChange?: (value: boolean) => void;
+    onShowTaskRelationshipsChange?: (value: boolean) => void;
+    onShowCommentsChange: (value: boolean) => void;
+    onShowChildTasksChange?: (value: boolean) => void;
+    onOpenSettings?: (section: 'categories' | 'types') => void;
+    onSubmit: (e: React.FormEvent) => void;
+    onAddComment: () => void;
+    onAddContextFile: (file: ScreenshotItem) => void;
+    onBrowseContextLinkPath?: () => void;
+    onRemoveContextFile: (index: number) => void;
+    onUpdateContextCaption: (index: number, caption: string) => void;
+    onCopyId: (e: React.MouseEvent, id: string) => void;
+    onToggleInProgress?: (task: TaskItem) => void;
+    onToggleReview?: (task: TaskItem) => void;
+    onToggleComplete?: (task: TaskItem) => void;
+    onToggleCancel?: (task: TaskItem) => void;
+    onArchiveTask?: (task: TaskItem) => void;
+    onUnarchive?: (taskId: string) => void;
+    onSetParentForCurrentTask?: (parentTaskIdOverride?: string | null) => void;
+    onAddChildToCurrentTask?: () => void;
+    onCreateChildForCurrentTask?: () => void;
+    onUnlinkChildTask?: (childId: string) => void;
+    onReorderChildTasks?: (parentTaskId: string, orderedChildIds: string[]) => void;
+    onOpenTaskById?: (taskId: string) => void;
+    currentTask?: TaskItem;
+    currentTaskParent?: TaskItem;
+    currentTaskChildren?: TaskItem[];
+    parentTaskIdInput?: string;
+    addChildTaskIdInput?: string;
+    commentsEndRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare function TaskForm(props: TaskFormProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/task/TaskForm.js

@@ -0,0 +1,241 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import * as Icons from 'lucide-react';
+import { HelpCircle, X, Send, Check, ChevronDown, ChevronRight, User, Settings, Minus, Bot } from 'lucide-react';
+import styles from '../../Taskforce.module.css';
+import { LevelSelector } from '../ui/LevelSelector';
+import { TaxonomyDropdown } from '../ui/TaxonomyDropdown';
+import { Markdown } from '../ui/Markdown';
+import { TypeMeta, 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';
+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 categoryOptions = React.useMemo(() => {
+        const defaultOption = { value: 'default', label: 'Default', icon: 'HelpCircle', color: 'var(--text-secondary)' };
+        const nonDefault = visibleCategories
+            .filter(cat => cat.value !== 'default')
+            .map(cat => ({
+            value: cat.value,
+            label: 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
+        }));
+        return [defaultOption, ...nonDefault];
+    }, [approaches]);
+    const formatMetaDate = (value) => {
+        if (!value)
+            return null;
+        const formatted = formatDate(value, {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+        return formatted || null;
+    };
+    const createdLabel = formatMetaDate(currentTask?.createdAt);
+    const updatedLabel = formatMetaDate(currentTask?.updatedAt || currentTask?.createdAt);
+    const completedLabel = formatMetaDate(currentTask?.completedAt);
+    const todayDateOnly = React.useMemo(() => {
+        const now = new Date();
+        const y = now.getFullYear();
+        const m = String(now.getMonth() + 1).padStart(2, '0');
+        const d = String(now.getDate()).padStart(2, '0');
+        return `${y}-${m}-${d}`;
+    }, []);
+    const dueBeforeScheduledWarning = Boolean(dueDate && scheduledDate && dueDate < scheduledDate);
+    const overdueWarning = Boolean(dueDate &&
+        dueDate < todayDateOnly &&
+        (!currentTask || (currentTask.status !== 'done' && currentTask.status !== 'cancelled')));
+    const 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 [newChecklistItemText, setNewChecklistItemText] = React.useState('');
+    const isArchivedReadOnly = Boolean(currentTask?.isArchived);
+    const handleAddChecklistItem = () => {
+        const text = newChecklistItemText.trim();
+        if (!text)
+            return;
+        onDescriptionChange(appendChecklistLine(description || '', text));
+        setNewChecklistItemText('');
+    };
+    const handleDropReorder = (draggedId, targetId) => {
+        if (!editingTaskId || draggedId === targetId)
+            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)
+            return;
+        const nextOrder = [...orderedIds];
+        const [moved] = nextOrder.splice(fromIndex, 1);
+        nextOrder.splice(toIndex, 0, moved);
+        onReorderChildTasks?.(editingTaskId, nextOrder);
+    };
+    const formatAiAuthorLabel = (author) => {
+        const cleaned = author
+            .trim()
+            .replace(/[-_]+/g, ' ')
+            .replace(/\s+/g, ' ');
+        if (!cleaned || cleaned === 'ai')
+            return 'AI Agent';
+        const label = cleaned
+            .split(' ')
+            .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+            .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'
+                                            ? _jsx(Bot, { size: 20 })
+                                            : assignee === 'user'
+                                                ? _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)
+                                                        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"] })] })] }));
+}

package/dist/components/task/TaskForm.test.d.ts

@@ -0,0 +1 @@
+export {};