auto save indicator
Auto-Save Status Indicator Variations
Based on design decision: “Subtle inline text” style.
Option A: Footer Bar Status (Recommended)
┌─────────────────────────────────────┬────────────────────────────────────────┐│ EDITOR │ PREVIEW ││ │ ││ # Discovery Agent │ Discovery Agent ││ │ ││ This agent explores... │ This agent explores... ││ │ │├─────────────────────────────────────┴────────────────────────────────────────┤│ Draft saved 30s ago [▼ Metadata] [Save] │└──────────────────────────────────────────────────────────────────────────────┘
States:- "Draft saved 30s ago" (normal - grey text)- "Saving draft..." (active - with spinner)- "Draft saved just now" (success - brief green flash)- "⚠️ Unable to save draft" (error - orange/red text)- "Unsaved changes" (warning - when localStorage fails)Pros: Always visible, non-intrusive, clear status Cons: Takes footer space
Option B: Inline Near Save Button
┌──────────────────────────────────────────────────────────────────────────────┐│ Editing: Discovery Agent [Cancel] ○ Saved 30s ago [Save →] │├─────────────────────────────────────┬────────────────────────────────────────┤│ EDITOR │ PREVIEW ││ │ │
States:- "○ Saved 30s ago" (grey dot, grey text)- "◐ Saving..." (animated dot)- "● Saved" (green dot, fades after 2s)- "⚠ Save failed" (orange dot, orange text)Pros: Close to related action (Save button), compact Cons: Header may get crowded
Option C: Toast-Style Notifications
┌─────────────────────────────────────┬────────────────────────────────────────┐│ EDITOR │ PREVIEW ││ │ ││ # Discovery Agent │ Discovery Agent ││ │ │└─────────────────────────────────────┴────────────────────────────────────────┘
↓ Appears briefly when auto-save happens
┌──────────────────────────────────────────────────────────────────────────────┐│ ┌─────────────────────────┐ ││ │ ✓ Draft saved locally │ ││ └─────────────────────────┘ │└──────────────────────────────────────────────────────────────────────────────┘Pros: Unobtrusive, only appears when relevant Cons: Easy to miss, no persistent status indicator
Option D: Document Title Badge
┌──────────────────────────────────────────────────────────────────────────────┐│ 📄 Discovery Agent [Draft • Saved 30s ago] [Cancel] [Save] │├─────────────────────────────────────┬────────────────────────────────────────┤│ EDITOR │ PREVIEW │
States:- [Draft • Saved 30s ago] (grey badge)- [Draft • Saving...] (pulsing badge)- [Draft • Saved ✓] (green flash)- [⚠️ Unsaved changes] (orange badge)Pros: Status tied to document identity, always visible Cons: May clutter title area
Option E: Floating Corner Indicator
┌─────────────────────────────────────┬────────────────────────────────────────┐│ EDITOR │ PREVIEW ││ │ ││ # Discovery Agent │ Discovery Agent ││ │ ││ │ ││ │ ││ │ ││ ┌─────────┤ ││ │ ✓ 30s │ ││ └─────────┘ │└─────────────────────────────────────┴────────────────────────────────────────┘Pros: Minimal, doesn’t take layout space Cons: Can overlap content, may be missed
State Transitions
User types → [Unsaved] → 30s passes → [Saving...] → [Saved just now] → [Saved Xs ago] ↓ (if error) [⚠️ Save failed - Retry]Error State Detail
When auto-save fails:
┌──────────────────────────────────────────────────────────────────────────────┐│ Editing: Discovery Agent [Cancel] [Save] │├──────────────────────────────────────────────────────────────────────────────┤│ ┌──────────────────────────────────────────────────────────────────────────┐ ││ │ ⚠️ Unable to save draft locally. Your changes exist only in this tab. │ ││ │ Save to server to preserve your work. [×] │ ││ └──────────────────────────────────────────────────────────────────────────┘ │├─────────────────────────────────────┬────────────────────────────────────────┤│ EDITOR │ PREVIEW │Recommendation
Option A: Footer Bar Status
- Matches the design spec decision (“subtle inline text”)
- Always visible without cluttering the main UI
- Room for additional metadata toggle
- Clear state transitions with appropriate visual weight
Implementation:
<footer class="flex items-center justify-between px-4 py-2 border-t text-sm text-gray-500"> <span class="flex items-center gap-2"> <span v-if="saving" class="animate-spin">◐</span> <span v-else>●</span> {{ saveStatus }} </span> <div class="flex items-center gap-4"> <button @click="toggleMetadata">▼ Metadata</button> <button class="btn-primary">Save</button> </div></footer>