@taskforcehq/taskforce 0.3.169 → 0.3.300

package/dist/components/task/TaskKanban.planning-drop.test.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+let lastDndContextProps = null;
+let mockPointerCollisions = [];
+let mockClosestCornersResult = [];
+vi.mock('@dnd-kit/core', async () => {
+    const actual = await vi.importActual('@dnd-kit/core');
+    return {
+        ...actual,
+        DndContext: ({ children, ...props }) => {
+            lastDndContextProps = props;
+            return _jsx("div", { "data-testid": "mock-dnd-context", children: children });
+        },
+        useSensors: () => [],
+        useSensor: () => ({}),
+        useDroppable: () => ({ setNodeRef: () => { }, isOver: false }),
+        DragOverlay: ({ children }) => _jsx(_Fragment, { children: children }),
+        pointerWithin: () => mockPointerCollisions,
+    };
+});
+vi.mock('@dnd-kit/sortable', async () => {
+    const actual = await vi.importActual('@dnd-kit/sortable');
+    return {
+        ...actual,
+        SortableContext: ({ children }) => _jsx(_Fragment, { children: children }),
+        useSortable: () => ({
+            attributes: {},
+            listeners: {},
+            setNodeRef: () => { },
+            transform: null,
+            transition: null,
+            isDragging: false
+        }),
+        sortableKeyboardCoordinates: () => ({ x: 0, y: 0 }),
+        verticalListSortingStrategy: () => null,
+        closestCorners: () => mockClosestCornersResult,
+    };
+});
+import { TaskKanban } from './TaskKanban';
+const makeTask = (overrides = {}) => ({
+    id: 'task-planning-drop',
+    title: 'Planning drop task',
+    description: null,
+    category: 'cat-a',
+    type: 'feature',
+    priority: 2,
+    status: 'task',
+    createdAt: '2026-01-01T00:00:00.000Z',
+    ...overrides
+});
+describe('TaskKanban planning drag/drop', () => {
+    beforeEach(() => {
+        lastDndContextProps = null;
+        mockPointerCollisions = [];
+        mockClosestCornersResult = [];
+    });
+    it('prefers planning drop zones over board collisions in custom collision detection', () => {
+        const task = makeTask();
+        render(_jsx(TaskKanban, { tasks: [task], allTasks: [task], columns: [{ value: 'task', label: 'To Do', color: '#3b82f6', icon: 'Folder' }], groupBy: "status", onUpdateTask: vi.fn(), onTaskClick: vi.fn() }));
+        expect(lastDndContextProps?.collisionDetection).toBeTypeOf('function');
+        mockPointerCollisions = [
+            { id: 'task', data: { droppableContainer: { id: 'task' } } },
+            { id: 'planning-workstream-target:ws-1', data: { droppableContainer: { id: 'planning-workstream-target:ws-1' } } },
+        ];
+        const result = lastDndContextProps?.collisionDetection?.({
+            pointerCoordinates: { x: 100, y: 100 },
+            droppableContainers: [],
+            droppableRects: new Map(),
+        });
+        expect(result).toEqual([mockPointerCollisions[1]]);
+    });
+    it('assigns a task to a workstream on planning drop', () => {
+        const onAssignTaskToWorkstream = vi.fn();
+        const task = makeTask();
+        render(_jsx(TaskKanban, { tasks: [task], allTasks: [task], columns: [{ value: 'task', label: 'To Do', color: '#3b82f6', icon: 'Folder' }], groupBy: "status", onUpdateTask: vi.fn(), onTaskClick: vi.fn(), onAssignTaskToWorkstream: onAssignTaskToWorkstream }));
+        lastDndContextProps?.onDragEnd?.({
+            active: { id: task.id, data: { current: { type: 'task-card', taskId: task.id } } },
+            over: { id: 'planning-workstream-target:ws-1', data: { current: { type: 'planning-workstream-target', workstreamId: 'ws-1' } } },
+        });
+        expect(onAssignTaskToWorkstream).toHaveBeenCalledWith(task.id, 'ws-1');
+    });
+    it('moves a workstream into an initiative on planning drop', () => {
+        const onAssignWorkstreamToInitiative = vi.fn();
+        const task = makeTask();
+        render(_jsx(TaskKanban, { tasks: [task], allTasks: [task], columns: [{ value: 'task', label: 'To Do', color: '#3b82f6', icon: 'Folder' }], groupBy: "status", onUpdateTask: vi.fn(), onTaskClick: vi.fn(), onAssignWorkstreamToInitiative: onAssignWorkstreamToInitiative }));
+        lastDndContextProps?.onDragEnd?.({
+            active: { id: 'planning-workstream:ws-9', data: { current: { type: 'planning-workstream', workstreamId: 'ws-9' } } },
+            over: { id: 'planning-initiative-target:in-4', data: { current: { type: 'planning-initiative-target', initiativeId: 'in-4' } } },
+        });
+        expect(onAssignWorkstreamToInitiative).toHaveBeenCalledWith('ws-9', 'in-4');
+    });
+});

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { TaskItem, CategoryConfig, TaxonomyDefinition, PriorityDefinition, ParentTaskFilterMode, TaskAssignee } from '../../types';
+import type { TaskItem, CategoryConfig, TaxonomyDefinition, PriorityDefinition, TaskAssignee, WorkstreamItem, InitiativeItem } from '../../types';
+import type { TaskAssigneeOption } from '../../utils/assignees';
 interface TaskListProps {
     tasks: TaskItem[];
     archivedTasks: TaskItem[];
@@ -7,19 +8,26 @@ interface TaskListProps {
     types: {
         value: string;
         label: string;
+        color?: string;
+        icon?: string;
+        status?: 'active' | 'retired';
     }[];
     priorities: PriorityDefinition[];
-    approaches: Array<{
+    taxonomyDisplayLabels?: {
+        category?: string;
+        type?: string;
+        priority?: string;
+    };
+    approaches?: Array<{
         value: string;
         label: string;
         color?: string;
         icon?: string;
     }>;
-    availableSpecialists: {
-        value: string;
-        label: string;
-    }[];
+    assigneeOptions?: TaskAssigneeOption[];
     taxonomies: TaxonomyDefinition[];
+    workstreams?: WorkstreamItem[];
+    initiatives?: InitiativeItem[];
     searchQuery: string;
     filterCategories: string[];
     filterTypes: string[];
@@ -30,15 +38,17 @@ interface TaskListProps {
     sortBy: string;
     sortOrder: 'asc' | 'desc';
     showArchive: boolean;
-    parentTaskFilterMode?: ParentTaskFilterMode;
-    assigneeFilterEnabled?: boolean;
+    taskScope?: 'open' | 'archived' | 'deleted';
     collapsedCategories: Record<string, boolean>;
     loadingTasks: boolean;
     filteredTasks: TaskItem[];
     filteredArchive: TaskItem[];
     groupedTasks: Record<string, TaskItem[]>;
+    filteredDeletedTasks?: TaskItem[];
+    groupedDeletedTasks?: Record<string, TaskItem[]>;
     copiedId: string | null;
     recentlyChangedTaskIds?: string[];
+    showTaskCardStatusLabel?: boolean;
     onSearchChange: (query: string) => void;
     onFilterCategoriesChange: (categories: (string | number)[]) => void;
     onFilterTypesChange: (types: (string | number)[]) => void;
@@ -49,7 +59,7 @@ interface TaskListProps {
     onSortByChange: (sortBy: string) => void;
     onSortOrderChange: () => void;
     onShowArchiveChange: (show: boolean) => void;
-    onParentTaskFilterModeChange?: (mode: ParentTaskFilterMode) => void;
+    onTaskScopeChange?: (scope: 'open' | 'archived' | 'deleted') => void;
     onClearFilters: () => void;
     onToggleCategory: (category: string) => void;
     onEditTask: (task: TaskItem) => void;
@@ -59,14 +69,15 @@ interface TaskListProps {
     onToggleReview: (task: TaskItem) => void;
     onToggleComplete: (task: TaskItem) => void;
     onToggleCancel: (task: TaskItem) => void;
+    onSetStatus?: (task: TaskItem, status: TaskItem['status']) => void;
     onArchiveTask: (task: TaskItem) => void;
     onBulkArchive: () => void;
     onUnarchive: (taskId: string) => void;
     onDelete: (taskId: string) => void;
-    onUnlinkChildTask?: (taskId: string) => void;
-    onClearParentTask?: (taskId: string) => void;
+    onDeleteAllDeleted?: () => void;
     onFetchArchive: () => void;
     onAddTaskToCategory?: (category: string) => void;
+    supplementalTasks?: TaskItem[];
     getIconForType?: (type: string) => React.ReactNode;
     renderHighlighted?: (text: string, query: string) => React.ReactNode;
 }

package/dist/components/task/TaskList.js

@@ -1,26 +1,106 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as Icons from 'lucide-react';
-const { Search, ClipboardList, ChevronRight, ChevronDown, Folder, Archive, RotateCcw, X, Plus, ArrowUpDown } = Icons;
+const { Search, ClipboardList, ChevronRight, ChevronDown, Folder, Archive, RotateCcw, X, Plus, ArrowUpDown, Trash2 } = Icons;
 import styles from '../../Taskforce.module.css';
 import { MultiSelectFilter } from '../ui/MultiSelectFilter';
 import { STATUS_OPTIONS, IconMap, resolveColor } from '../../utils/constants';
+import { buildCustomTaxonomySortOptions } from '../../utils/taxonomySorting.js';
+import { getFilterVisibleTaxonomyOptions } from '../../utils/taxonomyFilterOptions.js';
+import { getVisibleTaxonomiesForTasks } from '../../utils/taxonomyLifecycle.js';
 import { TaskCard } from './TaskCard';
 import { t } from '../../localization';
+import { DeleteAllDeletedAction, TaskScopeToggle } from '../views/panels/FilterToolbarControls';
 export const TaskList = forwardRef((props, ref) => {
-    const { tasks, archivedTasks, categories, types, priorities, approaches, availableSpecialists, searchQuery, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees = ['agent', 'user', 'unassigned'], filterTaxonomies, sortBy, sortOrder, showArchive, parentTaskFilterMode = 'all', assigneeFilterEnabled = false, collapsedCategories, loadingTasks, filteredTasks, filteredArchive, groupedTasks, copiedId, recentlyChangedTaskIds = [], onSearchChange, onFilterCategoriesChange, onFilterTypesChange, onFilterPrioritiesChange, onFilterStatusChange, onFilterAssigneesChange, onTaxonomyFilterChange, onSortByChange, onSortOrderChange, onShowArchiveChange, onParentTaskFilterModeChange, onClearFilters, onToggleCategory, onEditTask, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onArchiveTask, onBulkArchive, onUnarchive, onDelete, onUnlinkChildTask, onClearParentTask, onFetchArchive, onAddTaskToCategory, taxonomies, } = props;
+    const { tasks, archivedTasks, categories, types, priorities, taxonomyDisplayLabels, assigneeOptions = [], workstreams = [], initiatives = [], searchQuery, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees = [], filterTaxonomies, sortBy, sortOrder, showArchive, taskScope, collapsedCategories, loadingTasks, filteredTasks, filteredArchive, groupedTasks, filteredDeletedTasks = [], groupedDeletedTasks = {}, copiedId, recentlyChangedTaskIds = [], showTaskCardStatusLabel = true, onSearchChange, onFilterCategoriesChange, onFilterTypesChange, onFilterPrioritiesChange, onFilterStatusChange, onFilterAssigneesChange, onTaxonomyFilterChange, onSortByChange, onSortOrderChange, onShowArchiveChange, onTaskScopeChange, onClearFilters, onToggleCategory, onEditTask, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onBulkArchive, onUnarchive, onDelete, onDeleteAllDeleted, onFetchArchive, onAddTaskToCategory, supplementalTasks = [], taxonomies, } = props;
     const changedTaskIdSet = new Set(recentlyChangedTaskIds);
-    const relationshipTasks = [...tasks, ...archivedTasks];
+    const workstreamById = React.useMemo(() => new Map(workstreams.map((workstream) => [workstream.id, workstream])), [workstreams]);
+    const initiativeById = React.useMemo(() => new Map(initiatives.map((initiative) => [initiative.id, initiative])), [initiatives]);
+    const resolveTaskHierarchy = React.useCallback((task) => {
+        const taskWorkstream = task.workstreamId ? workstreamById.get(task.workstreamId) || null : null;
+        const taskInitiative = taskWorkstream?.initiativeId ? initiativeById.get(taskWorkstream.initiativeId) || null : null;
+        return { taskWorkstream, taskInitiative };
+    }, [initiativeById, workstreamById]);
+    const relationshipTasks = [...tasks, ...archivedTasks, ...supplementalTasks];
+    const useScopeToggle = Boolean(onTaskScopeChange);
+    const handleScopeChange = onTaskScopeChange;
+    const effectiveTaskScope = taskScope ?? (showArchive ? 'archived' : 'open');
+    const activeTasks = !useScopeToggle
+        ? filteredTasks
+        : effectiveTaskScope === 'archived'
+            ? filteredArchive
+            : effectiveTaskScope === 'deleted'
+                ? filteredDeletedTasks
+                : filteredTasks;
+    const activeGroups = !useScopeToggle
+        ? groupedTasks
+        : effectiveTaskScope === 'archived'
+            ? { Archived: filteredArchive }
+            : effectiveTaskScope === 'deleted'
+                ? groupedDeletedTasks
+                : groupedTasks;
+    const activeReadOnlyMode = !useScopeToggle
+        ? null
+        : effectiveTaskScope === 'deleted'
+            ? 'deleted'
+            : effectiveTaskScope === 'archived'
+                ? 'archived'
+                : null;
+    const emptyLabel = searchQuery
+        ? t('taskList.noMatchingTasks')
+        : effectiveTaskScope === 'archived'
+            ? 'No archived tasks found.'
+            : effectiveTaskScope === 'deleted'
+                ? 'No deleted tasks found.'
+                : t('taskList.noActiveTasks');
     const visibleCategories = categories.filter(c => !c.disabled);
-    return (_jsxs("div", { className: styles.viewTab, ref: ref, children: [_jsxs("div", { className: styles.filterBar, children: [_jsxs("div", { className: styles.searchContainer, children: [_jsx(Search, { size: 16, className: styles.searchIcon }), _jsx("input", { type: "text", className: styles.searchInput, placeholder: t('taskList.searchPlaceholder'), value: searchQuery, onChange: (e) => onSearchChange(e.target.value) }), searchQuery && (_jsx("button", { className: styles.clearSearchBtn, onClick: () => onSearchChange(''), title: t('taskList.clearSearchTitle'), children: _jsx(X, { size: 14 }) }))] }), _jsxs("div", { className: styles.filterRow, children: [_jsx(MultiSelectFilter, { label: t('taskList.categoryLabel'), options: visibleCategories.map(cat => ({ value: cat.value, label: cat.label })), selected: filterCategories, onChange: onFilterCategoriesChange }), _jsx(MultiSelectFilter, { label: t('taskList.typeLabel'), options: types, selected: filterTypes, onChange: onFilterTypesChange, variant: "value" })] }), _jsxs("div", { className: styles.filterRow, children: [_jsx(MultiSelectFilter, { label: t('taskList.priorityLabel'), options: priorities, selected: filterPriorities, onChange: onFilterPrioritiesChange, variant: "value" }), _jsx(MultiSelectFilter, { label: t('taskList.statusLabel'), options: STATUS_OPTIONS, selected: filterStatus, onChange: onFilterStatusChange, variant: "value" }), assigneeFilterEnabled && (_jsx(MultiSelectFilter, { label: t('taskList.assigneeLabel'), options: [
-                                    { value: 'agent', label: 'AI' },
-                                    { value: 'user', label: 'User' },
-                                    { value: 'unassigned', label: 'Unassigned' }
-                                ], selected: filterAssignees, onChange: (vals) => onFilterAssigneesChange?.(vals), variant: "value" }))] }), taxonomies.map(tax => (_jsx(MultiSelectFilter, { label: tax.label, options: tax.options, selected: filterTaxonomies[tax.id] || [], onChange: (values) => onTaxonomyFilterChange(tax.id, values), variant: "value" }, tax.id))), _jsxs("div", { className: styles.filterRow, children: [_jsxs("div", { className: styles.sortLabel, children: [_jsx(ArrowUpDown, { size: 14, style: { marginRight: '4px' } }), " ", t('taskList.sortByLabel')] }), _jsxs("select", { value: sortBy, onChange: (e) => onSortByChange(e.target.value), className: `${styles.filterSelect} ${styles.filterSelectSort} `, children: [_jsx("option", { value: "created", children: t('taskList.sortCreated') }), _jsx("option", { value: "updated", children: t('taskList.sortUpdated') }), _jsx("option", { value: "priority", children: t('taskList.sortPriority') })] }), _jsx("button", { className: `${styles.resetFiltersBtn} ${styles.sortDirectionBtnWidget}`, onClick: onSortOrderChange, title: sortOrder === 'desc' ? t('taskList.sortDirectionDescTitle') : t('taskList.sortDirectionAscTitle'), children: sortOrder === 'desc' ? _jsx(Icons.ArrowDown, { size: 14 }) : _jsx(Icons.ArrowUp, { size: 14 }) }), _jsx("button", { className: styles.resetFiltersBtn, onClick: onClearFilters, title: t('taskList.resetFiltersTitle'), children: _jsx(RotateCcw, { size: 14 }) })] }), _jsxs("div", { className: `${styles.filterRow} ${styles.archiveRow} `, children: [_jsxs("button", { className: `${styles.bulkArchiveBtn} ${!tasks.some(t => t.status === 'done' || t.status === 'cancelled') ? styles.disabledBtn : ''} `, onClick: () => tasks.some(t => t.status === 'done' || t.status === 'cancelled') && onBulkArchive(), disabled: !tasks.some(t => t.status === 'done' || t.status === 'cancelled'), title: tasks.some(t => t.status === 'done' || t.status === 'cancelled') ? t('taskList.archiveAllTitle') : t('taskList.noTasksToArchiveTitle'), children: [_jsx(Archive, { size: 12 }), _jsx("span", { children: t('taskList.archiveFinished') })] }), _jsxs("label", { className: styles.archiveToggle, children: [_jsx("span", { children: t('taskList.linksLabel') }), _jsxs("select", { className: `${styles.filterSelect} ${styles.filterSelectSort}`, value: parentTaskFilterMode, onChange: (e) => onParentTaskFilterModeChange?.(e.target.value), children: [_jsx("option", { value: "all", children: t('taskList.linksAll') }), _jsx("option", { value: "parents", children: t('taskList.linksParents') }), _jsx("option", { value: "linked", children: t('taskList.linksLinked') }), _jsx("option", { value: "unlinked", children: t('taskList.linksUnlinked') })] })] }), _jsxs("label", { className: styles.archiveToggle, children: [_jsx("input", { type: "checkbox", checked: showArchive, onChange: (e) => {
+    const legacyCategoriesInUse = categories.filter((category) => (category.disabled && relationshipTasks.some((task) => task.category === category.value)));
+    const categoryFilterOptions = [
+        ...visibleCategories,
+        ...legacyCategoriesInUse.filter((category) => !visibleCategories.some((visible) => visible.value === category.value))
+    ].map((category) => ({
+        value: category.value,
+        label: category.disabled ? `${category.label} (Legacy)` : category.label
+    }));
+    const visibleTypes = types.filter((entry) => entry.status !== 'retired');
+    const legacyTypesInUse = types.filter((entry) => (entry.status === 'retired' && relationshipTasks.some((task) => task.type === entry.value)));
+    const typeFilterOptions = [
+        ...visibleTypes,
+        ...legacyTypesInUse.filter((entry) => !visibleTypes.some((visible) => visible.value === entry.value))
+    ].map((entry) => ({
+        value: entry.value,
+        label: entry.status === 'retired' ? `${entry.label} (Retired)` : entry.label
+    }));
+    const visibleTaxonomies = getVisibleTaxonomiesForTasks(taxonomies, relationshipTasks);
+    const filterableTaxonomies = visibleTaxonomies
+        .filter((taxonomy) => taxonomy.filterEnabled !== false)
+        .map((taxonomy) => ({
+        ...taxonomy,
+        options: getFilterVisibleTaxonomyOptions(taxonomy, relationshipTasks)
+    }));
+    const sortOptions = React.useMemo(() => ([
+        { value: 'created', label: t('taskList.sortCreated') },
+        { value: 'updated', label: t('taskList.sortUpdated') },
+        { value: 'priority', label: t('taskList.sortPriority') },
+        ...buildCustomTaxonomySortOptions(taxonomies, relationshipTasks)
+    ]), [relationshipTasks, t, taxonomies]);
+    return (_jsxs("div", { className: styles.viewTab, ref: ref, children: [_jsxs("div", { className: styles.filterBar, children: [_jsxs("div", { className: styles.searchContainer, children: [_jsx(Search, { size: 16, className: styles.searchIcon }), _jsx("input", { type: "text", className: styles.searchInput, placeholder: t('taskList.searchPlaceholder'), value: searchQuery, onChange: (e) => onSearchChange(e.target.value) }), searchQuery && (_jsx("button", { className: styles.clearSearchBtn, onClick: () => onSearchChange(''), title: t('taskList.clearSearchTitle'), children: _jsx(X, { size: 14 }) }))] }), _jsxs("div", { className: styles.filterRow, children: [_jsx(MultiSelectFilter, { label: taxonomyDisplayLabels?.category || t('taskList.categoryLabel'), options: categoryFilterOptions, selected: filterCategories, onChange: onFilterCategoriesChange, variant: "value" }), _jsx(MultiSelectFilter, { label: taxonomyDisplayLabels?.type || t('taskList.typeLabel'), options: typeFilterOptions, selected: filterTypes, onChange: onFilterTypesChange, variant: "value" })] }), _jsxs("div", { className: styles.filterRow, children: [_jsx(MultiSelectFilter, { label: taxonomyDisplayLabels?.priority || t('taskList.priorityLabel'), options: priorities, selected: filterPriorities, onChange: onFilterPrioritiesChange, variant: "value" }), _jsx(MultiSelectFilter, { label: t('taskList.statusLabel'), options: STATUS_OPTIONS, selected: filterStatus, onChange: onFilterStatusChange, variant: "value" }), _jsx(MultiSelectFilter, { label: t('taskList.assigneeLabel'), options: assigneeOptions, selected: filterAssignees, onChange: (vals) => onFilterAssigneesChange?.(vals), variant: "value" })] }), filterableTaxonomies.map(tax => (_jsx(MultiSelectFilter, { label: tax.status === 'retired' ? `${tax.label} (Retired)` : tax.label, options: tax.options.map((option) => ({
+                            ...option,
+                            label: option.status === 'retired' ? `${option.label} (Retired)` : option.label
+                        })), selected: filterTaxonomies[tax.id] || [], onChange: (values) => onTaxonomyFilterChange(tax.id, values), variant: "value" }, tax.id))), _jsxs("div", { className: styles.filterRow, children: [_jsxs("div", { className: styles.sortLabel, children: [_jsx(ArrowUpDown, { size: 14, style: { marginRight: '4px' } }), " ", t('taskList.sortByLabel')] }), _jsx("select", { value: sortBy, onChange: (e) => onSortByChange(e.target.value), className: `${styles.filterSelect} ${styles.filterSelectSort} `, children: sortOptions.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), _jsx("button", { className: `${styles.resetFiltersBtn} ${styles.sortDirectionBtnWidget}`, onClick: onSortOrderChange, title: sortOrder === 'desc' ? t('taskList.sortDirectionDescTitle') : t('taskList.sortDirectionAscTitle'), children: sortOrder === 'desc' ? _jsx(Icons.ArrowDown, { size: 14 }) : _jsx(Icons.ArrowUp, { size: 14 }) }), _jsx("button", { className: styles.resetFiltersBtn, onClick: onClearFilters, title: t('taskList.resetFiltersTitle'), children: _jsx(RotateCcw, { size: 14 }) })] }), _jsxs("div", { className: `${styles.filterRow} ${styles.archiveRow} `, children: [effectiveTaskScope === 'open' ? (_jsxs("button", { className: `${styles.bulkArchiveBtn} ${!tasks.some(t => t.status === 'done' || t.status === 'cancelled') ? styles.disabledBtn : ''} `, onClick: () => tasks.some(t => t.status === 'done' || t.status === 'cancelled') && onBulkArchive(), disabled: !tasks.some(t => t.status === 'done' || t.status === 'cancelled'), title: tasks.some(t => t.status === 'done' || t.status === 'cancelled') ? t('taskList.archiveAllTitle') : t('taskList.noTasksToArchiveTitle'), children: [_jsx(Archive, { size: 12 }), _jsx("span", { children: t('taskList.archiveFinished') })] })) : effectiveTaskScope === 'deleted' && onDeleteAllDeleted ? (_jsx(DeleteAllDeletedAction, { className: `${styles.bulkArchiveBtn} ${styles.taskToolbarAction} ${styles.bulkDeleteBtn} ${filteredDeletedTasks.length === 0 ? styles.disabledBtn : ''}`, onClick: () => filteredDeletedTasks.length > 0 && onDeleteAllDeleted(), disabled: filteredDeletedTasks.length === 0, title: filteredDeletedTasks.length > 0 ? 'Empty trash' : 'Trash is already empty', children: "Empty Trash" })) : (_jsx("div", {})), useScopeToggle ? (_jsx(TaskScopeToggle, { scope: effectiveTaskScope, onScopeChange: (scope) => {
+                                    handleScopeChange?.(scope);
+                                    if (scope === 'archived') {
+                                        onShowArchiveChange(true);
+                                        onFetchArchive();
+                                    }
+                                    else if (showArchive) {
+                                        onShowArchiveChange(false);
+                                    }
+                                }, className: `${styles.archiveToggle} ${styles.taskScopeToggle}` })) : (_jsxs("label", { className: styles.archiveToggle, children: [_jsx("input", { type: "checkbox", "aria-label": "Archived", checked: showArchive, onChange: (e) => {
                                             onShowArchiveChange(e.target.checked);
                                             if (e.target.checked)
                                                 onFetchArchive();
-                                        } }), _jsx("span", { children: t('taskList.includeArchive') })] })] })] }), loadingTasks && tasks.length === 0 ? (_jsx("div", { className: styles.loading, children: _jsx(Icons.Loader2, { size: 24, className: styles.spinner }) })) : filteredTasks.length === 0 && !loadingTasks ? (_jsxs("div", { className: styles.emptyState, children: [searchQuery ? _jsx(Search, { size: 48 }) : _jsx(ClipboardList, { size: 48 }), _jsx("p", { children: searchQuery ? t('taskList.noMatchingTasks') : t('taskList.noActiveTasks') })] })) : (_jsx("div", { className: styles.taskList, style: { opacity: loadingTasks ? 0.6 : 1, transition: 'opacity 0.2s ease' }, children: Object.entries(groupedTasks).map(([category, items]) => {
+                                        } }), _jsx("span", { children: "Include Archive" })] }))] })] }), loadingTasks && tasks.length === 0 ? (_jsx("div", { className: styles.loading, children: _jsx(Icons.Loader2, { size: 24, className: styles.spinner }) })) : activeTasks.length === 0 && !loadingTasks ? (_jsxs("div", { className: styles.emptyState, children: [searchQuery ? _jsx(Search, { size: 48 }) : effectiveTaskScope === 'deleted' ? _jsx(Trash2, { size: 48 }) : _jsx(ClipboardList, { size: 48 }), _jsx("p", { children: emptyLabel })] })) : (_jsx("div", { className: styles.taskList, style: { opacity: loadingTasks ? 0.6 : 1, transition: 'opacity 0.2s ease' }, children: Object.entries(activeGroups).map(([category, items]) => {
                     if (items.length === 0)
                         return null;
                     const isCollapsed = collapsedCategories[category];
@@ -32,7 +112,13 @@ export const TaskList = forwardRef((props, ref) => {
                                         })(), category, _jsxs("span", { className: styles.categoryCount, children: ["(", items.length, ")"] }), onAddTaskToCategory && (_jsx("button", { className: styles.kanbanQuickAdd, onClick: (e) => {
                                                 e.stopPropagation();
                                                 onAddTaskToCategory(category);
-                                            }, title: t('taskList.addTaskToCategoryTitle', { category }), style: { marginLeft: 'auto' }, children: _jsx(Plus, { size: 14 }) }))] }) }), !isCollapsed && (_jsx("div", { className: styles.categoryItems, children: items.map((task) => (_jsx(TaskCard, { task: task, allTasks: relationshipTasks, searchQuery: searchQuery, copiedId: copiedId, availableSpecialists: availableSpecialists, taxonomies: taxonomies, priorities: priorities, approaches: approaches, onClick: onEditTask, onOpenTaskById: onOpenTaskById, onCopyId: onCopyId, onToggleInProgress: onToggleInProgress, onToggleReview: onToggleReview, onToggleComplete: onToggleComplete, onToggleCancel: onToggleCancel, onArchiveTask: onArchiveTask, onUnlinkChildTask: onUnlinkChildTask, onClearParentTask: onClearParentTask, categories: categories, isRecentlyChanged: changedTaskIdSet.has(task.id) }, task.id))) }))] }, category));
-                }) })), showArchive && filteredArchive.length > 0 && (_jsxs("div", { className: styles.archiveList, children: [_jsx("div", { className: styles.archiveHeader, children: 'Archived' }), filteredArchive.map((task) => (_jsx(TaskCard, { task: task, searchQuery: searchQuery, copiedId: copiedId, isArchived: true, approaches: approaches, onClick: onEditTask, onCopyId: onCopyId, onUnarchive: onUnarchive, onDelete: onDelete, categories: categories }, task.id)))] }))] }));
+                                            }, title: t('taskList.addTaskToCategoryTitle', { category }), style: { marginLeft: 'auto' }, disabled: activeReadOnlyMode !== null, children: _jsx(Plus, { size: 14 }) }))] }) }), !isCollapsed && (_jsx("div", { className: styles.categoryItems, children: items.map((task) => ((() => {
+                                    const { taskWorkstream, taskInitiative } = resolveTaskHierarchy(task);
+                                    return (_jsx(TaskCard, { task: task, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, searchQuery: searchQuery, copiedId: copiedId, taxonomies: taxonomies, types: types, priorities: priorities, assigneeOptions: assigneeOptions, onClick: onEditTask, onOpenTaskById: onOpenTaskById, onCopyId: onCopyId, onToggleInProgress: onToggleInProgress, onToggleReview: onToggleReview, onToggleComplete: onToggleComplete, onToggleCancel: onToggleCancel, onSetStatus: onSetStatus, onArchiveTask: onArchiveTask, onUnarchive: activeReadOnlyMode ? onUnarchive : undefined, onDelete: activeReadOnlyMode ? onDelete : undefined, categories: categories, isRecentlyChanged: changedTaskIdSet.has(task.id), readOnlyMode: activeReadOnlyMode, showStatusLabel: showTaskCardStatusLabel }, task.id));
+                                })())) }))] }, category));
+                }) })), !useScopeToggle && showArchive && filteredArchive.length > 0 && (_jsxs("div", { className: styles.archiveList, children: [_jsx("div", { className: styles.archiveHeader, children: "Archived" }), filteredArchive.map((task) => ((() => {
+                        const { taskWorkstream, taskInitiative } = resolveTaskHierarchy(task);
+                        return (_jsx(TaskCard, { task: task, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, searchQuery: searchQuery, copiedId: copiedId, isArchived: true, types: types, assigneeOptions: assigneeOptions, onClick: onEditTask, onCopyId: onCopyId, onSetStatus: onSetStatus, onUnarchive: onUnarchive, onDelete: onDelete, deleteActionTitle: "Delete Permanently", categories: categories, showStatusLabel: showTaskCardStatusLabel }, task.id));
+                    })()))] }))] }));
 });
 TaskList.displayName = 'TaskList';

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

@@ -6,7 +6,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { TaskList } from './TaskList';
 // Mock child components
 vi.mock('../ui/MultiSelectFilter', () => ({
-    MultiSelectFilter: ({ label, selected, onChange }) => (_jsxs("div", { "data-testid": `filter-${label.toLowerCase()}`, children: [_jsxs("button", { onClick: () => onChange(['new-selection']), children: ["Change ", label] }), _jsxs("span", { children: ["Selected: ", selected.join(', ')] })] }))
+    MultiSelectFilter: ({ label, selected, onChange, options = [] }) => (_jsxs("div", { "data-testid": `filter-${label.toLowerCase()}`, children: [_jsxs("button", { onClick: () => onChange(['new-selection']), children: ["Change ", label] }), _jsxs("span", { children: ["Selected: ", selected.join(', ')] }), _jsxs("span", { children: ["Options: ", options.map((option) => option.label).join(', ')] })] }))
 }));
 vi.mock('../ui/Markdown', () => ({
     Markdown: ({ children }) => _jsxs("div", { children: ["Markdown: ", children] })
@@ -22,7 +22,6 @@ describe('TaskList Component', () => {
         types: [{ value: 'feature', label: 'Feature' }],
         priorities: [{ value: 3, label: 'High' }],
         approaches: [],
-        availableSpecialists: [],
         searchQuery: '',
         filterCategories: ['General'],
         filterTypes: [],
@@ -97,6 +96,179 @@ describe('TaskList Component', () => {
         await user.click(changeCatBtn);
         expect(defaultProps.onFilterCategoriesChange).toHaveBeenCalledWith(['new-selection']);
     });
+    it('2.4a Hides custom taxonomy filters when filter participation is disabled', () => {
+        renderComponent({
+            taxonomies: [
+                {
+                    id: 'review-status',
+                    label: 'Review Status',
+                    widgetType: 'select',
+                    isSystem: false,
+                    multiSelect: false,
+                    filterEnabled: false,
+                    options: [{ value: 'pending', label: 'Pending', status: 'active' }]
+                }
+            ]
+        });
+        expect(screen.queryByTestId('filter-review status')).not.toBeInTheDocument();
+    });
+    it('2.4a1 Hides retired custom taxonomies from filters when no tasks use them', () => {
+        renderComponent({
+            taxonomies: [
+                {
+                    id: 'review-status',
+                    label: 'Review Status',
+                    status: 'retired',
+                    widgetType: 'select',
+                    isSystem: false,
+                    multiSelect: false,
+                    filterEnabled: true,
+                    options: [{ value: 'pending', label: 'Pending', status: 'active' }]
+                }
+            ]
+        });
+        expect(screen.queryByTestId('filter-review status (retired)')).not.toBeInTheDocument();
+    });
+    it('2.4a2 Shows retired custom taxonomies in filters when tasks still use them', () => {
+        renderComponent({
+            tasks: [
+                {
+                    id: 'legacy-review-task',
+                    title: 'Legacy Review Task',
+                    category: 'general',
+                    type: 'feature',
+                    priority: 3,
+                    description: null,
+                    createdAt: '',
+                    updatedAt: '',
+                    completed: false,
+                    cancelled: false,
+                    status: 'task',
+                    taxonomies: { 'review-status': 'pending' }
+                }
+            ],
+            taxonomies: [
+                {
+                    id: 'review-status',
+                    label: 'Review Status',
+                    status: 'retired',
+                    widgetType: 'select',
+                    isSystem: false,
+                    multiSelect: false,
+                    filterEnabled: true,
+                    options: [{ value: 'pending', label: 'Pending', status: 'active' }]
+                }
+            ],
+            filterTaxonomies: { 'review-status': ['pending'] }
+        });
+        expect(screen.getByTestId('filter-review status (retired)')).toBeInTheDocument();
+    });
+    it('2.4aa Hides retired custom taxonomy options when no tasks use them', () => {
+        renderComponent({
+            taxonomies: [
+                {
+                    id: 'review-status',
+                    label: 'Review Status',
+                    widgetType: 'select',
+                    isSystem: false,
+                    multiSelect: false,
+                    filterEnabled: true,
+                    options: [
+                        { value: 'pending', label: 'Pending', status: 'active' },
+                        { value: 'legacy', label: 'Legacy', status: 'retired' }
+                    ]
+                }
+            ],
+            filterTaxonomies: { 'review-status': ['pending'] }
+        });
+        expect(screen.getByText('Options: Pending')).toBeInTheDocument();
+    });
+    it('2.4ab Shows retired custom taxonomy options in filters when tasks still use them', () => {
+        renderComponent({
+            tasks: [
+                {
+                    id: 'legacy-review-task',
+                    title: 'Legacy Review Task',
+                    category: 'general',
+                    type: 'feature',
+                    priority: 3,
+                    description: null,
+                    createdAt: '',
+                    updatedAt: '',
+                    completed: false,
+                    cancelled: false,
+                    status: 'task',
+                    taxonomies: { 'review-status': 'legacy' }
+                }
+            ],
+            taxonomies: [
+                {
+                    id: 'review-status',
+                    label: 'Review Status',
+                    widgetType: 'select',
+                    isSystem: false,
+                    multiSelect: false,
+                    filterEnabled: true,
+                    options: [
+                        { value: 'pending', label: 'Pending', status: 'active' },
+                        { value: 'legacy', label: 'Legacy', status: 'retired' }
+                    ]
+                }
+            ],
+            filterTaxonomies: { 'review-status': ['pending', 'legacy'] }
+        });
+        expect(screen.getByText('Options: Pending, Legacy (Retired)')).toBeInTheDocument();
+    });
+    it('2.4b Shows legacy categories in the filter when tasks still use them', () => {
+        renderComponent({
+            categories: [
+                { value: 'default', label: 'General', disabled: false },
+                { value: 'backend', label: 'Backend', disabled: true }
+            ],
+            tasks: [
+                {
+                    id: 'legacy-task',
+                    title: 'Legacy Task',
+                    category: 'backend',
+                    type: 'feature',
+                    priority: 3,
+                    description: null,
+                    createdAt: '',
+                    updatedAt: '',
+                    completed: false,
+                    cancelled: false,
+                    status: 'task'
+                }
+            ],
+            filterCategories: ['default', 'backend']
+        });
+        expect(screen.getByText('Options: General, Backend (Legacy)')).toBeInTheDocument();
+    });
+    it('2.4c Shows retired types in the filter when tasks still use them', () => {
+        renderComponent({
+            types: [
+                { value: 'task', label: 'Task', status: 'active' },
+                { value: 'issue', label: 'Issue', status: 'retired' }
+            ],
+            tasks: [
+                {
+                    id: 'legacy-type-task',
+                    title: 'Legacy Type Task',
+                    category: 'general',
+                    type: 'issue',
+                    priority: 3,
+                    description: null,
+                    createdAt: '',
+                    updatedAt: '',
+                    completed: false,
+                    cancelled: false,
+                    status: 'task'
+                }
+            ],
+            filterTypes: ['task', 'issue']
+        });
+        expect(screen.getByText('Options: Task, Issue (Retired)')).toBeInTheDocument();
+    });
     it('2.5 Sorting', async () => {
         const user = userEvent.setup();
         renderComponent();
@@ -104,6 +276,32 @@ describe('TaskList Component', () => {
         await user.selectOptions(select, 'priority');
         expect(defaultProps.onSortByChange).toHaveBeenCalledWith('priority');
     });
+    it('2.5a Shows enabled custom taxonomies in sort options', () => {
+        renderComponent({
+            taxonomies: [
+                {
+                    id: 'track',
+                    label: 'Track',
+                    widgetType: 'select',
+                    isSystem: false,
+                    multiSelect: false,
+                    sortEnabled: true,
+                    options: [{ value: 'platform', label: 'Platform', status: 'active' }]
+                },
+                {
+                    id: 'channel',
+                    label: 'Channel',
+                    widgetType: 'select',
+                    isSystem: false,
+                    multiSelect: false,
+                    sortEnabled: false,
+                    options: [{ value: 'email', label: 'Email', status: 'active' }]
+                }
+            ]
+        });
+        expect(screen.getByRole('option', { name: 'Track' })).toBeInTheDocument();
+        expect(screen.queryByRole('option', { name: 'Channel' })).not.toBeInTheDocument();
+    });
     it('2.6 Clear filters', async () => {
         const user = userEvent.setup();
         renderComponent();
@@ -114,7 +312,7 @@ describe('TaskList Component', () => {
     it('2.7 Archive toggle', async () => {
         const user = userEvent.setup();
         renderComponent();
-        const toggle = screen.getByLabelText('Include Archive');
+        const toggle = screen.getByLabelText('Archived');
         await user.click(toggle);
         expect(defaultProps.onShowArchiveChange).toHaveBeenCalledWith(true);
         expect(defaultProps.onFetchArchive).toHaveBeenCalled();
@@ -180,11 +378,12 @@ describe('TaskList Component', () => {
             filteredTasks: [task],
             groupedTasks: { 'General': [task] }
         });
-        const startBtn = screen.getByTitle('Start Working');
-        await user.click(startBtn);
+        const statusSelect = screen.getByRole('combobox', { name: 'Status' });
+        await user.click(statusSelect);
+        await user.click(screen.getByRole('option', { name: 'Working' }));
         expect(defaultProps.onToggleInProgress).toHaveBeenCalledWith(task);
-        const completeBtn = screen.getByTitle('Mark Complete');
-        await user.click(completeBtn);
+        await user.click(screen.getByRole('combobox', { name: 'Status' }));
+        await user.click(screen.getByRole('option', { name: 'Done' }));
         expect(defaultProps.onToggleComplete).toHaveBeenCalledWith(task);
     });
     it('2.12 Empty state', () => {

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

@@ -0,0 +1,12 @@
+import React from 'react';
+interface TaskReferenceBadgeProps {
+    copied: boolean;
+    disabled?: boolean;
+    label: React.ReactNode;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    title?: string;
+    ariaLabel?: string;
+    className?: string;
+}
+export declare function TaskReferenceBadge({ copied, disabled, label, onClick, title, ariaLabel, className, }: TaskReferenceBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/task/TaskReferenceBadge.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReferenceBadgeButton } from '../ui/ReferenceBadgeButton';
+export function TaskReferenceBadge({ copied, disabled = false, label, onClick, title = 'Copy task reference', ariaLabel, className = '', }) {
+    return (_jsx(ReferenceBadgeButton, { copied: copied, disabled: disabled, label: "", onClick: onClick, title: title, ariaLabel: ariaLabel, className: className, children: label }));
+}

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

@@ -0,0 +1,12 @@
+import type { TaskItem, TaskStatus } from '../../types';
+interface TaskStatusActionsProps {
+    task?: TaskItem | null;
+    disabled?: boolean;
+    compressed?: boolean;
+    shortLabels?: boolean;
+    showLabel?: boolean;
+    onSetStatus?: (task: TaskItem, status: TaskStatus) => void;
+    onArchiveTask?: (task: TaskItem) => void;
+}
+export declare function TaskStatusActions({ task, disabled, compressed, shortLabels, showLabel, onSetStatus, onArchiveTask }: TaskStatusActionsProps): import("react/jsx-runtime").JSX.Element;
+export {};