Snapshot Dialogs — Redesign Mockup
Side-by-side comparison: current Snapshot toolbar, Save dialog, Load dialog, and the autosave-newer choice modal — and the proposed post-redesign state. Discussion-only; not implemented yet. Flow doc: snapshot-dialogs-redesign.md.
Removed — surface goes away
Added / moved — new inline control
Server fix — backend logic change
1. Snapshot toolbar (sidebar row)
The cog opens a dedicated Settings dialog whose only job is to set the library path — a setting users only think about while saving or loading. Two-step path: open cog → change path → close → reopen Save/Load.
Library-path control moves to the Save and Load dialogs (sections 2 & 3 below). Users see and change the path in the same place they pick where to save / load from.
2. Save dialog — preset already tracked
Save snapshot
Library folder
koolook-presets
/Users/m/ComfyUI/user/default/koolook-presets
To save somewhere else, the user has to close this, open Settings, change the path, then re-open Save. Three round-trips for one action.
Library row is purely informational (no attached buttons). Every action moves to a single command bar at the bottom: utility action Save to… on the left, dismiss + alternatives + primary on the right. "Save to…" replaces "Change…" so the verb makes it unambiguous against "Open folder" in the Load dialog.
3. Load dialog
Load snapshot
Library folder
koolook-presets
/Users/m/ComfyUI/user/default/koolook-presets
Koolook_v03
starter
▸ Recovery auto-saves
No way to switch library from here. User has to close, open Settings cog, change path, reopen Load.
Load snapshot
Koolook_v03
starter
▸ Recovery auto-saves
Top-row layout: label on the left, Open folder ↗ link on the right. The link sits above the path so a long absolute path can't overlap the link area. Load from… stays the only proper button — text link vs. button is the visual distinction between "change app state" and "just open something outside the app."
Load snapshot
Koolook_v03
starter
▾ Recovery auto-saves
Recovery section is hidden by default. Clicking a preset row (e.g.
Koolook_v03 or starter) opens the recovery dropdown and reveals only that preset's <preset>_autosave/ folder — other presets' autosaves are not shown here. Inside the folder, exactly one row is rendered: whichever of Pre-load or Periodic is the newest (the system picks). Row shows kind badge + timestamp + small picks/workflows meta; the on-disk filename is implementation detail and stays hidden. The group header keeps its Open folder ↗ link for manual inspection/backup. Final decision: row clicks select only. When this section opens because the selected snapshot has newer recovery, the Load dialog header changes to Auto-save is newer than the saved version and the footer presents NO - load saved / YES - load latest.Load snapshot
Koolook_v03
starter
▸ Recovery auto-saves
Confirm delete "Koolook_v03"?
No new modal — same Load dialog stays open. The targeted row gets a red outline so the user can see exactly what they're about to delete. The bottom bar transforms: Load from… hides, Confirm delete "<name>"? appears on the left, Close becomes Yes (red) on the right. Esc or clicking another row cancels. Same pattern can extend to autosave row deletes in the Recovery section.
4. Autosave-newer YES / NO modal — superseded reference
Auto-save is newer than the saved version
Koolook_v03.json
pre_load_2026-05-12T14-47-22.json
in Koolook_v03_autosave/
What gets saved / loaded
Loading replaces your current picks and workflows. A recovery copy of your current state is written first into the same autosave folder, so this choice is reversible. Press Esc to cancel.
Superseded final decision: this separate modal is no longer the target UX. Keep the decision inside the Load dialog instead: selecting a snapshot with newer recovery opens the bottom Recovery auto-saves section, changes the header to Auto-save is newer than the saved version, and exposes footer buttons NO - load saved / YES - load latest. The row shapes above remain useful visual references for the named-vs-latest comparison, but the extra modal layer is intentionally dropped.
5. Button state pattern (consistent across every dialog)
Default
Clean state. Save writes over the currently tracked preset; nothing about the destination has changed.
Dirty — folder changed
User picked a different destination via "Save to…". Label spells out the consequence so the click isn't a surprise.
In progress
Write in flight. Button disables to prevent double-submit; color shifts to neutral-blue so it doesn't read "danger".
Done
After a successful write, briefly. Same pattern as the Settings dialog's idle "Saved" state.
Final decision: the four-state cycle applies to true committing primary actions, such as the Save button that writes snapshot data. Save to… and Load from… are utility navigation buttons that open the folder picker; they stay stable rather than cycling through write-state labels.
6. Folder-browse picker — what opens when you click Save to… / Load from…
Choose snapshot library folder
Koolook_v03_autosave
default_autosave
Koolook_v03.json
starter.json
Navigate-into model — standard folder-picker behaviour. The path input shows where you currently are, not what you've selected from a sibling list. Clicking a subfolder drills into it; ↑ Up climbs one level. The body lists that folder's contents: subfolders (clickable, amber 📁) and files (greyed-out 📄, inert — shown only so the user can confirm "yes, this is the folder I expected"). Use this folder commits whatever path is currently shown in the input. Three ways to set the path: (1) paste a path → Enter, (2) click subfolders to drill down + ↑ Up to climb, (3) New folder… creates one in place. The input always shows the end of the path when it overflows (leading
/Users/… clips off the left, never the trailing folder name) and is copy-paste-editable for clipboard paths (per PR #132).Step-flow — clicking "Save to…" or "Load from…"
1
User clicks Save to… in Save dialog (or Load from… in Load dialog).
2
Picker opens at the current library location. Path input pre-filled.
3
User navigates: type/paste a path, click subfolders, or hit New folder…
4
Selected-folder bar updates as the user navigates — always shows what "Use this folder" will commit.
5
Click Use this folder → server persists
libraryPath, picker closes.6
Parent dialog's library row reflects the new path. Load: list refreshes. Save: primary button label flips to "Save to new folder" (per Section 5 dirty state).
Locked-in decisions
- Library row labels: "Saved to" (Save dialog) / "Loaded from" (Load dialog).
- "Open folder ↗" text link sits in the top-right of the path box, above the path itself.
- Generic "Open folder" wording (no platform-specific Finder/Explorer split).
- Autosave-newer YES/NO modal — dropped. The intermediate scoped-row click design is also superseded. When a preset has newer recovery (server row-augment reports
latestAutosaveMtime > mtime), selecting the preset keeps the user in the Load dialog, changes the header to "Auto-save is newer than the saved version", opens the bottom Recovery auto-saves section for that preset only, and shows explicit footer buttons: NO - load saved and YES - load latest. Row clicks select; footer buttons commit. - Reset-to-default — dropped. Empty path inside the Save to… / Load from… picker clears the override if needed.
- Recovery row chrome: kind badge (Pre-load / Periodic) + timestamp + meta. No filenames exposed in rows.
- Delete confirmation is inline in the command bar, not a separate modal. Target row gets a red outline; Close transforms to "Yes". Escape or clicking another row cancels. Delete buttons stay visually neutral until hover.
- Folder picker: title only, no descriptive subtitle. Any explanatory gloss goes on the title's hover tooltip — same convention as every other dialog (conventions.md § Modal headers).
- Visual harness in
docs/designs/_harness/mounts each redesigned dialog against the liveweb/sidebar/modules so agents and maintainers can diff implementations against this mockup without dev-syncing. Workflow: visual-harness.md.
Still open for review
- Folder-picker action-bar order — current draft is
[New folder…] [spacer] [Cancel] [Use this folder]. You mentioned shuffling — any specific reorder? Options: move New folder… next to Use this folder; or swap Cancel and New folder… so all primary/secondary actions cluster on the right. - Save dialog also gets "Open folder ↗"? Current draft adds it for parity with Load. Useful for "peek at what's already in the destination" before saving. Keep or drop in Save?
- Inline delete confirm also applies to Recovery row deletes? Same pattern (red row outline + command-bar transform) extends cleanly. Confirm to lock in.
- Cancel during delete-confirm — Esc-only, or also click-outside-the-row, or an explicit Cancel button in the command bar? Current draft is Esc-only (per your direction: Close becomes Yes, no Cancel mentioned).