@taskforcehq/taskforce 0.3.328 → 0.3.329

package/dist/components/features/planning/PlanningTaskOrderList.js

@@ -4,10 +4,14 @@ import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, us
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { GripVertical } from 'lucide-react';
+import { isPlanningTaskTerminal } from './planningTaskArrangement';
 import styles from './PlanningTaskOrderList.module.css';
 function SortableTask(props) {
     const sortable = useSortable({ id: props.task.id, disabled: props.disabled });
-    return (_jsxs("div", { ref: sortable.setNodeRef, className: styles.item, style: { transform: CSS.Transform.toString(sortable.transform), transition: sortable.transition }, children: [_jsx("button", { type: "button", className: styles.grip, disabled: props.disabled, "aria-label": `Reorder ${props.task.title}`, title: "Drag to change execution order", ...sortable.attributes, ...sortable.listeners, children: _jsx(GripVertical, { size: 15, "aria-hidden": "true" }) }), _jsx("div", { className: styles.card, children: props.children })] }));
+    const reorderLabel = props.disabledReason
+        ? `Reorder ${props.task.title} — ${props.disabledReason}`
+        : `Reorder ${props.task.title}`;
+    return (_jsxs("div", { ref: sortable.setNodeRef, className: styles.item, style: { transform: CSS.Transform.toString(sortable.transform), transition: sortable.transition }, children: [_jsx("button", { ref: sortable.setActivatorNodeRef, type: "button", className: styles.grip, disabled: props.disabled, "aria-label": reorderLabel, title: props.disabledReason || 'Drag to change execution order', ...sortable.attributes, ...sortable.listeners, children: _jsx(GripVertical, { size: 15, "aria-hidden": "true" }) }), _jsx("div", { className: styles.card, children: props.children })] }));
 }
 export function PlanningTaskOrderList(props) {
     const [orderedIds, setOrderedIds] = React.useState(() => props.tasks.map((task) => task.id));
@@ -19,7 +23,8 @@ export function PlanningTaskOrderList(props) {
         const byId = new Map(props.tasks.map((task) => [task.id, task]));
         return orderedIds.map((id) => byId.get(id)).filter((task) => Boolean(task));
     }, [orderedIds, props.tasks]);
-    const draggable = props.mode === 'execution' && Boolean(props.onReorder);
+    const hasReorderAction = Boolean(props.onReorder);
+    const draggable = props.mode === 'execution' && hasReorderAction;
     const handleDragEnd = React.useCallback(async (event) => {
         if (!draggable || saving || !event.over || event.active.id === event.over.id)
             return;
@@ -29,8 +34,11 @@ export function PlanningTaskOrderList(props) {
         if (from < 0 || to < 0)
             return;
         const byId = new Map(orderedTasks.map((task) => [task.id, task]));
-        const terminal = (task) => task?.status === 'done' || task?.status === 'cancelled';
-        if (terminal(byId.get(previous[from])) !== terminal(byId.get(previous[to])))
+        const sourceTask = byId.get(previous[from]);
+        const targetTask = byId.get(previous[to]);
+        if (!sourceTask || !targetTask)
+            return;
+        if (isPlanningTaskTerminal(sourceTask) !== isPlanningTaskTerminal(targetTask))
             return;
         const next = arrayMove(previous, from, to);
         setOrderedIds(next);
@@ -45,8 +53,11 @@ export function PlanningTaskOrderList(props) {
             setSaving(false);
         }
     }, [draggable, orderedIds, orderedTasks, props, saving]);
-    if (!draggable) {
+    if (!hasReorderAction) {
         return _jsx("div", { className: `${styles.list} ${props.className || ''}`.trim(), children: props.tasks.map((task) => (_jsx(React.Fragment, { children: props.children(task) }, task.id))) });
     }
-    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: (event) => void handleDragEnd(event), children: _jsx(SortableContext, { items: orderedIds, strategy: verticalListSortingStrategy, children: _jsx("div", { className: `${styles.list} ${props.className || ''}`.trim(), "aria-busy": saving || undefined, children: orderedTasks.map((task) => (_jsx(SortableTask, { task: task, disabled: saving, children: props.children(task) }, task.id))) }) }) }));
+    const disabledReason = props.mode === 'execution'
+        ? undefined
+        : 'Switch to Execution order to reorder tasks';
+    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: (event) => void handleDragEnd(event), children: _jsx(SortableContext, { items: orderedIds, strategy: verticalListSortingStrategy, children: _jsx("div", { className: `${styles.list} ${props.className || ''}`.trim(), "aria-busy": saving || undefined, children: orderedTasks.map((task) => (_jsx(SortableTask, { task: task, disabled: !draggable || saving, disabledReason: disabledReason || (saving ? 'Saving execution order' : undefined), children: props.children(task) }, task.id))) }) }) }));
 }

package/dist/components/features/planning/planningTaskArrangement.d.ts

@@ -15,4 +15,5 @@ export declare const PLANNING_TASK_ARRANGE_OPTIONS: readonly ({
 })[];
 export declare function normalizePlanningTaskArrangeMode(value: unknown): PlanningTaskArrangeMode;
 export declare function mergeVisiblePlanningTaskOrder(allTasks: readonly PlanningTaskPreview[], reorderedVisibleTaskIds: readonly string[]): string[];
+export declare function isPlanningTaskTerminal(task: PlanningTaskPreview): boolean;
 export declare function arrangePlanningTasks(tasks: readonly PlanningTaskPreview[], mode: PlanningTaskArrangeMode): PlanningTaskPreview[];

package/dist/components/features/planning/planningTaskArrangement.js

@@ -19,7 +19,7 @@ export function mergeVisiblePlanningTaskOrder(allTasks, reorderedVisibleTaskIds)
     let visibleIndex = 0;
     return allTasks.map((task) => (visible.has(task.id) ? reorderedVisibleTaskIds[visibleIndex++] : task.id));
 }
-function isTerminal(task) {
+export function isPlanningTaskTerminal(task) {
     const status = getStatusDefinition(task.status).value;
     return status === 'done' || status === 'cancelled';
 }
@@ -50,7 +50,7 @@ function arrangeBlockedTasks(tasks, allTasksById) {
     for (const task of tasks) {
         for (const prerequisiteId of task.prerequisiteTaskIds || []) {
             const prerequisite = allTasksById.get(prerequisiteId);
-            if (!prerequisite || isTerminal(prerequisite) || !taskIds.has(prerequisiteId))
+            if (!prerequisite || isPlanningTaskTerminal(prerequisite) || !taskIds.has(prerequisiteId))
                 continue;
             dependentsByPrerequisite.set(prerequisiteId, [
                 ...(dependentsByPrerequisite.get(prerequisiteId) || []),
@@ -85,15 +85,15 @@ function arrangeBlockedTasks(tasks, allTasksById) {
 export function arrangePlanningTasks(tasks, mode) {
     const taskById = new Map(tasks.map((task) => [task.id, task]));
     if (mode === 'ready') {
-        const active = tasks.filter((task) => !isTerminal(task));
+        const active = tasks.filter((task) => !isPlanningTaskTerminal(task));
         const ready = sortByExecutionOrder(active.filter((task) => isReady(task, taskById)));
         const blocked = arrangeBlockedTasks(active.filter((task) => !isReady(task, taskById)), taskById);
-        return [...ready, ...blocked, ...sortByExecutionOrder(tasks.filter(isTerminal))];
+        return [...ready, ...blocked, ...sortByExecutionOrder(tasks.filter(isPlanningTaskTerminal))];
     }
     return tasks.map((task, index) => ({ task, index })).sort((leftEntry, rightEntry) => {
         const left = leftEntry.task;
         const right = rightEntry.task;
-        const terminalComparison = Number(isTerminal(left)) - Number(isTerminal(right));
+        const terminalComparison = Number(isPlanningTaskTerminal(left)) - Number(isPlanningTaskTerminal(right));
         if (terminalComparison)
             return terminalComparison;
         if (mode === 'priority') {

package/dist/components/features/taskforceAgentEditorModel.js

@@ -96,6 +96,7 @@ export function buildTaskforceAgentDefinitionFromDraft(input) {
     const artStyle = selectedAvatarArtStyle(draft.avatarArtStyleSelection, draft.avatarArtStyleCustom);
     const requestedCapabilities = draft.requestedCapabilities
         .filter((capability) => DEFAULT_AGENT_TOOL_CAPABILITY_SET.has(capability));
+    const selectedModel = getTaskforceAgentModel(input.modelKey);
     return {
         ...(baseDefinition || {}),
         schemaVersion: AGENT_DEFINITION_SCHEMA_VERSION,
@@ -104,8 +105,9 @@ export function buildTaskforceAgentDefinitionFromDraft(input) {
         model: {
             providerKey: input.providerKey,
             modelKey: input.modelKey,
-            modelSource: getTaskforceAgentModel(input.modelKey)?.source || 'bedrock',
+            modelSource: selectedModel?.source || 'bedrock',
             tier: input.tier,
+            ...(selectedModel?.source === 'subscription_dev' ? { connectionScope: 'local_dev' } : {}),
         },
         behavior: {
             ...(personality ? { personality } : {}),

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

@@ -48,6 +48,11 @@ interface TaskCardProps {
     onWorkstreamChange?: (task: TaskItem, workstreamId: string | null) => boolean | void | Promise<boolean | void>;
     compressed?: boolean;
     showStatusLabel?: boolean;
+    showDescription?: boolean;
+    showAttachments?: boolean;
+    showChecklistProgress?: boolean;
+    showLatestActivity?: boolean;
+    tintActivityBackground?: boolean;
 }
 export declare const TaskCard: React.NamedExoticComponent<TaskCardProps>;
 export {};

package/dist/components/task/TaskCard.js

@@ -23,7 +23,55 @@ import { TaxonomyDropdown } from '../ui/TaxonomyDropdown';
 import { AssigneeAvatar, AssigneeIdentity } from '../ui/AssigneeIdentity';
 import { TaskWorkstreamPicker } from './TaskWorkstreamPicker';
 import { DocumentTypeIcon } from '../ui/DocumentTypeIcon';
-const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [], types = [], priorities = [], categories = [], assigneeOptions = [], workstreams = [], taskWorkstream = null, taskInitiative = null, workspaceId = null, isOverlay = false, isArchived = false, readOnlyMode = null, isRecentlyChanged = false, selectable = false, selected = false, onSelectionChange, onClick, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, deleteActionTitle, taskReferences, onAssigneeChange, onWorkstreamChange, compressed = false, showStatusLabel = false }) => {
+function resolveLatestActivityActor(item, assigneeOptions) {
+    if (!item)
+        return null;
+    const actorRef = String(item.type === 'comment' ? item.comment.author : item.event.actor).trim();
+    const actorProfile = item.type === 'comment' ? item.comment.actor : item.event.actorProfile;
+    if (!actorRef && !actorProfile)
+        return null;
+    const normalizedActorRef = actorRef.toLowerCase();
+    const option = assigneeOptions.find((candidate) => (String(candidate.value || '').trim().toLowerCase() === normalizedActorRef));
+    const actorType = item.type === 'comment'
+        ? actorProfile?.kind === 'ai'
+            ? 'ai'
+            : actorProfile?.kind === 'human'
+                ? 'human'
+                : option?.kind === 'agent'
+                    ? 'ai'
+                    : option?.kind === 'member'
+                        ? 'human'
+                        : null
+        : item.event.actorType;
+    const kind = actorType === 'system' || normalizedActorRef === 'system'
+        ? 'system'
+        : actorType === 'ai' || actorProfile?.kind === 'ai' || option?.kind === 'agent'
+            ? 'agent'
+            : 'member';
+    if (kind === 'system')
+        return { label: 'System' };
+    const profileLabel = String(actorProfile?.label || '').trim();
+    const optionLabel = String(option?.label || '').trim();
+    const isGenericActor = !normalizedActorRef
+        || normalizedActorRef === 'user'
+        || normalizedActorRef === 'human'
+        || normalizedActorRef === 'ai';
+    const isOpaqueActor = /^(?:ai-profile|user|member)-[0-9a-f-]{8,}$/i.test(actorRef)
+        || /^[0-9a-f]{16,}$/i.test(actorRef);
+    const readableActorRef = actorRef
+        .replace(/[-_]+/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .replace(/\b\w/g, (character) => character.toUpperCase());
+    const label = profileLabel
+        || optionLabel
+        || (kind === 'agent' && (isGenericActor || isOpaqueActor) ? 'AI Agent' : '')
+        || (isGenericActor || isOpaqueActor ? 'Workspace member' : readableActorRef)
+        || (kind === 'agent' ? 'AI Agent' : 'Workspace member');
+    const color = resolveColor(actorProfile?.color || option?.color);
+    return { label, color };
+}
+const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [], types = [], priorities = [], categories = [], assigneeOptions = [], workstreams = [], taskWorkstream = null, taskInitiative = null, workspaceId = null, isOverlay = false, isArchived = false, readOnlyMode = null, isRecentlyChanged = false, selectable = false, selected = false, onSelectionChange, onClick, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, deleteActionTitle, taskReferences, onAssigneeChange, onWorkstreamChange, compressed = false, showStatusLabel = false, showDescription = true, showAttachments = true, showChecklistProgress = true, showLatestActivity = true, tintActivityBackground = false }) => {
     const taskReference = getTaskReferenceDisplayState(task);
     const taskReferenceLabel = taskReference.label || (taskReference.isProvisional ? 'Pending' : '');
     const isProvisionalReference = taskReference.isProvisional;
@@ -71,7 +119,8 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
             kind,
         };
     }, [assigneeLabel, assigneeOptions, task.assignee]);
-    const latestActivity = React.useMemo(() => getLatestTaskActivity(task), [task]);
+    const latestActivity = React.useMemo(() => task.latestActivity ?? getLatestTaskActivity(task), [task]);
+    const latestActivityActor = React.useMemo(() => resolveLatestActivityActor(latestActivity, assigneeOptions), [assigneeOptions, latestActivity]);
     const resolvedReadOnlyMode = readOnlyMode || (task.isDeleted ? 'deleted' : (isArchived ? 'archived' : null));
     const isReadOnly = resolvedReadOnlyMode !== null;
     const deletedExpiryLabel = React.useMemo(() => {
@@ -99,7 +148,7 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
         return undefined;
     }, [assigneeOptions, initiativeReferenceLabel, taskInitiative, taskWorkstream, workstreamReferenceLabel]);
     const latestActivityText = React.useMemo(() => summarizeTaskActivity(latestActivity, formatActivityFieldValue), [formatActivityFieldValue, latestActivity]);
-    const commentCount = React.useMemo(() => getTaskActivityItems(task).filter((item) => item.type === 'comment').length, [task]);
+    const commentCount = React.useMemo(() => task.commentCount ?? getTaskActivityItems(task).filter((item) => item.type === 'comment').length, [task]);
     const cardClasses = [
         cardStyles.taskItem,
         task.status === 'on-hold' ? cardStyles.onHold : '',
@@ -196,10 +245,9 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
     const toTitleCase = (str) => str.replace(/\b\w/g, t => t.toUpperCase());
     const visibleTaxonomies = getVisibleTaxonomiesForTasks(taxonomies, [task]);
     const checklistItems = task.checklistItems || [];
-    const checklistTotal = checklistItems.length;
-    const checklistCompleted = checklistTotal > 0
-        ? checklistItems.filter(item => item.isCompleted).length
-        : 0;
+    const checklistTotal = task.checklistCount ?? checklistItems.length;
+    const checklistCompleted = task.completedChecklistCount
+        ?? (checklistTotal > 0 ? checklistItems.filter(item => item.isCompleted).length : 0);
     const handleReferenceCopy = (event, label) => {
         event.stopPropagation();
         onCopyId?.(event, label);
@@ -232,6 +280,11 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
     const cardCoverAttachment = (() => {
         if (compressed || isOverlay || !task.cardCoverAssetId)
             return null;
+        if (task.cardCoverAttachment
+            && typeof task.cardCoverAttachment !== 'string'
+            && task.cardCoverAttachment.assetId === task.cardCoverAssetId) {
+            return task.cardCoverAttachment;
+        }
         return (task.attachments || []).find((attachment) => (typeof attachment !== 'string'
             && String(attachment.assetId || '').trim() === task.cardCoverAssetId
             && attachment.linkRole === 'image'
@@ -288,7 +341,7 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
                 }, children: _jsx("img", { src: cardCoverAttachment.path, alt: cardCoverAttachment.caption
                         || cardCoverAttachment.displayName
                         || cardCoverAttachment.originalFilename
-                        || task.title, loading: "lazy", decoding: "async", onError: () => setCardCoverLoadFailed(true) }) })), _jsxs("div", { className: cardStyles.taskContent, children: [/* Meta Badges moved to bottom */ isReadOnly && (_jsx("div", { className: `${cardStyles.taskMeta} ${cardStyles.taskMetaCompact}` })), _jsxs("div", { children: [_jsxs("div", { className: cardStyles.taskTitle, style: compressed ? { fontSize: '13px', lineHeight: '1.4' } : {}, children: [resolvedReadOnlyMode === 'archived' && '✓ ', resolvedReadOnlyMode === 'deleted' && 'Deleted: ', renderHighlighted(task.title, searchQuery)] }), deletedExpiryLabel && (_jsx("div", { className: cardStyles.deletedExpiry, title: "Trash items are permanently deleted 90 days after deletion.", children: deletedExpiryLabel })), task.description && !isReadOnly && !compressed && (_jsx("div", { className: cardStyles.taskDescription, children: _jsx(Markdown, { variant: "compact", taskReferences: taskReferences, children: task.description }) }))] }), cardAttachments.length > 0 && !isReadOnly && !compressed && (_jsxs("div", { className: cardStyles.attachmentThumbnails, children: [_jsx("div", { className: cardStyles.attachmentImageRow, children: cardAttachments.map((attachment, idx) => {
+                        || task.title, loading: "lazy", decoding: "async", onError: () => setCardCoverLoadFailed(true) }) })), _jsxs("div", { className: cardStyles.taskContent, children: [/* Meta Badges moved to bottom */ isReadOnly && (_jsx("div", { className: `${cardStyles.taskMeta} ${cardStyles.taskMetaCompact}` })), _jsxs("div", { children: [_jsxs("div", { className: cardStyles.taskTitle, style: compressed ? { fontSize: '13px', lineHeight: '1.4' } : {}, children: [resolvedReadOnlyMode === 'archived' && '✓ ', resolvedReadOnlyMode === 'deleted' && 'Deleted: ', renderHighlighted(task.title, searchQuery)] }), deletedExpiryLabel && (_jsx("div", { className: cardStyles.deletedExpiry, title: "Trash items are permanently deleted 90 days after deletion.", children: deletedExpiryLabel })), showDescription && task.description && !isReadOnly && !compressed && (_jsx("div", { className: cardStyles.taskDescription, children: _jsx(Markdown, { variant: "compact", taskReferences: taskReferences, children: task.description }) }))] }), showAttachments && cardAttachments.length > 0 && !isReadOnly && !compressed && (_jsxs("div", { className: cardStyles.attachmentThumbnails, children: [_jsx("div", { className: cardStyles.attachmentImageRow, children: cardAttachments.map((attachment, idx) => {
                                     const path = typeof attachment === 'string' ? attachment : attachment.path;
                                     if (!isImageAttachment(attachment))
                                         return null;
@@ -319,7 +372,9 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
                                                 return;
                                             window.open(path, '_blank');
                                         }, title: name, "aria-label": `${name} ${fileType}`, style: { '--context-doc-accent': fileAccentColor }, children: [_jsx(DocumentTypeIcon, { label: fileType, accentColor: fileAccentColor, compact: true }), _jsx("span", { className: cardStyles.contextDocMain, children: _jsx("span", { className: cardStyles.contextDocName, children: name }) })] }, idx));
-                                }) })] })), task.status === 'cancelled' && task.canceledReason && !compressed && (_jsxs("div", { className: cardStyles.taskCancellationReason, children: [_jsx("strong", { children: "Cancellation Reason:" }), " ", renderHighlighted(task.canceledReason, searchQuery)] })), (latestActivityText || commentCount > 0) && !isReadOnly && !compressed && (_jsxs("div", { className: cardStyles.taskLatestComment, "data-task-activity-summary": "true", children: [_jsxs("div", { className: cardStyles.taskLatestCommentHeader, children: [_jsx("strong", { children: latestActivityText ? 'Latest Activity:' : 'Activity:' }), commentCount > 0 && (_jsxs("span", { className: `${styles.metaBadge} ${cardStyles.taskCommentCount}`, title: `${commentCount} ${commentCount === 1 ? 'comment' : 'comments'}`, "aria-label": `${commentCount} ${commentCount === 1 ? 'comment' : 'comments'}`, children: [_jsx(MessageSquare, { size: 12, "aria-hidden": "true" }), _jsx("span", { children: commentCount })] }))] }), latestActivityText && (_jsx("div", { className: cardStyles.taskLatestCommentText, title: latestActivityText, children: renderHighlighted(latestActivityText, searchQuery) }))] })), !isReadOnly && visibleTaxonomies.length > 0 && !compressed && (_jsx("div", { className: `${cardStyles.taskSpecialists} ${cardStyles.taxonomiesList}`, children: visibleTaxonomies.map(tax => {
+                                }) })] })), task.status === 'cancelled' && task.canceledReason && !compressed && (_jsxs("div", { className: cardStyles.taskCancellationReason, children: [_jsx("strong", { children: "Cancellation Reason:" }), " ", renderHighlighted(task.canceledReason, searchQuery)] })), showLatestActivity && (latestActivityText || commentCount > 0) && !isReadOnly && !compressed && (_jsxs("div", { className: `${cardStyles.taskLatestComment} ${tintActivityBackground && latestActivityActor?.color ? cardStyles.taskLatestCommentTinted : ''}`, "data-task-activity-summary": "true", style: latestActivityActor?.color
+                            ? { '--task-activity-accent': latestActivityActor.color }
+                            : undefined, children: [_jsxs("div", { className: cardStyles.taskLatestCommentHeader, children: [_jsxs("div", { className: cardStyles.taskLatestActivityHeading, children: [_jsx("strong", { children: latestActivityText ? 'Latest Activity:' : 'Activity:' }), latestActivityText && latestActivityActor ? (_jsx("span", { className: cardStyles.taskLatestActivityActor, title: latestActivityActor.label, children: latestActivityActor.label })) : null] }), commentCount > 0 && (_jsxs("span", { className: `${styles.metaBadge} ${cardStyles.taskCommentCount}`, title: `${commentCount} ${commentCount === 1 ? 'comment' : 'comments'}`, "aria-label": `${commentCount} ${commentCount === 1 ? 'comment' : 'comments'}`, children: [_jsx(MessageSquare, { size: 12, "aria-hidden": "true" }), _jsx("span", { children: commentCount })] }))] }), latestActivityText && (_jsx("div", { className: cardStyles.taskLatestCommentText, title: latestActivityText, children: renderHighlighted(latestActivityText, searchQuery) }))] })), !isReadOnly && visibleTaxonomies.length > 0 && !compressed && (_jsx("div", { className: `${cardStyles.taskSpecialists} ${cardStyles.taxonomiesList}`, children: visibleTaxonomies.map(tax => {
                             const val = task.taxonomies?.[tax.id];
                             if (!val)
                                 return null;
@@ -364,7 +419,7 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
                                                     const iconName = priorityConfig.icon || 'AlertCircle';
                                                     const IconComp = Icons[iconName] || Icons.AlertCircle;
                                                     return _jsx(IconComp, { size: 14 });
-                                                })() })), checklistTotal > 0 && (_jsxs("span", { className: styles.metaBadge, title: `${checklistCompleted}/${checklistTotal} checklist items complete`, style: {
+                                                })() })), showChecklistProgress && checklistTotal > 0 && (_jsxs("span", { className: styles.metaBadge, title: `${checklistCompleted}/${checklistTotal} checklist items complete`, style: {
                                                     color: 'var(--text-muted)',
                                                     backgroundColor: 'var(--bg-tertiary)',
                                                     borderColor: 'var(--border-primary)',

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;