root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #44 from timothyjlaurent/timothyjlaurent/browser-back-button-spa-integration

Browse Source 
feat: enable browser back-button navigation within the SPA dashboard
This commit is contained in:
gsxdsm
2026-05-05 15:29:47 -07:00
committed by GitHub
parent d5c24fb06c a126b893d1
commit 25aed86e05
6 changed files with 116 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/browser-back-button-spa-integration.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@runfusion/fusion": minor
---
Enable browser back-button navigation within the SPA dashboard. Previously, the back button would leave the dashboard entirely. Now it dismisses the top modal or reverts to the previous view, matching standard SPA behavior on both desktop and mobile.

4
.github/workflows/pr-checks.yml vendored
View File

@@ -32,8 +32,8 @@ jobs:
- name: Install Bun - name: Install Bun
uses: oven-sh/setup-bun@v2 uses: oven-sh/setup-bun@v2
- name: Build plugins - name: Build plugins and core packages
run: pnpm -r --filter './plugins/**' build run: pnpm build
- name: Lint - name: Lint
run: pnpm lint run: pnpm lint

152
packages/dashboard/app/App.tsx
View File

@@ -227,8 +227,8 @@ function AppInner() {
const viewportMode = useViewportMode(); const viewportMode = useViewportMode();
const isMobile = viewportMode === "mobile"; const isMobile = viewportMode === "mobile";
// Navigation history for mobile back button / iOS swipe-back. // Navigation history for browser back button (desktop + mobile).
const { pushNav, replaceCurrent } = useNavigationHistory({ enabled: isMobile }); const { pushNav, replaceCurrent } = useNavigationHistory({ enabled: true });
// View state must be defined before useTasks since useTasks depends on taskView for SSE gating // View state must be defined before useTasks since useTasks depends on taskView for SSE gating
const { viewMode, setViewMode, taskView, handleChangeTaskView } = useViewState({ const { viewMode, setViewMode, taskView, handleChangeTaskView } = useViewState({
@@ -245,7 +245,7 @@ function AppInner() {
const { views: pluginDashboardViews } = usePluginDashboardViews(currentProject?.id); const { views: pluginDashboardViews } = usePluginDashboardViews(currentProject?.id);
// History-aware view change handler — pushes nav entry on mobile. // History-aware view change handler — pushes nav entry on back-navigation stack.
const handleTaskViewChange = useCallback((newView: TaskView) => { const handleTaskViewChange = useCallback((newView: TaskView) => {
if (newView === "missions") { if (newView === "missions") {
setMissionResumeSessionId(undefined); setMissionResumeSessionId(undefined);
@@ -254,7 +254,6 @@ function AppInner() {
} }
const previousView = taskView; const previousView = taskView;
handleChangeTaskView(newView); handleChangeTaskView(newView);
// pushNav reads enabledRef internally; isMobile not needed in deps.
if (previousView !== newView) { if (previousView !== newView) {
pushNav({ type: "view", revert: () => handleChangeTaskView(previousView) }); pushNav({ type: "view", revert: () => handleChangeTaskView(previousView) });
} }
@@ -498,7 +497,7 @@ function AppInner() {
const { const {
handleSelectProject, handleSelectProject,
handleViewAllProjects, handleViewAllProjects,
handleOpenSettings, handleOpenSettings: _handleOpenSettings,
handleAddProject, handleAddProject,
handleSetupComplete, handleSetupComplete,
handleModelOnboardingComplete, handleModelOnboardingComplete,
@@ -614,13 +613,13 @@ function AppInner() {
[workflowSteps], [workflowSteps],
); );
const handleOpenNodes = useCallback(() => { const _handleOpenNodes = useCallback(() => {
if (!nodesEnabled) return; if (!nodesEnabled) return;
setNodesOpen((prev) => !prev); setNodesOpen((prev) => !prev);
}, [nodesEnabled]); }, [nodesEnabled]);
// History-aware nodes toggle — pushes nav entry only when opening // History-aware nodes toggle — pushes nav entry only when opening
const handleOpenNodesWithHistory = useCallback(() => { const handleOpenNodesWithNav = useCallback(() => {
if (!nodesEnabled) return; if (!nodesEnabled) return;
if (!nodesOpen) { if (!nodesOpen) {
setNodesOpen(true); setNodesOpen(true);
@@ -630,50 +629,48 @@ function AppInner() {
} }
}, [nodesEnabled, nodesOpen, pushNav]); }, [nodesEnabled, nodesOpen, pushNav]);
// History-aware modal open handlers — push nav entries on mobile only. // History-aware modal open handlers — push nav entries for back-navigation.
// Desktop (isMobile=false): pushNav/replaceCurrent are no-ops. const openDetailTask = useCallback((task: Task | TaskDetail, tab?: Parameters<typeof modalManager.openDetailTask>[1], opts?: { origin?: DetailTaskOrigin }) => {
const openDetailTaskWithHistory = useCallback((task: Task | TaskDetail, tab?: Parameters<typeof modalManager.openDetailTask>[1], opts?: { origin?: DetailTaskOrigin }) => {
modalManager.openDetailTask(task, tab, opts); modalManager.openDetailTask(task, tab, opts);
pushNav({ type: "modal", close: modalManager.closeDetailTask }); pushNav({ type: "modal", close: modalManager.closeDetailTask });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openSettingsWithHistory = useCallback((section?: Parameters<typeof modalManager.openSettings>[0]) => { const openSettingsWithNav = useCallback((section?: Parameters<typeof modalManager.openSettings>[0]) => {
modalManager.openSettings(section); modalManager.openSettings(section);
pushNav({ type: "modal", close: handleSettingsClose }); pushNav({ type: "modal", close: handleSettingsClose });
}, [modalManager, pushNav, handleSettingsClose]); }, [modalManager, pushNav, handleSettingsClose]);
const openNewTaskWithHistory = useCallback(() => { const openNewTaskWithNav = useCallback(() => {
modalManager.openNewTask(); modalManager.openNewTask();
pushNav({ type: "modal", close: modalManager.closeNewTask }); pushNav({ type: "modal", close: modalManager.closeNewTask });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openPlanningWithHistory = useCallback(() => { const openPlanningWithNav = useCallback(() => {
modalManager.openPlanning(); modalManager.openPlanning();
pushNav({ type: "modal", close: modalManager.closePlanning }); pushNav({ type: "modal", close: modalManager.closePlanning });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openPlanningWithInitialPlanWithHistory = useCallback((initialPlan: string) => { const openPlanningWithInitialPlanWithNav = useCallback((initialPlan: string) => {
modalManager.openPlanningWithInitialPlan(initialPlan); modalManager.openPlanningWithInitialPlan(initialPlan);
pushNav({ type: "modal", close: modalManager.closePlanning }); pushNav({ type: "modal", close: modalManager.closePlanning });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const resumePlanningWithHistory = useCallback(() => { const resumePlanningWithNav = useCallback(() => {
modalManager.resumePlanning(); modalManager.resumePlanning();
pushNav({ type: "modal", close: modalManager.closePlanning }); pushNav({ type: "modal", close: modalManager.closePlanning });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openSubtaskBreakdownWithHistory = useCallback((description: string) => { const openSubtaskBreakdownWithNav = useCallback((description: string) => {
modalManager.openSubtaskBreakdown(description); modalManager.openSubtaskBreakdown(description);
pushNav({ type: "modal", close: modalManager.closeSubtask }); pushNav({ type: "modal", close: modalManager.closeSubtask });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openGitHubImportWithHistory = useCallback(() => { const openGitHubImportWithNav = useCallback(() => {
modalManager.openGitHubImport(); modalManager.openGitHubImport();
pushNav({ type: "modal", close: modalManager.closeGitHubImport }); pushNav({ type: "modal", close: modalManager.closeGitHubImport });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const toggleTerminalWithHistory = useCallback(() => { const toggleTerminalWithNav = useCallback(() => {
// Only push if terminal is currently closed (opening)
if (!modalManager.terminalOpen) { if (!modalManager.terminalOpen) {
modalManager.toggleTerminal(); modalManager.toggleTerminal();
pushNav({ type: "modal", close: modalManager.closeTerminal }); pushNav({ type: "modal", close: modalManager.closeTerminal });
@@ -682,59 +679,59 @@ function AppInner() {
} }
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openFilesWithHistory = useCallback(() => { const openFilesWithNav = useCallback(() => {
modalManager.openFiles(); modalManager.openFiles();
pushNav({ type: "modal", close: modalManager.closeFiles }); pushNav({ type: "modal", close: modalManager.closeFiles });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openTodosWithHistory = useCallback(() => { const openTodosWithNav = useCallback(() => {
modalManager.openTodos(); modalManager.openTodos();
pushNav({ type: "modal", close: modalManager.closeTodos }); pushNav({ type: "modal", close: modalManager.closeTodos });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openActivityLogWithHistory = useCallback(() => { const openActivityLogWithNav = useCallback(() => {
modalManager.openActivityLog(); modalManager.openActivityLog();
pushNav({ type: "modal", close: modalManager.closeActivityLog }); pushNav({ type: "modal", close: modalManager.closeActivityLog });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openGitManagerWithHistory = useCallback(() => { const openGitManagerWithNav = useCallback(() => {
modalManager.openGitManager(); modalManager.openGitManager();
pushNav({ type: "modal", close: modalManager.closeGitManager }); pushNav({ type: "modal", close: modalManager.closeGitManager });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openSystemStatsWithHistory = useCallback(() => { const openSystemStatsWithNav = useCallback(() => {
modalManager.openSystemStats(); modalManager.openSystemStats();
pushNav({ type: "modal", close: modalManager.closeSystemStats }); pushNav({ type: "modal", close: modalManager.closeSystemStats });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openSchedulesWithHistory = useCallback(() => { const openSchedulesWithNav = useCallback(() => {
modalManager.openSchedules(); modalManager.openSchedules();
pushNav({ type: "modal", close: modalManager.closeSchedules }); pushNav({ type: "modal", close: modalManager.closeSchedules });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openScriptsWithHistory = useCallback(() => { const openScriptsWithNav = useCallback(() => {
modalManager.openScripts(); modalManager.openScripts();
pushNav({ type: "modal", close: modalManager.closeScripts }); pushNav({ type: "modal", close: modalManager.closeScripts });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openWorkflowStepsWithHistory = useCallback(() => { const openWorkflowStepsWithNav = useCallback(() => {
modalManager.openWorkflowSteps(); modalManager.openWorkflowSteps();
pushNav({ type: "modal", close: modalManager.closeWorkflowSteps }); pushNav({ type: "modal", close: modalManager.closeWorkflowSteps });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
const openUsageWithHistory = useCallback((anchorRect?: DOMRect | null) => { const openUsageWithNav = useCallback((anchorRect?: DOMRect | null) => {
modalManager.openUsage(anchorRect); modalManager.openUsage(anchorRect);
pushNav({ type: "modal", close: modalManager.closeUsage }); pushNav({ type: "modal", close: modalManager.closeUsage });
}, [modalManager, pushNav]); }, [modalManager, pushNav]);
// Modal-to-modal transition: scripts -> terminal uses replaceCurrent // Modal-to-modal transition: scripts -> terminal uses replaceCurrent
const runScriptWithHistory = useCallback(async (name: string, command: string) => { const runScriptWithNav = useCallback(async (name: string, command: string) => {
await modalManager.runScript(name, command); await modalManager.runScript(name, command);
replaceCurrent({ type: "modal", close: modalManager.closeTerminal }); replaceCurrent({ type: "modal", close: modalManager.closeTerminal });
}, [modalManager, replaceCurrent]); }, [modalManager, replaceCurrent]);
// Modal-to-modal transition: settings -> onboarding uses replaceCurrent // Modal-to-modal transition: settings -> onboarding uses replaceCurrent
const reopenOnboardingWithHistory = useCallback(() => { const reopenOnboardingWithNav = useCallback(() => {
modalManager.closeSettings(); modalManager.closeSettings();
modalManager.openModelOnboarding(); modalManager.openModelOnboarding();
replaceCurrent({ type: "modal", close: modalManager.closeModelOnboarding }); replaceCurrent({ type: "modal", close: modalManager.closeModelOnboarding });
@@ -878,14 +875,12 @@ function AppInner() {
projectId: currentProject?.id, projectId: currentProject?.id,
tasks: isRemote && remoteData.tasks.length > 0 ? remoteData.tasks : tasks, tasks: isRemote && remoteData.tasks.length > 0 ? remoteData.tasks : tasks,
workflowSteps, workflowSteps,
openTaskDetail: isMobile openTaskDetail: (task: Task | TaskDetail, initialTab?: DetailTaskTab) => openDetailTask(task, initialTab),
? (task: Task | TaskDetail, initialTab?: DetailTaskTab) => openDetailTaskWithHistory(task, initialTab)
: (task: Task | TaskDetail, initialTab?: DetailTaskTab) => modalManager.openDetailTask(task, initialTab),
renderTaskCard: (task: Task | TaskDetail) => ( renderTaskCard: (task: Task | TaskDetail) => (
<TaskCard <TaskCard
task={task} task={task}
projectId={currentProject?.id} projectId={currentProject?.id}
onOpenDetail={isMobile ? (value: Task | TaskDetail) => openDetailTaskWithHistory(value) : (value: Task | TaskDetail) => modalManager.openDetailTask(value)} onOpenDetail={(value: Task | TaskDetail) => openDetailTask(value)}
addToast={addToast} addToast={addToast}
workflowStepNameLookup={workflowStepNameLookup} workflowStepNameLookup={workflowStepNameLookup}
/> />
@@ -964,7 +959,7 @@ function AppInner() {
projectId={currentProject?.id} projectId={currentProject?.id}
onSelectTask={(taskId) => { onSelectTask={(taskId) => {
const task = tasks.find((t) => t.id === taskId); const task = tasks.find((t) => t.id === taskId);
if (task) (isMobile ? openDetailTaskWithHistory : modalManager.openDetailTask)(task as TaskDetail); if (task) openDetailTask(task as TaskDetail);
}} }}
availableTasks={tasks.map((t) => ({ id: t.id, title: t.title }))} availableTasks={tasks.map((t) => ({ id: t.id, title: t.title }))}
resumeSessionId={missionResumeSessionId} resumeSessionId={missionResumeSessionId}
@@ -998,7 +993,7 @@ function AppInner() {
<DocumentsView <DocumentsView
projectId={currentProject?.id} projectId={currentProject?.id}
addToast={addToast} addToast={addToast}
onOpenDetail={isMobile ? openDetailTaskWithHistory : modalManager.openDetailTask} onOpenDetail={openDetailTask}
/> />
</Suspense> </Suspense>
</PageErrorBoundary> </PageErrorBoundary>
@@ -1076,12 +1071,12 @@ function AppInner() {
maxConcurrent={maxConcurrent} maxConcurrent={maxConcurrent}
onMoveTask={moveTask} onMoveTask={moveTask}
onPauseTask={pauseTask} onPauseTask={pauseTask}
onOpenDetail={isMobile ? openDetailTaskWithHistory : modalManager.openDetailTask} onOpenDetail={openDetailTask}
addToast={addToast} addToast={addToast}
onQuickCreate={handleBoardQuickCreate} onQuickCreate={handleBoardQuickCreate}
onNewTask={isMobile ? openNewTaskWithHistory : modalManager.openNewTask} onNewTask={openNewTaskWithNav}
onPlanningMode={isMobile ? openPlanningWithInitialPlanWithHistory : modalManager.openPlanningWithInitialPlan} onPlanningMode={openPlanningWithInitialPlanWithNav}
onSubtaskBreakdown={isMobile ? openSubtaskBreakdownWithHistory : modalManager.openSubtaskBreakdown} onSubtaskBreakdown={openSubtaskBreakdownWithNav}
autoMerge={autoMerge} autoMerge={autoMerge}
onToggleAutoMerge={toggleAutoMerge} onToggleAutoMerge={toggleAutoMerge}
globalPaused={globalPaused} globalPaused={globalPaused}
@@ -1119,13 +1114,13 @@ function AppInner() {
onMergeTask={mergeTask} onMergeTask={mergeTask}
onResetTask={resetTask} onResetTask={resetTask}
onDuplicateTask={duplicateTask} onDuplicateTask={duplicateTask}
onOpenDetail={isMobile ? (task, options) => openDetailTaskWithHistory(task, undefined, options) : (task, options) => modalManager.openDetailTask(task, undefined, options)} onOpenDetail={(task, options) => openDetailTask(task, undefined, options)}
addToast={addToast} addToast={addToast}
globalPaused={globalPaused} globalPaused={globalPaused}
onNewTask={isMobile ? openNewTaskWithHistory : modalManager.openNewTask} onNewTask={openNewTaskWithNav}
onQuickCreate={handleBoardQuickCreate} onQuickCreate={handleBoardQuickCreate}
onPlanningMode={isMobile ? openPlanningWithInitialPlanWithHistory : modalManager.openPlanningWithInitialPlan} onPlanningMode={openPlanningWithInitialPlanWithNav}
onSubtaskBreakdown={isMobile ? openSubtaskBreakdownWithHistory : modalManager.openSubtaskBreakdown} onSubtaskBreakdown={openSubtaskBreakdownWithNav}
availableModels={availableModels} availableModels={availableModels}
favoriteProviders={favoriteProviders} favoriteProviders={favoriteProviders}
favoriteModels={favoriteModels} favoriteModels={favoriteModels}
@@ -1160,27 +1155,27 @@ function AppInner() {
<> <>
<Header <Header
isElectron={isElectron} isElectron={isElectron}
onOpenSettings={isMobile ? openSettingsWithHistory : handleOpenSettings} onOpenSettings={openSettingsWithNav}
onOpenGitHubImport={isMobile ? openGitHubImportWithHistory : modalManager.openGitHubImport} onOpenGitHubImport={openGitHubImportWithNav}
onOpenPlanning={isMobile ? openPlanningWithHistory : modalManager.openPlanning} onOpenPlanning={openPlanningWithNav}
onResumePlanning={isMobile ? resumePlanningWithHistory : modalManager.resumePlanning} onResumePlanning={resumePlanningWithNav}
activePlanningSessionCount={bgPlanningSessions.length} activePlanningSessionCount={bgPlanningSessions.length}
onOpenUsage={isMobile ? openUsageWithHistory : modalManager.openUsage} onOpenUsage={openUsageWithNav}
onOpenActivityLog={isMobile ? openActivityLogWithHistory : modalManager.openActivityLog} onOpenActivityLog={openActivityLogWithNav}
onOpenSystemStats={isMobile ? openSystemStatsWithHistory : modalManager.openSystemStats} onOpenSystemStats={openSystemStatsWithNav}
onOpenMailbox={() => handleTaskViewChange("mailbox")} onOpenMailbox={() => handleTaskViewChange("mailbox")}
mailboxUnreadCount={mailboxUnreadCount} mailboxUnreadCount={mailboxUnreadCount}
onOpenSchedules={isMobile ? openSchedulesWithHistory : modalManager.openSchedules} onOpenSchedules={openSchedulesWithNav}
onOpenGitManager={isMobile ? openGitManagerWithHistory : modalManager.openGitManager} onOpenGitManager={openGitManagerWithNav}
onOpenNodes={isMobile ? handleOpenNodesWithHistory : handleOpenNodes} onOpenNodes={handleOpenNodesWithNav}
showNodesButton={nodesEnabled} showNodesButton={nodesEnabled}
onOpenWorkflowSteps={isMobile ? openWorkflowStepsWithHistory : modalManager.openWorkflowSteps} onOpenWorkflowSteps={openWorkflowStepsWithNav}
onOpenScripts={isMobile ? openScriptsWithHistory : modalManager.openScripts} onOpenScripts={openScriptsWithNav}
onRunScript={isMobile ? runScriptWithHistory : modalManager.runScript} onRunScript={runScriptWithNav}
onToggleTerminal={isMobile ? toggleTerminalWithHistory : modalManager.toggleTerminal} onToggleTerminal={toggleTerminalWithNav}
onOpenFiles={isMobile ? openFilesWithHistory : modalManager.openFiles} onOpenFiles={openFilesWithNav}
filesOpen={modalManager.filesOpen} filesOpen={modalManager.filesOpen}
onOpenTodos={isMobile ? openTodosWithHistory : modalManager.openTodos} onOpenTodos={openTodosWithNav}
todosOpen={modalManager.todosOpen} todosOpen={modalManager.todosOpen}
todosEnabled={todosEnabled} todosEnabled={todosEnabled}
globalPaused={globalPaused} globalPaused={globalPaused}
@@ -1285,27 +1280,27 @@ function AppInner() {
footerVisible={viewMode === "project" && !!currentProject} footerVisible={viewMode === "project" && !!currentProject}
modalOpen={modalManager.anyModalOpen} modalOpen={modalManager.anyModalOpen}
keyboardOpen={mobileKeyboardOpen} keyboardOpen={mobileKeyboardOpen}
onOpenSettings={isMobile ? openSettingsWithHistory : handleOpenSettings} onOpenSettings={openSettingsWithNav}
onOpenActivityLog={isMobile ? openActivityLogWithHistory : modalManager.openActivityLog} onOpenActivityLog={openActivityLogWithNav}
onOpenSystemStats={isMobile ? openSystemStatsWithHistory : modalManager.openSystemStats} onOpenSystemStats={openSystemStatsWithNav}
onOpenMailbox={() => handleTaskViewChange("mailbox")} onOpenMailbox={() => handleTaskViewChange("mailbox")}
onOpenNodes={isMobile ? handleOpenNodesWithHistory : handleOpenNodes} onOpenNodes={handleOpenNodesWithNav}
mailboxUnreadCount={mailboxUnreadCount} mailboxUnreadCount={mailboxUnreadCount}
onOpenGitManager={isMobile ? openGitManagerWithHistory : modalManager.openGitManager} onOpenGitManager={openGitManagerWithNav}
onOpenWorkflowSteps={isMobile ? openWorkflowStepsWithHistory : modalManager.openWorkflowSteps} onOpenWorkflowSteps={openWorkflowStepsWithNav}
onOpenSchedules={isMobile ? openSchedulesWithHistory : modalManager.openSchedules} onOpenSchedules={openSchedulesWithNav}
onOpenScripts={isMobile ? openScriptsWithHistory : modalManager.openScripts} onOpenScripts={openScriptsWithNav}
onToggleTerminal={isMobile ? toggleTerminalWithHistory : modalManager.toggleTerminal} onToggleTerminal={toggleTerminalWithNav}
onOpenFiles={isMobile ? openFilesWithHistory : modalManager.openFiles} onOpenFiles={openFilesWithNav}
onOpenTodos={isMobile ? openTodosWithHistory : modalManager.openTodos} onOpenTodos={openTodosWithNav}
todosOpen={modalManager.todosOpen} todosOpen={modalManager.todosOpen}
onOpenGitHubImport={isMobile ? openGitHubImportWithHistory : modalManager.openGitHubImport} onOpenGitHubImport={openGitHubImportWithNav}
onOpenPlanning={isMobile ? openPlanningWithHistory : modalManager.openPlanning} onOpenPlanning={openPlanningWithNav}
onResumePlanning={isMobile ? resumePlanningWithHistory : modalManager.resumePlanning} onResumePlanning={resumePlanningWithNav}
activePlanningSessionCount={bgPlanningSessions.length} activePlanningSessionCount={bgPlanningSessions.length}
onOpenUsage={isMobile ? () => openUsageWithHistory(null) : () => modalManager.openUsage(null)} onOpenUsage={() => openUsageWithNav(null)}
onViewAllProjects={handleViewAllProjects} onViewAllProjects={handleViewAllProjects}
onRunScript={isMobile ? runScriptWithHistory : modalManager.runScript} onRunScript={runScriptWithNav}
projectId={currentProject?.id} projectId={currentProject?.id}
showSkillsTab={skillsEnabled} showSkillsTab={skillsEnabled}
experimentalFeatures={{ experimentalFeatures={{
@@ -1357,10 +1352,7 @@ function AppInner() {
deepLink={{ handleDetailClose }} deepLink={{ handleDetailClose }}
settings={{ prAuthAvailable, themeMode, colorTheme, dashboardFontScalePct, setThemeMode, setColorTheme, setDashboardFontScalePct }} settings={{ prAuthAvailable, themeMode, colorTheme, dashboardFontScalePct, setThemeMode, setColorTheme, setDashboardFontScalePct }}
onSettingsClose={handleSettingsClose} onSettingsClose={handleSettingsClose}
onReopenOnboarding={isMobile ? reopenOnboardingWithHistory : () => { onReopenOnboarding={reopenOnboardingWithNav}
modalManager.closeSettings();
modalManager.openModelOnboarding();
}}
/> />
<AuthTokenRecoveryDialog open={authTokenRecoveryOpen} /> <AuthTokenRecoveryDialog open={authTokenRecoveryOpen} />
{shellApi && ( {shellApi && (

7
packages/dashboard/app/components/__tests__/PlanningModeModal.planning-flow.test.tsx
View File

@@ -1167,8 +1167,11 @@ describe("PlanningModeModal", () => {
expect(screen.getByText("What is the scope?")).toBeDefined(); expect(screen.getByText("What is the scope?")).toBeDefined();
}); });
fireEvent.click(screen.getByText("Medium")); const mediumOption = await screen.findByText("Medium");
fireEvent.click(screen.getByRole("button", { name: "Continue" })); fireEvent.click(mediumOption);
const continueBtn = await screen.findByRole("button", { name: "Continue" });
fireEvent.click(continueBtn);
await waitFor(() => { await waitFor(() => {
expect(screen.getByText("What are the key requirements?")).toBeDefined(); expect(screen.getByText("What are the key requirements?")).toBeDefined();

48
packages/dashboard/app/components/__tests__/navigation-history.test.tsx
View File

@@ -1,11 +1,11 @@
/** /**
* Integration tests for mobile back-navigation (Android back button / iOS swipe-back). * Integration tests for browser back-navigation within the SPA.
* *
* Verifies that the useNavigationHistory hook integration in App.tsx correctly: * Verifies that the useNavigationHistory hook integration in App.tsx correctly:
* - Does NOT push history entries when opening modals on desktop * - Pushes history entries when opening modals (both desktop and mobile)
* - Does NOT dismiss modals on popstate on desktop * - Dismisses modals on popstate (both desktop and mobile)
* - Pushes history entries when opening modals on mobile * - Pushes history entries when changing views
* - Dismisses modals on popstate on mobile * - Reverts view changes on popstate
*/ */
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { render, screen, fireEvent, waitFor, act } from "@testing-library/react"; import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
@@ -375,10 +375,11 @@ describe("Navigation history integration", () => {
return result; return result;
} }
// 1. Desktop: opening Settings does NOT push history entry // 1. Desktop: opening Settings pushes a history entry
it("does not push history entry when opening Settings modal on desktop", async () => { it("pushes history entry when opening Settings modal on desktop", async () => {
await renderAppAndWait(); await renderAppAndWait();
const pushCallsBefore = (window.history.pushState as any).mock.calls.length;
const settingsBtn = screen.getByTitle("Settings"); const settingsBtn = screen.getByTitle("Settings");
fireEvent.click(settingsBtn); fireEvent.click(settingsBtn);
@@ -386,12 +387,12 @@ describe("Navigation history integration", () => {
expect(screen.getByTestId("settings-modal")).toBeTruthy(); expect(screen.getByTestId("settings-modal")).toBeTruthy();
}); });
// On desktop, pushState should NOT be called for modal opens // Back-button nav is enabled on desktop too — pushState called for the modal open
expect(window.history.pushState).not.toHaveBeenCalled(); expect((window.history.pushState as any).mock.calls.length).toBeGreaterThan(pushCallsBefore);
}); });
// 2. Desktop: popstate does NOT dismiss modals // 2. Desktop: popstate dismisses modals
it("does not dismiss Settings modal on popstate in desktop mode", async () => { it("dismisses Settings modal on popstate in desktop mode", async () => {
await renderAppAndWait(); await renderAppAndWait();
const settingsBtn = screen.getByTitle("Settings"); const settingsBtn = screen.getByTitle("Settings");
@@ -404,18 +405,21 @@ describe("Navigation history integration", () => {
// Simulate back button // Simulate back button
dispatchPopState({ navIndex: 0 }); dispatchPopState({ navIndex: 0 });
// Settings modal should still be open // Settings modal should be dismissed
expect(screen.getByTestId("settings-modal")).toBeTruthy(); await waitFor(() => {
expect(screen.queryByTestId("settings-modal")).toBeNull();
});
}); });
// 3. Desktop: view changes do NOT push history entries // 3. Desktop: view changes push history entries
it("does not push history entry for view changes on desktop", async () => { it("pushes history entry for view changes on desktop", async () => {
localStorage.setItem("kb-dashboard-view-mode", "project"); localStorage.setItem("kb-dashboard-view-mode", "project");
const taskViewStorageKey = scopedKey("kb-dashboard-task-view", DEFAULT_PROJECT_ID); const taskViewStorageKey = scopedKey("kb-dashboard-task-view", DEFAULT_PROJECT_ID);
localStorage.setItem(taskViewStorageKey, "board"); localStorage.setItem(taskViewStorageKey, "board");
await renderAppAndWait(); await renderAppAndWait();
const pushCallsBefore = (window.history.pushState as any).mock.calls.length;
// Switch to agents view // Switch to agents view
const agentsTab = screen.queryByTitle("Agents"); const agentsTab = screen.queryByTitle("Agents");
if (!agentsTab) return; if (!agentsTab) return;
@@ -425,12 +429,12 @@ describe("Navigation history integration", () => {
expect(screen.getByTestId("agents-view")).toBeTruthy(); expect(screen.getByTestId("agents-view")).toBeTruthy();
}); });
// pushState should NOT have been called for view changes on desktop // pushState should have been called for the view change
expect(window.history.pushState).not.toHaveBeenCalled(); expect((window.history.pushState as any).mock.calls.length).toBeGreaterThan(pushCallsBefore);
}); });
// 4. Desktop: popstate does NOT revert view changes // 4. Desktop: popstate reverts view changes
it("does not revert view change on popstate in desktop mode", async () => { it("reverts view change on popstate in desktop mode", async () => {
localStorage.setItem("kb-dashboard-view-mode", "project"); localStorage.setItem("kb-dashboard-view-mode", "project");
const taskViewStorageKey = scopedKey("kb-dashboard-task-view", DEFAULT_PROJECT_ID); const taskViewStorageKey = scopedKey("kb-dashboard-task-view", DEFAULT_PROJECT_ID);
localStorage.setItem(taskViewStorageKey, "board"); localStorage.setItem(taskViewStorageKey, "board");
@@ -448,8 +452,10 @@ describe("Navigation history integration", () => {
// Simulate back button // Simulate back button
dispatchPopState({ navIndex: 0 }); dispatchPopState({ navIndex: 0 });
// Agents view should still be showing (desktop ignores popstate for navigation) // Agents view should be reverted (board view shown instead)
expect(screen.getByTestId("agents-view")).toBeTruthy(); await waitFor(() => {
expect(screen.queryByTestId("agents-view")).toBeNull();
});
}); });
// 5. Verify useNavigationHistory is called with enabled=true on mobile // 5. Verify useNavigationHistory is called with enabled=true on mobile

10
packages/dashboard/app/hooks/useNavigationHistory.ts
View File

@@ -31,12 +31,12 @@ export interface UseNavigationHistoryResult {
* Centralized back-navigation hook that integrates the browser History API * Centralized back-navigation hook that integrates the browser History API
* (`pushState`/`popstate`) with modal and view state machines. * (`pushState`/`popstate`) with modal and view state machines.
* *
* On mobile, every modal open and view change pushes a history entry so that * Every modal open and view change pushes a history entry so that the
* the Android hardware back button and iOS swipe-back gesture dismiss the * browser back button dismisses the top modal or reverts to the previous
* top modal or revert to the previous view. * view. Works on both desktop and mobile.
* *
* On desktop (`enabled: false`), all operations are no-ops and no `popstate` * When `enabled` is false, all operations are no-ops and no `popstate`
* listener is registered, leaving desktop behavior completely unchanged. * listener is registered.
*/ */
export function useNavigationHistory( export function useNavigationHistory(
options: UseNavigationHistoryOptions, options: UseNavigationHistoryOptions,