Fixed indexing on version history and now state history fully works

app/w/components/control-bar/components/history-dropdown-item.tsx

@@ -7,12 +7,14 @@ interface HistoryDropdownItemProps {
   action: string
   timestamp: number
   onClick?: () => void
+  isCurrent?: boolean
 }
 
 export function HistoryDropdownItem({
   action,
   timestamp,
   onClick,
+  isCurrent = false,
 }: HistoryDropdownItemProps) {
   const timeAgo = formatDistanceToNow(timestamp, { addSuffix: true })
 
@@ -24,7 +26,11 @@ export function HistoryDropdownItem({
       <Clock className="h-4 w-4 text-muted-foreground" />
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
-          <span className="text-xs text-muted-foreground">{timeAgo}</span>
+          {isCurrent ? (
+            <span className="text-xs text-muted-foreground">Current</span>
+          ) : (
+            <span className="text-xs text-muted-foreground">{timeAgo}</span>
+          )}
         </div>
         <p className="text-sm text-foreground">{action}</p>
       </div>

app/w/components/control-bar/control-bar.tsx

@@ -39,21 +39,30 @@ export function ControlBar() {
           </DropdownMenuTrigger>
 
           {history.past.length === 0 ? (
-            <DropdownMenuContent align="end" className="w-50">
+            <DropdownMenuContent align="end" className="w-40">
               <DropdownMenuItem className="text-sm text-muted-foreground">
                 No history available
               </DropdownMenuItem>
             </DropdownMenuContent>
           ) : (
             <DropdownMenuContent align="end" className="w-60">
-              {[...history.past].reverse().map((entry) => (
+              <>
                 <HistoryDropdownItem
-                  key={entry.timestamp}
-                  action={entry.action}
-                  timestamp={entry.timestamp}
-                  onClick={undo}
+                  key={history.present.timestamp}
+                  action={history.present.action}
+                  timestamp={history.present.timestamp}
+                  isCurrent={true}
+                  onClick={() => {}}
                 />
-              ))}
+                {[...history.past].reverse().map((entry) => (
+                  <HistoryDropdownItem
+                    key={entry.timestamp}
+                    action={entry.action}
+                    timestamp={entry.timestamp}
+                    onClick={undo}
+                  />
+                ))}
+              </>
             </DropdownMenuContent>
           )}
         </DropdownMenu>