claudeup 3.7.2 → 3.8.0

package/src/types/index.ts

@@ -73,6 +73,15 @@ export interface MarketplaceSource {
 	autoUpdate?: boolean; // Enable auto-update for this marketplace (default: true for new marketplaces)
 }
 
+export interface ClaudeHookEntry {
+	type: string;
+	command: string;
+}
+
+export interface ClaudeHookGroup {
+	hooks: ClaudeHookEntry[];
+}
+
 export interface ClaudeSettings {
 	enabledMcpServers?: Record<string, boolean>;
 	mcpServers?: Record<string, McpServerConfig>;
@@ -80,6 +89,7 @@ export interface ClaudeSettings {
 	extraKnownMarketplaces?: Record<string, MarketplaceSource>;
 	installedPluginVersions?: Record<string, string>;
 	statusLine?: string;
+	hooks?: Record<string, ClaudeHookGroup[]>;
 }
 
 export interface McpServerConfig {
@@ -139,3 +149,27 @@ export interface InstalledPluginsRegistry {
 	version: number;
 	plugins: Record<string, InstalledPluginEntry[]>;
 }
+
+// ─── Plugin Profile Types ──────────────────────────────────────────────────────
+
+export interface Profile {
+	name: string;
+	plugins: Record<string, boolean>;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface ProfilesFile {
+	version: number;
+	profiles: Record<string, Profile>;
+}
+
+/** A profile with its id and scope, as used in UI lists */
+export interface ProfileEntry {
+	id: string;
+	name: string;
+	plugins: Record<string, boolean>;
+	createdAt: string;
+	updatedAt: string;
+	scope: "user" | "project";
+}

package/src/ui/App.js

@@ -5,7 +5,7 @@ import fs from "node:fs";
 import { AppProvider, useApp, useNavigation, useModal, } from "./state/AppContext.js";
 import { DimensionsProvider, useDimensions, } from "./state/DimensionsContext.js";
 import { ModalContainer } from "./components/modals/index.js";
-import { PluginsScreen, McpScreen, McpRegistryScreen, StatusLineScreen, EnvVarsScreen, CliToolsScreen, ModelSelectorScreen, } from "./screens/index.js";
+import { PluginsScreen, McpScreen, McpRegistryScreen, SettingsScreen, CliToolsScreen, ModelSelectorScreen, ProfilesScreen, } from "./screens/index.js";
 import { repairAllMarketplaces } from "../services/local-marketplace.js";
 import { migrateMarketplaceRename } from "../services/claude-settings.js";
 import { checkForUpdates, getCurrentVersion, } from "../services/version-check.js";
@@ -26,14 +26,14 @@ function Router() {
             return _jsx(McpScreen, {});
         case "mcp-registry":
             return _jsx(McpRegistryScreen, {});
-        case "statusline":
-            return _jsx(StatusLineScreen, {});
-        case "env-vars":
-            return _jsx(EnvVarsScreen, {});
+        case "settings":
+            return _jsx(SettingsScreen, {});
         case "cli-tools":
             return _jsx(CliToolsScreen, {});
         case "model-selector":
             return _jsx(ModelSelectorScreen, {});
+        case "profiles":
+            return _jsx(ProfilesScreen, {});
         default:
             return _jsx(PluginsScreen, {});
     }
@@ -80,10 +80,10 @@ function GlobalKeyHandler({ onDebugToggle, onExit, }) {
             "plugins",
             "mcp",
             "mcp-registry",
-            "statusline",
-            "env-vars",
+            "settings",
             "cli-tools",
             "model-selector",
+            "profiles",
         ].includes(state.currentRoute.screen);
         if (isTopLevel) {
             if (input === "1")
@@ -91,19 +91,19 @@ function GlobalKeyHandler({ onDebugToggle, onExit, }) {
             else if (input === "2")
                 navigateToScreen("mcp");
             else if (input === "3")
-                navigateToScreen("statusline");
+                navigateToScreen("settings");
             else if (input === "4")
-                navigateToScreen("env-vars");
-            else if (input === "5")
                 navigateToScreen("cli-tools");
+            else if (input === "5")
+                navigateToScreen("profiles");
             // Tab navigation cycling
             if (key.tab) {
                 const screens = [
                     "plugins",
                     "mcp",
-                    "statusline",
-                    "env-vars",
+                    "settings",
                     "cli-tools",
+                    "profiles",
                 ];
                 const currentIndex = screens.indexOf(state.currentRoute.screen);
                 if (currentIndex !== -1) {
@@ -138,9 +138,9 @@ function GlobalKeyHandler({ onDebugToggle, onExit, }) {
   ?             This help
 
 Quick Navigation
-  1  Plugins      4  Env Vars
-  2  MCP Servers  5  CLI Tools
-  3  Status Line
+  1  Plugins      4  CLI Tools
+  2  MCP Servers  5  Profiles
+  3  Settings
 
 Plugin Actions
   u  Update        d  Uninstall
@@ -157,7 +157,7 @@ MCP Servers
  * UpdateBanner Component
  * Shows version update notification
  */
-function UpdateBanner({ result, }) {
+function UpdateBanner({ result }) {
     if (!result.updateAvailable)
         return null;
     return (_jsxs("box", { paddingLeft: 1, paddingRight: 1, children: [_jsx("text", { bg: "yellow", fg: "black", children: _jsx("strong", { children: " UPDATE " }) }), _jsxs("text", { fg: "yellow", children: [" ", "v", result.currentVersion, " \u2192 v", result.latestVersion] }), _jsx("text", { fg: "gray", children: " Run: " }), _jsx("text", { fg: "cyan", children: "npm i -g claudeup" })] }));
@@ -183,8 +183,7 @@ function AppContentInner({ showDebug, onDebugToggle, updateInfo, onExit, }) {
             state: { message: "Scanning marketplaces..." },
         });
         // Migrate old marketplace names → magus (idempotent), then repair plugin.json files
-        migrateMarketplaceRename()
-            .catch(() => { }); // non-blocking, best-effort
+        migrateMarketplaceRename().catch(() => { }); // non-blocking, best-effort
         repairAllMarketplaces()
             .then(async () => {
             dispatch({ type: "HIDE_PROGRESS" });

package/src/ui/App.tsx

@@ -16,10 +16,10 @@ import {
 	PluginsScreen,
 	McpScreen,
 	McpRegistryScreen,
-	StatusLineScreen,
-	EnvVarsScreen,
+	SettingsScreen,
 	CliToolsScreen,
 	ModelSelectorScreen,
+	ProfilesScreen,
 } from "./screens/index.js";
 import type { Screen } from "./state/types.js";
 import { repairAllMarketplaces } from "../services/local-marketplace.js";
@@ -49,14 +49,14 @@ function Router() {
 			return <McpScreen />;
 		case "mcp-registry":
 			return <McpRegistryScreen />;
-		case "statusline":
-			return <StatusLineScreen />;
-		case "env-vars":
-			return <EnvVarsScreen />;
+		case "settings":
+			return <SettingsScreen />;
 		case "cli-tools":
 			return <CliToolsScreen />;
 		case "model-selector":
 			return <ModelSelectorScreen />;
+		case "profiles":
+			return <ProfilesScreen />;
 		default:
 			return <PluginsScreen />;
 	}
@@ -112,27 +112,27 @@ function GlobalKeyHandler({
 			"plugins",
 			"mcp",
 			"mcp-registry",
-			"statusline",
-			"env-vars",
+			"settings",
 			"cli-tools",
 			"model-selector",
+			"profiles",
 		].includes(state.currentRoute.screen);
 
 		if (isTopLevel) {
 			if (input === "1") navigateToScreen("plugins");
 			else if (input === "2") navigateToScreen("mcp");
-			else if (input === "3") navigateToScreen("statusline");
-			else if (input === "4") navigateToScreen("env-vars");
-			else if (input === "5") navigateToScreen("cli-tools");
+			else if (input === "3") navigateToScreen("settings");
+			else if (input === "4") navigateToScreen("cli-tools");
+			else if (input === "5") navigateToScreen("profiles");
 
 			// Tab navigation cycling
 			if (key.tab) {
 				const screens: Screen[] = [
 					"plugins",
 					"mcp",
-					"statusline",
-					"env-vars",
+					"settings",
 					"cli-tools",
+					"profiles",
 				];
 				const currentIndex = screens.indexOf(
 					state.currentRoute.screen as Screen,
@@ -171,9 +171,9 @@ function GlobalKeyHandler({
   ?             This help
 
 Quick Navigation
-  1  Plugins      4  Env Vars
-  2  MCP Servers  5  CLI Tools
-  3  Status Line
+  1  Plugins      4  CLI Tools
+  2  MCP Servers  5  Profiles
+  3  Settings
 
 Plugin Actions
   u  Update        d  Uninstall
@@ -194,13 +194,11 @@ MCP Servers
  * UpdateBanner Component
  * Shows version update notification
  */
-function UpdateBanner({
-	result,
-}: { result: VersionCheckResult }) {
+function UpdateBanner({ result }: { result: VersionCheckResult }) {
 	if (!result.updateAvailable) return null;
 
 	return (
-		<box paddingLeft={1} paddingRight={1} >
+		<box paddingLeft={1} paddingRight={1}>
 			<text bg="yellow" fg="black">
 				<strong> UPDATE </strong>
 			</text>
@@ -266,8 +264,7 @@ function AppContentInner({
 		});
 
 		// Migrate old marketplace names → magus (idempotent), then repair plugin.json files
-		migrateMarketplaceRename()
-			.catch(() => {}); // non-blocking, best-effort
+		migrateMarketplaceRename().catch(() => {}); // non-blocking, best-effort
 
 		repairAllMarketplaces()
 			.then(async () => {
@@ -295,7 +292,8 @@ function AppContentInner({
 			<box
 				flexDirection="column"
 				height={dimensions.contentHeight}
-				paddingLeft={1} paddingRight={1}
+				paddingLeft={1}
+				paddingRight={1}
 			>
 				<Router />
 			</box>

package/src/ui/components/TabBar.js

@@ -1,13 +1,13 @@
 import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
-import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
+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' },
+    { key: "1", label: "Plugins", screen: "plugins" },
+    { key: "2", label: "MCP", screen: "mcp" },
+    { key: "3", label: "Settings", screen: "settings" },
+    { key: "4", label: "CLI", screen: "cli-tools" },
+    { key: "5", label: "Profiles", screen: "profiles" },
 ];
-export function TabBar({ currentScreen, onTabChange, }) {
+export function TabBar({ currentScreen, onTabChange }) {
     // Handle number key shortcuts (1-5)
     useKeyboardHandler((input, key) => {
         if (!onTabChange)
@@ -32,7 +32,7 @@ export function TabBar({ currentScreen, onTabChange, }) {
     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));
+            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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
-import type { Screen } from '../state/types.js';
+import React from "react";
+import { useKeyboardHandler } from "../hooks/useKeyboardHandler";
+import type { Screen } from "../state/types.js";
 
 interface Tab {
 	key: string;
@@ -9,11 +9,11 @@ interface Tab {
 }
 
 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' },
+	{ key: "1", label: "Plugins", screen: "plugins" },
+	{ key: "2", label: "MCP", screen: "mcp" },
+	{ key: "3", label: "Settings", screen: "settings" },
+	{ key: "4", label: "CLI", screen: "cli-tools" },
+	{ key: "5", label: "Profiles", screen: "profiles" },
 ];
 
 interface TabBarProps {
@@ -21,10 +21,7 @@ interface TabBarProps {
 	onTabChange?: (screen: Screen) => void;
 }
 
-export function TabBar({
-	currentScreen,
-	onTabChange,
-}: TabBarProps) {
+export function TabBar({ currentScreen, onTabChange }: TabBarProps) {
 	// Handle number key shortcuts (1-5)
 	useKeyboardHandler((input, key) => {
 		if (!onTabChange) return;
@@ -61,23 +58,21 @@ export function TabBar({
 							<box>
 								<text bg="#7e57c2" fg="white">
 									<strong>
-										{' '}
-										{tab.key}:{tab.label}{' '}
+										{" "}
+										{tab.key}:{tab.label}{" "}
 									</strong>
 								</text>
 							</box>
 						) : (
 							<box>
 								<text fg="gray">
-									{' '}
-									{tab.key}:{tab.label}{' '}
+									{" "}
+									{tab.key}:{tab.label}{" "}
 								</text>
 							</box>
 						)}
 						{/* Separator */}
-						{!isLast && (
-							<text fg="#666666">│</text>
-						)}
+						{!isLast && <text fg="#666666">│</text>}
 					</box>
 				);
 			})}

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

@@ -1,21 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
 import { useDimensions } from "../../state/DimensionsContext.js";
 import { TabBar } from "../TabBar.js";
 const HEADER_COLOR = "#7e57c2";
 export function ScreenLayout({ title, subtitle, currentScreen, search, statusLine, footerHints, listPanel, detailPanel, }) {
     const dimensions = useDimensions();
-    // Calculate panel heights
-    // Header: 4 lines (border + title + status/search + border)
-    // Footer: 2 lines (border-top + content)
-    const headerHeight = 4;
-    const footerHeight = 2;
-    const panelHeight = Math.max(5, dimensions.contentHeight - headerHeight - footerHeight);
-    return (_jsxs("box", { flexDirection: "column", height: dimensions.contentHeight, children: [_jsxs("box", { flexDirection: "column", border: true, borderStyle: "single", borderColor: HEADER_COLOR, padding: 1, marginBottom: 0, children: [_jsxs("box", { flexDirection: "row", justifyContent: "space-between", children: [_jsx("text", { fg: HEADER_COLOR, children: _jsx("strong", { children: title }) }), subtitle && _jsx("text", { fg: "gray", children: subtitle })] }), _jsx("box", { flexDirection: "row", marginTop: 0, children: search ? (
-                        // Search mode
-                        _jsxs(_Fragment, { children: [_jsx("text", { fg: "green", children: "> " }), search.isActive ? (_jsxs(_Fragment, { children: [_jsx("text", { fg: "white", children: search.query }), _jsx("text", { bg: "white", fg: "black", children: " " })] })) : (_jsx("text", { fg: "gray", children: search.query || search.placeholder || "/" }))] })) : statusLine ? (
-                        // Custom status line
-                        statusLine) : (
-                        // Default empty status
-                        _jsx("text", { fg: "gray", children: "\u2500" })) })] }), _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", { flexDirection: "column", width: "50%", height: panelHeight, paddingLeft: 1, children: detailPanel })] }), _jsxs("box", { height: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsx("text", { fg: "gray", children: footerHints }), _jsx(TabBar, { currentScreen: currentScreen })] })] }));
+    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", { flexDirection: "column", width: "50%", height: panelHeight, paddingLeft: 1, children: detailPanel })] }), _jsx("box", { height: 1, paddingLeft: 1, children: _jsx("text", { fg: "gray", children: footerHints }) })] }));
 }
 export default ScreenLayout;

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

@@ -43,60 +43,62 @@ export function ScreenLayout({
 }: ScreenLayoutProps) {
 	const dimensions = useDimensions();
 
-	// Calculate panel heights
-	// Header: 4 lines (border + title + status/search + border)
-	// Footer: 2 lines (border-top + content)
-	const headerHeight = 4;
-	const footerHeight = 2;
-	const panelHeight = Math.max(
-		5,
-		dimensions.contentHeight - headerHeight - footerHeight,
-	);
+	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 (
 		<box flexDirection="column" height={dimensions.contentHeight}>
-			{/* Header */}
-			<box
-				flexDirection="column"
-				border
-				borderStyle="single"
-				borderColor={HEADER_COLOR}
-				padding={1}
-				marginBottom={0}
-			>
-				{/* Title row */}
-				<box flexDirection="row" justifyContent="space-between">
-					<text fg={HEADER_COLOR}>
-						<strong>{title}</strong>
-					</text>
-					{subtitle && <text fg="gray">{subtitle}</text>}
-				</box>
+			{/* Line above tabs */}
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<text fg="#333333">{"─".repeat(lineWidth)}</text>
+			</box>
+
+			{/* Tab bar */}
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TabBar currentScreen={currentScreen} />
+			</box>
+
+			{/* Line below tabs */}
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<text fg="#333333">{"─".repeat(lineWidth)}</text>
+			</box>
 
-				{/* Status/Search row - always present */}
-				<box flexDirection="row" marginTop={0}>
-					{search ? (
-						// Search mode
-						<>
-							<text fg="green">{"> "}</text>
-							{search.isActive ? (
-								<>
-									<text fg="white">{search.query}</text>
-									<text bg="white" fg="black"> </text>
-								</>
-							) : (
-								<text fg="gray">
-									{search.query || search.placeholder || "/"}
-								</text>
-							)}
-						</>
-					) : statusLine ? (
-						// Custom status line
-						statusLine
+			{/* Header — title on left, subtitle/status on right */}
+			<box height={1} paddingLeft={1} paddingRight={1} flexDirection="row" justifyContent="space-between">
+				<text fg={HEADER_COLOR}>
+					<strong>{title}</strong>
+				</text>
+				{subtitle && <text fg="gray">{subtitle}</text>}
+				{!subtitle && statusLine ? statusLine : null}
+			</box>
+
+			{/* Search bar — own line, only when active */}
+			{hasSearchBar && (
+				<box height={1} paddingLeft={1} paddingRight={1}>
+					{search.isActive ? (
+						<text>
+							<span fg="green">{"Filter: "}</span>
+							<span fg="white">{search.query}</span>
+							<span bg="white" fg="black"> </span>
+						</text>
 					) : (
-						// Default empty status
-						<text fg="gray">─</text>
+						<text>
+							<span fg="green">{"Filter: "}</span>
+							<span fg="yellow">{search.query}</span>
+							<span fg="gray">  (Esc to clear)</span>
+						</text>
 					)}
 				</box>
+			)}
+
+			{/* Separator below header */}
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<text fg="#444444">{"─".repeat(lineWidth)}</text>
 			</box>
 
 			{/* Main content area */}
@@ -112,11 +114,7 @@ export function ScreenLayout({
 				</box>
 
 				{/* Vertical separator */}
-				<box
-					flexDirection="column"
-					width={1}
-					height={panelHeight}
-				>
+				<box flexDirection="column" width={1} height={panelHeight}>
 					<text fg="#444444">{"│".repeat(panelHeight)}</text>
 				</box>
 
@@ -132,13 +130,8 @@ export function ScreenLayout({
 			</box>
 
 			{/* Footer */}
-			<box
-				height={1}
-				flexDirection="row"
-				justifyContent="space-between"
-			>
+			<box height={1} paddingLeft={1}>
 				<text fg="gray">{footerHints}</text>
-				<TabBar currentScreen={currentScreen} />
 			</box>
 		</box>
 	);

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

@@ -1,4 +1,5 @@
 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";
@@ -8,25 +9,56 @@ import { MessageModal } from "./MessageModal.js";
 import { LoadingModal } from "./LoadingModal.js";
 /**
  * Container that renders the active modal as an overlay
- * Handles global Escape key to close modals
+ * Handles ALL keyboard events when a modal is open to avoid
+ * conflicts with multiple useKeyboard hooks in child components
  */
 export function ModalContainer() {
     const { state } = useApp();
     const { modal } = state;
-    // Handle Escape key to close modal (except loading)
+    // 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);
+        }
+    }
+    // Handle ALL keyboard events for modals
     useKeyboard((key) => {
-        if (key.name === "escape" && modal && modal.type !== "loading") {
-            // Loading modal cannot be dismissed with Escape
-            if (modal.type === "confirm") {
+        if (!modal)
+            return;
+        if (modal.type === "loading")
+            return;
+        // Escape — close any modal
+        if (key.name === "escape" || key.name === "q") {
+            if (modal.type === "confirm")
                 modal.onCancel();
-            }
-            else if (modal.type === "input") {
+            else if (modal.type === "input")
                 modal.onCancel();
-            }
-            else if (modal.type === "select") {
+            else if (modal.type === "select")
                 modal.onCancel();
+            else if (modal.type === "message")
+                modal.onDismiss();
+            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 (modal.type === "message") {
+            else if (key.name === "down" || key.name === "j") {
+                setSelectIndex((prev) => Math.min(modal.options.length - 1, prev + 1));
+            }
+            return;
+        }
+        // Message modal — Enter to dismiss
+        if (modal.type === "message") {
+            if (key.name === "return" || key.name === "enter") {
                 modal.onDismiss();
             }
         }
@@ -41,7 +73,7 @@ export function ModalContainer() {
             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, onSelect: modal.onSelect, onCancel: modal.onCancel }));
+                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":