@taskforcehq/taskforce 0.3.327 → 0.3.328

package/dist/Taskforce.module.css

@@ -959,6 +959,15 @@
   transform: scale(1.1);
 }
 
+.restoreTaskBtn {
+  background: rgba(59, 130, 246, 0.1) !important;
+  color: #3b82f6 !important;
+}
+
+.restoreTaskBtn:hover {
+  background: rgba(59, 130, 246, 0.25) !important;
+}
+
 .startWorkBtn {
   background: rgba(59, 130, 246, 0.1) !important;
   color: #3b82f6 !important;
@@ -997,15 +1006,6 @@
 }
 
 
-.archiveTaskBtn {
-  background: rgba(59, 130, 246, 0.1) !important;
-  color: #3b82f6 !important;
-}
-
-.archiveTaskBtn:hover {
-  background: rgba(59, 130, 246, 0.25) !important;
-}
-
 .bulkArchiveBtn {
   display: flex;
   align-items: center;
@@ -3415,6 +3415,12 @@
   transform: scale(1.05);
 }
 
+.attachmentActionBtnActive {
+  color: var(--brand-primary);
+  border-color: color-mix(in srgb, var(--brand-primary) 65%, white);
+  background: color-mix(in srgb, var(--brand-primary) 32%, rgba(0, 0, 0, 0.82));
+}
+
 .attachmentCaptionInput,
 .documentAttachmentCaptionInput {
   min-width: 0;
@@ -3495,6 +3501,15 @@
   top: calc(100% + 2px);
 }
 
+.attachmentImageActionsMenu {
+  position: fixed;
+  z-index: calc(var(--z-overlay) + 1);
+  top: auto;
+  right: auto;
+  width: 150px;
+  max-width: calc(100vw - 16px);
+}
+
 .contextMenu .contextDestructiveMenuItem {
   color: var(--color-error, #ef4444);
 }
@@ -3652,50 +3667,6 @@
   color: var(--text-primary, #fff);
 }
 
-.documentAttachmentType {
-  flex-shrink: 0;
-  position: relative;
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 9px;
-  line-height: 1;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  color: var(--text-muted, #94a3b8);
-  padding: 0;
-}
-
-.documentAttachmentTypeOutline {
-  position: absolute;
-  inset: 0;
-  width: 28px;
-  height: 28px;
-  overflow: visible;
-  fill: rgba(255, 255, 255, 0.04);
-  stroke: var(--border-primary);
-  stroke-width: 1;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.documentAttachmentTypeFoldFill {
-  fill: color-mix(in srgb, var(--border-primary) 35%, var(--bg-secondary));
-  stroke: none;
-}
-
-.documentAttachmentTypeFoldLine {
-  fill: none;
-}
-
-.documentAttachmentTypeLabel {
-  position: relative;
-  z-index: 1;
-  transform: translateY(2px);
-}
-
 .brokenImage {
   display: flex;
   align-items: center;

package/dist/components/activity/EntityActivityTimeline.js

@@ -24,6 +24,17 @@ export function EntityActivityTimeline({ activity, comments, formatFieldValue, r
         normalizedCurrentActorLabel !== 'user' &&
         normalizedCurrentActorLabel !== 'human' &&
         normalizedCurrentActorLabel !== normalizedCurrentActorId);
+    const resolveCanonicalCurrentActorLabel = React.useCallback((presentation) => {
+        const normalizedLabel = String(presentation.label || '').trim().toLowerCase();
+        const isLegacyCurrentUserLabel = normalizedLabel === 'you'
+            || normalizedLabel === 'user'
+            || normalizedLabel === 'human';
+        return presentation.isCurrentActorHint === true
+            && hasCanonicalCurrentActorLabel
+            && isLegacyCurrentUserLabel
+            ? currentActorLabel
+            : presentation.label;
+    }, [currentActorLabel, hasCanonicalCurrentActorLabel]);
     return (_jsxs("div", { ref: listRef, className: [timelineStyles.thread, listClassName].filter(Boolean).join(' '), onScroll: onScroll, children: [items.length === 0 ? (_jsx("div", { className: [timelineStyles.empty, emptyClassName].filter(Boolean).join(' '), children: emptyMessage })) : null, items.map((item) => {
                 const isTargetEntry = Boolean(normalizedTargetEntryId
                     && (item.id === normalizedTargetEntryId
@@ -60,10 +71,8 @@ export function EntityActivityTimeline({ activity, comments, formatFieldValue, r
                             ? commentActorIds.includes(normalizedCurrentActorId)
                             : actorPresentation.isCurrentActorHint === true
                         : commentKind === 'member';
-                    const authorLabel = isCurrentActor &&
-                        actorPresentation.label.trim().toLowerCase() === 'you' &&
-                        hasCanonicalCurrentActorLabel
-                        ? currentActorLabel
+                    const authorLabel = isCurrentActor
+                        ? resolveCanonicalCurrentActorLabel(actorPresentation)
                         : actorPresentation.label;
                     const { ActorIcon } = actorPresentation;
                     const authorColor = actorPresentation.kind === 'system'
@@ -96,6 +105,7 @@ export function EntityActivityTimeline({ activity, comments, formatFieldValue, r
                     actorProfile: item.event.actorProfile || null,
                     fallbackKind: 'system',
                 });
+                const authorLabel = resolveCanonicalCurrentActorLabel(actorPresentation);
                 const { ActorIcon } = actorPresentation;
                 const authorColor = actorPresentation.color;
                 const changeEntries = Object.entries(item.event.details?.changes || {});
@@ -109,7 +119,7 @@ export function EntityActivityTimeline({ activity, comments, formatFieldValue, r
                         timelineStyles.item,
                         timelineStyles.event,
                         actorPresentation.kind === 'system' ? timelineStyles.eventSystem : '',
-                    ].filter(Boolean).join(' '), children: _jsxs("div", { className: timelineStyles.eventMain, children: [_jsxs("span", { className: timelineStyles.author, style: authorColor ? { color: authorColor } : undefined, children: [_jsx(ActorIcon, { size: 12, strokeWidth: 1.5 }), actorPresentation.label] }), _jsxs("div", { className: timelineStyles.eventText, children: [_jsx("div", { children: summarizeEntityEvent(item.event, formatFieldValue) }), displayedChangeEntries.length > 0 ? (_jsx("div", { className: timelineStyles.eventChanges, children: displayedChangeEntries.map(([field, change]) => (_jsx("div", { className: timelineStyles.eventChange, children: summarizeTaskChange(field, change, formatFieldValue) }, field))) })) : null] }), _jsx("time", { className: timelineStyles.time, dateTime: item.event.createdAt, children: formatDate(item.event.createdAt, {
+                    ].filter(Boolean).join(' '), children: _jsxs("div", { className: timelineStyles.eventMain, children: [_jsxs("span", { className: timelineStyles.author, style: authorColor ? { color: authorColor } : undefined, children: [_jsx(ActorIcon, { size: 12, strokeWidth: 1.5 }), authorLabel] }), _jsxs("div", { className: timelineStyles.eventText, children: [_jsx("div", { children: summarizeEntityEvent(item.event, formatFieldValue) }), displayedChangeEntries.length > 0 ? (_jsx("div", { className: timelineStyles.eventChanges, children: displayedChangeEntries.map(([field, change]) => (_jsx("div", { className: timelineStyles.eventChange, children: summarizeTaskChange(field, change, formatFieldValue) }, field))) })) : null] }), _jsx("time", { className: timelineStyles.time, dateTime: item.event.createdAt, children: formatDate(item.event.createdAt, {
                                     month: 'short',
                                     day: 'numeric',
                                     hour: '2-digit',

package/dist/components/context/AttachmentPreviewHost.js

@@ -218,5 +218,5 @@ export function AttachmentPreviewHost({ theme }) {
                                                 ? `Copied ${referenceLabel}`
                                                 : `Copy ${referenceLabel}`, className: styles.referenceBadge }))] })] }), _jsx("button", { type: "button", className: "tf-control-icon", "aria-label": "Close preview", title: "Close preview", onClick: () => setPreview(null), children: _jsx(X, { size: 18 }) })] }), _jsxs("div", { className: styles.content, children: [isImage && _jsx("img", { className: styles.image, src: path, alt: attachmentName }), isPdf && (_jsx("iframe", { className: styles.pdf, src: path, title: `Preview ${attachmentName}` })), isText && textLoading && _jsx("div", { className: styles.message, children: "Loading preview\u2026" }), isText && textError && _jsx("div", { className: styles.message, children: textError }), isText && !textLoading && !textError && (isMarkdown
                             ? _jsx("div", { className: styles.textPreview, children: _jsx(Markdown, { variant: "detail", children: textContent }) })
-                            : _jsx("pre", { className: styles.codePreview, children: textContent })), !isImage && !isPdf && !isText && (_jsxs("div", { className: styles.unavailable, children: [_jsx(FileText, { size: 34, "aria-hidden": "true" }), _jsx("strong", { children: "Preview unavailable" }), _jsx("span", { children: "This file type can be opened or downloaded instead." })] }))] }), _jsxs("footer", { className: styles.footer, children: [_jsxs("div", { className: styles.secondaryActions, children: [!isExternal && (_jsxs("a", { className: styles.secondaryLink, href: buildDownloadUrl(path, attachmentName), target: "_blank", rel: "noreferrer", children: [_jsx(Download, { size: 14 }), " Download"] })), (isExternal || (!canOpenImageNotes && !canOpenDocumentManager)) && (_jsxs("a", { className: styles.secondaryLink, href: path, target: "_blank", rel: "noreferrer", children: [_jsx(ExternalLink, { size: 14 }), " Open original"] }))] }), (canOpenImageNotes || canOpenDocumentManager) && (_jsxs("button", { type: "button", className: "tf-button-primary tf-button-compact", onClick: openManager, children: [canOpenImageNotes ? _jsx(PencilLine, { size: 14 }) : _jsx(ExternalLink, { size: 14 }), canOpenImageNotes ? 'Open in Image Notes' : 'Open in Documents'] }))] })] }) }), document.body);
+                            : _jsx("pre", { className: styles.codePreview, children: textContent })), !isImage && !isPdf && !isText && (_jsxs("div", { className: styles.unavailable, children: [_jsx(FileText, { size: 34, "aria-hidden": "true" }), _jsx("strong", { children: "Preview unavailable" }), _jsx("span", { children: "This file type can be opened or downloaded instead." })] }))] }), _jsxs("footer", { className: styles.footer, children: [_jsxs("div", { className: styles.secondaryActions, children: [!isExternal && (_jsxs("a", { className: styles.secondaryLink, href: buildDownloadUrl(path, attachmentName), target: "_blank", rel: "noreferrer", children: [_jsx(Download, { size: 14 }), " Download"] })), (isExternal || (!canOpenImageNotes && !canOpenDocumentManager)) && (_jsxs("a", { className: styles.secondaryLink, href: path, target: "_blank", rel: "noreferrer", children: [_jsx(ExternalLink, { size: 14 }), " Open original"] }))] }), (canOpenImageNotes || canOpenDocumentManager) && (_jsxs("button", { type: "button", className: "tf-button-primary tf-button-compact", onClick: openManager, children: [canOpenImageNotes ? _jsx(PencilLine, { size: 14 }) : _jsx(ExternalLink, { size: 14 }), canOpenImageNotes ? 'Open in Image Notes' : 'Open'] }))] })] }) }), document.body);
 }

package/dist/components/context/ContextAttachmentManager.d.ts

@@ -11,6 +11,9 @@ export interface ContextAttachmentManagerProps {
     onAddAttachment: (file: AttachmentItem) => void;
     onRemoveAttachment: (index: number) => void;
     onUpdateAttachmentCaption: (index: number, caption: string) => void;
+    cardCoverAssetId?: string | null;
+    onSetCardCover?: (assetId: string | null) => void | Promise<void>;
+    cardCoverDisabled?: boolean;
     readOnly?: boolean;
     defaultExpanded?: boolean;
     supplementalContent?: React.ReactNode;

package/dist/components/context/ContextAttachmentManager.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { AlertTriangle, Check, Copy, Download, ExternalLink, Eye, FileUp, Link2, Loader2, MoreHorizontal, PencilLine, Plus, Trash2, X } from 'lucide-react';
+import { createPortal } from 'react-dom';
+import { AlertTriangle, Check, Copy, Download, ExternalLink, Eye, FileUp, Link2, Loader2, MoreHorizontal, PanelTop, PencilLine, Plus, Trash2, X } from 'lucide-react';
 import styles from '../../Taskforce.module.css';
 import { DisclosureSectionHeader } from '../ui/DisclosureSectionHeader';
-import { dispatchOpenMarkdownDocument, isMarkdownContextFile, resolveContextFsPath } from '../../utils/contextFiles';
+import { dispatchOpenMarkdownDocument, isMarkdownContextFile, resolveContextAssetId, resolveContextFsPath } from '../../utils/contextFiles';
 import { canOpenAnnotatedAttachment, dispatchOpenAnnotatedAttachment } from '../../utils/annotatedAttachments';
 import { dispatchTaskforceContextAssetsMutated } from '../../utils/contextAssetEvents';
 import { getDocumentReferenceLabel } from '../../utils/documentReferences';
 import { uploadContextAttachment } from '../../utils/contextAttachmentUpload';
 import { dispatchPreviewContextAttachment } from '../../utils/contextAttachmentPreview';
 import { ReferenceBadgeButton } from '../ui/ReferenceBadgeButton';
+import { DocumentTypeIcon } from '../ui/DocumentTypeIcon';
 const ACCEPTED_CONTEXT_FILE_TYPES = [
     '.png', '.jpg', '.jpeg', '.webp', '.gif',
     '.pdf', '.txt', '.md', '.csv', '.json', '.doc', '.docx',
@@ -75,7 +77,7 @@ function getAttachmentTypeLabel(item) {
     return /^https?:\/\//i.test(path) ? 'LINK' : 'FILE';
 }
 export function ContextAttachmentManager(props) {
-    const { ownerType = 'task', ownerId, ownerReferenceLabel, workspaceId, attachments, onAddAttachment, onRemoveAttachment, onUpdateAttachmentCaption, readOnly = false, defaultExpanded = true, supplementalContent, } = props;
+    const { ownerType = 'task', ownerId, ownerReferenceLabel, workspaceId, attachments, onAddAttachment, onRemoveAttachment, onUpdateAttachmentCaption, cardCoverAssetId = null, onSetCardCover, cardCoverDisabled = false, readOnly = false, defaultExpanded = true, supplementalContent, } = props;
     const inputRef = useRef(null);
     const managerRef = useRef(null);
     const [uploading, setUploading] = useState(false);
@@ -83,10 +85,13 @@ export function ContextAttachmentManager(props) {
     const [linkValue, setLinkValue] = useState('');
     const [linkError, setLinkError] = useState(null);
     const [contextNotice, setContextNotice] = useState(null);
+    const [cardCoverBusyAssetId, setCardCoverBusyAssetId] = useState(null);
     const [showContextUpload, setShowContextUpload] = useState(defaultExpanded);
     const [showAddMenu, setShowAddMenu] = useState(false);
     const [showLinkComposer, setShowLinkComposer] = useState(false);
     const [openActionsIndex, setOpenActionsIndex] = useState(null);
+    const [openImageActionsIndex, setOpenImageActionsIndex] = useState(null);
+    const [imageActionsMenuPosition, setImageActionsMenuPosition] = useState({ top: 0, left: 0 });
     const [captionEditor, setCaptionEditor] = useState(null);
     const [copiedDocumentReference, setCopiedDocumentReference] = useState(null);
     const copyResetTimerRef = useRef(null);
@@ -94,6 +99,9 @@ export function ContextAttachmentManager(props) {
         if (copyResetTimerRef.current !== null)
             window.clearTimeout(copyResetTimerRef.current);
     }, []);
+    useEffect(() => {
+        setCardCoverBusyAssetId(null);
+    }, [ownerId, ownerType, workspaceId]);
     const copyDocumentReference = async (referenceLabel) => {
         try {
             await navigator.clipboard.writeText(referenceLabel);
@@ -121,6 +129,9 @@ export function ContextAttachmentManager(props) {
     const addFirstActionRef = useRef(null);
     const attachmentActionsTriggerRef = useRef(null);
     const attachmentFirstActionRef = useRef(null);
+    const imageActionsTriggerRef = useRef(null);
+    const imageActionsMenuRef = useRef(null);
+    const imageFirstActionRef = useRef(null);
     const captionFocusReturnRef = useRef(null);
     const linkInputRef = useRef(null);
     const contextKeyRef = useRef(new Set());
@@ -171,6 +182,7 @@ export function ContextAttachmentManager(props) {
         setShowAddMenu(false);
         setShowLinkComposer(false);
         setOpenActionsIndex(null);
+        setOpenImageActionsIndex(null);
         setCaptionEditor(null);
         setIsDropActive(false);
         setDragDepth(0);
@@ -217,7 +229,7 @@ export function ContextAttachmentManager(props) {
         return () => window.clearTimeout(timeoutId);
     }, [contextNotice]);
     useEffect(() => {
-        if (!showAddMenu && openActionsIndex === null)
+        if (!showAddMenu && openActionsIndex === null && openImageActionsIndex === null)
             return;
         const handlePointerDown = (event) => {
             const target = event.target;
@@ -227,10 +239,15 @@ export function ContextAttachmentManager(props) {
             if (openActionsIndex !== null && !target?.closest('[data-context-actions-menu="true"]')) {
                 setOpenActionsIndex(null);
             }
+            if (openImageActionsIndex !== null
+                && !imageActionsTriggerRef.current?.contains(target)
+                && !imageActionsMenuRef.current?.contains(target)) {
+                setOpenImageActionsIndex(null);
+            }
         };
         document.addEventListener('pointerdown', handlePointerDown);
         return () => document.removeEventListener('pointerdown', handlePointerDown);
-    }, [openActionsIndex, showAddMenu]);
+    }, [openActionsIndex, openImageActionsIndex, showAddMenu]);
     useEffect(() => {
         if (!showLinkComposer)
             return;
@@ -246,12 +263,45 @@ export function ContextAttachmentManager(props) {
             return;
         attachmentFirstActionRef.current?.focus();
     }, [openActionsIndex]);
+    useEffect(() => {
+        if (openImageActionsIndex === null)
+            return;
+        imageFirstActionRef.current?.focus();
+    }, [openImageActionsIndex]);
+    useLayoutEffect(() => {
+        if (openImageActionsIndex === null)
+            return;
+        const positionMenu = () => {
+            const triggerRect = imageActionsTriggerRef.current?.getBoundingClientRect();
+            if (!triggerRect)
+                return;
+            const menuRect = imageActionsMenuRef.current?.getBoundingClientRect();
+            const menuWidth = menuRect?.width || 150;
+            const menuHeight = menuRect?.height || 108;
+            const gap = 4;
+            const viewportPadding = 8;
+            const left = Math.max(viewportPadding, Math.min(triggerRect.right - menuWidth, window.innerWidth - menuWidth - viewportPadding));
+            const preferredTop = triggerRect.bottom + gap;
+            const top = preferredTop + menuHeight <= window.innerHeight - viewportPadding
+                ? preferredTop
+                : Math.max(viewportPadding, triggerRect.top - menuHeight - gap);
+            setImageActionsMenuPosition({ top, left });
+        };
+        positionMenu();
+        window.addEventListener('resize', positionMenu);
+        window.addEventListener('scroll', positionMenu, true);
+        return () => {
+            window.removeEventListener('resize', positionMenu);
+            window.removeEventListener('scroll', positionMenu, true);
+        };
+    }, [openImageActionsIndex]);
     useEffect(() => {
         if (!readOnly)
             return;
         setShowAddMenu(false);
         setShowLinkComposer(false);
         setOpenActionsIndex(null);
+        setOpenImageActionsIndex(null);
         setCaptionEditor(null);
         setIsDropActive(false);
         setDragDepth(0);
@@ -572,6 +622,7 @@ export function ContextAttachmentManager(props) {
                         setShowAddMenu(false);
                         setShowLinkComposer(false);
                         setOpenActionsIndex(null);
+                        setOpenImageActionsIndex(null);
                         setCaptionEditor(null);
                         setIsDropActive(false);
                         setDragDepth(0);
@@ -623,6 +674,16 @@ export function ContextAttachmentManager(props) {
                                     const isExternalUrl = /^https?:\/\//i.test(path);
                                     const canAnnotate = ownerType === 'task'
                                         && canOpenAnnotatedAttachment(item, { taskId: trimmedOwnerId });
+                                    const assetId = typeof item === 'string' ? '' : String(item.assetId || '').trim();
+                                    const isCardCover = Boolean(assetId && assetId === cardCoverAssetId);
+                                    const canSetCardCover = ownerType === 'task'
+                                        && Boolean(trimmedOwnerId)
+                                        && Boolean(assetId)
+                                        && typeof item !== 'string'
+                                        && item.linkRole === 'image'
+                                        && Boolean(onSetCardCover)
+                                        && !readOnly;
+                                    const hasImageActionMenu = Boolean(fsPath || !isExternalUrl || !readOnly);
                                     return (_jsxs("div", { className: styles.attachmentCard, children: [_jsxs("div", { className: styles.attachmentPreviewContainer, children: [isImage ? (_jsx("button", { type: "button", className: styles.attachmentPreviewButton, "aria-label": `Open ${caption || displayName}`, onClick: () => {
                                                             if (dispatchPreviewContextAttachment(item, {
                                                                 ownerType,
@@ -650,22 +711,56 @@ export function ContextAttachmentManager(props) {
                                                             if (dispatchOpenMarkdownDocument(markdownTarget, fsPath))
                                                                 return;
                                                             window.open(path, '_blank');
-                                                        }, title: "Open file", children: [_jsx(FileUp, { size: 16 }), _jsx("span", { children: caption || fsPath || path.split('/').pop() || 'Context file' })] })), _jsxs("div", { className: styles.brokenImagePlaceholder, children: [_jsx(AlertTriangle, { size: 16 }), _jsx("span", { children: "Preview unavailable" })] }), _jsxs("div", { className: styles.attachmentActions, children: [canAnnotate && (_jsx("button", { type: "button", className: styles.attachmentActionBtn, onClick: (e) => {
+                                                        }, title: "Open file", children: [_jsx(FileUp, { size: 16 }), _jsx("span", { children: caption || fsPath || path.split('/').pop() || 'Context file' })] })), _jsxs("div", { className: styles.brokenImagePlaceholder, children: [_jsx(AlertTriangle, { size: 16 }), _jsx("span", { children: "Preview unavailable" })] }), _jsxs("div", { className: styles.attachmentActions, children: [canSetCardCover && (_jsx("button", { type: "button", className: `${styles.attachmentActionBtn} ${isCardCover ? styles.attachmentActionBtnActive : ''}`, "aria-pressed": isCardCover, "aria-label": isCardCover ? 'Remove from task card' : 'Show on task card', onClick: (event) => {
+                                                                    event.stopPropagation();
+                                                                    setCardCoverBusyAssetId(assetId);
+                                                                    setUploadError(null);
+                                                                    void Promise.resolve(onSetCardCover?.(isCardCover ? null : assetId))
+                                                                        .then(() => {
+                                                                        setContextNotice(isCardCover
+                                                                            ? 'Removed image from task card.'
+                                                                            : 'Image shown on task card.');
+                                                                    })
+                                                                        .catch((error) => {
+                                                                        setUploadError(error instanceof Error
+                                                                            ? error.message
+                                                                            : 'Unable to update the task card image.');
+                                                                    })
+                                                                        .finally(() => setCardCoverBusyAssetId(null));
+                                                                }, disabled: cardCoverDisabled || cardCoverBusyAssetId !== null, title: cardCoverDisabled
+                                                                    ? 'Attachment is still saving'
+                                                                    : isCardCover ? 'Remove from task card' : 'Show on task card', children: cardCoverBusyAssetId === assetId
+                                                                    ? _jsx(Loader2, { size: 12, className: styles.spinner })
+                                                                    : _jsx(PanelTop, { size: 12 }) })), canAnnotate && (_jsx("button", { type: "button", className: styles.attachmentActionBtn, "aria-label": "Annotate image", onClick: (e) => {
                                                                     e.stopPropagation();
                                                                     dispatchOpenAnnotatedAttachment(item, {
                                                                         taskId: trimmedOwnerId,
                                                                         taskReferenceLabel: ownerReferenceLabel,
                                                                     });
-                                                                }, title: "Annotate", children: _jsx(PencilLine, { size: 12 }) })), fsPath && (_jsx("button", { type: "button", className: styles.attachmentActionBtn, onClick: (e) => {
-                                                                    e.stopPropagation();
-                                                                    navigator.clipboard.writeText(fsPath);
-                                                                }, title: `Copy path: ${fsPath}`, children: _jsx(Copy, { size: 12 }) })), !isExternalUrl && (_jsx("button", { type: "button", className: styles.attachmentActionBtn, onClick: (e) => {
-                                                                    e.stopPropagation();
-                                                                    window.open(buildDownloadUrl(path, caption || displayName), '_blank');
-                                                                }, title: "Download", children: _jsx(Download, { size: 12 }) })), !readOnly && (_jsx("button", { type: "button", className: styles.attachmentActionBtn, onClick: (e) => {
-                                                                    e.stopPropagation();
-                                                                    onRemoveAttachment(idx);
-                                                                }, title: "Delete", children: _jsx(Trash2, { size: 12 }) }))] })] }), captionEditor?.index === idx ? (_jsxs("div", { className: styles.contextCaptionEditor, onBlur: (event) => {
+                                                                }, title: "Annotate", children: _jsx(PencilLine, { size: 12 }) })), hasImageActionMenu && (_jsx("button", { type: "button", className: styles.attachmentActionBtn, "aria-label": `Actions for ${displayName}`, "aria-expanded": openImageActionsIndex === idx, onClick: (event) => {
+                                                                    event.stopPropagation();
+                                                                    imageActionsTriggerRef.current = event.currentTarget;
+                                                                    setOpenActionsIndex(null);
+                                                                    setOpenImageActionsIndex(openImageActionsIndex === idx ? null : idx);
+                                                                }, title: "More actions", children: _jsx(MoreHorizontal, { size: 12 }) })), openImageActionsIndex === idx && createPortal(_jsxs("div", { ref: imageActionsMenuRef, className: `${styles.contextMenu} ${styles.attachmentImageActionsMenu}`, role: "group", "aria-label": `Actions for ${displayName}`, style: imageActionsMenuPosition, onClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
+                                                                    if (event.key !== 'Escape')
+                                                                        return;
+                                                                    event.preventDefault();
+                                                                    event.stopPropagation();
+                                                                    setOpenImageActionsIndex(null);
+                                                                    imageActionsTriggerRef.current?.focus();
+                                                                }, children: [fsPath && (_jsxs("button", { ref: imageFirstActionRef, type: "button", onClick: () => {
+                                                                            void navigator.clipboard.writeText(fsPath);
+                                                                            setOpenImageActionsIndex(null);
+                                                                            window.requestAnimationFrame(() => imageActionsTriggerRef.current?.focus());
+                                                                        }, children: [_jsx(Copy, { size: 14 }), " Copy path"] })), !isExternalUrl && (_jsxs("button", { ref: fsPath ? undefined : imageFirstActionRef, type: "button", onClick: () => {
+                                                                            window.open(buildDownloadUrl(path, caption || displayName), '_blank');
+                                                                            setOpenImageActionsIndex(null);
+                                                                            window.requestAnimationFrame(() => imageActionsTriggerRef.current?.focus());
+                                                                        }, children: [_jsx(Download, { size: 14 }), " Download"] })), !readOnly && (_jsxs("button", { ref: !fsPath && isExternalUrl ? imageFirstActionRef : undefined, type: "button", className: styles.contextDestructiveMenuItem, onClick: () => {
+                                                                            onRemoveAttachment(idx);
+                                                                            setOpenImageActionsIndex(null);
+                                                                        }, children: [_jsx(Trash2, { size: 14 }), " Delete"] }))] }), document.body)] })] }), captionEditor?.index === idx ? (_jsxs("div", { className: styles.contextCaptionEditor, onBlur: (event) => {
                                                     if (!event.currentTarget.contains(event.relatedTarget)) {
                                                         commitCaptionEdit(false);
                                                     }
@@ -700,8 +795,9 @@ export function ContextAttachmentManager(props) {
                                             : { ...item, taskId: trimmedOwnerId })
                                         : item;
                                     const canOpenInDocumentManager = isMarkdownContextFile(markdownTarget, fsPath)
-                                        && Boolean(resolveContextFsPath(markdownTarget, fsPath));
-                                    return (_jsxs("div", { className: styles.documentAttachmentItem, children: [_jsxs("div", { className: styles.documentAttachmentRow, children: [_jsxs("div", { className: styles.documentAttachmentMain, children: [documentReferenceLabel && (_jsx(ReferenceBadgeButton, { label: documentReferenceLabel, copied: copiedDocumentReference === documentReferenceLabel, title: `Copy document reference ${documentReferenceLabel}`, ariaLabel: `Copy document reference ${documentReferenceLabel}`, className: styles.documentAttachmentReference, onClick: () => { void copyDocumentReference(documentReferenceLabel); } })), _jsx("button", { type: "button", className: styles.documentAttachmentLink, onClick: () => {
+                                        && Boolean(resolveContextFsPath(markdownTarget, fsPath)
+                                            || resolveContextAssetId(markdownTarget));
+                                    return (_jsxs("div", { className: styles.documentAttachmentItem, children: [_jsxs("div", { className: styles.documentAttachmentRow, children: [_jsxs("div", { className: styles.documentAttachmentMain, children: [_jsx(DocumentTypeIcon, { label: fileType }), documentReferenceLabel && (_jsx(ReferenceBadgeButton, { label: documentReferenceLabel, copied: copiedDocumentReference === documentReferenceLabel, title: `Copy document reference ${documentReferenceLabel}`, ariaLabel: `Copy document reference ${documentReferenceLabel}`, className: styles.documentAttachmentReference, onClick: () => { void copyDocumentReference(documentReferenceLabel); } })), _jsx("button", { type: "button", className: styles.documentAttachmentLink, onClick: () => {
                                                                     if (dispatchPreviewContextAttachment(item, {
                                                                         ownerType,
                                                                         ownerId: trimmedOwnerId || null,
@@ -712,7 +808,7 @@ export function ContextAttachmentManager(props) {
                                                                     if (dispatchOpenMarkdownDocument(markdownTarget, fsPath))
                                                                         return;
                                                                     window.open(path, '_blank');
-                                                                }, title: displayName, "aria-label": `${caption || displayName} ${fileType}`, children: _jsx("span", { className: styles.documentAttachmentName, children: caption || displayName }) }), _jsxs("span", { className: styles.documentAttachmentType, children: [_jsxs("svg", { className: styles.documentAttachmentTypeOutline, viewBox: "0 0 28 28", "aria-hidden": "true", 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.documentAttachmentTypeFoldFill, d: "M20.25 0.75v7h7Z" }), _jsx("path", { className: styles.documentAttachmentTypeFoldLine, d: "M20.25 0.75v7h7" })] }), _jsx("span", { className: styles.documentAttachmentTypeLabel, children: fileType })] })] }), (!readOnly || Boolean(fsPath) || !isExternalUrl) && (_jsxs("div", { className: styles.contextMenuControl, "data-context-actions-menu": "true", onKeyDown: (event) => {
+                                                                }, title: displayName, "aria-label": `${caption || displayName} ${fileType}`, children: _jsx("span", { className: styles.documentAttachmentName, children: caption || displayName }) })] }), (!readOnly || Boolean(fsPath) || !isExternalUrl) && (_jsxs("div", { className: styles.contextMenuControl, "data-context-actions-menu": "true", onKeyDown: (event) => {
                                                             if (event.key !== 'Escape' || openActionsIndex !== idx)
                                                                 return;
                                                             event.preventDefault();
@@ -737,7 +833,7 @@ export function ContextAttachmentManager(props) {
                                                                                 window.open(path, '_blank');
                                                                             }
                                                                             setOpenActionsIndex(null);
-                                                                        }, children: [_jsx(ExternalLink, { size: 14 }), " Open in Documents"] })), !readOnly && (_jsxs("button", { type: "button", onClick: () => {
+                                                                        }, children: [_jsx(ExternalLink, { size: 14 }), " Open"] })), !readOnly && (_jsxs("button", { type: "button", onClick: () => {
                                                                             captionFocusReturnRef.current = attachmentActionsTriggerRef.current;
                                                                             startCaptionEdit(idx, caption);
                                                                             setOpenActionsIndex(null);

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { TaskAssigneeOption } from '../../../utils/assignees';
 import type { PlanningNodeSummary, PlanningStatusCounts } from './planningWorkspaceModel';
+import { type PlanningIdentityPatch } from './PlanningVisualIdentity';
 export declare function PlanningReferenceBadge({ label, entityType, entityName, interactive, provisional, pending, }: {
     label: string;
     entityType: 'initiative' | 'workstream' | 'task';
@@ -34,11 +35,12 @@ export declare function PlanningSummaryMeta({ item, workstreamCount, className,
     workstreamCount?: number;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function PlanningEntitySummary({ item, entityType, workstreamCount, ownerOption, ownerOptions, onChangeOwner, }: {
+export declare function PlanningEntitySummary({ item, entityType, workstreamCount, ownerOption, ownerOptions, onChangeOwner, onChangeIdentity, }: {
     item: PlanningNodeSummary;
     entityType: 'initiative' | 'workstream';
     workstreamCount?: number;
     ownerOption?: TaskAssigneeOption;
     ownerOptions?: TaskAssigneeOption[];
     onChangeOwner?: (ownerId: string) => void | Promise<void>;
+    onChangeIdentity?: (patch: PlanningIdentityPatch) => void | Promise<void>;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -6,6 +6,7 @@ import { getStatusDefinition, resolveColor } from '../../../utils/constants';
 import { ReferenceBadgeButton } from '../../ui/ReferenceBadgeButton';
 import { PlanningCardIdentity } from './PlanningCardIdentity';
 import styles from './PlanningEntitySummary.module.css';
+import { PlanningVisualIdentity } from './PlanningVisualIdentity';
 const PLANNING_PROGRESS_STATUS_ORDER = [
     'done',
     'review',
@@ -91,7 +92,7 @@ export function PlanningSummaryMeta({ item, workstreamCount, className = '', })
     const normalizedWorkstreamCount = Math.max(0, Number(workstreamCount) || 0);
     return (_jsxs(PlanningCardMeta, { className: className, children: [workstreamCount !== undefined ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: styles.scopeCount, children: [normalizedWorkstreamCount, " ", normalizedWorkstreamCount === 1 ? 'workstream' : 'workstreams'] }), _jsx("span", { "aria-hidden": "true", children: "\u2022" })] })) : null, hasTasks ? (_jsxs(_Fragment, { children: [_jsxs("span", { children: [item.completedTaskCount, " of ", item.taskCount, " complete"] }), _jsx("span", { "aria-hidden": "true", children: "\u2022" })] })) : null, _jsx(PlanningContextCount, { count: item.attachmentCount })] }));
 }
-export function PlanningEntitySummary({ item, entityType, workstreamCount, ownerOption, ownerOptions, onChangeOwner, }) {
+export function PlanningEntitySummary({ item, entityType, workstreamCount, ownerOption, ownerOptions, onChangeOwner, onChangeIdentity, }) {
     const hasTasks = item.taskCount > 0;
-    return (_jsxs(_Fragment, { children: [_jsx(PlanningCardTitle, { children: item.title }), hasTasks ? (_jsx(PlanningProgress, { value: item.progressPercent, label: `${item.title}: ${item.progressPercent}% resolved`, statusCounts: item.statusCounts })) : null, _jsxs(PlanningCardFooter, { identity: (_jsx(PlanningCardIdentity, { role: "owner", option: ownerOption, label: item.ownerLabel, value: item.ownerId, options: ownerOptions, onChange: onChangeOwner, disabled: Boolean(item.isArchived) })), children: [!hasTasks ? _jsx(PlanningNoTasks, {}) : null, _jsx(PlanningSummaryMeta, { item: item, workstreamCount: entityType === 'initiative' ? workstreamCount : undefined })] })] }));
+    return (_jsxs("div", { className: styles.summaryLayout, children: [_jsx(PlanningVisualIdentity, { entityType: entityType, entityId: item.id, icon: item.icon, color: item.color, disabled: Boolean(item.isArchived), onChange: onChangeIdentity }), _jsxs("div", { className: styles.summaryContent, children: [_jsx(PlanningCardTitle, { children: item.title }), hasTasks ? (_jsx(PlanningProgress, { value: item.progressPercent, label: `${item.title}: ${item.progressPercent}% resolved`, statusCounts: item.statusCounts })) : null, _jsxs(PlanningCardFooter, { identity: (_jsx(PlanningCardIdentity, { role: "owner", option: ownerOption, label: item.ownerLabel, value: item.ownerId, options: ownerOptions, onChange: onChangeOwner, disabled: Boolean(item.isArchived) })), children: [!hasTasks ? _jsx(PlanningNoTasks, {}) : null, _jsx(PlanningSummaryMeta, { item: item, workstreamCount: entityType === 'initiative' ? workstreamCount : undefined })] })] })] }));
 }

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

@@ -1,9 +1,11 @@
 import type { PlanningLinkOption } from './planningWorkspaceModel';
-export declare function PlanningLinkPicker({ options, selectedId, entityLabel, onSelect, disabled, className, }: {
+export declare function PlanningLinkPicker({ options, selectedId, entityLabel, onSelect, disabled, className, iconTrigger, triggerTitle, }: {
     options: PlanningLinkOption[];
     selectedId?: string;
     entityLabel: 'initiative' | 'workstream' | 'task';
     onSelect: (option: PlanningLinkOption) => void | Promise<void>;
     disabled?: boolean;
     className?: string;
+    iconTrigger?: boolean;
+    triggerTitle?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -3,9 +3,11 @@ import React from 'react';
 import { Link2 } from 'lucide-react';
 import { TaxonomyDropdown } from '../../ui/TaxonomyDropdown';
 import { PlanningReferenceBadge } from './PlanningEntitySummary';
+import taskforceStyles from '../../../Taskforce.module.css';
 import controlStyles from './PlanningDropdownControl.module.css';
 import styles from './PlanningLinkPicker.module.css';
-export function PlanningLinkPicker({ options, selectedId = '', entityLabel, onSelect, disabled = false, className = '', }) {
+import { PlanningVisualIdentity } from './PlanningVisualIdentity';
+export function PlanningLinkPicker({ options, selectedId = '', entityLabel, onSelect, disabled = false, className = '', iconTrigger = false, triggerTitle, }) {
     const optionById = React.useMemo(() => new Map(options.map((option) => [option.id, option])), [options]);
     const dropdownOptions = React.useMemo(() => options.map((option) => ({
         value: option.id,
@@ -17,10 +19,10 @@ export function PlanningLinkPicker({ options, selectedId = '', entityLabel, onSe
             const option = optionById.get(String(value));
             if (option)
                 void onSelect(option);
-        }, disabled: disabled || options.length === 0, className: `${controlStyles.control} ${className}`.trim(), portalPanel: true, panelAlign: "start", panelMinWidth: 320, searchable: true, searchPlaceholder: `Search ${entityLabel}s by title or reference`, noResultsText: `No matching ${entityLabel}s.`, ariaLabel: linkLabel, triggerContent: selectedOption ? (_jsxs("span", { className: styles.triggerSelection, children: [_jsx(PlanningReferenceBadge, { label: selectedOption.referenceLabel, entityType: entityLabel, entityName: selectedOption.title }), _jsx("span", { children: selectedOption.title })] })) : (_jsxs("span", { className: styles.triggerAction, children: [_jsx(Link2, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: linkLabel })] })), renderOptionContent: (option) => {
+        }, disabled: disabled || options.length === 0, className: `${iconTrigger ? `${styles.iconPicker} ${taskforceStyles.taskWorkstreamPicker}` : controlStyles.control} ${className}`.trim(), portalPanel: true, panelAlign: "start", panelMinWidth: 320, searchable: true, searchPlaceholder: `Search ${entityLabel}s by title or reference`, noResultsText: `No matching ${entityLabel}s.`, ariaLabel: linkLabel, title: iconTrigger ? (triggerTitle || linkLabel) : undefined, hideChevron: iconTrigger, triggerContent: iconTrigger ? (_jsx(Link2, { size: 14, "aria-hidden": "true" })) : selectedOption ? (_jsxs("span", { className: styles.triggerSelection, children: [_jsx(PlanningReferenceBadge, { label: selectedOption.referenceLabel, entityType: entityLabel, entityName: selectedOption.title }), _jsx("span", { children: selectedOption.title })] })) : (_jsxs("span", { className: styles.triggerAction, children: [_jsx(Link2, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: linkLabel })] })), renderOptionContent: (option) => {
             const candidate = optionById.get(String(option.value));
             if (!candidate)
                 return option.label;
-            return (_jsxs("span", { className: styles.option, children: [_jsxs("span", { className: styles.optionTopRow, children: [_jsx(PlanningReferenceBadge, { label: candidate.referenceLabel, entityType: entityLabel, entityName: candidate.title }), _jsx("span", { className: styles.optionTitle, children: candidate.title })] }), candidate.meta ? _jsx("span", { className: styles.optionMeta, children: candidate.meta }) : null] }));
+            return (_jsxs("span", { className: styles.option, children: [_jsxs("span", { className: styles.optionTopRow, children: [entityLabel !== 'task' ? (_jsx(PlanningVisualIdentity, { entityType: entityLabel, entityId: candidate.id, icon: candidate.icon, color: candidate.color, size: "inline", disabled: true })) : null, _jsx(PlanningReferenceBadge, { label: candidate.referenceLabel, entityType: entityLabel, entityName: candidate.title }), _jsx("span", { className: styles.optionTitle, children: candidate.title })] }), candidate.meta ? _jsx("span", { className: styles.optionMeta, children: candidate.meta }) : null] }));
         }, placeholder: linkLabel }));
 }