From 7c3be84b52a602ffd4f58424a0b774a496058dad Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Sat, 21 Mar 2026 00:44:48 +0000
Subject: [PATCH] feat(flowpilot): add navigation guard for active sessions

Shows a confirmation modal when user tries to navigate away during an
active troubleshooting session. Options: "Stay in Session" or "Pause &
Leave" which auto-pauses the session before navigating.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/FlowPilotSessionPage.tsx | 45 ++++++++++++++++++++-
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/FlowPilotSessionPage.tsx b/frontend/src/pages/FlowPilotSessionPage.tsx
index 4c83c978..f79b4ecb 100644
--- a/frontend/src/pages/FlowPilotSessionPage.tsx
+++ b/frontend/src/pages/FlowPilotSessionPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
-import { useParams, useSearchParams, useLocation } from 'react-router-dom'
-import { Sparkles, Loader2 } from 'lucide-react'
+import { useParams, useSearchParams, useLocation, useBlocker } from 'react-router-dom'
+import { Sparkles, Loader2, AlertTriangle } from 'lucide-react'
 import { useFlowPilotSession } from '@/hooks/useFlowPilotSession'
 import { FlowPilotIntake, FlowPilotSession, SessionBriefing } from '@/components/flowpilot'
 import { aiSessionsApi } from '@/api'
@@ -15,6 +15,13 @@ export default function FlowPilotSessionPage() {
   const fp = useFlowPilotSession()
   const prefillHandledRef = useRef(false)
 
+  // Block navigation when session is active
+  const isActiveSession = fp.session?.status === 'active'
+  const blocker = useBlocker(
+    ({ currentLocation, nextLocation }) =>
+      !!isActiveSession && currentLocation.pathname !== nextLocation.pathname
+  )
+
   // Auto-submit when navigating from dashboard with prefilled problem
   useEffect(() => {
     if (prefill && !prefillHandledRef.current && !sessionId && !fp.session && !fp.isLoading) {
@@ -153,6 +160,40 @@ export default function FlowPilotSessionPage() {
   // Active/completed session
   return (
     <div className="flex h-full flex-col">
+      {/* Navigation guard modal */}
+      {blocker.state === 'blocked' && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
+          <div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
+            <div className="flex items-center gap-3 mb-3">
+              <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-amber-500/10">
+                <AlertTriangle size={18} className="text-amber-400" />
+              </span>
+              <h2 className="text-lg font-heading font-semibold text-foreground">Active Session</h2>
+            </div>
+            <p className="mb-4 text-sm text-muted-foreground">
+              You have an active troubleshooting session. If you leave, your session will be paused and you can resume it later.
+            </p>
+            <div className="flex gap-2">
+              <button
+                onClick={() => blocker.reset()}
+                className="flex-1 rounded-[10px] bg-gradient-to-r from-cyan-500 to-cyan-400 px-4 py-2.5 text-sm font-semibold text-[#101114] hover:opacity-90 active:scale-[0.97] transition-all"
+              >
+                Stay in Session
+              </button>
+              <button
+                onClick={() => {
+                  fp.pauseSession()
+                  blocker.proceed()
+                }}
+                className="flex-1 rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2.5 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] transition-all"
+              >
+                Pause & Leave
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Header */}
       <div
         className="flex items-center gap-3 border-b px-5 py-3 shrink-0"