'use client' import Image from 'next/image' import { useState, useEffect } from 'react' import { useTranslations } from 'next-intl' import { useMissionControl } from '@/store' import { useNavigateToPanel, usePrefetchPanel } from '@/lib/navigation' import { useRouter } from 'next/navigation' import { Button } from '@/components/ui/button' import { APP_VERSION } from '@/lib/version' import { getPluginNavItems } from '@/lib/plugins' interface NavItem { id: string label: string icon: React.ReactNode priority: boolean // Show in mobile bottom bar essential?: boolean // Visible in Essential interface mode (default false) children?: NavItem[] // Nested sub-items (expandable parent) } interface NavGroup { id: string label?: string // undefined = no header (core group) items: NavItem[] } const navGroups: NavGroup[] = [ { id: 'core', items: [ { id: 'overview', label: 'Overview', icon: , priority: true, essential: true }, { id: 'agents', label: 'Agents', icon: , priority: true, essential: true }, { id: 'tasks', label: 'Tasks', icon: , priority: true, essential: true }, { id: 'chat', label: 'Chat', icon: , priority: false, essential: true }, { id: 'channels', label: 'Channels', icon: , priority: false }, { id: 'skills', label: 'Skills', icon: , priority: false }, { id: 'memory', label: 'Memory', icon: , priority: false }, ], }, { id: 'observe', label: 'OBSERVE', items: [ { id: 'activity', label: 'Activity', icon: , priority: true, essential: true }, { id: 'logs', label: 'Logs', icon: , priority: false, essential: true }, { id: 'cost-tracker', label: 'Cost Tracker', icon: , priority: false }, { id: 'nodes', label: 'Nodes', icon: , priority: false }, { id: 'exec-approvals', label: 'Approvals', icon: , priority: false }, { id: 'office', label: 'Office', icon: , priority: false }, { id: 'monitor', label: 'Monitor', icon: , priority: false }, ], }, { id: 'automate', label: 'AUTOMATE', items: [ { id: 'cron', label: 'Cron', icon: , priority: false }, { id: 'webhooks', label: 'Webhooks', icon: , priority: false }, { id: 'alerts', label: 'Alerts', icon: , priority: false }, { id: 'github', label: 'GitHub', icon: , priority: false }, ], }, { id: 'admin', label: 'ADMIN', items: [ { id: 'security', label: 'Security', icon: , priority: false }, { id: 'users', label: 'Users', icon: , priority: false }, { id: 'audit', label: 'Audit', icon: , priority: false }, { id: 'gateway-parent', label: 'Gateway', icon: , priority: false, children: [ { id: 'gateways', label: 'Gateways', icon: , priority: false }, { id: 'gateway-config', label: 'Config', icon: , priority: false }, ], }, { id: 'integrations', label: 'Integrations', icon: , priority: false }, { id: 'debug', label: 'Debug', icon: , priority: false }, { id: 'settings', label: 'Settings', icon: , priority: false, essential: true }, ], }, ] // Map nav item IDs to translation keys in the 'nav' namespace const navItemTranslationKeys: Record = { overview: 'overview', agents: 'agents', tasks: 'tasks', chat: 'chat', channels: 'channels', skills: 'skills', memory: 'memory', activity: 'activity', logs: 'logs', 'cost-tracker': 'costTracker', nodes: 'nodes', 'exec-approvals': 'approvals', office: 'office', cron: 'cron', webhooks: 'webhooks', alerts: 'alerts', github: 'github', security: 'security', users: 'users', audit: 'audit', 'gateway-parent': 'gateway', gateways: 'gateways', 'gateway-config': 'config', integrations: 'integrations', debug: 'debug', settings: 'settings', } // Map group IDs to translation keys in the 'nav.group' namespace const groupTranslationKeys: Record = { observe: 'observe', automate: 'automate', admin: 'admin', } const gatewayOnlyPanels = new Set([ 'gateways', 'gateway-config', 'channels', 'nodes', 'exec-approvals', ...getPluginNavItems().filter(pi => pi.gatewayOnly).map(pi => pi.id), ]) const adminOnlyPanels = new Set([]) export function NavRail() { const { activeTab, connection, dashboardMode, currentUser, activeTenant, tenants, osUsers, setActiveTenant, fetchTenants, fetchOsUsers, activeProject, projects, setActiveProject, fetchProjects, sidebarExpanded, collapsedGroups, toggleSidebar, toggleGroup, defaultOrgName, interfaceMode, setInterfaceMode } = useMissionControl() const navigateToPanel = useNavigateToPanel() const prefetchPanel = usePrefetchPanel() const tn = useTranslations('nav') const tc = useTranslations('common') // Translate a nav item label using the translation key map function tLabel(id: string, fallback: string): string { const key = navItemTranslationKeys[id] return key ? tn(key) : fallback } function tGroup(id: string, fallback?: string): string | undefined { const key = groupTranslationKeys[id] return key ? tn(`group.${key}`) : fallback } const isLocal = dashboardMode === 'local' const isAdmin = currentUser?.role === 'admin' const [expandedParents, setExpandedParents] = useState>(new Set()) function toggleParent(id: string) { setExpandedParents(prev => { const next = new Set(prev) if (next.has(id)) next.delete(id) else next.add(id) return next }) } // Fetch tenants, OS users, and projects for admin users useEffect(() => { if (isAdmin) { fetchTenants() fetchOsUsers() fetchProjects() } }, [isAdmin, fetchTenants, fetchOsUsers, fetchProjects]) // Re-fetch projects and clear active project when tenant changes useEffect(() => { if (isAdmin) { setActiveProject(null) fetchProjects() } // eslint-disable-next-line react-hooks/exhaustive-deps }, [activeTenant?.id]) // In local mode, hide gateway-only panels. Non-admin users don't see admin-only panels. // In essential mode, hide non-essential panels. const isEssential = interfaceMode === 'essential' function filterItems(items: NavItem[]): NavItem[] { return items .map(i => { if (i.children) { const filteredChildren = filterItems(i.children) if (filteredChildren.length === 0) return null return { ...i, children: filteredChildren } } if (isLocal && gatewayOnlyPanels.has(i.id)) return null if (!isAdmin && adminOnlyPanels.has(i.id)) return null if (isEssential && !i.essential) return null return i }) .filter((i): i is NavItem => i !== null) } // Translate nav item labels and merge plugin items function translateItems(items: NavItem[]): NavItem[] { return items.map(item => ({ ...item, label: tLabel(item.id, item.label), children: item.children ? translateItems(item.children) : undefined, })) } const mergedGroups = navGroups.map(g => { const pluginItems = getPluginNavItems() .filter(pi => pi.groupId === g.id) .map(pi => ({ id: pi.id, label: pi.label, icon: pi.icon ? {pi.icon} : , priority: false, } as NavItem)) const items = translateItems(pluginItems.length > 0 ? [...g.items, ...pluginItems] : g.items) return { ...g, label: tGroup(g.id, g.label), items } }) const filteredGroups = mergedGroups .map(g => ({ ...g, items: filterItems(g.items) })) .filter(g => g.items.length > 0) function flattenItems(items: NavItem[]): NavItem[] { return items.flatMap(i => i.children ? [i, ...flattenItems(i.children)] : [i]) } const filteredAllNavItems = filteredGroups.flatMap(g => flattenItems(g.items)) // Keyboard shortcut: [ to toggle sidebar useEffect(() => { function handleKey(e: KeyboardEvent) { if (e.key === '[' && !(e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || (e.target as HTMLElement)?.isContentEditable)) { e.preventDefault() toggleSidebar() } } window.addEventListener('keydown', handleKey) return () => window.removeEventListener('keydown', handleKey) }, [toggleSidebar]) return ( <> {/* Desktop: Grouped sidebar */} {/* Mobile: Bottom tab bar */} ) } function NavButton({ item, active, expanded, onClick, onPrefetch, nested }: { item: NavItem active: boolean expanded: boolean onClick: () => void onPrefetch?: () => void nested?: boolean }) { if (expanded) { return ( ) } return ( ) } function MobileBottomBar({ activeTab, navigateToPanel, groups, items }: { activeTab: string navigateToPanel: (tab: string) => void groups: NavGroup[] items: NavItem[] }) { const tn = useTranslations('nav') const [sheetOpen, setSheetOpen] = useState(false) const priorityItems = items.filter(i => i.priority) const nonPriorityIds = new Set(items.filter(i => !i.priority).map(i => i.id)) const moreIsActive = nonPriorityIds.has(activeTab) return ( <>

{priorityItems.map((item) => ( ))} {/* More button */}

{/* Bottom sheet */} setSheetOpen(false)} activeTab={activeTab} navigateToPanel={navigateToPanel} groups={groups} /> ) } function MobileBottomSheet({ open, onClose, activeTab, navigateToPanel, groups }: { open: boolean onClose: () => void activeTab: string navigateToPanel: (tab: string) => void groups: NavGroup[] }) { // Track mount state for animation const [visible, setVisible] = useState(false) useEffect(() => { if (open) { // Mount first, then animate in on next frame requestAnimationFrame(() => { requestAnimationFrame(() => setVisible(true)) }) } else { setVisible(false) } }, [open]) // Handle close with animation function handleClose() { setVisible(false) setTimeout(onClose, 200) // match transition duration } if (!open) return null return (

{/* Backdrop */}

{/* Sheet */}

{/* Drag handle */}

{/* Grouped navigation */}

{groups.map((group, groupIndex) => (

{groupIndex > 0 &&

} {/* Group header */}

{group.label || 'CORE'}

{/* 2-column grid — flatten nested children for mobile */}

{group.items.flatMap(item => item.children ? item.children : [item]).map((item) => ( ))}

))}

) } /** Org row with collapsible nested projects (only shown for the active org) */ function OrgRow({ label, initial, active, colorClass, onClick, isActiveOrg, projects, activeProject, onSwitchProject, onNewProject }: { label: string initial: string active: boolean colorClass: string onClick: () => void isActiveOrg: boolean projects: import('@/store').Project[] activeProject: import('@/store').Project | null onSwitchProject: (project: import('@/store').Project | null) => void onNewProject: () => void }) { const tcs = useTranslations('contextSwitcher') return (

{/* Nested projects for active org */} {isActiveOrg && (

{projects.map((project) => ( ))}

)}

) } function ContextSwitcher({ currentUser, isAdmin, isLocal, isConnected, tenants, osUsers, activeTenant, onSwitchTenant, projects, activeProject, onSwitchProject, expanded, defaultOrgName, navigateToPanel, fetchTenants, fetchOsUsers, interfaceMode, setInterfaceMode, activeTab }: { currentUser: import('@/store').CurrentUser | null isAdmin: boolean isLocal: boolean isConnected: boolean tenants: import('@/store').Tenant[] osUsers: import('@/store').OsUser[] activeTenant: import('@/store').Tenant | null onSwitchTenant: (tenant: import('@/store').Tenant | null) => void projects: import('@/store').Project[] activeProject: import('@/store').Project | null onSwitchProject: (project: import('@/store').Project | null) => void expanded: boolean defaultOrgName: string navigateToPanel: (panel: string) => void fetchTenants: () => Promise fetchOsUsers: () => Promise interfaceMode: 'essential' | 'full' setInterfaceMode: (mode: 'essential' | 'full') => void activeTab: string }) { const { setShowProjectManagerModal } = useMissionControl() const tcs = useTranslations('contextSwitcher') const tn = useTranslations('nav') const tc = useTranslations('common') const router = useRouter() // Build unified org list: DB tenants + unlinked OS users const linkedUsernames = new Set(tenants.map(t => t.linux_user)) const unlinkedOsUsers = osUsers.filter(u => !linkedUsernames.has(u.username) && !u.is_process_owner) const [open, setOpen] = useState(false) const [createMode, setCreateMode] = useState(false) const [createForm, setCreateForm] = useState({ username: '', display_name: '', gateway_port: '', install_openclaw: true, install_claude: false, install_codex: false }) const [creating, setCreating] = useState(false) const [createError, setCreateError] = useState(null) const userName = currentUser?.display_name || currentUser?.username || 'User' const initials = userName.split(/\s+/).map(w => w[0]).join('').toUpperCase().slice(0, 2) const tenantName = activeTenant?.display_name || defaultOrgName const projectName = activeProject?.name const contextLine = projectName ? `${tenantName} / ${projectName}` : tenantName const connectionLabel = isLocal ? tcs('localMode') : isConnected ? tcs('connected') : tcs('disconnected') const connectionDotClass = isLocal ? 'bg-void-cyan' : isConnected ? 'bg-green-500' : 'bg-red-500' return (

{/* Trigger */} {/* Popover (opens upward) */} {open && ( <>

setOpen(false)} />

{/* User info header */}

{currentUser?.avatar_url ? (

) : ( initials )}

{userName}

{currentUser?.role || 'user'} · {connectionLabel}

{/* Interface mode toggle */}

{tcs('interface')}

{/* Quick navigation */}

{/* Logout */}

{/* Organizations with nested projects (admin only, always visible) */} {isAdmin && ( <>

{tcs('organizations')}

{/* Default org */} { onSwitchTenant(null); setOpen(false) }} isActiveOrg={!activeTenant} projects={projects} activeProject={activeProject} onSwitchProject={(p) => { onSwitchProject(p); setOpen(false) }} onNewProject={() => { setShowProjectManagerModal(true); setOpen(false) }} /> {/* DB tenants */} {tenants.map((tenant) => ( { onSwitchTenant(tenant); setOpen(false) }} isActiveOrg={activeTenant?.id === tenant.id} projects={projects} activeProject={activeProject} onSwitchProject={(p) => { onSwitchProject(p); setOpen(false) }} onNewProject={() => { setShowProjectManagerModal(true); setOpen(false) }} /> ))} {/* Discovered OS users not yet linked to a tenant — shown inline as unprovisioned orgs */} {unlinkedOsUsers.map((osUser) => { const hasTools = osUser.has_claude || osUser.has_codex const disabled = isLocal && !hasTools const tools = [ osUser.has_claude && 'claude', osUser.has_codex && 'codex', osUser.has_openclaw && 'openclaw', ].filter(Boolean) const statusLabel = isLocal ? (tools.length > 0 ? tools.join('+') : tcs('noTools')) : tcs('unlinked') return ( ) })}

{!createMode ? ( ) : (

setCreateForm(f => ({ ...f, username: e.target.value }))} placeholder={tcs('usernamePlaceholder')} autoFocus className="w-full h-7 px-2 rounded bg-secondary border border-border text-xs text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:border-primary/50" /> setCreateForm(f => ({ ...f, display_name: e.target.value }))} placeholder={tcs('displayNamePlaceholder')} className="w-full h-7 px-2 rounded bg-secondary border border-border text-xs text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:border-primary/50" /> {!isLocal && ( setCreateForm(f => ({ ...f, gateway_port: e.target.value }))} placeholder={tcs('gatewayPortPlaceholder')} className="w-full h-7 px-2 rounded bg-secondary border border-border text-xs text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:border-primary/50" /> )} {/* Tool installation checkboxes */} {isLocal && (

{tcs('installTools')}

setCreateForm(f => ({ ...f, install_openclaw: e.target.checked }))} className="w-3 h-3 rounded accent-primary" /> openclaw setCreateForm(f => ({ ...f, install_claude: e.target.checked }))} disabled={createForm.install_openclaw} className="w-3 h-3 rounded accent-primary" /> claude {createForm.install_openclaw && included} setCreateForm(f => ({ ...f, install_codex: e.target.checked }))} disabled={createForm.install_openclaw} className="w-3 h-3 rounded accent-primary" /> codex {createForm.install_openclaw && included}

)} {createError && (

{createError}

)}

) } // SVG Icons (16x16 viewbox, stroke-based) function OverviewIcon() { return ( ) } function AgentsIcon() { return ( ) } function TasksIcon() { return ( ) } function ChatIcon() { return ( ) } function SessionsIcon() { return ( ) } function ActivityIcon() { return ( ) } function LogsIcon() { return ( ) } function CronIcon() { return ( ) } function MemoryIcon() { return ( ) } function TokensIcon() { return ( ) } function UsersIcon() { return ( ) } function AuditIcon() { return ( ) } function WebhookIcon() { return ( ) } function GatewayConfigIcon() { return ( ) } function GatewaysIcon() { return ( ) } function AlertIcon() { return ( ) } function IntegrationsIcon() { return ( ) } function AgentCostsIcon() { return ( ) } function GitHubIcon() { return ( ) } function SkillsIcon() { return ( ) } function SuperAdminIcon() { return ( ) } function SettingsIcon() { return ( ) } function OfficeIcon() { return ( ) } function OrganizationsIcon() { return ( ) } function ChannelsIcon() { return ( ) } function NodesIcon() { return ( ) } function ApprovalsIcon() { return ( ) } function DebugIcon() { return ( ) } function SecurityIcon() { return ( ) } function PluginIcon() { return ( ) } function MonitorIcon() { return ( ) }