From e8f271f5f6500340ed95bfda9f6f114c826860e5 Mon Sep 17 00:00:00 2001 From: Anso Date: Sun, 7 Jun 2026 01:03:13 -0400 Subject: [PATCH] feat(ui): make the core stack flow usable on mobile (#1327) * feat(ui): make the core stack flow usable on mobile Below the md breakpoint the app collapses to a single full-width column: the stack list is full-screen, tapping a stack opens a full-screen detail with a Health / Logs / Compose segmented control (Logs first) and a back button, and a bottom tab bar switches Stacks, Fleet, Schedules, and Settings. Compose is read-only on a phone with a prompt to edit on desktop. Desktop (md and up) is unchanged: the mobile shell is gated behind a useIsMobile hook plus max-md/md variants, and the stack-detail blocks are shared with the desktop two-pane view so it renders identically. Also generalizes the unsaved-changes guard so leaving a dirty editor (back, tab bar, hamburger) prompts before discarding; adds 44px touch targets on list rows, filter chips, and actions; makes log and shell modals full-screen on mobile; and offsets toasts and the deploy pill above the bottom tab bar. * fix(ui): keep mobile nav in sync when opening views from outside the bottom bar On a phone the sidebar activity actions, the node switcher's Manage Nodes, the profile Settings entry, and the dashboard configuration links set the active view without flipping the mobile surface to content, so the user stayed on the stack list and never saw the destination. Route these through the mobile-aware navigation and settings helpers (a no-op on desktop). --- frontend/src/components/BashExecModal.tsx | 2 +- .../src/components/DeployFeedbackPill.tsx | 2 +- frontend/src/components/EditorLayout.tsx | 428 +++++++++---- .../components/EditorLayout/EditorView.tsx | 603 +++--------------- .../EditorLayout/MobileStackDetail.test.tsx | 105 +++ .../EditorLayout/MobileStackDetail.tsx | 180 ++++++ .../components/EditorLayout/ShellOverlays.tsx | 4 +- .../EditorLayout/editor-view-blocks.tsx | 557 ++++++++++++++++ .../EditorLayout/hooks/useOverlayState.ts | 6 + .../hooks/useStackActions.test.ts | 51 ++ .../EditorLayout/hooks/useStackActions.ts | 27 + .../EditorLayout/mobile-surface.test.ts | 44 ++ .../components/EditorLayout/mobile-surface.ts | 44 ++ frontend/src/components/LogViewer.tsx | 2 +- frontend/src/components/MobileTabBar.test.tsx | 67 ++ frontend/src/components/MobileTabBar.tsx | 106 +++ .../components/sidebar/SidebarFilterChips.tsx | 6 +- frontend/src/components/sidebar/StackRow.tsx | 5 +- .../src/components/sidebar/StackSidebar.tsx | 8 +- .../src/components/sidebar/sidebar-styles.ts | 2 + frontend/src/components/ui/modal.tsx | 8 +- frontend/src/components/ui/sheet.tsx | 4 +- frontend/src/components/ui/toast.tsx | 2 +- frontend/src/hooks/use-is-mobile.test.ts | 51 ++ frontend/src/hooks/use-is-mobile.ts | 35 + frontend/src/index.css | 6 + 26 files changed, 1696 insertions(+), 659 deletions(-) create mode 100644 frontend/src/components/EditorLayout/MobileStackDetail.test.tsx create mode 100644 frontend/src/components/EditorLayout/MobileStackDetail.tsx create mode 100644 frontend/src/components/EditorLayout/editor-view-blocks.tsx create mode 100644 frontend/src/components/EditorLayout/mobile-surface.test.ts create mode 100644 frontend/src/components/EditorLayout/mobile-surface.ts create mode 100644 frontend/src/components/MobileTabBar.test.tsx create mode 100644 frontend/src/components/MobileTabBar.tsx create mode 100644 frontend/src/hooks/use-is-mobile.test.ts create mode 100644 frontend/src/hooks/use-is-mobile.ts diff --git a/frontend/src/components/BashExecModal.tsx b/frontend/src/components/BashExecModal.tsx index b38d6971..480793ec 100644 --- a/frontend/src/components/BashExecModal.tsx +++ b/frontend/src/components/BashExecModal.tsx @@ -214,7 +214,7 @@ export default function BashExecModal({ isOpen, onClose, containerId, containerN }; return ( - + diff --git a/frontend/src/components/EditorLayout.tsx b/frontend/src/components/EditorLayout.tsx index cfbea43d..2be254a8 100644 --- a/frontend/src/components/EditorLayout.tsx +++ b/frontend/src/components/EditorLayout.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { Button } from './ui/button'; -import { Plus } from 'lucide-react'; +import { Plus, Loader2, ChevronLeft } from 'lucide-react'; import { UserProfileDropdown } from './UserProfileDropdown'; import { NotificationPanel } from './NotificationPanel'; import { TopBar } from './TopBar'; @@ -38,6 +38,10 @@ import { usePanelSessionStartedAt } from '@/components/sidebar/usePanelSessionSt import type { SidebarActivityAction } from '@/components/sidebar/SidebarActivityTicker'; import { useComposeDiffPreviewEnabled } from '@/hooks/use-compose-diff-preview-enabled'; import { toast } from '@/components/ui/toast-store'; +import { useIsMobile } from '@/hooks/use-is-mobile'; +import { MobileTabBar } from './MobileTabBar'; +import { deriveMobileSurface, type MobileView } from './EditorLayout/mobile-surface'; +import type { SectionId } from './settings/types'; export default function EditorLayout() { const { isAdmin, can } = useAuth(); @@ -198,26 +202,143 @@ export default function EditorLayout() { nextAutoUpdateRunAt, }); + const loadingAction = selectedFile ? (stackActionMap[selectedFile] ?? null) : null; + const stackName = selectedFile || ''; + + const { isDarkMode } = useTheme(); + + // ---- Mobile shell (below md) --------------------------------------------- + // Desktop renders the persistent sidebar + workspace untouched. On a phone we + // show exactly one surface at a time: the stack list, a top-level view, or a + // full-screen stack detail. `mobileView` is explicit state, decoupled from + // `activeView`, so 'dashboard' still maps to HomeDashboard everywhere. + const isMobile = useIsMobile(); + const [mobileView, setMobileView] = useState('list'); + // Optimistically flip to the detail surface the instant a row is tapped, + // before loadFile's fetch resolves selectedFile; cleared once it settles. + const [pendingDetailStack, setPendingDetailStack] = useState(null); + + useEffect(() => { + // eslint-disable-next-line react-hooks/set-state-in-effect + if (!isFileLoading && pendingDetailStack) setPendingDetailStack(null); + }, [isFileLoading, pendingDetailStack]); + + const { surface: mobileSurface, detailReady, detailOpen } = deriveMobileSurface({ + activeView, + selectedFile, + mobileView, + pendingDetailStack, + }); + + // A phone shows one surface at a time, so every mobile navigation tears down + // the current detail and switches surfaces, guarding a dirty editor first. + // `then` runs the destination-specific work (navigate to a view, open + // settings) after the surface flips. + const leaveToMobileSurface = (target: MobileView, then?: () => void) => { + stackActions.attemptLeaveEditor(() => { + stackActions.resetEditorState(); + setPendingDetailStack(null); + setMobileView(target); + then?.(); + }); + }; + + const goToMobileList = () => leaveToMobileSurface('list'); + const navigateMobileAware = (view: string) => leaveToMobileSurface('content', () => handleNavigate(view)); + const openSettingsMobileAware = (section?: SectionId) => + leaveToMobileSurface('content', () => handleOpenSettings(section)); + + // Settings navigation from outside the bottom bar (profile menu, node + // switcher, dashboard config links). On mobile it flips to the content + // surface so the section is actually shown instead of leaving the user on + // the stack list; on desktop it is the plain open. + const openSettings = (section?: SectionId) => + (isMobile ? openSettingsMobileAware(section) : handleOpenSettings(section)); + + // Tapping a stack row on mobile flips to the detail surface immediately. + const handleSelectStack = (file: string) => { + if (isMobile) setPendingDetailStack(file); + void stackActions.loadFile(file); + }; + + // Hamburger / command-palette navigation is mobile-aware so it collapses the + // current surface and honors the unsaved-changes guard; desktop is untouched. + const navHandler = isMobile ? navigateMobileAware : handleNavigate; + + // Sidebar activity actions navigate to top-level views. On mobile they must + // flip the surface to content (otherwise the user stays on the stack list); + // on desktop they set the view directly as before. const handleActivityAction = useCallback((action: SidebarActivityAction) => { switch (action.kind) { case 'open-stack-notification': stackActions.navigateToNotification(action.summary.notif); return; case 'open-auto-updates': - setActiveView('auto-updates'); + if (isMobile) navigateMobileAware('auto-updates'); + else setActiveView('auto-updates'); return; case 'open-activity': - setActiveView('global-observability'); + if (isMobile) navigateMobileAware('global-observability'); + else setActiveView('global-observability'); return; case 'noop': return; } - }, [stackActions, setActiveView]); + }, [stackActions, setActiveView, isMobile, navigateMobileAware]); - const loadingAction = selectedFile ? (stackActionMap[selectedFile] ?? null) : null; - const stackName = selectedFile || ''; - - const { isDarkMode } = useTheme(); + const renderEditor = () => ( + + ); // Track the last "committed" node id so the node-switch dirty guard can // detect an actual switch (vs the initial mount or an internal revert). @@ -341,71 +462,74 @@ export default function EditorLayout() { return ( -
- - {/* Left Sidebar (Stacks) */} - handleOpenSettings('nodes')} - /> - } - createStackSlot={createStackSlot} - onScan={handleScanStacks} - isScanning={isScanning} - canCreate={can('stack:create')} - searchQuery={searchQuery} - onSearchChange={setSearchQuery} - filterChip={filterChip} - filterCounts={filterCounts} - onFilterChipChange={setFilterChip} - list={{ - files: chipFilteredFiles, - isLoading, - selectedFile, - searchQuery, - stackLabelMap, - stackStatuses: stackStatuses as Record, - stackUpdates, - gitSourcePendingMap, - pinnedFiles: pinned, - isCollapsed, - toggleCollapse, - isBusy: isStackBusy, - getDisplayName: stackActions.getDisplayName, - onSelectFile: stackActions.loadFile, - buildMenuCtx, - remoteResults, - remoteLoading: remoteSearchLoading, - remoteFailedNodes: remoteSearchFailedNodes, - onSelectRemoteFile: (nodeId, file) => { - const node = nodes.find(n => n.id === nodeId); - if (node) void stackActions.loadFileOnNode(node, file); - }, - filterChip, - onOpenCreate: can('stack:create') ? openCreateDialog : undefined, - }} - activitySummary={activitySummary} - onActivityAction={handleActivityAction} - bulkMode={bulkMode} - selectedFiles={selectedFiles} - onToggleBulkMode={toggleBulkMode} - onToggleSelect={toggleSelect} - onClearSelection={clearSelection} - onBulkAction={handleBulkAction} - /> + {(() => { + const commandPaletteEl = ( + + ); - {/* Main Content Area */} -
+ const sidebarEl = ( + openSettings('nodes')} + /> + } + createStackSlot={createStackSlot} + onScan={handleScanStacks} + isScanning={isScanning} + canCreate={can('stack:create')} + searchQuery={searchQuery} + onSearchChange={setSearchQuery} + filterChip={filterChip} + filterCounts={filterCounts} + onFilterChipChange={setFilterChip} + list={{ + files: chipFilteredFiles, + isLoading, + selectedFile, + searchQuery, + stackLabelMap, + stackStatuses: stackStatuses as Record, + stackUpdates, + gitSourcePendingMap, + pinnedFiles: pinned, + isCollapsed, + toggleCollapse, + isBusy: isStackBusy, + getDisplayName: stackActions.getDisplayName, + onSelectFile: handleSelectStack, + buildMenuCtx, + remoteResults, + remoteLoading: remoteSearchLoading, + remoteFailedNodes: remoteSearchFailedNodes, + onSelectRemoteFile: (nodeId, file) => { + const node = nodes.find(n => n.id === nodeId); + if (node) void stackActions.loadFileOnNode(node, file); + }, + filterChip, + onOpenCreate: can('stack:create') ? openCreateDialog : undefined, + }} + activitySummary={activitySummary} + onActivityAction={handleActivityAction} + bulkMode={bulkMode} + selectedFiles={selectedFiles} + onToggleBulkMode={toggleBulkMode} + onToggleSelect={toggleSelect} + onClearSelection={clearSelection} + onBulkAction={handleBulkAction} + /> + ); + + const topBarEl = ( } @@ -422,13 +546,14 @@ export default function EditorLayout() { } userMenu={ handleOpenSettings('account')} + onOpenSettings={() => openSettings('account')} /> } /> + ); - {/* Main Workspace */} -
+ const workspaceEl = ( +
{ void stackActions.loadFile(stackFile); }} - onOpenSettingsSection={(section) => handleOpenSettings(section)} + onOpenSettingsSection={(section) => openSettings(section)} onClearNotifications={clearAllNotifications} - renderEditor={() => ( - - )} + renderEditor={renderEditor} />
-
+ ); - -
+ const shellOverlaysEl = ( + + ); + + if (isMobile) { + return ( +
+ {commandPaletteEl} + {mobileSurface !== 'detail' && topBarEl} +
+ {mobileSurface === 'list' && sidebarEl} + {mobileSurface === 'content' && workspaceEl} + {mobileSurface === 'detail' && ( + detailReady ? ( +
{renderEditor()}
+ ) : ( + + ) + )} +
+ + {shellOverlaysEl} +
+ ); + } + + return ( +
+ {commandPaletteEl} + {/* Left Sidebar (Stacks) */} + {sidebarEl} + {/* Main Content Area */} +
+ {topBarEl} + {/* Main Workspace */} + {workspaceEl} +
+ {shellOverlaysEl} +
+ ); + })()} ); } + +// Optimistic stack-detail placeholder shown on mobile the instant a row is +// tapped, until loadFile resolves and the real EditorView mounts. Keeps the tap +// feeling immediate on slow networks. +function MobileDetailLoading({ name, onBack }: { name: string; onBack: () => void }) { + return ( +
+
+ + + {name.replace(/\.(ya?ml)$/, '')} + +
+
+ +
+
+ ); +} diff --git a/frontend/src/components/EditorLayout/EditorView.tsx b/frontend/src/components/EditorLayout/EditorView.tsx index d3412c8c..68e7727e 100644 --- a/frontend/src/components/EditorLayout/EditorView.tsx +++ b/frontend/src/components/EditorLayout/EditorView.tsx @@ -1,30 +1,16 @@ import { Suspense, useRef, useEffect } from 'react'; import { Editor } from '@/lib/monacoLoader'; import { - RotateCw, - Play, - Square, Save, - Terminal, - CloudDownload, Pencil, X, - MoreVertical, Rocket, - Trash2, - ScrollText, - Undo2, - Loader2, - Check, ChevronDown, GitBranch, - ShieldCheck, - ArrowUpRight, - Copy, FolderOpen, } from 'lucide-react'; import { Button } from '../ui/button'; -import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'; +import { Card, CardContent, CardHeader } from '../ui/card'; import { Tabs, TabsList, @@ -36,7 +22,6 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, - DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu'; import { @@ -46,15 +31,13 @@ import { SelectTrigger, SelectValue, } from '@/components/ui/select'; -import { Sparkline } from '../ui/sparkline'; import { springs } from '@/lib/motion'; -import { cn } from '@/lib/utils'; -import { copyToClipboard } from '@/lib/clipboard'; import ErrorBoundary from '../ErrorBoundary'; -import TerminalComponent from '../Terminal'; -import StructuredLogViewer from '../StructuredLogViewer'; import StackAnatomyPanel from '../StackAnatomyPanel'; import { StackFileExplorer } from '@/components/files/StackFileExplorer'; +import { useIsMobile } from '@/hooks/use-is-mobile'; +import { StackIdentityHeader, ContainersHealth, StackLogsSection } from './editor-view-blocks'; +import { MobileStackDetail } from './MobileStackDetail'; import type { NotificationItem } from '../dashboard/types'; import type { Node } from '@/context/NodeContext'; import type { useAuth } from '@/context/AuthContext'; @@ -88,75 +71,6 @@ export interface ContainerStatsEntry { history: { cpu: number[]; mem: number[]; netIn: number[]; netOut: number[] }; } -const extractUptime = (status: string | undefined): string | null => { - if (!status) return null; - const match = status.match(/^\s*Up\s+(.+?)(?:\s*\(.*\))?\s*$/i); - if (!match) return null; - return `up ${match[1].trim()}`; -}; - -const healthcheckLabel = ( - health?: 'healthy' | 'unhealthy' | 'starting' | 'none', -): string | null => { - if (!health || health === 'none') return null; - if (health === 'healthy') return 'healthcheck passing'; - if (health === 'unhealthy') return 'healthcheck failing'; - return 'healthcheck starting'; -}; - -type StackPill = { - label: string; - dotClass: string; - className: string; - pulse: boolean; -}; - -const getStackStatePill = (containers: ContainerInfo[]): StackPill | null => { - if (!containers || containers.length === 0) return null; - const running = containers.some(c => c.State === 'running'); - if (!running) { - return { - label: 'exited', - dotClass: 'bg-destructive', - className: 'border-destructive/40 bg-destructive/10 text-destructive', - pulse: false, - }; - } - const anyUnhealthy = containers.some(c => c.healthStatus === 'unhealthy'); - const anyStarting = containers.some(c => c.healthStatus === 'starting'); - const anyHealthy = containers.some(c => c.healthStatus === 'healthy'); - if (anyUnhealthy) { - return { - label: 'running · unhealthy', - dotClass: 'bg-destructive', - className: 'border-destructive/40 bg-destructive/10 text-destructive', - pulse: true, - }; - } - if (anyStarting) { - return { - label: 'running · starting', - dotClass: 'bg-warning', - className: 'border-warning/40 bg-warning/10 text-warning', - pulse: true, - }; - } - if (anyHealthy) { - return { - label: 'running · healthy', - dotClass: 'bg-success', - className: 'border-success/40 bg-success/10 text-success', - pulse: true, - }; - } - return { - label: 'running', - dotClass: 'bg-success', - className: 'border-success/40 bg-success/10 text-success', - pulse: true, - }; -}; - export interface EditorViewProps { // Identity stackName: string; @@ -226,60 +140,64 @@ export interface EditorViewProps { setGitSourceOpen: (open: boolean) => void; setCopiedDigest: React.Dispatch>; - // Composed action — wraps setStackToDelete + setDeleteDialogOpen + // Composed action: wraps setStackToDelete + setDeleteDialogOpen requestDeleteStack: () => void; + + // Mobile-only: back affordance in the detail header returns to the stack list. + onMobileBack?: () => void; } -export function EditorView({ - stackName, - isDarkMode, - containers, - containerStats, - containerStatsError, - content, - envContent, - envExists, - envFiles, - selectedEnvFile, - isFileLoading, - backupInfo, - gitSourcePendingMap, - notifications, - activeTab, - isEditing, - editingCompose, - logsMode, - copiedDigest, - loadingAction, - stackMisconfigScanning, - can, - isAdmin, - trivy, - activeNode, - copiedDigestTimerRef, - deployStack, - restartStack, - stopStack, - updateStack, - rollbackStack, - scanStackConfig, - enterEditMode, - requestSave, - requestSaveAndDeploy, - discardChanges, - setContent, - setEnvContent, - changeEnvFile, - openLogViewer, - openBashModal, - serviceAction, - setActiveTab, - setLogsMode, - setEditingCompose, - setGitSourceOpen, - setCopiedDigest, - requestDeleteStack, -}: EditorViewProps) { +export function EditorView(props: EditorViewProps) { + const { + stackName, + isDarkMode, + containers, + containerStats, + containerStatsError, + content, + envContent, + envExists, + envFiles, + selectedEnvFile, + isFileLoading, + backupInfo, + gitSourcePendingMap, + notifications, + activeTab, + isEditing, + editingCompose, + logsMode, + copiedDigest, + loadingAction, + stackMisconfigScanning, + can, + isAdmin, + trivy, + activeNode, + copiedDigestTimerRef, + deployStack, + restartStack, + stopStack, + updateStack, + rollbackStack, + scanStackConfig, + enterEditMode, + requestSave, + requestSaveAndDeploy, + discardChanges, + setContent, + setEnvContent, + changeEnvFile, + openLogViewer, + openBashModal, + serviceAction, + setActiveTab, + setLogsMode, + setEditingCompose, + setGitSourceOpen, + setCopiedDigest, + requestDeleteStack, + } = props; const monacoEditorRef = useRef(null); // Dispose the underlying Monaco model when EditorView unmounts. The @@ -325,6 +243,14 @@ export function EditorView({ } }, [activeTab, canRead, setActiveTab]); + // Below md, render the segmented full-screen mobile detail instead of the + // desktop two-pane grid. All hooks above run unconditionally before this + // branch so hook order stays stable across breakpoints. + const isMobile = useIsMobile(); + if (isMobile) { + return ; + } + return (
@@ -333,374 +259,45 @@ export function EditorView({ {/* Command Center Card (identity + health strip) */} -
- {/* Identity block */} -
-
- {(activeNode?.name || 'local')} › stacks › {stackName} -
-
- {stackName} - {(() => { - const pill = getStackStatePill(safeContainers); - if (!pill) return null; - return ( - - - ); - })()} -
- {(() => { - const first = safeContainers[0]; - if (!first?.Image) return null; - const digest = first.ImageID ? first.ImageID.replace(/^sha256:/, '').slice(0, 12) : ''; - return ( -
- image · {first.Image} - {digest && first.ImageID && ( - <> - · - digest {digest} - - - )} -
- ); - })()} -
- {/* Action Bar — deploy / delete affordances render against - their own backend permissions so a delete-only or - deploy-only persona sees exactly what they can act on. */} - {(() => { - const canDeploy = can('stack:deploy', 'stack', stackName); - const canDelete = can('stack:delete', 'stack', stackName); - const canRollback = canDeploy && backupInfo.exists; - const canScan = trivy.available && isAdmin; - const hasOverflowExtras = canRollback || canScan; - const hasOverflow = hasOverflowExtras || canDelete; - if (!canDeploy && !hasOverflow) return null; - return ( -
- {canDeploy && ( - <> - {isRunning ? ( - - ) : ( - - )} - {isRunning && ( - - )} - - - )} - {hasOverflow && ( - - - - - - {canRollback && ( - - -
- {loadingAction === 'rollback' ? 'Rolling back...' : 'Rollback'} - {backupInfo.timestamp && ( - {new Date(backupInfo.timestamp).toLocaleString()} - )} -
- - )} - {canScan && ( - - {stackMisconfigScanning ? ( - - ) : ( - - )} - {stackMisconfigScanning ? 'Scanning...' : 'Scan config'} - - )} - {hasOverflowExtras && canDelete && } - {canDelete && ( - - - {loadingAction === 'delete' ? 'Deleting...' : 'Delete'} - - )} - - - )} -
- ); - })()} -
+ - {/* Per-container health strip */} -
-
-

CONTAINERS

- {containerStatsError && safeContainers.length > 0 && ( - - Stats unavailable - - )} -
- {safeContainers.length === 0 ? ( -
No containers running for this stack.
- ) : ( -
- {safeContainers.map(container => { - let mainPort: number | undefined; - let mainPortPrivate: number | undefined; - let mainPortProto: string | undefined; - if (container.Ports && container.Ports.length > 0) { - const WEB_UI_PORTS = [32400, 8989, 7878, 9696, 5055, 8080, 80, 443, 3000, 9000]; - const IGNORE_PORTS = [1900, 53, 22]; - let match = container.Ports.find(p => WEB_UI_PORTS.includes(p.PrivatePort)); - if (!match) match = container.Ports.find(p => WEB_UI_PORTS.includes(p.PublicPort)); - if (!match) match = container.Ports.find(p => !IGNORE_PORTS.includes(p.PrivatePort) && !IGNORE_PORTS.includes(p.PublicPort)); - const chosen = match || container.Ports[0]; - mainPort = chosen.PublicPort; - mainPortPrivate = chosen.PrivatePort; - mainPortProto = 'tcp'; - } - - const containerName = container?.Names?.[0]?.replace(/^\//, '') || container?.Id?.slice(0, 12) || 'container'; - const isActive = container.State === 'running' || container.State === 'paused'; - const health = container.healthStatus; - const uptime = isActive ? extractUptime(container.Status) : null; - const hcLabel = healthcheckLabel(health); - const stats = containerStats[container?.Id]; - const history = stats?.history; - - const badgeClass = health === 'unhealthy' || !isActive - ? 'bg-destructive text-destructive-foreground' - : health === 'starting' - ? 'bg-warning text-warning-foreground' - : 'bg-success text-success-foreground'; - const badgeGlyph = health === 'unhealthy' || !isActive ? '✗' : health === 'starting' ? '…' : '✓'; - const sparkStroke = health === 'unhealthy' ? 'var(--destructive)' : health === 'starting' ? 'var(--warning)' : 'var(--chart-1)'; - - return ( -
-
-
-
- {badgeGlyph} -
-
-
{containerName}
-
- {uptime ? {uptime} : {(container.State || 'unknown').toLowerCase()}} - {hcLabel ? <>·{hcLabel} : null} - {mainPort && mainPortPrivate ? ( - <> - · - {mainPort} → {mainPortPrivate}/{mainPortProto} - - - ) : null} -
-
-
-
- - {isAdmin && ( - - )} - {container.Service && ( - - - - - - {isActive ? ( - <> - serviceAction('restart', container.Service!)}> - Restart service - - serviceAction('stop', container.Service!)}> - Stop service - - - ) : ( - serviceAction('start', container.Service!)}> - Start service - - )} - - - )} -
-
- {isActive ? ( -
-
-
- cpu - {stats?.cpu ?? '-'} -
-
- -
-
-
-
- mem - {stats?.ram ?? '-'} -
-
- -
-
-
-
- net i/o - {stats?.net ?? '-'} -
-
- -
-
-
- ) : null} -
- ); - })} -
- )} -
+ {/* Logs Section (fills remaining left-column height) */} -
-
-

Logs

-
- - -
-
- {logsMode === 'structured' ? ( - - - - ) : ( -
-
- - - -
-
- )} -
+
{/* Right column: anatomy panel by default, Monaco editor when editing */} diff --git a/frontend/src/components/EditorLayout/MobileStackDetail.test.tsx b/frontend/src/components/EditorLayout/MobileStackDetail.test.tsx new file mode 100644 index 00000000..c6344d21 --- /dev/null +++ b/frontend/src/components/EditorLayout/MobileStackDetail.test.tsx @@ -0,0 +1,105 @@ +import { describe, it, expect, vi } from 'vitest'; +import { render, screen, fireEvent } from '@testing-library/react'; +import type { ReactNode } from 'react'; +import { MobileStackDetail } from './MobileStackDetail'; +import type { EditorViewProps } from './EditorView'; + +// The detail's heavy children stream logs, parse compose, and render container +// stats; stub them with markers so this test focuses on the segmented-control +// behavior (default segment + switching). +vi.mock('./editor-view-blocks', () => ({ + StackIdentityHeader: () =>
identity-header
, + ContainersHealth: () =>
health-pane
, + StackLogsSection: () =>
logs-pane
, +})); +vi.mock('../StackAnatomyPanel', () => ({ default: () =>
compose-pane
})); +vi.mock('../ErrorBoundary', () => ({ default: ({ children }: { children: ReactNode }) => <>{children} })); + +function makeProps(over: Partial = {}): EditorViewProps { + return { + stackName: 'web', + activeNode: null, + containers: [], + containerStats: {}, + containerStatsError: null, + content: '', + envContent: '', + selectedEnvFile: '', + gitSourcePendingMap: {}, + notifications: [], + copiedDigest: null, + loadingAction: null, + stackMisconfigScanning: false, + can: () => true, + isAdmin: false, + trivy: { available: false }, + backupInfo: { exists: false, timestamp: null }, + logsMode: 'structured', + copiedDigestTimerRef: { current: null }, + deployStack: vi.fn(), + restartStack: vi.fn(), + stopStack: vi.fn(), + updateStack: vi.fn(), + rollbackStack: vi.fn(), + scanStackConfig: vi.fn(), + openLogViewer: vi.fn(), + openBashModal: vi.fn(), + serviceAction: vi.fn(), + setLogsMode: vi.fn(), + setGitSourceOpen: vi.fn(), + setCopiedDigest: vi.fn(), + requestDeleteStack: vi.fn(), + onMobileBack: vi.fn(), + ...over, + } as unknown as EditorViewProps; +} + +describe('MobileStackDetail', () => { + it('defaults to the Logs segment', () => { + render(); + expect(screen.getByText('logs-pane')).toBeInTheDocument(); + expect(screen.queryByText('health-pane')).not.toBeInTheDocument(); + expect(screen.queryByText('compose-pane')).not.toBeInTheDocument(); + expect(screen.getByText('identity-header')).toBeInTheDocument(); + }); + + it('switches to Health and Compose segments', () => { + render(); + fireEvent.click(screen.getByRole('tab', { name: 'Health' })); + expect(screen.getByText('health-pane')).toBeInTheDocument(); + expect(screen.queryByText('logs-pane')).not.toBeInTheDocument(); + + fireEvent.click(screen.getByRole('tab', { name: 'Compose' })); + expect(screen.getByText('compose-pane')).toBeInTheDocument(); + }); + + it('marks the active segment with aria-selected and round-trips back to Logs', () => { + render(); + expect(screen.getByRole('tab', { name: 'Logs' })).toHaveAttribute('aria-selected', 'true'); + fireEvent.click(screen.getByRole('tab', { name: 'Health' })); + expect(screen.getByRole('tab', { name: 'Health' })).toHaveAttribute('aria-selected', 'true'); + expect(screen.getByRole('tab', { name: 'Logs' })).toHaveAttribute('aria-selected', 'false'); + fireEvent.click(screen.getByRole('tab', { name: 'Logs' })); + expect(screen.getByRole('tab', { name: 'Logs' })).toHaveAttribute('aria-selected', 'true'); + expect(screen.getByText('logs-pane')).toBeInTheDocument(); + }); + + it('invokes the back handler', () => { + const onMobileBack = vi.fn(); + render(); + fireEvent.click(screen.getByRole('button', { name: 'Back to stacks' })); + expect(onMobileBack).toHaveBeenCalledTimes(1); + }); + + it('shows the edit-on-desktop nudge in Compose when the user can edit', () => { + render( true })} />); + fireEvent.click(screen.getByRole('tab', { name: 'Compose' })); + expect(screen.getByText(/Editing compose is available on a larger screen/i)).toBeInTheDocument(); + }); + + it('hides the nudge when the user cannot edit', () => { + render( false })} />); + fireEvent.click(screen.getByRole('tab', { name: 'Compose' })); + expect(screen.queryByText(/Editing compose is available/i)).not.toBeInTheDocument(); + }); +}); diff --git a/frontend/src/components/EditorLayout/MobileStackDetail.tsx b/frontend/src/components/EditorLayout/MobileStackDetail.tsx new file mode 100644 index 00000000..19339e68 --- /dev/null +++ b/frontend/src/components/EditorLayout/MobileStackDetail.tsx @@ -0,0 +1,180 @@ +import { useState } from 'react'; +import { ChevronLeft } from 'lucide-react'; +import { cn } from '@/lib/utils'; +import ErrorBoundary from '../ErrorBoundary'; +import StackAnatomyPanel from '../StackAnatomyPanel'; +import { StackIdentityHeader, ContainersHealth, StackLogsSection } from './editor-view-blocks'; +import type { EditorViewProps } from './EditorView'; + +const SEGMENTS = [ + { id: 'health', label: 'Health' }, + { id: 'logs', label: 'Logs' }, + { id: 'compose', label: 'Compose' }, +] as const; + +type Segment = (typeof SEGMENTS)[number]['id']; + +// Full-screen stack detail for the mobile shell (below md). The desktop +// two-pane grid does not fit a phone, so the same identity header, container +// health, logs, and anatomy are reorganized into a tracked-mono segmented +// control. Logs is the default segment (first-read, without copying Dockge's +// layout). Compose is read-only on mobile: full file editing stays on desktop. +export function MobileStackDetail(props: EditorViewProps) { + const { + stackName, + activeNode, + containers, + containerStats, + containerStatsError, + content, + envContent, + selectedEnvFile, + gitSourcePendingMap, + notifications, + copiedDigest, + loadingAction, + stackMisconfigScanning, + can, + isAdmin, + trivy, + backupInfo, + logsMode, + copiedDigestTimerRef, + deployStack, + restartStack, + stopStack, + updateStack, + rollbackStack, + scanStackConfig, + openLogViewer, + openBashModal, + serviceAction, + setLogsMode, + setGitSourceOpen, + setCopiedDigest, + requestDeleteStack, + onMobileBack, + } = props; + + const [segment, setSegment] = useState('logs'); + + const safeContainers = containers || []; + const isRunning = safeContainers.some(c => c.State === 'running'); + const canEditStack = can('stack:edit', 'stack', stackName); + + return ( + +
+ {/* Detail header: back to list + identity + action bar */} +
+ + +
+ + {/* Segmented control: Health · Logs · Compose */} +
+
+ {SEGMENTS.map(seg => { + const on = seg.id === segment; + return ( + + ); + })} +
+
+ + {/* Active segment */} +
+ {segment === 'health' && ( +
+ +
+ )} + {segment === 'logs' && ( + + )} + {segment === 'compose' && ( +
+
+ {}} + onOpenGitSource={() => setGitSourceOpen(true)} + onApplyUpdate={() => { void updateStack(); }} + applying={loadingAction === 'update'} + canEdit={false} + notifications={notifications} + /> +
+ {canEditStack && ( +
+ Editing compose is available on a larger screen. Open this stack on desktop to edit the file. +
+ )} +
+ )} +
+
+ + ); +} diff --git a/frontend/src/components/EditorLayout/ShellOverlays.tsx b/frontend/src/components/EditorLayout/ShellOverlays.tsx index 4fc5bd05..f6c5fa4b 100644 --- a/frontend/src/components/EditorLayout/ShellOverlays.tsx +++ b/frontend/src/components/EditorLayout/ShellOverlays.tsx @@ -50,7 +50,7 @@ export function ShellOverlays({ }: ShellOverlaysProps) { const { deleteDialogOpen, closeDeleteDialog, stackToDelete, - pendingUnsavedLoad, + pendingUnsavedLoad, pendingLeaveAction, bashModalOpen, selectedContainer, logViewerOpen, logContainer, stackMonitor, closeStackMonitor, @@ -69,7 +69,7 @@ export function ShellOverlays({ /> diff --git a/frontend/src/components/EditorLayout/editor-view-blocks.tsx b/frontend/src/components/EditorLayout/editor-view-blocks.tsx new file mode 100644 index 00000000..18236604 --- /dev/null +++ b/frontend/src/components/EditorLayout/editor-view-blocks.tsx @@ -0,0 +1,557 @@ +// Shared building blocks for the stack detail view. Extracted from EditorView so +// the desktop two-pane layout and the mobile segmented layout render the exact +// same identity header, container health list, and logs pane from one source. +import { + RotateCw, + Play, + Square, + Terminal, + MoreVertical, + Trash2, + ScrollText, + Undo2, + Loader2, + Check, + ShieldCheck, + ArrowUpRight, + Copy, + CloudDownload, +} from 'lucide-react'; +import { Button } from '../ui/button'; +import { CardTitle } from '../ui/card'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from '../ui/dropdown-menu'; +import { Sparkline } from '../ui/sparkline'; +import { cn } from '@/lib/utils'; +import { copyToClipboard } from '@/lib/clipboard'; +import ErrorBoundary from '../ErrorBoundary'; +import TerminalComponent from '../Terminal'; +import StructuredLogViewer from '../StructuredLogViewer'; +import type { Node } from '@/context/NodeContext'; +import type { useAuth } from '@/context/AuthContext'; +import type { ContainerInfo, ContainerStatsEntry, StackAction } from './EditorView'; + +const extractUptime = (status: string | undefined): string | null => { + if (!status) return null; + const match = status.match(/^\s*Up\s+(.+?)(?:\s*\(.*\))?\s*$/i); + if (!match) return null; + return `up ${match[1].trim()}`; +}; + +const healthcheckLabel = ( + health?: 'healthy' | 'unhealthy' | 'starting' | 'none', +): string | null => { + if (!health || health === 'none') return null; + if (health === 'healthy') return 'healthcheck passing'; + if (health === 'unhealthy') return 'healthcheck failing'; + return 'healthcheck starting'; +}; + +type StackPill = { + label: string; + dotClass: string; + className: string; + pulse: boolean; +}; + +const getStackStatePill = (containers: ContainerInfo[]): StackPill | null => { + if (!containers || containers.length === 0) return null; + const running = containers.some(c => c.State === 'running'); + if (!running) { + return { + label: 'exited', + dotClass: 'bg-destructive', + className: 'border-destructive/40 bg-destructive/10 text-destructive', + pulse: false, + }; + } + const anyUnhealthy = containers.some(c => c.healthStatus === 'unhealthy'); + const anyStarting = containers.some(c => c.healthStatus === 'starting'); + const anyHealthy = containers.some(c => c.healthStatus === 'healthy'); + if (anyUnhealthy) { + return { + label: 'running · unhealthy', + dotClass: 'bg-destructive', + className: 'border-destructive/40 bg-destructive/10 text-destructive', + pulse: true, + }; + } + if (anyStarting) { + return { + label: 'running · starting', + dotClass: 'bg-warning', + className: 'border-warning/40 bg-warning/10 text-warning', + pulse: true, + }; + } + if (anyHealthy) { + return { + label: 'running · healthy', + dotClass: 'bg-success', + className: 'border-success/40 bg-success/10 text-success', + pulse: true, + }; + } + return { + label: 'running', + dotClass: 'bg-success', + className: 'border-success/40 bg-success/10 text-success', + pulse: true, + }; +}; + +export interface StackIdentityHeaderProps { + stackName: string; + activeNode: Node | null; + safeContainers: ContainerInfo[]; + isRunning: boolean; + copiedDigest: string | null; + setCopiedDigest: React.Dispatch>; + copiedDigestTimerRef: React.MutableRefObject; + can: ReturnType['can']; + isAdmin: boolean; + trivy: { available: boolean }; + backupInfo: { exists: boolean; timestamp: number | null }; + loadingAction: StackAction | null; + stackMisconfigScanning: boolean; + deployStack: (e: React.MouseEvent) => Promise; + restartStack: (e: React.MouseEvent) => Promise; + stopStack: (e: React.MouseEvent) => Promise; + updateStack: (e?: React.MouseEvent) => Promise; + rollbackStack: () => Promise; + scanStackConfig: () => Promise; + requestDeleteStack: () => void; +} + +// Breadcrumb + serif title + state pill + image ref + action bar. The action +// buttons grow to a 44px touch target below md without changing desktop. +export function StackIdentityHeader({ + stackName, + activeNode, + safeContainers, + isRunning, + copiedDigest, + setCopiedDigest, + copiedDigestTimerRef, + can, + isAdmin, + trivy, + backupInfo, + loadingAction, + stackMisconfigScanning, + deployStack, + restartStack, + stopStack, + updateStack, + rollbackStack, + scanStackConfig, + requestDeleteStack, +}: StackIdentityHeaderProps) { + return ( +
+ {/* Identity block */} +
+
+ {(activeNode?.name || 'local')} › stacks › {stackName} +
+
+ {stackName} + {(() => { + const pill = getStackStatePill(safeContainers); + if (!pill) return null; + return ( + + + ); + })()} +
+ {(() => { + const first = safeContainers[0]; + if (!first?.Image) return null; + const digest = first.ImageID ? first.ImageID.replace(/^sha256:/, '').slice(0, 12) : ''; + return ( +
+ image · {first.Image} + {digest && first.ImageID && ( + <> + · + digest {digest} + + + )} +
+ ); + })()} +
+ {/* Action Bar: deploy and delete affordances render against their own + backend permissions so a delete-only or deploy-only persona sees + exactly what they can act on. */} + {(() => { + const canDeploy = can('stack:deploy', 'stack', stackName); + const canDelete = can('stack:delete', 'stack', stackName); + const canRollback = canDeploy && backupInfo.exists; + const canScan = trivy.available && isAdmin; + const hasOverflowExtras = canRollback || canScan; + const hasOverflow = hasOverflowExtras || canDelete; + if (!canDeploy && !hasOverflow) return null; + return ( +
+ {canDeploy && ( + <> + {isRunning ? ( + + ) : ( + + )} + {isRunning && ( + + )} + + + )} + {hasOverflow && ( + + + + + + {canRollback && ( + + +
+ {loadingAction === 'rollback' ? 'Rolling back...' : 'Rollback'} + {backupInfo.timestamp && ( + {new Date(backupInfo.timestamp).toLocaleString()} + )} +
+ + )} + {canScan && ( + + {stackMisconfigScanning ? ( + + ) : ( + + )} + {stackMisconfigScanning ? 'Scanning...' : 'Scan config'} + + )} + {hasOverflowExtras && canDelete && } + {canDelete && ( + + + {loadingAction === 'delete' ? 'Deleting...' : 'Delete'} + + )} + + + )} +
+ ); + })()} +
+ ); +} + +export interface ContainersHealthProps { + safeContainers: ContainerInfo[]; + containerStats: Record; + containerStatsError: string | null; + isAdmin: boolean; + activeNode: Node | null; + openLogViewer: (containerId: string, containerName: string) => void; + openBashModal: (containerId: string, containerName: string) => void; + serviceAction: (action: 'start' | 'stop' | 'restart', serviceName: string) => Promise; +} + +// Per-container health strip: status badge, uptime, ports, and CPU/Mem/Net +// sparklines. Row action buttons grow to a 44px touch target below md. +export function ContainersHealth({ + safeContainers, + containerStats, + containerStatsError, + isAdmin, + activeNode, + openLogViewer, + openBashModal, + serviceAction, +}: ContainersHealthProps) { + return ( +
+
+

CONTAINERS

+ {containerStatsError && safeContainers.length > 0 && ( + + Stats unavailable + + )} +
+ {safeContainers.length === 0 ? ( +
No containers running for this stack.
+ ) : ( +
+ {safeContainers.map(container => { + let mainPort: number | undefined; + let mainPortPrivate: number | undefined; + let mainPortProto: string | undefined; + if (container.Ports && container.Ports.length > 0) { + const WEB_UI_PORTS = [32400, 8989, 7878, 9696, 5055, 8080, 80, 443, 3000, 9000]; + const IGNORE_PORTS = [1900, 53, 22]; + let match = container.Ports.find(p => WEB_UI_PORTS.includes(p.PrivatePort)); + if (!match) match = container.Ports.find(p => WEB_UI_PORTS.includes(p.PublicPort)); + if (!match) match = container.Ports.find(p => !IGNORE_PORTS.includes(p.PrivatePort) && !IGNORE_PORTS.includes(p.PublicPort)); + const chosen = match || container.Ports[0]; + mainPort = chosen.PublicPort; + mainPortPrivate = chosen.PrivatePort; + mainPortProto = 'tcp'; + } + + const containerName = container?.Names?.[0]?.replace(/^\//, '') || container?.Id?.slice(0, 12) || 'container'; + const isActive = container.State === 'running' || container.State === 'paused'; + const health = container.healthStatus; + const uptime = isActive ? extractUptime(container.Status) : null; + const hcLabel = healthcheckLabel(health); + const stats = containerStats[container?.Id]; + const history = stats?.history; + + const badgeClass = health === 'unhealthy' || !isActive + ? 'bg-destructive text-destructive-foreground' + : health === 'starting' + ? 'bg-warning text-warning-foreground' + : 'bg-success text-success-foreground'; + const badgeGlyph = health === 'unhealthy' || !isActive ? '✗' : health === 'starting' ? '…' : '✓'; + const sparkStroke = health === 'unhealthy' ? 'var(--destructive)' : health === 'starting' ? 'var(--warning)' : 'var(--chart-1)'; + + return ( +
+
+
+
+ {badgeGlyph} +
+
+
{containerName}
+
+ {uptime ? {uptime} : {(container.State || 'unknown').toLowerCase()}} + {hcLabel ? <>·{hcLabel} : null} + {mainPort && mainPortPrivate ? ( + <> + · + {mainPort} → {mainPortPrivate}/{mainPortProto} + + + ) : null} +
+
+
+
+ + {isAdmin && ( + + )} + {container.Service && ( + + + + + + {isActive ? ( + <> + serviceAction('restart', container.Service!)}> + Restart service + + serviceAction('stop', container.Service!)}> + Stop service + + + ) : ( + serviceAction('start', container.Service!)}> + Start service + + )} + + + )} +
+
+ {isActive ? ( +
+
+
+ cpu + {stats?.cpu ?? '-'} +
+
+ +
+
+
+
+ mem + {stats?.ram ?? '-'} +
+
+ +
+
+
+
+ net i/o + {stats?.net ?? '-'} +
+
+ +
+
+
+ ) : null} +
+ ); + })} +
+ )} +
+ ); +} + +export interface StackLogsSectionProps { + stackName: string; + logsMode: 'structured' | 'raw'; + setLogsMode: (mode: 'structured' | 'raw') => void; +} + +// Logs pane: structured / raw-terminal toggle + the live viewer. +export function StackLogsSection({ stackName, logsMode, setLogsMode }: StackLogsSectionProps) { + return ( +
+
+

Logs

+
+ + +
+
+ {logsMode === 'structured' ? ( + + + + ) : ( +
+
+ + + +
+
+ )} +
+ ); +} diff --git a/frontend/src/components/EditorLayout/hooks/useOverlayState.ts b/frontend/src/components/EditorLayout/hooks/useOverlayState.ts index 17f28ece..e152b295 100644 --- a/frontend/src/components/EditorLayout/hooks/useOverlayState.ts +++ b/frontend/src/components/EditorLayout/hooks/useOverlayState.ts @@ -36,6 +36,11 @@ export function useOverlayState() { const [pendingUnsavedLoad, setPendingUnsavedLoad] = useState(null); const [pendingUnsavedNode, setPendingUnsavedNode] = useState(null); + // A deferred "leave the dirty editor" navigation (back to the list, Home, a + // bottom-tab / hamburger destination). Wrapped in an object so the state + // setter is not mistaken for a functional update. Runs after the user + // confirms the unsaved-changes dialog. See useStackActions.attemptLeaveEditor. + const [pendingLeaveAction, setPendingLeaveAction] = useState<{ run: () => void } | null>(null); const [bashModalOpen, setBashModalOpen] = useState(false); const [selectedContainer, setSelectedContainer] = useState(null); @@ -93,6 +98,7 @@ export function useOverlayState() { deleteDialogOpen, stackToDelete, openDeleteDialog, closeDeleteDialog, pendingUnsavedLoad, setPendingUnsavedLoad, pendingUnsavedNode, setPendingUnsavedNode, + pendingLeaveAction, setPendingLeaveAction, bashModalOpen, selectedContainer, openBashModal, closeBashModal, logViewerOpen, logContainer, openLogViewer, closeLogViewer, stackMonitor, openAlertSheet, openAutoHeal, closeStackMonitor, diff --git a/frontend/src/components/EditorLayout/hooks/useStackActions.test.ts b/frontend/src/components/EditorLayout/hooks/useStackActions.test.ts index e06beba6..31b5f201 100644 --- a/frontend/src/components/EditorLayout/hooks/useStackActions.test.ts +++ b/frontend/src/components/EditorLayout/hooks/useStackActions.test.ts @@ -70,8 +70,10 @@ function makeOverlay(over: Partial = {}): OverlayState { return { setPendingUnsavedLoad: vi.fn(), setPendingUnsavedNode: vi.fn(), + setPendingLeaveAction: vi.fn(), pendingUnsavedLoad: null, pendingUnsavedNode: null, + pendingLeaveAction: null, policyBlock: null, setPolicyBlock: vi.fn(), setPolicyBypassing: vi.fn(), @@ -300,3 +302,52 @@ describe('useStackActions.bypassPolicyAndRetry', () => { expect(apiFetch).not.toHaveBeenCalled(); }); }); + +describe('useStackActions.attemptLeaveEditor (mobile back / nav guard)', () => { + beforeEach(() => { + vi.mocked(apiFetch).mockReset(); + }); + + it('stashes the navigation when the editor is dirty instead of running it', () => { + const perform = vi.fn(); + // Default fixture: content !== originalContent and a stack is selected → dirty. + const { result, overlayState } = setup(); + result.current.attemptLeaveEditor(perform); + expect(perform).not.toHaveBeenCalled(); + expect(overlayState.setPendingLeaveAction).toHaveBeenCalledWith({ run: perform }); + }); + + it('runs the navigation immediately when the editor is clean', () => { + const perform = vi.fn(); + const { result, overlayState } = setup({ + editorState: { content: 'same', originalContent: 'same' }, + }); + result.current.attemptLeaveEditor(perform); + expect(perform).toHaveBeenCalledTimes(1); + expect(overlayState.setPendingLeaveAction).not.toHaveBeenCalled(); + }); + + it('runs the stashed leave action and clears it on discardAndLoadPending', () => { + const run = vi.fn(); + const { result, overlayState, editorState } = setup({ overlay: { pendingLeaveAction: { run } } }); + result.current.discardAndLoadPending(); + expect(run).toHaveBeenCalledTimes(1); + expect(overlayState.setPendingLeaveAction).toHaveBeenCalledWith(null); + expect(editorState.setContent).toHaveBeenCalledWith(editorState.originalContent); + }); + + it('gives a stashed leave action precedence over a coexisting pending load', () => { + const run = vi.fn(); + const { result } = setup({ overlay: { pendingLeaveAction: { run }, pendingUnsavedLoad: 'other.yml' } }); + result.current.discardAndLoadPending(); + expect(run).toHaveBeenCalledTimes(1); + // The leave branch returns before the load branch, so no stack fetch fires. + expect(apiFetch).not.toHaveBeenCalled(); + }); + + it('clears a stashed leave action on cancel', () => { + const { result, overlayState } = setup({ overlay: { pendingLeaveAction: { run: vi.fn() } } }); + result.current.cancelPendingUnsavedLoad(); + expect(overlayState.setPendingLeaveAction).toHaveBeenCalledWith(null); + }); +}); diff --git a/frontend/src/components/EditorLayout/hooks/useStackActions.ts b/frontend/src/components/EditorLayout/hooks/useStackActions.ts index b36625f2..cee5214c 100644 --- a/frontend/src/components/EditorLayout/hooks/useStackActions.ts +++ b/frontend/src/components/EditorLayout/hooks/useStackActions.ts @@ -341,6 +341,10 @@ export function useStackActions(options: UseStackActionsOptions) { } catch (error) { if (isAbortError(error) || signal.aborted) return; 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(''); editorState.setOriginalContent(''); @@ -890,18 +894,40 @@ export function useStackActions(options: UseStackActionsOptions) { } }; + // Guard a navigation that would leave (and discard) a dirty editor: back to + // the list, Home, or any bottom-tab / hamburger / command-palette + // 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) => { + if (stackListState.selectedFile && hasUnsavedChanges()) { + overlayState.setPendingLeaveAction({ run: perform }); + return; + } + perform(); + }; + const cancelPendingUnsavedLoad = () => { overlayState.setPendingUnsavedLoad(null); overlayState.setPendingUnsavedNode(null); + overlayState.setPendingLeaveAction(null); }; const discardAndLoadPending = () => { + const leave = overlayState.pendingLeaveAction; const target = overlayState.pendingUnsavedLoad; const targetNode = overlayState.pendingUnsavedNode; editorState.setContent(editorState.originalContent); editorState.setEnvContent(editorState.originalEnvContent); overlayState.setPendingUnsavedLoad(null); overlayState.setPendingUnsavedNode(null); + overlayState.setPendingLeaveAction(null); + // A stashed "leave editor" navigation takes precedence; it already knows + // how to tear down editor state (resetEditorState) and move the surface. + if (leave) { + leave.run(); + return; + } if (target === NODE_SWITCH_PENDING_TOKEN) { if (targetNode) setActiveNode(targetNode); return; @@ -1060,6 +1086,7 @@ export function useStackActions(options: UseStackActionsOptions) { serviceAction, updateStack, deleteStack, + attemptLeaveEditor, cancelPendingUnsavedLoad, discardAndLoadPending, requestDeleteStack, diff --git a/frontend/src/components/EditorLayout/mobile-surface.test.ts b/frontend/src/components/EditorLayout/mobile-surface.test.ts new file mode 100644 index 00000000..7f29528a --- /dev/null +++ b/frontend/src/components/EditorLayout/mobile-surface.test.ts @@ -0,0 +1,44 @@ +import { describe, it, expect } from 'vitest'; +import { deriveMobileSurface, type MobileSurfaceInput } from './mobile-surface'; + +const base: MobileSurfaceInput = { + activeView: 'dashboard', + selectedFile: null, + mobileView: 'list', + pendingDetailStack: null, +}; + +describe('deriveMobileSurface', () => { + it('shows the list when mobileView is list and no detail is open', () => { + expect(deriveMobileSurface(base)).toEqual({ surface: 'list', detailReady: false, detailOpen: false }); + }); + + it('shows content when mobileView is content', () => { + expect(deriveMobileSurface({ ...base, mobileView: 'content', activeView: 'fleet' }).surface).toBe('content'); + }); + + it('shows a ready detail when a stack is selected in editor view', () => { + expect(deriveMobileSurface({ ...base, activeView: 'editor', selectedFile: 'web.yml' })).toEqual({ + surface: 'detail', + detailReady: true, + detailOpen: true, + }); + }); + + it('shows the detail optimistically while a tap is pending and not yet ready', () => { + const r = deriveMobileSurface({ ...base, pendingDetailStack: 'web.yml' }); + expect(r.surface).toBe('detail'); + expect(r.detailOpen).toBe(true); + expect(r.detailReady).toBe(false); + }); + + it('falls back to the list once a pending tap clears without a selection (load-failed path)', () => { + expect(deriveMobileSurface({ ...base, pendingDetailStack: null, selectedFile: null }).surface).toBe('list'); + }); + + it('gives the detail precedence over a content view', () => { + expect( + deriveMobileSurface({ ...base, mobileView: 'content', activeView: 'editor', selectedFile: 'web.yml' }).surface, + ).toBe('detail'); + }); +}); diff --git a/frontend/src/components/EditorLayout/mobile-surface.ts b/frontend/src/components/EditorLayout/mobile-surface.ts new file mode 100644 index 00000000..df5693fa --- /dev/null +++ b/frontend/src/components/EditorLayout/mobile-surface.ts @@ -0,0 +1,44 @@ +import type { ActiveView } from './hooks/useViewNavigationState'; + +// The top-level mobile surface when no stack detail is open. Kept distinct from +// `activeView` so `dashboard` still maps to HomeDashboard rather than being +// overloaded to mean "the stack list". +export type MobileView = 'list' | 'content'; + +// The single surface the mobile shell renders at a time. +export type MobileSurface = 'list' | 'content' | 'detail'; + +export interface MobileSurfaceInput { + activeView: ActiveView; + selectedFile: string | null; + mobileView: MobileView; + /** Set the instant a row is tapped, before loadFile resolves selectedFile. */ + pendingDetailStack: string | null; +} + +export interface MobileSurfaceState { + surface: MobileSurface; + /** The real EditorView can mount (a stack is selected and editor is active). */ + detailReady: boolean; + /** Detail surface should show, including the optimistic pre-fetch window. */ + detailOpen: boolean; +} + +/** + * Pure derivation of which mobile surface to show. Extracted so the state + * machine can be unit-tested independently of the context-heavy EditorLayout. + */ +export function deriveMobileSurface({ + activeView, + selectedFile, + mobileView, + pendingDetailStack, +}: MobileSurfaceInput): MobileSurfaceState { + const detailReady = activeView === 'editor' && !!selectedFile; + const detailOpen = detailReady || !!pendingDetailStack; + let surface: MobileSurface; + if (detailOpen) surface = 'detail'; + else if (mobileView === 'list') surface = 'list'; + else surface = 'content'; + return { surface, detailReady, detailOpen }; +} diff --git a/frontend/src/components/LogViewer.tsx b/frontend/src/components/LogViewer.tsx index bdc9f73a..d5f61e85 100644 --- a/frontend/src/components/LogViewer.tsx +++ b/frontend/src/components/LogViewer.tsx @@ -56,7 +56,7 @@ export function LogViewer({ containerId, containerName, isOpen, onClose }: LogVi }, [isOpen, containerId]); return ( - !open && onClose()} className="max-w-4xl h-[80vh] flex flex-col"> + !open && onClose()} mobileFullScreen className="max-w-4xl h-[80vh] flex flex-col"> > = {}) { + const props: React.ComponentProps = { + navItems: allItems, + activeView: 'dashboard', + mobileView: 'list', + detailOpen: false, + onStacks: vi.fn(), + onNavigate: vi.fn(), + onSettings: vi.fn(), + ...over, + }; + render(); + return props; +} + +describe('MobileTabBar', () => { + it('always renders Stacks and Settings', () => { + renderBar(); + expect(screen.getByRole('button', { name: 'Stacks' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument(); + }); + + it('renders Fleet and Schedules only when present in the gated nav items', () => { + renderBar({ navItems: [{ value: 'dashboard', label: 'Home', icon: Home }] }); + expect(screen.queryByRole('button', { name: 'Fleet' })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Schedules' })).not.toBeInTheDocument(); + // Stacks + Settings remain. + expect(screen.getByRole('button', { name: 'Stacks' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument(); + }); + + it('routes each tab to its handler', () => { + const props = renderBar(); + fireEvent.click(screen.getByRole('button', { name: 'Stacks' })); + expect(props.onStacks).toHaveBeenCalledTimes(1); + fireEvent.click(screen.getByRole('button', { name: 'Fleet' })); + expect(props.onNavigate).toHaveBeenCalledWith('fleet'); + fireEvent.click(screen.getByRole('button', { name: 'Schedules' })); + expect(props.onNavigate).toHaveBeenCalledWith('scheduled-ops'); + fireEvent.click(screen.getByRole('button', { name: 'Settings' })); + expect(props.onSettings).toHaveBeenCalledTimes(1); + }); + + it('marks Stacks as current while a stack detail is open', () => { + renderBar({ detailOpen: true, mobileView: 'content', activeView: 'fleet' }); + expect(screen.getByRole('button', { name: 'Stacks' })).toHaveAttribute('aria-current', 'page'); + expect(screen.getByRole('button', { name: 'Fleet' })).not.toHaveAttribute('aria-current'); + }); + + it('marks the active content view as current', () => { + renderBar({ mobileView: 'content', activeView: 'fleet' }); + expect(screen.getByRole('button', { name: 'Fleet' })).toHaveAttribute('aria-current', 'page'); + expect(screen.getByRole('button', { name: 'Stacks' })).not.toHaveAttribute('aria-current'); + }); +}); diff --git a/frontend/src/components/MobileTabBar.tsx b/frontend/src/components/MobileTabBar.tsx new file mode 100644 index 00000000..143567b4 --- /dev/null +++ b/frontend/src/components/MobileTabBar.tsx @@ -0,0 +1,106 @@ +import { Layers, Radar, Clock, Settings as SettingsIcon } from 'lucide-react'; +import type { LucideIcon } from 'lucide-react'; +import { cn } from '@/lib/utils'; +import type { NavItem, ActiveView } from './EditorLayout/hooks/useViewNavigationState'; +import type { MobileView } from './EditorLayout/mobile-surface'; + +type TabId = 'stacks' | 'fleet' | 'schedules' | 'settings'; + +interface MobileTabBarProps { + /** The already-gated nav items (admin / remote / paid filtering applied). */ + navItems: NavItem[]; + activeView: ActiveView; + /** Which top-level mobile surface is showing when no stack detail is open. */ + mobileView: MobileView; + /** True while a stack detail is open (keeps the Stacks tab marked current). */ + detailOpen: boolean; + onStacks: () => void; + onNavigate: (view: ActiveView) => void; + onSettings: () => void; +} + +interface Tab { + id: TabId; + label: string; + icon: LucideIcon; + view?: ActiveView; +} + +/** + * Bottom tab bar for the mobile shell (hidden at md+). The four primary + * destinations; everything else stays reachable through the TopBar hamburger. + * Fleet and Schedules only appear when present in the gated `navItems`, so the + * bar never exposes a flow the desktop nav would hide (admin-only Schedules, + * hub-only views on a remote node). + */ +export function MobileTabBar({ + navItems, + activeView, + mobileView, + detailOpen, + onStacks, + onNavigate, + onSettings, +}: MobileTabBarProps) { + const has = (value: ActiveView) => navItems.some(i => i.value === value); + + const tabs: Tab[] = [ + { id: 'stacks', label: 'Stacks', icon: Layers }, + ...(has('fleet') ? [{ id: 'fleet' as const, label: 'Fleet', icon: Radar, view: 'fleet' as const }] : []), + ...(has('scheduled-ops') + ? [{ id: 'schedules' as const, label: 'Schedules', icon: Clock, view: 'scheduled-ops' as const }] + : []), + { id: 'settings', label: 'Settings', icon: SettingsIcon }, + ]; + + const currentTab = (): TabId | null => { + if (detailOpen || mobileView === 'list') return 'stacks'; + if (activeView === 'fleet') return 'fleet'; + if (activeView === 'scheduled-ops') return 'schedules'; + if (activeView === 'settings') return 'settings'; + return null; + }; + const current = currentTab(); + + const select = (tab: Tab) => { + if (tab.id === 'stacks') onStacks(); + else if (tab.id === 'settings') onSettings(); + else if (tab.view) onNavigate(tab.view); + }; + + return ( + + ); +} diff --git a/frontend/src/components/sidebar/SidebarFilterChips.tsx b/frontend/src/components/sidebar/SidebarFilterChips.tsx index 16f47e6b..735f9484 100644 --- a/frontend/src/components/sidebar/SidebarFilterChips.tsx +++ b/frontend/src/components/sidebar/SidebarFilterChips.tsx @@ -42,7 +42,9 @@ export function SidebarFilterChips({ active, counts, onChange, visible, onToggle type="button" onClick={() => onChange(id)} className={cn( - 'flex items-center gap-1 min-w-0 overflow-hidden rounded px-1.5 py-0.5 whitespace-nowrap', + 'flex items-center justify-center gap-1 min-w-0 overflow-hidden rounded px-1.5 py-0.5 whitespace-nowrap', + // 44px tap target on touch viewports; desktop density unchanged. + 'max-md:min-h-11 max-md:py-2', 'font-mono text-[10px] tracking-[0.08em] uppercase leading-none', 'border transition-colors duration-150', isActive @@ -70,7 +72,7 @@ export function SidebarFilterChips({ active, counts, onChange, visible, onToggle