8cdc0ff449
This merge brings FN-3155's plugin `createAiSession` API (types, DI hooks, engine adapter, context wiring, docs, and tests), FN-3056's task title sanitization, and FN-3129's tokenized footer and mobile initialization for MissionManager. It also adds CentralCore Docker node management, a new AddNodeM Fusion-Task-Id: FN-3155
1918 lines
73 KiB
TypeScript
1918 lines
73 KiB
TypeScript
import { useState, useEffect, useRef, useCallback, useMemo, type KeyboardEvent as ReactKeyboardEvent } from "react";
|
|
import { Settings, Pause, Play, Square, LayoutGrid, List, Terminal, Lightbulb, Search, X, Activity, MoreHorizontal, Clock, Folder, History, GitBranch, Monitor, Server, Workflow, Bot, Target, ChevronRight, FileCode, Loader2, Grid3X3, Mail, MessageSquare, ChevronDown, Check, Zap, Sparkles, FileText, Brain, CheckSquare } from "lucide-react";
|
|
import "./Header.css";
|
|
// Header renders an inline ProjectSelector dropdown using project-selector-* classes.
|
|
import "./ProjectSelector.css";
|
|
import type { ProjectInfo } from "../api";
|
|
import type { NodeConfig, ProjectStatus } from "@fusion/core";
|
|
import { fetchScripts } from "../api";
|
|
import { NodeStatusIndicator } from "./NodeStatusIndicator";
|
|
import { NodeHealthDot } from "./NodeHealthDot";
|
|
import { PluginSlot } from "./PluginSlot";
|
|
import { useViewportMode, type ViewportMode } from "../hooks/useViewportMode";
|
|
import { getTrailingPath } from "../utils/pathDisplay";
|
|
import type { TaskView } from "../hooks/useViewState";
|
|
import type { PluginDashboardViewEntry } from "../api";
|
|
import { buildPluginTaskViewId } from "../plugins/pluginViewRegistry";
|
|
import { getPluginNavIcon } from "./pluginNavIcon";
|
|
|
|
export { useViewportMode };
|
|
|
|
// Status icon config for project selector dropdown
|
|
const PROJECT_STATUS_CONFIG: Record<ProjectStatus, { color: string }> = {
|
|
active: { color: "var(--success)" },
|
|
paused: { color: "var(--warning)" },
|
|
errored: { color: "var(--color-error)" },
|
|
initializing: { color: "var(--info)" },
|
|
};
|
|
|
|
/**
|
|
* ProjectSelector - A component for project navigation.
|
|
* Shows project dropdown for switching projects and navigating to project management.
|
|
*/
|
|
function ProjectSelector({
|
|
projects,
|
|
currentProject,
|
|
onViewAll,
|
|
onSelectProject,
|
|
}: {
|
|
projects: ProjectInfo[];
|
|
currentProject: ProjectInfo | null;
|
|
onViewAll: () => void;
|
|
onSelectProject?: (project: ProjectInfo) => void;
|
|
}) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Close dropdown on outside click
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, [isOpen]);
|
|
|
|
// Close on Escape
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
}, [isOpen]);
|
|
|
|
const handleSelectProject = useCallback(
|
|
(project: ProjectInfo) => {
|
|
onSelectProject?.(project);
|
|
setIsOpen(false);
|
|
},
|
|
[onSelectProject]
|
|
);
|
|
|
|
return (
|
|
<div className="project-selector" ref={dropdownRef}>
|
|
{projects.length > 0 && (
|
|
<>
|
|
<button
|
|
className={`project-selector-trigger${isOpen ? " project-selector-trigger--open" : ""}`}
|
|
onClick={() => setIsOpen((prev) => !prev)}
|
|
title={currentProject?.name ? `Switch project (current: ${currentProject.name})` : "Switch project"}
|
|
aria-label="Switch project"
|
|
aria-expanded={isOpen}
|
|
aria-haspopup="listbox"
|
|
data-testid="project-selector-trigger"
|
|
>
|
|
<span className="project-selector-trigger-label">
|
|
{currentProject?.name ?? "Projects"}
|
|
</span>
|
|
<ChevronDown size={12} className={`project-selector-chevron${isOpen ? " project-selector-chevron--open" : ""}`} />
|
|
</button>
|
|
{isOpen && (
|
|
<div
|
|
className="project-selector-dropdown"
|
|
role="listbox"
|
|
aria-label="Select project"
|
|
data-testid="project-selector-dropdown"
|
|
>
|
|
{projects.map((project) => {
|
|
const isCurrent = currentProject?.id === project.id;
|
|
const statusColor = PROJECT_STATUS_CONFIG[project.status]?.color;
|
|
return (
|
|
<button
|
|
key={project.id}
|
|
className={`project-selector-item${isCurrent ? " project-selector-item--current" : ""}`}
|
|
onClick={() => handleSelectProject(project)}
|
|
role="option"
|
|
aria-selected={isCurrent}
|
|
>
|
|
<span
|
|
className="project-selector-dot"
|
|
style={{ backgroundColor: statusColor || "var(--text-muted)" }}
|
|
/>
|
|
<div className="project-selector-info">
|
|
<span className="project-selector-name">{project.name}</span>
|
|
<span className="project-selector-path">
|
|
{getTrailingPath(project.path, 2)}
|
|
</span>
|
|
</div>
|
|
{isCurrent && <Check size={14} className="project-selector-check" />}
|
|
</button>
|
|
);
|
|
})}
|
|
<div className="project-selector-divider" role="presentation" />
|
|
<button
|
|
className="project-selector-manage"
|
|
onClick={() => {
|
|
onViewAll();
|
|
setIsOpen(false);
|
|
}}
|
|
data-testid="manage-projects-action"
|
|
>
|
|
Manage Projects
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// GitHub logo icon (Octocat mark) - uses currentColor for theme compatibility
|
|
function GitHubLogo({ size = 16 }: { size?: number }) {
|
|
return (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
interface DropdownPosition {
|
|
top: number;
|
|
left: number;
|
|
width: number;
|
|
}
|
|
|
|
export interface HeaderProps {
|
|
onOpenSettings?: () => void;
|
|
onOpenGitHubImport?: () => void;
|
|
onOpenPlanning?: () => void;
|
|
/** Resume an in-flight planning session. Takes priority over onOpenPlanning when activePlanningSessionCount > 0 */
|
|
onResumePlanning?: () => void;
|
|
/** Number of active planning sessions. When > 0, shows a badge on the Planning button. */
|
|
activePlanningSessionCount?: number;
|
|
onOpenUsage?: (anchorRect?: DOMRect | null) => void;
|
|
onOpenActivityLog?: () => void;
|
|
onOpenSystemStats?: () => void;
|
|
/** Opens the mailbox view */
|
|
onOpenMailbox?: () => void;
|
|
/** Unread message count for badge display */
|
|
mailboxUnreadCount?: number;
|
|
onOpenSchedules?: () => void;
|
|
onOpenGitManager?: () => void;
|
|
onOpenNodes?: () => void;
|
|
/** When false, hides the Nodes management button. Defaults to true for backward compat. */
|
|
showNodesButton?: boolean;
|
|
onOpenWorkflowSteps?: () => void;
|
|
onOpenScripts?: () => void;
|
|
onRunScript?: (name: string, command: string) => void;
|
|
onToggleTerminal?: () => void;
|
|
/** Opens the top-level workspace-aware file browser modal. */
|
|
onOpenFiles?: () => void;
|
|
filesOpen?: boolean;
|
|
onOpenTodos?: () => void;
|
|
todosOpen?: boolean;
|
|
todosEnabled?: boolean;
|
|
globalPaused?: boolean;
|
|
enginePaused?: boolean;
|
|
onToggleGlobalPause?: () => void;
|
|
onToggleEnginePause?: () => void;
|
|
view?: TaskView;
|
|
onChangeView?: (view: TaskView) => void;
|
|
/** Whether to show the skills tab in the view toggle */
|
|
showSkillsTab?: boolean;
|
|
/** When true, shows the Agents view tab button. Hidden by default (experimental feature). */
|
|
showAgentsTab?: boolean;
|
|
searchQuery?: string;
|
|
onSearchChange?: (query: string) => void;
|
|
/** Multi-project props */
|
|
projects?: ProjectInfo[];
|
|
currentProject?: ProjectInfo | null;
|
|
onSelectProject?: (project: ProjectInfo) => void;
|
|
onViewAllProjects?: () => void;
|
|
projectId?: string;
|
|
isElectron?: boolean;
|
|
/** When true, the mobile bottom nav bar handles primary navigation and header nav controls are hidden. */
|
|
mobileNavEnabled?: boolean;
|
|
/** Available nodes for the node selector */
|
|
availableNodes?: NodeConfig[];
|
|
/** Currently selected node (null for local) */
|
|
currentNode?: NodeConfig | null;
|
|
/** Callback when a node is selected */
|
|
onSelectNode?: (node: NodeConfig | null) => void;
|
|
/** Whether the current view is a remote node */
|
|
isRemote?: boolean;
|
|
/** Experimental feature flags controlling visibility of nav items. */
|
|
experimentalFeatures?: { insights?: boolean; roadmap?: boolean; memoryView?: boolean; devServer?: boolean; devServerView?: boolean; researchView?: boolean };
|
|
pluginDashboardViews?: PluginDashboardViewEntry[];
|
|
}
|
|
|
|
export function Header({
|
|
onOpenSettings,
|
|
onOpenGitHubImport,
|
|
onOpenPlanning,
|
|
onResumePlanning,
|
|
activePlanningSessionCount = 0,
|
|
onOpenUsage,
|
|
onOpenActivityLog,
|
|
onOpenSystemStats,
|
|
onOpenMailbox,
|
|
mailboxUnreadCount = 0,
|
|
onOpenSchedules,
|
|
onOpenGitManager,
|
|
onOpenNodes,
|
|
showNodesButton,
|
|
onOpenWorkflowSteps,
|
|
onOpenScripts,
|
|
onRunScript,
|
|
onToggleTerminal,
|
|
onOpenFiles,
|
|
filesOpen,
|
|
onOpenTodos,
|
|
todosOpen,
|
|
todosEnabled,
|
|
globalPaused,
|
|
enginePaused,
|
|
onToggleGlobalPause,
|
|
onToggleEnginePause,
|
|
view = "board",
|
|
onChangeView,
|
|
showSkillsTab,
|
|
showAgentsTab,
|
|
searchQuery = "",
|
|
onSearchChange,
|
|
projects = [],
|
|
currentProject,
|
|
onSelectProject,
|
|
onViewAllProjects,
|
|
projectId,
|
|
isElectron = false,
|
|
mobileNavEnabled,
|
|
availableNodes = [],
|
|
currentNode,
|
|
onSelectNode,
|
|
isRemote = false,
|
|
experimentalFeatures,
|
|
pluginDashboardViews = [],
|
|
}: HeaderProps) {
|
|
const mode: ViewportMode = useViewportMode();
|
|
const isMobile = mode === "mobile";
|
|
const isTablet = mode === "tablet";
|
|
const isCompact = isMobile || isTablet;
|
|
const hideFullNav = isMobile && mobileNavEnabled;
|
|
const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false);
|
|
const [isNonMobileSearchOpen, setIsNonMobileSearchOpen] = useState(false);
|
|
// Track when user has explicitly closed the search (used for toggle visibility)
|
|
const [isNonMobileSearchExplicitlyClosed, setIsNonMobileSearchExplicitlyClosed] = useState(false);
|
|
const [isOverflowMenuOpen, setIsOverflowMenuOpen] = useState(false);
|
|
const [isTerminalSubmenuOpen, setIsTerminalSubmenuOpen] = useState(false);
|
|
const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
|
|
const [isMobileProjectSwitchOpen, setIsMobileProjectSwitchOpen] = useState(false);
|
|
const [isViewOverflowOpen, setIsViewOverflowOpen] = useState(false);
|
|
const [isDesktopOverflowOpen, setIsDesktopOverflowOpen] = useState(false);
|
|
const [isEngineMenuOpen, setIsEngineMenuOpen] = useState(false);
|
|
const [isScriptsOpen, setIsScriptsOpen] = useState(false);
|
|
const [scripts, setScripts] = useState<Record<string, string>>({});
|
|
const [scriptsLoading, setScriptsLoading] = useState(false);
|
|
const [highlightedScriptIndex, setHighlightedScriptIndex] = useState(-1);
|
|
const [scriptsDropdownPosition, setScriptsDropdownPosition] = useState<DropdownPosition | null>(null);
|
|
const [overflowScripts, setOverflowScripts] = useState<Record<string, string>>({});
|
|
const [overflowScriptsLoading, setOverflowScriptsLoading] = useState(false);
|
|
const overflowButtonRef = useRef<HTMLButtonElement>(null);
|
|
const overflowMenuRef = useRef<HTMLDivElement>(null);
|
|
const desktopOverflowTriggerRef = useRef<HTMLButtonElement>(null);
|
|
const desktopOverflowRef = useRef<HTMLDivElement>(null);
|
|
const mobileSearchRef = useRef<HTMLDivElement>(null);
|
|
const mobileSearchInputRef = useRef<HTMLInputElement>(null);
|
|
const terminalSubmenuOpenRef = useRef(false);
|
|
const nodeSelectorRef = useRef<HTMLDivElement>(null);
|
|
const mobileProjectSwitchRef = useRef<HTMLDivElement>(null);
|
|
const viewOverflowRef = useRef<HTMLDivElement>(null);
|
|
const viewOverflowTriggerRef = useRef<HTMLButtonElement>(null);
|
|
const engineMenuRef = useRef<HTMLDivElement>(null);
|
|
const scriptsSplitButtonRef = useRef<HTMLDivElement>(null);
|
|
const scriptsChevronButtonRef = useRef<HTMLButtonElement>(null);
|
|
const scriptsMenuRef = useRef<HTMLDivElement>(null);
|
|
const scriptsOpenRef = useRef(false);
|
|
|
|
// Get remote nodes only (exclude local node type)
|
|
const remoteNodes = useMemo(() =>
|
|
availableNodes.filter((node) => node.type === "remote"),
|
|
[availableNodes]
|
|
);
|
|
const showNodeSelector = remoteNodes.length > 0;
|
|
|
|
// Script entries sorted alphabetically for desktop scripts dropdown
|
|
const scriptEntries = useMemo(() => {
|
|
return Object.entries(scripts).sort(([a], [b]) => a.localeCompare(b));
|
|
}, [scripts]);
|
|
|
|
const showScriptsFooter = scriptEntries.length > 0;
|
|
const totalScriptItems = scriptEntries.length + (showScriptsFooter ? 1 : 0);
|
|
|
|
// Script entries sorted alphabetically for overflow submenu
|
|
const overflowScriptEntries = useMemo(() => {
|
|
return Object.entries(overflowScripts).sort(([a], [b]) => a.localeCompare(b));
|
|
}, [overflowScripts]);
|
|
|
|
const hasRoadmapsPluginView = useMemo(
|
|
() => pluginDashboardViews.some((entry) => entry.pluginId === "fusion-plugin-roadmap"),
|
|
[pluginDashboardViews],
|
|
);
|
|
|
|
const hasViewOverflowItems = useMemo(() => {
|
|
return !!(
|
|
experimentalFeatures?.researchView ||
|
|
todosEnabled ||
|
|
experimentalFeatures?.insights ||
|
|
(experimentalFeatures?.roadmap && !hasRoadmapsPluginView) ||
|
|
showSkillsTab ||
|
|
experimentalFeatures?.memoryView ||
|
|
experimentalFeatures?.devServerView ||
|
|
!hideFullNav ||
|
|
pluginDashboardViews.some((entry) => entry.view.placement !== "primary")
|
|
);
|
|
}, [experimentalFeatures, todosEnabled, showSkillsTab, hideFullNav, pluginDashboardViews, hasRoadmapsPluginView]);
|
|
|
|
const getEffectiveViewport = useCallback(() => {
|
|
const vv = window.visualViewport;
|
|
if (vv && vv.width > 0 && vv.height > 0) {
|
|
return {
|
|
width: vv.width,
|
|
height: vv.height,
|
|
offsetTop: vv.offsetTop,
|
|
offsetLeft: vv.offsetLeft,
|
|
};
|
|
}
|
|
|
|
return {
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
offsetTop: 0,
|
|
offsetLeft: 0,
|
|
};
|
|
}, []);
|
|
|
|
const updateScriptsDropdownPosition = useCallback(() => {
|
|
const trigger = scriptsChevronButtonRef.current;
|
|
if (!trigger) return;
|
|
|
|
const rect = trigger.getBoundingClientRect();
|
|
const menu = scriptsMenuRef.current;
|
|
const { width: viewportWidth, height: viewportHeight, offsetTop, offsetLeft } = getEffectiveViewport();
|
|
const horizontalPadding = 16;
|
|
const verticalPadding = 16;
|
|
const gap = 6;
|
|
|
|
const measuredWidth = menu?.offsetWidth || Math.max(rect.width, 260);
|
|
const width = Math.min(
|
|
measuredWidth,
|
|
Math.max(viewportWidth - horizontalPadding * 2, 160),
|
|
);
|
|
|
|
const measuredHeight = menu?.offsetHeight || 280;
|
|
const constrainedHeight = Math.min(
|
|
measuredHeight,
|
|
Math.max(viewportHeight - verticalPadding * 2, 160),
|
|
);
|
|
|
|
const triggerTop = rect.top - offsetTop;
|
|
const triggerBottom = rect.bottom - offsetTop;
|
|
const triggerRight = rect.right - offsetLeft;
|
|
|
|
const spaceBelow = viewportHeight - triggerBottom;
|
|
const spaceAbove = triggerTop;
|
|
|
|
const openUpward = spaceBelow < constrainedHeight && spaceAbove > spaceBelow;
|
|
|
|
const left = Math.min(
|
|
Math.max(triggerRight - width, horizontalPadding),
|
|
viewportWidth - horizontalPadding - width,
|
|
) + offsetLeft;
|
|
|
|
const top = openUpward
|
|
? Math.max(verticalPadding + offsetTop, triggerTop - constrainedHeight - gap + offsetTop)
|
|
: Math.min(
|
|
triggerBottom + gap + offsetTop,
|
|
viewportHeight + offsetTop - verticalPadding - constrainedHeight,
|
|
);
|
|
|
|
setScriptsDropdownPosition({ top, left, width });
|
|
}, [getEffectiveViewport]);
|
|
|
|
const handleRunQuickScript = useCallback(
|
|
(name: string, command: string) => {
|
|
onRunScript?.(name, command);
|
|
setIsScriptsOpen(false);
|
|
setHighlightedScriptIndex(-1);
|
|
},
|
|
[onRunScript],
|
|
);
|
|
|
|
const handleManageScripts = useCallback(() => {
|
|
onOpenScripts?.();
|
|
setIsScriptsOpen(false);
|
|
setHighlightedScriptIndex(-1);
|
|
}, [onOpenScripts]);
|
|
|
|
const handleScriptsDropdownKeyDown = useCallback(
|
|
(e: ReactKeyboardEvent<HTMLDivElement>) => {
|
|
switch (e.key) {
|
|
case "ArrowDown":
|
|
e.preventDefault();
|
|
if (totalScriptItems > 0) {
|
|
setHighlightedScriptIndex((prev) => (prev < totalScriptItems - 1 ? prev + 1 : 0));
|
|
}
|
|
break;
|
|
case "ArrowUp":
|
|
e.preventDefault();
|
|
if (totalScriptItems > 0) {
|
|
setHighlightedScriptIndex((prev) => (prev > 0 ? prev - 1 : totalScriptItems - 1));
|
|
}
|
|
break;
|
|
case "Enter":
|
|
e.preventDefault();
|
|
if (highlightedScriptIndex >= 0) {
|
|
if (highlightedScriptIndex < scriptEntries.length) {
|
|
const [name, command] = scriptEntries[highlightedScriptIndex];
|
|
handleRunQuickScript(name, command);
|
|
} else if (showScriptsFooter && highlightedScriptIndex === scriptEntries.length) {
|
|
handleManageScripts();
|
|
}
|
|
}
|
|
break;
|
|
case "Home":
|
|
e.preventDefault();
|
|
if (totalScriptItems > 0) {
|
|
setHighlightedScriptIndex(0);
|
|
}
|
|
break;
|
|
case "End":
|
|
e.preventDefault();
|
|
if (totalScriptItems > 0) {
|
|
setHighlightedScriptIndex(totalScriptItems - 1);
|
|
}
|
|
break;
|
|
}
|
|
},
|
|
[handleManageScripts, handleRunQuickScript, highlightedScriptIndex, scriptEntries, showScriptsFooter, totalScriptItems],
|
|
);
|
|
|
|
// Keep ref in sync with state
|
|
useEffect(() => {
|
|
terminalSubmenuOpenRef.current = isTerminalSubmenuOpen;
|
|
}, [isTerminalSubmenuOpen]);
|
|
|
|
useEffect(() => {
|
|
scriptsOpenRef.current = isScriptsOpen;
|
|
}, [isScriptsOpen]);
|
|
|
|
// Fetch scripts when terminal submenu opens in compact mode
|
|
useEffect(() => {
|
|
if (!isTerminalSubmenuOpen || !isCompact) return;
|
|
|
|
let cancelled = false;
|
|
setOverflowScriptsLoading(true);
|
|
|
|
fetchScripts(projectId)
|
|
.then((data) => {
|
|
if (!cancelled) {
|
|
setOverflowScripts(data);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled) {
|
|
setOverflowScripts({});
|
|
}
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) {
|
|
setOverflowScriptsLoading(false);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [isTerminalSubmenuOpen, isCompact, projectId]);
|
|
|
|
// Fetch scripts when desktop scripts dropdown opens
|
|
useEffect(() => {
|
|
if (!isScriptsOpen || isCompact) 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;
|
|
};
|
|
}, [isScriptsOpen, isCompact, projectId]);
|
|
|
|
// Close desktop scripts dropdown on outside click
|
|
useEffect(() => {
|
|
if (!isScriptsOpen) return;
|
|
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (
|
|
scriptsSplitButtonRef.current &&
|
|
!scriptsSplitButtonRef.current.contains(e.target as Node)
|
|
) {
|
|
setIsScriptsOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, [isScriptsOpen]);
|
|
|
|
// Close desktop scripts dropdown on Escape
|
|
useEffect(() => {
|
|
if (!isScriptsOpen) return;
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") {
|
|
setIsScriptsOpen(false);
|
|
scriptsChevronButtonRef.current?.focus();
|
|
}
|
|
};
|
|
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
}, [isScriptsOpen]);
|
|
|
|
// Reset highlight and focus menu when dropdown opens
|
|
useEffect(() => {
|
|
if (isScriptsOpen) {
|
|
setHighlightedScriptIndex(-1);
|
|
const timeoutId = window.setTimeout(() => scriptsMenuRef.current?.focus(), 0);
|
|
return () => window.clearTimeout(timeoutId);
|
|
}
|
|
|
|
setScriptsDropdownPosition(null);
|
|
}, [isScriptsOpen]);
|
|
|
|
// Position scripts dropdown when opening and content changes
|
|
useEffect(() => {
|
|
if (!isScriptsOpen) return;
|
|
|
|
const rafId = requestAnimationFrame(() => {
|
|
updateScriptsDropdownPosition();
|
|
});
|
|
|
|
return () => cancelAnimationFrame(rafId);
|
|
}, [isScriptsOpen, scriptsLoading, scriptEntries.length, showScriptsFooter, updateScriptsDropdownPosition]);
|
|
|
|
// Keep scripts dropdown anchored on viewport changes
|
|
useEffect(() => {
|
|
if (!isScriptsOpen) return;
|
|
|
|
const handleReposition = () => updateScriptsDropdownPosition();
|
|
|
|
window.addEventListener("resize", handleReposition);
|
|
window.addEventListener("scroll", handleReposition, true);
|
|
|
|
const vv = window.visualViewport;
|
|
if (vv) {
|
|
vv.addEventListener("resize", handleReposition);
|
|
vv.addEventListener("scroll", handleReposition);
|
|
}
|
|
|
|
return () => {
|
|
window.removeEventListener("resize", handleReposition);
|
|
window.removeEventListener("scroll", handleReposition, true);
|
|
if (vv) {
|
|
vv.removeEventListener("resize", handleReposition);
|
|
vv.removeEventListener("scroll", handleReposition);
|
|
}
|
|
};
|
|
}, [isScriptsOpen, updateScriptsDropdownPosition]);
|
|
|
|
useEffect(() => {
|
|
if (isCompact) {
|
|
setIsScriptsOpen(false);
|
|
setHighlightedScriptIndex(-1);
|
|
}
|
|
}, [isCompact]);
|
|
|
|
// Keep mobile search open if there's an active search query
|
|
const shouldShowMobileSearch = isMobileSearchOpen || searchQuery.length > 0;
|
|
|
|
// Non-mobile search: toggled open OR has active query, but not if explicitly closed
|
|
const shouldShowNonMobileSearch = (isNonMobileSearchOpen || searchQuery.length > 0) && !isNonMobileSearchExplicitlyClosed;
|
|
// Show toggle when search is available, NOT currently shown, NOT explicitly closed, AND query is empty
|
|
const canShowNonMobileSearchToggle = (view === "board" || view === "list") && !isMobile && onSearchChange && !isNonMobileSearchExplicitlyClosed && searchQuery.length === 0;
|
|
const canShowNonMobileSearch = (view === "board" || view === "list") && !isMobile && onSearchChange;
|
|
|
|
// Reset explicit close flag when query becomes empty (so toggle reappears)
|
|
useEffect(() => {
|
|
if (searchQuery === "") {
|
|
setIsNonMobileSearchExplicitlyClosed(false);
|
|
}
|
|
}, [searchQuery]);
|
|
|
|
// Close overflow menu on outside click
|
|
useEffect(() => {
|
|
if (!isOverflowMenuOpen) return;
|
|
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (
|
|
overflowMenuRef.current &&
|
|
!overflowMenuRef.current.contains(e.target as Node) &&
|
|
overflowButtonRef.current &&
|
|
!overflowButtonRef.current.contains(e.target as Node)
|
|
) {
|
|
setIsOverflowMenuOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, [isOverflowMenuOpen]);
|
|
|
|
// Close desktop overflow menu on outside click
|
|
useEffect(() => {
|
|
if (!isDesktopOverflowOpen) return;
|
|
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (
|
|
desktopOverflowRef.current &&
|
|
!desktopOverflowRef.current.contains(e.target as Node) &&
|
|
desktopOverflowTriggerRef.current &&
|
|
!desktopOverflowTriggerRef.current.contains(e.target as Node)
|
|
) {
|
|
setIsDesktopOverflowOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, [isDesktopOverflowOpen]);
|
|
|
|
// Close node selector on outside click
|
|
useEffect(() => {
|
|
if (!isNodeSelectorOpen) return;
|
|
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (
|
|
nodeSelectorRef.current &&
|
|
!nodeSelectorRef.current.contains(e.target as Node)
|
|
) {
|
|
setIsNodeSelectorOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, [isNodeSelectorOpen]);
|
|
|
|
// Close menus on Escape key
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") {
|
|
setIsViewOverflowOpen(false);
|
|
setIsDesktopOverflowOpen(false);
|
|
if (terminalSubmenuOpenRef.current) {
|
|
setIsTerminalSubmenuOpen(false);
|
|
return;
|
|
}
|
|
if (scriptsOpenRef.current) {
|
|
setIsScriptsOpen(false);
|
|
scriptsChevronButtonRef.current?.focus();
|
|
return;
|
|
}
|
|
setIsOverflowMenuOpen(false);
|
|
setIsMobileSearchOpen(false);
|
|
setIsNodeSelectorOpen(false);
|
|
setIsMobileProjectSwitchOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
}, []);
|
|
|
|
// Close mobile project switch on outside click
|
|
useEffect(() => {
|
|
if (!isMobileProjectSwitchOpen) return;
|
|
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (
|
|
mobileProjectSwitchRef.current &&
|
|
!mobileProjectSwitchRef.current.contains(e.target as Node)
|
|
) {
|
|
setIsMobileProjectSwitchOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, [isMobileProjectSwitchOpen]);
|
|
|
|
// Close engine controls dropdown on outside click
|
|
useEffect(() => {
|
|
if (!isEngineMenuOpen) return;
|
|
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (engineMenuRef.current && !engineMenuRef.current.contains(e.target as Node)) {
|
|
setIsEngineMenuOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, [isEngineMenuOpen]);
|
|
|
|
// Close engine controls dropdown on Escape
|
|
useEffect(() => {
|
|
if (!isEngineMenuOpen) return;
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setIsEngineMenuOpen(false);
|
|
};
|
|
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
}, [isEngineMenuOpen]);
|
|
|
|
// Close view toggle overflow on outside click
|
|
useEffect(() => {
|
|
if (!isViewOverflowOpen) return;
|
|
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (
|
|
viewOverflowRef.current &&
|
|
!viewOverflowRef.current.contains(e.target as Node) &&
|
|
viewOverflowTriggerRef.current &&
|
|
!viewOverflowTriggerRef.current.contains(e.target as Node)
|
|
) {
|
|
setIsViewOverflowOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, [isViewOverflowOpen]);
|
|
|
|
const handleMobileSearchToggle = useCallback(() => {
|
|
setIsMobileSearchOpen((prev) => !prev);
|
|
}, []);
|
|
|
|
const handleNonMobileSearchToggle = useCallback(() => {
|
|
setIsNonMobileSearchOpen(true);
|
|
setIsNonMobileSearchExplicitlyClosed(false);
|
|
}, []);
|
|
|
|
const handleNonMobileSearchClose = useCallback(() => {
|
|
setIsNonMobileSearchOpen(false);
|
|
setIsNonMobileSearchExplicitlyClosed(true);
|
|
if (onSearchChange) onSearchChange("");
|
|
}, [onSearchChange]);
|
|
|
|
const handleOverflowToggle = useCallback(() => {
|
|
setIsOverflowMenuOpen((prev) => !prev);
|
|
}, []);
|
|
|
|
const handleOverflowAction = useCallback((callback?: () => void) => {
|
|
if (callback) callback();
|
|
setIsOverflowMenuOpen(false);
|
|
setIsTerminalSubmenuOpen(false);
|
|
}, []);
|
|
|
|
const handleMobileSearchClose = useCallback(() => {
|
|
setIsMobileSearchOpen(false);
|
|
if (onSearchChange) onSearchChange("");
|
|
}, [onSearchChange]);
|
|
|
|
return (
|
|
<div className="header-wrapper">
|
|
<header className="header">
|
|
<div className="header-left">
|
|
<div className="header-brand">
|
|
<svg
|
|
className="header-logo"
|
|
width={24}
|
|
height={24}
|
|
viewBox="0 0 128 128"
|
|
fill="none"
|
|
aria-label="Fusion logo"
|
|
role="img"
|
|
>
|
|
<circle
|
|
cx="64"
|
|
cy="64"
|
|
r="52"
|
|
stroke="currentColor"
|
|
strokeWidth="8"
|
|
/>
|
|
<path
|
|
d="M26 101C44 82 62 64 82 45C90 37 98 30 104 24C96 35 89 47 81 60C70 79 57 95 43 108C38 112 32 108 26 101Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
<h1 className="logo">Fusion</h1>
|
|
</div>
|
|
|
|
{/* Mobile Project Switch - dropdown trigger next to logo when at least one project exists (mobile only) */}
|
|
{isMobile && projects.length >= 1 && onSelectProject && (
|
|
<div className="mobile-project-switch" ref={mobileProjectSwitchRef}>
|
|
<button
|
|
className={`mobile-project-switch-trigger${isMobileProjectSwitchOpen ? " mobile-project-switch-trigger--open" : ""}`}
|
|
onClick={() => setIsMobileProjectSwitchOpen((prev) => !prev)}
|
|
title="Switch project"
|
|
aria-label="Switch project"
|
|
aria-expanded={isMobileProjectSwitchOpen}
|
|
aria-haspopup="listbox"
|
|
data-testid="mobile-project-switch-trigger"
|
|
>
|
|
<ChevronDown size={14} className={`mobile-project-switch-chevron${isMobileProjectSwitchOpen ? " mobile-project-switch-chevron--open" : ""}`} />
|
|
</button>
|
|
{isMobileProjectSwitchOpen && (
|
|
<div
|
|
className="mobile-project-switch-dropdown"
|
|
role="listbox"
|
|
aria-label="Select project"
|
|
data-testid="mobile-project-switch-dropdown"
|
|
>
|
|
{projects.map((project) => {
|
|
const isCurrent = currentProject?.id === project.id;
|
|
const statusColor = PROJECT_STATUS_CONFIG[project.status]?.color;
|
|
return (
|
|
<button
|
|
key={project.id}
|
|
className={`mobile-project-switch-item${isCurrent ? " mobile-project-switch-item--current" : ""}`}
|
|
onClick={() => {
|
|
onSelectProject(project);
|
|
setIsMobileProjectSwitchOpen(false);
|
|
}}
|
|
role="option"
|
|
aria-selected={isCurrent}
|
|
data-testid={`mobile-project-switch-item-${project.id}`}
|
|
>
|
|
<span
|
|
className="mobile-project-switch-dot"
|
|
style={{ backgroundColor: statusColor || "var(--text-muted)" }}
|
|
/>
|
|
<div className="mobile-project-switch-info">
|
|
<span className="mobile-project-switch-name">{project.name}</span>
|
|
<span className="mobile-project-switch-path">
|
|
{getTrailingPath(project.path, 2)}
|
|
</span>
|
|
</div>
|
|
{isCurrent && <Check size={14} className="mobile-project-switch-check" />}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Project Selector - Back button when project selected, dropdown when 2+ projects (desktop only) */}
|
|
{!isCompact && projects.length >= 1 && onViewAllProjects && (
|
|
<ProjectSelector
|
|
projects={projects}
|
|
currentProject={currentProject ?? null}
|
|
onViewAll={onViewAllProjects}
|
|
onSelectProject={onSelectProject}
|
|
/>
|
|
)}
|
|
|
|
{/* Node selector and status indicator */}
|
|
{showNodeSelector && (
|
|
<div
|
|
className={`header-node-selector${isMobile ? " header-node-selector--mobile" : ""}`}
|
|
ref={isMobile ? undefined : nodeSelectorRef}
|
|
>
|
|
{/* Node status indicator - always visible */}
|
|
<NodeStatusIndicator
|
|
node={currentNode ?? null}
|
|
showDetails={!isMobile}
|
|
/>
|
|
|
|
{/* Node selector dropdown - desktop/tablet only */}
|
|
{!isMobile && (
|
|
<>
|
|
<button
|
|
className={`btn-icon node-selector-trigger${isNodeSelectorOpen ? " node-selector-trigger--open" : ""}`}
|
|
onClick={() => setIsNodeSelectorOpen((prev) => !prev)}
|
|
title="Switch node"
|
|
aria-label="Switch node"
|
|
aria-expanded={isNodeSelectorOpen}
|
|
aria-haspopup="listbox"
|
|
data-testid="node-selector-trigger"
|
|
>
|
|
<ChevronRight
|
|
size={12}
|
|
className={`node-selector-chevron${isNodeSelectorOpen ? " node-selector-chevron--open" : ""}`}
|
|
/>
|
|
</button>
|
|
|
|
{/* Node selector dropdown menu */}
|
|
{isNodeSelectorOpen && (
|
|
<div className="node-selector-dropdown" role="listbox" aria-label="Select node">
|
|
{/* Local option */}
|
|
<button
|
|
className={`node-selector-option${!isRemote ? " node-selector-option--active" : ""}`}
|
|
onClick={() => {
|
|
onSelectNode?.(null);
|
|
setIsNodeSelectorOpen(false);
|
|
}}
|
|
role="option"
|
|
aria-selected={!isRemote}
|
|
data-testid="node-option-local"
|
|
>
|
|
<NodeHealthDot status="online" compact />
|
|
<span className="node-selector-option-label">Local</span>
|
|
</button>
|
|
|
|
{/* Remote nodes */}
|
|
{remoteNodes.map((node) => (
|
|
<button
|
|
key={node.id}
|
|
className={`node-selector-option${currentNode?.id === node.id ? " node-selector-option--active" : ""}`}
|
|
onClick={() => {
|
|
onSelectNode?.(node);
|
|
setIsNodeSelectorOpen(false);
|
|
}}
|
|
role="option"
|
|
aria-selected={currentNode?.id === node.id}
|
|
data-testid={`node-option-${node.id}`}
|
|
>
|
|
<NodeHealthDot status={node.status} compact />
|
|
<span className="node-selector-option-label">{node.name}</span>
|
|
<span className="node-selector-option-status">{node.status}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="header-actions">
|
|
{/* Mobile View Toggle - compact board/list switcher in header when mobile nav is active */}
|
|
{hideFullNav && onChangeView && (view === "board" || view === "list") && (
|
|
<div className="view-toggle" data-testid="mobile-view-toggle">
|
|
<button
|
|
className={`view-toggle-btn${view === "board" ? " active" : ""}`}
|
|
onClick={() => onChangeView("board")}
|
|
title="Board view"
|
|
aria-label="Board view"
|
|
aria-pressed={view === "board"}
|
|
data-testid="mobile-view-toggle-board"
|
|
>
|
|
<LayoutGrid size={16} />
|
|
</button>
|
|
<button
|
|
className={`view-toggle-btn${view === "list" ? " active" : ""}`}
|
|
onClick={() => onChangeView("list")}
|
|
title="List view"
|
|
aria-label="List view"
|
|
aria-pressed={view === "list"}
|
|
data-testid="mobile-view-toggle-list"
|
|
>
|
|
<List size={16} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Mobile Search Trigger - only on mobile, show trigger button in header */}
|
|
{onSearchChange && isMobile && (hideFullNav || view === "board" || view === "list") && !shouldShowMobileSearch && (
|
|
<button
|
|
className="btn-icon mobile-search-trigger"
|
|
onClick={handleMobileSearchToggle}
|
|
title="Open search"
|
|
aria-label="Open search"
|
|
aria-expanded={false}
|
|
data-testid="mobile-header-search-btn"
|
|
>
|
|
<Search size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{/* Desktop/Tablet Search Toggle - show icon when search is available but hidden */}
|
|
{canShowNonMobileSearchToggle && (
|
|
<button
|
|
className="btn-icon"
|
|
onClick={handleNonMobileSearchToggle}
|
|
title="Open search"
|
|
aria-label="Open search"
|
|
data-testid="desktop-header-search-btn"
|
|
>
|
|
<Search size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{/* Usage button on mobile when mobile bottom nav is active */}
|
|
{isMobile && hideFullNav && onOpenUsage && (
|
|
<button
|
|
className="btn-icon"
|
|
onClick={(event) => onOpenUsage(event.currentTarget.getBoundingClientRect())}
|
|
title="View usage"
|
|
data-testid="mobile-header-usage-btn"
|
|
>
|
|
<Activity size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{/* View Toggle - always inline, even on mobile */}
|
|
{!hideFullNav && onChangeView && (
|
|
<div className="view-toggle">
|
|
<button
|
|
className={`view-toggle-btn${view === "board" ? " active" : ""}`}
|
|
onClick={() => onChangeView("board")}
|
|
title="Board view"
|
|
aria-label="Board view"
|
|
aria-pressed={view === "board"}
|
|
>
|
|
<LayoutGrid size={16} />
|
|
</button>
|
|
<button
|
|
className={`view-toggle-btn${view === "list" ? " active" : ""}`}
|
|
onClick={() => onChangeView("list")}
|
|
title="List view"
|
|
aria-label="List view"
|
|
aria-pressed={view === "list"}
|
|
>
|
|
<List size={16} />
|
|
</button>
|
|
{showAgentsTab && (
|
|
<button
|
|
className={`view-toggle-btn${view === "agents" ? " active" : ""}`}
|
|
onClick={() => onChangeView("agents")}
|
|
title="Agents view"
|
|
aria-label="Agents view"
|
|
aria-pressed={view === "agents"}
|
|
>
|
|
<Bot size={16} />
|
|
</button>
|
|
)}
|
|
<button
|
|
className={`view-toggle-btn${view === "missions" ? " active" : ""}`}
|
|
onClick={() => onChangeView("missions")}
|
|
title="Missions view"
|
|
aria-label="Missions view"
|
|
aria-pressed={view === "missions"}
|
|
>
|
|
<Target size={16} />
|
|
</button>
|
|
<button
|
|
className={`view-toggle-btn${view === "chat" ? " active" : ""}`}
|
|
onClick={() => onChangeView("chat")}
|
|
title="Chat view"
|
|
aria-label="Chat view"
|
|
aria-pressed={view === "chat"}
|
|
>
|
|
<MessageSquare size={16} />
|
|
</button>
|
|
<button
|
|
className={`view-toggle-btn${view === "documents" ? " active" : ""}`}
|
|
onClick={() => onChangeView("documents")}
|
|
title="Documents view"
|
|
aria-label="Documents view"
|
|
aria-pressed={view === "documents"}
|
|
>
|
|
<FileText size={16} />
|
|
</button>
|
|
<button
|
|
className={`view-toggle-btn${view === "mailbox" ? " active" : ""}`}
|
|
onClick={() => onChangeView("mailbox")}
|
|
title="Mailbox view"
|
|
aria-label="Mailbox view"
|
|
aria-pressed={view === "mailbox"}
|
|
>
|
|
<Mail size={16} />
|
|
</button>
|
|
{pluginDashboardViews
|
|
.filter((entry) => entry.view.placement === "primary")
|
|
.sort((a, b) => (a.view.order ?? Number.MAX_SAFE_INTEGER) - (b.view.order ?? Number.MAX_SAFE_INTEGER))
|
|
.map((entry) => {
|
|
const pluginTaskView = buildPluginTaskViewId(entry.pluginId, entry.view.viewId);
|
|
const PluginIcon = getPluginNavIcon(entry.view.icon);
|
|
return (
|
|
<button
|
|
key={`${entry.pluginId}:${entry.view.viewId}`}
|
|
className={`view-toggle-btn${view === pluginTaskView ? " active" : ""}`}
|
|
onClick={() => onChangeView(pluginTaskView)}
|
|
title={`${entry.view.label} view`}
|
|
aria-label={`${entry.view.label} view`}
|
|
aria-pressed={view === pluginTaskView}
|
|
data-testid={`view-toggle-plugin-${entry.pluginId}-${entry.view.viewId}`}
|
|
>
|
|
<PluginIcon size={16} />
|
|
</button>
|
|
);
|
|
})}
|
|
{hasViewOverflowItems && (
|
|
<>
|
|
<button
|
|
ref={viewOverflowTriggerRef}
|
|
className={`view-toggle-btn${["research", "skills", "roadmaps", "insights", "memory", "dev-server", "devserver"].includes(view) || (todosEnabled && todosOpen) || view.startsWith("plugin:") ? " active" : ""}`}
|
|
onClick={() => setIsViewOverflowOpen((prev) => !prev)}
|
|
title="More views"
|
|
aria-label="More views"
|
|
aria-haspopup="menu"
|
|
aria-expanded={isViewOverflowOpen}
|
|
data-testid="view-toggle-overflow-trigger"
|
|
>
|
|
<ChevronDown size={12} />
|
|
</button>
|
|
{isViewOverflowOpen && (
|
|
<div
|
|
ref={viewOverflowRef}
|
|
className="view-toggle-overflow-menu"
|
|
role="menu"
|
|
aria-label="More views"
|
|
>
|
|
{experimentalFeatures?.researchView && (
|
|
<button
|
|
className={`view-toggle-overflow-item${view === "research" ? " active" : ""}`}
|
|
onClick={() => {
|
|
onChangeView("research");
|
|
setIsViewOverflowOpen(false);
|
|
}}
|
|
role="menuitem"
|
|
data-testid="view-overflow-research"
|
|
>
|
|
<Search size={14} />
|
|
<span>Research</span>
|
|
</button>
|
|
)}
|
|
{experimentalFeatures?.insights && (
|
|
<button
|
|
className={`view-toggle-overflow-item${view === "insights" ? " active" : ""}`}
|
|
onClick={() => {
|
|
onChangeView("insights");
|
|
setIsViewOverflowOpen(false);
|
|
}}
|
|
role="menuitem"
|
|
data-testid="view-overflow-insights"
|
|
>
|
|
<Sparkles size={14} />
|
|
<span>Insights</span>
|
|
</button>
|
|
)}
|
|
{experimentalFeatures?.roadmap && !hasRoadmapsPluginView && (
|
|
<button
|
|
className={`view-toggle-overflow-item${view === "roadmaps" ? " active" : ""}`}
|
|
onClick={() => {
|
|
onChangeView("roadmaps");
|
|
setIsViewOverflowOpen(false);
|
|
}}
|
|
role="menuitem"
|
|
data-testid="view-overflow-roadmaps"
|
|
>
|
|
<span>Roadmaps</span>
|
|
</button>
|
|
)}
|
|
{showSkillsTab && (
|
|
<button
|
|
className={`view-toggle-overflow-item${view === "skills" ? " active" : ""}`}
|
|
onClick={() => {
|
|
onChangeView("skills");
|
|
setIsViewOverflowOpen(false);
|
|
}}
|
|
role="menuitem"
|
|
data-testid="view-overflow-skills"
|
|
>
|
|
<Zap size={14} />
|
|
<span>Skills</span>
|
|
</button>
|
|
)}
|
|
{experimentalFeatures?.memoryView && (
|
|
<button
|
|
className={`view-toggle-overflow-item${view === "memory" ? " active" : ""}`}
|
|
onClick={() => {
|
|
onChangeView("memory");
|
|
setIsViewOverflowOpen(false);
|
|
}}
|
|
role="menuitem"
|
|
data-testid="view-toggle-memory"
|
|
>
|
|
<Brain size={14} />
|
|
<span>Memory</span>
|
|
</button>
|
|
)}
|
|
{experimentalFeatures?.devServerView && (
|
|
<button
|
|
className={`view-toggle-overflow-item${view === "dev-server" || view === "devserver" ? " active" : ""}`}
|
|
onClick={() => {
|
|
onChangeView("devserver");
|
|
setIsViewOverflowOpen(false);
|
|
}}
|
|
role="menuitem"
|
|
data-testid="view-toggle-devserver"
|
|
>
|
|
<Monitor size={14} />
|
|
<span>Dev Server</span>
|
|
<span className="visually-hidden" data-testid="view-toggle-dev-server" />
|
|
</button>
|
|
)}
|
|
{todosEnabled && onOpenTodos && (
|
|
<button
|
|
className={`view-toggle-overflow-item${todosOpen ? " active" : ""}`}
|
|
onClick={() => {
|
|
onOpenTodos();
|
|
setIsViewOverflowOpen(false);
|
|
}}
|
|
role="menuitem"
|
|
data-testid="view-overflow-todos"
|
|
>
|
|
<CheckSquare size={14} />
|
|
<span>Todos</span>
|
|
</button>
|
|
)}
|
|
{pluginDashboardViews
|
|
.filter((entry) => entry.view.placement !== "primary")
|
|
.sort((a, b) => (a.view.order ?? Number.MAX_SAFE_INTEGER) - (b.view.order ?? Number.MAX_SAFE_INTEGER))
|
|
.map((entry) => {
|
|
const pluginTaskView = buildPluginTaskViewId(entry.pluginId, entry.view.viewId);
|
|
const PluginIcon = getPluginNavIcon(entry.view.icon);
|
|
return (
|
|
<button
|
|
key={`${entry.pluginId}:${entry.view.viewId}`}
|
|
className={`view-toggle-overflow-item${view === pluginTaskView ? " active" : ""}`}
|
|
onClick={() => {
|
|
onChangeView(pluginTaskView);
|
|
setIsViewOverflowOpen(false);
|
|
}}
|
|
role="menuitem"
|
|
data-testid={`view-overflow-plugin-${entry.pluginId}-${entry.view.viewId}`}
|
|
>
|
|
<PluginIcon size={14} />
|
|
<span>{entry.view.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Usage button - desktop only (moved to overflow on mobile/tablet) */}
|
|
{!isCompact && onOpenUsage && (
|
|
<button
|
|
className="btn-icon"
|
|
onClick={(event) => onOpenUsage(event.currentTarget.getBoundingClientRect())}
|
|
title="View usage"
|
|
data-testid="desktop-header-usage-btn"
|
|
>
|
|
<Activity size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{/* System Stats button - desktop only */}
|
|
{!isCompact && onOpenSystemStats && (
|
|
<button className="btn-icon" onClick={onOpenSystemStats} title="System Stats" data-testid="desktop-header-system-stats-btn">
|
|
<Monitor size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{/* Activity Log button - desktop only (moved to overflow on mobile/tablet) */}
|
|
{!isCompact && onOpenActivityLog && (
|
|
<button className="btn-icon" onClick={onOpenActivityLog} title="View Activity Log">
|
|
<History size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{/* Desktop actions */}
|
|
{!isCompact && !isElectron && (
|
|
<button className="btn-icon" onClick={onOpenGitHubImport} title="Import from GitHub">
|
|
<GitHubLogo size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{!isCompact && (
|
|
<button
|
|
className={`btn-icon${activePlanningSessionCount > 0 ? " btn-icon--has-indicator" : ""}`}
|
|
onClick={activePlanningSessionCount > 0 && onResumePlanning ? onResumePlanning : onOpenPlanning}
|
|
title={activePlanningSessionCount > 0 ? "Resume planning session" : "Create a task with AI planning"}
|
|
data-testid="planning-btn"
|
|
style={{ position: "relative" }}
|
|
>
|
|
<Lightbulb size={16} />
|
|
{activePlanningSessionCount > 0 && (
|
|
<span
|
|
className="header-badge header-badge--pulse"
|
|
data-testid="planning-badge"
|
|
aria-label={`${activePlanningSessionCount} active planning session${activePlanningSessionCount !== 1 ? "s" : ""}`}
|
|
>
|
|
{activePlanningSessionCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
)}
|
|
|
|
{/* Terminal split button - desktop only (moved to overflow on mobile/tablet) */}
|
|
{!isCompact && (
|
|
<div className="terminal-split-btn" ref={scriptsSplitButtonRef}>
|
|
<button
|
|
className="btn-icon btn-icon--terminal terminal-split-btn__main"
|
|
onClick={onToggleTerminal}
|
|
title="Open Terminal"
|
|
data-testid="terminal-toggle-btn"
|
|
>
|
|
<Terminal size={16} />
|
|
</button>
|
|
{onOpenScripts && onRunScript && (
|
|
<>
|
|
<span className="terminal-split-btn__divider" />
|
|
<button
|
|
ref={scriptsChevronButtonRef}
|
|
className={`btn-icon terminal-split-btn__chevron${isScriptsOpen ? " btn-icon--active" : ""}`}
|
|
onClick={() => setIsScriptsOpen((prev) => !prev)}
|
|
title="Scripts"
|
|
aria-haspopup="listbox"
|
|
aria-expanded={isScriptsOpen}
|
|
aria-label="Quick scripts"
|
|
data-testid="scripts-btn"
|
|
>
|
|
<ChevronDown size={12} className={`quick-scripts-dropdown__trigger-chevron${isScriptsOpen ? " rotate" : ""}`} />
|
|
</button>
|
|
{isScriptsOpen && (
|
|
<div
|
|
ref={scriptsMenuRef}
|
|
tabIndex={-1}
|
|
className="quick-scripts-dropdown__menu"
|
|
role="listbox"
|
|
aria-label="Scripts"
|
|
onKeyDown={handleScriptsDropdownKeyDown}
|
|
data-testid="quick-scripts-dropdown"
|
|
style={
|
|
scriptsDropdownPosition
|
|
? {
|
|
position: "fixed",
|
|
top: `${scriptsDropdownPosition.top}px`,
|
|
left: `${scriptsDropdownPosition.left}px`,
|
|
width: `${scriptsDropdownPosition.width}px`,
|
|
right: "auto",
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
{scriptsLoading ? (
|
|
<div className="quick-scripts-dropdown__loading" data-testid="quick-scripts-loading">
|
|
<Loader2 size={16} className="animate-spin" />
|
|
<span>Loading scripts...</span>
|
|
</div>
|
|
) : scriptEntries.length === 0 ? (
|
|
<div className="quick-scripts-dropdown__empty" data-testid="quick-scripts-empty">
|
|
<div className="quick-scripts-dropdown__empty-icon">
|
|
<Terminal size={16} />
|
|
</div>
|
|
<p>No scripts configured</p>
|
|
<button
|
|
className="quick-scripts-dropdown__empty-action btn"
|
|
onClick={handleManageScripts}
|
|
>
|
|
Add your first script
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="quick-scripts-dropdown__list">
|
|
{scriptEntries.map(([name, command], index) => (
|
|
<button
|
|
key={name}
|
|
className={`quick-scripts-dropdown__item ${
|
|
highlightedScriptIndex === index ? "highlighted" : ""
|
|
}`}
|
|
onClick={() => handleRunQuickScript(name, command)}
|
|
role="option"
|
|
aria-selected={highlightedScriptIndex === index}
|
|
data-testid={`quick-script-item-${name}`}
|
|
>
|
|
<Play size={14} className="quick-scripts-dropdown__item-icon" />
|
|
<div className="quick-scripts-dropdown__item-info">
|
|
<span className="quick-scripts-dropdown__item-name">{name}</span>
|
|
<span className="quick-scripts-dropdown__item-command" title={command}>
|
|
{command.length > 50 ? `${command.slice(0, 50)}...` : command}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="quick-scripts-dropdown__footer">
|
|
<button
|
|
className={`quick-scripts-dropdown__manage ${
|
|
showScriptsFooter && highlightedScriptIndex === scriptEntries.length ? "highlighted" : ""
|
|
}`}
|
|
onClick={handleManageScripts}
|
|
data-testid="quick-scripts-manage"
|
|
>
|
|
<Settings size={14} />
|
|
<span>Manage Scripts...</span>
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Files button - desktop only (moved to overflow on mobile/tablet) */}
|
|
{!isCompact && onOpenFiles && (
|
|
<button
|
|
className={`btn-icon${filesOpen ? " btn-icon--active" : ""}`}
|
|
onClick={onOpenFiles}
|
|
title="Browse files"
|
|
data-testid="files-toggle-btn"
|
|
>
|
|
<Folder size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{!isCompact && todosEnabled && onOpenTodos && (
|
|
<button
|
|
className={`btn-icon${todosOpen ? " btn-icon--active" : ""}`}
|
|
onClick={onOpenTodos}
|
|
title="Open todos"
|
|
data-testid="todos-toggle-btn"
|
|
>
|
|
<CheckSquare size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{/* Git Manager button - desktop only (moved to overflow on mobile/tablet) */}
|
|
{!isCompact && onOpenGitManager && (
|
|
<button
|
|
className="btn-icon"
|
|
onClick={onOpenGitManager}
|
|
title="Git Manager"
|
|
data-testid="git-manager-btn"
|
|
>
|
|
<GitBranch size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{/* Workflow Steps - desktop only (moved to overflow on mobile/tablet) */}
|
|
{!isCompact && onOpenWorkflowSteps && (
|
|
<button
|
|
className="btn-icon"
|
|
onClick={onOpenWorkflowSteps}
|
|
title="Workflow Steps"
|
|
data-testid="workflow-steps-btn"
|
|
>
|
|
<Workflow size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{/* Desktop overflow menu for Nodes and Schedules */}
|
|
{!isCompact && (
|
|
<div style={{ position: "relative" }}>
|
|
<button
|
|
ref={desktopOverflowTriggerRef}
|
|
className="btn-icon"
|
|
onClick={() => setIsDesktopOverflowOpen((prev) => !prev)}
|
|
title="More actions"
|
|
aria-label="More actions"
|
|
aria-expanded={isDesktopOverflowOpen}
|
|
aria-haspopup="menu"
|
|
data-testid="desktop-overflow-trigger"
|
|
>
|
|
<MoreHorizontal size={16} />
|
|
</button>
|
|
{isDesktopOverflowOpen && (
|
|
<div
|
|
ref={desktopOverflowRef}
|
|
className="desktop-overflow-menu"
|
|
role="menu"
|
|
aria-label="More actions"
|
|
>
|
|
{onOpenNodes && showNodesButton !== false && (
|
|
<button
|
|
className="view-toggle-overflow-item"
|
|
onClick={() => {
|
|
onOpenNodes();
|
|
setIsDesktopOverflowOpen(false);
|
|
}}
|
|
role="menuitem"
|
|
data-testid="desktop-overflow-nodes-btn"
|
|
>
|
|
<Server size={14} />
|
|
<span>Nodes</span>
|
|
</button>
|
|
)}
|
|
<button
|
|
className="view-toggle-overflow-item"
|
|
onClick={() => {
|
|
handleOverflowAction(onOpenSchedules);
|
|
setIsDesktopOverflowOpen(false);
|
|
}}
|
|
role="menuitem"
|
|
data-testid="desktop-overflow-schedules-btn"
|
|
>
|
|
<Clock size={14} />
|
|
<span>Automation</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Engine control split-button: main=stop/start, chevron dropdown=pause triage */}
|
|
<div className="engine-control-split-btn" ref={engineMenuRef}>
|
|
<button
|
|
className={`btn-icon engine-control-split-btn__main${globalPaused ? " btn-icon--stopped" : ""}`}
|
|
onClick={onToggleGlobalPause}
|
|
title={globalPaused ? "Start AI engine" : "Stop AI engine"}
|
|
data-testid="engine-control-main-btn"
|
|
>
|
|
{globalPaused ? <Play size={16} /> : <Square size={16} />}
|
|
</button>
|
|
<span className="engine-control-split-btn__divider" />
|
|
<button
|
|
className={`btn-icon engine-control-split-btn__chevron${isEngineMenuOpen ? " btn-icon--active" : ""}`}
|
|
onClick={() => setIsEngineMenuOpen((prev) => !prev)}
|
|
title="Engine options"
|
|
aria-haspopup="menu"
|
|
aria-expanded={isEngineMenuOpen}
|
|
data-testid="engine-control-chevron-btn"
|
|
>
|
|
<ChevronDown size={12} />
|
|
</button>
|
|
{isEngineMenuOpen && (
|
|
<div className="engine-control-split-btn__menu" role="menu">
|
|
<button
|
|
className={`engine-control-split-btn__menu-item${enginePaused ? " engine-control-split-btn__menu-item--active" : ""}`}
|
|
onClick={() => {
|
|
onToggleEnginePause?.();
|
|
setIsEngineMenuOpen(false);
|
|
}}
|
|
role="menuitem"
|
|
title={enginePaused ? "Resume scheduling" : "Pause triage"}
|
|
disabled={!!globalPaused}
|
|
data-testid="engine-control-pause-triage-btn"
|
|
>
|
|
{enginePaused ? <Play size={14} /> : <Pause size={14} />}
|
|
<span>{enginePaused ? "Resume scheduling" : "Pause triage"}</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Settings - always inline on desktop, placed after engine controls */}
|
|
{!isCompact && (
|
|
<button className="btn-icon" onClick={onOpenSettings} title="Settings">
|
|
<Settings size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{/* Plugin UI slot for header actions */}
|
|
<PluginSlot slotId="header-action" projectId={projectId} />
|
|
|
|
{/* Compact overflow menu trigger (mobile + tablet) */}
|
|
{isCompact && !hideFullNav && (
|
|
<button
|
|
ref={overflowButtonRef}
|
|
className="btn-icon compact-overflow-trigger"
|
|
onClick={handleOverflowToggle}
|
|
title="More header actions"
|
|
aria-label="More header actions"
|
|
aria-expanded={isOverflowMenuOpen}
|
|
aria-haspopup="menu"
|
|
>
|
|
<MoreHorizontal size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{/* Compact overflow menu (mobile + tablet) */}
|
|
{isCompact && !hideFullNav && isOverflowMenuOpen && (
|
|
<div
|
|
ref={overflowMenuRef}
|
|
className="mobile-overflow-menu"
|
|
role="menu"
|
|
aria-label="Additional header actions"
|
|
>
|
|
{/* Projects - in overflow on mobile */}
|
|
{projects.length >= 1 && onViewAllProjects && (
|
|
<button
|
|
className="mobile-overflow-item"
|
|
onClick={() => handleOverflowAction(onViewAllProjects)}
|
|
role="menuitem"
|
|
data-testid="overflow-project-selector-btn"
|
|
>
|
|
<Grid3X3 size={16} />
|
|
<span>Projects</span>
|
|
</button>
|
|
)}
|
|
{/* Files - in overflow on mobile */}
|
|
{onOpenFiles && (
|
|
<button
|
|
className="mobile-overflow-item"
|
|
onClick={() => handleOverflowAction(onOpenFiles)}
|
|
role="menuitem"
|
|
data-testid="overflow-files-btn"
|
|
>
|
|
<Folder size={16} />
|
|
<span>Browse Files</span>
|
|
</button>
|
|
)}
|
|
<button
|
|
className={`mobile-overflow-item${activePlanningSessionCount > 0 ? " mobile-overflow-item--has-indicator" : ""}`}
|
|
onClick={() => handleOverflowAction(activePlanningSessionCount > 0 && onResumePlanning ? onResumePlanning : onOpenPlanning)}
|
|
role="menuitem"
|
|
data-testid="overflow-planning-btn"
|
|
>
|
|
<span className="mobile-overflow-icon-wrapper">
|
|
<Lightbulb size={16} />
|
|
{activePlanningSessionCount > 0 && (
|
|
<span className="header-badge header-badge--pulse" data-testid="overflow-planning-badge">
|
|
{activePlanningSessionCount}
|
|
</span>
|
|
)}
|
|
</span>
|
|
<span>{activePlanningSessionCount > 0 ? `Resume planning session (${activePlanningSessionCount})` : "Create a task with AI planning"}</span>
|
|
</button>
|
|
{/* Git Manager - in overflow on mobile */}
|
|
{onOpenGitManager && (
|
|
<button
|
|
className="mobile-overflow-item"
|
|
onClick={() => handleOverflowAction(onOpenGitManager)}
|
|
role="menuitem"
|
|
data-testid="overflow-git-btn"
|
|
>
|
|
<GitBranch size={16} />
|
|
<span>Git Manager</span>
|
|
</button>
|
|
)}
|
|
{/* Nodes - in overflow on mobile */}
|
|
{onOpenNodes && showNodesButton !== false && (
|
|
<button
|
|
className="mobile-overflow-item"
|
|
onClick={() => handleOverflowAction(onOpenNodes)}
|
|
role="menuitem"
|
|
data-testid="overflow-nodes-btn"
|
|
>
|
|
<Server size={16} />
|
|
<span>Nodes</span>
|
|
</button>
|
|
)}
|
|
{!isElectron && (
|
|
<button
|
|
className="mobile-overflow-item"
|
|
onClick={() => handleOverflowAction(onOpenGitHubImport)}
|
|
role="menuitem"
|
|
>
|
|
<GitHubLogo size={16} />
|
|
<span>Import from GitHub</span>
|
|
</button>
|
|
)}
|
|
<div
|
|
className="mobile-overflow-group"
|
|
data-testid="overflow-terminal-group"
|
|
>
|
|
<div className="mobile-overflow-split-row">
|
|
<button
|
|
className="mobile-overflow-item mobile-overflow-split-primary"
|
|
onClick={() => handleOverflowAction(onToggleTerminal)}
|
|
role="menuitem"
|
|
data-testid="overflow-terminal-primary-btn"
|
|
>
|
|
<Terminal size={16} />
|
|
<span>Terminal</span>
|
|
</button>
|
|
<button
|
|
className="mobile-overflow-split-toggle"
|
|
onClick={() => setIsTerminalSubmenuOpen((prev) => !prev)}
|
|
role="menuitem"
|
|
aria-expanded={isTerminalSubmenuOpen}
|
|
aria-haspopup="menu"
|
|
aria-label="Show scripts"
|
|
data-testid="overflow-terminal-submenu-toggle"
|
|
>
|
|
<ChevronRight
|
|
size={14}
|
|
className={`mobile-overflow-chevron${isTerminalSubmenuOpen ? " mobile-overflow-chevron--open" : ""}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
{isTerminalSubmenuOpen && (
|
|
<div className="mobile-overflow-submenu" role="menu" aria-label="Scripts submenu">
|
|
{overflowScriptsLoading ? (
|
|
<div className="mobile-overflow-submenu-loading" data-testid="overflow-scripts-loading">
|
|
<Loader2 size={14} className="animate-spin" />
|
|
<span>Loading scripts…</span>
|
|
</div>
|
|
) : overflowScriptEntries.length > 0 ? (
|
|
<>
|
|
{overflowScriptEntries.map(([name, command]) => (
|
|
<button
|
|
key={name}
|
|
className="mobile-overflow-item mobile-overflow-subitem"
|
|
onClick={() => {
|
|
if (onRunScript) onRunScript(name, command);
|
|
setIsOverflowMenuOpen(false);
|
|
setIsTerminalSubmenuOpen(false);
|
|
}}
|
|
role="menuitem"
|
|
data-testid={`overflow-script-item-${name}`}
|
|
>
|
|
<Play size={14} />
|
|
<span>{name}</span>
|
|
</button>
|
|
))}
|
|
{onOpenScripts && (
|
|
<button
|
|
className="mobile-overflow-item mobile-overflow-subitem mobile-overflow-subitem--manage"
|
|
onClick={() => handleOverflowAction(onOpenScripts)}
|
|
role="menuitem"
|
|
data-testid="overflow-scripts-manage"
|
|
>
|
|
<FileCode size={14} />
|
|
<span>Manage Scripts…</span>
|
|
</button>
|
|
)}
|
|
</>
|
|
) : (
|
|
onOpenScripts && (
|
|
<button
|
|
className="mobile-overflow-item mobile-overflow-subitem"
|
|
onClick={() => handleOverflowAction(onOpenScripts)}
|
|
role="menuitem"
|
|
data-testid="overflow-scripts-manage"
|
|
>
|
|
<FileCode size={14} />
|
|
<span>No scripts — add one…</span>
|
|
</button>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<button
|
|
className="mobile-overflow-item"
|
|
onClick={() => handleOverflowAction(onOpenSchedules)}
|
|
role="menuitem"
|
|
data-testid="overflow-schedules-btn"
|
|
>
|
|
<Clock size={16} />
|
|
<span>Automation</span>
|
|
</button>
|
|
{/* Activity Log - in overflow on mobile */}
|
|
{onOpenActivityLog && (
|
|
<button
|
|
className="mobile-overflow-item"
|
|
onClick={() => handleOverflowAction(onOpenActivityLog)}
|
|
role="menuitem"
|
|
data-testid="overflow-activity-log-btn"
|
|
>
|
|
<History size={16} />
|
|
<span>View Activity Log</span>
|
|
</button>
|
|
)}
|
|
{/* Mailbox - in overflow on mobile */}
|
|
{onOpenMailbox && (
|
|
<button
|
|
className="mobile-overflow-item"
|
|
onClick={() => handleOverflowAction(onOpenMailbox)}
|
|
role="menuitem"
|
|
data-testid="overflow-mailbox-btn"
|
|
>
|
|
<Mail size={16} />
|
|
<span>Mailbox{mailboxUnreadCount > 0 ? ` (${mailboxUnreadCount})` : ""}</span>
|
|
</button>
|
|
)}
|
|
{/* Usage - in overflow on mobile */}
|
|
{onOpenUsage && (
|
|
<button
|
|
className="mobile-overflow-item"
|
|
onClick={(event) =>
|
|
handleOverflowAction(() => onOpenUsage(event.currentTarget.getBoundingClientRect()))
|
|
}
|
|
role="menuitem"
|
|
data-testid="overflow-usage-btn"
|
|
>
|
|
<Activity size={16} />
|
|
<span>View Usage</span>
|
|
</button>
|
|
)}
|
|
{/* Workflow Steps - in overflow on mobile */}
|
|
{onOpenWorkflowSteps && (
|
|
<button
|
|
className="mobile-overflow-item"
|
|
onClick={() => handleOverflowAction(onOpenWorkflowSteps)}
|
|
role="menuitem"
|
|
data-testid="overflow-workflow-steps-btn"
|
|
>
|
|
<Workflow size={16} />
|
|
<span>Workflow Steps</span>
|
|
</button>
|
|
)}
|
|
{/* Settings - always last in overflow menu */}
|
|
<button
|
|
className="mobile-overflow-item"
|
|
onClick={() => handleOverflowAction(onOpenSettings)}
|
|
role="menuitem"
|
|
>
|
|
<Settings size={16} />
|
|
<span>Settings</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
|
|
{/* Desktop/Tablet Search - floating below header, in board or list view */}
|
|
{canShowNonMobileSearch && shouldShowNonMobileSearch && (
|
|
<div className="header-floating-search">
|
|
<div className="header-search">
|
|
<Search size={14} className="header-search-icon" />
|
|
<input
|
|
autoFocus
|
|
type="text"
|
|
placeholder="Search tasks..."
|
|
value={searchQuery}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
className="header-search-input"
|
|
/>
|
|
<button
|
|
className="header-search-clear"
|
|
onClick={handleNonMobileSearchClose}
|
|
aria-label="Close search"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Mobile Search Expanded - floating below header */}
|
|
{onSearchChange && isMobile && shouldShowMobileSearch && (
|
|
<div className="header-floating-search">
|
|
<div
|
|
ref={mobileSearchRef}
|
|
className="header-search mobile-search-expanded"
|
|
>
|
|
<Search size={14} className="header-search-icon" />
|
|
<input
|
|
ref={mobileSearchInputRef}
|
|
autoFocus
|
|
type="text"
|
|
placeholder="Search tasks..."
|
|
value={searchQuery}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
className="header-search-input"
|
|
/>
|
|
<button
|
|
className="header-search-clear"
|
|
onClick={handleMobileSearchClose}
|
|
aria-label="Close search"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|