@taskforcehq/taskforce 0.3.324 → 0.3.327

package/dist/components/views/WidgetView.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type UseTaskforceResult } from '../../hooks/useTaskforce';
 export type WidgetViewProps = UseTaskforceResult & {
+    initialActivityEntryId?: string;
     onHeaderMouseDown?: (e: React.MouseEvent) => void;
     isDragging?: boolean;
     onClose?: () => void;

package/dist/components/views/WidgetView.js

@@ -1,21 +1,31 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef, useLayoutEffect, useCallback, Suspense } from 'react';
+import React, { useRef, useLayoutEffect, useCallback, useMemo, Suspense } from 'react';
 import { createPortal } from 'react-dom';
 import { X, Plus, Loader2, Check, Settings, Folder, AlertTriangle, FileText, Save, ArrowLeft } from 'lucide-react';
 import styles from '../../Taskforce.module.css';
 import shellStyles from './WorkspaceShell.module.css';
 import folderBrowserStyles from './FolderBrowser.module.css';
 import modalStyles from '../ui/Modal.module.css';
+import { getDeletedTaskExpiresAt } from '../../shared/deletedTaskRetention';
 import { compareTasksBySortKey } from '../../utils/taxonomySorting.js';
 import { getFilterVisibleTaxonomyOptions } from '../../utils/taxonomyFilterOptions.js';
 import { getVisibleTaxonomiesForTasks } from '../../utils/taxonomyLifecycle.js';
 import { resolvePriorityValue } from '../../utils/taskNormalization.js';
 import { DEFAULT_TYPE_VALUE } from '../../shared/taxonomyDefaults.js';
 import { normalizeTaskSearchQuery, taskMatchesSearch } from '../../utils/taskSearch';
+import { useTaskReferenceContract } from '../../hooks/tasks/useTaskReferenceContract';
+import { useTrashSelection } from '../../hooks/tasks/useTrashSelection';
+import { getTaskReferenceLabel } from '../../utils/taskReferences';
+import { dispatchPreviewContextAttachment } from '../../utils/contextAttachmentPreview';
+import { parseCanonicalEntityReference, } from '../../utils/entityReferences';
+import { resolveCanonicalAttachmentReference } from '../../utils/canonicalReferenceAttachments';
+import { buildTaskforceDeepLink } from '../../shared/taskDeepLinks';
 import { TaskList } from '../task/TaskList';
 import { TaskForm } from '../task/TaskForm';
 import { TaskActionHeader } from '../task/TaskActionHeader';
+import { TrashRestoreControls } from '../task/TrashRestoreControls';
 import { TopNoticeLayer } from '../ui/TopNoticeLayer';
+import { AttachmentPreviewHost } from '../context/AttachmentPreviewHost';
 const TaskSettings = React.lazy(() => import('../features/TaskSettings').then(m => ({ default: m.TaskSettings })));
 export function WidgetView(props) {
     const { 
@@ -26,27 +36,67 @@ export function WidgetView(props) {
     // Browser
     showFolderBrowser, setShowFolderBrowser, folders, files, currentBrowsePath, fetchFolders, browserTarget, setBrowserTarget, handleSelectPath, handleAddPath, handleRemovePath, 
     // Data
-    tasks, loadingTasks, archivedTasks, deletedTasks, activeCategories, activeTypes, priorities, taxonomyDisplayLabels, approaches, taxonomies, 
+    tasks, loadingTasks, archivedTasks, deletedTasks, activeCategories, activeTypes, priorities, taxonomyDisplayLabels, taxonomies, 
     // Filters
     searchQuery, setSearchQuery, filterCategories, setFilterCategories, filterTypes, setFilterTypes, filterPriorities, setFilterPriorities, filterStatus, setFilterStatus, filterAssignees, setFilterAssignees, assigneeOptions, filterTaxonomies, setFilterTaxonomies, sortBy, setSortBy, sortOrder, toggleSortOrder, showArchive, setShowArchive, taskScope, setTaskScope, clearFilters, filteredTasks, filteredArchive, groupedTasks, collapsedCategories, setCollapsedCategories, 
     // Actions
-    handleEdit, handleDelete, handleCopyId, handleToggleComplete, handleToggleCancel, handleToggleInProgress, handleToggleReview, handleArchiveTask, handleBulkArchive, handleUnarchive, handleRestoreDeletedTask, handlePermanentlyDeleteDeletedTask, handleEmptyDeletedTasks, fetchArchive, 
+    handleEdit, handleDelete, handleCopyId, handleUpdateTask, handleToggleComplete, handleToggleCancel, handleToggleInProgress, handleToggleReview, handleSetStatus, handleArchiveTask, handleBulkArchive, handleUnarchive, handleRestoreDeletedTask, handleRestoreSelectedDeletedTasks, handlePermanentlyDeleteDeletedTask, handleEmptyDeletedTasks, fetchArchive, 
     // Form State
-    editingTaskId, loading, error, title, setTitle, description, setDescription, checklistItems, setChecklistItems, category, setCategory, type, setType, priority, setPriority, complexity, setComplexity, manualComplexityEnabled, checklistDropdownEnabled, showTaskCardStatusLabel, approach, setApproach, assignee, setAssignee, scheduledDate, setScheduledDate, dueDate, setDueDate, workstreamInput, setWorkstreamInput, formTaxonomies, setFormTaxonomies, comments, newCommentText, setNewCommentText, attachments, setAttachments, setAttachmentsDirty, descriptionFocused, setDescriptionFocused, showMarkdownHelp, setShowMarkdownHelp, showChecklist, setShowChecklist, showComments, setShowComments, 
+    editingTaskId, loading, error, clearTaskError, title, setTitle, setTitleDraft, description, setDescription, setDescriptionDraft, checklistItems, setChecklistItems, category, setCategory, type, setType, priority, setPriority, complexity, setComplexity, status, setStatus, manualComplexityEnabled, checklistDropdownEnabled, showTaskCardStatusLabel, assignee, setAssignee, scheduledDate, setScheduledDate, dueDate, setDueDate, workstreamInput, setWorkstreamInput, formTaxonomies, setFormTaxonomies, comments, newCommentText, setNewCommentText, attachments, setAttachments, setAttachmentsDirty, descriptionFocused, setDescriptionFocused, showMarkdownHelp, setShowMarkdownHelp, 
     // Form Actions
     handleSubmit, resetForm, handleAddComment, handleSetWorkstreamForCurrentTask, handleOpenTaskById, 
     // Modals
     autoSaveState, unsavedModalOpen, setUnsavedModalOpen, pendingNavigation, handleNavigation, handleClose, scheduleWarningPrompt, confirmScheduleWarning, cancelScheduleWarning, 
     // Misc
-    uiNotice, clearNotice, taskReturnTrail, clearReturnToParentTask, returnToPreviousTask, copiedId, recentlyChangedTaskIds, tasksScrollRef, setTasksScrollPos, currentTask, currentTaskWorkstream, currentTaskInitiative, 
-    // Export
-    exportEnvironment, setExportEnvironment, exportWorkflowsPath, setExportWorkflowsPath, exportResult, exportingResource, availableWorkflows, onExportWorkflows, availableEnvironments, 
+    uiNotice, pushNotice, clearNotice, taskReturnTrail, clearReturnToParentTask, returnToPreviousTask, copiedId, recentlyChangedTaskIds, tasksScrollRef, setTasksScrollPos, currentTask, currentTaskWorkstream, currentTaskInitiative, 
     // Categories Management
     handleUpdateCategory, handleRemoveCategory, handleSaveCategory, handleUpdateCategoryIcon, handleUpdateCategoryColor, handleSaveType, handleRemoveType, handleUpdateTaxonomies, handleUpdatePriorities, pathValidation, validatePaths, getCategoryPaths, 
     // Refs
     commentsEndRef, 
     // Props from Core
-    currentWorkspaceId, settingsModel, onHeaderMouseDown, isDragging } = props;
+    currentWorkspaceId, authUserId, settingsModel, onHeaderMouseDown, isDragging } = props;
+    const taskReferences = useTaskReferenceContract(tasks, handleOpenTaskById);
+    const handleCanonicalEntityReference = useCallback((reference) => {
+        if (reference.kind === 'initiative' || reference.kind === 'workstream') {
+            const entity = reference.kind === 'initiative'
+                ? props.initiatives.find((initiative) => initiative.referenceNumber === reference.referenceNumber)
+                : props.workstreams.find((workstream) => workstream.referenceNumber === reference.referenceNumber);
+            if (!entity) {
+                pushNotice(`${reference.token} could not be found.`, 'error');
+                return;
+            }
+            const url = buildTaskforceDeepLink({
+                applicationBaseUrl: window.location.origin,
+                workspaceId: String(currentWorkspaceId || 'default').trim() || 'default',
+                target: reference.kind,
+                id: entity.id,
+            });
+            if (!url) {
+                pushNotice(`${reference.token} could not be opened.`, 'error');
+                return;
+            }
+            window.open(url, '_blank', 'noopener,noreferrer');
+            return;
+        }
+        const workspaceId = String(currentWorkspaceId || 'default').trim() || 'default';
+        void resolveCanonicalAttachmentReference(reference, { workspaceId }).then((attachment) => {
+            dispatchPreviewContextAttachment(attachment, {
+                ownerType: 'task',
+                ownerId: currentTask?.id || null,
+                ownerReferenceLabel: getTaskReferenceLabel(currentTask),
+                workspaceId,
+            });
+        }).catch(() => {
+            pushNotice(`${reference.token} could not be opened.`, 'error');
+        });
+    }, [currentTask, currentWorkspaceId, props.initiatives, props.workstreams, pushNotice]);
+    const taskTextReferences = useMemo(() => ({
+        ...taskReferences,
+        entityReferences: {
+            resolve: parseCanonicalEntityReference,
+            activate: handleCanonicalEntityReference,
+        },
+    }), [handleCanonicalEntityReference, taskReferences]);
     const modalRef = useRef(null);
     // Scroll restoration logic (pulled from Core)
     const [tasksScrollPosLocal, setTasksScrollPosLocal] = React.useState(0);
@@ -162,9 +212,6 @@ export function WidgetView(props) {
     // Callback Wrappers
     const onTaxonomyChange = (id, value) => {
         setFormTaxonomies(prev => ({ ...prev, [id]: value }));
-        if (id === 'approach' && typeof value === 'string') {
-            setApproach(value);
-        }
     };
     const handleAddTaskToCategory = useCallback((categoryLabel) => {
         resetForm();
@@ -177,6 +224,8 @@ export function WidgetView(props) {
         ...entry.taskSnapshot,
         isDeleted: true,
         deletedRecordId: entry.id,
+        deletedAt: entry.deletedAt,
+        deletedExpiresAt: getDeletedTaskExpiresAt(entry.deletedAt),
     })), [deletedTasks]);
     const deletedRecordByTaskId = React.useMemo(() => new globalThis.Map(deletedTasks.map((entry) => [entry.taskId, entry])), [deletedTasks]);
     const filteredDeletedTasks = React.useMemo(() => {
@@ -252,17 +301,18 @@ export function WidgetView(props) {
         });
         return groups;
     }, [activeCategories, filteredDeletedTasks]);
+    const trashSelection = useTrashSelection(deletedTasks, filteredDeletedTasks.map((task) => task.id), taskScope === 'deleted');
     const visibleTaskCount = taskScope === 'archived'
         ? filteredArchive.length
         : taskScope === 'deleted'
             ? filteredDeletedTasks.length
             : filteredTasks.length;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: modalRef, className: `${modalStyles.modal} ${styles.coreModal} ${activeTab === 'settings' ? modalStyles.settingsViewModal : ''}`, "data-theme": currentTheme, children: [_jsxs("div", { className: "tf-modal-header", onMouseDown: onHeaderMouseDown, style: { cursor: onHeaderMouseDown ? (isDragging ? 'grabbing' : 'grab') : 'default' }, children: [_jsxs("div", { className: `tf-modal-title ${shellStyles.headerTitleWidget}`, children: ["Taskforce", projectName && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.projectSlash, children: "/" }), _jsx("span", { className: styles.projectName, style: { fontSize: '14px', padding: '1px 6px' }, children: projectName })] })), _jsx("span", { className: styles.taskCountBadge, title: `${taskScope.charAt(0).toUpperCase() + taskScope.slice(1)} tasks`, children: visibleTaskCount })] }), _jsxs("div", { className: modalStyles.headerActions, children: [activeTab === 'tasks' && (_jsx(_Fragment, { children: _jsx("button", { className: "tf-control-icon", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: modalRef, className: `${modalStyles.modal} ${styles.coreModal} ${activeTab === 'settings' ? modalStyles.settingsViewModal : ''}`, "data-theme": currentTheme, children: [_jsxs("div", { className: "tf-modal-header", onMouseDown: onHeaderMouseDown, style: { cursor: onHeaderMouseDown ? (isDragging ? 'grabbing' : 'grab') : 'default' }, children: [_jsxs("div", { className: `tf-modal-title ${shellStyles.headerTitleWidget}`, children: ["Taskforce", projectName && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.projectSlash, children: "/" }), _jsx("span", { className: styles.projectName, style: { fontSize: '14px', padding: '1px 6px' }, children: projectName })] })), _jsx("span", { className: styles.taskCountBadge, title: taskScope === 'deleted' ? 'Trash tasks — automatically deleted after 90 days' : `${taskScope.charAt(0).toUpperCase() + taskScope.slice(1)} tasks`, children: visibleTaskCount })] }), _jsxs("div", { className: modalStyles.headerActions, children: [activeTab === 'tasks' && (_jsx(_Fragment, { children: _jsx("button", { className: "tf-control-icon", onClick: () => {
                                                 handleNavigation(() => {
                                                     resetForm();
                                                     setActiveTab('add');
                                                 });
-                                            }, title: "Add New Task", children: _jsx(Plus, { size: 18 }) }) })), _jsx("button", { className: `tf-control-icon ${activeTab === 'settings' ? 'tf-control-icon-active' : ''}`, onClick: () => {
+                                            }, title: "Add New Task", "aria-label": "Add New Task", children: _jsx(Plus, { size: 18 }) }) })), _jsx("button", { className: `tf-control-icon ${activeTab === 'settings' ? 'tf-control-icon-active' : ''}`, onClick: () => {
                                             if (activeTab === 'settings')
                                                 return;
                                             // handleNavigation? Core logic: handleOpenSettings();
@@ -272,23 +322,31 @@ export function WidgetView(props) {
                                             handleNavigation(() => {
                                                 setActiveTab('settings');
                                             });
-                                        }, title: "Settings", children: _jsx(Settings, { size: 18 }) }), _jsx("button", { className: "tf-control-icon", onClick: handleXClick, title: activeTab === 'tasks' ? "Close" : "Back to Tasks", children: activeTab === 'tasks' ? _jsx(X, { size: 20 }) : _jsx(ArrowLeft, { size: 20 }) })] })] }), _jsx(TopNoticeLayer, { notice: uiNotice, onDismiss: clearNotice }), activeTab === 'add' && (_jsx(TaskActionHeader, { editingTaskId: editingTaskId, loading: loading, autoSaveState: autoSaveState, title: title, currentTask: currentTask, currentTaskWorkstream: currentTaskWorkstream, currentTaskInitiative: currentTaskInitiative, workstreamInput: workstreamInput, onWorkstreamInputChange: setWorkstreamInput, onSetWorkstreamForCurrentTask: handleSetWorkstreamForCurrentTask, handleSubmit: handleSubmit, resetForm: resetForm, handleCopyId: handleCopyId, copiedId: copiedId, tasks: tasks, handleToggleInProgress: handleToggleInProgress, handleToggleReview: handleToggleReview, handleToggleComplete: handleToggleComplete, handleToggleCancel: handleToggleCancel, handleArchiveTask: handleArchiveTask, handleUnarchiveTask: (taskId) => {
-                            if (currentTask?.isDeleted) {
-                                const deletedRecord = deletedRecordByTaskId.get(taskId);
-                                if (deletedRecord) {
-                                    void handleRestoreDeletedTask(deletedRecord.id);
+                                        }, title: "Settings", "aria-label": "Settings", children: _jsx(Settings, { size: 18 }) }), _jsx("button", { className: "tf-control-icon", onClick: handleXClick, title: activeTab === 'tasks' ? "Close" : "Back to Tasks", "aria-label": activeTab === 'tasks' ? "Close" : "Back to Tasks", children: activeTab === 'tasks' ? _jsx(X, { size: 20 }) : _jsx(ArrowLeft, { size: 20 }) })] })] }), _jsx(TopNoticeLayer, { notice: activeTab === 'add' ? null : uiNotice, onDismiss: clearNotice }), _jsx(AttachmentPreviewHost, { theme: currentTheme }), activeTab === 'add' && (_jsxs("div", { className: styles.taskNoticeAnchor, children: [_jsx(TaskActionHeader, { editingTaskId: editingTaskId, loading: loading, autoSaveState: autoSaveState, title: title, status: status, onStatusChange: setStatus, currentTask: currentTask, currentTaskWorkstream: currentTaskWorkstream, currentTaskInitiative: currentTaskInitiative, workstreams: props.workstreams, onWorkstreamInputChange: setWorkstreamInput, onSetWorkstreamForCurrentTask: handleSetWorkstreamForCurrentTask, handleSubmit: handleSubmit, handleCopyId: handleCopyId, copiedId: copiedId, tasks: tasks, handleToggleInProgress: handleToggleInProgress, handleToggleReview: handleToggleReview, handleToggleComplete: handleToggleComplete, handleToggleCancel: handleToggleCancel, handleSetStatus: handleSetStatus, handleArchiveTask: handleArchiveTask, handleUnarchiveTask: (taskId) => {
+                                    if (currentTask?.isDeleted) {
+                                        const deletedRecord = deletedRecordByTaskId.get(taskId);
+                                        if (deletedRecord) {
+                                            void handleRestoreDeletedTask(deletedRecord.id, deletedRecord.taskId);
+                                        }
+                                        return;
+                                    }
+                                    handleUnarchive(taskId);
+                                }, handleRestoreDeletedTask: (deletedRecordId) => {
+                                    const deletedRecord = deletedTasks.find((entry) => entry.id === deletedRecordId);
+                                    void handleRestoreDeletedTask(deletedRecordId, deletedRecord?.taskId);
+                                }, handlePermanentlyDeleteDeletedTask: (deletedRecordId) => {
+                                    void handlePermanentlyDeleteDeletedTask(deletedRecordId);
+                                } }), _jsx(TopNoticeLayer, { notice: error ? { message: error, tone: 'error' } : uiNotice, onDismiss: () => {
+                                    clearTaskError();
+                                    clearNotice();
+                                }, placement: "task" })] })), activeTab === 'tasks' && (_jsx(TaskList, { ref: tasksScrollRef, tasks: tasks, archivedTasks: archivedTasks, categories: activeCategories, types: activeTypes, priorities: priorities, workspaceId: currentWorkspaceId, taxonomyDisplayLabels: taxonomyDisplayLabels, taxonomies: taxonomies, searchQuery: searchQuery, filterCategories: filterCategories, filterTypes: filterTypes, filterPriorities: filterPriorities, filterStatus: filterStatus, filterAssignees: filterAssignees, assigneeOptions: assigneeOptions, filterTaxonomies: filterTaxonomies, sortBy: sortBy, sortOrder: sortOrder, showArchive: showArchive, taskScope: taskScope, collapsedCategories: collapsedCategories, loadingTasks: loadingTasks, filteredTasks: filteredTasks, filteredArchive: filteredArchive, groupedTasks: groupedTasks, filteredDeletedTasks: filteredDeletedTasks, groupedDeletedTasks: groupedDeletedTasks, deletedTaskRecordByTaskId: deletedRecordByTaskId, selectedDeletedRecordIds: trashSelection.selectedIds, onDeletedSelectionChange: trashSelection.toggle, trashControls: (_jsx(TrashRestoreControls, { theme: currentTheme, selectedRecords: trashSelection.selectedRecords, matchingCount: trashSelection.matchingRecords.length, allMatchingSelected: trashSelection.allMatchingSelected, someMatchingSelected: trashSelection.someMatchingSelected, fullTrashCount: deletedTasks.length, onSelectAllMatching: trashSelection.selectAllMatching, onClearSelection: trashSelection.clear, onRestore: handleRestoreSelectedDeletedTasks, onEmptyEntireTrash: () => {
+                                if (confirm(`Permanently delete all ${deletedTasks.length} tasks in Trash? Filters and selection do not limit this action. This cannot be undone.`)) {
+                                    void handleEmptyDeletedTasks();
                                 }
-                                return;
-                            }
-                            handleUnarchive(taskId);
-                        }, handleRestoreDeletedTask: (deletedRecordId) => {
-                            void handleRestoreDeletedTask(deletedRecordId);
-                        }, handlePermanentlyDeleteDeletedTask: (deletedRecordId) => {
-                            void handlePermanentlyDeleteDeletedTask(deletedRecordId);
-                        } })), activeTab === 'tasks' && (_jsx(TaskList, { ref: tasksScrollRef, tasks: tasks, archivedTasks: archivedTasks, categories: activeCategories, types: activeTypes, priorities: priorities, taxonomyDisplayLabels: taxonomyDisplayLabels, taxonomies: taxonomies, searchQuery: searchQuery, filterCategories: filterCategories, filterTypes: filterTypes, filterPriorities: filterPriorities, filterStatus: filterStatus, filterAssignees: filterAssignees, assigneeOptions: assigneeOptions, filterTaxonomies: filterTaxonomies, sortBy: sortBy, sortOrder: sortOrder, showArchive: showArchive, taskScope: taskScope, collapsedCategories: collapsedCategories, loadingTasks: loadingTasks, filteredTasks: filteredTasks, filteredArchive: filteredArchive, groupedTasks: groupedTasks, filteredDeletedTasks: filteredDeletedTasks, groupedDeletedTasks: groupedDeletedTasks, copiedId: copiedId, recentlyChangedTaskIds: recentlyChangedTaskIds, showTaskCardStatusLabel: showTaskCardStatusLabel, workstreams: props.workstreams, initiatives: props.initiatives, onSearchChange: setSearchQuery, onFilterCategoriesChange: (vals) => setFilterCategories(vals), onFilterTypesChange: (vals) => setFilterTypes(vals), onFilterPrioritiesChange: setFilterPriorities, onFilterStatusChange: setFilterStatus, onFilterAssigneesChange: (vals) => setFilterAssignees(vals), onTaxonomyFilterChange: (id, values) => setFilterTaxonomies(prev => ({ ...prev, [id]: values })), onSortByChange: handleSortByChange, onSortOrderChange: toggleSortOrder, onShowArchiveChange: setShowArchive, onTaskScopeChange: setTaskScope, onClearFilters: clearFilters, onToggleCategory: (category) => setCollapsedCategories(prev => ({ ...prev, [category]: !prev[category] })), onEditTask: handleEdit, onOpenTaskById: handleOpenTaskById, onCopyId: handleCopyId, onToggleInProgress: handleToggleInProgress, onToggleReview: handleToggleReview, onToggleComplete: handleToggleComplete, onToggleCancel: handleToggleCancel, onArchiveTask: handleArchiveTask, onBulkArchive: handleBulkArchive, onUnarchive: (taskId) => {
+                            } })), copiedId: copiedId, recentlyChangedTaskIds: recentlyChangedTaskIds, showTaskCardStatusLabel: showTaskCardStatusLabel, workstreams: props.workstreams, initiatives: props.initiatives, onSearchChange: setSearchQuery, onFilterCategoriesChange: (vals) => setFilterCategories(vals), onFilterTypesChange: (vals) => setFilterTypes(vals), onFilterPrioritiesChange: setFilterPriorities, onFilterStatusChange: setFilterStatus, onFilterAssigneesChange: (vals) => setFilterAssignees(vals), onTaxonomyFilterChange: (id, values) => setFilterTaxonomies(prev => ({ ...prev, [id]: values })), onSortByChange: handleSortByChange, onSortOrderChange: toggleSortOrder, onShowArchiveChange: setShowArchive, onTaskScopeChange: setTaskScope, onClearFilters: clearFilters, onToggleCategory: (category) => setCollapsedCategories(prev => ({ ...prev, [category]: !prev[category] })), onEditTask: handleEdit, onUpdateTask: handleUpdateTask, taskReferences: taskTextReferences, onCopyId: handleCopyId, onToggleInProgress: handleToggleInProgress, onToggleReview: handleToggleReview, onToggleComplete: handleToggleComplete, onToggleCancel: handleToggleCancel, onSetStatus: handleSetStatus, onArchiveTask: handleArchiveTask, onBulkArchive: handleBulkArchive, onUnarchive: (taskId) => {
                             const deletedRecord = deletedRecordByTaskId.get(taskId);
                             if (deletedRecord) {
-                                void handleRestoreDeletedTask(deletedRecord.id);
+                                void handleRestoreDeletedTask(deletedRecord.id, deletedRecord.taskId);
                                 return;
                             }
                             handleUnarchive(taskId);
@@ -301,12 +359,12 @@ export function WidgetView(props) {
                             void handleDelete(taskId);
                         }, onDeleteAllDeleted: () => {
                             void handleEmptyDeletedTasks();
-                        }, onFetchArchive: fetchArchive, onAddTaskToCategory: handleAddTaskToCategory, supplementalTasks: deletedScopeTasks })), activeTab === 'add' && (_jsx(TaskForm, { editingTaskId: editingTaskId, error: error, title: title, description: description, checklistItems: checklistItems, category: category, type: type, priority: priority, complexity: complexity, manualComplexityEnabled: manualComplexityEnabled, approach: approach, assignee: assignee, scheduledDate: scheduledDate, dueDate: dueDate, workstreamInput: workstreamInput, formTaxonomies: formTaxonomies, onTaxonomyChange: onTaxonomyChange, taxonomies: taxonomies, comments: comments, newCommentText: newCommentText, contextFiles: attachments, currentWorkspaceId: currentWorkspaceId, apiBaseUrl: "", descriptionFocused: descriptionFocused, showMarkdownHelp: showMarkdownHelp, showChecklist: showChecklist, checklistEnabled: checklistDropdownEnabled, showComments: showComments, categories: activeCategories, types: activeTypes, priorities: priorities, taxonomyDisplayLabels: taxonomyDisplayLabels, assigneeOptions: assigneeOptions, workstreams: props.workstreams, initiatives: props.initiatives, copiedId: copiedId, onTitleChange: setTitle, onDescriptionChange: setDescription, onChecklistItemsChange: setChecklistItems, onCategoryChange: setCategory, onTypeChange: setType, onPriorityChange: setPriority, onComplexityChange: setComplexity, onApproachChange: (val) => { setApproach(val); setFormTaxonomies(prev => ({ ...prev, approach: val })); }, onAssigneeChange: setAssignee, onScheduledDateChange: setScheduledDate, onDueDateChange: setDueDate, onWorkstreamInputChange: setWorkstreamInput, onNewCommentTextChange: setNewCommentText, onDescriptionFocusedChange: setDescriptionFocused, onShowMarkdownHelpChange: setShowMarkdownHelp, onShowChecklistChange: setShowChecklist, onShowCommentsChange: setShowComments, onOpenSettings: (section) => {
+                        }, onFetchArchive: fetchArchive, onAddTaskToCategory: handleAddTaskToCategory, supplementalTasks: deletedScopeTasks })), activeTab === 'add' && (_jsx(TaskForm, { editingTaskId: editingTaskId, initialActivityEntryId: props.initialActivityEntryId, title: title, description: description, checklistItems: checklistItems, category: category, type: type, priority: priority, complexity: complexity, manualComplexityEnabled: manualComplexityEnabled, assignee: assignee, scheduledDate: scheduledDate, dueDate: dueDate, formTaxonomies: formTaxonomies, onTaxonomyChange: onTaxonomyChange, taxonomies: taxonomies, comments: comments, newCommentText: newCommentText, contextFiles: attachments, currentWorkspaceId: currentWorkspaceId, currentActorId: authUserId, apiBaseUrl: "", descriptionFocused: descriptionFocused, showMarkdownHelp: showMarkdownHelp, checklistEnabled: checklistDropdownEnabled, categories: activeCategories, types: activeTypes, priorities: priorities, taxonomyDisplayLabels: taxonomyDisplayLabels, assigneeOptions: assigneeOptions, workstreams: props.workstreams, initiatives: props.initiatives, copiedId: copiedId, onTitleChange: setTitle, onTitleDraftChange: setTitleDraft, onDescriptionChange: setDescription, onDescriptionDraftChange: setDescriptionDraft, onChecklistItemsChange: setChecklistItems, onCategoryChange: setCategory, onTypeChange: setType, onPriorityChange: setPriority, onComplexityChange: setComplexity, onAssigneeChange: setAssignee, onScheduledDateChange: setScheduledDate, onDueDateChange: setDueDate, onNewCommentTextChange: setNewCommentText, onDescriptionFocusedChange: setDescriptionFocused, onShowMarkdownHelpChange: setShowMarkdownHelp, onOpenSettings: (section) => {
                             handleNavigation(() => {
                                 setSettingsSection(section);
                                 setActiveTab('settings');
                             });
-                        }, onSubmit: handleSubmit, commentsEndRef: commentsEndRef, onAddComment: () => handleAddComment(newCommentText), onOpenTaskById: handleOpenTaskById, onAddContextFile: (file) => {
+                        }, onSubmit: handleSubmit, commentsEndRef: commentsEndRef, onAddComment: () => handleAddComment(newCommentText), taskReferences: taskTextReferences, onAddContextFile: (file) => {
                             setAttachmentsDirty(true);
                             setAttachments(prev => [...prev, file]);
                         }, onRemoveContextFile: async (index) => {
@@ -321,11 +379,18 @@ export function WidgetView(props) {
                                     return { path: s, caption, timestamp: new Date().toISOString() };
                                 return { ...s, caption };
                             }));
+                        }, onOpenContextImage: (attachment) => {
+                            dispatchPreviewContextAttachment(attachment, {
+                                ownerType: 'task',
+                                ownerId: editingTaskId,
+                                ownerReferenceLabel: getTaskReferenceLabel(currentTask),
+                                workspaceId: currentWorkspaceId,
+                            });
                         }, onCopyId: handleCopyId, onToggleInProgress: handleToggleInProgress, onToggleReview: handleToggleReview, onToggleComplete: handleToggleComplete, onToggleCancel: handleToggleCancel, onArchiveTask: handleArchiveTask, onUnarchive: (taskId) => {
                             if (currentTask?.isDeleted) {
                                 const deletedRecord = deletedRecordByTaskId.get(taskId);
                                 if (deletedRecord) {
-                                    void handleRestoreDeletedTask(deletedRecord.id);
+                                    void handleRestoreDeletedTask(deletedRecord.id, deletedRecord.taskId);
                                 }
                                 return;
                             }

package/dist/components/views/chrome/WorkspaceChromeSections.d.ts

@@ -33,6 +33,8 @@ export interface WorkspaceHeaderActionItem {
     active?: boolean;
     disabled?: boolean;
     ariaDisabled?: boolean;
+    ariaExpanded?: boolean;
+    ariaControls?: string;
     className?: string;
 }
 export interface WorkspaceHeaderActionsProps {
@@ -46,6 +48,7 @@ export interface WorkspacePrimaryActionProps {
 }
 export interface WorkspaceFilterBarProps {
     children: React.ReactNode;
+    id?: string;
 }
 export declare function WorkspaceHeaderSearch({ value, placeholder, active, onChange, onClear, clearTitle, }: WorkspaceHeaderSearchProps): import("react/jsx-runtime").JSX.Element;
 export declare function WorkspaceHeaderSelect({ label, value, options, onChange, trailingAction, width, }: WorkspaceHeaderSelectProps): import("react/jsx-runtime").JSX.Element;
@@ -53,5 +56,4 @@ export declare function WorkspaceModuleSwitcher({ value, options, onChange, widt
 export declare function WorkspaceHeaderActions({ actions }: WorkspaceHeaderActionsProps): import("react/jsx-runtime").JSX.Element;
 export declare function WorkspaceHeaderDivider(): import("react/jsx-runtime").JSX.Element;
 export declare function WorkspacePrimaryAction({ icon, label, onClick, disabled, }: WorkspacePrimaryActionProps): import("react/jsx-runtime").JSX.Element;
-export declare function WorkspaceFilterBar({ children }: WorkspaceFilterBarProps): import("react/jsx-runtime").JSX.Element;
-export declare function EmptyWorkspaceFilterBar(): import("react/jsx-runtime").JSX.Element;
+export declare function WorkspaceFilterBar({ children, id }: WorkspaceFilterBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/views/chrome/WorkspaceChromeSections.js

@@ -11,7 +11,7 @@ export function WorkspaceModuleSwitcher({ value, options, onChange, width = '160
     return (_jsx(WorkspaceHeaderSelect, { label: "Module", value: value, options: options, onChange: onChange, width: width }));
 }
 export function WorkspaceHeaderActions({ actions }) {
-    return (_jsx(_Fragment, { children: actions.map((action) => (_jsx("button", { className: `tf-control-icon ${action.active ? 'tf-control-icon-active' : ''} ${action.className || ''}`.trim(), onClick: action.onClick, title: action.title, disabled: action.disabled, "aria-disabled": action.ariaDisabled, children: action.icon }, action.key))) }));
+    return (_jsx(_Fragment, { children: actions.map((action) => (_jsx("button", { className: `tf-control-icon ${action.active ? 'tf-control-icon-active' : ''} ${action.className || ''}`.trim(), onClick: action.onClick, title: action.title, disabled: action.disabled, "aria-disabled": action.ariaDisabled, "aria-expanded": action.ariaExpanded, "aria-controls": action.ariaControls, children: action.icon }, action.key))) }));
 }
 export function WorkspaceHeaderDivider() {
     return _jsx("div", { className: styles.headerDivider });
@@ -19,8 +19,8 @@ export function WorkspaceHeaderDivider() {
 export function WorkspacePrimaryAction({ icon, label, onClick, disabled = false, }) {
     return (_jsxs("button", { className: styles.primaryUpdateBtn, onClick: onClick, disabled: disabled, children: [icon, " ", label] }));
 }
-export function WorkspaceFilterBar({ children }) {
-    return (_jsx("div", { className: styles.filterToolbar, style: {
+export function WorkspaceFilterBar({ children, id }) {
+    return (_jsx("div", { id: id, className: styles.filterToolbar, style: {
             padding: '8px 24px',
             borderBottom: '1px solid var(--border-primary)',
             background: 'var(--bg-secondary)',
@@ -33,6 +33,3 @@ export function WorkspaceFilterBar({ children }) {
             zIndex: 50,
         }, children: children }));
 }
-export function EmptyWorkspaceFilterBar() {
-    return (_jsx(WorkspaceFilterBar, { children: _jsx("div", { "aria-hidden": "true", style: { minHeight: '32px', flex: 1 } }) }));
-}

package/dist/components/views/chrome/workspaceChrome.d.ts

@@ -1,20 +1,16 @@
 import type { AppGateKey } from '../../../runtime/appGates';
 import { type ResolvedFeatureAccessMap } from '../../../runtime/appGates';
-export type WorkspaceModuleId = 'tasks' | 'docs' | 'annotate' | 'workflows' | 'agents';
+export type WorkspaceModuleId = 'tasks' | 'planning' | 'docs' | 'annotate' | 'workflowManager' | 'taskforceAgents' | 'aiProfiles';
+export type LegacyWorkspaceModuleId = 'agents' | 'workflows';
 export type WorkspaceChromeMode = WorkspaceModuleId;
 export type WorkspaceHeaderSectionId = 'search' | 'sort' | 'divider-primary' | 'grouping' | 'divider-secondary' | 'task-display-actions';
 export type WorkspacePrimaryActionId = 'add-task' | 'add-document' | null;
-export type WorkspaceFilterBarKind = 'task-filters' | 'document-filters' | 'empty';
-export type WorkspaceFilterBarDefinition = {
-    kind: WorkspaceFilterBarKind;
-};
-export type WorkspaceChromeLayoutVariant = 'tasks-default' | 'docs-minimal' | 'annotated-module' | 'workflows-module' | 'agents-module';
+export type WorkspaceChromeLayoutVariant = 'tasks-default' | 'planning-module' | 'docs-minimal' | 'annotated-module' | 'workflow-manager-module' | 'taskforce-agents-module' | 'ai-profiles-module';
 export type WorkspaceChromeDefinition = {
     mode: WorkspaceChromeMode;
     moduleId: WorkspaceModuleId;
     layoutVariant: WorkspaceChromeLayoutVariant;
     headerSections: WorkspaceHeaderSectionId[];
-    filterBar: WorkspaceFilterBarDefinition;
     primaryAction: WorkspacePrimaryActionId;
 };
 export type WorkspaceModuleDefinition = {
@@ -24,8 +20,9 @@ export type WorkspaceModuleDefinition = {
     enabled: boolean;
     fallbackModuleId: WorkspaceModuleId;
 };
+export declare const WORKSPACE_MODULE_LABELS: Record<WorkspaceModuleId, string>;
 export declare function getWorkspaceModuleDefinitions(options?: {
     featureAccess?: ResolvedFeatureAccessMap;
 }): WorkspaceModuleDefinition[];
 export declare function getWorkspaceChromeDefinition(mode: WorkspaceChromeMode): WorkspaceChromeDefinition;
-export declare function resolveWorkspaceModule(requestedModuleId: WorkspaceModuleId, modules: WorkspaceModuleDefinition[]): WorkspaceModuleId;
+export declare function resolveWorkspaceModule(requestedModuleId: WorkspaceModuleId | LegacyWorkspaceModuleId, modules: WorkspaceModuleDefinition[]): WorkspaceModuleId;

package/dist/components/views/chrome/workspaceChrome.js

@@ -1,41 +1,64 @@
-import { AGENTS_WORKSPACE_FEATURE_KEY, ANNOTATED_ATTACHMENTS_WORKSPACE_FEATURE_KEY, DOCUMENT_WORKSPACE_FEATURE_KEY, WORKFLOWS_WORKSPACE_FEATURE_KEY, } from '../../../runtime/appGates';
-const WORKSPACE_MODULE_ORDER = ['tasks', 'docs', 'annotate', 'workflows', 'agents'];
+import { AI_PROFILES_WORKSPACE_FEATURE_KEY, ANNOTATED_ATTACHMENTS_WORKSPACE_FEATURE_KEY, DOCUMENT_WORKSPACE_FEATURE_KEY, PLANNING_WORKSPACE_FEATURE_KEY, TASKFORCE_AGENTS_WORKSPACE_FEATURE_KEY, WORKFLOW_MANAGER_WORKSPACE_FEATURE_KEY, } from '../../../runtime/appGates';
+export const WORKSPACE_MODULE_LABELS = {
+    tasks: 'Tasks',
+    planning: 'Planning',
+    docs: 'Documents',
+    annotate: 'Image Notes',
+    workflowManager: 'Workflow Manager',
+    taskforceAgents: 'Taskforce Agents',
+    aiProfiles: 'AI Profiles',
+};
+const WORKSPACE_MODULE_ORDER = ['tasks', 'planning', 'docs', 'annotate', 'workflowManager', 'taskforceAgents', 'aiProfiles'];
 export function getWorkspaceModuleDefinitions(options) {
     const featureAccess = options?.featureAccess || {};
     const modules = {
         tasks: {
             id: 'tasks',
-            label: 'Tasks',
+            label: WORKSPACE_MODULE_LABELS.tasks,
             featureKey: null,
             enabled: true,
             fallbackModuleId: 'tasks',
         },
+        planning: {
+            id: 'planning',
+            label: WORKSPACE_MODULE_LABELS.planning,
+            featureKey: PLANNING_WORKSPACE_FEATURE_KEY,
+            enabled: featureAccess[PLANNING_WORKSPACE_FEATURE_KEY]?.allowed ?? false,
+            fallbackModuleId: 'tasks',
+        },
         docs: {
             id: 'docs',
-            label: 'Documents',
+            label: WORKSPACE_MODULE_LABELS.docs,
             featureKey: DOCUMENT_WORKSPACE_FEATURE_KEY,
             enabled: featureAccess[DOCUMENT_WORKSPACE_FEATURE_KEY]?.allowed ?? true,
             fallbackModuleId: 'tasks',
         },
         annotate: {
             id: 'annotate',
-            label: 'Image Notes',
+            label: WORKSPACE_MODULE_LABELS.annotate,
             featureKey: ANNOTATED_ATTACHMENTS_WORKSPACE_FEATURE_KEY,
             enabled: featureAccess[ANNOTATED_ATTACHMENTS_WORKSPACE_FEATURE_KEY]?.allowed ?? false,
             fallbackModuleId: 'tasks',
         },
-        workflows: {
-            id: 'workflows',
-            label: 'Workflows',
-            featureKey: WORKFLOWS_WORKSPACE_FEATURE_KEY,
-            enabled: featureAccess[WORKFLOWS_WORKSPACE_FEATURE_KEY]?.allowed ?? false,
+        workflowManager: {
+            id: 'workflowManager',
+            label: WORKSPACE_MODULE_LABELS.workflowManager,
+            featureKey: WORKFLOW_MANAGER_WORKSPACE_FEATURE_KEY,
+            enabled: featureAccess[WORKFLOW_MANAGER_WORKSPACE_FEATURE_KEY]?.allowed ?? false,
+            fallbackModuleId: 'tasks',
+        },
+        taskforceAgents: {
+            id: 'taskforceAgents',
+            label: WORKSPACE_MODULE_LABELS.taskforceAgents,
+            featureKey: TASKFORCE_AGENTS_WORKSPACE_FEATURE_KEY,
+            enabled: featureAccess[TASKFORCE_AGENTS_WORKSPACE_FEATURE_KEY]?.allowed ?? false,
             fallbackModuleId: 'tasks',
         },
-        agents: {
-            id: 'agents',
-            label: 'Agents',
-            featureKey: AGENTS_WORKSPACE_FEATURE_KEY,
-            enabled: featureAccess[AGENTS_WORKSPACE_FEATURE_KEY]?.allowed ?? false,
+        aiProfiles: {
+            id: 'aiProfiles',
+            label: WORKSPACE_MODULE_LABELS.aiProfiles,
+            featureKey: AI_PROFILES_WORKSPACE_FEATURE_KEY,
+            enabled: featureAccess[AI_PROFILES_WORKSPACE_FEATURE_KEY]?.allowed ?? false,
             fallbackModuleId: 'tasks',
         },
     };
@@ -43,13 +66,20 @@ export function getWorkspaceModuleDefinitions(options) {
 }
 export function getWorkspaceChromeDefinition(mode) {
     switch (mode) {
+        case 'planning':
+            return {
+                mode,
+                moduleId: 'planning',
+                layoutVariant: 'planning-module',
+                headerSections: [],
+                primaryAction: null,
+            };
         case 'docs':
             return {
                 mode,
                 moduleId: 'docs',
                 layoutVariant: 'docs-minimal',
                 headerSections: [],
-                filterBar: { kind: 'document-filters' },
                 primaryAction: null,
             };
         case 'annotate':
@@ -58,25 +88,30 @@ export function getWorkspaceChromeDefinition(mode) {
                 moduleId: 'annotate',
                 layoutVariant: 'annotated-module',
                 headerSections: [],
-                filterBar: { kind: 'empty' },
                 primaryAction: null,
             };
-        case 'workflows':
+        case 'workflowManager':
+            return {
+                mode,
+                moduleId: 'workflowManager',
+                layoutVariant: 'workflow-manager-module',
+                headerSections: [],
+                primaryAction: null,
+            };
+        case 'taskforceAgents':
             return {
                 mode,
-                moduleId: 'workflows',
-                layoutVariant: 'workflows-module',
+                moduleId: 'taskforceAgents',
+                layoutVariant: 'taskforce-agents-module',
                 headerSections: [],
-                filterBar: { kind: 'empty' },
                 primaryAction: null,
             };
-        case 'agents':
+        case 'aiProfiles':
             return {
                 mode,
-                moduleId: 'agents',
-                layoutVariant: 'agents-module',
+                moduleId: 'aiProfiles',
+                layoutVariant: 'ai-profiles-module',
                 headerSections: [],
-                filterBar: { kind: 'empty' },
                 primaryAction: null,
             };
         case 'tasks':
@@ -93,13 +128,13 @@ export function getWorkspaceChromeDefinition(mode) {
                     'divider-secondary',
                     'task-display-actions',
                 ],
-                filterBar: { kind: 'task-filters' },
                 primaryAction: 'add-task',
             };
     }
 }
 export function resolveWorkspaceModule(requestedModuleId, modules) {
-    const requestedModule = modules.find((module) => module.id === requestedModuleId);
+    const normalizedModuleId = requestedModuleId === 'agents' ? 'aiProfiles' : requestedModuleId;
+    const requestedModule = modules.find((module) => module.id === normalizedModuleId);
     if (!requestedModule)
         return 'tasks';
     if (requestedModule.enabled)

package/dist/components/views/panels/FilterToolbar.d.ts

@@ -1,5 +1,5 @@
 /**
- * FilterToolbar — the collapsible filter bar rendered below the AppShellHeader.
+ * FilterToolbar — the collapsible task filter bar rendered inside the Task Board content column.
  *
  * Renders multi-select filters for category, type, priority, status, assignee,
  * optional initiative/workstream scaffold filters, a task-scope toggle, and a clear-all button.
@@ -14,6 +14,7 @@
 import type { TaskAssignee } from '../../../types';
 import type { TaskAssigneeOption } from '../../../utils/assignees';
 export interface FilterToolbarProps {
+    id?: string;
     categoryFilterOptions: Array<{
         value: string;
         label: string;
@@ -60,9 +61,9 @@ export interface FilterToolbarProps {
     setTaskScope: (scope: 'open' | 'archived' | 'deleted') => void;
     showArchive: boolean;
     setShowArchive: (val: boolean) => void;
-    fetchArchive: () => void;
     onDeleteAllDeleted?: () => void;
     clearFilters: () => void;
+    clearFiltersDisabled?: boolean;
 }
-export declare function TaskFilterToolbarContent({ categoryFilterOptions, typeFilterOptions, priorities, taxonomyDisplayLabels, filterCategories, setFilterCategories, filterTypes, setFilterTypes, filterPriorities, setFilterPriorities, filterStatus, setFilterStatus, filterAssignees, setFilterAssignees, assigneeOptions, initiativeFilterOptions, selectedInitiativeId, setSelectedInitiativeId, workstreamFilterOptions, selectedWorkstreamId, setSelectedWorkstreamId, taskScope, setTaskScope, showArchive, setShowArchive, fetchArchive, onDeleteAllDeleted, clearFilters, }: FilterToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaskFilterToolbarContent({ categoryFilterOptions, typeFilterOptions, priorities, taxonomyDisplayLabels, filterCategories, setFilterCategories, filterTypes, setFilterTypes, filterPriorities, setFilterPriorities, filterStatus, setFilterStatus, filterAssignees, setFilterAssignees, assigneeOptions, initiativeFilterOptions, selectedInitiativeId, setSelectedInitiativeId, workstreamFilterOptions, selectedWorkstreamId, setSelectedWorkstreamId, taskScope, setTaskScope, showArchive, setShowArchive, onDeleteAllDeleted, clearFilters, clearFiltersDisabled, }: FilterToolbarProps): import("react/jsx-runtime").JSX.Element;
 export declare function FilterToolbar(props: FilterToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/views/panels/FilterToolbar.js

@@ -2,20 +2,23 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { STATUS_OPTIONS } from '../../../utils/constants';
 import styles from '../../../Taskforce.module.css';
 import { t } from '../../../localization';
+import { AssigneeIdentity } from '../../ui/AssigneeIdentity';
 import { WorkspaceFilterBar } from '../chrome/WorkspaceChromeSections';
 import { DeleteAllDeletedAction, FilterToolbarClearAction, FilterToolbarLabel, FilterToolbarMultiSelect, FilterToolbarSingleSelect, TaskScopeToggle, } from './FilterToolbarControls';
-export function TaskFilterToolbarContent({ categoryFilterOptions, typeFilterOptions, priorities, taxonomyDisplayLabels, filterCategories, setFilterCategories, filterTypes, setFilterTypes, filterPriorities, setFilterPriorities, filterStatus, setFilterStatus, filterAssignees, setFilterAssignees, assigneeOptions, initiativeFilterOptions = [], selectedInitiativeId = '', setSelectedInitiativeId = () => { }, workstreamFilterOptions = [], selectedWorkstreamId = '', setSelectedWorkstreamId = () => { }, taskScope, setTaskScope, showArchive, setShowArchive, fetchArchive, onDeleteAllDeleted, clearFilters, }) {
-    return (_jsxs(_Fragment, { children: [_jsx(FilterToolbarLabel, {}), _jsx(FilterToolbarMultiSelect, { label: taxonomyDisplayLabels?.category || t('standalone.categoryLabel'), options: categoryFilterOptions, selected: filterCategories, onChange: (vals) => setFilterCategories(vals), variant: "value" }), _jsx(FilterToolbarMultiSelect, { label: taxonomyDisplayLabels?.type || t('standalone.typeLabel'), options: typeFilterOptions, selected: filterTypes, onChange: (vals) => setFilterTypes(vals), variant: "value" }), _jsx(FilterToolbarMultiSelect, { label: taxonomyDisplayLabels?.priority || t('standalone.priorityLabel'), options: priorities, selected: filterPriorities, onChange: (vals) => setFilterPriorities(vals), variant: "value" }), _jsx(FilterToolbarMultiSelect, { label: t('standalone.statusLabel'), options: STATUS_OPTIONS, selected: filterStatus, onChange: (vals) => setFilterStatus(vals), variant: "value" }), _jsx(FilterToolbarMultiSelect, { label: t('standalone.assigneeLabel'), options: assigneeOptions, selected: filterAssignees, onChange: (vals) => setFilterAssignees(vals), variant: "value" }), _jsx("div", { className: styles.headerDivider, style: { height: '16px', margin: '0 8px' } }), _jsx(FilterToolbarSingleSelect, { label: "Initiative", options: initiativeFilterOptions, selected: selectedInitiativeId, onChange: setSelectedInitiativeId, allLabel: "All Initiatives", title: "Filter by initiative" }), _jsx(FilterToolbarSingleSelect, { label: "Workstream", options: workstreamFilterOptions, selected: selectedWorkstreamId, onChange: setSelectedWorkstreamId, allLabel: "All Workstreams", title: "Filter by workstream" }), _jsx(TaskScopeToggle, { scope: taskScope, onScopeChange: (scope) => {
+export function TaskFilterToolbarContent({ categoryFilterOptions, typeFilterOptions, priorities, taxonomyDisplayLabels, filterCategories, setFilterCategories, filterTypes, setFilterTypes, filterPriorities, setFilterPriorities, filterStatus, setFilterStatus, filterAssignees, setFilterAssignees, assigneeOptions, initiativeFilterOptions = [], selectedInitiativeId = '', setSelectedInitiativeId = () => { }, workstreamFilterOptions = [], selectedWorkstreamId = '', setSelectedWorkstreamId = () => { }, taskScope, setTaskScope, showArchive, setShowArchive, onDeleteAllDeleted, clearFilters, clearFiltersDisabled = false, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(FilterToolbarLabel, {}), _jsx(FilterToolbarMultiSelect, { label: taxonomyDisplayLabels?.category || t('standalone.categoryLabel'), options: categoryFilterOptions, selected: filterCategories, onChange: (vals) => setFilterCategories(vals), variant: "value" }), _jsx(FilterToolbarMultiSelect, { label: taxonomyDisplayLabels?.type || t('standalone.typeLabel'), options: typeFilterOptions, selected: filterTypes, onChange: (vals) => setFilterTypes(vals), variant: "value" }), _jsx(FilterToolbarMultiSelect, { label: taxonomyDisplayLabels?.priority || t('standalone.priorityLabel'), options: priorities, selected: filterPriorities, onChange: (vals) => setFilterPriorities(vals), variant: "value" }), _jsx(FilterToolbarMultiSelect, { label: t('standalone.statusLabel'), options: STATUS_OPTIONS, selected: filterStatus, onChange: (vals) => setFilterStatus(vals), variant: "value" }), _jsx(FilterToolbarMultiSelect, { label: t('standalone.assigneeLabel'), options: assigneeOptions, selected: filterAssignees, onChange: (vals) => setFilterAssignees(vals), variant: "value", searchable: true, searchPlaceholder: "Search assignees...", noResultsText: "No assignees found.", renderOptionContent: (option) => {
+                    const assigneeOption = assigneeOptions.find((entry) => String(entry.value) === String(option.value));
+                    return assigneeOption ? _jsx(AssigneeIdentity, { option: assigneeOption, size: 20 }) : option.label;
+                } }), _jsx("div", { className: styles.headerDivider, style: { height: '16px', margin: '0 8px' } }), _jsx(FilterToolbarSingleSelect, { label: "Initiative", options: initiativeFilterOptions, selected: selectedInitiativeId, onChange: setSelectedInitiativeId, allLabel: "All Initiatives", title: "Filter by initiative" }), _jsx(FilterToolbarSingleSelect, { label: "Workstream", options: workstreamFilterOptions, selected: selectedWorkstreamId, onChange: setSelectedWorkstreamId, allLabel: "All Workstreams", title: "Filter by workstream" }), _jsx(FilterToolbarClearAction, { onClick: clearFilters, disabled: clearFiltersDisabled, label: "Reset task filters and sort" }), _jsx("div", { style: { flex: 1 } }), taskScope === 'deleted' && onDeleteAllDeleted && (_jsx(DeleteAllDeletedAction, { onClick: onDeleteAllDeleted, className: `${styles.bulkArchiveBtn} ${styles.taskToolbarAction} ${styles.bulkDeleteBtn}`, title: "Empty trash", children: "Empty Trash" })), _jsx(TaskScopeToggle, { scope: taskScope, onScopeChange: (scope) => {
                     setTaskScope(scope);
                     if (scope === 'archived') {
                         setShowArchive(true);
-                        fetchArchive();
                     }
                     else if (showArchive) {
                         setShowArchive(false);
                     }
-                }, className: styles.groupByContainer, labelClassName: styles.groupByLabel }), _jsx("div", { style: { flex: 1 } }), taskScope === 'deleted' && onDeleteAllDeleted && (_jsx(DeleteAllDeletedAction, { onClick: onDeleteAllDeleted, className: `${styles.bulkArchiveBtn} ${styles.taskToolbarAction} ${styles.bulkDeleteBtn}`, title: "Empty trash", children: "Empty Trash" })), _jsx(FilterToolbarClearAction, { onClick: clearFilters })] }));
+                }, className: styles.groupByContainer, labelClassName: styles.groupByLabel })] }));
 }
 export function FilterToolbar(props) {
-    return (_jsx(WorkspaceFilterBar, { children: _jsx(TaskFilterToolbarContent, { ...props }) }));
+    return (_jsx(WorkspaceFilterBar, { id: props.id, children: _jsx(TaskFilterToolbarContent, { ...props }) }));
 }

package/dist/components/views/panels/FilterToolbarControls.d.ts

@@ -9,9 +9,18 @@ type FilterToolbarMultiSelectProps = {
     selected: (string | number)[];
     onChange: (values: (string | number)[]) => void;
     variant?: 'label' | 'value';
+    renderOptionContent?: (option: {
+        value: string | number;
+        label: string;
+    }) => React.ReactNode;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    noResultsText?: string;
 };
 type FilterToolbarClearActionProps = {
     onClick: () => void;
+    disabled: boolean;
+    label?: string;
 };
 type FilterToolbarSingleSelectProps = {
     label: string;
@@ -39,8 +48,8 @@ type DeleteAllDeletedActionProps = {
     children?: React.ReactNode;
 };
 export declare function FilterToolbarLabel(): import("react/jsx-runtime").JSX.Element;
-export declare function FilterToolbarMultiSelect({ label, options, selected, onChange, variant, }: FilterToolbarMultiSelectProps): import("react/jsx-runtime").JSX.Element;
-export declare function FilterToolbarClearAction({ onClick }: FilterToolbarClearActionProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterToolbarMultiSelect({ label, options, selected, onChange, variant, renderOptionContent, searchable, searchPlaceholder, noResultsText, }: FilterToolbarMultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterToolbarClearAction({ onClick, disabled, label, }: FilterToolbarClearActionProps): import("react/jsx-runtime").JSX.Element;
 export declare function FilterToolbarSingleSelect({ label, options, selected, onChange, allLabel, title, }: FilterToolbarSingleSelectProps): import("react/jsx-runtime").JSX.Element;
 export declare function TaskScopeToggle({ scope, onScopeChange, className, labelClassName, }: TaskScopeToggleProps): import("react/jsx-runtime").JSX.Element;
 export declare function DeleteAllDeletedAction({ onClick, disabled, className, title, children, }: DeleteAllDeletedActionProps): import("react/jsx-runtime").JSX.Element;