[mirror] fix(site/src/pages/AgentsPage): persist chat draft attachments

[yashwant86]

Mirror of upstream coder#24709 for benchmark. Do not merge.

---

Summary by MergeMonkey

• Just Shipped:
  • Persist chat draft attachments across page reloads and navigation within the same chat.
  • Display draft warnings when attachments cannot be saved due to storage quota limits.
  • Support pending upload state with visual spinner feedback during file uploads.
  • Separate attachment management for compose vs. edit modes to prevent cross-contamination.
• Improvements:
  • Prevent duplicate uploads when remounting components with in-flight attachments.
  • Clear edit-mode attachments only when exiting edit, preserving compose drafts.
• Refactors:
  • Extract attachment size and error formatting into shared utility module.
  • Refactor upload state checking into reusable isUploadInProgress helper.

[bot-mergemonkey]

⚡ Risk Assessment — NEEDS-TESTING · ~45 min review

Focus areas: Upload registry deduplication and generation tracking · Draft persistence and restoration across page reloads · Compose vs. edit attachment bucket isolation · SSRF risk in image preload fetch

Assessment: Adds complex draft persistence, upload registry, and dual attachment buckets with state synchronization.

Walkthrough

User attaches files to a chat draft. The hook serializes them to localStorage and begins uploads via registry. If uploads complete, metadata persists without payloads. On page reload, the hook restores persisted drafts and resumes in-flight uploads by clientId, preventing duplicates. When editing a message, a separate attachment bucket isolates edits from compose drafts; exiting edit mode clears only the edit bucket. Draft warnings appear if storage quota is exceeded during upload.

Changes

Files	Summary
Draft Attachment Persistence Infrastructure site/src/pages/AgentsPage/utils/chatDraftAttachmentStorage.ts, chatDraftAttachmentStorage.test.ts	Adds localStorage-backed persistence layer for chat draft attachments with data URL serialization, quota handling, expiration pruning, and deduplication by clientId and fileId.
Draft Upload Registry and Hook site/src/pages/AgentsPage/hooks/useChatDraftAttachments.ts, useChatDraftAttachments.test.ts	Implements in-memory upload registry to share active uploads across hook instances, restore persisted drafts, track upload progress with draft warnings on quota failure, and manage lifecycle across chat scope changes.
Attachment Utilities and Shared Helpers site/src/pages/AgentsPage/utils/fileAttachmentLimits.ts	Extracts attachment size limit, error formatting, and text file reading into shared utilities used by both draft and transient attachment flows.
Attachment Preview UI and State site/src/pages/AgentsPage/components/AttachmentPreview.tsx, AttachmentPreview.stories.tsx	Adds pending upload state with spinner, draft warning display below attachments, and exports isUploadInProgress helper. Adds test stories for pending and draft-warning states.
Chat Input Integration site/src/pages/AgentsPage/components/AgentChatInput.tsx	Imports and uses isUploadInProgress helper to check for active uploads before enabling send button.
Chat Page Content and Mode Switching site/src/pages/AgentsPage/components/ChatPageContent.tsx	Adds dual attachment buckets (compose vs. edit), switches between them based on isEditing flag, clears edit bucket on scope change and mode exit while preserving compose drafts, and validates active uploads before sending.
Chat Page View and Props site/src/pages/AgentsPage/AgentChatPageView.tsx	Computes isEditing flag from editing state and passes it to ChatPageInput for attachment mode switching.
Transient Attachment Hook Refactor site/src/pages/AgentsPage/hooks/useFileAttachments.ts	Removes inline size limit and error formatting; delegates to shared fileAttachmentLimits utilities for consistency with draft attachment flow.

Sequence Diagram

sequenceDiagram
  participant User
  participant UI as AttachmentPreview
  participant Hook as useChatDraftAttachments
  participant Registry as Upload Registry
  participant Storage as localStorage
  participant API as Server
  User->>UI: Attach file
  UI->>Hook: handleAttach([file])
  Hook->>Registry: createRegistryEntry(clientId, file)
  Hook->>Hook: beginUpload(entry)
  Hook->>Storage: persistUploadPayload(entry)
  Hook->>API: uploadChatFile(file)
  API-->>Registry: upload completes
  Hook->>Storage: persistUploadedRecord(entry)
  Hook->>UI: notify (status: uploaded)
  UI->>User: Show uploaded state
  User->>Browser: Reload page
  Hook->>Storage: restoreChatDraftAttachments()
  Storage-->>Hook: [restored records]
  Hook->>Registry: Resume in-flight uploads by clientId
  Hook->>UI: Render restored attachments
  UI->>User: Show draft attachments

Loading

Dig Deeper With Commands

• /review <file-path> <function-optional>
• /chat <file-path> "<question>"
• /roast <file-path>

Runs only when explicitly triggered.