@taskforcehq/taskforce 0.3.326 → 0.3.327

package/dist/components/context/ContextAttachmentManager.js

@@ -1,12 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { AlertTriangle, Copy, Download, File, FileUp, Loader2, PencilLine, Trash2 } from 'lucide-react';
+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 styles from '../../Taskforce.module.css';
 import { DisclosureSectionHeader } from '../ui/DisclosureSectionHeader';
-import { dispatchOpenMarkdownDocument } from '../../utils/contextFiles';
+import { dispatchOpenMarkdownDocument, isMarkdownContextFile, 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';
 const ACCEPTED_CONTEXT_FILE_TYPES = [
     '.png', '.jpg', '.jpeg', '.webp', '.gif',
     '.pdf', '.txt', '.md', '.csv', '.json', '.doc', '.docx',
@@ -33,14 +36,6 @@ function formatFileList(fileNames) {
 function getLocalFileFingerprint(file) {
     return `${file.name.trim().toLowerCase()}::${file.size}::${file.lastModified}`;
 }
-function readFileAsDataUrl(file) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result || ''));
-        reader.onerror = () => reject(reader.error || new Error('Failed to read file'));
-        reader.readAsDataURL(file);
-    });
-}
 function isImagePath(path) {
     return /\.(png|jpe?g|webp|gif)(\?|#|$)/i.test(path);
 }
@@ -80,18 +75,58 @@ function getAttachmentTypeLabel(item) {
     return /^https?:\/\//i.test(path) ? 'LINK' : 'FILE';
 }
 export function ContextAttachmentManager(props) {
-    const { ownerType = 'task', ownerId, ownerReferenceLabel, workspaceId, attachments, onAddAttachment, onRemoveAttachment, onUpdateAttachmentCaption, } = props;
+    const { ownerType = 'task', ownerId, ownerReferenceLabel, workspaceId, attachments, onAddAttachment, onRemoveAttachment, onUpdateAttachmentCaption, readOnly = false, defaultExpanded = true, supplementalContent, } = props;
     const inputRef = useRef(null);
+    const managerRef = useRef(null);
     const [uploading, setUploading] = useState(false);
     const [uploadError, setUploadError] = useState(null);
     const [linkValue, setLinkValue] = useState('');
     const [linkError, setLinkError] = useState(null);
     const [contextNotice, setContextNotice] = useState(null);
-    const [showContextUpload, setShowContextUpload] = useState(false);
+    const [showContextUpload, setShowContextUpload] = useState(defaultExpanded);
+    const [showAddMenu, setShowAddMenu] = useState(false);
+    const [showLinkComposer, setShowLinkComposer] = useState(false);
+    const [openActionsIndex, setOpenActionsIndex] = useState(null);
+    const [captionEditor, setCaptionEditor] = useState(null);
+    const [copiedDocumentReference, setCopiedDocumentReference] = useState(null);
+    const copyResetTimerRef = useRef(null);
+    useEffect(() => () => {
+        if (copyResetTimerRef.current !== null)
+            window.clearTimeout(copyResetTimerRef.current);
+    }, []);
+    const copyDocumentReference = async (referenceLabel) => {
+        try {
+            await navigator.clipboard.writeText(referenceLabel);
+        }
+        catch {
+            const textarea = document.createElement('textarea');
+            textarea.value = referenceLabel;
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            textarea.remove();
+        }
+        setCopiedDocumentReference(referenceLabel);
+        if (copyResetTimerRef.current !== null)
+            window.clearTimeout(copyResetTimerRef.current);
+        copyResetTimerRef.current = window.setTimeout(() => {
+            setCopiedDocumentReference(null);
+            copyResetTimerRef.current = null;
+        }, 1200);
+    };
     const [isDropActive, setIsDropActive] = useState(false);
     const [dragDepth, setDragDepth] = useState(0);
+    const addMenuRef = useRef(null);
+    const addTriggerRef = useRef(null);
+    const addFirstActionRef = useRef(null);
+    const attachmentActionsTriggerRef = useRef(null);
+    const attachmentFirstActionRef = useRef(null);
+    const captionFocusReturnRef = useRef(null);
+    const linkInputRef = useRef(null);
     const contextKeyRef = useRef(new Set());
     const localUploadFingerprintRef = useRef(new Set());
+    const ownerGenerationRef = useRef(0);
+    const activeOwnerKeyRef = useRef('');
     const normalizeKey = (value) => (value || '').trim();
     const getContextKeys = (path, fsPath) => {
         const keys = [];
@@ -121,22 +156,35 @@ export function ContextAttachmentManager(props) {
     const addKeys = (set, keys) => keys.forEach((key) => set.add(key));
     const trimmedWorkspaceId = String(workspaceId || '').trim();
     const trimmedOwnerId = String(ownerId || '').trim();
+    const ownerKey = `${trimmedWorkspaceId}\u0000${ownerType}\u0000${trimmedOwnerId}`;
+    useLayoutEffect(() => {
+        activeOwnerKeyRef.current = ownerKey;
+        ownerGenerationRef.current += 1;
+        localUploadFingerprintRef.current.clear();
+        contextKeyRef.current = new Set(keySetFromFiles);
+        setUploading(false);
+        setUploadError(null);
+        setLinkValue('');
+        setLinkError(null);
+        setContextNotice(null);
+        setShowContextUpload(defaultExpanded);
+        setShowAddMenu(false);
+        setShowLinkComposer(false);
+        setOpenActionsIndex(null);
+        setCaptionEditor(null);
+        setIsDropActive(false);
+        setDragDepth(0);
+        if (inputRef.current)
+            inputRef.current.value = '';
+        return () => {
+            ownerGenerationRef.current += 1;
+        };
+    }, [defaultExpanded, ownerKey]);
     const ownerTypeLabel = ownerType === 'initiative'
         ? 'initiative'
         : ownerType === 'workstream'
             ? 'workstream'
             : 'task';
-    const ownerUploadPayload = {
-        ownerType,
-        ownerId: trimmedOwnerId || null,
-        taskId: ownerType === 'task' ? (trimmedOwnerId || null) : null,
-    };
-    const buildApiHeaders = (contentType = 'application/json') => {
-        const headers = { 'Content-Type': contentType };
-        if (trimmedWorkspaceId)
-            headers['x-taskforce-workspace-id'] = trimmedWorkspaceId;
-        return headers;
-    };
     const addLink = (rawValue, clearInput = true, contextKeySet = contextKeyRef.current) => {
         const trimmed = rawValue.trim();
         if (!trimmed)
@@ -168,9 +216,55 @@ export function ContextAttachmentManager(props) {
         }, CONTEXT_NOTICE_TIMEOUT_MS);
         return () => window.clearTimeout(timeoutId);
     }, [contextNotice]);
+    useEffect(() => {
+        if (!showAddMenu && openActionsIndex === null)
+            return;
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (showAddMenu && !addMenuRef.current?.contains(target)) {
+                setShowAddMenu(false);
+            }
+            if (openActionsIndex !== null && !target?.closest('[data-context-actions-menu="true"]')) {
+                setOpenActionsIndex(null);
+            }
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        return () => document.removeEventListener('pointerdown', handlePointerDown);
+    }, [openActionsIndex, showAddMenu]);
+    useEffect(() => {
+        if (!showLinkComposer)
+            return;
+        linkInputRef.current?.focus();
+    }, [showLinkComposer]);
+    useEffect(() => {
+        if (!showAddMenu)
+            return;
+        addFirstActionRef.current?.focus();
+    }, [showAddMenu]);
+    useEffect(() => {
+        if (openActionsIndex === null)
+            return;
+        attachmentFirstActionRef.current?.focus();
+    }, [openActionsIndex]);
+    useEffect(() => {
+        if (!readOnly)
+            return;
+        setShowAddMenu(false);
+        setShowLinkComposer(false);
+        setOpenActionsIndex(null);
+        setCaptionEditor(null);
+        setIsDropActive(false);
+        setDragDepth(0);
+    }, [readOnly]);
     const handleSelectedFiles = async (selectedFilesInput) => {
         if (selectedFilesInput.length === 0)
             return;
+        const uploadOwnerKey = ownerKey;
+        const uploadGeneration = ownerGenerationRef.current;
+        const uploadIsCurrent = () => activeOwnerKeyRef.current === uploadOwnerKey &&
+            ownerGenerationRef.current === uploadGeneration;
+        if (!uploadIsCurrent())
+            return;
         setUploadError(null);
         setContextNotice(null);
         const selectedFiles = selectedFilesInput;
@@ -219,91 +313,19 @@ export function ContextAttachmentManager(props) {
         let duplicateCount = 0;
         try {
             for (const { file, fingerprint } of uploadCandidates) {
-                let data = null;
-                // Keep uploads same-origin so local runtime never routes attachments through the cloud API base.
-                const initRes = await fetch('/api/taskforce/context-upload/init', {
-                    method: 'POST',
-                    headers: buildApiHeaders(),
-                    body: JSON.stringify({
-                        originalName: file.name,
-                        mimeType: file.type || 'application/octet-stream',
-                        size: file.size,
-                        ...ownerUploadPayload,
-                        workspaceId: trimmedWorkspaceId || null
-                    })
+                const attachment = await uploadContextAttachment(file, {
+                    ownerType,
+                    ownerId: trimmedOwnerId || null,
+                    workspaceId: trimmedWorkspaceId || null,
                 });
-                if (initRes.ok) {
-                    const initData = await initRes.json();
-                    if (initData?.success && typeof initData?.uploadUrl === 'string' && typeof initData?.path === 'string') {
-                        const uploadRes = await fetch(initData.uploadUrl, {
-                            method: String(initData.method || 'PUT'),
-                            headers: initData.headers || { 'Content-Type': file.type || 'application/octet-stream' },
-                            body: file
-                        });
-                        if (!uploadRes.ok) {
-                            throw new Error(`Upload failed for ${file.name}`);
-                        }
-                        const finalizeRes = await fetch('/api/taskforce/context-upload/finalize', {
-                            method: 'POST',
-                            headers: buildApiHeaders(),
-                            body: JSON.stringify({
-                                relativePath: initData.relativePath,
-                                mimeType: file.type || 'application/octet-stream',
-                                originalName: file.name,
-                                size: file.size,
-                                ...ownerUploadPayload,
-                                workspaceId: trimmedWorkspaceId || null
-                            })
-                        });
-                        if (!finalizeRes.ok) {
-                            const finalizeError = await finalizeRes.json().catch(() => ({}));
-                            throw new Error(finalizeError?.error || `Upload failed for ${file.name}`);
-                        }
-                        data = await finalizeRes.json().catch(() => null);
-                    }
-                    else if (initData?.success && typeof initData?.path === 'string') {
-                        data = initData;
-                    }
-                }
-                if (!data) {
-                    const encoded = await readFileAsDataUrl(file);
-                    const res = await fetch('/api/taskforce/context-upload', {
-                        method: 'POST',
-                        headers: buildApiHeaders(),
-                        body: JSON.stringify({
-                            file: encoded,
-                            originalName: file.name,
-                            ...ownerUploadPayload,
-                            workspaceId: trimmedWorkspaceId || null
-                        })
-                    });
-                    if (!res.ok) {
-                        throw new Error(`Upload failed for ${file.name}`);
-                    }
-                    data = await res.json();
-                }
-                if (!data?.success || !data?.path) {
-                    throw new Error(`Upload failed for ${file.name}`);
-                }
-                const keys = getContextKeys(data.path, data.fsPath);
+                if (!uploadIsCurrent())
+                    return;
+                const keys = getContextKeys(attachment.path, attachment.fsPath);
                 if (hasAnyKey(contextKeySet, keys)) {
                     duplicateCount += 1;
                     continue;
                 }
-                onAddAttachment({
-                    path: data.path,
-                    fsPath: data.fsPath,
-                    caption: typeof data.caption === 'string' && data.caption.trim().length > 0 ? data.caption : file.name,
-                    displayName: typeof data.displayName === 'string' ? data.displayName : undefined,
-                    originalFilename: typeof data.originalFilename === 'string' ? data.originalFilename : file.name,
-                    assetId: typeof data.assetId === 'string' ? data.assetId : undefined,
-                    referenceNumber: typeof data.referenceNumber === 'number' ? data.referenceNumber : null,
-                    referenceLabel: typeof data.referenceLabel === 'string' ? data.referenceLabel : undefined,
-                    taskId: ownerType === 'task' && typeof data.taskId === 'string' ? data.taskId : null,
-                    timestamp: typeof data.timestamp === 'string' && data.timestamp.trim().length > 0
-                        ? data.timestamp
-                        : new Date().toISOString()
-                });
+                onAddAttachment(attachment);
                 dispatchTaskforceContextAssetsMutated({
                     workspaceId: trimmedWorkspaceId || 'default',
                     ownerType,
@@ -314,6 +336,8 @@ export function ContextAttachmentManager(props) {
                 addKeys(contextKeySet, keys);
                 localUploadFingerprintRef.current.add(fingerprint);
             }
+            if (!uploadIsCurrent())
+                return;
             const notices = [...validationNotices];
             if (duplicateCount > 0) {
                 notices.push(`${duplicateCount} duplicate file${duplicateCount === 1 ? '' : 's'} skipped.`);
@@ -322,12 +346,16 @@ export function ContextAttachmentManager(props) {
             contextKeyRef.current = contextKeySet;
         }
         catch (error) {
-            setUploadError(error instanceof Error ? error.message : 'Failed to upload context file');
+            if (uploadIsCurrent()) {
+                setUploadError(error instanceof Error ? error.message : 'Failed to upload context file');
+            }
         }
         finally {
-            setUploading(false);
-            if (inputRef.current)
-                inputRef.current.value = '';
+            if (uploadIsCurrent()) {
+                setUploading(false);
+                if (inputRef.current)
+                    inputRef.current.value = '';
+            }
         }
     };
     const handleFilesSelected = async (files) => {
@@ -406,7 +434,7 @@ export function ContextAttachmentManager(props) {
         }
         const droppedLinks = parseDroppedLinks(event);
         if (droppedLinks.length === 0) {
-            setLinkError('Drop a file or URL.');
+            setUploadError('Drop a file or URL.');
             return;
         }
         const contextKeySet = new Set(contextKeyRef.current);
@@ -453,6 +481,82 @@ export function ContextAttachmentManager(props) {
         event.stopPropagation();
         event.dataTransfer.dropEffect = 'copy';
     };
+    const openAddMenu = () => {
+        setShowContextUpload(true);
+        setShowLinkComposer(false);
+        setLinkError(null);
+        setOpenActionsIndex(null);
+        setShowAddMenu((current) => !current);
+    };
+    const openLinkComposer = () => {
+        setShowContextUpload(true);
+        setShowAddMenu(false);
+        setShowLinkComposer(true);
+        setLinkError(null);
+    };
+    const closeLinkComposer = () => {
+        setShowLinkComposer(false);
+        setLinkError(null);
+        window.requestAnimationFrame(() => addTriggerRef.current?.focus());
+    };
+    const submitLink = () => {
+        if (!linkValue.trim()) {
+            setLinkError('Enter an http(s) URL to link.');
+            return;
+        }
+        const result = addLink(linkValue, true);
+        if (result === 'invalid') {
+            setLinkError('Only external http(s) URLs can be linked here. Upload files to attach them.');
+            return;
+        }
+        if (result === 'duplicate') {
+            setContextNotice(`Link already exists in ${ownerTypeLabel} context.`);
+            return;
+        }
+        setContextNotice(null);
+        setShowLinkComposer(false);
+        window.requestAnimationFrame(() => addTriggerRef.current?.focus());
+    };
+    const startCaptionEdit = (index, currentValue) => {
+        setOpenActionsIndex(null);
+        setCaptionEditor({ index, value: currentValue, originalValue: currentValue });
+    };
+    const commitCaptionEdit = (restoreFocus = false) => {
+        if (!captionEditor)
+            return;
+        const editedIndex = captionEditor.index;
+        const nextValue = captionEditor.value.trim();
+        if (nextValue !== captionEditor.originalValue) {
+            onUpdateAttachmentCaption(captionEditor.index, nextValue);
+        }
+        setCaptionEditor(null);
+        if (restoreFocus) {
+            window.requestAnimationFrame(() => {
+                if (captionFocusReturnRef.current?.isConnected) {
+                    captionFocusReturnRef.current.focus();
+                    return;
+                }
+                managerRef.current
+                    ?.querySelector(`[data-context-caption-index="${editedIndex}"]`)
+                    ?.focus();
+            });
+        }
+    };
+    const cancelCaptionEdit = () => {
+        const editedIndex = captionEditor?.index;
+        setCaptionEditor(null);
+        window.requestAnimationFrame(() => {
+            if (captionFocusReturnRef.current?.isConnected) {
+                captionFocusReturnRef.current.focus();
+                return;
+            }
+            if (editedIndex !== undefined) {
+                managerRef.current
+                    ?.querySelector(`[data-context-caption-index="${editedIndex}"]`)
+                    ?.focus();
+            }
+        });
+    };
     const imageFiles = attachments.filter((item) => {
         const path = typeof item === 'string' ? item : item.path;
         return isImagePath(path);
@@ -461,102 +565,208 @@ export function ContextAttachmentManager(props) {
         const path = typeof item === 'string' ? item : item.path;
         return !isImagePath(path);
     });
-    return (_jsxs("div", { className: styles.specialistSection, children: [_jsx(DisclosureSectionHeader, { label: "Context Documents", count: attachments.length, expanded: showContextUpload, expandedTitle: "Hide context documents", collapsedTitle: "Show context documents", onToggle: () => setShowContextUpload(!showContextUpload) }), showContextUpload && (_jsxs(_Fragment, { children: [_jsxs("p", { className: styles.settingsHint, children: ["Upload files into ", ownerTypeLabel, " context storage, or add an external http(s) URL."] }), _jsxs("div", { className: styles.contextUploadPanel, children: [_jsxs("div", { className: styles.contextUploadActions, children: [_jsxs("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => inputRef.current?.click(), disabled: uploading, children: [uploading ? _jsx(Loader2, { size: 12, className: styles.spinner }) : _jsx(FileUp, { size: 12 }), uploading ? 'Uploading...' : 'Upload File'] }), _jsxs("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => {
-                                            void handlePasteImage();
-                                        }, disabled: uploading, children: [_jsx(Copy, { size: 12 }), "Paste Image from Clipboard"] })] }), _jsx("input", { ref: inputRef, type: "file", accept: ACCEPTED_CONTEXT_FILE_TYPES, multiple: true, className: styles.hiddenInput, onChange: (e) => {
-                                    void handleFilesSelected(e.target.files);
-                                } }), uploadError && _jsx("div", { className: styles.error, children: uploadError }), _jsxs("div", { className: styles.contextLinkRow, children: [_jsx("input", { type: "text", className: styles.input, placeholder: "Add external URL (https://...)", value: linkValue, onChange: (e) => {
-                                            setLinkValue(e.target.value);
-                                            if (linkError)
-                                                setLinkError(null);
-                                            if (contextNotice)
-                                                setContextNotice(null);
-                                        } }), _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => {
-                                            if (!linkValue.trim()) {
-                                                setLinkError('Enter an http(s) URL to link.');
-                                                return;
-                                            }
-                                            const result = addLink(linkValue, true);
-                                            if (result === 'invalid') {
-                                                setLinkError('Only external http(s) URLs can be linked here. Upload files to attach them.');
-                                                return;
-                                            }
-                                            if (result === 'duplicate') {
-                                                setContextNotice(`Link already exists in ${ownerTypeLabel} context.`);
-                                            }
-                                            else if (result === 'added') {
-                                                setContextNotice(null);
-                                            }
-                                        }, children: "Add URL" })] }), _jsxs("div", { className: `${styles.contextDropzone} ${isDropActive ? styles.contextDropzoneActive : ''}`, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [_jsx(FileUp, { size: 14 }), _jsx("span", { children: "Drop files or URLs here" })] })] }), contextNotice && _jsx("div", { className: styles.contextNotice, children: contextNotice }), linkError && _jsx("div", { className: styles.error, children: linkError }), imageFiles.length > 0 && (_jsx("div", { className: styles.attachmentGrid, children: attachments.map((item, idx) => {
-                            const path = typeof item === 'string' ? item : item.path;
-                            if (!isImagePath(path))
-                                return null;
-                            const fsPath = typeof item === 'string' ? undefined : item.fsPath;
-                            const caption = typeof item === 'string' ? '' : item.caption || '';
-                            const displayName = getAttachmentDisplayName(item);
-                            const isImage = isImagePath(path);
-                            const isExternalUrl = /^https?:\/\//i.test(path);
-                            const canAnnotate = ownerType === 'task'
-                                && canOpenAnnotatedAttachment(item, { taskId: trimmedOwnerId });
-                            return (_jsxs("div", { className: styles.attachmentCard, children: [_jsxs("div", { className: styles.attachmentPreviewContainer, children: [isImage ? (_jsx("img", { src: path, alt: caption || `Context file ${idx}`, onClick: () => {
-                                                    if (ownerType === 'task'
-                                                        && dispatchOpenAnnotatedAttachment(item, {
-                                                            taskId: trimmedOwnerId,
-                                                            taskReferenceLabel: ownerReferenceLabel,
-                                                        }))
-                                                        return;
-                                                    window.open(path, '_blank');
-                                                }, onError: (e) => {
-                                                    e.target.style.display = 'none';
-                                                    e.target.parentElement.classList.add(styles.brokenImage);
-                                                } })) : (_jsxs("button", { type: "button", className: styles.contextFileLink, onClick: () => {
-                                                    const markdownTarget = ownerType === 'task'
-                                                        ? (typeof item === 'string'
-                                                            ? { path: item, taskId: trimmedOwnerId }
-                                                            : { ...item, taskId: trimmedOwnerId })
-                                                        : item;
-                                                    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) => {
-                                                            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 }) })), _jsx("button", { type: "button", className: styles.attachmentActionBtn, onClick: (e) => {
-                                                            e.stopPropagation();
-                                                            onRemoveAttachment(idx);
-                                                        }, title: "Delete", children: _jsx(Trash2, { size: 12 }) })] })] }), _jsx("input", { type: "text", className: styles.attachmentCaptionInput, placeholder: "Add a label...", value: caption, onChange: (e) => onUpdateAttachmentCaption(idx, e.target.value) })] }, idx));
-                        }) })), documentFiles.length > 0 && (_jsx("div", { className: styles.documentAttachmentList, children: attachments.map((item, idx) => {
-                            const path = typeof item === 'string' ? item : item.path;
-                            if (isImagePath(path))
-                                return null;
-                            const fsPath = typeof item === 'string' ? undefined : item.fsPath;
-                            const caption = typeof item === 'string' ? '' : item.caption || '';
-                            const displayName = getAttachmentDisplayName(item);
-                            const fileType = getAttachmentTypeLabel(item);
-                            const documentReferenceLabel = typeof item === 'string' ? '' : getDocumentReferenceLabel(item);
-                            const isExternalUrl = /^https?:\/\//i.test(path);
-                            return (_jsxs("div", { className: styles.documentAttachmentItem, children: [_jsxs("div", { className: styles.documentAttachmentRow, children: [_jsxs("button", { type: "button", className: styles.documentAttachmentLink, onClick: () => {
-                                                    const markdownTarget = ownerType === 'task'
-                                                        ? (typeof item === 'string'
-                                                            ? { path: item, taskId: trimmedOwnerId }
-                                                            : { ...item, taskId: trimmedOwnerId })
-                                                        : item;
-                                                    if (dispatchOpenMarkdownDocument(markdownTarget, fsPath))
-                                                        return;
-                                                    window.open(path, '_blank');
-                                                }, title: displayName, children: [_jsxs("span", { className: styles.documentAttachmentMain, children: [_jsx("span", { className: styles.documentAttachmentIcon, "aria-hidden": "true", children: _jsx(File, { size: 13 }) }), _jsxs("span", { className: styles.documentAttachmentText, children: [_jsx("span", { className: styles.documentAttachmentName, children: displayName }), documentReferenceLabel && (_jsx("span", { className: styles.taskIdBadge, children: documentReferenceLabel }))] })] }), _jsx("span", { className: styles.documentAttachmentType, children: fileType })] }), _jsxs("div", { className: styles.documentAttachmentActions, children: [fsPath && (_jsx("button", { type: "button", className: styles.documentAttachmentActionBtn, onClick: () => {
-                                                            navigator.clipboard.writeText(fsPath);
-                                                        }, title: `Copy path: ${fsPath}`, children: _jsx(Copy, { size: 12 }) })), !isExternalUrl && (_jsx("button", { type: "button", className: styles.documentAttachmentActionBtn, onClick: () => {
-                                                            window.open(buildDownloadUrl(path, caption || displayName), '_blank');
-                                                        }, title: "Download", children: _jsx(Download, { size: 12 }) })), _jsx("button", { type: "button", className: styles.documentAttachmentActionBtn, onClick: () => onRemoveAttachment(idx), title: "Delete", children: _jsx(Trash2, { size: 12 }) })] })] }), _jsx("input", { type: "text", className: styles.documentAttachmentCaptionInput, placeholder: "Add a label...", value: caption, onChange: (e) => onUpdateAttachmentCaption(idx, e.target.value) })] }, idx));
-                        }) }))] }))] }));
+    return (_jsxs("div", { ref: managerRef, className: styles.specialistSection, children: [_jsx(DisclosureSectionHeader, { label: "Context", count: attachments.length, showZeroCount: true, expanded: showContextUpload, expandedTitle: "Hide context", collapsedTitle: "Show context", onToggle: () => {
+                    const nextExpanded = !showContextUpload;
+                    setShowContextUpload(nextExpanded);
+                    if (!nextExpanded) {
+                        setShowAddMenu(false);
+                        setShowLinkComposer(false);
+                        setOpenActionsIndex(null);
+                        setCaptionEditor(null);
+                        setIsDropActive(false);
+                        setDragDepth(0);
+                    }
+                }, actions: !readOnly ? (_jsxs("div", { ref: addMenuRef, className: styles.contextMenuControl, onKeyDown: (event) => {
+                        if (event.key !== 'Escape' || !showAddMenu)
+                            return;
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setShowAddMenu(false);
+                        addTriggerRef.current?.focus();
+                    }, children: [_jsx("button", { ref: addTriggerRef, type: "button", className: "tf-control-icon", "aria-label": "Add context", title: "Add context", "aria-expanded": showAddMenu, onClick: openAddMenu, disabled: uploading, children: uploading ? _jsx(Loader2, { size: 14, className: styles.spinner }) : _jsx(Plus, { size: 14 }) }), showAddMenu && (_jsxs("div", { className: `${styles.contextMenu} ${styles.contextAddMenu}`, role: "group", "aria-label": "Add context", children: [_jsxs("button", { ref: addFirstActionRef, type: "button", onClick: () => {
+                                        setShowAddMenu(false);
+                                        addTriggerRef.current?.focus();
+                                        inputRef.current?.click();
+                                    }, children: [_jsx(FileUp, { size: 14 }), "Upload file"] }), _jsxs("button", { type: "button", onClick: () => {
+                                        setShowAddMenu(false);
+                                        addTriggerRef.current?.focus();
+                                        void handlePasteImage();
+                                    }, children: [_jsx(Copy, { size: 14 }), "Paste image"] }), _jsxs("button", { type: "button", onClick: openLinkComposer, children: [_jsx(Link2, { size: 14 }), "Add link"] })] }))] })) : undefined }), !readOnly && (_jsx("input", { ref: inputRef, type: "file", accept: ACCEPTED_CONTEXT_FILE_TYPES, multiple: true, className: styles.hiddenInput, onChange: (e) => {
+                    void handleFilesSelected(e.target.files);
+                } })), showContextUpload && (_jsxs("div", { className: `${styles.contextContent} ${isDropActive ? styles.contextContentDropActive : ''}`, role: "region", "aria-label": "Context attachments", onDragEnter: readOnly ? undefined : handleDragEnter, onDragLeave: readOnly ? undefined : handleDragLeave, onDragOver: readOnly ? undefined : handleDragOver, onDrop: readOnly ? undefined : handleDrop, children: [isDropActive && (_jsxs("div", { className: styles.contextDropOverlay, "aria-hidden": "true", children: [_jsx(FileUp, { size: 18 }), "Drop files or URLs here"] })), supplementalContent, showLinkComposer && (_jsxs("div", { className: styles.contextLinkComposer, children: [_jsx("input", { ref: linkInputRef, type: "text", className: styles.input, "aria-label": "External context URL", "aria-invalid": Boolean(linkError), placeholder: "Add external URL (https://...)", value: linkValue, onChange: (e) => {
+                                    setLinkValue(e.target.value);
+                                    if (linkError)
+                                        setLinkError(null);
+                                    if (contextNotice)
+                                        setContextNotice(null);
+                                }, onKeyDown: (event) => {
+                                    if (event.key === 'Enter') {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        submitLink();
+                                    }
+                                    if (event.key === 'Escape') {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        closeLinkComposer();
+                                    }
+                                } }), _jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: submitLink, children: "Add link" }), _jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", "aria-label": "Cancel adding link", title: "Cancel", onClick: () => {
+                                    closeLinkComposer();
+                                }, children: _jsx(X, { size: 14 }) })] })), uploadError && _jsx("div", { className: styles.error, role: "alert", children: uploadError }), contextNotice && _jsx("div", { className: styles.contextNotice, role: "status", children: contextNotice }), showLinkComposer && linkError && _jsx("div", { className: styles.error, role: "alert", children: linkError }), attachments.length === 0 && !showLinkComposer && (_jsxs("div", { className: styles.contextEmptyState, children: [_jsx(FileUp, { size: 14 }), _jsx("span", { children: "Drop files here" })] })), imageFiles.length > 0 && (_jsxs("section", { "aria-label": "Images", children: [documentFiles.length > 0 && _jsx("div", { className: styles.contextGroupLabel, children: "Images" }), _jsx("div", { className: styles.attachmentGrid, children: attachments.map((item, idx) => {
+                                    const path = typeof item === 'string' ? item : item.path;
+                                    if (!isImagePath(path))
+                                        return null;
+                                    const fsPath = typeof item === 'string' ? undefined : item.fsPath;
+                                    const caption = typeof item === 'string' ? '' : item.caption || '';
+                                    const displayName = getAttachmentDisplayName(item);
+                                    const isImage = isImagePath(path);
+                                    const isExternalUrl = /^https?:\/\//i.test(path);
+                                    const canAnnotate = ownerType === 'task'
+                                        && canOpenAnnotatedAttachment(item, { taskId: trimmedOwnerId });
+                                    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,
+                                                                ownerId: trimmedOwnerId || null,
+                                                                ownerReferenceLabel,
+                                                                workspaceId: trimmedWorkspaceId || null,
+                                                            }))
+                                                                return;
+                                                            if (ownerType === 'task'
+                                                                && dispatchOpenAnnotatedAttachment(item, {
+                                                                    taskId: trimmedOwnerId,
+                                                                    taskReferenceLabel: ownerReferenceLabel,
+                                                                }))
+                                                                return;
+                                                            window.open(path, '_blank');
+                                                        }, children: _jsx("img", { src: path, alt: "", onError: (e) => {
+                                                                e.currentTarget.style.display = 'none';
+                                                                e.currentTarget.parentElement?.parentElement?.classList.add(styles.brokenImage);
+                                                            } }) })) : (_jsxs("button", { type: "button", className: styles.contextFileLink, onClick: () => {
+                                                            const markdownTarget = ownerType === 'task'
+                                                                ? (typeof item === 'string'
+                                                                    ? { path: item, taskId: trimmedOwnerId }
+                                                                    : { ...item, taskId: trimmedOwnerId })
+                                                                : item;
+                                                            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) => {
+                                                                    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) => {
+                                                    if (!event.currentTarget.contains(event.relatedTarget)) {
+                                                        commitCaptionEdit(false);
+                                                    }
+                                                }, children: [_jsx("input", { autoFocus: true, type: "text", className: styles.attachmentCaptionInput, "aria-label": `Rename ${displayName}`, value: captionEditor.value, onChange: (event) => setCaptionEditor({ ...captionEditor, value: event.target.value }), onKeyDown: (event) => {
+                                                            if (event.key === 'Enter') {
+                                                                event.preventDefault();
+                                                                event.stopPropagation();
+                                                                commitCaptionEdit(true);
+                                                            }
+                                                            if (event.key === 'Escape') {
+                                                                event.preventDefault();
+                                                                event.stopPropagation();
+                                                                cancelCaptionEdit();
+                                                            }
+                                                        } }), _jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", "aria-label": "Save label", onClick: () => commitCaptionEdit(true), children: _jsx(Check, { size: 12 }) })] })) : readOnly ? (_jsx("span", { className: styles.attachmentCaptionLabel, children: caption || displayName })) : (_jsx("button", { type: "button", className: styles.attachmentCaptionLabel, "data-context-caption-index": idx, title: "Edit label", onClick: (event) => {
+                                                    captionFocusReturnRef.current = event.currentTarget;
+                                                    startCaptionEdit(idx, caption);
+                                                }, children: caption || displayName }))] }, idx));
+                                }) })] })), documentFiles.length > 0 && (_jsxs("section", { "aria-label": "Documents", children: [imageFiles.length > 0 && _jsx("div", { className: styles.contextGroupLabel, children: "Documents" }), _jsx("div", { className: styles.documentAttachmentList, children: attachments.map((item, idx) => {
+                                    const path = typeof item === 'string' ? item : item.path;
+                                    if (isImagePath(path))
+                                        return null;
+                                    const fsPath = typeof item === 'string' ? undefined : item.fsPath;
+                                    const caption = typeof item === 'string' ? '' : item.caption || '';
+                                    const displayName = getAttachmentDisplayName(item);
+                                    const fileType = getAttachmentTypeLabel(item);
+                                    const documentReferenceLabel = typeof item === 'string' ? '' : getDocumentReferenceLabel(item);
+                                    const isExternalUrl = /^https?:\/\//i.test(path);
+                                    const markdownTarget = ownerType === 'task'
+                                        ? (typeof item === 'string'
+                                            ? { path: item, taskId: trimmedOwnerId }
+                                            : { ...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: () => {
+                                                                    if (dispatchPreviewContextAttachment(item, {
+                                                                        ownerType,
+                                                                        ownerId: trimmedOwnerId || null,
+                                                                        ownerReferenceLabel,
+                                                                        workspaceId: trimmedWorkspaceId || null,
+                                                                    }))
+                                                                        return;
+                                                                    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) => {
+                                                            if (event.key !== 'Escape' || openActionsIndex !== idx)
+                                                                return;
+                                                            event.preventDefault();
+                                                            event.stopPropagation();
+                                                            setOpenActionsIndex(null);
+                                                            attachmentActionsTriggerRef.current?.focus();
+                                                        }, children: [_jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", "aria-label": `Actions for ${displayName}`, title: "More actions", "aria-expanded": openActionsIndex === idx, onClick: (event) => {
+                                                                    attachmentActionsTriggerRef.current = event.currentTarget;
+                                                                    setOpenActionsIndex(openActionsIndex === idx ? null : idx);
+                                                                }, children: _jsx(MoreHorizontal, { size: 14 }) }), openActionsIndex === idx && (_jsxs("div", { className: `${styles.contextMenu} ${styles.contextActionsMenu}`, role: "group", "aria-label": `Actions for ${displayName}`, children: [_jsxs("button", { ref: attachmentFirstActionRef, type: "button", onClick: () => {
+                                                                            if (!dispatchPreviewContextAttachment(item, {
+                                                                                ownerType,
+                                                                                ownerId: trimmedOwnerId || null,
+                                                                                ownerReferenceLabel,
+                                                                                workspaceId: trimmedWorkspaceId || null,
+                                                                            })) {
+                                                                                window.open(path, '_blank');
+                                                                            }
+                                                                            setOpenActionsIndex(null);
+                                                                        }, children: [_jsx(Eye, { size: 14 }), " Preview"] }), canOpenInDocumentManager && (_jsxs("button", { type: "button", onClick: () => {
+                                                                            if (!dispatchOpenMarkdownDocument(markdownTarget, fsPath)) {
+                                                                                window.open(path, '_blank');
+                                                                            }
+                                                                            setOpenActionsIndex(null);
+                                                                        }, children: [_jsx(ExternalLink, { size: 14 }), " Open in Documents"] })), !readOnly && (_jsxs("button", { type: "button", onClick: () => {
+                                                                            captionFocusReturnRef.current = attachmentActionsTriggerRef.current;
+                                                                            startCaptionEdit(idx, caption);
+                                                                            setOpenActionsIndex(null);
+                                                                        }, children: [_jsx(PencilLine, { size: 14 }), " Rename"] })), fsPath && (_jsxs("button", { type: "button", onClick: () => {
+                                                                            void navigator.clipboard.writeText(fsPath);
+                                                                            setOpenActionsIndex(null);
+                                                                            window.requestAnimationFrame(() => attachmentActionsTriggerRef.current?.focus());
+                                                                        }, children: [_jsx(Copy, { size: 14 }), " Copy path"] })), !isExternalUrl && (_jsxs("button", { type: "button", onClick: () => {
+                                                                            window.open(buildDownloadUrl(path, caption || displayName), '_blank');
+                                                                            setOpenActionsIndex(null);
+                                                                            window.requestAnimationFrame(() => attachmentActionsTriggerRef.current?.focus());
+                                                                        }, children: [_jsx(Download, { size: 14 }), " Download"] })), !readOnly && (_jsxs("button", { type: "button", className: styles.contextDestructiveMenuItem, onClick: () => {
+                                                                            onRemoveAttachment(idx);
+                                                                            setOpenActionsIndex(null);
+                                                                        }, children: [_jsx(Trash2, { size: 14 }), " Delete"] }))] }))] }))] }), captionEditor?.index === idx && (_jsxs("div", { className: styles.contextCaptionEditor, onBlur: (event) => {
+                                                    if (!event.currentTarget.contains(event.relatedTarget)) {
+                                                        commitCaptionEdit(false);
+                                                    }
+                                                }, children: [_jsx("input", { autoFocus: true, type: "text", className: styles.documentAttachmentCaptionInput, "aria-label": `Rename ${displayName}`, value: captionEditor.value, onChange: (event) => setCaptionEditor({ ...captionEditor, value: event.target.value }), onKeyDown: (event) => {
+                                                            if (event.key === 'Enter') {
+                                                                event.preventDefault();
+                                                                event.stopPropagation();
+                                                                commitCaptionEdit(true);
+                                                            }
+                                                            if (event.key === 'Escape') {
+                                                                event.preventDefault();
+                                                                event.stopPropagation();
+                                                                cancelCaptionEdit();
+                                                            }
+                                                        } }), _jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", "aria-label": "Save label", onClick: () => commitCaptionEdit(true), children: _jsx(Check, { size: 12 }) })] }))] }, idx));
+                                }) })] }))] }))] }));
 }