Control bar state history implemented. Need to fix indexing

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

@@ -0,0 +1,33 @@
+import { formatDistanceToNow } from 'date-fns'
+import { Clock } from 'lucide-react'
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
+import { cn } from '@/lib/utils'
+
+interface HistoryDropdownItemProps {
+  action: string
+  timestamp: number
+  onClick?: () => void
+}
+
+export function HistoryDropdownItem({
+  action,
+  timestamp,
+  onClick,
+}: HistoryDropdownItemProps) {
+  const timeAgo = formatDistanceToNow(timestamp, { addSuffix: true })
+
+  return (
+    <DropdownMenuItem
+      className="flex items-start gap-2 p-3 cursor-pointer"
+      onClick={onClick}
+    >
+      <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>
+        </div>
+        <p className="text-sm text-foreground">{action}</p>
+      </div>
+    </DropdownMenuItem>
+  )
+}

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

@@ -10,9 +10,12 @@ import {
 import { History, Bell, Play } from 'lucide-react'
 import { useNotificationStore } from '@/stores/notifications/notifications-store'
 import { NotificationDropdownItem } from './components/notification-dropdown-item'
+import { useWorkflowStore } from '@/stores/workflow/workflow-store'
+import { HistoryDropdownItem } from './components/history-dropdown-item'
 
 export function ControlBar() {
   const { notifications } = useNotificationStore()
+  const { history, undo, redo } = useWorkflowStore()
 
   return (
     <div className="flex h-16 w-full items-center justify-between bg-background px-6 border-b">
@@ -34,10 +37,25 @@ export function ControlBar() {
               <span className="sr-only">Version History</span>
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem>View History</DropdownMenuItem>
-            <DropdownMenuItem>Compare Versions</DropdownMenuItem>
-          </DropdownMenuContent>
+
+          {history.past.length === 0 ? (
+            <DropdownMenuContent align="end" className="w-50">
+              <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}
+                />
+              ))}
+            </DropdownMenuContent>
+          )}
         </DropdownMenu>
 
         <DropdownMenu>

stores/workflow/history-middleware.ts

@@ -19,6 +19,7 @@ export const withHistory = (
         edges: initialState.edges,
       },
       timestamp: Date.now(),
+      action: 'Initial state',
     }
 
     return {
@@ -71,12 +72,16 @@ export const withHistory = (
   }
 }
 
-export const createHistoryEntry = (state: WorkflowState): HistoryEntry => ({
+export const createHistoryEntry = (
+  state: WorkflowState,
+  action: string
+): HistoryEntry => ({
   state: {
     blocks: { ...state.blocks },
-    edges: [...state.edges],
+    edges: [...state.edges ],
   },
   timestamp: Date.now(),
+  action,
 })
 
 export const pushHistory = (
@@ -89,10 +94,11 @@ export const pushHistory = (
     replace?: boolean
   ) => void,
   get: () => WorkflowStoreWithHistory,
-  newState: WorkflowState
+  newState: WorkflowState,
+  action: string
 ) => {
   const { history } = get()
-  const newEntry = createHistoryEntry(newState)
+  const newEntry = createHistoryEntry(newState, action)
 
   set({
     history: {

stores/workflow/history-types.ts

@@ -3,6 +3,7 @@ import { WorkflowState } from './types'
 export interface HistoryEntry {
   state: WorkflowState
   timestamp: number
+  action: string
 }
 
 export interface WorkflowHistory {

stores/workflow/workflow-store.ts

@@ -13,6 +13,7 @@ const initialState = {
     present: {
       state: { blocks: {}, edges: [] },
       timestamp: Date.now(),
+      action: 'Initial state',
     },
     future: [],
   },
@@ -76,7 +77,7 @@ export const useWorkflowStore = create<WorkflowStoreWithHistory>()(
         }
 
         set(newState)
-        pushHistory(set, get, newState)
+        pushHistory(set, get, newState, `Add ${type} block`)
       },
 
       updateBlockPosition: (id: string, position: Position) => {
@@ -102,7 +103,7 @@ export const useWorkflowStore = create<WorkflowStoreWithHistory>()(
         delete newState.blocks[id]
         
         set(newState)
-        pushHistory(set, get, newState)
+        pushHistory(set, get, newState, 'Remove block')
       },
 
       addEdge: (edge: Edge) => {
@@ -119,7 +120,7 @@ export const useWorkflowStore = create<WorkflowStoreWithHistory>()(
         }
         
         set(newState)
-        pushHistory(set, get, newState)
+        pushHistory(set, get, newState, 'Add connection')
       },
 
       removeEdge: (edgeId: string) => {
@@ -129,13 +130,13 @@ export const useWorkflowStore = create<WorkflowStoreWithHistory>()(
         }
         
         set(newState)
-        pushHistory(set, get, newState)
+        pushHistory(set, get, newState, 'Remove connection')
       },
 
       clear: () => {
         const newState = initialState
         set(newState)
-        pushHistory(set, get, newState)
+        pushHistory(set, get, newState, 'Clear workflow')
       },
     })),
     { name: 'workflow-store' }