@taskforcehq/taskforce 0.3.168

package/dist/components/features/TaskSettings.test.js

@@ -0,0 +1,308 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { TaskSettings } from './TaskSettings';
+describe('TaskSettings Component', () => {
+    // Default mock props
+    const defaultSettingsModel = {
+        currentTheme: 'dark',
+        globalTheme: 'dark',
+        themeUseGlobalDefault: false,
+        keyShortcut: 'Alt+T',
+        jsonBackupEnabled: false,
+        globalJsonBackupEnabled: false,
+        jsonBackupUseGlobalDefault: false,
+        exportWorkflowsPath: '.agent/workflows',
+        exportSpecialistsPath: '.agent/specialists',
+        exportingResource: null,
+        exportResult: null,
+        pathSaved: false,
+        initialSection: null,
+        exportEnvironment: 'antigravity',
+        // Mock Callbacks
+        onThemeChange: vi.fn(),
+        onSaveTheme: vi.fn(),
+        onSaveGlobalTheme: vi.fn(),
+        onResetProjectToGlobal: vi.fn(),
+        onKeyShortcutChange: vi.fn(),
+        onJsonBackupEnabledChange: vi.fn(),
+        onSaveGlobalJsonBackupEnabled: vi.fn(),
+        onSaveSettings: vi.fn(),
+        onExportWorkflowsPathChange: vi.fn(),
+        onExportSpecialistsPathChange: vi.fn(),
+        onExportEnvironmentChange: vi.fn(),
+        onExportResources: vi.fn(),
+        onShowFolderBrowserChange: vi.fn(),
+        onBrowserTargetChange: vi.fn(),
+        onFetchFolders: vi.fn(),
+        // Category Manager Props
+        categories: [
+            { value: 'general', label: 'General', disabled: false },
+            { value: 'backend', label: 'Backend', color: 'red-500', icon: 'Server', path: 'src/backend' }
+        ],
+        pathValidation: {
+            'src/backend': { exists: true, isDirectory: true, isFile: false }
+        },
+        onUpdateCategory: vi.fn(),
+        onRemoveCategory: vi.fn(),
+        onSaveCategory: vi.fn(),
+        onAddPath: vi.fn(),
+        onRemovePath: vi.fn(),
+        onUpdateCategoryIcon: vi.fn(),
+        onUpdateCategoryColor: vi.fn(),
+        // Type Manager Props
+        types: [
+            { value: 'feature', label: 'Feature' },
+            { value: 'bug', label: 'Bug' }
+        ],
+        onSaveType: vi.fn(),
+        onRemoveType: vi.fn(),
+        // Taxonomy Props
+        taxonomies: [],
+        onUpdateTaxonomies: vi.fn(),
+        priorities: [
+            { value: 1, label: 'Low', color: 'teal-500', icon: 'ArrowDown' },
+            { value: 2, label: 'Medium', color: 'blue-500', icon: 'Minus' },
+            { value: 3, label: 'High', color: 'amber-500', icon: 'ArrowUp' },
+            { value: 4, label: 'Critical', color: 'red-500', icon: 'AlertTriangle' },
+        ],
+        onUpdatePriorities: vi.fn(),
+        approaches: [
+            { value: 'evaluate', label: 'Evaluate', color: 'amber-500', icon: 'Search' },
+            { value: 'collaborate', label: 'Collaborate', color: 'blue-500', icon: 'Users' },
+            { value: 'plan', label: 'Plan', color: 'teal-500', icon: 'FileText' },
+        ],
+        onUpdateApproaches: vi.fn(),
+    };
+    const defaultProps = {
+        settingsModel: defaultSettingsModel,
+        onSectionChange: vi.fn()
+    };
+    const renderComponent = (overrides = {}) => {
+        const { settingsModel: settingsModelOverrides = {}, ...rest } = overrides;
+        const mergedSettingsModel = {
+            ...defaultSettingsModel,
+            ...settingsModelOverrides
+        };
+        if (Object.prototype.hasOwnProperty.call(overrides, 'initialSection')) {
+            mergedSettingsModel.initialSection = overrides.initialSection;
+        }
+        const props = {
+            ...defaultProps,
+            ...rest,
+            settingsModel: mergedSettingsModel
+        };
+        return render(_jsx(TaskSettings, { ...props }));
+    };
+    it('4.1 Open settings - Renders correctly', () => {
+        renderComponent();
+        expect(screen.getByText('Project Settings')).toBeInTheDocument();
+        expect(screen.getByText('Taxonomies')).toBeInTheDocument();
+    });
+    it('4.2 Version shown', () => {
+        renderComponent();
+        expect(screen.getByText(/v\d+\.\d+\.\d+/)).toBeInTheDocument();
+    });
+    it('4.3 Theme toggle', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+        const lightBtn = screen.getByRole('button', { name: /^light$/i });
+        await user.click(lightBtn);
+        expect(defaultSettingsModel.onThemeChange).toHaveBeenCalledWith('light');
+        expect(defaultSettingsModel.onSaveTheme).toHaveBeenCalledWith('light');
+    });
+    it('4.4 Theme persists', async () => {
+        const user = userEvent.setup();
+        // This tests that the callback is invoked, persistence is handled by parent
+        renderComponent();
+        const midnightBtn = screen.getByRole('button', { name: /^midnight$/i });
+        await user.click(midnightBtn);
+        expect(defaultSettingsModel.onThemeChange).toHaveBeenCalledWith('midnight');
+        expect(defaultSettingsModel.onSaveTheme).toHaveBeenCalledWith('midnight');
+    });
+    it('4.4b JSON backup toggle updates setting', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+        const backupToggle = screen.getByRole('checkbox', { name: /enable automatic json backup/i });
+        await user.click(backupToggle);
+        expect(defaultSettingsModel.onJsonBackupEnabledChange).toHaveBeenCalledWith(true);
+    });
+    // 4.5 Open category manager - It's always visible in the new design
+    it('4.5 Categories section is visible', () => {
+        renderComponent({ initialSection: 'categories' });
+        expect(screen.getAllByText('Categories')[0]).toBeInTheDocument();
+    });
+    it('4.6 Add category', async () => {
+        const user = userEvent.setup();
+        renderComponent({ initialSection: 'categories' });
+        // Click create button
+        const createBtn = screen.getByTitle('Create new category');
+        await user.click(createBtn);
+        // Type name
+        const input = screen.getByPlaceholderText('e.g. Backend, Frontend, API...');
+        await user.type(input, 'Frontend');
+        // Click Create
+        const submitBtn = screen.getByRole('button', { name: 'Create' });
+        await user.click(submitBtn);
+        expect(defaultSettingsModel.onSaveCategory).toHaveBeenCalledWith('Frontend');
+    });
+    it('4.7 Rename category', async () => {
+        const user = userEvent.setup();
+        renderComponent({ initialSection: 'categories' });
+        // Select a category (using custom dropdown)
+        const dropdown = screen.getByText('Select a category to configure...').closest('button');
+        await user.click(dropdown);
+        const option = screen.getByText('Backend');
+        await user.click(option);
+        // Find label input - getByDisplayValue finds both option and input, so we filter
+        const elements = screen.getAllByDisplayValue('Backend');
+        const labelInput = elements.find(el => el.tagName === 'INPUT');
+        if (!labelInput)
+            throw new Error('Could not find input with value "Backend"');
+        await user.clear(labelInput);
+        await user.type(labelInput, 'Backend API');
+        await user.tab(); // Trigger blur
+        expect(defaultSettingsModel.onUpdateCategory).toHaveBeenCalledWith(expect.objectContaining({ label: 'Backend API' }), 'Backend');
+    });
+    it('4.8 Delete category', async () => {
+        // Mock window.confirm
+        vi.spyOn(window, 'confirm').mockImplementation(() => true);
+        const user = userEvent.setup();
+        renderComponent({ initialSection: 'categories' });
+        // Select category
+        const dropdown = screen.getByText('Select a category to configure...').closest('button');
+        await user.click(dropdown);
+        const option = screen.getByText('Backend');
+        await user.click(option);
+        // Click delete
+        const deleteBtn = screen.getByTitle('Delete Category');
+        await user.click(deleteBtn);
+        expect(defaultSettingsModel.onRemoveCategory).toHaveBeenCalledWith('backend');
+    });
+    it('4.9 Category icon', async () => {
+        const user = userEvent.setup();
+        renderComponent({ initialSection: 'categories' });
+        // Select category
+        const dropdown = screen.getByText('Select a category to configure...').closest('button');
+        await user.click(dropdown);
+        const option = screen.getByText('Backend');
+        await user.click(option);
+        // Click an icon (assuming some icons are rendered)
+        // We'll just look for one of the icon buttons
+        const iconBtn = screen.getByTitle('Bug'); // Assuming Bug is in AVAILABLE_ICONS
+        await user.click(iconBtn);
+        expect(defaultSettingsModel.onUpdateCategoryIcon).toHaveBeenCalledWith('backend', 'Bug');
+    });
+    it('4.10 Category color', async () => {
+        const user = userEvent.setup();
+        renderComponent({ initialSection: 'categories' });
+        // Select category
+        const dropdown = screen.getByText('Select a category to configure...').closest('button');
+        await user.click(dropdown);
+        const option = screen.getByText('Backend');
+        await user.click(option);
+        // Click a color swatch
+        const colorBtn = screen.getByTitle('green-500'); // Use color token
+        await user.click(colorBtn);
+        expect(defaultSettingsModel.onUpdateCategoryColor).toHaveBeenCalledWith('backend', 'green-500');
+    });
+    it('4.11 Context paths', async () => {
+        const user = userEvent.setup();
+        renderComponent({ initialSection: 'categories' });
+        // Select category
+        const dropdown = screen.getByText('Select a category to configure...').closest('button');
+        await user.click(dropdown);
+        const option = screen.getByText('Backend');
+        await user.click(option);
+        // Add path
+        const input = screen.getByPlaceholderText('Add path (e.g. frontend/src/...)');
+        await user.type(input, 'src/api');
+        const addBtn = screen.getByTitle('Add path');
+        await user.click(addBtn);
+        expect(defaultSettingsModel.onAddPath).toHaveBeenCalledWith('backend', 'src/api');
+    });
+    // 4.12 Open type manager - Always visible
+    it('4.12 Task Types section is visible', () => {
+        renderComponent({ initialSection: 'types' });
+        expect(screen.getAllByText('Task Types')[0]).toBeInTheDocument();
+    });
+    it('4.13 Add type', async () => {
+        const user = userEvent.setup();
+        renderComponent({ initialSection: 'types' });
+        // Find type section create button (it's the second "Create new..." button effectively, but inside TypeManager)
+        // Best to scope by container or find by unique attributes
+        const typeDropdown = screen.getByText('Select a type to configure...').closest('button');
+        await user.click(typeDropdown);
+        // Click create button next to types select
+        // We can find it by looking for the button with title "Create new type"
+        const createTypeBtn = screen.getByTitle('Create new type');
+        await user.click(createTypeBtn);
+        const input = screen.getByPlaceholderText('e.g. Bug, Feature, Chore...');
+        await user.type(input, 'Refactor');
+        const createBtn = screen.getByRole('button', { name: 'Create' });
+        await user.click(createBtn);
+        expect(defaultSettingsModel.onSaveType).toHaveBeenCalledWith('Refactor');
+    });
+    it('4.14 Delete type', async () => {
+        vi.spyOn(window, 'confirm').mockImplementation(() => true);
+        const user = userEvent.setup();
+        renderComponent({ initialSection: 'types' });
+        const dropdown = screen.getByText('Select a type to configure...').closest('button');
+        await user.click(dropdown);
+        const option = screen.getByText('Feature');
+        await user.click(option);
+        const deleteBtn = screen.getByTitle('Delete Type');
+        await user.click(deleteBtn);
+        expect(defaultSettingsModel.onRemoveType).toHaveBeenCalledWith('feature');
+    });
+    it('4.15 Export workflows', async () => {
+        const user = userEvent.setup();
+        renderComponent({ initialSection: 'commands' });
+        expect(screen.getByText('Commands')).toBeInTheDocument();
+    });
+    it('4.16 Export specialists', async () => {
+        const user = userEvent.setup();
+        renderComponent({ initialSection: 'agents' });
+        expect(screen.getByText('Agents')).toBeInTheDocument();
+    });
+    it('4.17 initialSection navigates to detail view', () => {
+        renderComponent({ initialSection: 'categories' });
+        // In detail view, Categories is shown in detailTitle
+        expect(screen.getByText('Categories')).toBeInTheDocument();
+        expect(screen.queryByText('System Taxonomies')).not.toBeInTheDocument();
+    });
+    it('4.18 documents tab opens and notifies section change', async () => {
+        const user = userEvent.setup();
+        const onSectionChange = vi.fn();
+        renderComponent({ onSectionChange });
+        await user.click(screen.getByRole('button', { name: /Documents/i }));
+        expect(onSectionChange).toHaveBeenCalledWith('documents');
+    });
+    it('4.19 document admin controls are not rendered in general tab', () => {
+        renderComponent();
+        expect(screen.queryByText('Document Storage (Admin)')).not.toBeInTheDocument();
+    });
+    it('4.20 Documents tab routes cloud system settings to app admin for authenticated users', async () => {
+        const fetchMock = vi.fn(async () => ({
+            ok: true,
+            json: async () => ({ objectStorage: { provider: 'r2' } })
+        }));
+        vi.stubGlobal('fetch', fetchMock);
+        const user = userEvent.setup();
+        renderComponent({ settingsModel: { isAuthenticated: true } });
+        await user.click(screen.getByRole('button', { name: /Documents/i }));
+        expect(await screen.findByDisplayValue('Cloud (R2)')).toBeInTheDocument();
+        expect(screen.getByText('Cloud Document Storage')).toBeInTheDocument();
+        expect(screen.getByText('System-level cloud storage and integrity controls are managed in App Admin.')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Open App Admin' })).toBeInTheDocument();
+        vi.unstubAllGlobals();
+    });
+    it('4.21 Documents tab hides cloud controls when user is not signed in', async () => {
+        const user = userEvent.setup();
+        renderComponent({ settingsModel: { isAuthenticated: false } });
+        await user.click(screen.getByRole('button', { name: /Documents/i }));
+        expect(screen.getByText('Sign in to access cloud document storage controls in App Admin.')).toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Open App Admin' })).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,19 @@
+import type { CategoryConfig } from '../../../types';
+interface CategoryManagerProps {
+    categories: CategoryConfig[];
+    pathValidation: Record<string, {
+        exists: boolean;
+        isDirectory: boolean;
+        isFile: boolean;
+    }>;
+    onUpdateCategory: (category: CategoryConfig, oldLabel?: string) => void;
+    onRemoveCategory: (value: string) => void;
+    onSaveCategory: (newCategory: string) => void;
+    onAddPath: (catValue: string, path: string) => void;
+    onRemovePath: (catValue: string, path: string) => void;
+    onUpdateCategoryIcon: (catValue: string, iconName: string) => void;
+    onUpdateCategoryColor: (catValue: string, color: string) => void;
+    onBrowseFolders: (catValue: string) => void;
+}
+export declare function CategoryManager(props: CategoryManagerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Plus, X, FolderOpen, AlertTriangle, Loader2, FileText, Folder, Trash2 } from 'lucide-react';
+import styles from '../../../Taskforce.module.css';
+import { IconMap, AVAILABLE_ICONS, PALETTE_ORDER, resolveColor } from '../../../utils/constants';
+import { TaxonomyDropdown } from '../../ui/TaxonomyDropdown';
+export function CategoryManager(props) {
+    const { categories, pathValidation, onUpdateCategory, onRemoveCategory, onSaveCategory, onAddPath, onRemovePath, onUpdateCategoryIcon, onUpdateCategoryColor, onBrowseFolders } = props;
+    const [selectedCategoryValue, setSelectedCategoryValue] = useState('');
+    const [isCreating, setIsCreating] = useState(false);
+    const [newCategoryName, setNewCategoryName] = useState('');
+    const [editingLabel, setEditingLabel] = useState('');
+    const [newPathInput, setNewPathInput] = useState('');
+    // Sync editing label when selection changes
+    useEffect(() => {
+        const cat = categories.find(c => c.value === selectedCategoryValue);
+        if (cat) {
+            setEditingLabel(cat.label);
+        }
+    }, [selectedCategoryValue, categories]);
+    const handleSaveNewCategory = () => {
+        if (!newCategoryName.trim())
+            return;
+        onSaveCategory(newCategoryName);
+        // We can't immediately select it because we don't know the generated ID easily without return,
+        // but typically it's name-based.
+        // Ideally we'd select it after creation, but for now we'll just close creation mode
+        // and let user select it (or try to predict ID).
+        const predictedId = newCategoryName.trim().toLowerCase().replace(/\s+/g, '-');
+        setNewCategoryName('');
+        setIsCreating(false);
+        // Attempt to select the new category in next render if it appears?
+        // For simplicity, just reset. User sees it in dropdown.
+        setTimeout(() => setSelectedCategoryValue(predictedId), 100);
+    };
+    const handleRename = (cat) => {
+        if (editingLabel && editingLabel !== cat.label) {
+            onUpdateCategory({ ...cat, label: editingLabel }, cat.label);
+        }
+    };
+    const getCategoryPaths = (cat) => {
+        const paths = [];
+        if (cat.path)
+            paths.push(cat.path);
+        if (cat.paths && cat.paths.length > 0) {
+            for (const p of cat.paths) {
+                if (!paths.includes(p))
+                    paths.push(p);
+            }
+        }
+        return paths;
+    };
+    const selectedCategory = categories.find(c => c.value === selectedCategoryValue);
+    return (_jsxs("div", { className: `${styles.configPanel} ${styles.flex1}`, children: [_jsxs("div", { className: `${styles.headerFlex}`, style: { marginBottom: (selectedCategory && !isCreating) || isCreating ? '20px' : '0' }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx("label", { id: "category-config-label", className: styles.label, style: { display: 'none' }, children: "Select Category" }), _jsx(TaxonomyDropdown, { value: selectedCategoryValue, options: [
+                                    { value: "", label: "Select a category to configure...", icon: "HelpCircle", color: "var(--text-secondary)" },
+                                    ...categories.map(c => ({
+                                        value: c.value,
+                                        label: `${c.label}${c.disabled ? ' (Disabled)' : ''}`,
+                                        icon: c.icon,
+                                        color: c.color
+                                    }))
+                                ], onChange: (value) => {
+                                    setSelectedCategoryValue(String(value));
+                                    setIsCreating(false);
+                                }, disabled: isCreating, ariaLabelledBy: "category-config-label" })] }), !isCreating ? (_jsx("button", { type: "button", className: styles.browseBtn, onClick: () => setIsCreating(true), title: "Create new category", 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 Category Name" }) }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx("input", { type: "text", className: styles.input, placeholder: "e.g. Backend, Frontend, API...", value: newCategoryName, onChange: (e) => setNewCategoryName(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === 'Enter')
+                                        handleSaveNewCategory();
+                                }, autoFocus: true }), _jsx("button", { type: "button", className: styles.saveSettingsBtn, onClick: handleSaveNewCategory, disabled: !newCategoryName.trim(), children: "Create" })] })] })), selectedCategory && !isCreating && (_jsxs("div", { className: styles.flex1, style: { overflowY: 'auto', marginRight: '-8px', paddingRight: '8px' }, children: [_jsx("div", { className: `${styles.configDivider} ${styles.marginBottom20}` }), _jsxs("div", { className: `${styles.configSection} ${styles.marginBottom20}`, children: [_jsxs("div", { className: styles.flexBetween, children: [_jsx("label", { className: `${styles.subLabel} ${styles.subLabelBlock}`, children: "General" }), _jsxs("button", { type: "button", onClick: () => {
+                                            if (confirm(`Delete category "${selectedCategory.label}"?`)) {
+                                                onRemoveCategory(selectedCategory.value);
+                                                setSelectedCategoryValue('');
+                                            }
+                                        }, title: "Delete Category", className: `${styles.destructiveBtn} ${styles.deleteBtnSmall}`, children: [_jsx(Trash2, { size: 14, className: styles.trashIcon }), " Delete"] })] }), _jsxs("div", { className: styles.gridConfig, children: [_jsxs("div", { className: styles.flexColGap4, children: [_jsx("label", { className: `${styles.label} ${styles.inputLabel}`, children: "Label" }), _jsx("input", { className: styles.input, value: editingLabel, onChange: (e) => setEditingLabel(e.target.value), onBlur: () => handleRename(selectedCategory), onKeyDown: (e) => {
+                                                    if (e.key === 'Enter') {
+                                                        handleRename(selectedCategory);
+                                                        e.target.blur();
+                                                    }
+                                                } })] }), _jsxs("div", { className: styles.flexColGap4Center, children: [_jsx("label", { className: `${styles.label} ${styles.inputLabel}`, children: "Visible" }), _jsx("input", { type: "checkbox", checked: !selectedCategory.disabled, onChange: () => onUpdateCategory({ ...selectedCategory, disabled: !selectedCategory.disabled }), className: styles.checkboxInput })] })] })] }), _jsx("div", { className: `${styles.configDivider} ${styles.configDividerMargin}` }), _jsxs("div", { className: `${styles.configSection} ${styles.marginBottom20}`, children: [_jsx("label", { className: styles.subLabel, style: { fontSize: '14px', fontWeight: 600, display: 'block', marginBottom: '8px' }, children: "Context Paths" }), _jsx("p", { className: styles.settingsHint, style: { marginBottom: '12px' }, children: "Files in these paths will be included as context for tasks in this category." }), getCategoryPaths(selectedCategory).length > 0 && (_jsx("div", { className: `${styles.pathList} ${styles.pathListMargin}`, children: getCategoryPaths(selectedCategory).map((p, idx) => {
+                                    const validation = pathValidation[p];
+                                    const isValid = validation?.exists;
+                                    const isFile = validation?.isFile;
+                                    return (_jsxs("div", { className: `${styles.pathChip} ${isValid === false ? styles.pathInvalid : isValid ? styles.pathValid : ''}`, children: [isValid === undefined ? (_jsx(Loader2, { size: 12, className: styles.spinner })) : isValid ? (isFile ? _jsx(FileText, { size: 12, className: styles.pathValidIcon }) : _jsx(FolderOpen, { size: 12, className: styles.pathValidIcon })) : (_jsx(AlertTriangle, { size: 12, className: styles.pathInvalidIcon })), _jsx("span", { className: styles.pathText, title: p, children: p }), _jsx("button", { type: "button", className: styles.removePathBtn, onClick: () => onRemovePath(selectedCategory.value, p), title: "Remove path", children: _jsx(X, { size: 10 }) })] }, idx));
+                                }) })), _jsxs("div", { className: `${styles.pathInputGroup} ${styles.pathInputGroupStretch}`, children: [_jsx("input", { type: "text", className: styles.input, value: newPathInput, onChange: (e) => setNewPathInput(e.target.value), onKeyDown: (e) => {
+                                            if (e.key === 'Enter') {
+                                                e.preventDefault();
+                                                if (newPathInput.trim()) {
+                                                    onAddPath(selectedCategory.value, newPathInput.trim());
+                                                    setNewPathInput('');
+                                                }
+                                            }
+                                        }, placeholder: "Add path (e.g. frontend/src/...)" }), _jsx("button", { type: "button", className: styles.browseBtn, onClick: () => {
+                                            if (newPathInput.trim()) {
+                                                onAddPath(selectedCategory.value, newPathInput.trim());
+                                                setNewPathInput('');
+                                            }
+                                        }, disabled: !newPathInput.trim(), title: "Add path", children: _jsx(Plus, { size: 18 }) }), _jsx("button", { type: "button", className: styles.browseBtn, onClick: () => onBrowseFolders(selectedCategory.value), title: "Browse folders", children: _jsx(FolderOpen, { size: 16 }) })] })] }), _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 = selectedCategory.color === colorToken;
+                                            const IconComp = selectedCategory.icon && IconMap[selectedCategory.icon] ? IconMap[selectedCategory.icon] : Folder;
+                                            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: () => onUpdateCategoryColor(selectedCategory.value, 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} ${selectedCategory.icon === iconName ? styles.iconPickerBtnActive : ''}`, style: selectedCategory.icon === iconName ? {
+                                                    borderColor: resolveColor(selectedCategory.color),
+                                                    color: resolveColor(selectedCategory.color),
+                                                    background: `${resolveColor(selectedCategory.color)}15`
+                                                } : {}, onClick: () => onUpdateCategoryIcon(selectedCategory.value, iconName), title: iconName, children: _jsx(IconComp, { size: 16 }) }, iconName));
+                                        }) })] })] })] })), !selectedCategory && !isCreating && (_jsx("div", { className: styles.emptyStateItalic, style: { border: 'none', background: 'transparent' }, children: "Select a category above to configure settings" }))] }));
+}

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

@@ -0,0 +1,8 @@
+import type { TaxonomyDefinition } from '../../../types';
+interface TaxonomyEditorProps {
+    taxonomy: TaxonomyDefinition;
+    onUpdateTaxonomy: (taxonomy: TaxonomyDefinition) => void;
+    onRemoveTaxonomy?: (id: string) => void;
+}
+export declare function TaxonomyEditor({ taxonomy, onUpdateTaxonomy, onRemoveTaxonomy }: TaxonomyEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import * as Icons from 'lucide-react';
+import { Plus, X, Trash2, Box, Info } from 'lucide-react';
+import styles from '../../../Taskforce.module.css';
+import { IconMap, AVAILABLE_ICONS, PALETTE_ORDER, resolveColor } from '../../../utils/constants';
+import { TaxonomyDropdown } from '../../ui/TaxonomyDropdown';
+export function TaxonomyEditor({ taxonomy, onUpdateTaxonomy, onRemoveTaxonomy }) {
+    const [selectedOptionValue, setSelectedOptionValue] = useState('');
+    const [isCreatingOption, setIsCreatingOption] = useState(false);
+    const [newOptionLabel, setNewOptionLabel] = useState('');
+    const [editingLabel, setEditingLabel] = useState(taxonomy.label);
+    const [editingOption, setEditingOption] = useState(null);
+    // Update internal state when taxonomy changes
+    useEffect(() => {
+        setEditingLabel(taxonomy.label);
+        const opt = taxonomy.options.find(o => String(o.value) === String(selectedOptionValue));
+        setEditingOption(opt || null);
+    }, [taxonomy, selectedOptionValue]);
+    const handleUpdateTaxonomy = (updates) => {
+        onUpdateTaxonomy({ ...taxonomy, ...updates });
+    };
+    const handleAddOption = () => {
+        if (!newOptionLabel.trim())
+            return;
+        const value = newOptionLabel.toLowerCase().trim().replace(/\s+/g, '-');
+        if (taxonomy.options.some(o => o.value === value)) {
+            alert('Option value already exists');
+            return;
+        }
+        const newOption = {
+            value,
+            label: newOptionLabel.trim(),
+            color: PALETTE_ORDER[taxonomy.options.length % PALETTE_ORDER.length]
+        };
+        handleUpdateTaxonomy({
+            options: [...taxonomy.options, newOption]
+        });
+        setNewOptionLabel('');
+        setIsCreatingOption(false);
+        setSelectedOptionValue(value);
+    };
+    const handleUpdateOption = (optionValue, updates) => {
+        handleUpdateTaxonomy({
+            options: taxonomy.options.map(o => String(o.value) === String(optionValue) ? { ...o, ...updates } : o)
+        });
+    };
+    const handleRemoveOption = (optionValue) => {
+        if (confirm('Are you sure you want to remove this option?')) {
+            handleUpdateTaxonomy({
+                options: taxonomy.options.filter(o => String(o.value) !== String(optionValue))
+            });
+            setSelectedOptionValue('');
+        }
+    };
+    return (_jsxs("div", { className: styles.categoryManagerContainer, children: [_jsxs("div", { className: `${styles.categoryConfigPanel} ${styles.configPanel} ${styles.marginBottom24}`, children: [_jsxs("div", { className: `${styles.flexBetween} ${styles.marginBottom16}`, children: [_jsx("div", { className: styles.flex1, children: _jsx("label", { className: `${styles.subLabel} ${styles.subLabelBlock} ${styles.marginBottom8}`, children: "Taxonomy Settings" }) }), !taxonomy.isSystem && onRemoveTaxonomy && (_jsxs("button", { type: "button", className: `${styles.destructiveBtn} ${styles.deleteBtnSmall}`, onClick: () => {
+                                    if (confirm(`Delete taxonomy "${taxonomy.label}"? All associated data will be hidden.`)) {
+                                        onRemoveTaxonomy(taxonomy.id);
+                                    }
+                                }, children: [_jsx(Trash2, { size: 14, className: styles.trashIcon }), " Delete Taxonomy"] }))] }), _jsxs("div", { className: styles.taxonomyGrid, children: [_jsxs("div", { className: styles.settingGroup, style: { margin: 0 }, children: [_jsx("label", { className: `${styles.label} ${styles.inputLabel}`, children: "Display Label" }), _jsx("input", { className: styles.input, value: editingLabel, onChange: (e) => setEditingLabel(e.target.value), onBlur: () => handleUpdateTaxonomy({ label: editingLabel }), disabled: taxonomy.isSystem, placeholder: "e.g. Sprint, Phase..." })] }), _jsxs("div", { className: styles.settingGroup, style: { margin: 0 }, children: [_jsx("label", { className: `${styles.label} ${styles.inputLabel}`, children: "Widget Type" }), _jsxs("select", { className: styles.select, value: taxonomy.widgetType, onChange: (e) => {
+                                            const newType = e.target.value;
+                                            handleUpdateTaxonomy({
+                                                widgetType: newType,
+                                                // Levels are typically single select
+                                                multiSelect: newType === 'level' ? false : taxonomy.multiSelect
+                                            });
+                                        }, children: [_jsx("option", { value: "select", children: "Dropdown (Select Box)" }), _jsx("option", { value: "level", children: "Level Selector (Segmented)" })] })] })] }), _jsxs("div", { className: styles.checkboxRow, children: [_jsxs("label", { className: styles.checkboxLabel, children: [_jsx("input", { type: "checkbox", checked: taxonomy.isRequired, onChange: (e) => handleUpdateTaxonomy({ isRequired: e.target.checked }), className: styles.checkboxSmall }), "Mark as Required"] }), _jsxs("label", { className: `${styles.checkboxLabel} ${taxonomy.widgetType === 'level' ? styles.opacity50 : ''}`, children: [_jsx("input", { type: "checkbox", checked: taxonomy.multiSelect, onChange: (e) => handleUpdateTaxonomy({ multiSelect: e.target.checked }), disabled: taxonomy.widgetType === 'level', className: styles.checkboxSmall }), "Allow Multi-select"] })] })] }), _jsx("div", { className: `${styles.configDivider} ${styles.configDividerMargin24}` }), _jsxs("div", { className: `${styles.configPanel} ${styles.flex1} ${styles.flexCol}`, children: [_jsxs("div", { className: `${styles.headerFlex}`, style: { marginBottom: (editingOption && !isCreatingOption) || isCreatingOption ? '16px' : '0' }, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(TaxonomyDropdown, { value: selectedOptionValue, options: [
+                                        { value: "", label: "Select an option to configure...", icon: "HelpCircle", color: "var(--text-secondary)" },
+                                        ...taxonomy.options.map(o => ({
+                                            value: o.value,
+                                            label: o.label,
+                                            icon: o.icon,
+                                            color: o.color
+                                        }))
+                                    ], onChange: (value) => {
+                                        setSelectedOptionValue(value);
+                                        setIsCreatingOption(false);
+                                    }, disabled: isCreatingOption }) }), !isCreatingOption ? (_jsx("button", { type: "button", className: styles.browseBtn, onClick: () => setIsCreatingOption(true), title: "Add Option", children: _jsx(Plus, { size: 18 }) })) : (_jsx("button", { type: "button", onClick: () => setIsCreatingOption(false), title: "Cancel", className: `${styles.browseBtn} ${styles.cancelBtnRed}`, children: _jsx(X, { size: 18 }) }))] }), isCreatingOption && (_jsx("div", { className: `${styles.configItem} ${styles.marginBottom16}`, children: _jsxs("div", { className: styles.flexGap8, children: [_jsx("input", { type: "text", className: styles.input, placeholder: "New option label...", value: newOptionLabel, onChange: (e) => setNewOptionLabel(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === 'Enter')
+                                            handleAddOption();
+                                    }, autoFocus: true }), _jsx("button", { type: "button", className: styles.saveSettingsBtn, onClick: handleAddOption, disabled: !newOptionLabel.trim(), children: "Add Option" })] }) })), editingOption && !isCreatingOption && (_jsxs("div", { className: styles.flex1, children: [_jsx("div", { className: `${styles.configDivider} ${styles.marginBottom20}` }), _jsx("div", { className: `${styles.flexBetweenCenter} ${styles.marginBottom20}`, children: _jsxs("div", { className: `${styles.flexColGap4} ${styles.flex1}`, children: [_jsx("label", { className: `${styles.label} ${styles.inputLabel}`, children: "Option Label" }), _jsxs("div", { className: styles.gridConfig, children: [_jsx("input", { className: styles.input, value: editingOption.label, onChange: (e) => handleUpdateOption(editingOption.value, { label: e.target.value }), placeholder: "Option Label" }), _jsxs("button", { type: "button", className: `${styles.destructiveBtn} ${styles.deleteBtnMedium}`, onClick: () => handleRemoveOption(editingOption.value), title: "Delete Option", children: [_jsx(Trash2, { size: 14, className: styles.trashIcon }), " Delete"] })] })] }) }), _jsx("div", { className: `${styles.configDivider} ${styles.configDividerMargin}` }), _jsxs("div", { className: styles.configSection, children: [_jsx("label", { className: `${styles.label} ${styles.inputLabelBlock}`, 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 = editingOption.color === colorToken;
+                                                    const IconComp = editingOption.icon && Icons[editingOption.icon] ? Icons[editingOption.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: () => handleUpdateOption(editingOption.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 = Icons[iconName] || IconMap[iconName] || Box;
+                                                    return (_jsx("button", { type: "button", className: `${styles.iconPickerBtn} ${editingOption.icon === iconName ? styles.iconPickerBtnActive : ''}`, style: editingOption.icon === iconName ? {
+                                                            borderColor: resolveColor(editingOption.color),
+                                                            color: resolveColor(editingOption.color),
+                                                            background: `${resolveColor(editingOption.color)}15`
+                                                        } : {}, onClick: () => handleUpdateOption(editingOption.value, { icon: iconName }), title: iconName, children: _jsx(IconComp, { size: 16 }) }, iconName));
+                                                }) })] })] })] })), !editingOption && !isCreatingOption && (_jsxs("div", { className: styles.emptyStateBox, style: { border: 'none', background: 'transparent' }, children: [_jsx(Info, { size: 24, className: styles.emptyStateIcon }), "Select an option above to configure its appearance"] }))] })] }));
+}

package/dist/components/features/settings/TaxonomyManager 2.d.ts

@@ -0,0 +1,52 @@
+import type { TaxonomyDefinition, CategoryConfig } from '../../../types';
+interface TaxonomyManagerProps {
+    taxonomies: TaxonomyDefinition[];
+    onUpdateTaxonomies: (taxonomies: TaxonomyDefinition[]) => void;
+    categories: CategoryConfig[];
+    pathValidation: Record<string, {
+        exists: boolean;
+        isDirectory: boolean;
+        isFile: boolean;
+    }>;
+    onUpdateCategory: (category: CategoryConfig, oldLabel?: string) => void;
+    onRemoveCategory: (value: string) => void;
+    onSaveCategory: (newCategory: string) => void;
+    onAddPath: (catValue: string, path: string) => void;
+    onRemovePath: (catValue: string, path: string) => void;
+    onUpdateCategoryIcon: (catValue: string, iconName: string) => void;
+    onUpdateCategoryColor: (catValue: string, color: string) => void;
+    onBrowseFolders: (catValue: string) => void;
+    types: {
+        value: string;
+        label: string;
+    }[];
+    onSaveType: (label: string) => void;
+    onRemoveType: (value: string) => void;
+    priorities: Array<{
+        value: number;
+        label: string;
+        color?: string;
+        icon?: string;
+    }>;
+    onUpdatePriorities: (priorities: Array<{
+        value: number;
+        label: string;
+        color?: string;
+        icon?: string;
+    }>) => void;
+    approaches: Array<{
+        value: string;
+        label: string;
+        color?: string;
+        icon?: string;
+    }>;
+    onUpdateApproaches: (approaches: Array<{
+        value: string;
+        label: string;
+        color?: string;
+        icon?: string;
+    }>) => void;
+    initialTab?: 'categories' | 'types' | 'priorities' | 'complexities' | 'approaches' | null;
+}
+export declare function TaxonomyManager(props: TaxonomyManagerProps): import("react/jsx-runtime").JSX.Element;
+export {};