@taskforcehq/taskforce 0.3.326 → 0.3.328

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

@@ -0,0 +1,8 @@
+interface TaskImageReviewsProps {
+    taskId: string;
+    taskReferenceLabel?: string | null;
+    workspaceId: string;
+    apiBaseUrl?: string;
+}
+export declare function TaskImageReviews({ taskId, taskReferenceLabel, workspaceId, apiBaseUrl }: TaskImageReviewsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/task/TaskImageReviews.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Image, Loader2, MessageSquareText } from 'lucide-react';
+import { fetchTaskforceApi } from '../../utils/taskforceApiClient';
+import { dispatchOpenAnnotatedAttachment } from '../../utils/annotatedAttachments';
+import styles from './TaskImageReviews.module.css';
+function reviewTitle(review) {
+    return String(review.title || '').trim() || review.image?.displayName || 'Image review';
+}
+export function TaskImageReviews({ taskId, taskReferenceLabel, workspaceId, apiBaseUrl }) {
+    const [reviews, setReviews] = useState(null);
+    useEffect(() => {
+        let active = true;
+        setReviews(null);
+        const params = new URLSearchParams({ workspaceId, taskId });
+        void fetchTaskforceApi(`/api/taskforce/annotated-attachments/sessions?${params.toString()}`, {
+            credentials: 'include',
+        }, apiBaseUrl)
+            .then(async (response) => response.ok ? response.json() : { sessions: [] })
+            .then((data) => {
+            if (active)
+                setReviews(Array.isArray(data?.sessions) ? data.sessions : []);
+        })
+            .catch(() => {
+            if (active)
+                setReviews([]);
+        });
+        return () => { active = false; };
+    }, [apiBaseUrl, taskId, workspaceId]);
+    if (reviews !== null && reviews.length === 0)
+        return null;
+    return (_jsx("section", { className: styles.group, "aria-label": "Image reviews", children: reviews === null ? (_jsxs("div", { className: styles.loading, "aria-live": "polite", children: [_jsx(Loader2, { size: 14 }), " Loading image reviews"] })) : (_jsx("div", { className: styles.list, children: reviews.map((review) => {
+                const image = review.image;
+                const markerCount = review.annotations.length;
+                const canOpen = Boolean(image?.assetId && image.apiUrl);
+                return (_jsxs("button", { type: "button", className: styles.review, disabled: !canOpen, onClick: () => {
+                        if (!image)
+                            return;
+                        dispatchOpenAnnotatedAttachment({
+                            assetId: image.assetId,
+                            path: image.apiUrl,
+                            displayName: image.displayName,
+                            referenceLabel: image.referenceLabel || undefined,
+                        }, { taskId, taskReferenceLabel, sessionId: review.id });
+                    }, children: [_jsx("span", { className: styles.icon, children: _jsx(Image, { size: 14 }) }), _jsxs("span", { className: styles.copy, children: [_jsx("span", { className: styles.kindLabel, children: "Image review session" }), _jsx("span", { className: `${styles.title} tf-heading-card`, children: reviewTitle(review) }), _jsxs("span", { className: "tf-text-meta", children: [markerCount, " ", markerCount === 1 ? 'marker' : 'markers'] })] }), _jsx(MessageSquareText, { className: styles.openIcon, size: 14, "aria-hidden": "true" })] }, review.id));
+            }) })) }));
+}

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { TaskItem, CategoryConfig, TaxonomyDefinition, PriorityDefinition, TaskAssignee, WorkstreamItem, InitiativeItem } from '../../types';
+import type { TaskItem, CategoryConfig, TaxonomyDefinition, PriorityDefinition, TaskAssignee, WorkstreamItem, InitiativeItem, DeletedTaskRecord } from '../../types';
+import type { TaskReferenceContract } from '../../utils/taskReferences';
 import type { TaskAssigneeOption } from '../../utils/assignees';
 import { type TaskSortKey } from '../../utils/taxonomySorting.js';
 import { type ScheduleDayKey } from './taskKanbanDropRules';
@@ -16,7 +17,7 @@ interface TaskKanbanProps {
     tasks: TaskItem[];
     allTasks?: TaskItem[];
     columns: KanbanColumnDef[];
-    groupBy: 'category' | 'type' | 'priority' | 'approach' | 'assignee' | 'status' | 'complexity' | 'schedule';
+    groupBy: 'category' | 'type' | 'priority' | 'assignee' | 'status' | 'complexity' | 'schedule';
     searchQuery?: string;
     copiedId?: string | null;
     taxonomies?: TaxonomyDefinition[];
@@ -27,16 +28,10 @@ interface TaskKanbanProps {
         icon?: string;
     }>;
     priorities?: PriorityDefinition[];
-    approaches?: Array<{
-        value: string;
-        label: string;
-        color?: string;
-        icon?: string;
-    }>;
     assigneeOptions?: TaskAssigneeOption[];
     onUpdateTask: (id: string, updates: Partial<TaskItem>) => void;
     onTaskClick: (task: TaskItem) => void;
-    onOpenTaskById?: (taskId: string) => void;
+    taskReferences?: TaskReferenceContract;
     onCopyId?: (e: React.MouseEvent, id: string) => void;
     onToggleInProgress?: (task: TaskItem) => void;
     onToggleReview?: (task: TaskItem) => void;
@@ -71,6 +66,10 @@ interface TaskKanbanProps {
     showTaskCardStatusLabel?: boolean;
     workstreams?: WorkstreamItem[];
     initiatives?: InitiativeItem[];
+    workspaceId?: string | null;
+    deletedTaskRecordByTaskId?: Map<string, DeletedTaskRecord>;
+    selectedDeletedRecordIds?: Set<string>;
+    onDeletedSelectionChange?: (deletedRecordId: string, selected: boolean) => void;
 }
-export declare function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, approaches, assigneeOptions, onUpdateTask, onTaskClick, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks, onAddTaskToColumn, emptyColumnMode, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees, filtersReady, scheduleFilteredTaskIds, categories, compressed, readOnlyMode, recentlyChangedTaskIds, scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy, sortOrder, planningDropTargets, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel, workstreams, initiatives, }: TaskKanbanProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, assigneeOptions, onUpdateTask, onTaskClick, taskReferences, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks, onAddTaskToColumn, emptyColumnMode, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees, filtersReady, scheduleFilteredTaskIds, categories, compressed, readOnlyMode, recentlyChangedTaskIds, scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy, sortOrder, planningDropTargets, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel, workstreams, initiatives, workspaceId, deletedTaskRecordByTaskId, selectedDeletedRecordIds, onDeletedSelectionChange, }: TaskKanbanProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/task/TaskKanban.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { DndContext, DragOverlay, closestCorners, KeyboardSensor, PointerSensor, useSensor, useSensors, pointerWithin, defaultDropAnimationSideEffects, useDroppable } from '@dnd-kit/core';
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -10,8 +10,11 @@ import { compareTasksBySortKey } from '../../utils/taxonomySorting.js';
 import { buildScheduleDropResult, buildStatusTransitionUpdates, getGroupedTaskStatus, } from './taskKanbanDropRules';
 import * as Icons from 'lucide-react';
 import { IconMap, resolveColor } from '../../utils/constants';
+import { AssigneeAvatar } from '../ui/AssigneeIdentity';
 const EXPIRED_CARD_ID_PREFIX = 'expired::';
-export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, approaches, assigneeOptions = [], onUpdateTask, onTaskClick, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks = [], onAddTaskToColumn, emptyColumnMode = 'show', filterCategories = [], filterTypes = [], filterPriorities = [], filterStatus = [], filterAssignees = [], filtersReady = true, scheduleFilteredTaskIds, categories = [], compressed = false, readOnlyMode = null, recentlyChangedTaskIds = [], scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy = 'created', sortOrder = 'desc', planningDropTargets = null, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel = true, workstreams = [], initiatives = [], }) {
+const EMPTY_DELETED_RECORD_MAP = new Map();
+const EMPTY_SELECTED_DELETED_IDS = new Set();
+export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, assigneeOptions = [], onUpdateTask, onTaskClick, taskReferences, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks = [], onAddTaskToColumn, emptyColumnMode = 'show', filterCategories = [], filterTypes = [], filterPriorities = [], filterStatus = [], filterAssignees = [], filtersReady = true, scheduleFilteredTaskIds, categories = [], compressed = false, readOnlyMode = null, recentlyChangedTaskIds = [], scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy = 'created', sortOrder = 'desc', planningDropTargets = null, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel = false, workstreams = [], initiatives = [], workspaceId = null, deletedTaskRecordByTaskId = EMPTY_DELETED_RECORD_MAP, selectedDeletedRecordIds = EMPTY_SELECTED_DELETED_IDS, onDeletedSelectionChange, }) {
     const [activeId, setActiveId] = useState(null);
     const [isHeaderPanning, setIsHeaderPanning] = useState(false);
     const [headerPanEnabled, setHeaderPanEnabled] = useState(false);
@@ -311,7 +314,7 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
             });
         }
         return groups;
-    }, [tasks, allTasks, effectiveKanbanColumns, groupBy, columnLookup, scheduleFilteredTaskIdSet, todayDateOnly, sortBy, sortOrder]);
+    }, [tasks, effectiveKanbanColumns, groupBy, columnLookup, scheduleFilteredTaskIdSet, todayDateOnly, sortBy, sortOrder, taxonomies]);
     const activeTaskId = activeId ? getTaskIdFromCardId(activeId) : null;
     const activeTaskOverlay = activeTaskId ? tasks.find(t => t.id === activeTaskId) : null;
     // Scroll Syncing Refs and Logic
@@ -726,14 +729,24 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
             return [];
         }
     };
-    const commonCardProps = {
+    const handleAssigneeChange = useCallback((task, assignee) => onUpdateTask(task.id, { assignee }), [onUpdateTask]);
+    const handleWorkstreamChange = useCallback((task, workstreamId) => {
+        if (onAssignTaskToWorkstream) {
+            return onAssignTaskToWorkstream(task.id, workstreamId);
+        }
+        return onUpdateTask(task.id, { workstreamId });
+    }, [onAssignTaskToWorkstream, onUpdateTask]);
+    const commonCardProps = useMemo(() => ({
         searchQuery,
         copiedId,
         taxonomies,
         types,
         priorities,
-        approaches,
+        workspaceId,
         assigneeOptions,
+        workstreams,
+        onAssigneeChange: handleAssigneeChange,
+        onWorkstreamChange: handleWorkstreamChange,
         onCopyId,
         onToggleInProgress,
         onToggleReview,
@@ -743,14 +756,45 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
         onArchiveTask,
         onUnarchive,
         onDelete,
-        onOpenTaskById,
+        taskReferences,
         categories,
         readOnlyMode,
-        changedTaskIdSet,
         resolveTaskHierarchy,
         groupBy,
-        showStatusLabel: showTaskCardStatusLabel
-    };
+        showStatusLabel: showTaskCardStatusLabel,
+        deletedTaskRecordByTaskId,
+        selectedDeletedRecordIds,
+        onDeletedSelectionChange,
+    }), [
+        assigneeOptions,
+        categories,
+        copiedId,
+        deletedTaskRecordByTaskId,
+        groupBy,
+        handleAssigneeChange,
+        handleWorkstreamChange,
+        onArchiveTask,
+        onCopyId,
+        onDelete,
+        onDeletedSelectionChange,
+        onSetStatus,
+        onToggleCancel,
+        onToggleComplete,
+        onToggleInProgress,
+        onToggleReview,
+        onUnarchive,
+        priorities,
+        readOnlyMode,
+        resolveTaskHierarchy,
+        searchQuery,
+        selectedDeletedRecordIds,
+        showTaskCardStatusLabel,
+        taskReferences,
+        taxonomies,
+        types,
+        workspaceId,
+        workstreams
+    ]);
     return (_jsxs(DndContext, { sensors: sensors, collisionDetection: customCollisionDetection, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: (event) => {
             lastPlanningOverRef.current = null;
             setActiveId(null);
@@ -769,13 +813,15 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
                             const stickyZIndex = isBacklog ? 6 : (isExpired ? 5 : undefined);
                             if (isExplicitlyHidden || isAutoHidden)
                                 return null;
-                            return (_jsx(KanbanColumn, { id: String(column.value), title: column.label, color: column.color, icon: column.icon, tasks: columnTasks, activeId: activeId, activeTaskId: activeTaskId, totalCount: columnTotals[String(column.value)], onAddTask: () => onAddTaskToColumn?.(groupBy, column.value), onTaskClick: onTaskClick, commonCardProps: commonCardProps, collapseEmpty: emptyColumnMode === 'collapse', compressed: compressed, onHeaderPointerDown: handleHeaderPointerDown, isHeaderPanning: isHeaderPanning, headerPanEnabled: headerPanEnabled, stickyLeft: stickyLeft, stickyZIndex: stickyZIndex, isPast: !!column.isPast, isSelected: !!column.isSelected, isWeekend: !!column.isWeekend, disableSorting: false, scheduleDate: groupBy === 'schedule' ? scheduleContext.dates[String(column.value)] : undefined, onScheduleDaySelected: onScheduleDaySelected }, String(column.value)));
+                            return (_jsx(KanbanColumn, { id: String(column.value), title: column.label, color: column.color, icon: column.icon, assigneeOption: groupBy === 'assignee'
+                                    ? assigneeOptions.find((option) => String(option.value) === String(column.value))
+                                    : undefined, tasks: columnTasks, activeId: activeId, activeTaskId: activeTaskId, totalCount: columnTotals[String(column.value)], onAddTask: () => onAddTaskToColumn?.(groupBy, column.value), onTaskClick: onTaskClick, commonCardProps: commonCardProps, changedTaskIdSet: changedTaskIdSet, collapseEmpty: emptyColumnMode === 'collapse', compressed: compressed, onHeaderPointerDown: handleHeaderPointerDown, isHeaderPanning: isHeaderPanning, headerPanEnabled: headerPanEnabled, stickyLeft: stickyLeft, stickyZIndex: stickyZIndex, isPast: !!column.isPast, isSelected: !!column.isSelected, isWeekend: !!column.isWeekend, disableSorting: false, scheduleDate: groupBy === 'schedule' ? scheduleContext.dates[String(column.value)] : undefined, onScheduleDaySelected: onScheduleDaySelected }, String(column.value)));
                         }) })] }), createPortal(_jsx(DragOverlay, { dropAnimation: dropAnimation, children: activeTaskOverlay ? ((() => {
                     const { taskWorkstream, taskInitiative } = resolveTaskHierarchy(activeTaskOverlay);
                     return (_jsx(TaskCard, { task: activeTaskOverlay, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, isOverlay: true, ...commonCardProps, isArchived: activeTaskOverlay.isArchived, categories: categories, compressed: compressed, isRecentlyChanged: changedTaskIdSet.has(activeTaskOverlay.id) }));
                 })()) : null }), document.body)] }));
 }
-function KanbanColumn({ id, title, color, icon, tasks, activeId = null, activeTaskId = null, totalCount, onAddTask, onTaskClick, commonCardProps, collapseEmpty, compressed, onHeaderPointerDown, isHeaderPanning = false, headerPanEnabled = false, stickyLeft, stickyZIndex, isPast = false, isSelected = false, isWeekend = false, disableSorting = false, scheduleDate, onScheduleDaySelected }) {
+const KanbanColumn = React.memo(function KanbanColumn({ id, title, color, icon, assigneeOption, tasks, activeId = null, activeTaskId = null, totalCount, onAddTask, onTaskClick, commonCardProps, changedTaskIdSet, collapseEmpty, compressed, onHeaderPointerDown, isHeaderPanning = false, headerPanEnabled = false, stickyLeft, stickyZIndex, isPast = false, isSelected = false, isWeekend = false, disableSorting = false, scheduleDate, onScheduleDaySelected }) {
     const { setNodeRef } = useDroppable({
         id: id,
         data: {
@@ -797,16 +843,19 @@ function KanbanColumn({ id, title, color, icon, tasks, activeId = null, activeTa
             return;
         onScheduleDaySelected(scheduleDate);
     };
-    return (_jsxs("div", { ref: setNodeRef, className: `${styles.kanbanColumn} ${isCollapsed ? styles.kanbanColumnCollapsed : ''} ${isSticky ? styles.kanbanColumnSticky : ''} ${isPast ? styles.kanbanColumnPast : ''} ${isSelected ? styles.kanbanColumnSelectedDay : ''} ${isWeekend ? styles.kanbanColumnWeekend : ''}`, style: isSticky ? { left: `${stickyLeft}px`, zIndex: stickyZIndex ?? 4 } : undefined, onClick: handleColumnClick, children: [_jsxs("div", { className: `${styles.kanbanHeader} ${headerPanEnabled ? styles.kanbanHeaderDraggable : ''} ${isHeaderPanning ? styles.kanbanHeaderPanning : ''}`, style: { borderTopColor: resolveColor(color) || 'var(--color-purple)' }, onPointerDown: onHeaderPointerDown, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0, overflow: 'hidden' }, children: [(() => {
+    return (_jsxs("div", { ref: setNodeRef, className: `${styles.kanbanColumn} ${isCollapsed ? styles.kanbanColumnCollapsed : ''} ${isSticky ? styles.kanbanColumnSticky : ''} ${isPast ? styles.kanbanColumnPast : ''} ${isSelected ? styles.kanbanColumnSelectedDay : ''} ${isWeekend ? styles.kanbanColumnWeekend : ''}`, style: isSticky ? { left: `${stickyLeft}px`, zIndex: stickyZIndex ?? 4 } : undefined, onClick: handleColumnClick, children: [_jsxs("div", { className: `${styles.kanbanHeader} ${headerPanEnabled ? styles.kanbanHeaderDraggable : ''} ${isHeaderPanning ? styles.kanbanHeaderPanning : ''}`, style: { borderTopColor: resolveColor(color) || 'var(--color-purple)' }, onPointerDown: onHeaderPointerDown, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0, overflow: 'hidden' }, children: [assigneeOption ? (_jsx(AssigneeAvatar, { option: assigneeOption, size: 20 })) : (() => {
                                 const IconComp = icon && IconMap[icon] ? IconMap[icon] : Icons.Folder;
                                 const resolvedColor = resolveColor(color) || 'var(--color-purple)';
                                 return _jsx(IconComp, { size: 16, style: { color: resolvedColor } });
                             })(), !isCollapsed && _jsx("span", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }, children: [(!isCollapsed || totalCount > 0) && (_jsx("span", { className: styles.kanbanCount, children: isCollapsed ? totalCount : `${tasks.length} / ${totalCount}` })), !commonCardProps.readOnlyMode && (_jsx("button", { className: "tf-control-icon tf-control-icon-compact", onClick: (e) => { e.stopPropagation(); onAddTask(); }, title: `Add task to ${title}`, "aria-label": `Add task to ${title}`, "data-no-header-pan": "true", children: _jsx(Icons.Plus, { size: 14 }) }))] })] }), _jsx("div", { className: styles.kanbanDroppable, children: _jsx("div", { className: `${styles.kanbanDroppableScroll} ${styles.appScrollbar} tf-scrollbar`, ref: scrollRef, children: disableSorting ? (visibleTasks.map((task) => (_jsx("div", { className: styles.kanbanCardWrapper, children: (() => {
                             const { taskWorkstream, taskInitiative } = commonCardProps.resolveTaskHierarchy?.(task) || {};
-                            return (_jsx(TaskCard, { task: task, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, onClick: onTaskClick, ...commonCardProps, isArchived: task.isArchived, readOnlyMode: commonCardProps.readOnlyMode || null, compressed: compressed, isRecentlyChanged: false }));
-                        })() }, task.id)))) : (_jsx(SortableContext, { id: id, items: visibleTasks.map((t) => toSortableId(t.id)), strategy: verticalListSortingStrategy, children: visibleTasks.map((task) => (_jsx(SortableTaskCard, { sortableId: toSortableId(task.id), task: task, onClick: onTaskClick, commonCardProps: commonCardProps, compressed: compressed, isRecentlyChanged: commonCardProps.changedTaskIdSet?.has(task.id) }, toSortableId(task.id)))) })) }) })] }));
-}
-function SortableTaskCard({ sortableId, task, onClick, commonCardProps, compressed, isRecentlyChanged = false }) {
+                            const deletedRecord = commonCardProps.deletedTaskRecordByTaskId?.get(task.id);
+                            return (_jsx(TaskCard, { task: task, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, onClick: onTaskClick, ...commonCardProps, isArchived: task.isArchived, readOnlyMode: commonCardProps.readOnlyMode || null, compressed: compressed, isRecentlyChanged: false, selectable: Boolean(deletedRecord && commonCardProps.onDeletedSelectionChange), selected: Boolean(deletedRecord && commonCardProps.selectedDeletedRecordIds?.has(deletedRecord.id)), onSelectionChange: deletedRecord
+                                    ? (selected) => commonCardProps.onDeletedSelectionChange?.(deletedRecord.id, selected)
+                                    : undefined }));
+                        })() }, task.id)))) : (_jsx(SortableContext, { id: id, items: visibleTasks.map((t) => toSortableId(t.id)), strategy: verticalListSortingStrategy, children: visibleTasks.map((task) => (_jsx(SortableTaskCard, { sortableId: toSortableId(task.id), task: task, onClick: onTaskClick, commonCardProps: commonCardProps, compressed: compressed, isRecentlyChanged: changedTaskIdSet.has(task.id) }, toSortableId(task.id)))) })) }) })] }));
+});
+const SortableTaskCard = React.memo(function SortableTaskCard({ sortableId, task, onClick, commonCardProps, compressed, isRecentlyChanged = false }) {
     const dragDisabled = Boolean(commonCardProps?.readOnlyMode);
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
         id: sortableId,
@@ -826,6 +875,9 @@ function SortableTaskCard({ sortableId, task, onClick, commonCardProps, compress
     const isGlowActive = !isScheduleMode && isRecentlyChanged;
     return (_jsx("div", { ref: setNodeRef, style: style, ...(dragDisabled ? {} : attributes), ...(dragDisabled ? {} : listeners), className: `${styles.kanbanCardWrapper} ${isGlowActive ? styles.kanbanCardWrapperRaised : ''}`, children: (() => {
             const { taskWorkstream, taskInitiative } = commonCardProps.resolveTaskHierarchy?.(task) || {};
-            return (_jsx(TaskCard, { task: task, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, onClick: onClick, ...commonCardProps, isArchived: task.isArchived, readOnlyMode: commonCardProps?.readOnlyMode || null, compressed: compressed, isRecentlyChanged: isScheduleMode ? false : isRecentlyChanged }));
+            const deletedRecord = commonCardProps.deletedTaskRecordByTaskId?.get(task.id);
+            return (_jsx(TaskCard, { task: task, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, onClick: onClick, ...commonCardProps, isArchived: task.isArchived, readOnlyMode: commonCardProps?.readOnlyMode || null, compressed: compressed, isRecentlyChanged: isScheduleMode ? false : isRecentlyChanged, selectable: Boolean(deletedRecord && commonCardProps.onDeletedSelectionChange), selected: Boolean(deletedRecord && commonCardProps.selectedDeletedRecordIds?.has(deletedRecord.id)), onSelectionChange: deletedRecord
+                    ? (selected) => commonCardProps.onDeletedSelectionChange?.(deletedRecord.id, selected)
+                    : undefined }));
         })() }));
-}
+});

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { TaskItem, CategoryConfig, TaxonomyDefinition, PriorityDefinition, TaskAssignee, WorkstreamItem, InitiativeItem } from '../../types';
+import type { TaskItem, CategoryConfig, TaxonomyDefinition, PriorityDefinition, TaskAssignee, WorkstreamItem, InitiativeItem, DeletedTaskRecord } from '../../types';
+import type { TaskReferenceContract } from '../../utils/taskReferences';
 import type { TaskAssigneeOption } from '../../utils/assignees';
 interface TaskListProps {
     tasks: TaskItem[];
@@ -18,16 +19,11 @@ interface TaskListProps {
         type?: string;
         priority?: string;
     };
-    approaches?: Array<{
-        value: string;
-        label: string;
-        color?: string;
-        icon?: string;
-    }>;
     assigneeOptions?: TaskAssigneeOption[];
     taxonomies: TaxonomyDefinition[];
     workstreams?: WorkstreamItem[];
     initiatives?: InitiativeItem[];
+    workspaceId?: string | null;
     searchQuery: string;
     filterCategories: string[];
     filterTypes: string[];
@@ -49,6 +45,10 @@ interface TaskListProps {
     copiedId: string | null;
     recentlyChangedTaskIds?: string[];
     showTaskCardStatusLabel?: boolean;
+    deletedTaskRecordByTaskId?: Map<string, DeletedTaskRecord>;
+    selectedDeletedRecordIds?: Set<string>;
+    onDeletedSelectionChange?: (deletedRecordId: string, selected: boolean) => void;
+    trashControls?: React.ReactNode;
     onSearchChange: (query: string) => void;
     onFilterCategoriesChange: (categories: (string | number)[]) => void;
     onFilterTypesChange: (types: (string | number)[]) => void;
@@ -63,7 +63,8 @@ interface TaskListProps {
     onClearFilters: () => void;
     onToggleCategory: (category: string) => void;
     onEditTask: (task: TaskItem) => void;
-    onOpenTaskById?: (taskId: string) => void;
+    onUpdateTask: (id: string, updates: Partial<TaskItem>) => boolean | void | Promise<boolean | void>;
+    taskReferences?: TaskReferenceContract;
     onCopyId: (e: React.MouseEvent, id: string) => void;
     onToggleInProgress: (task: TaskItem) => void;
     onToggleReview: (task: TaskItem) => void;

package/dist/components/task/TaskList.js

@@ -10,11 +10,14 @@ import { getFilterVisibleTaxonomyOptions } from '../../utils/taxonomyFilterOptio
 import { getVisibleTaxonomiesForTasks } from '../../utils/taxonomyLifecycle.js';
 import { TaskCard } from './TaskCard';
 import { t } from '../../localization';
-import { DeleteAllDeletedAction, TaskScopeToggle } from '../views/panels/FilterToolbarControls';
+import { TaskScopeToggle } from '../views/panels/FilterToolbarControls';
 import { normalizeTaskReferenceToken } from '../../utils/taskSearch';
+import { AssigneeIdentity } from '../ui/AssigneeIdentity';
+const EMPTY_DELETED_RECORD_MAP = new Map();
+const EMPTY_SELECTED_DELETED_IDS = new Set();
 export const TaskList = forwardRef((props, ref) => {
-    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 { tasks, archivedTasks, categories, types, priorities, taxonomyDisplayLabels, assigneeOptions = [], workstreams = [], initiatives = [], workspaceId = null, searchQuery, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees = [], filterTaxonomies, sortBy, sortOrder, showArchive, taskScope, collapsedCategories, loadingTasks, filteredTasks, filteredArchive, groupedTasks, filteredDeletedTasks = [], groupedDeletedTasks = {}, copiedId, recentlyChangedTaskIds = [], showTaskCardStatusLabel = false, deletedTaskRecordByTaskId = EMPTY_DELETED_RECORD_MAP, selectedDeletedRecordIds = EMPTY_SELECTED_DELETED_IDS, onDeletedSelectionChange, trashControls, onSearchChange, onFilterCategoriesChange, onFilterTypesChange, onFilterPrioritiesChange, onFilterStatusChange, onFilterAssigneesChange, onTaxonomyFilterChange, onSortByChange, onSortOrderChange, onShowArchiveChange, onTaskScopeChange, onClearFilters, onToggleCategory, onEditTask, onUpdateTask, taskReferences, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onBulkArchive, onUnarchive, onDelete, onFetchArchive, onAddTaskToCategory, supplementalTasks = [], taxonomies, } = props;
+    const changedTaskIdSet = React.useMemo(() => new Set(recentlyChangedTaskIds), [recentlyChangedTaskIds]);
     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) => {
@@ -22,7 +25,8 @@ export const TaskList = forwardRef((props, ref) => {
         const taskInitiative = taskWorkstream?.initiativeId ? initiativeById.get(taskWorkstream.initiativeId) || null : null;
         return { taskWorkstream, taskInitiative };
     }, [initiativeById, workstreamById]);
-    const relationshipTasks = [...tasks, ...archivedTasks, ...supplementalTasks];
+    const relationshipTasks = React.useMemo(() => [...tasks, ...archivedTasks, ...supplementalTasks], [archivedTasks, supplementalTasks, tasks]);
+    const handleAssigneeChange = React.useCallback((task, assignee) => onUpdateTask(task.id, { assignee }), [onUpdateTask]);
     const useScopeToggle = Boolean(onTaskScopeChange);
     const handleScopeChange = onTaskScopeChange;
     const effectiveTaskScope = taskScope ?? (showArchive ? 'archived' : 'open');
@@ -57,54 +61,59 @@ export const TaskList = forwardRef((props, ref) => {
             : effectiveTaskScope === 'deleted'
                 ? 'No deleted tasks found.'
                 : t('taskList.noActiveTasks');
-    const visibleCategories = categories.filter(c => !c.disabled);
-    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
+    const categoryFilterOptions = React.useMemo(() => {
+        const visibleCategories = categories.filter(c => !c.disabled);
+        const legacyCategoriesInUse = categories.filter((category) => (category.disabled && relationshipTasks.some((task) => task.category === category.value)));
+        return [
+            ...visibleCategories,
+            ...legacyCategoriesInUse.filter((category) => !visibleCategories.some((visible) => visible.value === category.value))
+        ].map((category) => ({
+            value: category.value,
+            label: category.disabled ? `${category.label} (Legacy)` : category.label
+        }));
+    }, [categories, relationshipTasks]);
+    const typeFilterOptions = React.useMemo(() => {
+        const visibleTypes = types.filter((entry) => entry.status !== 'retired');
+        const legacyTypesInUse = types.filter((entry) => (entry.status === 'retired' && relationshipTasks.some((task) => task.type === entry.value)));
+        return [
+            ...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
+        }));
+    }, [relationshipTasks, types]);
+    const filterableTaxonomies = React.useMemo(() => (getVisibleTaxonomiesForTasks(taxonomies, relationshipTasks)
         .filter((taxonomy) => taxonomy.filterEnabled !== false)
         .map((taxonomy) => ({
         ...taxonomy,
         options: getFilterVisibleTaxonomyOptions(taxonomy, relationshipTasks)
-    }));
+    }))), [relationshipTasks, taxonomies]);
     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) => ({
+    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", renderOptionContent: (option) => {
+                                    const assigneeOption = assigneeOptions.find((entry) => String(entry.value) === String(option.value));
+                                    return assigneeOption ? _jsx(AssigneeIdentity, { option: assigneeOption, size: 20 }) : option.label;
+                                } })] }), 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) => {
+                        })), 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' ? (_jsx("div", {})) : (_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) => {
+                                }, className: styles.archiveToggle })) : (_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: "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]) => {
+                                        } }), _jsx("span", { children: "Include Archive" })] }))] }), effectiveTaskScope === 'deleted' && trashControls] }), 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];
@@ -118,11 +127,16 @@ export const TaskList = forwardRef((props, ref) => {
                                                 onAddTaskToCategory(category);
                                             }, 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));
+                                    const deletedRecord = activeReadOnlyMode === 'deleted'
+                                        ? deletedTaskRecordByTaskId.get(task.id)
+                                        : undefined;
+                                    return (_jsx(TaskCard, { task: task, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, workspaceId: workspaceId, searchQuery: searchQuery, copiedId: copiedId, taxonomies: taxonomies, types: types, priorities: priorities, assigneeOptions: assigneeOptions, workstreams: workstreams, onClick: onEditTask, onAssigneeChange: handleAssigneeChange, onWorkstreamChange: (nextTask, workstreamId) => (onUpdateTask(nextTask.id, { workstreamId })), taskReferences: taskReferences, 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, selectable: Boolean(deletedRecord && onDeletedSelectionChange), selected: Boolean(deletedRecord && selectedDeletedRecordIds.has(deletedRecord.id)), onSelectionChange: deletedRecord
+                                            ? (selected) => onDeletedSelectionChange?.(deletedRecord.id, selected)
+                                            : undefined, 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));
+                        return (_jsx(TaskCard, { task: task, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, workspaceId: workspaceId, searchQuery: searchQuery, copiedId: copiedId, isArchived: true, types: types, assigneeOptions: assigneeOptions, workstreams: workstreams, onClick: onEditTask, onCopyId: onCopyId, onSetStatus: onSetStatus, onUnarchive: onUnarchive, onDelete: onDelete, deleteActionTitle: "Delete Permanently", taskReferences: taskReferences, categories: categories, showStatusLabel: showTaskCardStatusLabel }, task.id));
                     })()))] }))] }));
 });
 TaskList.displayName = 'TaskList';

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

@@ -7,6 +7,7 @@ interface TaskReferenceBadgeProps {
     title?: string;
     ariaLabel?: string;
     className?: string;
+    provisional?: boolean;
 }
-export declare function TaskReferenceBadge({ copied, disabled, label, onClick, title, ariaLabel, className, }: TaskReferenceBadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaskReferenceBadge({ copied, disabled, label, onClick, title, ariaLabel, className, provisional, }: TaskReferenceBadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/task/TaskReferenceBadge.js

@@ -1,5 +1,6 @@
 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 }));
+import styles from '../../Taskforce.module.css';
+export function TaskReferenceBadge({ copied, disabled = false, label, onClick, title = 'Copy task reference', ariaLabel, className = '', provisional = false, }) {
+    return (_jsx(ReferenceBadgeButton, { copied: copied, disabled: disabled, label: "", onClick: onClick, title: title, ariaLabel: ariaLabel, className: `${provisional ? styles.provisionalReferenceBadge : ''} ${className}`.trim(), children: label }));
 }

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

@@ -2,6 +2,7 @@ import type { TaskItem, TaskStatus } from '../../types';
 type ArchiveActionMode = 'auto' | 'archive' | 'unarchive' | 'none';
 interface TaskStatusActionsProps {
     task?: TaskItem | null;
+    status?: TaskStatus;
     disabled?: boolean;
     actionDisabled?: boolean;
     statusDisabled?: boolean;
@@ -9,9 +10,10 @@ interface TaskStatusActionsProps {
     shortLabels?: boolean;
     showLabel?: boolean;
     onSetStatus?: (task: TaskItem, status: TaskStatus) => void;
+    onStatusChange?: (status: TaskStatus) => void;
     onArchiveTask?: (task: TaskItem) => void;
     onUnarchiveTask?: (task: TaskItem) => void;
     archiveActionMode?: ArchiveActionMode;
 }
-export declare function TaskStatusActions({ task, disabled, actionDisabled, statusDisabled, compressed, shortLabels, showLabel, onSetStatus, onArchiveTask, onUnarchiveTask, archiveActionMode }: TaskStatusActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaskStatusActions({ task, status, disabled, actionDisabled, statusDisabled, compressed, shortLabels, showLabel, onSetStatus, onStatusChange, onArchiveTask, onUnarchiveTask, archiveActionMode }: TaskStatusActionsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/task/TaskStatusActions.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Archive, RotateCcw } from 'lucide-react';
+import { RotateCcw } from 'lucide-react';
 import styles from '../../Taskforce.module.css';
-import { STATUS_DEFINITIONS } from '../../utils/constants';
+import { resolveColor, STATUS_DEFINITIONS } from '../../utils/constants';
 import { TaxonomyDropdown } from '../ui/TaxonomyDropdown';
-export function TaskStatusActions({ task, disabled = false, actionDisabled, statusDisabled, compressed = false, shortLabels = false, showLabel = true, onSetStatus, onArchiveTask, onUnarchiveTask, archiveActionMode = 'auto' }) {
-    const currentStatus = task?.status || 'task';
+export function TaskStatusActions({ task, status, disabled = false, actionDisabled, statusDisabled, compressed = false, shortLabels = false, showLabel = true, onSetStatus, onStatusChange, onArchiveTask, onUnarchiveTask, archiveActionMode = 'auto' }) {
+    const currentStatus = task?.status || status || 'task';
     const canArchive = !!task && (currentStatus === 'done' || currentStatus === 'cancelled');
     const resolvedArchiveActionMode = archiveActionMode === 'auto'
         ? (canArchive ? 'archive' : 'none')
@@ -15,9 +15,29 @@ export function TaskStatusActions({ task, disabled = false, actionDisabled, stat
         ...option,
         label: (compressed || shortLabels) ? (option.shortLabel || option.label) : option.label
     }));
-    return (_jsxs("div", { className: `${styles.statusActionsGroup} ${compressed ? styles.statusActionsGroupCompact : ''}`, children: [resolvedArchiveActionMode === 'archive' && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.archiveTaskBtn}`, onClick: () => task && !resolvedActionDisabled && onArchiveTask?.(task), disabled: resolvedActionDisabled, title: "Archive Now", "aria-label": "Archive task", children: _jsx(Archive, { size: compressed ? 12 : 16 }) })), resolvedArchiveActionMode === 'unarchive' && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.archiveTaskBtn}`, onClick: () => task && !resolvedActionDisabled && onUnarchiveTask?.(task), disabled: resolvedActionDisabled, title: "Unarchive task", "aria-label": "Unarchive task", children: _jsx(RotateCcw, { size: compressed ? 12 : 16 }) })), _jsx("div", { className: `${styles.statusSelectWrap} ${styles.statusTaxonomyDropdownWrap}`, children: _jsx(TaxonomyDropdown, { value: currentStatus, options: statusOptions, disabled: resolvedStatusDisabled || !task, ariaLabel: "Status", hideSelectedLabel: !showLabel, hideChevron: !showLabel, className: `${styles.statusTaxonomyDropdown} ${compressed ? styles.statusTaxonomyDropdownCompact : ''} ${!showLabel ? styles.statusTaxonomyDropdownIconOnly : ''}`, panelClassName: !showLabel ? styles.statusTaxonomyDropdownIconOnlyPanel : '', portalPanel: !showLabel, panelMinWidth: !showLabel ? 144 : undefined, onChange: (value) => {
-                        if (!task)
+    const statusAccent = resolveColor(STATUS_DEFINITIONS.find((option) => option.value === currentStatus)?.color) || 'var(--text-secondary)';
+    const statusAccentStyle = {
+        '--field-border': statusAccent,
+        '--field-text': statusAccent,
+        '--field-hover-border': statusAccent,
+        '--field-focus-border': statusAccent,
+        '--field-focus-ring': `color-mix(in srgb, ${statusAccent} 18%, transparent)`
+    };
+    const statusPanelActions = resolvedArchiveActionMode === 'archive' && task
+        ? [{
+                id: 'archive-task',
+                label: 'Archive task',
+                icon: 'Archive',
+                disabled: resolvedActionDisabled || !onArchiveTask,
+                onSelect: () => onArchiveTask?.(task),
+            }]
+        : [];
+    return (_jsxs("div", { className: `${styles.statusActionsGroup} ${compressed ? styles.statusActionsGroupCompact : ''}`, children: [resolvedArchiveActionMode === 'unarchive' && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.restoreTaskBtn}`, onClick: () => task && !resolvedActionDisabled && onUnarchiveTask?.(task), disabled: resolvedActionDisabled, title: "Unarchive task", "aria-label": "Unarchive task", children: _jsx(RotateCcw, { size: compressed ? 12 : 16 }) })), _jsx("div", { className: `${styles.statusSelectWrap} ${styles.statusTaxonomyDropdownWrap}`, style: statusAccentStyle, children: _jsx(TaxonomyDropdown, { value: currentStatus, options: statusOptions, disabled: resolvedStatusDisabled || (!task && !onStatusChange), ariaLabel: "Status", optionLabelColor: "var(--text-primary)", hideSelectedLabel: !showLabel, hideChevron: !showLabel, className: `${styles.statusTaxonomyDropdown} ${compressed ? styles.statusTaxonomyDropdownCompact : ''} ${!showLabel ? styles.statusTaxonomyDropdownIconOnly : ''}`, panelClassName: !showLabel ? styles.statusTaxonomyDropdownIconOnlyPanel : '', portalPanel: !showLabel, panelMinWidth: !showLabel ? 144 : undefined, panelActions: statusPanelActions, onChange: (value) => {
+                        const nextStatus = value;
+                        if (task) {
+                            onSetStatus?.(task, nextStatus);
                             return;
-                        onSetStatus?.(task, value);
+                        }
+                        onStatusChange?.(nextStatus);
                     } }) })] }));
 }

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

@@ -0,0 +1,18 @@
+import type { Comment } from '../../types.js';
+import { type TaskAssigneeOption } from '../../utils/assignees.js';
+type TaskWorkflowAssignmentFieldProps = {
+    taskId: string;
+    workspaceId?: string | null;
+    taskStatus?: string | null;
+    taskUpdatedAt?: string | null;
+    comments?: Comment[];
+    assigneeOptions?: TaskAssigneeOption[];
+    currentActorId?: string | null;
+    apiBaseUrl?: string;
+    runtimeMode?: 'local' | 'cloud';
+    disabled?: boolean;
+    onActivatePendingWorkflow?: () => void | Promise<void>;
+    onActiveOwnerChange?: (ownerId: string) => void;
+};
+export declare function TaskWorkflowAssignmentField({ taskId, workspaceId, taskStatus, taskUpdatedAt, comments, assigneeOptions, currentActorId, apiBaseUrl, runtimeMode, disabled, onActivatePendingWorkflow, onActiveOwnerChange, }: TaskWorkflowAssignmentFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};