Summary
Users lose their in-progress draft messages when navigating away from a session page. This creates friction and frustration, especially when users are composing longer prompts.
Current Behavior
- Draft text in the chat input box is lost when:
- Navigating to another page (e.g., projects list, settings)
- Switching between sessions
- Refreshing the page
- The down arrow currently only navigates through sent message history and queued messages
Proposed Behavior
- Auto-save drafts to localStorage - Persist draft content per-session so users can navigate away and return without losing work
- Down arrow restores draft - When at the bottom of message history (index -1), pressing down arrow should restore the current draft if one exists
- Clear draft on send - Remove the persisted draft when a message is successfully sent
Implementation Notes
Key file: components/frontend/src/components/chat/ChatInputBox.tsx
The component already has:
draftInput state for temporary draft storage during history navigation (line 204)- History navigation with up/down arrows (lines 332-367)
combinedHistory for queued + sent messages
Suggested approach:
-
Create a custom hook useDraftPersistence(sessionId) that:
- Reads draft from
localStorage on mount
- Debounces writes to
localStorage on input change
- Clears draft on send
- Uses session-scoped key:
draft:${sessionId}
-
Update the down arrow handler to restore persisted draft when:
historyIndex is already at -1 (current input)- A persisted draft exists
- Current input is empty
-
Consider draft expiration (e.g., 7 days) to prevent localStorage bloat
Acceptance Criteria
Summary
Users lose their in-progress draft messages when navigating away from a session page. This creates friction and frustration, especially when users are composing longer prompts.
Current Behavior
Proposed Behavior
Implementation Notes
Key file:
components/frontend/src/components/chat/ChatInputBox.tsxThe component already has:
draftInputstate for temporary draft storage during history navigation (line 204)combinedHistoryfor queued + sent messagesSuggested approach:
Create a custom hook
useDraftPersistence(sessionId)that:localStorageon mountlocalStorageon input changedraft:${sessionId}Update the down arrow handler to restore persisted draft when:
historyIndexis already at -1 (current input)Consider draft expiration (e.g., 7 days) to prevent localStorage bloat
Acceptance Criteria