From 6125b2f0b5deb8b778e57ae47dbde9097a7005ef Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Fri, 28 Feb 2025 17:26:30 -0800
Subject: [PATCH] improvement(sync): added backwards sync from db

---
 app/api/db/fetch/route.ts                    | 28 ++++++
 app/api/db/sync/route.ts                     | 23 +++++
 app/w/components/control-bar/control-bar.tsx |  4 +-
 app/w/components/sidebar/sidebar.tsx         |  2 +-
 stores/sync-manager.ts                       | 99 +++++++++++++++++++-
 stores/workflow/registry/store.ts            |  4 +
 6 files changed, 156 insertions(+), 4 deletions(-)
 create mode 100644 app/api/db/fetch/route.ts

diff --git a/app/api/db/fetch/route.ts b/app/api/db/fetch/route.ts
new file mode 100644
index 0000000000..1c44adf33b
--- /dev/null
+++ b/app/api/db/fetch/route.ts
@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server'
+import { eq } from 'drizzle-orm'
+import { getSession } from '@/lib/auth'
+import { db } from '@/db'
+import { workflow } from '@/db/schema'
+
+export async function GET(request: Request) {
+  try {
+    const session = await getSession()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    // Fetch all workflows for the current user
+    const userWorkflows = await db
+      .select()
+      .from(workflow)
+      .where(eq(workflow.userId, session.user.id))
+
+    return NextResponse.json({
+      success: true,
+      workflows: userWorkflows,
+    })
+  } catch (error) {
+    console.error('Fetch workflows error:', error)
+    return NextResponse.json({ error: 'Failed to fetch workflows' }, { status: 500 })
+  }
+}
diff --git a/app/api/db/sync/route.ts b/app/api/db/sync/route.ts
index be09b36a87..86cfc279bd 100644
--- a/app/api/db/sync/route.ts
+++ b/app/api/db/sync/route.ts
@@ -81,3 +81,26 @@ export async function POST(request: Request) {
     return NextResponse.json({ error: 'Batch sync failed' }, { status: 500 })
   }
 }
+
+export async function GET(request: Request) {
+  try {
+    const session = await getSession()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    // Fetch all workflows for the current user
+    const userWorkflows = await db
+      .select()
+      .from(workflow)
+      .where(eq(workflow.userId, session.user.id))
+
+    return NextResponse.json({
+      success: true,
+      workflows: userWorkflows,
+    })
+  } catch (error) {
+    console.error('Fetch workflows error:', error)
+    return NextResponse.json({ error: 'Failed to fetch workflows' }, { status: 500 })
+  }
+}
diff --git a/app/w/components/control-bar/control-bar.tsx b/app/w/components/control-bar/control-bar.tsx
index 21a1090d9d..40890429db 100644
--- a/app/w/components/control-bar/control-bar.tsx
+++ b/app/w/components/control-bar/control-bar.tsx
@@ -190,7 +190,9 @@ export function ControlBar() {
             className="font-semibold text-sm hover:text-muted-foreground w-fit"
             onClick={handleNameClick}
           >
-            {activeWorkflowId ? workflows[activeWorkflowId].name : 'Workflow'}
+            {activeWorkflowId && workflows[activeWorkflowId]
+              ? workflows[activeWorkflowId].name
+              : 'Workflow'}
           </h2>
         )}
         {mounted && (
diff --git a/app/w/components/sidebar/sidebar.tsx b/app/w/components/sidebar/sidebar.tsx
index f08f7ea321..766956ed7e 100644
--- a/app/w/components/sidebar/sidebar.tsx
+++ b/app/w/components/sidebar/sidebar.tsx
@@ -69,7 +69,7 @@ export function Sidebar() {
       {/* Scrollable workflows section */}
       <nav className="flex-1 overflow-y-auto px-2 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']">
         <div className="flex flex-col items-center gap-4">
-          {Object.values(workflows).map((workflow) => (
+          {Object.values(workflows || {}).map((workflow) => (
             <NavItem key={workflow.id} href={`/w/${workflow.id}`} label={workflow.name}>
               <div
                 className="h-4 w-4 rounded-full"
diff --git a/stores/sync-manager.ts b/stores/sync-manager.ts
index 3b156e82ce..fb893f0a35 100644
--- a/stores/sync-manager.ts
+++ b/stores/sync-manager.ts
@@ -19,6 +19,7 @@ interface WorkflowSyncPayload {
 const SYNC_INTERVAL_MS = 30000
 const API_ENDPOINTS = {
   SYNC: '/api/db/sync',
+  FETCH: '/api/db/fetch',
   SCHEDULE: '/api/scheduled/schedule',
   LOGIN: '/login',
 } as const
@@ -146,11 +147,105 @@ export async function performSync(): Promise<void> {
   }
 }
 
-// Sync manager initialization
+// New function to fetch workflows from the server
+export async function fetchWorkflowsFromServer(): Promise<boolean> {
+  try {
+    const response = await fetch(API_ENDPOINTS.FETCH, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+    })
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        window.location.href = API_ENDPOINTS.LOGIN
+        return false
+      }
+      console.error(`Failed to fetch workflows: ${response.statusText}`)
+      return false
+    }
+
+    const data = await response.json()
+    const { workflows } = data
+
+    if (!workflows || !Array.isArray(workflows)) {
+      console.warn('No workflows returned from server')
+      return false
+    }
+
+    // Update workflow registry
+    const registry: Record<string, any> = {}
+    workflows.forEach((workflow: any) => {
+      // Store workflow in registry
+      registry[workflow.id] = {
+        id: workflow.id,
+        name: workflow.name,
+        description: workflow.description || '',
+        lastModified: new Date(workflow.updatedAt),
+      }
+
+      // Store workflow state in localStorage
+      localStorage.setItem(
+        `workflow-${workflow.id}`,
+        JSON.stringify({
+          blocks: workflow.state.blocks,
+          edges: workflow.state.edges,
+          loops: workflow.state.loops,
+          history: {
+            past: [],
+            present: {
+              state: {
+                blocks: workflow.state.blocks,
+                edges: workflow.state.edges,
+                loops: workflow.state.loops,
+              },
+              timestamp: Date.now(),
+              action: 'Loaded from server',
+            },
+            future: [],
+          },
+          lastSaved: Date.now(),
+        })
+      )
+
+      // Initialize subblock values
+      const subblockValues: Record<string, Record<string, any>> = {}
+      Object.entries(workflow.state.blocks).forEach(([blockId, block]: [string, any]) => {
+        subblockValues[blockId] = {}
+        if (block.subBlocks) {
+          Object.entries(block.subBlocks).forEach(([subBlockId, subBlock]: [string, any]) => {
+            if (subBlock && subBlock.value !== undefined) {
+              subblockValues[blockId][subBlockId] = subBlock.value
+            }
+          })
+        }
+      })
+
+      // Store subblock values in localStorage
+      localStorage.setItem(`subblock-values-${workflow.id}`, JSON.stringify(subblockValues))
+    })
+
+    // Update registry in localStorage
+    localStorage.setItem('workflow-registry', JSON.stringify(registry))
+
+    // Update the registry store
+    useWorkflowRegistry.setState({ workflows: registry })
+
+    console.log('Workflows loaded from server successfully')
+    return true
+  } catch (error) {
+    console.error('Error fetching workflows:', error)
+    return false
+  }
+}
+
+// Modify the initialization function to fetch from server first
 export function initializeSyncManager(): (() => void) | undefined {
   if (typeof window === 'undefined') return
 
-  syncInterval = setInterval(performSync, SYNC_INTERVAL_MS)
+  // First try to load from server, then set up regular syncing
+  fetchWorkflowsFromServer().then(() => {
+    syncInterval = setInterval(performSync, SYNC_INTERVAL_MS)
+  })
 
   const handleBeforeUnload = async (event: BeforeUnloadEvent) => {
     const { workflows } = useWorkflowRegistry.getState()
diff --git a/stores/workflow/registry/store.ts b/stores/workflow/registry/store.ts
index 84b6782f19..28b13e2be6 100644
--- a/stores/workflow/registry/store.ts
+++ b/stores/workflow/registry/store.ts
@@ -320,12 +320,16 @@ export const useWorkflowRegistry = create<WorkflowRegistry>()(
 
 // Initialize registry from localStorage and set up persistence
 const initializeRegistry = () => {
+  // First check if we have a registry in localStorage
   const savedRegistry = localStorage.getItem('workflow-registry')
   if (savedRegistry) {
     const workflows = JSON.parse(savedRegistry)
     useWorkflowRegistry.setState({ workflows })
   }
 
+  // Note: We don't need to do anything else here as the sync manager
+  // will handle fetching from the server and updating localStorage
+
   // Add event listeners for page unload
   window.addEventListener('beforeunload', () => {
     const currentId = useWorkflowRegistry.getState().activeWorkflowId