@taskforcehq/taskforce 0.3.327 → 0.3.329

package/dist/components/task/TaskKanban.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import React, { startTransition, useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { DndContext, DragOverlay, closestCorners, KeyboardSensor, PointerSensor, useSensor, useSensors, pointerWithin, defaultDropAnimationSideEffects, useDroppable } from '@dnd-kit/core';
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -14,7 +14,107 @@ import { AssigneeAvatar } from '../ui/AssigneeIdentity';
 const EXPIRED_CARD_ID_PREFIX = 'expired::';
 const EMPTY_DELETED_RECORD_MAP = new Map();
 const EMPTY_SELECTED_DELETED_IDS = new Set();
-export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, assigneeOptions = [], onUpdateTask, onTaskClick, taskReferences, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks = [], onAddTaskToColumn, emptyColumnMode = 'show', filterCategories = [], filterTypes = [], filterPriorities = [], filterStatus = [], filterAssignees = [], filtersReady = true, scheduleFilteredTaskIds, categories = [], compressed = false, readOnlyMode = null, recentlyChangedTaskIds = [], scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy = 'created', sortOrder = 'desc', planningDropTargets = null, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel = false, workstreams = [], initiatives = [], workspaceId = null, deletedTaskRecordByTaskId = EMPTY_DELETED_RECORD_MAP, selectedDeletedRecordIds = EMPTY_SELECTED_DELETED_IDS, onDeletedSelectionChange, }) {
+const KANBAN_VIRTUALIZATION_TASK_THRESHOLD = 250;
+const KANBAN_VIRTUALIZATION_COLUMN_THRESHOLD = 24;
+const KANBAN_VIRTUAL_CARD_ESTIMATE_PX = 180;
+const KANBAN_VIRTUAL_CARD_GAP_PX = 8;
+const KANBAN_VIRTUAL_OVERSCAN_PX = 600;
+const KANBAN_VIRTUAL_FALLBACK_VIEWPORT_PX = 720;
+function useVirtualKanbanRows({ tasks, enabled, scrollRef, initialScrollTop, onScrollTopChange, }) {
+    const measuredHeightsRef = useRef(new Map());
+    const [measurementVersion, setMeasurementVersion] = useState(0);
+    const [viewport, setViewport] = useState(() => ({
+        scrollTop: initialScrollTop,
+        height: KANBAN_VIRTUAL_FALLBACK_VIEWPORT_PX,
+    }));
+    const measureRow = useCallback((taskId, height) => {
+        if (!Number.isFinite(height) || height <= 0)
+            return;
+        const normalizedHeight = Math.ceil(height);
+        const previousHeight = measuredHeightsRef.current.get(taskId) ?? KANBAN_VIRTUAL_CARD_ESTIMATE_PX;
+        if (previousHeight === normalizedHeight)
+            return;
+        const taskIndex = tasks.findIndex((task) => task.id === taskId);
+        let rowTop = 0;
+        for (let index = 0; index < taskIndex; index += 1) {
+            rowTop += measuredHeightsRef.current.get(tasks[index].id) ?? KANBAN_VIRTUAL_CARD_ESTIMATE_PX;
+            rowTop += KANBAN_VIRTUAL_CARD_GAP_PX;
+        }
+        measuredHeightsRef.current.set(taskId, normalizedHeight);
+        const element = scrollRef.current;
+        const heightDelta = normalizedHeight - previousHeight;
+        const previousRowBottom = rowTop + previousHeight;
+        if (element && taskIndex >= 0 && previousRowBottom <= element.scrollTop && heightDelta !== 0) {
+            const scrollTop = Math.max(0, element.scrollTop + heightDelta);
+            element.scrollTop = scrollTop;
+            setViewport((current) => ({ ...current, scrollTop }));
+            onScrollTopChange(scrollTop);
+        }
+        setMeasurementVersion((version) => version + 1);
+    }, [onScrollTopChange, scrollRef, tasks]);
+    const layout = useMemo(() => {
+        let top = 0;
+        const rows = tasks.map((task, index) => {
+            const row = { task, index, top };
+            const height = measuredHeightsRef.current.get(task.id) ?? KANBAN_VIRTUAL_CARD_ESTIMATE_PX;
+            top += height;
+            if (index < tasks.length - 1)
+                top += KANBAN_VIRTUAL_CARD_GAP_PX;
+            return row;
+        });
+        return { rows, totalHeight: top };
+    }, [measurementVersion, tasks]);
+    useEffect(() => {
+        const element = scrollRef.current;
+        if (!element)
+            return;
+        if (initialScrollTop > 0 && element.scrollTop !== initialScrollTop) {
+            element.scrollTop = initialScrollTop;
+        }
+        const updateViewport = (deferred = false) => {
+            const scrollTop = Math.max(0, element.scrollTop);
+            const height = element.clientHeight || KANBAN_VIRTUAL_FALLBACK_VIEWPORT_PX;
+            const commitViewport = () => setViewport((current) => (current.scrollTop === scrollTop && current.height === height
+                ? current
+                : { scrollTop, height }));
+            if (deferred)
+                startTransition(commitViewport);
+            else
+                commitViewport();
+            onScrollTopChange(scrollTop);
+        };
+        const handleScroll = () => updateViewport(true);
+        const handleLayoutChange = () => updateViewport(false);
+        handleLayoutChange();
+        element.addEventListener('scroll', handleScroll, { passive: true });
+        const resizeObserver = typeof ResizeObserver === 'undefined'
+            ? null
+            : new ResizeObserver(handleLayoutChange);
+        resizeObserver?.observe(element);
+        window.addEventListener('resize', handleLayoutChange);
+        return () => {
+            element.removeEventListener('scroll', handleScroll);
+            resizeObserver?.disconnect();
+            window.removeEventListener('resize', handleLayoutChange);
+        };
+    }, [initialScrollTop, onScrollTopChange, scrollRef]);
+    const visibleRows = useMemo(() => {
+        if (!enabled)
+            return layout.rows;
+        const minimumTop = Math.max(0, viewport.scrollTop - KANBAN_VIRTUAL_OVERSCAN_PX);
+        const maximumBottom = viewport.scrollTop + viewport.height + KANBAN_VIRTUAL_OVERSCAN_PX;
+        return layout.rows.filter((row) => {
+            const height = measuredHeightsRef.current.get(row.task.id) ?? KANBAN_VIRTUAL_CARD_ESTIMATE_PX;
+            return row.top + height >= minimumTop && row.top <= maximumBottom;
+        });
+    }, [enabled, layout.rows, measurementVersion, viewport.height, viewport.scrollTop]);
+    return {
+        measureRow,
+        rows: visibleRows,
+        totalHeight: layout.totalHeight,
+    };
+}
+export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, assigneeOptions = [], onUpdateTask, onTaskClick, taskReferences, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks = [], onAddTaskToColumn, emptyColumnMode = 'show', filterCategories = [], filterTypes = [], filterPriorities = [], filterStatus = [], filterAssignees = [], filtersReady = true, scheduleFilteredTaskIds, categories = [], compressed = false, readOnlyMode = null, recentlyChangedTaskIds = [], scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy = 'created', sortOrder = 'desc', planningDropTargets = null, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel = false, showTaskCardDescription = true, showTaskCardAttachments = true, showTaskCardChecklistProgress = true, showTaskCardLatestActivity = true, tintTaskCardActivityBackground = false, workstreams = [], initiatives = [], workspaceId = null, deletedTaskRecordByTaskId = EMPTY_DELETED_RECORD_MAP, selectedDeletedRecordIds = EMPTY_SELECTED_DELETED_IDS, onDeletedSelectionChange, }) {
     const [activeId, setActiveId] = useState(null);
     const [isHeaderPanning, setIsHeaderPanning] = useState(false);
     const [headerPanEnabled, setHeaderPanEnabled] = useState(false);
@@ -33,6 +133,10 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
     const isTaskCardId = useCallback((id) => taskIdSet.has(getTaskIdFromCardId(id)), [taskIdSet, getTaskIdFromCardId]);
     const scheduleFilteredTaskIdSet = useMemo(() => new Set(scheduleFilteredTaskIds || []), [scheduleFilteredTaskIds]);
     const lastPlanningOverRef = useRef(null);
+    const columnScrollTopRef = useRef(new Map());
+    const rememberColumnScrollTop = useCallback((columnId, scrollTop) => {
+        columnScrollTopRef.current.set(columnId, scrollTop);
+    }, []);
     const resolveActiveDragMeta = useCallback((activeLike) => {
         const current = activeLike?.data?.current || {};
         const activeId = String(activeLike?.id || '');
@@ -317,6 +421,9 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
     }, [tasks, effectiveKanbanColumns, groupBy, columnLookup, scheduleFilteredTaskIdSet, todayDateOnly, sortBy, sortOrder, taxonomies]);
     const activeTaskId = activeId ? getTaskIdFromCardId(activeId) : null;
     const activeTaskOverlay = activeTaskId ? tasks.find(t => t.id === activeTaskId) : null;
+    const virtualizeLargeBoard = tasks.length > KANBAN_VIRTUALIZATION_TASK_THRESHOLD
+        && groupBy !== 'schedule'
+        && !readOnlyMode;
     // Scroll Syncing Refs and Logic
     const containerRef = useRef(null);
     const topScrollRef = useRef(null);
@@ -762,6 +869,11 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
         resolveTaskHierarchy,
         groupBy,
         showStatusLabel: showTaskCardStatusLabel,
+        showDescription: showTaskCardDescription,
+        showAttachments: showTaskCardAttachments,
+        showChecklistProgress: showTaskCardChecklistProgress,
+        showLatestActivity: showTaskCardLatestActivity,
+        tintActivityBackground: tintTaskCardActivityBackground,
         deletedTaskRecordByTaskId,
         selectedDeletedRecordIds,
         onDeletedSelectionChange,
@@ -788,7 +900,12 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
         resolveTaskHierarchy,
         searchQuery,
         selectedDeletedRecordIds,
+        showTaskCardAttachments,
+        showTaskCardChecklistProgress,
+        showTaskCardDescription,
         showTaskCardStatusLabel,
+        showTaskCardLatestActivity,
+        tintTaskCardActivityBackground,
         taskReferences,
         taxonomies,
         types,
@@ -815,13 +932,13 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
                                 return null;
                             return (_jsx(KanbanColumn, { id: String(column.value), title: column.label, color: column.color, icon: column.icon, assigneeOption: groupBy === 'assignee'
                                     ? assigneeOptions.find((option) => String(option.value) === String(column.value))
-                                    : undefined, tasks: columnTasks, activeId: activeId, activeTaskId: activeTaskId, totalCount: columnTotals[String(column.value)], onAddTask: () => onAddTaskToColumn?.(groupBy, column.value), onTaskClick: onTaskClick, commonCardProps: commonCardProps, changedTaskIdSet: changedTaskIdSet, collapseEmpty: emptyColumnMode === 'collapse', compressed: compressed, onHeaderPointerDown: handleHeaderPointerDown, isHeaderPanning: isHeaderPanning, headerPanEnabled: headerPanEnabled, stickyLeft: stickyLeft, stickyZIndex: stickyZIndex, isPast: !!column.isPast, isSelected: !!column.isSelected, isWeekend: !!column.isWeekend, disableSorting: false, scheduleDate: groupBy === 'schedule' ? scheduleContext.dates[String(column.value)] : undefined, onScheduleDaySelected: onScheduleDaySelected }, String(column.value)));
+                                    : undefined, tasks: columnTasks, activeId: activeId, activeTaskId: activeTaskId, totalCount: columnTotals[String(column.value)], onAddTask: () => onAddTaskToColumn?.(groupBy, column.value), onTaskClick: onTaskClick, commonCardProps: commonCardProps, changedTaskIdSet: changedTaskIdSet, collapseEmpty: emptyColumnMode === 'collapse', compressed: compressed, onHeaderPointerDown: handleHeaderPointerDown, isHeaderPanning: isHeaderPanning, headerPanEnabled: headerPanEnabled, stickyLeft: stickyLeft, stickyZIndex: stickyZIndex, isPast: !!column.isPast, isSelected: !!column.isSelected, isWeekend: !!column.isWeekend, disableSorting: false, scheduleDate: groupBy === 'schedule' ? scheduleContext.dates[String(column.value)] : undefined, onScheduleDaySelected: onScheduleDaySelected, virtualize: virtualizeLargeBoard, initialScrollTop: columnScrollTopRef.current.get(String(column.value)) || 0, onScrollTopChange: rememberColumnScrollTop }, String(column.value)));
                         }) })] }), createPortal(_jsx(DragOverlay, { dropAnimation: dropAnimation, children: activeTaskOverlay ? ((() => {
                     const { taskWorkstream, taskInitiative } = resolveTaskHierarchy(activeTaskOverlay);
                     return (_jsx(TaskCard, { task: activeTaskOverlay, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, isOverlay: true, ...commonCardProps, isArchived: activeTaskOverlay.isArchived, categories: categories, compressed: compressed, isRecentlyChanged: changedTaskIdSet.has(activeTaskOverlay.id) }));
                 })()) : null }), document.body)] }));
 }
-const KanbanColumn = React.memo(function KanbanColumn({ id, title, color, icon, assigneeOption, tasks, activeId = null, activeTaskId = null, totalCount, onAddTask, onTaskClick, commonCardProps, changedTaskIdSet, collapseEmpty, compressed, onHeaderPointerDown, isHeaderPanning = false, headerPanEnabled = false, stickyLeft, stickyZIndex, isPast = false, isSelected = false, isWeekend = false, disableSorting = false, scheduleDate, onScheduleDaySelected }) {
+const KanbanColumn = React.memo(function KanbanColumn({ id, title, color, icon, assigneeOption, tasks, activeId = null, activeTaskId = null, totalCount, onAddTask, onTaskClick, commonCardProps, changedTaskIdSet, collapseEmpty, compressed, onHeaderPointerDown, isHeaderPanning = false, headerPanEnabled = false, stickyLeft, stickyZIndex, isPast = false, isSelected = false, isWeekend = false, disableSorting = false, scheduleDate, onScheduleDaySelected, virtualize = false, initialScrollTop = 0, onScrollTopChange, }) {
     const { setNodeRef } = useDroppable({
         id: id,
         data: {
@@ -832,6 +949,19 @@ const KanbanColumn = React.memo(function KanbanColumn({ id, title, color, icon,
     const visibleTasks = activeTaskId ? tasks.filter((t) => t.id !== activeTaskId) : tasks;
     const isSticky = typeof stickyLeft === 'number';
     const scrollRef = useRef(null);
+    const virtualizationEnabled = virtualize
+        && !disableSorting
+        && visibleTasks.length > KANBAN_VIRTUALIZATION_COLUMN_THRESHOLD;
+    const handleScrollTopChange = useCallback((scrollTop) => {
+        onScrollTopChange?.(id, scrollTop);
+    }, [id, onScrollTopChange]);
+    const virtualRows = useVirtualKanbanRows({
+        tasks: visibleTasks,
+        enabled: virtualizationEnabled,
+        scrollRef,
+        initialScrollTop,
+        onScrollTopChange: handleScrollTopChange,
+    });
     const toSortableId = (taskId) => (id === 'expired' ? `${EXPIRED_CARD_ID_PREFIX}${taskId}` : taskId);
     const handleColumnClick = (event) => {
         if (!scheduleDate || !onScheduleDaySelected)
@@ -847,13 +977,29 @@ const KanbanColumn = React.memo(function KanbanColumn({ id, title, color, icon,
                                 const IconComp = icon && IconMap[icon] ? IconMap[icon] : Icons.Folder;
                                 const resolvedColor = resolveColor(color) || 'var(--color-purple)';
                                 return _jsx(IconComp, { size: 16, style: { color: resolvedColor } });
-                            })(), !isCollapsed && _jsx("span", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }, children: [(!isCollapsed || totalCount > 0) && (_jsx("span", { className: styles.kanbanCount, children: isCollapsed ? totalCount : `${tasks.length} / ${totalCount}` })), !commonCardProps.readOnlyMode && (_jsx("button", { className: "tf-control-icon tf-control-icon-compact", onClick: (e) => { e.stopPropagation(); onAddTask(); }, title: `Add task to ${title}`, "aria-label": `Add task to ${title}`, "data-no-header-pan": "true", children: _jsx(Icons.Plus, { size: 14 }) }))] })] }), _jsx("div", { className: styles.kanbanDroppable, children: _jsx("div", { className: `${styles.kanbanDroppableScroll} ${styles.appScrollbar} tf-scrollbar`, ref: scrollRef, children: disableSorting ? (visibleTasks.map((task) => (_jsx("div", { className: styles.kanbanCardWrapper, children: (() => {
+                            })(), !isCollapsed && _jsx("span", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }, children: [(!isCollapsed || totalCount > 0) && (_jsx("span", { className: styles.kanbanCount, children: isCollapsed ? totalCount : `${tasks.length} / ${totalCount}` })), !commonCardProps.readOnlyMode && (_jsx("button", { className: "tf-control-icon tf-control-icon-compact", onClick: (e) => { e.stopPropagation(); onAddTask(); }, title: `Add task to ${title}`, "aria-label": `Add task to ${title}`, "data-no-header-pan": "true", children: _jsx(Icons.Plus, { size: 14 }) }))] })] }), _jsx("div", { className: styles.kanbanDroppable, children: _jsx("div", { className: `${styles.kanbanDroppableScroll} ${virtualizationEnabled ? styles.kanbanDroppableScrollVirtualized : ''} ${styles.appScrollbar} tf-scrollbar`, ref: scrollRef, "data-kanban-column-scroll": id, children: disableSorting ? (visibleTasks.map((task) => (_jsx("div", { className: styles.kanbanCardWrapper, children: (() => {
                             const { taskWorkstream, taskInitiative } = commonCardProps.resolveTaskHierarchy?.(task) || {};
                             const deletedRecord = commonCardProps.deletedTaskRecordByTaskId?.get(task.id);
                             return (_jsx(TaskCard, { task: task, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, onClick: onTaskClick, ...commonCardProps, isArchived: task.isArchived, readOnlyMode: commonCardProps.readOnlyMode || null, compressed: compressed, isRecentlyChanged: false, selectable: Boolean(deletedRecord && commonCardProps.onDeletedSelectionChange), selected: Boolean(deletedRecord && commonCardProps.selectedDeletedRecordIds?.has(deletedRecord.id)), onSelectionChange: deletedRecord
                                     ? (selected) => commonCardProps.onDeletedSelectionChange?.(deletedRecord.id, selected)
                                     : undefined }));
-                        })() }, task.id)))) : (_jsx(SortableContext, { id: id, items: visibleTasks.map((t) => toSortableId(t.id)), strategy: verticalListSortingStrategy, children: visibleTasks.map((task) => (_jsx(SortableTaskCard, { sortableId: toSortableId(task.id), task: task, onClick: onTaskClick, commonCardProps: commonCardProps, compressed: compressed, isRecentlyChanged: changedTaskIdSet.has(task.id) }, toSortableId(task.id)))) })) }) })] }));
+                        })() }, task.id)))) : (_jsx(SortableContext, { id: id, items: visibleTasks.map((t) => toSortableId(t.id)), strategy: verticalListSortingStrategy, children: virtualizationEnabled ? (_jsx("div", { className: styles.kanbanVirtualCanvas, style: { height: `${virtualRows.totalHeight}px` }, children: virtualRows.rows.map((row) => (_jsx(VirtualizedSortableTaskCard, { top: row.top, sortableId: toSortableId(row.task.id), task: row.task, onClick: onTaskClick, commonCardProps: commonCardProps, compressed: compressed, isRecentlyChanged: changedTaskIdSet.has(row.task.id), onMeasure: virtualRows.measureRow }, toSortableId(row.task.id)))) })) : visibleTasks.map((task) => (_jsx(SortableTaskCard, { sortableId: toSortableId(task.id), task: task, onClick: onTaskClick, commonCardProps: commonCardProps, compressed: compressed, isRecentlyChanged: changedTaskIdSet.has(task.id) }, toSortableId(task.id)))) })) }) })] }));
+});
+const VirtualizedSortableTaskCard = React.memo(function VirtualizedSortableTaskCard({ top, onMeasure, ...cardProps }) {
+    const rowRef = useRef(null);
+    useEffect(() => {
+        const element = rowRef.current;
+        if (!element)
+            return;
+        const reportHeight = () => onMeasure(cardProps.task.id, element.getBoundingClientRect().height);
+        reportHeight();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(reportHeight);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [cardProps.task.id, onMeasure]);
+    return (_jsx("div", { ref: rowRef, className: styles.kanbanVirtualRow, style: { top: `${top}px` }, "data-kanban-virtual-index": cardProps.task.id, children: _jsx(SortableTaskCard, { ...cardProps }) }));
 });
 const SortableTaskCard = React.memo(function SortableTaskCard({ sortableId, task, onClick, commonCardProps, compressed, isRecentlyChanged = false }) {
     const dragDisabled = Boolean(commonCardProps?.readOnlyMode);

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

@@ -45,6 +45,11 @@ interface TaskListProps {
     copiedId: string | null;
     recentlyChangedTaskIds?: string[];
     showTaskCardStatusLabel?: boolean;
+    showTaskCardDescription?: boolean;
+    showTaskCardAttachments?: boolean;
+    showTaskCardChecklistProgress?: boolean;
+    showTaskCardLatestActivity?: boolean;
+    tintTaskCardActivityBackground?: boolean;
     deletedTaskRecordByTaskId?: Map<string, DeletedTaskRecord>;
     selectedDeletedRecordIds?: Set<string>;
     onDeletedSelectionChange?: (deletedRecordId: string, selected: boolean) => void;

package/dist/components/task/TaskList.js

@@ -16,7 +16,7 @@ import { AssigneeIdentity } from '../ui/AssigneeIdentity';
 const EMPTY_DELETED_RECORD_MAP = new Map();
 const EMPTY_SELECTED_DELETED_IDS = new Set();
 export const TaskList = forwardRef((props, ref) => {
-    const { tasks, archivedTasks, categories, types, priorities, taxonomyDisplayLabels, assigneeOptions = [], workstreams = [], initiatives = [], workspaceId = null, searchQuery, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees = [], filterTaxonomies, sortBy, sortOrder, showArchive, taskScope, collapsedCategories, loadingTasks, filteredTasks, filteredArchive, groupedTasks, filteredDeletedTasks = [], groupedDeletedTasks = {}, copiedId, recentlyChangedTaskIds = [], showTaskCardStatusLabel = false, deletedTaskRecordByTaskId = EMPTY_DELETED_RECORD_MAP, selectedDeletedRecordIds = EMPTY_SELECTED_DELETED_IDS, onDeletedSelectionChange, trashControls, onSearchChange, onFilterCategoriesChange, onFilterTypesChange, onFilterPrioritiesChange, onFilterStatusChange, onFilterAssigneesChange, onTaxonomyFilterChange, onSortByChange, onSortOrderChange, onShowArchiveChange, onTaskScopeChange, onClearFilters, onToggleCategory, onEditTask, onUpdateTask, taskReferences, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onBulkArchive, onUnarchive, onDelete, onFetchArchive, onAddTaskToCategory, supplementalTasks = [], taxonomies, } = props;
+    const { tasks, archivedTasks, categories, types, priorities, taxonomyDisplayLabels, assigneeOptions = [], workstreams = [], initiatives = [], workspaceId = null, searchQuery, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees = [], filterTaxonomies, sortBy, sortOrder, showArchive, taskScope, collapsedCategories, loadingTasks, filteredTasks, filteredArchive, groupedTasks, filteredDeletedTasks = [], groupedDeletedTasks = {}, copiedId, recentlyChangedTaskIds = [], showTaskCardStatusLabel = false, showTaskCardDescription = true, showTaskCardAttachments = true, showTaskCardChecklistProgress = true, showTaskCardLatestActivity = true, tintTaskCardActivityBackground = false, deletedTaskRecordByTaskId = EMPTY_DELETED_RECORD_MAP, selectedDeletedRecordIds = EMPTY_SELECTED_DELETED_IDS, onDeletedSelectionChange, trashControls, onSearchChange, onFilterCategoriesChange, onFilterTypesChange, onFilterPrioritiesChange, onFilterStatusChange, onFilterAssigneesChange, onTaxonomyFilterChange, onSortByChange, onSortOrderChange, onShowArchiveChange, onTaskScopeChange, onClearFilters, onToggleCategory, onEditTask, onUpdateTask, taskReferences, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onBulkArchive, onUnarchive, onDelete, onFetchArchive, onAddTaskToCategory, supplementalTasks = [], taxonomies, } = props;
     const changedTaskIdSet = React.useMemo(() => new Set(recentlyChangedTaskIds), [recentlyChangedTaskIds]);
     const workstreamById = React.useMemo(() => new Map(workstreams.map((workstream) => [workstream.id, workstream])), [workstreams]);
     const initiativeById = React.useMemo(() => new Map(initiatives.map((initiative) => [initiative.id, initiative])), [initiatives]);
@@ -132,11 +132,11 @@ export const TaskList = forwardRef((props, ref) => {
                                         : undefined;
                                     return (_jsx(TaskCard, { task: task, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, workspaceId: workspaceId, searchQuery: searchQuery, copiedId: copiedId, taxonomies: taxonomies, types: types, priorities: priorities, assigneeOptions: assigneeOptions, workstreams: workstreams, onClick: onEditTask, onAssigneeChange: handleAssigneeChange, onWorkstreamChange: (nextTask, workstreamId) => (onUpdateTask(nextTask.id, { workstreamId })), taskReferences: taskReferences, onCopyId: onCopyId, onToggleInProgress: onToggleInProgress, onToggleReview: onToggleReview, onToggleComplete: onToggleComplete, onToggleCancel: onToggleCancel, onSetStatus: onSetStatus, onArchiveTask: onArchiveTask, onUnarchive: activeReadOnlyMode ? onUnarchive : undefined, onDelete: activeReadOnlyMode ? onDelete : undefined, categories: categories, isRecentlyChanged: changedTaskIdSet.has(task.id), readOnlyMode: activeReadOnlyMode, selectable: Boolean(deletedRecord && onDeletedSelectionChange), selected: Boolean(deletedRecord && selectedDeletedRecordIds.has(deletedRecord.id)), onSelectionChange: deletedRecord
                                             ? (selected) => onDeletedSelectionChange?.(deletedRecord.id, selected)
-                                            : undefined, showStatusLabel: showTaskCardStatusLabel }, task.id));
+                                            : undefined, showStatusLabel: showTaskCardStatusLabel, showDescription: showTaskCardDescription, showAttachments: showTaskCardAttachments, showChecklistProgress: showTaskCardChecklistProgress, showLatestActivity: showTaskCardLatestActivity, tintActivityBackground: tintTaskCardActivityBackground }, task.id));
                                 })())) }))] }, category));
                 }) })), !useScopeToggle && showArchive && filteredArchive.length > 0 && (_jsxs("div", { className: styles.archiveList, children: [_jsx("div", { className: styles.archiveHeader, children: "Archived" }), filteredArchive.map((task) => ((() => {
                         const { taskWorkstream, taskInitiative } = resolveTaskHierarchy(task);
-                        return (_jsx(TaskCard, { task: task, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, workspaceId: workspaceId, searchQuery: searchQuery, copiedId: copiedId, isArchived: true, types: types, assigneeOptions: assigneeOptions, workstreams: workstreams, onClick: onEditTask, onCopyId: onCopyId, onSetStatus: onSetStatus, onUnarchive: onUnarchive, onDelete: onDelete, deleteActionTitle: "Delete Permanently", taskReferences: taskReferences, categories: categories, showStatusLabel: showTaskCardStatusLabel }, task.id));
+                        return (_jsx(TaskCard, { task: task, taskWorkstream: taskWorkstream, taskInitiative: taskInitiative, workspaceId: workspaceId, searchQuery: searchQuery, copiedId: copiedId, isArchived: true, types: types, assigneeOptions: assigneeOptions, workstreams: workstreams, onClick: onEditTask, onCopyId: onCopyId, onSetStatus: onSetStatus, onUnarchive: onUnarchive, onDelete: onDelete, deleteActionTitle: "Delete Permanently", taskReferences: taskReferences, categories: categories, showStatusLabel: showTaskCardStatusLabel, showDescription: showTaskCardDescription, showAttachments: showTaskCardAttachments, showChecklistProgress: showTaskCardChecklistProgress, showLatestActivity: showTaskCardLatestActivity, tintActivityBackground: tintTaskCardActivityBackground }, task.id));
                     })()))] }))] }));
 });
 TaskList.displayName = 'TaskList';

package/dist/components/task/TaskStatusActions.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Archive, RotateCcw } from 'lucide-react';
+import { RotateCcw } from 'lucide-react';
 import styles from '../../Taskforce.module.css';
 import { resolveColor, STATUS_DEFINITIONS } from '../../utils/constants';
 import { TaxonomyDropdown } from '../ui/TaxonomyDropdown';
@@ -23,7 +23,16 @@ export function TaskStatusActions({ task, status, disabled = false, actionDisabl
         '--field-focus-border': statusAccent,
         '--field-focus-ring': `color-mix(in srgb, ${statusAccent} 18%, transparent)`
     };
-    return (_jsxs("div", { className: `${styles.statusActionsGroup} ${compressed ? styles.statusActionsGroupCompact : ''}`, children: [resolvedArchiveActionMode === 'archive' && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.archiveTaskBtn}`, onClick: () => task && !resolvedActionDisabled && onArchiveTask?.(task), disabled: resolvedActionDisabled, title: "Archive Now", "aria-label": "Archive task", children: _jsx(Archive, { size: compressed ? 12 : 16 }) })), resolvedArchiveActionMode === 'unarchive' && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.archiveTaskBtn}`, onClick: () => task && !resolvedActionDisabled && onUnarchiveTask?.(task), disabled: resolvedActionDisabled, title: "Unarchive task", "aria-label": "Unarchive task", children: _jsx(RotateCcw, { size: compressed ? 12 : 16 }) })), _jsx("div", { className: `${styles.statusSelectWrap} ${styles.statusTaxonomyDropdownWrap}`, style: statusAccentStyle, children: _jsx(TaxonomyDropdown, { value: currentStatus, options: statusOptions, disabled: resolvedStatusDisabled || (!task && !onStatusChange), ariaLabel: "Status", optionLabelColor: "var(--text-primary)", hideSelectedLabel: !showLabel, hideChevron: !showLabel, className: `${styles.statusTaxonomyDropdown} ${compressed ? styles.statusTaxonomyDropdownCompact : ''} ${!showLabel ? styles.statusTaxonomyDropdownIconOnly : ''}`, panelClassName: !showLabel ? styles.statusTaxonomyDropdownIconOnlyPanel : '', portalPanel: !showLabel, panelMinWidth: !showLabel ? 144 : undefined, onChange: (value) => {
+    const statusPanelActions = resolvedArchiveActionMode === 'archive' && task
+        ? [{
+                id: 'archive-task',
+                label: 'Archive task',
+                icon: 'Archive',
+                disabled: resolvedActionDisabled || !onArchiveTask,
+                onSelect: () => onArchiveTask?.(task),
+            }]
+        : [];
+    return (_jsxs("div", { className: `${styles.statusActionsGroup} ${compressed ? styles.statusActionsGroupCompact : ''}`, children: [resolvedArchiveActionMode === 'unarchive' && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.restoreTaskBtn}`, onClick: () => task && !resolvedActionDisabled && onUnarchiveTask?.(task), disabled: resolvedActionDisabled, title: "Unarchive task", "aria-label": "Unarchive task", children: _jsx(RotateCcw, { size: compressed ? 12 : 16 }) })), _jsx("div", { className: `${styles.statusSelectWrap} ${styles.statusTaxonomyDropdownWrap}`, style: statusAccentStyle, children: _jsx(TaxonomyDropdown, { value: currentStatus, options: statusOptions, disabled: resolvedStatusDisabled || (!task && !onStatusChange), ariaLabel: "Status", optionLabelColor: "var(--text-primary)", hideSelectedLabel: !showLabel, hideChevron: !showLabel, className: `${styles.statusTaxonomyDropdown} ${compressed ? styles.statusTaxonomyDropdownCompact : ''} ${!showLabel ? styles.statusTaxonomyDropdownIconOnly : ''}`, panelClassName: !showLabel ? styles.statusTaxonomyDropdownIconOnlyPanel : '', portalPanel: !showLabel, panelMinWidth: !showLabel ? 144 : undefined, panelActions: statusPanelActions, onChange: (value) => {
                         const nextStatus = value;
                         if (task) {
                             onSetStatus?.(task, nextStatus);

package/dist/components/task/TaskWorkstreamPicker.js

@@ -4,6 +4,7 @@ import { Link2 } from 'lucide-react';
 import { getWorkstreamReferenceLabel } from '../../utils/planningReferences';
 import { TaxonomyDropdown } from '../ui/TaxonomyDropdown';
 import styles from '../../Taskforce.module.css';
+import { PlanningVisualIdentity } from '../features/planning/PlanningVisualIdentity';
 export function TaskWorkstreamPicker({ workstreams, onSelect, disabled = false, }) {
     const availableWorkstreams = React.useMemo(() => workstreams.filter((workstream) => !workstream.isArchived), [workstreams]);
     const workstreamById = React.useMemo(() => new Map(availableWorkstreams.map((workstream) => [workstream.id, workstream])), [availableWorkstreams]);
@@ -19,6 +20,6 @@ export function TaskWorkstreamPicker({ workstreams, onSelect, disabled = false,
             const workstream = workstreamById.get(String(option.value));
             if (!workstream)
                 return option.label;
-            return (_jsxs("span", { className: styles.taskWorkstreamPickerOption, children: [_jsx("span", { children: getWorkstreamReferenceLabel(workstream) || workstream.id }), _jsx("span", { children: workstream.title })] }));
+            return (_jsxs("span", { className: styles.taskWorkstreamPickerOption, children: [_jsx(PlanningVisualIdentity, { entityType: "workstream", entityId: workstream.id, icon: workstream.icon, color: workstream.color, size: "inline", disabled: true }), _jsx("span", { children: getWorkstreamReferenceLabel(workstream) || workstream.id }), _jsx("span", { children: workstream.title })] }));
         } }));
 }

package/dist/components/ui/DocumentTypeIcon.d.ts

@@ -0,0 +1,7 @@
+interface DocumentTypeIconProps {
+    label: string;
+    compact?: boolean;
+    accentColor?: string;
+}
+export declare function DocumentTypeIcon({ label, compact, accentColor, }: DocumentTypeIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/DocumentTypeIcon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './DocumentTypeIcon.module.css';
+export function DocumentTypeIcon({ label, compact = false, accentColor, }) {
+    const style = accentColor
+        ? { '--document-type-accent': accentColor }
+        : undefined;
+    return (_jsxs("span", { className: `${styles.root} ${compact ? styles.compact : ''}`.trim(), style: style, "aria-hidden": "true", children: [_jsxs("svg", { className: styles.outline, viewBox: "0 0 28 28", focusable: "false", children: [_jsx("path", { d: "M2 0.75h18.25l7 7V26q0 1.25-1.25 1.25H2Q0.75 27.25 0.75 26V2Q0.75 0.75 2 0.75Z" }), _jsx("path", { className: styles.foldFill, d: "M20.25 0.75v7h7Z" }), _jsx("path", { className: styles.foldLine, d: "M20.25 0.75v7h7" })] }), _jsx("span", { className: styles.label, children: label })] }));
+}

package/dist/components/ui/PasswordInput.d.ts

@@ -0,0 +1,6 @@
+import React, { type InputHTMLAttributes } from 'react';
+export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    visibilityLabel?: string;
+    visibilityToggleTestId?: string;
+}
+export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/ui/PasswordInput.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import styles from './PasswordInput.module.css';
+export const PasswordInput = forwardRef(function PasswordInput({ className, disabled, visibilityLabel = 'password', visibilityToggleTestId, ...inputProps }, ref) {
+    const [visible, setVisible] = useState(false);
+    const actionLabel = `${visible ? 'Hide' : 'Show'} ${visibilityLabel}`;
+    return (_jsxs("span", { className: styles.wrapper, children: [_jsx("input", { ...inputProps, ref: ref, className: `${className || ''} ${styles.input}`.trim(), type: visible ? 'text' : 'password', disabled: disabled }), _jsx("button", { type: "button", className: styles.toggle, "aria-label": actionLabel, title: actionLabel, "data-testid": visibilityToggleTestId, disabled: disabled, onClick: () => setVisible((current) => !current), children: visible
+                    ? _jsx(EyeOff, { size: 18, "aria-hidden": "true" })
+                    : _jsx(Eye, { size: 18, "aria-hidden": "true" }) })] }));
+});

package/dist/components/ui/TaxonomyDropdown.d.ts

@@ -5,6 +5,13 @@ export interface TaxonomyOption {
     icon?: string;
     color?: string;
 }
+export interface TaxonomyDropdownAction {
+    id: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    onSelect: () => void;
+}
 export interface TaxonomyDropdownProps {
     value: string | number;
     options: TaxonomyOption[];
@@ -28,5 +35,6 @@ export interface TaxonomyDropdownProps {
     searchable?: boolean;
     searchPlaceholder?: string;
     noResultsText?: string;
+    panelActions?: TaxonomyDropdownAction[];
 }
-export declare function TaxonomyDropdown({ value, options, onChange, placeholder, required, disabled, className, ariaLabelledBy, ariaLabel, title, hideSelectedLabel, hideChevron, panelClassName, portalPanel, panelMinWidth, panelAlign, renderOptionContent: customRenderOptionContent, triggerContent, optionLabelColor, searchable, searchPlaceholder, noResultsText, }: TaxonomyDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaxonomyDropdown({ value, options, onChange, placeholder, required, disabled, className, ariaLabelledBy, ariaLabel, title, hideSelectedLabel, hideChevron, panelClassName, portalPanel, panelMinWidth, panelAlign, renderOptionContent: customRenderOptionContent, triggerContent, optionLabelColor, searchable, searchPlaceholder, noResultsText, panelActions, }: TaxonomyDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/TaxonomyDropdown.js

@@ -12,7 +12,7 @@ function resolveTint(color, opacity) {
     }
     return `color-mix(in srgb, ${resolved} ${Math.round(opacity * 100)}%, transparent)`;
 }
-export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Select...', required = false, disabled = false, className = '', ariaLabelledBy, ariaLabel, title, hideSelectedLabel = false, hideChevron = false, panelClassName = '', portalPanel = false, panelMinWidth, panelAlign = 'end', renderOptionContent: customRenderOptionContent, triggerContent, optionLabelColor, searchable = false, searchPlaceholder = 'Search options...', noResultsText = 'No matching options.', }) {
+export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Select...', required = false, disabled = false, className = '', ariaLabelledBy, ariaLabel, title, hideSelectedLabel = false, hideChevron = false, panelClassName = '', portalPanel = false, panelMinWidth, panelAlign = 'end', renderOptionContent: customRenderOptionContent, triggerContent, optionLabelColor, searchable = false, searchPlaceholder = 'Search options...', noResultsText = 'No matching options.', panelActions = [], }) {
     const [isOpen, setIsOpen] = useState(false);
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const [panelPosition, setPanelPosition] = useState({});
@@ -23,6 +23,7 @@ export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Sele
     const panelRef = useRef(null);
     const portalPanelWidthRef = useRef(null);
     const optionRefs = useRef([]);
+    const panelActionRefs = useRef([]);
     const searchInputRef = useRef(null);
     const listboxId = `taxonomy-listbox-${React.useId().replace(/:/g, '')}`;
     // Find the currently selected option
@@ -147,6 +148,14 @@ export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Sele
         setIsOpen(false);
         buttonRef.current?.focus();
     };
+    const handlePanelAction = (action) => {
+        if (action.disabled)
+            return;
+        action.onSelect();
+        setSearchQuery('');
+        setIsOpen(false);
+        buttonRef.current?.focus();
+    };
     const handleKeyDown = (e) => {
         if (disabled)
             return;
@@ -222,7 +231,11 @@ export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Sele
                 }
                 break;
             case 'Tab':
-                // Allow natural tab behavior
+                if (isOpen && !e.shiftKey && panelActions.length > 0) {
+                    e.preventDefault();
+                    panelActionRefs.current[0]?.focus();
+                    break;
+                }
                 setIsOpen(false);
                 break;
             default:
@@ -256,7 +269,21 @@ export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Sele
                                 '--option-bg': resolveTint(accent, 0.06)
                             };
                         })(), children: renderOptionContent(option, { labelColor: optionLabelColor }) }, String(option.value)));
-                }) }), visibleOptions.length === 0 ? (_jsx("div", { className: styles.taxonomyDropdownEmpty, role: "status", children: noResultsText })) : null] })) : null;
+                }) }), visibleOptions.length === 0 ? (_jsx("div", { className: styles.taxonomyDropdownEmpty, role: "status", children: noResultsText })) : null, panelActions.length > 0 ? (_jsx("div", { className: styles.taxonomyDropdownActions, role: "group", "aria-label": "Actions", children: panelActions.map((action, index) => {
+                    const ActionIcon = action.icon && Icons[action.icon]
+                        ? Icons[action.icon]
+                        : null;
+                    return (_jsxs("button", { ref: (node) => { panelActionRefs.current[index] = node; }, type: "button", className: styles.taxonomyDropdownAction, disabled: action.disabled, onClick: () => handlePanelAction(action), onKeyDown: (event) => {
+                            if (event.key === 'Escape') {
+                                event.preventDefault();
+                                setIsOpen(false);
+                                buttonRef.current?.focus();
+                            }
+                            else if (event.key === 'Tab' && !event.shiftKey) {
+                                setIsOpen(false);
+                            }
+                        }, children: [ActionIcon ? _jsx(ActionIcon, { size: 16, "aria-hidden": "true" }) : null, _jsx("span", { children: action.label })] }, action.id));
+                }) })) : null] })) : null;
     return (_jsxs("div", { ref: dropdownRef, className: `taxonomyDropdown ${styles.taxonomyDropdown} ${isOpen ? `taxonomyDropdownActive ${styles.taxonomyDropdownActive}` : ''} ${className}`, children: [_jsxs("button", { ref: buttonRef, type: "button", className: `taxonomyDropdownButton ${styles.taxonomyDropdownButton} ${isOpen ? `taxonomyDropdownOpen ${styles.taxonomyDropdownOpen}` : ''}`, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": isOpen && highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : undefined, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, title: title, style: (() => {
                     if (!selectedOption)
                         return {};

package/dist/components/ui/TopNoticeLayer.js

@@ -13,5 +13,5 @@ export function TopNoticeLayer({ notice, onDismiss, placement = 'top' }) {
     const layerClassName = placement === 'task'
         ? `${styles.topNoticeLayer} ${styles.taskNoticeLayer}`
         : styles.topNoticeLayer;
-    return (_jsx("div", { className: layerClassName, children: _jsxs("div", { className: `${styles.topNotice} ${toneClass}`, role: statusRole, "aria-live": notice.tone === 'error' ? 'assertive' : 'polite', children: [notice.tone === 'error' ? _jsx(AlertTriangle, { size: 14 }) : notice.tone === 'success' ? _jsx(Check, { size: 14 }) : _jsx(Info, { size: 14 }), _jsx("span", { className: styles.topNoticeMessage, children: notice.message }), notice.actionLabel && notice.onAction && (_jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: notice.onAction, children: notice.actionLabel })), onDismiss && (_jsx("button", { type: "button", className: styles.topNoticeDismiss, onClick: onDismiss, "aria-label": "Dismiss notice", title: "Dismiss notice", children: _jsx(X, { size: 14 }) }))] }) }));
+    return (_jsx("div", { className: layerClassName, children: _jsxs("div", { className: `${styles.topNotice} ${toneClass}`, role: statusRole, "aria-live": notice.tone === 'error' ? 'assertive' : 'polite', children: [notice.tone === 'error' ? _jsx(AlertTriangle, { size: 14 }) : notice.tone === 'success' ? _jsx(Check, { size: 14 }) : _jsx(Info, { size: 14 }), _jsx("span", { className: styles.topNoticeMessage, children: notice.message }), notice.actionLabel && notice.onAction && (_jsx("button", { type: "button", className: `${notice.actionPrimary ? 'tf-button-primary' : 'tf-button-ghost'} tf-button-compact`, onClick: notice.onAction, children: notice.actionLabel })), notice.secondaryActionLabel && notice.onSecondaryAction && (_jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: notice.onSecondaryAction, children: notice.secondaryActionLabel })), onDismiss && notice.dismissible !== false && (_jsx("button", { type: "button", className: styles.topNoticeDismiss, onClick: onDismiss, "aria-label": "Dismiss notice", title: "Dismiss notice", children: _jsx(X, { size: 14 }) }))] }) }));
 }

package/dist/components/views/AppShellHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import styles from '../../Taskforce.module.css';
 import shellStyles from './WorkspaceShell.module.css';
 import logoLight from '../../assets/branding/logos/logo_light_no_bg.svg';
@@ -10,6 +10,7 @@ export function AppShellHeader({ projectName, currentWorkspaceId, brandLabel = '
     const headerTitleRef = useRef(null);
     const projectNameGroupRef = useRef(null);
     const [projectNameFits, setProjectNameFits] = useState(true);
+    const [workspaceCopyStatus, setWorkspaceCopyStatus] = useState('idle');
     const logo = isLightThemeFamily(theme) ? logoDark : logoLight;
     const normalizedProjectName = String(projectName || '').trim();
     const workspaceIdForCopy = String(currentWorkspaceId || '').trim();
@@ -56,20 +57,28 @@ export function AppShellHeader({ projectName, currentWorkspaceId, brandLabel = '
         resizeObserver.observe(projectEl);
         return () => resizeObserver.disconnect();
     }, [measureProjectNameFit, normalizedProjectName, meta]);
+    useEffect(() => {
+        if (workspaceCopyStatus === 'idle')
+            return;
+        const timer = window.setTimeout(() => setWorkspaceCopyStatus('idle'), 1600);
+        return () => window.clearTimeout(timer);
+    }, [workspaceCopyStatus]);
     const showProjectName = canShowProjectName && projectNameFits;
-    const copyWorkspaceId = () => {
+    const copyWorkspaceId = async () => {
         if (!workspaceIdForCopy || typeof navigator === 'undefined')
             return;
         const clipboard = navigator.clipboard;
-        if (!clipboard?.writeText)
-            return;
-        void clipboard.writeText(workspaceIdForCopy).catch(() => undefined);
-    };
-    const handleProjectNameKeyDown = (event) => {
-        if (event.key !== 'Enter' && event.key !== ' ')
+        if (!clipboard?.writeText) {
+            setWorkspaceCopyStatus('failed');
             return;
-        event.preventDefault();
-        copyWorkspaceId();
+        }
+        try {
+            await clipboard.writeText(workspaceIdForCopy);
+            setWorkspaceCopyStatus('copied');
+        }
+        catch {
+            setWorkspaceCopyStatus('failed');
+        }
     };
     const brandContent = (_jsxs(_Fragment, { children: [_jsx("img", { src: logo, alt: "Taskforce Logo", className: styles.brandIcon, onError: (event) => {
                     const target = event.currentTarget;
@@ -80,5 +89,17 @@ export function AppShellHeader({ projectName, currentWorkspaceId, brandLabel = '
                         target.style.display = 'none';
                     }
                 } }), _jsx("span", { children: brandLabel }), runtimeMode === 'cloud' && (_jsx("span", { className: styles.brandCloudSuffix, children: "HQ" }))] }));
-    return (_jsxs("div", { className: `${styles.header} ${shellStyles.standaloneHeader}`, children: [_jsxs("div", { ref: headerTitleRef, className: `${styles.headerTitle} ${shellStyles.standaloneTitle}`, children: [onBrandClick ? (_jsx("button", { type: "button", className: styles.brandHomeButton, onClick: onBrandClick, title: brandHomeLabel, "aria-label": brandHomeLabel, children: brandContent })) : (_jsx("span", { className: styles.brandHomeStatic, children: brandContent })), canShowProjectName && (_jsxs("span", { ref: projectNameGroupRef, className: `${styles.projectNameGroup} ${showProjectName ? '' : styles.projectNameGroupHidden}`.trim(), "aria-hidden": showProjectName ? undefined : true, children: [_jsx("span", { className: styles.projectSlash, children: "/" }), _jsx("span", { className: styles.projectName, title: showProjectName && workspaceIdForCopy ? `Workspace ID: ${workspaceIdForCopy}` : undefined, role: showProjectName && workspaceIdForCopy ? 'button' : undefined, tabIndex: showProjectName && workspaceIdForCopy ? 0 : undefined, onClick: copyWorkspaceId, onMouseDown: (event) => event.preventDefault(), onKeyDown: handleProjectNameKeyDown, children: normalizedProjectName })] })), meta] }), _jsx("div", { className: styles.headerActions, style: { gap: '16px' }, children: actions })] }));
+    return (_jsxs("div", { className: `${styles.header} ${shellStyles.standaloneHeader}`, children: [_jsxs("div", { ref: headerTitleRef, className: `${styles.headerTitle} ${shellStyles.standaloneTitle}`, children: [onBrandClick ? (_jsx("button", { type: "button", className: styles.brandHomeButton, onClick: onBrandClick, title: brandHomeLabel, "aria-label": brandHomeLabel, children: brandContent })) : (_jsx("span", { className: styles.brandHomeStatic, children: brandContent })), canShowProjectName && (_jsxs("span", { ref: projectNameGroupRef, className: `${styles.projectNameGroup} ${showProjectName ? '' : styles.projectNameGroupHidden}`.trim(), "aria-hidden": showProjectName ? undefined : true, children: [_jsx("span", { className: styles.projectSlash, children: "/" }), workspaceIdForCopy ? (_jsx("button", { type: "button", className: `${styles.projectName} ${workspaceCopyStatus === 'copied' ? styles.projectNameCopied : ''}`.trim(), title: workspaceCopyStatus === 'copied'
+                                    ? 'Workspace ID copied'
+                                    : workspaceCopyStatus === 'failed'
+                                        ? 'Unable to copy workspace ID'
+                                        : `Workspace ID: ${workspaceIdForCopy}`, "aria-label": `${normalizedProjectName}. ${workspaceCopyStatus === 'copied'
+                                    ? 'Workspace ID copied.'
+                                    : workspaceCopyStatus === 'failed'
+                                        ? 'Unable to copy workspace ID.'
+                                        : 'Copy workspace ID.'}`, disabled: !showProjectName, onClick: () => { void copyWorkspaceId(); }, children: normalizedProjectName })) : (_jsx("span", { className: styles.projectName, children: normalizedProjectName })), _jsx("span", { className: styles.projectNameCopyFeedback, "aria-live": "polite", children: workspaceCopyStatus === 'copied'
+                                    ? 'Workspace ID copied.'
+                                    : workspaceCopyStatus === 'failed'
+                                        ? 'Unable to copy workspace ID.'
+                                        : '' })] })), meta] }), _jsx("div", { className: styles.headerActions, style: { gap: '16px' }, children: actions })] }));
 }

package/dist/components/views/PlanComparisonPage.js

@@ -147,6 +147,12 @@ function readConfiguredFeatureLimit(config, key) {
     const normalized = Math.max(1, Math.floor(numericValue));
     return normalized;
 }
+/**
+ * Shown for count-limited features that are enabled with no configured ceiling.
+ * Applies to workspaces and AI profiles only — storage keeps an explicit
+ * allowance, and team management renders its seat limit instead.
+ */
+const UNLIMITED_LIMIT_LABEL = 'Unlimited';
 function formatLimitedFeatureLabel(baseLabel, limitValue) {
     if (limitValue !== 1)
         return baseLabel;
@@ -185,6 +191,9 @@ function getFeatureDisplayParts(feature, seatLimit) {
                 baseLabel: formatLimitedFeatureLabel(baseLabel, maxWorkspaces)
             };
         }
+        if (feature.access !== 'disabled') {
+            return { limitValue: UNLIMITED_LIMIT_LABEL, limitUnit: null, baseLabel };
+        }
     }
     if (feature.featureKey === 'collaboration.ai_profiles') {
         const maxAiProfiles = readConfiguredFeatureLimit(config, 'maxAiProfiles');
@@ -195,6 +204,9 @@ function getFeatureDisplayParts(feature, seatLimit) {
                 baseLabel: formatLimitedFeatureLabel(baseLabel, maxAiProfiles)
             };
         }
+        if (feature.access !== 'disabled') {
+            return { limitValue: UNLIMITED_LIMIT_LABEL, limitUnit: null, baseLabel };
+        }
     }
     if (feature.featureKey === 'collaboration.team_management') {
         const normalizedSeatLimit = Number(seatLimit);