@taskforcehq/taskforce 0.3.327 → 0.3.328

package/dist/components/task/TaskImageReviews.js

@@ -1,4 +1,4 @@
-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';
@@ -29,19 +29,19 @@ export function TaskImageReviews({ taskId, taskReferenceLabel, workspaceId, apiB
     }, [apiBaseUrl, taskId, workspaceId]);
     if (reviews !== null && reviews.length === 0)
         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"] })) : (_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: [markerCount, " ", markerCount === 1 ? 'marker' : 'markers'] })] }), _jsx(MessageSquareText, { className: styles.openIcon, size: 14, "aria-hidden": "true" })] }, review.id));
+            }) })) }));
 }

package/dist/components/task/TaskStatusActions.js

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

package/dist/components/task/TaskWorkstreamPicker.js

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

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

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

package/dist/components/ui/DocumentTypeIcon.js

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

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

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

package/dist/components/ui/TaxonomyDropdown.js

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

package/dist/components/views/StandaloneLayout.js

@@ -169,9 +169,9 @@ export function StandaloneLayout(props) {
     // State
     activeTab, setActiveTab, activeCategories, groupBy, setGroupBy, activeWorkspaceModule, setActiveWorkspaceModule, emptyColumnMode, setEmptyColumnMode, zenMode, setZenMode, filterStatus, setFilterStatus, 
     // Data & Actions
-    tasks, handleEdit, handleSubmit, resetForm, handleUpdateTask, handleSetStatus: handleSetStatusDurably, 
+    tasks, handleEdit, handleSubmit, resetForm, discardDescriptionImageDraft, handleUpdateTask, handleSetStatus: handleSetStatusDurably, 
     // Form State (destructure all needed for TaskForm)
-    editingTaskId, loading, error, title, setTitle, setTitleDraft, description, setDescription, setDescriptionDraft, checklistItems, setChecklistItems, category, setCategory, type, setType, priority, setPriority, complexity, setComplexity, status, setStatus, assignee, setAssignee, scheduledDate, setScheduledDate, dueDate, setDueDate, workstreamInput, setWorkstreamInput, manualComplexityEnabled, checklistDropdownEnabled, showTaskCardStatusLabel, formTaxonomies, setFormTaxonomies, comments, newCommentText, setNewCommentText, attachments, setAttachments, setAttachmentsDirty, descriptionFocused, setDescriptionFocused, showMarkdownHelp, setShowMarkdownHelp, 
+    editingTaskId, loading, error, title, setTitle, setTitleDraft, description, setDescription, setDescriptionDraft, checklistItems, setChecklistItems, category, setCategory, type, setType, priority, setPriority, complexity, setComplexity, status, setStatus, assignee, setAssignee, scheduledDate, setScheduledDate, dueDate, setDueDate, workstreamInput, setWorkstreamInput, manualComplexityEnabled, checklistDropdownEnabled, showTaskCardStatusLabel, formTaxonomies, setFormTaxonomies, comments, newCommentText, setNewCommentText, attachments, setAttachments, attachmentsDirty, setAttachmentsDirty, descriptionImageUploadPending, descriptionImageDraftId, registerDescriptionImageUpload, descriptionFocused, setDescriptionFocused, showMarkdownHelp, setShowMarkdownHelp, 
     // Form Actions
     handleAddComment, handleSetWorkstreamForCurrentTask, handleOpenTaskById, 
     // Other Props for Form
@@ -206,6 +206,9 @@ export function StandaloneLayout(props) {
     // Handlers
     const handleDiscard = () => {
         setUnsavedModalOpen(false);
+        if (activeTab === 'add' && !editingTaskId) {
+            void discardDescriptionImageDraft();
+        }
         if (pendingNavigation) {
             if (activeTab === 'add')
                 resetForm();
@@ -271,6 +274,8 @@ export function StandaloneLayout(props) {
     const [planningDraftDescription, setPlanningDraftDescription] = useState('');
     const [planningDraftOwner, setPlanningDraftOwner] = useState('');
     const [planningDraftInitiativeId, setPlanningDraftInitiativeId] = useState('');
+    const [planningDraftIcon, setPlanningDraftIcon] = useState(null);
+    const [planningDraftColor, setPlanningDraftColor] = useState(null);
     const [isSubmittingPlanningEditor, setIsSubmittingPlanningEditor] = useState(false);
     const taskContextAttachmentDraftRef = useRef({
         taskId: null,
@@ -1173,6 +1178,8 @@ export function StandaloneLayout(props) {
                 description: String(workstream.description || '').trim() || undefined,
                 ownerId: workstream.ownerId ? String(workstream.ownerId) : null,
                 ownerLabel: workstream.ownerId ? assigneeLabelByValue.get(String(workstream.ownerId)) || String(workstream.ownerId) : null,
+                icon: workstream.icon ?? null,
+                color: workstream.color ?? null,
                 ...taskCounts,
                 statusCounts: workstreamStatusCountsById.get(workstream.id) || summarizeTaskStatuses([]),
                 initiativeId: workstream.initiativeId || null,
@@ -1217,6 +1224,8 @@ export function StandaloneLayout(props) {
                 description: String(initiative.description || '').trim() || undefined,
                 ownerId: initiative.ownerId ? String(initiative.ownerId) : null,
                 ownerLabel: initiative.ownerId ? assigneeLabelByValue.get(String(initiative.ownerId)) || String(initiative.ownerId) : null,
+                icon: initiative.icon ?? null,
+                color: initiative.color ?? null,
                 ...initiativeTaskCounts,
                 statusCounts: combineTaskStatuses(allWorkstreamsForInitiative),
                 workstreamCount: workstreams.length,
@@ -1281,6 +1290,8 @@ export function StandaloneLayout(props) {
             id: initiative.id,
             referenceLabel: formatInitiativeReference(initiative) || initiative.id,
             title: initiative.title,
+            icon: initiative.icon,
+            color: initiative.color,
             meta: `${initiative.workstreamCount || 0} workstream${initiative.workstreamCount === 1 ? '' : 's'}`,
         }))
             .sort(sortByTitle);
@@ -1290,6 +1301,8 @@ export function StandaloneLayout(props) {
             id: workstream.id,
             referenceLabel: formatWorkstreamReference(workstream) || workstream.id,
             title: workstream.title,
+            icon: workstream.icon,
+            color: workstream.color,
             meta: workstream.initiativeId
                 ? `In ${planningStructure.allInitiativeById.get(workstream.initiativeId)?.title || 'another initiative'}`
                 : 'Standalone workstream',
@@ -3034,6 +3047,8 @@ export function StandaloneLayout(props) {
         setPlanningDraftTitle('');
         setPlanningDraftDescription('');
         setPlanningDraftOwner('');
+        setPlanningDraftIcon(null);
+        setPlanningDraftColor(null);
         const selectedInitiative = editor.entityType === 'workstream' && selectedPlanningInitiativeId
             ? planningStructure.initiativeById.get(selectedPlanningInitiativeId) || null
             : null;
@@ -3048,6 +3063,8 @@ export function StandaloneLayout(props) {
         setPlanningDraftTitle('');
         setPlanningDraftDescription('');
         setPlanningDraftOwner('');
+        setPlanningDraftIcon(null);
+        setPlanningDraftColor(null);
         const selectedInitiative = editor.entityType === 'workstream'
             ? ((initiativeId ? planningStructure.initiativeById.get(initiativeId) : null)
                 || (selectedPlanningInitiativeId ? planningStructure.initiativeById.get(selectedPlanningInitiativeId) || null : null))
@@ -3062,6 +3079,8 @@ export function StandaloneLayout(props) {
         setPlanningDraftTitle('');
         setPlanningDraftDescription('');
         setPlanningDraftOwner('');
+        setPlanningDraftIcon(null);
+        setPlanningDraftColor(null);
         setPlanningDraftInitiativeId('');
     }, []);
     const closePlanningSecondaryEditor = useCallback(() => {
@@ -3071,6 +3090,8 @@ export function StandaloneLayout(props) {
         setPlanningDraftTitle('');
         setPlanningDraftDescription('');
         setPlanningDraftOwner('');
+        setPlanningDraftIcon(null);
+        setPlanningDraftColor(null);
         setPlanningDraftInitiativeId('');
     }, []);
     const submitPlanningEditor = useCallback(async () => {
@@ -3099,6 +3120,10 @@ export function StandaloneLayout(props) {
                         title,
                         description: planningDraftDescription.trim() || null,
                         ownerId,
+                        ...(planningDraftIcon || planningDraftColor ? {
+                            icon: planningDraftIcon,
+                            color: planningDraftColor,
+                        } : {}),
                     });
                     setPlanningDrawerDetail({ type: 'initiative', id: created.id });
                     setPlanningNestedWorkstreamDetailId(null);
@@ -3129,7 +3154,13 @@ export function StandaloneLayout(props) {
                     pushNotice('Workstream updated', 'success');
                 }
                 else {
-                    const created = await props.createWorkstream(patch);
+                    const created = await props.createWorkstream({
+                        ...patch,
+                        ...(planningDraftIcon || planningDraftColor ? {
+                            icon: planningDraftIcon,
+                            color: planningDraftColor,
+                        } : {}),
+                    });
                     if (isSecondaryEditor) {
                         setPlanningNestedWorkstreamDetailId(created.id);
                     }
@@ -3159,6 +3190,8 @@ export function StandaloneLayout(props) {
         closePlanningSecondaryEditor,
         planningDraftDescription,
         planningDraftInitiativeId,
+        planningDraftIcon,
+        planningDraftColor,
         planningDraftOwner,
         planningDraftTitle,
         planningEditor,
@@ -3462,6 +3495,15 @@ export function StandaloneLayout(props) {
             throw error;
         }
     }, [props, pushNotice]);
+    const handleChangePlanningIdentity = useCallback(async (entityType, entityId, patch) => {
+        try {
+            await props.updatePlanningIdentity(entityType, entityId, patch);
+        }
+        catch (error) {
+            pushNotice(error instanceof Error ? error.message : 'Failed to update visual identity.', 'error');
+            throw error;
+        }
+    }, [props.updatePlanningIdentity, pushNotice]);
     const handleAssignInitiativeToWorkstream = useCallback(async (workstreamId, initiativeReferenceOverride) => {
         const workstream = props.workstreams.find((item) => item.id === workstreamId);
         if (!workstream) {
@@ -4069,6 +4111,7 @@ export function StandaloneLayout(props) {
                     title,
                     description: input.description?.trim() || null,
                     ownerId: input.ownerId?.trim() || null,
+                    ...(input.icon || input.color ? { icon: input.icon ?? null, color: input.color ?? null } : {}),
                 });
                 pushNotice('Initiative created', 'success');
                 return { id: created.id };
@@ -4078,6 +4121,7 @@ export function StandaloneLayout(props) {
                 description: input.description?.trim() || null,
                 ownerId: input.ownerId?.trim() || null,
                 initiativeId: input.initiativeId?.trim() || null,
+                ...(input.icon || input.color ? { icon: input.icon ?? null, color: input.color ?? null } : {}),
             });
             pushNotice('Workstream created', 'success');
             return { id: created.id };
@@ -4138,6 +4182,7 @@ export function StandaloneLayout(props) {
         archiveEntity: handleArchivePlanningEntity,
         unarchiveEntity: handleUnarchivePlanningEntity,
         changeOwner: handleChangePlanningOwner,
+        changeIdentity: handleChangePlanningIdentity,
         createEntity: createPlanningWorkspaceEntity,
         updateEntity: updatePlanningWorkspaceEntity,
         addContextFile: handleAddPlanningContextFile,
@@ -4151,6 +4196,7 @@ export function StandaloneLayout(props) {
         currentWorkspaceId,
         currentTheme,
         handleChangePlanningOwner,
+        handleChangePlanningIdentity,
         handleAssignInitiativeToWorkstream,
         handleAssignTaskToWorkstream,
         handleAttachTaskToWorkstreamByReference,
@@ -4198,12 +4244,12 @@ export function StandaloneLayout(props) {
             surfaceType: option.surfaceType ?? null,
             providerMetadata: option.providerMetadata ?? null,
             archivedAt: option.archivedAt ?? null
-        })), draftInitiativeSummary: planningDraftInitiativeSummary, draftTitle: planningDraftTitle, draftDescription: planningDraftDescription, draftOwner: planningDraftOwner, draftInitiativeId: planningDraftInitiativeId, onChangeDraftTitle: setPlanningDraftTitle, onChangeDraftDescription: setPlanningDraftDescription, onChangeDraftOwner: setPlanningDraftOwner, onChangeDraftInitiativeId: setPlanningDraftInitiativeId, onCollapseTreePane: () => setPlanningTreeCollapsed(true), onExpandTreePane: () => setPlanningTreeCollapsed(false), onCollapsePrimaryPane: () => setPlanningPrimaryCollapsed(true), onExpandPrimaryPane: () => setPlanningPrimaryCollapsed(false), onCollapseSecondaryPane: () => setPlanningSecondaryCollapsed(true), onExpandSecondaryPane: () => setPlanningSecondaryCollapsed(false), onBackFromSecondary: () => {
+        })), draftInitiativeSummary: planningDraftInitiativeSummary, draftTitle: planningDraftTitle, draftDescription: planningDraftDescription, draftOwner: planningDraftOwner, draftInitiativeId: planningDraftInitiativeId, draftIcon: planningDraftIcon, draftColor: planningDraftColor, onChangeDraftTitle: setPlanningDraftTitle, onChangeDraftDescription: setPlanningDraftDescription, onChangeDraftOwner: setPlanningDraftOwner, onChangeDraftInitiativeId: setPlanningDraftInitiativeId, onChangeDraftIcon: setPlanningDraftIcon, onChangeDraftColor: setPlanningDraftColor, onCollapseTreePane: () => setPlanningTreeCollapsed(true), onExpandTreePane: () => setPlanningTreeCollapsed(false), onCollapsePrimaryPane: () => setPlanningPrimaryCollapsed(true), onExpandPrimaryPane: () => setPlanningPrimaryCollapsed(false), onCollapseSecondaryPane: () => setPlanningSecondaryCollapsed(true), onExpandSecondaryPane: () => setPlanningSecondaryCollapsed(false), onBackFromSecondary: () => {
             planningEditorSubmitInFlightRef.current = false;
             setIsSubmittingPlanningEditor(false);
             setPlanningSecondaryEditor(null);
             setPlanningNestedWorkstreamDetailId(null);
-        }, treeCollapsed: planningTreeCollapsed, primaryCollapsed: planningPrimaryCollapsed, secondaryCollapsed: planningSecondaryCollapsed, onCancelEditor: closePlanningEditor, onCancelSecondaryEditor: closePlanningSecondaryEditor, onSubmitEditor: submitPlanningEditor, isSubmittingEditor: isSubmittingPlanningEditor, onCreateInitiative: () => openPlanningCreateEditor('initiative'), onCreateWorkstream: () => openPlanningCreateEditor('workstream'), onCreateTaskInWorkstream: openAddTaskModalForWorkstream, onCreateWorkstreamInInitiative: (initiativeId) => openPlanningCreateEditor('workstream', initiativeId), onAssignInitiativeToWorkstream: handleAssignInitiativeToWorkstream, onOpenTaskById: planningWorkspaceModel.openTask, onSetTaskStatus: handleSetPlanningTaskStatus, onChangeTaskAssignee: handleChangePlanningTaskAssignee, onArchivePlanningTask: handleArchivePlanningTask, onArchiveResolvedWorkstream: handleArchiveResolvedWorkstream, onArchiveResolvedInitiative: handleArchiveResolvedInitiative, taskReferences: taskReferences, onAssignTaskToWorkstream: handleAssignTaskToWorkstream, onAttachTaskToWorkstreamByReference: handleAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference: handleAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile: handleAddPlanningContextFile, onRemovePlanningContextFile: handleRemovePlanningContextFile, onUpdatePlanningContextCaption: handleUpdatePlanningContextCaption, onToggleInitiative: togglePlanningInitiative, onSelectInitiative: selectPlanningInitiative, onSelectWorkstream: selectPlanningWorkstream, onOpenInitiativeDetails: openInitiativeDetails, onOpenWorkstreamDetails: openWorkstreamDetails, onOpenNestedWorkstreamDetails: openNestedWorkstreamDetails, onEditInitiative: (initiativeId) => openPlanningEditDialog('initiative', initiativeId), onEditWorkstream: (workstreamId) => openPlanningEditDialog('workstream', workstreamId), onChangePlanningOwner: handleChangePlanningOwner, onArchiveInitiative: (initiativeId) => {
+        }, treeCollapsed: planningTreeCollapsed, primaryCollapsed: planningPrimaryCollapsed, secondaryCollapsed: planningSecondaryCollapsed, onCancelEditor: closePlanningEditor, onCancelSecondaryEditor: closePlanningSecondaryEditor, onSubmitEditor: submitPlanningEditor, isSubmittingEditor: isSubmittingPlanningEditor, onCreateInitiative: () => openPlanningCreateEditor('initiative'), onCreateWorkstream: () => openPlanningCreateEditor('workstream'), onCreateTaskInWorkstream: openAddTaskModalForWorkstream, onCreateWorkstreamInInitiative: (initiativeId) => openPlanningCreateEditor('workstream', initiativeId), onAssignInitiativeToWorkstream: handleAssignInitiativeToWorkstream, onOpenTaskById: planningWorkspaceModel.openTask, onSetTaskStatus: handleSetPlanningTaskStatus, onChangeTaskAssignee: handleChangePlanningTaskAssignee, onArchivePlanningTask: handleArchivePlanningTask, onArchiveResolvedWorkstream: handleArchiveResolvedWorkstream, onArchiveResolvedInitiative: handleArchiveResolvedInitiative, taskReferences: taskReferences, onAssignTaskToWorkstream: handleAssignTaskToWorkstream, onAttachTaskToWorkstreamByReference: handleAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference: handleAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile: handleAddPlanningContextFile, onRemovePlanningContextFile: handleRemovePlanningContextFile, onUpdatePlanningContextCaption: handleUpdatePlanningContextCaption, onToggleInitiative: togglePlanningInitiative, onSelectInitiative: selectPlanningInitiative, onSelectWorkstream: selectPlanningWorkstream, onOpenInitiativeDetails: openInitiativeDetails, onOpenWorkstreamDetails: openWorkstreamDetails, onOpenNestedWorkstreamDetails: openNestedWorkstreamDetails, onEditInitiative: (initiativeId) => openPlanningEditDialog('initiative', initiativeId), onEditWorkstream: (workstreamId) => openPlanningEditDialog('workstream', workstreamId), onChangePlanningOwner: handleChangePlanningOwner, onChangePlanningIdentity: handleChangePlanningIdentity, onArchiveInitiative: (initiativeId) => {
             void props.archiveInitiative(initiativeId).then(() => {
                 pushNotice('Initiative archived', 'success');
             }).catch((error) => {
@@ -4327,7 +4373,7 @@ export function StandaloneLayout(props) {
                 : taskforceAgentDrawerNode, _jsxs(Modal, { isOpen: activeTab === 'add', onClose: handleCloseModal, title: editingTaskId ? (currentTask?.isDeleted ? 'Deleted Task' : 'Edit Task') : 'New Task', size: taskModalFullscreen ? 'full' : 'xl', theme: currentTheme, className: `${styles.taskforceTaskModalOverlay} ${taskforceAgentDrawerOpen ? styles.taskforceModalWithAssistantPanel : ''} ${taskforceAgentPanelCollapsed ? styles.taskforceModalWithAssistantPanelCollapsed : ''}`.trim(), overlayStyle: {
                     '--taskforce-task-modal-backdrop-top': `${taskforceAgentDrawerTop}px`,
                     '--taskforce-task-modal-backdrop-left': `${WORKSPACE_TOOL_RAIL_WIDTH}px`,
-                }, headerActions: (_jsxs(_Fragment, { children: [!editingTaskId ? (_jsxs("button", { type: "button", onClick: (event) => handleSubmit(event), 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, _jsx("button", { className: "tf-control-icon", onClick: () => setTaskModalFullscreen((value) => !value), title: taskModalFullscreen ? 'Exit full screen' : 'Enter full screen', "aria-label": taskModalFullscreen ? 'Exit full screen' : 'Enter full screen', children: taskModalFullscreen ? _jsx(Minimize2, { size: 18 }) : _jsx(Maximize2, { size: 18 }) })] })), draggable: !taskModalFullscreen, closeOnOverlayClick: false, children: [_jsxs("div", { className: styles.taskNoticeAnchor, children: [_jsx(TaskActionHeader, { editingTaskId: editingTaskId, loading: loading, autoSaveState: autoSaveState, title: title, status: status, onStatusChange: setStatus, showCreateSubmit: false, currentTask: currentTask, currentTaskWorkstream: currentTaskWorkstream, currentTaskInitiative: currentTaskInitiative, workstreams: props.workstreams, onWorkstreamInputChange: setWorkstreamInput, onSetWorkstreamForCurrentTask: handleSetWorkstreamForCurrentTask, handleSubmit: handleSubmit, handleCopyId: handleCopyId, copiedId: copiedId, tasks: tasks, handleToggleInProgress: handleToggleInProgress, handleToggleReview: handleToggleReview, handleToggleComplete: handleToggleComplete, handleToggleCancel: handleToggleCancel, handleSetStatus: handleSetStatus, handleArchiveTask: handleArchiveTask, handleUnarchiveTask: (taskId) => {
+                }, headerActions: (_jsxs(_Fragment, { children: [!editingTaskId ? (_jsxs("button", { type: "button", onClick: (event) => handleSubmit(event), 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, _jsx("button", { className: "tf-control-icon", onClick: () => setTaskModalFullscreen((value) => !value), title: taskModalFullscreen ? 'Exit full screen' : 'Enter full screen', "aria-label": taskModalFullscreen ? 'Exit full screen' : 'Enter full screen', children: taskModalFullscreen ? _jsx(Minimize2, { size: 18 }) : _jsx(Maximize2, { size: 18 }) })] })), draggable: !taskModalFullscreen, closeOnOverlayClick: false, children: [_jsxs("div", { className: styles.taskNoticeAnchor, children: [_jsx(TaskActionHeader, { editingTaskId: editingTaskId, loading: loading, submitDisabled: descriptionImageUploadPending, autoSaveState: autoSaveState, title: title, status: status, onStatusChange: setStatus, showCreateSubmit: false, currentTask: currentTask, currentTaskWorkstream: currentTaskWorkstream, currentTaskInitiative: currentTaskInitiative, workstreams: props.workstreams, onWorkstreamInputChange: setWorkstreamInput, onSetWorkstreamForCurrentTask: handleSetWorkstreamForCurrentTask, handleSubmit: handleSubmit, handleCopyId: handleCopyId, copiedId: copiedId, tasks: tasks, handleToggleInProgress: handleToggleInProgress, handleToggleReview: handleToggleReview, handleToggleComplete: handleToggleComplete, handleToggleCancel: handleToggleCancel, handleSetStatus: handleSetStatus, handleArchiveTask: handleArchiveTask, handleUnarchiveTask: (taskId) => {
                                     if (currentTask?.isDeleted) {
                                         const deletedRecord = deletedTaskRecordByTaskId.get(taskId);
                                         if (!deletedRecord)
@@ -4353,10 +4399,10 @@ export function StandaloneLayout(props) {
                                     : undefined, onAskAgent: handleAskTaskforceAgentForTask }), _jsx(TopNoticeLayer, { notice: error ? { message: error, tone: 'error' } : uiNotice, onDismiss: () => {
                                     clearTaskError();
                                     clearNotice();
-                                }, placement: "task" })] }), _jsx(TaskForm, { editingTaskId: editingTaskId, initialActivityEntryId: props.initialActivityEntryId, title: title, description: description, checklistItems: checklistItems, category: category, type: type, priority: priority, complexity: complexity, manualComplexityEnabled: manualComplexityEnabled, assignee: assignee, scheduledDate: scheduledDate, dueDate: dueDate, formTaxonomies: formTaxonomies, onTaxonomyChange: (id, val) => setFormTaxonomies(prev => ({ ...prev, [id]: val })), taxonomies: taxonomies, comments: comments, newCommentText: newCommentText, contextFiles: attachments, currentWorkspaceId: currentWorkspaceId, currentActorId: authUserId, apiBaseUrl: apiBaseUrl, runtimeMode: runtimeMode, showImageReviews: true, descriptionFocused: descriptionFocused, showMarkdownHelp: showMarkdownHelp, checklistEnabled: checklistDropdownEnabled, categories: activeCategories, types: activeTypes, priorities: priorities, taxonomyDisplayLabels: taxonomyDisplayLabels, assigneeOptions: assigneeOptions, workstreams: props.workstreams, initiatives: props.initiatives, copiedId: copiedId, onTitleChange: setTitle, onTitleDraftChange: setTitleDraft, onDescriptionChange: setDescription, onDescriptionDraftChange: setDescriptionDraft, onChecklistItemsChange: setChecklistItems, onCategoryChange: setCategory, onTypeChange: setType, onPriorityChange: setPriority, onComplexityChange: setComplexity, onAssigneeChange: setAssignee, onScheduledDateChange: setScheduledDate, onDueDateChange: setDueDate, onNewCommentTextChange: setNewCommentText, onDescriptionFocusedChange: setDescriptionFocused, onShowMarkdownHelpChange: setShowMarkdownHelp, onOpenSettings: (section) => {
+                                }, placement: "task" })] }), _jsx(TaskForm, { editingTaskId: editingTaskId, initialActivityEntryId: props.initialActivityEntryId, title: title, description: description, checklistItems: checklistItems, category: category, type: type, priority: priority, complexity: complexity, manualComplexityEnabled: manualComplexityEnabled, assignee: assignee, scheduledDate: scheduledDate, dueDate: dueDate, formTaxonomies: formTaxonomies, onTaxonomyChange: (id, val) => setFormTaxonomies(prev => ({ ...prev, [id]: val })), taxonomies: taxonomies, comments: comments, newCommentText: newCommentText, contextFiles: attachments, currentWorkspaceId: currentWorkspaceId, descriptionImageDraftId: descriptionImageDraftId, currentActorId: authUserId, apiBaseUrl: apiBaseUrl, runtimeMode: runtimeMode, showImageReviews: true, descriptionFocused: descriptionFocused, showMarkdownHelp: showMarkdownHelp, checklistEnabled: checklistDropdownEnabled, categories: activeCategories, types: activeTypes, priorities: priorities, taxonomyDisplayLabels: taxonomyDisplayLabels, assigneeOptions: assigneeOptions, workstreams: props.workstreams, initiatives: props.initiatives, copiedId: copiedId, onTitleChange: setTitle, onTitleDraftChange: setTitleDraft, onDescriptionChange: setDescription, onDescriptionDraftChange: setDescriptionDraft, onChecklistItemsChange: setChecklistItems, onCategoryChange: setCategory, onTypeChange: setType, onPriorityChange: setPriority, onComplexityChange: setComplexity, onAssigneeChange: setAssignee, onScheduledDateChange: setScheduledDate, onDueDateChange: setDueDate, onNewCommentTextChange: setNewCommentText, onDescriptionFocusedChange: setDescriptionFocused, onShowMarkdownHelpChange: setShowMarkdownHelp, onOpenSettings: (section) => {
                             setSettingsSection(section);
                             setActiveTab('settings');
-                        }, onSubmit: handleSubmit, commentsEndRef: commentsEndRef, onAddComment: () => handleAddComment(newCommentText), taskReferences: taskTextReferences, onAddContextFile: (file) => {
+                        }, onSubmit: handleSubmit, onDescriptionImageUploadStart: registerDescriptionImageUpload, commentsEndRef: commentsEndRef, onAddComment: () => handleAddComment(newCommentText), taskReferences: taskTextReferences, onAddContextFile: (file) => {
                             updateTaskContextAttachments((current) => [...current, file]);
                         }, onRemoveContextFile: async (index) => {
                             updateTaskContextAttachments((current) => current.filter((_, i) => i !== index));
@@ -4368,7 +4414,14 @@ export function StandaloneLayout(props) {
                                     return { path: s, caption, timestamp: new Date().toISOString() };
                                 return { ...s, caption };
                             }));
-                        }, onOpenContextImage: (attachment) => {
+                        }, onSetCardCover: async (assetId) => {
+                            if (!editingTaskId)
+                                return;
+                            const saved = await handleUpdateTask(editingTaskId, { cardCoverAssetId: assetId });
+                            if (saved === false) {
+                                throw new Error('Unable to update the task card image.');
+                            }
+                        }, cardCoverDisabled: attachmentsDirty, onOpenContextImage: (attachment) => {
                             dispatchPreviewContextAttachment(attachment, {
                                 ownerType: 'task',
                                 ownerId: editingTaskId,

package/dist/components/views/WidgetView.js

@@ -42,9 +42,9 @@ export function WidgetView(props) {
     // Actions
     handleEdit, handleDelete, handleCopyId, handleUpdateTask, handleToggleComplete, handleToggleCancel, handleToggleInProgress, handleToggleReview, handleSetStatus, handleArchiveTask, handleBulkArchive, handleUnarchive, handleRestoreDeletedTask, handleRestoreSelectedDeletedTasks, handlePermanentlyDeleteDeletedTask, handleEmptyDeletedTasks, fetchArchive, 
     // Form State
-    editingTaskId, loading, error, clearTaskError, title, setTitle, setTitleDraft, description, setDescription, setDescriptionDraft, checklistItems, setChecklistItems, category, setCategory, type, setType, priority, setPriority, complexity, setComplexity, status, setStatus, manualComplexityEnabled, checklistDropdownEnabled, showTaskCardStatusLabel, assignee, setAssignee, scheduledDate, setScheduledDate, dueDate, setDueDate, workstreamInput, setWorkstreamInput, formTaxonomies, setFormTaxonomies, comments, newCommentText, setNewCommentText, attachments, setAttachments, setAttachmentsDirty, descriptionFocused, setDescriptionFocused, showMarkdownHelp, setShowMarkdownHelp, 
+    editingTaskId, loading, error, clearTaskError, title, setTitle, setTitleDraft, description, setDescription, setDescriptionDraft, checklistItems, setChecklistItems, category, setCategory, type, setType, priority, setPriority, complexity, setComplexity, status, setStatus, manualComplexityEnabled, checklistDropdownEnabled, showTaskCardStatusLabel, assignee, setAssignee, scheduledDate, setScheduledDate, dueDate, setDueDate, workstreamInput, setWorkstreamInput, formTaxonomies, setFormTaxonomies, comments, newCommentText, setNewCommentText, attachments, setAttachments, setAttachmentsDirty, descriptionImageUploadPending, descriptionImageDraftId, registerDescriptionImageUpload, descriptionFocused, setDescriptionFocused, showMarkdownHelp, setShowMarkdownHelp, 
     // Form Actions
-    handleSubmit, resetForm, handleAddComment, handleSetWorkstreamForCurrentTask, handleOpenTaskById, 
+    handleSubmit, resetForm, discardDescriptionImageDraft, handleAddComment, handleSetWorkstreamForCurrentTask, handleOpenTaskById, 
     // Modals
     autoSaveState, unsavedModalOpen, setUnsavedModalOpen, pendingNavigation, handleNavigation, handleClose, scheduleWarningPrompt, confirmScheduleWarning, cancelScheduleWarning, 
     // Misc
@@ -188,6 +188,9 @@ export function WidgetView(props) {
     };
     const handleDiscard = () => {
         setUnsavedModalOpen(false);
+        if (activeTab === 'add' && !editingTaskId) {
+            void discardDescriptionImageDraft();
+        }
         if (pendingNavigation) {
             // If we are discarding, we just execute pending nav.
             // Core logic had `if (activeTab === 'add' && !returnTab) resetForm();`
@@ -322,7 +325,7 @@ export function WidgetView(props) {
                                             handleNavigation(() => {
                                                 setActiveTab('settings');
                                             });
-                                        }, title: "Settings", "aria-label": "Settings", children: _jsx(Settings, { size: 18 }) }), _jsx("button", { className: "tf-control-icon", onClick: handleXClick, title: activeTab === 'tasks' ? "Close" : "Back to Tasks", "aria-label": activeTab === 'tasks' ? "Close" : "Back to Tasks", children: activeTab === 'tasks' ? _jsx(X, { size: 20 }) : _jsx(ArrowLeft, { size: 20 }) })] })] }), _jsx(TopNoticeLayer, { notice: activeTab === 'add' ? null : uiNotice, onDismiss: clearNotice }), _jsx(AttachmentPreviewHost, { theme: currentTheme }), activeTab === 'add' && (_jsxs("div", { className: styles.taskNoticeAnchor, children: [_jsx(TaskActionHeader, { editingTaskId: editingTaskId, loading: loading, autoSaveState: autoSaveState, title: title, status: status, onStatusChange: setStatus, currentTask: currentTask, currentTaskWorkstream: currentTaskWorkstream, currentTaskInitiative: currentTaskInitiative, workstreams: props.workstreams, onWorkstreamInputChange: setWorkstreamInput, onSetWorkstreamForCurrentTask: handleSetWorkstreamForCurrentTask, handleSubmit: handleSubmit, handleCopyId: handleCopyId, copiedId: copiedId, tasks: tasks, handleToggleInProgress: handleToggleInProgress, handleToggleReview: handleToggleReview, handleToggleComplete: handleToggleComplete, handleToggleCancel: handleToggleCancel, handleSetStatus: handleSetStatus, handleArchiveTask: handleArchiveTask, handleUnarchiveTask: (taskId) => {
+                                        }, title: "Settings", "aria-label": "Settings", children: _jsx(Settings, { size: 18 }) }), _jsx("button", { className: "tf-control-icon", onClick: handleXClick, title: activeTab === 'tasks' ? "Close" : "Back to Tasks", "aria-label": activeTab === 'tasks' ? "Close" : "Back to Tasks", children: activeTab === 'tasks' ? _jsx(X, { size: 20 }) : _jsx(ArrowLeft, { size: 20 }) })] })] }), _jsx(TopNoticeLayer, { notice: activeTab === 'add' ? null : uiNotice, onDismiss: clearNotice }), _jsx(AttachmentPreviewHost, { theme: currentTheme }), activeTab === 'add' && (_jsxs("div", { className: styles.taskNoticeAnchor, children: [_jsx(TaskActionHeader, { editingTaskId: editingTaskId, loading: loading, submitDisabled: descriptionImageUploadPending, autoSaveState: autoSaveState, title: title, status: status, onStatusChange: setStatus, currentTask: currentTask, currentTaskWorkstream: currentTaskWorkstream, currentTaskInitiative: currentTaskInitiative, workstreams: props.workstreams, onWorkstreamInputChange: setWorkstreamInput, onSetWorkstreamForCurrentTask: handleSetWorkstreamForCurrentTask, handleSubmit: handleSubmit, handleCopyId: handleCopyId, copiedId: copiedId, tasks: tasks, handleToggleInProgress: handleToggleInProgress, handleToggleReview: handleToggleReview, handleToggleComplete: handleToggleComplete, handleToggleCancel: handleToggleCancel, handleSetStatus: handleSetStatus, handleArchiveTask: handleArchiveTask, handleUnarchiveTask: (taskId) => {
                                     if (currentTask?.isDeleted) {
                                         const deletedRecord = deletedRecordByTaskId.get(taskId);
                                         if (deletedRecord) {
@@ -359,12 +362,12 @@ export function WidgetView(props) {
                             void handleDelete(taskId);
                         }, onDeleteAllDeleted: () => {
                             void handleEmptyDeletedTasks();
-                        }, onFetchArchive: fetchArchive, onAddTaskToCategory: handleAddTaskToCategory, supplementalTasks: deletedScopeTasks })), activeTab === 'add' && (_jsx(TaskForm, { editingTaskId: editingTaskId, initialActivityEntryId: props.initialActivityEntryId, title: title, description: description, checklistItems: checklistItems, category: category, type: type, priority: priority, complexity: complexity, manualComplexityEnabled: manualComplexityEnabled, assignee: assignee, scheduledDate: scheduledDate, dueDate: dueDate, formTaxonomies: formTaxonomies, onTaxonomyChange: onTaxonomyChange, taxonomies: taxonomies, comments: comments, newCommentText: newCommentText, contextFiles: attachments, currentWorkspaceId: currentWorkspaceId, currentActorId: authUserId, apiBaseUrl: "", descriptionFocused: descriptionFocused, showMarkdownHelp: showMarkdownHelp, checklistEnabled: checklistDropdownEnabled, categories: activeCategories, types: activeTypes, priorities: priorities, taxonomyDisplayLabels: taxonomyDisplayLabels, assigneeOptions: assigneeOptions, workstreams: props.workstreams, initiatives: props.initiatives, copiedId: copiedId, onTitleChange: setTitle, onTitleDraftChange: setTitleDraft, onDescriptionChange: setDescription, onDescriptionDraftChange: setDescriptionDraft, onChecklistItemsChange: setChecklistItems, onCategoryChange: setCategory, onTypeChange: setType, onPriorityChange: setPriority, onComplexityChange: setComplexity, onAssigneeChange: setAssignee, onScheduledDateChange: setScheduledDate, onDueDateChange: setDueDate, onNewCommentTextChange: setNewCommentText, onDescriptionFocusedChange: setDescriptionFocused, onShowMarkdownHelpChange: setShowMarkdownHelp, onOpenSettings: (section) => {
+                        }, onFetchArchive: fetchArchive, onAddTaskToCategory: handleAddTaskToCategory, supplementalTasks: deletedScopeTasks })), activeTab === 'add' && (_jsx(TaskForm, { editingTaskId: editingTaskId, initialActivityEntryId: props.initialActivityEntryId, title: title, description: description, checklistItems: checklistItems, category: category, type: type, priority: priority, complexity: complexity, manualComplexityEnabled: manualComplexityEnabled, assignee: assignee, scheduledDate: scheduledDate, dueDate: dueDate, formTaxonomies: formTaxonomies, onTaxonomyChange: onTaxonomyChange, taxonomies: taxonomies, comments: comments, newCommentText: newCommentText, contextFiles: attachments, currentWorkspaceId: currentWorkspaceId, descriptionImageDraftId: descriptionImageDraftId, currentActorId: authUserId, apiBaseUrl: "", descriptionFocused: descriptionFocused, showMarkdownHelp: showMarkdownHelp, checklistEnabled: checklistDropdownEnabled, categories: activeCategories, types: activeTypes, priorities: priorities, taxonomyDisplayLabels: taxonomyDisplayLabels, assigneeOptions: assigneeOptions, workstreams: props.workstreams, initiatives: props.initiatives, copiedId: copiedId, onTitleChange: setTitle, onTitleDraftChange: setTitleDraft, onDescriptionChange: setDescription, onDescriptionDraftChange: setDescriptionDraft, onChecklistItemsChange: setChecklistItems, onCategoryChange: setCategory, onTypeChange: setType, onPriorityChange: setPriority, onComplexityChange: setComplexity, onAssigneeChange: setAssignee, onScheduledDateChange: setScheduledDate, onDueDateChange: setDueDate, onNewCommentTextChange: setNewCommentText, onDescriptionFocusedChange: setDescriptionFocused, onShowMarkdownHelpChange: setShowMarkdownHelp, onOpenSettings: (section) => {
                             handleNavigation(() => {
                                 setSettingsSection(section);
                                 setActiveTab('settings');
                             });
-                        }, onSubmit: handleSubmit, commentsEndRef: commentsEndRef, onAddComment: () => handleAddComment(newCommentText), taskReferences: taskTextReferences, onAddContextFile: (file) => {
+                        }, onSubmit: handleSubmit, onDescriptionImageUploadStart: registerDescriptionImageUpload, commentsEndRef: commentsEndRef, onAddComment: () => handleAddComment(newCommentText), taskReferences: taskTextReferences, onAddContextFile: (file) => {
                             setAttachmentsDirty(true);
                             setAttachments(prev => [...prev, file]);
                         }, onRemoveContextFile: async (index) => {

package/dist/components/views/panels/PlanningDrawer.d.ts

@@ -6,6 +6,7 @@ import { type PlanningFavorite } from '../../../utils/planningFavorites';
 import type { PlanningTaskScope } from '../planningScope';
 import type { PlanningInitiativeSummary, PlanningLinkOptions, PlanningWorkstreamSummary } from '../../features/planning/planningWorkspaceModel';
 import type { PlanningEntityHydrationState } from '../../features/planning/planningWorkspaceModel';
+import { type PlanningIdentityPatch } from '../../features/planning/PlanningVisualIdentity';
 import { type PlanningTaskArrangeMode } from '../../features/planning/planningTaskArrangement';
 import { type PlanningOwnerOption } from '../../features/planning/PlanningOwnerDropdown';
 import { type PlanningNavigatorSort } from '../../features/planning/planningNavigator';
@@ -93,10 +94,14 @@ type PlanningDrawerProps = {
     draftDescription: string;
     draftOwner: string;
     draftInitiativeId: string;
+    draftIcon?: Exclude<PlanningIdentityPatch['icon'], undefined>;
+    draftColor?: Exclude<PlanningIdentityPatch['color'], undefined>;
     onChangeDraftTitle: (value: string) => void;
     onChangeDraftDescription: (value: string) => void;
     onChangeDraftOwner: (value: string) => void;
     onChangeDraftInitiativeId: (value: string) => void;
+    onChangeDraftIcon?: (value: Exclude<PlanningIdentityPatch['icon'], undefined>) => void;
+    onChangeDraftColor?: (value: Exclude<PlanningIdentityPatch['color'], undefined>) => void;
     onCollapseTreePane: () => void;
     onExpandTreePane: () => void;
     onCollapsePrimaryPane: () => void;
@@ -122,6 +127,7 @@ type PlanningDrawerProps = {
     onEditInitiative: (initiativeId: string) => void;
     onEditWorkstream: (workstreamId: string) => void;
     onChangePlanningOwner: (entityType: 'initiative' | 'workstream', entityId: string, ownerId: string) => void | Promise<void>;
+    onChangePlanningIdentity?: (entityType: 'initiative' | 'workstream', entityId: string, patch: PlanningIdentityPatch) => void | Promise<void>;
     onChangeTaskAssignee?: (taskId: string, assignee: string) => void | Promise<void>;
     onArchiveInitiative: (initiativeId: string) => void;
     onUnarchiveInitiative: (initiativeId: string) => void;
@@ -143,4 +149,4 @@ type PlanningDrawerProps = {
     onRemovePlanningContextFile?: (entityType: 'initiative' | 'workstream', entityId: string, index: number) => void;
     onUpdatePlanningContextCaption?: (entityType: 'initiative' | 'workstream', entityId: string, index: number, caption: string) => void;
 };
-export declare function PlanningDrawer({ open, leftOffset, returnFocusRef, onWidthChange, initiatives, standaloneWorkstreams, planningLoadState, onRetryPlanning, taskScope, activeInitiativeId, activeWorkstreamId, navigatorSort, navigatorSortReady, onNavigatorSortChange, taskArrangeMode, onTaskArrangeModeChange, onReorderWorkstreamTasks, planningFavorites, onTogglePlanningFavorite, favoritesSectionCollapsed, initiativesSectionCollapsed, workstreamsSectionCollapsed, onToggleFavoritesSection, onToggleInitiativesSection, onToggleWorkstreamsSection, expandedInitiativeIds, detail, editor, secondaryEditor, secondaryPane, primaryHydrationState, secondaryHydrationState, onRetryPrimaryHydration, onRetrySecondaryHydration, currentWorkspaceId, currentOwnerId, theme, assigneeOptions, linkOptions, showTaskCardStatusLabel, draftInitiativeSummary, draftTitle, draftDescription, draftOwner, draftInitiativeId, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCollapseTreePane, onExpandTreePane, onCollapsePrimaryPane, onExpandPrimaryPane, onCollapseSecondaryPane, onExpandSecondaryPane, onBackFromSecondary, treeCollapsed, primaryCollapsed, secondaryCollapsed, onCancelEditor, onCancelSecondaryEditor, onSubmitEditor, isSubmittingEditor, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onEditInitiative, onEditWorkstream, onChangePlanningOwner, onChangeTaskAssignee, onArchiveInitiative, onUnarchiveInitiative, onArchiveWorkstream, onUnarchiveWorkstream, onArchivePlanningTask, onArchiveResolvedWorkstream, onArchiveResolvedInitiative, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onAssignInitiativeToWorkstream, onOpenTaskById, onSetTaskStatus, taskReferences, onAssignTaskToWorkstream, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, }: PlanningDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function PlanningDrawer({ open, leftOffset, returnFocusRef, onWidthChange, initiatives, standaloneWorkstreams, planningLoadState, onRetryPlanning, taskScope, activeInitiativeId, activeWorkstreamId, navigatorSort, navigatorSortReady, onNavigatorSortChange, taskArrangeMode, onTaskArrangeModeChange, onReorderWorkstreamTasks, planningFavorites, onTogglePlanningFavorite, favoritesSectionCollapsed, initiativesSectionCollapsed, workstreamsSectionCollapsed, onToggleFavoritesSection, onToggleInitiativesSection, onToggleWorkstreamsSection, expandedInitiativeIds, detail, editor, secondaryEditor, secondaryPane, primaryHydrationState, secondaryHydrationState, onRetryPrimaryHydration, onRetrySecondaryHydration, currentWorkspaceId, currentOwnerId, theme, assigneeOptions, linkOptions, showTaskCardStatusLabel, draftInitiativeSummary, draftTitle, draftDescription, draftOwner, draftInitiativeId, draftIcon, draftColor, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onChangeDraftIcon, onChangeDraftColor, onCollapseTreePane, onExpandTreePane, onCollapsePrimaryPane, onExpandPrimaryPane, onCollapseSecondaryPane, onExpandSecondaryPane, onBackFromSecondary, treeCollapsed, primaryCollapsed, secondaryCollapsed, onCancelEditor, onCancelSecondaryEditor, onSubmitEditor, isSubmittingEditor, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onEditInitiative, onEditWorkstream, onChangePlanningOwner, onChangePlanningIdentity, onChangeTaskAssignee, onArchiveInitiative, onUnarchiveInitiative, onArchiveWorkstream, onUnarchiveWorkstream, onArchivePlanningTask, onArchiveResolvedWorkstream, onArchiveResolvedInitiative, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onAssignInitiativeToWorkstream, onOpenTaskById, onSetTaskStatus, taskReferences, onAssignTaskToWorkstream, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, }: PlanningDrawerProps): import("react/jsx-runtime").JSX.Element;