@taskforcehq/taskforce 0.3.170 → 0.3.301

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

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+import { getWorkspaceChromeDefinition, getWorkspaceModuleDefinitions, resolveWorkspaceModule } from './workspaceChrome';
+import { AGENTS_WORKSPACE_FEATURE_KEY, ANNOTATED_ATTACHMENTS_WORKSPACE_FEATURE_KEY, DOCUMENT_WORKSPACE_FEATURE_KEY, WORKFLOWS_WORKSPACE_FEATURE_KEY, } from '../../../runtime/appGates';
+describe('workspace chrome definitions', () => {
+    it('uses the full task chrome for task workspaces', () => {
+        const definition = getWorkspaceChromeDefinition('tasks');
+        expect(definition.layoutVariant).toBe('tasks-default');
+        expect(definition.headerSections).toEqual([
+            'search',
+            'sort',
+            'divider-primary',
+            'grouping',
+            'divider-secondary',
+            'task-display-actions',
+        ]);
+        expect(definition.filterBar).toEqual({ kind: 'task-filters' });
+        expect(definition.primaryAction).toBe('add-task');
+    });
+    it('uses minimal chrome for document workspaces', () => {
+        const definition = getWorkspaceChromeDefinition('docs');
+        expect(definition.layoutVariant).toBe('docs-minimal');
+        expect(definition.headerSections).toEqual([]);
+        expect(definition.filterBar).toEqual({ kind: 'document-filters' });
+        expect(definition.primaryAction).toBeNull();
+    });
+    it('supports empty filter bars for promoted modules without filter controls yet', () => {
+        expect(getWorkspaceChromeDefinition('annotate').layoutVariant).toBe('annotated-module');
+        expect(getWorkspaceChromeDefinition('annotate').filterBar).toEqual({ kind: 'empty' });
+        expect(getWorkspaceChromeDefinition('workflows').layoutVariant).toBe('workflows-module');
+        expect(getWorkspaceChromeDefinition('workflows').filterBar).toEqual({ kind: 'empty' });
+        expect(getWorkspaceChromeDefinition('agents').layoutVariant).toBe('agents-module');
+        expect(getWorkspaceChromeDefinition('agents').filterBar).toEqual({ kind: 'empty' });
+    });
+    it('resolves workspace modules from feature access', () => {
+        const modules = getWorkspaceModuleDefinitions({
+            featureAccess: {
+                [DOCUMENT_WORKSPACE_FEATURE_KEY]: { featureKey: DOCUMENT_WORKSPACE_FEATURE_KEY, allowed: true, source: 'app_gate', code: 'OK' },
+                [ANNOTATED_ATTACHMENTS_WORKSPACE_FEATURE_KEY]: { featureKey: ANNOTATED_ATTACHMENTS_WORKSPACE_FEATURE_KEY, allowed: true, source: 'app_gate', code: 'OK' },
+                [WORKFLOWS_WORKSPACE_FEATURE_KEY]: { featureKey: WORKFLOWS_WORKSPACE_FEATURE_KEY, allowed: false, source: 'app_gate', code: 'APP_GATE_DISABLED' },
+                [AGENTS_WORKSPACE_FEATURE_KEY]: { featureKey: AGENTS_WORKSPACE_FEATURE_KEY, allowed: true, source: 'app_gate', code: 'OK' },
+            },
+        });
+        expect(modules.find((module) => module.id === 'docs')?.enabled).toBe(true);
+        expect(modules.find((module) => module.id === 'annotate')?.enabled).toBe(true);
+        expect(modules.find((module) => module.id === 'annotate')?.label).toBe('Image Notes');
+        expect(modules.find((module) => module.id === 'workflows')?.enabled).toBe(false);
+        expect(modules.find((module) => module.id === 'agents')?.enabled).toBe(true);
+        expect(resolveWorkspaceModule('workflows', modules)).toBe('tasks');
+        expect(resolveWorkspaceModule('annotate', modules)).toBe('annotate');
+        expect(resolveWorkspaceModule('agents', modules)).toBe('agents');
+    });
+});

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

@@ -0,0 +1,10 @@
+import { type DocumentAttachmentFilter, type DocumentTypeFilter } from '../../features/documentWorkspaceFilters';
+type DocumentFilterToolbarProps = {
+    typeFilters: DocumentTypeFilter[];
+    setTypeFilters: (values: DocumentTypeFilter[]) => void;
+    attachmentFilters: DocumentAttachmentFilter[];
+    setAttachmentFilters: (values: DocumentAttachmentFilter[]) => void;
+    clearFilters: () => void;
+};
+export declare function DocumentFilterToolbar({ typeFilters, setTypeFilters, attachmentFilters, setAttachmentFilters, clearFilters, }: DocumentFilterToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WorkspaceFilterBar } from '../chrome/WorkspaceChromeSections';
+import { DOCUMENT_ATTACHMENT_FILTER_OPTIONS, DOCUMENT_TYPE_FILTER_OPTIONS, } from '../../features/documentWorkspaceFilters';
+import { FilterToolbarClearAction, FilterToolbarLabel, FilterToolbarMultiSelect, } from './FilterToolbarControls';
+export function DocumentFilterToolbar({ typeFilters, setTypeFilters, attachmentFilters, setAttachmentFilters, clearFilters, }) {
+    return (_jsxs(WorkspaceFilterBar, { children: [_jsx(FilterToolbarLabel, {}), _jsx(FilterToolbarMultiSelect, { label: "Attachment", options: DOCUMENT_ATTACHMENT_FILTER_OPTIONS, selected: attachmentFilters, onChange: (values) => setAttachmentFilters(values), variant: "value" }), _jsx(FilterToolbarMultiSelect, { label: "Type", options: DOCUMENT_TYPE_FILTER_OPTIONS, selected: typeFilters, onChange: (values) => setTypeFilters(values), variant: "value" }), _jsx("div", { style: { flex: 1 } }), _jsx(FilterToolbarClearAction, { onClick: clearFilters })] }));
+}

package/dist/components/views/panels/DocumentFilterToolbar.test.js

@@ -0,0 +1,19 @@
+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 { DocumentFilterToolbar } from './DocumentFilterToolbar';
+describe('DocumentFilterToolbar', () => {
+    it('renders shared dropdown filters for documents', async () => {
+        const user = userEvent.setup();
+        const setTypeFilters = vi.fn();
+        const setAttachmentFilters = vi.fn();
+        render(_jsx(DocumentFilterToolbar, { typeFilters: ['implementation-plan', 'review', 'walkthrough', 'planning', 'other'], setTypeFilters: setTypeFilters, attachmentFilters: ['attached', 'unattached'], setAttachmentFilters: setAttachmentFilters, clearFilters: () => { } }));
+        await user.click(screen.getByRole('button', { name: /All Attachments/i }));
+        await user.click(screen.getByText('Attached'));
+        await user.click(screen.getByRole('button', { name: /All Types/i }));
+        await user.click(screen.getByText('Plans'));
+        expect(setAttachmentFilters).toHaveBeenCalledWith(['unattached']);
+        expect(setTypeFilters).toHaveBeenCalledWith(['review', 'walkthrough', 'planning', 'other']);
+    });
+});

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

@@ -0,0 +1,68 @@
+/**
+ * FilterToolbar — the collapsible filter bar rendered below the AppShellHeader.
+ *
+ * Renders multi-select filters for category, type, priority, status, assignee,
+ * optional initiative/workstream scaffold filters, a task-scope toggle, and a clear-all button.
+ *
+ * Key props:
+ * - activeCategories / activeTypes / priorities — available option sets
+ * - filter* / setFilter* — current filter values and their setters
+ * - taskScope / setTaskScope — mutually exclusive open/archive/deleted scope
+ * - onDeleteAllDeleted — contextual permanent delete-all action
+ * - clearFilters — resets all filters to defaults
+ */
+import type { TaskAssignee } from '../../../types';
+import type { TaskAssigneeOption } from '../../../utils/assignees';
+export interface FilterToolbarProps {
+    categoryFilterOptions: Array<{
+        value: string;
+        label: string;
+    }>;
+    typeFilterOptions: Array<{
+        value: string;
+        label: string;
+    }>;
+    priorities: Array<{
+        value: number | string;
+        label: string;
+    }>;
+    taxonomyDisplayLabels?: {
+        category?: string;
+        type?: string;
+        priority?: string;
+    };
+    filterCategories: string[];
+    setFilterCategories: (vals: string[]) => void;
+    filterTypes: string[];
+    setFilterTypes: (vals: string[]) => void;
+    filterPriorities: Array<number | string>;
+    setFilterPriorities: (vals: Array<number | string>) => void;
+    filterStatus: (string | number)[];
+    setFilterStatus: (vals: (string | number)[]) => void;
+    filterAssignees: TaskAssignee[];
+    setFilterAssignees: (vals: TaskAssignee[]) => void;
+    assigneeOptions: TaskAssigneeOption[];
+    initiativeFilterOptions?: Array<{
+        value: string;
+        label: string;
+        selectedLabel?: string;
+    }>;
+    selectedInitiativeId?: string;
+    setSelectedInitiativeId?: (value: string) => void;
+    workstreamFilterOptions?: Array<{
+        value: string;
+        label: string;
+        selectedLabel?: string;
+    }>;
+    selectedWorkstreamId?: string;
+    setSelectedWorkstreamId?: (value: string) => void;
+    taskScope: 'open' | 'archived' | 'deleted';
+    setTaskScope: (scope: 'open' | 'archived' | 'deleted') => void;
+    showArchive: boolean;
+    setShowArchive: (val: boolean) => void;
+    fetchArchive: () => void;
+    onDeleteAllDeleted?: () => void;
+    clearFilters: () => void;
+}
+export declare function TaskFilterToolbarContent({ categoryFilterOptions, typeFilterOptions, priorities, taxonomyDisplayLabels, filterCategories, setFilterCategories, filterTypes, setFilterTypes, filterPriorities, setFilterPriorities, filterStatus, setFilterStatus, filterAssignees, setFilterAssignees, assigneeOptions, initiativeFilterOptions, selectedInitiativeId, setSelectedInitiativeId, workstreamFilterOptions, selectedWorkstreamId, setSelectedWorkstreamId, taskScope, setTaskScope, showArchive, setShowArchive, fetchArchive, onDeleteAllDeleted, clearFilters, }: FilterToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterToolbar(props: FilterToolbarProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,45 @@
+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 { FilterToolbar } from './FilterToolbar';
+describe('FilterToolbar', () => {
+    it('surfaces legacy category and retired type options when provided', async () => {
+        const user = userEvent.setup();
+        render(_jsx(FilterToolbar, { categoryFilterOptions: [
+                { value: 'default', label: 'General' },
+                { value: 'legacy-cat', label: 'Legacy Category (Legacy)' },
+            ], typeFilterOptions: [
+                { value: 'task', label: 'Task' },
+                { value: 'legacy-type', label: 'Legacy Type (Retired)' },
+            ], priorities: [
+                { value: 1, label: 'Low' },
+                { value: 2, label: 'Medium' },
+                { value: 3, label: 'High' },
+            ], filterCategories: ['default', 'legacy-cat'], setFilterCategories: vi.fn(), filterTypes: ['task', 'legacy-type'], setFilterTypes: vi.fn(), filterPriorities: [1, 2, 3], setFilterPriorities: vi.fn(), filterStatus: ['task', 'in-progress', 'review', 'done', 'cancelled', 'on-hold'], setFilterStatus: vi.fn(), filterAssignees: [], setFilterAssignees: vi.fn(), assigneeOptions: [], taskScope: "open", setTaskScope: vi.fn(), showArchive: false, setShowArchive: vi.fn(), fetchArchive: vi.fn(), clearFilters: vi.fn() }));
+        await user.click(screen.getByRole('button', { name: /All Categories/i }));
+        expect(screen.getByText('Legacy Category (Legacy)')).toBeInTheDocument();
+        await user.click(document.body);
+        await user.click(screen.getByRole('button', { name: /All Types/i }));
+        expect(screen.getByText('Legacy Type (Retired)')).toBeInTheDocument();
+    });
+    it('keeps initiative and workstream filters visible and uses single-select callbacks', async () => {
+        const user = userEvent.setup();
+        const setSelectedInitiativeId = vi.fn();
+        const setSelectedWorkstreamId = vi.fn();
+        const { rerender } = render(_jsx(FilterToolbar, { categoryFilterOptions: [], typeFilterOptions: [], priorities: [], filterCategories: [], setFilterCategories: vi.fn(), filterTypes: [], setFilterTypes: vi.fn(), filterPriorities: [], setFilterPriorities: vi.fn(), filterStatus: [], setFilterStatus: vi.fn(), filterAssignees: [], setFilterAssignees: vi.fn(), assigneeOptions: [], initiativeFilterOptions: [], selectedInitiativeId: "", setSelectedInitiativeId: setSelectedInitiativeId, workstreamFilterOptions: [], selectedWorkstreamId: "", setSelectedWorkstreamId: setSelectedWorkstreamId, taskScope: "open", setTaskScope: vi.fn(), showArchive: false, setShowArchive: vi.fn(), fetchArchive: vi.fn(), clearFilters: vi.fn() }));
+        expect(screen.getByRole('button', { name: /All Initiatives/i })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /All Workstreams/i })).toBeInTheDocument();
+        rerender(_jsx(FilterToolbar, { categoryFilterOptions: [], typeFilterOptions: [], priorities: [], filterCategories: [], setFilterCategories: vi.fn(), filterTypes: [], setFilterTypes: vi.fn(), filterPriorities: [], setFilterPriorities: vi.fn(), filterStatus: [], setFilterStatus: vi.fn(), filterAssignees: [], setFilterAssignees: vi.fn(), assigneeOptions: [], initiativeFilterOptions: [
+                { value: 'initiative-1', label: 'Stability Sprint' },
+            ], selectedInitiativeId: "", setSelectedInitiativeId: setSelectedInitiativeId, workstreamFilterOptions: [
+                { value: 'workstream-1', label: 'Header polish' },
+            ], selectedWorkstreamId: "", setSelectedWorkstreamId: setSelectedWorkstreamId, taskScope: "open", setTaskScope: vi.fn(), showArchive: false, setShowArchive: vi.fn(), fetchArchive: vi.fn(), clearFilters: vi.fn() }));
+        await user.click(screen.getByRole('button', { name: /All Initiatives/i }));
+        await user.click(screen.getByRole('button', { name: 'Stability Sprint' }));
+        expect(setSelectedInitiativeId).toHaveBeenCalledWith('initiative-1');
+        await user.click(screen.getByRole('button', { name: /All Workstreams/i }));
+        await user.click(screen.getByRole('button', { name: 'Header polish' }));
+        expect(setSelectedWorkstreamId).toHaveBeenCalledWith('workstream-1');
+    });
+});

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

@@ -0,0 +1,47 @@
+import React from 'react';
+type TaskScope = 'open' | 'archived' | 'deleted';
+type FilterToolbarMultiSelectProps = {
+    label: string;
+    options: {
+        value: string | number;
+        label: string;
+    }[];
+    selected: (string | number)[];
+    onChange: (values: (string | number)[]) => void;
+    variant?: 'label' | 'value';
+};
+type FilterToolbarClearActionProps = {
+    onClick: () => void;
+};
+type FilterToolbarSingleSelectProps = {
+    label: string;
+    options: {
+        value: string;
+        label: string;
+        selectedLabel?: string;
+    }[];
+    selected: string;
+    onChange: (value: string) => void;
+    allLabel: string;
+    title?: string;
+};
+type TaskScopeToggleProps = {
+    scope: TaskScope;
+    onScopeChange: (scope: TaskScope) => void;
+    className?: string;
+    labelClassName?: string;
+};
+type DeleteAllDeletedActionProps = {
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string;
+    title?: string;
+    children?: React.ReactNode;
+};
+export declare function FilterToolbarLabel(): import("react/jsx-runtime").JSX.Element;
+export declare function FilterToolbarMultiSelect({ label, options, selected, onChange, variant, }: FilterToolbarMultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterToolbarClearAction({ onClick }: FilterToolbarClearActionProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterToolbarSingleSelect({ label, options, selected, onChange, allLabel, title, }: FilterToolbarSingleSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaskScopeToggle({ scope, onScopeChange, className, labelClassName, }: TaskScopeToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function DeleteAllDeletedAction({ onClick, disabled, className, title, children, }: DeleteAllDeletedActionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Check, ChevronDown, Trash2, X } from 'lucide-react';
+import { MultiSelectFilter } from '../../ui/MultiSelectFilter';
+import { t } from '../../../localization';
+import styles from '../../../Taskforce.module.css';
+const FILTER_TOOLBAR_CONTROL_WIDTH = '168px';
+export function FilterToolbarLabel() {
+    return (_jsx("span", { style: { fontSize: '12px', fontWeight: 600, color: 'var(--text-secondary)', marginRight: '4px' }, children: t('standalone.filtersCaps') }));
+}
+export function FilterToolbarMultiSelect({ label, options, selected, onChange, variant = 'label', }) {
+    return (_jsx(MultiSelectFilter, { label: label, options: options, selected: selected, onChange: onChange, variant: variant, containerStyle: { flex: `0 0 ${FILTER_TOOLBAR_CONTROL_WIDTH}`, maxWidth: FILTER_TOOLBAR_CONTROL_WIDTH } }));
+}
+export function FilterToolbarClearAction({ onClick }) {
+    return (_jsxs("button", { onClick: onClick, style: {
+            background: 'none',
+            border: 'none',
+            color: 'var(--text-secondary)',
+            cursor: 'pointer',
+            fontSize: '12px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+        }, children: [_jsx(X, { size: 12 }), " ", t('standalone.clearFilters')] }));
+}
+export function FilterToolbarSingleSelect({ label, options, selected, onChange, allLabel, title, }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const selectedOption = options.find((option) => option.value === selected);
+    const displayText = selectedOption?.selectedLabel || selectedOption?.label || allLabel;
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const handleSelect = (value) => {
+        onChange(value);
+        setIsOpen(false);
+    };
+    return (_jsxs("div", { className: styles.filterContainer, ref: containerRef, style: { flex: `0 0 ${FILTER_TOOLBAR_CONTROL_WIDTH}`, maxWidth: FILTER_TOOLBAR_CONTROL_WIDTH }, children: [_jsxs("button", { type: "button", className: `${styles.filterButton} ${selected ? styles.filterActive : ''}`, onClick: () => setIsOpen((open) => !open), title: title || `Filter by ${label}`, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [_jsx("span", { children: displayText }), _jsx(ChevronDown, { size: 14, style: { transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s', opacity: 0.5 } })] }), isOpen && (_jsxs("div", { className: `${styles.filterDropdown} ${styles.appScrollbar} tf-scrollbar`, role: "listbox", "aria-label": label, children: [_jsxs("button", { type: "button", className: styles.filterOption, onClick: () => handleSelect(''), "aria-selected": !selected, children: [_jsx(Check, { size: 14, style: { opacity: selected ? 0 : 1 } }), _jsx("span", { style: { fontWeight: selected ? 500 : 600 }, children: allLabel })] }), _jsx("div", { className: styles.filterDivider }), options.map((option) => {
+                        const isSelected = option.value === selected;
+                        return (_jsxs("button", { type: "button", className: styles.filterOption, onClick: () => handleSelect(option.value), "aria-selected": isSelected, children: [_jsx(Check, { size: 14, style: { opacity: isSelected ? 1 : 0 } }), _jsx("span", { style: { fontWeight: isSelected ? 600 : 500 }, children: option.label })] }, option.value));
+                    })] }))] }));
+}
+export function TaskScopeToggle({ scope, onScopeChange, className, labelClassName, }) {
+    return (_jsxs("div", { className: className, children: [_jsx("span", { className: labelClassName, children: "Scope" }), _jsx("div", { className: styles.taskScopeTabs, role: "tablist", "aria-label": "Task scope", children: [
+                    { value: 'open', label: 'Open' },
+                    { value: 'archived', label: 'Archived' },
+                    { value: 'deleted', label: 'Deleted' },
+                ].map((option) => {
+                    const active = scope === option.value;
+                    return (_jsx("button", { type: "button", className: `${styles.taskScopeTab} ${active ? styles.taskScopeTabActive : ''}`, onClick: () => onScopeChange(option.value), role: "tab", "aria-selected": active, "aria-pressed": active, title: `Show ${option.label.toLowerCase()} tasks`, children: option.label }, option.value));
+                }) })] }));
+}
+export function DeleteAllDeletedAction({ onClick, disabled = false, className, title = 'Permanently delete all deleted tasks', children = 'Delete All Permanently', }) {
+    return (_jsxs("button", { type: "button", className: className, onClick: onClick, disabled: disabled, title: title, children: [_jsx(Trash2, { size: 14 }), children] }));
+}

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

@@ -0,0 +1,115 @@
+export declare const PLANNING_DRAWER_TREE_WIDTH_PX = 332;
+export declare const PLANNING_DRAWER_DETAIL_WIDTH_PX = 392;
+export declare const PLANNING_DRAWER_COLLAPSED_PANE_WIDTH_PX = 56;
+export declare function getPlanningDrawerWidthPx(treeCollapsed: boolean, hasPrimaryPane: boolean, primaryCollapsed: boolean, hasSecondaryPane: boolean, secondaryCollapsed: boolean): number;
+export type PlanningNodeSummary = {
+    id: string;
+    referenceNumber?: number | null;
+    title: string;
+    description?: string;
+    ownerLabel?: string | null;
+    progressPercent: number;
+    taskCount: number;
+    completedTaskCount: number;
+    workstreamCount?: number;
+    commentCount?: number;
+    attachmentCount?: number;
+    isArchived?: boolean;
+};
+export type PlanningTaskPreview = {
+    id: string;
+    referenceNumber?: number | null;
+    title: string;
+    status?: string | null;
+};
+export type PlanningWorkstreamSummary = PlanningNodeSummary & {
+    initiativeId?: string | null;
+    tasks?: PlanningTaskPreview[];
+};
+export type PlanningInitiativeSummary = PlanningNodeSummary & {
+    workstreams: PlanningWorkstreamSummary[];
+};
+export type PlanningEditorState = {
+    mode: 'create';
+    entityType: 'initiative' | 'workstream';
+} | {
+    mode: 'edit';
+    entityType: 'initiative' | 'workstream';
+    targetId: string;
+};
+type PlanningDrawerDetail = {
+    type: 'initiative';
+    item: PlanningInitiativeSummary;
+} | {
+    type: 'workstream';
+    item: PlanningWorkstreamSummary;
+} | null;
+type PlanningDrawerSecondaryPane = {
+    kind: 'detail';
+    detail: {
+        type: 'workstream';
+        item: PlanningWorkstreamSummary;
+    };
+} | {
+    kind: 'editor';
+    editor: PlanningEditorState;
+} | null;
+type PlanningDrawerProps = {
+    open: boolean;
+    leftOffset?: number;
+    initiatives: PlanningInitiativeSummary[];
+    standaloneWorkstreams: PlanningWorkstreamSummary[];
+    activeInitiativeId: string;
+    activeWorkstreamId: string;
+    expandedInitiativeIds: Set<string>;
+    detail: PlanningDrawerDetail;
+    editor: PlanningEditorState | null;
+    secondaryPane: PlanningDrawerSecondaryPane;
+    assigneeOptions: Array<{
+        value: string;
+        label: string;
+    }>;
+    draftInitiativeSummary: PlanningInitiativeSummary | null;
+    draftTitle: string;
+    draftDescription: string;
+    draftOwner: string;
+    draftInitiativeId: string;
+    onChangeDraftTitle: (value: string) => void;
+    onChangeDraftDescription: (value: string) => void;
+    onChangeDraftOwner: (value: string) => void;
+    onChangeDraftInitiativeId: (value: string) => void;
+    onCollapseTreePane: () => void;
+    onExpandTreePane: () => void;
+    onCollapsePrimaryPane: () => void;
+    onExpandPrimaryPane: () => void;
+    onCollapseSecondaryPane: () => void;
+    onExpandSecondaryPane: () => void;
+    onBackFromSecondary: () => void;
+    treeCollapsed: boolean;
+    primaryCollapsed: boolean;
+    secondaryCollapsed: boolean;
+    onCancelEditor: () => void;
+    onSubmitEditor: () => void;
+    onCreateInitiative: () => void;
+    onCreateWorkstream: () => void;
+    onToggleInitiative: (initiativeId: string) => void;
+    onSelectInitiative: (initiativeId: string) => void;
+    onSelectWorkstream: (workstreamId: string, initiativeId?: string | null) => void;
+    onOpenInitiativeDetails: (initiativeId: string) => void;
+    onOpenWorkstreamDetails: (workstreamId: string) => void;
+    onOpenNestedWorkstreamDetails: (workstreamId: string) => void;
+    onEditInitiative: (initiativeId: string) => void;
+    onEditWorkstream: (workstreamId: string) => void;
+    onArchiveInitiative: (initiativeId: string) => void;
+    onUnarchiveInitiative: (initiativeId: string) => void;
+    onArchiveWorkstream: (workstreamId: string) => void;
+    onUnarchiveWorkstream: (workstreamId: string) => void;
+    onCreateTaskInWorkstream: (workstreamId: string) => void;
+    onCreateWorkstreamInInitiative: (initiativeId: string) => void;
+    onAssignInitiativeToWorkstream: (workstreamId: string, initiativeReferenceOverride?: string | null) => void;
+    onOpenTaskById?: (taskId: string) => void;
+    onAttachTaskToWorkstreamByReference?: (workstreamId: string, taskReference: string) => void;
+    onAttachWorkstreamToInitiativeByReference?: (initiativeId: string, workstreamReference: string) => void;
+};
+export declare function PlanningDrawer({ open, leftOffset, initiatives, standaloneWorkstreams, activeInitiativeId, activeWorkstreamId, expandedInitiativeIds, detail, editor, secondaryPane, assigneeOptions, draftInitiativeSummary, draftTitle, draftDescription, draftOwner, draftInitiativeId, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCollapseTreePane, onExpandTreePane, onCollapsePrimaryPane, onExpandPrimaryPane, onCollapseSecondaryPane, onExpandSecondaryPane, onBackFromSecondary, treeCollapsed, primaryCollapsed, secondaryCollapsed, onCancelEditor, onSubmitEditor, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onEditInitiative, onEditWorkstream, onArchiveInitiative, onUnarchiveInitiative, onArchiveWorkstream, onUnarchiveWorkstream, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onAssignInitiativeToWorkstream, onOpenTaskById, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, }: PlanningDrawerProps): import("react/jsx-runtime").JSX.Element;
+export {};