@taskforcehq/taskforce 0.3.169 → 0.3.300

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

@@ -0,0 +1,2831 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { AnnotatedAttachmentWorkspaceShell } from './AnnotatedAttachmentWorkspace';
+const { fetchTaskforceApi } = vi.hoisted(() => ({
+    fetchTaskforceApi: vi.fn(),
+}));
+vi.mock('../../utils/taskforceApiClient', () => ({
+    fetchTaskforceApi,
+    resolveTaskforceApiUrl: (path) => path,
+}));
+function buildSessionResponse(overrides) {
+    return {
+        id: 'session-1',
+        tenantId: 'tenant-1',
+        workspaceId: 'workspace-1',
+        taskId: 'task-1',
+        baseImageAssetId: 'asset-image-1',
+        title: 'Homepage shot review',
+        globalInstruction: '',
+        annotations: [],
+        createdByActorId: 'user-1',
+        updatedByActorId: 'user-1',
+        createdAt: '2026-03-25T12:00:00.000Z',
+        updatedAt: '2026-03-25T12:00:00.000Z',
+        deletedAt: null,
+        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+        ...overrides,
+    };
+}
+function mockAutoCreateFirstSession(sessionOverrides) {
+    const session = buildSessionResponse(sessionOverrides);
+    fetchTaskforceApi
+        .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({
+            sessions: [],
+        }),
+    })
+        .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({
+            session,
+        }),
+    });
+    return session;
+}
+function escapeForRegex(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+async function findSessionCard(title) {
+    const pattern = new RegExp(escapeForRegex(title), 'i');
+    const matchingInput = screen.queryByDisplayValue(pattern);
+    if (matchingInput)
+        return matchingInput;
+    const matchingText = await screen.findByText(pattern);
+    return matchingText.closest('button') ?? matchingText;
+}
+describe('AnnotatedAttachmentWorkspaceShell', () => {
+    beforeEach(() => {
+        fetchTaskforceApi.mockReset();
+        if (typeof window.ResizeObserver === 'undefined') {
+            class ResizeObserverMock {
+                observe() { }
+                disconnect() { }
+                unobserve() { }
+            }
+            Object.defineProperty(window, 'ResizeObserver', {
+                configurable: true,
+                writable: true,
+                value: ResizeObserverMock,
+            });
+        }
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+    });
+    it('shows an image loading indicator until the canvas image finishes loading', async () => {
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'question',
+                                color: '#0f766e',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                imageReferenceLabel: 'I-22',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await screen.findByText('Loading image…')).toBeInTheDocument();
+        expect(screen.queryByTestId('annotated-attachment-overlay')).not.toBeInTheDocument();
+        fireEvent.load(screen.getByAltText('Homepage shot'));
+        await waitFor(() => {
+            expect(screen.queryByText('Loading image…')).not.toBeInTheDocument();
+        });
+        expect(screen.getByTestId('annotated-attachment-overlay')).toBeInTheDocument();
+    });
+    it('auto-creates the first session and still renders the image while it loads', async () => {
+        mockAutoCreateFirstSession();
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage shot review')).toBeInTheDocument();
+        expect(screen.getByText('Loading image…')).toBeInTheDocument();
+        fireEvent.load(screen.getByAltText('Homepage shot'));
+        await waitFor(() => {
+            expect(screen.queryByText('Loading image…')).not.toBeInTheDocument();
+        });
+        expect(screen.getByAltText('Homepage shot')).toBeInTheDocument();
+        expect(screen.getByTestId('annotated-attachment-overlay')).toBeInTheDocument();
+    });
+    it('warns and offers to create a session when a marker tool is clicked without an active session', async () => {
+        const user = userEvent.setup();
+        const session = buildSessionResponse({
+            id: 'session-recovered-1',
+            title: 'Recovered review',
+            taskId: 'task-1',
+        });
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ sessions: [] }),
+        })
+            .mockResolvedValueOnce({
+            ok: false,
+            json: async () => ({ error: 'Failed to create session.' }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ session }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ sessions: [session] }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await screen.findByText('Failed to create session.')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /pin tool/i }));
+        expect(screen.getByText('No session exists for this image yet.')).toBeInTheDocument();
+        const createNow = screen.getByRole('button', { name: /create one now/i });
+        expect(createNow).toBeInTheDocument();
+        await user.click(createNow);
+        expect(await findSessionCard('Recovered review')).toBeInTheDocument();
+    });
+    it('pastes a clipboard image into a new unattached image-notes session', async () => {
+        const user = userEvent.setup();
+        const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+            ok: true,
+            json: async () => ({
+                success: true,
+                assetId: 'asset-pasted-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-pasted-1.png',
+                displayName: 'Pasted image',
+                referenceLabel: 'I-24',
+            }),
+        });
+        Object.defineProperty(globalThis.navigator, 'clipboard', {
+            configurable: true,
+            value: {
+                read: vi.fn().mockResolvedValue([
+                    {
+                        types: ['image/png'],
+                        getType: vi.fn().mockResolvedValue(new Blob(['png'], { type: 'image/png' })),
+                    },
+                ]),
+            },
+        });
+        const fileReaderReadAsDataUrl = vi
+            .spyOn(FileReader.prototype, 'readAsDataURL')
+            .mockImplementation(function mockReadAsDataUrl() {
+            Object.defineProperty(this, 'result', {
+                configurable: true,
+                value: 'data:image/png;base64,cG5n',
+            });
+            this.onload?.call(this, new ProgressEvent('load'));
+        });
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ sessions: [] }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    id: 'session-pasted-1',
+                    taskId: '',
+                    baseImageAssetId: 'asset-pasted-1',
+                    title: 'Pasted image review',
+                }),
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1" }));
+        await user.click(screen.getByRole('button', { name: /paste image/i }));
+        await waitFor(() => expect(fetchSpy).toHaveBeenCalledWith('/api/taskforce/context-upload', expect.objectContaining({
+            method: 'POST',
+            credentials: 'include',
+        })));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(1, '/api/taskforce/annotated-attachments/sessions?workspaceId=workspace-1&imageAssetId=asset-pasted-1', expect.any(Object), ''));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions?workspaceId=workspace-1', expect.objectContaining({
+            method: 'POST',
+            body: expect.stringContaining('"baseImageAssetId":"asset-pasted-1"'),
+        }), ''));
+        expect(await screen.findByText('Unattached Image')).toBeInTheDocument();
+        expect(await findSessionCard('Pasted image review')).toBeInTheDocument();
+        fetchSpy.mockRestore();
+        fileReaderReadAsDataUrl.mockRestore();
+    });
+    it('opens an image by reference from the toolbar modal', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    buildSessionResponse({
+                        id: 'session-old-1',
+                        title: 'Homepage shot review',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                    }),
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                target: {
+                    assetId: 'asset-image-24',
+                    path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-24.png',
+                    displayName: 'Reference image',
+                    imageReferenceLabel: 'I-24',
+                },
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ sessions: [] }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    id: 'session-ref-1',
+                    taskId: '',
+                    baseImageAssetId: 'asset-image-24',
+                    title: 'Reference image review',
+                }),
+            }),
+        });
+        function ControlledOpenHarness() {
+            const [target, setTarget] = React.useState({
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                imageReferenceLabel: 'I-22',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            });
+            const [sessionId, setSessionId] = React.useState(null);
+            return (_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: target, requestedSessionId: sessionId, onOpenTarget: (nextTarget, options) => {
+                    setTarget(nextTarget);
+                    setSessionId(options?.sessionId ?? null);
+                } }));
+        }
+        render(_jsx(ControlledOpenHarness, {}));
+        expect(await findSessionCard('Homepage shot review')).toBeInTheDocument();
+        fireEvent.load(screen.getByAltText('Homepage shot'));
+        await user.click(screen.getByRole('button', { name: /open image/i }));
+        await user.type(screen.getByLabelText(/image reference number/i), 'I-24');
+        await user.click(screen.getByRole('button', { name: /^open$/i }));
+        await waitFor(() => {
+            expect(screen.getByAltText('Reference image')).toBeInTheDocument();
+            expect(screen.queryByAltText('Homepage shot')).not.toBeInTheDocument();
+        });
+    });
+    it('does not revert to the previous image while opening a pasted image in controlled mode', async () => {
+        const user = userEvent.setup();
+        const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+            ok: true,
+            json: async () => ({
+                success: true,
+                assetId: 'asset-pasted-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-pasted-1.png',
+                displayName: 'Pasted image',
+                referenceLabel: 'I-24',
+            }),
+        });
+        Object.defineProperty(globalThis.navigator, 'clipboard', {
+            configurable: true,
+            value: {
+                read: vi.fn().mockResolvedValue([
+                    {
+                        types: ['image/png'],
+                        getType: vi.fn().mockResolvedValue(new Blob(['png'], { type: 'image/png' })),
+                    },
+                ]),
+            },
+        });
+        const fileReaderReadAsDataUrl = vi
+            .spyOn(FileReader.prototype, 'readAsDataURL')
+            .mockImplementation(function mockReadAsDataUrl() {
+            Object.defineProperty(this, 'result', {
+                configurable: true,
+                value: 'data:image/png;base64,cG5n',
+            });
+            this.onload?.call(this, new ProgressEvent('load'));
+        });
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    buildSessionResponse({
+                        id: 'session-old-1',
+                        title: 'Homepage shot review',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                    }),
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ sessions: [] }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    id: 'session-pasted-1',
+                    taskId: '',
+                    baseImageAssetId: 'asset-pasted-1',
+                    title: 'Pasted image review',
+                }),
+            }),
+        });
+        function ControlledPasteHarness() {
+            const [target, setTarget] = React.useState({
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                imageReferenceLabel: 'I-22',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            });
+            const [sessionId, setSessionId] = React.useState(null);
+            return (_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: target, requestedSessionId: sessionId, onOpenTarget: (nextTarget, options) => {
+                    setTarget(nextTarget);
+                    setSessionId(options?.sessionId ?? null);
+                } }));
+        }
+        render(_jsx(ControlledPasteHarness, {}));
+        expect(await findSessionCard('Homepage shot review')).toBeInTheDocument();
+        fireEvent.load(screen.getByAltText('Homepage shot'));
+        await user.click(screen.getByRole('button', { name: /paste image/i }));
+        await waitFor(() => {
+            expect(screen.getByAltText('Pasted image')).toBeInTheDocument();
+            expect(screen.queryByAltText('Homepage shot')).not.toBeInTheDocument();
+        });
+        fetchSpy.mockRestore();
+        fileReaderReadAsDataUrl.mockRestore();
+    });
+    it('shows who created each session in the sessions list', async () => {
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await screen.findByText('Created by Alex')).toBeInTheDocument();
+    });
+    it('shows new box and arrow markers immediately while dragging them out', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    buildSessionResponse({
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                    }),
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        fireEvent.load(screen.getByAltText('Homepage shot'));
+        const overlay = screen.getByTestId('annotated-attachment-overlay');
+        Object.defineProperty(overlay, 'getBoundingClientRect', {
+            configurable: true,
+            value: () => ({
+                left: 0,
+                top: 0,
+                width: 100,
+                height: 100,
+                right: 100,
+                bottom: 100,
+                x: 0,
+                y: 0,
+                toJSON: () => ({}),
+            }),
+        });
+        await user.click(screen.getByRole('button', { name: /box tool\./i }));
+        fireEvent.pointerDown(overlay, { clientX: 20, clientY: 25 });
+        expect(screen.getByRole('button', { name: 'Box' })).toBeInTheDocument();
+        fireEvent.pointerMove(overlay, { clientX: 45, clientY: 55 });
+        fireEvent.pointerUp(overlay, { clientX: 45, clientY: 55 });
+        await user.click(screen.getByRole('button', { name: /arrow tool\./i }));
+        fireEvent.pointerDown(overlay, { clientX: 60, clientY: 30 });
+        expect(screen.getByRole('button', { name: 'Arrow' })).toBeInTheDocument();
+        fireEvent.pointerMove(overlay, { clientX: 80, clientY: 60 });
+        fireEvent.pointerUp(overlay, { clientX: 80, clientY: 60 });
+    });
+    it('updates the selected marker color and reuses it for new markers', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    buildSessionResponse({
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'review',
+                                color: '#7c3aed',
+                            },
+                        ],
+                    }),
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    title: 'Homepage review',
+                    globalInstruction: 'Review this screenshot',
+                    updatedAt: '2026-03-25T12:06:00.000Z',
+                    annotations: [
+                        {
+                            id: 'annotation-1',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect this button',
+                            markerType: 'review',
+                            color: '#dc2626',
+                        },
+                    ],
+                }),
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    title: 'Homepage review',
+                    globalInstruction: 'Review this screenshot',
+                    updatedAt: '2026-03-25T12:07:00.000Z',
+                    annotations: [
+                        {
+                            id: 'annotation-1',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect this button',
+                            markerType: 'review',
+                            color: '#dc2626',
+                        },
+                        {
+                            id: 'annotation-2',
+                            order: 1,
+                            kind: 'pin',
+                            x: 0.45,
+                            y: 0.55,
+                            instruction: '',
+                            markerType: 'review',
+                            color: '#dc2626',
+                        },
+                    ],
+                }),
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        fireEvent.load(screen.getByAltText('Homepage shot'));
+        const overlay = screen.getByTestId('annotated-attachment-overlay');
+        Object.defineProperty(overlay, 'getBoundingClientRect', {
+            configurable: true,
+            value: () => ({
+                left: 0,
+                top: 0,
+                width: 100,
+                height: 100,
+                right: 100,
+                bottom: 100,
+                x: 0,
+                y: 0,
+                toJSON: () => ({}),
+            }),
+        });
+        await user.click(screen.getByRole('button', { name: '1' }));
+        await user.click(screen.getByRole('button', { name: /marker color/i }));
+        await user.click(screen.getByRole('button', { name: /use marker color #dc2626/i }));
+        await waitFor(() => {
+            expect(fetchTaskforceApi.mock.calls).toEqual(expect.arrayContaining([
+                [
+                    '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1',
+                    expect.objectContaining({ method: 'PATCH' }),
+                    '',
+                ],
+            ]));
+        });
+        const recolorBody = JSON.parse(String(fetchTaskforceApi.mock.calls[1]?.[1]?.body || '{}'));
+        expect(recolorBody.annotations[0]?.color).toBe('#dc2626');
+        await user.click(screen.getByRole('button', { name: /pin tool\./i }));
+        fireEvent.pointerDown(overlay, { clientX: 45, clientY: 55 });
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(3, '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1', expect.objectContaining({ method: 'PATCH' }), ''));
+        const newMarkerBody = JSON.parse(String(fetchTaskforceApi.mock.calls[2]?.[1]?.body || '{}'));
+        expect(newMarkerBody.annotations).toHaveLength(2);
+        expect(newMarkerBody.annotations[1]?.color).toBe('#dc2626');
+    });
+    it('shows the selected session state and edits session details inline', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        const sessionCard = await findSessionCard('Homepage review');
+        expect(sessionCard).toHaveAttribute('aria-pressed', 'true');
+        expect(screen.queryByLabelText('Session title')).not.toBeInTheDocument();
+        await user.click(sessionCard);
+        expect(screen.getByLabelText('Session title')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('Homepage review')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('Review this screenshot')).toBeInTheDocument();
+    });
+    it('closes session inline editing when clicking outside the session card', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        await user.click(await findSessionCard('Homepage review'));
+        expect(screen.getByLabelText('Session title')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /create session/i }));
+        expect(screen.queryByLabelText('Session title')).not.toBeInTheDocument();
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+    });
+    it('shows concise titles on the marker tool rail', async () => {
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /pin tool\./i })).toHaveAttribute('title', 'Pin');
+        expect(screen.getByRole('button', { name: /box tool\./i })).toHaveAttribute('title', 'Box');
+    });
+    it('does not label the last editor as the creator when creator details are missing', async () => {
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-2',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T13:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: null,
+                        updatedByActor: { actorId: 'user-2', label: 'Taylor', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        expect(screen.queryByText('Created by Taylor')).not.toBeInTheDocument();
+    });
+    it('enables pan controls only after zooming in', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        fireEvent.load(screen.getByAltText('Homepage shot'));
+        const panButton = screen.getByRole('button', { name: /pan canvas/i });
+        expect(panButton).toBeDisabled();
+        expect(screen.getByRole('button', { name: /reset zoom/i })).toHaveAttribute('title', expect.stringContaining('100%'));
+        await user.click(screen.getByRole('button', { name: /zoom in/i }));
+        await waitFor(() => {
+            expect(screen.getByRole('button', { name: /reset zoom/i })).toHaveAttribute('title', expect.stringContaining('125%'));
+        });
+        expect(screen.getByRole('button', { name: /pan canvas/i })).toBeEnabled();
+    });
+    it('allows zooming out below 100 percent for large screenshots', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Large screenshot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        fireEvent.load(screen.getByAltText('Large screenshot'));
+        expect(screen.getByRole('button', { name: /reset zoom/i })).toHaveAttribute('title', expect.stringContaining('100%'));
+        await user.click(screen.getByRole('button', { name: /zoom out/i }));
+        await waitFor(() => {
+            expect(screen.getByRole('button', { name: /reset zoom/i })).toHaveAttribute('title', expect.stringContaining('75%'));
+        });
+        expect(screen.getByRole('button', { name: /pan canvas/i })).toBeDisabled();
+    });
+    it('keeps the image at natural size at 100 percent even in a narrow canvas viewport', async () => {
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Wide screenshot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        const image = screen.getByAltText('Wide screenshot');
+        Object.defineProperty(image, 'naturalWidth', { configurable: true, value: 1200 });
+        Object.defineProperty(image, 'naturalHeight', { configurable: true, value: 800 });
+        const canvasScroller = image.parentElement?.parentElement?.parentElement;
+        expect(canvasScroller).not.toBeNull();
+        Object.defineProperty(canvasScroller, 'clientWidth', { configurable: true, value: 400 });
+        fireEvent.load(image);
+        await waitFor(() => {
+            expect(image.parentElement).toHaveStyle({
+                width: '1200px',
+                height: '800px',
+            });
+        });
+        expect(screen.getByRole('button', { name: /reset zoom/i })).toHaveAttribute('title', expect.stringContaining('100%'));
+        expect(screen.getByRole('button', { name: /pan canvas/i })).toBeEnabled();
+    });
+    it('does not reload sessions when rerendered with the same annotated target', async () => {
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        const requestedTarget = {
+            taskId: 'task-1',
+            taskReferenceLabel: 'T-101',
+            assetId: 'asset-image-1',
+            path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+            displayName: 'Homepage shot',
+        };
+        const { rerender } = render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: requestedTarget, onContextChange: () => { } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        expect(fetchTaskforceApi).toHaveBeenCalledTimes(1);
+        rerender(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: requestedTarget, onContextChange: () => { } }));
+        await waitFor(() => {
+            expect(fetchTaskforceApi).toHaveBeenCalledTimes(1);
+        });
+    });
+    it('reloads sessions when the same annotated target is explicitly reopened', async () => {
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Older review',
+                        globalInstruction: 'Original session list',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-2',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Newest review',
+                        globalInstruction: 'Freshly loaded session list',
+                        annotations: [],
+                        createdByActorId: 'user-2',
+                        updatedByActorId: 'user-2',
+                        createdAt: '2026-04-03T22:00:00.000Z',
+                        updatedAt: '2026-04-03T22:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-2', label: 'Jordan', type: 'user' },
+                        updatedByActor: { actorId: 'user-2', label: 'Jordan', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        const requestedTarget = {
+            taskId: 'task-1',
+            taskReferenceLabel: 'T-101',
+            assetId: 'asset-image-1',
+            path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+            displayName: 'Homepage shot',
+        };
+        const { rerender } = render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: requestedTarget, requestedOpenVersion: 1, onContextChange: () => { } }));
+        expect(await findSessionCard('Older review')).toBeInTheDocument();
+        expect(fetchTaskforceApi).toHaveBeenCalledTimes(1);
+        rerender(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: requestedTarget, requestedOpenVersion: 2, onContextChange: () => { } }));
+        expect(await findSessionCard('Newest review')).toBeInTheDocument();
+        await waitFor(() => {
+            expect(fetchTaskforceApi).toHaveBeenCalledTimes(2);
+        });
+    });
+    it('reloads sessions when the document becomes visible and the editor is not dirty', async () => {
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-2',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Synced on visibility',
+                        globalInstruction: 'Server-authoritative',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:05:00.000Z',
+                        updatedAt: '2026-03-25T12:06:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        Object.defineProperty(document, 'visibilityState', {
+            configurable: true,
+            value: 'visible',
+        });
+        fireEvent(document, new Event('visibilitychange'));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions?workspaceId=workspace-1&taskId=task-1&imageAssetId=asset-image-1', expect.objectContaining({
+            credentials: 'include',
+            headers: { 'x-taskforce-workspace-id': 'workspace-1' },
+        }), ''));
+        expect(await findSessionCard('Synced on visibility')).toBeInTheDocument();
+    });
+    it('uses the provided task reference resolver when the launch target lacks a readable label', async () => {
+        const user = userEvent.setup();
+        const writeText = vi.fn().mockResolvedValue(undefined);
+        Object.defineProperty(navigator, 'clipboard', {
+            configurable: true,
+            value: { writeText },
+        });
+        mockAutoCreateFirstSession();
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            }, resolveTaskReferenceLabel: () => 'T-101' }));
+        await findSessionCard('Homepage shot review');
+        expect(screen.getByText('T-101')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /copy task id/i }));
+        expect(writeText).toHaveBeenCalledWith('T-101');
+    });
+    it('prefers the resolved T-XXX reference when the incoming label is just the raw task id', async () => {
+        const user = userEvent.setup();
+        const writeText = vi.fn().mockResolvedValue(undefined);
+        Object.defineProperty(navigator, 'clipboard', {
+            configurable: true,
+            value: { writeText },
+        });
+        mockAutoCreateFirstSession();
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'task-1',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            }, resolveTaskReferenceLabel: () => 'T-101' }));
+        await findSessionCard('Homepage shot review');
+        expect(screen.getByText('T-101')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /copy task id/i }));
+        expect(writeText).toHaveBeenCalledWith('T-101');
+    });
+    it('uses the provided image reference resolver when the launch target lacks a readable image label', async () => {
+        const user = userEvent.setup();
+        const writeText = vi.fn().mockResolvedValue(undefined);
+        Object.defineProperty(navigator, 'clipboard', {
+            configurable: true,
+            value: { writeText },
+        });
+        mockAutoCreateFirstSession();
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Standalone shot',
+            }, resolveImageReferenceLabel: () => 'I-22' }));
+        await findSessionCard('Homepage shot review');
+        expect(screen.getByText('I-22')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /copy image reference/i }));
+        expect(writeText).toHaveBeenCalledWith('I-22');
+        expect(screen.getByRole('button', { name: /copied image reference/i })).toBeInTheDocument();
+    });
+    it('deletes the selected marker when the user presses Delete', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'question',
+                                color: '#0f766e',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Pin' }));
+        await user.keyboard('{Delete}');
+        await waitFor(() => {
+            expect(screen.queryByRole('button', { name: 'Pin' })).not.toBeInTheDocument();
+        });
+        expect(screen.getByText('Add a marker on the image to begin.')).toBeInTheDocument();
+    });
+    it('does not delete the selected marker when Delete is pressed while typing in a field', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'question',
+                                color: '#0f766e',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Pin' }));
+        const instructionField = screen.getByRole('textbox', { name: /^marker instruction$/i });
+        instructionField.focus();
+        fireEvent.keyDown(instructionField, { key: 'Delete' });
+        expect(screen.getByRole('button', { name: 'Pin' })).toBeInTheDocument();
+    });
+    it('duplicates and deletes sessions within the annotated attachment module shell', async () => {
+        const user = userEvent.setup();
+        const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'question',
+                                color: '#0f766e',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                success: true,
+                session: {
+                    id: 'session-2',
+                    tenantId: 'tenant-1',
+                    workspaceId: 'workspace-1',
+                    taskId: 'task-1',
+                    baseImageAssetId: 'asset-image-1',
+                    title: 'Homepage review copy',
+                    globalInstruction: 'Review this screenshot',
+                    annotations: [
+                        {
+                            id: 'annotation-copy-1',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect this button',
+                            markerType: 'question',
+                            color: '#0f766e',
+                        },
+                    ],
+                    createdByActorId: 'user-1',
+                    updatedByActorId: 'user-1',
+                    createdAt: '2026-03-25T12:05:00.000Z',
+                    updatedAt: '2026-03-25T12:05:00.000Z',
+                    deletedAt: null,
+                    createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                },
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-2',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review copy',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-copy-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'question',
+                                color: '#0f766e',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:05:00.000Z',
+                        updatedAt: '2026-03-25T12:05:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'question',
+                                color: '#0f766e',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: {
+                    id: 'session-2',
+                    tenantId: 'tenant-1',
+                    workspaceId: 'workspace-1',
+                    taskId: 'task-1',
+                    baseImageAssetId: 'asset-image-1',
+                    title: 'Homepage review copy',
+                    globalInstruction: 'Review this screenshot',
+                    annotations: [
+                        {
+                            id: 'annotation-copy-1',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect this button',
+                            markerType: 'question',
+                            color: '#0f766e',
+                        },
+                    ],
+                    createdByActorId: 'user-1',
+                    updatedByActorId: 'user-1',
+                    createdAt: '2026-03-25T12:04:00.000Z',
+                    updatedAt: '2026-03-25T12:04:00.000Z',
+                    deletedAt: null,
+                    createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                },
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ success: true }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(1, '/api/taskforce/annotated-attachments/sessions?workspaceId=workspace-1&taskId=task-1&imageAssetId=asset-image-1', expect.objectContaining({
+            credentials: 'include',
+            headers: { 'x-taskforce-workspace-id': 'workspace-1' },
+        }), ''));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /duplicate session/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions?workspaceId=workspace-1', expect.objectContaining({ method: 'POST' }), ''));
+        const duplicateBody = JSON.parse(String(fetchTaskforceApi.mock.calls[1]?.[1]?.body || '{}'));
+        expect(duplicateBody.title).toBe('Homepage review copy');
+        expect(duplicateBody.annotations).toHaveLength(1);
+        expect(duplicateBody.annotations[0]?.instruction).toBe('Inspect this button');
+        expect(await findSessionCard('Homepage review copy')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /delete session/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(3, '/api/taskforce/annotated-attachments/sessions/session-2?workspaceId=workspace-1', expect.objectContaining({ method: 'DELETE' }), ''));
+        expect(fetchTaskforceApi).toHaveBeenCalledTimes(3);
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        expect(confirmSpy).toHaveBeenCalledWith('Delete the annotated attachment session "Homepage review copy"?');
+    });
+    it('auto-creates the first session and uses the created session immediately on entry', async () => {
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                success: true,
+                session: {
+                    id: 'session-2',
+                    tenantId: 'tenant-1',
+                    workspaceId: 'workspace-1',
+                    taskId: 'task-1',
+                    baseImageAssetId: 'asset-image-1',
+                    title: 'Homepage shot notes',
+                    globalInstruction: '',
+                    annotations: [],
+                    createdByActorId: 'user-1',
+                    updatedByActorId: 'user-1',
+                    createdAt: '2026-03-25T12:05:00.000Z',
+                    updatedAt: '2026-03-25T12:05:00.000Z',
+                    deletedAt: null,
+                    createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                },
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage shot notes')).toBeInTheDocument();
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions?workspaceId=workspace-1', expect.objectContaining({ method: 'POST' }), ''));
+        expect(fetchTaskforceApi).toHaveBeenCalledTimes(2);
+        expect(screen.getByText('Created by Alex')).toBeInTheDocument();
+    });
+    it('reorders markers and saves the updated annotation order', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'question',
+                                color: '#0f766e',
+                            },
+                            {
+                                id: 'annotation-2',
+                                order: 1,
+                                kind: 'box',
+                                x: 0.4,
+                                y: 0.2,
+                                width: 0.2,
+                                height: 0.2,
+                                instruction: 'Review this card',
+                                markerType: 'review',
+                                color: '#7c3aed',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                success: true,
+                session: {
+                    id: 'session-1',
+                    tenantId: 'tenant-1',
+                    workspaceId: 'workspace-1',
+                    taskId: 'task-1',
+                    baseImageAssetId: 'asset-image-1',
+                    title: 'Homepage review',
+                    globalInstruction: 'Review this screenshot',
+                    annotations: [
+                        {
+                            id: 'annotation-2',
+                            order: 0,
+                            kind: 'box',
+                            x: 0.4,
+                            y: 0.2,
+                            width: 0.2,
+                            height: 0.2,
+                            instruction: 'Review this card',
+                            markerType: 'review',
+                            color: '#7c3aed',
+                        },
+                        {
+                            id: 'annotation-1',
+                            order: 1,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect this button',
+                            markerType: 'question',
+                            color: '#0f766e',
+                        },
+                    ],
+                    createdByActorId: 'user-1',
+                    updatedByActorId: 'user-1',
+                    createdAt: '2026-03-25T12:00:00.000Z',
+                    updatedAt: '2026-03-25T12:10:00.000Z',
+                    deletedAt: null,
+                    createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                },
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Pin' })).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /move marker down/i }));
+        expect(screen.getByRole('button', { name: 'Box' })).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /save session/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1', expect.objectContaining({ method: 'PATCH' }), ''));
+        const saveBody = JSON.parse(String(fetchTaskforceApi.mock.calls[1]?.[1]?.body || '{}'));
+        expect(saveBody.annotations.map((annotation) => annotation.kind)).toEqual(['box', 'pin']);
+        expect(fetchTaskforceApi).toHaveBeenCalledTimes(2);
+        expect(await screen.findByRole('button', { name: 'Box' })).toBeInTheDocument();
+    });
+    it('loads an AI payload preview for the selected session', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'question',
+                                color: '#0f766e',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                payload: {
+                    taskId: 'task-1',
+                    workspaceId: 'workspace-1',
+                    sessionId: 'session-1',
+                    title: 'Homepage review',
+                    globalInstruction: 'Review this screenshot',
+                    image: {
+                        assetId: 'asset-image-1',
+                        storageKey: 'workspaces/workspace-1/assets/images/asset-image-1.png',
+                        apiUrl: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                        mimeType: 'image/png',
+                        originalFilename: 'homepage.png',
+                        logicalName: 'homepage',
+                        displayName: 'Homepage shot',
+                        sizeBytes: 1024,
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                    },
+                    annotations: [
+                        {
+                            id: 'annotation-1',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect this button',
+                            markerType: 'question',
+                            color: '#0f766e',
+                            cropHint: {
+                                x: 0.11,
+                                y: 0.21,
+                                width: 0.18,
+                                height: 0.18,
+                            },
+                        },
+                    ],
+                },
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /preview payload/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions/session-1/payload?workspaceId=workspace-1', expect.objectContaining({
+            credentials: 'include',
+            headers: { 'x-taskforce-workspace-id': 'workspace-1' },
+        }), ''));
+        expect(await screen.findByText(/"sessionId": "session-1"/)).toBeInTheDocument();
+        expect(screen.getByText(/"cropHint"/)).toBeInTheDocument();
+    });
+    it('updates marker geometry fields and saves the edited coordinates', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'box',
+                                x: 0.4,
+                                y: 0.2,
+                                width: 0.2,
+                                height: 0.2,
+                                instruction: 'Review this card',
+                                markerType: 'review',
+                                color: '#7c3aed',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                success: true,
+                session: {
+                    id: 'session-1',
+                    tenantId: 'tenant-1',
+                    workspaceId: 'workspace-1',
+                    taskId: 'task-1',
+                    baseImageAssetId: 'asset-image-1',
+                    title: 'Homepage review',
+                    globalInstruction: 'Review this screenshot',
+                    annotations: [
+                        {
+                            id: 'annotation-1',
+                            order: 0,
+                            kind: 'box',
+                            x: 0.4,
+                            y: 0.2,
+                            width: 0.35,
+                            height: 0.25,
+                            instruction: 'Review this card',
+                            markerType: 'review',
+                            color: '#7c3aed',
+                        },
+                    ],
+                    createdByActorId: 'user-1',
+                    updatedByActorId: 'user-1',
+                    createdAt: '2026-03-25T12:00:00.000Z',
+                    updatedAt: '2026-03-25T12:15:00.000Z',
+                    deletedAt: null,
+                    createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                },
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        const widthInput = screen.getByRole('spinbutton', { name: /width percent/i });
+        const heightInput = screen.getByRole('spinbutton', { name: /height percent/i });
+        fireEvent.change(widthInput, { target: { value: '35' } });
+        fireEvent.change(heightInput, { target: { value: '25' } });
+        await user.click(screen.getByRole('button', { name: /save session/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1', expect.objectContaining({ method: 'PATCH' }), ''));
+        const saveBody = JSON.parse(String(fetchTaskforceApi.mock.calls[1]?.[1]?.body || '{}'));
+        expect(saveBody.annotations[0]?.width).toBe(0.35);
+        expect(saveBody.annotations[0]?.height).toBe(0.25);
+    });
+    it('selects and drags an arrow marker from the canvas hit area', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-pin',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.15,
+                                y: 0.2,
+                                instruction: 'Inspect this button',
+                                markerType: 'question',
+                                color: '#0f766e',
+                            },
+                            {
+                                id: 'annotation-arrow',
+                                order: 1,
+                                kind: 'arrow',
+                                x: 0.2,
+                                y: 0.3,
+                                x2: 0.4,
+                                y2: 0.5,
+                                instruction: 'Follow this flow',
+                                markerType: 'change',
+                                color: '#2563eb',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                success: true,
+                session: {
+                    id: 'session-1',
+                    tenantId: 'tenant-1',
+                    workspaceId: 'workspace-1',
+                    taskId: 'task-1',
+                    baseImageAssetId: 'asset-image-1',
+                    title: 'Homepage review',
+                    globalInstruction: 'Review this screenshot',
+                    annotations: [
+                        {
+                            id: 'annotation-pin',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.15,
+                            y: 0.2,
+                            instruction: 'Inspect this button',
+                            markerType: 'question',
+                            color: '#0f766e',
+                        },
+                        {
+                            id: 'annotation-arrow',
+                            order: 1,
+                            kind: 'arrow',
+                            x: 0.3,
+                            y: 0.4,
+                            x2: 0.5,
+                            y2: 0.6,
+                            instruction: 'Follow this flow',
+                            markerType: 'change',
+                            color: '#2563eb',
+                        },
+                    ],
+                    createdByActorId: 'user-1',
+                    updatedByActorId: 'user-1',
+                    createdAt: '2026-03-25T12:00:00.000Z',
+                    updatedAt: '2026-03-25T12:18:00.000Z',
+                    deletedAt: null,
+                    createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                },
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        fireEvent.load(screen.getByAltText('Homepage shot'));
+        const overlay = screen.getByTestId('annotated-attachment-overlay');
+        Object.defineProperty(overlay, 'getBoundingClientRect', {
+            configurable: true,
+            value: () => ({
+                left: 0,
+                top: 0,
+                width: 100,
+                height: 100,
+                right: 100,
+                bottom: 100,
+                x: 0,
+                y: 0,
+                toJSON: () => ({}),
+            }),
+        });
+        const arrowHitArea = screen.getByTestId('annotated-arrow-hit-annotation-arrow');
+        fireEvent.pointerDown(arrowHitArea, { clientX: 20, clientY: 30 });
+        fireEvent.pointerMove(overlay, { clientX: 30, clientY: 40 });
+        fireEvent.pointerUp(overlay, { clientX: 30, clientY: 40 });
+        expect(screen.getByDisplayValue('Follow this flow')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /save session/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1', expect.objectContaining({ method: 'PATCH' }), ''));
+        const saveBody = JSON.parse(String(fetchTaskforceApi.mock.calls[1]?.[1]?.body || '{}'));
+        expect(saveBody.annotations[1]?.x).toBeCloseTo(0.3, 6);
+        expect(saveBody.annotations[1]?.y).toBeCloseTo(0.4, 6);
+        expect(saveBody.annotations[1]?.x2).toBeCloseTo(0.5, 6);
+        expect(saveBody.annotations[1]?.y2).toBeCloseTo(0.6, 6);
+    });
+    it('resizes a selected box marker from the canvas handle', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-box',
+                                order: 0,
+                                kind: 'box',
+                                x: 0.2,
+                                y: 0.25,
+                                width: 0.2,
+                                height: 0.2,
+                                instruction: 'Resize this region',
+                                markerType: 'review',
+                                color: '#7c3aed',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                success: true,
+                session: {
+                    id: 'session-1',
+                    tenantId: 'tenant-1',
+                    workspaceId: 'workspace-1',
+                    taskId: 'task-1',
+                    baseImageAssetId: 'asset-image-1',
+                    title: 'Homepage review',
+                    globalInstruction: 'Review this screenshot',
+                    annotations: [
+                        {
+                            id: 'annotation-box',
+                            order: 0,
+                            kind: 'box',
+                            x: 0.2,
+                            y: 0.25,
+                            width: 0.3,
+                            height: 0.3,
+                            instruction: 'Resize this region',
+                            markerType: 'review',
+                            color: '#7c3aed',
+                        },
+                    ],
+                    createdByActorId: 'user-1',
+                    updatedByActorId: 'user-1',
+                    createdAt: '2026-03-25T12:00:00.000Z',
+                    updatedAt: '2026-03-25T12:21:00.000Z',
+                    deletedAt: null,
+                    createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                },
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        fireEvent.load(screen.getByAltText('Homepage shot'));
+        const overlay = screen.getByTestId('annotated-attachment-overlay');
+        Object.defineProperty(overlay, 'getBoundingClientRect', {
+            configurable: true,
+            value: () => ({
+                left: 0,
+                top: 0,
+                width: 100,
+                height: 100,
+                right: 100,
+                bottom: 100,
+                x: 0,
+                y: 0,
+                toJSON: () => ({}),
+            }),
+        });
+        await user.click(screen.getByRole('button', { name: 'Box' }));
+        const resizeHandle = screen.getByRole('button', { name: /resize box marker/i });
+        fireEvent.pointerDown(resizeHandle, { clientX: 40, clientY: 45 });
+        fireEvent.pointerMove(overlay, { clientX: 50, clientY: 55 });
+        fireEvent.pointerUp(overlay, { clientX: 50, clientY: 55 });
+        await user.click(screen.getByRole('button', { name: /save session/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1', expect.objectContaining({ method: 'PATCH' }), ''));
+        const saveBody = JSON.parse(String(fetchTaskforceApi.mock.calls[1]?.[1]?.body || '{}'));
+        expect(saveBody.annotations[0]?.width).toBeCloseTo(0.3, 6);
+        expect(saveBody.annotations[0]?.height).toBeCloseTo(0.3, 6);
+    });
+    it('moves the selected arrow end handle on the canvas', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-arrow',
+                                order: 0,
+                                kind: 'arrow',
+                                x: 0.2,
+                                y: 0.3,
+                                x2: 0.4,
+                                y2: 0.5,
+                                instruction: 'Move this endpoint',
+                                markerType: 'change',
+                                color: '#2563eb',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                success: true,
+                session: {
+                    id: 'session-1',
+                    tenantId: 'tenant-1',
+                    workspaceId: 'workspace-1',
+                    taskId: 'task-1',
+                    baseImageAssetId: 'asset-image-1',
+                    title: 'Homepage review',
+                    globalInstruction: 'Review this screenshot',
+                    annotations: [
+                        {
+                            id: 'annotation-arrow',
+                            order: 0,
+                            kind: 'arrow',
+                            x: 0.2,
+                            y: 0.3,
+                            x2: 0.55,
+                            y2: 0.65,
+                            instruction: 'Move this endpoint',
+                            markerType: 'change',
+                            color: '#2563eb',
+                        },
+                    ],
+                    createdByActorId: 'user-1',
+                    updatedByActorId: 'user-1',
+                    createdAt: '2026-03-25T12:00:00.000Z',
+                    updatedAt: '2026-03-25T12:24:00.000Z',
+                    deletedAt: null,
+                    createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                },
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        fireEvent.load(screen.getByAltText('Homepage shot'));
+        const overlay = screen.getByTestId('annotated-attachment-overlay');
+        Object.defineProperty(overlay, 'getBoundingClientRect', {
+            configurable: true,
+            value: () => ({
+                left: 0,
+                top: 0,
+                width: 100,
+                height: 100,
+                right: 100,
+                bottom: 100,
+                x: 0,
+                y: 0,
+                toJSON: () => ({}),
+            }),
+        });
+        await user.click(screen.getByRole('button', { name: 'Arrow' }));
+        const endHandle = screen.getByRole('button', { name: /move arrow tip/i });
+        fireEvent.pointerDown(endHandle, { clientX: 40, clientY: 50 });
+        fireEvent.pointerMove(overlay, { clientX: 55, clientY: 65 });
+        fireEvent.pointerUp(overlay, { clientX: 55, clientY: 65 });
+        await user.click(screen.getByRole('button', { name: /save session/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1', expect.objectContaining({ method: 'PATCH' }), ''));
+        const saveBody = JSON.parse(String(fetchTaskforceApi.mock.calls[1]?.[1]?.body || '{}'));
+        expect(saveBody.annotations[0]?.x2).toBeCloseTo(0.55, 6);
+        expect(saveBody.annotations[0]?.y2).toBeCloseTo(0.65, 6);
+    });
+    it('copies payload JSON and an AI brief from the payload preview', async () => {
+        const user = userEvent.setup();
+        const writeText = vi.fn().mockResolvedValue(undefined);
+        Object.defineProperty(navigator, 'clipboard', {
+            configurable: true,
+            value: { writeText },
+        });
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-1',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'question',
+                                color: '#0f766e',
+                            },
+                        ],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                payload: {
+                    taskId: 'task-1',
+                    workspaceId: 'workspace-1',
+                    sessionId: 'session-1',
+                    title: 'Homepage review',
+                    globalInstruction: 'Review this screenshot',
+                    image: {
+                        assetId: 'asset-image-1',
+                        storageKey: 'workspaces/workspace-1/assets/images/asset-image-1.png',
+                        apiUrl: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                        mimeType: 'image/png',
+                        originalFilename: 'homepage.png',
+                        logicalName: 'homepage',
+                        displayName: 'Homepage shot',
+                        sizeBytes: 1024,
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                    },
+                    annotations: [
+                        {
+                            id: 'annotation-1',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect this button',
+                            markerType: 'question',
+                            color: '#0f766e',
+                            cropHint: {
+                                x: 0.11,
+                                y: 0.21,
+                                width: 0.18,
+                                height: 0.18,
+                            },
+                        },
+                    ],
+                },
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /preview payload/i }));
+        expect(await screen.findByText(/"sessionId": "session-1"/)).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /copy json/i }));
+        expect(writeText).toHaveBeenNthCalledWith(1, expect.stringContaining('"sessionId": "session-1"'));
+        await user.click(screen.getByRole('button', { name: /copy ai brief/i }));
+        expect(writeText).toHaveBeenNthCalledWith(2, expect.stringContaining('Annotated attachment: Homepage review'));
+        expect(writeText).toHaveBeenNthCalledWith(2, expect.stringContaining('1. pin (question)'));
+        expect(writeText).toHaveBeenNthCalledWith(2, expect.stringContaining('Instruction: Inspect this button'));
+    });
+    it('shows a back to task button when launched from a task and calls back with the task id', async () => {
+        const user = userEvent.setup();
+        const onBackToTask = vi.fn();
+        mockAutoCreateFirstSession();
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            }, onBackToTask: onBackToTask }));
+        await findSessionCard('Homepage shot review');
+        await user.click(screen.getByRole('button', { name: /back to task/i }));
+        expect(onBackToTask).toHaveBeenCalledWith('task-1');
+    });
+    it('shows an unattached image label when the requested target is not linked to a task', async () => {
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: '',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Loose image',
+            } }));
+        await screen.findByText('No sessions yet');
+        expect(screen.getByText('Unattached Image')).toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: /copy task id/i })).not.toBeInTheDocument();
+    });
+    it('does not repeat the image name in the sessions header', async () => {
+        mockAutoCreateFirstSession({ title: 'Image Notes review' });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Image Notes',
+            } }));
+        await findSessionCard('Image Notes review');
+        expect(screen.getByText('Image Notes')).toBeInTheDocument();
+        expect(screen.queryByText('Create and switch between annotation sessions.')).not.toBeInTheDocument();
+    });
+    it('restores a requested saved session and reports the active context', async () => {
+        const onContextChange = vi.fn();
+        fetchTaskforceApi.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    {
+                        id: 'session-a',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'First session',
+                        globalInstruction: null,
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:00:00.000Z',
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    },
+                    {
+                        id: 'session-b',
+                        tenantId: 'tenant-1',
+                        workspaceId: 'workspace-1',
+                        taskId: 'task-1',
+                        baseImageAssetId: 'asset-image-1',
+                        title: 'Restored session',
+                        globalInstruction: 'Resume here',
+                        annotations: [],
+                        createdByActorId: 'user-1',
+                        updatedByActorId: 'user-1',
+                        createdAt: '2026-03-25T12:05:00.000Z',
+                        updatedAt: '2026-03-25T12:05:00.000Z',
+                        deletedAt: null,
+                        createdByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                        updatedByActor: { actorId: 'user-1', label: 'Alex', type: 'user' },
+                    }
+                ],
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            }, requestedSessionId: "session-b", onContextChange: onContextChange }));
+        expect(await findSessionCard('Restored session')).toBeInTheDocument();
+        await waitFor(() => {
+            expect(onContextChange).toHaveBeenLastCalledWith(expect.objectContaining({
+                target: expect.objectContaining({
+                    taskId: 'task-1',
+                    assetId: 'asset-image-1',
+                }),
+                sessionId: 'session-b',
+            }));
+        });
+    });
+    it('warns when a requested saved session cannot be restored', async () => {
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    id: 'session-new',
+                    taskId: '',
+                    baseImageAssetId: 'asset-image-1',
+                    title: 'Recovered session',
+                }),
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: '',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            }, requestedSessionId: "missing-session" }));
+        expect(await screen.findByText('The previously selected annotation session could not be restored.')).toBeInTheDocument();
+        expect(await findSessionCard('Recovered session')).toBeInTheDocument();
+    });
+    it('copies the originating task id from the annotator header', async () => {
+        const user = userEvent.setup();
+        const writeText = vi.fn().mockResolvedValue(undefined);
+        Object.defineProperty(navigator, 'clipboard', {
+            configurable: true,
+            value: { writeText },
+        });
+        mockAutoCreateFirstSession();
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        await findSessionCard('Homepage shot review');
+        await user.click(screen.getByRole('button', { name: /copy task id/i }));
+        expect(writeText).toHaveBeenCalledWith('T-101');
+        expect(screen.getByRole('button', { name: /copied task id/i })).toBeInTheDocument();
+    });
+    it('copies the originating image reference from the annotator header', async () => {
+        const user = userEvent.setup();
+        const writeText = vi.fn().mockResolvedValue(undefined);
+        Object.defineProperty(navigator, 'clipboard', {
+            configurable: true,
+            value: { writeText },
+        });
+        mockAutoCreateFirstSession();
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                imageReferenceLabel: 'I-22',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        await findSessionCard('Homepage shot review');
+        await user.click(screen.getByRole('button', { name: /copy image reference/i }));
+        expect(writeText).toHaveBeenCalledWith('I-22');
+        expect(screen.getByRole('button', { name: /copied image reference/i })).toBeInTheDocument();
+    });
+    it('auto-saves marker instruction edits after the debounce window', async () => {
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    buildSessionResponse({
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'review',
+                                color: '#0f766e',
+                            },
+                        ],
+                    }),
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    globalInstruction: 'Review this screenshot',
+                    updatedAt: '2026-03-25T12:05:00.000Z',
+                    annotations: [
+                        {
+                            id: 'annotation-1',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect this header CTA',
+                            markerType: 'review',
+                            color: '#0f766e',
+                        },
+                    ],
+                }),
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage shot review')).toBeInTheDocument();
+        const instructionField = screen.getByRole('textbox', { name: /^marker instruction$/i });
+        fireEvent.change(instructionField, { target: { value: 'Inspect this header CTA' } });
+        expect(screen.getByText('Saving…')).toBeInTheDocument();
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1', expect.objectContaining({ method: 'PATCH' }), ''));
+        const saveBody = JSON.parse(String(fetchTaskforceApi.mock.calls[1]?.[1]?.body || '{}'));
+        expect(saveBody.annotations[0]?.instruction).toBe('Inspect this header CTA');
+        await waitFor(() => expect(screen.getByText('Saved')).toBeInTheDocument());
+    });
+    it('flushes marker instruction edits immediately on blur', async () => {
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    buildSessionResponse({
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'review',
+                                color: '#0f766e',
+                            },
+                        ],
+                    }),
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    globalInstruction: 'Review this screenshot',
+                    updatedAt: '2026-03-25T12:05:00.000Z',
+                    annotations: [
+                        {
+                            id: 'annotation-1',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect this header CTA',
+                            markerType: 'review',
+                            color: '#0f766e',
+                        },
+                    ],
+                }),
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage shot review')).toBeInTheDocument();
+        const instructionField = screen.getByRole('textbox', { name: /^marker instruction$/i });
+        fireEvent.change(instructionField, { target: { value: 'Inspect this header CTA' } });
+        fireEvent.blur(instructionField);
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1', expect.objectContaining({ method: 'PATCH' }), ''));
+        const saveBody = JSON.parse(String(fetchTaskforceApi.mock.calls[1]?.[1]?.body || '{}'));
+        expect(saveBody.annotations[0]?.instruction).toBe('Inspect this header CTA');
+    });
+    it('clears the previous session state immediately when switching to a new target', async () => {
+        const oldSession = buildSessionResponse({
+            id: 'session-old',
+            title: 'Old session',
+            annotations: [
+                {
+                    id: 'annotation-1',
+                    order: 0,
+                    kind: 'pin',
+                    x: 0.2,
+                    y: 0.3,
+                    instruction: 'Old note',
+                    markerType: 'review',
+                    color: '#0f766e',
+                },
+            ],
+        });
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ sessions: [oldSession] }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ sessions: [] }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    id: 'session-new',
+                    taskId: '',
+                    baseImageAssetId: 'asset-image-2',
+                    title: 'New session',
+                    annotations: [],
+                }),
+            }),
+        });
+        function ControlledTargetHarness() {
+            const [target, setTarget] = React.useState({
+                taskId: 'task-1',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Old image',
+            });
+            return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => setTarget({
+                            taskId: '',
+                            assetId: 'asset-image-2',
+                            path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-2.png',
+                            displayName: 'New image',
+                        }), children: "Switch target" }), _jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: target })] }));
+        }
+        const user = userEvent.setup();
+        render(_jsx(ControlledTargetHarness, {}));
+        expect(await findSessionCard('Old session')).toBeInTheDocument();
+        expect(screen.getByText('Old note')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /switch target/i }));
+        await waitFor(() => {
+            expect(screen.queryByText('Old session')).not.toBeInTheDocument();
+            expect(screen.queryByText('Old note')).not.toBeInTheDocument();
+            expect(screen.getByText('New session')).toBeInTheDocument();
+        });
+    });
+    it('flushes pending edits before loading the payload preview', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    buildSessionResponse({
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'review',
+                                color: '#0f766e',
+                            },
+                        ],
+                    }),
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    globalInstruction: 'Review this screenshot',
+                    updatedAt: '2026-03-25T12:05:00.000Z',
+                    annotations: [
+                        {
+                            id: 'annotation-1',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect the signup button',
+                            markerType: 'review',
+                            color: '#0f766e',
+                        },
+                    ],
+                }),
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                payload: {
+                    taskId: 'task-1',
+                    workspaceId: 'workspace-1',
+                    sessionId: 'session-1',
+                    title: 'Homepage shot review',
+                    globalInstruction: 'Review this screenshot',
+                    image: {
+                        assetId: 'asset-image-1',
+                        storageKey: 'workspaces/workspace-1/assets/images/asset-image-1.png',
+                        apiUrl: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                        mimeType: 'image/png',
+                        originalFilename: 'homepage.png',
+                        logicalName: 'homepage',
+                        displayName: 'Homepage shot',
+                        sizeBytes: 1024,
+                        updatedAt: '2026-03-25T12:00:00.000Z',
+                    },
+                    annotations: [
+                        {
+                            id: 'annotation-1',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect the signup button',
+                            markerType: 'review',
+                            color: '#0f766e',
+                        },
+                    ],
+                },
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage shot review')).toBeInTheDocument();
+        fireEvent.change(screen.getByRole('textbox', { name: /^marker instruction$/i }), {
+            target: { value: 'Inspect the signup button' },
+        });
+        await user.click(screen.getByRole('button', { name: /preview payload/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1', expect.objectContaining({ method: 'PATCH' }), ''));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(3, '/api/taskforce/annotated-attachments/sessions/session-1/payload?workspaceId=workspace-1', expect.objectContaining({ credentials: 'include' }), ''));
+        expect(await screen.findByText(/"Inspect the signup button"/)).toBeInTheDocument();
+    });
+    it('flushes the current draft before switching sessions', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    buildSessionResponse({
+                        id: 'session-1',
+                        title: 'Homepage review',
+                        globalInstruction: 'Review the homepage',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'review',
+                                color: '#0f766e',
+                            },
+                        ],
+                    }),
+                    buildSessionResponse({
+                        id: 'session-2',
+                        title: 'Secondary review',
+                        globalInstruction: 'Check spacing',
+                        annotations: [],
+                        updatedAt: '2026-03-25T12:08:00.000Z',
+                    }),
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    id: 'session-1',
+                    title: 'Homepage review',
+                    globalInstruction: 'Review the homepage',
+                    updatedAt: '2026-03-25T12:06:00.000Z',
+                    annotations: [
+                        {
+                            id: 'annotation-1',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect the hero CTA',
+                            markerType: 'review',
+                            color: '#0f766e',
+                        },
+                    ],
+                }),
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage review')).toBeInTheDocument();
+        fireEvent.change(screen.getByRole('textbox', { name: /^marker instruction$/i }), {
+            target: { value: 'Inspect the hero CTA before switching sessions' },
+        });
+        await user.click(screen.getByRole('button', { name: /secondary review/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1', expect.objectContaining({ method: 'PATCH' }), ''));
+        expect(await screen.findByText('0 in this session')).toBeInTheDocument();
+        expect(screen.getByText('Add a marker on the image to begin.')).toBeInTheDocument();
+    });
+    it('keeps local edits visible after a save failure and allows manual retry', async () => {
+        const user = userEvent.setup();
+        fetchTaskforceApi
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                sessions: [
+                    buildSessionResponse({
+                        globalInstruction: 'Review this screenshot',
+                        annotations: [
+                            {
+                                id: 'annotation-1',
+                                order: 0,
+                                kind: 'pin',
+                                x: 0.2,
+                                y: 0.3,
+                                instruction: 'Inspect this button',
+                                markerType: 'review',
+                                color: '#0f766e',
+                            },
+                        ],
+                    }),
+                ],
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: false,
+            json: async () => ({
+                error: 'Save failed on the server.',
+            }),
+        })
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: buildSessionResponse({
+                    globalInstruction: 'Review this screenshot',
+                    updatedAt: '2026-03-25T12:07:00.000Z',
+                    annotations: [
+                        {
+                            id: 'annotation-1',
+                            order: 0,
+                            kind: 'pin',
+                            x: 0.2,
+                            y: 0.3,
+                            instruction: 'Inspect the purchase button',
+                            markerType: 'review',
+                            color: '#0f766e',
+                        },
+                    ],
+                }),
+            }),
+        });
+        render(_jsx(AnnotatedAttachmentWorkspaceShell, { workspaceId: "workspace-1", requestedTarget: {
+                taskId: 'task-1',
+                taskReferenceLabel: 'T-101',
+                assetId: 'asset-image-1',
+                path: '/api/taskforce/context/workspaces%2Fworkspace-1%2Fassets%2Fimages%2Fasset-image-1.png',
+                displayName: 'Homepage shot',
+            } }));
+        expect(await findSessionCard('Homepage shot review')).toBeInTheDocument();
+        const instructionField = screen.getByRole('textbox', { name: /^marker instruction$/i });
+        fireEvent.change(instructionField, { target: { value: 'Inspect the purchase button' } });
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(2, '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1', expect.objectContaining({ method: 'PATCH' }), ''));
+        expect(screen.getByDisplayValue('Inspect the purchase button')).toBeInTheDocument();
+        expect(screen.getByText('Save failed. Retry now.')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /save session/i }));
+        await waitFor(() => expect(fetchTaskforceApi).toHaveBeenNthCalledWith(3, '/api/taskforce/annotated-attachments/sessions/session-1?workspaceId=workspace-1', expect.objectContaining({ method: 'PATCH' }), ''));
+        const retryBody = JSON.parse(String(fetchTaskforceApi.mock.calls[2]?.[1]?.body || '{}'));
+        expect(retryBody.annotations[0]?.instruction).toBe('Inspect the purchase button');
+        await waitFor(() => expect(screen.queryByText('Save failed. Retry now.')).not.toBeInTheDocument());
+    });
+});