Skip to content

feat(design-mode): wire ⌘Z / ⌘⇧Z keyboard shortcuts for Undo/Redo #60

@Delqhi

Description

@Delqhi

Problem

Issue #52 (Undo/Redo) was closed in #58 with the backend logic done (JSONL stacks, /api/workspace/design-history POST endpoint, pushEntry in design-edit handler). But the keyboard shortcuts (⌘Z / ⌘⇧Z) in the Design Mode preview iframe are not wired.

Goal

When the user is in Design Mode and focused on the preview iframe, pressing:

  • ⌘Z (macOS) / Ctrl+Z (Linux/Windows) → triggers POST /api/workspace/design-history { action: 'undo' }
  • ⌘⇧Z (macOS) / Ctrl+Shift+Z (Linux/Windows) → triggers POST /api/workspace/design-history { action: 'redo' }

Acceptance Criteria

  • Pressing ⌘Z in the preview iframe undoes the last applied change
  • Pressing ⌘⇧Z redoes the last undone change
  • Shortcuts work on both macOS (⌘) and Linux/Windows (Ctrl)
  • Shortcuts are scoped to Design Mode only (not when typing in chat or settings)
  • Visual feedback when undo/redo is triggered (toast, brief flash, etc.)
  • History is bounded at 100 entries (existing behaviour, just verify)

Files to modify

  • public/design-mode-agent.js — add keydown listener in iframe
  • components/workspace/preview-panel.tsx — add listener on the wrapper
  • components/workspace/workspace-header.tsx — add hint icon in toolbar

Technical Notes

  • The shortcut should NOT trigger when an <input> or <textarea> has focus (so it doesn't break form editing)
  • Use e.metaKey (macOS) or e.ctrlKey (others) to detect the modifier
  • The handler should call parent.postMessage({ type: 'design-undo' | 'design-redo' }, '*') from inside the iframe
  • The parent (preview-panel.tsx) listens for the message and calls the API

Related

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions