@taskforcehq/taskforce 0.3.170 → 0.3.301

package/dist/components/features/settings/TaxonomyManager.js

@@ -1,16 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Plus, List, ChevronRight, Settings2, ArrowLeft } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { Plus, List, ChevronRight, Settings2, ArrowLeft, ArrowUp, ArrowDown, BookMarked } from 'lucide-react';
 import styles from '../../../Taskforce.module.css';
+import helperStyles from './SettingsEditorHelpers.module.css';
+import taxonomyManagerStyles from './TaxonomyManager.module.css';
+import { buildTaxonomyCatalog } from '../../../shared/taxonomyCatalog.js';
+import { listBuiltInTaxonomyLibraryPacks } from '../../../shared/taxonomyLibrary.js';
 import { TaxonomyEditor } from './TaxonomyEditor';
 import { CategoryManager } from './CategoryManager';
 import { TypeManager } from './TypeManager';
+import { PriorityManager } from './PriorityManager';
+import { TaxonomyLibraryManager } from './TaxonomyLibraryManager';
 export function TaxonomyManager(props) {
-    const { taxonomies, onUpdateTaxonomies, categories, pathValidation, onUpdateCategory, onRemoveCategory, onSaveCategory, onAddPath, onRemovePath, onUpdateCategoryIcon, onUpdateCategoryColor, onBrowseFolders, types, onSaveType, onRemoveType, priorities, onUpdatePriorities, approaches, onUpdateApproaches, manualComplexityEnabled, onManualComplexityEnabledChange, initialTab } = props;
+    const { taxonomies, onUpdateTaxonomies, taxonomyDisplayLabels, onUpdateTaxonomyDisplayLabels, categories, pathValidation, onUpdateCategory, onRemoveCategory, onSaveCategory, onAddPath, onRemovePath, onUpdateCategoryIcon, onUpdateCategoryColor, onBrowseFolders, types, onSaveType, onRemoveType, onUpdateType, priorities, onUpdatePriorities, onAnalyzeSystemTaxonomyPack, onApplySystemTaxonomyPack, manualComplexityEnabled, onManualComplexityEnabledChange, initialTab } = props;
     const [activeTaxonomyId, setActiveTaxonomyId] = useState(initialTab || '');
     const [view, setView] = useState(initialTab ? 'detail' : 'list');
     const [isCreating, setIsCreating] = useState(false);
     const [newTaxonomyLabel, setNewTaxonomyLabel] = useState('');
+    const libraryPackCount = useMemo(() => listBuiltInTaxonomyLibraryPacks().length, []);
+    const taxonomyCatalog = useMemo(() => buildTaxonomyCatalog({
+        categories,
+        types,
+        priorities,
+        taxonomies,
+        manualComplexityEnabled,
+        displayLabels: taxonomyDisplayLabels
+    }), [categories, manualComplexityEnabled, priorities, taxonomies, taxonomyDisplayLabels, types]);
     const handleAddTaxonomy = () => {
         if (!newTaxonomyLabel.trim())
             return;
@@ -26,6 +41,9 @@ export function TaxonomyManager(props) {
             widgetType: 'select',
             isSystem: false,
             multiSelect: false,
+            formEnabled: false,
+            filterEnabled: true,
+            sortEnabled: false,
         };
         onUpdateTaxonomies([...taxonomies, newTaxonomy]);
         setNewTaxonomyLabel('');
@@ -37,41 +55,55 @@ export function TaxonomyManager(props) {
         onUpdateTaxonomies(taxonomies.map(t => t.id === updated.id ? updated : t));
     };
     const handleRemoveTaxonomy = (id) => {
-        const updated = taxonomies.filter(t => t.id !== id);
+        const updated = taxonomies.map((taxonomy) => (taxonomy.id === id
+            ? { ...taxonomy, status: 'retired' }
+            : taxonomy));
         onUpdateTaxonomies(updated);
         setView('list');
     };
+    const handleRestoreTaxonomy = (id) => {
+        const updated = taxonomies.map((taxonomy) => (taxonomy.id === id
+            ? { ...taxonomy, status: 'active' }
+            : taxonomy));
+        onUpdateTaxonomies(updated);
+    };
     const handleSelectTaxonomy = (id) => {
         setActiveTaxonomyId(id);
         setView('detail');
     };
-    const activeTaxonomy = taxonomies.find(t => t.id === activeTaxonomyId);
+    const moveCustomTaxonomy = (id, direction) => {
+        const currentIndex = taxonomies.findIndex((taxonomy) => taxonomy.id === id);
+        if (currentIndex < 0)
+            return;
+        const nextIndex = currentIndex + direction;
+        if (nextIndex < 0 || nextIndex >= taxonomies.length)
+            return;
+        const reordered = [...taxonomies];
+        const [moved] = reordered.splice(currentIndex, 1);
+        reordered.splice(nextIndex, 0, moved);
+        onUpdateTaxonomies(reordered);
+    };
+    const activeCatalogItem = taxonomyCatalog.find((item) => item.id === activeTaxonomyId);
+    const activeTaxonomy = activeCatalogItem?.taxonomy;
+    const systemCatalogItems = taxonomyCatalog.filter((item) => item.kind !== 'custom');
+    const customCatalogItems = taxonomyCatalog.filter((item) => item.kind === 'custom');
     if (view === 'list') {
-        return (_jsxs("div", { className: styles.taxonomyDrillDown, children: [_jsxs("div", { className: styles.drillDownList, children: [_jsxs("div", { className: styles.drillDownSection, children: [_jsx("h4", { className: styles.drillDownSectionTitle, children: "System Taxonomies" }), _jsxs("button", { className: styles.drillDownItem, onClick: () => handleSelectTaxonomy('categories'), children: [_jsxs("div", { className: styles.drillDownItemInfo, children: [_jsx(Settings2, { size: 16, className: styles.systemIcon }), _jsxs("div", { className: styles.drillDownItemText, children: [_jsx("span", { className: styles.drillDownItemLabel, children: "Categories" }), _jsxs("span", { className: styles.drillDownItemSubtext, children: [categories.length, " configured"] })] })] }), _jsx(ChevronRight, { size: 16, className: styles.chevron })] }), _jsxs("button", { className: styles.drillDownItem, onClick: () => handleSelectTaxonomy('types'), children: [_jsxs("div", { className: styles.drillDownItemInfo, children: [_jsx(Settings2, { size: 16, className: styles.systemIcon }), _jsxs("div", { className: styles.drillDownItemText, children: [_jsx("span", { className: styles.drillDownItemLabel, children: "Task Types" }), _jsxs("span", { className: styles.drillDownItemSubtext, children: [types.length, " active"] })] })] }), _jsx(ChevronRight, { size: 16, className: styles.chevron })] }), _jsxs("button", { className: styles.drillDownItem, onClick: () => handleSelectTaxonomy('priorities'), children: [_jsxs("div", { className: styles.drillDownItemInfo, children: [_jsx(Settings2, { size: 16, className: styles.systemIcon }), _jsxs("div", { className: styles.drillDownItemText, children: [_jsx("span", { className: styles.drillDownItemLabel, children: "Priority Levels" }), _jsxs("span", { className: styles.drillDownItemSubtext, children: [priorities.length, " levels"] })] })] }), _jsx(ChevronRight, { size: 16, className: styles.chevron })] }), _jsxs("button", { className: styles.drillDownItem, onClick: () => handleSelectTaxonomy('approaches'), children: [_jsxs("div", { className: styles.drillDownItemInfo, children: [_jsx(Settings2, { size: 16, className: styles.systemIcon }), _jsxs("div", { className: styles.drillDownItemText, children: [_jsx("span", { className: styles.drillDownItemLabel, children: "Approach Options" }), _jsxs("span", { className: styles.drillDownItemSubtext, children: [approaches.length, " options"] })] })] }), _jsx(ChevronRight, { size: 16, className: styles.chevron })] }), _jsxs("button", { className: `${styles.drillDownItem} ${!manualComplexityEnabled ? styles.drillDownItemDimmed : ''}`, onClick: () => handleSelectTaxonomy('complexities'), children: [_jsxs("div", { className: styles.drillDownItemInfo, children: [_jsx(Settings2, { size: 16, className: styles.systemIcon }), _jsxs("div", { className: styles.drillDownItemText, children: [_jsx("span", { className: styles.drillDownItemLabel, children: "Complexity" }), _jsx("span", { className: styles.drillDownItemSubtext, children: manualComplexityEnabled ? 'Enabled' : 'Disabled (default)' })] })] }), _jsx(ChevronRight, { size: 16, className: styles.chevron })] })] }), _jsxs("div", { className: styles.drillDownSection, children: [_jsxs("div", { className: styles.drillDownSectionHeader, children: [_jsx("h4", { className: styles.drillDownSectionTitle, children: "Custom Taxonomies" }), _jsxs("button", { className: styles.addTaxonomyBtnSmall, onClick: () => setIsCreating(true), title: "Add Custom Taxonomy", children: [_jsx(Plus, { size: 14 }), " New"] })] }), taxonomies.length === 0 ? (_jsx("div", { className: styles.emptyState, children: _jsx("p", { children: "No custom taxonomies yet." }) })) : (taxonomies.map(t => (_jsxs("button", { className: styles.drillDownItem, onClick: () => handleSelectTaxonomy(t.id), children: [_jsxs("div", { className: styles.drillDownItemInfo, children: [_jsx(List, { size: 16 }), _jsxs("div", { className: styles.drillDownItemText, children: [_jsx("span", { className: styles.drillDownItemLabel, children: t.label }), _jsxs("span", { className: styles.drillDownItemSubtext, children: [t.options.length, " options"] })] })] }), _jsx(ChevronRight, { size: 16, className: styles.chevron })] }, t.id))))] })] }), isCreating && (_jsx("div", { className: styles.createOverlay, children: _jsxs("div", { className: styles.createDialog, children: [_jsx("h3", { children: "New Taxonomy" }), _jsxs("div", { className: styles.inputGroup, children: [_jsx("label", { className: styles.label, children: "Name" }), _jsx("input", { className: styles.input, placeholder: "e.g. Sprint, Phase", value: newTaxonomyLabel, onChange: (e) => setNewTaxonomyLabel(e.target.value), autoFocus: true })] }), _jsxs("div", { className: styles.dialogActions, children: [_jsx("button", { className: styles.submitBtn, onClick: handleAddTaxonomy, disabled: !newTaxonomyLabel.trim(), children: "Create" }), _jsx("button", { className: styles.cancelBtn, onClick: () => {
+        return (_jsxs("div", { className: taxonomyManagerStyles.taxonomyDrillDown, children: [_jsxs("div", { className: taxonomyManagerStyles.drillDownList, children: [_jsx("section", { className: taxonomyManagerStyles.librarySection, children: _jsxs("button", { className: taxonomyManagerStyles.libraryLauncher, onClick: () => handleSelectTaxonomy('library'), children: [_jsxs("div", { className: taxonomyManagerStyles.libraryLauncherInfo, children: [_jsx("span", { className: taxonomyManagerStyles.libraryLauncherIcon, children: _jsx(BookMarked, { size: 18 }) }), _jsxs("div", { className: taxonomyManagerStyles.libraryLauncherText, children: [_jsx("span", { className: taxonomyManagerStyles.libraryLauncherLabel, children: "System Taxonomy Library" }), _jsx("span", { className: taxonomyManagerStyles.libraryLauncherSubtext, children: "Browse curated packs for categories, task types, and priority scales." })] })] }), _jsxs("span", { className: taxonomyManagerStyles.libraryLauncherMeta, children: [libraryPackCount, " curated packs", _jsx(ChevronRight, { size: 16, className: taxonomyManagerStyles.chevron })] })] }) }), _jsxs("div", { className: taxonomyManagerStyles.drillDownSection, children: [_jsx("h4", { className: taxonomyManagerStyles.drillDownSectionTitle, children: "System Taxonomies" }), systemCatalogItems.map((item) => (_jsxs("button", { className: `${taxonomyManagerStyles.drillDownItem} ${item.id === 'complexities' && !manualComplexityEnabled ? taxonomyManagerStyles.drillDownItemDimmed : ''}`, onClick: () => handleSelectTaxonomy(item.id), children: [_jsxs("div", { className: taxonomyManagerStyles.drillDownItemInfo, children: [_jsx(Settings2, { size: 16, className: taxonomyManagerStyles.systemIcon }), _jsxs("div", { className: taxonomyManagerStyles.drillDownItemText, children: [_jsx("span", { className: taxonomyManagerStyles.drillDownItemLabel, children: item.label }), _jsx("span", { className: taxonomyManagerStyles.drillDownItemSubtext, children: item.summary })] })] }), _jsx(ChevronRight, { size: 16, className: taxonomyManagerStyles.chevron })] }, item.id)))] }), _jsxs("div", { className: taxonomyManagerStyles.drillDownSection, children: [_jsxs("div", { className: taxonomyManagerStyles.drillDownSectionHeader, children: [_jsx("h4", { className: taxonomyManagerStyles.drillDownSectionTitle, children: "Custom Taxonomies" }), _jsxs("button", { className: helperStyles.addTaxonomyBtnSmall, onClick: () => setIsCreating(true), title: "Add Custom Taxonomy", children: [_jsx(Plus, { size: 14 }), " New"] })] }), _jsxs("button", { className: taxonomyManagerStyles.drillDownItem, onClick: () => handleSelectTaxonomy('custom-library'), children: [_jsxs("div", { className: taxonomyManagerStyles.drillDownItemInfo, children: [_jsx(BookMarked, { size: 16, className: taxonomyManagerStyles.systemIcon }), _jsxs("div", { className: taxonomyManagerStyles.drillDownItemText, children: [_jsx("span", { className: taxonomyManagerStyles.drillDownItemLabel, children: "Custom Taxonomy Library" }), _jsx("span", { className: taxonomyManagerStyles.drillDownItemSubtext, children: "Reusable templates for future custom taxonomy packs" })] })] }), _jsx(ChevronRight, { size: 16, className: taxonomyManagerStyles.chevron })] }), customCatalogItems.length === 0 ? (_jsx("div", { className: styles.emptyState, children: _jsx("p", { className: "tf-empty-copy", children: "No custom taxonomies yet." }) })) : (customCatalogItems.map((item) => (_jsxs("div", { className: `${taxonomyManagerStyles.drillDownItem} ${item.taxonomy?.status === 'retired' ? taxonomyManagerStyles.drillDownItemDimmed : ''}`, children: [_jsxs("button", { className: taxonomyManagerStyles.drillDownItemAction, onClick: () => handleSelectTaxonomy(item.id), children: [_jsxs("div", { className: taxonomyManagerStyles.drillDownItemInfo, children: [_jsx(List, { size: 16 }), _jsxs("div", { className: taxonomyManagerStyles.drillDownItemText, children: [_jsx("span", { className: taxonomyManagerStyles.drillDownItemLabel, children: item.taxonomy?.status === 'retired' ? `${item.label} (Retired)` : item.label }), _jsx("span", { className: taxonomyManagerStyles.drillDownItemSubtext, children: item.summary })] })] }), _jsx(ChevronRight, { size: 16, className: taxonomyManagerStyles.chevron })] }), _jsxs("div", { className: taxonomyManagerStyles.orderButtons, children: [_jsx("button", { type: "button", className: styles.browseBtn, title: "Move taxonomy up", onClick: (event) => {
+                                                        event.stopPropagation();
+                                                        moveCustomTaxonomy(item.id, -1);
+                                                    }, disabled: customCatalogItems[0]?.id === item.id, children: _jsx(ArrowUp, { size: 16 }) }), _jsx("button", { type: "button", className: styles.browseBtn, title: "Move taxonomy down", onClick: (event) => {
+                                                        event.stopPropagation();
+                                                        moveCustomTaxonomy(item.id, 1);
+                                                    }, disabled: customCatalogItems[customCatalogItems.length - 1]?.id === item.id, children: _jsx(ArrowDown, { size: 16 }) })] })] }, item.id))))] })] }), isCreating && (_jsx("div", { className: taxonomyManagerStyles.createOverlay, children: _jsxs("div", { className: taxonomyManagerStyles.createDialog, children: [_jsx("h3", { className: taxonomyManagerStyles.createDialogTitle, children: "New Taxonomy" }), _jsxs("div", { className: taxonomyManagerStyles.inputGroup, children: [_jsx("label", { className: styles.label, children: "Name" }), _jsx("input", { className: styles.input, placeholder: "e.g. Sprint, Phase", value: newTaxonomyLabel, onChange: (e) => setNewTaxonomyLabel(e.target.value), autoFocus: true })] }), _jsxs("div", { className: taxonomyManagerStyles.dialogActions, children: [_jsx("button", { className: `${styles.submitBtn} ${taxonomyManagerStyles.createSubmit}`, onClick: handleAddTaxonomy, disabled: !newTaxonomyLabel.trim(), children: "Create" }), _jsx("button", { className: `${styles.cancelBtn} ${taxonomyManagerStyles.createCancel}`, onClick: () => {
                                             setIsCreating(false);
                                             setNewTaxonomyLabel('');
                                         }, children: "Cancel" })] })] }) }))] }));
     }
-    return (_jsxs("div", { className: styles.taxonomyDetailView, children: [_jsx("div", { className: styles.detailHeader, children: _jsxs("div", { className: styles.taxonomyBreadcrumbs, children: [_jsxs("button", { className: styles.breadcrumbPrev, onClick: () => setView('list'), title: "Back to All Taxonomies", children: [_jsx(ArrowLeft, { size: 16, style: { marginRight: '6px' } }), "Taxonomies"] }), _jsx(ChevronRight, { size: 14, className: styles.breadcrumbDivider }), _jsx("h3", { className: styles.breadcrumbActive, children: activeTaxonomyId === 'categories' ? 'Categories' :
-                                activeTaxonomyId === 'types' ? 'Task Types' :
-                                    activeTaxonomyId === 'priorities' ? 'Priority Levels' :
-                                        activeTaxonomyId === 'complexities' ? 'Complexity' :
-                                            activeTaxonomyId === 'approaches' ? 'Approach Options' :
-                                                activeTaxonomy?.label || 'Taxonomy' })] }) }), _jsx("div", { className: styles.detailContent, children: activeTaxonomyId === 'categories' ? (_jsx(CategoryManager, { categories: categories, pathValidation: pathValidation, onUpdateCategory: onUpdateCategory, onRemoveCategory: onRemoveCategory, onSaveCategory: onSaveCategory, onAddPath: onAddPath, onRemovePath: onRemovePath, onUpdateCategoryIcon: onUpdateCategoryIcon, onUpdateCategoryColor: onUpdateCategoryColor, onBrowseFolders: onBrowseFolders })) : activeTaxonomyId === 'types' ? (_jsx(TypeManager, { types: types, onSaveType: onSaveType, onRemoveType: onRemoveType })) : activeTaxonomyId === 'complexities' ? (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h4", { className: styles.settingSubtitle, children: "Complexity" }), _jsx("p", { className: styles.settingsHint, children: "Complexity is estimated by AI and system logic by default." }), _jsx("p", { className: styles.settingsHint, children: "Enable this to let users set complexity manually and show the Complexity field in Add/Edit Task. When disabled, the Complexity field is hidden from the task form." }), _jsxs("label", { className: styles.archiveToggle, children: [_jsx("input", { type: "checkbox", checked: manualComplexityEnabled, onChange: (e) => {
+    return (_jsxs("div", { className: taxonomyManagerStyles.taxonomyDetailView, children: [_jsx("div", { className: taxonomyManagerStyles.detailHeader, children: _jsxs("div", { className: taxonomyManagerStyles.taxonomyBreadcrumbs, children: [_jsxs("button", { className: taxonomyManagerStyles.breadcrumbPrev, onClick: () => setView('list'), title: "Back to All Taxonomies", children: [_jsx(ArrowLeft, { size: 16, className: taxonomyManagerStyles.breadcrumbIcon }), "Taxonomies"] }), _jsx(ChevronRight, { size: 14, className: taxonomyManagerStyles.breadcrumbDivider }), _jsx("h3", { className: taxonomyManagerStyles.breadcrumbActive, children: activeTaxonomyId === 'library'
+                                ? 'System Taxonomy Library'
+                                : activeTaxonomyId === 'custom-library'
+                                    ? 'Custom Taxonomy Library'
+                                    : (activeCatalogItem?.label || 'Taxonomy') })] }) }), _jsx("div", { className: taxonomyManagerStyles.detailContent, children: activeTaxonomyId === 'library' ? (_jsx(TaxonomyLibraryManager, { mode: "system", onAnalyzeSystemTaxonomyPack: onAnalyzeSystemTaxonomyPack, onApplySystemTaxonomyPack: onApplySystemTaxonomyPack })) : activeTaxonomyId === 'custom-library' ? (_jsx(TaxonomyLibraryManager, { mode: "custom", taxonomies: taxonomies, onUpdateCustomTaxonomies: onUpdateTaxonomies })) : activeTaxonomyId === 'categories' ? (_jsx(CategoryManager, { displayLabel: taxonomyDisplayLabels?.category, onUpdateDisplayLabel: (label) => onUpdateTaxonomyDisplayLabels?.({ category: label }), categories: categories, pathValidation: pathValidation, onUpdateCategory: onUpdateCategory, onRemoveCategory: onRemoveCategory, onSaveCategory: onSaveCategory, onAddPath: onAddPath, onRemovePath: onRemovePath, onUpdateCategoryIcon: onUpdateCategoryIcon, onUpdateCategoryColor: onUpdateCategoryColor, onBrowseFolders: onBrowseFolders })) : activeTaxonomyId === 'types' ? (_jsx(TypeManager, { displayLabel: taxonomyDisplayLabels?.type, onUpdateDisplayLabel: (label) => onUpdateTaxonomyDisplayLabels?.({ type: label }), types: types, onSaveType: onSaveType, onRemoveType: onRemoveType, onUpdateType: onUpdateType })) : activeTaxonomyId === 'complexities' ? (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h4", { className: styles.settingSubtitle, children: "Complexity" }), _jsx("p", { className: styles.settingsHint, children: "Complexity is estimated by AI and system logic by default." }), _jsx("p", { className: styles.settingsHint, children: "Enable this to let users set complexity manually and show the Complexity field in Add/Edit Task. When disabled, the Complexity field is hidden from the task form." }), _jsxs("label", { className: styles.archiveToggle, children: [_jsx("input", { type: "checkbox", checked: manualComplexityEnabled, onChange: (e) => {
                                         void onManualComplexityEnabledChange(e.target.checked);
-                                    } }), _jsx("span", { children: "Manual Complexity" })] })] })) : activeTaxonomy ? (_jsx(TaxonomyEditor, { taxonomy: activeTaxonomy, onUpdateTaxonomy: handleUpdateTaxonomy, onRemoveTaxonomy: handleRemoveTaxonomy })) : activeTaxonomyId === 'priorities' ? (_jsx(TaxonomyEditor, { taxonomy: {
-                        id: 'priorities',
-                        label: 'Priority Levels',
-                        isSystem: true,
-                        widgetType: 'level',
-                        multiSelect: false,
-                        options: priorities
-                    }, onUpdateTaxonomy: (updated) => onUpdatePriorities(updated.options) })) : activeTaxonomyId === 'approaches' ? (_jsx(TaxonomyEditor, { taxonomy: {
-                        id: 'approaches',
-                        label: 'Approach Options',
-                        isSystem: true,
-                        widgetType: 'select',
-                        multiSelect: false,
-                        options: approaches
-                    }, onUpdateTaxonomy: (updated) => onUpdateApproaches(updated.options) })) : (_jsxs("div", { className: styles.emptyState, children: [_jsx("p", { children: "Taxonomy not found." }), _jsx("button", { className: styles.submitBtn, onClick: () => setView('list'), children: "Return to List" })] })) })] }));
+                                    } }), _jsx("span", { children: "Manual Complexity" })] })] })) : activeTaxonomy ? (_jsx(TaxonomyEditor, { taxonomy: activeTaxonomy, onUpdateTaxonomy: handleUpdateTaxonomy, onRemoveTaxonomy: handleRemoveTaxonomy, onRestoreTaxonomy: handleRestoreTaxonomy })) : activeTaxonomyId === 'priorities' ? (_jsx(PriorityManager, { displayLabel: taxonomyDisplayLabels?.priority, onUpdateDisplayLabel: (label) => onUpdateTaxonomyDisplayLabels?.({ priority: label }), priorities: priorities, onUpdatePriorities: onUpdatePriorities })) : (_jsxs("div", { className: styles.emptyState, children: [_jsx("p", { className: "tf-empty-copy", children: "Taxonomy not found." }), _jsx("button", { className: styles.submitBtn, onClick: () => setView('list'), children: "Return to List" })] })) })] }));
 }

package/dist/components/features/settings/TypeManager.d.ts

@@ -1,10 +1,21 @@
 interface TypeManagerProps {
+    displayLabel?: string;
+    onUpdateDisplayLabel?: (label: string) => void;
     types: {
         value: string;
         label: string;
+        color?: string;
+        icon?: string;
+        status?: 'active' | 'retired';
     }[];
     onSaveType: (label: string) => void;
     onRemoveType: (value: string) => void;
+    onUpdateType: (value: string, updates: {
+        label?: string;
+        color?: string;
+        icon?: string;
+        status?: 'active' | 'retired';
+    }) => void;
 }
 export declare function TypeManager(props: TypeManagerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/features/settings/TypeManager.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
-import { Plus, X, Trash2 } from 'lucide-react';
+import { Box, Plus, Trash2, X } from 'lucide-react';
 import styles from '../../../Taskforce.module.css';
+import helperStyles from './SettingsEditorHelpers.module.css';
 import { TaxonomyDropdown } from '../../ui/TaxonomyDropdown';
-import { TypeMeta } from '../../../utils/constants';
+import { AVAILABLE_ICONS, IconMap, PALETTE_ORDER, resolveColor } from '../../../utils/constants';
+import { DEFAULT_TYPE_VALUE } from '../../../shared/taxonomyDefaults.js';
 export function TypeManager(props) {
-    const { types, onSaveType, onRemoveType } = props;
+    const { types, onSaveType, onRemoveType, onUpdateType, displayLabel, onUpdateDisplayLabel } = props;
     const [selectedTypeValue, setSelectedTypeValue] = useState('');
     const [isCreating, setIsCreating] = useState(false);
     const [newTypeLabel, setNewTypeLabel] = useState('');
     const [editingLabel, setEditingLabel] = useState('');
+    const [editingDisplayLabel, setEditingDisplayLabel] = useState(displayLabel || '');
     // Sync editing label when selection changes
     useEffect(() => {
         const type = types.find(t => t.value === selectedTypeValue);
@@ -17,6 +20,12 @@ export function TypeManager(props) {
             setEditingLabel(type.label);
         }
     }, [selectedTypeValue, types]);
+    useEffect(() => {
+        setEditingDisplayLabel(displayLabel || '');
+    }, [displayLabel]);
+    const selectedType = types.find(t => t.value === selectedTypeValue);
+    const isProtectedType = selectedType?.value === DEFAULT_TYPE_VALUE;
+    const isRetiredType = selectedType?.status === 'retired';
     const handleSaveNewType = () => {
         if (!newTypeLabel.trim())
             return;
@@ -26,14 +35,13 @@ export function TypeManager(props) {
         setIsCreating(false);
         setTimeout(() => setSelectedTypeValue(predictedId), 100);
     };
-    const selectedType = types.find(t => t.value === selectedTypeValue);
     return (_jsxs("div", { className: `${styles.configPanel} ${styles.flex1}`, children: [_jsxs("div", { className: `${styles.headerFlex}`, style: { marginBottom: (selectedType && !isCreating) || isCreating ? '20px' : '0' }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx("label", { id: "type-config-label", className: styles.label, style: { display: 'none' }, children: "Select Type" }), _jsx(TaxonomyDropdown, { value: selectedTypeValue, options: [
                                     { value: "", label: "Select a type to configure...", icon: "HelpCircle", color: "var(--text-secondary)" },
                                     ...types.map(t => ({
                                         value: t.value,
-                                        label: t.label,
-                                        icon: TypeMeta[t.value]?.icon || 'Box',
-                                        color: TypeMeta[t.value]?.color || 'violet-500'
+                                        label: t.status === 'retired' ? `${t.label} (Retired)` : t.label,
+                                        icon: t.icon || 'Box',
+                                        color: t.color || 'violet-500'
                                     }))
                                 ], onChange: (value) => {
                                     setSelectedTypeValue(String(value));
@@ -41,10 +49,39 @@ export function TypeManager(props) {
                                 }, disabled: isCreating, ariaLabelledBy: "type-config-label" })] }), !isCreating ? (_jsx("button", { type: "button", className: styles.browseBtn, onClick: () => setIsCreating(true), title: "Create new type", children: _jsx(Plus, { size: 18 }) })) : (_jsx("button", { type: "button", className: `${styles.browseBtn} ${styles.cancelBtnRed}`, onClick: () => setIsCreating(false), title: "Cancel creation", children: _jsx(X, { size: 18 }) }))] }), isCreating && (_jsxs("div", { className: `${styles.configItem} ${styles.marginBottom16}`, children: [_jsx("div", { className: `${styles.labelRow} ${styles.marginBottom8}`, children: _jsx("label", { className: styles.settingsLabel, children: "New Type Label" }) }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx("input", { type: "text", className: styles.input, placeholder: "e.g. Bug, Feature, Chore...", value: newTypeLabel, onChange: (e) => setNewTypeLabel(e.target.value), onKeyDown: (e) => {
                                     if (e.key === 'Enter')
                                         handleSaveNewType();
-                                }, autoFocus: true }), _jsx("button", { type: "button", className: styles.saveSettingsBtn, onClick: handleSaveNewType, disabled: !newTypeLabel.trim(), children: "Create" })] })] })), selectedType && !isCreating && (_jsxs("div", { className: styles.flex1, children: [_jsx("div", { className: `${styles.configDivider} ${styles.marginBottom20}` }), _jsx("div", { className: styles.flexBetweenCenter, children: _jsxs("div", { className: `${styles.flexColGap4} ${styles.flex1}`, children: [_jsx("label", { className: `${styles.label} ${styles.inputLabel}`, children: "Label" }), _jsxs("div", { className: styles.gridConfig, children: [_jsx("input", { className: styles.inputDisabledOpacity, value: editingLabel, readOnly: true, disabled: true }), _jsxs("button", { type: "button", onClick: () => {
-                                                if (confirm(`Delete type "${selectedType.label}"?`)) {
+                                }, autoFocus: true }), _jsx("button", { type: "button", className: styles.saveSettingsBtn, onClick: handleSaveNewType, disabled: !newTypeLabel.trim(), children: "Create" })] })] })), selectedType && !isCreating && (_jsxs("div", { className: styles.flex1, children: [_jsx("div", { className: `${styles.configDivider} ${styles.marginBottom20}` }), _jsx("div", { className: styles.flexBetweenCenter, children: _jsxs("div", { className: `${styles.flexColGap4} ${styles.flex1}`, children: [_jsx("label", { className: `${styles.label} ${styles.inputLabel}`, children: "Display Label" }), _jsx("input", { className: styles.input, value: editingDisplayLabel, onChange: (e) => setEditingDisplayLabel(e.target.value), onBlur: () => onUpdateDisplayLabel?.(editingDisplayLabel.trim()) }), _jsx("label", { className: `${styles.label} ${styles.inputLabel}`, children: "Label" }), _jsxs("div", { className: styles.gridConfig, children: [_jsx("input", { className: styles.input, value: editingLabel, onChange: (e) => setEditingLabel(e.target.value), onBlur: () => onUpdateType(selectedType.value, { label: editingLabel }), onKeyDown: (e) => {
+                                                if (e.key === 'Enter') {
+                                                    e.currentTarget.blur();
+                                                }
+                                            } }), !isProtectedType && (_jsxs("button", { type: "button", onClick: () => {
+                                                if (isRetiredType) {
+                                                    onUpdateType(selectedType.value, { status: 'active' });
+                                                    return;
+                                                }
+                                                if (confirm(`Retire type "${selectedType.label}"? Existing tasks using it will keep it as a legacy type until reassigned.`)) {
                                                     onRemoveType(selectedType.value);
-                                                    setSelectedTypeValue('');
                                                 }
-                                            }, title: "Delete Type", className: `${styles.destructiveBtn} ${styles.deleteBtnMedium}`, children: [_jsx(Trash2, { size: 14, className: styles.trashIcon }), " Delete"] })] })] }) }), _jsx("p", { className: `${styles.settingsHint} ${styles.marginTop12}`, children: "Note: Renaming types is currently not supported to maintain task integrity. Delete and recreate if necessary." })] })), !selectedType && !isCreating && (_jsx("div", { className: styles.emptyStateItalic, style: { border: 'none', background: 'transparent' }, children: "Select a type above to manage" }))] }));
+                                            }, title: isRetiredType ? 'Restore Type' : 'Retire Type', className: `${styles.destructiveBtn} ${styles.deleteBtnMedium}`, children: [_jsx(Trash2, { size: 14, className: styles.trashIcon }), " ", isRetiredType ? 'Restore' : 'Retire'] }))] })] }) }), _jsx("p", { className: `${styles.settingsHint} ${styles.marginTop12}`, children: isProtectedType
+                            ? 'Task is the protected fallback type and cannot be retired.'
+                            : isRetiredType
+                                ? 'Retired types stay available as legacy values on existing tasks until you reassign them.'
+                                : 'Retiring a type removes it from new task selection while preserving it as a legacy value on tasks that already use it.' }), _jsx("div", { className: `${styles.configDivider} ${styles.configDividerMargin}` }), _jsxs("div", { className: styles.configSection, children: [_jsx("label", { className: `${styles.subLabel} ${styles.subLabelBlock} ${styles.subLabelBlock12}`, children: "Visual Style" }), _jsxs("div", { className: styles.categorySubConfig, children: [_jsx("div", { className: styles.colorPickerGrid, children: PALETTE_ORDER.map(colorToken => {
+                                            const resolvedColor = resolveColor(colorToken) || '#000000';
+                                            const isActive = selectedType.color === colorToken;
+                                            const IconComp = selectedType.icon && IconMap[selectedType.icon]
+                                                ? IconMap[selectedType.icon]
+                                                : Box;
+                                            return (_jsx("button", { type: "button", className: `${styles.colorSwatch} ${isActive ? styles.colorSwatchActive : ''}`, style: {
+                                                    borderColor: isActive ? resolvedColor : undefined,
+                                                    '--swatch-color': resolvedColor,
+                                                    '--swatch-border-color': `${resolvedColor}80`
+                                                }, onClick: () => onUpdateType(selectedType.value, { color: colorToken }), title: colorToken, children: _jsx(IconComp, { size: 14, style: { color: resolvedColor } }) }, colorToken));
+                                        }) }), _jsx("div", { className: styles.iconGrid, children: AVAILABLE_ICONS.map(iconName => {
+                                            const IconComp = IconMap[iconName];
+                                            return (_jsx("button", { type: "button", className: `${styles.iconPickerBtn} ${selectedType.icon === iconName ? styles.iconPickerBtnActive : ''}`, style: selectedType.icon === iconName ? {
+                                                    borderColor: resolveColor(selectedType.color),
+                                                    color: resolveColor(selectedType.color),
+                                                    background: `${resolveColor(selectedType.color)}15`
+                                                } : {}, onClick: () => onUpdateType(selectedType.value, { icon: iconName }), title: iconName, children: _jsx(IconComp, { size: 16 }) }, iconName));
+                                        }) })] })] })] })), !selectedType && !isCreating && (_jsx("div", { className: `${helperStyles.emptyStateItalic} ${helperStyles.emptyStateBare}`, children: "Select a type above to manage" }))] }));
 }

package/dist/components/features/settings/{WorkflowEditorPrototype.d.ts → WorkflowEditor.d.ts}

@@ -1,4 +1,4 @@
-interface WorkflowEditorPrototypeProps {
+interface WorkflowEditorProps {
     availableWorkflows: string[];
     onFetchWorkflowTemplate?: (name: string) => Promise<any | null>;
     onFetchWorkflowOverrideNames?: () => Promise<string[]>;
@@ -11,5 +11,5 @@ interface WorkflowEditorPrototypeProps {
         error?: string;
     }>;
 }
-export declare function WorkflowEditorPrototype(props: WorkflowEditorPrototypeProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkflowEditor(props: WorkflowEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/features/settings/{WorkflowEditorPrototype.js → WorkflowEditor.js}

@@ -26,7 +26,7 @@ function fromTextList(value) {
 function toUniqueList(value) {
     return Array.from(new Set(value.map((v) => v.trim()).filter(Boolean)));
 }
-export function WorkflowEditorPrototype(props) {
+export function WorkflowEditor(props) {
     const { availableWorkflows, onFetchWorkflowTemplate, onFetchWorkflowOverrideNames, onSaveWorkflowTemplateDraft, onResetWorkflowTemplateDraft } = props;
     const [selectedWorkflow, setSelectedWorkflow] = useState('');
     const [loading, setLoading] = useState(false);
@@ -135,7 +135,7 @@ export function WorkflowEditorPrototype(props) {
         if (!template || !draft)
             return '';
         return [
-            `# ${template.name} (Prototype Preview)`,
+            `# ${template.name} Preview`,
             '',
             `Description: ${draft.description}`,
             `Aliases: ${draft.aliasesText || '(none)'}`,
@@ -241,5 +241,5 @@ export function WorkflowEditorPrototype(props) {
         updateListField(field, [...current, item]);
         clear();
     };
-    return (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Workflow Editor (Prototype)" }), _jsx("p", { className: styles.settingsHint, children: "Prototype editor: inspect workflow structure, edit a draft, validate, preview, and save via override layer. Critical fields are locked for `do` and `execute`." }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: styles.label, htmlFor: "workflow-editor-select", children: "Workflow" }), _jsx("select", { id: "workflow-editor-select", className: styles.input, value: selectedWorkflow, onChange: (e) => setSelectedWorkflow(e.target.value), children: orderedWorkflows.map((wf) => (_jsx("option", { value: wf, children: overrideNames.includes(wf) ? `${wf} (override)` : wf }, wf))) })] }), loading && (_jsxs("div", { className: styles.settingsHint, children: [_jsx(Loader2, { size: 14, className: styles.spinner }), " Loading template..."] })), loadError && _jsx("div", { className: styles.errorMessage, children: loadError }), draft && (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${styles.exportRow} ${styles.exportRowGrid}`, style: { marginTop: 12 }, children: [_jsxs("div", { className: styles.exportItem, children: [_jsx("label", { className: styles.label, children: "Description" }), _jsx("input", { className: styles.input, value: draft.description, onChange: (e) => setDraft({ ...draft, description: e.target.value }), disabled: isLocked('description') }), _jsx("label", { className: styles.label, children: "Aliases (comma-separated)" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("input", { className: styles.input, value: newAlias, onChange: (e) => setNewAlias(e.target.value), placeholder: "Add alias (e.g. /execute)", disabled: isLocked('aliasesText') }), _jsx("button", { className: styles.secondaryHeaderBtn, onClick: () => addListItem('aliasesText', newAlias, () => setNewAlias('')), disabled: isLocked('aliasesText') || !newAlias.trim(), children: "Add" })] }), _jsx("div", { className: styles.workflowActions, children: fromTextList(draft.aliasesText).map((alias) => (_jsxs("button", { className: styles.textBtn, onClick: () => removeListItem('aliasesText', alias), disabled: isLocked('aliasesText'), children: [alias, " \u00D7"] }, alias))) }), _jsx("label", { className: styles.label, children: "Dispatch Default" }), _jsx("input", { className: styles.input, value: draft.dispatchDefault, onChange: (e) => setDraft({ ...draft, dispatchDefault: e.target.value }), disabled: isLocked('dispatchDefault') })] }), _jsxs("div", { className: styles.exportItem, children: [_jsx("label", { className: styles.label, children: "Critical Tools (one per line)" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("input", { className: styles.input, value: newCriticalTool, onChange: (e) => setNewCriticalTool(e.target.value), placeholder: "Add critical tool id", disabled: isLocked('criticalToolsText') }), _jsx("button", { className: styles.secondaryHeaderBtn, onClick: () => addListItem('criticalToolsText', newCriticalTool, () => setNewCriticalTool('')), disabled: isLocked('criticalToolsText') || !newCriticalTool.trim(), children: "Add" })] }), _jsx("div", { className: styles.workflowActions, children: fromTextList(draft.criticalToolsText).map((tool) => (_jsxs("button", { className: styles.textBtn, onClick: () => removeListItem('criticalToolsText', tool), disabled: isLocked('criticalToolsText'), children: [tool, " \u00D7"] }, tool))) }), _jsx("label", { className: styles.label, children: "Optional Tools (one per line)" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("input", { className: styles.input, value: newOptionalTool, onChange: (e) => setNewOptionalTool(e.target.value), placeholder: "Add optional tool id", disabled: isLocked('optionalToolsText') }), _jsx("button", { className: styles.secondaryHeaderBtn, onClick: () => addListItem('optionalToolsText', newOptionalTool, () => setNewOptionalTool('')), disabled: isLocked('optionalToolsText') || !newOptionalTool.trim(), children: "Add" })] }), _jsx("div", { className: styles.workflowActions, children: fromTextList(draft.optionalToolsText).map((tool) => (_jsxs("button", { className: styles.textBtn, onClick: () => removeListItem('optionalToolsText', tool), disabled: isLocked('optionalToolsText'), children: [tool, " \u00D7"] }, tool))) })] })] }), _jsx("label", { className: styles.label, children: "Default Prompt Content" }), _jsx("textarea", { className: styles.input, rows: 12, value: draft.contentDefault, onChange: (e) => setDraft({ ...draft, contentDefault: e.target.value }), disabled: isLocked('contentDefault') }), _jsxs("div", { className: styles.pathInputGroup, style: { marginTop: 12 }, children: [_jsxs("button", { className: styles.secondaryHeaderBtn, onClick: handleResetDraft, children: [_jsx(RotateCcw, { size: 14 }), "Reset Draft"] }), _jsxs("button", { className: styles.secondaryHeaderBtn, onClick: handleCopyPreview, children: [_jsx(Copy, { size: 14 }), "Copy Preview"] }), _jsxs("button", { className: styles.secondaryHeaderBtn, onClick: handleSaveDraft, disabled: saving || validation.length > 0 || changedFields.length === 0, children: [saving ? _jsx(Loader2, { size: 14, className: styles.spinner }) : null, "Save Draft"] }), _jsxs("button", { className: styles.secondaryHeaderBtn, onClick: handleRollback, disabled: resetting, children: [resetting ? _jsx(Loader2, { size: 14, className: styles.spinner }) : null, "Rollback Override"] })] }), changedFields.length > 0 && (_jsxs("div", { className: styles.settingsHint, children: ["Changed fields: ", changedFields.join(', ')] })), lockedFields.length > 0 && (_jsxs("div", { className: styles.settingsHint, children: ["Locked fields for `", selectedWorkflow, "`: ", lockedFields.join(', ')] })), validation.length === 0 ? (_jsx("div", { className: styles.successMessage, children: "Draft validation: ready for prototype review." })) : (_jsx("div", { className: styles.errorMessage, children: validation.map((issue) => _jsx("div", { children: issue }, issue)) })), saveState && (_jsx("div", { className: saveState.type === 'success' ? styles.successMessage : styles.errorMessage, children: saveState.message })), diffRows.length > 0 && (_jsxs("div", { className: styles.codeBlockWrapper, style: { marginTop: 12 }, children: [_jsx("div", { className: styles.codeHeader, children: _jsx("span", { className: styles.codeLabel, children: "Field Diff (Before / After)" }) }), diffRows.map((row) => (_jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("div", { className: styles.settingsHint, children: _jsx("strong", { children: row.field }) }), _jsxs("div", { className: `${styles.exportRow} ${styles.exportRowGrid}`, children: [_jsxs("div", { className: styles.exportItem, children: [_jsx("div", { className: styles.settingsHint, children: "Before" }), _jsx("pre", { className: styles.codeBlock, children: row.before || '(empty)' })] }), _jsxs("div", { className: styles.exportItem, children: [_jsx("div", { className: styles.settingsHint, children: "After" }), _jsx("pre", { className: styles.codeBlock, children: row.after || '(empty)' })] })] })] }, row.field)))] })), _jsxs("div", { className: styles.codeBlockWrapper, style: { marginTop: 12 }, children: [_jsx("div", { className: styles.codeHeader, children: _jsx("span", { className: styles.codeLabel, children: "Prototype Preview" }) }), _jsx("pre", { className: styles.codeBlock, children: preview })] })] }))] }));
+    return (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Workflow Editor" }), _jsx("p", { className: styles.settingsHint, children: "Inspect workflow structure, edit a draft, validate, preview, and save via the override layer. Critical fields are locked for `do` and `execute`." }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: styles.label, htmlFor: "workflow-editor-select", children: "Workflow" }), _jsx("select", { id: "workflow-editor-select", className: styles.input, value: selectedWorkflow, onChange: (e) => setSelectedWorkflow(e.target.value), children: orderedWorkflows.map((wf) => (_jsx("option", { value: wf, children: overrideNames.includes(wf) ? `${wf} (override)` : wf }, wf))) })] }), loading && (_jsxs("div", { className: styles.settingsHint, children: [_jsx(Loader2, { size: 14, className: styles.spinner }), " Loading template..."] })), loadError && _jsx("div", { className: styles.errorMessage, children: loadError }), draft && (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${styles.exportRow} ${styles.exportRowGrid}`, style: { marginTop: 12 }, children: [_jsxs("div", { className: styles.exportItem, children: [_jsx("label", { className: styles.label, children: "Description" }), _jsx("input", { className: styles.input, value: draft.description, onChange: (e) => setDraft({ ...draft, description: e.target.value }), disabled: isLocked('description') }), _jsx("label", { className: styles.label, children: "Aliases (comma-separated)" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("input", { className: styles.input, value: newAlias, onChange: (e) => setNewAlias(e.target.value), placeholder: "Add alias (e.g. /execute)", disabled: isLocked('aliasesText') }), _jsx("button", { className: styles.secondaryHeaderBtn, onClick: () => addListItem('aliasesText', newAlias, () => setNewAlias('')), disabled: isLocked('aliasesText') || !newAlias.trim(), children: "Add" })] }), _jsx("div", { className: styles.workflowActions, children: fromTextList(draft.aliasesText).map((alias) => (_jsxs("button", { className: styles.textBtn, onClick: () => removeListItem('aliasesText', alias), disabled: isLocked('aliasesText'), children: [alias, " \u00D7"] }, alias))) }), _jsx("label", { className: styles.label, children: "Dispatch Default" }), _jsx("input", { className: styles.input, value: draft.dispatchDefault, onChange: (e) => setDraft({ ...draft, dispatchDefault: e.target.value }), disabled: isLocked('dispatchDefault') })] }), _jsxs("div", { className: styles.exportItem, children: [_jsx("label", { className: styles.label, children: "Critical Tools (one per line)" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("input", { className: styles.input, value: newCriticalTool, onChange: (e) => setNewCriticalTool(e.target.value), placeholder: "Add critical tool id", disabled: isLocked('criticalToolsText') }), _jsx("button", { className: styles.secondaryHeaderBtn, onClick: () => addListItem('criticalToolsText', newCriticalTool, () => setNewCriticalTool('')), disabled: isLocked('criticalToolsText') || !newCriticalTool.trim(), children: "Add" })] }), _jsx("div", { className: styles.workflowActions, children: fromTextList(draft.criticalToolsText).map((tool) => (_jsxs("button", { className: styles.textBtn, onClick: () => removeListItem('criticalToolsText', tool), disabled: isLocked('criticalToolsText'), children: [tool, " \u00D7"] }, tool))) }), _jsx("label", { className: styles.label, children: "Optional Tools (one per line)" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("input", { className: styles.input, value: newOptionalTool, onChange: (e) => setNewOptionalTool(e.target.value), placeholder: "Add optional tool id", disabled: isLocked('optionalToolsText') }), _jsx("button", { className: styles.secondaryHeaderBtn, onClick: () => addListItem('optionalToolsText', newOptionalTool, () => setNewOptionalTool('')), disabled: isLocked('optionalToolsText') || !newOptionalTool.trim(), children: "Add" })] }), _jsx("div", { className: styles.workflowActions, children: fromTextList(draft.optionalToolsText).map((tool) => (_jsxs("button", { className: styles.textBtn, onClick: () => removeListItem('optionalToolsText', tool), disabled: isLocked('optionalToolsText'), children: [tool, " \u00D7"] }, tool))) })] })] }), _jsx("label", { className: styles.label, children: "Default Prompt Content" }), _jsx("textarea", { className: styles.input, rows: 12, value: draft.contentDefault, onChange: (e) => setDraft({ ...draft, contentDefault: e.target.value }), disabled: isLocked('contentDefault') }), _jsxs("div", { className: styles.pathInputGroup, style: { marginTop: 12 }, children: [_jsxs("button", { className: styles.secondaryHeaderBtn, onClick: handleResetDraft, children: [_jsx(RotateCcw, { size: 14 }), "Reset Draft"] }), _jsxs("button", { className: styles.secondaryHeaderBtn, onClick: handleCopyPreview, children: [_jsx(Copy, { size: 14 }), "Copy Preview"] }), _jsxs("button", { className: styles.secondaryHeaderBtn, onClick: handleSaveDraft, disabled: saving || validation.length > 0 || changedFields.length === 0, children: [saving ? _jsx(Loader2, { size: 14, className: styles.spinner }) : null, "Save Draft"] }), _jsxs("button", { className: styles.secondaryHeaderBtn, onClick: handleRollback, disabled: resetting, children: [resetting ? _jsx(Loader2, { size: 14, className: styles.spinner }) : null, "Rollback Override"] })] }), changedFields.length > 0 && (_jsxs("div", { className: styles.settingsHint, children: ["Changed fields: ", changedFields.join(', ')] })), lockedFields.length > 0 && (_jsxs("div", { className: styles.settingsHint, children: ["Locked fields for `", selectedWorkflow, "`: ", lockedFields.join(', ')] })), validation.length === 0 ? (_jsx("div", { className: styles.successMessage, children: "Draft validation: ready for review." })) : (_jsx("div", { className: styles.errorMessage, children: validation.map((issue) => _jsx("div", { children: issue }, issue)) })), saveState && (_jsx("div", { className: saveState.type === 'success' ? styles.successMessage : styles.errorMessage, children: saveState.message })), diffRows.length > 0 && (_jsxs("div", { className: styles.codeBlockWrapper, style: { marginTop: 12 }, children: [_jsx("div", { className: styles.codeHeader, children: _jsx("span", { className: styles.codeLabel, children: "Field Diff (Before / After)" }) }), diffRows.map((row) => (_jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("div", { className: styles.settingsHint, children: _jsx("strong", { children: row.field }) }), _jsxs("div", { className: `${styles.exportRow} ${styles.exportRowGrid}`, children: [_jsxs("div", { className: styles.exportItem, children: [_jsx("div", { className: styles.settingsHint, children: "Before" }), _jsx("pre", { className: styles.codeBlock, children: row.before || '(empty)' })] }), _jsxs("div", { className: styles.exportItem, children: [_jsx("div", { className: styles.settingsHint, children: "After" }), _jsx("pre", { className: styles.codeBlock, children: row.after || '(empty)' })] })] })] }, row.field)))] })), _jsxs("div", { className: styles.codeBlockWrapper, style: { marginTop: 12 }, children: [_jsx("div", { className: styles.codeHeader, children: _jsx("span", { className: styles.codeLabel, children: "Workflow Preview" }) }), _jsx("pre", { className: styles.codeBlock, children: preview })] })] }))] }));
 }

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

@@ -1,8 +1,10 @@
 import React from 'react';
-import { TaskItem } from '../../types';
+import { InitiativeItem, TaskItem, TaskStatus, WorkstreamItem } from '../../types';
+import type { TaskAutoSaveState } from '../../hooks/tasks/useTaskFormActions';
 interface TaskActionHeaderProps {
     editingTaskId: string | null;
     loading: boolean;
+    autoSaveState?: TaskAutoSaveState;
     title: string;
     handleSubmit: (e: React.FormEvent | React.MouseEvent) => void;
     resetForm: () => void;
@@ -10,11 +12,19 @@ interface TaskActionHeaderProps {
     copiedId: string | null;
     tasks: TaskItem[];
     currentTask?: TaskItem;
+    currentTaskWorkstream?: WorkstreamItem;
+    currentTaskInitiative?: InitiativeItem;
+    workstreamInput?: string;
+    onWorkstreamInputChange?: (value: string) => void;
+    onSetWorkstreamForCurrentTask?: (workstreamIdOverride?: string | null) => void;
     handleToggleInProgress: (task: TaskItem) => void;
     handleToggleReview: (task: TaskItem) => void;
     handleToggleComplete: (task: TaskItem) => void;
     handleToggleCancel: (task: TaskItem) => void;
+    handleSetStatus?: (task: TaskItem, status: TaskStatus) => void;
     handleArchiveTask: (task: TaskItem) => void;
+    handleRestoreDeletedTask?: (deletedRecordId: string) => void;
+    handlePermanentlyDeleteDeletedTask?: (deletedRecordId: string) => void;
 }
-export declare function TaskActionHeader({ editingTaskId, loading, title, handleSubmit, resetForm, handleCopyId, copiedId, tasks, currentTask: currentTaskProp, handleToggleInProgress, handleToggleReview, handleToggleComplete, handleToggleCancel, handleArchiveTask }: TaskActionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaskActionHeader({ editingTaskId, loading, autoSaveState, title, handleSubmit, resetForm, handleCopyId, copiedId, tasks, currentTask: currentTaskProp, currentTaskWorkstream, currentTaskInitiative, workstreamInput, onWorkstreamInputChange, onSetWorkstreamForCurrentTask, handleToggleInProgress, handleToggleReview, handleToggleComplete, handleToggleCancel, handleSetStatus, handleArchiveTask, handleRestoreDeletedTask, handlePermanentlyDeleteDeletedTask }: TaskActionHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/task/TaskActionHeader.js

@@ -1,13 +1,69 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Save, Loader2, Copy, Play, Pause, Sparkles, Check, Ban, Archive, RotateCcw, Plus } from 'lucide-react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Check, Loader2, RotateCcw, Plus, Trash2, X } from 'lucide-react';
 import styles from '../../Taskforce.module.css';
 import { t } from '../../localization';
-export function TaskActionHeader({ editingTaskId, loading, title, handleSubmit, resetForm, handleCopyId, copiedId, tasks, currentTask: currentTaskProp, handleToggleInProgress, handleToggleReview, handleToggleComplete, handleToggleCancel, handleArchiveTask }) {
+import { TaskStatusActions } from './TaskStatusActions';
+import { getTaskReferenceLabel } from '../../utils/taskReferences';
+import { TaskReferenceBadge } from './TaskReferenceBadge';
+import { formatInitiativeReference, getWorkstreamReferenceLabel } from '../../utils/planningReferences';
+export function TaskActionHeader({ editingTaskId, loading, autoSaveState = 'idle', title, handleSubmit, resetForm, handleCopyId, copiedId, tasks, currentTask: currentTaskProp, currentTaskWorkstream, currentTaskInitiative, workstreamInput = '', onWorkstreamInputChange, onSetWorkstreamForCurrentTask, handleToggleInProgress, handleToggleReview, handleToggleComplete, handleToggleCancel, handleSetStatus, handleArchiveTask, handleRestoreDeletedTask, handlePermanentlyDeleteDeletedTask }) {
+    const [showWorkstreamEditor, setShowWorkstreamEditor] = React.useState(false);
     const currentTask = currentTaskProp ?? (editingTaskId ? tasks.find(t => t.id === editingTaskId) || null : null);
     const isArchivedReadOnly = Boolean(currentTask?.isArchived);
-    return (_jsx("div", { className: styles.stickyActionHeader, children: editingTaskId ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: (e) => handleSubmit(e), disabled: loading || !title.trim() || isArchivedReadOnly, className: styles.primaryUpdateBtn, title: isArchivedReadOnly ? 'Archived tasks are read-only. Unarchive first.' : t('actionHeader.saveChangesTitle'), children: [loading ? _jsx(Loader2, { size: 16, className: styles.spinner }) : _jsx(Save, { size: 16 }), t('actionHeader.update')] }), _jsxs("button", { className: `${styles.taskIdBadgeStatic} ${copiedId === editingTaskId ? styles.copiedId : ''}`, onClick: (e) => handleCopyId(e, editingTaskId), disabled: loading, title: t('actionHeader.copyTaskIdTitle'), children: [copiedId === editingTaskId ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }), _jsxs("span", { children: ["ID: ", editingTaskId.split('-').slice(-1)[0]] })] }), _jsxs("div", { className: styles.editActionsGroup, children: [_jsx("button", { type: "button", className: `${styles.actionBtn} ${currentTask?.status === 'in-progress' ? styles.workingBtn : styles.startWorkBtn}`, disabled: loading || !currentTask || isArchivedReadOnly, onClick: () => currentTask && handleToggleInProgress(currentTask), title: currentTask?.status === 'in-progress' ? t('actionHeader.stopWorking') : t('actionHeader.startWorking'), children: currentTask?.status === 'in-progress' ? _jsx(Pause, { size: 18 }) : _jsx(Play, { size: 18 }) }), _jsx("button", { type: "button", className: `${styles.actionBtn} ${currentTask?.status === 'review' ? styles.reviewActiveBtn : styles.reviewBtn}`, disabled: loading || !currentTask || isArchivedReadOnly, onClick: () => currentTask && handleToggleReview(currentTask), title: currentTask?.status === 'review' ? t('actionHeader.unlockAndContinue') : t('actionHeader.readyForReview'), children: _jsx(Sparkles, { size: 18 }) }), _jsx("button", { type: "button", className: `${styles.actionBtn} ${currentTask?.status === 'done' ? styles.completeActiveBtn : styles.completeBtn}`, disabled: loading || !currentTask || isArchivedReadOnly, onClick: () => currentTask && handleToggleComplete(currentTask), title: currentTask?.status === 'done' ? t('actionHeader.unmarkComplete') : t('actionHeader.markComplete'), children: _jsx(Check, { size: 18 }) }), _jsx("button", { type: "button", className: `${styles.actionBtn} ${currentTask?.status === 'cancelled' ? styles.deleteActiveBtn : styles.deleteBtn}`, disabled: loading || !currentTask || isArchivedReadOnly, onClick: () => currentTask && handleToggleCancel(currentTask), title: currentTask?.status === 'cancelled' ? t('actionHeader.unmarkCancelled') : t('actionHeader.cancelTask'), children: _jsx(Ban, { size: 18 }) }), _jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.archiveTaskBtn} ${!(currentTask?.status === 'done' || currentTask?.status === 'cancelled') ? styles.disabledBtn : ''}`, onClick: () => {
-                                if (currentTask && (currentTask.status === 'done' || currentTask.status === 'cancelled')) {
-                                    handleArchiveTask(currentTask);
-                                }
-                            }, disabled: loading || isArchivedReadOnly || !(currentTask?.status === 'done' || currentTask?.status === 'cancelled'), title: currentTask?.status === 'done' || currentTask?.status === 'cancelled' ? t('actionHeader.archiveNow') : t('actionHeader.completeTaskToArchive'), children: _jsx(Archive, { size: 18 }) })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: resetForm, disabled: loading, className: styles.secondaryHeaderBtn, title: t('actionHeader.clearFormTitle'), children: [_jsx(RotateCcw, { size: 16 }), t('actionHeader.clear')] }), _jsxs("button", { type: "button", onClick: (e) => handleSubmit(e), disabled: loading || !title.trim(), className: styles.primaryUpdateBtn, title: t('actionHeader.addTaskTitle'), children: [loading ? _jsx(Loader2, { size: 16, className: styles.spinner }) : _jsx(Plus, { size: 16 }), t('actionHeader.addTask')] })] })) }));
+    const isDeletedReadOnly = Boolean(currentTask?.isDeleted);
+    const currentTaskReferenceLabel = getTaskReferenceLabel(currentTask) || editingTaskId || '';
+    const currentWorkstreamReferenceLabel = currentTaskWorkstream
+        ? (getWorkstreamReferenceLabel(currentTaskWorkstream) || currentTaskWorkstream.id)
+        : '';
+    const currentInitiativeReferenceLabel = currentTaskInitiative
+        ? (formatInitiativeReference(currentTaskInitiative) || currentTaskInitiative.id)
+        : '';
+    React.useEffect(() => {
+        if (currentTaskWorkstream) {
+            setShowWorkstreamEditor(false);
+        }
+    }, [currentTaskWorkstream?.id]);
+    const handleWorkstreamConfirm = React.useCallback(() => {
+        if (!workstreamInput.trim())
+            return;
+        onSetWorkstreamForCurrentTask?.();
+    }, [onSetWorkstreamForCurrentTask, workstreamInput]);
+    return (_jsx("div", { className: styles.stickyActionHeader, children: editingTaskId ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.taskHierarchyHeader, children: [_jsxs("div", { className: styles.taskHierarchyBadgeRow, children: [currentTaskInitiative ? (_jsxs(_Fragment, { children: [_jsx(TaskReferenceBadge, { copied: copiedId === currentInitiativeReferenceLabel, onClick: (e) => handleCopyId(e, currentInitiativeReferenceLabel), disabled: loading, title: "Copy initiative reference", label: currentInitiativeReferenceLabel }), _jsx("span", { className: styles.taskHierarchyDivider, children: "/" })] })) : null, currentTaskWorkstream ? (_jsxs(_Fragment, { children: [_jsx(TaskReferenceBadge, { copied: copiedId === currentWorkstreamReferenceLabel, onClick: (e) => handleCopyId(e, currentWorkstreamReferenceLabel), disabled: loading, title: "Copy workstream reference", label: currentWorkstreamReferenceLabel }), _jsx("span", { className: styles.taskHierarchyDivider, children: "/" })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: `${styles.taskIdBadge} ${styles.taskHierarchyAddBtn}`, onClick: () => {
+                                                onWorkstreamInputChange?.('');
+                                                setShowWorkstreamEditor((value) => !value);
+                                            }, disabled: loading || isArchivedReadOnly || isDeletedReadOnly, title: "Attach to workstream", "aria-label": "Attach to workstream", children: _jsx(Plus, { size: 13 }) }), _jsx("span", { className: styles.taskHierarchyDivider, children: "/" })] })), _jsx(TaskReferenceBadge, { copied: copiedId === currentTaskReferenceLabel, onClick: (e) => handleCopyId(e, currentTaskReferenceLabel), disabled: loading, title: t('actionHeader.copyTaskIdTitle'), label: currentTaskReferenceLabel })] }), showWorkstreamEditor && !currentTaskWorkstream ? (_jsxs("div", { className: styles.taskHierarchyEditor, children: [_jsx("input", { type: "text", className: `${styles.input} ${styles.taskHierarchyInput}`, value: workstreamInput, onChange: (event) => onWorkstreamInputChange?.(event.target.value), placeholder: "WS-123", "aria-label": "Attach workstream reference", onKeyDown: (event) => {
+                                        if (event.key === 'Enter') {
+                                            event.preventDefault();
+                                            handleWorkstreamConfirm();
+                                        }
+                                        if (event.key === 'Escape') {
+                                            event.preventDefault();
+                                            onWorkstreamInputChange?.('');
+                                            setShowWorkstreamEditor(false);
+                                        }
+                                    } }), _jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", onClick: handleWorkstreamConfirm, disabled: !workstreamInput.trim() || loading, title: "Attach workstream", "aria-label": "Attach workstream", children: _jsx(Check, { size: 14 }) }), _jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", onClick: () => {
+                                        onWorkstreamInputChange?.('');
+                                        setShowWorkstreamEditor(false);
+                                    }, disabled: loading, title: "Cancel workstream attach", "aria-label": "Cancel workstream attach", children: _jsx(X, { size: 14 }) })] })) : null] }), _jsx("div", { className: styles.taskSaveStatusCenter, children: _jsx("div", { className: `${styles.taskSaveStatus} ${autoSaveState === 'error' ? styles.taskSaveStatusError : ''}`, "aria-live": "polite", children: autoSaveState === 'saving' ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 14, className: styles.spinner }), _jsx("span", { children: "Saving\u2026" })] })) : autoSaveState === 'saved' ? (_jsx("span", { children: "Saved" })) : autoSaveState === 'error' ? (_jsx("span", { children: "Save failed" })) : null }) }), _jsx("div", { className: styles.editActionsGroup, children: isDeletedReadOnly && currentTask?.deletedRecordId ? (_jsxs(_Fragment, { children: [handleRestoreDeletedTask && (_jsx("button", { type: "button", className: styles.actionBtn, onClick: () => handleRestoreDeletedTask(currentTask.deletedRecordId || ''), disabled: loading, title: "Restore deleted task", children: _jsx(RotateCcw, { size: 16 }) })), handlePermanentlyDeleteDeletedTask && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.deleteBtn}`, onClick: () => handlePermanentlyDeleteDeletedTask(currentTask.deletedRecordId || ''), disabled: loading, title: "Permanently delete deleted task", children: _jsx(Trash2, { size: 16 }) }))] })) : (_jsx(TaskStatusActions, { task: currentTask, disabled: loading || isArchivedReadOnly, onSetStatus: (task, status) => {
+                            if (handleSetStatus) {
+                                handleSetStatus(task, status);
+                                return;
+                            }
+                            if (status === 'in-progress') {
+                                handleToggleInProgress(task);
+                                return;
+                            }
+                            if (status === 'review') {
+                                handleToggleReview(task);
+                                return;
+                            }
+                            if (status === 'done') {
+                                handleToggleComplete(task);
+                                return;
+                            }
+                            if (status === 'cancelled') {
+                                handleToggleCancel(task);
+                            }
+                        }, onArchiveTask: handleArchiveTask })) })] })) : (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: resetForm, disabled: loading, className: styles.secondaryHeaderBtn, title: t('actionHeader.clearFormTitle'), children: [_jsx(RotateCcw, { size: 16 }), t('actionHeader.clear')] }), _jsxs("button", { type: "button", onClick: (e) => handleSubmit(e), disabled: loading || !title.trim(), className: styles.primaryUpdateBtn, title: t('actionHeader.addTaskTitle'), children: [loading ? _jsx(Loader2, { size: 16, className: styles.spinner }) : _jsx(Plus, { size: 16 }), t('actionHeader.addTask')] })] })) }));
 }

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx } 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 { TaskActionHeader } from './TaskActionHeader';
+const baseTask = {
+    id: 'task-1',
+    referenceNumber: 1,
+    title: 'Polish task modal',
+    description: '',
+    status: 'task',
+    priority: 2,
+    complexity: 3,
+    category: 'general',
+    type: 'feature',
+    createdAt: '2026-04-02T10:00:00.000Z',
+    updatedAt: '2026-04-02T10:00:00.000Z',
+};
+const baseProps = {
+    loading: false,
+    title: '',
+    handleSubmit: vi.fn(),
+    resetForm: vi.fn(),
+    handleCopyId: vi.fn(),
+    copiedId: null,
+    tasks: [baseTask],
+    handleToggleInProgress: vi.fn(),
+    handleToggleReview: vi.fn(),
+    handleToggleComplete: vi.fn(),
+    handleToggleCancel: vi.fn(),
+    handleArchiveTask: vi.fn(),
+};
+const workstream = {
+    id: 'workstream-1',
+    referenceNumber: 12,
+    title: 'Platform polish',
+    description: '',
+    initiativeId: 'initiative-1',
+    createdAt: '2026-04-02T10:00:00.000Z',
+};
+const initiative = {
+    id: 'initiative-1',
+    referenceNumber: 5,
+    title: 'Q2 polish',
+    description: '',
+    createdAt: '2026-04-02T10:00:00.000Z',
+};
+describe('TaskActionHeader', () => {
+    it('keeps explicit add action for new tasks', () => {
+        render(_jsx(TaskActionHeader, { ...baseProps, editingTaskId: null, title: "New task" }));
+        expect(screen.getByRole('button', { name: /add task/i })).toBeInTheDocument();
+    });
+    it('shows save state instead of update action for existing tasks', () => {
+        render(_jsx(TaskActionHeader, { ...baseProps, editingTaskId: "task-1", title: "Polish task modal", autoSaveState: "saved", currentTask: baseTask }));
+        expect(screen.queryByRole('button', { name: /update/i })).not.toBeInTheDocument();
+        expect(screen.getByText('Saved')).toBeInTheDocument();
+    });
+    it('shows hierarchy badges for linked initiative and workstream context', () => {
+        render(_jsx(TaskActionHeader, { ...baseProps, editingTaskId: "task-1", title: "Polish task modal", currentTask: baseTask, currentTaskWorkstream: workstream, currentTaskInitiative: initiative }));
+        expect(screen.getByText('IN-5')).toBeInTheDocument();
+        expect(screen.getByText('WS-12')).toBeInTheDocument();
+        expect(screen.getByText('T-1')).toBeInTheDocument();
+    });
+    it('opens and cancels the inline workstream attach editor for unlinked tasks', async () => {
+        const user = userEvent.setup();
+        const onWorkstreamInputChange = vi.fn();
+        render(_jsx(TaskActionHeader, { ...baseProps, editingTaskId: "task-1", title: "Polish task modal", currentTask: baseTask, workstreamInput: "", onWorkstreamInputChange: onWorkstreamInputChange }));
+        await user.click(screen.getByRole('button', { name: /attach to workstream/i }));
+        expect(screen.getByLabelText('Attach workstream reference')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /cancel workstream attach/i }));
+        expect(onWorkstreamInputChange).toHaveBeenCalledWith('');
+    });
+});