import { useCallback, useEffect, useMemo, useState } from "react"; import { Activity, Bot, Brain, ChevronRight, Clock, FileCode, FileText, Folder, GitBranch, Grid3X3, LayoutGrid, Lightbulb, Loader2, Mail, MessageSquare, MoreHorizontal, Play, Settings, Monitor, Sparkles, Target, Terminal, Workflow, Map, Zap, } from "lucide-react"; import { fetchScripts } from "../api"; import { useViewportMode } from "./Header"; export interface MobileNavBarProps { /** Current task view mode */ view: "board" | "list" | "agents" | "missions" | "chat" | "documents" | "roadmaps" | "skills" | "mailbox" | "insights" | "memory" | "devserver" | "dev-server"; /** Change task view handler */ onChangeView: (view: "board" | "list" | "agents" | "missions" | "chat" | "documents" | "roadmaps" | "skills" | "mailbox" | "insights" | "memory" | "devserver" | "dev-server") => void; /** Whether the ExecutorStatusBar footer is visible */ footerVisible: boolean; /** Whether any full-screen modal is currently open (hides the tab bar) */ modalOpen?: boolean; // Navigation handlers onOpenSettings?: () => void; onOpenActivityLog?: () => void; onOpenMailbox?: () => void; mailboxUnreadCount?: number; onOpenGitManager?: () => void; onOpenWorkflowSteps?: () => void; onOpenSchedules?: () => void; onOpenScripts?: () => void; onToggleTerminal?: () => void; onOpenFiles?: () => void; onOpenGitHubImport?: () => void; onOpenPlanning?: () => void; onResumePlanning?: () => void; activePlanningSessionCount?: number; onOpenUsage?: () => void; onRunScript?: (name: string, command: string) => void; onOpenQuickChat?: () => void; projectId?: string; onViewAllProjects?: () => void; /** Whether to show the skills tab */ showSkillsTab?: boolean; /** Experimental feature flags controlling visibility of nav items. */ experimentalFeatures?: { insights?: boolean; roadmap?: boolean; memoryView?: boolean; devServer?: boolean; devServerView?: boolean }; } function GitHubLogo({ size = 20 }: { size?: number }) { return ( ); } function formatCount(count: number): string { return count > 99 ? "99+" : String(count); } export function MobileNavBar({ view, onChangeView, footerVisible, modalOpen = false, onOpenSettings, onOpenActivityLog, onOpenMailbox, mailboxUnreadCount = 0, onOpenGitManager, onOpenWorkflowSteps, onOpenSchedules, onOpenScripts, onToggleTerminal, onOpenFiles, onOpenGitHubImport, onOpenPlanning, onResumePlanning, activePlanningSessionCount = 0, onOpenUsage, onRunScript, onOpenQuickChat, projectId, onViewAllProjects, showSkillsTab, experimentalFeatures, }: MobileNavBarProps) { const mode = useViewportMode(); const [isMoreOpen, setIsMoreOpen] = useState(false); const [isScriptsSubmenuOpen, setIsScriptsSubmenuOpen] = useState(false); const [scripts, setScripts] = useState>({}); const [scriptsLoading, setScriptsLoading] = useState(false); const scriptEntries = useMemo( () => Object.entries(scripts).sort(([a], [b]) => a.localeCompare(b)), [scripts], ); // Fetch scripts when the submenu opens useEffect(() => { if (!isScriptsSubmenuOpen) return; let cancelled = false; setScriptsLoading(true); fetchScripts(projectId) .then((data) => { if (!cancelled) setScripts(data); }) .catch(() => { if (!cancelled) setScripts({}); }) .finally(() => { if (!cancelled) setScriptsLoading(false); }); return () => { cancelled = true; }; }, [isScriptsSubmenuOpen, projectId]); const closeMore = useCallback(() => setIsMoreOpen(false), []); const handleMoreAction = useCallback( (callback?: () => void) => { closeMore(); callback?.(); }, [closeMore], ); useEffect(() => { if (!isMoreOpen) return; const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { setIsMoreOpen(false); } }; document.addEventListener("keydown", onKeyDown); return () => document.removeEventListener("keydown", onKeyDown); }, [isMoreOpen]); if (mode !== "mobile" || modalOpen) { return null; } const planningHandler = activePlanningSessionCount > 0 && onResumePlanning ? onResumePlanning : onOpenPlanning; const roadmapEnabled = Boolean(experimentalFeatures?.roadmap); const skillsEnabled = Boolean(showSkillsTab); // Keep a maximum of one optional primary tab visible at once to preserve touch-target width. // Overflowed destinations remain available in the More sheet. const showRoadmapsTopLevel = roadmapEnabled && (!skillsEnabled || view === "roadmaps"); const showSkillsTopLevel = skillsEnabled && (!roadmapEnabled || view !== "roadmaps"); const showSkillsInMore = skillsEnabled && !showSkillsTopLevel; const isMoreActive = view === "documents" || view === "insights" || view === "memory" || view === "devserver" || view === "dev-server" || (view === "roadmaps" && !showRoadmapsTopLevel) || (view === "skills" && !showSkillsTopLevel); return ( <>

{showSkillsTopLevel && ( )} {showRoadmapsTopLevel && ( )}

{isMoreOpen && ( <>

Navigate

{isScriptsSubmenuOpen && ( )} {showSkillsInMore && ( )} {roadmapEnabled && ( )} {experimentalFeatures?.insights && ( )} {experimentalFeatures?.memoryView && ( )} {experimentalFeatures?.devServerView && ( )}

)} ); }