ag-beats/.context/Manual Session State Save.md

1. Manual Save

✅ "Save Session" Button

• Button icon: 🖫 (diskette), with tooltip: "Save session"

• Opens modal:

  • Input: name of the session

  • Option: overwrite existing session with same name (if applicable)

• Stores:

  • Name

  • Timestamp

  • State (data)

  • isAutosave: false

---

2. Saved Sessions Panel

✅ Access

• Button/icon to open modal or dropdown with saved sessions

🔁 Display Rules

• Top item: "Autosaved Session" (non-deletable, clearly labeled)

• Followed by manually saved sessions, sorted alphabetically by name

✅ Item UI Elements

• Session name

• Save timestamp

• Load button (clickable name)

• Delete button (only for manual saves)

  • Delete must open confirmation modal:

    “Delete this saved session? This action cannot be undone.”

✅ Loading a Saved Session

• Replaces current app state with the saved one

• If unsaved changes exist, confirm before loading:

  “Load saved session? This will replace your current progress.”

---

🧠 Logic Extension: Loading Saved Sessions & Autosave

✅ When the user loads a saved session, autosave continues in the background.

• The loaded state becomes the new working session.

• All further changes are autosaved into the Autosaved Session.

• The user can still press "Save Session" again:

  • If using the same name, prompt:

    “Overwrite the session ‘ChillBeat’? This will replace the saved version.”

    • Or offer a new name input

• User can also choose to delete the older version after saving.