@taskforcehq/taskforce 0.3.305 → 0.3.307

package/dist/components/features/AnnotatedAttachmentWorkspace.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ArrowDown, ArrowLeft, ArrowUpLeft, ArrowUp, Check, ClipboardPaste, Copy, FolderOpen, Hand, HelpCircle, Loader2, MessageSquareCode, MessageSquareText, MousePointer2, Pin, Plus, RotateCcw, Save, SquareMousePointer, Trash2, ZoomIn, ZoomOut, } from 'lucide-react';
+import { ArrowDown, ArrowLeft, ArrowUpLeft, ArrowUp, Check, ChevronLeft, ClipboardPaste, Copy, FolderOpen, Hand, HelpCircle, Loader2, MessageSquareCode, MessageSquareText, MousePointer2, Pin, Plus, RotateCcw, Save, Search, SquareMousePointer, Trash2, ZoomIn, ZoomOut, } from 'lucide-react';
 import sharedStyles from '../../Taskforce.module.css';
 import { fetchTaskforceApi } from '../../utils/taskforceApiClient';
 import { logBootstrapDebug } from '../../hooks/workspace/workspaceLocalState';
@@ -132,6 +132,33 @@ function formatTimestamp(value) {
         return 'Unsaved';
     return parsed.toLocaleString();
 }
+function formatFileSize(bytes) {
+    const normalized = typeof bytes === 'number' && Number.isFinite(bytes) ? Math.max(0, bytes) : 0;
+    if (normalized < 1024)
+        return `${normalized}B`;
+    if (normalized < 1024 * 1024)
+        return `${(normalized / 1024).toFixed(1)}KB`;
+    return `${(normalized / (1024 * 1024)).toFixed(1)}MB`;
+}
+function formatRelativeDate(isoDate) {
+    if (!isoDate)
+        return '';
+    const parsed = new Date(isoDate);
+    if (Number.isNaN(parsed.getTime()))
+        return '';
+    const now = new Date();
+    const diffMs = now.getTime() - parsed.getTime();
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    if (diffDays <= 0)
+        return 'Today';
+    if (diffDays === 1)
+        return 'Yesterday';
+    if (diffDays < 7)
+        return `${diffDays}d ago`;
+    if (diffDays < 30)
+        return `${Math.floor(diffDays / 7)}w ago`;
+    return parsed.toLocaleDateString();
+}
 function getSessionCreatorLabel(session) {
     const createdByLabel = String(session.createdByActor?.label || '').trim();
     if (createdByLabel)
@@ -371,7 +398,7 @@ function buildDraftPayloadFromSession(session, fallbackTitle) {
         annotations: session?.annotations || [],
     });
 }
-export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBaseUrl = '', cloudAuthBaseUrl = '', workspaceId = 'default', sessionLoadReady = true, requestedTarget = null, requestedSessionId = null, requestedOpenVersion = 0, resolveTaskReferenceLabel, resolveImageReferenceLabel, onRequestedTargetHandled, onOpenTarget, onContextChange, onBackToTask, }) {
+export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBaseUrl = '', cloudAuthBaseUrl = '', workspaceId = 'default', sessionLoadReady = true, requestedTarget = null, requestedSessionId = null, requestedOpenVersion = 0, imageTrayOpen, onCloseImageTray, resolveTaskReferenceLabel, resolveImageReferenceLabel, onRequestedTargetHandled, onOpenTarget, onContextChange, onBackToTask, }) {
     const resolvedApiBase = runtimeMode === 'cloud'
         ? (cloudAuthBaseUrl || apiBaseUrl || '')
         : '';
@@ -403,6 +430,10 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
     const [openImageModalOpen, setOpenImageModalOpen] = useState(false);
     const [openImageReference, setOpenImageReference] = useState('');
     const [openingImage, setOpeningImage] = useState(false);
+    const [imageTrayItems, setImageTrayItems] = useState([]);
+    const [imageTraySearchQuery, setImageTraySearchQuery] = useState('');
+    const [imageTrayLoading, setImageTrayLoading] = useState(false);
+    const [imageTrayError, setImageTrayError] = useState(null);
     const [imageLoading, setImageLoading] = useState(false);
     const [imageLoadError, setImageLoadError] = useState(false);
     const [zoomLevel, setZoomLevel] = useState(1);
@@ -486,6 +517,22 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
         hitRadius: 11,
     }), []);
     const arrowOverlayViewBox = useMemo(() => `0 0 ${Math.max(canvasMediaSize.width, 1)} ${Math.max(canvasMediaSize.height, 1)}`, [canvasMediaSize.height, canvasMediaSize.width]);
+    const showImageTray = typeof imageTrayOpen === 'boolean';
+    const filteredImageTrayItems = useMemo(() => {
+        const query = imageTraySearchQuery.trim().toLowerCase();
+        if (!query)
+            return imageTrayItems;
+        return imageTrayItems.filter((item) => {
+            const haystack = [
+                item.displayName,
+                item.originalFilename,
+                item.imageReferenceLabel,
+                item.taskReferenceLabel,
+                item.assetId,
+            ].filter(Boolean).join(' ').toLowerCase();
+            return haystack.includes(query);
+        });
+    }, [imageTrayItems, imageTraySearchQuery]);
     const canPan = useMemo(() => {
         const scroller = canvasScrollerRef.current;
         if (!scroller)
@@ -889,6 +936,26 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
             }
         }
     }, [clearPendingAutoSave, createSessionForTarget, requestHeaders, resolvedApiBase, syncDraftFromSession, workspaceId]);
+    const fetchImageTrayItems = useCallback(async () => {
+        setImageTrayLoading(true);
+        setImageTrayError(null);
+        try {
+            const params = new URLSearchParams();
+            params.set('workspaceId', String(workspaceId || 'default').trim() || 'default');
+            const res = await fetchTaskforceApi(`/api/taskforce/annotated-attachments/images?${params.toString()}`, { credentials: 'include', headers: requestHeaders, cache: 'no-store' }, resolvedApiBase);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                throw new Error(String(data?.error || 'Failed to load images.'));
+            }
+            setImageTrayItems(Array.isArray(data?.images) ? data.images : []);
+        }
+        catch (requestError) {
+            setImageTrayError(requestError instanceof Error ? requestError.message : 'Failed to load images.');
+        }
+        finally {
+            setImageTrayLoading(false);
+        }
+    }, [requestHeaders, resolvedApiBase, workspaceId]);
     const pasteImageFromClipboard = useCallback(async () => {
         if (typeof navigator === 'undefined' || !navigator.clipboard || typeof navigator.clipboard.read !== 'function') {
             setError('Clipboard image paste is not supported in this environment.');
@@ -1016,6 +1083,33 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
             setOpeningImage(false);
         }
     }, [isTargetControlled, loadSessions, onOpenTarget, openImageReference, requestHeaders, workspaceId]);
+    const openImageFromTray = useCallback(async (item) => {
+        if (!item.assetId || !item.path)
+            return;
+        const flushed = await flushPendingDraft('session-switch');
+        if (!flushed)
+            return;
+        const target = {
+            assetId: item.assetId,
+            path: item.path,
+            displayName: String(item.displayName || item.originalFilename || 'Image attachment').trim() || 'Image attachment',
+            ...(item.taskId ? { taskId: item.taskId } : {}),
+            ...(item.taskReferenceLabel ? { taskReferenceLabel: item.taskReferenceLabel } : {}),
+            ...(item.imageReferenceLabel ? { imageReferenceLabel: item.imageReferenceLabel } : {}),
+        };
+        pendingRequestedSessionIdRef.current = null;
+        setError(null);
+        if (isTargetControlled) {
+            lastLoadedTargetKeyRef.current = '';
+            onOpenTarget?.(target, { sessionId: null });
+        }
+        else {
+            setUncontrolledTarget(target);
+            lastLoadedTargetKeyRef.current = getAnnotatedTargetKey(target);
+            resetForTargetLoad(target);
+            void loadSessions(target, { autoCreateIfEmpty: true });
+        }
+    }, [flushPendingDraft, isTargetControlled, loadSessions, onOpenTarget, resetForTargetLoad]);
     const applySessionLocally = useCallback((session) => {
         setSessions((current) => {
             const existingIndex = current.findIndex((item) => item.id === session.id);
@@ -1207,6 +1301,11 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
         setLastSaveError(null);
         setSaveState('saved');
     }, [currentDraftSnapshot, saveState, selectedSessionId]);
+    useEffect(() => {
+        if (!showImageTray || !imageTrayOpen)
+            return;
+        void fetchImageTrayItems();
+    }, [fetchImageTrayItems, imageTrayOpen, showImageTray]);
     useEffect(() => {
         if (typeof window === 'undefined')
             return undefined;
@@ -1802,7 +1901,22 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
         event.stopPropagation();
     }, [panMode, readPoint, toolMode]);
     const activeSessionTimestamp = selectedSession?.updatedAt ? formatTimestamp(selectedSession.updatedAt) : 'Not saved yet';
-    return (_jsxs("div", { className: styles.shell, children: [_jsxs("section", { className: `tf-surface-panel ${styles.panel} ${styles.sessionPanel}`, children: [_jsx("div", { className: styles.sessionContextBar, children: activeTarget?.taskId ? (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.sessionContextLeft, children: onBackToTask ? (_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.backToTaskBtn}`, onClick: () => {
+    return (_jsxs("div", { className: `${styles.shell} ${showImageTray ? styles.shellWithImageTray : ''} ${showImageTray && imageTrayOpen ? styles.shellImageTrayOpen : ''}`.trim(), children: [showImageTray ? (_jsxs("aside", { className: `${styles.imageTrayPanel} ${imageTrayOpen ? styles.imageTrayPanelOpen : ''}`.trim(), "aria-label": "Image tray", "aria-hidden": !imageTrayOpen, children: [_jsxs("div", { className: styles.imageTrayHeader, children: [_jsxs("span", { className: styles.imageTrayTitle, children: [_jsx(FolderOpen, { size: 14 }), "Images"] }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: onCloseImageTray, title: "Collapse image tray", "aria-label": "Collapse image tray", children: _jsx(ChevronLeft, { size: 16 }) })] }), _jsxs("div", { className: styles.imageTraySearch, children: [_jsx(Search, { size: 12, className: styles.imageTraySearchIcon }), _jsx("input", { type: "text", placeholder: "Search images...", value: imageTraySearchQuery, onChange: (event) => setImageTraySearchQuery(event.target.value), className: styles.imageTraySearchInput })] }), _jsx("div", { className: `tf-scrollbar ${styles.imageTrayList}`, children: imageTrayLoading ? (_jsx("div", { className: styles.imageTrayState, children: "Loading images..." })) : imageTrayError ? (_jsx("div", { className: styles.imageTrayStateError, children: imageTrayError })) : filteredImageTrayItems.length === 0 ? (_jsx("div", { className: styles.imageTrayState, children: imageTraySearchQuery.trim() ? 'No images match your search.' : 'No images found.' })) : filteredImageTrayItems.map((item) => {
+                            const isSelected = activeTarget?.assetId === item.assetId;
+                            const attachmentCount = typeof item.attachmentCount === 'number' && Number.isFinite(item.attachmentCount)
+                                ? Math.max(0, item.attachmentCount)
+                                : 0;
+                            const sessionCount = typeof item.sessionCount === 'number' && Number.isFinite(item.sessionCount)
+                                ? Math.max(0, item.sessionCount)
+                                : 0;
+                            const linkedLabel = attachmentCount > 1
+                                ? `${attachmentCount} tasks linked`
+                                : attachmentCount === 1
+                                    ? item.taskReferenceLabel || '1 task linked'
+                                    : 'Unattached';
+                            const imageName = String(item.displayName || item.originalFilename || 'Image attachment').trim() || 'Image attachment';
+                            return (_jsxs("button", { type: "button", className: `${styles.imageTrayItem} ${isSelected ? styles.imageTrayItemActive : ''}`.trim(), onClick: () => void openImageFromTray(item), title: imageName, children: [_jsx("span", { className: styles.imageTrayThumb, children: _jsx("img", { src: item.path, alt: "", loading: "lazy" }) }), _jsxs("span", { className: styles.imageTrayItemBody, children: [_jsx("span", { className: styles.imageTrayItemTitle, children: imageName }), _jsx("span", { className: styles.imageTrayItemTask, children: linkedLabel }), _jsxs("span", { className: styles.imageTrayItemMeta, children: [_jsxs("span", { className: styles.imageTrayItemMetaDetails, children: [formatFileSize(item.sizeBytes), item.updatedAt ? _jsxs(_Fragment, { children: [" \u00B7 ", formatRelativeDate(item.updatedAt)] }) : null, sessionCount > 0 ? _jsxs(_Fragment, { children: [" \u00B7 ", sessionCount, " session", sessionCount === 1 ? '' : 's'] }) : null] }), item.imageReferenceLabel ? (_jsx("span", { className: styles.imageTrayItemReference, children: item.imageReferenceLabel })) : null] })] })] }, item.assetId));
+                        }) })] })) : null, _jsxs("section", { className: `tf-surface-panel ${styles.panel} ${styles.sessionPanel}`, children: [_jsx("div", { className: styles.sessionContextBar, children: activeTarget?.taskId ? (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.sessionContextLeft, children: onBackToTask ? (_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.backToTaskBtn}`, onClick: () => {
                                             void flushPendingDraft('back-to-task').then((saved) => {
                                                 if (!saved)
                                                     return;

package/dist/components/features/AnnotatedAttachmentWorkspace.test.js

@@ -320,6 +320,58 @@ describe('AnnotatedAttachmentWorkspaceShell', () => {
             expect(screen.queryByAltText('Homepage shot')).not.toBeInTheDocument();
         });
     });
+    it('loads images from the image tray and opens the selected image', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                images: [
+                    {
+                        assetId: 'asset-image-24',
+                        imageReferenceLabel: 'I-24',
+                        path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-24.png',
+                        displayName: 'Reference image',
+                        originalFilename: 'reference.png',
+                        sizeBytes: 2048,
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        attachmentCount: 0,
+                        sessionCount: 0,
+                    },
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ sessions: [] }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    id: 'session-ref-1',
+                    taskId: '',
+                    baseImageAssetId: 'asset-image-24',
+                    title: 'Reference image review',
+                }),
+            }),
+        });
+        function ControlledImageTrayHarness() {
+            const [target, setTarget] = React.useState(null);
+            const [sessionId, setSessionId] = React.useState(null);
+            return (_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", imageTrayOpen: true, requestedTarget: target, requestedSessionId: sessionId, onOpenTarget: (nextTarget, options) => {
+                    setTarget(nextTarget);
+                    setSessionId(options?.sessionId ?? null);
+                } }));
+        }
+        render(_jsx(ControlledImageTrayHarness, {}));
+        expect(await screen.findByRole('button', { name: /reference image/i })).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /reference image/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(1, '/api/taskforce/annotated-attachments/images?workspaceId=workspace-1', expect.objectContaining({ cache: 'no-store' }), ''));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions?workspaceId=workspace-1&imageAssetId=asset-image-24', expect.any(Object), ''));
+        expect(await screen.findByAltText('Reference image')).toBeInTheDocument();
+        expect(await findSessionCard('Reference image review')).toBeInTheDocument();
+    });
     it('does not revert to the previous image while opening a pasted image in controlled mode', async () => {
         const user = userEvent.setup();
         const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue({

package/dist/components/features/DocumentIndex.d.ts

@@ -11,8 +11,8 @@ interface Props {
     }>;
     onSearchChange: (q: string) => void;
     onSelect: (doc: DocMeta) => void;
-    onRefresh: () => void;
+    onCloseTray?: () => void;
     hasActiveFilters: boolean;
 }
-export declare function DocumentIndex({ documents, selectedDocId, loading, error, searchQuery, taskById, onSearchChange, onSelect, onRefresh, hasActiveFilters, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function DocumentIndex({ documents, selectedDocId, loading, error, searchQuery, taskById, onSearchChange, onSelect, onCloseTray, hasActiveFilters, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/features/DocumentIndex.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Search, RefreshCw, FileText, ClipboardList, Eye, BookOpen, File } from 'lucide-react';
-import styles from '../../Taskforce.module.css';
+import { Search, FileText, ClipboardList, Eye, BookOpen, File, ChevronLeft } from 'lucide-react';
 import indexStyles from './DocumentIndex.module.css';
 import { getEffectiveAttachmentState } from './documentWorkspaceModel';
 import { getReadableDocumentName } from '../../utils/documentNames';
@@ -42,8 +41,8 @@ function handleItemKeyDown(event, onSelect) {
     event.preventDefault();
     onSelect();
 }
-export function DocumentIndex({ documents, selectedDocId, loading, error, searchQuery, taskById, onSearchChange, onSelect, onRefresh, hasActiveFilters, }) {
-    return (_jsxs("div", { className: indexStyles.index, children: [_jsxs("div", { className: indexStyles.header, children: [_jsxs("span", { className: indexStyles.title, children: [_jsx(FileText, { size: 14 }), "Documents"] }), _jsx("button", { className: indexStyles.refreshBtn, onClick: onRefresh, title: "Refresh document list", disabled: loading, children: _jsx(RefreshCw, { size: 13, className: loading ? styles.docSpinning : undefined }) })] }), _jsxs("div", { className: indexStyles.search, children: [_jsx(Search, { size: 12, className: indexStyles.searchIcon }), _jsx("input", { type: "text", placeholder: "Search documents\u2026", value: searchQuery, onChange: e => onSearchChange(e.target.value), className: indexStyles.searchInput })] }), _jsxs("div", { className: `${indexStyles.list} tf-scrollbar`, children: [loading && (_jsx("div", { className: indexStyles.state, children: "Loading documents\u2026" })), !loading && error && (_jsx("div", { className: indexStyles.stateError, children: error })), !loading && !error && documents.length === 0 && (_jsx("div", { className: indexStyles.state, children: hasActiveFilters
+export function DocumentIndex({ documents, selectedDocId, loading, error, searchQuery, taskById, onSearchChange, onSelect, onCloseTray, hasActiveFilters, }) {
+    return (_jsxs("div", { className: indexStyles.index, children: [_jsxs("div", { className: indexStyles.header, children: [_jsxs("span", { className: indexStyles.title, children: [_jsx(FileText, { size: 14 }), "Documents"] }), onCloseTray ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: onCloseTray, title: "Collapse document tray", "aria-label": "Collapse document tray", children: _jsx(ChevronLeft, { size: 16 }) })) : null] }), _jsxs("div", { className: indexStyles.search, children: [_jsx(Search, { size: 12, className: indexStyles.searchIcon }), _jsx("input", { type: "text", placeholder: "Search documents\u2026", value: searchQuery, onChange: e => onSearchChange(e.target.value), className: indexStyles.searchInput })] }), _jsxs("div", { className: `${indexStyles.list} tf-scrollbar`, children: [loading && (_jsx("div", { className: indexStyles.state, children: "Loading documents\u2026" })), !loading && error && (_jsx("div", { className: indexStyles.stateError, children: error })), !loading && !error && documents.length === 0 && (_jsx("div", { className: indexStyles.state, children: hasActiveFilters
                             ? 'No documents match your filters.'
                             : 'No documents found. Documents added as task attachments will appear here.' })), !loading && documents.map(doc => {
                         const task = doc.taskId ? taskById.get(doc.taskId) : null;

package/dist/components/features/DocumentViewer.d.ts

@@ -4,10 +4,16 @@ export declare function schedulePrintCleanup(cleanup: () => void): number;
 interface Props {
     doc: DocMeta;
     taskTitle: string | null;
+    tasks?: Array<{
+        id: string;
+        title: string;
+        referenceLabel?: string | null;
+    }>;
     apiBaseUrl?: string;
     onSaved?: (updatedAt: string) => void;
     onDeleted?: () => void;
+    onBackToTask?: (taskId: string) => void;
     enableTaskGeneration?: boolean;
 }
-export declare function DocumentViewer({ doc, taskTitle, apiBaseUrl, onSaved, onDeleted, enableTaskGeneration }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function DocumentViewer({ doc, taskTitle, tasks, apiBaseUrl, onSaved, onDeleted, onBackToTask, enableTaskGeneration }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/features/DocumentViewer.js

@@ -4,10 +4,11 @@ import Markdown from 'react-markdown';
 import { renderToStaticMarkup } from 'react-dom/server';
 import remarkGfm from 'remark-gfm';
 import rehypeSanitize from 'rehype-sanitize';
-import { Printer, Link, Download, Clock, HardDrive, Tag, Pencil, X, Save, Eye, SplitSquareHorizontal, CheckCircle, AlertCircle, Zap, Trash2, MessageSquareText, Send, Bot, User, RotateCcw, CheckCheck } from 'lucide-react';
+import { Printer, Link, Download, Clock, HardDrive, Tag, Pencil, X, Save, Eye, SplitSquareHorizontal, CheckCircle, AlertCircle, Zap, Trash2, MessageSquareText, Send, Bot, User, RotateCcw, CheckCheck, ArrowLeft } from 'lucide-react';
 import styles from '../../Taskforce.module.css';
 import viewerStyles from './DocumentViewer.module.css';
 import taskFormStyles from '../task/TaskForm.module.css';
+import { Modal } from '../ui/Modal';
 import { getEffectiveAttachmentState } from './documentWorkspaceModel';
 import { DocumentGenerateModal } from './DocumentGenerateModal';
 import { fetchTaskforceApi, resolveTaskforceApiUrl } from '../../utils/taskforceApiClient';
@@ -500,7 +501,7 @@ function toggleNthTaskCheckbox(markdown, targetIndex, nextChecked) {
     });
     return updated.join('\n');
 }
-export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved, onDeleted, enableTaskGeneration = false }) {
+export function DocumentViewer({ doc, taskTitle, tasks = [], apiBaseUrl = '', onSaved, onDeleted, onBackToTask, enableTaskGeneration = false }) {
     const fallbackReadableName = getReadableDocumentName(doc);
     const [currentDocumentName, setCurrentDocumentName] = useState(fallbackReadableName);
     const readableName = currentDocumentName;
@@ -532,6 +533,10 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved, onDel
     const [monochromeMode, setMonochromeMode] = useState(false);
     const [deleting, setDeleting] = useState(false);
     const [renaming, setRenaming] = useState(false);
+    const [attachModalOpen, setAttachModalOpen] = useState(false);
+    const [attachSearch, setAttachSearch] = useState('');
+    const [attachingTaskId, setAttachingTaskId] = useState(null);
+    const [attachError, setAttachError] = useState(null);
     const [renameValue, setRenameValue] = useState(readableName);
     const isEditable = doc.editable !== false;
     const attachmentState = getEffectiveAttachmentState(doc);
@@ -545,6 +550,13 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved, onDel
     const reviewThreadEndRef = useRef(null);
     const markdownContainerRef = useRef(null);
     const activeReviewSession = reviewSessions.find((session) => session.id === selectedReviewSessionId) || reviewSessions[0] || null;
+    const filteredTasks = tasks.filter((task) => {
+        const query = attachSearch.trim().toLowerCase();
+        if (!query)
+            return true;
+        return task.title.toLowerCase().includes(query)
+            || String(task.referenceLabel || '').trim().toLowerCase().includes(query);
+    });
     const fetchContent = useCallback(async () => {
         setLoadingContent(true);
         setLoadError(null);
@@ -941,6 +953,44 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved, onDel
             setDeleting(false);
         }
     }, [apiBaseUrl, attachmentState, deleting, doc.assetId, doc.attachmentCount, onDeleted, readableName]);
+    const handleOpenAttachModal = useCallback(() => {
+        setAttachSearch('');
+        setAttachError(null);
+        setAttachingTaskId(null);
+        setAttachModalOpen(true);
+    }, []);
+    const handleAttachToTask = useCallback(async (taskId) => {
+        if (!doc.assetId)
+            return;
+        setAttachError(null);
+        setAttachingTaskId(taskId);
+        try {
+            const res = await fetchTaskforceApi(`/api/taskforce/documents/${encodeURIComponent(doc.assetId)}/attach`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    targetType: 'task',
+                    targetId: taskId,
+                }),
+            }, apiBaseUrl);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(data.error || `Attach failed (${res.status})`);
+            if (data.alreadyAttached) {
+                setAttachError('This document is already attached to that task.');
+                return;
+            }
+            setAttachModalOpen(false);
+            onSaved?.(new Date().toISOString());
+        }
+        catch (error) {
+            setAttachError(error?.message || 'Failed to attach document.');
+        }
+        finally {
+            setAttachingTaskId(null);
+        }
+    }, [apiBaseUrl, doc.assetId, onSaved]);
     const handleToggleReviewStatus = useCallback(async () => {
         if (!activeReviewSession || reviewBusy)
             return;
@@ -1227,7 +1277,7 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved, onDel
                                         return;
                                     setRenameValue(readableName);
                                     setRenaming(true);
-                                }, children: readableName })), taskTitle && (_jsx("span", { className: viewerStyles.metaTaskName, title: `From task: ${taskTitle}`, children: taskTitle })), attachmentState === 'unattached' && (_jsx("span", { className: viewerStyles.statusBadge, children: "Unattached" })), doc.updatedAt && (_jsxs("span", { className: viewerStyles.metaDate, title: formatDate(doc.updatedAt), children: [_jsx(Clock, { size: 11 }), formatDate(doc.updatedAt)] })), _jsxs("span", { className: viewerStyles.metaSize, children: [_jsx(HardDrive, { size: 11 }), formatBytes(doc.sizeBytes)] }), documentReferenceLabel && (_jsx(ReferenceBadgeButton, { label: documentReferenceLabel, copied: copiedReference, onClick: () => { void handleCopyReference(); }, title: "Copy document reference" })), saveStatus.type === 'saved' && (_jsxs("span", { className: `${viewerStyles.saveStatus} ${viewerStyles.saveStatusSaved}`, children: [_jsx(CheckCircle, { size: 11 }), "Saved"] })), saveStatus.type === 'error' && (_jsxs("span", { className: `${viewerStyles.saveStatus} ${viewerStyles.saveStatusError}`, title: saveStatus.message, children: [_jsx(AlertCircle, { size: 11 }), saveStatus.message || 'Save failed'] })), isDirty && saveStatus.type !== 'saving' && (_jsx("span", { className: viewerStyles.unsaved, children: "Unsaved changes" }))] }), _jsx("div", { className: viewerStyles.actions, children: editMode ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: viewerStyles.layoutToggle, children: [_jsx("button", { className: `${viewerStyles.layoutBtn} ${layout === 'editor' ? viewerStyles.layoutBtnActive : ''}`, onClick: () => setLayout('editor'), title: "Editor only", children: _jsx(Pencil, { size: 12 }) }), _jsx("button", { className: `${viewerStyles.layoutBtn} ${layout === 'split' ? viewerStyles.layoutBtnActive : ''}`, onClick: () => setLayout('split'), title: "Split view", children: _jsx(SplitSquareHorizontal, { size: 12 }) }), _jsx("button", { className: `${viewerStyles.layoutBtn} ${layout === 'preview' ? viewerStyles.layoutBtnActive : ''}`, onClick: () => setLayout('preview'), title: "Preview only", children: _jsx(Eye, { size: 12 }) })] }), _jsxs("button", { className: viewerStyles.actionBtn, onClick: handleCancelEdit, title: "Discard changes", children: [_jsx(X, { size: 13 }), "Cancel"] }), _jsxs("button", { className: `${viewerStyles.actionBtn} ${viewerStyles.saveBtn}`, onClick: handleSave, disabled: saveStatus.type === 'saving' || !isDirty, title: "Save (Ctrl+S)", children: [_jsx(Save, { size: 13 }), saveStatus.type === 'saving' ? 'Saving…' : 'Save'] })] })) : (_jsxs(_Fragment, { children: [doc.assetId && (_jsxs("button", { className: viewerStyles.actionBtn, onClick: () => setRenaming((prev) => !prev), title: "Rename document", children: [_jsx(Pencil, { size: 13 }), renaming ? 'Close Rename' : 'Rename'] })), isEditable && (_jsxs("button", { className: `${viewerStyles.actionBtn} ${viewerStyles.editBtn}`, onClick: handleEnterEdit, title: "Edit document", children: [_jsx(Pencil, { size: 13 }), "Edit"] })), _jsxs("button", { className: viewerStyles.actionBtn, onClick: handleToggleReviewSidebar, title: showReviewSidebar ? 'Hide review and comments' : 'Show review and comments', children: [_jsx(MessageSquareText, { size: 13 }), showReviewSidebar ? 'Hide Review' : 'Show Review'] }), _jsxs("button", { className: viewerStyles.actionBtn, onClick: handleCopyLink, title: "Copy link", children: [_jsx(Link, { size: 13 }), copied ? 'Copied!' : 'Copy link'] }), _jsxs("button", { className: viewerStyles.actionBtn, onClick: handleDownload, title: "Download .md", children: [_jsx(Download, { size: 13 }), "Download"] }), _jsxs("button", { className: viewerStyles.actionBtn, onClick: handlePrint, title: "Print", children: [_jsx(Printer, { size: 13 }), "Print"] }), _jsxs("button", { className: viewerStyles.actionBtn, onClick: () => setMonochromeMode((prev) => !prev), title: "Toggle black and white style", children: [_jsx(Eye, { size: 13 }), monochromeMode ? 'Color' : 'B/W'] }), enableTaskGeneration && doc.docType === 'implementation-plan' && !editMode && (_jsxs("button", { className: `${viewerStyles.actionBtn} ${viewerStyles.generateBtn}`, onClick: () => setShowGenModal(true), title: "Generate tasks from this plan", children: [_jsx(Zap, { size: 13 }), "Generate Tasks"] })), canDelete && (_jsxs("button", { className: `${viewerStyles.actionBtn} ${viewerStyles.dangerBtn}`, onClick: () => { void handleDelete(); }, disabled: deleting, title: attachmentState === 'attached'
+                                }, children: readableName })), taskTitle && (_jsx("span", { className: viewerStyles.metaTaskName, title: `From task: ${taskTitle}`, children: taskTitle })), attachmentState === 'unattached' && (_jsx("span", { className: viewerStyles.statusBadge, children: "Unattached" })), doc.updatedAt && (_jsxs("span", { className: viewerStyles.metaDate, title: formatDate(doc.updatedAt), children: [_jsx(Clock, { size: 11 }), formatDate(doc.updatedAt)] })), _jsxs("span", { className: viewerStyles.metaSize, children: [_jsx(HardDrive, { size: 11 }), formatBytes(doc.sizeBytes)] }), documentReferenceLabel && (_jsx(ReferenceBadgeButton, { label: documentReferenceLabel, copied: copiedReference, onClick: () => { void handleCopyReference(); }, title: "Copy document reference" })), saveStatus.type === 'saved' && (_jsxs("span", { className: `${viewerStyles.saveStatus} ${viewerStyles.saveStatusSaved}`, children: [_jsx(CheckCircle, { size: 11 }), "Saved"] })), saveStatus.type === 'error' && (_jsxs("span", { className: `${viewerStyles.saveStatus} ${viewerStyles.saveStatusError}`, title: saveStatus.message, children: [_jsx(AlertCircle, { size: 11 }), saveStatus.message || 'Save failed'] })), isDirty && saveStatus.type !== 'saving' && (_jsx("span", { className: viewerStyles.unsaved, children: "Unsaved changes" }))] }), _jsx("div", { className: viewerStyles.actions, children: editMode ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: viewerStyles.layoutToggle, children: [_jsx("button", { className: `${viewerStyles.layoutBtn} ${layout === 'editor' ? viewerStyles.layoutBtnActive : ''}`, onClick: () => setLayout('editor'), title: "Editor only", children: _jsx(Pencil, { size: 12 }) }), _jsx("button", { className: `${viewerStyles.layoutBtn} ${layout === 'split' ? viewerStyles.layoutBtnActive : ''}`, onClick: () => setLayout('split'), title: "Split view", children: _jsx(SplitSquareHorizontal, { size: 12 }) }), _jsx("button", { className: `${viewerStyles.layoutBtn} ${layout === 'preview' ? viewerStyles.layoutBtnActive : ''}`, onClick: () => setLayout('preview'), title: "Preview only", children: _jsx(Eye, { size: 12 }) })] }), _jsxs("button", { className: viewerStyles.actionBtn, onClick: handleCancelEdit, title: "Discard changes", children: [_jsx(X, { size: 13 }), "Cancel"] }), _jsxs("button", { className: `${viewerStyles.actionBtn} ${viewerStyles.saveBtn}`, onClick: handleSave, disabled: saveStatus.type === 'saving' || !isDirty, title: "Save (Ctrl+S)", children: [_jsx(Save, { size: 13 }), saveStatus.type === 'saving' ? 'Saving…' : 'Save'] })] })) : (_jsxs(_Fragment, { children: [doc.taskId && onBackToTask && (_jsxs("button", { className: viewerStyles.actionBtn, onClick: () => onBackToTask(doc.taskId), title: "Back to task", "aria-label": "Back to task", children: [_jsx(ArrowLeft, { size: 13 }), "Back to task"] })), doc.assetId && (_jsxs("button", { className: viewerStyles.actionBtn, onClick: () => setRenaming((prev) => !prev), title: "Rename document", children: [_jsx(Pencil, { size: 13 }), renaming ? 'Close Rename' : 'Rename'] })), isEditable && (_jsxs("button", { className: `${viewerStyles.actionBtn} ${viewerStyles.editBtn}`, onClick: handleEnterEdit, title: "Edit document", children: [_jsx(Pencil, { size: 13 }), "Edit"] })), doc.assetId && (_jsxs("button", { className: viewerStyles.actionBtn, onClick: handleOpenAttachModal, title: "Attach document to a task", children: [_jsx(Link, { size: 13 }), "Attach"] })), _jsxs("button", { className: viewerStyles.actionBtn, onClick: handleToggleReviewSidebar, title: showReviewSidebar ? 'Hide review and comments' : 'Show review and comments', children: [_jsx(MessageSquareText, { size: 13 }), showReviewSidebar ? 'Hide Review' : 'Show Review'] }), _jsxs("button", { className: viewerStyles.actionBtn, onClick: handleCopyLink, title: "Copy link", children: [_jsx(Link, { size: 13 }), copied ? 'Copied!' : 'Copy link'] }), _jsxs("button", { className: viewerStyles.actionBtn, onClick: handleDownload, title: "Download .md", children: [_jsx(Download, { size: 13 }), "Download"] }), _jsxs("button", { className: viewerStyles.actionBtn, onClick: handlePrint, title: "Print", children: [_jsx(Printer, { size: 13 }), "Print"] }), _jsxs("button", { className: viewerStyles.actionBtn, onClick: () => setMonochromeMode((prev) => !prev), title: "Toggle black and white style", children: [_jsx(Eye, { size: 13 }), monochromeMode ? 'Color' : 'B/W'] }), enableTaskGeneration && doc.docType === 'implementation-plan' && !editMode && (_jsxs("button", { className: `${viewerStyles.actionBtn} ${viewerStyles.generateBtn}`, onClick: () => setShowGenModal(true), title: "Generate tasks from this plan", children: [_jsx(Zap, { size: 13 }), "Generate Tasks"] })), canDelete && (_jsxs("button", { className: `${viewerStyles.actionBtn} ${viewerStyles.dangerBtn}`, onClick: () => { void handleDelete(); }, disabled: deleting, title: attachmentState === 'attached'
                                         ? 'Remove this document from linked tasks and delete it'
                                         : 'Permanently delete this unattached document', children: [_jsx(Trash2, { size: 13 }), deleting
                                             ? 'Deleting…'
@@ -1254,5 +1304,13 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved, onDel
                                                                     event.preventDefault();
                                                                     void handleAddReviewComment();
                                                                 }
-                                                            } })] }), _jsx("button", { type: "button", className: taskFormStyles.sendCommentBtn, onClick: () => { void handleAddReviewComment(); }, disabled: reviewBusy || !reviewDraft.trim() || activeReviewSession?.status === 'resolved', "aria-label": "Send review comment", title: "Send review comment", children: _jsx(Send, { size: 15 }) })] })] })] }) }))] }))), enableTaskGeneration && showGenModal && content !== null && (_jsx(DocumentGenerateModal, { content: content, docTitle: doc.title, apiBaseUrl: apiBaseUrl, onClose: () => setShowGenModal(false), onGenerated: (_count) => setShowGenModal(false) })), !editMode && (_jsx("div", { className: viewerStyles.printHint, children: "For the cleanest output, disable browser Headers and footers in the print dialog." }))] }));
+                                                            } })] }), _jsx("button", { type: "button", className: taskFormStyles.sendCommentBtn, onClick: () => { void handleAddReviewComment(); }, disabled: reviewBusy || !reviewDraft.trim() || activeReviewSession?.status === 'resolved', "aria-label": "Send review comment", title: "Send review comment", children: _jsx(Send, { size: 15 }) })] })] })] }) }))] }))), enableTaskGeneration && showGenModal && content !== null && (_jsx(DocumentGenerateModal, { content: content, docTitle: doc.title, apiBaseUrl: apiBaseUrl, onClose: () => setShowGenModal(false), onGenerated: (_count) => setShowGenModal(false) })), _jsx(Modal, { isOpen: attachModalOpen, onClose: () => {
+                    if (attachingTaskId)
+                        return;
+                    setAttachModalOpen(false);
+                }, title: "Attach document", size: "md", footer: (_jsx("button", { className: viewerStyles.actionBtn, onClick: () => setAttachModalOpen(false), disabled: Boolean(attachingTaskId), children: "Close" })), children: _jsxs("div", { className: viewerStyles.attachModalBody, children: [_jsx("p", { className: viewerStyles.attachModalCopy, children: "Attach this document to a task from the document manager. Initiative and workstream targets can be enabled later on the same attachment model." }), _jsx("input", { type: "text", className: styles.input, placeholder: "Search tasks\u2026", value: attachSearch, onChange: (event) => setAttachSearch(event.target.value) }), attachError && (_jsxs("div", { className: viewerStyles.attachModalError, children: [_jsx(AlertCircle, { size: 14 }), _jsx("span", { children: attachError })] })), _jsx("div", { className: `${viewerStyles.attachTaskList} tf-scrollbar`, children: filteredTasks.length === 0 ? (_jsx("div", { className: viewerStyles.attachEmptyState, children: tasks.length === 0 ? 'No tasks are available in this workspace.' : 'No tasks match your search.' })) : (filteredTasks.map((task) => {
+                                const isCurrentPrimaryAttachment = doc.taskId === task.id;
+                                const isBusy = attachingTaskId === task.id;
+                                return (_jsxs("button", { type: "button", className: viewerStyles.attachTaskRow, disabled: isBusy, onClick: () => { void handleAttachToTask(task.id); }, children: [_jsxs("span", { className: viewerStyles.attachTaskInfo, children: [_jsx("span", { className: viewerStyles.attachTaskTitle, children: task.title }), task.referenceLabel && (_jsx("span", { className: viewerStyles.attachTaskReference, children: task.referenceLabel }))] }), _jsx("span", { className: viewerStyles.attachTaskMeta, children: isBusy ? 'Attaching…' : isCurrentPrimaryAttachment ? 'Attached' : 'Attach' })] }, task.id));
+                            })) })] }) }), !editMode && (_jsx("div", { className: viewerStyles.printHint, children: "For the cleanest output, disable browser Headers and footers in the print dialog." }))] }));
 }

package/dist/components/features/DocumentWorkspace.d.ts

@@ -7,6 +7,7 @@ interface Props {
     tasks: Array<{
         id: string;
         title: string;
+        referenceLabel?: string | null;
     }>;
     apiBaseUrl?: string;
     documents: DocMeta[];
@@ -15,16 +16,20 @@ interface Props {
     selectedDoc: DocMeta | null;
     searchQuery: string;
     hasActiveFilters: boolean;
+    documentTrayOpen?: boolean;
     onSearchChange: (value: string) => void;
     onSelectDoc: (doc: DocMeta | null) => void;
     onRefresh: () => Promise<void> | void;
+    onCloseDocumentTray?: () => void;
     onDeleteSelected: () => Promise<void> | void;
+    onBackToTask?: (taskId: string) => void;
     enableTaskGeneration?: boolean;
 }
 interface ShellProps {
     tasks: Array<{
         id: string;
         title: string;
+        referenceLabel?: string | null;
     }>;
     runtimeMode?: 'local' | 'cloud';
     apiBaseUrl?: string;
@@ -33,10 +38,13 @@ interface ShellProps {
     attachmentFilters?: DocumentAttachmentFilter[];
     onTypeFiltersChange?: (values: DocumentTypeFilter[]) => void;
     onAttachmentFiltersChange?: (values: DocumentAttachmentFilter[]) => void;
+    documentTrayOpen?: boolean;
+    onCloseDocumentTray?: () => void;
     requestedDocPath?: string | null;
     requestedDocAssetId?: string | null;
     onRequestedDocHandled?: () => void;
+    onBackToTask?: (taskId: string) => void;
     enableTaskGeneration?: boolean;
 }
-export declare function DocumentWorkspace({ tasks, apiBaseUrl, documents, loading, error, selectedDoc, searchQuery, hasActiveFilters, onSearchChange, onSelectDoc, onRefresh, onDeleteSelected, enableTaskGeneration }: Props): import("react/jsx-runtime").JSX.Element;
-export declare function DocumentWorkspaceShell({ tasks, runtimeMode, apiBaseUrl, cloudAuthBaseUrl, typeFilters: controlledTypeFilters, attachmentFilters: controlledAttachmentFilters, onTypeFiltersChange, onAttachmentFiltersChange, requestedDocPath, requestedDocAssetId, onRequestedDocHandled, enableTaskGeneration }: ShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function DocumentWorkspace({ tasks, apiBaseUrl, documents, loading, error, selectedDoc, searchQuery, hasActiveFilters, documentTrayOpen, onSearchChange, onSelectDoc, onRefresh, onCloseDocumentTray, onDeleteSelected, onBackToTask, enableTaskGeneration }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function DocumentWorkspaceShell({ tasks, runtimeMode, apiBaseUrl, cloudAuthBaseUrl, typeFilters: controlledTypeFilters, attachmentFilters: controlledAttachmentFilters, onTypeFiltersChange, onAttachmentFiltersChange, documentTrayOpen, onCloseDocumentTray, requestedDocPath, requestedDocAssetId, onRequestedDocHandled, onBackToTask, enableTaskGeneration }: ShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/features/DocumentWorkspace.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import styles from '../../Taskforce.module.css';
 import { DocumentIndex } from './DocumentIndex';
 import { DocumentViewer } from './DocumentViewer';
 import { useDocumentWorkspaceController } from './useDocumentWorkspaceController';
 export { DOCUMENT_TYPE_FILTER_OPTIONS, DOCUMENT_ATTACHMENT_FILTER_OPTIONS } from './documentWorkspaceFilters';
-export function DocumentWorkspace({ tasks, apiBaseUrl = '', documents, loading, error, selectedDoc, searchQuery, hasActiveFilters, onSearchChange, onSelectDoc, onRefresh, onDeleteSelected, enableTaskGeneration = false }) {
+export function DocumentWorkspace({ tasks, apiBaseUrl = '', documents, loading, error, selectedDoc, searchQuery, hasActiveFilters, documentTrayOpen, onSearchChange, onSelectDoc, onRefresh, onCloseDocumentTray, onDeleteSelected, onBackToTask, enableTaskGeneration = false }) {
     const taskById = new Map(tasks.map(t => [t.id, t]));
-    return (_jsxs("div", { className: styles.docWorkspace, children: [_jsx("div", { className: styles.docIndexPanel, children: _jsx(DocumentIndex, { documents: documents, selectedDocId: selectedDoc?.id ?? null, loading: loading, error: error, searchQuery: searchQuery, onSearchChange: onSearchChange, onSelect: (doc) => onSelectDoc(doc), onRefresh: onRefresh, taskById: taskById, hasActiveFilters: hasActiveFilters }) }), _jsx("div", { className: styles.docViewerPanel, children: selectedDoc ? (_jsx(DocumentViewer, { doc: selectedDoc, taskTitle: selectedDoc.taskId ? (taskById.get(selectedDoc.taskId)?.title ?? null) : null, apiBaseUrl: apiBaseUrl, onSaved: (_updatedAt) => onRefresh(), onDeleted: () => void onDeleteSelected(), enableTaskGeneration: enableTaskGeneration })) : !loading && (_jsx("div", { className: styles.docViewerEmpty, children: _jsx("p", { className: "tf-empty-copy", children: documents.length === 0 ? 'No documents match your current filters.' : 'Select a document to view it.' }) })) })] }));
+    const useTrayIndex = typeof documentTrayOpen === 'boolean';
+    const documentIndex = (_jsx(DocumentIndex, { documents: documents, selectedDocId: selectedDoc?.id ?? null, loading: loading, error: error, searchQuery: searchQuery, onSearchChange: onSearchChange, onSelect: (doc) => onSelectDoc(doc), onCloseTray: useTrayIndex ? onCloseDocumentTray : undefined, taskById: taskById, hasActiveFilters: hasActiveFilters }));
+    return (_jsxs("div", { className: `${styles.docWorkspace} ${useTrayIndex ? styles.docWorkspaceTrayMode : ''} ${useTrayIndex && documentTrayOpen ? styles.docWorkspaceTrayOpen : ''}`.trim(), children: [useTrayIndex ? (_jsx("div", { className: `${styles.docTrayPanel} ${documentTrayOpen ? styles.docTrayPanelOpen : ''}`.trim(), "aria-hidden": !documentTrayOpen, children: documentIndex })) : (_jsx("div", { className: styles.docIndexPanel, children: documentIndex })), _jsx("div", { className: styles.docViewerPanel, children: selectedDoc ? (_jsx(DocumentViewer, { doc: selectedDoc, taskTitle: selectedDoc.taskId ? (taskById.get(selectedDoc.taskId)?.title ?? null) : null, tasks: tasks, apiBaseUrl: apiBaseUrl, onSaved: (_updatedAt) => onRefresh(), onDeleted: () => void onDeleteSelected(), onBackToTask: onBackToTask, enableTaskGeneration: enableTaskGeneration })) : !loading && (_jsx("div", { className: styles.docViewerEmpty, children: _jsx("p", { className: "tf-empty-copy", children: documents.length === 0 ? 'No documents match your current filters.' : 'Select a document to view it.' }) })) })] }));
 }
-export function DocumentWorkspaceShell({ tasks, runtimeMode = 'local', apiBaseUrl = '', cloudAuthBaseUrl = '', typeFilters: controlledTypeFilters, attachmentFilters: controlledAttachmentFilters, onTypeFiltersChange, onAttachmentFiltersChange, requestedDocPath = null, requestedDocAssetId = null, onRequestedDocHandled, enableTaskGeneration = false }) {
+export function DocumentWorkspaceShell({ tasks, runtimeMode = 'local', apiBaseUrl = '', cloudAuthBaseUrl = '', typeFilters: controlledTypeFilters, attachmentFilters: controlledAttachmentFilters, onTypeFiltersChange, onAttachmentFiltersChange, documentTrayOpen, onCloseDocumentTray, requestedDocPath = null, requestedDocAssetId = null, onRequestedDocHandled, onBackToTask, enableTaskGeneration = false }) {
     const { documentApiBaseUrl, filteredDocs, loading, error, selectedDoc, searchQuery, hasActiveFilters, setSearchQuery, fetchDocuments, selectDoc, handleDeleteSelected, } = useDocumentWorkspaceController({
         runtimeMode,
         apiBaseUrl,
@@ -21,5 +24,13 @@ export function DocumentWorkspaceShell({ tasks, runtimeMode = 'local', apiBaseUr
         requestedDocAssetId,
         onRequestedDocHandled,
     });
-    return (_jsx(DocumentWorkspace, { tasks: tasks, apiBaseUrl: documentApiBaseUrl, documents: filteredDocs, loading: loading, error: error, selectedDoc: selectedDoc, searchQuery: searchQuery, hasActiveFilters: hasActiveFilters, onSearchChange: setSearchQuery, onSelectDoc: selectDoc, onRefresh: fetchDocuments, onDeleteSelected: handleDeleteSelected, enableTaskGeneration: enableTaskGeneration }));
+    const previousDocumentTrayOpenRef = React.useRef(documentTrayOpen);
+    React.useEffect(() => {
+        const wasOpen = previousDocumentTrayOpenRef.current === true;
+        previousDocumentTrayOpenRef.current = documentTrayOpen;
+        if (documentTrayOpen !== true || wasOpen)
+            return;
+        void fetchDocuments();
+    }, [documentTrayOpen, fetchDocuments]);
+    return (_jsx(DocumentWorkspace, { tasks: tasks, apiBaseUrl: documentApiBaseUrl, documents: filteredDocs, loading: loading, error: error, selectedDoc: selectedDoc, searchQuery: searchQuery, hasActiveFilters: hasActiveFilters, documentTrayOpen: documentTrayOpen, onSearchChange: setSearchQuery, onSelectDoc: selectDoc, onRefresh: fetchDocuments, onCloseDocumentTray: onCloseDocumentTray, onDeleteSelected: handleDeleteSelected, onBackToTask: onBackToTask, enableTaskGeneration: enableTaskGeneration }));
 }

package/dist/components/features/DocumentWorkspace.test.js

@@ -45,7 +45,7 @@ function createEmptyReviewSessionsResponse() {
     };
 }
 function renderDocumentWorkspace(props) {
-    return render(_jsx(DocumentWorkspace, { tasks: props.tasks ?? [], documents: props.documents, loading: false, error: null, selectedDoc: props.selectedDoc ?? null, searchQuery: props.searchQuery ?? '', hasActiveFilters: props.hasActiveFilters ?? false, onSearchChange: props.onSearchChange ?? (() => { }), onSelectDoc: props.onSelectDoc ?? (() => { }), onRefresh: props.onRefresh ?? (() => { }), onDeleteSelected: props.onDeleteSelected ?? (() => { }) }));
+    return render(_jsx(DocumentWorkspace, { tasks: props.tasks ?? [], documents: props.documents, loading: false, error: null, selectedDoc: props.selectedDoc ?? null, searchQuery: props.searchQuery ?? '', hasActiveFilters: props.hasActiveFilters ?? false, documentTrayOpen: props.documentTrayOpen, onSearchChange: props.onSearchChange ?? (() => { }), onSelectDoc: props.onSelectDoc ?? (() => { }), onRefresh: props.onRefresh ?? (() => { }), onDeleteSelected: props.onDeleteSelected ?? (() => { }) }));
 }
 describe('Document workspace management', () => {
     beforeEach(() => {
@@ -97,6 +97,16 @@ describe('Document workspace management', () => {
         expect(screen.queryByRole('button', { name: /Attached notes/i })).not.toBeInTheDocument();
         expect(screen.getByText('Unattached')).toBeInTheDocument();
     });
+    it('can render the document index as a collapsible tray', () => {
+        const docs = [createDoc({ id: 'tray-doc', displayName: 'Tray Document' })];
+        const { container, rerender } = renderDocumentWorkspace({
+            documents: docs,
+            documentTrayOpen: true,
+        });
+        expect(container.querySelector('[aria-hidden="false"]')).toHaveTextContent('Tray Document');
+        rerender(_jsx(DocumentWorkspace, { tasks: [], documents: docs, loading: false, error: null, selectedDoc: null, searchQuery: "", hasActiveFilters: false, documentTrayOpen: false, onSearchChange: () => { }, onSelectDoc: () => { }, onRefresh: () => { }, onDeleteSelected: () => { } }));
+        expect(container.querySelector('[aria-hidden="true"]')).toHaveTextContent('Tray Document');
+    });
     it('keeps document search in the index without duplicate filter controls', () => {
         renderDocumentWorkspace({ documents: [createDoc()] });
         expect(screen.getByPlaceholderText('Search documents…')).toBeInTheDocument();
@@ -145,6 +155,46 @@ describe('Document workspace management', () => {
         confirmSpy.mockRestore();
         alertSpy.mockRestore();
     });
+    it('opens an attach modal from the document viewer and attaches the document to a task', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            text: async () => '# Example\n',
+        })
+            .mockResolvedValueOnce(createEmptyReviewSessionsResponse())
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ success: true, attached: true, alreadyAttached: false }),
+        });
+        const onSaved = vi.fn();
+        render(_jsx(DocumentViewer, { doc: createDoc({
+                id: 'doc-attach',
+                assetId: 'asset-doc-attach',
+                attachmentCount: 0,
+                attachmentState: 'unattached',
+            }), taskTitle: null, tasks: [
+                { id: 'task-1', title: 'First attach target', referenceLabel: 'T-11' },
+                { id: 'task-2', title: 'Second attach target', referenceLabel: 'T-12' },
+            ], onSaved: onSaved }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenCalledWith('/api/taskforce/documents/asset-doc-1/content', { credentials: 'same-origin' }, ''));
+        await user.click(screen.getByRole('button', { name: /^Attach$/i }));
+        expect(screen.getByText(/Attach this document to a task from the document manager/i)).toBeInTheDocument();
+        expect(screen.getByText('T-11')).toBeInTheDocument();
+        expect(screen.getByText('T-12')).toBeInTheDocument();
+        await user.clear(screen.getByPlaceholderText('Search tasks…'));
+        await user.type(screen.getByPlaceholderText('Search tasks…'), 'T-12');
+        expect(screen.queryByRole('button', { name: /First attach target/i })).not.toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /Second attach target/i })).toBeInTheDocument();
+        await user.clear(screen.getByPlaceholderText('Search tasks…'));
+        await user.type(screen.getByPlaceholderText('Search tasks…'), 'Second');
+        await user.click(screen.getByRole('button', { name: /Second attach target/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenLastCalledWith('/api/taskforce/documents/asset-doc-attach/attach', expect.objectContaining({
+            method: 'POST',
+            credentials: 'include',
+        }), ''));
+        expect(onSaved).toHaveBeenCalled();
+    });
     it('shows delete and unlink for attached docs and sends forceDetach on delete', async () => {
         const user = userEvent.setup();
         fetchTaskforceApi

package/dist/components/features/TaskSettings.d.ts

@@ -208,11 +208,13 @@ export interface TaskSettingsModel {
         cleanupWarnings?: string[];
     }>;
     onMcpHostRootChange?: (value: string) => void;
+    onOpenCloudAuth?: (mode: 'login' | 'register') => void;
     isAuthenticated?: boolean;
 }
 interface TaskSettingsProps {
     settingsModel: TaskSettingsModel;
     onSectionChange?: (section: any) => void;
+    renderMode?: 'full' | 'mcp-only';
 }
 export declare function TaskSettings(props: TaskSettingsProps): import("react/jsx-runtime").JSX.Element;
 export {};