claudeup 1.8.0 → 3.3.0

package/src/ui/components/CategoryHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+export function CategoryHeader({ title, status, statusColor = "green", expanded = true, count, }) {
+    const expandIcon = expanded ? "▼" : "▶";
+    const countBadge = count !== undefined ? ` (${count})` : "";
+    const statusText = status ? ` ${status}` : "";
+    // Simple format without dynamic line calculation
+    return (_jsxs("text", { children: [_jsx("span", { fg: "#666666", children: expandIcon }), _jsx("span", { fg: "white", children: _jsxs("strong", { children: [" ", title] }) }), _jsx("span", { fg: "#666666", children: countBadge }), _jsx("span", { fg: "#666666", children: " \u2500\u2500\u2500\u2500" }), _jsx("span", { fg: statusColor, children: statusText })] }));
+}
+export default CategoryHeader;

package/src/ui/components/CategoryHeader.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+interface CategoryHeaderProps {
+	/** Category title */
+	title: string;
+	/** Status badge (e.g., "✓ Configured", "3 plugins") */
+	status?: string;
+	/** Status badge color */
+	statusColor?: string;
+	/** Whether category is expanded */
+	expanded?: boolean;
+	/** Number of items in category */
+	count?: number;
+}
+
+export function CategoryHeader({
+	title,
+	status,
+	statusColor = "green",
+	expanded = true,
+	count,
+}: CategoryHeaderProps) {
+	const expandIcon = expanded ? "▼" : "▶";
+	const countBadge = count !== undefined ? ` (${count})` : "";
+	const statusText = status ? ` ${status}` : "";
+
+	// Simple format without dynamic line calculation
+	return (
+		<text>
+			<span fg="#666666">{expandIcon}</span>
+			<span fg="white">
+				<strong> {title}</strong>
+			</span>
+			<span fg="#666666">{countBadge}</span>
+			<span fg="#666666"> ────</span>
+			<span fg={statusColor}>{statusText}</span>
+		</text>
+	);
+}
+
+export default CategoryHeader;

package/{dist → src}/ui/components/ScrollableList.js

@@ -1,12 +1,26 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
 import { useState, useEffect, useMemo } from 'react';
-import { Box, Text } from 'ink';
-export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, showScrollIndicators = true, }) {
+import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
+export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, showScrollIndicators = true, onSelect, focused = false, }) {
     const [scrollOffset, setScrollOffset] = useState(0);
+    // Handle keyboard navigation
+    useKeyboardHandler((input, key) => {
+        if (!focused || !onSelect)
+            return;
+        if (key.upArrow || input === 'k') {
+            const newIndex = Math.max(0, selectedIndex - 1);
+            onSelect(newIndex);
+        }
+        else if (key.downArrow || input === 'j') {
+            const newIndex = Math.min(items.length - 1, selectedIndex + 1);
+            onSelect(newIndex);
+        }
+    });
     // Account for scroll indicators in available space
     const hasItemsAbove = scrollOffset > 0;
     const hasItemsBelow = scrollOffset + maxHeight < items.length;
-    const indicatorLines = (showScrollIndicators && hasItemsAbove ? 1 : 0) + (showScrollIndicators && hasItemsBelow ? 1 : 0);
+    const indicatorLines = (showScrollIndicators && hasItemsAbove ? 1 : 0) +
+        (showScrollIndicators && hasItemsBelow ? 1 : 0);
     const effectiveMaxHeight = Math.max(1, maxHeight - indicatorLines);
     // Adjust scroll offset to keep selected item visible
     useEffect(() => {
@@ -29,7 +43,6 @@ export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, sh
         }));
     }, [items, scrollOffset, effectiveMaxHeight]);
     const itemsBelow = items.length - scrollOffset - effectiveMaxHeight;
-    return (_jsxs(Box, { flexDirection: "column", children: [showScrollIndicators && hasItemsAbove && (_jsxs(Text, { color: "cyan", children: ["\u2191 ", scrollOffset, " more"] })), visibleItems.map(({ item, originalIndex }) => (_jsx(Box, { width: "100%", overflow: "hidden", children: renderItem(item, originalIndex, originalIndex === selectedIndex) }, originalIndex))), showScrollIndicators && hasItemsBelow && (_jsxs(Text, { color: "cyan", children: ["\u2193 ", itemsBelow, " more"] }))] }));
+    return (_jsxs("box", { flexDirection: "column", children: [showScrollIndicators && hasItemsAbove && (_jsxs("text", { fg: "cyan", children: ["\u2191 ", scrollOffset, " more"] })), visibleItems.map(({ item, originalIndex }) => (_jsx("box", { width: "100%", overflow: "hidden", children: renderItem(item, originalIndex, originalIndex === selectedIndex) }, originalIndex))), showScrollIndicators && hasItemsBelow && (_jsxs("text", { fg: "cyan", children: ["\u2193 ", itemsBelow, " more"] }))] }));
 }
 export default ScrollableList;
-//# sourceMappingURL=ScrollableList.js.map

package/src/ui/components/ScrollableList.tsx

@@ -0,0 +1,98 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
+
+interface ScrollableListProps<T> {
+	/** Array of items to display */
+	items: T[];
+	/** Currently selected index */
+	selectedIndex: number;
+	/** Render function for each item */
+	renderItem: (item: T, index: number, isSelected: boolean) => React.ReactNode;
+	/** Maximum visible height (number of lines) - REQUIRED for proper rendering */
+	maxHeight: number;
+	/** Show scroll indicators */
+	showScrollIndicators?: boolean;
+	/** Called when selection changes (arrow keys) */
+	onSelect?: (index: number) => void;
+	/** Whether this list should receive keyboard input */
+	focused?: boolean;
+}
+
+export function ScrollableList<T>({
+	items,
+	selectedIndex,
+	renderItem,
+	maxHeight,
+	showScrollIndicators = true,
+	onSelect,
+	focused = false,
+}: ScrollableListProps<T>) {
+	const [scrollOffset, setScrollOffset] = useState(0);
+
+	// Handle keyboard navigation
+	useKeyboardHandler((input, key) => {
+		if (!focused || !onSelect) return;
+
+		if (key.upArrow || input === 'k') {
+			const newIndex = Math.max(0, selectedIndex - 1);
+			onSelect(newIndex);
+		} else if (key.downArrow || input === 'j') {
+			const newIndex = Math.min(items.length - 1, selectedIndex + 1);
+			onSelect(newIndex);
+		}
+	});
+
+	// Account for scroll indicators in available space
+	const hasItemsAbove = scrollOffset > 0;
+	const hasItemsBelow = scrollOffset + maxHeight < items.length;
+	const indicatorLines =
+		(showScrollIndicators && hasItemsAbove ? 1 : 0) +
+		(showScrollIndicators && hasItemsBelow ? 1 : 0);
+	const effectiveMaxHeight = Math.max(1, maxHeight - indicatorLines);
+
+	// Adjust scroll offset to keep selected item visible
+	useEffect(() => {
+		if (selectedIndex < scrollOffset) {
+			// Selected is above viewport - scroll up
+			setScrollOffset(selectedIndex);
+		} else if (selectedIndex >= scrollOffset + effectiveMaxHeight) {
+			// Selected is below viewport - scroll down
+			setScrollOffset(selectedIndex - effectiveMaxHeight + 1);
+		}
+	}, [selectedIndex, effectiveMaxHeight, scrollOffset]);
+
+	// Calculate visible items - strictly limited to effectiveMaxHeight
+	const visibleItems = useMemo(() => {
+		const start = scrollOffset;
+		const end = Math.min(scrollOffset + effectiveMaxHeight, items.length);
+		return items.slice(start, end).map((item, idx) => ({
+			item,
+			originalIndex: start + idx,
+		}));
+	}, [items, scrollOffset, effectiveMaxHeight]);
+
+	const itemsBelow = items.length - scrollOffset - effectiveMaxHeight;
+
+	return (
+		<box flexDirection="column">
+			{/* Scroll up indicator */}
+			{showScrollIndicators && hasItemsAbove && (
+				<text fg="cyan">↑ {scrollOffset} more</text>
+			)}
+
+			{/* Visible items - strictly limited */}
+			{visibleItems.map(({ item, originalIndex }) => (
+				<box key={originalIndex} width="100%" overflow="hidden">
+					{renderItem(item, originalIndex, originalIndex === selectedIndex)}
+				</box>
+			))}
+
+			{/* Scroll down indicator */}
+			{showScrollIndicators && hasItemsBelow && (
+				<text fg="cyan">↓ {itemsBelow} more</text>
+			)}
+		</box>
+	);
+}
+
+export default ScrollableList;

package/src/ui/components/SearchInput.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useKeyboardHandler } from '../hooks/useKeyboardHandler.js';
+export function SearchInput({ value, onChange, placeholder = 'Search...', isActive, onExit, onSubmit, }) {
+    // Handle keyboard shortcuts when active
+    useKeyboardHandler((_input, key) => {
+        if (!isActive)
+            return;
+        if (key.escape) {
+            onExit?.();
+            return;
+        }
+        if (key.return) {
+            onSubmit?.();
+            return;
+        }
+    });
+    return (_jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: "cyan", children: "\u276F " }), _jsx("input", { value: value, onChange: onChange, placeholder: placeholder, focused: isActive, width: 40 })] }));
+}
+export default SearchInput;

package/src/ui/components/SearchInput.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useKeyboardHandler } from '../hooks/useKeyboardHandler.js';
+
+interface SearchInputProps {
+	/** Current search value */
+	value: string;
+	/** Called when value changes */
+	onChange: (value: string) => void;
+	/** Placeholder text when empty */
+	placeholder?: string;
+	/** Whether the input is focused/active */
+	isActive: boolean;
+	/** Called when user presses escape to exit search */
+	onExit?: () => void;
+	/** Called when user presses enter */
+	onSubmit?: () => void;
+}
+
+export function SearchInput({
+	value,
+	onChange,
+	placeholder = 'Search...',
+	isActive,
+	onExit,
+	onSubmit,
+}: SearchInputProps) {
+	// Handle keyboard shortcuts when active
+	useKeyboardHandler((_input, key) => {
+		if (!isActive) return;
+
+		if (key.escape) {
+			onExit?.();
+			return;
+		}
+
+		if (key.return) {
+			onSubmit?.();
+			return;
+		}
+	});
+
+	return (
+		<box flexDirection="row">
+			<text fg="cyan">❯ </text>
+			<input
+				value={value}
+				onChange={onChange}
+				placeholder={placeholder}
+				focused={isActive}
+				width={40}
+			/>
+		</box>
+	);
+}
+
+export default SearchInput;

package/src/ui/components/StyledText.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+/**
+ * StyledText - Utility component to simplify text styling with OpenTUI
+ *
+ * Converts props to nested tag pattern required by OpenTUI.
+ *
+ * Example:
+ *   <StyledText bold color="green">Success</StyledText>
+ *   becomes: <text fg="green"><strong>Success</strong></text>
+ */
+export function StyledText({ children, bold = false, color, bgColor, dim = false, italic = false, underline = false, inverse = false, }) {
+    let content = children;
+    // Apply text modifiers (innermost to outermost)
+    if (bold) {
+        content = _jsx("strong", { children: content });
+    }
+    if (italic) {
+        content = _jsx("em", { children: content });
+    }
+    if (underline) {
+        content = _jsx("u", { children: content });
+    }
+    // Note: dim and inverse use span with colors since OpenTUI doesn't have these as React elements
+    if (dim) {
+        content = _jsx("span", { fg: "#666666", children: content });
+    }
+    if (inverse) {
+        // Inverse effect approximated with contrasting colors
+        content = _jsx("span", { fg: "black", bg: "white", children: content });
+    }
+    // Apply colors (outer layer)
+    const textProps = {};
+    if (color)
+        textProps.fg = color;
+    if (bgColor)
+        textProps.bg = bgColor;
+    return _jsx("text", { ...textProps, children: content });
+}
+export default StyledText;

package/src/ui/components/StyledText.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+
+interface StyledTextProps {
+	/** Text content */
+	children: React.ReactNode;
+	/** Bold text */
+	bold?: boolean;
+	/** Foreground color */
+	color?: string;
+	/** Background color */
+	bgColor?: string;
+	/** Dimmed text */
+	dim?: boolean;
+	/** Italic text */
+	italic?: boolean;
+	/** Underlined text */
+	underline?: boolean;
+	/** Inverse colors */
+	inverse?: boolean;
+}
+
+/**
+ * StyledText - Utility component to simplify text styling with OpenTUI
+ *
+ * Converts props to nested tag pattern required by OpenTUI.
+ *
+ * Example:
+ *   <StyledText bold color="green">Success</StyledText>
+ *   becomes: <text fg="green"><strong>Success</strong></text>
+ */
+export function StyledText({
+	children,
+	bold = false,
+	color,
+	bgColor,
+	dim = false,
+	italic = false,
+	underline = false,
+	inverse = false,
+}: StyledTextProps) {
+	let content: React.ReactNode = children;
+
+	// Apply text modifiers (innermost to outermost)
+	if (bold) {
+		content = <strong>{content}</strong>;
+	}
+	if (italic) {
+		content = <em>{content}</em>;
+	}
+	if (underline) {
+		content = <u>{content}</u>;
+	}
+	// Note: dim and inverse use span with colors since OpenTUI doesn't have these as React elements
+	if (dim) {
+		content = <span fg="#666666">{content}</span>;
+	}
+	if (inverse) {
+		// Inverse effect approximated with contrasting colors
+		content = <span fg="black" bg="white">{content}</span>;
+	}
+
+	// Apply colors (outer layer)
+	const textProps: { fg?: string; bg?: string } = {};
+	if (color) textProps.fg = color;
+	if (bgColor) textProps.bg = bgColor;
+
+	return <text {...textProps}>{content}</text>;
+}
+
+export default StyledText;

package/src/ui/components/TabBar.js

@@ -0,0 +1,38 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
+const TABS = [
+    { key: '1', label: 'Plugins', screen: 'plugins' },
+    { key: '2', label: 'MCP', screen: 'mcp' },
+    { key: '3', label: 'Status', screen: 'statusline' },
+    { key: '4', label: 'Env', screen: 'env-vars' },
+    { key: '5', label: 'CLI', screen: 'cli-tools' },
+];
+export function TabBar({ currentScreen, onTabChange, }) {
+    // Handle number key shortcuts (1-5)
+    useKeyboardHandler((input, key) => {
+        if (!onTabChange)
+            return;
+        // Number keys 1-5
+        const tabIndex = Number.parseInt(input, 10);
+        if (tabIndex >= 1 && tabIndex <= TABS.length) {
+            const tab = TABS[tabIndex - 1];
+            if (tab && tab.screen !== currentScreen) {
+                onTabChange(tab.screen);
+            }
+        }
+        // Tab key to cycle through tabs
+        if (key.tab) {
+            const currentIndex = TABS.findIndex((t) => t.screen === currentScreen);
+            const nextIndex = key.shift
+                ? (currentIndex - 1 + TABS.length) % TABS.length
+                : (currentIndex + 1) % TABS.length;
+            onTabChange(TABS[nextIndex].screen);
+        }
+    });
+    return (_jsx("box", { flexDirection: "row", gap: 0, children: TABS.map((tab, index) => {
+            const isSelected = tab.screen === currentScreen;
+            const isLast = index === TABS.length - 1;
+            return (_jsxs("box", { flexDirection: "row", children: [isSelected ? (_jsx("box", { children: _jsx("text", { bg: "#7e57c2", fg: "white", children: _jsxs("strong", { children: [' ', tab.key, ":", tab.label, ' '] }) }) })) : (_jsx("box", { children: _jsxs("text", { fg: "gray", children: [' ', tab.key, ":", tab.label, ' '] }) })), !isLast && (_jsx("text", { fg: "#666666", children: "\u2502" }))] }, tab.key));
+        }) }));
+}
+export default TabBar;

package/src/ui/components/TabBar.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
+import type { Screen } from '../state/types.js';
+
+interface Tab {
+	key: string;
+	label: string;
+	screen: Screen;
+}
+
+const TABS: Tab[] = [
+	{ key: '1', label: 'Plugins', screen: 'plugins' },
+	{ key: '2', label: 'MCP', screen: 'mcp' },
+	{ key: '3', label: 'Status', screen: 'statusline' },
+	{ key: '4', label: 'Env', screen: 'env-vars' },
+	{ key: '5', label: 'CLI', screen: 'cli-tools' },
+];
+
+interface TabBarProps {
+	currentScreen: Screen;
+	onTabChange?: (screen: Screen) => void;
+}
+
+export function TabBar({
+	currentScreen,
+	onTabChange,
+}: TabBarProps) {
+	// Handle number key shortcuts (1-5)
+	useKeyboardHandler((input, key) => {
+		if (!onTabChange) return;
+
+		// Number keys 1-5
+		const tabIndex = Number.parseInt(input, 10);
+		if (tabIndex >= 1 && tabIndex <= TABS.length) {
+			const tab = TABS[tabIndex - 1];
+			if (tab && tab.screen !== currentScreen) {
+				onTabChange(tab.screen);
+			}
+		}
+
+		// Tab key to cycle through tabs
+		if (key.tab) {
+			const currentIndex = TABS.findIndex((t) => t.screen === currentScreen);
+			const nextIndex = key.shift
+				? (currentIndex - 1 + TABS.length) % TABS.length
+				: (currentIndex + 1) % TABS.length;
+			onTabChange(TABS[nextIndex].screen);
+		}
+	});
+
+	return (
+		<box flexDirection="row" gap={0}>
+			{TABS.map((tab, index) => {
+				const isSelected = tab.screen === currentScreen;
+				const isLast = index === TABS.length - 1;
+
+				return (
+					<box key={tab.key} flexDirection="row">
+						{/* Tab content */}
+						{isSelected ? (
+							<box>
+								<text bg="#7e57c2" fg="white">
+									<strong>
+										{' '}
+										{tab.key}:{tab.label}{' '}
+									</strong>
+								</text>
+							</box>
+						) : (
+							<box>
+								<text fg="gray">
+									{' '}
+									{tab.key}:{tab.label}{' '}
+								</text>
+							</box>
+						)}
+						{/* Separator */}
+						{!isLast && (
+							<text fg="#666666">│</text>
+						)}
+					</box>
+				);
+			})}
+		</box>
+	);
+}
+
+export default TabBar;

package/src/ui/components/layout/Panel.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+export function Panel({ title, children, borderColor = "#7e57c2", titleColor = "#7e57c2", width, height, flexGrow = 1, focused = false, }) {
+    const activeColor = focused ? "#7e57c2" : borderColor;
+    return (_jsxs("box", { flexDirection: "column", width: width, height: height, flexGrow: flexGrow, border: true, borderStyle: "single", borderColor: activeColor, padding: 1, children: [title && (_jsx("box", { marginBottom: 0, children: _jsx("text", { fg: titleColor, children: _jsx("strong", { children: title }) }) })), _jsx("box", { flexDirection: "column", flexGrow: 1, children: children })] }));
+}
+export default Panel;

package/src/ui/components/layout/Panel.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+interface PanelProps {
+	/** Panel title */
+	title?: string;
+	/** Panel content */
+	children: React.ReactNode;
+	/** Border color */
+	borderColor?: string;
+	/** Title color */
+	titleColor?: string;
+	/** Panel width - number or percentage like "50%" */
+	width?: number | `${number}%` | "auto";
+	/** Panel height - number or percentage like "50%" */
+	height?: number | `${number}%` | "auto";
+	/** Whether to use flexGrow */
+	flexGrow?: number;
+	/** Whether panel is focused/active */
+	focused?: boolean;
+}
+
+export function Panel({
+	title,
+	children,
+	borderColor = "#7e57c2",
+	titleColor = "#7e57c2",
+	width,
+	height,
+	flexGrow = 1,
+	focused = false,
+}: PanelProps) {
+	const activeColor = focused ? "#7e57c2" : borderColor;
+
+	return (
+		<box
+			flexDirection="column"
+			width={width}
+			height={height}
+			flexGrow={flexGrow}
+			border
+			borderStyle="single"
+			borderColor={activeColor}
+			padding={1}
+		>
+			{/* Title row */}
+			{title && (
+				<box marginBottom={0}>
+					<text fg={titleColor}>
+						<strong>{title}</strong>
+					</text>
+				</box>
+			)}
+
+			{/* Content */}
+			<box flexDirection="column" flexGrow={1}>
+				{children}
+			</box>
+		</box>
+	);
+}
+
+export default Panel;

package/src/ui/components/layout/ProgressBar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+export function ProgressBar({ message, current, total, }) {
+    const isDeterminate = current !== undefined && total !== undefined && total > 0;
+    if (isDeterminate) {
+        const barWidth = 20;
+        const filled = Math.round((current / total) * barWidth);
+        const empty = barWidth - filled;
+        const bar = "█".repeat(filled) + "░".repeat(empty);
+        return (_jsxs("box", { children: [_jsx("text", { fg: "cyan", children: "\u27F3" }), _jsxs("text", { children: [" ", message, " "] }), _jsxs("text", { fg: "cyan", children: ["[", bar, "] ", current, "/", total] })] }));
+    }
+    // Indeterminate progress
+    return (_jsxs("box", { children: [_jsx("text", { fg: "cyan", children: "\u27F3" }), _jsxs("text", { children: [" ", message] }), _jsx("text", { fg: "gray", children: " ..." })] }));
+}
+export default ProgressBar;

package/src/ui/components/layout/ProgressBar.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+interface ProgressBarProps {
+	/** Progress message */
+	message: string;
+	/** Current progress (if determinate) */
+	current?: number;
+	/** Total items (if determinate) */
+	total?: number;
+}
+
+export function ProgressBar({
+	message,
+	current,
+	total,
+}: ProgressBarProps) {
+	const isDeterminate =
+		current !== undefined && total !== undefined && total > 0;
+
+	if (isDeterminate) {
+		const barWidth = 20;
+		const filled = Math.round((current / total) * barWidth);
+		const empty = barWidth - filled;
+		const bar = "█".repeat(filled) + "░".repeat(empty);
+
+		return (
+			<box>
+				<text fg="cyan">⟳</text>
+				<text> {message} </text>
+				<text fg="cyan">
+					[{bar}] {current}/{total}
+				</text>
+			</box>
+		);
+	}
+
+	// Indeterminate progress
+	return (
+		<box>
+			<text fg="cyan">⟳</text>
+			<text> {message}</text>
+			<text fg="gray"> ...</text>
+		</box>
+	);
+}
+
+export default ProgressBar;

package/src/ui/components/layout/ScopeTabs.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+export function ScopeTabs({ scope, onToggle: _onToggle, toggleHint, }) {
+    const isProject = scope === "project";
+    return (_jsxs("box", { marginBottom: 1, flexDirection: "row", gap: 1, children: [_jsx("box", { children: isProject ? (_jsx("text", { bg: "cyan", fg: "black", children: _jsx("strong", { children: " \u25C6 Project " }) })) : (_jsx("text", { fg: "gray", children: " \u25CB Project " })) }), _jsx("box", { children: !isProject ? (_jsx("text", { bg: "magenta", fg: "white", children: _jsx("strong", { children: " \u25C6 Global " }) })) : (_jsx("text", { fg: "gray", children: " \u25CB Global " })) }), toggleHint && (_jsx("box", { marginLeft: 2, children: _jsxs("text", { fg: "#666666", children: ["(", toggleHint, ")"] }) }))] }));
+}
+export default ScopeTabs;