diff --git a/.changeset/use-planning-session-back.md b/.changeset/use-planning-session-back.md
new file mode 100644
index 0000000000..fc0ce749f7
--- /dev/null
+++ b/.changeset/use-planning-session-back.md
@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Replace the Planning Sessions toggle with a consistent Back-to-sessions control.
+category: fix
+dev: Uses the existing session-list transition across desktop and compact Planning layouts.
diff --git a/packages/dashboard/app/components/PlanningModeModal.css b/packages/dashboard/app/components/PlanningModeModal.css
index 9dd559b39a..45ae835216 100644
--- a/packages/dashboard/app/components/PlanningModeModal.css
+++ b/packages/dashboard/app/components/PlanningModeModal.css
@@ -587,11 +587,12 @@ The New session button must look EXACTLY like Missions' primary sidebar create b
padding: 0 8px;
}
-.planning-mobile-back {
- /* Visible only on mobile (see media query below). On desktop the sidebar
- is always visible alongside the detail pane, so a back button is never
- needed. */
- display: none;
+.planning-session-back {
+ display: inline-flex;
+ min-width: calc(var(--space-md) * 2.25);
+ min-height: calc(var(--space-md) * 2.25);
+ align-items: center;
+ justify-content: center;
background: none;
border: none;
color: var(--text);
@@ -602,11 +603,11 @@ The New session button must look EXACTLY like Missions' primary sidebar create b
transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
-.planning-mobile-back:hover {
+.planning-session-back:hover {
background: var(--card-hover);
}
-.planning-mobile-back:focus-visible {
+.planning-session-back:focus-visible {
outline: none;
box-shadow: var(--focus-ring-strong);
}
@@ -711,14 +712,6 @@ The New session button must look EXACTLY like Missions' primary sidebar create b
.planning-modal-body--show-list .planning-detail {
display: none;
}
- /* The rendered Back control needs a full touch target and must not be squeezed out of the title row. */
- .planning-mobile-back {
- display: inline-flex;
- min-width: calc(var(--space-md) * 2.25);
- min-height: calc(var(--space-md) * 2.25);
- align-items: center;
- justify-content: center;
- }
/* Always keep action buttons visible on mobile (no hover) */
.planning-sidebar-item-delete,
.planning-sidebar-item-archive {
@@ -1830,14 +1823,6 @@ plan actions, and a token-sized bottom inset keep all three controls inline with
display: none;
}
- .planning-mobile-back {
- display: inline-flex;
- min-width: calc(var(--space-md) * 2.25);
- min-height: calc(var(--space-md) * 2.25);
- align-items: center;
- justify-content: center;
- }
-
.planning-summary-actions {
flex-wrap: wrap;
align-items: flex-start;
@@ -2169,7 +2154,7 @@ mobile and desktop offer the same View task / Return to sessions choices.
/*
FNXC:PlanningModeMobile 2026-07-20-21:50:
The Planning detail header keeps Back, the lightbulb, a single-line truncated title, and Edit on
- one row. Fixed icon controls may not shrink; only the title yields space before Sessions/History.
+ one row. Fixed icon controls may not shrink; only the title yields space before History.
*/
.planning-modal--embedded .modal-header--embedded .detail-title-row {
@@ -2191,7 +2176,7 @@ mobile and desktop offer the same View task / Return to sessions choices.
.planning-modal--embedded .modal-header--embedded .detail-title-row > svg,
.planning-modal--embedded .modal-header--embedded .detail-title-row > .btn-icon,
- .planning-modal--embedded .modal-header--embedded .planning-mobile-back {
+ .planning-modal--embedded .modal-header--embedded .planning-session-back {
flex: 0 0 auto;
}
@@ -2202,7 +2187,7 @@ mobile and desktop offer the same View task / Return to sessions choices.
.planning-header-controls {
display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
+ grid-template-columns: minmax(0, 1fr);
width: 100%;
}
diff --git a/packages/dashboard/app/components/PlanningModeModal.tsx b/packages/dashboard/app/components/PlanningModeModal.tsx
index 3628a0d101..e0bf22507f 100644
--- a/packages/dashboard/app/components/PlanningModeModal.tsx
+++ b/packages/dashboard/app/components/PlanningModeModal.tsx
@@ -617,14 +617,13 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
const isCompactInterview = viewportMode !== "desktop" || isShortViewport();
/*
FNXC:PlanningModeMobile 2026-07-20-10:30:
- FN-8427 makes the saved-session list a real compact destination. Both Back and Sessions
- enter this one mode, which must unmount the active interview plan so it cannot consume
- flex height beneath session rows. Desktop preserves its three-pane interview until its
- explicit Sessions toggle requests the same list destination.
+ FN-8427 makes the saved-session list a real destination. Back enters this mode and unmounts
+ the active interview plan so it cannot consume flex height beneath session rows.
*/
const isSessionListMode = showSessionList || (isCompactInterview && !mobileShowDetail);
- // FNXC:PlanningModeMobile 2026-07-20-10:30: Empty mobile state opens the composer because no saved destination exists; once sessions exist, every compact detail surface gets this single Back-to-list escape.
- const canReturnToSessionList = isCompactInterview && mobileShowDetail && planningSessions.length > 0;
+ // FNXC:PlanningSessionBack 2026-07-21-11:15: Back covers selected details on every viewport and drafts whenever saved sessions exist; list mode removes it instead of leaving an orphaned control.
+ const canReturnToSessionList = !isSessionListMode
+ && (selectedSessionId !== null || planningSessions.length > 0);
const [isRefineMenuOpen, setIsRefineMenuOpen] = useState(false);
const [mobileWorkspaceTab, setMobileWorkspaceTab] = useState<"question" | "plan">("question");
/*
@@ -1918,6 +1917,7 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
}, [projectId, resetDetailState, resumeSessionId, selectedSessionId]);
const handleBackToList = useCallback(() => {
+ setIsHistoryOpen(false);
setShowSessionList(true);
setMobileShowDetail(false);
}, []);
@@ -2832,13 +2832,13 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
{/*
FNXC:PlanningMode 2026-06-22-00:00:
- Embedded planning is a main-content destination, not a dialog: it drops the modal close button and renders a plain common title (modal-header--embedded) matching other embedded views like Command Center. The mobile back affordance stays because it navigates the session list, not the view.
+ Embedded planning is a main-content destination, not a dialog: it drops the modal close button and renders a plain common title (modal-header--embedded) matching other embedded views like Command Center. The session-list Back affordance stays because it navigates within Planning, not away from the view.
*/}