feat: add routable browser URLs for stacks and shell views (#1586)

* feat: add routable browser URLs for stacks and shell views

Sync in-memory navigation to the address bar via a History API hook so
deep links, refresh, Back/Forward, and bookmarks work across nodes,
views, stack editor tabs, and mobile surfaces. Gate role/tier URL
normalization on permissions and license readiness, preserve URLs on
metadata fetch failure, and surface retryable stack-list errors without
rewriting pending stack paths.

* fix: preserve deep-link views on cold load and refresh

Stop the node-switch effect from resetting to dashboard on initial mount.

Defer URL writer settlement until hydrated activeView matches the route.

Adds E2E coverage for shell cold loads, stack refresh, and compose env tab.

* fix: keep mobile dashboard on list surface so sidebar renders

On mobile, the URL sync hook was routing /nodes/<slug>/dashboard to the
content surface, hiding the stack list sidebar. This prevented the
data-stacks-loaded sentinel from appearing, causing sidebar truncation
E2E tests to time out after reload on a mobile viewport.

Mobile dashboard now stays on the list surface; other non-editor views
still render on the content surface.

* fix: complete mobile URL routing follow-ups for stack deep links

Restore mobile /dashboard vs /stacks, list surface always writes /stacks.

Hydrate pendingDetailStack, freeze compose failures with routeDetailError,

and add unit plus E2E coverage.

* fix: hydrate shell views from URL and sync in-app navigation

Bootstrap activeView and tab state from the pathname on cold load.

Settle route phase when state already matches, normalize unknown segments,

and open Monaco editor tabs from stack deep links via applyEditorRouteState.

* fix: prevent mobile stack deep links from hanging on cold load

The resolvePendingStack effect did not re-fire when the pending stack ref
was populated during URL hydration, because the urlHydratingStack state
set in the same callback was not listed in the effect's dependency array.
Adding it causes the effect to retry once hydration has committed.

A resolvingRef mutex prevents concurrent invocations. When the target file
is already loaded, route state is applied directly without calling
loadFileForRoute, which avoids unmounting the editor (and hiding the
recovery chip) if a background refresh triggers route resolution during
a deploy operation.

* test: adapt stack, deploy, and sidebar e2e specs to routable stack URLs

* ci: raise E2E Playwright job timeout to 20 minutes

frontend/src/components/EditorLayout/hooks/useStackActions.ts

@@ -8,6 +8,8 @@ import type { useViewNavigationState } from './useViewNavigationState';
 import type { OverlayState } from './useOverlayState';
 import type { Node } from '@/context/NodeContext';
 import type { RunWithLogParams } from '@/context/DeployFeedbackContext';
+import { parsePath } from '@/lib/router/senchoRoute';
+import type { EditorTab } from '@/lib/router/routeTypes';
 import type { StackAction, RecoverableAction, FailureClassification } from '../EditorView';
 import type { NotificationItem } from '../../dashboard/types';
 import type { PolicyBlockPayload, PolicyBlockableAction } from '../../stack/PolicyBlockDialog';
@@ -272,6 +274,9 @@ export function useStackActions(options: UseStackActionsOptions) {
     editorState.content !== editorState.originalContent ||
     editorState.envContent !== editorState.originalEnvContent;
 
+  const isComposeDirty = () => editorState.content !== editorState.originalContent;
+  const isEnvDirty = () => editorState.envContent !== editorState.originalEnvContent;
+
   const getStackMenuVisibility = (file: string) => {
     // A partial stack has running containers, so it shows the running-stack
     // lifecycle actions (stop/restart/update) rather than deploy.
@@ -481,18 +486,22 @@ export function useStackActions(options: UseStackActionsOptions) {
     }
   };
 
-  const loadFile = async (filename: string) => {
-    if (!filename) return;
+  const applyEditorRouteState = (tab: EditorTab) => {
+    editorState.setActiveTab(tab);
+    editorState.setEditingCompose(true);
+    editorState.setIsEditing(false);
+  };
+
+  const loadFileCore = async (filename: string): Promise<boolean> => {
+    if (!filename) return false;
     if (
       stackListState.selectedFile &&
       filename !== stackListState.selectedFile &&
       hasUnsavedChanges()
     ) {
       overlayState.setPendingUnsavedLoad(filename);
-      return;
+      return false;
     }
-    // Cancel any in-flight load before starting a new one. A late response
-    // from the previous stack must not overwrite the freshly-loaded one.
     loadFileAbortRef.current?.abort();
     const controller = new AbortController();
     loadFileAbortRef.current = controller;
@@ -504,9 +513,12 @@ export function useStackActions(options: UseStackActionsOptions) {
     editorState.setActiveTab('compose');
     try {
       const res = await apiFetch(`/stacks/${filename}`, { signal });
-      if (signal.aborted) return;
+      if (signal.aborted) return false;
       const text = await res.text();
-      if (signal.aborted) return;
+      if (signal.aborted) return false;
+      if (!res.ok) {
+        throw new Error(`Failed to load stack: ${res.status}`);
+      }
       stackListState.setSelectedFile(filename);
       navState.setActiveView('editor');
       editorState.setContent(text || '');
@@ -515,12 +527,10 @@ export function useStackActions(options: UseStackActionsOptions) {
       await loadEnvState(filename, signal);
       await loadContainerState(filename, signal);
       await loadBackupState(filename, signal);
+      return true;
     } catch (error) {
-      if (isAbortError(error) || signal.aborted) return;
+      if (isAbortError(error) || signal.aborted) return false;
       console.error('Failed to load file:', error);
-      // Surface the failure so a tap that cannot load (offline, dead remote
-      // node, 5xx) is not a silent no-op, especially on mobile where the row
-      // tap optimistically opens the detail surface.
       toast.error(`Could not open "${filename.replace(/\.(ya?ml)$/, '')}". Check your connection and try again.`);
       stackListState.setSelectedFile(null);
       editorState.setContent('');
@@ -530,6 +540,7 @@ export function useStackActions(options: UseStackActionsOptions) {
       editorState.setOriginalEnvContent('');
       editorState.setEnvEtag(null);
       editorState.setContainers([]);
+      return false;
     } finally {
       if (!signal.aborted) {
         editorState.setIsFileLoading(false);
@@ -537,6 +548,14 @@ export function useStackActions(options: UseStackActionsOptions) {
     }
   };
 
+  const loadFile = async (filename: string) => {
+    await loadFileCore(filename);
+  };
+
+  const loadFileForRoute = async (filename: string): Promise<boolean> => {
+    return loadFileCore(filename);
+  };
+
   // Keep ref in sync so loadFileOnNode always calls the latest loadFile closure
   loadFileRef.current = loadFile;
 
@@ -1209,18 +1228,48 @@ export function useStackActions(options: UseStackActionsOptions) {
   // destination. When the editor is dirty the navigation is stashed and the
   // unsaved-changes dialog opens; discardAndLoadPending runs it on confirm.
   // When clean it runs immediately.
-  const attemptLeaveEditor = (perform: () => void) => {
+  const attemptLeaveEditor = (perform: () => void, onCancel?: () => void) => {
     if (stackListState.selectedFile && hasUnsavedChanges()) {
-      overlayState.setPendingLeaveAction({ run: perform });
+      overlayState.setPendingLeaveAction({ run: perform, onCancel });
       return;
     }
     perform();
   };
 
+  const wouldDiscardOnPopstate = (): boolean => {
+    if (!stackListState.selectedFile) return false;
+    const parsed = parsePath(window.location.pathname, window.location.search);
+    const targetStack = parsed.stackName;
+    const targetView = parsed.view;
+
+    if (targetView !== 'editor' || !targetStack || targetStack !== stackListState.selectedFile) {
+      return isComposeDirty() || isEnvDirty();
+    }
+    if (
+      parsed.editorTab === 'env'
+      && editorState.activeTab === 'env'
+      && parsed.envFile
+      && parsed.envFile !== editorState.selectedEnvFile
+    ) {
+      return isEnvDirty();
+    }
+    return false;
+  };
+
+  const attemptPopstateNavigation = (apply: () => void, onCancel: () => void) => {
+    if (wouldDiscardOnPopstate()) {
+      overlayState.setPendingLeaveAction({ run: apply, onCancel });
+      return;
+    }
+    apply();
+  };
+
   const cancelPendingUnsavedLoad = () => {
+    const cancel = overlayState.pendingLeaveAction?.onCancel;
     overlayState.setPendingUnsavedLoad(null);
     overlayState.setPendingUnsavedNode(null);
     overlayState.setPendingLeaveAction(null);
+    cancel?.();
   };
 
   const discardAndLoadPending = () => {
@@ -1398,7 +1447,9 @@ export function useStackActions(options: UseStackActionsOptions) {
     refreshSelectedContainers,
     refreshGitSourcePending,
     loadFile,
+    loadFileForRoute,
     loadFileOnNode,
+    applyEditorRouteState,
     navigateToNotification,
     changeEnvFile,
     saveFile,
@@ -1419,6 +1470,7 @@ export function useStackActions(options: UseStackActionsOptions) {
     requestStackUpdate,
     deleteStack,
     attemptLeaveEditor,
+    attemptPopstateNavigation,
     cancelPendingUnsavedLoad,
     discardAndLoadPending,
     requestDeleteStack,