diff --git a/frontend/src/components/EditorLayout.tsx b/frontend/src/components/EditorLayout.tsx
index a0263289..1624d8b8 100644
--- a/frontend/src/components/EditorLayout.tsx
+++ b/frontend/src/components/EditorLayout.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
import { motion } from 'motion/react';
type Theme = 'light' | 'dark' | 'auto';
@@ -14,9 +14,11 @@ import { Input } from './ui/input';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogTrigger } from './ui/dialog';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from './ui/alert-dialog';
import { Tabs, TabsList, TabsTrigger } from './ui/tabs';
+import { Highlight, HighlightItem } from './animate-ui/primitives/effects/highlight';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Badge } from './ui/badge';
-import { Plus, Trash2, Play, Square, Save, Terminal, RotateCw, CloudDownload, Pencil, X, Home, ExternalLink, Bell, MoreVertical, BellRing, Rocket, HardDrive, ScrollText, Activity, Server, Radar, Undo2, RefreshCw, Download, Clock } from 'lucide-react';
+import { Plus, Trash2, Play, Square, Save, Terminal, RotateCw, CloudDownload, Pencil, X, Home, ExternalLink, Bell, MoreVertical, BellRing, Rocket, HardDrive, ScrollText, Activity, Server, Radar, Undo2, RefreshCw, Download, Clock, Menu } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
import { UserProfileDropdown } from './UserProfileDropdown';
import { apiFetch, fetchForNode } from '@/lib/api';
import { toast } from 'sonner';
@@ -30,6 +32,8 @@ import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from './ui/dropdown-menu';
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from './ui/context-menu';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Sheet, SheetContent, SheetTrigger } from './ui/sheet';
+import { cn } from '@/lib/utils';
import { SettingsModal } from './SettingsModal';
import { StackAlertSheet } from './StackAlertSheet';
import { AppStoreView } from './AppStoreView';
@@ -143,11 +147,65 @@ export default function EditorLayout() {
const [alertSheetOpen, setAlertSheetOpen] = useState(false);
const [alertSheetStack, setAlertSheetStack] = useState('');
+ // Mobile navigation sheet state
+ const [mobileNavOpen, setMobileNavOpen] = useState(false);
+
const openAlertSheet = (stackName: string) => {
setAlertSheetStack(stackName);
setAlertSheetOpen(true);
};
+ // Navigation items (permission-aware, data-driven)
+ const navItems = useMemo(() => {
+ const items: Array<{ value: string; label: string; icon: LucideIcon }> = [
+ { value: 'dashboard', label: 'Home', icon: Home },
+ { value: 'fleet', label: 'Fleet', icon: Radar },
+ ];
+ if (isAdmin) items.push({ value: 'host-console', label: 'Console', icon: Terminal });
+ items.push(
+ { value: 'resources', label: 'Resources', icon: HardDrive },
+ { value: 'templates', label: 'App Store', icon: CloudDownload },
+ { value: 'global-observability', label: 'Logs', icon: Activity },
+ );
+ if (isPro && license?.variant === 'team' && isAdmin) {
+ items.push(
+ { value: 'audit-log', label: 'Audit', icon: ScrollText },
+ { value: 'scheduled-ops', label: 'Schedules', icon: Clock },
+ );
+ }
+ return items;
+ }, [isAdmin, isPro, license?.variant]);
+
+ // Only highlight a tab if activeView matches a nav item
+ const navTabValue = navItems.some(i => i.value === activeView) ? activeView : undefined;
+
+ // Reset editor state (extracted from Home button onClick)
+ const resetEditorState = () => {
+ setSelectedFile(null);
+ setContent('');
+ setOriginalContent('');
+ setEnvContent('');
+ setOriginalEnvContent('');
+ setEnvFiles([]);
+ setSelectedEnvFile('');
+ setEnvExists(false);
+ setContainers([]);
+ setIsEditing(false);
+ };
+
+ // Navigation handler with toggle support
+ const handleNavigate = (value: string) => {
+ if (value === activeView) {
+ // Toggle off: return to editor if a file is open, else dashboard
+ setActiveView(selectedFile ? 'editor' : 'dashboard');
+ } else if (value === 'dashboard') {
+ resetEditorState();
+ setActiveView('dashboard');
+ } else {
+ setActiveView(value as typeof activeView);
+ }
+ };
+
// Listen for system dark mode changes (for 'auto' theme)
useEffect(() => {
const mq = window.matchMedia('(prefers-color-scheme: dark)');
@@ -1030,9 +1088,9 @@ export default function EditorLayout() {
{/* Left Sidebar (Stacks) */}
+
@@ -1251,9 +1309,9 @@ export default function EditorLayout() {
{/* Main Content Area */}
- 
+
Sencho
- {/* Top Header Bar */}
-
- {/* Node Context Pill - visible only when a remote node is active */}
+ {/* Top Header Bar — Three-zone layout: Node Pill | Navigation | Utilities */}
+
{/* Main Workspace */}
+ {/* LEFT ZONE: Node Context Pill */}
+
+
+
+
+
+
+
{activeNode?.type === 'remote' ? (
-
@@ -1267,117 +1325,45 @@ export default function EditorLayout() {
)}
- {/* Home Button */}
-
- {/* Fleet Overview Toggle */}
-
- {/* Console Toggle */}
- {isAdmin && (
-
- )}
- {/* Resources Toggle */}
-
- {/* App Store Toggle */}
-
- {/* Global Observability Toggle */}
-
- {/* Audit Log Toggle (Team Pro + Admin only) */}
- {isPro && license?.variant === 'team' && isAdmin && (
-
- )}
- {/* Scheduled Operations Toggle (Team Pro + Admin only) */}
- {isPro && license?.variant === 'team' && isAdmin && (
-
- )}
+ {/* CENTER ZONE: Navigation Group (hidden on mobile) */}
+
{/* end right-side buttons */}
+
+ {/* Mobile Navigation Trigger */}
+
+
+
+
+
+ {/* Spacer for mobile (when center nav is hidden) */}
+
+
+ {/* RIGHT ZONE: Utilities */}
+
+ {navItems.map(({ value, label, icon: Icon }) => (
+
+
+
+ ))}
+
+
{/* Notifications Popover */}
-
{notif.message}
- - {/* Delete individual notification button */}
+
+
+ Navigation
+