@taskforcehq/taskforce 0.3.169 → 0.3.300

package/dist/components/features/AnnotatedAttachmentWorkspace.js

@@ -0,0 +1,1942 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ArrowDown, ArrowLeft, ArrowUpLeft, ArrowUp, Check, ClipboardPaste, Copy, FolderOpen, Hand, HelpCircle, Loader2, MessageSquareCode, MessageSquareText, MousePointer2, Pin, Plus, RotateCcw, Save, SquareMousePointer, Trash2, ZoomIn, ZoomOut, } from 'lucide-react';
+import 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 styles from './AnnotatedAttachmentWorkspace.module.css';
+const MARKER_TYPE_OPTIONS = [
+    { value: 'review', label: 'Review' },
+    { value: 'change', label: 'Change' },
+    { value: 'question', label: 'Question' },
+];
+const TOOL_OPTIONS = [
+    { value: 'select', label: 'Select', icon: MousePointer2 },
+    { value: 'pin', label: 'Pin', icon: Pin },
+    { value: 'box', label: 'Box', icon: SquareMousePointer },
+    { value: 'arrow', label: 'Arrow', icon: ArrowUpLeft },
+    { value: 'text-note', label: 'Note', icon: MessageSquareText },
+];
+const ANNOTATION_KIND_ICON = {
+    pin: Pin,
+    box: SquareMousePointer,
+    arrow: ArrowUpLeft,
+    'text-note': MessageSquareText,
+};
+const ANNOTATION_KIND_LABELS = {
+    pin: 'Pin',
+    box: 'Box',
+    arrow: 'Arrow',
+    'text-note': 'Note',
+};
+const MARKER_TYPE_ICON = {
+    review: MessageSquareCode,
+    change: Check,
+    question: HelpCircle,
+    issue: HelpCircle,
+    idea: MessageSquareCode,
+};
+const TOOL_HELP_COPY = {
+    select: {
+        short: 'Select and edit existing markers.',
+        detail: 'Use Select to click, drag, reorder, resize, and update markers that are already on the image.',
+        example: 'Example: move an existing marker after the screenshot changes.',
+    },
+    pin: {
+        short: 'Mark a precise spot.',
+        detail: 'Use Pin when feedback points to one exact location instead of a broader area.',
+        example: 'Example: "This icon is misaligned by 2px."',
+    },
+    box: {
+        short: 'Mark an area or component.',
+        detail: 'Use Box when the feedback applies to a whole region, card, panel, or bounded UI block.',
+        example: 'Example: "This whole card needs tighter padding and a stronger border."',
+    },
+    arrow: {
+        short: 'Show direction or relationship.',
+        detail: 'Use Arrow when you need to show movement, attachment, flow, or source-to-target intent.',
+        example: 'Example: "This tooltip should anchor to this button, not the panel."',
+    },
+    'text-note': {
+        short: 'Add a comment-style point marker.',
+        detail: 'Use Note when you want a point marker that reads more like a comment or open question.',
+        example: 'Example: "Ask design whether this badge should stay."',
+    },
+};
+const ANNOTATION_COLORS = {
+    question: '#0f766e',
+    change: '#2563eb',
+    issue: '#dc2626',
+    idea: '#d97706',
+    review: '#7c3aed',
+};
+const MARKER_COLOR_SWATCHES = [
+    '#7c3aed',
+    '#2563eb',
+    '#0f766e',
+    '#dc2626',
+    '#d97706',
+    '#111827',
+];
+const DEFAULT_MARKER_TYPE = 'review';
+function buildSessionTitle(target) {
+    const displayName = String(target.displayName || '').trim();
+    return displayName ? `${displayName} review` : 'Annotated session';
+}
+function buildAnnotationId() {
+    return `annotation-${Math.random().toString(36).slice(2, 10)}`;
+}
+function clamp01(value) {
+    if (!Number.isFinite(value))
+        return 0;
+    if (value <= 0)
+        return 0;
+    if (value >= 1)
+        return 1;
+    return value;
+}
+function clampSize(value) {
+    return clamp01(Math.max(0.02, value));
+}
+function getAnnotatedTargetKey(target) {
+    if (!target)
+        return '';
+    return [
+        String(target.taskId || '').trim(),
+        String(target.assetId || '').trim(),
+        String(target.path || '').trim(),
+    ].join('::');
+}
+function isEditableKeyboardTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    const tagName = target.tagName.toLowerCase();
+    if (target.isContentEditable)
+        return true;
+    return tagName === 'input' || tagName === 'textarea' || tagName === 'select';
+}
+function normalizeOrder(annotations) {
+    return annotations.map((annotation, index) => ({
+        ...annotation,
+        order: index,
+    }));
+}
+function formatTimestamp(value) {
+    if (!value)
+        return 'Unsaved';
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime()))
+        return 'Unsaved';
+    return parsed.toLocaleString();
+}
+function getSessionCreatorLabel(session) {
+    const createdByLabel = String(session.createdByActor?.label || '').trim();
+    if (createdByLabel)
+        return createdByLabel;
+    return null;
+}
+function sessionInstructionPreview(value) {
+    const normalized = String(value || '').trim().replace(/\s+/g, ' ');
+    if (!normalized)
+        return '';
+    return normalized.length > 110 ? `${normalized.slice(0, 107)}...` : normalized;
+}
+function annotationSummary(annotation) {
+    if (annotation.kind === 'pin' || annotation.kind === 'text-note') {
+        return `${Math.round(annotation.x * 100)}%, ${Math.round(annotation.y * 100)}%`;
+    }
+    if (annotation.kind === 'box') {
+        return `${Math.round(annotation.width * 100)}% × ${Math.round(annotation.height * 100)}%`;
+    }
+    return `${Math.round(Math.abs(annotation.x2 - annotation.x) * 100)}% span`;
+}
+function createAnnotation(kind, start, end, color = ANNOTATION_COLORS[DEFAULT_MARKER_TYPE]) {
+    const base = {
+        id: buildAnnotationId(),
+        order: 0,
+        instruction: '',
+        markerType: DEFAULT_MARKER_TYPE,
+        color,
+    };
+    if (kind === 'pin') {
+        return { ...base, kind, x: start.x, y: start.y };
+    }
+    if (kind === 'text-note') {
+        return { ...base, kind, x: start.x, y: start.y };
+    }
+    if (kind === 'box') {
+        const endPoint = end || start;
+        return {
+            ...base,
+            kind,
+            x: clamp01(Math.min(start.x, endPoint.x)),
+            y: clamp01(Math.min(start.y, endPoint.y)),
+            width: clampSize(Math.abs(endPoint.x - start.x)),
+            height: clampSize(Math.abs(endPoint.y - start.y)),
+        };
+    }
+    const endPoint = end || start;
+    return {
+        ...base,
+        kind: 'arrow',
+        x: start.x,
+        y: start.y,
+        x2: endPoint.x,
+        y2: endPoint.y,
+    };
+}
+function mapMarkerColor(annotation) {
+    if (annotation.color)
+        return annotation.color;
+    return ANNOTATION_COLORS[annotation.markerType || DEFAULT_MARKER_TYPE];
+}
+function getArrowGeometry(annotation, dimensions) {
+    const width = Math.max(dimensions.width, 1);
+    const height = Math.max(dimensions.height, 1);
+    const tailX = annotation.x * width;
+    const tailY = annotation.y * height;
+    const tipX = annotation.x2 * width;
+    const tipY = annotation.y2 * height;
+    const dx = tipX - tailX;
+    const dy = tipY - tailY;
+    const length = Math.hypot(dx, dy) || 1;
+    const unitX = dx / length;
+    const unitY = dy / length;
+    const headLength = Math.max(10, Math.min(16, length - 2));
+    const halfHeadWidth = headLength * 0.62;
+    const baseX = tipX - unitX * headLength;
+    const baseY = tipY - unitY * headLength;
+    const perpX = -unitY;
+    const perpY = unitX;
+    return {
+        shaftX1: tailX,
+        shaftY1: tailY,
+        shaftX2: baseX,
+        shaftY2: baseY,
+        headPoints: [
+            `${tipX},${tipY}`,
+            `${baseX + perpX * halfHeadWidth},${baseY + perpY * halfHeadWidth}`,
+            `${baseX - perpX * halfHeadWidth},${baseY - perpY * halfHeadWidth}`,
+        ].join(' '),
+    };
+}
+function updateMarkerType(annotation, markerType) {
+    return {
+        ...annotation,
+        markerType,
+        color: annotation.color || ANNOTATION_COLORS[markerType],
+    };
+}
+function cloneAnnotation(annotation, order) {
+    return {
+        ...annotation,
+        id: buildAnnotationId(),
+        order,
+    };
+}
+function buildDuplicateSessionTitle(title, fallbackTarget) {
+    const baseTitle = String(title || '').trim() || (fallbackTarget ? buildSessionTitle(fallbackTarget) : 'Annotated session');
+    if (/\bcopy$/i.test(baseTitle)) {
+        return `${baseTitle} 2`;
+    }
+    return `${baseTitle} copy`;
+}
+function moveAnnotation(annotations, fromIndex, toIndex) {
+    if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0 || fromIndex >= annotations.length || toIndex >= annotations.length) {
+        return annotations;
+    }
+    const next = [...annotations];
+    const [moved] = next.splice(fromIndex, 1);
+    if (!moved)
+        return annotations;
+    next.splice(toIndex, 0, moved);
+    return normalizeOrder(next);
+}
+function toPercentField(value) {
+    return String(Math.round(clamp01(value) * 1000) / 10);
+}
+function parsePercentField(value) {
+    const numeric = Number.parseFloat(value);
+    if (!Number.isFinite(numeric))
+        return null;
+    return clamp01(numeric / 100);
+}
+function updateAnnotationGeometryField(annotation, field, value) {
+    if (annotation.kind === 'pin' || annotation.kind === 'text-note') {
+        if (field === 'x' || field === 'y') {
+            return { ...annotation, [field]: clamp01(value) };
+        }
+        return annotation;
+    }
+    if (annotation.kind === 'box') {
+        if (field === 'x' || field === 'y') {
+            return { ...annotation, [field]: clamp01(value) };
+        }
+        if (field === 'width' || field === 'height') {
+            return { ...annotation, [field]: clampSize(value) };
+        }
+        return annotation;
+    }
+    if (field === 'x' || field === 'y' || field === 'x2' || field === 'y2') {
+        return { ...annotation, [field]: clamp01(value) };
+    }
+    return annotation;
+}
+function getGeometryFields(annotation) {
+    if (annotation.kind === 'pin' || annotation.kind === 'text-note') {
+        return [
+            { key: 'x', label: 'X', value: toPercentField(annotation.x) },
+            { key: 'y', label: 'Y', value: toPercentField(annotation.y) },
+        ];
+    }
+    if (annotation.kind === 'box') {
+        return [
+            { key: 'x', label: 'X', value: toPercentField(annotation.x) },
+            { key: 'y', label: 'Y', value: toPercentField(annotation.y) },
+            { key: 'width', label: 'Width', value: toPercentField(annotation.width) },
+            { key: 'height', label: 'Height', value: toPercentField(annotation.height) },
+        ];
+    }
+    return [
+        { key: 'x', label: 'Start X', value: toPercentField(annotation.x) },
+        { key: 'y', label: 'Start Y', value: toPercentField(annotation.y) },
+        { key: 'x2', label: 'End X', value: toPercentField(annotation.x2) },
+        { key: 'y2', label: 'End Y', value: toPercentField(annotation.y2) },
+    ];
+}
+function formatCropHint(cropHint) {
+    if (!cropHint)
+        return null;
+    const left = Math.round(cropHint.x * 100);
+    const top = Math.round(cropHint.y * 100);
+    const width = Math.round(cropHint.width * 100);
+    const height = Math.round(cropHint.height * 100);
+    return `crop ${left}%, ${top}% size ${width}% x ${height}%`;
+}
+function clampZoom(value) {
+    if (!Number.isFinite(value))
+        return 1;
+    return Math.min(4, Math.max(0.25, Number(value.toFixed(2))));
+}
+function buildPayloadBrief(payload) {
+    const lines = [
+        `Annotated attachment: ${payload.title || payload.image.displayName}`,
+        `Image: ${payload.image.displayName}`,
+        `Image Reference: ${payload.image.referenceLabel || payload.image.assetId}`,
+        `Task ID: ${payload.taskId}`,
+        payload.globalInstruction
+            ? `Global instruction: ${payload.globalInstruction}`
+            : 'Global instruction: None provided.',
+        'Markers:'
+    ];
+    if (payload.annotations.length === 0) {
+        lines.push('0. No markers.');
+        return lines.join('\n');
+    }
+    payload.annotations.forEach((annotation, index) => {
+        const markerType = annotation.markerType || DEFAULT_MARKER_TYPE;
+        const cropText = formatCropHint(annotation.cropHint);
+        lines.push(`${index + 1}. ${annotation.kind} (${markerType})`);
+        lines.push(`Instruction: ${annotation.instruction || 'No marker instruction.'}`);
+        if (cropText)
+            lines.push(`Region: ${cropText}`);
+    });
+    return lines.join('\n');
+}
+function normalizeDraftPayload(payload) {
+    return {
+        title: payload.title,
+        globalInstruction: payload.globalInstruction,
+        annotations: normalizeOrder(payload.annotations),
+    };
+}
+function serializeDraftPayload(payload) {
+    return JSON.stringify(normalizeDraftPayload(payload));
+}
+function parseDraftSnapshot(snapshot) {
+    const parsed = JSON.parse(snapshot);
+    return normalizeDraftPayload({
+        title: String(parsed?.title || ''),
+        globalInstruction: String(parsed?.globalInstruction || ''),
+        annotations: Array.isArray(parsed?.annotations) ? parsed.annotations : [],
+    });
+}
+function buildDraftPayloadFromSession(session, fallbackTitle) {
+    return normalizeDraftPayload({
+        title: session?.title || fallbackTitle,
+        globalInstruction: session?.globalInstruction || '',
+        annotations: session?.annotations || [],
+    });
+}
+export function AnnotatedAttachmentWorkspaceShell({ runtimeMode = 'local', apiBaseUrl = '', cloudAuthBaseUrl = '', workspaceId = 'default', sessionLoadReady = true, requestedTarget = null, requestedSessionId = null, requestedOpenVersion = 0, resolveTaskReferenceLabel, resolveImageReferenceLabel, onRequestedTargetHandled, onOpenTarget, onContextChange, onBackToTask, }) {
+    const resolvedApiBase = runtimeMode === 'cloud'
+        ? (cloudAuthBaseUrl || apiBaseUrl || '')
+        : '';
+    const [uncontrolledTarget, setUncontrolledTarget] = useState(requestedTarget);
+    const [sessions, setSessions] = useState([]);
+    const [selectedSessionId, setSelectedSessionId] = useState(null);
+    const [sessionCardEditing, setSessionCardEditing] = useState(false);
+    const [draftTitle, setDraftTitle] = useState('');
+    const [draftGlobalInstruction, setDraftGlobalInstruction] = useState('');
+    const [draftAnnotations, setDraftAnnotations] = useState([]);
+    const [selectedAnnotationId, setSelectedAnnotationId] = useState(null);
+    const [defaultMarkerColor, setDefaultMarkerColor] = useState(ANNOTATION_COLORS[DEFAULT_MARKER_TYPE]);
+    const [colorPickerOpen, setColorPickerOpen] = useState(false);
+    const [toolMode, setToolMode] = useState('select');
+    const [showCreateSessionPrompt, setShowCreateSessionPrompt] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [saveState, setSaveState] = useState('saved');
+    const [lastSaveError, setLastSaveError] = useState(null);
+    const [payloadLoading, setPayloadLoading] = useState(false);
+    const [payloadPreview, setPayloadPreview] = useState(null);
+    const [payloadCopied, setPayloadCopied] = useState(false);
+    const [payloadModalOpen, setPayloadModalOpen] = useState(false);
+    const [payloadPreviewMode, setPayloadPreviewMode] = useState('json');
+    const [taskIdCopied, setTaskIdCopied] = useState(false);
+    const [imageIdCopied, setImageIdCopied] = useState(false);
+    const [toolHelpModalOpen, setToolHelpModalOpen] = useState(false);
+    const [openImageModalOpen, setOpenImageModalOpen] = useState(false);
+    const [openImageReference, setOpenImageReference] = useState('');
+    const [openingImage, setOpeningImage] = useState(false);
+    const [imageLoading, setImageLoading] = useState(false);
+    const [imageLoadError, setImageLoadError] = useState(false);
+    const [zoomLevel, setZoomLevel] = useState(1);
+    const [panMode, setPanMode] = useState(false);
+    const [pastingImage, setPastingImage] = useState(false);
+    const [naturalImageSize, setNaturalImageSize] = useState({ width: 0, height: 0 });
+    const overlayRef = useRef(null);
+    const canvasScrollerRef = useRef(null);
+    const imageRef = useRef(null);
+    const selectedInstructionTextareaRef = useRef(null);
+    const pendingRequestedSessionIdRef = useRef(requestedSessionId);
+    const lastLoadedTargetKeyRef = useRef('');
+    const lastHandledRequestedOpenVersionRef = useRef(0);
+    const deferredTargetKeyRef = useRef('');
+    const latestLoadRequestIdRef = useRef(0);
+    const activeLoadKeyRef = useRef(null);
+    const suppressVisibilityReloadUntilRef = useRef(0);
+    const suppressAutoSaveRef = useRef(false);
+    const debounceTimerRef = useRef(null);
+    const pendingDebounceMsRef = useRef(null);
+    const selectedSessionIdRef = useRef(null);
+    const currentDraftSnapshotRef = useRef('');
+    const lastSavedSnapshotRef = useRef('');
+    const inFlightSnapshotRef = useRef(null);
+    const inFlightPromiseRef = useRef(null);
+    const hasPendingSaveAfterFlightRef = useRef(false);
+    const activeSaveSessionIdRef = useRef(null);
+    const autoRetrySnapshotRef = useRef(null);
+    const retryTimerRef = useRef(null);
+    const gestureStartRef = useRef(null);
+    const dragRef = useRef(null);
+    const resizeRef = useRef(null);
+    const arrowHandleRef = useRef(null);
+    const creatingAnnotationRef = useRef(null);
+    const panRef = useRef(null);
+    const colorPickerRef = useRef(null);
+    const sessionCardRef = useRef(null);
+    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 requestedTargetKey = useMemo(() => getAnnotatedTargetKey(requestedTarget), [requestedTarget]);
+    const isTargetControlled = typeof onOpenTarget === 'function';
+    const activeTarget = isTargetControlled ? requestedTarget : uncontrolledTarget;
+    const activeTaskReferenceLabel = useMemo(() => {
+        const taskId = String(activeTarget?.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 activeImageReferenceLabel = useMemo(() => {
+        const assetId = String(activeTarget?.assetId || '').trim();
+        if (!assetId)
+            return '';
+        const resolvedLabel = resolveImageReferenceLabel?.(assetId).trim() || '';
+        if (resolvedLabel)
+            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,
+        globalInstruction: draftGlobalInstruction,
+        annotations: draftAnnotations,
+    }), [draftAnnotations, draftGlobalInstruction, draftTitle]);
+    const currentDraftSnapshot = useMemo(() => serializeDraftPayload(currentDraftPayload), [currentDraftPayload]);
+    const hasUnsavedChanges = currentDraftSnapshot !== lastSavedSnapshotRef.current;
+    const canvasMediaSize = useMemo(() => ({
+        width: Math.max(naturalImageSize.width * zoomLevel, 0),
+        height: Math.max(naturalImageSize.height * zoomLevel, 0),
+    }), [naturalImageSize.height, naturalImageSize.width, zoomLevel]);
+    const arrowHandleGeometry = useMemo(() => ({
+        visibleRadius: 7,
+        hitRadius: 11,
+    }), []);
+    const arrowOverlayViewBox = useMemo(() => `0 0 ${Math.max(canvasMediaSize.width, 1)} ${Math.max(canvasMediaSize.height, 1)}`, [canvasMediaSize.height, canvasMediaSize.width]);
+    const canPan = useMemo(() => {
+        const scroller = canvasScrollerRef.current;
+        if (!scroller)
+            return zoomLevel > 1;
+        return (zoomLevel > 1
+            || (canvasMediaSize.width > (scroller.clientWidth + 1)
+                || canvasMediaSize.height > (scroller.clientHeight + 1)));
+    }, [canvasMediaSize.height, canvasMediaSize.width, zoomLevel]);
+    const zoomLabel = `${Math.round(zoomLevel * 100)}%`;
+    const annotationOrderNumbers = useMemo(() => {
+        const orderMap = new Map();
+        draftAnnotations.forEach((annotation, index) => {
+            orderMap.set(annotation.id, index + 1);
+        });
+        return orderMap;
+    }, [draftAnnotations]);
+    useEffect(() => {
+        pendingRequestedSessionIdRef.current = requestedSessionId;
+    }, [requestedSessionId]);
+    useEffect(() => {
+        const textarea = selectedInstructionTextareaRef.current;
+        if (!textarea)
+            return;
+        if (!selectedAnnotationId)
+            return;
+        textarea.focus();
+        const end = textarea.value.length;
+        textarea.setSelectionRange(end, end);
+    }, [selectedAnnotationId]);
+    useEffect(() => {
+        selectedSessionIdRef.current = selectedSessionId;
+    }, [selectedSessionId]);
+    useEffect(() => {
+        setSessionCardEditing(false);
+    }, [selectedSessionId]);
+    useEffect(() => {
+        if (!selectedAnnotation) {
+            setColorPickerOpen(false);
+            return;
+        }
+        setDefaultMarkerColor(selectedAnnotation.color || ANNOTATION_COLORS[selectedAnnotation.markerType || DEFAULT_MARKER_TYPE]);
+    }, [selectedAnnotation]);
+    const createSessionForTarget = useCallback(async (target) => {
+        const startedAt = typeof performance !== 'undefined' ? performance.now() : Date.now();
+        const res = await fetchTaskforceApi(`/api/taskforce/annotated-attachments/sessions?${workspaceQuery}`, {
+            method: 'POST',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json', ...requestHeaders },
+            body: JSON.stringify({
+                taskId: target.taskId,
+                baseImageAssetId: target.assetId,
+                title: buildSessionTitle(target),
+                globalInstruction: '',
+                annotations: [],
+            }),
+        }, resolvedApiBase);
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) {
+            throw new Error(String(data?.error || 'Failed to create session.'));
+        }
+        const session = data?.session;
+        if (!session?.id) {
+            throw new Error('Failed to create session.');
+        }
+        logBootstrapDebug('annotated_session_create_completed', {
+            assetId: target.assetId,
+            taskId: target.taskId || null,
+            sessionId: session.id,
+            durationMs: Math.round((typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAt),
+            debugTimings: data?.debugTimings || null,
+            serverTiming: typeof res.headers?.get === 'function'
+                ? res.headers.get('server-timing') || null
+                : null,
+        });
+        return session;
+    }, [requestHeaders, resolvedApiBase, workspaceQuery]);
+    const readFileAsDataUrl = useCallback((blob) => new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '');
+        reader.onerror = () => reject(reader.error || new Error('Failed to read clipboard image.'));
+        reader.readAsDataURL(blob);
+    }), []);
+    const clearPendingAutoSave = useCallback(() => {
+        if (debounceTimerRef.current !== null) {
+            window.clearTimeout(debounceTimerRef.current);
+            debounceTimerRef.current = null;
+        }
+        if (retryTimerRef.current !== null) {
+            window.clearTimeout(retryTimerRef.current);
+            retryTimerRef.current = null;
+        }
+    }, []);
+    const applyDraftPayload = useCallback((payload) => {
+        setDraftTitle(payload.title);
+        setDraftGlobalInstruction(payload.globalInstruction);
+        setDraftAnnotations(payload.annotations);
+        setSelectedAnnotationId((current) => (current && payload.annotations.some((annotation) => annotation.id === current)
+            ? current
+            : (payload.annotations[0]?.id || null)));
+    }, []);
+    const syncDraftFromSession = useCallback((session, target) => {
+        const fallbackTitle = buildSessionTitle(target || activeTarget || {
+            taskId: '',
+            assetId: session.baseImageAssetId,
+            path: '',
+            displayName: 'Annotated session',
+        });
+        const payload = buildDraftPayloadFromSession(session, fallbackTitle);
+        const snapshot = serializeDraftPayload(payload);
+        suppressAutoSaveRef.current = true;
+        clearPendingAutoSave();
+        applyDraftPayload(payload);
+        lastSavedSnapshotRef.current = snapshot;
+        currentDraftSnapshotRef.current = snapshot;
+        inFlightSnapshotRef.current = null;
+        hasPendingSaveAfterFlightRef.current = false;
+        activeSaveSessionIdRef.current = null;
+        autoRetrySnapshotRef.current = null;
+        setLastSaveError(null);
+        setSaveState('saved');
+        setSaving(false);
+    }, [activeTarget, applyDraftPayload, clearPendingAutoSave]);
+    const resetForTargetLoad = useCallback((target) => {
+        suppressAutoSaveRef.current = true;
+        clearPendingAutoSave();
+        setSessions([]);
+        setSelectedSessionId(null);
+        setShowCreateSessionPrompt(false);
+        setSessionCardEditing(false);
+        setDraftTitle(buildSessionTitle(target));
+        setDraftGlobalInstruction('');
+        setDraftAnnotations([]);
+        setSelectedAnnotationId(null);
+        lastSavedSnapshotRef.current = '';
+        currentDraftSnapshotRef.current = '';
+        inFlightSnapshotRef.current = null;
+        hasPendingSaveAfterFlightRef.current = false;
+        activeSaveSessionIdRef.current = null;
+        autoRetrySnapshotRef.current = null;
+        setPayloadPreview(null);
+        setPayloadModalOpen(false);
+        setLastSaveError(null);
+        setSaveState('saved');
+        setSaving(false);
+    }, [clearPendingAutoSave]);
+    const saveSnapshot = useCallback(async (snapshot, trigger, options) => {
+        const sessionId = selectedSessionIdRef.current;
+        if (!sessionId)
+            return true;
+        if (snapshot === lastSavedSnapshotRef.current) {
+            if (!inFlightPromiseRef.current) {
+                setLastSaveError(null);
+                setSaveState('saved');
+            }
+            return true;
+        }
+        if (inFlightPromiseRef.current) {
+            hasPendingSaveAfterFlightRef.current = true;
+            if (!options?.waitForInFlight)
+                return false;
+            const inFlightResult = await inFlightPromiseRef.current;
+            if (!inFlightResult)
+                return false;
+            const latestSnapshot = currentDraftSnapshotRef.current;
+            if (latestSnapshot === lastSavedSnapshotRef.current)
+                return true;
+            return saveSnapshot(latestSnapshot, trigger, options);
+        }
+        clearPendingAutoSave();
+        const payload = parseDraftSnapshot(snapshot);
+        activeSaveSessionIdRef.current = sessionId;
+        inFlightSnapshotRef.current = snapshot;
+        setSaving(true);
+        setError(null);
+        setLastSaveError(null);
+        setSaveState('saving');
+        const request = (async () => {
+            try {
+                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(payload),
+                }, resolvedApiBase);
+                const data = await res.json().catch(() => ({}));
+                if (!res.ok) {
+                    throw new Error(String(data?.error || 'Failed to save session.'));
+                }
+                const session = data?.session;
+                if (!session?.id)
+                    throw new Error('Failed to save session.');
+                setSessions((current) => {
+                    const existingIndex = current.findIndex((item) => item.id === session.id);
+                    if (existingIndex === -1)
+                        return [session, ...current];
+                    const next = [...current];
+                    next[existingIndex] = session;
+                    return next;
+                });
+                lastSavedSnapshotRef.current = snapshot;
+                autoRetrySnapshotRef.current = null;
+                setLastSaveError(null);
+                const stillCurrentSession = selectedSessionIdRef.current === session.id;
+                const latestSnapshot = currentDraftSnapshotRef.current;
+                const hasNewerLocalChanges = latestSnapshot !== snapshot;
+                const shouldSaveAgain = hasPendingSaveAfterFlightRef.current || hasNewerLocalChanges;
+                hasPendingSaveAfterFlightRef.current = false;
+                if (stillCurrentSession && !shouldSaveAgain) {
+                    suppressAutoSaveRef.current = true;
+                    applyDraftPayload(payload);
+                    setSaveState('saved');
+                }
+                else if (!shouldSaveAgain && latestSnapshot === lastSavedSnapshotRef.current) {
+                    setSaveState('saved');
+                }
+                else {
+                    setSaveState('pending');
+                }
+                return true;
+            }
+            catch (requestError) {
+                const message = requestError instanceof Error ? requestError.message : 'Failed to save session.';
+                setError(message);
+                setLastSaveError(message);
+                setSaveState('error');
+                if (autoRetrySnapshotRef.current !== snapshot
+                    && selectedSessionIdRef.current === sessionId
+                    && currentDraftSnapshotRef.current === snapshot) {
+                    autoRetrySnapshotRef.current = snapshot;
+                    retryTimerRef.current = window.setTimeout(() => {
+                        retryTimerRef.current = null;
+                        if (selectedSessionIdRef.current !== sessionId
+                            || currentDraftSnapshotRef.current !== snapshot) {
+                            return;
+                        }
+                        void saveSnapshot(snapshot, trigger, { waitForInFlight: true });
+                    }, 1500);
+                }
+                return false;
+            }
+            finally {
+                inFlightSnapshotRef.current = null;
+                inFlightPromiseRef.current = null;
+                activeSaveSessionIdRef.current = null;
+                setSaving(false);
+            }
+        })();
+        inFlightPromiseRef.current = request;
+        const success = await request;
+        if (success) {
+            const latestSnapshot = currentDraftSnapshotRef.current;
+            if (latestSnapshot !== lastSavedSnapshotRef.current) {
+                return saveSnapshot(latestSnapshot, trigger, options);
+            }
+        }
+        return success;
+    }, [applyDraftPayload, clearPendingAutoSave, requestHeaders, resolvedApiBase, workspaceQuery]);
+    const scheduleAutoSave = useCallback((delayMs) => {
+        if (!selectedSessionIdRef.current)
+            return;
+        if (currentDraftSnapshotRef.current === lastSavedSnapshotRef.current) {
+            setLastSaveError(null);
+            if (!inFlightPromiseRef.current)
+                setSaveState('saved');
+            return;
+        }
+        if (saveState !== 'saving')
+            setSaveState('pending');
+        clearPendingAutoSave();
+        debounceTimerRef.current = window.setTimeout(() => {
+            debounceTimerRef.current = null;
+            void saveSnapshot(currentDraftSnapshotRef.current, 'structure');
+        }, delayMs);
+    }, [clearPendingAutoSave, saveSnapshot, saveState]);
+    const markDraftChanged = useCallback((delayMs) => {
+        pendingDebounceMsRef.current = delayMs;
+    }, []);
+    const flushPendingDraft = useCallback(async (trigger) => {
+        clearPendingAutoSave();
+        const currentSnapshot = currentDraftSnapshotRef.current;
+        if (!selectedSessionIdRef.current || currentSnapshot === lastSavedSnapshotRef.current) {
+            setLastSaveError(null);
+            if (!inFlightPromiseRef.current)
+                setSaveState('saved');
+            return true;
+        }
+        return saveSnapshot(currentSnapshot, trigger, { waitForInFlight: true });
+    }, [clearPendingAutoSave, saveSnapshot]);
+    const restoreLastSavedDraft = useCallback(() => {
+        const snapshot = lastSavedSnapshotRef.current;
+        if (!snapshot)
+            return;
+        clearPendingAutoSave();
+        suppressAutoSaveRef.current = true;
+        applyDraftPayload(parseDraftSnapshot(snapshot));
+        setLastSaveError(null);
+        setSaveState('saved');
+        setError(null);
+    }, [applyDraftPayload, clearPendingAutoSave]);
+    const loadSessions = useCallback(async (target, options) => {
+        const startedAt = typeof performance !== 'undefined' ? performance.now() : Date.now();
+        const loadKey = JSON.stringify({
+            targetKey: getAnnotatedTargetKey(target),
+            requestedSessionId: options?.requestedSessionId ?? null,
+            autoCreateIfEmpty: options?.autoCreateIfEmpty === true,
+        });
+        if (activeLoadKeyRef.current === loadKey)
+            return;
+        const requestId = latestLoadRequestIdRef.current + 1;
+        latestLoadRequestIdRef.current = requestId;
+        activeLoadKeyRef.current = loadKey;
+        setLoading(true);
+        setError(null);
+        try {
+            const params = new URLSearchParams();
+            if (workspaceId)
+                params.set('workspaceId', workspaceId);
+            if (target.taskId)
+                params.set('taskId', target.taskId);
+            params.set('imageAssetId', target.assetId);
+            const res = await fetchTaskforceApi(`/api/taskforce/annotated-attachments/sessions?${params.toString()}`, { credentials: 'include', headers: requestHeaders, cache: 'no-store' }, resolvedApiBase);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                throw new Error(String(data?.error || 'Failed to load annotated attachment sessions.'));
+            }
+            const nextSessions = Array.isArray(data?.sessions) ? data.sessions : [];
+            logBootstrapDebug('annotated_sessions_loaded', {
+                assetId: target.assetId,
+                taskId: target.taskId || null,
+                requestedSessionId: options?.requestedSessionId ?? null,
+                autoCreateIfEmpty: options?.autoCreateIfEmpty === true,
+                sessionCount: nextSessions.length,
+                durationMs: Math.round((typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAt),
+                serverTiming: typeof res.headers?.get === 'function'
+                    ? res.headers.get('server-timing') || null
+                    : null,
+            });
+            if (nextSessions.length === 0
+                && options?.autoCreateIfEmpty
+                && String(target.assetId || '').trim()) {
+                const requestedSessionIdValue = options?.requestedSessionId ?? pendingRequestedSessionIdRef.current;
+                pendingRequestedSessionIdRef.current = null;
+                if (requestedSessionIdValue) {
+                    setError('The previously selected annotation session could not be restored.');
+                }
+                if (latestLoadRequestIdRef.current !== requestId)
+                    return;
+                const session = await createSessionForTarget(target);
+                logBootstrapDebug('annotated_sessions_auto_created_after_empty_load', {
+                    assetId: target.assetId,
+                    taskId: target.taskId || null,
+                    sessionId: session.id,
+                    totalDurationMs: Math.round((typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAt),
+                });
+                if (latestLoadRequestIdRef.current !== requestId)
+                    return;
+                setSessions([session]);
+                setSelectedSessionId(session.id);
+                setShowCreateSessionPrompt(false);
+                syncDraftFromSession(session, target);
+                return;
+            }
+            if (latestLoadRequestIdRef.current !== requestId)
+                return;
+            setSessions(nextSessions);
+            setShowCreateSessionPrompt(nextSessions.length === 0);
+            const requestedSessionIdValue = options?.requestedSessionId ?? pendingRequestedSessionIdRef.current;
+            pendingRequestedSessionIdRef.current = null;
+            const nextSelected = nextSessions.find((session) => session.id === requestedSessionIdValue) || nextSessions[0] || null;
+            if (requestedSessionIdValue && !nextSelected) {
+                setError('The previously selected annotation session could not be restored.');
+            }
+            setSelectedSessionId(nextSelected?.id || null);
+            if (nextSelected) {
+                syncDraftFromSession(nextSelected, target);
+            }
+            else {
+                suppressAutoSaveRef.current = true;
+                clearPendingAutoSave();
+                setDraftTitle(buildSessionTitle(target));
+                setDraftGlobalInstruction('');
+                setDraftAnnotations([]);
+                setSelectedAnnotationId(null);
+                lastSavedSnapshotRef.current = '';
+                currentDraftSnapshotRef.current = '';
+                setLastSaveError(null);
+                setSaveState('saved');
+            }
+        }
+        catch (requestError) {
+            if (latestLoadRequestIdRef.current !== requestId)
+                return;
+            setError(requestError instanceof Error ? requestError.message : 'Failed to load sessions.');
+        }
+        finally {
+            if (activeLoadKeyRef.current === loadKey) {
+                activeLoadKeyRef.current = null;
+            }
+            if (latestLoadRequestIdRef.current === requestId) {
+                setLoading(false);
+            }
+        }
+    }, [clearPendingAutoSave, createSessionForTarget, requestHeaders, resolvedApiBase, syncDraftFromSession, workspaceId]);
+    const pasteImageFromClipboard = useCallback(async () => {
+        if (typeof navigator === 'undefined' || !navigator.clipboard || typeof navigator.clipboard.read !== 'function') {
+            setError('Clipboard image paste is not supported in this environment.');
+            return;
+        }
+        setPastingImage(true);
+        setError(null);
+        suppressVisibilityReloadUntilRef.current = Date.now() + 2000;
+        try {
+            const items = await navigator.clipboard.read();
+            const imageItem = items.find((item) => item.types.some((type) => type.startsWith('image/')));
+            const imageType = imageItem?.types.find((type) => type.startsWith('image/')) || '';
+            if (!imageItem || !imageType) {
+                throw new Error('No image found on the clipboard.');
+            }
+            const blob = await imageItem.getType(imageType);
+            const encoded = await readFileAsDataUrl(blob);
+            if (!encoded) {
+                throw new Error('Failed to read clipboard image.');
+            }
+            const extension = imageType === 'image/jpeg'
+                ? 'jpg'
+                : imageType === 'image/webp'
+                    ? 'webp'
+                    : imageType === 'image/gif'
+                        ? 'gif'
+                        : 'png';
+            const response = await fetch('/api/taskforce/context-upload', {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...requestHeaders,
+                },
+                body: JSON.stringify({
+                    file: encoded,
+                    originalName: `pasted-image.${extension}`,
+                    workspaceId: String(workspaceId || 'default').trim() || 'default',
+                }),
+            });
+            const data = await response.json().catch(() => ({}));
+            if (!response.ok || !data?.success || typeof data?.assetId !== 'string' || typeof data?.path !== 'string') {
+                throw new Error(String(data?.error || 'Failed to paste image into Image Notes.'));
+            }
+            const target = {
+                assetId: data.assetId,
+                imageReferenceLabel: typeof data?.referenceLabel === 'string' ? data.referenceLabel : undefined,
+                path: data.path,
+                displayName: typeof data?.displayName === 'string' && data.displayName.trim().length > 0
+                    ? data.displayName.trim()
+                    : 'Pasted image',
+            };
+            pendingRequestedSessionIdRef.current = null;
+            if (isTargetControlled) {
+                lastLoadedTargetKeyRef.current = '';
+                onOpenTarget?.(target, { sessionId: null });
+            }
+            else {
+                setUncontrolledTarget(target);
+                lastLoadedTargetKeyRef.current = getAnnotatedTargetKey(target);
+                void loadSessions(target, { autoCreateIfEmpty: true });
+            }
+        }
+        catch (pasteError) {
+            setError(pasteError instanceof Error ? pasteError.message : 'Failed to paste image.');
+        }
+        finally {
+            setPastingImage(false);
+        }
+    }, [isTargetControlled, loadSessions, onOpenTarget, readFileAsDataUrl, requestHeaders, workspaceId]);
+    const openImageByReference = useCallback(async () => {
+        const normalizedReference = openImageReference.trim();
+        if (!normalizedReference) {
+            setError('Enter an image reference to open.');
+            return;
+        }
+        setOpeningImage(true);
+        setError(null);
+        try {
+            const workspaceQuery = new URLSearchParams({
+                workspaceId: String(workspaceId || 'default').trim() || 'default',
+            });
+            const response = await fetchTaskforceApi(`/api/taskforce/annotated-attachments/images/${encodeURIComponent(normalizedReference)}?${workspaceQuery.toString()}`, {
+                method: 'GET',
+                credentials: 'include',
+                headers: requestHeaders,
+            });
+            const data = await response.json().catch(() => ({}));
+            if (!response.ok || !data?.target || typeof data.target.assetId !== 'string' || typeof data.target.path !== 'string') {
+                throw new Error(String(data?.error || 'Failed to open image reference.'));
+            }
+            const target = {
+                assetId: data.target.assetId,
+                path: data.target.path,
+                displayName: typeof data.target.displayName === 'string' && data.target.displayName.trim().length > 0
+                    ? data.target.displayName.trim()
+                    : 'Image attachment',
+                taskId: typeof data.target.taskId === 'string' && data.target.taskId.trim().length > 0
+                    ? data.target.taskId.trim()
+                    : undefined,
+                taskReferenceLabel: typeof data.target.taskReferenceLabel === 'string' && data.target.taskReferenceLabel.trim().length > 0
+                    ? data.target.taskReferenceLabel.trim()
+                    : undefined,
+                imageReferenceLabel: typeof data.target.imageReferenceLabel === 'string' && data.target.imageReferenceLabel.trim().length > 0
+                    ? data.target.imageReferenceLabel.trim()
+                    : undefined,
+            };
+            pendingRequestedSessionIdRef.current = null;
+            setOpenImageModalOpen(false);
+            setOpenImageReference('');
+            if (isTargetControlled) {
+                lastLoadedTargetKeyRef.current = '';
+                onOpenTarget?.(target, { sessionId: null });
+            }
+            else {
+                setUncontrolledTarget(target);
+                lastLoadedTargetKeyRef.current = getAnnotatedTargetKey(target);
+                void loadSessions(target, { autoCreateIfEmpty: true });
+            }
+        }
+        catch (openError) {
+            setError(openError instanceof Error ? openError.message : 'Failed to open image reference.');
+        }
+        finally {
+            setOpeningImage(false);
+        }
+    }, [isTargetControlled, loadSessions, onOpenTarget, openImageReference, requestHeaders, workspaceId]);
+    const applySessionLocally = useCallback((session) => {
+        setSessions((current) => {
+            const existingIndex = current.findIndex((item) => item.id === session.id);
+            if (existingIndex === -1)
+                return [session, ...current];
+            const next = [...current];
+            next[existingIndex] = session;
+            return next;
+        });
+        setSelectedSessionId(session.id);
+        syncDraftFromSession(session, activeTarget);
+    }, [activeTarget, syncDraftFromSession]);
+    const removeSessionLocally = useCallback((sessionId) => {
+        setSessions((current) => {
+            const remaining = current.filter((session) => session.id !== sessionId);
+            const nextSelected = remaining[0] || null;
+            setSelectedSessionId(nextSelected?.id || null);
+            if (nextSelected) {
+                syncDraftFromSession(nextSelected, activeTarget);
+            }
+            else {
+                suppressAutoSaveRef.current = true;
+                clearPendingAutoSave();
+                setDraftTitle(buildSessionTitle(activeTarget || {
+                    taskId: '',
+                    assetId: '',
+                    path: '',
+                    displayName: 'Annotated session',
+                }));
+                setDraftGlobalInstruction('');
+                setDraftAnnotations([]);
+                setSelectedAnnotationId(null);
+                lastSavedSnapshotRef.current = '';
+                currentDraftSnapshotRef.current = '';
+                setLastSaveError(null);
+                setSaveState('saved');
+            }
+            return remaining;
+        });
+    }, [activeTarget, clearPendingAutoSave, syncDraftFromSession]);
+    useEffect(() => {
+        if (!requestedTarget)
+            return;
+        if (!isTargetControlled) {
+            setUncontrolledTarget((current) => {
+                if (current
+                    && getAnnotatedTargetKey(current) === requestedTargetKey
+                    && current.taskReferenceLabel === requestedTarget.taskReferenceLabel
+                    && current.imageReferenceLabel === requestedTarget.imageReferenceLabel
+                    && current.displayName === requestedTarget.displayName) {
+                    return current;
+                }
+                return requestedTarget;
+            });
+        }
+        if (!sessionLoadReady) {
+            const shouldDeferRequestedTarget = Boolean(requestedTargetKey
+                && (requestedTargetKey !== lastLoadedTargetKeyRef.current
+                    || requestedOpenVersion !== lastHandledRequestedOpenVersionRef.current)
+                && requestedTargetKey !== deferredTargetKeyRef.current);
+            if (shouldDeferRequestedTarget) {
+                resetForTargetLoad(requestedTarget);
+                deferredTargetKeyRef.current = requestedTargetKey;
+                lastHandledRequestedOpenVersionRef.current = requestedOpenVersion;
+                logBootstrapDebug('annotated_sessions_load_deferred', {
+                    assetId: requestedTarget.assetId,
+                    taskId: requestedTarget.taskId || null,
+                    requestedTargetKey,
+                });
+            }
+            onRequestedTargetHandled?.();
+            return;
+        }
+        const shouldReloadRequestedTarget = Boolean(requestedTargetKey
+            && (requestedTargetKey !== lastLoadedTargetKeyRef.current
+                || requestedOpenVersion !== lastHandledRequestedOpenVersionRef.current));
+        if (shouldReloadRequestedTarget) {
+            resetForTargetLoad(requestedTarget);
+            lastLoadedTargetKeyRef.current = requestedTargetKey;
+            lastHandledRequestedOpenVersionRef.current = requestedOpenVersion;
+            deferredTargetKeyRef.current = '';
+            void loadSessions(requestedTarget, { autoCreateIfEmpty: true });
+        }
+        onRequestedTargetHandled?.();
+    }, [isTargetControlled, loadSessions, onRequestedTargetHandled, requestedOpenVersion, requestedTarget, requestedTargetKey, resetForTargetLoad, requestedSessionId, sessionLoadReady]);
+    useEffect(() => {
+        if (!activeTarget)
+            return;
+        onContextChange?.({ target: activeTarget, sessionId: selectedSessionId });
+    }, [activeTarget, onContextChange, selectedSessionId]);
+    useEffect(() => {
+        if (!activeTarget || typeof document === 'undefined' || !sessionLoadReady)
+            return undefined;
+        const reloadIfIdle = () => {
+            if (Date.now() < suppressVisibilityReloadUntilRef.current)
+                return;
+            if (currentDraftSnapshotRef.current !== lastSavedSnapshotRef.current || saving || loading)
+                return;
+            void loadSessions(activeTarget, { requestedSessionId: selectedSessionId });
+        };
+        const handleVisibilityChange = () => {
+            if (document.visibilityState !== 'visible')
+                return;
+            reloadIfIdle();
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, [activeTarget, loadSessions, loading, saving, selectedSessionId, sessionLoadReady]);
+    useEffect(() => {
+        if (!activeTarget?.path) {
+            setImageLoading(false);
+            setImageLoadError(false);
+            setNaturalImageSize({ width: 0, height: 0 });
+            return;
+        }
+        setImageLoading(true);
+        setImageLoadError(false);
+        setNaturalImageSize({ width: 0, height: 0 });
+        setZoomLevel(1);
+        setPanMode(false);
+    }, [activeTarget?.path]);
+    useEffect(() => {
+        if (!imageLoading)
+            return;
+        const image = imageRef.current;
+        if (!image || !image.complete || image.naturalWidth <= 0 || image.naturalHeight <= 0)
+            return;
+        setNaturalImageSize({
+            width: image.naturalWidth,
+            height: image.naturalHeight,
+        });
+        setImageLoading(false);
+        setImageLoadError(false);
+    }, [activeTarget?.path, imageLoading]);
+    useEffect(() => {
+        if (canPan)
+            return;
+        setPanMode(false);
+    }, [canPan]);
+    useEffect(() => {
+        setPayloadPreview(null);
+    }, [selectedSessionId]);
+    useEffect(() => {
+        currentDraftSnapshotRef.current = currentDraftSnapshot;
+        if (suppressAutoSaveRef.current) {
+            suppressAutoSaveRef.current = false;
+            return;
+        }
+        if (!selectedSessionId) {
+            clearPendingAutoSave();
+            setLastSaveError(null);
+            setSaveState('saved');
+            return;
+        }
+        if (currentDraftSnapshot === lastSavedSnapshotRef.current) {
+            clearPendingAutoSave();
+            if (!inFlightPromiseRef.current) {
+                setLastSaveError(null);
+                setSaveState('saved');
+            }
+            return;
+        }
+        const pendingDelayMs = pendingDebounceMsRef.current;
+        pendingDebounceMsRef.current = null;
+        if (saveState === 'error' && pendingDelayMs === null) {
+            return;
+        }
+        const delayMs = pendingDelayMs ?? 600;
+        if (inFlightPromiseRef.current) {
+            hasPendingSaveAfterFlightRef.current = true;
+            setSaveState('pending');
+            return;
+        }
+        scheduleAutoSave(delayMs);
+    }, [clearPendingAutoSave, currentDraftSnapshot, saveState, scheduleAutoSave, selectedSessionId]);
+    useEffect(() => {
+        if (!selectedSessionId)
+            return;
+        if (inFlightPromiseRef.current)
+            return;
+        if (currentDraftSnapshot !== lastSavedSnapshotRef.current)
+            return;
+        if (saveState === 'error')
+            return;
+        if (saveState === 'saved')
+            return;
+        setLastSaveError(null);
+        setSaveState('saved');
+    }, [currentDraftSnapshot, saveState, selectedSessionId]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return undefined;
+        const handleBeforeUnload = (event) => {
+            if (currentDraftSnapshotRef.current === lastSavedSnapshotRef.current)
+                return;
+            event.preventDefault();
+            event.returnValue = '';
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+    }, []);
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return undefined;
+        const handleVisibilityChange = () => {
+            if (document.visibilityState !== 'hidden')
+                return;
+            void flushPendingDraft('visibility-hidden');
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+    }, [flushPendingDraft]);
+    useEffect(() => {
+        if (!colorPickerOpen || typeof document === 'undefined')
+            return undefined;
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (!(target instanceof Node))
+                return;
+            if (colorPickerRef.current?.contains(target))
+                return;
+            setColorPickerOpen(false);
+        };
+        document.addEventListener('mousedown', handlePointerDown);
+        return () => document.removeEventListener('mousedown', handlePointerDown);
+    }, [colorPickerOpen]);
+    useEffect(() => {
+        if (!sessionCardEditing || typeof document === 'undefined')
+            return undefined;
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (!(target instanceof Node))
+                return;
+            if (sessionCardRef.current?.contains(target))
+                return;
+            setSessionCardEditing(false);
+        };
+        document.addEventListener('mousedown', handlePointerDown);
+        return () => document.removeEventListener('mousedown', handlePointerDown);
+    }, [sessionCardEditing]);
+    useEffect(() => () => {
+        clearPendingAutoSave();
+    }, [clearPendingAutoSave]);
+    useEffect(() => {
+        if (!payloadCopied)
+            return;
+        const timeoutId = window.setTimeout(() => setPayloadCopied(false), 2000);
+        return () => window.clearTimeout(timeoutId);
+    }, [payloadCopied]);
+    useEffect(() => {
+        if (!taskIdCopied)
+            return;
+        const timeoutId = window.setTimeout(() => setTaskIdCopied(false), 2000);
+        return () => window.clearTimeout(timeoutId);
+    }, [taskIdCopied]);
+    useEffect(() => {
+        if (!imageIdCopied)
+            return;
+        const timeoutId = window.setTimeout(() => setImageIdCopied(false), 2000);
+        return () => window.clearTimeout(timeoutId);
+    }, [imageIdCopied]);
+    const updateDraftAnnotation = useCallback((annotationId, updater, delayMs = 300) => {
+        setDraftAnnotations((current) => normalizeOrder(current.map((annotation) => (annotation.id === annotationId
+            ? updater(annotation)
+            : annotation))));
+        markDraftChanged(delayMs);
+    }, [markDraftChanged]);
+    const applyMarkerColor = useCallback((color) => {
+        if (!selectedAnnotation)
+            return;
+        updateDraftAnnotation(selectedAnnotation.id, (annotation) => ({
+            ...annotation,
+            color,
+        }));
+        setDefaultMarkerColor(color);
+        setColorPickerOpen(false);
+    }, [selectedAnnotation, updateDraftAnnotation]);
+    const createSession = useCallback(async () => {
+        if (!activeTarget)
+            return;
+        const flushed = await flushPendingDraft('session-switch');
+        if (!flushed)
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            const session = await createSessionForTarget(activeTarget);
+            setShowCreateSessionPrompt(false);
+            await loadSessions(activeTarget, { requestedSessionId: session.id, autoCreateIfEmpty: false });
+            setToolMode('select');
+        }
+        catch (requestError) {
+            setError(requestError instanceof Error ? requestError.message : 'Failed to create session.');
+            setShowCreateSessionPrompt(true);
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [activeTarget, createSessionForTarget, flushPendingDraft, loadSessions]);
+    const handleToolSelection = useCallback((toolValue) => {
+        if (toolValue !== 'select' && !selectedSession) {
+            setPanMode(false);
+            setError('No session exists for this image yet.');
+            setShowCreateSessionPrompt(true);
+            return;
+        }
+        setError(null);
+        setShowCreateSessionPrompt(false);
+        setPanMode(false);
+        setToolMode(toolValue);
+    }, [selectedSession]);
+    const duplicateSelectedSession = useCallback(async () => {
+        if (!activeTarget || !selectedSession)
+            return;
+        const flushed = await flushPendingDraft('duplicate');
+        if (!flushed)
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            const clonedAnnotations = normalizeOrder(draftAnnotations.map((annotation, index) => cloneAnnotation(annotation, index)));
+            const res = await fetchTaskforceApi(`/api/taskforce/annotated-attachments/sessions?${workspaceQuery}`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json', ...requestHeaders },
+                body: JSON.stringify({
+                    taskId: activeTarget.taskId,
+                    baseImageAssetId: activeTarget.assetId,
+                    title: buildDuplicateSessionTitle(draftTitle || selectedSession.title, activeTarget),
+                    globalInstruction: draftGlobalInstruction,
+                    annotations: clonedAnnotations,
+                }),
+            }, resolvedApiBase);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                throw new Error(String(data?.error || 'Failed to duplicate session.'));
+            }
+            const session = data?.session;
+            if (!session?.id) {
+                throw new Error('Failed to duplicate session.');
+            }
+            applySessionLocally(session);
+            setToolMode('select');
+        }
+        catch (requestError) {
+            setError(requestError instanceof Error ? requestError.message : 'Failed to duplicate session.');
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [
+        activeTarget,
+        draftAnnotations,
+        draftGlobalInstruction,
+        draftTitle,
+        applySessionLocally,
+        flushPendingDraft,
+        requestHeaders,
+        resolvedApiBase,
+        selectedSession,
+        workspaceQuery,
+    ]);
+    const saveSession = useCallback(async () => {
+        return flushPendingDraft('manual');
+    }, [flushPendingDraft]);
+    const loadPayloadPreview = useCallback(async () => {
+        if (!selectedSessionId)
+            return;
+        setPayloadLoading(true);
+        setError(null);
+        try {
+            const res = await fetchTaskforceApi(`/api/taskforce/annotated-attachments/sessions/${encodeURIComponent(selectedSessionId)}/payload?${workspaceQuery}`, {
+                credentials: 'include',
+                headers: requestHeaders,
+            }, resolvedApiBase);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                throw new Error(String(data?.error || 'Failed to load payload preview.'));
+            }
+            setPayloadPreview(data?.payload || null);
+        }
+        catch (requestError) {
+            setError(requestError instanceof Error ? requestError.message : 'Failed to load payload preview.');
+        }
+        finally {
+            setPayloadLoading(false);
+        }
+    }, [requestHeaders, resolvedApiBase, selectedSessionId, workspaceQuery]);
+    const openPayloadPreview = useCallback(() => {
+        if (!selectedSessionId)
+            return;
+        void flushPendingDraft('payload-preview').then((saved) => {
+            if (!saved)
+                return;
+            setPayloadModalOpen(true);
+            void loadPayloadPreview();
+        });
+    }, [flushPendingDraft, loadPayloadPreview, selectedSessionId]);
+    const copyPayloadContent = useCallback(async (mode) => {
+        if (!payloadPreview || !navigator.clipboard || typeof navigator.clipboard.writeText !== 'function') {
+            setError('Clipboard copy is not available in this browser.');
+            return;
+        }
+        try {
+            const text = mode === 'json'
+                ? JSON.stringify(payloadPreview, null, 2)
+                : buildPayloadBrief(payloadPreview);
+            await navigator.clipboard.writeText(text);
+            setPayloadCopied(mode);
+        }
+        catch (copyError) {
+            setError(copyError instanceof Error ? copyError.message : 'Failed to copy payload content.');
+            setPayloadCopied(false);
+        }
+    }, [payloadPreview]);
+    const copyTaskId = useCallback(async () => {
+        if (!activeTaskReferenceLabel || !navigator.clipboard || typeof navigator.clipboard.writeText !== 'function') {
+            setError('Clipboard copy is not available in this browser.');
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(activeTaskReferenceLabel);
+            setTaskIdCopied(true);
+        }
+        catch (copyError) {
+            setError(copyError instanceof Error ? copyError.message : 'Failed to copy task id.');
+            setTaskIdCopied(false);
+        }
+    }, [activeTaskReferenceLabel]);
+    const copyImageId = useCallback(async () => {
+        if (!activeImageReferenceLabel || !navigator.clipboard || typeof navigator.clipboard.writeText !== 'function') {
+            setError('Clipboard copy is not available in this browser.');
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(activeImageReferenceLabel);
+            setImageIdCopied(true);
+        }
+        catch (copyError) {
+            setError(copyError instanceof Error ? copyError.message : 'Failed to copy image reference.');
+            setImageIdCopied(false);
+        }
+    }, [activeImageReferenceLabel]);
+    const deleteSelectedSession = useCallback(async () => {
+        if (!selectedSessionId)
+            return;
+        const flushed = await flushPendingDraft('delete-session');
+        if (!flushed)
+            return;
+        const sessionTitle = (selectedSession?.title || 'Untitled session').trim() || 'Untitled session';
+        if (!window.confirm(`Delete the annotated attachment session "${sessionTitle}"?`))
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            const res = await fetchTaskforceApi(`/api/taskforce/annotated-attachments/sessions/${encodeURIComponent(selectedSessionId)}?${workspaceQuery}`, {
+                method: 'DELETE',
+                credentials: 'include',
+                headers: requestHeaders,
+            }, resolvedApiBase);
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                throw new Error(String(data?.error || 'Failed to delete session.'));
+            }
+            removeSessionLocally(selectedSessionId);
+            setToolMode('select');
+        }
+        catch (requestError) {
+            setError(requestError instanceof Error ? requestError.message : 'Failed to delete session.');
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [flushPendingDraft, removeSessionLocally, requestHeaders, resolvedApiBase, selectedSession, selectedSessionId, workspaceQuery]);
+    const deleteSelectedAnnotation = useCallback(() => {
+        if (!selectedAnnotationId)
+            return;
+        setDraftAnnotations((current) => normalizeOrder(current.filter((annotation) => annotation.id !== selectedAnnotationId)));
+        setSelectedAnnotationId(null);
+        markDraftChanged(300);
+    }, [markDraftChanged, selectedAnnotationId]);
+    const applyZoom = useCallback((nextZoomValue) => {
+        const nextZoom = clampZoom(nextZoomValue);
+        const scroller = canvasScrollerRef.current;
+        if (!scroller || nextZoom === zoomLevel) {
+            setZoomLevel(nextZoom);
+            return;
+        }
+        const nextScrollLeft = ((scroller.scrollLeft + scroller.clientWidth / 2) * (nextZoom / zoomLevel)) - scroller.clientWidth / 2;
+        const nextScrollTop = ((scroller.scrollTop + scroller.clientHeight / 2) * (nextZoom / zoomLevel)) - scroller.clientHeight / 2;
+        setZoomLevel(nextZoom);
+        window.requestAnimationFrame(() => {
+            scroller.scrollLeft = Math.max(0, nextScrollLeft);
+            scroller.scrollTop = Math.max(0, nextScrollTop);
+        });
+    }, [zoomLevel]);
+    const zoomIn = useCallback(() => {
+        applyZoom(zoomLevel + 0.25);
+    }, [applyZoom, zoomLevel]);
+    const zoomOut = useCallback(() => {
+        applyZoom(zoomLevel - 0.25);
+    }, [applyZoom, zoomLevel]);
+    const resetZoom = useCallback(() => {
+        applyZoom(1);
+        const scroller = canvasScrollerRef.current;
+        if (!scroller)
+            return;
+        window.requestAnimationFrame(() => {
+            scroller.scrollLeft = 0;
+            scroller.scrollTop = 0;
+        });
+    }, [applyZoom]);
+    const moveSelectedAnnotation = useCallback((direction) => {
+        if (!selectedAnnotationId)
+            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)
+                return current;
+            markDraftChanged(300);
+            return moveAnnotation(current, fromIndex, toIndex);
+        });
+    }, [markDraftChanged, selectedAnnotationId]);
+    useEffect(() => {
+        if (!selectedAnnotationId)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Delete')
+                return;
+            if (isEditableKeyboardTarget(event.target))
+                return;
+            event.preventDefault();
+            deleteSelectedAnnotation();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [deleteSelectedAnnotation, selectedAnnotationId]);
+    const readPoint = useCallback((event) => {
+        const rect = overlayRef.current?.getBoundingClientRect();
+        if (!rect || rect.width <= 0 || rect.height <= 0)
+            return null;
+        return {
+            x: clamp01((event.clientX - rect.left) / rect.width),
+            y: clamp01((event.clientY - rect.top) / rect.height),
+        };
+    }, []);
+    const handleCanvasPointerDown = useCallback((event) => {
+        if (panMode && canPan) {
+            const scroller = canvasScrollerRef.current;
+            if (!scroller)
+                return;
+            panRef.current = {
+                pointerId: event.pointerId,
+                startX: event.clientX,
+                startY: event.clientY,
+                scrollLeft: scroller.scrollLeft,
+                scrollTop: scroller.scrollTop,
+            };
+            event.currentTarget.setPointerCapture(event.pointerId);
+            event.preventDefault();
+            return;
+        }
+        if (!selectedSessionId)
+            return;
+        if (toolMode === 'select') {
+            setSelectedAnnotationId(null);
+            return;
+        }
+        const point = readPoint(event);
+        if (!point)
+            return;
+        if (toolMode === 'pin' || toolMode === 'text-note') {
+            const annotation = createAnnotation(toolMode, point, point, defaultMarkerColor);
+            setDraftAnnotations((current) => normalizeOrder([...current, annotation]));
+            setSelectedAnnotationId(annotation.id);
+            markDraftChanged(300);
+            setToolMode('select');
+            return;
+        }
+        gestureStartRef.current = point;
+        const annotation = createAnnotation(toolMode, point, point, defaultMarkerColor);
+        creatingAnnotationRef.current = {
+            annotationId: annotation.id,
+            kind: toolMode,
+        };
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        setDraftAnnotations((current) => normalizeOrder([...current, annotation]));
+        setSelectedAnnotationId(annotation.id);
+        markDraftChanged(300);
+    }, [canPan, defaultMarkerColor, markDraftChanged, panMode, readPoint, selectedSessionId, toolMode]);
+    const handleCanvasPointerUp = useCallback((event) => {
+        if (panRef.current?.pointerId === event.pointerId) {
+            event.currentTarget.releasePointerCapture?.(event.pointerId);
+            return;
+        }
+        if (!gestureStartRef.current || !creatingAnnotationRef.current || (toolMode !== 'box' && toolMode !== 'arrow'))
+            return;
+        const end = readPoint(event);
+        gestureStartRef.current = null;
+        creatingAnnotationRef.current = null;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        if (!end)
+            return;
+        setToolMode('select');
+    }, [readPoint, toolMode]);
+    const startDragAnnotation = useCallback((event, annotation) => {
+        if (toolMode !== 'select' || panMode)
+            return;
+        const point = readPoint(event);
+        if (!point)
+            return;
+        dragRef.current = {
+            annotationId: annotation.id,
+            originPointer: point,
+            originAnnotation: annotation,
+        };
+        setSelectedAnnotationId(annotation.id);
+        event.stopPropagation();
+    }, [panMode, readPoint, toolMode]);
+    const handleCanvasPointerMove = useCallback((event) => {
+        if (panRef.current?.pointerId === event.pointerId) {
+            const scroller = canvasScrollerRef.current;
+            if (!scroller)
+                return;
+            const dx = event.clientX - panRef.current.startX;
+            const dy = event.clientY - panRef.current.startY;
+            scroller.scrollLeft = panRef.current.scrollLeft - dx;
+            scroller.scrollTop = panRef.current.scrollTop - dy;
+            return;
+        }
+        if (creatingAnnotationRef.current && gestureStartRef.current) {
+            const point = readPoint(event);
+            if (!point)
+                return;
+            const { annotationId, kind } = creatingAnnotationRef.current;
+            const start = gestureStartRef.current;
+            updateDraftAnnotation(annotationId, (annotation) => {
+                if (kind === 'box' && annotation.kind === 'box') {
+                    return {
+                        ...annotation,
+                        x: clamp01(Math.min(start.x, point.x)),
+                        y: clamp01(Math.min(start.y, point.y)),
+                        width: clampSize(Math.abs(point.x - start.x)),
+                        height: clampSize(Math.abs(point.y - start.y)),
+                    };
+                }
+                if (kind === 'arrow' && annotation.kind === 'arrow') {
+                    return {
+                        ...annotation,
+                        x: start.x,
+                        y: start.y,
+                        x2: point.x,
+                        y2: point.y,
+                    };
+                }
+                return annotation;
+            });
+            return;
+        }
+        if (resizeRef.current) {
+            const point = readPoint(event);
+            if (!point)
+                return;
+            const { annotationId, originPointer, originAnnotation } = resizeRef.current;
+            const dx = point.x - originPointer.x;
+            const dy = point.y - originPointer.y;
+            updateDraftAnnotation(annotationId, () => ({
+                ...originAnnotation,
+                width: clampSize(originAnnotation.width + dx),
+                height: clampSize(originAnnotation.height + dy),
+            }));
+            return;
+        }
+        if (arrowHandleRef.current) {
+            const point = readPoint(event);
+            if (!point)
+                return;
+            const { annotationId, endpoint, originPointer, originAnnotation } = arrowHandleRef.current;
+            const dx = point.x - originPointer.x;
+            const dy = point.y - originPointer.y;
+            updateDraftAnnotation(annotationId, () => {
+                if (endpoint === 'tail') {
+                    return {
+                        ...originAnnotation,
+                        x: clamp01(originAnnotation.x + dx),
+                        y: clamp01(originAnnotation.y + dy),
+                    };
+                }
+                return {
+                    ...originAnnotation,
+                    x2: clamp01(originAnnotation.x2 + dx),
+                    y2: clamp01(originAnnotation.y2 + dy),
+                };
+            });
+            return;
+        }
+        if (!dragRef.current)
+            return;
+        const point = readPoint(event);
+        if (!point)
+            return;
+        const { annotationId, originPointer, originAnnotation } = dragRef.current;
+        const dx = point.x - originPointer.x;
+        const dy = point.y - originPointer.y;
+        updateDraftAnnotation(annotationId, () => {
+            if (originAnnotation.kind === 'pin' || originAnnotation.kind === 'text-note') {
+                return {
+                    ...originAnnotation,
+                    x: clamp01(originAnnotation.x + dx),
+                    y: clamp01(originAnnotation.y + dy),
+                };
+            }
+            if (originAnnotation.kind === 'box') {
+                return {
+                    ...originAnnotation,
+                    x: clamp01(originAnnotation.x + dx),
+                    y: clamp01(originAnnotation.y + dy),
+                };
+            }
+            return {
+                ...originAnnotation,
+                x: clamp01(originAnnotation.x + dx),
+                y: clamp01(originAnnotation.y + dy),
+                x2: clamp01(originAnnotation.x2 + dx),
+                y2: clamp01(originAnnotation.y2 + dy),
+            };
+        });
+    }, [readPoint, updateDraftAnnotation]);
+    const handleCanvasPointerLeave = useCallback(() => {
+        gestureStartRef.current = null;
+        dragRef.current = null;
+        resizeRef.current = null;
+        arrowHandleRef.current = null;
+        creatingAnnotationRef.current = null;
+        panRef.current = null;
+    }, []);
+    const handleCanvasPointerCancel = useCallback(() => {
+        gestureStartRef.current = null;
+        dragRef.current = null;
+        resizeRef.current = null;
+        arrowHandleRef.current = null;
+        creatingAnnotationRef.current = null;
+        panRef.current = null;
+    }, []);
+    const handleCanvasPointerEnd = useCallback(() => {
+        dragRef.current = null;
+        resizeRef.current = null;
+        arrowHandleRef.current = null;
+        creatingAnnotationRef.current = null;
+        panRef.current = null;
+    }, []);
+    const startResizeBox = useCallback((event, annotation) => {
+        if (toolMode !== 'select' || panMode)
+            return;
+        const point = readPoint(event);
+        if (!point)
+            return;
+        resizeRef.current = {
+            annotationId: annotation.id,
+            originPointer: point,
+            originAnnotation: annotation,
+        };
+        setSelectedAnnotationId(annotation.id);
+        event.stopPropagation();
+    }, [panMode, readPoint, toolMode]);
+    const startArrowHandleDrag = useCallback((event, annotation, endpoint) => {
+        if (toolMode !== 'select' || panMode)
+            return;
+        const point = readPoint(event);
+        if (!point)
+            return;
+        arrowHandleRef.current = {
+            annotationId: annotation.id,
+            originPointer: point,
+            originAnnotation: annotation,
+            endpoint,
+        };
+        setSelectedAnnotationId(annotation.id);
+        event.stopPropagation();
+    }, [panMode, readPoint, toolMode]);
+    const activeSessionTimestamp = selectedSession?.updatedAt ? formatTimestamp(selectedSession.updatedAt) : 'Not saved yet';
+    return (_jsxs("div", { className: styles.shell, children: [_jsxs("section", { className: `tf-surface-panel ${styles.panel} ${styles.sessionPanel}`, children: [_jsx("div", { className: styles.sessionContextBar, children: activeTarget?.taskId ? (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.sessionContextLeft, children: onBackToTask ? (_jsx("button", { type: "button", className: `tf-button-ghost tf-button-compact ${styles.ghostBtn} ${styles.backToTaskBtn}`, onClick: () => {
+                                            void flushPendingDraft('back-to-task').then((saved) => {
+                                                if (!saved)
+                                                    return;
+                                                if (activeTarget.taskId)
+                                                    onBackToTask(activeTarget.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) => {
+                            const isSelected = selectedSessionId === session.id;
+                            const isEditingSelectedSession = isSelected && sessionCardEditing;
+                            const preview = sessionInstructionPreview(isSelected ? draftGlobalInstruction : session.globalInstruction);
+                            const sessionTitle = (isSelected ? draftTitle : session.title) || 'Untitled session';
+                            return (_jsxs("div", { className: `tf-surface-elevated ${styles.sessionCard} ${isSelected ? styles.sessionCardActive : ''}`, ref: isSelected ? sessionCardRef : undefined, onBlur: isEditingSelectedSession
+                                    ? (event) => {
+                                        const nextTarget = event.relatedTarget;
+                                        if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget))
+                                            return;
+                                        setSessionCardEditing(false);
+                                    }
+                                    : undefined, children: [isEditingSelectedSession ? (_jsxs("div", { className: styles.sessionCardBody, children: [_jsxs("div", { className: styles.sessionMeta, children: [_jsx("label", { className: "tf-field-label", htmlFor: "annotated-session-title", children: "Session title" }), _jsx("input", { id: "annotated-session-title", className: `tf-field-shell ${styles.textInput} ${styles.sessionTitleInput}`, value: draftTitle, onChange: (event) => {
+                                                            setDraftTitle(event.target.value);
+                                                            markDraftChanged(600);
+                                                        }, placeholder: "Session title" }), _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, _jsxs("div", { className: styles.sessionInstructionEditor, children: [_jsx("label", { className: "tf-field-label", htmlFor: "annotated-session-instruction", children: "Session instruction" }), _jsx("textarea", { id: "annotated-session-instruction", className: `tf-field-shell ${styles.textArea} ${styles.sessionInstructionField}`, value: draftGlobalInstruction, onChange: (event) => {
+                                                            setDraftGlobalInstruction(event.target.value);
+                                                            markDraftChanged(600);
+                                                        }, placeholder: "Add overall instructions, context, or framing for this session." })] }), _jsxs("div", { className: `tf-text-secondary ${styles.annotationSummary}`, children: [session.annotations.length, " annotation", session.annotations.length === 1 ? '' : 's'] })] })) : (_jsxs("button", { type: "button", className: styles.sessionCardButton, onClick: () => {
+                                            if (isSelected) {
+                                                setSessionCardEditing(true);
+                                                return;
+                                            }
+                                            void flushPendingDraft('session-switch').then((saved) => {
+                                                if (!saved)
+                                                    return;
+                                                setSelectedSessionId(session.id);
+                                                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: () => {
+                                            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} ${panMode ? 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) => {
+                                    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: {
+                                                        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: () => {
+                                                                const image = imageRef.current;
+                                                                setNaturalImageSize({
+                                                                    width: image?.naturalWidth || 0,
+                                                                    height: image?.naturalHeight || 0,
+                                                                });
+                                                                setImageLoading(false);
+                                                                setImageLoadError(false);
+                                                            }, onError: () => {
+                                                                setNaturalImageSize({ width: 0, height: 0 });
+                                                                setImageLoading(false);
+                                                                setImageLoadError(true);
+                                                            } }), !imageLoading && !imageLoadError && selectedSession ? (_jsxs("div", { ref: overlayRef, className: `${styles.overlay} ${toolMode === 'select' ? styles.overlaySelect : ''} ${panMode && canPan ? styles.overlayPan : ''}`, onPointerDown: handleCanvasPointerDown, onPointerMove: handleCanvasPointerMove, onPointerUp: (event) => {
+                                                                handleCanvasPointerUp(event);
+                                                                handleCanvasPointerEnd();
+                                                            }, "data-testid": "annotated-attachment-overlay", onPointerLeave: handleCanvasPointerLeave, onPointerCancel: handleCanvasPointerCancel, children: [_jsx("svg", { className: styles.overlaySvg, viewBox: arrowOverlayViewBox, preserveAspectRatio: "none", "aria-hidden": "true", children: draftAnnotations.filter((annotation) => annotation.kind === 'arrow').map((annotation) => {
+                                                                        const geometry = getArrowGeometry(annotation, canvasMediaSize);
+                                                                        const color = mapMarkerColor(annotation);
+                                                                        const isSelected = selectedAnnotationId === annotation.id;
+                                                                        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);
+                                                                                } }), 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}%`,
+                                                                        backgroundColor: mapMarkerColor(annotation),
+                                                                    }, "aria-hidden": "true", children: annotationOrderNumbers.get(annotation.id) || 0 }, `arrow-number-${annotation.id}`))), draftAnnotations.filter((annotation) => annotation.kind !== 'arrow').map((annotation) => {
+                                                                    const color = mapMarkerColor(annotation);
+                                                                    const annotationOrderNumber = annotationOrderNumbers.get(annotation.id) || 0;
+                                                                    const sharedProps = {
+                                                                        onPointerDown: (event) => startDragAnnotation(event, annotation),
+                                                                        onClick: (event) => {
+                                                                            event.stopPropagation();
+                                                                            setSelectedAnnotationId(annotation.id);
+                                                                        },
+                                                                    };
+                                                                    if (annotation.kind === 'pin') {
+                                                                        return (_jsx("button", { type: "button", ...sharedProps, className: `${styles.pin} ${selectedAnnotationId === annotation.id ? styles.selected : ''}`, style: { left: `${annotation.x * 100}%`, top: `${annotation.y * 100}%`, backgroundColor: color }, children: annotationOrderNumber }, annotation.id));
+                                                                    }
+                                                                    if (annotation.kind === 'text-note') {
+                                                                        return (_jsx("button", { type: "button", ...sharedProps, className: `${styles.note} ${selectedAnnotationId === annotation.id ? styles.selected : ''}`, style: { left: `${annotation.x * 100}%`, top: `${annotation.y * 100}%`, backgroundColor: color }, children: annotationOrderNumber }, annotation.id));
+                                                                    }
+                                                                    return (_jsxs("div", { className: `${styles.box} ${selectedAnnotationId === annotation.id ? styles.selected : ''}`, style: {
+                                                                            left: `${annotation.x * 100}%`,
+                                                                            top: `${annotation.y * 100}%`,
+                                                                            width: `${annotation.width * 100}%`,
+                                                                            height: `${annotation.height * 100}%`,
+                                                                            borderColor: color,
+                                                                        }, children: [_jsx("span", { className: `${styles.annotationNumberBadge} ${styles.boxNumberBadge}`, style: { backgroundColor: color }, "aria-hidden": "true", children: annotationOrderNumber }), _jsx("button", { type: "button", ...sharedProps, className: styles.boxSurface, "aria-label": `Box marker ${annotationOrderNumber}` })] }, annotation.id));
+                                                                }), _jsx("svg", { className: styles.overlaySvg, viewBox: arrowOverlayViewBox, preserveAspectRatio: "none", children: draftAnnotations.filter((annotation) => annotation.kind === 'box' && selectedAnnotationId === annotation.id).map((annotation) => (_jsxs(React.Fragment, { children: [_jsx("circle", { cx: (annotation.x + annotation.width) * canvasMediaSize.width, cy: (annotation.y + annotation.height) * canvasMediaSize.height, r: arrowHandleGeometry.hitRadius, className: `${styles.canvasHandleHit} ${styles.canvasResizeHandleHit}`, role: "button", tabIndex: 0, "aria-label": "Resize box marker", onPointerDown: (event) => startResizeBox(event, annotation) }), _jsx("circle", { cx: (annotation.x + annotation.width) * canvasMediaSize.width, cy: (annotation.y + annotation.height) * canvasMediaSize.height, r: arrowHandleGeometry.visibleRadius, className: styles.canvasHandleVisible, "aria-hidden": "true" })] }, `box-handle-${annotation.id}`))) })] })) : null] }) })] })) }) })] }), _jsxs("div", { className: styles.statusBar, children: [_jsx("span", { children: saveState === 'error'
+                                    ? '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.' : panMode && canPan ? '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: () => {
+                    if (openingImage)
+                        return;
+                    setOpenImageModalOpen(false);
+                    setOpenImageReference('');
+                }, title: "Open Image", size: "sm", children: _jsxs("form", { className: styles.openImageModalBody, onSubmit: (event) => {
+                        event.preventDefault();
+                        void openImageByReference();
+                    }, 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'
+                                ? 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." }) }))] }) })] }));
+}