@taskforcehq/taskforce 0.3.168

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { TaskItem, TaxonomyDefinition, CategoryConfig } from '../../types';
+interface TaskCardProps {
+    task: TaskItem;
+    searchQuery?: string;
+    copiedId?: string | null;
+    availableSpecialists?: {
+        value: string;
+        label: string;
+    }[];
+    taxonomies?: TaxonomyDefinition[];
+    priorities?: Array<{
+        value: number | string;
+        label: string;
+        color?: string;
+        icon?: string;
+    }>;
+    approaches?: Array<{
+        value: string;
+        label: string;
+        color?: string;
+        icon?: string;
+    }>;
+    categories?: CategoryConfig[];
+    isOverlay?: boolean;
+    isArchived?: boolean;
+    isRecentlyChanged?: boolean;
+    linkedParentIdSet?: Set<string>;
+    parentDropTargetId?: string | null;
+    onClick?: (task: TaskItem) => 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;
+    onDelete?: (taskId: string) => void;
+    onUnlinkChildTask?: (taskId: string) => void;
+    onClearParentTask?: (taskId: string) => void;
+    onOpenTaskById?: (taskId: string) => void;
+    showParentRelationship?: boolean;
+    compressed?: boolean;
+    allTasks?: TaskItem[];
+}
+export declare const TaskCard: React.FC<TaskCardProps>;
+export {};

package/dist/components/task/TaskCard.js

@@ -0,0 +1,326 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import * as Icons from 'lucide-react';
+const { Copy, Check, Play, Pause, Sparkles, Ban, Archive, MessageSquare, User, Layers, Bot, Gauge, X, ChevronDown, ChevronRight, ClipboardList, HelpCircle } = Icons;
+import styles from '../../Taskforce.module.css';
+import { Markdown } from '../ui/Markdown';
+import { getIconForType, renderHighlighted } from '../../utils/taskUtils';
+import { resolveColor, TypeMeta } from '../../utils/constants';
+import { getLegacyPriorityClass } from '../../compat/priorityCompat';
+import { sortChildTasksForDisplay } from '../../utils/taskRelations';
+import { parseChecklistLines } from '../../utils/checklistMarkdown';
+import { dispatchOpenMarkdownDocument } from '../../utils/contextFiles';
+export const TaskCard = ({ task, searchQuery = '', copiedId = null, availableSpecialists = [], taxonomies = [], priorities = [], approaches = [], categories = [], isOverlay = false, isArchived = false, isRecentlyChanged = false, linkedParentIdSet, parentDropTargetId = null, onClick, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onArchiveTask, onUnarchive, onDelete, onUnlinkChildTask, onClearParentTask, onOpenTaskById, showParentRelationship = true, compressed = false, allTasks = [] }) => {
+    const priorityConfig = priorities.find(p => String(p.value) === String(task.priority));
+    const priorityName = priorityConfig ? priorityConfig.label.toLowerCase().replace(/\s+/g, '-') : String(task.priority);
+    const categoryConfig = categories.find(c => c.value === task.category || c.label === task.category);
+    const rawComplexity = typeof task.complexity === 'number' ? task.complexity : Number(task.complexity ?? 3);
+    const normalizedComplexity = Number.isFinite(rawComplexity) ? Math.max(1, Math.min(5, Math.round(rawComplexity))) : 3;
+    const complexityLabels = {
+        1: 'Tiny',
+        2: 'Low',
+        3: 'Mid',
+        4: 'High',
+        5: 'Epic'
+    };
+    const complexityKeys = {
+        1: 'tiny',
+        2: 'low',
+        3: 'medium',
+        4: 'high',
+        5: 'epic'
+    };
+    const complexityLabel = complexityLabels[normalizedComplexity];
+    const complexityColor = `var(--complexity-${complexityKeys[normalizedComplexity]})`;
+    const displayPriority = getLegacyPriorityClass(task.priority, priorityName);
+    const hasLegacyClass = !!styles[`priorityItem_${displayPriority}`];
+    const showLinkedFeedback = !!linkedParentIdSet?.has(task.id);
+    const showDropTargetFeedback = parentDropTargetId === task.id;
+    const cardClasses = [
+        styles.taskItem,
+        task.status === 'in-progress' ? styles.inProgress : '',
+        task.status === 'review' ? styles.readyForReview : '',
+        task.status === 'done' ? styles.completed : '',
+        task.status === 'cancelled' ? styles.cancelled : '',
+        (isRecentlyChanged || showDropTargetFeedback) ? styles.taskItemRecentlyChanged : '',
+        showDropTargetFeedback ? styles.taskItemGlowPersistent : '',
+        styles[`priorityItem_${displayPriority}`] || '',
+        isOverlay ? styles.kanbanCardOverlay : '',
+        isArchived ? styles.archived : '',
+        compressed ? styles.compressed : ''
+    ].filter(Boolean).join(' ');
+    const priorityColor = resolveColor(priorityConfig?.color);
+    const typeMeta = TypeMeta[task.type?.toLowerCase()];
+    const typeColor = resolveColor(typeMeta?.color) || '#8b5cf6';
+    const isImagePath = (filePath) => /\.(png|jpe?g|webp|gif)(\?|#|$)/i.test(filePath);
+    const getContextName = (item) => {
+        const path = typeof item === 'string' ? item : item.path;
+        const caption = typeof item === 'string' ? '' : (item.caption || '').trim();
+        if (caption)
+            return caption;
+        const withoutQuery = path.split('?')[0].split('#')[0];
+        const filename = withoutQuery.split('/').pop();
+        return filename || 'Context file';
+    };
+    const getContextType = (item) => {
+        const sourcePath = typeof item === 'string' ? item : item.path;
+        const fsPath = typeof item === 'string' ? '' : (item.fsPath || '').trim();
+        const caption = typeof item === 'string' ? '' : (item.caption || '').trim();
+        const candidates = [];
+        if (fsPath)
+            candidates.push(fsPath);
+        if (caption)
+            candidates.push(caption);
+        if (sourcePath.includes('/api/taskforce/context-link?path=')) {
+            try {
+                const parsed = new URL(sourcePath, 'http://localhost');
+                const linkedPath = parsed.searchParams.get('path');
+                if (linkedPath)
+                    candidates.push(linkedPath);
+            }
+            catch {
+                // Ignore malformed URLs and continue fallback checks.
+            }
+        }
+        candidates.push(sourcePath);
+        for (const candidate of candidates) {
+            const withoutQuery = candidate.split('?')[0].split('#')[0];
+            const filename = withoutQuery.split('/').pop() || '';
+            const dotIndex = filename.lastIndexOf('.');
+            if (dotIndex <= 0 || dotIndex === filename.length - 1)
+                continue;
+            const ext = filename.slice(dotIndex + 1);
+            if (ext)
+                return ext.slice(0, 5).toUpperCase();
+        }
+        return 'FILE';
+    };
+    const getContextTypeAccent = (fileType) => {
+        const type = fileType.toUpperCase();
+        if (type === 'PDF')
+            return '#ef4444';
+        if (type === 'DOC' || type === 'DOCX')
+            return '#3b82f6';
+        if (type === 'CSV')
+            return '#14b8a6';
+        if (type === 'JSON')
+            return '#f59e0b';
+        if (type === 'TXT' || type === 'MD')
+            return '#a78bfa';
+        return '#64748b';
+    };
+    const cardStyle = {
+        '--task-change-glow-color': priorityColor || `var(--priority-${displayPriority})`,
+        ...(priorityColor ? {
+            borderLeftColor: priorityColor,
+            [`--priority-${displayPriority}`]: priorityColor
+        } : {}),
+        ...(!hasLegacyClass && priorityColor ? { borderLeft: `4px solid ${priorityColor}` } : {})
+    };
+    // Helper for title case
+    const toTitleCase = (str) => str.replace(/\b\w/g, t => t.toUpperCase());
+    const taskById = React.useMemo(() => {
+        const map = new Map();
+        allTasks.forEach((item) => map.set(item.id, item));
+        return map;
+    }, [allTasks]);
+    const ancestors = React.useMemo(() => {
+        const chain = [];
+        const visited = new Set();
+        let parentId = task.parentTaskId || null;
+        while (parentId && !visited.has(parentId)) {
+            visited.add(parentId);
+            const ancestorTask = taskById.get(parentId) || null;
+            chain.push({ id: parentId, task: ancestorTask });
+            parentId = ancestorTask?.parentTaskId || null;
+        }
+        return chain;
+    }, [task.parentTaskId, taskById]);
+    const orderedAncestors = React.useMemo(() => [...ancestors].reverse(), [ancestors]);
+    const directChildren = sortChildTasksForDisplay(allTasks.filter(t => t.parentTaskId === task.id));
+    const directChildCount = directChildren.length;
+    const completedChildCount = directChildren.filter((t) => t.isArchived || t.status === 'done' || t.status === 'cancelled').length;
+    const childProgressPercent = directChildCount > 0
+        ? Math.round((completedChildCount / directChildCount) * 100)
+        : 0;
+    const checklistItems = React.useMemo(() => parseChecklistLines(task.description || ''), [task.description]);
+    const checklistTotal = checklistItems.length;
+    const checklistCompleted = checklistTotal > 0
+        ? checklistItems.filter(item => item.completed).length
+        : 0;
+    const isParentTask = directChildCount > 0;
+    const [showChildCards, setShowChildCards] = React.useState(false);
+    const handleToggleChildCards = (e) => {
+        e.stopPropagation();
+        setShowChildCards(prev => !prev);
+    };
+    return (_jsxs("div", { className: `${cardClasses} ${showLinkedFeedback ? styles.taskItemLinkedFeedback : ''}`, onClick: () => onClick?.(task), style: cardStyle, children: [showLinkedFeedback && (_jsx("div", { className: styles.taskLinkFeedbackPill, children: "Linked as child" })), showParentRelationship && ancestors.length > 0 && (compressed ? (_jsxs("div", { className: styles.taskParentCompact, title: `Ancestors: ${orderedAncestors.map((ancestor) => ancestor.task?.title || ancestor.id).join(' > ')}`, children: [_jsx(Icons.CornerUpLeft, { size: 11 }), _jsx("span", { children: `Ancestors: ${orderedAncestors.map((ancestor) => ancestor.id.split('-').slice(-1)[0]).join(' > ')}` })] })) : (orderedAncestors.map((ancestor) => {
+                const ancestorTask = ancestor.task;
+                const ancestorPriorityConfig = ancestorTask ? priorities.find(p => String(p.value) === String(ancestorTask.priority)) : null;
+                const ancestorPriorityName = ancestorPriorityConfig
+                    ? ancestorPriorityConfig.label.toLowerCase().replace(/\s+/g, '-')
+                    : String(ancestorTask?.priority ?? '');
+                const ancestorDisplayPriority = ancestorTask ? getLegacyPriorityClass(ancestorTask.priority, ancestorPriorityName) : '';
+                const ancestorPriorityColor = resolveColor(ancestorPriorityConfig?.color);
+                const ancestorHasLegacyClass = !!(ancestorDisplayPriority && styles[`priorityItem_${ancestorDisplayPriority}`]);
+                const ancestorCardStyle = {
+                    ...(ancestorPriorityColor ? {
+                        borderLeftColor: ancestorPriorityColor,
+                        [`--priority-${ancestorDisplayPriority}`]: ancestorPriorityColor
+                    } : {}),
+                    ...(!ancestorHasLegacyClass && ancestorPriorityColor ? { borderLeft: `4px solid ${ancestorPriorityColor}` } : {})
+                };
+                return (_jsx("div", { className: `${styles.taskItem} ${styles.compressed} ${styles.taskChildMiniTask} ${styles.taskParentMiniTask} ${ancestorTask?.isArchived ? styles.taskChildMiniTaskArchived : ''} ${styles[`priorityItem_${ancestorDisplayPriority}`] || ''}`, style: ancestorCardStyle, title: ancestorTask ? ancestorTask.title : `Ancestor: ${ancestor.id}`, onClick: (e) => {
+                        e.stopPropagation();
+                        if (ancestorTask)
+                            onClick?.(ancestorTask);
+                        else
+                            onOpenTaskById?.(ancestor.id);
+                    }, children: _jsxs("div", { className: styles.taskChildMiniRow, children: [_jsxs("button", { type: "button", className: `${styles.taskIdBadge} ${styles.taskParentIdBtn} ${copiedId === ancestor.id ? styles.copiedId : ''}`, onClick: (e) => onCopyId?.(e, ancestor.id), title: "Copy ancestor task ID", children: [copiedId === ancestor.id ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }), _jsxs("span", { children: ["ID", _jsxs("span", { className: styles.taskIdText, children: [": ", ancestor.id.split('-').slice(-1)[0]] })] })] }), _jsx("div", { className: styles.taskParentTitle, children: ancestorTask?.title || `Ancestor: ${ancestor.id}` }), ancestor.id === (task.parentTaskId || '') && onClearParentTask && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.taskChildUnlinkBtn}`, onClick: (e) => {
+                                    e.stopPropagation();
+                                    onClearParentTask(task.id);
+                                }, title: "Unlink parent", "aria-label": `Unlink parent for ${task.id}`, children: _jsx(X, { size: 12 }) }))] }) }, ancestor.id));
+            }))), _jsxs("div", { className: styles.taskHeader, children: [_jsxs("button", { type: "button", className: `${styles.taskIdBadge} ${copiedId === task.id ? styles.copiedId : ''} ${isArchived ? styles.archiveBadge : ''}`, onClick: (e) => onCopyId?.(e, task.id), title: "Click to copy Task ID", children: [copiedId === task.id ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }), _jsxs("span", { children: ["ID", _jsxs("span", { className: styles.taskIdText, children: [": ", renderHighlighted(task.id.split('-').slice(-1)[0], searchQuery)] })] })] }), _jsx("div", { className: styles.taskActions, onClick: (e) => e.stopPropagation(), children: !isArchived ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: `${styles.actionBtn} ${task.status === 'in-progress' ? styles.workingBtn : styles.startWorkBtn}`, style: compressed ? { width: '24px', height: '24px', padding: 0 } : {}, onClick: () => onToggleInProgress?.(task), title: task.status === 'in-progress' ? 'Stop Working' : 'Start Working', children: task.status === 'in-progress' ? _jsx(Pause, { size: compressed ? 12 : 16 }) : _jsx(Play, { size: compressed ? 12 : 16 }) }), _jsx("button", { type: "button", className: `${styles.actionBtn} ${task.status === 'review' ? styles.reviewActiveBtn : styles.reviewBtn}`, style: compressed ? { width: '24px', height: '24px', padding: 0 } : {}, onClick: () => onToggleReview?.(task), title: task.status === 'review' ? 'Unlock & Continue Work' : 'Ready for Review', children: _jsx(Sparkles, { size: compressed ? 12 : 16 }) }), _jsx("button", { type: "button", className: `${styles.actionBtn} ${task.status === 'done' ? styles.completeActiveBtn : styles.completeBtn}`, style: compressed ? { width: '24px', height: '24px', padding: 0 } : {}, onClick: () => onToggleComplete?.(task), title: task.status === 'done' ? 'Unmark Complete' : 'Mark Complete', children: _jsx(Check, { size: compressed ? 12 : 16 }) }), _jsx("button", { type: "button", className: `${styles.actionBtn} ${task.status === 'cancelled' ? styles.deleteActiveBtn : styles.deleteBtn}`, style: compressed ? { width: '24px', height: '24px', padding: 0 } : {}, onClick: () => onToggleCancel?.(task), title: task.status === 'cancelled' ? 'Unmark Cancelled' : 'Cancel Task', children: _jsx(Ban, { size: compressed ? 12 : 16 }) }), _jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.archiveTaskBtn} ${!(task.status === 'done' || task.status === 'cancelled') ? styles.disabledBtn : ''}`, style: compressed ? { width: '24px', height: '24px', padding: 0 } : {}, onClick: () => (task.status === 'done' || task.status === 'cancelled') && onArchiveTask?.(task), disabled: !(task.status === 'done' || task.status === 'cancelled'), title: task.status === 'done' || task.status === 'cancelled' ? "Archive Now" : "Complete task to archive", children: _jsx(Archive, { size: compressed ? 12 : 16 }) })] })) : ((onUnarchive || onDelete) ? (_jsxs(_Fragment, { children: [onUnarchive && (_jsx("button", { type: "button", className: styles.actionBtn, onClick: () => onUnarchive(task.id), title: "Restore", children: _jsx(Icons.RotateCcw, { size: 16 }) })), onDelete && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.deleteBtn}`, onClick: () => onDelete(task.id), title: "Delete Permanently", children: _jsx(Icons.Trash2, { size: 16 }) }))] })) : null) })] }), _jsxs("div", { className: styles.taskContent, children: [/* Meta Badges moved to bottom */ isArchived && (_jsx("div", { className: styles.taskMeta, style: { marginBottom: '8px', marginTop: 0 } })), _jsxs("div", { children: [_jsxs("div", { className: styles.taskTitle, style: compressed ? { fontSize: '13px', lineHeight: '1.4' } : {}, children: [isArchived && '✓ ', renderHighlighted(task.title, searchQuery)] }), task.description && !isArchived && !compressed && (_jsx("div", { className: styles.taskDescription, children: _jsx(Markdown, { onTaskIdClick: onOpenTaskById, children: task.description }) }))] }), (task.attachments || task.screenshots) && (task.attachments || task.screenshots).length > 0 && !isArchived && !compressed && (_jsx("div", { className: styles.screenshotThumbnails, children: (task.attachments || task.screenshots || []).map((screenshot, idx) => {
+                            const path = typeof screenshot === 'string' ? screenshot : screenshot.path;
+                            const fsPath = typeof screenshot === 'string' ? undefined : screenshot.fsPath;
+                            const name = getContextName(screenshot);
+                            if (!isImagePath(path)) {
+                                const fileType = getContextType(screenshot);
+                                return (_jsx("button", { type: "button", className: styles.contextDocThumb, onClick: (e) => {
+                                        e.stopPropagation();
+                                        if (dispatchOpenMarkdownDocument(path, fsPath))
+                                            return;
+                                        window.open(path, '_blank');
+                                    }, title: name, style: { '--context-doc-accent': getContextTypeAccent(fileType) }, children: _jsx("span", { className: styles.contextDocType, children: fileType }) }, idx));
+                            }
+                            return (_jsx("div", { className: styles.screenshotThumbnail, onClick: (e) => {
+                                    e.stopPropagation();
+                                    window.open(path, '_blank');
+                                }, children: _jsx("img", { src: path, alt: `Screenshot ${idx}` }) }, idx));
+                        }) })), task.status === 'cancelled' && task.canceledReason && !compressed && (_jsxs("div", { className: styles.taskCancellationReason, children: [_jsx("strong", { children: "Cancellation Reason:" }), " ", renderHighlighted(task.canceledReason, searchQuery)] })), task.comments && task.comments.length > 0 && !isArchived && !compressed && (_jsxs("div", { className: styles.taskLatestComment, children: [_jsx("strong", { children: "Latest Activity:" }), " ", renderHighlighted(task.comments[task.comments.length - 1].text.length > 120
+                                ? task.comments[task.comments.length - 1].text.substring(0, 120) + '...'
+                                : task.comments[task.comments.length - 1].text, searchQuery)] })), task.specialists && task.specialists.length > 0 && !isArchived && !compressed && (_jsx("div", { className: styles.taskSpecialists, children: task.specialists.map(p => {
+                            const specialist = availableSpecialists.find(ap => ap.value === p);
+                            return (_jsxs("span", { className: styles.specialistBadge, title: specialist?.label || p, children: [_jsx(User, { size: 10 }), specialist?.label || p] }, p));
+                        }) })), !isArchived && taxonomies.length > 0 && !compressed && (_jsx("div", { className: `${styles.taskSpecialists} ${styles.taxonomiesList}`, children: taxonomies.map(tax => {
+                            const val = task.taxonomies?.[tax.id];
+                            if (!val)
+                                return null;
+                            const values = Array.isArray(val) ? val : [val];
+                            return values.map(v => {
+                                const opt = tax.options.find(o => o.value === v);
+                                if (!opt)
+                                    return null;
+                                const IconComp = Icons[opt.icon || 'Layer'] || Layers;
+                                const color = resolveColor(opt.color) || 'var(--text-primary)';
+                                return (_jsx("span", { className: styles.specialistBadge, style: {
+                                        borderColor: `${color}50`,
+                                        backgroundColor: `${color}15`,
+                                        color: color
+                                    }, title: toTitleCase(opt.label), children: _jsx(IconComp, { size: 10 }) }, `${tax.id}-${v}`));
+                            });
+                        }) })), isParentTask && (compressed ? (_jsxs("div", { className: styles.taskChildrenSummaryBadges, children: [_jsxs("div", { className: styles.taskChildrenCountBadge, title: `${directChildCount} child tasks`, children: [_jsx(Layers, { size: 12 }), _jsx("span", { children: `Child Tasks: ${directChildCount}` })] }), _jsx("div", { className: styles.taskChildrenProgressBar, title: `${completedChildCount} of ${directChildCount} child tasks are done/cancelled (${childProgressPercent}%)`, children: _jsx("div", { className: styles.taskChildrenProgressBarFill, style: { width: `${childProgressPercent}%` } }) }), _jsx("div", { className: styles.taskChildrenProgressText, children: `${completedChildCount}/${directChildCount} • ${childProgressPercent}%` })] })) : (_jsxs("div", { className: styles.taskChildrenList, children: [_jsxs("div", { className: styles.taskChildrenSummaryBadges, children: [_jsx("div", { className: styles.taskChildrenProgressBar, title: `${completedChildCount} of ${directChildCount} child tasks are done/cancelled (${childProgressPercent}%)`, children: _jsx("div", { className: styles.taskChildrenProgressBarFill, style: { width: `${childProgressPercent}%` } }) }), _jsxs("div", { className: styles.taskChildrenMetaRow, children: [_jsxs("button", { type: "button", className: styles.taskChildrenToggleBtn, onClick: handleToggleChildCards, title: showChildCards ? 'Hide child tasks' : 'Show child tasks', children: [showChildCards ? _jsx(ChevronDown, { size: 12 }) : _jsx(ChevronRight, { size: 12 }), _jsx("span", { children: `Child Tasks: ${directChildCount}` })] }), _jsx("div", { className: styles.taskChildrenProgressText, children: `${completedChildCount}/${directChildCount} • ${childProgressPercent}%` })] })] }), showChildCards && (_jsx("div", { className: `${styles.taskChildrenItems} ${directChildCount > 5 ? styles.taskChildrenItemsScrollable : ''}`, children: directChildren.map((child) => {
+                                    const childPriorityConfig = priorities.find(p => String(p.value) === String(child.priority));
+                                    const childPriorityName = childPriorityConfig ? childPriorityConfig.label.toLowerCase().replace(/\s+/g, '-') : String(child.priority);
+                                    const childDisplayPriority = getLegacyPriorityClass(child.priority, childPriorityName);
+                                    const childPriorityColor = resolveColor(childPriorityConfig?.color);
+                                    const childHasLegacyClass = !!styles[`priorityItem_${childDisplayPriority}`];
+                                    const childCardStyle = {
+                                        ...(childPriorityColor ? {
+                                            borderLeftColor: childPriorityColor,
+                                            [`--priority-${childDisplayPriority}`]: childPriorityColor
+                                        } : {}),
+                                        ...(!childHasLegacyClass && childPriorityColor ? { borderLeft: `4px solid ${childPriorityColor}` } : {})
+                                    };
+                                    return (_jsx("div", { className: `${styles.taskItem} ${styles.compressed} ${styles.taskChildMiniTask} ${child.isArchived ? styles.taskChildMiniTaskArchived : ''} ${styles[`priorityItem_${childDisplayPriority}`] || ''}`, style: childCardStyle, onClick: (e) => {
+                                            e.stopPropagation();
+                                            onClick?.(child);
+                                        }, children: _jsxs("div", { className: styles.taskChildMiniRow, children: [_jsxs("button", { type: "button", className: `${styles.taskIdBadge} ${styles.childTaskIdButton} ${copiedId === child.id ? styles.copiedId : ''}`, onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        onCopyId?.(e, child.id);
+                                                    }, title: "Click to copy Child Task ID", children: [copiedId === child.id ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }), _jsxs("span", { children: ["ID", _jsxs("span", { className: styles.taskIdText, children: [": ", child.id.split('-').slice(-1)[0]] })] })] }), _jsx("div", { className: styles.taskChildMiniTitle, title: child.title, children: child.title }), onUnlinkChildTask && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.taskChildUnlinkBtn}`, onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        onUnlinkChildTask(child.id);
+                                                    }, title: "Unlink child", "aria-label": `Remove child ${child.id}`, children: _jsx(X, { size: 12 }) }))] }) }, child.id));
+                                }) }))] }))), _jsx("div", { className: styles.taskMeta, children: isArchived ? (_jsx("span", { children: task.category })) : (_jsx(_Fragment, { children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', marginBottom: compressed ? '0px' : '4px' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [(() => {
+                                                const color = resolveColor(categoryConfig?.color);
+                                                const iconName = categoryConfig?.icon || 'Folder';
+                                                const IconComp = Icons[iconName] || Icons.Folder;
+                                                return (_jsx("span", { className: styles.metaBadge, title: toTitleCase(task.category), style: {
+                                                        color: color || 'var(--text-secondary)',
+                                                        backgroundColor: color ? `${color}15` : 'var(--bg-tertiary)',
+                                                        borderColor: color ? `${color}40` : 'transparent'
+                                                    }, children: _jsx(IconComp, { size: 14 }) }));
+                                            })(), _jsx("span", { className: `${styles.metaBadge} ${styles[`type_${task.type}`] || ''}`, title: toTitleCase(task.type || 'feature'), style: {
+                                                    color: `var(--type-color, ${typeColor})`,
+                                                    backgroundColor: `color-mix(in srgb, var(--type-color, ${typeColor}), transparent 90%)`,
+                                                    borderColor: `color-mix(in srgb, var(--type-color, ${typeColor}), transparent 75%)`
+                                                }, children: getIconForType(task.type, 14) }), (() => {
+                                                const approachConfig = approaches.find(a => a.value === task.approach);
+                                                const color = resolveColor(approachConfig?.color);
+                                                const iconName = approachConfig?.icon || 'HelpCircle';
+                                                const IconComp = Icons[iconName] || Icons.HelpCircle;
+                                                return (_jsx("span", { className: `${styles.metaBadge} ${styles[`approach_${task.approach || 'default'}`] || ''}`, title: toTitleCase(task.approach || 'Default'), style: {
+                                                        color: color || 'var(--text-muted)',
+                                                        backgroundColor: color ? `${color}15` : 'var(--bg-tertiary)',
+                                                        borderColor: color ? `${color}40` : 'var(--border-primary)'
+                                                    }, children: _jsx(IconComp, { size: 14 }) }));
+                                            })(), priorityConfig && (_jsx("span", { className: styles.metaBadge, style: {
+                                                    color: priorityColor || 'var(--text-secondary)',
+                                                    backgroundColor: priorityColor ? `${priorityColor}15` : 'var(--bg-tertiary)',
+                                                    borderColor: priorityColor ? `${priorityColor}40` : 'var(--border-color)'
+                                                }, title: `${priorityConfig.label}`, children: (() => {
+                                                    const iconName = priorityConfig.icon || 'AlertCircle';
+                                                    const IconComp = Icons[iconName] || Icons.AlertCircle;
+                                                    return _jsx(IconComp, { size: 14 });
+                                                })() })), task.comments && task.comments.length > 0 && (_jsxs("span", { className: styles.metaBadge, title: `${task.comments.length} comments`, style: {
+                                                    color: 'var(--text-muted)',
+                                                    backgroundColor: 'var(--bg-tertiary)',
+                                                    borderColor: 'var(--border-primary)',
+                                                    gap: '4px',
+                                                    padding: '0 8px'
+                                                }, children: [_jsx(MessageSquare, { size: 14 }), _jsx("span", { children: task.comments.length })] })), checklistTotal > 0 && (_jsxs("span", { className: styles.metaBadge, title: `${checklistCompleted}/${checklistTotal} checklist items complete`, style: {
+                                                    color: 'var(--text-muted)',
+                                                    backgroundColor: 'var(--bg-tertiary)',
+                                                    borderColor: 'var(--border-primary)',
+                                                    gap: '4px',
+                                                    padding: '0 8px'
+                                                }, children: [_jsx(ClipboardList, { size: 14 }), _jsx("span", { children: `${checklistCompleted}/${checklistTotal}` })] }))] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsxs("span", { className: styles.metaBadge, title: `AI-estimated complexity: ${complexityLabel} (${normalizedComplexity}/5)`, style: {
+                                                    color: complexityColor,
+                                                    backgroundColor: `color-mix(in srgb, ${complexityColor}, transparent 88%)`,
+                                                    borderColor: `color-mix(in srgb, ${complexityColor}, transparent 72%)`,
+                                                    gap: '4px',
+                                                    padding: '0 8px'
+                                                }, children: [_jsx(Gauge, { size: 14 }), !compressed && _jsx("span", { children: complexityLabel })] }), _jsx("span", { className: styles.metaBadge, title: task.assignee === 'agent'
+                                                    ? 'Assigned to: AI'
+                                                    : task.assignee === 'user'
+                                                        ? 'Assigned to: User'
+                                                        : 'Assigned to: Unassigned', "aria-label": task.assignee === 'agent'
+                                                    ? 'Assigned to AI'
+                                                    : task.assignee === 'user'
+                                                        ? 'Assigned to User'
+                                                        : 'Unassigned', style: {
+                                                    backgroundColor: task.assignee === 'agent'
+                                                        ? 'color-mix(in srgb, var(--color-violet-500, #8b5cf6), transparent 88%)'
+                                                        : task.assignee === 'user'
+                                                            ? 'color-mix(in srgb, var(--color-green-500, #22c55e), transparent 88%)'
+                                                            : 'color-mix(in srgb, var(--text-secondary, #888), transparent 88%)',
+                                                    padding: '0 8px',
+                                                    color: task.assignee === 'agent'
+                                                        ? 'var(--color-violet-500, #8b5cf6)'
+                                                        : task.assignee === 'user'
+                                                            ? 'var(--color-green-500, #22c55e)'
+                                                            : 'var(--text-secondary, #888)',
+                                                    borderColor: task.assignee === 'agent'
+                                                        ? 'color-mix(in srgb, var(--color-violet-500, #8b5cf6), transparent 72%)'
+                                                        : task.assignee === 'user'
+                                                            ? 'color-mix(in srgb, var(--color-green-500, #22c55e), transparent 72%)'
+                                                            : 'color-mix(in srgb, var(--text-secondary, #888), transparent 70%)',
+                                                    display: 'flex',
+                                                    alignItems: 'center'
+                                                }, children: task.assignee === 'agent'
+                                                    ? _jsx(Bot, { size: compressed ? 14 : 16 })
+                                                    : task.assignee === 'user'
+                                                        ? _jsx(User, { size: compressed ? 14 : 16 })
+                                                        : _jsx(HelpCircle, { size: compressed ? 14 : 16 }) })] })] }) })) })] })] }));
+};

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

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

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

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import { TaskCard } from './TaskCard';
+const baseTask = (overrides) => ({
+    id: 'task-default',
+    title: 'Task',
+    description: null,
+    category: 'general',
+    type: 'feature',
+    priority: 2,
+    status: 'task',
+    createdAt: '2026-02-13T00:00:00.000Z',
+    ...overrides
+});
+describe('TaskCard parent/child progress', () => {
+    it('counts archived children as completed in progress percent', () => {
+        const parent = baseTask({ id: 'task-parent', title: 'Parent Task' });
+        const childDone = baseTask({
+            id: 'task-child-done',
+            title: 'Done Child',
+            parentTaskId: parent.id,
+            status: 'done'
+        });
+        const childArchived = baseTask({
+            id: 'task-child-archived',
+            title: 'Archived Child',
+            parentTaskId: parent.id,
+            status: 'task',
+            isArchived: true
+        });
+        render(_jsx(TaskCard, { task: parent, allTasks: [parent, childDone, childArchived], onClick: () => { }, onCopyId: () => { } }));
+        const progressBar = screen.getByTitle('2 of 2 child tasks are done/cancelled (100%)');
+        expect(progressBar).toBeInTheDocument();
+        const fill = progressBar.firstElementChild;
+        expect(fill).toBeTruthy();
+        expect(fill?.style.width).toBe('100%');
+    });
+    it('renders archived child tasks after non-archived child tasks', async () => {
+        const user = userEvent.setup();
+        const parent = baseTask({ id: 'task-parent-2', title: 'Parent Task 2' });
+        const activeChild = baseTask({
+            id: 'task-child-active',
+            title: 'Active Child',
+            parentTaskId: parent.id,
+            status: 'task',
+            isArchived: false,
+            createdAt: '2026-02-13T02:00:00.000Z'
+        });
+        const archivedChild = baseTask({
+            id: 'task-child-archived-2',
+            title: 'Archived Child',
+            parentTaskId: parent.id,
+            status: 'done',
+            isArchived: true,
+            createdAt: '2026-02-13T03:00:00.000Z'
+        });
+        const { container } = render(_jsx(TaskCard, { task: parent, allTasks: [parent, archivedChild, activeChild], onClick: () => { }, onCopyId: () => { } }));
+        await user.click(screen.getByRole('button', { name: /child tasks: 2/i }));
+        const text = container.textContent || '';
+        const activeIndex = text.indexOf('Active Child');
+        const archivedIndex = text.indexOf('Archived Child');
+        expect(activeIndex).toBeGreaterThanOrEqual(0);
+        expect(archivedIndex).toBeGreaterThanOrEqual(0);
+        expect(activeIndex).toBeLessThan(archivedIndex);
+    });
+    it('renders markdown context attachments with MD type badge', () => {
+        const task = baseTask({
+            id: 'task-md-context',
+            title: 'Task with markdown context',
+            screenshots: [
+                {
+                    path: '/api/taskforce/context/task-data%2Ftask-md-context%2Fattachments%2Fnotes-123.bin',
+                    fsPath: '.taskforce/task-data/task-md-context/attachments/notes.md',
+                    caption: 'notes.md'
+                }
+            ]
+        });
+        render(_jsx(TaskCard, { task: task, allTasks: [task], onClick: () => { }, onCopyId: () => { } }));
+        expect(screen.getByText('MD')).toBeInTheDocument();
+    });
+    it('renders full ancestor chain (parent, grandparent, great-grandparent and above)', () => {
+        const root = baseTask({ id: 'task-root', title: 'Root' });
+        const greatGrand = baseTask({ id: 'task-great-grand', title: 'Great Grand', parentTaskId: root.id });
+        const grand = baseTask({ id: 'task-grand', title: 'Grand', parentTaskId: greatGrand.id });
+        const parent = baseTask({ id: 'task-parent-chain', title: 'Parent', parentTaskId: grand.id });
+        const leaf = baseTask({ id: 'task-leaf', title: 'Leaf', parentTaskId: parent.id });
+        render(_jsx(TaskCard, { task: leaf, allTasks: [leaf, parent, grand, greatGrand, root], onClick: () => { }, onCopyId: () => { } }));
+        expect(screen.getByText('Parent')).toBeInTheDocument();
+        expect(screen.getByText('Grand')).toBeInTheDocument();
+        expect(screen.getByText('Great Grand')).toBeInTheDocument();
+        expect(screen.getByText('Root')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,12 @@
+import type { ScreenshotItem } from '../../types';
+interface TaskContextUploadProps {
+    taskId?: string | null;
+    contextFiles: Array<string | ScreenshotItem>;
+    browsedPath?: string;
+    onBrowseLinkPath?: () => void;
+    onAddContextFile: (file: ScreenshotItem) => void;
+    onRemoveContextFile: (index: number) => void;
+    onUpdateContextCaption: (index: number, caption: string) => void;
+}
+export declare function TaskContextUpload(props: TaskContextUploadProps): import("react/jsx-runtime").JSX.Element;
+export {};