@taskforcehq/taskforce 0.3.327 → 0.3.328

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

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { AlertTriangle, Archive, ArrowUpDown, ChevronLeft, Eye, EyeOff, Filter, Link2, Loader2, Pencil, Plus, RotateCcw, Search, Unlink, X, } from 'lucide-react';
 import { TASK_ASSIGNEE_UNASSIGNED_COLOR, TASK_ASSIGNEE_UNASSIGNED_ICON, } from '../../../utils/assignees';
@@ -10,6 +10,7 @@ import { TaxonomyDropdown } from '../../ui/TaxonomyDropdown';
 import { PlanningOwnerDropdown, normalizePlanningOwnerOptions, } from './PlanningOwnerDropdown';
 import { buildPlanningNavigatorResults, PLANNING_NAVIGATOR_SORT_OPTIONS, } from './planningNavigator';
 import { PlanningEntitySummary, PlanningReferenceBadge, } from './PlanningEntitySummary';
+import { PlanningVisualIdentity } from './PlanningVisualIdentity';
 import { PlanningTaskCard } from './PlanningTaskCard';
 import { PlanningTaskArrangeControl } from './PlanningTaskArrangeControl';
 import planningDropdownStyles from './PlanningDropdownControl.module.css';
@@ -29,6 +30,8 @@ function PlanningWorkspaceEditor({ entityType, mode, initialTitle = '', initialD
     const [title, setTitle] = React.useState(initialTitle);
     const [description, setDescription] = React.useState(initialDescription);
     const [ownerId, setOwnerId] = React.useState('');
+    const [icon, setIcon] = React.useState(null);
+    const [color, setColor] = React.useState(null);
     const [titleError, setTitleError] = React.useState(null);
     const [saveError, setSaveError] = React.useState(null);
     const [isSaving, setIsSaving] = React.useState(false);
@@ -57,6 +60,7 @@ function PlanningWorkspaceEditor({ entityType, mode, initialTitle = '', initialD
                 ...(entityType === 'workstream' && mode === 'create'
                     ? { initiativeId: fixedInitiativeId || null }
                     : {}),
+                ...(mode === 'create' && (icon || color) ? { icon, color } : {}),
             });
         }
         catch (error) {
@@ -72,7 +76,12 @@ function PlanningWorkspaceEditor({ entityType, mode, initialTitle = '', initialD
                 return;
             event.preventDefault();
             onCancel();
-        }, noValidate: true, children: [_jsxs("div", { className: styles.workspaceEditorField, children: [_jsxs("label", { htmlFor: titleInputId, children: [label, " title"] }), _jsx("input", { ref: titleInputRef, id: titleInputId, value: title, disabled: isSaving, required: true, "aria-invalid": titleError ? 'true' : undefined, "aria-describedby": titleError ? titleErrorId : undefined, onChange: (event) => {
+        }, noValidate: true, children: [mode === 'create' ? (_jsxs("div", { className: styles.workspaceEditorIdentity, children: [_jsx(PlanningVisualIdentity, { entityType: entityType, entityId: "create-preview", icon: icon, color: color || 'blue', size: "detail", onChange: (patch) => {
+                            if (Object.prototype.hasOwnProperty.call(patch, 'icon'))
+                                setIcon(patch.icon ?? null);
+                            if (Object.prototype.hasOwnProperty.call(patch, 'color'))
+                                setColor(patch.color ?? null);
+                        } }), _jsx("span", { children: "Choose an icon and color" })] })) : null, _jsxs("div", { className: styles.workspaceEditorField, children: [_jsxs("label", { htmlFor: titleInputId, children: [label, " title"] }), _jsx("input", { ref: titleInputRef, id: titleInputId, value: title, disabled: isSaving, required: true, "aria-invalid": titleError ? 'true' : undefined, "aria-describedby": titleError ? titleErrorId : undefined, onChange: (event) => {
                             setTitle(event.target.value);
                             if (titleError)
                                 setTitleError(null);
@@ -80,24 +89,24 @@ function PlanningWorkspaceEditor({ entityType, mode, initialTitle = '', initialD
                             ? 'Describe the broader outcome this initiative is meant to achieve.'
                             : 'Describe the lane of work this workstream will coordinate.' })] }), mode === 'create' && ownerOptions ? (_jsxs("div", { className: styles.workspaceEditorField, children: [_jsxs("span", { children: [label, " owner"] }), _jsx(PlanningOwnerDropdown, { value: ownerId, options: ownerOptions, onChange: setOwnerId, disabled: isSaving, ariaLabel: `${label} owner`, className: `${planningDropdownStyles.control} ${styles.selectedEntityOwnerDropdown}` })] })) : null, saveError ? _jsx("p", { className: "tf-text-error", role: "alert", children: saveError }) : null, showActions ? _jsxs("div", { className: styles.workspaceEditorActions, children: [_jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: onCancel, disabled: isSaving, children: "Cancel" }), _jsxs("button", { type: "submit", className: "tf-button-primary tf-button-compact", disabled: isSaving, children: [isSaving ? _jsx(Loader2, { size: 14, className: styles.spinner, "aria-hidden": "true" }) : null, mode === 'create' ? `Create ${label}` : 'Save'] })] }) : null] }));
 }
-function InitiativeButton({ initiative, ownerOption, ownerOptions, workstreamCount, selected, onSelect, onChangeOwner, }) {
+function InitiativeButton({ initiative, ownerOption, ownerOptions, workstreamCount, selected, onSelect, onChangeOwner, onChangeIdentity, }) {
     return (_jsxs("div", { className: `${styles.entityCard} ${initiative.isArchived ? styles.entityCardArchived : ''} ${selected ? styles.entityCardSelected : ''}`.trim(), children: [_jsx(PlanningReferenceBadge, { label: formatInitiativeReference(initiative), entityType: "initiative", entityName: initiative.title, interactive: false }), _jsx("div", { className: styles.entityCardBody, children: _jsx("div", { role: "button", tabIndex: 0, className: styles.entityCardContentButton, onClick: onSelect, onKeyDown: (event) => {
                         if (event.key !== 'Enter' && event.key !== ' ')
                             return;
                         event.preventDefault();
                         onSelect();
-                    }, "aria-pressed": selected, children: _jsx(PlanningEntitySummary, { item: initiative, entityType: "initiative", workstreamCount: workstreamCount, ownerOption: ownerOption, ownerOptions: ownerOptions, onChangeOwner: onChangeOwner }) }) })] }));
+                    }, "aria-pressed": selected, children: _jsx(PlanningEntitySummary, { item: initiative, entityType: "initiative", workstreamCount: workstreamCount, ownerOption: ownerOption, ownerOptions: ownerOptions, onChangeOwner: onChangeOwner, onChangeIdentity: onChangeIdentity }) }) })] }));
 }
-function WorkstreamButton({ workstream, ownerOption, ownerOptions, selected, onSelect, onChangeOwner, referenceAction, feedback, }) {
+function WorkstreamButton({ workstream, ownerOption, ownerOptions, selected, onSelect, onChangeOwner, onChangeIdentity, referenceAction, feedback, }) {
     const referenceLabel = formatWorkstreamReference(workstream);
     return (_jsxs("div", { className: `${styles.entityCard} ${workstream.isArchived ? styles.entityCardArchived : ''} ${selected ? styles.entityCardSelected : ''}`.trim(), children: [_jsxs("div", { className: styles.entityCardTopRow, children: [referenceAction, _jsx(PlanningReferenceBadge, { label: referenceLabel || 'Reference pending', entityType: "workstream", entityName: workstream.title, interactive: false, pending: !referenceLabel })] }), feedback, _jsx("div", { className: styles.entityCardBody, children: _jsx("div", { role: "button", tabIndex: 0, className: styles.entityCardContentButton, onClick: onSelect, onKeyDown: (event) => {
                         if (event.key !== 'Enter' && event.key !== ' ')
                             return;
                         event.preventDefault();
                         onSelect();
-                    }, "aria-pressed": selected, children: _jsx(PlanningEntitySummary, { item: workstream, entityType: "workstream", ownerOption: ownerOption, ownerOptions: ownerOptions, onChangeOwner: onChangeOwner }) }) })] }));
+                    }, "aria-pressed": selected, children: _jsx(PlanningEntitySummary, { item: workstream, entityType: "workstream", ownerOption: ownerOption, ownerOptions: ownerOptions, onChangeOwner: onChangeOwner, onChangeIdentity: onChangeIdentity }) }) })] }));
 }
-function SelectedEntityContext({ item, entityType, ownerOptions, onChangeOwner, workspaceId, currentActorId, taskReferences, hydrationState, onRetryHydration, onAddContextFile, onRemoveContextFile, onUpdateContextCaption, onUpdate, onArchive, onUnarchive, referenceAction, relationshipActions, relationshipContent, }) {
+function SelectedEntityContext({ item, entityType, ownerOptions, onChangeOwner, onChangeIdentity, workspaceId, currentActorId, taskReferences, hydrationState, onRetryHydration, onAddContextFile, onRemoveContextFile, onUpdateContextCaption, onUpdate, onArchive, onUnarchive, referenceAction, relationshipActions, relationshipContent, }) {
     const label = entityType === 'initiative' ? 'Initiative' : 'Workstream';
     const referenceLabel = entityType === 'initiative'
         ? formatInitiativeReference(item)
@@ -181,7 +190,9 @@ function SelectedEntityContext({ item, entityType, ownerOptions, onChangeOwner,
             setArchiveBusy(false);
         }
     };
-    return (_jsxs("section", { className: `${styles.selectedEntityContext} ${item.isArchived ? styles.selectedEntityContextArchived : ''}`.trim(), "aria-label": `Selected ${label.toLowerCase()}`, "aria-busy": hydrationState?.status === 'loading', children: [_jsxs("div", { className: styles.selectedEntityReferenceRow, children: [_jsxs("div", { className: styles.selectedEntityReferenceIdentity, children: [referenceAction, _jsx(PlanningReferenceBadge, { label: referenceLabel || 'Reference pending', entityType: entityType, entityName: item.title, interactive: false, pending: !referenceLabel })] }), _jsxs("div", { className: styles.selectedEntityReferenceActions, children: [_jsx("span", { children: label }), relationshipActions, !isEditing && (onArchive || onUnarchive) ? (_jsx("button", { type: "button", className: "tf-control-icon", disabled: archiveBusy
+    return (_jsxs("section", { className: `${styles.selectedEntityContext} ${item.isArchived ? styles.selectedEntityContextArchived : ''}`.trim(), "aria-label": `Selected ${label.toLowerCase()}`, "aria-busy": hydrationState?.status === 'loading', children: [_jsxs("div", { className: styles.selectedEntityReferenceRow, children: [_jsxs("div", { className: styles.selectedEntityReferenceIdentity, children: [_jsx(PlanningVisualIdentity, { entityType: entityType, entityId: item.id, icon: item.icon, color: item.color, size: "detail", disabled: Boolean(item.isArchived), onChange: onChangeIdentity
+                                    ? (patch) => onChangeIdentity(entityType, item.id, patch)
+                                    : undefined }), referenceAction, _jsx(PlanningReferenceBadge, { label: referenceLabel || 'Reference pending', entityType: entityType, entityName: item.title, interactive: false, pending: !referenceLabel })] }), _jsxs("div", { className: styles.selectedEntityReferenceActions, children: [_jsx("span", { children: label }), relationshipActions, !isEditing && (onArchive || onUnarchive) ? (_jsx("button", { type: "button", className: "tf-control-icon", disabled: archiveBusy
                                     || archiveState.mode === 'blocked'
                                     || archiveState.mode === 'checking'
                                     || (archiveState.mode === 'archived' ? !onUnarchive : !onArchive), onClick: () => void handleArchiveAction(), "aria-label": archiveActionLabel, title: archiveActionLabel, "aria-expanded": archiveState.mode === 'ready'
@@ -500,12 +511,16 @@ export function PlanningModule({ model }) {
     return (_jsxs("main", { className: styles.module, "aria-label": "Planning workspace", "aria-busy": model.loadState.isRefreshing, children: [model.loadState.isRefreshing ? (_jsx("span", { className: styles.visuallyHidden, role: "status", "aria-live": "polite", children: "Refreshing planning" })) : null, (model.loadState.status === 'partial' || model.loadState.status === 'error') && (_jsxs("div", { className: styles.inlineError, role: "alert", children: [_jsx(AlertTriangle, { size: 16 }), _jsx("span", { children: model.loadState.error || 'Some planning information could not be loaded.' }), _jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: model.retry, children: "Retry" })] })), _jsxs("div", { className: styles.columns, "data-active-pane": activePane, children: [_jsxs("section", { className: `${styles.column} ${styles.columnPortfolio} ${activePane === 'portfolio' ? styles.columnActive : ''}`.trim(), "aria-labelledby": "planning-portfolio-heading", children: [_jsxs("div", { className: styles.columnHeader, children: [_jsx("h2", { ref: portfolioHeadingRef, id: "planning-portfolio-heading", className: `tf-heading-section ${styles.paneHeading}`, tabIndex: -1, children: "Portfolio" }), _jsxs("div", { className: styles.headerActions, children: [_jsx("span", { children: visibleInitiatives.length + visibleStandaloneWorkstreams.length }), _jsx("button", { type: "button", className: `tf-control-icon ${showArchivedPlanning ? styles.controlActive : ''}`.trim(), onClick: () => setShowArchivedPlanning((current) => !current), disabled: !hasArchivedPlanning, "aria-label": showArchivedPlanning ? 'Hide archived planning items' : 'Show archived planning items', "aria-pressed": showArchivedPlanning, title: hasArchivedPlanning ? (showArchivedPlanning ? 'Hide archived planning items' : 'Show archived planning items') : 'No archived planning items', children: showArchivedPlanning ? _jsx(EyeOff, { size: 15, "aria-hidden": "true" }) : _jsx(Eye, { size: 15, "aria-hidden": "true" }) })] })] }), _jsxs("div", { className: styles.portfolioControls, children: [_jsxs("div", { className: styles.searchRow, children: [_jsxs("div", { className: styles.searchShell, children: [_jsx(Search, { size: 14, "aria-hidden": "true" }), _jsx("input", { type: "search", value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), placeholder: "Search initiatives and workstreams", "aria-label": "Search planning" }), searchQuery ? (_jsx("button", { type: "button", className: styles.clearSearch, onClick: () => setSearchQuery(''), "aria-label": "Clear planning search", title: "Clear search", children: _jsx(X, { size: 13, "aria-hidden": "true" }) })) : null] }), _jsx("button", { type: "button", className: `tf-control-icon ${filtersExpanded || ownerFilter !== 'all' || sort !== 'default' ? styles.controlActive : ''}`.trim(), "aria-label": "Filter and sort planning", title: "Filter and sort planning", "aria-expanded": filtersExpanded, "aria-controls": "planning-workspace-navigator-options", onClick: () => setFiltersExpanded((current) => !current), children: _jsx(Filter, { size: 15, "aria-hidden": "true" }) })] }), filtersExpanded ? (_jsxs("div", { id: "planning-workspace-navigator-options", className: styles.filterPanel, children: [_jsxs("div", { className: styles.filterField, children: [_jsx("span", { className: styles.filterLabel, children: "Owner" }), _jsx(PlanningOwnerDropdown, { value: ownerFilter, options: model.assigneeOptions, leadingOptions: ownerFilterLeadingOptions, includeUnassigned: false, onChange: setOwnerFilter, disabled: false, ariaLabel: "Filter planning by owner", className: styles.filterDropdown })] }), _jsxs("div", { className: styles.filterField, children: [_jsx("span", { className: styles.filterLabel, children: "Sort" }), _jsx(TaxonomyDropdown, { value: sort, options: PLANNING_NAVIGATOR_SORT_OPTIONS, onChange: (value) => setSort(String(value)), ariaLabel: "Sort planning", className: styles.filterDropdown, portalPanel: true, panelAlign: "start", triggerContent: (_jsxs("span", { className: styles.sortTrigger, children: [_jsx(ArrowUpDown, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: PLANNING_NAVIGATOR_SORT_OPTIONS.find((option) => option.value === sort)?.label })] })), renderOptionContent: (option) => option.label })] }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: clearNavigator, disabled: !hasAdjustedNavigator, "aria-label": "Reset planning filters and sort", title: "Reset planning filters and sort", children: _jsx(RotateCcw, { size: 14, "aria-hidden": "true" }) })] })) : null] }), _jsxs("div", { className: styles.scrollRegion, children: [_jsxs("div", { className: styles.sectionHeadingRow, children: [_jsx("h3", { className: `tf-heading-section ${styles.sectionLabel}`, children: "Initiatives" }), model.createEntity ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: () => setCreateState({ entityType: 'initiative' }), "aria-label": "Create initiative", title: "Create initiative", children: _jsx(Plus, { size: 15, "aria-hidden": "true" }) })) : null] }), createState?.entityType === 'initiative' ? (_jsx(PlanningWorkspaceEditor, { entityType: "initiative", mode: "create", ownerOptions: model.assigneeOptions, onCancel: () => setCreateState(null), onSave: createPlanningEntity })) : null, navigatorResults.initiatives.map(({ initiative, workstreams: resultWorkstreams }) => {
                                         return (_jsx(InitiativeButton, { initiative: initiative, workstreamCount: resultWorkstreams.length, ownerOption: initiative.ownerId ? assigneeOptionByValue.get(initiative.ownerId) : undefined, ownerOptions: model.assigneeOptions, selected: selectedInitiativeId === initiative.id, onSelect: () => selectInitiative(initiative.id), onChangeOwner: model.changeOwner
                                                 ? (ownerId) => model.changeOwner?.('initiative', initiative.id, ownerId === 'unassigned' ? '' : ownerId)
+                                                : undefined, onChangeIdentity: model.changeIdentity
+                                                ? (patch) => model.changeIdentity?.('initiative', initiative.id, patch)
                                                 : undefined }, initiative.id));
                                     }), _jsxs("div", { className: styles.sectionHeadingRow, children: [_jsx("h3", { className: `tf-heading-section ${styles.sectionLabel}`, children: "Standalone workstreams" }), model.createEntity ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: () => setCreateState({ entityType: 'workstream', initiativeId: null }), "aria-label": "Create standalone workstream", title: "Create standalone workstream", children: _jsx(Plus, { size: 15, "aria-hidden": "true" }) })) : null] }), createState?.entityType === 'workstream' && !createState.initiativeId ? (_jsx(PlanningWorkspaceEditor, { entityType: "workstream", mode: "create", ownerOptions: model.assigneeOptions, fixedInitiativeId: null, onCancel: () => setCreateState(null), onSave: createPlanningEntity })) : null, visibleStandaloneWorkstreams.map((workstream) => (_jsx(WorkstreamButton, { workstream: workstream, ownerOption: workstream.ownerId ? assigneeOptionByValue.get(workstream.ownerId) : undefined, ownerOptions: model.assigneeOptions, selected: selectedWorkstreamId === workstream.id, onSelect: () => selectWorkstream(workstream), onChangeOwner: model.changeOwner
                                             ? (ownerId) => model.changeOwner?.('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId)
+                                            : undefined, onChangeIdentity: model.changeIdentity
+                                            ? (patch) => model.changeIdentity?.('workstream', workstream.id, patch)
                                             : undefined }, workstream.id))), visibleInitiatives.length === 0 && visibleStandaloneWorkstreams.length === 0 && (_jsx("p", { className: `tf-text-helper ${styles.empty}`, children: navigatorResults.hasCriteria ? 'No planning matches.' : 'No planning items yet.' }))] })] }), _jsxs("section", { className: `${styles.column} ${styles.columnWorkstreams} ${activePane === 'workstreams' ? styles.columnActive : ''}`.trim(), "aria-labelledby": "planning-workstreams-heading", children: [_jsxs("div", { className: styles.columnHeader, children: [_jsxs("div", { className: styles.columnHeadingGroup, children: [_jsx("button", { type: "button", className: `tf-control-icon ${styles.responsiveBack}`.trim(), onClick: () => navigateToPane('portfolio'), "aria-label": "Back to Portfolio", title: "Back to Portfolio", children: _jsx(ChevronLeft, { size: 15, "aria-hidden": "true" }) }), _jsxs("h2", { ref: workstreamsHeadingRef, id: "planning-workstreams-heading", className: `tf-heading-section ${styles.paneHeading}`, tabIndex: -1, children: ["Workstreams (", workstreams.length, ")"] })] }), _jsx("div", { className: styles.headerActions, children: selectedInitiative && model.createEntity ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: () => setCreateState({ entityType: 'workstream', initiativeId: selectedInitiative.id }), "aria-label": `Create workstream in ${selectedInitiative.title}`, title: "Create workstream", children: _jsx(Plus, { size: 15, "aria-hidden": "true" }) })) : null })] }), _jsxs("div", { className: styles.scrollRegion, children: [selectedInitiative ? (_jsxs(_Fragment, { children: [_jsx(SelectedEntityContext, { item: selectedInitiative, entityType: "initiative", ownerOptions: model.assigneeOptions, onChangeOwner: model.changeOwner
                                                     ? (ownerId) => model.changeOwner?.('initiative', selectedInitiative.id, ownerId)
-                                                    : undefined, workspaceId: model.currentWorkspaceId, currentActorId: model.currentOwnerId, taskReferences: model.taskReferences, hydrationState: selectedWorkstream ? undefined : selectedEntityHydrationState, onRetryHydration: model.hydrateEntity
+                                                    : undefined, onChangeIdentity: model.changeIdentity, workspaceId: model.currentWorkspaceId, currentActorId: model.currentOwnerId, taskReferences: model.taskReferences, hydrationState: selectedWorkstream ? undefined : selectedEntityHydrationState, onRetryHydration: model.hydrateEntity
                                                     ? () => { void model.hydrateEntity?.('initiative', selectedInitiative.id); }
                                                     : undefined, onAddContextFile: model.addContextFile, onRemoveContextFile: model.removeContextFile, onUpdateContextCaption: model.updateContextCaption, onUpdate: model.updateEntity
                                                     ? (input) => model.updateEntity('initiative', selectedInitiative.id, input)
@@ -515,6 +530,8 @@ export function PlanningModule({ model }) {
                                                     ? () => model.unarchiveEntity('initiative', selectedInitiative.id)
                                                     : undefined }), _jsx(PlanningLinkPicker, { options: availableWorkstreamLinks, entityLabel: "workstream", onSelect: (option) => attachRelationship('workstream', option), disabled: !model.attachWorkstreamToInitiative || isChangingRelationship })] })) : null, createState?.entityType === 'workstream' && createState.initiativeId === selectedInitiative?.id ? (_jsx(PlanningWorkspaceEditor, { entityType: "workstream", mode: "create", ownerOptions: model.assigneeOptions, fixedInitiativeId: selectedInitiative.id, onCancel: () => setCreateState(null), onSave: createPlanningEntity })) : null, workstreams.map((workstream) => (_jsx(WorkstreamButton, { workstream: workstream, ownerOption: workstream.ownerId ? assigneeOptionByValue.get(workstream.ownerId) : undefined, ownerOptions: model.assigneeOptions, selected: selectedWorkstreamId === workstream.id, onSelect: () => selectWorkstream(workstream), onChangeOwner: model.changeOwner
                                             ? (ownerId) => model.changeOwner?.('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId)
+                                            : undefined, onChangeIdentity: model.changeIdentity
+                                            ? (patch) => model.changeIdentity?.('workstream', workstream.id, patch)
                                             : undefined, referenceAction: selectedInitiative ? (_jsx(HierarchyActionBadge, { disabled: !model.assignWorkstreamToInitiative || isChangingRelationship, onClick: () => setPendingUnlink({
                                                 entityType: 'workstream',
                                                 id: workstream.id,

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

@@ -0,0 +1,14 @@
+import { type PlanningIdentityColor, type PlanningIdentityEntityType, type PlanningIdentityIcon } from '../../../shared/planningIdentity';
+export type PlanningIdentityPatch = {
+    icon?: PlanningIdentityIcon | null;
+    color?: PlanningIdentityColor | null;
+};
+export declare function PlanningVisualIdentity({ entityType, entityId, icon, color, disabled, size, onChange, }: {
+    entityType: PlanningIdentityEntityType;
+    entityId: string;
+    icon?: PlanningIdentityIcon | null;
+    color?: PlanningIdentityColor | null;
+    disabled?: boolean;
+    size?: 'card' | 'inline' | 'detail';
+    onChange?: (patch: PlanningIdentityPatch) => void | Promise<void>;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { BookOpen, Briefcase, Bug, Camera, Code, Compass, Flag, FlaskConical, Folder, Globe, Heart, Landmark, Layers, Lightbulb, Map, Music, Palette, Rocket, Route, Shield, Sparkles, Target, Users, Wrench, } from 'lucide-react';
+import { PLANNING_IDENTITY_COLORS, PLANNING_IDENTITY_ICONS, planningIdentityColorToken, resolvePlanningIdentity, } from '../../../shared/planningIdentity';
+import styles from './PlanningVisualIdentity.module.css';
+const ICONS = {
+    Target, Route, Flag, Rocket, Briefcase, Folder, Layers, Map, Compass, Landmark,
+    BookOpen, Lightbulb, Wrench, Shield, Bug, Palette, Camera, Music, Heart, Globe,
+    Users, Sparkles, FlaskConical, Code,
+};
+export function PlanningVisualIdentity({ entityType, entityId, icon, color, disabled = false, size = 'card', onChange, }) {
+    const [open, setOpen] = React.useState(false);
+    const [pending, setPending] = React.useState(false);
+    const [optimisticPatch, setOptimisticPatch] = React.useState(null);
+    const [portalTheme, setPortalTheme] = React.useState();
+    const [popoverPosition, setPopoverPosition] = React.useState({ top: 0, left: 0 });
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const popoverRef = React.useRef(null);
+    const optimisticIcon = optimisticPatch && Object.prototype.hasOwnProperty.call(optimisticPatch, 'icon')
+        ? optimisticPatch.icon
+        : icon;
+    const optimisticColor = optimisticPatch && Object.prototype.hasOwnProperty.call(optimisticPatch, 'color')
+        ? optimisticPatch.color
+        : color;
+    const resolved = resolvePlanningIdentity({
+        entityType,
+        entityId,
+        icon: optimisticIcon,
+        color: optimisticColor,
+    });
+    const Icon = ICONS[resolved.icon];
+    const editable = !disabled && Boolean(onChange);
+    React.useEffect(() => {
+        if (!open)
+            return undefined;
+        const close = (event) => {
+            const target = event.target;
+            if (!rootRef.current?.contains(target) && !popoverRef.current?.contains(target))
+                setOpen(false);
+        };
+        document.addEventListener('pointerdown', close);
+        return () => document.removeEventListener('pointerdown', close);
+    }, [open]);
+    React.useLayoutEffect(() => {
+        if (!open)
+            return undefined;
+        const positionPopover = () => {
+            const triggerRect = triggerRef.current?.getBoundingClientRect();
+            if (!triggerRect)
+                return;
+            setPortalTheme(triggerRef.current?.closest('[data-theme]')?.dataset.theme);
+            const popoverRect = popoverRef.current?.getBoundingClientRect();
+            const width = popoverRect?.width || 248;
+            const height = popoverRect?.height || 320;
+            const gap = 8;
+            const viewportPadding = 8;
+            const left = Math.max(viewportPadding, Math.min(triggerRect.left, window.innerWidth - width - viewportPadding));
+            const preferredTop = triggerRect.bottom + gap;
+            const top = preferredTop + height <= window.innerHeight - viewportPadding
+                ? preferredTop
+                : Math.max(viewportPadding, triggerRect.top - height - gap);
+            setPopoverPosition({ top, left });
+        };
+        positionPopover();
+        window.addEventListener('resize', positionPopover);
+        window.addEventListener('scroll', positionPopover, true);
+        return () => {
+            window.removeEventListener('resize', positionPopover);
+            window.removeEventListener('scroll', positionPopover, true);
+        };
+    }, [open]);
+    React.useEffect(() => {
+        if (!optimisticPatch)
+            return;
+        const iconSettled = !Object.prototype.hasOwnProperty.call(optimisticPatch, 'icon')
+            || (optimisticPatch.icon ?? null) === (icon ?? null);
+        const colorSettled = !Object.prototype.hasOwnProperty.call(optimisticPatch, 'color')
+            || (optimisticPatch.color ?? null) === (color ?? null);
+        if (iconSettled && colorSettled)
+            setOptimisticPatch(null);
+    }, [color, icon, optimisticPatch]);
+    const commit = async (patch) => {
+        if (!onChange || pending)
+            return;
+        setOptimisticPatch((current) => ({ ...current, ...patch }));
+        setPending(true);
+        try {
+            await onChange(patch);
+        }
+        catch {
+            setOptimisticPatch(null);
+        }
+        finally {
+            setPending(false);
+        }
+    };
+    const marker = (_jsx("span", { className: `${styles.marker} ${styles[size]} ${disabled ? styles.disabled : ''}`.trim(), style: { color: planningIdentityColorToken(resolved.color) }, "aria-hidden": "true", children: _jsx(Icon, { size: size === 'detail' ? 26 : size === 'inline' ? 18 : 24, strokeWidth: 1.9 }) }));
+    if (!editable)
+        return marker;
+    return (_jsxs("div", { ref: rootRef, className: styles.root, onClick: (event) => event.stopPropagation(), children: [_jsx("button", { ref: triggerRef, type: "button", className: styles.trigger, onClick: () => setOpen((current) => !current), onKeyDown: (event) => event.stopPropagation(), "aria-label": `Change ${entityType} icon and color`, "aria-expanded": open, disabled: pending, children: marker }), open ? createPortal((_jsxs("div", { ref: popoverRef, className: styles.popover, role: "dialog", "aria-label": `${entityType} icon and color`, "aria-busy": pending, "data-theme": portalTheme, style: popoverPosition, onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: [_jsx("div", { className: styles.colorGrid, "aria-label": "Colors", children: PLANNING_IDENTITY_COLORS.map((option) => (_jsx("button", { type: "button", className: `${styles.colorOption} ${resolved.color === option ? styles.selected : ''}`.trim(), style: { backgroundColor: planningIdentityColorToken(option) }, onClick: () => void commit({ color: option }), "aria-label": `${option} color`, "aria-pressed": resolved.color === option, disabled: pending }, option))) }), _jsx("div", { className: styles.divider }), _jsx("div", { className: styles.iconGrid, "aria-label": "Icons", children: PLANNING_IDENTITY_ICONS.map((option) => {
+                            const OptionIcon = ICONS[option];
+                            return (_jsx("button", { type: "button", className: `${styles.iconOption} ${resolved.icon === option ? styles.selected : ''}`.trim(), onClick: () => void commit({ icon: option }), "aria-label": option, "aria-pressed": resolved.icon === option, disabled: pending, children: _jsx(OptionIcon, { size: 18, strokeWidth: 1.8 }) }, option));
+                        }) }), _jsx("div", { className: styles.divider }), _jsx("button", { type: "button", className: styles.reset, onClick: () => void commit({ icon: null, color: null }), disabled: !resolved.customized || pending, children: "Reset to default" })] })), document.body) : null] }));
+}

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

@@ -3,6 +3,7 @@ import type { TaskAssigneeOption } from '../../../utils/assignees';
 import type { TaskReferenceContract } from '../../../utils/taskReferences';
 import type { TaskforceTheme } from '../../../utils/theme';
 import type { PlanningTaskArrangeMode } from './planningTaskArrangement';
+import type { PlanningIdentityColor, PlanningIdentityIcon } from '../../../shared/planningIdentity';
 export type PlanningStatusCounts = Record<TaskStatus, number>;
 export declare function shouldUsePlanningBootstrapTaskSummaries(input: {
     taskScope: 'open' | 'archived' | 'deleted';
@@ -34,6 +35,8 @@ export type PlanningNodeSummary = {
     description?: string;
     ownerId?: string | null;
     ownerLabel?: string | null;
+    icon?: PlanningIdentityIcon | null;
+    color?: PlanningIdentityColor | null;
     progressPercent: number;
     taskCount: number;
     completedTaskCount: number;
@@ -67,12 +70,16 @@ export type PlanningEntitySaveInput = {
     description: string | null;
     ownerId?: string | null;
     initiativeId?: string | null;
+    icon?: PlanningIdentityIcon | null;
+    color?: PlanningIdentityColor | null;
 };
 export type PlanningLinkOption = {
     id: string;
     referenceLabel: string;
     title: string;
     meta?: string;
+    icon?: PlanningIdentityIcon | null;
+    color?: PlanningIdentityColor | null;
 };
 export type PlanningLinkOptions = {
     initiatives: PlanningLinkOption[];
@@ -107,6 +114,10 @@ export type PlanningWorkspaceModel = {
     archiveEntity?: (entityType: 'initiative' | 'workstream', entityId: string) => boolean | Promise<boolean>;
     unarchiveEntity?: (entityType: 'initiative' | 'workstream', entityId: string) => boolean | Promise<boolean>;
     changeOwner?: (entityType: 'initiative' | 'workstream', entityId: string, ownerId: string) => void | Promise<void>;
+    changeIdentity?: (entityType: 'initiative' | 'workstream', entityId: string, patch: {
+        icon?: PlanningIdentityIcon | null;
+        color?: PlanningIdentityColor | null;
+    }) => void | Promise<void>;
     createEntity?: (entityType: 'initiative' | 'workstream', input: PlanningEntitySaveInput) => Promise<{
         id: string;
     }>;

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

@@ -4,6 +4,7 @@ import type { TaskAutoSaveState } from '../../hooks/tasks/useTaskFormActions';
 interface TaskActionHeaderProps {
     editingTaskId: string | null;
     loading: boolean;
+    submitDisabled?: boolean;
     autoSaveState?: TaskAutoSaveState;
     title: string;
     status?: TaskStatus;
@@ -30,5 +31,5 @@ interface TaskActionHeaderProps {
     handlePermanentlyDeleteDeletedTask?: (deletedRecordId: string) => void;
     onAskAgent?: (task: TaskItem) => void;
 }
-export declare function TaskActionHeader({ editingTaskId, loading, autoSaveState, title, status, onStatusChange, showCreateSubmit, handleSubmit, handleCopyId, copiedId, tasks, currentTask: currentTaskProp, currentTaskWorkstream, currentTaskInitiative, workstreams, onWorkstreamInputChange, onSetWorkstreamForCurrentTask, handleToggleInProgress, handleToggleReview, handleToggleComplete, handleToggleCancel, handleSetStatus, handleArchiveTask, handleUnarchiveTask, handleRestoreDeletedTask, handlePermanentlyDeleteDeletedTask, onAskAgent }: TaskActionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaskActionHeader({ editingTaskId, loading, submitDisabled, autoSaveState, title, status, onStatusChange, showCreateSubmit, handleSubmit, handleCopyId, copiedId, tasks, currentTask: currentTaskProp, currentTaskWorkstream, currentTaskInitiative, workstreams, onWorkstreamInputChange, onSetWorkstreamForCurrentTask, handleToggleInProgress, handleToggleReview, handleToggleComplete, handleToggleCancel, handleSetStatus, handleArchiveTask, handleUnarchiveTask, handleRestoreDeletedTask, handlePermanentlyDeleteDeletedTask, onAskAgent }: TaskActionHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/task/TaskActionHeader.js

@@ -9,7 +9,7 @@ import { TaskReferenceBadge } from './TaskReferenceBadge';
 import { HierarchyActionBadge } from '../ui/HierarchyActionBadge';
 import { formatInitiativeReference, getWorkstreamReferenceLabel } from '../../utils/planningReferences';
 import { TaskWorkstreamPicker } from './TaskWorkstreamPicker';
-export function TaskActionHeader({ editingTaskId, loading, autoSaveState = 'idle', title, status = 'task', onStatusChange, showCreateSubmit = true, handleSubmit, handleCopyId, copiedId, tasks, currentTask: currentTaskProp, currentTaskWorkstream, currentTaskInitiative, workstreams = [], onWorkstreamInputChange, onSetWorkstreamForCurrentTask, handleToggleInProgress, handleToggleReview, handleToggleComplete, handleToggleCancel, handleSetStatus, handleArchiveTask, handleUnarchiveTask, handleRestoreDeletedTask, handlePermanentlyDeleteDeletedTask, onAskAgent }) {
+export function TaskActionHeader({ editingTaskId, loading, submitDisabled = false, autoSaveState = 'idle', title, status = 'task', onStatusChange, showCreateSubmit = true, handleSubmit, handleCopyId, copiedId, tasks, currentTask: currentTaskProp, currentTaskWorkstream, currentTaskInitiative, workstreams = [], onWorkstreamInputChange, onSetWorkstreamForCurrentTask, handleToggleInProgress, handleToggleReview, handleToggleComplete, handleToggleCancel, handleSetStatus, handleArchiveTask, handleUnarchiveTask, handleRestoreDeletedTask, handlePermanentlyDeleteDeletedTask, onAskAgent }) {
     const currentTask = currentTaskProp ?? (editingTaskId ? tasks.find(t => t.id === editingTaskId) || null : null);
     const isArchivedReadOnly = Boolean(currentTask?.isArchived);
     const isDeletedReadOnly = Boolean(currentTask?.isDeleted);
@@ -67,5 +67,5 @@ export function TaskActionHeader({ editingTaskId, loading, autoSaveState = 'idle
                                     if (status === 'cancelled') {
                                         handleToggleCancel(task);
                                     }
-                                }, onArchiveTask: handleArchiveTask, onUnarchiveTask: (task) => handleUnarchiveTask?.(task.id) }))] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.taskSaveStatusCenter }), _jsxs("div", { className: styles.editActionsGroup, children: [_jsx(TaskStatusActions, { status: status, disabled: loading, archiveActionMode: "none", onStatusChange: onStatusChange }), showCreateSubmit ? (_jsxs("button", { type: "button", onClick: (e) => handleSubmit(e), disabled: loading || !title.trim(), className: styles.primaryUpdateBtn, title: t('actionHeader.addTaskTitle'), children: [loading ? _jsx(Loader2, { size: 16, className: styles.spinner }) : _jsx(Plus, { size: 16 }), t('actionHeader.addTask')] })) : null] })] }))] }));
+                                }, onArchiveTask: handleArchiveTask, onUnarchiveTask: (task) => handleUnarchiveTask?.(task.id) }))] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.taskSaveStatusCenter }), _jsxs("div", { className: styles.editActionsGroup, children: [_jsx(TaskStatusActions, { status: status, disabled: loading, archiveActionMode: "none", onStatusChange: onStatusChange }), showCreateSubmit ? (_jsxs("button", { type: "button", onClick: (e) => handleSubmit(e), disabled: loading || submitDisabled || !title.trim(), className: styles.primaryUpdateBtn, title: t('actionHeader.addTaskTitle'), children: [loading ? _jsx(Loader2, { size: 16, className: styles.spinner }) : _jsx(Plus, { size: 16 }), t('actionHeader.addTask')] })) : null] })] }))] }));
 }

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,6 +22,7 @@ import { getInitiativeReferenceLabel, getWorkstreamReferenceLabel } from '../../
 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 }) => {
     const taskReference = getTaskReferenceDisplayState(task);
     const taskReferenceLabel = taskReference.label || (taskReference.isProvisional ? 'Pending' : '');
@@ -228,6 +229,24 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
             workspaceId,
         });
     };
+    const cardCoverAttachment = (() => {
+        if (compressed || isOverlay || !task.cardCoverAssetId)
+            return null;
+        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 +275,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 })), 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) => {
                                     const path = typeof attachment === 'string' ? attachment : attachment.path;
                                     if (!isImageAttachment(attachment))
                                         return null;
@@ -268,13 +300,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,7 +318,7 @@ 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));
+                                        }, 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 => {
                             const val = task.taxonomies?.[tax.id];
                             if (!val)

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}`