'use client'; import { useHistoryStore } from '@/store/history-store'; import { History } from 'lucide-react'; export function HistoryPanel() { const { undoStack, redoStack } = useHistoryStore(); return (

History

{undoStack.length === 0 && redoStack.length === 0 ? (

No history yet

) : ( <> {/* Undo stack (most recent first) */} {[...undoStack].reverse().map((command, index) => (

{command.name}

{new Date(command.timestamp).toLocaleTimeString()}

))} {/* Current state indicator */} {undoStack.length > 0 && (
Current State
)} {/* Redo stack (oldest first) */} {[...redoStack].reverse().map((command, index) => (

{command.name}

{new Date(command.timestamp).toLocaleTimeString()}

))} )}
{undoStack.length} undoable {redoStack.length} redoable
); }