@taskforcehq/taskforce 0.3.168

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

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

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { TaskKanban } from './TaskKanban';
+const toDateOnlyLocal = (date) => {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}-${m}-${d}`;
+};
+const dateOffset = (days) => {
+    const date = new Date();
+    date.setDate(date.getDate() + days);
+    return toDateOnlyLocal(date);
+};
+const makeTask = (overrides = {}) => ({
+    id: 'task-expired-dual-column',
+    title: 'Expired dual visibility task',
+    description: null,
+    category: 'default',
+    type: 'feature',
+    priority: 2,
+    status: 'task',
+    createdAt: '2026-01-01T00:00:00.000Z',
+    ...overrides
+});
+describe('TaskKanban schedule expired behavior', () => {
+    it('shows expired scheduled tasks in both day and expired columns even when not in scheduleFilteredTaskIds', () => {
+        const mon = dateOffset(-1);
+        const tue = dateOffset(1);
+        const wed = dateOffset(2);
+        const thu = dateOffset(3);
+        const fri = dateOffset(4);
+        const sat = dateOffset(5);
+        const sun = dateOffset(6);
+        const task = makeTask({ scheduledDate: mon });
+        render(_jsx(TaskKanban, { tasks: [task], allTasks: [task], columns: [
+                { value: 'backlog', label: 'Backlog', color: '#64748b', icon: 'Inbox' },
+                { value: 'expired', label: 'Expired', color: '#ef4444', icon: 'AlertTriangle' },
+                { value: 'mon', label: 'Mon', color: '#3b82f6', icon: 'Calendar' }
+            ], groupBy: "schedule", scheduleDates: { mon, tue, wed, thu, fri, sat, sun }, scheduleFilteredTaskIds: [], onUpdateTask: vi.fn(), onTaskClick: vi.fn() }));
+        expect(screen.getByText('Expired')).toBeInTheDocument();
+        expect(screen.getByText('Mon')).toBeInTheDocument();
+        expect(screen.getAllByText('Expired dual visibility task')).toHaveLength(2);
+    });
+});

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import type { TaskItem, CategoryConfig, TaxonomyDefinition, PriorityDefinition, ParentTaskFilterMode, TaskAssignee } from '../../types';
+interface TaskListProps {
+    tasks: TaskItem[];
+    archivedTasks: TaskItem[];
+    categories: CategoryConfig[];
+    types: {
+        value: string;
+        label: string;
+    }[];
+    priorities: PriorityDefinition[];
+    approaches: Array<{
+        value: string;
+        label: string;
+        color?: string;
+        icon?: string;
+    }>;
+    availableSpecialists: {
+        value: string;
+        label: string;
+    }[];
+    taxonomies: TaxonomyDefinition[];
+    searchQuery: string;
+    filterCategories: string[];
+    filterTypes: string[];
+    filterPriorities: (string | number)[];
+    filterStatus: (string | number)[];
+    filterAssignees?: TaskAssignee[];
+    filterTaxonomies: Record<string, (string | number)[]>;
+    sortBy: string;
+    sortOrder: 'asc' | 'desc';
+    showArchive: boolean;
+    parentTaskFilterMode?: ParentTaskFilterMode;
+    assigneeFilterEnabled?: boolean;
+    collapsedCategories: Record<string, boolean>;
+    loadingTasks: boolean;
+    filteredTasks: TaskItem[];
+    filteredArchive: TaskItem[];
+    groupedTasks: Record<string, TaskItem[]>;
+    copiedId: string | null;
+    recentlyChangedTaskIds?: string[];
+    onSearchChange: (query: string) => void;
+    onFilterCategoriesChange: (categories: (string | number)[]) => void;
+    onFilterTypesChange: (types: (string | number)[]) => void;
+    onFilterPrioritiesChange: (priorities: (string | number)[]) => void;
+    onFilterStatusChange: (status: (string | number)[]) => void;
+    onFilterAssigneesChange?: (assignees: (string | number)[]) => void;
+    onTaxonomyFilterChange: (id: string, values: (string | number)[]) => void;
+    onSortByChange: (sortBy: string) => void;
+    onSortOrderChange: () => void;
+    onShowArchiveChange: (show: boolean) => void;
+    onParentTaskFilterModeChange?: (mode: ParentTaskFilterMode) => void;
+    onClearFilters: () => void;
+    onToggleCategory: (category: string) => void;
+    onEditTask: (task: TaskItem) => void;
+    onOpenTaskById?: (taskId: string) => void;
+    onCopyId: (e: React.MouseEvent, id: string) => void;
+    onToggleInProgress: (task: TaskItem) => void;
+    onToggleReview: (task: TaskItem) => void;
+    onToggleComplete: (task: TaskItem) => void;
+    onToggleCancel: (task: TaskItem) => void;
+    onArchiveTask: (task: TaskItem) => void;
+    onBulkArchive: () => void;
+    onUnarchive: (taskId: string) => void;
+    onDelete: (taskId: string) => void;
+    onUnlinkChildTask?: (taskId: string) => void;
+    onClearParentTask?: (taskId: string) => void;
+    onFetchArchive: () => void;
+    onAddTaskToCategory?: (category: string) => void;
+    getIconForType?: (type: string) => React.ReactNode;
+    renderHighlighted?: (text: string, query: string) => React.ReactNode;
+}
+export declare const TaskList: React.ForwardRefExoticComponent<TaskListProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/task/TaskList.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import * as Icons from 'lucide-react';
+const { Search, ClipboardList, ChevronRight, ChevronDown, Folder, Archive, RotateCcw, X, Plus, ArrowUpDown } = Icons;
+import styles from '../../Taskforce.module.css';
+import { MultiSelectFilter } from '../ui/MultiSelectFilter';
+import { STATUS_OPTIONS, IconMap, resolveColor } from '../../utils/constants';
+import { TaskCard } from './TaskCard';
+import { t } from '../../localization';
+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 changedTaskIdSet = new Set(recentlyChangedTaskIds);
+    const relationshipTasks = [...tasks, ...archivedTasks];
+    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) => {
+                                            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]) => {
+                    if (items.length === 0)
+                        return null;
+                    const isCollapsed = collapsedCategories[category];
+                    return (_jsxs("div", { className: styles.categoryGroup, children: [_jsx("div", { className: styles.categoryHeader, onClick: () => onToggleCategory(category), children: _jsxs("div", { className: styles.categoryTitle, children: [isCollapsed ? _jsx(ChevronRight, { size: 16 }) : _jsx(ChevronDown, { size: 16 }), (() => {
+                                            const catConfig = categories.find(c => c.label === category);
+                                            const IconComp = catConfig?.icon && IconMap[catConfig.icon] ? IconMap[catConfig.icon] : Folder;
+                                            const color = resolveColor(catConfig?.color) || 'var(--color-purple, #8b5cf6)';
+                                            return _jsx(IconComp, { size: 16, className: styles.categoryTitleIcon, style: { color } });
+                                        })(), 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)))] }))] }));
+});
+TaskList.displayName = 'TaskList';

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

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

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

@@ -0,0 +1,270 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+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(', ')] })] }))
+}));
+vi.mock('../ui/Markdown', () => ({
+    Markdown: ({ children }) => _jsxs("div", { children: ["Markdown: ", children] })
+}));
+describe('TaskList Component', () => {
+    const defaultProps = {
+        tasks: [],
+        archivedTasks: [],
+        categories: [
+            { value: 'general', label: 'General', disabled: false },
+            { value: 'backend', label: 'Backend', disabled: false }
+        ],
+        types: [{ value: 'feature', label: 'Feature' }],
+        priorities: [{ value: 3, label: 'High' }],
+        approaches: [],
+        availableSpecialists: [],
+        searchQuery: '',
+        filterCategories: ['General'],
+        filterTypes: [],
+        filterPriorities: [],
+        filterStatus: [],
+        sortBy: 'created',
+        sortOrder: 'desc',
+        showArchive: false,
+        collapsedCategories: {},
+        filterTaxonomies: {},
+        taxonomies: [],
+        loadingTasks: false,
+        filteredTasks: [],
+        filteredArchive: [],
+        groupedTasks: {},
+        copiedId: null,
+        onSearchChange: vi.fn(),
+        onFilterCategoriesChange: vi.fn(),
+        onFilterTypesChange: vi.fn(),
+        onFilterPrioritiesChange: vi.fn(),
+        onFilterStatusChange: vi.fn(),
+        onTaxonomyFilterChange: vi.fn(),
+        onSortByChange: vi.fn(),
+        onSortOrderChange: vi.fn(),
+        onShowArchiveChange: vi.fn(),
+        onClearFilters: vi.fn(),
+        onToggleCategory: vi.fn(),
+        onEditTask: vi.fn(),
+        onCopyId: vi.fn(),
+        onToggleInProgress: vi.fn(),
+        onToggleReview: vi.fn(),
+        onToggleComplete: vi.fn(),
+        onToggleCancel: vi.fn(),
+        onArchiveTask: vi.fn(),
+        onBulkArchive: vi.fn(),
+        onUnarchive: vi.fn(),
+        onDelete: vi.fn(),
+        onFetchArchive: vi.fn(),
+        getIconForType: () => _jsx("span", { children: "Icon" }),
+        renderHighlighted: (text) => text,
+    };
+    const renderComponent = (props = {}) => {
+        return render(_jsx(TaskList, { ...defaultProps, ...props }));
+    };
+    it('2.1 Renders filter controls', () => {
+        renderComponent();
+        expect(screen.getByPlaceholderText('Search tasks...')).toBeInTheDocument();
+        expect(screen.getByTestId('filter-category')).toBeInTheDocument();
+        expect(screen.getByTestId('filter-type')).toBeInTheDocument();
+        // Check Sort By
+        expect(screen.getByText('Sort By:')).toBeInTheDocument();
+    });
+    it('2.2 Search interaction', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+        const input = screen.getByPlaceholderText('Search tasks...');
+        await user.type(input, 'fix');
+        expect(defaultProps.onSearchChange).toHaveBeenCalled();
+    });
+    it('2.3 Clear search', async () => {
+        const user = userEvent.setup();
+        renderComponent({ searchQuery: 'test' });
+        const clearBtn = screen.getByTitle('Clear search');
+        await user.click(clearBtn);
+        expect(defaultProps.onSearchChange).toHaveBeenCalledWith('');
+    });
+    it('2.4 Filter interactions', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+        // Interact with mocked filter
+        const changeCatBtn = screen.getByText('Change Category');
+        await user.click(changeCatBtn);
+        expect(defaultProps.onFilterCategoriesChange).toHaveBeenCalledWith(['new-selection']);
+    });
+    it('2.5 Sorting', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+        const select = screen.getAllByRole('combobox')[0]; // Sort select
+        await user.selectOptions(select, 'priority');
+        expect(defaultProps.onSortByChange).toHaveBeenCalledWith('priority');
+    });
+    it('2.6 Clear filters', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+        const resetBtn = screen.getByTitle('Reset all filters');
+        await user.click(resetBtn);
+        expect(defaultProps.onClearFilters).toHaveBeenCalled();
+    });
+    it('2.7 Archive toggle', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+        const toggle = screen.getByLabelText('Include Archive');
+        await user.click(toggle);
+        expect(defaultProps.onShowArchiveChange).toHaveBeenCalledWith(true);
+        expect(defaultProps.onFetchArchive).toHaveBeenCalled();
+    });
+    it('2.8 Renders grouped tasks', () => {
+        const task = {
+            id: '1', title: 'Test Task', category: 'General', type: 'feature',
+            priority: 3, description: null,
+            createdAt: '', updatedAt: '', completed: false, cancelled: false,
+            status: 'task'
+        };
+        renderComponent({
+            filteredTasks: [task],
+            groupedTasks: { 'General': [task] }
+        });
+        // Category header
+        expect(screen.getByText('General')).toBeInTheDocument();
+        expect(screen.getByText('(1)')).toBeInTheDocument();
+        // Task item
+        expect(screen.getByText('Test Task')).toBeInTheDocument();
+    });
+    it('2.9 Collapse category', async () => {
+        const user = userEvent.setup();
+        const task = {
+            id: '1', title: 'Test Task', category: 'General', type: 'feature',
+            priority: 3, description: null,
+            createdAt: '', updatedAt: '', completed: false, cancelled: false,
+            status: 'task'
+        };
+        renderComponent({
+            filteredTasks: [task],
+            groupedTasks: { 'General': [task] },
+            collapsedCategories: { 'General': false }
+        });
+        const titleEl = screen.getByText('General');
+        await user.click(titleEl);
+        expect(defaultProps.onToggleCategory).toHaveBeenCalledWith('General');
+    });
+    it('2.10 Task Actions - Edit', async () => {
+        const user = userEvent.setup();
+        const task = {
+            id: '1', title: 'Test Task', category: 'General', type: 'feature',
+            priority: 3, description: null,
+            createdAt: '', updatedAt: '', completed: false, cancelled: false,
+            status: 'task'
+        };
+        renderComponent({
+            filteredTasks: [task],
+            groupedTasks: { 'General': [task] }
+        });
+        await user.click(screen.getByText('Test Task'));
+        expect(defaultProps.onEditTask).toHaveBeenCalledWith(task);
+    });
+    it('2.11 Task Actions - Buttons', async () => {
+        const user = userEvent.setup();
+        const task = {
+            id: '1', title: 'Test Task', category: 'General', type: 'feature',
+            priority: 3, description: null,
+            createdAt: '', updatedAt: '', completed: false, cancelled: false,
+            status: 'task'
+        };
+        renderComponent({
+            filteredTasks: [task],
+            groupedTasks: { 'General': [task] }
+        });
+        const startBtn = screen.getByTitle('Start Working');
+        await user.click(startBtn);
+        expect(defaultProps.onToggleInProgress).toHaveBeenCalledWith(task);
+        const completeBtn = screen.getByTitle('Mark Complete');
+        await user.click(completeBtn);
+        expect(defaultProps.onToggleComplete).toHaveBeenCalledWith(task);
+    });
+    it('2.12 Empty state', () => {
+        renderComponent({ filteredTasks: [], loadingTasks: false });
+        expect(screen.getByText('No active tasks')).toBeInTheDocument();
+    });
+    it('2.13 Loading state', () => {
+        renderComponent({ loadingTasks: true });
+        expect(screen.queryByText('No active tasks')).not.toBeInTheDocument();
+    });
+    it('2.14 Archive List', () => {
+        const archivedTask = {
+            id: '2', title: 'Archived Task', category: 'General', type: 'feature',
+            priority: 1, description: null,
+            createdAt: '', updatedAt: '', completed: true, cancelled: false,
+            status: 'done'
+        };
+        renderComponent({
+            showArchive: true,
+            filteredArchive: [archivedTask]
+        });
+        expect(screen.getByText('Archived')).toBeInTheDocument();
+        expect(screen.getByText(/Archived Task/)).toBeInTheDocument();
+    });
+    it('2.15 Bulk Archive', async () => {
+        const user = userEvent.setup();
+        const completedTask = {
+            id: '1', title: 'Done Task', category: 'General', type: 'feature',
+            priority: 3, description: null,
+            createdAt: '', updatedAt: '', completed: true, cancelled: false,
+            status: 'done'
+        };
+        renderComponent({
+            tasks: [completedTask]
+        });
+        const bulkBtn = screen.getByTitle('Archive all completed and cancelled tasks');
+        expect(bulkBtn).not.toBeDisabled();
+        await user.click(bulkBtn);
+        expect(defaultProps.onBulkArchive).toHaveBeenCalled();
+    });
+    it('2.16 Search does not show archive when archive toggle is off', () => {
+        const archivedTask = {
+            id: '2', title: 'Archived Match', category: 'General', type: 'feature',
+            priority: 1, description: null,
+            createdAt: '', updatedAt: '', completed: true, cancelled: false,
+            status: 'done'
+        };
+        renderComponent({
+            showArchive: false,
+            searchQuery: 'match',
+            filteredArchive: [archivedTask]
+        });
+        expect(screen.queryByText('Archived')).not.toBeInTheDocument();
+        expect(screen.queryByText(/Archived Match/)).not.toBeInTheDocument();
+    });
+    it('2.17 Archived delete removes task immediately from archive view', async () => {
+        const user = userEvent.setup();
+        const archivedTask = {
+            id: 'arch-1',
+            title: 'Archived Immediate Remove',
+            description: null,
+            category: 'General',
+            type: 'feature',
+            priority: 1,
+            createdAt: '',
+            updatedAt: '',
+            completed: true,
+            cancelled: false,
+            status: 'done',
+            isArchived: true
+        };
+        const TestHarness = () => {
+            const [archive, setArchive] = useState([archivedTask]);
+            return (_jsx(TaskList, { ...defaultProps, showArchive: true, filteredArchive: archive, onDelete: (taskId) => setArchive((prev) => prev.filter((task) => task.id !== taskId)) }));
+        };
+        render(_jsx(TestHarness, {}));
+        expect(screen.getByText(/Archived Immediate Remove/i)).toBeInTheDocument();
+        await user.click(screen.getByTitle('Delete Permanently'));
+        await waitFor(() => {
+            expect(screen.queryByText(/Archived Immediate Remove/i)).not.toBeInTheDocument();
+        });
+    });
+});

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

@@ -0,0 +1,15 @@
+import type { ScreenshotItem } from '../../types';
+interface TaskScreenshotSectionProps {
+    screenshots: Array<string | ScreenshotItem>;
+    isCapturingScreenshot: boolean;
+    onCaptureScreenshot: () => void;
+    onScreenshotComplete: (data: string | {
+        path: string;
+        fsPath?: string;
+    }) => void;
+    onScreenshotCancel: () => void;
+    onRemoveScreenshot: (index: number) => void;
+    onUpdateScreenshotCaption: (index: number, caption: string) => void;
+}
+export declare function TaskScreenshotSection(props: TaskScreenshotSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/task/TaskScreenshotSection.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Camera, Copy, Trash2 } from 'lucide-react';
+import styles from '../../Taskforce.module.css';
+import { TaskforceScreenshot } from '../../TaskforceScreenshot';
+export function TaskScreenshotSection(props) {
+    const { screenshots, isCapturingScreenshot, onCaptureScreenshot, onScreenshotComplete, onScreenshotCancel, onRemoveScreenshot, onUpdateScreenshotCaption } = props;
+    return (_jsxs("div", { className: `${styles.field} ${styles.marginBottom16}`, children: [_jsxs("div", { className: styles.labelRow, children: [_jsx("label", { className: styles.label, children: "Screenshots" }), _jsxs("button", { type: "button", className: styles.manageLink, onClick: onCaptureScreenshot, children: [_jsx(Camera, { size: 12 }), " Capture"] })] }), isCapturingScreenshot && (_jsx(TaskforceScreenshot, { onCapture: onScreenshotComplete, onCancel: onScreenshotCancel })), screenshots.length > 0 && (_jsx("div", { className: styles.screenshotGrid, children: screenshots.map((item, idx) => {
+                    const path = typeof item === 'string' ? item : item.path;
+                    const fsPath = typeof item === 'string' ? undefined : item.fsPath;
+                    const caption = typeof item === 'string' ? '' : item.caption || '';
+                    return (_jsxs("div", { className: styles.screenshotCard, children: [_jsxs("div", { className: styles.screenshotImageContainer, children: [_jsx("img", { src: path, alt: caption || `Screenshot ${idx}`, onClick: () => window.open(path, '_blank'), onError: (e) => {
+                                            e.target.style.display = 'none';
+                                            e.target.parentElement.classList.add(styles.brokenImage);
+                                        } }), _jsxs("div", { className: styles.brokenImagePlaceholder, children: [_jsx(AlertTriangle, { size: 16 }), _jsx("span", { children: "Image not found" })] }), _jsxs("div", { className: styles.screenshotActions, children: [fsPath && (_jsx("button", { type: "button", className: styles.screenshotActionBtn, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    navigator.clipboard.writeText(fsPath);
+                                                }, title: `Copy path: ${fsPath}`, children: _jsx(Copy, { size: 12 }) })), _jsx("button", { type: "button", className: styles.screenshotActionBtn, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    onRemoveScreenshot(idx);
+                                                }, title: "Delete", children: _jsx(Trash2, { size: 12 }) })] })] }), _jsx("input", { type: "text", className: styles.screenshotCaptionInput, placeholder: "Add a caption...", value: caption, onChange: (e) => onUpdateScreenshotCaption(idx, e.target.value) })] }, idx));
+                }) }))] }));
+}

package/dist/components/ui/LevelSelector.d.ts

@@ -0,0 +1,13 @@
+export declare function LevelSelector({ label, value, options, onChange, type, hideLabel }: {
+    label: string;
+    value: string | number;
+    options: Array<{
+        value: string | number;
+        label: string;
+        color?: string;
+        icon?: string;
+    }>;
+    onChange: (val: string | number) => void;
+    type?: 'priority' | 'complexity' | 'general';
+    hideLabel?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/LevelSelector.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from '../../Taskforce.module.css';
+import { resolveColor } from '../../utils/constants';
+export function LevelSelector({ label, value, options, onChange, type = 'priority', hideLabel = false }) {
+    const selectedOption = options.find(o => String(o.value) === String(value));
+    return (_jsxs("div", { className: styles.field, children: [!hideLabel && (_jsxs("div", { className: styles.labelRow, children: [_jsx("label", { className: styles.label, children: label }), selectedOption && (_jsx("span", { className: styles.levelLabel, style: {
+                            color: resolveColor(selectedOption.color) || (type === 'priority'
+                                ? `var(--priority-${value})`
+                                : (type === 'complexity' ? `var(--complexity-${value})` : 'var(--text-secondary)')),
+                            backgroundColor: (resolveColor(selectedOption.color) ? `${resolveColor(selectedOption.color)}25` : undefined) || (type === 'priority'
+                                ? `color-mix(in srgb, var(--priority-${value}), transparent 85%)`
+                                : (type === 'complexity' ? `color-mix(in srgb, var(--complexity-${value}), transparent 85%)` : 'rgba(255,255,255,0.05)'))
+                        }, children: selectedOption.label }))] })), _jsx("div", { className: styles.levelSelect, children: options.map((opt, index) => {
+                    const selectedIndex = options.findIndex(o => String(o.value) === String(value));
+                    const isFilled = index <= selectedIndex;
+                    const isSelected = String(opt.value) === String(value);
+                    return (_jsx("button", { type: "button", className: `${styles.levelOption} ${isFilled ? styles.levelOptionFilled : ''} ${isFilled ? styles[`levelOption_${type}_${opt.value}`] : ''} ${isSelected ? styles.levelOptionSelected : ''}`, onClick: () => onChange(opt.value), title: opt.label, style: {
+                            opacity: isFilled ? 1 : 0.15,
+                            backgroundColor: isFilled ? (resolveColor(opt.color) || (type === 'priority' ? `var(--priority-${opt.value})` : (type === 'complexity' ? `var(--complexity-${opt.value})` : 'var(--text-primary)'))) : undefined,
+                            color: isFilled ? ((type === 'priority' && String(opt.value).toLowerCase() === 'medium') ? 'black' : 'white') : undefined,
+                            boxShadow: isFilled && ((type === 'priority' && (String(opt.value).toLowerCase() === 'critical' || opt.value === 4)) ||
+                                (type === 'complexity' && (String(opt.value).toLowerCase() === 'epic' || opt.value === 5))) ? `0 0 12px ${type === 'priority' ? 'rgba(239, 68, 68, 0.6)' : 'rgba(217, 70, 239, 0.6)'}` : undefined
+                        } }, String(opt.value)));
+                }) })] }));
+}

package/dist/components/ui/LevelSelector.test.d.ts

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

package/dist/components/ui/LevelSelector.test.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { LevelSelector } from './LevelSelector';
+describe('LevelSelector Component', () => {
+    const defaultProps = {
+        label: 'Priority',
+        options: [
+            { value: 'low', label: 'Low' },
+            { value: 'medium', label: 'Medium' },
+            { value: 'high', label: 'High' }
+        ],
+        value: 'medium',
+        onChange: vi.fn(),
+        type: 'priority'
+    };
+    const renderComponent = (props = {}) => {
+        return render(_jsx(LevelSelector, { ...defaultProps, ...props }));
+    };
+    it('1.7 Renders label and options', () => {
+        renderComponent();
+        expect(screen.getByText('Priority')).toBeInTheDocument();
+        // Should have 3 options
+        const options = screen.getAllByRole('button');
+        // Might be more buttons if there are help/manage links? 
+        // LevelSelector usually just renders label + buttons.
+        // Let's filter by title.
+        expect(screen.getByTitle('Low')).toBeInTheDocument();
+        expect(screen.getByTitle('Medium')).toBeInTheDocument();
+        expect(screen.getByTitle('High')).toBeInTheDocument();
+    });
+    it('1.8 Highlights selected option', () => {
+        const { container } = renderComponent({ value: 'high' });
+        const highBtn = screen.getByTitle('High');
+        // Check for active class or style.
+        // Class names might be hashed, but `levelOptionFilled` or `active` concept.
+        // Let's check if it has the specific class for high priority or just check style.
+        // The implementation adds classes like `_levelOption_priority_high`.
+        // Let's assume it works if we can find it.
+        // Better: verify click triggers change.
+        fireEvent.click(highBtn);
+        // It's already high, but clicking again should still fire or be no-op?
+        // Let's click Low.
+        const lowBtn = screen.getByTitle('Low');
+        fireEvent.click(lowBtn);
+        expect(defaultProps.onChange).toHaveBeenCalledWith('low');
+    });
+    it('1.9 Visual check (snapshot-like)', () => {
+        // Select Low, so High should be dim
+        const { container } = renderComponent({ value: 'low' });
+        const highBtn = screen.getByTitle('High');
+        // Unselected options usually have lower opacity or transparent bg
+        expect(highBtn).toHaveStyle({ opacity: '0.15' });
+    });
+});

package/dist/components/ui/Markdown.d.ts

@@ -0,0 +1,6 @@
+export declare const Markdown: ({ children, className, onChecklistToggle, onTaskIdClick }: {
+    children: string | null | undefined;
+    className?: string;
+    onChecklistToggle?: (lineIndex: number, completed: boolean) => void;
+    onTaskIdClick?: (taskId: string) => void;
+}) => import("react/jsx-runtime").JSX.Element | null;