diff --git a/canvas/src/components/mobile/MobileApp.tsx b/canvas/src/components/mobile/MobileApp.tsx index a527a5ef..bd966755 100644 --- a/canvas/src/components/mobile/MobileApp.tsx +++ b/canvas/src/components/mobile/MobileApp.tsx @@ -6,7 +6,7 @@ // instantiated when MobileApp is active, so no React Flow + heavy // chrome cost on phones. -import { useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { useTheme } from "@/lib/theme-provider"; @@ -90,20 +90,30 @@ export function MobileApp() { // the URL is already what we'd produce — that handles the initial // mount (we read FROM the URL) and prevents duplicate history entries // when popstate restores state we just pushed. + // Track what we pushed so the popstate handler can distinguish + // "browser back to our own push" (skip) from "browser back to + // user navigation" (update state). + const prevPushedRef = useRef<{ route: Route; agentId: string | null }>({ route: route as Route, agentId }); useEffect(() => { if (typeof window === "undefined") return; const current = readRouteFromUrl(); if (current.route === route && current.agentId === agentId) return; const url = buildRouteUrl(route, agentId); + prevPushedRef.current = { route, agentId }; window.history.pushState({ route, agentId }, "", url); - }, [route, agentId]); + }, [route, agentId]); // eslint-disable-line react-hooks/exhaustive-props // Sync URL → route state on browser back/forward. The popstate event // fires AFTER the URL has changed, so re-reading is correct. + // Skip: if the URL now reflects the state we just pushed (popstate was + // fired synchronously by our own pushState on some mobile browsers). useEffect(() => { if (typeof window === "undefined") return; const onPop = () => { const next = readRouteFromUrl(); + // If the URL reflects what we just pushed, skip — this popstate + // was a side-effect of our own pushState, not user navigation. + if (next.route === prevPushedRef.current.route && next.agentId === prevPushedRef.current.agentId) return; setRoute(next.route); setAgentId(next.agentId); };