@taskforcehq/taskforce 0.3.170 → 0.3.301

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

@@ -1,47 +1,45 @@
 import React from 'react';
-import type { TaskItem, TaxonomyDefinition, CategoryConfig } from '../../types';
+import type { TaskItem, TaxonomyDefinition, CategoryConfig, WorkstreamItem, InitiativeItem } from '../../types';
+import { type TaskAssigneeOption } from '../../utils/assignees';
 interface TaskCardProps {
     task: TaskItem;
     searchQuery?: string;
     copiedId?: string | null;
-    availableSpecialists?: {
-        value: string;
-        label: string;
-    }[];
     taxonomies?: TaxonomyDefinition[];
-    priorities?: Array<{
-        value: number | string;
+    types?: Array<{
+        value: string;
         label: string;
         color?: string;
         icon?: string;
     }>;
-    approaches?: Array<{
-        value: string;
+    priorities?: Array<{
+        value: number | string;
         label: string;
         color?: string;
         icon?: string;
     }>;
     categories?: CategoryConfig[];
+    assigneeOptions?: TaskAssigneeOption[];
+    taskWorkstream?: WorkstreamItem | null;
+    taskInitiative?: InitiativeItem | null;
     isOverlay?: boolean;
     isArchived?: boolean;
+    readOnlyMode?: 'archived' | 'deleted' | null;
     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;
+    onSetStatus?: (task: TaskItem, status: TaskItem['status']) => void;
     onArchiveTask?: (task: TaskItem) => void;
     onUnarchive?: (taskId: string) => void;
     onDelete?: (taskId: string) => void;
-    onUnlinkChildTask?: (taskId: string) => void;
-    onClearParentTask?: (taskId: string) => void;
+    deleteActionTitle?: string;
     onOpenTaskById?: (taskId: string) => void;
-    showParentRelationship?: boolean;
     compressed?: boolean;
-    allTasks?: TaskItem[];
+    showStatusLabel?: boolean;
 }
-export declare const TaskCard: React.FC<TaskCardProps>;
+export declare const TaskCard: React.NamedExoticComponent<TaskCardProps>;
 export {};

package/dist/components/task/TaskCard.js

@@ -1,16 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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;
+const { MessageSquare, User, Bot, Gauge, X, ClipboardList, HelpCircle, File } = Icons;
 import styles from '../../Taskforce.module.css';
+import cardStyles from './TaskCard.module.css';
 import { Markdown } from '../ui/Markdown';
+import { TaskReferenceBadge } from './TaskReferenceBadge';
 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 { getFileTypeAccentColor, getTypeAccentColor, resolveColor } from '../../utils/constants';
+import { getPriorityClass } from '../../utils/taskNormalization.js';
 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 = [] }) => {
+import { dispatchOpenAnnotatedAttachment } from '../../utils/annotatedAttachments';
+import { getDocumentDownloadName } from '../../utils/documentNames';
+import { TaskStatusActions } from './TaskStatusActions';
+import { getTaskReferenceLabel } from '../../utils/taskReferences';
+import { getAssigneeKind, getAssigneeLabel } from '../../utils/assignees';
+import { getLatestTaskActivity, summarizeTaskActivity } from '../../utils/taskActivity';
+import { DEFAULT_TYPE_VALUE } from '../../shared/taxonomyDefaults.js';
+import { getVisibleTaxonomiesForTasks } from '../../utils/taxonomyLifecycle.js';
+import { getInitiativeReferenceLabel, getWorkstreamReferenceLabel } from '../../utils/planningReferences';
+const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [], types = [], priorities = [], categories = [], assigneeOptions = [], taskWorkstream = null, taskInitiative = null, isOverlay = false, isArchived = false, readOnlyMode = null, isRecentlyChanged = false, onClick, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, deleteActionTitle, onOpenTaskById, compressed = false, showStatusLabel = true }) => {
+    const taskReferenceLabel = getTaskReferenceLabel(task) || task.id;
+    const workstreamReferenceLabel = getWorkstreamReferenceLabel(taskWorkstream) || taskWorkstream?.id || '';
+    const initiativeReferenceLabel = getInitiativeReferenceLabel(taskInitiative) || taskInitiative?.id || '';
     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);
@@ -32,32 +44,62 @@ export const TaskCard = ({ task, searchQuery = '', copiedId = null, availableSpe
     };
     const complexityLabel = complexityLabels[normalizedComplexity];
     const complexityColor = `var(--complexity-${complexityKeys[normalizedComplexity]})`;
-    const displayPriority = getLegacyPriorityClass(task.priority, priorityName);
+    const displayPriority = getPriorityClass(task.priority, priorityName);
     const hasLegacyClass = !!styles[`priorityItem_${displayPriority}`];
-    const showLinkedFeedback = !!linkedParentIdSet?.has(task.id);
-    const showDropTargetFeedback = parentDropTargetId === task.id;
+    const assigneeKind = getAssigneeKind(task.assignee);
+    const assigneeLabel = getAssigneeLabel(task.assignee, assigneeOptions);
+    const latestActivity = React.useMemo(() => getLatestTaskActivity(task), [task]);
+    const resolvedReadOnlyMode = readOnlyMode || (task.isDeleted ? 'deleted' : (isArchived ? 'archived' : null));
+    const isReadOnly = resolvedReadOnlyMode !== null;
+    const latestActivityText = React.useMemo(() => summarizeTaskActivity(latestActivity), [latestActivity]);
+    const activityCount = Array.isArray(task.activity) && task.activity.length > 0
+        ? task.activity.length
+        : (task.comments?.length || 0);
     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 : '',
+        cardStyles.taskItem,
+        task.status === 'on-hold' ? cardStyles.onHold : '',
+        task.status === 'in-progress' ? cardStyles.inProgress : '',
+        task.status === 'review' ? cardStyles.readyForReview : '',
+        task.status === 'done' ? cardStyles.completed : '',
+        task.status === 'cancelled' ? cardStyles.cancelled : '',
+        isRecentlyChanged ? cardStyles.taskItemRecentlyChanged : '',
         styles[`priorityItem_${displayPriority}`] || '',
-        isOverlay ? styles.kanbanCardOverlay : '',
-        isArchived ? styles.archived : '',
-        compressed ? styles.compressed : ''
+        isOverlay ? cardStyles.kanbanCardOverlay : '',
+        isArchived ? cardStyles.archived : '',
+        compressed ? cardStyles.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 typeConfig = types.find((entry) => entry.value === task.type);
+    const typeColor = resolveColor(typeConfig?.color) || getTypeAccentColor(task.type);
+    const isImageAttachment = (item) => {
+        const pathValue = typeof item === 'string' ? item : item.path;
+        const fsPath = typeof item === 'string' ? '' : (item.fsPath || '').trim();
+        const displayName = typeof item === 'string' ? '' : (item.displayName || '').trim();
+        const originalFilename = typeof item === 'string' ? '' : (item.originalFilename || '').trim();
+        const caption = typeof item === 'string' ? '' : (item.caption || '').trim();
+        const candidates = [fsPath, originalFilename, displayName, caption, pathValue];
+        return candidates.some((candidate) => /\.(png|jpe?g|webp|gif)(\?|#|$)/i.test(candidate));
+    };
     const getContextName = (item) => {
         const path = typeof item === 'string' ? item : item.path;
+        const isCanonicalDocument = path.includes('/api/taskforce/documents/');
+        const displayName = typeof item === 'string' ? '' : (item.displayName || '').trim();
+        if (isCanonicalDocument && typeof item !== 'string') {
+            return getDocumentDownloadName({
+                displayName: item.displayName,
+                originalFilename: item.originalFilename,
+                fsPath: item.fsPath,
+                assetId: item.assetId || null
+            });
+        }
         const caption = typeof item === 'string' ? '' : (item.caption || '').trim();
         if (caption)
             return caption;
+        if (displayName)
+            return displayName;
+        const originalFilename = typeof item === 'string' ? '' : (item.originalFilename || '').trim();
+        if (originalFilename)
+            return originalFilename;
         const withoutQuery = path.split('?')[0].split('#')[0];
         const filename = withoutQuery.split('/').pop();
         return filename || 'Context file';
@@ -66,9 +108,12 @@ export const TaskCard = ({ task, searchQuery = '', copiedId = null, availableSpe
         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 originalFilename = typeof item === 'string' ? '' : (item.originalFilename || '').trim();
         const candidates = [];
         if (fsPath)
             candidates.push(fsPath);
+        if (originalFilename)
+            candidates.push(originalFilename);
         if (caption)
             candidates.push(caption);
         if (sourcePath.includes('/api/taskforce/context-link?path=')) {
@@ -95,20 +140,6 @@ export const TaskCard = ({ task, searchQuery = '', copiedId = null, availableSpe
         }
         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 ? {
@@ -119,90 +150,62 @@ export const TaskCard = ({ task, searchQuery = '', copiedId = null, availableSpe
     };
     // 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 visibleTaxonomies = getVisibleTaxonomiesForTasks(taxonomies, [task]);
+    const checklistItems = task.checklistItems || [];
     const checklistTotal = checklistItems.length;
     const checklistCompleted = checklistTotal > 0
-        ? checklistItems.filter(item => item.completed).length
+        ? checklistItems.filter(item => item.isCompleted).length
         : 0;
-    const isParentTask = directChildCount > 0;
-    const [showChildCards, setShowChildCards] = React.useState(false);
-    const handleToggleChildCards = (e) => {
-        e.stopPropagation();
-        setShowChildCards(prev => !prev);
+    const handleReferenceCopy = (event, label) => {
+        event.stopPropagation();
+        onCopyId?.(event, label);
     };
-    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 => {
+    return (_jsxs("div", { className: cardClasses, onClick: () => onClick?.(task), style: cardStyle, "data-task-card": "true", children: [_jsxs("div", { className: cardStyles.taskHeader, children: [_jsxs("div", { className: cardStyles.taskReferenceCluster, children: [taskInitiative ? (_jsxs(_Fragment, { children: [_jsx("span", { className: cardStyles.taskReferenceText, children: initiativeReferenceLabel }), _jsx("span", { className: cardStyles.taskReferenceDivider, children: "/" })] })) : null, taskWorkstream ? (_jsxs(_Fragment, { children: [_jsx("span", { className: cardStyles.taskReferenceText, children: workstreamReferenceLabel }), _jsx("span", { className: cardStyles.taskReferenceDivider, children: "/" })] })) : null, _jsx(TaskReferenceBadge, { copied: copiedId === taskReferenceLabel, onClick: (e) => handleReferenceCopy(e, taskReferenceLabel), title: "Copy task reference", className: isArchived ? cardStyles.archiveBadge : '', label: renderHighlighted(taskReferenceLabel, searchQuery) })] }), _jsx("div", { className: cardStyles.taskActions, onClick: (e) => e.stopPropagation(), children: !isReadOnly ? (_jsx(TaskStatusActions, { task: task, compressed: compressed, shortLabels: true, showLabel: showStatusLabel, onSetStatus: (nextTask, status) => {
+                                if (onSetStatus) {
+                                    onSetStatus(nextTask, status);
+                                    return;
+                                }
+                                if (status === 'in-progress') {
+                                    onToggleInProgress?.(nextTask);
+                                    return;
+                                }
+                                if (status === 'review') {
+                                    onToggleReview?.(nextTask);
+                                    return;
+                                }
+                                if (status === 'done') {
+                                    onToggleComplete?.(nextTask);
+                                    return;
+                                }
+                                if (status === 'cancelled') {
+                                    onToggleCancel?.(nextTask);
+                                }
+                            }, onArchiveTask: onArchiveTask })) : ((onUnarchive || onDelete) ? (_jsxs(_Fragment, { children: [onUnarchive && (_jsx("button", { type: "button", className: styles.actionBtn, onClick: () => onUnarchive(task.id), title: resolvedReadOnlyMode === 'deleted' ? 'Restore deleted task' : 'Restore archived task', children: _jsx(Icons.RotateCcw, { size: 16 }) })), onDelete && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.deleteBtn}`, onClick: () => onDelete(task.id), title: deleteActionTitle || (resolvedReadOnlyMode === 'deleted' ? 'Delete Permanently' : 'Move to Trash'), children: _jsx(Icons.Trash2, { size: 16 }) }))] })) : null) })] }), _jsxs("div", { className: cardStyles.taskContent, children: [/* Meta Badges moved to bottom */ isReadOnly && (_jsx("div", { className: `${cardStyles.taskMeta} ${cardStyles.taskMetaCompact}` })), _jsxs("div", { children: [_jsxs("div", { className: cardStyles.taskTitle, style: compressed ? { fontSize: '13px', lineHeight: '1.4' } : {}, children: [resolvedReadOnlyMode === 'archived' && '✓ ', resolvedReadOnlyMode === 'deleted' && 'Deleted: ', renderHighlighted(task.title, searchQuery)] }), task.description && !isReadOnly && !compressed && (_jsx("div", { className: cardStyles.taskDescription, children: _jsx(Markdown, { onTaskIdClick: onOpenTaskById, children: task.description }) }))] }), task.attachments && task.attachments.length > 0 && !isReadOnly && !compressed && (_jsxs("div", { className: cardStyles.attachmentThumbnails, children: [_jsx("div", { className: cardStyles.attachmentImageRow, children: (task.attachments || []).map((attachment, idx) => {
+                                    const path = typeof attachment === 'string' ? attachment : attachment.path;
+                                    if (!isImageAttachment(attachment))
+                                        return null;
+                                    return (_jsx("div", { className: cardStyles.attachmentThumbnail, onClick: (e) => {
+                                            e.stopPropagation();
+                                            if (dispatchOpenAnnotatedAttachment(typeof attachment === 'string' ? { path } : attachment, { taskId: task.id, taskReferenceLabel }))
+                                                return;
+                                            window.open(path, '_blank');
+                                        }, children: _jsx("img", { src: path, alt: `Attachment ${idx}` }) }, idx));
+                                }) }), _jsx("div", { className: cardStyles.attachmentDocumentList, children: (task.attachments || []).map((attachment, idx) => {
+                                    const path = typeof attachment === 'string' ? attachment : attachment.path;
+                                    const fsPath = typeof attachment === 'string' ? undefined : attachment.fsPath;
+                                    const name = getContextName(attachment);
+                                    if (isImageAttachment(attachment))
+                                        return null;
+                                    const fileType = getContextType(attachment);
+                                    return (_jsxs("button", { type: "button", className: cardStyles.contextDocThumb, onClick: (e) => {
+                                            e.stopPropagation();
+                                            if (dispatchOpenMarkdownDocument(attachment, fsPath))
+                                                return;
+                                            window.open(path, '_blank');
+                                        }, title: name, style: { '--context-doc-accent': getFileTypeAccentColor(fileType) }, children: [_jsxs("span", { className: cardStyles.contextDocMain, children: [_jsx("span", { className: cardStyles.contextDocIcon, "aria-hidden": "true", children: _jsx(File, { size: 13 }) }), _jsx("span", { className: cardStyles.contextDocText, children: _jsx("span", { className: cardStyles.contextDocName, children: name }) })] }), _jsx("span", { className: cardStyles.contextDocType, children: fileType })] }, idx));
+                                }) })] })), task.status === 'cancelled' && task.canceledReason && !compressed && (_jsxs("div", { className: cardStyles.taskCancellationReason, children: [_jsx("strong", { children: "Cancellation Reason:" }), " ", renderHighlighted(task.canceledReason, searchQuery)] })), latestActivityText && !isReadOnly && !compressed && (_jsxs("div", { className: cardStyles.taskLatestComment, children: [_jsx("strong", { children: "Latest Activity:" }), " ", renderHighlighted(latestActivityText.length > 120
+                                ? latestActivityText.substring(0, 120) + '...'
+                                : latestActivityText, searchQuery)] })), !isReadOnly && visibleTaxonomies.length > 0 && !compressed && (_jsx("div", { className: `${cardStyles.taskSpecialists} ${cardStyles.taxonomiesList}`, children: visibleTaxonomies.map(tax => {
                             const val = task.taxonomies?.[tax.id];
                             if (!val)
                                 return null;
@@ -211,38 +214,17 @@ export const TaskCard = ({ task, searchQuery = '', copiedId = null, availableSpe
                                 const opt = tax.options.find(o => o.value === v);
                                 if (!opt)
                                     return null;
-                                const IconComp = Icons[opt.icon || 'Layer'] || Layers;
+                                const IconComp = Icons[opt.icon || 'Layers'] || Icons.Layers;
                                 const color = resolveColor(opt.color) || 'var(--text-primary)';
+                                const taxonomyLabel = tax.status === 'retired' ? `${tax.label} (Retired)` : tax.label;
+                                const optionLabel = opt.status === 'retired' ? `${opt.label} (Retired)` : opt.label;
                                 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}`));
+                                    }, title: `${taxonomyLabel}: ${toTitleCase(optionLabel)}`, 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: [(() => {
+                        }) })), _jsx("div", { className: cardStyles.taskMeta, children: isReadOnly ? (_jsx("span", { children: task.category })) : (_jsx(_Fragment, { children: _jsxs("div", { className: cardStyles.taskMetaRow, style: compressed ? { marginBottom: 0 } : undefined, children: [_jsxs("div", { className: cardStyles.taskMetaBadgeGroup, children: [(() => {
                                                 const color = resolveColor(categoryConfig?.color);
                                                 const iconName = categoryConfig?.icon || 'Folder';
                                                 const IconComp = Icons[iconName] || Icons.Folder;
@@ -251,21 +233,16 @@ export const TaskCard = ({ task, searchQuery = '', copiedId = null, availableSpe
                                                         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: {
+                                            })(), _jsx("span", { className: `${styles.metaBadge} ${styles[`type_${task.type}`] || ''}`, title: toTitleCase(task.type || DEFAULT_TYPE_VALUE), 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: {
+                                                }, children: typeConfig?.icon
+                                                    ? (() => {
+                                                        const TypeIcon = Icons[typeConfig.icon] || HelpCircle;
+                                                        return _jsx(TypeIcon, { size: 14 });
+                                                    })()
+                                                    : getIconForType(task.type, 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)'
@@ -273,13 +250,13 @@ export const TaskCard = ({ task, searchQuery = '', copiedId = null, availableSpe
                                                     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: {
+                                                })() })), activityCount > 0 && (_jsxs("span", { className: styles.metaBadge, title: `${activityCount} activity items`, 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: {
+                                                }, children: [_jsx(MessageSquare, { size: 14 }), _jsx("span", { children: activityCount })] })), 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)',
@@ -291,36 +268,29 @@ export const TaskCard = ({ task, searchQuery = '', copiedId = null, availableSpe
                                                     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'
+                                                }, children: [_jsx(Gauge, { size: 14 }), !compressed && _jsx("span", { children: complexityLabel })] }), _jsx("span", { className: styles.metaBadge, title: `Assigned to: ${assigneeLabel}`, "aria-label": assigneeKind === 'unassigned' ? 'Unassigned' : `Assigned to ${assigneeLabel}`, style: {
+                                                    backgroundColor: assigneeKind === 'agent'
                                                         ? 'color-mix(in srgb, var(--color-violet-500, #8b5cf6), transparent 88%)'
-                                                        : task.assignee === 'user'
+                                                        : assigneeKind === 'member'
                                                             ? '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'
+                                                    color: assigneeKind === 'agent'
                                                         ? 'var(--color-violet-500, #8b5cf6)'
-                                                        : task.assignee === 'user'
+                                                        : assigneeKind === 'member'
                                                             ? 'var(--color-green-500, #22c55e)'
                                                             : 'var(--text-secondary, #888)',
-                                                    borderColor: task.assignee === 'agent'
+                                                    borderColor: assigneeKind === 'agent'
                                                         ? 'color-mix(in srgb, var(--color-violet-500, #8b5cf6), transparent 72%)'
-                                                        : task.assignee === 'user'
+                                                        : assigneeKind === 'member'
                                                             ? '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'
+                                                }, children: assigneeKind === 'agent'
                                                     ? _jsx(Bot, { size: compressed ? 14 : 16 })
-                                                    : task.assignee === 'user'
+                                                    : assigneeKind === 'member'
                                                         ? _jsx(User, { size: compressed ? 14 : 16 })
                                                         : _jsx(HelpCircle, { size: compressed ? 14 : 16 }) })] })] }) })) })] })] }));
 };
+export const TaskCard = React.memo(TaskCardInner);