feat: [US-053] - Revert changes from audit trail

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/editor/[projectId]/FlowchartEditor.tsx

@@ -39,7 +39,7 @@ import RemoteCursors from '@/components/editor/RemoteCursors'
 import { CRDTManager } from '@/lib/collaboration/crdt'
 import { AuditTrailRecorder } from '@/lib/collaboration/auditTrail'
 import ShareModal from '@/components/editor/ShareModal'
-import ActivityHistorySidebar from '@/components/editor/ActivityHistorySidebar'
+import ActivityHistorySidebar, { type AuditEntry } from '@/components/editor/ActivityHistorySidebar'
 import CollaborationToast, { type CollaborationNotification } from '@/components/editor/CollaborationToast'
 import type { FlowchartData, FlowchartNode, FlowchartEdge, Character, Variable, Condition } from '@/types/flowchart'
 
@@ -316,6 +316,19 @@ function getUserColor(userId: string): string {
   return RANDOM_COLORS[Math.abs(hash) % RANDOM_COLORS.length]
 }
 
+// Determine the action type for a revert audit entry
+function getRevertActionType(originalActionType: string): string {
+  switch (originalActionType) {
+    case 'node_add': return 'node_delete' // reverting an add = deleting
+    case 'node_delete': return 'node_add' // reverting a delete = adding back
+    case 'node_update': return 'node_update' // reverting an update = updating back
+    case 'edge_add': return 'edge_delete'
+    case 'edge_delete': return 'edge_add'
+    case 'edge_update': return 'edge_update'
+    default: return originalActionType
+  }
+}
+
 // Compute auto-migration of existing free-text values to character/variable definitions
 function computeMigration(initialData: FlowchartData, shouldMigrate: boolean) {
   if (!shouldMigrate) {
@@ -533,6 +546,7 @@ function FlowchartEditorInner({ projectId, projectName, userId, userDisplayName,
   const [nodeLocks, setNodeLocks] = useState<Map<string, NodeLockInfo>>(new Map())
   const localLockRef = useRef<string | null>(null) // node ID currently locked by this user
   const lockExpiryTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const isRevertingRef = useRef(false) // guards against double audit recording during revert
 
   // Initialize CRDT manager and connect to Supabase Realtime channel on mount
   useEffect(() => {
@@ -666,13 +680,17 @@ function FlowchartEditorInner({ projectId, projectName, userId, userDisplayName,
   useEffect(() => {
     if (isRemoteUpdateRef.current) return
     crdtRef.current?.updateNodes(nodesForCRDT)
-    auditRef.current?.recordNodeChanges(nodesForCRDT)
+    if (!isRevertingRef.current) {
+      auditRef.current?.recordNodeChanges(nodesForCRDT)
+    }
   }, [nodesForCRDT])
 
   useEffect(() => {
     if (isRemoteUpdateRef.current) return
     crdtRef.current?.updateEdges(edgesForCRDT)
-    auditRef.current?.recordEdgeChanges(edgesForCRDT)
+    if (!isRevertingRef.current) {
+      auditRef.current?.recordEdgeChanges(edgesForCRDT)
+    }
   }, [edgesForCRDT])
 
   // Broadcast cursor position on mouse move (throttled to 50ms)
@@ -766,6 +784,105 @@ function FlowchartEditorInner({ projectId, projectName, userId, userDisplayName,
     }
   }, [setNodes, setEdges])
 
+  const handleRevertEntry = useCallback((entry: AuditEntry) => {
+    const { action_type, entity_id, previous_state, new_state } = entry
+
+    // Guard against double audit recording - we write our own audit entry for the revert
+    isRevertingRef.current = true
+    // Reset after React has processed the state updates
+    setTimeout(() => { isRevertingRef.current = false }, 0)
+
+    if (action_type === 'node_add') {
+      // Revert an addition = delete the node
+      setNodes((nds) => nds.filter((n) => n.id !== entity_id))
+      // Also remove any edges connected to this node
+      setEdges((eds) => eds.filter((e) => e.source !== entity_id && e.target !== entity_id))
+    } else if (action_type === 'node_update') {
+      // Revert an update = restore previous state
+      if (previous_state) {
+        const prevNode = previous_state as unknown as FlowchartNode
+        setNodes((nds) =>
+          nds.map((n) =>
+            n.id === entity_id
+              ? { ...n, position: prevNode.position, data: prevNode.data }
+              : n
+          )
+        )
+      }
+    } else if (action_type === 'node_delete') {
+      // Revert a deletion = re-create the node from previous_state
+      if (previous_state) {
+        const prevNode = previous_state as unknown as FlowchartNode
+        const newReactFlowNode: Node = {
+          id: prevNode.id,
+          type: prevNode.type,
+          position: prevNode.position,
+          data: prevNode.data,
+        }
+        setNodes((nds) => [...nds, newReactFlowNode])
+      }
+    } else if (action_type === 'edge_add') {
+      // Revert an edge addition = delete the edge
+      setEdges((eds) => eds.filter((e) => e.id !== entity_id))
+    } else if (action_type === 'edge_update') {
+      // Revert an edge update = restore previous state
+      if (previous_state) {
+        const prevEdge = previous_state as unknown as FlowchartEdge
+        setEdges((eds) =>
+          eds.map((e) =>
+            e.id === entity_id
+              ? {
+                  ...e,
+                  source: prevEdge.source,
+                  sourceHandle: prevEdge.sourceHandle,
+                  target: prevEdge.target,
+                  targetHandle: prevEdge.targetHandle,
+                  data: prevEdge.data,
+                }
+              : e
+          )
+        )
+      }
+    } else if (action_type === 'edge_delete') {
+      // Revert an edge deletion = re-create the edge from previous_state
+      if (previous_state) {
+        const prevEdge = previous_state as unknown as FlowchartEdge
+        const newReactFlowEdge: Edge = {
+          id: prevEdge.id,
+          source: prevEdge.source,
+          sourceHandle: prevEdge.sourceHandle,
+          target: prevEdge.target,
+          targetHandle: prevEdge.targetHandle,
+          data: prevEdge.data,
+          type: 'conditional',
+          markerEnd: { type: MarkerType.ArrowClosed },
+        }
+        setEdges((eds) => [...eds, newReactFlowEdge])
+      }
+    }
+
+    // Record the revert as a new audit trail entry (fire-and-forget)
+    const supabase = createClient()
+    const revertActionType = getRevertActionType(action_type)
+    supabase
+      .from('audit_trail')
+      .insert({
+        project_id: projectId,
+        user_id: userId,
+        action_type: revertActionType,
+        entity_id,
+        previous_state: new_state, // "previous" for the revert is the current state (which was new_state)
+        new_state: previous_state, // "new" for the revert is what we're restoring to
+      })
+      .then(({ error }) => {
+        if (error) {
+          console.error('[Revert] Failed to write revert audit entry:', error)
+        }
+      })
+
+    setToast({ message: 'Change reverted successfully', type: 'success' })
+  }, [setNodes, setEdges, projectId, userId])
+
   const handleNodeFocus = useCallback((nodeId: string) => {
     // Broadcast lock for this node
     localLockRef.current = nodeId
@@ -1426,6 +1543,7 @@ function FlowchartEditorInner({ projectId, projectName, userId, userDisplayName,
               projectId={projectId}
               onClose={() => setShowHistory(false)}
               onSelectEntity={handleHistorySelectEntity}
+              onRevert={handleRevertEntry}
             />
           )}
         </div>

src/components/editor/ActivityHistorySidebar.tsx

@@ -2,10 +2,11 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createClient } from '@/lib/supabase/client'
+import RevertConfirmDialog from './RevertConfirmDialog'
 
 const PAGE_SIZE = 20
 
-type AuditEntry = {
+export type AuditEntry = {
   id: string
   project_id: string
   user_id: string
@@ -21,6 +22,7 @@ type ActivityHistorySidebarProps = {
   projectId: string
   onClose: () => void
   onSelectEntity: (entityId: string, actionType: string) => void
+  onRevert: (entry: AuditEntry) => void
 }
 
 const ACTION_LABELS: Record<string, string> = {
@@ -132,12 +134,14 @@ export default function ActivityHistorySidebar({
   projectId,
   onClose,
   onSelectEntity,
+  onRevert,
 }: ActivityHistorySidebarProps) {
   const [entries, setEntries] = useState<AuditEntry[]>([])
   const [loading, setLoading] = useState(true)
   const [loadingMore, setLoadingMore] = useState(false)
   const [hasMore, setHasMore] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [revertEntry, setRevertEntry] = useState<AuditEntry | null>(null)
   const mountedRef = useRef(true)
 
   const fetchEntriesRaw = useCallback(async (offset: number): Promise<{ entries: AuditEntry[]; hasMore: boolean; error?: string }> => {
@@ -267,13 +271,11 @@ export default function ActivityHistorySidebar({
                 const userColor = getUserColor(entry.user_id)
                 const isDeleted = entry.action_type.endsWith('_delete')
                 return (
-                  <button
+                  <div
                     key={entry.id}
-                    onClick={() => !isDeleted && onSelectEntity(entry.entity_id, entry.action_type)}
+                    className={`group w-full px-4 py-2.5 text-left transition-colors ${
-                    disabled={isDeleted}
-                    className={`w-full px-4 py-2.5 text-left transition-colors ${
                       isDeleted
-                        ? 'cursor-default opacity-60'
+                        ? 'opacity-60'
                         : 'hover:bg-zinc-50 dark:hover:bg-zinc-700/50'
                     }`}
                   >
@@ -288,21 +290,37 @@ export default function ActivityHistorySidebar({
                           <span className={`text-xs font-bold ${ACTION_COLORS[entry.action_type] || 'text-zinc-500'}`}>
                             {ACTION_ICONS[entry.action_type] || '?'}
                           </span>
-                          <span className="truncate text-xs font-medium text-zinc-800 dark:text-zinc-200">
+                          <button
+                            onClick={() => !isDeleted && onSelectEntity(entry.entity_id, entry.action_type)}
+                            disabled={isDeleted}
+                            className={`truncate text-xs font-medium text-zinc-800 dark:text-zinc-200 ${!isDeleted ? 'hover:underline' : ''}`}
+                          >
                             {ACTION_LABELS[entry.action_type] || entry.action_type}
-                          </span>
+                          </button>
                         </div>
                         <div className="mt-0.5 truncate text-xs text-zinc-500 dark:text-zinc-400">
                           {getEntityDescription(entry)}
                         </div>
-                        <div className="mt-0.5 flex items-center gap-1.5 text-[10px] text-zinc-400 dark:text-zinc-500">
+                        <div className="mt-0.5 flex items-center justify-between">
-                          <span>{entry.user_display_name}</span>
+                          <div className="flex items-center gap-1.5 text-[10px] text-zinc-400 dark:text-zinc-500">
-                          <span>·</span>
+                            <span>{entry.user_display_name}</span>
-                          <span>{formatTime(entry.created_at)}</span>
+                            <span>·</span>
+                            <span>{formatTime(entry.created_at)}</span>
+                          </div>
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              setRevertEntry(entry)
+                            }}
+                            className="hidden rounded px-1.5 py-0.5 text-[10px] font-medium text-amber-600 hover:bg-amber-50 group-hover:inline-block dark:text-amber-400 dark:hover:bg-amber-900/30"
+                            title="Revert this change"
+                          >
+                            Revert
+                          </button>
                         </div>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 )
               })}
             </div>
@@ -321,6 +339,19 @@ export default function ActivityHistorySidebar({
           </div>
         )}
       </div>
+      {revertEntry && (
+        <RevertConfirmDialog
+          actionType={revertEntry.action_type}
+          entityDescription={getEntityDescription(revertEntry)}
+          previousState={revertEntry.previous_state}
+          newState={revertEntry.new_state}
+          onConfirm={() => {
+            onRevert(revertEntry)
+            setRevertEntry(null)
+          }}
+          onCancel={() => setRevertEntry(null)}
+        />
+      )}
     </div>
   )
 }

src/components/editor/RevertConfirmDialog.tsx

@@ -0,0 +1,162 @@
+'use client'
+
+type RevertConfirmDialogProps = {
+  actionType: string
+  entityDescription: string
+  previousState: Record<string, unknown> | null
+  newState: Record<string, unknown> | null
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+const ACTION_LABELS: Record<string, string> = {
+  node_add: 'node addition',
+  node_update: 'node update',
+  node_delete: 'node deletion',
+  edge_add: 'edge addition',
+  edge_update: 'edge update',
+  edge_delete: 'edge deletion',
+}
+
+function formatStatePreview(state: Record<string, unknown> | null): string {
+  if (!state) return '(none)'
+
+  const type = state.type as string | undefined
+  const data = state.data as Record<string, unknown> | undefined
+
+  if (type === 'dialogue' && data) {
+    const speaker = (data.speaker as string) || '(no speaker)'
+    const text = (data.text as string) || '(no text)'
+    return `Dialogue: ${speaker}\n"${text.slice(0, 80)}${text.length > 80 ? '…' : ''}"`
+  }
+  if (type === 'choice' && data) {
+    const prompt = (data.prompt as string) || '(no prompt)'
+    const options = (data.options as { label: string }[]) || []
+    const optionLabels = options.map((o) => o.label || '(empty)').join(', ')
+    return `Choice: ${prompt.slice(0, 60)}${prompt.length > 60 ? '…' : ''}\nOptions: ${optionLabels}`
+  }
+  if (type === 'variable' && data) {
+    const name = (data.variableName as string) || '(unnamed)'
+    const op = (data.operation as string) || 'set'
+    const val = data.value ?? 0
+    return `Variable: ${name} ${op} ${val}`
+  }
+
+  // Edge state
+  if (state.source && state.target) {
+    const condition = (state.data as Record<string, unknown> | undefined)?.condition as Record<string, unknown> | undefined
+    if (condition) {
+      return `Edge: ${state.source} → ${state.target}\nCondition: ${condition.variableName} ${condition.operator} ${condition.value}`
+    }
+    return `Edge: ${state.source} → ${state.target}`
+  }
+
+  return JSON.stringify(state, null, 2).slice(0, 200)
+}
+
+function getRevertDescription(actionType: string): string {
+  switch (actionType) {
+    case 'node_add':
+      return 'This will delete the node that was added.'
+    case 'node_update':
+      return 'This will restore the node to its previous state.'
+    case 'node_delete':
+      return 'This will re-create the deleted node.'
+    case 'edge_add':
+      return 'This will delete the edge that was added.'
+    case 'edge_update':
+      return 'This will restore the edge to its previous state.'
+    case 'edge_delete':
+      return 'This will re-create the deleted edge.'
+    default:
+      return 'This will undo the change.'
+  }
+}
+
+export default function RevertConfirmDialog({
+  actionType,
+  entityDescription,
+  previousState,
+  newState,
+  onConfirm,
+  onCancel,
+}: RevertConfirmDialogProps) {
+  const label = ACTION_LABELS[actionType] || actionType
+  const description = getRevertDescription(actionType)
+
+  // For revert, the "before" is the current state (newState) and "after" is what we're restoring to (previousState)
+  const isAddition = actionType.endsWith('_add')
+  const isDeletion = actionType.endsWith('_delete')
+
+  return (
+    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/50" onClick={onCancel}>
+      <div
+        className="mx-4 w-full max-w-lg rounded-lg bg-white shadow-xl dark:bg-zinc-800"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="border-b border-zinc-200 px-5 py-4 dark:border-zinc-700">
+          <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+            Revert {label}
+          </h3>
+          <p className="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+            {entityDescription}
+          </p>
+        </div>
+
+        <div className="px-5 py-4">
+          <p className="mb-3 text-sm text-zinc-700 dark:text-zinc-300">
+            {description}
+          </p>
+
+          <div className="grid grid-cols-2 gap-3">
+            {!isAddition && (
+              <div>
+                <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                  Current State
+                </div>
+                <pre className="max-h-32 overflow-auto rounded bg-zinc-100 p-2 text-[11px] text-zinc-700 dark:bg-zinc-900 dark:text-zinc-300">
+                  {formatStatePreview(newState)}
+                </pre>
+              </div>
+            )}
+            {!isDeletion && (
+              <div>
+                <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                  {isAddition ? 'Will be removed' : 'Restored State'}
+                </div>
+                <pre className="max-h-32 overflow-auto rounded bg-zinc-100 p-2 text-[11px] text-zinc-700 dark:bg-zinc-900 dark:text-zinc-300">
+                  {isAddition ? formatStatePreview(newState) : formatStatePreview(previousState)}
+                </pre>
+              </div>
+            )}
+            {isDeletion && (
+              <div className="col-span-2">
+                <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                  Will be restored
+                </div>
+                <pre className="max-h-32 overflow-auto rounded bg-zinc-100 p-2 text-[11px] text-zinc-700 dark:bg-zinc-900 dark:text-zinc-300">
+                  {formatStatePreview(previousState)}
+                </pre>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2 border-t border-zinc-200 px-5 py-3 dark:border-zinc-700">
+          <button
+            onClick={onCancel}
+            className="rounded px-3 py-1.5 text-xs font-medium text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-700"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            className="rounded bg-amber-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-amber-700"
+          >
+            Revert
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}