@taskforcehq/taskforce 0.3.327 → 0.3.329

package/dist/components/task/TaskCard.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import * as Icons from 'lucide-react';
-const { MessageSquare, Gauge, ClipboardList, HelpCircle, File } = Icons;
+const { MessageSquare, Gauge, ClipboardList, HelpCircle } = Icons;
 import styles from '../../Taskforce.module.css';
 import cardStyles from './TaskCard.module.css';
 import { Markdown } from '../ui/Markdown';
@@ -22,7 +22,56 @@ import { getInitiativeReferenceLabel, getWorkstreamReferenceLabel } from '../../
 import { TaxonomyDropdown } from '../ui/TaxonomyDropdown';
 import { AssigneeAvatar, AssigneeIdentity } from '../ui/AssigneeIdentity';
 import { TaskWorkstreamPicker } from './TaskWorkstreamPicker';
-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 }) => {
+import { DocumentTypeIcon } from '../ui/DocumentTypeIcon';
+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;
@@ -70,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(() => {
@@ -98,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 : '',
@@ -195,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);
@@ -228,6 +277,29 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
             workspaceId,
         });
     };
+    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'
+            && isImageAttachment(attachment))) || null;
+    })();
+    const cardCoverIdentity = cardCoverAttachment
+        ? `${cardCoverAttachment.assetId || ''}:${cardCoverAttachment.path}`
+        : '';
+    const cardAttachments = (task.attachments || []).filter((attachment) => (!cardCoverAttachment
+        || typeof attachment === 'string'
+        || attachment.assetId !== cardCoverAttachment.assetId));
+    const [cardCoverLoadFailed, setCardCoverLoadFailed] = React.useState(false);
+    React.useEffect(() => {
+        setCardCoverLoadFailed(false);
+    }, [cardCoverIdentity]);
     return (_jsxs("div", { className: cardClasses, onClick: () => onClick?.(task), style: cardStyle, "data-task-card": "true", children: [_jsxs("div", { className: cardStyles.taskHeader, children: [selectable && (_jsx("label", { className: cardStyles.selectionControl, onClick: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), children: _jsx("input", { type: "checkbox", checked: selected, onChange: (event) => onSelectionChange?.(event.target.checked), "aria-label": `Select ${taskReferenceLabel || task.title} for restore` }) })), _jsxs("div", { className: cardStyles.taskReferenceCluster, children: [taskInitiative ? (_jsxs(_Fragment, { children: [_jsx(TaskReferenceBadge, { copied: copiedId === initiativeReferenceLabel, onClick: (event) => handleReferenceCopy(event, initiativeReferenceLabel), disabled: !initiativeReferenceLabel, title: taskInitiative.title, ariaLabel: `Copy initiative reference ${initiativeReferenceLabel}: ${taskInitiative.title}`, className: isArchived ? cardStyles.archiveBadge : '', label: initiativeReferenceLabel }), _jsx("span", { className: cardStyles.taskReferenceDivider, children: "/" })] })) : null, taskWorkstream ? (_jsxs(_Fragment, { children: [_jsx(TaskReferenceBadge, { copied: copiedId === workstreamReferenceLabel, onClick: (event) => handleReferenceCopy(event, workstreamReferenceLabel), disabled: !workstreamReferenceLabel, title: taskWorkstream.title, ariaLabel: `Copy workstream reference ${workstreamReferenceLabel}: ${taskWorkstream.title}`, className: isArchived ? cardStyles.archiveBadge : '', label: workstreamReferenceLabel }), _jsx("span", { className: cardStyles.taskReferenceDivider, children: "/" })] })) : null, canChangeWorkstream && !taskWorkstream ? (_jsx("div", { className: cardStyles.taskReferenceSegment, onClick: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(TaskWorkstreamPicker, { workstreams: workstreams, disabled: workstreamChangeBusy, onSelect: (workstream) => {
                                         void handleWorkstreamChange(workstream.id);
                                     } }) })) : null, taskReferenceLabel ? (_jsx("div", { className: cardStyles.taskReferenceSegment, onClick: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(TaskReferenceBadge, { copied: canCopyTaskReference && copiedId === taskReference.label, onClick: (e) => handleReferenceCopy(e, taskReference.label), disabled: !canCopyTaskReference, title: isProvisionalReference
@@ -256,7 +328,20 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
                                 }
                             }, onArchiveTask: onArchiveTask })) : ((onUnarchive || onDelete) ? (_jsxs(_Fragment, { children: [onUnarchive && (_jsx("button", { type: "button", className: styles.actionBtn, onClick: () => onUnarchive(task.id), title: resolvedReadOnlyMode === 'deleted'
                                         ? `Restore to ${task.isArchived === true ? 'Archived' : 'Active'}`
-                                        : 'Restore archived task', children: _jsx(Icons.RotateCcw, { size: 16 }) })), onDelete && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.deleteBtn}`, onClick: () => onDelete(task.id), title: deleteActionTitle || (resolvedReadOnlyMode === 'deleted' ? 'Delete Permanently' : 'Move to Trash'), children: _jsx(Icons.Trash2, { size: 16 }) }))] })) : null) })] }), _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 }) }))] }), task.attachments && task.attachments.length > 0 && !isReadOnly && !compressed && (_jsxs("div", { className: cardStyles.attachmentThumbnails, children: [_jsx("div", { className: cardStyles.attachmentImageRow, children: (task.attachments || []).map((attachment, idx) => {
+                                        : 'Restore archived task', children: _jsx(Icons.RotateCcw, { size: 16 }) })), onDelete && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.deleteBtn}`, onClick: () => onDelete(task.id), title: deleteActionTitle || (resolvedReadOnlyMode === 'deleted' ? 'Delete Permanently' : 'Move to Trash'), children: _jsx(Icons.Trash2, { size: 16 }) }))] })) : null) })] }), cardCoverAttachment && !cardCoverLoadFailed && (_jsx("button", { type: "button", className: cardStyles.taskCover, "aria-label": `Preview ${getContextName(cardCoverAttachment)}`, onPointerDown: (event) => event.stopPropagation(), onClick: (event) => {
+                    event.stopPropagation();
+                    if (handleAttachmentActivation(cardCoverAttachment))
+                        return;
+                    if (dispatchOpenAnnotatedAttachment(cardCoverAttachment, {
+                        taskId: task.id,
+                        taskReferenceLabel,
+                    }))
+                        return;
+                    window.open(cardCoverAttachment.path, '_blank');
+                }, 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 })), 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;
@@ -268,13 +353,14 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
                                                 return;
                                             window.open(path, '_blank');
                                         }, children: _jsx("img", { src: path, alt: `Attachment ${idx}` }) }, idx));
-                                }) }), _jsx("div", { className: cardStyles.attachmentDocumentList, children: (task.attachments || []).map((attachment, idx) => {
+                                }) }), _jsx("div", { className: cardStyles.attachmentDocumentList, children: cardAttachments.map((attachment, idx) => {
                                     const path = typeof attachment === 'string' ? attachment : attachment.path;
                                     const fsPath = typeof attachment === 'string' ? undefined : attachment.fsPath;
                                     const name = getContextName(attachment);
                                     if (isImageAttachment(attachment))
                                         return null;
                                     const fileType = getContextType(attachment);
+                                    const fileAccentColor = getFileTypeAccentColor(fileType);
                                     return (_jsxs("button", { type: "button", className: cardStyles.contextDocThumb, onPointerDown: (event) => event.stopPropagation(), onClick: (e) => {
                                             e.stopPropagation();
                                             if (handleAttachmentActivation(attachment))
@@ -285,8 +371,10 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
                                             if (dispatchOpenMarkdownDocument(markdownTarget, fsPath))
                                                 return;
                                             window.open(path, '_blank');
-                                        }, title: name, style: { '--context-doc-accent': getFileTypeAccentColor(fileType) }, children: [_jsxs("span", { className: cardStyles.contextDocMain, children: [_jsx("span", { className: cardStyles.contextDocIcon, "aria-hidden": "true", children: _jsx(File, { size: 13 }) }), _jsx("span", { className: cardStyles.contextDocText, children: _jsx("span", { className: cardStyles.contextDocName, children: name }) })] }), _jsx("span", { className: cardStyles.contextDocType, children: fileType })] }, 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 => {
+                                        }, 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)] })), 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;
@@ -331,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/TaskContextUpload.d.ts

@@ -9,6 +9,9 @@ interface TaskContextUploadProps {
     onAddContextFile: (file: AttachmentItem) => void;
     onRemoveContextFile: (index: number) => void;
     onUpdateContextCaption: (index: number, caption: string) => void;
+    cardCoverAssetId?: string | null;
+    onSetCardCover?: (assetId: string | null) => void | Promise<void>;
+    cardCoverDisabled?: boolean;
 }
 export declare function TaskContextUpload(props: TaskContextUploadProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/task/TaskContextUpload.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ContextAttachmentManager } from '../context/ContextAttachmentManager';
 import { TaskImageReviews } from './TaskImageReviews';
 export function TaskContextUpload(props) {
-    const { taskId, taskReferenceLabel, workspaceId, apiBaseUrl, showImageReviews = false, contextFiles, onAddContextFile, onRemoveContextFile, onUpdateContextCaption, } = props;
-    return (_jsx(ContextAttachmentManager, { ownerType: "task", ownerId: taskId, ownerReferenceLabel: taskReferenceLabel, workspaceId: workspaceId, apiBaseUrl: apiBaseUrl, attachments: contextFiles, onAddAttachment: onAddContextFile, onRemoveAttachment: onRemoveContextFile, onUpdateAttachmentCaption: onUpdateContextCaption, supplementalContent: showImageReviews && taskId && workspaceId ? (_jsx(TaskImageReviews, { taskId: taskId, taskReferenceLabel: taskReferenceLabel, workspaceId: workspaceId, apiBaseUrl: apiBaseUrl })) : null }));
+    const { taskId, taskReferenceLabel, workspaceId, apiBaseUrl, showImageReviews = false, contextFiles, onAddContextFile, onRemoveContextFile, onUpdateContextCaption, cardCoverAssetId, onSetCardCover, cardCoverDisabled, } = props;
+    return (_jsx(ContextAttachmentManager, { ownerType: "task", ownerId: taskId, ownerReferenceLabel: taskReferenceLabel, workspaceId: workspaceId, apiBaseUrl: apiBaseUrl, attachments: contextFiles, onAddAttachment: onAddContextFile, onRemoveAttachment: onRemoveContextFile, onUpdateAttachmentCaption: onUpdateContextCaption, cardCoverAssetId: cardCoverAssetId, onSetCardCover: onSetCardCover, cardCoverDisabled: cardCoverDisabled, supplementalContent: showImageReviews && taskId && workspaceId ? (_jsx(TaskImageReviews, { taskId: taskId, taskReferenceLabel: taskReferenceLabel, workspaceId: workspaceId, apiBaseUrl: apiBaseUrl })) : null }));
 }

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

@@ -22,6 +22,7 @@ interface TaskFormProps {
     newCommentText: string;
     contextFiles: Array<string | AttachmentItem>;
     currentWorkspaceId?: string | null;
+    descriptionImageDraftId?: string | null;
     currentActorId?: string | null;
     apiBaseUrl?: string;
     runtimeMode?: 'local' | 'cloud';
@@ -73,9 +74,12 @@ interface TaskFormProps {
     onOpenSettings?: (section: "categories" | "types") => void;
     onSubmit: (e: React.FormEvent) => void;
     onAddComment: () => void;
+    onDescriptionImageUploadStart?: (upload: Promise<void>) => void;
     onAddContextFile: (file: AttachmentItem) => void;
     onRemoveContextFile: (index: number) => void;
     onUpdateContextCaption: (index: number, caption: string) => void;
+    onSetCardCover?: (assetId: string | null) => void | Promise<void>;
+    cardCoverDisabled?: boolean;
     onOpenContextImage?: (attachment: AttachmentItem) => void;
     onCopyId: (e: React.MouseEvent, id: string) => void;
     onToggleInProgress?: (task: TaskItem) => void;

package/dist/components/task/TaskForm.js

@@ -50,7 +50,7 @@ function SortableChecklistRow({ id, item, onToggle, onRemove, }) {
                     : "Mark checklist item complete", children: item.isCompleted ? _jsx(Check, { size: 14, strokeWidth: 2.1 }) : null }), _jsx("span", { className: `${formStyles.checklistItemText} ${item.isCompleted ? formStyles.checklistItemTextCompleted : ""}`.trim(), children: item.title }), _jsx("button", { type: "button", className: formStyles.checklistRemoveBtn, onClick: onRemove, title: "Remove checklist item", "aria-label": "Remove checklist item", children: _jsx(X, { size: 15, strokeWidth: 1.9 }) })] }));
 }
 export function TaskForm(props) {
-    const { editingTaskId, initialActivityEntryId, title, description, category, type, priority, complexity, manualComplexityEnabled = false, assignee, scheduledDate, dueDate, checklistItems, comments, newCommentText, contextFiles, currentWorkspaceId, currentActorId, apiBaseUrl, runtimeMode = 'local', showImageReviews = false, descriptionFocused, showMarkdownHelp, checklistEnabled = true, formTaxonomies, onTaxonomyChange, onOpenSettings, categories, types, priorities, taxonomyDisplayLabels, assigneeOptions, taxonomies, workstreams = [], initiatives = [], copiedId, onTitleChange, onTitleDraftChange, onDescriptionChange, onDescriptionDraftChange, onCategoryChange, onTypeChange, onPriorityChange, onComplexityChange, onAssigneeChange, onScheduledDateChange, onDueDateChange, onChecklistItemsChange, onNewCommentTextChange, onDescriptionFocusedChange, onShowMarkdownHelpChange, onSubmit, onAddComment, onAddContextFile, onRemoveContextFile, onUpdateContextCaption, onOpenContextImage, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, taskReferences, currentTask, commentsEndRef, } = props;
+    const { editingTaskId, initialActivityEntryId, title, description, category, type, priority, complexity, manualComplexityEnabled = false, assignee, scheduledDate, dueDate, checklistItems, comments, newCommentText, contextFiles, currentWorkspaceId, descriptionImageDraftId, currentActorId, apiBaseUrl, runtimeMode = 'local', showImageReviews = false, descriptionFocused, showMarkdownHelp, checklistEnabled = true, formTaxonomies, onTaxonomyChange, onOpenSettings, categories, types, priorities, taxonomyDisplayLabels, assigneeOptions, taxonomies, workstreams = [], initiatives = [], copiedId, onTitleChange, onTitleDraftChange, onDescriptionChange, onDescriptionDraftChange, onCategoryChange, onTypeChange, onPriorityChange, onComplexityChange, onAssigneeChange, onScheduledDateChange, onDueDateChange, onChecklistItemsChange, onNewCommentTextChange, onDescriptionFocusedChange, onShowMarkdownHelpChange, onSubmit, onAddComment, onDescriptionImageUploadStart, onAddContextFile, onRemoveContextFile, onUpdateContextCaption, onSetCardCover, cardCoverDisabled, onOpenContextImage, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, taskReferences, currentTask, commentsEndRef, } = props;
     const emitTitleDraftChange = onTitleDraftChange || onTitleChange;
     const emitDescriptionDraftChange = onDescriptionDraftChange || onDescriptionChange;
     const currentTaskReferenceLabel = getTaskReferenceLabel(currentTask);
@@ -66,6 +66,7 @@ export function TaskForm(props) {
         descriptionImageGenerationRef.current += 1;
     }
     const [descriptionImageUploading, setDescriptionImageUploading] = React.useState(false);
+    const descriptionImageUploadRef = React.useRef(null);
     const [descriptionImageError, setDescriptionImageError] = React.useState(null);
     React.useLayoutEffect(() => {
         const taskChanged = textDraftOwnerRef.current !== editingTaskId;
@@ -80,6 +81,7 @@ export function TaskForm(props) {
         textDraftOwnerRef.current = editingTaskId;
     }, [description, editingTaskId, title]);
     React.useEffect(() => {
+        descriptionImageUploadRef.current = null;
         setDescriptionImageUploading(false);
         setDescriptionImageError(null);
         return () => {
@@ -260,14 +262,11 @@ export function TaskForm(props) {
             window.requestAnimationFrame(() => checklistAddTriggerRef.current?.focus());
         }
     };
-    const addDescriptionImages = async (files, selectionStart, selectionEnd) => {
-        if (files.length === 0 || descriptionImageUploading)
-            return;
+    const performDescriptionImageUpload = async (files, selectionStart, selectionEnd) => {
         const uploadGeneration = descriptionImageGenerationRef.current;
         const uploadOwnerId = editingTaskId;
         const uploadIsCurrent = () => descriptionImageGenerationRef.current === uploadGeneration &&
             descriptionImageOwnerRef.current === descriptionImageOwnerKey;
-        setDescriptionImageUploading(true);
         setDescriptionImageError(null);
         const uploadedReferences = [];
         let failedCount = 0;
@@ -283,6 +282,12 @@ export function TaskForm(props) {
                     ownerType: "task",
                     ownerId: uploadOwnerId,
                     workspaceId: currentWorkspaceId,
+                    ...(!uploadOwnerId && descriptionImageDraftId
+                        ? {
+                            draftUploadId: descriptionImageDraftId,
+                            uploadPurpose: "task-description-draft",
+                        }
+                        : {}),
                 });
                 if (!uploadIsCurrent())
                     return;
@@ -338,7 +343,27 @@ export function TaskForm(props) {
                     : "The images could not be added.");
             setDescriptionImageError(failureMessage);
         }
-        setDescriptionImageUploading(false);
+    };
+    const addDescriptionImages = (files, selectionStart, selectionEnd) => {
+        if (files.length === 0 || descriptionImageUploadRef.current) {
+            return descriptionImageUploadRef.current || Promise.resolve();
+        }
+        setDescriptionImageUploading(true);
+        const upload = performDescriptionImageUpload(files, selectionStart, selectionEnd);
+        descriptionImageUploadRef.current = upload;
+        onDescriptionImageUploadStart?.(upload);
+        void upload.then(() => {
+            if (descriptionImageUploadRef.current !== upload)
+                return;
+            descriptionImageUploadRef.current = null;
+            setDescriptionImageUploading(false);
+        }, () => {
+            if (descriptionImageUploadRef.current !== upload)
+                return;
+            descriptionImageUploadRef.current = null;
+            setDescriptionImageUploading(false);
+        });
+        return upload;
     };
     const getDescriptionClipboardImages = (dataTransfer) => Array.from(dataTransfer.items)
         .filter((item) => item.kind === "file" &&
@@ -855,7 +880,7 @@ export function TaskForm(props) {
                                                                         .map((entry, entryIndex) => ({
                                                                         ...entry,
                                                                         order: entryIndex,
-                                                                    }))) }, item.id || `checklist-${index}`))) }) }))] }))] }))] }), _jsxs("div", { children: [_jsx(React.Suspense, { fallback: null, children: _jsx(DeferredTaskContextUpload, { taskId: editingTaskId, taskReferenceLabel: currentTaskReferenceLabel, workspaceId: currentWorkspaceId, apiBaseUrl: apiBaseUrl, showImageReviews: showImageReviews && Boolean(currentTask), contextFiles: contextFiles, onAddContextFile: onAddContextFile, onRemoveContextFile: onRemoveContextFile, onUpdateContextCaption: onUpdateContextCaption }) }), _jsx("div", { className: `${formStyles.taskFormLifecycle} ${formStyles.taskFormMetaDivider}`, children: _jsx("div", { className: formStyles.taskFormMetaGrid, children: currentTask && (_jsxs(_Fragment, { children: [_jsxs("div", { className: formStyles.taskFormDateRow, children: [_jsx("span", { className: formStyles.taskFormDateLabel, children: t("taskForm.createdLabel") }), _jsxs("span", { className: formStyles.taskFormMetaStack, children: [_jsx("span", { className: formStyles.taskFormDateValue, children: createdLabel || t("taskForm.emptyValue") }), _jsx("span", { className: formStyles.taskFormMetaActor, children: createdByLabel
+                                                                    }))) }, item.id || `checklist-${index}`))) }) }))] }))] }))] }), _jsxs("div", { children: [_jsx(React.Suspense, { fallback: null, children: _jsx(DeferredTaskContextUpload, { taskId: editingTaskId, taskReferenceLabel: currentTaskReferenceLabel, workspaceId: currentWorkspaceId, apiBaseUrl: apiBaseUrl, showImageReviews: showImageReviews && Boolean(currentTask), contextFiles: contextFiles, onAddContextFile: onAddContextFile, onRemoveContextFile: onRemoveContextFile, onUpdateContextCaption: onUpdateContextCaption, cardCoverAssetId: currentTask?.cardCoverAssetId, onSetCardCover: onSetCardCover, cardCoverDisabled: cardCoverDisabled }) }), _jsx("div", { className: `${formStyles.taskFormLifecycle} ${formStyles.taskFormMetaDivider}`, children: _jsx("div", { className: formStyles.taskFormMetaGrid, children: currentTask && (_jsxs(_Fragment, { children: [_jsxs("div", { className: formStyles.taskFormDateRow, children: [_jsx("span", { className: formStyles.taskFormDateLabel, children: t("taskForm.createdLabel") }), _jsxs("span", { className: formStyles.taskFormMetaStack, children: [_jsx("span", { className: formStyles.taskFormDateValue, children: createdLabel || t("taskForm.emptyValue") }), _jsx("span", { className: formStyles.taskFormMetaActor, children: createdByLabel
                                                                                 ? `by ${createdByLabel}`
                                                                                 : t("taskForm.emptyValue") })] })] }), _jsxs("div", { className: formStyles.taskFormDateRow, children: [_jsx("span", { className: formStyles.taskFormDateLabel, children: t("taskForm.updatedLabel") }), _jsxs("span", { className: formStyles.taskFormMetaStack, children: [_jsx("span", { className: formStyles.taskFormDateValue, children: updatedLabel || t("taskForm.emptyValue") }), _jsx("span", { className: formStyles.taskFormMetaActor, children: updatedByLabel
                                                                                 ? `by ${updatedByLabel}`

package/dist/components/task/TaskImageReviews.js

@@ -1,47 +1,56 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 (_jsxs("section", { className: styles.group, "aria-label": "Image reviews", children: [_jsxs("div", { className: "tf-heading-section", children: ["Image reviews", reviews ? ` (${reviews.length})` : ''] }), 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) => {
-                    const image = review.image;
-                    const markerCount = review.annotations.length;
-                    const canOpen = Boolean(image?.assetId && image.apiUrl);
-                    return (_jsxs("button", { type: "button", className: styles.review, disabled: !canOpen, onClick: () => {
-                            if (!image)
-                                return;
-                            dispatchOpenAnnotatedAttachment({
-                                assetId: image.assetId,
-                                path: image.apiUrl,
-                                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: "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));
-                }) }))] }));
+    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);
+                return (_jsxs("button", { type: "button", className: styles.review, disabled: !canOpen, onClick: () => {
+                        if (!image)
+                            return;
+                        dispatchOpenAnnotatedAttachment({
+                            assetId: image.assetId,
+                            path: image.apiUrl,
+                            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: [[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 {};