From c50fb32610e543dac13b9f39d12ebb58b1db80f0 Mon Sep 17 00:00:00 2001
From: savinay1986 <savinay1986@gmail.com>
Date: Sat, 21 Mar 2026 20:31:06 +0530
Subject: [PATCH] fix: persist workflow step across browser sessions via
 localStorage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closing and reopening the browser tab reset the 5-step workflow to
Step 1, losing the user's progress even though all project data was
safely persisted on the backend.

Root cause: `currentStep` in MainView.vue was a plain in-memory Vue
ref (ref(1)) with no persistence layer. loadProject() correctly
restored currentPhase from the backend project status but never
restored currentStep.

Fix:
- Add a watch() on currentStep that writes to localStorage under
  key `mirofish_step_{projectId}` on every change
- In loadProject(), read back from localStorage after restoring
  phase — so the user returns to exactly the step they left
- In updatePhaseByStatus(), advance currentStep to 2 when status
  is graph_completed (fallback for first-time reload with no
  localStorage entry, avoids landing on Step 1 with a built graph)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/MainView.vue | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/MainView.vue b/frontend/src/views/MainView.vue
index 8c6a120..9674ffe 100644
--- a/frontend/src/views/MainView.vue
+++ b/frontend/src/views/MainView.vue
@@ -75,7 +75,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import GraphPanel from '../components/GraphPanel.vue'
 import Step1GraphBuild from '../components/Step1GraphBuild.vue'
@@ -89,8 +89,15 @@ const router = useRouter()
 // Layout State
 const viewMode = ref('split') // graph | split | workbench
 
-// Step State
+// Step State — persisted to localStorage per project
 const currentStep = ref(1) // 1: Graph Build, 2: Env Setup, 3: Simulation, 4: Report, 5: Interaction
+
+// Persist currentStep whenever it changes (only after project ID is known)
+watch(currentStep, (val) => {
+  if (currentProjectId.value && currentProjectId.value !== 'new') {
+    localStorage.setItem(`mirofish_step_${currentProjectId.value}`, String(val))
+  }
+})
 const stepNames = ['Graph Build', 'Env Setup', 'Simulation', 'Report', 'Interaction']
 
 // Data State
@@ -234,6 +241,12 @@ const loadProject = async () => {
     if (res.success) {
       projectData.value = res.data
       updatePhaseByStatus(res.data.status)
+      // Restore step from localStorage — takes precedence (user may be further along than status implies)
+      const savedStep = localStorage.getItem(`mirofish_step_${currentProjectId.value}`)
+      if (savedStep) {
+        const parsed = parseInt(savedStep)
+        if (!isNaN(parsed) && parsed >= 1 && parsed <= 5) currentStep.value = parsed
+      }
       addLog(`Project loaded. Status: ${res.data.status}`)
       
       if (res.data.status === 'ontology_generated' && !res.data.graph_id) {
@@ -263,7 +276,11 @@ const updatePhaseByStatus = (status) => {
     case 'created':
     case 'ontology_generated': currentPhase.value = 0; break;
     case 'graph_building': currentPhase.value = 1; break;
-    case 'graph_completed': currentPhase.value = 2; break;
+    case 'graph_completed':
+      currentPhase.value = 2
+      // Advance to Env Setup if we haven't already gone further
+      if (currentStep.value < 2) currentStep.value = 2
+      break;
     case 'failed': error.value = 'Project failed'; break;
   }
 }