@taskforcehq/taskforce 0.3.170 → 0.3.301

package/dist/components/features/DocumentViewer.js

@@ -1,12 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 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 } 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 } from 'lucide-react';
 import styles from '../../Taskforce.module.css';
+import viewerStyles from './DocumentViewer.module.css';
+import taskFormStyles from '../task/TaskForm.module.css';
+import { getEffectiveAttachmentState } from './DocumentWorkspace';
 import { DocumentGenerateModal } from './DocumentGenerateModal';
 import { fetchTaskforceApi, resolveTaskforceApiUrl } from '../../utils/taskforceApiClient';
+import { getDocumentDownloadName, getReadableDocumentName } from '../../utils/documentNames';
+import { getDocumentReferenceLabel } from '../../utils/documentReferences';
+import { ReferenceBadgeButton } from '../ui/ReferenceBadgeButton';
 const DOC_TYPE_LABELS = {
     'implementation-plan': 'Implementation Plan',
     'review': 'Review',
@@ -14,6 +21,258 @@ const DOC_TYPE_LABELS = {
     'planning': 'Planning',
     'other': 'Document',
 };
+const DOC_TYPE_BADGE_CLASS = {
+    'implementation-plan': viewerStyles.typeBadgeImplementationPlan,
+    'review': viewerStyles.typeBadgeReview,
+    'walkthrough': viewerStyles.typeBadgeWalkthrough,
+    'planning': undefined,
+    'other': undefined,
+};
+const EDITOR_LAYOUT_CLASS = {
+    editor: viewerStyles.editorLayoutEditor,
+    split: viewerStyles.editorLayoutSplit,
+    preview: viewerStyles.editorLayoutPreview,
+};
+const PRINT_FRAME_CLEANUP_DELAY_MS = 1500;
+const PRINT_DOCUMENT_CSS = `
+@page {
+    margin: 0.94in 1.02in 1in;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: #fff;
+    color: #111;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+}
+
+body {
+    font: 12.15pt/1.66 Georgia, "Times New Roman", Times, serif;
+    letter-spacing: 0;
+    text-rendering: optimizeLegibility;
+}
+
+.tf-print-document {
+    max-width: 5.95in;
+    margin: 0 auto;
+    overflow: visible;
+    color: #171717;
+}
+
+.tf-print-document > :first-child {
+    margin-top: 0;
+}
+
+.tf-print-document > :last-child {
+    margin-bottom: 0;
+}
+
+.tf-print-document h1,
+.tf-print-document h2,
+.tf-print-document h3,
+.tf-print-document h4 {
+    font-family: "Helvetica Neue", "Arial Nova", Arial, sans-serif;
+    color: #101010;
+    font-weight: 700;
+    line-height: 1.08;
+    letter-spacing: -0.03em;
+    break-after: avoid-page;
+    page-break-after: avoid;
+}
+
+.tf-print-document h1 {
+    font-size: 32pt;
+    font-weight: 800;
+    line-height: 0.98;
+    letter-spacing: -0.055em;
+    margin: 0 0 1.18em;
+    padding: 0 0 0.38em;
+    border-bottom: 2px solid #d8d8d8;
+    max-width: 84%;
+}
+
+.tf-print-document h1 + p,
+.tf-print-document h1 + ul,
+.tf-print-document h1 + ol {
+    margin-top: 0.4em;
+}
+
+.tf-print-document h2,
+.tf-print-document h3,
+.tf-print-document h4 {
+    margin-bottom: 0.28em;
+}
+
+.tf-print-document h2 {
+    font-size: 16.5pt;
+    font-weight: 750;
+    margin-top: 2.2em;
+    padding-bottom: 0.22em;
+    border-bottom: 1px solid #dfdfdf;
+}
+
+.tf-print-document h3 {
+    font-size: 13.3pt;
+    font-weight: 700;
+    margin-top: 1.48em;
+}
+
+.tf-print-document h4 {
+    font-size: 11.2pt;
+    font-weight: 700;
+    margin-top: 1.14em;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.tf-print-document p,
+.tf-print-document ul,
+.tf-print-document ol,
+.tf-print-document blockquote,
+.tf-print-document table,
+.tf-print-document pre,
+.tf-print-document hr {
+    margin: 0.78em 0;
+}
+
+.tf-print-document ul,
+.tf-print-document ol {
+    padding-left: 1.1em;
+}
+
+.tf-print-document li {
+    margin: 0.24em 0;
+    padding-left: 0.1em;
+}
+
+.tf-print-document li > ul,
+.tf-print-document li > ol {
+    margin-top: 0.34em;
+    margin-bottom: 0.2em;
+}
+
+.tf-print-document a {
+    color: #121212;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 0.65px;
+}
+
+.tf-print-document code {
+    font-family: "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace;
+    font-size: 0.78em;
+    background: transparent;
+    color: #4a4a4a;
+    border: 0;
+    padding: 0;
+    border-radius: 0;
+    overflow-wrap: anywhere;
+}
+
+.tf-print-section-label {
+    font-family: "Helvetica Neue", "Arial Nova", Arial, sans-serif;
+    font-size: 10.7pt;
+    font-weight: 700;
+    line-height: 1.18;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #191919;
+    margin-top: 2.2em;
+    margin-bottom: 0.58em;
+    padding-bottom: 0;
+    border-bottom: 0;
+    break-after: avoid-page;
+    page-break-after: avoid;
+}
+
+.tf-print-section-label strong {
+    font-weight: inherit;
+}
+
+.tf-print-document pre {
+    background: #fafafa;
+    border: 1px solid #e1e1e1;
+    border-radius: 6px;
+    padding: 10pt 11pt;
+    overflow: visible;
+    white-space: pre-wrap;
+    word-break: break-word;
+    break-inside: avoid-page;
+    page-break-inside: avoid;
+}
+
+.tf-print-document pre code {
+    background: transparent;
+    padding: 0;
+    border-radius: 0;
+    white-space: inherit;
+    word-break: inherit;
+}
+
+.tf-print-document blockquote {
+    border-left: 2px solid #9f9f9f;
+    color: #434343;
+    margin-left: 0;
+    padding-left: 9pt;
+    font-style: italic;
+}
+
+.tf-print-document table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    break-inside: auto;
+    page-break-inside: auto;
+}
+
+.tf-print-document thead {
+    display: table-header-group;
+}
+
+.tf-print-document tr {
+    break-inside: avoid-page;
+    page-break-inside: avoid;
+}
+
+.tf-print-document th,
+.tf-print-document td {
+    border: 1px solid #dbdbdb;
+    padding: 6.5pt 7.5pt;
+    text-align: left;
+    vertical-align: top;
+    word-break: break-word;
+    background: #fff;
+}
+
+.tf-print-document th {
+    background: #f7f7f7;
+    color: #1e1e1e;
+    font-size: 9.4pt;
+    font-weight: 680;
+    letter-spacing: 0.018em;
+    text-transform: uppercase;
+}
+
+.tf-print-document hr {
+    border: 0;
+    border-top: 1px solid #e1e1e1;
+}
+
+.tf-print-document img {
+    max-width: 100%;
+    height: auto;
+    break-inside: avoid-page;
+    page-break-inside: avoid;
+}
+
+.tf-print-document input[type="checkbox"] {
+    accent-color: #111;
+    margin-right: 0.45em;
+}
+`;
 function formatBytes(bytes) {
     if (bytes < 1024)
         return `${bytes} B`;
@@ -26,6 +285,203 @@ function formatDate(iso) {
         return '—';
     return new Date(iso).toLocaleString();
 }
+function createPrintMarkdownComponents() {
+    const nodeHasCheckboxInput = (node) => {
+        if (!node || !Array.isArray(node.children))
+            return false;
+        return node.children.some((child) => {
+            if (!child)
+                return false;
+            if (child.type === 'element' &&
+                child.tagName === 'input' &&
+                child.properties?.type === 'checkbox') {
+                return true;
+            }
+            return nodeHasCheckboxInput(child);
+        });
+    };
+    const nodeHasTaskItems = (node) => {
+        if (!node || !Array.isArray(node.children))
+            return false;
+        return node.children.some((child) => {
+            if (typeof child?.checked === 'boolean')
+                return true;
+            return nodeHasCheckboxInput(child);
+        });
+    };
+    const isStandaloneStrongParagraph = (children) => {
+        const childArray = React.Children.toArray(children).filter((child) => {
+            if (typeof child !== 'string')
+                return true;
+            return child.trim().length > 0;
+        });
+        if (childArray.length !== 1)
+            return null;
+        const onlyChild = childArray[0];
+        if (!React.isValidElement(onlyChild) || onlyChild.type !== 'strong')
+            return null;
+        const onlyChildProps = onlyChild.props;
+        const text = React.Children.toArray(onlyChildProps.children).join('').trim();
+        if (!text)
+            return null;
+        return text;
+    };
+    return {
+        input({ type, checked, ...props }) {
+            if (type !== 'checkbox')
+                return _jsx("input", { type: type, checked: checked, ...props });
+            return (_jsx("input", { ...props, type: "checkbox", checked: Boolean(checked), disabled: true, readOnly: true }));
+        },
+        ul({ children, node, ...props }) {
+            const taskList = nodeHasTaskItems(node);
+            return (_jsx("ul", { ...props, style: taskList ? { paddingLeft: '1.2em' } : undefined, children: children }));
+        },
+        ol({ children, node, ...props }) {
+            const taskList = nodeHasTaskItems(node);
+            return (_jsx("ol", { ...props, style: taskList ? { paddingLeft: '1.2em' } : undefined, children: children }));
+        },
+        li({ children, node, ...props }) {
+            const taskItem = typeof node?.checked === 'boolean' || nodeHasCheckboxInput(node);
+            return (_jsx("li", { ...props, style: taskItem ? { listStyleType: 'none', listStyle: 'none', marginLeft: 0 } : undefined, children: children }));
+        },
+        p({ children, ...props }) {
+            const sectionLabel = isStandaloneStrongParagraph(children);
+            if (sectionLabel) {
+                return (_jsx("p", { ...props, className: "tf-print-section-label", children: sectionLabel }));
+            }
+            return _jsx("p", { ...props, children: children });
+        }
+    };
+}
+export function buildPrintDocumentHtml(markdown) {
+    const bodyHtml = renderToStaticMarkup(_jsx("div", { className: "tf-print-document", children: _jsx(Markdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeSanitize], components: createPrintMarkdownComponents(), children: markdown }) }));
+    return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Taskforce print document</title>
+  <style>${PRINT_DOCUMENT_CSS}</style>
+</head>
+<body>${bodyHtml}</body>
+</html>`;
+}
+async function waitForPrintFrameReady(frameWindow, frameDocument) {
+    try {
+        await frameDocument.fonts?.ready;
+    }
+    catch {
+        // Ignore font readiness failures and continue to print the document.
+    }
+    await new Promise((resolve) => {
+        const schedule = frameWindow.requestAnimationFrame?.bind(frameWindow)
+            ?? ((callback) => window.setTimeout(() => callback(0), 0));
+        schedule(() => schedule(() => resolve()));
+    });
+}
+export function schedulePrintCleanup(cleanup) {
+    return window.setTimeout(cleanup, PRINT_FRAME_CLEANUP_DELAY_MS);
+}
+function formatReviewTimestamp(iso) {
+    try {
+        return new Date(iso).toLocaleString(undefined, {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }
+    catch {
+        return iso;
+    }
+}
+function formatReviewAnchor(anchor) {
+    if (!anchor)
+        return null;
+    if (anchor.kind === 'document')
+        return 'Entire document';
+    if (anchor.kind === 'quote')
+        return anchor.quote ? `Quote: "${anchor.quote}"` : 'Quoted text';
+    if (anchor.kind === 'line-range') {
+        if (anchor.startLine === anchor.endLine)
+            return `Line ${anchor.startLine}`;
+        return `Lines ${anchor.startLine}-${anchor.endLine}`;
+    }
+    return null;
+}
+function getReviewActorLabel(comment) {
+    if (comment.authorActor?.label)
+        return comment.authorActor.label;
+    if (comment.authorActorId === 'user' || comment.authorActorId === 'human')
+        return 'You';
+    if (comment.authorActorId)
+        return comment.authorActorId;
+    return 'Reviewer';
+}
+function normalizeAnchorText(text) {
+    return text.replace(/\s+/g, ' ').trim();
+}
+function countOccurrences(haystack, needle) {
+    if (!needle)
+        return 0;
+    let count = 0;
+    let index = 0;
+    while (index >= 0) {
+        index = haystack.indexOf(needle, index);
+        if (index < 0)
+            break;
+        count += 1;
+        index += needle.length;
+    }
+    return count;
+}
+function getTextOffset(container, targetNode, targetOffset) {
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+    let current = walker.nextNode();
+    let offset = 0;
+    while (current) {
+        const textContent = current.textContent || '';
+        if (current === targetNode) {
+            return offset + Math.max(0, Math.min(targetOffset, textContent.length));
+        }
+        offset += textContent.length;
+        current = walker.nextNode();
+    }
+    return null;
+}
+function buildQuoteAnchor(container, range, selectedText) {
+    const quote = selectedText.replace(/\s+/g, ' ').trim();
+    if (!quote)
+        return null;
+    const fullText = container.textContent || '';
+    const normalizedText = normalizeAnchorText(fullText);
+    const positions = [];
+    let searchIndex = normalizedText.indexOf(quote);
+    while (searchIndex >= 0) {
+        positions.push(searchIndex);
+        searchIndex = normalizedText.indexOf(quote, searchIndex + quote.length);
+    }
+    let occurrenceIndex = null;
+    const startOffset = getTextOffset(container, range.startContainer, range.startOffset);
+    if (startOffset !== null) {
+        const normalizedBeforeSelection = normalizeAnchorText(fullText.slice(0, startOffset));
+        occurrenceIndex = countOccurrences(normalizedBeforeSelection, quote);
+    }
+    const resolvedOccurrenceIndex = occurrenceIndex !== null && occurrenceIndex >= 0 && occurrenceIndex < positions.length
+        ? occurrenceIndex
+        : positions.length === 1
+            ? 0
+            : null;
+    const resolvedIndex = resolvedOccurrenceIndex !== null
+        ? positions[resolvedOccurrenceIndex]
+        : positions[0] ?? -1;
+    if (resolvedIndex < 0) {
+        return { kind: 'quote', quote, occurrenceIndex };
+    }
+    const prefix = normalizedText.slice(Math.max(0, resolvedIndex - 40), resolvedIndex).trim() || null;
+    const suffix = normalizedText.slice(resolvedIndex + quote.length, resolvedIndex + quote.length + 40).trim() || null;
+    return { kind: 'quote', quote, occurrenceIndex: resolvedOccurrenceIndex, prefix, suffix };
+}
 function toggleNthTaskCheckbox(markdown, targetIndex, nextChecked) {
     if (targetIndex < 0)
         return markdown;
@@ -44,11 +500,28 @@ function toggleNthTaskCheckbox(markdown, targetIndex, nextChecked) {
     });
     return updated.join('\n');
 }
-export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved }) {
+export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved, onDeleted, enableTaskGeneration = false }) {
+    const fallbackReadableName = getReadableDocumentName(doc);
+    const [currentDocumentName, setCurrentDocumentName] = useState(fallbackReadableName);
+    const readableName = currentDocumentName;
+    const downloadName = getDocumentDownloadName({ ...doc, displayName: currentDocumentName });
+    const documentReferenceLabel = getDocumentReferenceLabel(doc);
     const [content, setContent] = useState(null);
     const [loadingContent, setLoadingContent] = useState(false);
     const [loadError, setLoadError] = useState(null);
     const [copied, setCopied] = useState(false);
+    const [copiedReference, setCopiedReference] = useState(false);
+    const [reviewSessions, setReviewSessions] = useState([]);
+    const [loadingReviews, setLoadingReviews] = useState(false);
+    const [reviewError, setReviewError] = useState(null);
+    const [selectedReviewSessionId, setSelectedReviewSessionId] = useState(null);
+    const [reviewDraft, setReviewDraft] = useState('');
+    const [reviewBusy, setReviewBusy] = useState(false);
+    const [pendingReviewAnchor, setPendingReviewAnchor] = useState(null);
+    const [editingReviewTitle, setEditingReviewTitle] = useState(false);
+    const [reviewTitleDraft, setReviewTitleDraft] = useState('');
+    const [editingCommentId, setEditingCommentId] = useState(null);
+    const [editingCommentDraft, setEditingCommentDraft] = useState('');
     // Edit mode state
     const [editMode, setEditMode] = useState(false);
     const [draft, setDraft] = useState('');
@@ -56,15 +529,28 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved }) {
     const [saveStatus, setSaveStatus] = useState({ type: 'idle' });
     const [showGenModal, setShowGenModal] = useState(false);
     const [monochromeMode, setMonochromeMode] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [renaming, setRenaming] = useState(false);
+    const [renameValue, setRenameValue] = useState(readableName);
+    const isEditable = doc.editable !== false;
+    const attachmentState = getEffectiveAttachmentState(doc);
+    const canDelete = attachmentState === 'unattached' && !!doc.assetId;
     const isDirty = editMode && draft !== (content ?? '');
     const textareaRef = useRef(null);
+    const renameInputRef = useRef(null);
+    const previewScrollRef = useRef(null);
+    const printFrameRef = useRef(null);
+    const printCleanupTimeoutRef = useRef(null);
+    const reviewThreadEndRef = useRef(null);
+    const markdownContainerRef = useRef(null);
+    const activeReviewSession = reviewSessions.find((session) => session.id === selectedReviewSessionId) || reviewSessions[0] || null;
     const fetchContent = useCallback(async () => {
         setLoadingContent(true);
         setLoadError(null);
         setContent(null);
         try {
-            const path = `/api/taskforce/context-link?path=${encodeURIComponent(doc.fsPath)}`;
-            const res = await fetchTaskforceApi(path, { credentials: 'include' }, apiBaseUrl);
+            // Avoid credentialed cross-origin redirects when cloud storage serves signed document URLs.
+            const res = await fetchTaskforceApi(doc.apiUrl, { credentials: 'same-origin' }, apiBaseUrl);
             if (!res.ok)
                 throw new Error(`Failed to load document (${res.status})`);
             const text = await res.text();
@@ -77,13 +563,134 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved }) {
         finally {
             setLoadingContent(false);
         }
-    }, [doc.fsPath, apiBaseUrl]);
+    }, [apiBaseUrl, doc.apiUrl]);
+    const fetchReviewSessions = useCallback(async (options) => {
+        if (!doc.assetId) {
+            setReviewSessions([]);
+            setSelectedReviewSessionId(null);
+            setReviewError(null);
+            return;
+        }
+        const silent = options?.silent === true;
+        if (!silent) {
+            setLoadingReviews(true);
+            setReviewError(null);
+        }
+        try {
+            const res = await fetchTaskforceApi(`/api/taskforce/document-reviews/sessions?assetId=${encodeURIComponent(doc.assetId)}`, { credentials: 'include' }, apiBaseUrl);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(data.error || `Failed to load reviews (${res.status})`);
+            const sessions = Array.isArray(data.sessions) ? data.sessions : [];
+            setReviewSessions(sessions);
+            setSelectedReviewSessionId((currentId) => {
+                if (currentId && sessions.some((session) => session.id === currentId))
+                    return currentId;
+                return sessions[0]?.id ?? null;
+            });
+        }
+        catch (error) {
+            if (!silent) {
+                setReviewError(error?.message || 'Failed to load reviews');
+                setReviewSessions([]);
+                setSelectedReviewSessionId(null);
+            }
+        }
+        finally {
+            if (!silent) {
+                setLoadingReviews(false);
+            }
+        }
+    }, [apiBaseUrl, doc.assetId]);
+    const createReviewSession = useCallback(async () => {
+        if (!doc.assetId || reviewBusy)
+            return null;
+        setReviewBusy(true);
+        setReviewError(null);
+        try {
+            const res = await fetchTaskforceApi('/api/taskforce/document-reviews/sessions', {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    assetId: doc.assetId,
+                    title: `Review ${reviewSessions.length + 1}`,
+                }),
+            }, apiBaseUrl);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(data.error || `Failed to create review (${res.status})`);
+            const session = (data.session || null);
+            if (!session)
+                throw new Error('Review session payload missing.');
+            setReviewSessions((current) => [session, ...current.filter((entry) => entry.id !== session.id)]);
+            setSelectedReviewSessionId(session.id);
+            return session;
+        }
+        catch (error) {
+            setReviewError(error?.message || 'Failed to create review');
+            return null;
+        }
+        finally {
+            setReviewBusy(false);
+        }
+    }, [apiBaseUrl, doc.assetId, reviewBusy, reviewSessions.length]);
     useEffect(() => {
         fetchContent();
+        void fetchReviewSessions();
         // Reset edit mode when doc changes
         setEditMode(false);
         setSaveStatus({ type: 'idle' });
-    }, [fetchContent]);
+        setRenaming(false);
+        const nextReadableName = getReadableDocumentName(doc);
+        setCurrentDocumentName(nextReadableName);
+        setRenameValue(nextReadableName);
+        setCopied(false);
+        setCopiedReference(false);
+        setReviewDraft('');
+        setPendingReviewAnchor(null);
+        setEditingReviewTitle(false);
+        setReviewTitleDraft('');
+        setEditingCommentId(null);
+        setEditingCommentDraft('');
+    }, [doc, fetchContent, fetchReviewSessions]);
+    useEffect(() => {
+        if (!activeReviewSession)
+            return;
+        const endNode = reviewThreadEndRef.current;
+        if (typeof endNode?.scrollIntoView === 'function') {
+            endNode.scrollIntoView({ block: 'end' });
+        }
+    }, [activeReviewSession?.comments.length, activeReviewSession?.id]);
+    useEffect(() => {
+        setReviewTitleDraft(activeReviewSession?.title?.trim() || '');
+        setEditingReviewTitle(false);
+    }, [activeReviewSession?.id, activeReviewSession?.title]);
+    useEffect(() => {
+        if (!renaming)
+            return;
+        window.setTimeout(() => {
+            renameInputRef.current?.focus();
+            renameInputRef.current?.select();
+        }, 0);
+    }, [renaming]);
+    useEffect(() => {
+        if (!doc.assetId || editMode)
+            return;
+        const refreshIfVisible = () => {
+            if (document.visibilityState !== 'visible')
+                return;
+            void fetchReviewSessions({ silent: true });
+        };
+        const intervalId = window.setInterval(refreshIfVisible, 15_000);
+        window.addEventListener('focus', refreshIfVisible);
+        document.addEventListener('visibilitychange', refreshIfVisible);
+        return () => {
+            window.clearInterval(intervalId);
+            window.removeEventListener('focus', refreshIfVisible);
+            document.removeEventListener('visibilitychange', refreshIfVisible);
+        };
+    }, [doc.assetId, editMode, fetchReviewSessions]);
     // Ctrl+S / Cmd+S to save while editing
     useEffect(() => {
         if (!editMode)
@@ -97,7 +704,46 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved }) {
         window.addEventListener('keydown', handler);
         return () => window.removeEventListener('keydown', handler);
     }, [editMode, draft]); // eslint-disable-line react-hooks/exhaustive-deps
+    const cleanupPrintFrame = useCallback(() => {
+        if (printCleanupTimeoutRef.current !== null) {
+            window.clearTimeout(printCleanupTimeoutRef.current);
+            printCleanupTimeoutRef.current = null;
+        }
+        if (printFrameRef.current) {
+            printFrameRef.current.remove();
+            printFrameRef.current = null;
+        }
+    }, []);
+    useEffect(() => {
+        return () => {
+            cleanupPrintFrame();
+        };
+    }, [cleanupPrintFrame]);
+    const syncPaneScroll = useCallback((driver) => {
+        if (!editMode || layout !== 'split')
+            return;
+        const editorEl = textareaRef.current;
+        const previewEl = previewScrollRef.current;
+        if (!editorEl || !previewEl)
+            return;
+        const sourceEl = driver === 'editor' ? editorEl : previewEl;
+        const targetEl = driver === 'editor' ? previewEl : editorEl;
+        const sourceScrollable = Math.max(sourceEl.scrollHeight - sourceEl.clientHeight, 0);
+        const targetScrollable = Math.max(targetEl.scrollHeight - targetEl.clientHeight, 0);
+        const scrollRatio = sourceScrollable <= 0 ? 0 : sourceEl.scrollTop / sourceScrollable;
+        const nextScrollTop = targetScrollable * scrollRatio;
+        if (Math.abs(targetEl.scrollTop - nextScrollTop) <= 1)
+            return;
+        targetEl.scrollTop = nextScrollTop;
+    }, [editMode, layout]);
+    useEffect(() => {
+        if (!editMode || layout !== 'split')
+            return;
+        syncPaneScroll('editor');
+    }, [draft, editMode, layout, syncPaneScroll]);
     const handleEnterEdit = () => {
+        if (!isEditable)
+            return;
         setDraft(content ?? '');
         setSaveStatus({ type: 'idle' });
         setEditMode(true);
@@ -114,6 +760,8 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved }) {
         setSaveStatus({ type: 'idle' });
     };
     const handleSave = useCallback(async () => {
+        if (!isEditable)
+            return;
         if (saveStatus.type === 'saving')
             return;
         setSaveStatus({ type: 'saving' });
@@ -137,10 +785,51 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved }) {
         catch (e) {
             setSaveStatus({ type: 'error', message: e?.message || 'Save failed' });
         }
-    }, [apiBaseUrl, doc.fsPath, draft, saveStatus.type, onSaved]);
-    const handlePrint = () => window.print();
+    }, [apiBaseUrl, doc.fsPath, draft, saveStatus.type, onSaved, isEditable]);
+    const handlePrint = useCallback(() => {
+        const printSource = editMode ? draft : (content ?? '');
+        if (!printSource.trim())
+            return;
+        cleanupPrintFrame();
+        const iframe = document.createElement('iframe');
+        iframe.setAttribute('aria-hidden', 'true');
+        iframe.tabIndex = -1;
+        iframe.style.position = 'fixed';
+        iframe.style.right = '0';
+        iframe.style.bottom = '0';
+        iframe.style.width = '0';
+        iframe.style.height = '0';
+        iframe.style.border = '0';
+        iframe.style.opacity = '0';
+        iframe.style.pointerEvents = 'none';
+        document.body.appendChild(iframe);
+        printFrameRef.current = iframe;
+        const frameWindow = iframe.contentWindow;
+        const frameDocument = iframe.contentDocument;
+        if (!frameWindow || !frameDocument) {
+            cleanupPrintFrame();
+            return;
+        }
+        frameDocument.open();
+        frameDocument.write(buildPrintDocumentHtml(printSource));
+        frameDocument.close();
+        let didPrint = false;
+        const runPrint = async () => {
+            if (didPrint || printFrameRef.current !== iframe)
+                return;
+            didPrint = true;
+            await waitForPrintFrameReady(frameWindow, frameDocument);
+            if (printFrameRef.current !== iframe)
+                return;
+            frameWindow.focus();
+            frameWindow.print();
+            printCleanupTimeoutRef.current = schedulePrintCleanup(cleanupPrintFrame);
+        };
+        frameWindow.addEventListener('afterprint', cleanupPrintFrame, { once: true });
+        void runPrint();
+    }, [cleanupPrintFrame, content, draft, editMode]);
     const handleCopyLink = async () => {
-        const path = `/api/taskforce/context-link?path=${encodeURIComponent(doc.fsPath)}`;
+        const path = doc.apiUrl;
         const url = new URL(resolveTaskforceApiUrl(path, apiBaseUrl), window.location.origin).toString();
         try {
             await navigator.clipboard.writeText(url);
@@ -156,15 +845,286 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved }) {
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     };
+    const handleCopyReference = useCallback(async () => {
+        if (!documentReferenceLabel)
+            return;
+        try {
+            await navigator.clipboard.writeText(documentReferenceLabel);
+        }
+        catch {
+            const el = document.createElement('textarea');
+            el.value = documentReferenceLabel;
+            document.body.appendChild(el);
+            el.select();
+            document.execCommand('copy');
+            document.body.removeChild(el);
+        }
+        setCopiedReference(true);
+        setTimeout(() => setCopiedReference(false), 2000);
+    }, [documentReferenceLabel]);
     const handleDownload = () => {
-        const blob = new Blob([editMode ? draft : (content ?? '')], { type: 'text/markdown' });
+        const separator = doc.apiUrl.includes('?') ? '&' : '?';
+        const downloadUrl = resolveTaskforceApiUrl(`${doc.apiUrl}${separator}download=1&filename=${encodeURIComponent(downloadName)}`, apiBaseUrl);
         const a = document.createElement('a');
-        a.href = URL.createObjectURL(blob);
-        a.download = doc.title + '.md';
+        a.href = downloadUrl;
         a.click();
-        URL.revokeObjectURL(a.href);
     };
+    const handleRename = useCallback(async () => {
+        if (!doc.assetId)
+            return;
+        const nextName = renameValue.trim();
+        if (!nextName) {
+            setRenameValue(readableName);
+            setRenaming(false);
+            return;
+        }
+        if (nextName === readableName) {
+            setRenaming(false);
+            return;
+        }
+        const res = await fetchTaskforceApi(`/api/taskforce/documents/${encodeURIComponent(doc.assetId)}`, {
+            method: 'PATCH',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ displayName: nextName })
+        }, apiBaseUrl);
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) {
+            window.alert(data.error || `Rename failed (${res.status})`);
+            return;
+        }
+        setCurrentDocumentName(nextName);
+        setRenameValue(nextName);
+        setRenaming(false);
+        onSaved?.(data.updatedAt || new Date().toISOString());
+    }, [apiBaseUrl, doc.assetId, onSaved, readableName, renameValue]);
+    const handleRenameKeyDown = useCallback((event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            void handleRename();
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            setRenameValue(readableName);
+            setRenaming(false);
+        }
+    }, [handleRename, readableName]);
+    const handleDelete = useCallback(async () => {
+        if (!doc.assetId || deleting)
+            return;
+        if (!window.confirm(`Permanently delete "${readableName}" from storage?`))
+            return;
+        setDeleting(true);
+        try {
+            const res = await fetchTaskforceApi(`/api/taskforce/documents/${encodeURIComponent(doc.assetId)}`, {
+                method: 'DELETE',
+                credentials: 'include',
+            }, apiBaseUrl);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(data.error || `Delete failed (${res.status})`);
+            onDeleted?.();
+        }
+        catch (e) {
+            window.alert(e?.message || 'Delete failed');
+        }
+        finally {
+            setDeleting(false);
+        }
+    }, [apiBaseUrl, deleting, doc.assetId, onDeleted, readableName]);
+    const handleToggleReviewStatus = useCallback(async () => {
+        if (!activeReviewSession || reviewBusy)
+            return;
+        setReviewBusy(true);
+        setReviewError(null);
+        try {
+            const nextStatus = activeReviewSession.status === 'resolved' ? 'open' : 'resolved';
+            const res = await fetchTaskforceApi(`/api/taskforce/document-reviews/sessions/${encodeURIComponent(activeReviewSession.id)}`, {
+                method: 'PATCH',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ status: nextStatus }),
+            }, apiBaseUrl);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(data.error || `Failed to update review (${res.status})`);
+            const updatedSession = (data.session || null);
+            if (!updatedSession)
+                throw new Error('Review session payload missing.');
+            setReviewSessions((current) => current.map((session) => session.id === updatedSession.id ? updatedSession : session));
+        }
+        catch (error) {
+            setReviewError(error?.message || 'Failed to update review');
+        }
+        finally {
+            setReviewBusy(false);
+        }
+    }, [activeReviewSession, apiBaseUrl, reviewBusy]);
+    const handleSaveReviewTitle = useCallback(async () => {
+        if (!activeReviewSession || reviewBusy)
+            return;
+        const nextTitle = reviewTitleDraft.trim();
+        setReviewBusy(true);
+        setReviewError(null);
+        try {
+            const res = await fetchTaskforceApi(`/api/taskforce/document-reviews/sessions/${encodeURIComponent(activeReviewSession.id)}`, {
+                method: 'PATCH',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ title: nextTitle || null }),
+            }, apiBaseUrl);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(data.error || `Failed to update review (${res.status})`);
+            const updatedSession = (data.session || null);
+            if (!updatedSession)
+                throw new Error('Review session payload missing.');
+            setReviewSessions((current) => current.map((session) => session.id === updatedSession.id ? updatedSession : session));
+            setEditingReviewTitle(false);
+        }
+        catch (error) {
+            setReviewError(error?.message || 'Failed to update review');
+        }
+        finally {
+            setReviewBusy(false);
+        }
+    }, [activeReviewSession, apiBaseUrl, reviewBusy, reviewTitleDraft]);
+    const previewContent = editMode ? draft : (content ?? '');
+    const handleCaptureReviewAnchor = useCallback(() => {
+        if (editMode)
+            return;
+        const selection = typeof window.getSelection === 'function' ? window.getSelection() : null;
+        const selectedText = selection?.toString().replace(/\s+/g, ' ').trim() || '';
+        if (!selection || !selectedText) {
+            return;
+        }
+        const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+        const container = markdownContainerRef.current;
+        if (!range || !container)
+            return;
+        const commonAncestor = range.commonAncestorContainer;
+        const selectionNode = commonAncestor.nodeType === Node.TEXT_NODE ? commonAncestor.parentNode : commonAncestor;
+        if (!(selectionNode instanceof Node) || !container.contains(selectionNode))
+            return;
+        const anchor = buildQuoteAnchor(container, range, selectedText);
+        if (!anchor)
+            return;
+        setPendingReviewAnchor(anchor);
+    }, [editMode]);
+    const handleAddReviewComment = useCallback(async () => {
+        const body = reviewDraft.trim();
+        if (!body || reviewBusy)
+            return;
+        let targetSession = activeReviewSession;
+        if (!targetSession) {
+            targetSession = await createReviewSession();
+        }
+        if (!targetSession)
+            return;
+        setReviewBusy(true);
+        setReviewError(null);
+        try {
+            const res = await fetchTaskforceApi(`/api/taskforce/document-reviews/sessions/${encodeURIComponent(targetSession.id)}/comments`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    body,
+                    anchor: pendingReviewAnchor || { kind: 'document' },
+                }),
+            }, apiBaseUrl);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(data.error || `Failed to add comment (${res.status})`);
+            const updatedSession = (data.session || null);
+            if (!updatedSession)
+                throw new Error('Review session payload missing.');
+            setReviewSessions((current) => {
+                const rest = current.filter((entry) => entry.id !== updatedSession.id);
+                return [updatedSession, ...rest];
+            });
+            setSelectedReviewSessionId(updatedSession.id);
+            setReviewDraft('');
+            setPendingReviewAnchor(null);
+        }
+        catch (error) {
+            setReviewError(error?.message || 'Failed to add comment');
+        }
+        finally {
+            setReviewBusy(false);
+        }
+    }, [activeReviewSession, apiBaseUrl, createReviewSession, pendingReviewAnchor, reviewBusy, reviewDraft]);
+    const handleStartEditingComment = useCallback((commentId, body) => {
+        setEditingCommentId(commentId);
+        setEditingCommentDraft(body);
+    }, []);
+    const handleSaveEditedComment = useCallback(async () => {
+        if (!activeReviewSession || !editingCommentId || reviewBusy)
+            return;
+        const body = editingCommentDraft.trim();
+        if (!body)
+            return;
+        setReviewBusy(true);
+        setReviewError(null);
+        try {
+            const res = await fetchTaskforceApi(`/api/taskforce/document-reviews/sessions/${encodeURIComponent(activeReviewSession.id)}/comments/${encodeURIComponent(editingCommentId)}`, {
+                method: 'PATCH',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ body }),
+            }, apiBaseUrl);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(data.error || `Failed to update comment (${res.status})`);
+            const updatedSession = (data.session || null);
+            if (!updatedSession)
+                throw new Error('Review session payload missing.');
+            setReviewSessions((current) => current.map((session) => session.id === updatedSession.id ? updatedSession : session));
+            setEditingCommentId(null);
+            setEditingCommentDraft('');
+        }
+        catch (error) {
+            setReviewError(error?.message || 'Failed to update comment');
+        }
+        finally {
+            setReviewBusy(false);
+        }
+    }, [activeReviewSession, apiBaseUrl, editingCommentDraft, editingCommentId, reviewBusy]);
+    const handleDeleteReviewComment = useCallback(async (commentId) => {
+        if (!activeReviewSession || reviewBusy)
+            return;
+        if (!window.confirm('Delete this review comment?'))
+            return;
+        setReviewBusy(true);
+        setReviewError(null);
+        try {
+            const res = await fetchTaskforceApi(`/api/taskforce/document-reviews/sessions/${encodeURIComponent(activeReviewSession.id)}/comments/${encodeURIComponent(commentId)}`, {
+                method: 'DELETE',
+                credentials: 'include',
+            }, apiBaseUrl);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(data.error || `Failed to delete comment (${res.status})`);
+            const updatedSession = (data.session || null);
+            if (!updatedSession)
+                throw new Error('Review session payload missing.');
+            setReviewSessions((current) => current.map((session) => session.id === updatedSession.id ? updatedSession : session));
+            if (editingCommentId === commentId) {
+                setEditingCommentId(null);
+                setEditingCommentDraft('');
+            }
+        }
+        catch (error) {
+            setReviewError(error?.message || 'Failed to delete comment');
+        }
+        finally {
+            setReviewBusy(false);
+        }
+    }, [activeReviewSession, apiBaseUrl, editingCommentId, reviewBusy]);
     const persistContent = useCallback(async (nextContent) => {
+        if (!isEditable)
+            return false;
         setSaveStatus({ type: 'saving' });
         try {
             const res = await fetchTaskforceApi('/api/taskforce/documents/save', {
@@ -187,7 +1147,7 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved }) {
             setSaveStatus({ type: 'error', message: e?.message || 'Save failed' });
             return false;
         }
-    }, [apiBaseUrl, doc.fsPath, onSaved]);
+    }, [apiBaseUrl, doc.fsPath, onSaved, isEditable]);
     const handleToggleTaskCheckbox = useCallback((checkboxIndex, nextChecked) => {
         const currentSource = editMode ? draft : (content ?? '');
         const nextSource = toggleNthTaskCheckbox(currentSource, checkboxIndex, nextChecked);
@@ -200,7 +1160,6 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved }) {
         }
         void persistContent(nextSource);
     }, [content, draft, editMode, persistContent]);
-    const previewContent = editMode ? draft : (content ?? '');
     let checkboxRenderIndex = -1;
     const nodeHasCheckboxInput = (node) => {
         if (!node || !Array.isArray(node.children))
@@ -246,8 +1205,31 @@ export function DocumentViewer({ doc, taskTitle, apiBaseUrl = '', onSaved }) {
             return (_jsx("li", { ...props, style: taskItem ? { listStyleType: 'none', listStyle: 'none', marginLeft: 0 } : undefined, "data-task-item": taskItem ? 'true' : undefined, children: children }));
         }
     };
-    return (_jsxs("div", { className: `${styles.docViewer} ${editMode ? styles.docViewerEditMode : ''} ${monochromeMode ? styles.docViewerMonochrome : ''}`, children: [_jsxs("div", { className: styles.docMeta, children: [_jsxs("div", { className: styles.docMetaLeft, children: [_jsxs("span", { className: `${styles.docTypeBadge} ${styles[`docTypeBadge_${doc.docType.replace('-', '_')}`]}`, children: [_jsx(Tag, { size: 10 }), DOC_TYPE_LABELS[doc.docType]] }), taskTitle && (_jsx("span", { className: styles.docMetaTaskName, title: `From task: ${taskTitle}`, children: taskTitle })), doc.updatedAt && (_jsxs("span", { className: styles.docMetaDate, title: formatDate(doc.updatedAt), children: [_jsx(Clock, { size: 11 }), formatDate(doc.updatedAt)] })), _jsxs("span", { className: styles.docMetaSize, children: [_jsx(HardDrive, { size: 11 }), formatBytes(doc.sizeBytes)] }), saveStatus.type === 'saved' && (_jsxs("span", { className: styles.docSaveStatus, "data-status": "saved", children: [_jsx(CheckCircle, { size: 11 }), "Saved"] })), saveStatus.type === 'error' && (_jsxs("span", { className: styles.docSaveStatus, "data-status": "error", title: saveStatus.message, children: [_jsx(AlertCircle, { size: 11 }), saveStatus.message || 'Save failed'] })), isDirty && saveStatus.type !== 'saving' && (_jsx("span", { className: styles.docUnsaved, children: "Unsaved changes" }))] }), _jsx("div", { className: styles.docActions, children: editMode ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.docLayoutToggle, children: [_jsx("button", { className: `${styles.docLayoutBtn} ${layout === 'editor' ? styles.docLayoutBtnActive : ''}`, onClick: () => setLayout('editor'), title: "Editor only", children: _jsx(Pencil, { size: 12 }) }), _jsx("button", { className: `${styles.docLayoutBtn} ${layout === 'split' ? styles.docLayoutBtnActive : ''}`, onClick: () => setLayout('split'), title: "Split view", children: _jsx(SplitSquareHorizontal, { size: 12 }) }), _jsx("button", { className: `${styles.docLayoutBtn} ${layout === 'preview' ? styles.docLayoutBtnActive : ''}`, onClick: () => setLayout('preview'), title: "Preview only", children: _jsx(Eye, { size: 12 }) })] }), _jsxs("button", { className: styles.docActionBtn, onClick: handleCancelEdit, title: "Discard changes", children: [_jsx(X, { size: 13 }), "Cancel"] }), _jsxs("button", { className: `${styles.docActionBtn} ${styles.docSaveBtn}`, onClick: handleSave, disabled: saveStatus.type === 'saving' || !isDirty, title: "Save (Ctrl+S)", children: [_jsx(Save, { size: 13 }), saveStatus.type === 'saving' ? 'Saving…' : 'Save'] })] })) : (_jsxs(_Fragment, { children: [_jsxs("button", { className: `${styles.docActionBtn} ${styles.docEditBtn}`, onClick: handleEnterEdit, title: "Edit document", children: [_jsx(Pencil, { size: 13 }), "Edit"] }), _jsxs("button", { className: styles.docActionBtn, onClick: handleCopyLink, title: "Copy link", children: [_jsx(Link, { size: 13 }), copied ? 'Copied!' : 'Copy link'] }), _jsxs("button", { className: styles.docActionBtn, onClick: handleDownload, title: "Download .md", children: [_jsx(Download, { size: 13 }), "Download"] }), _jsxs("button", { className: styles.docActionBtn, onClick: handlePrint, title: "Print", children: [_jsx(Printer, { size: 13 }), "Print"] }), _jsxs("button", { className: styles.docActionBtn, onClick: () => setMonochromeMode((prev) => !prev), title: "Toggle black and white style", children: [_jsx(Eye, { size: 13 }), monochromeMode ? 'Color' : 'B/W'] }), doc.docType === 'implementation-plan' && !editMode && (_jsxs("button", { className: `${styles.docActionBtn} ${styles.docGenerateBtn}`, onClick: () => setShowGenModal(true), title: "Generate tasks from this plan", children: [_jsx(Zap, { size: 13 }), "Generate Tasks"] }))] })) })] }), !editMode && (_jsx("div", { className: styles.docViewerTitleRow, children: _jsx("h1", { className: styles.docViewerTitle, children: doc.title }) })), loadingContent && (_jsx("div", { className: styles.docViewerState, children: "Loading\u2026" })), !loadingContent && loadError && (_jsx("div", { className: styles.docViewerStateError, children: loadError })), !loadingContent && !loadError && (editMode ? (_jsxs("div", { className: `${styles.docEditorArea} ${styles[`docEditorLayout_${layout}`]}`, children: [(layout === 'editor' || layout === 'split') && (_jsxs("div", { className: styles.docEditorPane, children: [_jsx("div", { className: styles.docEditorPaneLabel, children: "Markdown" }), _jsx("textarea", { ref: textareaRef, className: styles.docEditorTextarea, value: draft, onChange: e => {
+    return (_jsxs("div", { className: `${viewerStyles.viewer} ${editMode ? viewerStyles.viewerEditMode : ''} ${monochromeMode ? viewerStyles.viewerMonochrome : ''}`, children: [_jsxs("div", { className: viewerStyles.meta, children: [_jsxs("div", { className: viewerStyles.metaLeft, children: [_jsxs("span", { className: `${viewerStyles.typeBadge} ${DOC_TYPE_BADGE_CLASS[doc.docType] ?? ''}`, children: [_jsx(Tag, { size: 10 }), DOC_TYPE_LABELS[doc.docType]] }), renaming ? (_jsx("div", { className: viewerStyles.metaRenameRow, children: _jsx("input", { ref: renameInputRef, type: "text", className: styles.input, value: renameValue, onChange: (e) => setRenameValue(e.target.value), onBlur: () => { void handleRename(); }, onKeyDown: handleRenameKeyDown }) })) : (_jsx("span", { className: viewerStyles.metaDocumentName, title: readableName, onDoubleClick: () => {
+                                    if (!doc.assetId)
+                                        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: 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: "Permanently delete this unattached document", children: [_jsx(Trash2, { size: 13 }), deleting ? 'Deleting…' : 'Delete Permanently'] }))] })) })] }), loadingContent && (_jsx("div", { className: viewerStyles.viewerState, children: "Loading\u2026" })), !loadingContent && loadError && (_jsx("div", { className: viewerStyles.viewerStateError, children: loadError })), !loadingContent && !loadError && (editMode ? (_jsxs("div", { className: `${viewerStyles.editorArea} ${EDITOR_LAYOUT_CLASS[layout]}`, children: [(layout === 'editor' || layout === 'split') && (_jsxs("div", { className: viewerStyles.editorPane, children: [_jsx("div", { className: viewerStyles.editorPaneLabel, children: "Markdown" }), _jsx("textarea", { ref: textareaRef, className: `${viewerStyles.editorTextarea} tf-scrollbar`, value: draft, onScroll: () => syncPaneScroll('editor'), onChange: e => {
                                     setDraft(e.target.value);
                                     setSaveStatus(prev => prev.type === 'saving' ? prev : { type: 'idle' });
-                                }, spellCheck: true, placeholder: "Write markdown here\u2026" })] })), (layout === 'preview' || layout === 'split') && (_jsxs("div", { className: styles.docPreviewPane, children: [_jsx("div", { className: styles.docEditorPaneLabel, children: "Preview" }), _jsx("div", { className: styles.docMarkdown, children: _jsx(Markdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeSanitize], components: markdownComponents, children: previewContent }) })] }))] })) : (_jsx("div", { className: styles.docViewerContent, children: _jsx("div", { className: styles.docMarkdown, children: _jsx(Markdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeSanitize], components: markdownComponents, children: previewContent }) }) }))), showGenModal && content !== null && (_jsx(DocumentGenerateModal, { content: content, docTitle: doc.title, apiBaseUrl: apiBaseUrl, onClose: () => setShowGenModal(false), onGenerated: (_count) => setShowGenModal(false) }))] }));
+                                }, spellCheck: true, placeholder: "Write markdown here\u2026" })] })), (layout === 'preview' || layout === 'split') && (_jsxs("div", { className: viewerStyles.previewPane, children: [_jsx("div", { className: viewerStyles.editorPaneLabel, children: "Preview" }), _jsx("div", { ref: previewScrollRef, className: `${styles.docMarkdown} ${viewerStyles.markdownSurface}`, "data-testid": "doc-preview-scroll", onScroll: () => syncPaneScroll('preview'), children: _jsx(Markdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeSanitize], components: markdownComponents, children: previewContent }) })] }))] })) : (_jsxs("div", { className: viewerStyles.viewerBody, children: [_jsx("div", { className: `${viewerStyles.viewerContent} ${viewerStyles.viewerMain} tf-scrollbar`, children: _jsx("div", { ref: markdownContainerRef, className: `${styles.docMarkdown} ${viewerStyles.markdownSurface}`, onMouseUp: handleCaptureReviewAnchor, children: _jsx(Markdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeSanitize], components: markdownComponents, children: previewContent }) }) }), _jsx("aside", { className: viewerStyles.reviewRail, children: _jsxs("section", { className: viewerStyles.reviewSection, "aria-label": "Review and comments", children: [_jsxs("div", { className: viewerStyles.reviewHeader, children: [_jsxs("div", { children: [_jsxs("div", { className: viewerStyles.reviewTitle, children: [_jsx(MessageSquareText, { size: 14 }), "Review & Comments"] }), _jsx("p", { className: viewerStyles.reviewSubtitle, children: "Comments stay attached to this document review session." })] }), _jsxs("div", { className: viewerStyles.reviewControls, children: [reviewSessions.length > 1 && (_jsx("select", { className: `${styles.select} ${viewerStyles.reviewSelect}`, value: activeReviewSession?.id || '', onChange: (event) => setSelectedReviewSessionId(event.target.value || null), "aria-label": "Select review session", children: reviewSessions.map((session) => (_jsx("option", { value: session.id, children: session.title?.trim() || 'Untitled review' }, session.id))) })), _jsxs("button", { type: "button", className: viewerStyles.actionBtn, onClick: () => { void createReviewSession(); }, disabled: reviewBusy || !doc.assetId, children: [_jsx(MessageSquareText, { size: 13 }), "Start Review"] }), activeReviewSession && (_jsxs("button", { type: "button", className: viewerStyles.actionBtn, onClick: () => { void handleToggleReviewStatus(); }, disabled: reviewBusy, children: [activeReviewSession.status === 'resolved' ? _jsx(RotateCcw, { size: 13 }) : _jsx(CheckCheck, { size: 13 }), activeReviewSession.status === 'resolved' ? 'Reopen' : 'Resolve'] }))] })] }), activeReviewSession && (_jsxs("div", { className: viewerStyles.reviewSessionMeta, children: [_jsx("span", { className: `${viewerStyles.statusBadge} ${activeReviewSession.status === 'resolved' ? viewerStyles.reviewStatusResolved : ''}`, children: activeReviewSession.status === 'resolved' ? 'Resolved' : 'Open' }), editingReviewTitle ? (_jsxs("div", { className: viewerStyles.reviewTitleEditRow, children: [_jsx("input", { type: "text", className: styles.input, value: reviewTitleDraft, onChange: (event) => setReviewTitleDraft(event.target.value), placeholder: "Untitled review" }), _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => { void handleSaveReviewTitle(); }, disabled: reviewBusy, children: "Save Title" })] })) : (_jsx("span", { className: viewerStyles.reviewSessionLabel, children: activeReviewSession.title?.trim() || 'Untitled review' })), _jsxs("span", { className: viewerStyles.reviewSessionTimestamp, children: ["Updated ", formatReviewTimestamp(activeReviewSession.updatedAt)] }), !editingReviewTitle && (_jsxs("button", { type: "button", className: viewerStyles.actionBtn, onClick: () => setEditingReviewTitle(true), disabled: reviewBusy, children: [_jsx(Pencil, { size: 13 }), "Rename Review"] }))] })), reviewError && (_jsx("div", { className: viewerStyles.viewerStateError, children: reviewError })), _jsxs("div", { className: taskFormStyles.commentPanel, children: [_jsxs("div", { className: taskFormStyles.commentThread, children: [loadingReviews && (_jsx("div", { className: taskFormStyles.emptyComments, children: "Loading review comments\u2026" })), !loadingReviews && !activeReviewSession && (_jsx("div", { className: taskFormStyles.emptyComments, children: "Start a review to collect comments for this document." })), !loadingReviews && activeReviewSession && activeReviewSession.comments.length === 0 && (_jsx("div", { className: taskFormStyles.emptyComments, children: "No comments yet. Add the first review note for this document." })), !loadingReviews && activeReviewSession && activeReviewSession.comments.map((comment) => {
+                                                    const isAi = comment.authorActor?.kind === 'ai';
+                                                    const anchorLabel = formatReviewAnchor(comment.anchor);
+                                                    const ActorIcon = isAi ? Bot : User;
+                                                    const isEditingComment = editingCommentId === comment.id;
+                                                    return (_jsxs("div", { className: `${taskFormStyles.comment} ${isAi ? taskFormStyles.commentAi : taskFormStyles.commentUser}`, children: [_jsxs("div", { className: taskFormStyles.commentHeader, children: [_jsxs("span", { className: taskFormStyles.commentAuthor, style: comment.authorActor?.color ? { color: comment.authorActor.color } : undefined, children: [_jsx(ActorIcon, { size: 12, strokeWidth: 1.5 }), getReviewActorLabel(comment)] }), _jsx("span", { className: taskFormStyles.commentTime, children: formatReviewTimestamp(comment.updatedAt) }), _jsxs("span", { className: viewerStyles.reviewCommentActions, children: [!isEditingComment && (_jsx("button", { type: "button", className: viewerStyles.reviewCommentAction, onClick: () => handleStartEditingComment(comment.id, comment.body), disabled: reviewBusy, children: "Edit" })), isEditingComment && (_jsx("button", { type: "button", className: viewerStyles.reviewCommentAction, onClick: () => {
+                                                                                    setEditingCommentId(null);
+                                                                                    setEditingCommentDraft('');
+                                                                                }, disabled: reviewBusy, children: "Cancel" })), _jsx("button", { type: "button", className: viewerStyles.reviewCommentAction, onClick: () => { void handleDeleteReviewComment(comment.id); }, disabled: reviewBusy, children: "Delete" })] })] }), anchorLabel && (_jsx("span", { className: viewerStyles.reviewAnchorLabel, children: anchorLabel })), _jsx("div", { className: taskFormStyles.commentText, children: isEditingComment ? (_jsxs("div", { className: viewerStyles.reviewCommentEditor, children: [_jsx("textarea", { className: taskFormStyles.commentInput, value: editingCommentDraft, onChange: (event) => setEditingCommentDraft(event.target.value), disabled: reviewBusy }), _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => { void handleSaveEditedComment(); }, disabled: reviewBusy || !editingCommentDraft.trim(), children: "Save Comment" })] })) : (_jsx(Markdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeSanitize], children: comment.body })) })] }, comment.id));
+                                                }), _jsx("div", { ref: reviewThreadEndRef })] }), _jsxs("div", { className: taskFormStyles.commentInputArea, children: [_jsxs("div", { className: viewerStyles.reviewComposer, children: [pendingReviewAnchor && (_jsxs("div", { className: viewerStyles.reviewAnchorChip, children: [_jsx("span", { children: formatReviewAnchor(pendingReviewAnchor) || 'Selected text' }), 'quote' in pendingReviewAnchor && pendingReviewAnchor.quote && (_jsxs("span", { className: viewerStyles.reviewAnchorSnippet, children: ["\"", pendingReviewAnchor.quote, "\""] })), _jsx("button", { type: "button", className: viewerStyles.reviewAnchorClear, onClick: () => setPendingReviewAnchor(null), children: "Clear" })] })), _jsx("textarea", { className: taskFormStyles.commentInput, placeholder: activeReviewSession?.status === 'resolved'
+                                                                ? 'Reopen this review to add more comments…'
+                                                                : pendingReviewAnchor
+                                                                    ? 'Add a comment for the selected text…'
+                                                                    : 'Add a comment for this document review…', value: reviewDraft, onChange: (event) => setReviewDraft(event.target.value), disabled: reviewBusy || activeReviewSession?.status === 'resolved', onKeyDown: (event) => {
+                                                                if (event.key === 'Enter' && !event.shiftKey) {
+                                                                    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." }))] }));
 }