claudeup 4.19.0 → 4.22.0

package/src/ui/adapters/skillsAdapter.js

@@ -1,154 +0,0 @@
-/**
- * Builds the flat list of items for the SkillsScreen list panel.
- * Extracted from SkillsScreen so it can be tested independently.
- */
-export function buildSkillBrowserItems({ recommended, popular, installed, searchResults, query, isSearchLoading, skillSets = [], expandedSets = new Set(), }) {
-    const lowerQuery = query.toLowerCase();
-    const items = [];
-    // ── INSTALLED: always shown at top (if any) ──
-    const installedFiltered = lowerQuery
-        ? installed.filter((s) => s.name.toLowerCase().includes(lowerQuery))
-        : installed;
-    if (installedFiltered.length > 0) {
-        items.push({
-            id: "cat:installed",
-            kind: "category",
-            label: `Installed (${installedFiltered.length})`,
-            title: "Installed",
-            categoryKey: "installed",
-            count: installedFiltered.length,
-            tone: "purple",
-            star: "\u25CF ",
-        });
-        for (const skill of installedFiltered) {
-            items.push({
-                id: `skill:${skill.id}`,
-                kind: "skill",
-                label: skill.name,
-                skill,
-            });
-        }
-    }
-    // ── RECOMMENDED: skill sets + individual skills, all as first-class items ──
-    const filteredSets = lowerQuery
-        ? skillSets.filter((s) => {
-            if (s.name.toLowerCase().includes(lowerQuery))
-                return true;
-            if (s.description.toLowerCase().includes(lowerQuery))
-                return true;
-            if (s.loaded && s.skills.some((sk) => sk.name.toLowerCase().includes(lowerQuery)))
-                return true;
-            return false;
-        })
-        : skillSets;
-    const filteredRec = lowerQuery
-        ? recommended.filter((s) => s.name.toLowerCase().includes(lowerQuery) ||
-            (s.description || "").toLowerCase().includes(lowerQuery))
-        : recommended;
-    const recommendedCount = filteredSets.length + filteredRec.length;
-    items.push({
-        id: "cat:recommended",
-        kind: "category",
-        label: "Recommended",
-        title: "Recommended",
-        categoryKey: "recommended",
-        count: recommendedCount,
-        tone: "green",
-        star: "\u2605 ",
-    });
-    // Skill sets first within recommended
-    for (const set of filteredSets) {
-        const isExpanded = expandedSets.has(set.id);
-        items.push({
-            id: `skillset:${set.id}`,
-            kind: "skillset",
-            label: set.name,
-            skillSet: set,
-            expanded: isExpanded,
-        });
-        // When expanded, show child skills as indented skill items
-        if (isExpanded && set.loaded) {
-            const childSkills = lowerQuery
-                ? set.skills.filter((sk) => sk.name.toLowerCase().includes(lowerQuery))
-                : set.skills;
-            for (const skill of childSkills) {
-                items.push({
-                    id: `skill:${skill.id}`,
-                    kind: "skill",
-                    label: skill.name,
-                    skill,
-                    indent: 2,
-                });
-            }
-        }
-    }
-    // Then individual recommended skills
-    for (const skill of filteredRec) {
-        items.push({
-            id: `skill:${skill.id}`,
-            kind: "skill",
-            label: skill.name,
-            skill,
-        });
-    }
-    // ── SEARCH MODE ──
-    if (query.length >= 2) {
-        if (!isSearchLoading && searchResults.length > 0) {
-            const recNames = new Set(recommended.map((s) => s.name));
-            const deduped = searchResults
-                .filter((s) => !recNames.has(s.name))
-                .sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0));
-            if (deduped.length > 0) {
-                items.push({
-                    id: "cat:search",
-                    kind: "category",
-                    label: `Search (${deduped.length})`,
-                    title: "Search",
-                    categoryKey: "popular",
-                    count: deduped.length,
-                    tone: "teal",
-                });
-                for (const skill of deduped) {
-                    items.push({
-                        id: `skill:${skill.id}`,
-                        kind: "skill",
-                        label: skill.name,
-                        skill,
-                    });
-                }
-            }
-        }
-        return items;
-    }
-    // ── POPULAR (default, no search query) — only skills with meaningful stars ──
-    // Dedup by name — API can return same skill name from different repos
-    const seenPopular = new Set();
-    const popularDeduped = popular
-        .filter((s) => (s.stars ?? 0) >= 5)
-        .filter((s) => {
-        if (seenPopular.has(s.name))
-            return false;
-        seenPopular.add(s.name);
-        return true;
-    });
-    if (popularDeduped.length > 0) {
-        items.push({
-            id: "cat:popular",
-            kind: "category",
-            label: "Popular",
-            title: "Popular",
-            categoryKey: "popular",
-            count: popularDeduped.length,
-            tone: "teal",
-        });
-        for (const skill of popularDeduped) {
-            items.push({
-                id: `skill:${skill.id}`,
-                kind: "skill",
-                label: skill.name,
-                skill,
-            });
-        }
-    }
-    return items;
-}

package/src/ui/components/CategoryHeader.js

@@ -1,9 +0,0 @@
-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/EmptyFilterState.js

@@ -1,4 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
-export function EmptyFilterState({ query, entityName = "items", }) {
-    return (_jsxs("box", { flexDirection: "column", marginTop: 2, paddingLeft: 2, paddingRight: 2, children: [_jsxs("text", { fg: "yellow", children: ["No ", entityName, " found for \"", query, "\""] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: "Try a different search term, or if you think" }) }), _jsx("text", { fg: "gray", children: "this is a bug, report it at:" }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#5c9aff", children: "github.com/MadAppGang/magus/issues" }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: "Press Esc to clear the filter." }) })] }));
-}

package/src/ui/components/ScopeIndicator.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "@opentui/react/jsx-runtime";
-/**
- * Scope indicator for list items.
- * Shows colored letter badges when installed, empty space when not.
- *
- * Installed in user+project:  u p
- * Installed in project only:    p
- * Not installed:              (3 spaces)
- *
- * Colors match the detail panel: cyan=user, green=project, yellow=local
- */
-export function scopeIndicatorText(user, project, local) {
-    const segments = [
-        user
-            ? { char: "u", bg: "cyan", fg: "black" }
-            : { char: " ", bg: "", fg: "" },
-        project
-            ? { char: "p", bg: "green", fg: "black" }
-            : { char: " ", bg: "", fg: "" },
-        local
-            ? { char: "l", bg: "yellow", fg: "black" }
-            : { char: " ", bg: "", fg: "" },
-    ];
-    const text = segments.map((s) => s.char).join("");
-    return { text, segments };
-}
-export function ScopeIndicator({ user, project, local }) {
-    const { segments } = scopeIndicatorText(user, project, local);
-    return (_jsx("text", { children: segments.map((s, i) => s.bg ? (_jsx("span", { bg: s.bg, fg: s.fg, children: s.char }, i)) : (_jsx("span", { children: " " }, i))) }));
-}

package/src/ui/components/ScrollableList.js

@@ -1,36 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
-import { useState, useEffect, useMemo } from "react";
-export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, showScrollIndicators = true, getKey, }) {
-    const [scrollOffset, setScrollOffset] = useState(0);
-    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) {
-            setScrollOffset(selectedIndex);
-        }
-        else if (selectedIndex >= scrollOffset + effectiveMaxHeight) {
-            setScrollOffset(selectedIndex - effectiveMaxHeight + 1);
-        }
-    }, [selectedIndex, effectiveMaxHeight, scrollOffset]);
-    // Reset scroll when items change drastically (e.g. search)
-    useEffect(() => {
-        if (scrollOffset >= items.length) {
-            setScrollOffset(Math.max(0, items.length - effectiveMaxHeight));
-        }
-    }, [items.length, scrollOffset, 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 (_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) }, getKey ? getKey(item, originalIndex) : `${originalIndex}`))), showScrollIndicators && hasItemsBelow && (_jsxs("text", { fg: "cyan", children: ["\u2193 ", itemsBelow, " more"] }))] }));
-}
-export default ScrollableList;

package/src/ui/components/SearchInput.js

@@ -1,19 +0,0 @@
-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/StyledText.js

@@ -1,39 +0,0 @@
-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/TabBar.js

@@ -1,19 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
-const TABS = [
-    { key: "1", label: "Plugins", screen: "plugins" },
-    { key: "2", label: "Skills", screen: "skills" },
-    { key: "3", label: "MCP", screen: "mcp" },
-    { key: "4", label: "Settings", screen: "settings" },
-    { key: "5", label: "Profiles", screen: "profiles" },
-    { key: "6", label: "CLI", screen: "cli-tools" },
-    { key: "7", label: "Git State", screen: "gitignore" },
-    { key: "8", label: "Alias", screen: "alias" },
-];
-export function TabBar({ currentScreen }) {
-    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/layout/FooterHints.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "@opentui/react/jsx-runtime";
-const KEY_BG = "#3f3f46";
-const KEY_FG = "#fafafa";
-const LABEL_FG = "gray";
-const GAP = "   ";
-/**
- * Render a row of footer hints as key badges + labels:
- *
- *   [↑↓] move   [U] update   [/] search
- *
- * Each key is shown in a chip so it reads as a pressable key, not prose.
- * Shared across screens so every footer looks the same.
- */
-export function FooterHints({ hints }) {
-    const nodes = [];
-    hints.forEach((hint, i) => {
-        if (i > 0) {
-            nodes.push(_jsx("span", { fg: LABEL_FG, children: GAP }, `gap-${i}`));
-        }
-        nodes.push(_jsx("span", { bg: KEY_BG, fg: KEY_FG, children: ` ${hint.keys.join("")} ` }, `k-${i}`));
-        nodes.push(_jsx("span", { fg: LABEL_FG, children: ` ${hint.label}` }, `l-${i}`));
-    });
-    return _jsx("text", { children: nodes });
-}
-/** Convenience for callers that already have a node: same as <FooterHints>. */
-export function renderFooterHints(hints) {
-    return _jsx(FooterHints, { hints: hints });
-}
-export default FooterHints;

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

@@ -1,6 +0,0 @@
-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/ProgressBar.js

@@ -1,14 +0,0 @@
-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/ScopeTabs.js

@@ -1,6 +0,0 @@
-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;

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

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useDimensions } from "../../state/DimensionsContext.js";
-import { TabBar } from "../TabBar.js";
-import { FooterHints } from "./FooterHints.js";
-const HEADER_COLOR = "#7e57c2";
-export function ScreenLayout({ title, subtitle, currentScreen, search, statusLine, footerHints, listPanel, detailPanel, }) {
-    const dimensions = useDimensions();
-    const hasSearchBar = search && (search.isActive || search.query);
-    // Fixed chrome: top line + tabs + line + header + separator + footer = 6
-    // Search bar adds 1 when active
-    const fixedHeight = 6 + (hasSearchBar ? 1 : 0);
-    const panelHeight = Math.max(5, dimensions.contentHeight - fixedHeight);
-    const lineWidth = Math.max(10, dimensions.terminalWidth - 4);
-    return (_jsxs("box", { flexDirection: "column", height: dimensions.contentHeight, children: [_jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#333333", children: "─".repeat(lineWidth) }) }), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx(TabBar, { currentScreen: currentScreen }) }), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#333333", children: "─".repeat(lineWidth) }) }), _jsxs("box", { height: 1, paddingLeft: 1, paddingRight: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsx("text", { fg: HEADER_COLOR, children: _jsx("strong", { children: title }) }), subtitle && _jsx("text", { fg: "gray", children: subtitle }), !subtitle && statusLine ? statusLine : null] }), hasSearchBar && (_jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: search.isActive ? (_jsxs("text", { children: [_jsx("span", { fg: "green", children: "Filter: " }), _jsx("span", { fg: "white", children: search.query }), _jsx("span", { bg: "white", fg: "black", children: " " })] })) : (_jsxs("text", { children: [_jsx("span", { fg: "green", children: "Filter: " }), _jsx("span", { fg: "yellow", children: search.query }), _jsx("span", { fg: "gray", children: "  (Esc to clear)" })] })) })), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#444444", children: "─".repeat(lineWidth) }) }), _jsxs("box", { flexDirection: "row", height: panelHeight, children: [_jsx("box", { flexDirection: "column", width: "49%", height: panelHeight, paddingRight: 1, children: listPanel }), _jsx("box", { flexDirection: "column", width: 1, height: panelHeight, children: _jsx("text", { fg: "#444444", children: "│".repeat(panelHeight) }) }), _jsx("box", { width: "50%", height: panelHeight, paddingLeft: 1, children: _jsx("scrollbox", { height: panelHeight, scrollY: true, scrollX: false, children: _jsx("box", { flexDirection: "column", children: detailPanel }) }) })] }), _jsx("box", { height: 1, paddingLeft: 1, children: Array.isArray(footerHints) ? (_jsx(FooterHints, { hints: footerHints })) : typeof footerHints === "string" ? (_jsx("text", { fg: "gray", children: footerHints })) : (footerHints) })] }));
-}
-export default ScreenLayout;

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

@@ -1,5 +0,0 @@
-export { Panel } from "./Panel.js";
-export { ScopeTabs } from "./ScopeTabs.js";
-export { ProgressBar } from "./ProgressBar.js";
-export { ScreenLayout } from "./ScreenLayout.js";
-export { FooterHints, renderFooterHints, } from "./FooterHints.js";

package/src/ui/components/modals/ConfirmModal.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useKeyboard } from "../../hooks/useKeyboard.js";
-export function ConfirmModal({ title, message, onConfirm, onCancel, }) {
-    useKeyboard((key) => {
-        if (key.name === "y" || key.name === "Y") {
-            onConfirm();
-        }
-        else if (key.name === "n" || key.name === "N" || key.name === "escape") {
-            onCancel();
-        }
-    });
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#EDEDED", children: _jsx("strong", { children: title }) }) }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#A1A1AA", children: message }) }), _jsxs("box", { marginTop: 1, flexDirection: "row", children: [_jsx("text", { fg: "#71717A", children: "Press " }), _jsx("text", { fg: "#EDEDED", children: "Y" }), _jsx("text", { fg: "#71717A", children: " to confirm \u2022 " }), _jsx("text", { fg: "#EDEDED", children: "N" }), _jsx("text", { fg: "#71717A", children: " to cancel" })] })] }));
-}
-export default ConfirmModal;

package/src/ui/components/modals/InputModal.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-export function InputModal({ title, label, defaultValue = "", onSubmit, }) {
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#EDEDED", children: _jsx("strong", { children: title }) }) }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#A1A1AA", children: label }) }), _jsx("box", { border: true, borderStyle: "rounded", borderColor: "#3F3F46", paddingLeft: 1, paddingRight: 1, width: 54, children: _jsx("input", { value: defaultValue, onSubmit: onSubmit, focused: true, width: 50 }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#71717A", children: "\u21B5 to confirm \u2022 Esc to cancel" }) })] }));
-}
-export default InputModal;

package/src/ui/components/modals/LoadingModal.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useState, useEffect } from "react";
-const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-export function LoadingModal({ message }) {
-    const [frame, setFrame] = useState(0);
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setFrame((prev) => (prev + 1) % SPINNER_FRAMES.length);
-        }, 80);
-        return () => clearInterval(interval);
-    }, []);
-    const lines = message.split("\n");
-    const mainMessage = lines[0];
-    const detail = lines.slice(1).join("\n");
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, children: [_jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: "#A1A1AA", children: SPINNER_FRAMES[frame] }), _jsxs("text", { fg: "#EDEDED", children: [" ", mainMessage] })] }), detail ? (_jsx("box", { marginTop: 0, paddingLeft: 2, children: _jsx("text", { fg: "#525252", children: detail }) })) : null] }));
-}
-export default LoadingModal;

package/src/ui/components/modals/MessageModal.js

@@ -1,16 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
-import { useKeyboard } from "../../hooks/useKeyboard.js";
-const variantConfig = {
-    info: { icon: "ℹ", color: "#60A5FA" },
-    success: { icon: "✓", color: "#4ADE80" },
-    error: { icon: "✗", color: "#F87171" },
-};
-export function MessageModal({ title, message, variant, onDismiss, }) {
-    const config = variantConfig[variant];
-    useKeyboard(() => {
-        // Any key dismisses
-        onDismiss();
-    });
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsxs("box", { marginBottom: 1, children: [_jsxs("text", { fg: config.color, children: [config.icon, " "] }), _jsx("text", { fg: "#EDEDED", children: _jsx("strong", { children: title }) })] }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#A1A1AA", children: message }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#71717A", children: "Press any key to continue" }) })] }));
-}
-export default MessageModal;

package/src/ui/components/modals/ModalContainer.js

@@ -1,137 +0,0 @@
-import { jsx as _jsx } from "@opentui/react/jsx-runtime";
-import React, { useState } from "react";
-import { useApp } from "../../state/AppContext.js";
-import { useKeyboard } from "../../hooks/useKeyboard.js";
-import { ConfirmModal } from "./ConfirmModal.js";
-import { InputModal } from "./InputModal.js";
-import { SelectModal } from "./SelectModal.js";
-import { MessageModal } from "./MessageModal.js";
-import { LoadingModal } from "./LoadingModal.js";
-import { VersionMismatchModal } from "./VersionMismatchModal.js";
-/**
- * Container that renders the active modal as an overlay
- * Handles ALL keyboard events when a modal is open to avoid
- * conflicts with multiple useKeyboard hooks in child components
- *
- * Input modal: Enter/Escape handled by OpenTUI <input> onSubmit + ModalContainer escape
- * Select modal: keyboard fully handled here (index tracking + Enter/arrows)
- */
-export function ModalContainer() {
-    const { state } = useApp();
-    const { modal } = state;
-    // Track select modal index here (lifted from SelectModal)
-    const [selectIndex, setSelectIndex] = useState(0);
-    // Reset select index when modal changes
-    const modalRef = React.useRef(modal);
-    if (modal !== modalRef.current) {
-        modalRef.current = modal;
-        if (modal?.type === "select") {
-            setSelectIndex(modal.defaultIndex ?? 0);
-        }
-        else if (modal?.type === "version-mismatch") {
-            setSelectIndex(0);
-        }
-    }
-    // Handle keyboard events for modals
-    useKeyboard((key) => {
-        if (!modal)
-            return;
-        if (modal.type === "loading")
-            return;
-        // Escape — close any modal
-        if (key.name === "escape") {
-            if (modal.type === "confirm")
-                modal.onCancel();
-            else if (modal.type === "input")
-                modal.onCancel();
-            else if (modal.type === "select")
-                modal.onCancel();
-            else if (modal.type === "message")
-                modal.onDismiss();
-            else if (modal.type === "version-mismatch")
-                modal.onDismiss();
-            return;
-        }
-        // 'q' to close — but NOT for input modals (need to type 'q')
-        if (key.name === "q" && modal.type !== "input") {
-            if (modal.type === "confirm")
-                modal.onCancel();
-            else if (modal.type === "select")
-                modal.onCancel();
-            else if (modal.type === "message")
-                modal.onDismiss();
-            else if (modal.type === "version-mismatch")
-                modal.onDismiss();
-            return;
-        }
-        // Input modal — let OpenTUI <input> handle Enter via onSubmit
-        if (modal.type === "input") {
-            return;
-        }
-        // Select modal — handle navigation and selection
-        if (modal.type === "select") {
-            if (key.name === "return" || key.name === "enter") {
-                modal.onSelect(modal.options[selectIndex].value);
-            }
-            else if (key.name === "up" || key.name === "k") {
-                setSelectIndex((prev) => Math.max(0, prev - 1));
-            }
-            else if (key.name === "down" || key.name === "j") {
-                setSelectIndex((prev) => Math.min(modal.options.length - 1, prev + 1));
-            }
-            return;
-        }
-        // Version-mismatch modal — handle navigation and selection (2 options)
-        if (modal.type === "version-mismatch") {
-            if (key.name === "return" || key.name === "enter") {
-                if (selectIndex === 0)
-                    modal.onFix();
-                else
-                    modal.onDismiss();
-            }
-            else if (key.name === "up" || key.name === "k") {
-                setSelectIndex((prev) => Math.max(0, prev - 1));
-            }
-            else if (key.name === "down" || key.name === "j") {
-                setSelectIndex((prev) => Math.min(1, prev + 1));
-            }
-            return;
-        }
-        // Message modal — Enter to dismiss
-        if (modal.type === "message") {
-            if (key.name === "return" || key.name === "enter") {
-                modal.onDismiss();
-            }
-        }
-        // Confirm modal — Enter to confirm
-        if (modal.type === "confirm") {
-            if (key.name === "return" || key.name === "enter") {
-                modal.onConfirm();
-            }
-        }
-    });
-    if (!modal) {
-        return null;
-    }
-    const renderModal = () => {
-        switch (modal.type) {
-            case "confirm":
-                return (_jsx(ConfirmModal, { title: modal.title, message: modal.message, onConfirm: modal.onConfirm, onCancel: modal.onCancel }));
-            case "input":
-                return (_jsx(InputModal, { title: modal.title, label: modal.label, defaultValue: modal.defaultValue, onSubmit: modal.onSubmit, onCancel: modal.onCancel }));
-            case "select":
-                return (_jsx(SelectModal, { title: modal.title, message: modal.message, options: modal.options, defaultIndex: selectIndex, onSelect: modal.onSelect, onCancel: modal.onCancel }));
-            case "message":
-                return (_jsx(MessageModal, { title: modal.title, message: modal.message, variant: modal.variant, onDismiss: modal.onDismiss }));
-            case "loading":
-                return _jsx(LoadingModal, { message: modal.message });
-            case "version-mismatch":
-                return (_jsx(VersionMismatchModal, { mismatches: modal.mismatches, defaultIndex: selectIndex }));
-            default:
-                return null;
-        }
-    };
-    // Center the modal on screen
-    return (_jsx("box", { position: "absolute", width: "100%", height: "100%", justifyContent: "center", alignItems: "center", children: renderModal() }));
-}
-export default ModalContainer;

package/src/ui/components/modals/SelectModal.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useDimensions } from "../../state/DimensionsContext.js";
-export function SelectModal({ title, message, options, defaultIndex, onSelect: _onSelect, onCancel: _onCancel, }) {
-    // Keyboard handling is done by ModalContainer
-    // defaultIndex is the live selectedIndex from ModalContainer state
-    const selectedIndex = defaultIndex ?? 0;
-    // Size to terminal width: 60% of available, clamped to [50, 90].
-    // Previously hardcoded at 50, which forced descriptions and long item
-    // labels (e.g. plugin specs) to wrap mid-sentence and produce orphan
-    // punctuation lines.
-    const dimensions = useDimensions();
-    const width = Math.max(50, Math.min(90, Math.floor(dimensions.terminalWidth * 0.6)));
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: width, children: [_jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#EDEDED", children: _jsx("strong", { children: title }) }) }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#A1A1AA", children: message }) }), _jsx("box", { flexDirection: "column", paddingLeft: 1, children: options.map((option, idx) => {
-                    const isSelected = idx === selectedIndex;
-                    return (_jsxs("text", { fg: isSelected ? "#F4F4F5" : "#A1A1AA", children: [_jsx("span", { fg: isSelected ? "#F4F4F5" : "#71717A", children: isSelected ? "❯ " : "  " }), isSelected ? _jsx("strong", { children: option.label }) : option.label] }, option.value));
-                }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#71717A", children: "\u2191\u2193 Select \u2022 \u21B5 Confirm \u2022 Esc Cancel" }) })] }));
-}
-export default SelectModal;