@taskforcehq/taskforce 0.3.328 → 0.3.330

package/dist/components/task/TaskImageReviews.js

@@ -3,33 +3,42 @@ import { useEffect, useState } from 'react';
 import { Image, Loader2, MessageSquareText } from 'lucide-react';
 import { fetchTaskforceApi } from '../../utils/taskforceApiClient';
 import { dispatchOpenAnnotatedAttachment } from '../../utils/annotatedAttachments';
+import { formatDate } from '../../utils/formatting';
 import styles from './TaskImageReviews.module.css';
 function reviewTitle(review) {
     return String(review.title || '').trim() || review.image?.displayName || 'Image review';
 }
 export function TaskImageReviews({ taskId, taskReferenceLabel, workspaceId, apiBaseUrl }) {
     const [reviews, setReviews] = useState(null);
+    const [loadError, setLoadError] = useState(false);
     useEffect(() => {
         let active = true;
         setReviews(null);
+        setLoadError(false);
         const params = new URLSearchParams({ workspaceId, taskId });
         void fetchTaskforceApi(`/api/taskforce/annotated-attachments/sessions?${params.toString()}`, {
             credentials: 'include',
         }, apiBaseUrl)
-            .then(async (response) => response.ok ? response.json() : { sessions: [] })
+            .then(async (response) => {
+            if (!response.ok)
+                throw new Error('Failed to load image reviews.');
+            return response.json();
+        })
             .then((data) => {
             if (active)
                 setReviews(Array.isArray(data?.sessions) ? data.sessions : []);
         })
             .catch(() => {
-            if (active)
+            if (active) {
                 setReviews([]);
+                setLoadError(true);
+            }
         });
         return () => { active = false; };
     }, [apiBaseUrl, taskId, workspaceId]);
-    if (reviews !== null && reviews.length === 0)
+    if (reviews !== null && reviews.length === 0 && !loadError)
         return null;
-    return (_jsx("section", { className: styles.group, "aria-label": "Image reviews", children: reviews === null ? (_jsxs("div", { className: styles.loading, "aria-live": "polite", children: [_jsx(Loader2, { size: 14 }), " Loading image reviews"] })) : (_jsx("div", { className: styles.list, children: reviews.map((review) => {
+    return (_jsx("section", { className: styles.group, "aria-label": "Image reviews", children: reviews === null ? (_jsxs("div", { className: styles.loading, "aria-live": "polite", children: [_jsx(Loader2, { size: 14 }), " Loading image reviews"] })) : loadError ? (_jsx("div", { className: styles.loading, role: "status", children: "Unable to load image reviews." })) : (_jsx("div", { className: styles.list, children: reviews.map((review) => {
                 const image = review.image;
                 const markerCount = review.annotations.length;
                 const canOpen = Boolean(image?.assetId && image.apiUrl);
@@ -42,6 +51,6 @@ export function TaskImageReviews({ taskId, taskReferenceLabel, workspaceId, apiB
                             displayName: image.displayName,
                             referenceLabel: image.referenceLabel || undefined,
                         }, { taskId, taskReferenceLabel, sessionId: review.id });
-                    }, children: [_jsx("span", { className: styles.icon, children: _jsx(Image, { size: 14 }) }), _jsxs("span", { className: styles.copy, children: [_jsx("span", { className: styles.kindLabel, children: "Image review session" }), _jsx("span", { className: `${styles.title} tf-heading-card`, children: reviewTitle(review) }), _jsxs("span", { className: "tf-text-meta", children: [markerCount, " ", markerCount === 1 ? 'marker' : 'markers'] })] }), _jsx(MessageSquareText, { className: styles.openIcon, size: 14, "aria-hidden": "true" })] }, review.id));
+                    }, children: [_jsx("span", { className: styles.icon, children: _jsx(Image, { size: 14 }) }), _jsxs("span", { className: styles.copy, children: [_jsx("span", { className: styles.kindLabel, children: "Image review session" }), _jsx("span", { className: `${styles.title} tf-heading-card`, children: reviewTitle(review) }), _jsxs("span", { className: "tf-text-meta", children: [[image?.referenceLabel, image?.displayName].filter(Boolean).join(' · ') || 'Image', review.updatedAt ? ` · Updated ${formatDate(review.updatedAt, { month: 'short', day: 'numeric', year: 'numeric' })}` : ''] }), _jsxs("span", { className: "tf-text-meta", children: [markerCount, " ", markerCount === 1 ? 'marker' : 'markers'] })] }), _jsx(MessageSquareText, { className: styles.openIcon, size: 14, "aria-hidden": "true" })] }, review.id));
             }) })) }));
 }

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

@@ -64,6 +64,11 @@ interface TaskKanbanProps {
     onAssignTaskToWorkstream?: (taskId: string, workstreamId: string | null) => boolean | void | Promise<boolean | void>;
     onAssignWorkstreamToInitiative?: (workstreamId: string, initiativeId: string | null) => boolean | void | Promise<boolean | void>;
     showTaskCardStatusLabel?: boolean;
+    showTaskCardDescription?: boolean;
+    showTaskCardAttachments?: boolean;
+    showTaskCardChecklistProgress?: boolean;
+    showTaskCardLatestActivity?: boolean;
+    tintTaskCardActivityBackground?: boolean;
     workstreams?: WorkstreamItem[];
     initiatives?: InitiativeItem[];
     workspaceId?: string | null;
@@ -71,5 +76,5 @@ interface TaskKanbanProps {
     selectedDeletedRecordIds?: Set<string>;
     onDeletedSelectionChange?: (deletedRecordId: string, selected: boolean) => void;
 }
-export declare 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, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees, filtersReady, scheduleFilteredTaskIds, categories, compressed, readOnlyMode, recentlyChangedTaskIds, scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy, sortOrder, planningDropTargets, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel, workstreams, initiatives, workspaceId, deletedTaskRecordByTaskId, selectedDeletedRecordIds, onDeletedSelectionChange, }: TaskKanbanProps): import("react/jsx-runtime").JSX.Element;
+export declare 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, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees, filtersReady, scheduleFilteredTaskIds, categories, compressed, readOnlyMode, recentlyChangedTaskIds, scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy, sortOrder, planningDropTargets, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel, showTaskCardDescription, showTaskCardAttachments, showTaskCardChecklistProgress, showTaskCardLatestActivity, tintTaskCardActivityBackground, workstreams, initiatives, workspaceId, deletedTaskRecordByTaskId, selectedDeletedRecordIds, onDeletedSelectionChange, }: TaskKanbanProps): import("react/jsx-runtime").JSX.Element;
 export {};

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/TaskWorkflowAssignmentField.js

@@ -11,6 +11,40 @@ const NO_WORKFLOW = '__none__';
 function statusLabel(status) {
     return status.charAt(0).toUpperCase() + status.slice(1);
 }
+function workflowAssignmentFromMutation(value, taskId) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return null;
+    const assignment = value;
+    if (!assignment.execution
+        || assignment.execution.taskId !== taskId
+        || !assignment.template
+        || !assignment.version
+        || !Array.isArray(assignment.steps)
+        || !Array.isArray(assignment.events))
+        return null;
+    return assignment;
+}
+function latestWorkflowEventSequence(assignment) {
+    return Math.max(0, ...(assignment?.events || []).map((event) => event.sequenceNumber || 0));
+}
+function workflowExecutionCreatedAt(assignment) {
+    const timestamp = Date.parse(assignment.execution.createdAt);
+    return Number.isFinite(timestamp) ? timestamp : 0;
+}
+function newerWorkflowAssignment(current, candidate) {
+    if (!candidate)
+        return current;
+    if (!current)
+        return candidate;
+    if (current.execution.id !== candidate.execution.id) {
+        return workflowExecutionCreatedAt(candidate) > workflowExecutionCreatedAt(current)
+            ? candidate
+            : current;
+    }
+    return latestWorkflowEventSequence(candidate) >= latestWorkflowEventSequence(current)
+        ? candidate
+        : current;
+}
 export function TaskWorkflowAssignmentField({ taskId, workspaceId, taskStatus, taskUpdatedAt, comments = [], assigneeOptions = [], currentActorId, apiBaseUrl, runtimeMode = 'local', disabled = false, onActivatePendingWorkflow, onActiveOwnerChange, }) {
     const [workflows, setWorkflows] = React.useState([]);
     const [assignment, setAssignment] = React.useState(null);
@@ -21,6 +55,7 @@ export function TaskWorkflowAssignmentField({ taskId, workspaceId, taskStatus, t
     const [activationRetryToken, setActivationRetryToken] = React.useState(0);
     const [error, setError] = React.useState('');
     const requestGenerationRef = React.useRef(0);
+    const assignmentRefreshGenerationRef = React.useRef(0);
     const activationAttemptRef = React.useRef(null);
     const refreshedTaskRevisionRef = React.useRef({
         taskId,
@@ -29,6 +64,7 @@ export function TaskWorkflowAssignmentField({ taskId, workspaceId, taskStatus, t
     const requestContext = React.useMemo(() => ({ workspaceId, apiBaseUrl, runtimeMode }), [apiBaseUrl, runtimeMode, workspaceId]);
     React.useEffect(() => {
         const requestGeneration = ++requestGenerationRef.current;
+        const assignmentRefreshGeneration = ++assignmentRefreshGenerationRef.current;
         setLoading(true);
         setAssigning(false);
         setCompletingStep(false);
@@ -47,18 +83,23 @@ export function TaskWorkflowAssignmentField({ taskId, workspaceId, taskStatus, t
             if (workflowResult.status === 'fulfilled') {
                 setWorkflows(workflowResult.value.filter((summary) => (summary.template.status === 'active' && Boolean(summary.latestPublishedVersion))));
             }
-            if (assignmentResult.status === 'fulfilled') {
-                setAssignment(assignmentResult.value);
-            }
-            if (assignmentResult.status === 'rejected') {
-                setError(String(assignmentResult.reason?.message || 'Unable to load workflow assignment.'));
-            }
-            else if (!assignmentResult.value && workflowResult.status === 'rejected') {
-                setError(String(workflowResult.reason?.message || 'Unable to load workflows.'));
+            if (assignmentRefreshGeneration === assignmentRefreshGenerationRef.current) {
+                if (assignmentResult.status === 'fulfilled') {
+                    setAssignment(assignmentResult.value);
+                    if (!assignmentResult.value && workflowResult.status === 'rejected') {
+                        setError(String(workflowResult.reason?.message || 'Unable to load workflows.'));
+                    }
+                }
+                else {
+                    setError(String(assignmentResult.reason?.message || 'Unable to load workflow assignment.'));
+                }
             }
             setLoading(false);
         });
-        return () => { requestGenerationRef.current += 1; };
+        return () => {
+            requestGenerationRef.current += 1;
+            assignmentRefreshGenerationRef.current += 1;
+        };
     }, [requestContext, taskId]);
     const latestAssignment = assignment?.execution.taskId === taskId ? assignment : null;
     const hasActiveExecution = latestAssignment
@@ -186,13 +227,18 @@ export function TaskWorkflowAssignmentField({ taskId, workspaceId, taskStatus, t
             return;
         refreshedTaskRevisionRef.current = { taskId, revision: taskRevision };
         const requestGeneration = requestGenerationRef.current;
+        const assignmentRefreshGeneration = ++assignmentRefreshGenerationRef.current;
         void getTaskWorkflowAssignment(taskId, requestContext).then((nextAssignment) => {
             if (requestGeneration !== requestGenerationRef.current)
                 return;
+            if (assignmentRefreshGeneration !== assignmentRefreshGenerationRef.current)
+                return;
             setAssignment(nextAssignment);
         }).catch((requestError) => {
             if (requestGeneration !== requestGenerationRef.current)
                 return;
+            if (assignmentRefreshGeneration !== assignmentRefreshGenerationRef.current)
+                return;
             setError(String(requestError?.message || 'Unable to refresh workflow assignment.'));
         });
     }, [isPending, requestContext, taskId, taskStatus, taskUpdatedAt]);
@@ -210,15 +256,27 @@ export function TaskWorkflowAssignmentField({ taskId, workspaceId, taskStatus, t
             const eventTaskId = String(detail.taskId || '').trim();
             if (eventTaskId !== taskId)
                 return;
-            const requestGeneration = ++requestGenerationRef.current;
+            const authoritativeAssignment = workflowAssignmentFromMutation(detail.authoritativeWorkflowAssignment, taskId);
+            if (authoritativeAssignment) {
+                ++assignmentRefreshGenerationRef.current;
+                setAssignment((current) => newerWorkflowAssignment(current, authoritativeAssignment));
+                setError('');
+                return;
+            }
+            const requestGeneration = requestGenerationRef.current;
+            const assignmentRefreshGeneration = ++assignmentRefreshGenerationRef.current;
             void getTaskWorkflowAssignment(taskId, requestContext).then((nextAssignment) => {
                 if (requestGeneration !== requestGenerationRef.current)
                     return;
+                if (assignmentRefreshGeneration !== assignmentRefreshGenerationRef.current)
+                    return;
                 setAssignment(nextAssignment);
                 setError('');
             }).catch((requestError) => {
                 if (requestGeneration !== requestGenerationRef.current)
                     return;
+                if (assignmentRefreshGeneration !== assignmentRefreshGenerationRef.current)
+                    return;
                 setError(String(requestError?.message || 'Unable to refresh workflow assignment.'));
             });
         };

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/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 })] }));
 }