fix(frontend): abort generation on navigate-away with confirmation dialog (#44)

When users navigate back to the plugin list during active generation,
the stream now properly cancels via AbortController instead of silently
running in the background with orphaned state. A confirmation dialog
warns users before leaving.

- Add AbortSignal to streamLLM fetch call
- Store AbortController ref in useChat, abort on clearMessages/pluginId change
- Guard backToPlugins with isLoading check and confirmation modal
- Fix isLoading race: only the active controller clears loading state
- Route dropdown "My Plugins" through same guard

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: chrishyoroklee

frontend/src/App.tsx

@@ -31,6 +31,7 @@ function App() {
   const [view, setView] = useState<View>("plugins");
   const [activePluginId, setActivePluginId] = useState<string | null>(null);
   const [activePluginName, setActivePluginName] = useState<string>("");
+  const [showLeaveConfirm, setShowLeaveConfirm] = useState(false);
 
   const { messages, isLoading, sendMessage, buildTemplate, clearMessages } = useChat(runCode, activePluginId);
 
@@ -70,13 +71,22 @@ function App() {
     setView("workspace");
   };
 
-  const backToPlugins = () => {
+  const doBackToPlugins = () => {
+    setShowLeaveConfirm(false);
     setActivePluginId(null);
     setActivePluginName("");
     clearMessages();
     setView("plugins");
   };
 
+  const backToPlugins = () => {
+    if (isLoading) {
+      setShowLeaveConfirm(true);
+      return;
+    }
+    doBackToPlugins();
+  };
+
   // Auth loading
   if (authLoading) {
     return (
@@ -227,7 +237,7 @@ function App() {
                 </button>
                 {showMenu && (
                   <div className="header-dropdown">
-                    <button onClick={() => { setView("plugins"); setShowMenu(false); }}>My Plugins</button>
+                    <button onClick={() => { backToPlugins(); setShowMenu(false); }}>My Plugins</button>
                     <button onClick={() => { setView("settings"); setShowMenu(false); }}>Settings</button>
                     {user?.uid && ADMIN_UIDS.has(user.uid) && <button onClick={() => { setView("admin"); setShowMenu(false); }}>Admin</button>}
                     <button onClick={() => { logout(); setShowMenu(false); }}>Sign Out</button>
@@ -263,6 +273,28 @@ function App() {
           pluginName={activePluginName}
         />
       </main>
+      {showLeaveConfirm && (
+        <div className="modal-overlay" onClick={() => setShowLeaveConfirm(false)}>
+          <div className="modal" onClick={(e) => e.stopPropagation()}>
+            <h3 className="modal-title">Generation in progress</h3>
+            <p className="modal-subtitle">
+              Your plugin is still being generated. Leaving now will cancel it.
+            </p>
+            <div className="modal-actions">
+              <button className="modal-cancel" onClick={() => setShowLeaveConfirm(false)}>
+                Stay
+              </button>
+              <button
+                className="modal-confirm"
+                style={{ background: "var(--error)" }}
+                onClick={doBackToPlugins}
+              >
+                Leave
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/api/client.ts

@@ -32,6 +32,7 @@ export async function* streamLLM(
   messages: { role: string; content: string }[] = [],
   template?: string,
   templateCode?: string,
+  signal?: AbortSignal,
 ): AsyncGenerator<GenerateEvent> {
   const body: Record<string, unknown> = { prompt, model, messages };
   if (template) body.template = template;
@@ -46,6 +47,7 @@ export async function* streamLLM(
     method: "POST",
     headers,
     body: JSON.stringify(body),
+    signal,
   });
 
   if (response.status === 429) {

frontend/src/hooks/useChat.ts

@@ -84,11 +84,15 @@ export function useChat(runCode: RunCodeFn, pluginId: string | null) {
   const messagesRef = useRef<ChatMessage[]>([]);
   messagesRef.current = messages;
   const templateUsedRef = useRef<string | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
 
   // Load existing messages when pluginId changes
   useEffect(() => {
     if (!pluginId) {
+      abortControllerRef.current?.abort();
+      abortControllerRef.current = null;
       setMessages([]);
+      setIsLoading(false);
       setHistoryLoaded(false);
       templateUsedRef.current = null;
       return;
@@ -182,6 +186,10 @@ export function useChat(runCode: RunCodeFn, pluginId: string | null) {
       setMessages((prev) => [...prev, userMsg, assistantMsg]);
       setIsLoading(true);
 
+      abortControllerRef.current?.abort();
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
       // Save user message to Firestore
       if (pluginId) {
         saveMessage(pluginId, { role: "user", content: prompt }).catch((e) => console.warn("Failed to save user message:", e));
@@ -245,7 +253,7 @@ export function useChat(runCode: RunCodeFn, pluginId: string | null) {
           // Phase 1: Stream LLM response (accumulate but don't show in UI)
           let fullResponse = "";
           let streamError = false;
-          for await (const event of streamLLM(currentPrompt, model, currentHistory, attempt === 0 ? template : undefined, attempt === 0 ? templateCode : undefined)) {
+          for await (const event of streamLLM(currentPrompt, model, currentHistory, attempt === 0 ? template : undefined, attempt === 0 ? templateCode : undefined, abortController.signal)) {
             if (event.type === "chunk") {
               fullResponse += event.content || "";
             } else if (event.type === "error") {
@@ -424,6 +432,7 @@ export function useChat(runCode: RunCodeFn, pluginId: string | null) {
           }
         } // end retry loop
       } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") return;
         const isRateLimited = err instanceof RateLimitError;
         const errorMsg = err instanceof Error ? err.message : "Unknown error";
         setMessages((prev) =>
@@ -434,7 +443,10 @@ export function useChat(runCode: RunCodeFn, pluginId: string | null) {
           )
         );
       } finally {
-        setIsLoading(false);
+        if (abortControllerRef.current === abortController) {
+          setIsLoading(false);
+          abortControllerRef.current = null;
+        }
       }
     },
     [runCode, pluginId]
@@ -447,6 +459,10 @@ export function useChat(runCode: RunCodeFn, pluginId: string | null) {
       setMessages((prev) => [...prev, userMsg, assistantMsg]);
       setIsLoading(true);
 
+      abortControllerRef.current?.abort();
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
       if (pluginId) {
         saveMessage(pluginId, { role: "user", content: userMsg.content }).catch((e) => console.warn("Failed to save user message:", e));
       }
@@ -477,6 +493,8 @@ export function useChat(runCode: RunCodeFn, pluginId: string | null) {
         const code = await fetchTemplateCode(templateName);
         const rewritten = rewriteSavePaths(code);
 
+        if (abortController.signal.aborted) return;
+
         setMessages((prev) =>
           prev.map((m) => (m.id === assistantId ? { ...m, status: "running" as const } : m))
         );
@@ -566,19 +584,26 @@ export function useChat(runCode: RunCodeFn, pluginId: string | null) {
           }
         }
       } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") return;
         const errorMsg = err instanceof Error ? err.message : "Template build failed";
         setMessages((prev) =>
           prev.map((m) => (m.id === assistantId ? { ...m, error: errorMsg, status: "error" } : m))
         );
       } finally {
-        setIsLoading(false);
+        if (abortControllerRef.current === abortController) {
+          setIsLoading(false);
+          abortControllerRef.current = null;
+        }
       }
     },
     [runCode, pluginId]
   );
 
   const clearMessages = useCallback(() => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = null;
     setMessages([]);
+    setIsLoading(false);
     templateUsedRef.current = null;
   }, []);