@taskforcehq/taskforce 0.3.170 → 0.3.300

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

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

package/dist/components/views/WidgetView.js

@@ -1,13 +1,22 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef, useLayoutEffect, useCallback } from 'react';
+import React, { useRef, useLayoutEffect, useCallback, 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 { getTaskReferenceLabel } from '../../utils/taskReferences';
+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 { TaskList } from '../task/TaskList';
 import { TaskForm } from '../task/TaskForm';
 import { TaskActionHeader } from '../task/TaskActionHeader';
-import { TaskSettings } from '../features/TaskSettings';
+import { TopNoticeLayer } from '../ui/TopNoticeLayer';
+const TaskSettings = React.lazy(() => import('../features/TaskSettings').then(m => ({ default: m.TaskSettings })));
 export function WidgetView(props) {
     const { 
     // UI State
@@ -15,29 +24,29 @@ export function WidgetView(props) {
     // Settings & Config
     saveSettings, pathSaved, keyShortcut, setKeyShortcut, jsonBackupEnabled, setJsonBackupEnabled, mcpHostRoot, setMcpHostRoot, settingsSection, setSettingsSection, projectRoot, projectName, mcpScriptPath, serverHostRoot, 
     // Browser
-    showFolderBrowser, setShowFolderBrowser, folders, files, currentBrowsePath, fetchFolders, browserTarget, setBrowserTarget, contextLinkBrowsePath, handleSelectPath, handleAddPath, handleRemovePath, 
+    showFolderBrowser, setShowFolderBrowser, folders, files, currentBrowsePath, fetchFolders, browserTarget, setBrowserTarget, handleSelectPath, handleAddPath, handleRemovePath, 
     // Data
-    tasks, loadingTasks, archivedTasks, activeCategories, activeTypes, priorities, approaches, availableSpecialists, taxonomies, 
+    tasks, loadingTasks, archivedTasks, deletedTasks, activeCategories, activeTypes, priorities, taxonomyDisplayLabels, approaches, taxonomies, 
     // Filters
-    searchQuery, setSearchQuery, filterCategories, setFilterCategories, filterTypes, setFilterTypes, filterPriorities, setFilterPriorities, filterStatus, setFilterStatus, filterAssignees, setFilterAssignees, parentTaskFilterMode, setParentTaskFilterMode, filterTaxonomies, setFilterTaxonomies, sortBy, setSortBy, sortOrder, toggleSortOrder, showArchive, setShowArchive, clearFilters, filteredTasks, filteredArchive, groupedTasks, collapsedCategories, setCollapsedCategories, 
+    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, fetchArchive, 
+    handleEdit, handleDelete, handleCopyId, handleToggleComplete, handleToggleCancel, handleToggleInProgress, handleToggleReview, handleArchiveTask, handleBulkArchive, handleUnarchive, handleRestoreDeletedTask, handlePermanentlyDeleteDeletedTask, handleEmptyDeletedTasks, fetchArchive, 
     // Form State
-    editingTaskId, loading, error, title, setTitle, description, setDescription, category, setCategory, type, setType, priority, setPriority, complexity, setComplexity, manualComplexityEnabled, checklistDropdownEnabled, assigneeFilterEnabled, approach, setApproach, assignee, setAssignee, scheduledDate, setScheduledDate, dueDate, setDueDate, parentTaskIdInput, setParentTaskIdInput, addChildTaskIdInput, setAddChildTaskIdInput, formTaxonomies, setFormTaxonomies, selectedSpecialists, setSelectedSpecialists, comments, newCommentText, setNewCommentText, screenshots, setScreenshots, descriptionFocused, setDescriptionFocused, showMarkdownHelp, setShowMarkdownHelp, showSpecialists, setShowSpecialists, showChecklist, setShowChecklist, showTaskRelationships, setShowTaskRelationships, showChildTasks, setShowChildTasks, showComments, setShowComments, 
+    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, 
     // Form Actions
-    handleSubmit, resetForm, handleAddComment, handleSetParentForCurrentTask, handleAddChildToCurrentTask, handleCreateChildForCurrentTask, handleUnlinkChildTask, handleReorderChildTasks, handleClearParentTask, handleOpenTaskById, 
+    handleSubmit, resetForm, handleAddComment, handleSetWorkstreamForCurrentTask, handleOpenTaskById, 
     // Modals
-    unsavedModalOpen, setUnsavedModalOpen, pendingNavigation, handleNavigation, handleClose, scheduleWarningPrompt, confirmScheduleWarning, cancelScheduleWarning, 
+    autoSaveState, unsavedModalOpen, setUnsavedModalOpen, pendingNavigation, handleNavigation, handleClose, scheduleWarningPrompt, confirmScheduleWarning, cancelScheduleWarning, 
     // Misc
-    successBanner, returnToParentTaskId, returnFromChildTaskId, clearReturnToParentTask, copiedId, recentlyChangedTaskIds, tasksScrollRef, setTasksScrollPos, currentTask, currentTaskParent, currentTaskChildren, 
+    uiNotice, clearNotice, taskReturnTrail, clearReturnToParentTask, returnToPreviousTask, copiedId, recentlyChangedTaskIds, tasksScrollRef, setTasksScrollPos, currentTask, currentTaskWorkstream, currentTaskInitiative, 
     // Export
-    exportEnvironment, setExportEnvironment, exportWorkflowsPath, setExportWorkflowsPath, exportSpecialistsPath, setExportSpecialistsPath, exportResult, handleExportResources, exportingResource, availableWorkflows, onExportWorkflows, availableEnvironments, 
+    exportEnvironment, setExportEnvironment, exportWorkflowsPath, setExportWorkflowsPath, exportResult, exportingResource, availableWorkflows, onExportWorkflows, availableEnvironments, 
     // Categories Management
-    handleUpdateCategory, handleRemoveCategory, handleSaveCategory, handleUpdateCategoryIcon, handleUpdateCategoryColor, handleSaveType, handleRemoveType, handleUpdateTaxonomies, handleUpdatePriorities, handleUpdateApproaches, pathValidation, validatePaths, getCategoryPaths, 
+    handleUpdateCategory, handleRemoveCategory, handleSaveCategory, handleUpdateCategoryIcon, handleUpdateCategoryColor, handleSaveType, handleRemoveType, handleUpdateTaxonomies, handleUpdatePriorities, pathValidation, validatePaths, getCategoryPaths, 
     // Refs
     commentsEndRef, 
     // Props from Core
-    settingsModel, onHeaderMouseDown, isDragging } = props;
+    currentWorkspaceId, settingsModel, onHeaderMouseDown, isDragging } = props;
     const modalRef = useRef(null);
     // Scroll restoration logic (pulled from Core)
     const [tasksScrollPosLocal, setTasksScrollPosLocal] = React.useState(0);
@@ -109,16 +118,11 @@ export function WidgetView(props) {
         handleNavigation(() => {
             // Simplified Back Logic matching Core
             if (activeTab === 'add' || activeTab === 'settings') {
-                if (activeTab === 'add'
-                    && editingTaskId
-                    && returnToParentTaskId
-                    && returnFromChildTaskId === editingTaskId) {
-                    const parentTask = tasks.find(t => t.id === returnToParentTaskId);
+                if (activeTab === 'add' && returnToPreviousTask()) {
+                    return;
+                }
+                if (activeTab === 'add' && taskReturnTrail.length > 0) {
                     clearReturnToParentTask();
-                    if (parentTask) {
-                        handleEdit(parentTask);
-                        return;
-                    }
                 }
                 if (activeTab === 'add')
                     resetForm();
@@ -169,12 +173,94 @@ export function WidgetView(props) {
             setActiveTab('add');
         });
     }, [resetForm, setCategory, setActiveTab, handleNavigation]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: modalRef, className: `${modalStyles.modal} ${styles.coreModal} ${activeTab === 'settings' ? modalStyles.settingsViewModal : ''}`, "data-theme": currentTheme, children: [_jsxs("div", { className: modalStyles.header, onMouseDown: onHeaderMouseDown, style: { cursor: onHeaderMouseDown ? (isDragging ? 'grabbing' : 'grab') : 'default' }, children: [_jsxs("div", { className: `${modalStyles.headerTitle} ${styles.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: "Total Tasks", children: tasks.length }), successBanner && (_jsxs("div", { className: styles.headerSuccess, children: [_jsx(Check, { size: 14 }), _jsx("span", { children: successBanner.message })] }))] }), _jsxs("div", { className: modalStyles.headerActions, children: [activeTab === 'tasks' && (_jsx(_Fragment, { children: _jsx("button", { className: modalStyles.headerActionBtn, onClick: () => {
+    const deletedScopeTasks = React.useMemo(() => deletedTasks.map((entry) => ({
+        ...entry.taskSnapshot,
+        isDeleted: true,
+        deletedRecordId: entry.id,
+    })), [deletedTasks]);
+    const deletedRecordByTaskId = React.useMemo(() => new globalThis.Map(deletedTasks.map((entry) => [entry.taskId, entry])), [deletedTasks]);
+    const filteredDeletedTasks = React.useMemo(() => {
+        const normalizedSearch = searchQuery.toLowerCase();
+        const isAllCategoriesSelected = activeCategories.every((cat) => filterCategories.includes(cat.value));
+        const isAllTypesSelected = activeTypes.every((type) => filterTypes.includes(type.value));
+        const selectedPriorityValues = Array.from(new Set(filterPriorities.map((value) => Number(value)).filter((value) => Number.isFinite(value))));
+        const allPriorityValues = priorities.map((priority) => Number(priority.value)).filter((value) => Number.isFinite(value));
+        const isAllPrioritiesSelected = allPriorityValues.every((value) => selectedPriorityValues.includes(value));
+        const defaultStatuses = ['task', 'in-progress', 'review', 'done', 'cancelled', 'on-hold'];
+        const isAllStatusesSelected = defaultStatuses.every((value) => filterStatus.includes(value));
+        const filterAssigneesAllSelected = assigneeOptions.length > 0
+            && assigneeOptions.every((option) => filterAssignees.includes(option.value));
+        const visibleTaxonomies = getVisibleTaxonomiesForTasks(taxonomies, deletedScopeTasks);
+        return deletedScopeTasks.filter((task) => {
+            const referenceLabel = getTaskReferenceLabel(task).toLowerCase();
+            const matchesSearch = !normalizedSearch
+                || task.title.toLowerCase().includes(normalizedSearch)
+                || (task.description?.toLowerCase() || '').includes(normalizedSearch)
+                || task.id.toLowerCase().includes(normalizedSearch)
+                || referenceLabel.includes(normalizedSearch);
+            const matchesCategory = isAllCategoriesSelected || filterCategories.includes(task.category);
+            const matchesPriority = isAllPrioritiesSelected || selectedPriorityValues.includes(resolvePriorityValue(task.priority));
+            const matchesType = isAllTypesSelected || filterTypes.includes(task.type || DEFAULT_TYPE_VALUE);
+            const matchesStatus = isAllStatusesSelected || filterStatus.includes(task.status);
+            const matchesAssignee = filterAssigneesAllSelected || filterAssignees.includes((task.assignee || 'unassigned'));
+            const matchesTaxonomies = Object.entries(filterTaxonomies).every(([taxId, selectedValues]) => {
+                const taxDef = visibleTaxonomies.find((tax) => tax.id === taxId);
+                if (!taxDef)
+                    return true;
+                const visibleOptions = getFilterVisibleTaxonomyOptions(taxDef, deletedScopeTasks);
+                const isAllSelected = visibleOptions.every((opt) => selectedValues.includes(opt.value));
+                if (isAllSelected)
+                    return true;
+                const taskValue = task.taxonomies?.[taxId];
+                if (!taskValue)
+                    return selectedValues.includes('');
+                if (Array.isArray(taskValue))
+                    return taskValue.some((value) => selectedValues.includes(value));
+                return selectedValues.includes(taskValue);
+            });
+            return matchesSearch && matchesCategory && matchesPriority && matchesType && matchesStatus && matchesAssignee && matchesTaxonomies;
+        }).sort((a, b) => compareTasksBySortKey(a, b, sortBy, sortOrder, taxonomies));
+    }, [
+        activeCategories,
+        activeTypes,
+        archivedTasks,
+        assigneeOptions,
+        deletedScopeTasks,
+        filterAssignees,
+        filterCategories,
+        filterPriorities,
+        filterStatus,
+        filterTaxonomies,
+        filterTypes,
+        priorities,
+        searchQuery,
+        sortBy,
+        sortOrder,
+        taxonomies,
+        tasks,
+    ]);
+    const groupedDeletedTasks = React.useMemo(() => {
+        const groups = {};
+        filteredDeletedTasks.forEach((task) => {
+            const categoryMatch = activeCategories.find((cat) => cat.value === task.category || cat.label === task.category);
+            const key = categoryMatch?.label || task.category || 'General';
+            if (!groups[key])
+                groups[key] = [];
+            groups[key].push(task);
+        });
+        return groups;
+    }, [activeCategories, filteredDeletedTasks]);
+    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: () => {
                                                 handleNavigation(() => {
                                                     resetForm();
                                                     setActiveTab('add');
                                                 });
-                                            }, title: "Add New Task", children: _jsx(Plus, { size: 18 }) }) })), _jsx("button", { className: `${modalStyles.headerActionBtn} ${activeTab === 'settings' ? modalStyles.headerActionBtnActive : ''}`, onClick: () => {
+                                            }, title: "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();
@@ -184,38 +270,58 @@ export function WidgetView(props) {
                                             handleNavigation(() => {
                                                 setActiveTab('settings');
                                             });
-                                        }, title: "Settings", children: _jsx(Settings, { size: 18 }) }), _jsx("button", { className: modalStyles.headerActionBtn, onClick: handleXClick, title: activeTab === 'tasks' ? "Close" : "Back to Tasks", children: activeTab === 'tasks' ? _jsx(X, { size: 20 }) : _jsx(ArrowLeft, { size: 20 }) })] })] }), activeTab === 'add' && (_jsx(TaskActionHeader, { editingTaskId: editingTaskId, loading: loading, title: title, currentTask: currentTask, handleSubmit: handleSubmit, resetForm: resetForm, handleCopyId: handleCopyId, copiedId: copiedId, tasks: tasks, handleToggleInProgress: handleToggleInProgress, handleToggleReview: handleToggleReview, handleToggleComplete: handleToggleComplete, handleToggleCancel: handleToggleCancel, handleArchiveTask: handleArchiveTask })), activeTab === 'tasks' && (_jsx(TaskList, { ref: tasksScrollRef, tasks: tasks, archivedTasks: archivedTasks, categories: activeCategories, types: activeTypes, priorities: priorities, approaches: approaches, availableSpecialists: availableSpecialists, taxonomies: taxonomies, searchQuery: searchQuery, filterCategories: filterCategories, filterTypes: filterTypes, filterPriorities: filterPriorities, filterStatus: filterStatus, filterAssignees: filterAssignees, filterTaxonomies: filterTaxonomies, sortBy: sortBy, sortOrder: sortOrder, showArchive: showArchive, parentTaskFilterMode: parentTaskFilterMode, assigneeFilterEnabled: assigneeFilterEnabled, collapsedCategories: collapsedCategories, loadingTasks: loadingTasks, filteredTasks: filteredTasks, filteredArchive: filteredArchive, groupedTasks: groupedTasks, copiedId: copiedId, recentlyChangedTaskIds: recentlyChangedTaskIds, 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, onParentTaskFilterModeChange: setParentTaskFilterMode, 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: handleUnarchive, onDelete: handleDelete, onUnlinkChildTask: handleUnlinkChildTask, onClearParentTask: handleClearParentTask, onFetchArchive: fetchArchive, onAddTaskToCategory: handleAddTaskToCategory })), activeTab === 'add' && (_jsx(TaskForm, { editingTaskId: editingTaskId, error: error, title: title, description: description, category: category, type: type, priority: priority, complexity: complexity, manualComplexityEnabled: manualComplexityEnabled, approach: approach, assignee: assignee, scheduledDate: scheduledDate, dueDate: dueDate, parentTaskIdInput: parentTaskIdInput, addChildTaskIdInput: addChildTaskIdInput, formTaxonomies: formTaxonomies, onTaxonomyChange: onTaxonomyChange, onParentTaskIdInputChange: setParentTaskIdInput, onAddChildTaskIdInputChange: setAddChildTaskIdInput, taxonomies: taxonomies, selectedSpecialists: selectedSpecialists, comments: comments, newCommentText: newCommentText, contextFiles: screenshots, contextLinkBrowsePath: contextLinkBrowsePath, descriptionFocused: descriptionFocused, showMarkdownHelp: showMarkdownHelp, showSpecialists: showSpecialists, showChecklist: showChecklist, checklistEnabled: checklistDropdownEnabled, showTaskRelationships: showTaskRelationships, showChildTasks: showChildTasks, showComments: showComments, categories: activeCategories, types: activeTypes, priorities: priorities, approaches: approaches, availableSpecialists: availableSpecialists, copiedId: copiedId, onTitleChange: setTitle, onDescriptionChange: setDescription, onCategoryChange: setCategory, onTypeChange: setType, onPriorityChange: setPriority, onComplexityChange: setComplexity, onApproachChange: (val) => { setApproach(val); setFormTaxonomies(prev => ({ ...prev, approach: val })); }, onAssigneeChange: setAssignee, onScheduledDateChange: setScheduledDate, onDueDateChange: setDueDate, onSelectedSpecialistsChange: setSelectedSpecialists, onNewCommentTextChange: setNewCommentText, onDescriptionFocusedChange: setDescriptionFocused, onShowMarkdownHelpChange: setShowMarkdownHelp, onShowSpecialistsChange: setShowSpecialists, onShowChecklistChange: setShowChecklist, onShowTaskRelationshipsChange: setShowTaskRelationships, onShowChildTasksChange: setShowChildTasks, onShowCommentsChange: setShowComments, onOpenSettings: (section) => {
+                                        }, 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, 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) => {
+                            const deletedRecord = deletedRecordByTaskId.get(taskId);
+                            if (deletedRecord) {
+                                void handleRestoreDeletedTask(deletedRecord.id);
+                                return;
+                            }
+                            handleUnarchive(taskId);
+                        }, onDelete: (taskId) => {
+                            const deletedRecord = deletedRecordByTaskId.get(taskId);
+                            if (deletedRecord) {
+                                void handlePermanentlyDeleteDeletedTask(deletedRecord.id);
+                                return;
+                            }
+                            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, 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) => {
                             handleNavigation(() => {
                                 setSettingsSection(section);
                                 setActiveTab('settings');
                             });
-                        }, onSubmit: handleSubmit, commentsEndRef: commentsEndRef, onAddComment: () => handleAddComment(newCommentText), onSetParentForCurrentTask: handleSetParentForCurrentTask, onAddChildToCurrentTask: handleAddChildToCurrentTask, onCreateChildForCurrentTask: handleCreateChildForCurrentTask, onUnlinkChildTask: handleUnlinkChildTask, onReorderChildTasks: handleReorderChildTasks, onOpenTaskById: handleOpenTaskById, onAddContextFile: (file) => {
-                            setScreenshots(prev => [...prev, file]);
-                        }, onBrowseContextLinkPath: () => {
-                            setBrowserTarget({ type: 'context-link' });
-                            fetchFolders('');
-                            setShowFolderBrowser(true);
+                        }, onSubmit: handleSubmit, commentsEndRef: commentsEndRef, onAddComment: () => handleAddComment(newCommentText), onOpenTaskById: handleOpenTaskById, onAddContextFile: (file) => {
+                            setAttachmentsDirty(true);
+                            setAttachments(prev => [...prev, file]);
                         }, onRemoveContextFile: async (index) => {
-                            const screenshot = screenshots[index];
-                            const path = typeof screenshot === 'string' ? screenshot : screenshot.path;
-                            setScreenshots(prev => prev.filter((_, i) => i !== index));
-                            if (typeof path === 'string' && path.startsWith('/api/taskforce/context/')) {
-                                try {
-                                    await fetch(path, { method: 'DELETE' });
-                                }
-                                catch { }
-                            }
+                            setAttachmentsDirty(true);
+                            setAttachments(prev => prev.filter((_, i) => i !== index));
                         }, onUpdateContextCaption: (index, caption) => {
-                            setScreenshots(prev => prev.map((s, i) => {
+                            setAttachmentsDirty(true);
+                            setAttachments(prev => prev.map((s, i) => {
                                 if (i !== index)
                                     return s;
                                 if (typeof s === 'string')
                                     return { path: s, caption, timestamp: new Date().toISOString() };
                                 return { ...s, caption };
                             }));
-                        }, onCopyId: handleCopyId, onToggleInProgress: handleToggleInProgress, onToggleReview: handleToggleReview, onToggleComplete: handleToggleComplete, onToggleCancel: handleToggleCancel, onArchiveTask: handleArchiveTask, onUnarchive: handleUnarchive, currentTask: currentTask, currentTaskParent: currentTaskParent, currentTaskChildren: currentTaskChildren })), activeTab === 'settings' && (_jsx(TaskSettings, { settingsModel: settingsModel, onSectionChange: setSettingsSection }))] }), showFolderBrowser && createPortal(_jsx("div", { className: styles.folderBrowserOverlay, children: _jsxs("div", { className: styles.folderBrowser, children: [_jsxs("div", { className: styles.browserHeader, children: [_jsxs("div", { className: styles.browserPathInfo, children: [_jsx(Folder, { size: 14 }), _jsx("span", { children: currentBrowsePath || 'Project Root' })] }), _jsxs("div", { className: styles.browserActions, children: [currentBrowsePath && (_jsx("button", { className: styles.helpLink, onClick: () => {
+                        }, 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);
+                                }
+                                return;
+                            }
+                            handleUnarchive(taskId);
+                        }, currentTask: currentTask })), activeTab === 'settings' && (_jsx(Suspense, { fallback: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem' }, children: _jsx(Loader2, { size: 20, className: styles.spinner }) }), children: _jsx(TaskSettings, { settingsModel: settingsModel, onSectionChange: setSettingsSection }) }))] }), showFolderBrowser && createPortal(_jsx("div", { className: folderBrowserStyles.overlay, children: _jsxs("div", { className: folderBrowserStyles.browser, children: [_jsxs("div", { className: folderBrowserStyles.header, children: [_jsxs("div", { className: folderBrowserStyles.pathInfo, children: [_jsx(Folder, { size: 14 }), _jsx("span", { children: currentBrowsePath || 'Project Root' })] }), _jsxs("div", { className: folderBrowserStyles.actions, children: [currentBrowsePath && (_jsx("button", { className: styles.helpLink, onClick: () => {
                                                 const parts = currentBrowsePath.split('/').filter(Boolean);
                                                 parts.pop();
                                                 fetchFolders(parts.length ? parts.join('/') + '/' : '');
-                                            }, children: "Back" })), _jsx("button", { className: styles.helpLink, onClick: () => setShowFolderBrowser(false), children: "Close" })] })] }), _jsxs("div", { className: styles.browserList, children: [browserTarget && typeof browserTarget === 'object' && browserTarget.type !== 'context-link' && (_jsxs("div", { className: `${styles.browserItem} ${styles.browserItemCurrent}`, onClick: () => handleSelectPath(currentBrowsePath), children: [_jsx(Check, { size: 14 }), " Select Current: ./", currentBrowsePath || '(root)'] })), folders.map(folder => (_jsxs("div", { className: styles.browserItem, onClick: () => fetchFolders(currentBrowsePath + folder + '/'), children: [_jsx(Folder, { size: 14 }), " ", folder, "/"] }, folder))), files.map(file => (_jsxs("div", { className: `${styles.browserItem} ${styles.browserItemFile}`, onClick: () => handleSelectPath(currentBrowsePath + file), children: [_jsx(FileText, { size: 14 }), " ", file] }, file))), folders.length === 0 && files.length === 0 && (_jsx("div", { className: `${styles.browserItem} ${styles.browserEmpty}`, children: "No items found" }))] })] }) }), document.body), unsavedModalOpen && (_jsx("div", { className: `${modalStyles.overlay} ${modalStyles.unsavedOverlay}`, children: _jsxs("div", { className: `${modalStyles.modal} ${modalStyles.unsavedModal}`, "data-theme": currentTheme, children: [_jsx("div", { className: `${modalStyles.header} ${modalStyles.unsavedHeader}`, children: _jsxs("div", { className: `${modalStyles.headerTitle} ${modalStyles.unsavedTitle}`, children: [_jsx(AlertTriangle, { size: 20 }), "Unsaved Changes"] }) }), _jsx("div", { className: `${modalStyles.form} ${modalStyles.unsavedContent}`, children: _jsx("p", { className: modalStyles.unsavedText, children: "You have unsaved changes. Would you like to save them?" }) }), _jsxs("div", { className: `${modalStyles.formActions} ${modalStyles.unsavedActions}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => setUnsavedModalOpen(false), title: "Close dialog and continue editing", children: "Keep Editing" }), _jsx("button", { className: styles.destructiveBtn, onClick: handleDiscard, title: "Discard unsaved changes and leave", children: "Discard" }), _jsxs("button", { className: styles.submitBtn, onClick: handleSaveAndNavigate, disabled: loading, title: "Save changes and leave", children: [loading ? _jsx(Loader2, { size: 16, className: styles.spinner }) : _jsx(Save, { size: 16 }), "Save"] })] })] }) })), scheduleWarningPrompt && (_jsx("div", { className: `${modalStyles.overlay} ${modalStyles.unsavedOverlay}`, children: _jsxs("div", { className: `${modalStyles.modal} ${modalStyles.unsavedModal}`, "data-theme": currentTheme, children: [_jsx("div", { className: `${modalStyles.header} ${modalStyles.unsavedHeader}`, children: _jsxs("div", { className: `${modalStyles.headerTitle} ${modalStyles.unsavedTitle}`, children: [_jsx(AlertTriangle, { size: 20 }), "Date Warning"] }) }), _jsxs("div", { className: `${modalStyles.form} ${modalStyles.unsavedContent}`, children: [_jsx("p", { className: modalStyles.unsavedText, children: "Due date is before scheduled date." }), _jsxs("p", { style: { margin: 0, fontSize: '12px', color: 'var(--text-muted)' }, children: ["Due: ", scheduleWarningPrompt.dueDate, " \u00B7 Scheduled: ", scheduleWarningPrompt.scheduledDate] })] }), _jsxs("div", { className: `${modalStyles.formActions} ${modalStyles.unsavedActions}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: cancelScheduleWarning, children: "Go Back" }), _jsx("button", { className: styles.submitBtn, onClick: confirmScheduleWarning, children: "Save Anyway" })] })] }) }))] }));
+                                            }, children: "Back" })), _jsx("button", { className: styles.helpLink, onClick: () => setShowFolderBrowser(false), children: "Close" })] })] }), _jsxs("div", { className: folderBrowserStyles.list, children: [browserTarget && typeof browserTarget === 'object' && (_jsxs("div", { className: `${folderBrowserStyles.item} ${folderBrowserStyles.itemCurrent}`, onClick: () => handleSelectPath(currentBrowsePath), children: [_jsx(Check, { size: 14 }), " Select Current: ./", currentBrowsePath || '(root)'] })), folders.map(folder => (_jsxs("div", { className: folderBrowserStyles.item, onClick: () => fetchFolders(currentBrowsePath + folder + '/'), children: [_jsx(Folder, { size: 14 }), " ", folder, "/"] }, folder))), files.map(file => (_jsxs("div", { className: `${folderBrowserStyles.item} ${folderBrowserStyles.itemFile}`, onClick: () => handleSelectPath(currentBrowsePath + file), children: [_jsx(FileText, { size: 14 }), " ", file] }, file))), folders.length === 0 && files.length === 0 && (_jsx("div", { className: `${folderBrowserStyles.item} ${folderBrowserStyles.empty}`, children: "No items found" }))] })] }) }), document.body), unsavedModalOpen && (_jsx("div", { className: `${modalStyles.overlay} ${modalStyles.unsavedOverlay}`, children: _jsxs("div", { className: `tf-surface-modal tf-modal-shell ${modalStyles.modal} ${modalStyles.unsavedModal}`, "data-theme": currentTheme, children: [_jsx("div", { className: `tf-modal-header ${modalStyles.unsavedHeader}`, children: _jsxs("div", { className: `tf-modal-title ${modalStyles.unsavedTitle}`, children: [_jsx(AlertTriangle, { size: 20 }), "Unsaved Changes"] }) }), _jsx("div", { className: `${modalStyles.form} ${modalStyles.unsavedContent}`, children: _jsx("p", { className: modalStyles.unsavedText, children: "You have unsaved changes. Would you like to save them?" }) }), _jsxs("div", { className: `${modalStyles.formActions} ${modalStyles.unsavedActions}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => setUnsavedModalOpen(false), title: "Close dialog and continue editing", children: "Keep Editing" }), _jsx("button", { className: styles.destructiveBtn, onClick: handleDiscard, title: "Discard unsaved changes and leave", children: "Discard" }), _jsxs("button", { className: styles.submitBtn, onClick: handleSaveAndNavigate, disabled: loading, title: "Save changes and leave", children: [loading ? _jsx(Loader2, { size: 16, className: styles.spinner }) : _jsx(Save, { size: 16 }), "Save"] })] })] }) })), scheduleWarningPrompt && (_jsx("div", { className: `${modalStyles.overlay} ${modalStyles.unsavedOverlay}`, children: _jsxs("div", { className: `tf-surface-modal tf-modal-shell ${modalStyles.modal} ${modalStyles.unsavedModal}`, "data-theme": currentTheme, children: [_jsx("div", { className: `tf-modal-header ${modalStyles.unsavedHeader}`, children: _jsxs("div", { className: `tf-modal-title ${modalStyles.unsavedTitle}`, children: [_jsx(AlertTriangle, { size: 20 }), "Date Warning"] }) }), _jsxs("div", { className: `${modalStyles.form} ${modalStyles.unsavedContent}`, children: [_jsx("p", { className: modalStyles.unsavedText, children: "Due date is before scheduled date." }), _jsxs("p", { style: { margin: 0, fontSize: '12px', color: 'var(--text-muted)' }, children: ["Due: ", scheduleWarningPrompt.dueDate, " \u00B7 Scheduled: ", scheduleWarningPrompt.scheduledDate] })] }), _jsxs("div", { className: `${modalStyles.formActions} ${modalStyles.unsavedActions}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: cancelScheduleWarning, children: "Go Back" }), _jsx("button", { className: styles.submitBtn, onClick: confirmScheduleWarning, children: "Save Anyway" })] })] }) }))] }));
 }

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

@@ -0,0 +1,57 @@
+import React from 'react';
+export interface WorkspaceHeaderSearchProps {
+    value: string;
+    placeholder: string;
+    active?: boolean;
+    onChange: (value: string) => void;
+    onClear?: () => void;
+    clearTitle?: string;
+}
+export interface WorkspaceHeaderSelectOption {
+    value: string | number;
+    label: string;
+}
+export interface WorkspaceHeaderSelectProps {
+    label: React.ReactNode;
+    value: string | number;
+    options: WorkspaceHeaderSelectOption[];
+    onChange: (value: string) => void;
+    trailingAction?: React.ReactNode;
+    width?: string;
+}
+export interface WorkspaceModuleSwitcherProps {
+    value: string;
+    options: WorkspaceHeaderSelectOption[];
+    onChange: (value: string) => void;
+    width?: string;
+}
+export interface WorkspaceHeaderActionItem {
+    key: string;
+    icon: React.ReactNode;
+    title: string;
+    onClick: () => void | Promise<void>;
+    active?: boolean;
+    disabled?: boolean;
+    ariaDisabled?: boolean;
+    className?: string;
+}
+export interface WorkspaceHeaderActionsProps {
+    actions: WorkspaceHeaderActionItem[];
+}
+export interface WorkspacePrimaryActionProps {
+    icon: React.ReactNode;
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export interface WorkspaceFilterBarProps {
+    children: React.ReactNode;
+}
+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;
+export declare function WorkspaceModuleSwitcher({ value, options, onChange, width, }: WorkspaceModuleSwitcherProps): import("react/jsx-runtime").JSX.Element;
+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;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Search } from 'lucide-react';
+import styles from '../../../Taskforce.module.css';
+export function WorkspaceHeaderSearch({ value, placeholder, active = false, onChange, onClear, clearTitle, }) {
+    return (_jsxs("div", { className: styles.searchContainer, style: { width: '240px' }, children: [_jsx(Search, { size: 16, className: styles.searchIcon }), _jsx("input", { type: "text", className: `${styles.searchInput} ${active ? styles.searchActive : ''}`, placeholder: placeholder, value: value, onChange: (event) => onChange(event.target.value) }), value && onClear && (_jsx("button", { className: styles.clearSearchBtn, onClick: onClear, title: clearTitle, children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) }))] }));
+}
+export function WorkspaceHeaderSelect({ label, value, options, onChange, trailingAction, width, }) {
+    return (_jsxs("div", { className: styles.groupByContainer, style: width ? { width } : undefined, children: [_jsx("span", { className: styles.groupByLabel, children: label }), _jsx("select", { className: `${styles.select} ${styles.groupBySelect}`, value: value, onChange: (event) => onChange(event.target.value), children: options.map((option) => (_jsx("option", { value: option.value, children: option.label }, String(option.value)))) }), trailingAction] }));
+}
+export function WorkspaceModuleSwitcher({ value, options, onChange, width = '160px', }) {
+    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))) }));
+}
+export function WorkspaceHeaderDivider() {
+    return _jsx("div", { className: styles.headerDivider });
+}
+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: {
+            padding: '8px 24px',
+            borderBottom: '1px solid var(--border-primary)',
+            background: 'var(--bg-secondary)',
+            boxShadow: '0 4px 18px rgba(8, 10, 24, 0.12)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            flexWrap: 'wrap',
+            position: 'relative',
+            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/WorkspaceChromeSections.test.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { FileText, Plus } from 'lucide-react';
+import { EmptyWorkspaceFilterBar, WorkspaceFilterBar, WorkspaceHeaderActions, WorkspaceHeaderSearch, WorkspaceModuleSwitcher, WorkspacePrimaryAction, } from './WorkspaceChromeSections';
+describe('WorkspaceChromeSections', () => {
+    it('renders reusable header actions and primary actions', async () => {
+        const user = userEvent.setup();
+        const onDocsToggle = vi.fn();
+        const onPrimaryAction = vi.fn();
+        render(_jsxs(_Fragment, { children: [_jsx(WorkspaceHeaderActions, { actions: [
+                        {
+                            key: 'docs-toggle',
+                            icon: _jsx(FileText, { size: 16 }),
+                            title: 'Open Docs view',
+                            onClick: onDocsToggle,
+                        },
+                    ] }), _jsx(WorkspacePrimaryAction, { icon: _jsx(Plus, { size: 16 }), label: "Add task", onClick: onPrimaryAction })] }));
+        await user.click(screen.getByTitle('Open Docs view'));
+        await user.click(screen.getByRole('button', { name: /Add task/i }));
+        expect(onDocsToggle).toHaveBeenCalledTimes(1);
+        expect(onPrimaryAction).toHaveBeenCalledTimes(1);
+    });
+    it('renders a generic filter shell around arbitrary content', () => {
+        render(_jsx(WorkspaceFilterBar, { children: _jsx("button", { type: "button", children: "Custom docs filter" }) }));
+        expect(screen.getByRole('button', { name: 'Custom docs filter' })).toBeInTheDocument();
+    });
+    it('renders an empty filter shell for modules without controls yet', () => {
+        const { container } = render(_jsx(EmptyWorkspaceFilterBar, {}));
+        expect(container.firstChild).toBeInTheDocument();
+        expect(container.querySelector('[aria-hidden="true"]')).toBeTruthy();
+    });
+    it('supports reusable header search interactions', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const onClear = vi.fn();
+        render(_jsx(WorkspaceHeaderSearch, { value: "alpha", placeholder: "Search", onChange: onChange, onClear: onClear, clearTitle: "Clear search" }));
+        await user.type(screen.getByPlaceholderText('Search'), 'b');
+        await user.click(screen.getByTitle('Clear search'));
+        expect(onChange).toHaveBeenCalled();
+        expect(onClear).toHaveBeenCalledTimes(1);
+    });
+    it('supports a reusable module switcher scaffold', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(_jsx(WorkspaceModuleSwitcher, { value: "tasks", options: [
+                { value: 'tasks', label: 'Tasks' },
+                { value: 'docs', label: 'Documents' },
+            ], onChange: onChange }));
+        await user.selectOptions(screen.getByRole('combobox'), 'docs');
+        expect(onChange).toHaveBeenCalledWith('docs');
+    });
+});

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

@@ -0,0 +1,31 @@
+import type { AppGateKey } from '../../../runtime/appGates';
+import { type ResolvedFeatureAccessMap } from '../../../runtime/appGates';
+export type WorkspaceModuleId = 'tasks' | 'docs' | 'annotate' | 'workflows' | 'agents';
+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 WorkspaceChromeDefinition = {
+    mode: WorkspaceChromeMode;
+    moduleId: WorkspaceModuleId;
+    layoutVariant: WorkspaceChromeLayoutVariant;
+    headerSections: WorkspaceHeaderSectionId[];
+    filterBar: WorkspaceFilterBarDefinition;
+    primaryAction: WorkspacePrimaryActionId;
+};
+export type WorkspaceModuleDefinition = {
+    id: WorkspaceModuleId;
+    label: string;
+    featureKey: AppGateKey | null;
+    enabled: boolean;
+    fallbackModuleId: WorkspaceModuleId;
+};
+export declare function getWorkspaceModuleDefinitions(options?: {
+    featureAccess?: ResolvedFeatureAccessMap;
+}): WorkspaceModuleDefinition[];
+export declare function getWorkspaceChromeDefinition(mode: WorkspaceChromeMode): WorkspaceChromeDefinition;
+export declare function resolveWorkspaceModule(requestedModuleId: WorkspaceModuleId, modules: WorkspaceModuleDefinition[]): WorkspaceModuleId;

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

@@ -0,0 +1,108 @@
+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'];
+export function getWorkspaceModuleDefinitions(options) {
+    const featureAccess = options?.featureAccess || {};
+    const modules = {
+        tasks: {
+            id: 'tasks',
+            label: 'Tasks',
+            featureKey: null,
+            enabled: true,
+            fallbackModuleId: 'tasks',
+        },
+        docs: {
+            id: 'docs',
+            label: 'Documents',
+            featureKey: DOCUMENT_WORKSPACE_FEATURE_KEY,
+            enabled: featureAccess[DOCUMENT_WORKSPACE_FEATURE_KEY]?.allowed ?? true,
+            fallbackModuleId: 'tasks',
+        },
+        annotate: {
+            id: 'annotate',
+            label: 'Image Notes',
+            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,
+            fallbackModuleId: 'tasks',
+        },
+        agents: {
+            id: 'agents',
+            label: 'Agents',
+            featureKey: AGENTS_WORKSPACE_FEATURE_KEY,
+            enabled: featureAccess[AGENTS_WORKSPACE_FEATURE_KEY]?.allowed ?? false,
+            fallbackModuleId: 'tasks',
+        },
+    };
+    return WORKSPACE_MODULE_ORDER.map((id) => modules[id]);
+}
+export function getWorkspaceChromeDefinition(mode) {
+    switch (mode) {
+        case 'docs':
+            return {
+                mode,
+                moduleId: 'docs',
+                layoutVariant: 'docs-minimal',
+                headerSections: [],
+                filterBar: { kind: 'document-filters' },
+                primaryAction: null,
+            };
+        case 'annotate':
+            return {
+                mode,
+                moduleId: 'annotate',
+                layoutVariant: 'annotated-module',
+                headerSections: [],
+                filterBar: { kind: 'empty' },
+                primaryAction: null,
+            };
+        case 'workflows':
+            return {
+                mode,
+                moduleId: 'workflows',
+                layoutVariant: 'workflows-module',
+                headerSections: [],
+                filterBar: { kind: 'empty' },
+                primaryAction: null,
+            };
+        case 'agents':
+            return {
+                mode,
+                moduleId: 'agents',
+                layoutVariant: 'agents-module',
+                headerSections: [],
+                filterBar: { kind: 'empty' },
+                primaryAction: null,
+            };
+        case 'tasks':
+        default:
+            return {
+                mode: 'tasks',
+                moduleId: 'tasks',
+                layoutVariant: 'tasks-default',
+                headerSections: [
+                    'search',
+                    'sort',
+                    'divider-primary',
+                    'grouping',
+                    '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);
+    if (!requestedModule)
+        return 'tasks';
+    if (requestedModule.enabled)
+        return requestedModule.id;
+    return requestedModule.fallbackModuleId;
+}