@taskforcehq/taskforce 0.3.326 → 0.3.328

package/dist/components/features/AnnotatedAttachmentWorkspace.js

@@ -1,13 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from '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 { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ArrowLeft, ArrowUpLeft, Check, ChevronLeft, ClipboardPaste, Copy, FolderOpen, GripVertical, Hand, HelpCircle, Link2, Loader2, Maximize, MessageSquareCode, MessageSquareText, MousePointer2, Pin, Plus, RotateCcw, Save, Search, SquareMousePointer, Trash2, Unlink, ZoomIn, ZoomOut, } from 'lucide-react';
 import sharedStyles from '../../Taskforce.module.css';
 import { fetchTaskforceApi } from '../../utils/taskforceApiClient';
 import { logBootstrapDebug } from '../../hooks/workspace/workspaceLocalState';
 import { Modal } from '../ui/Modal';
 import { ImageReferenceBadge } from '../ui/ImageReferenceBadge';
 import { TaskReferenceBadge } from '../task/TaskReferenceBadge';
+import { AssetTraySortControl } from '../ui/AssetTraySortControl';
+import { sortTrayItems } from '../../utils/assetTraySorting';
 import styles from './AnnotatedAttachmentWorkspace.module.css';
+function SortableAnnotationCard({ id, children }) {
+    return _jsx(_Fragment, { children: children(useSortable({ id })) });
+}
 const MARKER_TYPE_OPTIONS = [
     { value: 'review', label: 'Review' },
     { value: 'change', label: 'Change' },
@@ -20,6 +28,7 @@ const TOOL_OPTIONS = [
     { value: 'arrow', label: 'Arrow', icon: ArrowUpLeft },
     { value: 'text-note', label: 'Note', icon: MessageSquareText },
 ];
+const VIEWPORT_REPORT_DELAY_MS = 200;
 const ANNOTATION_KIND_ICON = {
     pin: Pin,
     box: SquareMousePointer,
@@ -406,7 +415,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, imageTrayOpen, onCloseImageTray, 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, viewportByContextKey, onViewportChange, onBackToTask, }) {
     const resolvedApiBase = runtimeMode === 'cloud'
         ? (cloudAuthBaseUrl || apiBaseUrl || '')
         : '';
@@ -418,6 +427,8 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
     const [draftGlobalInstruction, setDraftGlobalInstruction] = useState('');
     const [draftAnnotations, setDraftAnnotations] = useState([]);
     const [selectedAnnotationId, setSelectedAnnotationId] = useState(null);
+    const [isAnnotationEditorCollapsed, setIsAnnotationEditorCollapsed] = useState(false);
+    const [activeAnnotationId, setActiveAnnotationId] = useState(null);
     const [defaultMarkerColor, setDefaultMarkerColor] = useState(ANNOTATION_COLORS[DEFAULT_MARKER_TYPE]);
     const [colorPickerOpen, setColorPickerOpen] = useState(false);
     const [toolMode, setToolMode] = useState('select');
@@ -432,6 +443,11 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
     const [payloadCopied, setPayloadCopied] = useState(false);
     const [payloadModalOpen, setPayloadModalOpen] = useState(false);
     const [payloadPreviewMode, setPayloadPreviewMode] = useState('json');
+    const [taskLinkModalOpen, setTaskLinkModalOpen] = useState(false);
+    const [taskLinkSearch, setTaskLinkSearch] = useState('');
+    const [linkableTasks, setLinkableTasks] = useState([]);
+    const [taskLinkLoading, setTaskLinkLoading] = useState(false);
+    const [taskLinkSaving, setTaskLinkSaving] = useState(false);
     const [taskIdCopied, setTaskIdCopied] = useState(false);
     const [imageIdCopied, setImageIdCopied] = useState(false);
     const [toolHelpModalOpen, setToolHelpModalOpen] = useState(false);
@@ -440,6 +456,8 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
     const [openingImage, setOpeningImage] = useState(false);
     const [imageTrayItems, setImageTrayItems] = useState([]);
     const [imageTraySearchQuery, setImageTraySearchQuery] = useState('');
+    const [imageTraySortField, setImageTraySortField] = useState('updated');
+    const [imageTraySortOrder, setImageTraySortOrder] = useState('desc');
     const [imageTrayLoading, setImageTrayLoading] = useState(false);
     const [imageTrayError, setImageTrayError] = useState(null);
     const [imageLoading, setImageLoading] = useState(false);
@@ -468,10 +486,17 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
     const lastSavedSnapshotRef = useRef('');
     const inFlightSnapshotRef = useRef(null);
     const inFlightPromiseRef = useRef(null);
+    const taskLinkSaveInFlightRef = useRef(false);
     const hasPendingSaveAfterFlightRef = useRef(false);
     const activeSaveSessionIdRef = useRef(null);
     const autoRetrySnapshotRef = useRef(null);
     const retryTimerRef = useRef(null);
+    const pendingViewportRef = useRef(null);
+    const viewportReportTimeoutRef = useRef(null);
+    const isRestoringViewportRef = useRef(false);
+    const autoFitCanvasRef = useRef(true);
+    const lastRestoredViewportKeyRef = useRef('');
+    const onViewportChangeRef = useRef(onViewportChange);
     const gestureStartRef = useRef(null);
     const dragRef = useRef(null);
     const resizeRef = useRef(null);
@@ -480,25 +505,38 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
     const panRef = useRef(null);
     const colorPickerRef = useRef(null);
     const sessionCardRef = useRef(null);
+    const annotationCardRefs = useRef(new Map());
     const selectedSession = useMemo(() => sessions.find((session) => session.id === selectedSessionId) || null, [selectedSessionId, sessions]);
     const workspaceQuery = useMemo(() => `workspaceId=${encodeURIComponent(String(workspaceId || 'default').trim() || 'default')}`, [workspaceId]);
     const requestHeaders = useMemo(() => ({ 'x-taskforce-workspace-id': String(workspaceId || 'default').trim() || 'default' }), [workspaceId]);
     const selectedAnnotation = useMemo(() => draftAnnotations.find((annotation) => annotation.id === selectedAnnotationId) || null, [draftAnnotations, selectedAnnotationId]);
+    const activeAnnotation = useMemo(() => draftAnnotations.find((annotation) => annotation.id === activeAnnotationId) || null, [activeAnnotationId, draftAnnotations]);
+    const annotationSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     const requestedTargetKey = useMemo(() => getAnnotatedTargetKey(requestedTarget), [requestedTarget]);
     const isTargetControlled = typeof onOpenTarget === 'function';
     const activeTarget = isTargetControlled ? requestedTarget : uncontrolledTarget;
-    const activeTaskReferenceLabel = useMemo(() => {
-        const taskId = String(activeTarget?.taskId || '').trim();
+    const activeViewportContextKey = useMemo(() => {
+        const targetKey = getAnnotatedTargetKey(activeTarget);
+        return targetKey ? `${targetKey}::${selectedSessionId || ''}` : '';
+    }, [activeTarget, selectedSessionId]);
+    const restoredViewport = activeViewportContextKey ? viewportByContextKey?.[activeViewportContextKey] ?? null : null;
+    const selectedSessionTaskReferenceLabel = useMemo(() => {
+        const taskId = String(selectedSession?.taskId || '').trim();
         if (!taskId)
             return '';
         const resolvedLabel = resolveTaskReferenceLabel?.(taskId).trim() || '';
         if (resolvedLabel)
             return resolvedLabel;
-        const explicitLabel = String(activeTarget?.taskReferenceLabel || '').trim();
-        if (explicitLabel && explicitLabel !== taskId)
-            return explicitLabel;
-        return resolvedLabel || taskId;
-    }, [activeTarget?.taskId, activeTarget?.taskReferenceLabel, resolveTaskReferenceLabel]);
+        const targetTaskId = String(activeTarget?.taskId || '').trim();
+        const targetLabel = String(activeTarget?.taskReferenceLabel || '').trim();
+        return taskId === targetTaskId && targetLabel && targetLabel !== taskId ? targetLabel : taskId;
+    }, [activeTarget?.taskId, activeTarget?.taskReferenceLabel, resolveTaskReferenceLabel, selectedSession?.taskId]);
+    const filteredLinkableTasks = useMemo(() => {
+        const query = taskLinkSearch.trim().toLowerCase();
+        if (!query)
+            return linkableTasks;
+        return linkableTasks.filter((task) => [task.title, task.referenceLabel, task.id].filter(Boolean).join(' ').toLowerCase().includes(query));
+    }, [linkableTasks, taskLinkSearch]);
     const activeImageReferenceLabel = useMemo(() => {
         const assetId = String(activeTarget?.assetId || '').trim();
         if (!assetId)
@@ -508,7 +546,6 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
             return resolvedLabel;
         return String(activeTarget?.imageReferenceLabel || '').trim();
     }, [activeTarget?.assetId, activeTarget?.imageReferenceLabel, resolveImageReferenceLabel]);
-    const selectedAnnotationIndex = useMemo(() => draftAnnotations.findIndex((annotation) => annotation.id === selectedAnnotationId), [draftAnnotations, selectedAnnotationId]);
     const selectedMarkerColor = selectedAnnotation?.color || defaultMarkerColor;
     const currentDraftPayload = useMemo(() => normalizeDraftPayload({
         title: draftTitle,
@@ -529,19 +566,21 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
     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]);
+        let base = imageTrayItems;
+        if (query) {
+            base = imageTrayItems.filter((item) => {
+                const haystack = [
+                    item.displayName,
+                    item.originalFilename,
+                    item.imageReferenceLabel,
+                    item.taskReferenceLabel,
+                    item.assetId,
+                ].filter(Boolean).join(' ').toLowerCase();
+                return haystack.includes(query);
+            });
+        }
+        return sortTrayItems(base, imageTraySortField, imageTraySortOrder);
+    }, [imageTrayItems, imageTraySearchQuery, imageTraySortField, imageTraySortOrder]);
     const canPan = useMemo(() => {
         const scroller = canvasScrollerRef.current;
         if (!scroller)
@@ -568,13 +607,69 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
             return;
         if (!selectedAnnotationId)
             return;
+        if (isAnnotationEditorCollapsed)
+            return;
         textarea.focus();
         const end = textarea.value.length;
         textarea.setSelectionRange(end, end);
-    }, [selectedAnnotationId]);
+    }, [isAnnotationEditorCollapsed, selectedAnnotationId]);
     useEffect(() => {
         selectedSessionIdRef.current = selectedSessionId;
     }, [selectedSessionId]);
+    useEffect(() => {
+        onViewportChangeRef.current = onViewportChange;
+    }, [onViewportChange]);
+    const flushViewportChange = useCallback(() => {
+        if (viewportReportTimeoutRef.current !== null) {
+            window.clearTimeout(viewportReportTimeoutRef.current);
+            viewportReportTimeoutRef.current = null;
+        }
+        const pendingViewport = pendingViewportRef.current;
+        pendingViewportRef.current = null;
+        if (pendingViewport && activeViewportContextKey) {
+            onViewportChangeRef.current?.(activeViewportContextKey, pendingViewport);
+        }
+    }, [activeViewportContextKey]);
+    const reportViewportChange = useCallback((zoomOverride) => {
+        if (isRestoringViewportRef.current || !activeViewportContextKey)
+            return;
+        const scroller = canvasScrollerRef.current;
+        if (!scroller)
+            return;
+        pendingViewportRef.current = {
+            zoomLevel: zoomOverride ?? zoomLevel,
+            scrollLeft: Math.max(0, Math.round(scroller.scrollLeft)),
+            scrollTop: Math.max(0, Math.round(scroller.scrollTop)),
+        };
+        if (viewportReportTimeoutRef.current !== null)
+            return;
+        viewportReportTimeoutRef.current = window.setTimeout(flushViewportChange, VIEWPORT_REPORT_DELAY_MS);
+    }, [activeViewportContextKey, flushViewportChange, zoomLevel]);
+    const fitCanvasToViewport = useCallback(() => {
+        const scroller = canvasScrollerRef.current;
+        if (!scroller || scroller.clientWidth <= 0 || scroller.clientHeight <= 0 || naturalImageSize.width <= 0 || naturalImageSize.height <= 0)
+            return;
+        const nextZoom = clampZoom(Math.min(scroller.clientWidth / naturalImageSize.width, scroller.clientHeight / naturalImageSize.height));
+        const nextWidth = naturalImageSize.width * nextZoom;
+        const nextHeight = naturalImageSize.height * nextZoom;
+        autoFitCanvasRef.current = true;
+        isRestoringViewportRef.current = true;
+        setZoomLevel(nextZoom);
+        window.requestAnimationFrame(() => {
+            scroller.scrollLeft = Math.max(0, (nextWidth - scroller.clientWidth) / 2);
+            scroller.scrollTop = Math.max(0, (nextHeight - scroller.clientHeight) / 2);
+            reportViewportChange(nextZoom);
+            window.requestAnimationFrame(() => {
+                isRestoringViewportRef.current = false;
+            });
+        });
+    }, [naturalImageSize.height, naturalImageSize.width, reportViewportChange]);
+    useEffect(() => {
+        return () => {
+            reportViewportChange();
+            flushViewportChange();
+        };
+    }, [activeViewportContextKey, flushViewportChange, reportViewportChange]);
     useEffect(() => {
         setSessionCardEditing(false);
     }, [selectedSessionId]);
@@ -641,7 +736,7 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
         setDraftAnnotations(payload.annotations);
         setSelectedAnnotationId((current) => (current && payload.annotations.some((annotation) => annotation.id === current)
             ? current
-            : (payload.annotations[0]?.id || null)));
+            : null));
     }, []);
     const syncDraftFromSession = useCallback((session, target) => {
         const fallbackTitle = buildSessionTitle(target || activeTarget || {
@@ -676,6 +771,7 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
         setDraftGlobalInstruction('');
         setDraftAnnotations([]);
         setSelectedAnnotationId(null);
+        setIsAnnotationEditorCollapsed(false);
         lastSavedSnapshotRef.current = '';
         currentDraftSnapshotRef.current = '';
         inFlightSnapshotRef.current = null;
@@ -926,6 +1022,7 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
                 setDraftGlobalInstruction('');
                 setDraftAnnotations([]);
                 setSelectedAnnotationId(null);
+                setIsAnnotationEditorCollapsed(false);
                 lastSavedSnapshotRef.current = '';
                 currentDraftSnapshotRef.current = '';
                 setLastSaveError(null);
@@ -1152,6 +1249,7 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
                 setDraftGlobalInstruction('');
                 setDraftAnnotations([]);
                 setSelectedAnnotationId(null);
+                setIsAnnotationEditorCollapsed(false);
                 lastSavedSnapshotRef.current = '';
                 currentDraftSnapshotRef.current = '';
                 setLastSaveError(null);
@@ -1241,6 +1339,7 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
         setImageLoadError(false);
         setNaturalImageSize({ width: 0, height: 0 });
         setZoomLevel(1);
+        autoFitCanvasRef.current = true;
         setPanMode(false);
         setSpacePanActive(false);
     }, [activeTarget?.path]);
@@ -1263,6 +1362,55 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
         setPanMode(false);
         setSpacePanActive(false);
     }, [canPan]);
+    useEffect(() => {
+        if (!selectedSessionId || !activeViewportContextKey || imageLoading || imageLoadError)
+            return;
+        if (naturalImageSize.width <= 0 || naturalImageSize.height <= 0)
+            return;
+        if (lastRestoredViewportKeyRef.current === activeViewportContextKey)
+            return;
+        // Mark the context handled even when there is no saved viewport, so the
+        // first self-reported pan of a fresh context is not replayed as a restore.
+        lastRestoredViewportKeyRef.current = activeViewportContextKey;
+        if (!restoredViewport) {
+            fitCanvasToViewport();
+            return;
+        }
+        autoFitCanvasRef.current = false;
+        isRestoringViewportRef.current = true;
+        const nextZoom = clampZoom(restoredViewport.zoomLevel);
+        setZoomLevel(nextZoom);
+        window.requestAnimationFrame(() => {
+            window.requestAnimationFrame(() => {
+                const scroller = canvasScrollerRef.current;
+                if (scroller) {
+                    scroller.scrollLeft = Math.max(0, restoredViewport.scrollLeft);
+                    scroller.scrollTop = Math.max(0, restoredViewport.scrollTop);
+                }
+                isRestoringViewportRef.current = false;
+            });
+        });
+    }, [
+        activeViewportContextKey,
+        imageLoadError,
+        imageLoading,
+        naturalImageSize.height,
+        naturalImageSize.width,
+        fitCanvasToViewport,
+        restoredViewport,
+        selectedSessionId,
+    ]);
+    useEffect(() => {
+        const scroller = canvasScrollerRef.current;
+        if (!scroller || naturalImageSize.width <= 0 || naturalImageSize.height <= 0)
+            return;
+        const observer = new ResizeObserver(() => {
+            if (autoFitCanvasRef.current)
+                fitCanvasToViewport();
+        });
+        observer.observe(scroller);
+        return () => observer.disconnect();
+    }, [fitCanvasToViewport, naturalImageSize.height, naturalImageSize.width]);
     useEffect(() => {
         setPayloadPreview(null);
     }, [selectedSessionId]);
@@ -1545,19 +1693,77 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
         }
     }, [payloadPreview]);
     const copyTaskId = useCallback(async () => {
-        if (!activeTaskReferenceLabel || !navigator.clipboard || typeof navigator.clipboard.writeText !== 'function') {
+        if (!selectedSessionTaskReferenceLabel || !navigator.clipboard || typeof navigator.clipboard.writeText !== 'function') {
             setError('Clipboard copy is not available in this browser.');
             return;
         }
         try {
-            await navigator.clipboard.writeText(activeTaskReferenceLabel);
+            await navigator.clipboard.writeText(selectedSessionTaskReferenceLabel);
             setTaskIdCopied(true);
         }
         catch (copyError) {
             setError(copyError instanceof Error ? copyError.message : 'Failed to copy task id.');
             setTaskIdCopied(false);
         }
-    }, [activeTaskReferenceLabel]);
+    }, [selectedSessionTaskReferenceLabel]);
+    const openTaskLinkModal = useCallback(async () => {
+        if (!selectedSession || taskLinkLoading)
+            return;
+        setTaskLinkModalOpen(true);
+        setTaskLinkSearch('');
+        setTaskLinkLoading(true);
+        setError(null);
+        try {
+            const res = await fetchTaskforceApi(`/api/taskforce/tasks?${workspaceQuery}`, {
+                credentials: 'include',
+                headers: requestHeaders,
+            }, resolvedApiBase);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(String(data?.error || 'Failed to load tasks.'));
+            setLinkableTasks(Array.isArray(data?.tasks) ? data.tasks : []);
+        }
+        catch (requestError) {
+            setError(requestError instanceof Error ? requestError.message : 'Failed to load tasks.');
+        }
+        finally {
+            setTaskLinkLoading(false);
+        }
+    }, [requestHeaders, resolvedApiBase, selectedSession, taskLinkLoading, workspaceQuery]);
+    const updateSessionTaskLink = useCallback(async (taskId) => {
+        const sessionId = selectedSessionIdRef.current;
+        if (!sessionId || taskLinkSaveInFlightRef.current)
+            return;
+        taskLinkSaveInFlightRef.current = true;
+        setTaskLinkSaving(true);
+        try {
+            const saved = await flushPendingDraft('task-link');
+            if (!saved)
+                return;
+            setError(null);
+            const res = await fetchTaskforceApi(`/api/taskforce/annotated-attachments/sessions/${encodeURIComponent(sessionId)}?${workspaceQuery}`, {
+                method: 'PATCH',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json', ...requestHeaders },
+                body: JSON.stringify({ taskId: taskId || '' }),
+            }, resolvedApiBase);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(String(data?.error || 'Failed to update session task.'));
+            const session = data?.session;
+            if (!session?.id)
+                throw new Error('Failed to update session task.');
+            applySessionLocally(session);
+            setTaskLinkModalOpen(false);
+        }
+        catch (requestError) {
+            setError(requestError instanceof Error ? requestError.message : 'Failed to update session task.');
+        }
+        finally {
+            taskLinkSaveInFlightRef.current = false;
+            setTaskLinkSaving(false);
+        }
+    }, [applySessionLocally, flushPendingDraft, requestHeaders, resolvedApiBase, workspaceQuery]);
     const copyImageId = useCallback(async () => {
         if (!activeImageReferenceLabel || !navigator.clipboard || typeof navigator.clipboard.writeText !== 'function') {
             setError('Clipboard copy is not available in this browser.');
@@ -1608,13 +1814,37 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
             return;
         setDraftAnnotations((current) => normalizeOrder(current.filter((annotation) => annotation.id !== selectedAnnotationId)));
         setSelectedAnnotationId(null);
+        setIsAnnotationEditorCollapsed(false);
         markDraftChanged(300);
     }, [markDraftChanged, selectedAnnotationId]);
+    const confirmDeleteSelectedAnnotation = useCallback(() => {
+        if (!selectedAnnotationId)
+            return;
+        if (!window.confirm('Delete this marker? This cannot be undone.'))
+            return;
+        deleteSelectedAnnotation();
+    }, [deleteSelectedAnnotation, selectedAnnotationId]);
+    const selectAnnotation = useCallback((annotationId) => {
+        setSelectedAnnotationId(annotationId);
+        setIsAnnotationEditorCollapsed(false);
+        window.requestAnimationFrame(() => {
+            annotationCardRefs.current.get(annotationId)?.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' });
+        });
+    }, []);
+    const toggleAnnotation = useCallback((annotationId) => {
+        if (selectedAnnotationId === annotationId && !isAnnotationEditorCollapsed) {
+            setIsAnnotationEditorCollapsed(true);
+            return;
+        }
+        selectAnnotation(annotationId);
+    }, [isAnnotationEditorCollapsed, selectAnnotation, selectedAnnotationId]);
     const applyZoom = useCallback((nextZoomValue) => {
+        autoFitCanvasRef.current = false;
         const nextZoom = clampZoom(nextZoomValue);
         const scroller = canvasScrollerRef.current;
         if (!scroller || nextZoom === zoomLevel) {
             setZoomLevel(nextZoom);
+            window.requestAnimationFrame(() => reportViewportChange(nextZoom));
             return;
         }
         const nextScrollLeft = ((scroller.scrollLeft + scroller.clientWidth / 2) * (nextZoom / zoomLevel)) - scroller.clientWidth / 2;
@@ -1623,8 +1853,9 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
         window.requestAnimationFrame(() => {
             scroller.scrollLeft = Math.max(0, nextScrollLeft);
             scroller.scrollTop = Math.max(0, nextScrollTop);
+            reportViewportChange(nextZoom);
         });
-    }, [zoomLevel]);
+    }, [reportViewportChange, zoomLevel]);
     const zoomIn = useCallback(() => {
         applyZoom(zoomLevel + 0.25);
     }, [applyZoom, zoomLevel]);
@@ -1639,36 +1870,46 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
         window.requestAnimationFrame(() => {
             scroller.scrollLeft = 0;
             scroller.scrollTop = 0;
+            reportViewportChange(1);
         });
-    }, [applyZoom]);
-    const moveSelectedAnnotation = useCallback((direction) => {
-        if (!selectedAnnotationId)
+    }, [applyZoom, reportViewportChange]);
+    const moveAnnotationTo = useCallback((annotationId, targetAnnotationId) => {
+        if (annotationId === targetAnnotationId)
             return;
         setDraftAnnotations((current) => {
-            const fromIndex = current.findIndex((annotation) => annotation.id === selectedAnnotationId);
-            if (fromIndex === -1)
-                return current;
-            const toIndex = direction === 'up' ? fromIndex - 1 : fromIndex + 1;
-            if (toIndex < 0 || toIndex >= current.length)
+            const fromIndex = current.findIndex((annotation) => annotation.id === annotationId);
+            const targetIndex = current.findIndex((annotation) => annotation.id === targetAnnotationId);
+            if (fromIndex === -1 || targetIndex === -1)
                 return current;
             markDraftChanged(300);
-            return moveAnnotation(current, fromIndex, toIndex);
+            return moveAnnotation(current, fromIndex, targetIndex);
         });
-    }, [markDraftChanged, selectedAnnotationId]);
+    }, [markDraftChanged]);
+    const handleAnnotationDragStart = useCallback((event) => {
+        setActiveAnnotationId(String(event.active.id));
+    }, []);
+    const handleAnnotationDragEnd = useCallback((event) => {
+        const activeId = String(event.active.id);
+        const overId = event.over ? String(event.over.id) : null;
+        if (overId && activeId !== overId) {
+            moveAnnotationTo(activeId, overId);
+        }
+        setActiveAnnotationId(null);
+    }, [moveAnnotationTo]);
     useEffect(() => {
         if (!selectedAnnotationId)
             return;
         const handleKeyDown = (event) => {
-            if (event.key !== 'Delete')
+            if (event.key !== 'Delete' && event.key !== 'Backspace')
                 return;
             if (isEditableKeyboardTarget(event.target))
                 return;
             event.preventDefault();
-            deleteSelectedAnnotation();
+            confirmDeleteSelectedAnnotation();
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [deleteSelectedAnnotation, selectedAnnotationId]);
+    }, [confirmDeleteSelectedAnnotation, selectedAnnotationId]);
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (event.code !== 'Space')
@@ -1726,6 +1967,7 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
             return;
         if (toolMode === 'select') {
             setSelectedAnnotationId(null);
+            setIsAnnotationEditorCollapsed(false);
             return;
         }
         const point = readPoint(event);
@@ -1735,6 +1977,7 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
             const annotation = createAnnotation(toolMode, point, point, defaultMarkerColor);
             setDraftAnnotations((current) => normalizeOrder([...current, annotation]));
             setSelectedAnnotationId(annotation.id);
+            setIsAnnotationEditorCollapsed(false);
             markDraftChanged(300);
             setToolMode('select');
             return;
@@ -1748,6 +1991,7 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
         event.currentTarget.setPointerCapture?.(event.pointerId);
         setDraftAnnotations((current) => normalizeOrder([...current, annotation]));
         setSelectedAnnotationId(annotation.id);
+        setIsAnnotationEditorCollapsed(false);
         markDraftChanged(300);
     }, [defaultMarkerColor, isPanActive, markDraftChanged, readPoint, selectedSessionId, toolMode]);
     const handleCanvasPointerUp = useCallback((event) => {
@@ -1922,7 +2166,6 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
             originPointer: point,
             originAnnotation: annotation,
         };
-        setSelectedAnnotationId(annotation.id);
         event.stopPropagation();
     }, [isPanActive, readPoint, toolMode]);
     const startArrowHandleDrag = useCallback((event, annotation, endpoint) => {
@@ -1937,11 +2180,10 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
             originAnnotation: annotation,
             endpoint,
         };
-        setSelectedAnnotationId(annotation.id);
         event.stopPropagation();
     }, [isPanActive, readPoint, toolMode]);
     const activeSessionTimestamp = selectedSession?.updatedAt ? formatTimestamp(selectedSession.updatedAt) : 'Not saved yet';
-    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) => {
+    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: styles.imageTraySortControlRow, children: _jsx(AssetTraySortControl, { field: imageTraySortField, order: imageTraySortOrder, onFieldChange: setImageTraySortField, onOrderChange: setImageTraySortOrder }) }), _jsx("div", { className: `tf-scrollbar tf-tray-scroll-viewport ${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)
@@ -1956,14 +2198,14 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
                                     : '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: () => {
+                        }) })] })) : null, _jsxs("section", { className: `tf-surface-panel ${styles.panel} ${styles.sessionPanel}`, children: [_jsx("div", { className: styles.sessionContextBar, children: selectedSession?.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;
-                                                if (activeTarget.taskId)
-                                                    onBackToTask(activeTarget.taskId);
+                                                if (selectedSession.taskId)
+                                                    onBackToTask(selectedSession.taskId);
                                             });
-                                        }, "aria-label": "Back to task", title: "Back to task", children: _jsx(ArrowLeft, { size: 16 }) })) : _jsx("div", { className: styles.sessionContextSpacer, "aria-hidden": "true" }) }), _jsx("div", { className: styles.sessionContextRight, children: _jsx(TaskReferenceBadge, { copied: taskIdCopied, onClick: () => { void copyTaskId(); }, title: "Copy task id", ariaLabel: taskIdCopied ? 'Copied task id' : 'Copy task id', label: activeTaskReferenceLabel }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.sessionContextLeft, children: _jsx("span", { className: `tf-label-micro ${styles.sessionContextLabel}`, children: "Unattached Image" }) }), _jsx("div", { className: styles.sessionContextRight, children: _jsx("div", { className: styles.sessionContextSpacer, "aria-hidden": "true" }) })] })) }), _jsxs("div", { className: styles.panelHeader, children: [_jsxs("div", { className: styles.panelHeaderText, children: [_jsx("div", { className: `tf-heading-card ${styles.panelTitle}`, children: "Sessions" }), !activeTarget ? (_jsx("div", { className: "tf-text-secondary", children: "Open an image attachment to begin" })) : null] }), _jsx("div", { className: styles.sessionActions, children: _jsx("button", { type: "button", className: `tf-control-icon ${styles.iconButton}`, onClick: () => void createSession(), disabled: !activeTarget || saving, "aria-label": "Create session", title: "Create session", children: _jsx(Plus, { size: 16 }) }) })] }), !activeTarget ? (_jsxs("div", { className: styles.emptyState, children: [_jsx("strong", { className: "tf-empty-title", children: "No image selected" }), _jsx("p", { className: "tf-empty-copy", children: "Open an image attachment from a task to start an annotated session." })] })) : loading ? (_jsx("div", { className: styles.emptyState, children: _jsx("p", { className: "tf-empty-copy", children: "Loading sessions\u2026" }) })) : (_jsx("div", { className: `tf-scrollbar ${styles.sessionList}`, children: sessions.length === 0 ? (_jsxs("div", { className: styles.sessionEmptyState, children: [_jsx("div", { className: `tf-heading-card ${styles.sessionTitle}`, children: "No sessions yet" }), _jsx("div", { className: `tf-text-secondary ${styles.annotationSummary}`, children: "Create the first annotation session for this image." })] })) : sessions.map((session) => {
+                                        }, "aria-label": "Back to task", title: "Back to task", children: _jsx(ArrowLeft, { size: 16 }) })) : _jsx("div", { className: styles.sessionContextSpacer, "aria-hidden": "true" }) }), _jsxs("div", { className: styles.sessionContextRight, children: [_jsx(TaskReferenceBadge, { copied: taskIdCopied, onClick: () => { void copyTaskId(); }, title: "Copy task id", ariaLabel: taskIdCopied ? 'Copied task id' : 'Copy task id', label: selectedSessionTaskReferenceLabel }), _jsx("button", { type: "button", className: `tf-control-icon ${styles.iconButton}`, onClick: () => void updateSessionTaskLink(null), disabled: taskLinkSaving, "aria-label": "Unlink session from task", title: "Unlink session from task", children: _jsx(Unlink, { size: 16 }) })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.sessionContextLeft, children: _jsx("span", { className: `tf-label-micro ${styles.sessionContextLabel}`, children: "Unattached session" }) }), _jsx("div", { className: styles.sessionContextRight, children: _jsx("div", { className: styles.sessionContextSpacer, "aria-hidden": "true" }) })] })) }), _jsxs("div", { className: styles.panelHeader, children: [_jsxs("div", { className: styles.panelHeaderText, children: [_jsx("div", { className: `tf-heading-card ${styles.panelTitle}`, children: "Sessions" }), !activeTarget ? (_jsx("div", { className: "tf-text-secondary", children: "Open an image attachment to begin" })) : null] }), _jsxs("div", { className: styles.sessionActions, children: [_jsx("button", { type: "button", className: `tf-control-icon ${styles.iconButton}`, onClick: () => void openTaskLinkModal(), disabled: !selectedSession || taskLinkLoading || taskLinkSaving, "aria-label": selectedSession?.taskId ? 'Change linked task' : 'Link session to task', title: selectedSession?.taskId ? 'Change linked task' : 'Link session to task', children: _jsx(Link2, { size: 16 }) }), _jsx("button", { type: "button", className: `tf-control-icon ${styles.iconButton}`, onClick: () => void createSession(), disabled: !activeTarget || saving, "aria-label": "Create session", title: "Create session", children: _jsx(Plus, { size: 16 }) })] })] }), !activeTarget ? (_jsxs("div", { className: styles.emptyState, children: [_jsx("strong", { className: "tf-empty-title", children: "No image selected" }), _jsx("p", { className: "tf-empty-copy", children: "Open an image attachment from a task to start an annotated session." })] })) : loading ? (_jsx("div", { className: styles.emptyState, children: _jsx("p", { className: "tf-empty-copy", children: "Loading sessions\u2026" }) })) : (_jsx("div", { className: `tf-scrollbar ${styles.sessionList}`, children: sessions.length === 0 ? (_jsxs("div", { className: styles.sessionEmptyState, children: [_jsx("div", { className: `tf-heading-card ${styles.sessionTitle}`, children: "No sessions yet" }), _jsx("div", { className: `tf-text-secondary ${styles.annotationSummary}`, children: "Create the first annotation session for this image." })] })) : sessions.map((session) => {
                             const isSelected = selectedSessionId === session.id;
                             const isEditingSelectedSession = isSelected && sessionCardEditing;
                             const preview = sessionInstructionPreview(isSelected ? draftGlobalInstruction : session.globalInstruction);
@@ -1993,19 +2235,18 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
                                                 syncDraftFromSession(session, activeTarget);
                                             });
                                         }, "aria-pressed": isSelected, children: [_jsxs("div", { className: styles.sessionMeta, children: [_jsx("span", { className: `tf-heading-card ${styles.sessionTitle}`, children: sessionTitle }), _jsx("span", { className: `tf-text-meta ${styles.sessionTimestamp}`, children: formatTimestamp(session.updatedAt) })] }), getSessionCreatorLabel(session) ? (_jsxs("div", { className: `tf-text-secondary ${styles.sessionCreator}`, children: ["Created by ", getSessionCreatorLabel(session)] })) : null, preview ? (_jsx("div", { className: `tf-text-secondary ${styles.sessionInstructionPreview}`, children: preview })) : null, _jsxs("div", { className: `tf-text-secondary ${styles.annotationSummary}`, children: [session.annotations.length, " annotation", session.annotations.length === 1 ? '' : 's'] })] })), isSelected ? (_jsx("div", { className: styles.sessionCardFooter, children: _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: `tf-button-ghost ${styles.toolRailButton} ${styles.iconButton}`, onClick: () => void duplicateSelectedSession(), disabled: saving, "aria-label": "Duplicate session", title: `Duplicate session "${sessionTitle}"`, children: _jsx(Copy, { size: 16 }) }), _jsx("button", { type: "button", className: `tf-button-ghost ${styles.toolRailButton} ${styles.iconButton}`, onClick: () => void deleteSelectedSession(), disabled: saving, "aria-label": "Delete session", title: `Delete session "${sessionTitle}"`, children: _jsx(Trash2, { size: 16 }) })] }) })) : null] }, session.id));
-                        }) }))] }), _jsxs("section", { className: `tf-surface-panel ${styles.panel} ${styles.canvasPanel}`, children: [_jsxs("div", { className: styles.panelHeader, children: [_jsxs("div", { className: styles.canvasHeading, children: [_jsx("div", { className: "tf-heading-card", children: activeTarget?.displayName || 'Annotated attachment' }), _jsx("div", { className: "tf-text-secondary", children: selectedSession ? `${draftAnnotations.length} markers · ${activeSessionTimestamp}` : 'Pick or create a session' })] }), activeImageReferenceLabel ? (_jsx(ImageReferenceBadge, { copied: imageIdCopied, onClick: () => { void copyImageId(); }, title: "Copy image reference", ariaLabel: imageIdCopied ? 'Copied image reference' : 'Copy image reference', label: activeImageReferenceLabel })) : null] }), _jsxs("div", { className: styles.toolRail, children: [_jsxs("div", { className: `${styles.toolbarCluster} ${styles.toolbarViewportCluster}`, children: [_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: () => void saveSession(), disabled: !selectedSession || saving || (!hasUnsavedChanges && saveState !== 'error'), "aria-label": saving ? 'Saving session' : 'Save session', title: saving ? 'Saving session' : 'Save session', children: _jsx(Save, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: () => setOpenImageModalOpen(true), disabled: openingImage, "aria-label": "Open image", title: "Open image", children: _jsx(FolderOpen, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: () => void pasteImageFromClipboard(), disabled: pastingImage, "aria-label": pastingImage ? 'Pasting image' : 'Paste image', title: pastingImage ? 'Pasting image' : 'Paste image', children: pastingImage ? _jsx(Loader2, { size: 18, className: sharedStyles.spin }) : _jsx(ClipboardPaste, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: () => {
+                        }) }))] }), _jsxs("section", { className: `tf-surface-panel ${styles.panel} ${styles.canvasPanel}`, children: [_jsxs("div", { className: styles.panelHeader, children: [_jsxs("div", { className: styles.canvasHeading, children: [_jsx("div", { className: "tf-heading-card", children: activeTarget?.displayName || 'Annotated attachment' }), _jsx("div", { className: "tf-text-secondary", children: selectedSession ? `${draftAnnotations.length} markers · ${activeSessionTimestamp}` : 'Pick or create a session' })] }), activeImageReferenceLabel ? (_jsx(ImageReferenceBadge, { copied: imageIdCopied, onClick: () => { void copyImageId(); }, title: activeTarget?.displayName || 'Annotated attachment', ariaLabel: imageIdCopied ? 'Copied image reference' : 'Copy image reference', label: activeImageReferenceLabel })) : null] }), _jsxs("div", { className: styles.toolRail, children: [_jsxs("div", { className: `${styles.toolbarCluster} ${styles.toolbarViewportCluster}`, children: [_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: () => void saveSession(), disabled: !selectedSession || saving || (!hasUnsavedChanges && saveState !== 'error'), "aria-label": saving ? 'Saving session' : 'Save session', title: saving ? 'Saving session' : 'Save session', children: _jsx(Save, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: () => setOpenImageModalOpen(true), disabled: openingImage, "aria-label": "Open image", title: "Open image", children: _jsx(FolderOpen, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: () => void pasteImageFromClipboard(), disabled: pastingImage, "aria-label": pastingImage ? 'Pasting image' : 'Paste image', title: pastingImage ? 'Pasting image' : 'Paste image', children: pastingImage ? _jsx(Loader2, { size: 18, className: sharedStyles.spin }) : _jsx(ClipboardPaste, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: () => {
                                             if (!selectedSession)
                                                 return;
                                             restoreLastSavedDraft();
-                                        }, disabled: !selectedSession || !hasUnsavedChanges, "aria-label": "Reset unsaved changes", title: "Reset unsaved changes", children: _jsx(RotateCcw, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost ${styles.toolRailButton} ${styles.iconButton}`, onClick: zoomOut, disabled: !activeTarget || imageLoading || zoomLevel <= 0.25, "aria-label": "Zoom out", children: _jsx(ZoomOut, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: resetZoom, disabled: !activeTarget || imageLoading || zoomLevel === 1, "aria-label": `Reset zoom to 100 percent (currently ${zoomLabel})`, title: `Reset zoom to 100% (currently ${zoomLabel})`, children: _jsx("span", { children: zoomLabel }) }), _jsx("button", { type: "button", className: `tf-button-ghost ${styles.toolRailButton} ${styles.iconButton}`, onClick: zoomIn, disabled: !activeTarget || imageLoading || zoomLevel >= 4, "aria-label": "Zoom in", children: _jsx(ZoomIn, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.toolBtn} ${styles.toolbarButton} ${isPanActive ? styles.toolBtnActive : ''}`, onClick: () => setPanMode((current) => !current), disabled: !activeTarget || imageLoading || !canPan, "aria-label": "Pan canvas", title: "Pan canvas", children: _jsx(Hand, { size: 18 }) })] }), _jsx("span", { className: styles.toolbarSeparator, "aria-hidden": "true" }), _jsxs("div", { className: styles.toolbarActions, children: [_jsx("div", { className: styles.toolbarSelectionActions, children: selectedAnnotation ? (_jsxs(_Fragment, { children: [_jsxs("div", { ref: colorPickerRef, className: styles.toolbarColorPicker, children: [_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton} ${styles.colorPickerButton}`, onClick: () => setColorPickerOpen((current) => !current), "aria-label": "Marker color", "aria-expanded": colorPickerOpen, title: "Marker color", children: _jsx("span", { className: styles.colorPickerSwatch, style: { backgroundColor: selectedMarkerColor }, "aria-hidden": "true" }) }), colorPickerOpen ? (_jsx("div", { className: styles.colorPickerPopover, role: "menu", "aria-label": "Marker color options", children: MARKER_COLOR_SWATCHES.map((color) => (_jsx("button", { type: "button", className: `${styles.colorOption} ${selectedMarkerColor === color ? styles.colorOptionActive : ''}`, style: { backgroundColor: color }, onClick: () => applyMarkerColor(color), "aria-label": `Use marker color ${color}`, "aria-pressed": selectedMarkerColor === color }, color))) })) : null] }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: deleteSelectedAnnotation, "aria-label": "Delete marker", title: "Delete selected marker", children: _jsx(Trash2, { size: 18 }) }), _jsx("div", { className: styles.toolbarGeometryFields, "aria-label": "Marker geometry percent controls", children: getGeometryFields(selectedAnnotation).map((field) => (_jsxs("label", { className: styles.toolbarGeometryField, children: [_jsx("span", { className: `tf-text-meta ${styles.toolbarGeometryLabel}`, children: field.label }), _jsx("input", { className: `tf-field-shell ${styles.toolbarGeometryInput}`, type: "number", min: 0, max: 100, step: 0.1, value: field.value, onChange: (event) => {
-                                                                    const nextValue = parsePercentField(event.target.value);
-                                                                    if (nextValue === null)
-                                                                        return;
-                                                                    updateDraftAnnotation(selectedAnnotation.id, (annotation) => (updateAnnotationGeometryField(annotation, field.key, nextValue)));
-                                                                }, "aria-label": `${field.label} percent` })] }, field.key))) })] })) : null }), _jsxs("div", { className: styles.toolbarUtilities, children: [_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.payloadBtn} ${styles.toolbarButton}`, onClick: openPayloadPreview, disabled: !selectedSession || payloadLoading, "aria-label": payloadLoading ? 'Loading payload preview' : 'Preview payload', title: payloadLoading ? 'Loading payload preview' : 'Preview payload', children: _jsx(MessageSquareCode, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: () => setToolHelpModalOpen(true), "aria-label": "How to use marker tools", title: "How to use marker tools", children: _jsx(HelpCircle, { size: 18 }) })] })] })] }), _jsxs("div", { className: styles.canvasWorkspace, children: [_jsx("div", { className: styles.canvasToolRail, "aria-label": "Annotation tools", children: TOOL_OPTIONS.map((tool) => {
+                                        }, disabled: !selectedSession || !hasUnsavedChanges, "aria-label": "Reset unsaved changes", title: "Reset unsaved changes", children: _jsx(RotateCcw, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: fitCanvasToViewport, disabled: !activeTarget || imageLoading || naturalImageSize.width <= 0 || naturalImageSize.height <= 0, "aria-label": "Fit image to viewport", title: "Fit image to viewport", children: _jsx(Maximize, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost ${styles.toolRailButton} ${styles.iconButton}`, onClick: zoomOut, disabled: !activeTarget || imageLoading || zoomLevel <= 0.25, "aria-label": "Zoom out", children: _jsx(ZoomOut, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: resetZoom, disabled: !activeTarget || imageLoading || zoomLevel === 1, "aria-label": `Reset zoom to 100 percent (currently ${zoomLabel})`, title: `Reset zoom to 100% (currently ${zoomLabel})`, children: _jsx("span", { children: zoomLabel }) }), _jsx("button", { type: "button", className: `tf-button-ghost ${styles.toolRailButton} ${styles.iconButton}`, onClick: zoomIn, disabled: !activeTarget || imageLoading || zoomLevel >= 4, "aria-label": "Zoom in", children: _jsx(ZoomIn, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.toolBtn} ${styles.toolbarButton} ${isPanActive ? styles.toolBtnActive : ''}`, onClick: () => setPanMode((current) => !current), disabled: !activeTarget || imageLoading || !canPan, "aria-label": "Pan canvas", title: "Pan canvas", children: _jsx(Hand, { size: 18 }) })] }), _jsx("span", { className: styles.toolbarSeparator, "aria-hidden": "true" }), _jsxs("div", { className: styles.toolbarActions, children: [_jsx("div", { className: styles.toolbarSelectionActions, children: selectedAnnotation ? (_jsxs(_Fragment, { children: [_jsxs("div", { ref: colorPickerRef, className: styles.toolbarColorPicker, children: [_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton} ${styles.colorPickerButton}`, onClick: () => setColorPickerOpen((current) => !current), "aria-label": "Marker color", "aria-expanded": colorPickerOpen, title: "Marker color", children: _jsx("span", { className: styles.colorPickerSwatch, style: { backgroundColor: selectedMarkerColor }, "aria-hidden": "true" }) }), colorPickerOpen ? (_jsx("div", { className: styles.colorPickerPopover, role: "menu", "aria-label": "Marker color options", children: MARKER_COLOR_SWATCHES.map((color) => (_jsx("button", { type: "button", className: `${styles.colorOption} ${selectedMarkerColor === color ? styles.colorOptionActive : ''}`, style: { backgroundColor: color }, onClick: () => applyMarkerColor(color), "aria-label": `Use marker color ${color}`, "aria-pressed": selectedMarkerColor === color }, color))) })) : null] }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: confirmDeleteSelectedAnnotation, "aria-label": "Delete marker", title: "Delete selected marker", children: _jsx(Trash2, { size: 18 }) })] })) : null }), _jsxs("div", { className: styles.toolbarUtilities, children: [_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.payloadBtn} ${styles.toolbarButton}`, onClick: openPayloadPreview, disabled: !selectedSession || payloadLoading, "aria-label": payloadLoading ? 'Loading payload preview' : 'Preview payload', title: payloadLoading ? 'Loading payload preview' : 'Preview payload', children: _jsx(MessageSquareCode, { size: 18 }) }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: () => setToolHelpModalOpen(true), "aria-label": "How to use marker tools", title: "How to use marker tools", children: _jsx(HelpCircle, { size: 18 }) })] })] })] }), _jsxs("div", { className: styles.canvasWorkspace, children: [_jsx("div", { className: styles.canvasToolRail, "aria-label": "Annotation tools", children: TOOL_OPTIONS.map((tool) => {
                                     const Icon = tool.icon;
                                     return (_jsx("button", { type: "button", className: `tf-button-ghost ${styles.toolRailButton} ${toolMode === tool.value ? styles.toolBtnActive : ''}`, onClick: () => handleToolSelection(tool.value), disabled: !activeTarget, title: tool.label, "aria-label": `${tool.label} tool. ${TOOL_HELP_COPY[tool.value].short}`, children: _jsx(Icon, { size: 18 }) }, tool.value));
-                                }) }), _jsx("div", { className: styles.canvasMain, children: _jsx("div", { ref: canvasScrollerRef, className: `tf-scrollbar ${styles.canvasScroller}`, children: !activeTarget ? (_jsx("div", { className: styles.emptyState, children: _jsx("p", { className: "tf-empty-copy", children: "Select an image attachment to annotate." }) })) : (_jsxs(_Fragment, { children: [imageLoading && !imageLoadError ? (_jsx("div", { className: styles.canvasStatusOverlay, "aria-live": "polite", children: _jsxs("div", { className: styles.canvasStatusCard, children: [_jsx(Loader2, { size: 20, className: sharedStyles.spinner }), _jsx("span", { children: "Loading image\u2026" })] }) })) : null, imageLoadError ? (_jsx("div", { className: styles.canvasStatusOverlay, "aria-live": "polite", children: _jsx("div", { className: styles.canvasStatusCard, children: _jsx("span", { children: "Image failed to load." }) }) })) : null, _jsx("div", { className: styles.canvasFrame, children: _jsxs("div", { className: styles.canvasMedia, style: {
+                                }) }), _jsx("div", { className: styles.canvasMain, children: _jsx("div", { ref: canvasScrollerRef, className: `tf-scrollbar ${styles.canvasScroller}`, onScroll: () => {
+                                        if (!isRestoringViewportRef.current)
+                                            autoFitCanvasRef.current = false;
+                                        reportViewportChange();
+                                    }, children: !activeTarget ? (_jsx("div", { className: styles.emptyState, children: _jsx("p", { className: "tf-empty-copy", children: "Select an image attachment to annotate." }) })) : (_jsxs(_Fragment, { children: [imageLoading && !imageLoadError ? (_jsx("div", { className: styles.canvasStatusOverlay, "aria-live": "polite", children: _jsxs("div", { className: styles.canvasStatusCard, children: [_jsx(Loader2, { size: 20, className: sharedStyles.spinner }), _jsx("span", { children: "Loading image\u2026" })] }) })) : null, imageLoadError ? (_jsx("div", { className: styles.canvasStatusOverlay, "aria-live": "polite", children: _jsx("div", { className: styles.canvasStatusCard, children: _jsx("span", { children: "Image failed to load." }) }) })) : null, _jsx("div", { className: styles.canvasFrame, children: _jsxs("div", { className: styles.canvasMedia, style: {
                                                         width: canvasMediaSize.width ? `${canvasMediaSize.width}px` : undefined,
                                                         height: canvasMediaSize.height ? `${canvasMediaSize.height}px` : undefined,
                                                     }, children: [_jsx("img", { ref: imageRef, src: activeTarget.path, alt: activeTarget.displayName, className: styles.canvasImage, onLoad: () => {
@@ -2030,7 +2271,7 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
                                                                         return (_jsxs(React.Fragment, { children: [isSelected ? (_jsxs(_Fragment, { children: [_jsx("line", { x1: geometry.shaftX1, y1: geometry.shaftY1, x2: geometry.shaftX2, y2: geometry.shaftY2, stroke: "color-mix(in srgb, var(--surface-elevated) 92%, transparent)", strokeWidth: 14, strokeLinecap: "round" }), _jsx("polygon", { points: geometry.headPoints, fill: color, stroke: "color-mix(in srgb, var(--surface-elevated) 92%, transparent)", strokeWidth: 4, strokeLinejoin: "round" })] })) : null, _jsx("line", { x1: geometry.shaftX1, y1: geometry.shaftY1, x2: geometry.shaftX2, y2: geometry.shaftY2, stroke: color, strokeWidth: isSelected ? 10 : 6, strokeLinecap: "round" }), _jsx("polygon", { points: geometry.headPoints, fill: color })] }, annotation.id));
                                                                     }) }), _jsx("svg", { className: styles.overlayHitLayer, viewBox: arrowOverlayViewBox, preserveAspectRatio: "none", children: draftAnnotations.filter((annotation) => annotation.kind === 'arrow').map((annotation) => (_jsxs(React.Fragment, { children: [_jsx("line", { x1: annotation.x * canvasMediaSize.width, y1: annotation.y * canvasMediaSize.height, x2: annotation.x2 * canvasMediaSize.width, y2: annotation.y2 * canvasMediaSize.height, className: styles.arrowHitArea, "data-testid": `annotated-arrow-hit-${annotation.id}`, "aria-label": `Arrow marker ${annotationOrderNumbers.get(annotation.id) || 0}`, onPointerDown: (event) => startDragAnnotation(event, annotation), onClick: (event) => {
                                                                                     event.stopPropagation();
-                                                                                    setSelectedAnnotationId(annotation.id);
+                                                                                    selectAnnotation(annotation.id);
                                                                                 } }), selectedAnnotationId === annotation.id ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: annotation.x * canvasMediaSize.width, cy: annotation.y * canvasMediaSize.height, r: arrowHandleGeometry.hitRadius, className: styles.canvasHandleHit, role: "button", tabIndex: 0, "aria-label": "Move arrow tail", onPointerDown: (event) => startArrowHandleDrag(event, annotation, 'tail') }), _jsx("circle", { cx: annotation.x * canvasMediaSize.width, cy: annotation.y * canvasMediaSize.height, r: arrowHandleGeometry.visibleRadius, className: styles.canvasHandleVisible, "aria-hidden": "true" }), _jsx("circle", { cx: annotation.x2 * canvasMediaSize.width, cy: annotation.y2 * canvasMediaSize.height, r: arrowHandleGeometry.hitRadius, className: styles.canvasHandleHit, role: "button", tabIndex: 0, "aria-label": "Move arrow tip", onPointerDown: (event) => startArrowHandleDrag(event, annotation, 'tip') }), _jsx("circle", { cx: annotation.x2 * canvasMediaSize.width, cy: annotation.y2 * canvasMediaSize.height, r: arrowHandleGeometry.visibleRadius, className: styles.canvasHandleVisible, "aria-hidden": "true" })] })) : null] }, `hit-${annotation.id}`))) }), draftAnnotations.filter((annotation) => annotation.kind === 'arrow').map((annotation) => (_jsx("div", { className: `${styles.annotationNumberBadge} ${styles.arrowNumberBadge}`, style: {
                                                                         left: `${((annotation.x + annotation.x2) / 2) * 100}%`,
                                                                         top: `${((annotation.y + annotation.y2) / 2) * 100}%`,
@@ -2042,7 +2283,7 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
                                                                         onPointerDown: (event) => startDragAnnotation(event, annotation),
                                                                         onClick: (event) => {
                                                                             event.stopPropagation();
-                                                                            setSelectedAnnotationId(annotation.id);
+                                                                            selectAnnotation(annotation.id);
                                                                         },
                                                                     };
                                                                     if (annotation.kind === 'pin') {
@@ -2062,24 +2303,48 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
                                     ? 'Save failed. Retry now.'
                                     : saveState === 'saving' || saveState === 'pending'
                                         ? 'Saving…'
-                                        : 'Saved' }), error ? _jsx("span", { children: error }) : _jsx("span", { children: !selectedSession ? 'Create a session to begin placing markers on this image.' : isPanActive ? 'Drag on the image to pan.' : toolMode === 'select' ? 'Select a marker to edit it.' : `Click on the image to place a ${toolMode}.` }), activeTarget && !selectedSession && showCreateSessionPrompt ? (_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: () => void createSession(), disabled: saving || loading, children: saving ? 'Creating…' : 'Create one now' })) : null] })] }), _jsx("section", { className: `tf-surface-panel ${styles.panel} ${styles.detailPanel}`, children: selectedSession ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.panelHeader, children: [_jsxs("div", { className: styles.panelHeaderText, children: [_jsx("div", { className: `tf-heading-card ${styles.panelTitle}`, children: "Markers" }), _jsxs("div", { className: "tf-text-secondary", children: [draftAnnotations.length, " in this session"] })] }), _jsxs("div", { className: styles.sessionActions, children: [_jsx("button", { type: "button", className: `tf-control-icon ${styles.iconButton}`, onClick: () => moveSelectedAnnotation('up'), disabled: !selectedAnnotation || selectedAnnotationIndex <= 0, "aria-label": "Move marker up", children: _jsx(ArrowUp, { size: 16 }) }), _jsx("button", { type: "button", className: `tf-control-icon ${styles.iconButton}`, onClick: () => moveSelectedAnnotation('down'), disabled: !selectedAnnotation || selectedAnnotationIndex === -1 || selectedAnnotationIndex >= draftAnnotations.length - 1, "aria-label": "Move marker down", children: _jsx(ArrowDown, { size: 16 }) })] })] }), _jsx("div", { className: `tf-scrollbar ${styles.annotationList}`, children: draftAnnotations.length === 0 ? (_jsx("div", { className: styles.detailEmpty, children: _jsx("p", { className: "tf-empty-copy", children: "Add a marker on the image to begin." }) })) : draftAnnotations.map((annotation, index) => {
-                                const AnnotationKindIcon = ANNOTATION_KIND_ICON[annotation.kind];
-                                const annotationKindLabel = ANNOTATION_KIND_LABELS[annotation.kind];
-                                const annotationSequenceLabel = `${annotationKindLabel} ${index + 1}`;
-                                const InstructionTypeIcon = MARKER_TYPE_ICON[annotation.markerType || DEFAULT_MARKER_TYPE];
-                                const instructionTypeLabel = MARKER_TYPE_OPTIONS.find((option) => option.value === (annotation.markerType || DEFAULT_MARKER_TYPE))?.label || 'Review';
-                                const isSelected = selectedAnnotationId === annotation.id;
-                                return (_jsxs("div", { className: `tf-surface-elevated ${styles.annotationCard} ${isSelected ? styles.annotationCardActive : ''}`, children: [_jsx("button", { type: "button", className: styles.annotationCardButton, onClick: () => setSelectedAnnotationId(annotation.id), "aria-label": annotationKindLabel, children: _jsxs("div", { className: styles.annotationMeta, children: [_jsx("span", { className: `tf-heading-card ${styles.annotationTitle}`, children: annotationSequenceLabel }), _jsx("span", { className: `tf-text-meta ${styles.annotationKind}`, "aria-hidden": "true", children: _jsx(AnnotationKindIcon, { size: 16 }) })] }) }), isSelected ? (_jsxs("div", { className: styles.annotationInstructionEditor, children: [_jsx("label", { className: "tf-field-label", htmlFor: "annotated-marker-instruction", children: "Marker instruction" }), _jsx("textarea", { id: "annotated-marker-instruction", ref: isSelected ? selectedInstructionTextareaRef : null, className: `tf-field-shell ${styles.textArea} ${styles.annotationInstructionField}`, value: annotation.instruction, onChange: (event) => {
-                                                        updateDraftAnnotation(annotation.id, (current) => ({
-                                                            ...current,
-                                                            instruction: event.target.value,
-                                                        }), 600);
-                                                    }, onBlur: () => {
-                                                        void flushPendingDraft('text');
-                                                    }, placeholder: "What should the AI focus on for this marker?" }), _jsxs("div", { className: styles.annotationTypeField, children: [_jsx("label", { className: "tf-field-label", htmlFor: "annotated-marker-type", children: "Instruction type" }), _jsx("select", { id: "annotated-marker-type", className: `tf-field-shell ${styles.select}`, value: annotation.markerType || DEFAULT_MARKER_TYPE, onChange: (event) => {
-                                                                updateDraftAnnotation(annotation.id, (current) => updateMarkerType(current, event.target.value));
-                                                            }, children: MARKER_TYPE_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] })] })) : (_jsx("button", { type: "button", className: styles.annotationInstructionButton, onClick: () => setSelectedAnnotationId(annotation.id), "aria-label": `Edit ${annotationKindLabel} instruction`, children: _jsxs("div", { className: styles.annotationInstructionEditor, children: [_jsx("div", { className: `tf-text-secondary ${styles.annotationInstructionPreview}`, children: annotation.instruction.trim() || 'No marker instruction yet.' }), _jsx("div", { className: styles.annotationPreviewFooter, children: _jsx("span", { className: `tf-text-meta ${styles.annotationInstructionTypeIcon}`, "aria-label": `Instruction type: ${instructionTypeLabel}`, title: instructionTypeLabel, children: _jsx(InstructionTypeIcon, { size: 16 }) }) })] }) }))] }, annotation.id));
-                            }) })] })) : (_jsxs("div", { className: styles.emptyState, children: [_jsx("strong", { className: "tf-empty-title", children: "No active session" }), _jsx("p", { className: "tf-empty-copy", children: "Create or select a session to edit annotations." })] })) }), _jsx(Modal, { isOpen: openImageModalOpen, onClose: () => {
+                                        : 'Saved' }), error ? _jsx("span", { children: error }) : _jsx("span", { children: !selectedSession ? 'Create a session to begin placing markers on this image.' : isPanActive ? 'Drag on the image to pan.' : toolMode === 'select' ? 'Select a marker to edit it.' : `Click on the image to place a ${toolMode}.` }), activeTarget && !selectedSession && showCreateSessionPrompt ? (_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.toolbarButton}`, onClick: () => void createSession(), disabled: saving || loading, children: saving ? 'Creating…' : 'Create one now' })) : null] })] }), _jsx("section", { className: `tf-surface-panel ${styles.panel} ${styles.detailPanel}`, children: selectedSession ? (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.panelHeader, children: _jsxs("div", { className: styles.panelHeaderText, children: [_jsx("div", { className: `tf-heading-card ${styles.panelTitle}`, children: "Markers" }), _jsxs("div", { className: "tf-text-secondary", children: [draftAnnotations.length, " in this session"] })] }) }), _jsxs(DndContext, { sensors: annotationSensors, collisionDetection: closestCenter, onDragStart: handleAnnotationDragStart, onDragEnd: handleAnnotationDragEnd, onDragCancel: () => setActiveAnnotationId(null), children: [_jsx("div", { className: `tf-scrollbar ${styles.annotationList}`, children: draftAnnotations.length === 0 ? (_jsx("div", { className: styles.detailEmpty, children: _jsx("p", { className: "tf-empty-copy", children: "Add a marker on the image to begin." }) })) : (_jsx(SortableContext, { items: draftAnnotations.map((annotation) => annotation.id), strategy: verticalListSortingStrategy, children: draftAnnotations.map((annotation, index) => {
+                                            const AnnotationKindIcon = ANNOTATION_KIND_ICON[annotation.kind];
+                                            const annotationKindLabel = ANNOTATION_KIND_LABELS[annotation.kind];
+                                            const annotationSequenceLabel = `${annotationKindLabel} ${index + 1}`;
+                                            const InstructionTypeIcon = MARKER_TYPE_ICON[annotation.markerType || DEFAULT_MARKER_TYPE];
+                                            const instructionTypeLabel = MARKER_TYPE_OPTIONS.find((option) => option.value === (annotation.markerType || DEFAULT_MARKER_TYPE))?.label || 'Review';
+                                            const isSelected = selectedAnnotationId === annotation.id;
+                                            const isExpanded = isSelected && !isAnnotationEditorCollapsed;
+                                            return (_jsx(SortableAnnotationCard, { id: annotation.id, children: ({ attributes, listeners, setNodeRef, transform, transition, isDragging }) => (_jsxs("div", { className: `tf-surface-elevated ${styles.annotationCard} ${isSelected ? styles.annotationCardActive : ''} ${isDragging ? styles.annotationCardDragging : ''}`, ref: (node) => {
+                                                        setNodeRef(node);
+                                                        if (node)
+                                                            annotationCardRefs.current.set(annotation.id, node);
+                                                        else
+                                                            annotationCardRefs.current.delete(annotation.id);
+                                                    }, style: {
+                                                        ...(isSelected ? { '--annotation-card-accent': mapMarkerColor(annotation) } : {}),
+                                                        transform: CSS.Transform.toString(transform),
+                                                        transition,
+                                                    }, onBlur: (event) => {
+                                                        if (!event.currentTarget.contains(event.relatedTarget)) {
+                                                            setIsAnnotationEditorCollapsed(true);
+                                                        }
+                                                    }, children: [_jsxs("div", { className: styles.annotationMeta, children: [_jsx("button", { type: "button", className: styles.annotationDragHandle, "aria-label": `Reorder ${annotationSequenceLabel}`, title: "Drag to reorder. Press Space, then use the arrow keys to reorder with the keyboard.", ...attributes, ...listeners, children: _jsx(GripVertical, { size: 16 }) }), _jsx("button", { type: "button", className: styles.annotationCardButton, onClick: () => {
+                                                                        toggleAnnotation(annotation.id);
+                                                                    }, "aria-label": annotationKindLabel, "aria-expanded": isExpanded, children: _jsx("span", { className: `tf-heading-card ${styles.annotationTitle}`, children: annotationSequenceLabel }) }), _jsx("span", { className: `tf-text-meta ${styles.annotationKind}`, "aria-hidden": "true", children: _jsx(AnnotationKindIcon, { size: 16 }) })] }), isExpanded ? (_jsxs("div", { className: styles.annotationInstructionEditor, children: [_jsx("label", { className: "tf-field-label", htmlFor: "annotated-marker-instruction", children: "Marker instruction" }), _jsx("textarea", { id: "annotated-marker-instruction", ref: isSelected ? selectedInstructionTextareaRef : null, className: `tf-field-shell ${styles.textArea} ${styles.annotationInstructionField}`, value: annotation.instruction, onChange: (event) => {
+                                                                        updateDraftAnnotation(annotation.id, (current) => ({
+                                                                            ...current,
+                                                                            instruction: event.target.value,
+                                                                        }), 600);
+                                                                    }, onBlur: () => {
+                                                                        void flushPendingDraft('text');
+                                                                    }, placeholder: "What should the AI focus on for this marker?" }), _jsxs("div", { className: styles.annotationTypeField, children: [_jsx("label", { className: "tf-field-label", htmlFor: "annotated-marker-type", children: "Instruction type" }), _jsx("select", { id: "annotated-marker-type", className: `tf-field-shell ${styles.select}`, value: annotation.markerType || DEFAULT_MARKER_TYPE, onChange: (event) => {
+                                                                                updateDraftAnnotation(annotation.id, (current) => updateMarkerType(current, event.target.value));
+                                                                            }, children: MARKER_TYPE_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] }), _jsxs("details", { className: styles.annotationGeometryDetails, children: [_jsx("summary", { className: "tf-field-label", children: "Precise placement" }), _jsx("div", { className: styles.annotationGeometryFields, "aria-label": "Marker geometry percent controls", children: getGeometryFields(annotation).map((field) => (_jsxs("label", { className: styles.annotationGeometryField, children: [_jsx("span", { className: `tf-text-meta ${styles.annotationGeometryLabel}`, children: field.label }), _jsx("input", { className: `tf-field-shell ${styles.annotationGeometryInput}`, type: "number", min: 0, max: 100, step: 0.1, value: field.value, onChange: (event) => {
+                                                                                            const nextValue = parsePercentField(event.target.value);
+                                                                                            if (nextValue === null)
+                                                                                                return;
+                                                                                            updateDraftAnnotation(annotation.id, (current) => (updateAnnotationGeometryField(current, field.key, nextValue)));
+                                                                                        }, "aria-label": `${field.label} percent` })] }, field.key))) })] })] })) : (_jsx("button", { type: "button", className: styles.annotationInstructionButton, onClick: () => {
+                                                                selectAnnotation(annotation.id);
+                                                            }, "aria-label": `Edit ${annotationKindLabel} instruction`, children: _jsxs("div", { className: styles.annotationInstructionEditor, children: [annotation.instruction.trim() ? (_jsx("div", { className: `tf-text-secondary ${styles.annotationInstructionPreview}`, children: annotation.instruction.trim() })) : null, _jsx("div", { className: styles.annotationPreviewFooter, children: _jsx("span", { className: `tf-text-meta ${styles.annotationInstructionTypeIcon}`, "aria-label": `Instruction type: ${instructionTypeLabel}`, title: instructionTypeLabel, children: _jsx(InstructionTypeIcon, { size: 16 }) }) })] }) }))] })) }, annotation.id));
+                                        }) })) }), _jsx(DragOverlay, { children: activeAnnotation ? (_jsxs("div", { className: `tf-surface-elevated ${styles.annotationCard} ${styles.annotationDragOverlay}`, "data-testid": "annotation-drag-overlay", children: [_jsxs("div", { className: styles.annotationMeta, children: [_jsx(GripVertical, { size: 16, className: styles.annotationDragOverlayGrip }), _jsx("span", { className: `tf-heading-card ${styles.annotationTitle} ${styles.annotationDragOverlayTitle}`, children: ANNOTATION_KIND_LABELS[activeAnnotation.kind] }), _jsx("span", { className: `tf-text-meta ${styles.annotationKind}`, "aria-hidden": "true", children: React.createElement(ANNOTATION_KIND_ICON[activeAnnotation.kind], { size: 16 }) })] }), activeAnnotation.instruction.trim() ? (_jsx("div", { className: `tf-text-secondary ${styles.annotationInstructionPreview}`, children: activeAnnotation.instruction.trim() })) : null] })) : null })] })] })) : (_jsxs("div", { className: styles.emptyState, children: [_jsx("strong", { className: "tf-empty-title", children: "No active session" }), _jsx("p", { className: "tf-empty-copy", children: "Create or select a session to edit annotations." })] })) }), _jsx(Modal, { isOpen: openImageModalOpen, onClose: () => {
                     if (openingImage)
                         return;
                     setOpenImageModalOpen(false);
@@ -2090,7 +2355,14 @@ export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBa
                     }, children: [_jsx("label", { className: "tf-field-label", htmlFor: "annotated-open-image-reference", children: "Image reference number" }), _jsx("input", { id: "annotated-open-image-reference", className: `tf-field-shell ${styles.textInput} ${styles.openImageField}`, value: openImageReference, onChange: (event) => setOpenImageReference(event.target.value), placeholder: "I-24", autoFocus: true }), _jsxs("div", { className: styles.openImageActions, children: [_jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: () => {
                                         setOpenImageModalOpen(false);
                                         setOpenImageReference('');
-                                    }, disabled: openingImage, children: "Cancel" }), _jsx("button", { type: "submit", className: "tf-button-primary tf-button-compact", disabled: openingImage, children: openingImage ? 'Opening…' : 'Open' })] })] }) }), _jsx(Modal, { isOpen: toolHelpModalOpen, onClose: () => setToolHelpModalOpen(false), title: "How To Use Markers", size: "md", children: _jsx("div", { className: styles.markerHelpModalBody, children: TOOL_OPTIONS.filter((tool) => tool.value !== 'select').map((tool) => (_jsxs("div", { className: `tf-surface-inset ${styles.markerHelpItem}`, children: [_jsxs("div", { className: styles.markerHelpHeader, children: [_jsx("strong", { className: "tf-heading-card", children: tool.label }), _jsx("span", { className: "tf-text-meta", children: TOOL_HELP_COPY[tool.value].short })] }), _jsx("p", { className: "tf-text-secondary", children: TOOL_HELP_COPY[tool.value].detail }), _jsx("p", { className: `tf-text-body ${styles.markerHelpExample}`, children: TOOL_HELP_COPY[tool.value].example })] }, tool.value))) }) }), _jsx(Modal, { isOpen: payloadModalOpen, onClose: () => setPayloadModalOpen(false), title: "AI Payload", size: "lg", children: _jsxs("div", { className: styles.payloadModalBody, children: [_jsxs("div", { className: styles.payloadModalToolbar, children: [_jsxs("div", { className: styles.payloadViewToggle, children: [_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.toolBtn} ${payloadPreviewMode === 'json' ? styles.toolBtnActive : ''}`, onClick: () => setPayloadPreviewMode('json'), children: "JSON" }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.toolBtn} ${payloadPreviewMode === 'brief' ? styles.toolBtnActive : ''}`, onClick: () => setPayloadPreviewMode('brief'), children: "AI Brief" })] }), _jsxs("div", { className: styles.payloadModalActions, children: [_jsxs("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn}`, onClick: () => void copyPayloadContent('json'), disabled: !payloadPreview, "aria-label": payloadCopied === 'json' ? 'Copied JSON' : 'Copy JSON', title: payloadCopied === 'json' ? 'Copied JSON' : 'Copy JSON', children: [payloadCopied === 'json' ? _jsx(Check, { size: 16 }) : _jsx(Copy, { size: 16 }), _jsx("span", { children: "JSON" })] }), _jsxs("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn}`, onClick: () => void copyPayloadContent('brief'), disabled: !payloadPreview, "aria-label": payloadCopied === 'brief' ? 'Copied AI Brief' : 'Copy AI Brief', title: payloadCopied === 'brief' ? 'Copied AI Brief' : 'Copy AI Brief', children: [payloadCopied === 'brief' ? _jsx(Check, { size: 16 }) : _jsx(Copy, { size: 16 }), _jsx("span", { children: "AI Brief" })] })] })] }), payloadLoading ? (_jsx("div", { className: styles.detailEmpty, children: _jsx("p", { className: "tf-empty-copy", children: "Loading payload\u2026" }) })) : payloadPreview ? (_jsx("pre", { className: `tf-surface-inset tf-scrollbar ${styles.payloadModalPreview}`, children: payloadPreviewMode === 'json'
+                                    }, disabled: openingImage, children: "Cancel" }), _jsx("button", { type: "submit", className: "tf-button-primary tf-button-compact", disabled: openingImage, children: openingImage ? 'Opening…' : 'Open' })] })] }) }), _jsx(Modal, { isOpen: toolHelpModalOpen, onClose: () => setToolHelpModalOpen(false), title: "How To Use Markers", size: "md", children: _jsx("div", { className: styles.markerHelpModalBody, children: TOOL_OPTIONS.filter((tool) => tool.value !== 'select').map((tool) => (_jsxs("div", { className: `tf-surface-inset ${styles.markerHelpItem}`, children: [_jsxs("div", { className: styles.markerHelpHeader, children: [_jsx("strong", { className: "tf-heading-card", children: tool.label }), _jsx("span", { className: "tf-text-meta", children: TOOL_HELP_COPY[tool.value].short })] }), _jsx("p", { className: "tf-text-secondary", children: TOOL_HELP_COPY[tool.value].detail }), _jsx("p", { className: `tf-text-body ${styles.markerHelpExample}`, children: TOOL_HELP_COPY[tool.value].example })] }, tool.value))) }) }), _jsx(Modal, { isOpen: taskLinkModalOpen, onClose: () => {
+                    if (!taskLinkSaving)
+                        setTaskLinkModalOpen(false);
+                }, title: "Link Session to Task", size: "sm", children: _jsxs("div", { className: styles.taskLinkModalBody, children: [_jsx("p", { className: "tf-text-secondary", children: "This links the review session only. The image stays unattached." }), _jsx("input", { className: `tf-field-shell ${styles.textInput}`, value: taskLinkSearch, onChange: (event) => setTaskLinkSearch(event.target.value), placeholder: "Search tasks...", "aria-label": "Search tasks", autoFocus: true }), taskLinkLoading ? (_jsx("div", { className: styles.detailEmpty, children: _jsx("p", { className: "tf-empty-copy", children: "Loading tasks\u2026" }) })) : filteredLinkableTasks.length === 0 ? (_jsx("div", { className: styles.detailEmpty, children: _jsx("p", { className: "tf-empty-copy", children: "No tasks match your search." }) })) : (_jsx("div", { className: `tf-scrollbar ${styles.taskLinkList}`, children: filteredLinkableTasks.map((task) => {
+                                const taskLabel = String(task.referenceLabel || task.id).trim() || task.id;
+                                const isCurrentTask = task.id === selectedSession?.taskId;
+                                return (_jsxs("button", { type: "button", className: `tf-surface-elevated ${styles.taskLinkOption} ${isCurrentTask ? styles.taskLinkOptionActive : ''}`, onClick: () => void updateSessionTaskLink(task.id), disabled: taskLinkSaving || isCurrentTask, children: [_jsx("span", { className: styles.taskLinkOptionTitle, children: task.title }), _jsxs("span", { className: "tf-text-meta", children: [taskLabel, isCurrentTask ? ' · Linked' : ''] })] }, task.id));
+                            }) })), _jsxs("div", { className: styles.taskLinkActions, children: [_jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: () => setTaskLinkModalOpen(false), disabled: taskLinkSaving, children: "Cancel" }), selectedSession?.taskId ? (_jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: () => void updateSessionTaskLink(null), disabled: taskLinkSaving, children: "Unlink" })) : null] })] }) }), _jsx(Modal, { isOpen: payloadModalOpen, onClose: () => setPayloadModalOpen(false), title: "AI Payload", size: "lg", children: _jsxs("div", { className: styles.payloadModalBody, children: [_jsxs("div", { className: styles.payloadModalToolbar, children: [_jsxs("div", { className: styles.payloadViewToggle, children: [_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.toolBtn} ${payloadPreviewMode === 'json' ? styles.toolBtnActive : ''}`, onClick: () => setPayloadPreviewMode('json'), children: "JSON" }), _jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.toolBtn} ${payloadPreviewMode === 'brief' ? styles.toolBtnActive : ''}`, onClick: () => setPayloadPreviewMode('brief'), children: "AI Brief" })] }), _jsxs("div", { className: styles.payloadModalActions, children: [_jsxs("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn}`, onClick: () => void copyPayloadContent('json'), disabled: !payloadPreview, "aria-label": payloadCopied === 'json' ? 'Copied JSON' : 'Copy JSON', title: payloadCopied === 'json' ? 'Copied JSON' : 'Copy JSON', children: [payloadCopied === 'json' ? _jsx(Check, { size: 16 }) : _jsx(Copy, { size: 16 }), _jsx("span", { children: "JSON" })] }), _jsxs("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn}`, onClick: () => void copyPayloadContent('brief'), disabled: !payloadPreview, "aria-label": payloadCopied === 'brief' ? 'Copied AI Brief' : 'Copy AI Brief', title: payloadCopied === 'brief' ? 'Copied AI Brief' : 'Copy AI Brief', children: [payloadCopied === 'brief' ? _jsx(Check, { size: 16 }) : _jsx(Copy, { size: 16 }), _jsx("span", { children: "AI Brief" })] })] })] }), payloadLoading ? (_jsx("div", { className: styles.detailEmpty, children: _jsx("p", { className: "tf-empty-copy", children: "Loading payload\u2026" }) })) : payloadPreview ? (_jsx("pre", { className: `tf-surface-inset tf-scrollbar ${styles.payloadModalPreview}`, children: payloadPreviewMode === 'json'
                                 ? JSON.stringify(payloadPreview, null, 2)
                                 : buildPayloadBrief(payloadPreview) })) : (_jsx("div", { className: styles.detailEmpty, children: _jsx("p", { className: "tf-empty-copy", children: "Load a payload preview to inspect the current session contract." }) }))] }) })] }));
 }