Editor has no undo history panel — user can press Cmd+Z to step back one entry at a time but can't see what's in the stack, jump to a specific entry, or clear it #206

New issue

Closed

opened 2026-10-03 23:59:32 +00:00 by Mark · 1 comment

Mark commented

2026-10-03 23:59:32 +00:00

Owner

Finding

src/components/editor/Editor.tsx has a history: StitchPath[] and historyIndex: number (line 670+). The handleUndo and handleRedo callbacks step through the stack one entry at a time.

There's no UI to:

See how many entries are in the history
See what each entry is (a snapshot label or summary)
Jump to a specific entry
Clear the history

The user can press Cmd+Z to step back, but if they want to go back 30 edits, they have to press Cmd+Z 30 times. There's no panel showing the stack.

grep -rn 'HistoryPanel\|historyPanel' src/components/editor/ returns 0 hits.

Where

History state: src/pages/Editor.tsx:670+ (history, historyIndex)
Hook: src/components/editor/useKeyboardShortcuts.ts (Cmd+Z, Cmd+Shift+Z bindings)
No history panel: src/components/editor/ (no HistoryPanel.tsx)
Right panel: src/components/editor/EditorRightPanel.tsx (no history section)

Suggested fix shape

Add a "History" section to the right panel (the panel already has Path Properties, Stitch Properties, etc., as collapsible sections):

<SectionHeader title="History" isOpen={openSections.history} onToggle={...} />
{openSections.history && (
  <div className="p-2 max-h-32 overflow-y-auto">
    {history.slice(0, historyIndex + 1).map((_, i) => (
      <button
        key={i}
        onClick={() => jumpToHistoryEntry(i)}
        className={i === historyIndex ? 'active' : ''}
      >
        Edit {i + 1}
      </button>
    )).reverse()}
  </div>
)}

jumpToHistoryEntry(i) sets historyIndex to i and updates paths to the snapshot at that index. The "active" entry is the current state.

Tradeoffs:

The history entries are full snapshots of paths (not deltas). Each entry is potentially a deep JSON copy. A panel showing 50 entries with full data is fine memory-wise (the snapshots are already in memory) but the labels are "Edit 1, Edit 2, …" because the snapshots don't carry labels.
Optionally: a "Clear history" button at the bottom that empties the stack (releases memory for old snapshots).
Optionally: a "Save this version" affordance that pins a snapshot with a user-supplied label.

Severity

Low. The user can step through with Cmd+Z. Power users with long sessions want to jump to specific entries.

Discovered by

Gap analysis (2026-10-02) of editor history UI.

#196 (open) — Editor MAX_HISTORY. The history panel is the user-facing mirror of the same state.
#188 (open) — Editor multi-path selection. Selection state in history entries is a known issue; the panel would surface it.
Most vector editors (Illustrator, Figma, Inkscape) have a history panel; this is the standard affordance.

## Finding `src/components/editor/Editor.tsx` has a `history: StitchPath[]` and `historyIndex: number` (line 670+). The `handleUndo` and `handleRedo` callbacks step through the stack one entry at a time. There's no UI to: - See how many entries are in the history - See what each entry is (a snapshot label or summary) - Jump to a specific entry - Clear the history The user can press Cmd+Z to step back, but if they want to go back 30 edits, they have to press Cmd+Z 30 times. There's no panel showing the stack. `grep -rn 'HistoryPanel\|historyPanel' src/components/editor/` returns 0 hits. ## Where - History state: `src/pages/Editor.tsx:670+` (`history`, `historyIndex`) - Hook: `src/components/editor/useKeyboardShortcuts.ts` (Cmd+Z, Cmd+Shift+Z bindings) - No history panel: `src/components/editor/` (no HistoryPanel.tsx) - Right panel: `src/components/editor/EditorRightPanel.tsx` (no history section) ## Suggested fix shape Add a "History" section to the right panel (the panel already has Path Properties, Stitch Properties, etc., as collapsible sections): ```tsx <SectionHeader title="History" isOpen={openSections.history} onToggle={...} /> {openSections.history && ( <div className="p-2 max-h-32 overflow-y-auto"> {history.slice(0, historyIndex + 1).map((_, i) => ( <button key={i} onClick={() => jumpToHistoryEntry(i)} className={i === historyIndex ? 'active' : ''} > Edit {i + 1} </button> )).reverse()} </div> )} ``` `jumpToHistoryEntry(i)` sets `historyIndex` to `i` and updates `paths` to the snapshot at that index. The "active" entry is the current state. Tradeoffs: - The history entries are full snapshots of `paths` (not deltas). Each entry is potentially a deep JSON copy. A panel showing 50 entries with full data is fine memory-wise (the snapshots are already in memory) but the labels are "Edit 1, Edit 2, …" because the snapshots don't carry labels. - Optionally: a "Clear history" button at the bottom that empties the stack (releases memory for old snapshots). - Optionally: a "Save this version" affordance that pins a snapshot with a user-supplied label. ## Severity Low. The user can step through with Cmd+Z. Power users with long sessions want to jump to specific entries. ## Discovered by Gap analysis (2026-10-02) of editor history UI. ## Related - #196 (open) — Editor MAX_HISTORY. The history panel is the user-facing mirror of the same state. - #188 (open) — Editor multi-path selection. Selection state in history entries is a known issue; the panel would surface it. - Most vector editors (Illustrator, Figma, Inkscape) have a history panel; this is the standard affordance.

Mark added the

feature-request

triage-approved

labels

2026-10-03 23:59:32 +00:00

Mark referenced this issue from a commit

2026-10-04 02:52:44 +00:00

fix(#206): Editor undo history panel — see stack, jump to entry, clear

Mark commented

2026-10-04 02:54:04 +00:00

Author

Owner

Shipped in 33d7f4b — Editor undo history panel.

Right panel now has a collapsible History section showing every undo snapshot as a clickable row (newest first). Each row jumps straight to that snapshot via the new handleJumpToHistoryEntry. The section header has Undo / Redo / Clear buttons that reuse the same callbacks already wired into the keyboard shortcuts and EditorHeader. The Clear button resets the stack to a single baseline snapshot so Cmd+Z still works but old deep copies are released.

Tests: 978 passed, 1 skipped (+13 new pinning the section contract: row count, newest-first ordering, active highlight, click wiring, button-disabled flags, back-compat hiding when history props omitted). Lint clean. tsc -b clean.

Shipped in 33d7f4b — Editor undo history panel. Right panel now has a collapsible History section showing every undo snapshot as a clickable row (newest first). Each row jumps straight to that snapshot via the new handleJumpToHistoryEntry. The section header has Undo / Redo / Clear buttons that reuse the same callbacks already wired into the keyboard shortcuts and EditorHeader. The Clear button resets the stack to a single baseline snapshot so Cmd+Z still works but old deep copies are released. Tests: 978 passed, 1 skipped (+13 new pinning the section contract: row count, newest-first ordering, active highlight, click wiring, button-disabled flags, back-compat hiding when history props omitted). Lint clean. tsc -b clean.

Mark closed this issue

2026-10-04 02:54:07 +00:00

Mark referenced this issue

2026-10-04 03:36:29 +00:00

Workspace has no undo history panel — user can press Cmd+Z to step back one entry at a time, no way to see the full history and pick a specific snapshot to revert to (Figma/Illustrator-style history panel) #255

Mark referenced this issue

2026-10-04 03:39:22 +00:00

Editor has no undo history panel — user can press Cmd+Z to step back one entry at a time, no way to see the full history list and click to jump to a specific state (parallel to #255 for the editor) #265

Mark referenced this issue

2026-10-04 12:03:41 +00:00